Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

direction prop added to NavTabButton

Browse source
This commit is contained in:
svetlagasheva 2020-01-02 16:51:17 +02:00
parent b365353ded
commit 8d7253ba2e
5 changed files with 30 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/common/HorizontalNavBar/HorizontalNavBar.js
View file

@ -29,6 +29,7 @@ const HorizontalNavBar = React.memo(({ className, backButton, searchBar, addonsB
className={styles['nav-tab-button']}
icon={'ic_back_ios'}
label={'Back'}
direction={'horizontal'}
onClick={backButtonOnClick}
/>
:

5
src/common/NavBar/NavTabButton/NavTabButton.js
View file

@ -5,9 +5,9 @@ const Icon = require('stremio-icons/dom');
const Button = require('stremio/common/Button');
const styles = require('./styles');
const NavTabButton = ({ className, icon, label, href, selected, onClick }) => {
const NavTabButton = ({ className, icon, label, href, selected, direction, onClick }) => {
return (
<Button className={classnames(className, styles['nav-tab-button-container'], { 'selected': selected })} title={label} tabIndex={-1} href={href} onClick={onClick}>
<Button className={classnames(className, styles['nav-tab-button-container'], styles[`nav-tab-button-${direction}`], { 'selected': selected })} title={label} tabIndex={-1} href={href} direction={direction} onClick={onClick}>
{
typeof icon === 'string' && icon.length > 0 ?
<Icon className={styles['icon']} icon={icon} />
@ -30,6 +30,7 @@ NavTabButton.propTypes = {
label: PropTypes.string,
href: PropTypes.string,
selected: PropTypes.bool,
direction: PropTypes.oneOf(['horizontal', 'vertical']),
onClick: PropTypes.func
};

28
src/common/NavBar/NavTabButton/styles.less
View file

@ -1,8 +1,6 @@
.nav-tab-button-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 0 1rem;
&:hover {
background-color: var(--color-secondary);
@ -12,6 +10,31 @@
background-color: var(--color-background);
}
&.nav-tab-button-horizontal {
flex-direction: row;
padding: 0 1rem;
.label {
max-height: 2.4em;
}
}
&.nav-tab-button-vertical {
flex-direction: column;
justify-content: center;
height: var(--nav-bar-size);
padding: 0.5rem;
.icon {
margin: 0 0 0.5rem 0;
}
.label {
max-height: 1.2em;
font-size: 0.75rem;
}
}
.icon {
flex: none;
width: 1.5rem;
@ -26,7 +49,6 @@
.label {
flex: 1;
max-height: 2.4em;
color: var(--color-surfacelighter);
}
}

1
src/common/VerticalNavBar/VerticalNavBar.js
View file

@ -16,6 +16,7 @@ const VerticalNavBar = React.memo(({ className, tabs }) => {
href={href}
icon={icon}
label={label}
direction={'vertical'}
onClick={onClick}
/>
))

17
src/common/VerticalNavBar/styles.less
View file

@ -9,21 +9,4 @@
&::-webkit-scrollbar {
display: none;
}
.nav-tab-button {
display: flex;
flex-direction: column;
justify-content: center;
height: var(--nav-bar-size);
padding: 0.5rem;
> :first-child {
margin: 0 0 0.5rem 0;
}
> :last-child {
max-height: 1.2em;
font-size: 0.75rem;
}
}
}