Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-04-20 02:22:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Merge pull request #507 from Stremio/fix/settings-design

Browse source 
feature: new settings design
This commit is contained in:
Tim 2023-11-09 15:56:45 +01:00 committed by GitHub
commit a282c73e7c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 61 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/routes/Settings/Settings.js
View file

@ -327,6 +327,10 @@ const Settings = () => {
</div>
<div ref={playerSectionRef} className={styles['section-container']}>
<div className={styles['section-title']}>{ t('SETTINGS_NAV_PLAYER') }</div>
<div className={styles['section-category-container']}>
<Icon className={styles['icon']} name={'subtitles'} />
<div className={styles['label']}>{t('SETTINGS_SECTION_SUBTITLES')}</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SUBTITLES_LANGUAGE') }</div>
@ -386,6 +390,12 @@ const Settings = () => {
{...subtitlesOutlineColorInput}
/>
</div>
</div>
<div className={styles['section-container']}>
<div className={styles['section-category-container']}>
<Icon className={styles['icon']} name={'volume-medium'} />
<div className={styles['label']}>{t('SETTINGS_SECTION_AUDIO')}</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_DEFAULT_AUDIO_TRACK') }</div>
@ -395,6 +405,12 @@ const Settings = () => {
{...audioLanguageSelect}
/>
</div>
</div>
<div className={styles['section-container']}>
<div className={styles['section-category-container']}>
<Icon className={styles['icon']} name={'remote'} />
<div className={styles['label']}>{t('SETTINGS_SECTION_CONTROLS')}</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_SEEK_KEY') }</div>
@ -413,6 +429,23 @@ const Settings = () => {
{...seekShortTimeDurationSelect}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_PLAY_IN_BACKGROUND') }</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
disabled={true}
tabIndex={-1}
{...playInBackgroundCheckbox}
/>
</div>
</div>
<div className={styles['section-container']}>
<div className={styles['section-category-container']}>
<Icon className={styles['icon']} name={'play'} />
<div className={styles['label']}>{t('SETTINGS_SECTION_AUTO_PLAY')}</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('AUTO_PLAY') }</div>
@ -432,16 +465,11 @@ const Settings = () => {
{...nextVideoPopupDurationSelect}
/>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>
<div className={styles['label']}>{ t('SETTINGS_PLAY_IN_BACKGROUND') }</div>
</div>
<Checkbox
className={classnames(styles['option-input-container'], styles['checkbox-container'])}
disabled={true}
tabIndex={-1}
{...playInBackgroundCheckbox}
/>
</div>
<div className={styles['section-container']}>
<div className={styles['section-category-container']}>
<Icon className={styles['icon']} name={'glasses'} />
<div className={styles['label']}>{t('SETTINGS_SECTION_ADVANCED')}</div>
</div>
<div className={styles['option-container']}>
<div className={styles['option-name-container']}>

24
src/routes/Settings/styles.less
View file

@ -95,10 +95,32 @@
align-self: stretch;
font-size: 1.8rem;
line-height: 3.4rem;
margin-bottom: 1rem;
margin-bottom: 3rem;
color: var(--primary-foreground-color);
}
.section-category-container {
display: flex;
flex-direction: row;
align-items: center;
gap: 0 1em;
margin-bottom: 1.5rem;
line-height: 2.4rem;
.label {
flex: none;
font-size: 1.1rem;
color: var(--primary-foreground-color);
}
.icon {
flex: none;
width: 2rem;
height: 2rem;
color: var(--primary-foreground-color);
}
}
.option-container {
flex: none;
align-self: stretch;