mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-04-19 05:32:09 +00:00
NavBar refactored for readability
This commit is contained in:
NikolaBorislavovHristov
parent
8adb8d5333
commit
76a16c2acb
8 changed files with 43 additions and 40 deletions
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
|
@ -8,7 +8,7 @@ const FullscreenButton = require('./FullscreenButton');
|
|||
const NavMenu = require('./NavMenu');
|
||||
const styles = require('./styles');
|
||||
|
||||
const NavBar = React.memo(({ className, backButton = false, tabs = [], title = '', searchBar = false, addonsButton = false, fullscreenButton = false, navMenu = false }) => {
|
||||
const NavBar = React.memo(({ className, backButton, tabs, title, searchBar, addonsButton, fullscreenButton, navMenu }) => {
|
||||
const backButtonOnClick = React.useCallback(() => {
|
||||
window.history.back();
|
||||
}, []);
|
||||
|
|
|
|||
|
|
@ -35,49 +35,49 @@ const NavMenu = ({ className }) => {
|
|||
}}
|
||||
/>
|
||||
<div className={styles['email-container']}>
|
||||
<div className={styles['label']}>{user.anonymous ? 'Anonymous user' : user.email}</div>
|
||||
<div className={styles['email-label']}>{user.anonymous ? 'Anonymous user' : user.email}</div>
|
||||
</div>
|
||||
<Button className={styles['logout-button-container']} title={user.anonymous ? 'Log in / Sign up' : 'Log out'} href={'#/intro'} onClick={user.logout}>
|
||||
<div className={styles['label']}>{user.anonymous ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
<div className={styles['logout-label']}>{user.anonymous ? 'Log in / Sign up' : 'Log out'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'} onClick={fullscreen ? exitFullscreen : requestFullscreen}>
|
||||
<Icon className={styles['icon']} icon={fullscreen ? 'ic_exit_fullscreen' : 'ic_fullscreen'} />
|
||||
<div className={styles['label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
|
||||
<div className={styles['nav-menu-option-label']}>{fullscreen ? 'Exit Fullscreen' : 'Enter Fullscreen'}</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Settings'} href={'#/settings'}>
|
||||
<Icon className={styles['icon']} icon={'ic_settings'} />
|
||||
<div className={styles['label']}>Settings</div>
|
||||
<div className={styles['nav-menu-option-label']}>Settings</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Addons'} href={'#/addons'}>
|
||||
<Icon className={styles['icon']} icon={'ic_addons'} />
|
||||
<div className={styles['label']}>Addons</div>
|
||||
<div className={styles['nav-menu-option-label']}>Addons</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Remote Control'}>
|
||||
<Icon className={styles['icon']} icon={'ic_remote'} />
|
||||
<div className={styles['label']}>Remote Control</div>
|
||||
<div className={styles['nav-menu-option-label']}>Remote Control</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'}>
|
||||
<Icon className={styles['icon']} icon={'ic_magnet'} />
|
||||
<div className={styles['label']}>Play Magnet Link</div>
|
||||
<div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Help & Feedback'} href={'https://stremio.zendesk.com/'} target={'_blank'}>
|
||||
<Icon className={styles['icon']} icon={'ic_help'} />
|
||||
<div className={styles['label']}>Help & Feedback</div>
|
||||
<div className={styles['nav-menu-option-label']}>Help & Feedback</div>
|
||||
</Button>
|
||||
</div>
|
||||
<div className={styles['nav-menu-section']}>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Terms of Service'} href={'https://www.stremio.com/tos'} target={'_blank'}>
|
||||
<div className={styles['label']}>Terms of Service</div>
|
||||
<div className={styles['nav-menu-option-label']}>Terms of Service</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'Privacy Policy'} href={'https://www.stremio.com/privacy'} target={'_blank'}>
|
||||
<div className={styles['label']}>Privacy Policy</div>
|
||||
<div className={styles['nav-menu-option-label']}>Privacy Policy</div>
|
||||
</Button>
|
||||
<Button className={styles['nav-menu-option-container']} title={'About Stremio'} href={'https://www.stremio.com/'} target={'_blank'}>
|
||||
<div className={styles['label']}>About Stremio</div>
|
||||
<div className={styles['nav-menu-option-label']}>About Stremio</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -14,8 +14,8 @@
|
|||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 1.6rem;
|
||||
height: 1.6rem;
|
||||
width: 50%;
|
||||
height: 50%;
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
|
@ -51,9 +51,11 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0.6rem 0.6rem 0 0;
|
||||
color: var(--color-surfacelighter);
|
||||
|
||||
.label {
|
||||
.email-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
color: var(--color-surfacelighter);
|
||||
user-select: text;
|
||||
}
|
||||
}
|
||||
|
|
@ -64,19 +66,20 @@
|
|||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 0 0.6rem 0.6rem 0;
|
||||
color: var(--color-surface);
|
||||
|
||||
&:hover, &:focus {
|
||||
outline: none;
|
||||
color: var(--color-surfacelighter);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.email-container, .logout-button-container {
|
||||
.label {
|
||||
.logout-label {
|
||||
color: var(--color-surfacelighter);
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.logout-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -96,13 +99,13 @@
|
|||
|
||||
.icon {
|
||||
flex: none;
|
||||
width: 4rem;
|
||||
height: 4rem;
|
||||
padding: 1.3rem;
|
||||
width: 1.4rem;
|
||||
height: 1.4rem;
|
||||
margin: 1.3rem;
|
||||
fill: var(--color-secondarylight);
|
||||
}
|
||||
|
||||
.label {
|
||||
.nav-menu-option-label {
|
||||
flex: 1;
|
||||
max-height: 2.4em;
|
||||
padding-right: 1.3rem;
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@ const routesRegexp = require('stremio/common/routesRegexp');
|
|||
const useLocationHash = require('stremio/common/useLocationHash');
|
||||
const styles = require('./styles');
|
||||
|
||||
const NavTabButton = ({ className, icon = '', label = '', href = '', onClick }) => {
|
||||
const NavTabButton = ({ className, icon, label, href, onClick }) => {
|
||||
const locationHash = useLocationHash();
|
||||
const routeRegexp = React.useMemo(() => {
|
||||
if (typeof href === 'string' && href.length > 0) {
|
||||
|
|
@ -24,7 +24,7 @@ const NavTabButton = ({ className, icon = '', label = '', href = '', onClick })
|
|||
const active = React.useMemo(() => {
|
||||
if (routeRegexp !== null) {
|
||||
const { pathname: locationPathname } = UrlUtils.parse(locationHash.slice(1));
|
||||
return !!routeRegexp.exec(locationPathname);
|
||||
return !!locationPathname.match(routeRegexp);
|
||||
}
|
||||
|
||||
return false;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@ const SearchBar = ({ className }) => {
|
|||
const searchInputRef = React.useRef(null);
|
||||
const [active, query] = React.useMemo(() => {
|
||||
const { pathname: locationPathname, search: locationSearch } = UrlUtils.parse(locationHash.slice(1));
|
||||
const active = !!routesRegexp.search.regexp.exec(locationPathname);
|
||||
const active = !!locationPathname.match(routesRegexp.search.regexp);
|
||||
const queryParams = new URLSearchParams(locationSearch);
|
||||
const query = (active && queryParams.has('q')) ? queryParams.get('q') : '';
|
||||
return [active, query];
|
||||
|
|
@ -56,10 +56,10 @@ const SearchBar = ({ className }) => {
|
|||
/>
|
||||
:
|
||||
<div className={styles['search-input']}>
|
||||
<div className={styles['placeholder']}>Search</div>
|
||||
<div className={styles['placeholder-label']}>Search</div>
|
||||
</div>
|
||||
}
|
||||
<Button className={styles['submit-button']} tabIndex={-1} onClick={queryInputOnSubmit}>
|
||||
<Button className={styles['submit-button-container']} tabIndex={-1} onClick={queryInputOnSubmit}>
|
||||
<Icon className={styles['icon']} icon={'ic_search'} />
|
||||
</Button>
|
||||
</label>
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
&:hover {
|
||||
background-color: var(--color-secondary);
|
||||
|
||||
.submit-button {
|
||||
.submit-button-container {
|
||||
background-color: var(--color-secondarylight);
|
||||
}
|
||||
}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
&:global(.active) {
|
||||
background-color: var(--color-background);
|
||||
|
||||
.submit-button {
|
||||
.submit-button-container {
|
||||
background-color: var(--color-secondarylight);
|
||||
}
|
||||
}
|
||||
|
|
@ -29,14 +29,14 @@
|
|||
color: var(--color-surfacelighter);
|
||||
cursor: text;
|
||||
|
||||
&::placeholder, .placeholder {
|
||||
&::placeholder, .placeholder-label {
|
||||
max-height: 1.2em;
|
||||
opacity: 1;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
}
|
||||
|
||||
.submit-button {
|
||||
.submit-button-container {
|
||||
flex: none;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
|
|
|||
Loading…
Reference in a new issue