Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-08-20 15:36:03 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

update styles of the common components

Browse source
This commit is contained in:
NikolaBorislavovHristov 2019-09-19 18:04:25 +03:00
parent dc259d9cf8
commit fb62f32d32
7 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/common/Button/styles.less
View file

@ -1,9 +1,9 @@
.button-container {
--spatial-navigation-action: focus;
cursor: pointer;
outline-width: var(--focus-outline-size);
outline-color: var(--color-surfacelighter);
outline-offset: calc(-1 * var(--focus-outline-size));
cursor: pointer;
&:focus {
outline-style: solid;

11
src/common/Checkbox/Checkbox.js
View file

@ -7,9 +7,14 @@ const styles = require('./styles');
const Checkbox = React.forwardRef((props, ref) => {
return (
<Button {...props} ref={ref} className={classnames(props.className, styles['checkbox-container'], { 'checked': props.checked })}>
<div className={styles['icon-container']}>
<Icon className={styles['icon']} icon={props.checked ? 'ic_check' : 'ic_box_empty'} />
</div>
{
props.checked ?
<svg className={styles['icon']} viewBox={'0 0 100 100'}>
<Icon x={'10'} y={'10'} width={'80'} height={'80'} icon={'ic_check'} />
</svg>
:
<Icon className={styles['icon']} icon={'ic_box_empty'} />
}
{props.children}
</Button>
);

18
src/common/Checkbox/styles.less
View file

@ -1,20 +1,12 @@
.checkbox-container {
&:global(.checked) {
.icon-container {
padding: calc(0.1 * var(--icon-size));
.icon {
background-color: var(--color-primary);
}
}
.icon-container {
width: var(--icon-size);
height: var(--icon-size);
background-color: var(--icon-background-color);
.icon {
display: block;
width: 100%;
height: 100%;
fill: var(--icon-color);
}
.icon {
display: block;
fill: var(--color-surfacelighter);
}
}

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

@ -4,6 +4,7 @@ const AColorPicker = require('a-color-picker');
const COLOR_FORMAT = 'rgbacss';
// TODO implement custom picker which is keyboard accessible
const ColorPicker = ({ className, value, onChange }) => {
value = AColorPicker.parseColor(value, COLOR_FORMAT);
const pickerRef = React.useRef(null);

16
src/common/Dropdown/Dropdown.js
View file

@ -7,7 +7,8 @@ const Popup = require('stremio/common/Popup');
const useBinaryState = require('stremio/common/useBinaryState');
const styles = require('./styles');
const Dropdown = ({ className, name, selected, options, onSelect }) => {
// TODO rename to multiselect
const Dropdown = ({ className, menuClassName, name, selected, options, onSelect }) => {
const [menuOpen, openMenu, closeMenu, toggleMenu] = useBinaryState(false);
const optionOnClick = React.useCallback((event) => {
if (typeof onSelect === 'function') {
@ -25,15 +26,15 @@ const Dropdown = ({ className, name, selected, options, onSelect }) => {
onCloseRequest={closeMenu}
renderLabel={(ref) => (
<Button ref={ref} className={classnames(className, styles['dropdown-label-container'], { 'active': menuOpen })} title={name} onClick={toggleMenu}>
<div className={styles['dropdown-label']}>
<div className={styles['label']}>
{
Array.isArray(selected) && selected.length > 0 ?
options.reduce((result, { label, value }) => {
options.reduce((labels, { label, value }) => {
if (selected.includes(value)) {
result.push(label);
labels.push(label);
}
return result;
return labels;
}, []).join(', ')
:
name
@ -43,12 +44,12 @@ const Dropdown = ({ className, name, selected, options, onSelect }) => {
</Button>
)}
renderMenu={() => (
<div className={styles['dropdown-menu-container']}>
<div className={classnames(menuClassName, styles['dropdown-menu-container'])}>
{
Array.isArray(options) && options.length > 0 ?
options.map(({ label, value }) => (
<Button key={value} className={classnames(styles['dropdown-option-container'], { 'selected': Array.isArray(selected) && selected.includes(value) })} title={label} data-name={name} data-value={value} onClick={optionOnClick}>
<div className={styles['dropdown-option-label']}>{label}</div>
<div className={styles['label']}>{label}</div>
<Icon className={styles['icon']} icon={'ic_check'} />
</Button>
))
@ -63,6 +64,7 @@ const Dropdown = ({ className, name, selected, options, onSelect }) => {
Dropdown.propTypes = {
className: PropTypes.string,
menuClassName: PropTypes.string,
name: PropTypes.string,
selected: PropTypes.arrayOf(PropTypes.string),
options: PropTypes.arrayOf(PropTypes.shape({

23
src/common/Dropdown/styles.less
View file

@ -5,14 +5,14 @@
padding: 0 1rem;
background-color: var(--color-backgroundlighter);
&:hover {
background-color: var(--color-surfacedarker60);
&:hover, &:focus {
filter: brightness(1.2);
}
&:global(.active) {
background-color: var(--color-surfacelight);
.dropdown-label {
.label {
color: var(--color-backgrounddarker);
}
@ -21,7 +21,7 @@
}
}
.dropdown-label {
.label {
flex: 1;
max-height: 2.4em;
color: var(--color-surfacelighter);
@ -37,27 +37,30 @@
}
.dropdown-menu-container {
background-color: var(--color-backgroundlighter);
.dropdown-option-container {
display: flex;
flex-direction: row;
align-items: center;
padding: 1rem;
background-color: var(--color-backgroundlighter);
&:global(.selected) {
background-color: var(--color-surfacedarker40);
background-color: var(--color-surfacedarker);
.icon {
display: block;
}
}
&:hover {
background-color: var(--color-surfacedarker60);
&:hover, &:focus {
background-color: var(--color-surfacedarker);
&:global(.selected) {
filter: brightness(1.2);
}
}
.dropdown-option-label {
.label {
flex: 1;
max-height: 4.8em;
color: var(--color-surfacelighter);

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

@ -3,6 +3,7 @@ const PropTypes = require('prop-types');
const { Modal } = require('stremio-router');
const styles = require('./styles');
// TODO rename to Popover
const Popup = ({ open, menuMatchLabelWidth, renderLabel, renderMenu, onCloseRequest }) => {
const labelRef = React.useRef(null);
const menuRef = React.useRef(null);