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:
sgraves76
2019-10-22 13:28:50 -05:00
parent 0f2bd33779
commit 0571a69814
15 changed files with 29 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/App.css
View File

@@ -1,6 +1,6 @@
.App { .App {
margin: 0; margin: 0;
padding: 8px; padding: var(--default_spacing);
box-sizing: border-box; box-sizing: border-box;
height: 100vh; height: 100vh;
width: 100vw; width: 100vw;
@@ -16,7 +16,7 @@
.AppHeader { .AppHeader {
height: 28px; height: 28px;
margin-bottom: 8px; margin-bottom: var(--default_spacing);
box-sizing: border-box; box-sizing: border-box;
} }

6
src/App.js
View File

@@ -141,16 +141,16 @@ class App extends IPCContainer {
let key = 0; let key = 0;
mainContent.push(( mainContent.push((
<Box key={'md_' + key++} <Box key={'md_' + key++}
dxStyle={{padding: '8px', height: 'auto'}}> dxStyle={{padding: 'var(--default_spacing)', height: 'auto'}}>
<ReleaseVersionDisplay downloadDisabled={!downloadEnabled} <ReleaseVersionDisplay downloadDisabled={!downloadEnabled}
version={selectedVersion}/> version={selectedVersion}/>
</Box> </Box>
)); ));
mainContent.push(<div key={'md_' + key++} mainContent.push(<div key={'md_' + key++}
style={{paddingTop: '8px'}}/>); style={{paddingTop: 'var(--default_spacing)'}}/>);
if (allowMount) { if (allowMount) {
mainContent.push(( mainContent.push((
<Box dxStyle={{padding: '8px', height: 'auto'}} <Box dxStyle={{padding: 'var(--default_spacing)', height: 'auto'}}
key={'md_' + key++}> key={'md_' + key++}>
<MountItems allowConfig={allowConfig} <MountItems allowConfig={allowConfig}
allowSiaPrime={allowSiaPrime} allowSiaPrime={allowSiaPrime}

2
src/components/ErrorDetails/ErrorDetails.css
View File

@@ -7,5 +7,5 @@
.ErrorDetailsContent { .ErrorDetailsContent {
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
margin-bottom: 8px; margin-bottom: var(--default_spacing);
} }

2
src/components/ErrorDetails/ErrorDetails.js
View File

@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
export default connect(mapStateToProps, mapDispatchToProps)(props => { export default connect(mapStateToProps, mapDispatchToProps)(props => {
return ( return (
<Box dxDark dxStyle={{padding: '8px'}}> <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
<h1 className={'ErrorDetailsHeading'}>Application Error</h1> <h1 className={'ErrorDetailsHeading'}>Application Error</h1>
<div className={'ErrorDetailsContent'}> <div className={'ErrorDetailsContent'}>
<p>{props.ErrorMessage}</p> <p>{props.ErrorMessage}</p>

2
src/components/InfoDetails/InfoDetails.css
View File

@@ -7,5 +7,5 @@
max-height: 60vh; max-height: 60vh;
min-width: 80vw; min-width: 80vw;
overflow-y: auto; overflow-y: auto;
margin-bottom: 8px; margin-bottom: var(--default_spacing);
} }

2
src/components/InfoDetails/InfoDetails.js
View File

@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
export default connect(mapStateToProps, mapDispatchToProps)(props => { export default connect(mapStateToProps, mapDispatchToProps)(props => {
return ( return (
<Box dxDark dxStyle={{padding: '8px'}}> <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
<h1 className={'InfoDetailsHeading'}>{props.InfoMessage.title}</h1> <h1 className={'InfoDetailsHeading'}>{props.InfoMessage.title}</h1>
<div className={'InfoDetailsContent'}> <div className={'InfoDetailsContent'}>
<p style={{textAlign: 'left', whiteSpace: 'pre-line'}}>{props.InfoMessage.message}</p> <p style={{textAlign: 'left', whiteSpace: 'pre-line'}}>{props.InfoMessage.message}</p>

2
src/components/Reboot/Reboot.css
View File

@@ -7,5 +7,5 @@
.RebootContent { .RebootContent {
max-height: 60vh; max-height: 60vh;
overflow-y: auto; overflow-y: auto;
margin-bottom: 8px; margin-bottom: var(--default_spacing);
} }

2
src/components/Reboot/Reboot.js
View File

@@ -13,7 +13,7 @@ const mapDispatchToProps = dispatch => {
export default connect(null, mapDispatchToProps)(props => { export default connect(null, mapDispatchToProps)(props => {
return ( return (
<Box dxDark dxStyle={{padding: '8px'}}> <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
<h1 className={'RebootHeading'}>Reboot System</h1> <h1 className={'RebootHeading'}>Reboot System</h1>
<div className={'RebootContent'}> <div className={'RebootContent'}>
<p>Repertory requires a system reboot to continue.</p> <p>Repertory requires a system reboot to continue.</p>

2
src/components/YesNo/YesNo.js
View File

@@ -19,7 +19,7 @@ const mapDispatchToProps = dispatch => {
export default connect(mapStateToProps, mapDispatchToProps)(props => { export default connect(mapStateToProps, mapDispatchToProps)(props => {
return ( return (
<Box dxStyle={{minWidth: '180px', height: 'auto', padding: '8px'}}> <Box dxStyle={{minWidth: '180px', height: 'auto', padding: 'var(--default_spacing)'}}>
<div style={{width: '100%', height: 'auto'}}> <div style={{width: '100%', height: 'auto'}}>
<h1 style={{width: '100%', textAlign: 'center'}}>{props.Title}</h1> <h1 style={{width: '100%', textAlign: 'center'}}>{props.Title}</h1>
</div> </div>

10
src/containers/AddRemoteMount/AddRemoteMount.js
View File

@@ -61,8 +61,8 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
render() { render() {
const displayAdd = createModalConditionally(this.state.Display, ( const displayAdd = createModalConditionally(this.state.Display, (
<Box dxDark <Box dxDark
dxStyle={{width: 'auto', height: 'auto', padding: '8px'}}> dxStyle={{width: 'auto', height: 'auto', padding: 'var(--default_spacing)'}}>
<h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: '8px'}}>Add Remote Mount</h1> <h1 style={{color: 'var(--text_color_error)', textAlign: 'center', paddingBottom: 'var(--default_spacing)'}}>Add Remote Mount</h1>
<Text text={'Hostname or IP'} <Text text={'Hostname or IP'}
textAlign={'left'} textAlign={'left'}
type={'Heading1'}/> type={'Heading1'}/>
@@ -70,7 +70,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
className={'ConfigurationItemInput'} className={'ConfigurationItemInput'}
type={'text'} type={'text'}
value={this.state.HostNameOrIp}/> value={this.state.HostNameOrIp}/>
<div style={{paddingTop: '8px'}}/> <div style={{paddingTop: 'var(--default_spacing)'}}/>
<Text text={'Port'} <Text text={'Port'}
textAlign={'left'} textAlign={'left'}
type={'Heading1'}/> type={'Heading1'}/>
@@ -80,7 +80,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
className={'ConfigurationItemInput'} className={'ConfigurationItemInput'}
type={'number'} type={'number'}
value={this.state.Port}/> value={this.state.Port}/>
<div style={{paddingTop: '8px'}}/> <div style={{paddingTop: 'var(--default_spacing)'}}/>
<Text text={'Remote Token'} <Text text={'Remote Token'}
textAlign={'left'} textAlign={'left'}
type={'Heading1'}/> type={'Heading1'}/>
@@ -88,7 +88,7 @@ export default connect(mapStateToProps, mapDispatchToProps)(class extends Compon
className={'ConfigurationItemInput'} className={'ConfigurationItemInput'}
type={'text'} type={'text'}
value={this.state.Token}/> value={this.state.Token}/>
<div style={{paddingTop: '8px'}}/> <div style={{paddingTop: 'var(--default_spacing)'}}/>
<table cellSpacing={1} <table cellSpacing={1}
width="100%"> width="100%">
<tbody> <tbody>

4
src/containers/Configuration/Configuration.js
View File

@@ -252,7 +252,7 @@ class Configuration extends IPCContainer {
if ((this.state.ChangedItems.length > 0) || this.state.ChangedObjectLookup) { if ((this.state.ChangedItems.length > 0) || this.state.ChangedObjectLookup) {
confirmSave = ( confirmSave = (
<Modal> <Modal>
<Box dxStyle={{width: '40vw', padding: '4px'}}> <Box dxStyle={{width: '40vw', padding: 'var(--default_spacing)'}}>
<h1 style={{width: '100%', textAlign: 'center'}}>Save Changes?</h1> <h1 style={{width: '100%', textAlign: 'center'}}>Save Changes?</h1>
<table width='100%'><tbody> <table width='100%'><tbody>
<tr> <tr>
@@ -310,7 +310,7 @@ class Configuration extends IPCContainer {
return ( return (
<div className={'Configuration'}> <div className={'Configuration'}>
{confirmSave} {confirmSave}
<Box dxDark dxStyle={{padding: '8px'}}> <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
<div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}> <div style={{float: 'right', margin: 0, padding: 0, marginTop: '-4px', boxSizing: 'border-box', display: 'block'}}>
<b style={{cursor: 'pointer'}} <b style={{cursor: 'pointer'}}
onClick={this.checkSaveRequired}>X</b> onClick={this.checkSaveRequired}>X</b>

12
src/containers/MountItems/MountItems.js
View File

@@ -292,7 +292,7 @@ class MountItems extends IPCContainer {
retryList.push(<Button clicked={()=>this.cancelRetryMount(provider, ()=> this.detectMounts())} retryList.push(<Button clicked={()=>this.cancelRetryMount(provider, ()=> this.detectMounts())}
key={'rl_' + retryList.length}>Cancel {provider} Remount ({this.state.RetryItems[provider].RetrySeconds}s)</Button>); key={'rl_' + retryList.length}>Cancel {provider} Remount ({this.state.RetryItems[provider].RetrySeconds}s)</Button>);
if (retryCount++ < Object.keys(this.state.RetryItems).length) { if (retryCount++ < Object.keys(this.state.RetryItems).length) {
retryList.push(<div style={{paddingTop: '8px'}} retryList.push(<div style={{paddingTop: 'var(--default_spacing)'}}
key={'rl_' + retryList.length}/>); key={'rl_' + retryList.length}/>);
} }
} }
@@ -300,8 +300,8 @@ class MountItems extends IPCContainer {
retryDisplay = ( retryDisplay = (
<Modal> <Modal>
<Box dxDark dxStyle={{padding: '8px', minWidth: '70vw'}}> <Box dxDark dxStyle={{padding: 'var(--default_spacing)', minWidth: '70vw'}}>
<h1 style={{textAlign: 'center', paddingBottom: '8px', color: 'var(--text_color_error)'}}>Mount Failed</h1> <h1 style={{textAlign: 'center', paddingBottom: 'var(--default_spacing)', color: 'var(--text_color_error)'}}>Mount Failed</h1>
{retryList} {retryList}
</Box> </Box>
</Modal> </Modal>
@@ -328,7 +328,7 @@ class MountItems extends IPCContainer {
provider={provider}/> provider={provider}/>
)); ));
items.push(<div key={'it_' + items.length} items.push(<div key={'it_' + items.length}
style={{paddingTop: '8px'}} />) style={{paddingTop: 'var(--default_spacing)'}} />)
} }
if (this.props.remoteSupported) { if (this.props.remoteSupported) {
@@ -344,7 +344,7 @@ class MountItems extends IPCContainer {
remote/> remote/>
)); ));
items.push(<div key={'it_' + items.length} items.push(<div key={'it_' + items.length}
style={{paddingTop: '8px'}}/>) style={{paddingTop: 'var(--default_spacing)'}}/>)
} }
items.splice(items.length - 1, 1); items.splice(items.length - 1, 1);
} else { } else {
@@ -357,7 +357,7 @@ class MountItems extends IPCContainer {
<div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}> <div className={this.props.remoteSupported ? 'MountItemsRemote' : 'MountItems'}>
{items} {items}
</div> </div>
<div style={{paddingTop: '8px'}}/> <div style={{paddingTop: 'var(--default_spacing)'}}/>
{footerItems} {footerItems}
</div>); </div>);
} }

2
src/containers/SelectAppPlatform/SelectAppPlatform.css
View File

@@ -8,7 +8,7 @@
max-height: 60vh; max-height: 60vh;
width: 255px; width: 255px;
overflow-y: auto; overflow-y: auto;
margin-bottom: 8px; margin-bottom: var(--default_spacing);
} }
.SAPActions { .SAPActions {

2
src/containers/SelectAppPlatform/SelectAppPlatform.js
View File

@@ -50,7 +50,7 @@ class SelectAppPlatform extends IPCContainer {
render() { render() {
return ( return (
<Box dxDark dxStyle={{padding: '8px'}}> <Box dxDark dxStyle={{padding: 'var(--default_spacing)'}}>
<h1 className={'SAPHeading'}>Select Linux Platform</h1> <h1 className={'SAPHeading'}>Select Linux Platform</h1>
<div className={'SAPContent'}> <div className={'SAPContent'}>
<p>Repertory was unable to detect your Linux distribution. Please select one of the following and click <b>Test</b> to continue:</p> <p>Repertory was unable to detect your Linux distribution. Please select one of the following and click <b>Test</b> to continue:</p>

3
src/index.css
View File

@@ -15,7 +15,8 @@
--heading_other_text_color: var(--heading_text_color); --heading_other_text_color: var(--heading_text_color);
--text_color_transition: color 0.3s; --text_color_transition: color 0.3s;
--default_font_size: 14px --default_font_size: 14px;
--default_spacing: 8px;
} }
* { * {