checkbox component

2026-04-19 05:32:09 +00:00 · 2018-11-09 11:05:12 +02:00 · 2018-11-09 11:05:12 +02:00 · e0fc858280
commit e0fc858280
parent 826f0d75af
5 changed files with 142 additions and 109 deletions
--- a/src/common/Checkbox/Checkbox.js
+++ b/src/common/Checkbox/Checkbox.js
@ -1,5 +1,7 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
+import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';

 class Checkbox extends Component {
@ -8,26 +10,33 @@ class Checkbox extends Component {
            nextProps.enabled !== this.props.enabled;
    }

-    onPress = () => {
-        if (this.props.enabled && typeof this.props.onPress === 'function') {
-            this.props.onPress();
+    onClick = () => {
+        if (this.props.enabled && typeof this.props.onClick === 'function') {
+            this.props.onClick();
        }
    }

    render() {
        return (
-            <div className={styles.root} onClick={this.onPress} />
+            <div style={{height: this.props.iconHeight, width: this.props.iconWidth}} className={classnames(styles.root, this.props.checked ? styles['checkbox-checked'] : null, !this.props.enabled ? styles['checkbox-disabled'] : null)} onClick={this.onClick}>
+                <Icon style={{width: this.props.iconWidth}} className={classnames(styles['icon'], this.props.checked ? styles['checked'] : null)} icon={this.props.checked ? 'ic_check' : 'ic_box_empty'}></Icon>
+            </div>
        );
    }
 }

 Checkbox.propTypes = {
+    iconHeight: PropTypes.number,
+    iconWidth: PropTypes.number,
+    className: PropTypes.string,
    enabled: PropTypes.bool.isRequired,
    checked: PropTypes.bool.isRequired,
-    onPress: PropTypes.func
+    onClick: PropTypes.func
 };
+
 Checkbox.defaultProps = {
-    enabled: true
+    enabled: true,
+    checked: false
 };

 export default Checkbox;
--- a/src/common/Checkbox/styles.less
+++ b/src/common/Checkbox/styles.less
@ -1,6 +1,26 @@
@import 'stremio-colors';
+
 .root {
-    width: 30px;
-    height: 30px;
-    background-color: @colorprimlight60;
+    margin: 30px;
+    display: flex;
+    cursor: pointer;
+
+    &.checkbox-checked {
+        border: 2px solid @colorprimlight;
+        background-color: @colorprimlight;
+    }
+
+    &.checkbox-disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    .icon {
+        margin: auto;
+        fill: @colorwhite60;
+
+        &.checked {
+            fill: @colorwhite;
+        }
+    }
 }
--- a/src/routes/Settings/Settings.js
+++ b/src/routes/Settings/Settings.js
@ -1,7 +1,6 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import Icon from 'stremio-icons/dom';
 import classnames from 'classnames';
+import Icon from 'stremio-icons/dom';
 import styles from './styles';

 const SETTINGS_MENUS = {
@ -26,42 +25,42 @@ class Settings extends Component {
    }

    shouldComponentUpdate(nextState) {
-        return nextState.selectedMenu != this.state.selectedMenu;
+        return nextState.selectedMenu !== this.state.selectedMenu;
    }

    renderPlayerSettings = () => {
        const preferences = ['Hardware-accelerated decoding', 'Auto-play next episode', 'Data saver'];

        return (
-            <div className={styles['player-preferences-menu']}>
-                {preferences.map((item, key) =>
-                    <label key={key} className={styles['preferences-section']}>
-                        <input type='checkbox' className={styles['default-checkbox']} />
-                        <span className={styles['preference']}>{item}</span>
-                        <p className={styles['checkbox']}>
-                            <Icon className={styles['checkmark']} icon={'ic_check'} />
-                        </p>
-                    </label>
-                )}
+            <div className={styles['settings-list']}>
+                <div className={styles['settings-section']}>
+                    {preferences.map((preference) =>
+                        <label key={preference} className={styles['toggle-option']}>
+                            <input type={'checkbox'} className={styles['default-checkbox']} />
+                            <span className={styles['preference']}>{preference}</span>
+                            <p className={styles['checkbox']}>
+                                <Icon className={styles['checkmark']} icon={'ic_check'} />
+                            </p>
+                        </label>
+                    )}
+                </div>
            </div>
        );
    }

    renderLanguageSettings = () => {
        return (
-            <div className={styles['language-menu']}>
-                <div className={styles['language-section']}>
-                    <span className={styles['headline']}>INTERFACE LANGUAGE</span>
-                    <div className={styles['selected-language']}>English
-                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
-                    </div>
-                </div>
-                <div className={styles['language-section']}>
-                    <span className={styles['headline']}>DEFAULT SUBTITLES LANGUAGE</span>
-                    <div className={styles['selected-language']}>Portugese - BR
-                        <Icon className={styles['arrow-down']} icon={'ic_arrow_down'} />
-                    </div>
-                </div>
+            <div className={styles['settings-list']}>
+                <select className={styles['settings-section']}>
+                    <option value={'English'}>English</option>
+                    <option value={'Portugese'}>Portugese</option>
+                    <option value={'Deutch'}>Deutch</option>
+                </select>
+                <select className={styles['settings-section']}>
+                    <option value={'English'}>English</option>
+                    <option value={'Portugese'}>Portugese</option>
+                    <option value={'Deutch'}>Deutch</option>
+                </select>
            </div>
        );
    }
@ -79,15 +78,15 @@ class Settings extends Component {

    render() {
        return (
-            <div className={styles['settings']}>
+            <div className={styles['settings-container']}>
                <div className={styles['side-menu']}>
                    {Object.keys(SETTINGS_MENUS).map((menu) =>
-                        <div key={menu} className={classnames(styles['menu-option'], this.state.selectedMenu === SETTINGS_MENUS[menu] ? styles['menu-option-selected'] : null)} onClick={() => this.changeSelectedMenu(SETTINGS_MENUS[menu])}>{menu}</div>
+                        <div key={menu} className={classnames(styles['menu-option'], this.state.selectedMenu === SETTINGS_MENUS[menu] ? styles['selected'] : null)} onClick={() => this.changeSelectedMenu(SETTINGS_MENUS[menu])}>{menu}</div>
                    )}
                </div>
                {this.renderSelectedMenu()}
            </div>
-        )
+        );
    }
 }

--- a/src/routes/Settings/styles.less
+++ b/src/routes/Settings/styles.less
@ -1,103 +1,98 @@
@import 'stremio-colors';
-.settings {
+
+.settings-container {
    height: 100%;
+    width: 100%;
    display: flex;
    color: @colorwhite60;
    font-family: LatoLight;
+
    .side-menu {
        width: 240px;
        padding: 20px;
        display: flex;
-        font-size: 14px;
        flex-direction: column;
+        font-size: 14px;
        background: @colordarkest;
+
        .menu-option {
            padding: 14px;
            font-weight: 600;
-            &:hover {
-                cursor: pointer;
-                color: @colorwhite;
-                background: @colorglass;
-            }
-            &.menu-option-selected {
+
+            &:hover, &.selected {
                cursor: pointer;
                color: @colorwhite;
                background: @colorglass;
            }
        }
    }
-    .player-preferences-menu {
-        height: 145px;
+
+    .settings-list {
+        width: 280px;
        margin: 40px 50px;
-        border-bottom: 1px solid @colormedium;
-        .preferences-section {
+
+        .settings-section {
            display: flex;
-            cursor: pointer;
-            margin-bottom: 30px;
-            align-items: center;
-            .preference {
-                width: 280px;
-            }
-            .default-checkbox {
-                display: none;
-            }
-            .checkbox {
-                width: 14px;
-                height: 14px;
-                cursor: pointer;
-                border: 2px solid @colorwhite60;
-                .checkmark {
-                    width: 10px;
-                    height: 10px;
-                    display: none;
-                    fill: @colorwhite;
-                }
-            }
-            input:checked ~ .checkbox {
-                background-color: @colorprimlight;
-                border: 2px solid @colorprimlight;
-                .checkmark {
-                    display: block;
-                }
-            }
-            input:checked ~ .preference {
-                color: @colorwhite;
-            }
-        }
-    }
-    .language-menu {
-        margin: 40px 50px;
-        .language-section {
-            border-bottom: 1px solid @colormedium;
-            .headline {
-                font-weight: 600;
-                color: @colorwhite40;
-            }
-            .selected-language {
-                height: 40px;
-                width: 280px;
-                padding: 20px;
+            flex-direction: column;
+
+            .toggle-option {
                display: flex;
-                margin: 30px 0px;
+                cursor: pointer;
+                margin-bottom: 30px;
                align-items: center;
-                justify-content: space-between;
-                font-weight: 600;
-                color: @colorwhite;
-                background-color: @colordarkest;
-                border: 1px solid @colortransparent;
-                .arrow-down {
-                    width: 8px;
-                    height: 10px;
-                    fill: @colorwhite40;
+
+                .preference {
+                    flex: 1;
+                    white-space: pre;
+                    overflow: hidden;
+                    text-overflow: ellipsis;
                }
-                &:hover {
+
+                .default-checkbox {
+                    display: none;
+                }
+
+                .checkbox {
+                    width: 14px;
+                    height: 14px;
                    cursor: pointer;
-                    border: 1px solid @colormedium;
+                    border: 2px solid @colorwhite60;
+
+                    .checkmark {
+                        width: 10px;
+                        height: 10px;
+                        display: none;
+                        fill: @colorwhite;
+                    }
+                }
+
+                input:checked~.checkbox {
+                    background-color: @colorprimlight;
+                    border: 2px solid @colorprimlight;
+
+                    .checkmark {
+                        display: block;
+                    }
+                }
+
+                input:checked~.preference {
+                    color: @colorwhite;
+                }
+
+                &:hover {
+                    .preference {
+                        color: @colorwhite;
+                    }
+
+                    input:not(:checked)~.checkbox {
+                        border: 2px solid @colorwhite;
+                    }
                }
            }
+
            &:not(:last-child) {
                margin-bottom: 30px;
-
+                border-bottom: 1px solid @colormedium;
            }
        }
    }
--- a/stories/index.stories.js
+++ b/stories/index.stories.js
@ -5,7 +5,7 @@ import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 import { linkTo } from '@storybook/addon-links';

-import { Addon, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';
+import { Addon, Checkbox, LibraryItemList, MetaItem, ShareAddon, Stream, UserPanel, Video } from 'stremio-common';

 storiesOf('Addon', module)
  .add('addon', () => (
@ -17,6 +17,16 @@ storiesOf('Addon', module)
    </div>
  ));

+storiesOf('Checkbox', module)
+  .add('checkbox', () => (
+    <div style={{padding: '10px'}} className={styles['app']}>
+      <Checkbox iconHeight={20} iconWidth={20} checked={true} enabled={false}></Checkbox>
+      <Checkbox iconHeight={30} iconWidth={30} checked={false} enabled={false}></Checkbox>
+      <Checkbox iconHeight={10} iconWidth={10} checked={false} enabled={true}></Checkbox>
+      <Checkbox iconHeight={40} iconWidth={40} checked={true} enabled={true}></Checkbox>
+    </div>
+  ))
+
 storiesOf('LibraryItemList', module)
  .add('library item list', () => (
    <div style={{padding: '10px'}} className={styles['app']}>