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

Color input using modal

Browse source
This commit is contained in:
Vladimir Borisov 2019-09-25 18:06:46 +03:00
parent 04e2859d2c
commit 581cf02b96
No known key found for this signature in database
GPG key ID: F9A584BE4FCB6603
2 changed files with 48 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

18
src/routes/Settings/ColorInput/ColorInput.js
View file

@ -1,7 +1,7 @@
const React = require('react');
const classnames = require('classnames');
const PropTypes = require('prop-types');
const Popup = require('stremio/common/Popup');
const { Modal } = require('stremio-router');
const Button = require('stremio/common/Button');
const ColorPicker = require('stremio/common/ColorPicker');
const useBinaryState = require('stremio/common/useBinaryState');
@ -18,15 +18,9 @@ const ColorInput = ({ className, defaultValue, onChange }) => {
closeMenu();
}, [color, onChange]);
return (
<Popup
open={menuOpen}
menuMatchLabelWidth={false}
onCloseRequest={closeMenu}
// onCloseRequest={(event) => event.type === 'scroll' || closeMenu()}
renderLabel={(ref) => (
<Button className={className} ref={ref} title={selectedColor} onClick={toggleMenu} style={{ backgroundColor: selectedColor }}></Button>
)}
renderMenu={() => (
<React.Fragment>
<Button className={className} title={selectedColor} onClick={toggleMenu} style={{ backgroundColor: selectedColor }}></Button>
{menuOpen ? <Modal className={classnames(styles['color-input-modal'])}>
<div className={classnames(styles['color-input-container'])}>
<Button onClick={closeMenu}>
<Icon className={classnames(styles['x-icon'])} icon={'ic_x'} />
@ -35,8 +29,8 @@ const ColorInput = ({ className, defaultValue, onChange }) => {
<ColorPicker className={classnames(styles['color-input'])} value={color} onChange={setColor} />
<Button className={classnames(styles['button'])} onClick={updateColorsAndCloseMenu}>Select</Button>
</div>
)}
/>
</Modal> : null}
</React.Fragment>
);
};

74
src/routes/Settings/ColorInput/styles.less
View file

@ -1,40 +1,50 @@
.color-input-container {
--spacing: 1rem;
padding: var(--spacing);
background-color: var(--color-surfacelighter);
.color-input-modal {
background-color: var(--color-backgrounddarker40);
display: flex;
flex-direction: column;
* {
overflow: visible;
}
.x-icon {
position: absolute;
top: 1rem;
right: 1rem;
width: .8rem;
height: .8rem;
fill: var(--color-surfacedark);
}
.color-input-container {
position: relative;
--spacing: 1rem;
padding: var(--spacing);
background-color: var(--color-surfacelighter);
h1 {
font-size: 1.2rem;
}
margin: auto;
.color-input {
margin: var(--spacing) auto 0 auto;
:global(.a-color-picker-stack):not(:global(.a-color-picker-row-top)) canvas, :global(.a-color-picker-circle) {
border: solid 1px var(--color-surfacedark);
* {
overflow: visible;
}
:global(.a-color-picker-circle) {
box-shadow: 0 0 .2rem var(--color-surfacedark);
}
}
.button {
text-align: center;
color: var(--color-surfacelighter);
background-color: var(--color-signal5);
padding: 1rem;
margin-top: var(--spacing);
.x-icon {
position: absolute;
top: 1rem;
right: 1rem;
width: .8rem;
height: .8rem;
fill: var(--color-surfacedark);
}
h1 {
font-size: 1.2rem;
}
.color-input {
margin: var(--spacing) auto 0 auto;
:global(.a-color-picker-stack):not(:global(.a-color-picker-row-top)) canvas, :global(.a-color-picker-circle) {
border: solid 1px var(--color-surfacedark);
}
:global(.a-color-picker-circle) {
box-shadow: 0 0 .2rem var(--color-surfacedark);
}
}
.button {
text-align: center;
color: var(--color-surfacelighter);
background-color: var(--color-signal5);
padding: 1rem;
margin-top: var(--spacing);
}
}
}