BlockStorage/repertory-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Refactoring

Browse Source
This commit is contained in:
sgraves76
2019-10-23 11:18:18 -05:00
parent 032d12aee6
commit ce06bc27a8
9 changed files with 134 additions and 129 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/ConfigurationItem/ConfigurationItem.css
View File

@@ -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;
}

40
src/components/ConfigurationItem/ConfigurationItem.js
View File

@@ -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 = (
<label className='CheckBoxOwner'>
<input checked={JSON.parse(props.value)}
disabled={props.readOnly}
onChange={e=>handleChanged(e)}
type='checkbox'/>
<span className='CheckMark'/>
</label>
);
data = <CheckBox changed={handleChanged}
checked={props.value}
disabled={props.readOnly}/>;
break;
case "double":
@@ -58,20 +54,12 @@ export default connect(null, mapDispatchToProps)(props => {
break;
case "list":
const options = props.items.map((s, i) => {
return (
<option className={'ConfigurationItemOption'} key={i} value={s}>{s}</option>
);
});
data = (
<select onChange={e=>handleChanged(e)}
className={'ConfigurationItemSelect'}
disabled={props.readOnly}
value={props.value}>
{options}
</select>
);
data = <DropDown alt
auto
changed={handleChanged}
disabled={props.readOnly}
items={props.items}
selected={props.value} />;
break;
case "string":

20
src/components/MountItem/MountItem.js
View File

@@ -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}>
<label className='CheckBoxOwner'>Auto-mount
<input checked={props.PState.AutoMount}
id={'checkbox_am_' + props.provider}
onChange={handleAutoMountChanged}
type='checkbox'/>
<span className='CheckMark'/>
</label>
<CheckBox changed={handleAutoMountChanged}
checked={props.PState.AutoMount} label={'Auto-mount'}/>
</RootElem>
);
@@ -140,13 +136,9 @@ export default connect(mapStateToProps, mapDispatchToProps)(props => {
colSpan={24}
row={secondRow}
rowSpan={7}>
<label className='CheckBoxOwner'>Restart
<input checked={props.PState.AutoRestart}
id={'checkbox_ar_' + props.provider}
onChange={handleAutoRestartChanged}
type='checkbox'/>
<span className='CheckMark'/>
</label>
<CheckBox changed={handleAutoRestartChanged}
checked={props.PState.AutoRestart}
label={'Restart'}/>
</RootElem>
);

76
src/components/UI/CheckBox/CheckBox.css Normal file
View File

@@ -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);
}

16
src/components/UI/CheckBox/CheckBox.js Normal file
View File

@@ -0,0 +1,16 @@
import React from 'react';
import './CheckBox.css';
export default props => {
return (
<div className={'CheckBoxOwner'}>
<label className='CheckBoxLabel'>{props.label}
<input checked={JSON.parse(props.checked)}
disabled={props.disabled}
onChange={props.changed}
type='checkbox'/>
<span className='CheckBoxCheckMark'/>
</label>
</div>
);
};

18
src/components/UI/DropDown/DropDown.css
View File

@@ -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);

5
src/components/UI/DropDown/DropDown.js
View File

@@ -10,7 +10,10 @@ export default props => {
return (
<div className={'DropDown'}>
<select className={'DropDownSelect'} disabled={props.disabled} onChange={props.changed} value={props.selected}>
<select className={'DropDownSelect' + (props.auto ? ' Auto ' : '') + (props.alt ? ' Alt ' : '') }
disabled={props.disabled}
onChange={props.changed}
value={props.selected}>
{options}
</select>
</div>

68
src/css/checkbox.css
View File

@@ -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);
}

1
src/index.js
View File

@@ -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';