Skip to content

Commit

Permalink
Merge pull request #507 from Stremio/fix/settings-design
Browse files Browse the repository at this point in the history
feature: new settings design
  • Loading branch information
tymmesyde authored Nov 9, 2023
2 parents 2f62f57 + f6b7004 commit a282c73
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 11 deletions.
48 changes: 38 additions & 10 deletions src/routes/Settings/Settings.js
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand All @@ -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']}>
Expand Down
24 changes: 23 additions & 1 deletion src/routes/Settings/styles.less
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down

0 comments on commit a282c73

Please sign in to comment.