From b430465b7bae1ca4289ea9369d51425905fd3194 Mon Sep 17 00:00:00 2001 From: "Scott E. Graves" Date: Wed, 3 Oct 2018 14:54:05 -0500 Subject: [PATCH] Component refactoring --- electron.js | 2 +- src/App.js | 177 +++++++----------- .../ReleaseVersionDisplay.css | 0 .../ReleaseVersionDisplay.js | 74 ++++++++ src/components/UI/Button/Button.css | 3 +- src/components/UI/DropDown/DropDown.css | 2 + src/components/UI/Grid/Grid.css | 18 ++ src/components/UI/Grid/Grid.js | 121 ++++++++++++ .../UI/Grid/GridComponent/GridComponent.css | 7 + .../UI/Grid/GridComponent/GridComponent.js | 21 +++ src/components/UI/Text/Text.css | 39 ++++ src/components/UI/Text/Text.js | 28 +++ src/components/UpgradeIcon/UpgradeIcon.css | 17 +- src/components/UpgradeIcon/UpgradeIcon.js | 8 +- src/containers/MountItems/MountItems.css | 1 - 15 files changed, 390 insertions(+), 128 deletions(-) create mode 100644 src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.css create mode 100644 src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js create mode 100644 src/components/UI/Grid/Grid.css create mode 100644 src/components/UI/Grid/Grid.js create mode 100644 src/components/UI/Grid/GridComponent/GridComponent.css create mode 100644 src/components/UI/Grid/GridComponent/GridComponent.js create mode 100644 src/components/UI/Text/Text.css create mode 100644 src/components/UI/Text/Text.js diff --git a/electron.js b/electron.js index 22708eb..31247fb 100644 --- a/electron.js +++ b/electron.js @@ -21,7 +21,7 @@ let mountedPIDs = []; function createWindow() { // Create the browser window. - const height = process.env.ELECTRON_START_URL ? 340 : 320; + const height = process.env.ELECTRON_START_URL ? 344 : 324; mainWindow = new BrowserWindow({ width: 425, height: height, diff --git a/src/App.js b/src/App.js index 6e9c39e..d82ce3e 100644 --- a/src/App.js +++ b/src/App.js @@ -2,16 +2,17 @@ import React, {Component} from 'react'; import axios from 'axios'; import styles from './App.css'; import Box from './components/UI/Box/Box'; -import Button from './components/UI/Button/Button'; import Configuration from './containers/Configuration/Configuration'; import CSSModules from 'react-css-modules'; import DependencyList from './components/DependencyList/DependencyList'; import DownloadProgress from './components/DownloadProgress/DownloadProgress'; -import DropDown from './components/UI/DropDown/DropDown'; import ErrorDetails from './components/ErrorDetails/ErrorDetails'; +import Grid from './components/UI/Grid/Grid'; import Loading from './components/UI/Loading/Loading'; import Modal from './components/UI/Modal/Modal'; import MountItems from './containers/MountItems/MountItems'; +import ReleaseVersionDisplay from './components/ReleaseVersionDisplay/ReleaseVersionDisplay'; +import Text from './components/UI/Text/Text'; import UpgradeIcon from './components/UpgradeIcon/UpgradeIcon'; import UpgradeUI from './components/UpgradeUI/UpgradeUI'; @@ -44,11 +45,11 @@ class App extends Component { } state = { - AllowOptions: false, AllowDownload: false, AutoMountProcessed: false, ConfigStorageType: null, DisplayError: false, + DisplayMainContent: false, Error: null, ErrorAction: null, ErrorCritical: false, @@ -74,7 +75,7 @@ class App extends Component { 'Beta', 'Alpha', ], - RepertoryVersion: 'none', + InstalledVersion: 'none', Sia: { AutoMount: false, MountLocation: '', @@ -305,10 +306,10 @@ class App extends Component { onCheckInstalledReply = (event, arg) => { const action = () => { - const repertoryVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none'; + const installedVersion = arg.data.Success && arg.data.Exists ? arg.data.Version : 'none'; let versionAvailable = false; - if (repertoryVersion !== 'none') { + if (installedVersion !== 'none') { const latestVersion = this.state.VersionLookup[this.state.ReleaseTypes[this.state.Release]].length - 1; let version = this.state.Version; if (version === -1) { @@ -321,7 +322,7 @@ class App extends Component { AllowDownload: true, DownloadingDependency: false, MissingDependencies: arg.data.Dependencies, - RepertoryVersion: repertoryVersion, + InstalledVersion: installedVersion, VersionAvailable: versionAvailable, }); }; @@ -430,7 +431,7 @@ class App extends Component { } this.setState({ - AllowOptions: true, + DisplayMainContent: true, LocationsLookup: locationsLookup, Version: version, VersionAvailable: version !== latestVersion, @@ -551,9 +552,9 @@ class App extends Component { !this.state.MountsBusy && !this.state.DownloadActive && (selectedVersion !== 'unavailable') && - (selectedVersion !== this.state.RepertoryVersion); + (selectedVersion !== this.state.InstalledVersion); - const allowMount = this.state.RepertoryVersion !== 'none'; + const allowMount = this.state.InstalledVersion !== 'none'; const missingDependencies = (this.state.MissingDependencies.length > 0); const allowConfig = this.state.LocationsLookup[selectedVersion] && this.state.LocationsLookup[selectedVersion].config_support; @@ -596,23 +597,6 @@ class App extends Component { ); } - let mountDisplay = null; - if (allowMount) { - mountDisplay = ; - } - let dependencyDisplay = null; if (showDependencies) { dependencyDisplay = ( @@ -634,14 +618,6 @@ class App extends Component { ); } - let releaseDisplay = null; - if (this.state.ExtractActive) { - releaseDisplay =

{'Activating <' + selectedVersion + '>'}

- } else { - releaseDisplay = ; - } - let upgradeDisplay = null; if (showUpgrade) { upgradeDisplay = ( @@ -652,53 +628,47 @@ class App extends Component { ); } - let mainContent = null; - if (this.state.AllowOptions) { - mainContent = ( - - - - - - - - - - - - - - - - - - - -
-

Release

- 		-

Version

- 		-

Installed

-
- - - - - {this.state.RepertoryVersion} -
- {releaseDisplay} -
- {mountDisplay} -
); + let mainContent = []; + if (this.state.DisplayMainContent) { + let key = 0; + mainContent.push(( +
+ +
+ )); + + if (allowMount) { + mainContent.push(( +
+ +
+ )); + } } else { mainContent = } @@ -710,32 +680,25 @@ class App extends Component { {upgradeDisplay} {downloadDisplay} {configDisplay} - - - - - - - - -
- -

{'Repertory UI v' + this.props.version}

- 		- this.setState({UpgradeDismissed: false})}/> -
+ + + + this.setState({UpgradeDismissed: false})} + col={dimensions => dimensions.columns - 7} + colSpan={6} + row={0} + rowSpan={'remain'}/> + - + {mainContent} diff --git a/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.css b/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js b/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js new file mode 100644 index 0000000..f918152 --- /dev/null +++ b/src/components/ReleaseVersionDisplay/ReleaseVersionDisplay.js @@ -0,0 +1,74 @@ +import React from 'react'; +import styles from './ReleaseVersionDisplay.css'; +import CSSModules from 'react-css-modules'; +import DropDown from '../UI/DropDown/DropDown'; +import Grid from '../UI/Grid/Grid'; +import Text from '../UI/Text/Text'; +import Button from '../UI/Button/Button'; +import UpgradeIcon from '../UpgradeIcon/UpgradeIcon'; + +export default CSSModules((props) => { + let optionsDisplay = null; + if (props.releaseExtracting) { + optionsDisplay = '}/> + } else { + optionsDisplay = ; + } + + return ( + + columns / 3} + rowSpan={4} + text={'Release'} + textAlign={'left'} + type={'Heading2'}/> + remain / 3 - 1} + disabled={props.disabled} + items={props.releaseTypes} + row={5} + rowSpan={7} + selected={props.release}/> + dimensions.columns / 3} + colSpan={remain=>remain / 2} + rowSpan={4} + text={'Version'} + textAlign={'left'} + type={'Heading2'}/> + ((dimensions.columns / 3) * 2) - 6} + colSpan={4} + release + rowSpan={4}/> + dimensions.columns / 3} + colSpan={remain=>remain / 2 - 1} + disabled={props.disabled} + items={props.versions} + row={5} + rowSpan={7} + selected={props.version}/> + (dimensions.columns / 3) * 2} + colSpan={'remain'} + rowSpan={4} + text={'Installed'} + textAlign={'left'} + type={'Heading2'}/> + (dimensions.columns / 3) * 2} + colSpan={'remain'} + row={5} + rowSpan={7} + text={props.installedVersion} + textAlign={'left'}/> + {optionsDisplay} + + ); +}, styles, {allowMultiple: true}); \ No newline at end of file diff --git a/src/components/UI/Button/Button.css b/src/components/UI/Button/Button.css index c1164b1..cb0bdc2 100644 --- a/src/components/UI/Button/Button.css +++ b/src/components/UI/Button/Button.css @@ -10,7 +10,8 @@ border: none; text-decoration: none; text-outline: none; - width: 70px; + height: 100%; + width: 100%; } .Button:hover:enabled { diff --git a/src/components/UI/DropDown/DropDown.css b/src/components/UI/DropDown/DropDown.css index b05cc4b..187a3f5 100644 --- a/src/components/UI/DropDown/DropDown.css +++ b/src/components/UI/DropDown/DropDown.css @@ -1,5 +1,7 @@ .DropDown { + display: block; width: 100%; + height: 100%; margin: 0; padding: 0; } diff --git a/src/components/UI/Grid/Grid.css b/src/components/UI/Grid/Grid.css new file mode 100644 index 0000000..185b7af --- /dev/null +++ b/src/components/UI/Grid/Grid.css @@ -0,0 +1,18 @@ +.Grid { + margin: 0; + padding: 0; + display: grid; + box-sizing: border-box; + height: 100%; + width: 100%; + overflow-y: auto; + overflow-x: auto; +} + +.GridOwner { + padding: 0; + margin: 0; + width: 100%; + height: 100%; + box-sizing: border-box; +} \ No newline at end of file diff --git a/src/components/UI/Grid/Grid.js b/src/components/UI/Grid/Grid.js new file mode 100644 index 0000000..8df6a23 --- /dev/null +++ b/src/components/UI/Grid/Grid.js @@ -0,0 +1,121 @@ +import React, {Component} from 'react'; +import CSSModules from 'react-css-modules'; +import styles from './Grid.css'; +import GridComponent from './GridComponent/GridComponent'; + +export default CSSModules(class extends Component { + constructor(props) { + super(props); + window.addEventListener("resize", this.updateSizeAsync); + } + + state = { + calculated: false, + dimensions: { + columns: 0, + rows: 0 + } + }; + + calculateDimensions = (size) => { + return { + columns: Math.floor(size.width / 4), + rows: Math.floor(size.height / 4) + }; + }; + + getSize = () => { + const elem = this.refs.GridOwner; + return { + height: elem ? elem.clientHeight : 0, + width: elem ? elem.clientWidth : 0 + }; + }; + + updateSize = () => { + const state = { + ...this.state + }; + const size = this.getSize(); + const dimensions = this.calculateDimensions(size); + if (state.dimensions !== dimensions) { + this.setState({ + calculated: true, + dimensions: dimensions + }) + } + }; + + updateSizeAsync = () => { + return new Promise((done) => { + this.updateSize(); + done(); + }); + }; + + componentDidMount = () => { + this.updateSizeAsync(); + }; + + componentWillUnmount = () => { + window.removeEventListener("resize", this.updateSizeAsync); + }; + + render() { + let children = null; + 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); + } + + 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 {child}; + }); + } + + const style = { + style: { + gridTemplateColumns: '4px '.repeat(dimensions.columns).trim(), + gridTemplateRows: '4px '.repeat(dimensions.rows).trim(), + gridAutoColumns: '4px', + gridAutoRows: '4px' + } + }; + + return ( +
+
+ {children} +
+
+ ) + }; + +}, styles, {allowMultiple: true}); \ No newline at end of file diff --git a/src/components/UI/Grid/GridComponent/GridComponent.css b/src/components/UI/Grid/GridComponent/GridComponent.css new file mode 100644 index 0000000..ca842fa --- /dev/null +++ b/src/components/UI/Grid/GridComponent/GridComponent.css @@ -0,0 +1,7 @@ +.GridComponent { + padding: 0; + margin: 0; + display: flex; + justify-content: center; + align-items: center; +} \ No newline at end of file diff --git a/src/components/UI/Grid/GridComponent/GridComponent.js b/src/components/UI/Grid/GridComponent/GridComponent.js new file mode 100644 index 0000000..686fa3e --- /dev/null +++ b/src/components/UI/Grid/GridComponent/GridComponent.js @@ -0,0 +1,21 @@ +import React from 'react'; +import CSSModules from 'react-css-modules'; +import styles from './GridComponent.css'; + +export default CSSModules((props) => { + const style = { + style: { + gridRowStart: Math.floor(props.row + 1), + gridRowEnd: 'span ' + Math.floor(props.rowSpan || 1), + gridColumnStart: Math.floor(props.col + 1), + gridColumnEnd: 'span ' + Math.floor(props.colSpan || 1) + } + }; + + return ( +
+ {props.children} +
+ ); + +}, styles, {allowMultiple: true}); \ No newline at end of file diff --git a/src/components/UI/Text/Text.css b/src/components/UI/Text/Text.css new file mode 100644 index 0000000..b03a3ae --- /dev/null +++ b/src/components/UI/Text/Text.css @@ -0,0 +1,39 @@ +.TextOwner { + margin: 0; + padding: 0; + width: 100%; + height: 100%; + display: flex; + justify-content: center; + align-content: center; + flex-direction: column; +} + +.Text { + display: inline-block; + padding: 0; + margin: 0; + text-decoration: none; + text-align: center; + vertical-align: center; + color: var(--text_color); +} + +.Heading1 { + font-weight: bold; + color: var(--heading_text_color); +} + +.Heading2 { + font-weight: bold; + color: var(--heading_other_text_color); +} + +.Heading3 { + font-weight: bold; + color: var(--heading_other_text_color); +} + +.AltTextColor { + color: var(--heading_other_text_color); +} \ No newline at end of file diff --git a/src/components/UI/Text/Text.js b/src/components/UI/Text/Text.js new file mode 100644 index 0000000..6cc5a05 --- /dev/null +++ b/src/components/UI/Text/Text.js @@ -0,0 +1,28 @@ +import React from 'react'; +import CSSModules from 'react-css-modules'; +import styles from './Text.css'; + +export default CSSModules((props) => { + const styleList = []; + styleList.push('Text'); + if (props.type) { + styleList.push(props.type); + } + + let style = {...props.style}; + if (props.textAlign) { + style['textAlign'] = props.textAlign.toLowerCase(); + } + + const text = ( +
{props.text} +
); + + return props.noOwner ? text : ( +
+ {text} +
); + +}, styles, {allowMultiple: true}); \ No newline at end of file diff --git a/src/components/UpgradeIcon/UpgradeIcon.css b/src/components/UpgradeIcon/UpgradeIcon.css index 9b8513a..8afe7ce 100644 --- a/src/components/UpgradeIcon/UpgradeIcon.css +++ b/src/components/UpgradeIcon/UpgradeIcon.css @@ -1,26 +1,21 @@ .Owner { - display: block; - margin-right: 2px; padding: 0; - width: 20px; - height: 20px; + margin: 0; + width: 100%; + height: 100%; border: 0; box-sizing: border-box; cursor: pointer; } -.Owner p { - margin: 0; - padding: 0; -} - .UpgradeIcon { display: block; margin: 0; padding: 0; + object-fit: contain; border: 0; - width: 20px; - height: 20px; + max-width: 100%; + max-height: 100%; box-sizing: border-box; opacity: 0.65; } \ No newline at end of file diff --git a/src/components/UpgradeIcon/UpgradeIcon.js b/src/components/UpgradeIcon/UpgradeIcon.js index 64e8ea8..7165531 100644 --- a/src/components/UpgradeIcon/UpgradeIcon.js +++ b/src/components/UpgradeIcon/UpgradeIcon.js @@ -5,27 +5,21 @@ import availableImage from '../../assets/images/release_available.png'; import ReactTooltip from 'react-tooltip'; export default CSSModules((props) => { - let style; - let style2; let placement = 'left'; let toolTipText = 'UI Upgrade Available'; if (props.release) { placement='bottom'; toolTipText = 'New Release Available'; - style = {float: 'right', marginRight: '5%', width: '15px', height: '15px', cursor: 'default'}; - style2 = {width: '15px', height: '15px'}; } return props .available ? ( -
+

{toolTipText} diff --git a/src/containers/MountItems/MountItems.css b/src/containers/MountItems/MountItems.css index 291e3c1..d1d3aed 100644 --- a/src/containers/MountItems/MountItems.css +++ b/src/containers/MountItems/MountItems.css @@ -1,5 +1,4 @@ .MountItems { padding: 0; - margin-top: 8px; width: 100%; } \ No newline at end of file