From ce06bc27a8390648dc51c37c3218807fe3f0efba Mon Sep 17 00:00:00 2001 From: "Scott E. Graves" Date: Wed, 23 Oct 2019 11:18:18 -0500 Subject: [PATCH] Refactoring --- .../ConfigurationItem/ConfigurationItem.css | 19 ----- .../ConfigurationItem/ConfigurationItem.js | 40 ++++------ src/components/MountItem/MountItem.js | 20 ++--- src/components/UI/CheckBox/CheckBox.css | 76 +++++++++++++++++++ src/components/UI/CheckBox/CheckBox.js | 16 ++++ src/components/UI/DropDown/DropDown.css | 18 +++++ src/components/UI/DropDown/DropDown.js | 5 +- src/css/checkbox.css | 68 ----------------- src/index.js | 1 - 9 files changed, 134 insertions(+), 129 deletions(-) create mode 100644 src/components/UI/CheckBox/CheckBox.css create mode 100644 src/components/UI/CheckBox/CheckBox.js delete mode 100644 src/css/checkbox.css diff --git a/src/components/ConfigurationItem/ConfigurationItem.css b/src/components/ConfigurationItem/ConfigurationItem.css index 328ae2c..d170a37 100644 --- a/src/components/ConfigurationItem/ConfigurationItem.css +++ b/src/components/ConfigurationItem/ConfigurationItem.css @@ -16,25 +16,6 @@ input.ConfigurationItemInput { box-sizing: border-box; } -.ConfigurationItemSelect { - display: block; - margin: 0; - padding: 2px; - border-radius: var(--border_radius); - background: rgba(160, 160, 160, 0.1); - border: none; - box-shadow: none; - outline: none; - color: var(--text_color); - box-sizing: border-box; -} - -.ConfigurationItemOption { - background: rgba(10, 10, 15, 0.8); - border-color: rgba(10, 10, 20, 0.9); - color: var(--text_color); -} - .ConfigurationInfo { cursor: pointer; } \ No newline at end of file diff --git a/src/components/ConfigurationItem/ConfigurationItem.js b/src/components/ConfigurationItem/ConfigurationItem.js index 99604ff..a3a6715 100644 --- a/src/components/ConfigurationItem/ConfigurationItem.js +++ b/src/components/ConfigurationItem/ConfigurationItem.js @@ -1,10 +1,12 @@ import React from 'react'; import './ConfigurationItem.css'; -import settings from '../../assets/settings'; -import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; -import {faInfoCircle} from '@fortawesome/free-solid-svg-icons'; +import CheckBox from '../UI/CheckBox/CheckBox'; import {connect} from 'react-redux'; +import {faInfoCircle} from '@fortawesome/free-solid-svg-icons'; +import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import {notifyInfo} from '../../redux/actions/error_actions'; +import settings from '../../assets/settings'; +import DropDown from '../UI/DropDown/DropDown'; const mapDispatchToProps = dispatch => { return { @@ -36,15 +38,9 @@ export default connect(null, mapDispatchToProps)(props => { let data; switch (props.template.type) { case "bool": - data = ( - - ); + data = ; break; case "double": @@ -58,20 +54,12 @@ export default connect(null, mapDispatchToProps)(props => { break; case "list": - const options = props.items.map((s, i) => { - return ( - - ); - }); - - data = ( - - ); + data = ; break; case "string": diff --git a/src/components/MountItem/MountItem.js b/src/components/MountItem/MountItem.js index e3fe526..faf36ce 100644 --- a/src/components/MountItem/MountItem.js +++ b/src/components/MountItem/MountItem.js @@ -11,6 +11,7 @@ import RootElem from '../UI/RootElem/RootElem'; import {displayConfiguration, removeRemoteMount, setProviderState} from '../../redux/actions/mount_actions'; import {FontAwesomeIcon} from '@fortawesome/react-fontawesome'; import { faTrashAlt} from '@fortawesome/free-solid-svg-icons'; +import CheckBox from '../UI/CheckBox/CheckBox'; const mapStateToProps = (state, ownProps) => { return { @@ -125,13 +126,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => { colSpan={28} row={secondRow} rowSpan={7}> - + ); @@ -140,13 +136,9 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => { colSpan={24} row={secondRow} rowSpan={7}> - + ); diff --git a/src/components/UI/CheckBox/CheckBox.css b/src/components/UI/CheckBox/CheckBox.css new file mode 100644 index 0000000..1498bad --- /dev/null +++ b/src/components/UI/CheckBox/CheckBox.css @@ -0,0 +1,76 @@ +.CheckBoxOwner { + display: block; + width: 100%; + height: 100%; + margin: 0; + padding: 0; +} + +/* Customize the label (the container) */ +label.CheckBoxLabel { + position: relative; + padding-left: 24px; + cursor: pointer; + -webkit-user-select: none; + -moz-user-select: none; + -ms-user-select: none; + user-select: none; +} + +/* Hide the browser's default checkbox */ +label.CheckBoxLabel input[type=checkbox] { + position: absolute; + opacity: 0; + cursor: pointer; + height: 0; + width: 0; +} + +/* Create a custom checkbox */ +.CheckBoxCheckMark { + display: block; + margin: 0; + border-radius: var(--border_radius); + background-color: var(--control_background); + box-sizing: border-box; + position: absolute; + top: 0; + left: 0; + height: 20px; + width: 20px; +} + +/* On mouse-over, add a grey background color */ +label.CheckBoxLabel:hover input[type=checkbox] ~ .CheckBoxCheckMark { + background-color: var(--control_background_hover); +} + +/* When the checkbox is checked, add a blue background */ +label.CheckBoxLabel input:checked ~ .CheckBoxCheckMark { + background-color: var(--control_background); +} + +/* Create the CheckBoxCheckMark/indicator (hidden when not checked) */ +.CheckBoxCheckMark:after { + content: ""; + position: absolute; + display: none; +} + +/* Show the CheckBoxCheckMark when checked */ +label.CheckBoxLabel input:checked ~ .CheckBoxCheckMark:after { + display: block; +} + +/* Style the CheckBoxCheckMark/indicator */ +label.CheckBoxLabel .CheckBoxCheckMark:after { + left: 6px; + top: 1px; + width: 5px; + height: 10px; + border: solid var(--heading_text_color); + border-width: 0 3px 3px 0; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); +} \ No newline at end of file diff --git a/src/components/UI/CheckBox/CheckBox.js b/src/components/UI/CheckBox/CheckBox.js new file mode 100644 index 0000000..adc0e04 --- /dev/null +++ b/src/components/UI/CheckBox/CheckBox.js @@ -0,0 +1,16 @@ +import React from 'react'; +import './CheckBox.css'; + +export default props => { + return ( +
+ +
+ ); +}; \ No newline at end of file diff --git a/src/components/UI/DropDown/DropDown.css b/src/components/UI/DropDown/DropDown.css index a1408b9..5c7b489 100644 --- a/src/components/UI/DropDown/DropDown.css +++ b/src/components/UI/DropDown/DropDown.css @@ -19,6 +19,24 @@ box-sizing: border-box; } +.DropDownSelect.Alt { + width: 100%; + height: 100%; + display: block; + margin: 0; + padding: 2px; + border-radius: var(--border_radius); + background: rgba(160, 160, 160, 0.1); + border: none; + color: var(--text_color); + box-sizing: border-box; +} + +.DropDownSelect.Auto { + width: auto; + height: auto; +} + .DropDownOption { background: rgba(10, 10, 15, 0.9); border-color: rgba(10, 10, 20, 0.9); diff --git a/src/components/UI/DropDown/DropDown.js b/src/components/UI/DropDown/DropDown.js index cc25550..451f685 100644 --- a/src/components/UI/DropDown/DropDown.js +++ b/src/components/UI/DropDown/DropDown.js @@ -10,7 +10,10 @@ export default props => { return (
- {options}
diff --git a/src/css/checkbox.css b/src/css/checkbox.css deleted file mode 100644 index 807e682..0000000 --- a/src/css/checkbox.css +++ /dev/null @@ -1,68 +0,0 @@ -/* Customize the label (the container) */ -label.CheckBoxOwner { - position: relative; - padding-left: 24px; - cursor: pointer; - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -/* Hide the browser's default checkbox */ -label.CheckBoxOwner input[type=checkbox] { - position: absolute; - opacity: 0; - cursor: pointer; - height: 0; - width: 0; -} - -/* Create a custom checkbox */ -.CheckMark { - display: block; - margin: 0; - border-radius: var(--border_radius); - background-color: var(--control_background); - box-sizing: border-box; - position: absolute; - top: 0; - left: 0; - height: 20px; - width: 20px; -} - -/* On mouse-over, add a grey background color */ -label.CheckBoxOwner:hover input[type=checkbox] ~ .CheckMark { - background-color: var(--control_background_hover); -} - -/* When the checkbox is checked, add a blue background */ -label.CheckBoxOwner input:checked ~ .CheckMark { - background-color: var(--control_background); -} - -/* Create the CheckMark/indicator (hidden when not checked) */ -.CheckMark:after { - content: ""; - position: absolute; - display: none; -} - -/* Show the CheckMark when checked */ -label.CheckBoxOwner input:checked ~ .CheckMark:after { - display: block; -} - -/* Style the CheckMark/indicator */ -label.CheckBoxOwner .CheckMark:after { - left: 6px; - top: 1px; - width: 5px; - height: 10px; - border: solid var(--heading_text_color); - border-width: 0 3px 3px 0; - -webkit-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); -} \ No newline at end of file diff --git a/src/index.js b/src/index.js index e3df023..22a184f 100644 --- a/src/index.js +++ b/src/index.js @@ -1,7 +1,6 @@ import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; -import './css/checkbox.css'; import App from './App'; import createAppStore from './redux/store/createAppStore'; import {getIPCRenderer} from './utils';