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

Layout changes

Browse Source
This commit is contained in:
Scott E. Graves
2018-10-04 15:09:42 -05:00
parent 4aac967081
commit 93f16eb929
10 changed files with 132 additions and 88 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.js
View File

@@ -634,7 +634,7 @@ class App extends Component {
let key = 0;
mainContent.push((
<div key={'rvd_' + key++}
style={{height: '40%'}}>
style={{height: '44%'}}>
<ReleaseVersionDisplay disabled={this.state.DownloadActive || this.state.ExtractActive || this.state.MountsBusy}
downloadClicked={this.handleReleaseDownload}
downloadDisabled={!downloadEnabled}
@@ -653,7 +653,7 @@ class App extends Component {
if (allowMount) {
mainContent.push((
<div key={'md_' + key++}
style={{height: '60%'}}>
style={{height: '56%'}}>
<MountItems allowConfig={allowConfig}
autoMountChanged={this.handleAutoMountChanged}
autoMountProcessed={this.notifyAutoMountProcessed}

7
src/components/MountItem/MountItem.css
View File

@@ -1,7 +0,0 @@
.MountItem {
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
}

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

@@ -4,70 +4,92 @@ import styles from './MountItem.css';
import DropDown from '../UI/DropDown/DropDown';
import Button from '../UI/Button/Button';
import Loader from 'react-loader-spinner';
import Text from '../UI/Text/Text';
import Grid from '../UI/Grid/Grid';
import configureImage from '../../assets/images/configure.png';
import RootElem from '../../hoc/RootElem/RootElem';
export default CSSModules((props) => {
let configButton = null;
let secondRow = 6;
if (props.allowConfig) {
configButton = (
<img alt=''
height={'16px'}
onClick={props.configClicked}
src={configureImage}
style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
width={'16px'}/>
<RootElem colSpan={4}
rowSpan={6}>
<img alt=''
height={'16px'}
onClick={props.configClicked}
src={configureImage}
style={{padding: 0, border: 0, margin: 0, cursor: 'pointer'}}
width={'16px'}/>
</RootElem>
);
}
let inputColumnSpan;
let inputControl = null;
let mountWidth = '70%';
if (props.platform === 'win32') {
inputColumnSpan = 20;
inputControl = <DropDown changed={props.changed}
colSpan={inputColumnSpan}
disabled={!props.allowMount || props.mounted}
items={props.items}
row={secondRow}
rowSpan={7}
selected={props.items.indexOf(props.location)}/>;
mountWidth = '18%';
} else {
inputControl = <input disabled={!props.allowMount || props.mounted}
onChange={props.changed}
type={'text'}
value={props.location}/>;
inputColumnSpan = 60;
inputControl = (
<RootElem colSpan={inputColumnSpan}
row={secondRow}
rowSpan={7}>
<input disabled={!props.allowMount || props.mounted}
onChange={props.changed}
type={'text'}
value={props.location}/>
</RootElem>);
}
let actionDisplay = null;
if (props.allowMount) {
actionDisplay = <Button buttonStyles={{width: '100%'}}
clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}>{props.mounted ? 'Unmount' : 'Mount'}</Button>;
} else {
actionDisplay = <Loader color={'var(--heading_text_color)'}
height='24px'
type='Circles'
width='24px'/>;
}
const buttonDisplay = props.allowMount ?
(props.mounted ? 'Unmount' : 'Mount') :
<Loader color={'var(--heading_text_color)'}
height='19px'
type='Circles'
width='19px'/>;
const actionsDisplay = (
<Button clicked={()=>props.clicked(props.title, !props.mounted, props.location, props.pid)}
col={inputColumnSpan + 2}
colSpan={20}
disabled={!props.allowMount}
row={secondRow}
rowSpan={7}>
{buttonDisplay}
</Button>);
const autoMountControl = (
<RootElem col={inputColumnSpan + 23}
colSpan={26}
row={secondRow}
rowSpan={7}>
<input checked={props.autoMount}
onChange={props.autoMountChanged}
type='checkbox'/>Auto-mount
</RootElem>
);
return (
<div styleName='MountItem'>
<table><tbody><tr><td>{configButton}</td><td><h2>{props.title}</h2></td></tr></tbody></table>
<table cellPadding='2'
width='100%'>
<tbody>
<tr>
<td height='30px'
width={mountWidth}>{inputControl}
</td>
<td align='center'
valign='middle'
width='25%'>
{actionDisplay}
</td>
<td>
<input checked={props.autoMount}
onChange={props.autoMountChanged}
type='checkbox'/>Auto-mount
</td>
</tr>
</tbody>
</table>
</div>
<Grid>
{configButton}
<Text
col={configButton ? 6 : 0}
rowSpan={5}
text={props.title}
type={'Heading1'}/>
{inputControl}
{actionsDisplay}
{autoMountControl}
</Grid>
);
}, styles, {allowMultiple: true});

5
src/components/UI/Button/Button.css
View File

@@ -1,7 +1,6 @@
.Button {
display: block;
text-align: center;
margin: 0;
padding: 4px;
outline: 0;
color: var(--text_color);
@@ -10,8 +9,10 @@
border: none;
text-decoration: none;
text-outline: none;
vertical-align: center;
height: 100%;
width: 100%;
overflow: hidden;
}
.Button:hover:enabled {
@@ -21,7 +22,7 @@
}
.Button:hover:disabled {
cursor: default;
cursor: no-drop;
}
.Button:active,

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

@@ -23,4 +23,17 @@
background: rgba(10, 10, 15, 0.8);
border-color: rgba(10, 10, 20, 0.9);
color: var(--text_color);
}
.Select:hover:enabled {
cursor: pointer;
}
.Select:hover:disabled {
cursor: no-drop;
}
.Select:active,
.Select.active {
cursor: pointer;
}

63
src/components/UI/Grid/Grid.js
View File

@@ -66,36 +66,41 @@ export default CSSModules(class extends Component {
const dimensions = this.state.dimensions;
if (this.state.calculated) {
children = React.Children.map(this.props.children, (child, i) => {
let row = child.props.row || 0;
if (typeof(row) === 'function') {
row = row(dimensions);
if (child) {
let row = child.props.row || 0;
if (typeof(row) === 'function') {
row = row(dimensions);
}
let col = child.props.col || 0;
if (typeof(col) === 'function') {
col = col(dimensions);
}
let rowSpan = child.props.rowSpan;
if (typeof(rowSpan) === 'function') {
rowSpan = rowSpan(dimensions.rows - row, dimensions.rows);
}
let colSpan = child.props.colSpan;
if (typeof(colSpan) === 'function') {
colSpan = colSpan(dimensions.columns - col, dimensions.columns);
}
rowSpan = rowSpan ? (rowSpan === 'remain' ? (dimensions.rows - row) : rowSpan) : null;
colSpan = colSpan ? (colSpan === 'remain' ? dimensions.columns - col : colSpan) : null;
return <GridComponent
row={row}
col={col}
rowSpan={rowSpan}
colSpan={colSpan}
key={'gc_' + i}>{child}</GridComponent>;
} else {
return null;
}
let col = child.props.col || 0;
if (typeof(col) === 'function') {
col = col(dimensions);
}
let rowSpan = child.props.rowSpan;
if (typeof(rowSpan) === 'function') {
rowSpan = rowSpan(dimensions.rows - row, dimensions.rows);
}
let colSpan = child.props.colSpan;
if (typeof(colSpan) === 'function') {
colSpan = colSpan(dimensions.columns - col, dimensions.columns);
}
rowSpan = rowSpan ? (rowSpan === 'remain' ? (dimensions.rows - row) : rowSpan) : null;
colSpan = colSpan ? (colSpan === 'remain' ? dimensions.columns - col : colSpan) : null;
return <GridComponent
row={row}
col={col}
rowSpan={rowSpan}
colSpan={colSpan}
key={'gc_' + i}>{child}</GridComponent>;
});
})
.filter(i => i !== null);
}
const style = {

1
src/containers/MountItems/MountItems.css
View File

@@ -1,5 +1,6 @@
.MountItems {
padding: 0;
margin: 0;
width: 100%;
box-sizing: border-box;
}

9
src/hoc/RootElem/RootElem.js Normal file
View File

@@ -0,0 +1,9 @@
import React from 'react';
export default (props) => {
return (
<div style={{margin: 0, padding: 0}} {...props}>
{props.children}
</div>
)
};

4
src/index.css
View File

@@ -2,7 +2,7 @@
--border_radius: 4px;
--control_background: rgba(150, 150, 190, .15);
--control_background_hover: rgba(150, 150, 190, .3);
--control_background_hover: rgba(150, 150, 190, .35);
--control_border: 1px solid rgba(70, 70, 70, 0.9);
--control_box_shadow: 1px 1px 1px black;
--control_transparent_background: rgba(40, 40, 55, 0.45);
@@ -11,7 +11,7 @@
--text_color: rgba(200, 205, 220, 0.7);
--text_color_hover: rgba(200, 205, 220, 0.7);
--text_color_error: rgba(203, 120, 120, 0.8);
--heading_text_color: rgba(166, 177, 219, 0.7);
--heading_text_color: rgba(161, 190, 219, 0.7);
--heading_other_text_color: var(--heading_text_color);
--text_color_transition: color 0.3s;
}