mirror of
https://github.com/Stremio/stremio-web.git
synced 2026-08-16 03:17:07 +00:00
Settings Page WIP
This commit is contained in:
Vladimir Borisov
parent
753cb52f79
commit
12232e7a40
3 changed files with 265 additions and 282 deletions
|
|
@ -1,9 +1,9 @@
|
|||
import React, { Component } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import Icon from 'stremio-icons/dom';
|
||||
import { Input, Popup, Checkbox } from 'stremio/common';
|
||||
import classnames from 'classnames';
|
||||
import styles from './styles';
|
||||
const React = require('react');
|
||||
const PropTypes = require('prop-types');
|
||||
const classnames = require('classnames');
|
||||
const { TextInput, Button, Dropdown, Checkbox, MainNavBar } = require('stremio/common');
|
||||
const styles = require('./styles');
|
||||
const Input = TextInput
|
||||
|
||||
const SECTIONS_ORDER = {
|
||||
'General': 1,
|
||||
|
|
@ -11,7 +11,7 @@ const SECTIONS_ORDER = {
|
|||
'Streaming': 3
|
||||
};
|
||||
|
||||
class Settings extends Component {
|
||||
class Settings extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
|
|
@ -128,24 +128,6 @@ class Settings extends Component {
|
|||
});
|
||||
}
|
||||
|
||||
activate = (id) => {
|
||||
this.setState(({ inputs }) => ({
|
||||
inputs: inputs.map((input) => ({
|
||||
...input,
|
||||
active: id === input.id
|
||||
}))
|
||||
}));
|
||||
}
|
||||
|
||||
deactivate = (id) => {
|
||||
this.setState(({ inputs }) => ({
|
||||
inputs: inputs.map((input) => ({
|
||||
...input,
|
||||
active: id === input.id ? false : input.active
|
||||
}))
|
||||
}));
|
||||
}
|
||||
|
||||
toggleCheckbox = (id) => {
|
||||
this.setState(({ inputs }) => ({
|
||||
inputs: inputs.map((input) => ({
|
||||
|
|
@ -162,41 +144,29 @@ class Settings extends Component {
|
|||
return {
|
||||
inputs: inputs.map((input) => ({
|
||||
...input,
|
||||
value: data.id === input.id ? data.option : input.value,
|
||||
active: false
|
||||
value: data.name === input.id ? data.value : input.value,
|
||||
}))
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
renderPopup({ ref, activate, deactivate, active, value, id, options, onClick }) {
|
||||
renderDropdown({ value, id, options, onClick}) {
|
||||
options = options.map(o=>({value: o, label: o}))
|
||||
return (
|
||||
<Popup ref={ref} className={'popup-container'} onOpen={activate.bind(null, id)} onClose={deactivate.bind(null, id)}>
|
||||
<Popup.Label>
|
||||
<Input className={classnames(styles['bar-button'], { 'active': active })} type={'button'}>
|
||||
<div className={styles['value']}>{value}</div>
|
||||
<Icon className={styles['icon']} icon={'ic_arrow_down'} />
|
||||
</Input>
|
||||
</Popup.Label>
|
||||
<Popup.Menu>
|
||||
<div className={styles['popup-content']}>
|
||||
{options.map((option) =>
|
||||
<div key={option} className={classnames(styles['option'], { [styles['selected']]: value === option })} data-option={option} data-id={id} onClick={onClick}>{option}</div>
|
||||
)}
|
||||
</div>
|
||||
</Popup.Menu>
|
||||
</Popup>
|
||||
<Dropdown options={options} selected={[value]} name={id} key={id} className={styles['dropdown']} onSelect={onClick} />
|
||||
);
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className={styles['settings-parent-container']}>
|
||||
<MainNavBar className={styles['nav-bar']} />
|
||||
<div className={styles['settings-container']}>
|
||||
<div className={styles['side-menu']}>
|
||||
{this.state.sections.map((section) =>
|
||||
<Input key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: this.state.selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={this.changeSection}>
|
||||
<Button key={section.id} className={classnames(styles['section-label'], { [styles['selected']]: this.state.selectedSectionId === section.id })} type={'button'} data-section={section.id} onClick={this.changeSection}>
|
||||
{section.id}
|
||||
</Input>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<div ref={this.scrollContainerRef} className={styles['scroll-container']} onScroll={this.onScroll}>
|
||||
|
|
@ -223,10 +193,7 @@ class Settings extends Component {
|
|||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['select-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
{this.renderPopup({
|
||||
ref: input.ref,
|
||||
activate: this.activate,
|
||||
deactivate: this.deactivate,
|
||||
{this.renderDropdown({
|
||||
active: input.active,
|
||||
id: input.id,
|
||||
value: input.value,
|
||||
|
|
@ -239,17 +206,18 @@ class Settings extends Component {
|
|||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['link-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<Input ref={input.ref} className={styles['link']} type={input.type} href={input.href} target={'_blank'}>{input.label}</Input>
|
||||
<Button ref={input.ref} className={styles['link']} type={input.type} href={input.href} target={'_blank'}>
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'button') {
|
||||
return (
|
||||
<div key={input.id} className={classnames(styles['input-container'], styles['button-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<Input ref={input.ref} className={styles['button']} type={input.type}>
|
||||
{input.icon ? <Icon className={styles['icon']} icon={input.icon} /> : null}
|
||||
<Button ref={input.ref} className={styles['button']} type={input.type}>
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</Input>
|
||||
</Button>
|
||||
</div>
|
||||
);
|
||||
} else if (input.type === 'checkbox') {
|
||||
|
|
@ -266,7 +234,7 @@ class Settings extends Component {
|
|||
<div key={input.id} className={classnames(styles['input-container'], styles['text-container'])}>
|
||||
{input.header ? <div className={styles['input-header']}>{input.header}</div> : null}
|
||||
<div className={styles['text']}>
|
||||
{input.icon ? <Icon className={styles[input.icon === 'ic_x' ? 'x-icon' : 'icon']} icon={input.icon} /> : null}
|
||||
{/* {input.icon ? <Icon className={styles[input.icon === 'ic_x' ? 'x-icon' : 'icon']} icon={input.icon} /> : null} */}
|
||||
<div className={styles['label']}>{input.label}</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -284,6 +252,7 @@ class Settings extends Component {
|
|||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -309,4 +278,4 @@ Settings.defaultProps = {
|
|||
settingsConfiguration: []
|
||||
}
|
||||
|
||||
export default Settings;
|
||||
module.exports = Settings;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
import Settings from './Settings';
|
||||
const Settings = require('./Settings');
|
||||
|
||||
export default Settings;
|
||||
module.exports = Settings;
|
||||
|
|
|
|||
|
|
@ -4,280 +4,294 @@
|
|||
font-size: 14px;
|
||||
}
|
||||
|
||||
.settings-container {
|
||||
.settings-parent-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--color-background);
|
||||
|
||||
.side-menu {
|
||||
padding: var(--spacing);
|
||||
width: 17em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
||||
.section-label {
|
||||
padding: var(--spacing);
|
||||
font-size: 1.1em;
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-surface20);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
.nav-bar {
|
||||
flex: none;
|
||||
align-self: stretch;
|
||||
}
|
||||
|
||||
.scroll-container {
|
||||
padding: 0 calc(var(--spacing) * 2);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
.settings-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
background-color: var(--color-backgroundlight);
|
||||
|
||||
.section {
|
||||
padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
|
||||
.side-menu {
|
||||
padding: var(--spacing);
|
||||
width: 17em;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background-color: var(--color-backgroundlighter);
|
||||
|
||||
.section-header {
|
||||
margin: 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
|
||||
font-size: 2em;
|
||||
color: var(--color-surfacelighter);
|
||||
.section-label {
|
||||
padding: var(--spacing);
|
||||
font-size: 1.1em;
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
color: var(--color-surfacelight);
|
||||
cursor: pointer;
|
||||
|
||||
&.selected {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-background);
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
background-color: var(--color-surface20);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-container {
|
||||
margin: calc(var(--spacing) * 1.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
.scroll-container {
|
||||
padding: 0 calc(var(--spacing) * 2);
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
|
||||
.input-header {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
.section {
|
||||
padding: calc(var(--spacing) * 4) calc(var(--spacing) * 2);
|
||||
|
||||
.section-header {
|
||||
margin: 0 calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5) calc(var(--spacing) * 1.5);
|
||||
font-size: 2em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&.user-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
.input-container {
|
||||
margin: calc(var(--spacing) * 1.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.avatar {
|
||||
margin: 0 var(--spacing);
|
||||
width: 4.2em;
|
||||
height: 4.2em;
|
||||
border-radius: 50%;
|
||||
border: var(--focusable-border-size) solid var(--color-primary);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.email {
|
||||
.input-header {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
&.select-container {
|
||||
.bar-button {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
width: var(--input-width);
|
||||
display: flex;
|
||||
&.user-container {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
|
||||
cursor: pointer;
|
||||
|
||||
.value {
|
||||
width: 100%;
|
||||
color: var(--color-surface);
|
||||
.avatar {
|
||||
margin: 0 var(--spacing);
|
||||
width: 4.2em;
|
||||
height: 4.2em;
|
||||
border-radius: 50%;
|
||||
border: var(--focusable-border-size) solid var(--color-primary);
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
fill: var(--color-surface);
|
||||
.email {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-backgroundlight);
|
||||
&.select-container {
|
||||
.bar-button {
|
||||
padding: calc(var(--spacing) * 0.5);
|
||||
width: var(--input-width);
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
|
||||
cursor: pointer;
|
||||
|
||||
.value {
|
||||
color: var(--color-surfacelighter);
|
||||
width: 100%;
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
.icon {
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
fill: var(--color-surface);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background-color: var(--color-backgroundlight);
|
||||
|
||||
.value {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.active) {
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.value {
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.link-container {
|
||||
margin: var(--spacing) calc(var(--spacing) * 1.5);
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
color: var(--color-secondarylight);
|
||||
|
||||
&:focus {
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-container {
|
||||
.button {
|
||||
padding: calc(var(--spacing) * 0.7);
|
||||
width: var(--input-width);
|
||||
min-height: calc(var(--input-width) * 0.09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-primary);
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 1.4em;
|
||||
height: 100%;
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
|
||||
&:global(.active) {
|
||||
background-color: var(--color-surfacelighter);
|
||||
|
||||
.value {
|
||||
color: var(--color-backgrounddarker);
|
||||
}
|
||||
|
||||
.icon {
|
||||
fill: var(--color-backgrounddarker);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.link-container {
|
||||
margin: var(--spacing) calc(var(--spacing) * 1.5);
|
||||
|
||||
.link {
|
||||
display: block;
|
||||
color: var(--color-secondarylight);
|
||||
|
||||
&:focus {
|
||||
color: var(--color-surface);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.button-container {
|
||||
.button {
|
||||
padding: calc(var(--spacing) * 0.7);
|
||||
width: var(--input-width);
|
||||
min-height: calc(var(--input-width) * 0.09);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--color-primary);
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
width: 1.4em;
|
||||
height: 100%;
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
fill: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.label {
|
||||
max-width: 30em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-container {
|
||||
.checkbox {
|
||||
--icon-size: 1.2em;
|
||||
--icon-color: var(--color-surface);
|
||||
--icon-background-color: transparent;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
margin-left: 0.5em;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:global(.checked) {
|
||||
--icon-color: var(--color-surfacelight);
|
||||
--icon-background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
--icon-color: var(--color-surfacelighter);
|
||||
|
||||
.label {
|
||||
max-width: 30em;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
background-color: var(--color-primarylight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.checkbox-container {
|
||||
.checkbox {
|
||||
--icon-size: 1.2em;
|
||||
--icon-color: var(--color-surface);
|
||||
--icon-background-color: transparent;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
margin-left: 0.5em;
|
||||
color: var(--color-surfacelight);
|
||||
}
|
||||
|
||||
&:global(.checked) {
|
||||
--icon-color: var(--color-surfacelight);
|
||||
--icon-background-color: var(--color-primary);
|
||||
}
|
||||
|
||||
&:focus, &:hover {
|
||||
--icon-color: var(--color-surfacelighter);
|
||||
|
||||
.label {
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.text-container {
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
.icon {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
fill: var(--color-signal5);
|
||||
}
|
||||
|
||||
.x-icon {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
fill: var(--color-signal2);
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
color: var(--color-surfacelighter);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.text-container {
|
||||
.text {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
&.color-container {
|
||||
.color-picker {
|
||||
width: var(--input-width);
|
||||
height: calc(var(--input-width) * 0.08);
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
.icon {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
fill: var(--color-signal5);
|
||||
}
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
.x-icon {
|
||||
margin-right: calc(var(--spacing) * 0.5);
|
||||
width: var(--spacing);
|
||||
height: var(--spacing);
|
||||
fill: var(--color-signal2);
|
||||
}
|
||||
|
||||
.label {
|
||||
width: 100%;
|
||||
color: var(--color-surfacelighter);
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.color-container {
|
||||
.color-picker {
|
||||
width: var(--input-width);
|
||||
height: calc(var(--input-width) * 0.08);
|
||||
border: calc(var(--focusable-border-size) * 0.5) solid transparent;
|
||||
cursor: pointer;
|
||||
|
||||
&:focus {
|
||||
border-color: var(--color-surfacelighter);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
>:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
>:last-child {
|
||||
margin-bottom: 0;
|
||||
>:not(:last-child) {
|
||||
border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
|
||||
>:not(:last-child) {
|
||||
border-bottom: calc(var(--focusable-border-size) * 0.5) solid var(--color-primary);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue