diff --git a/public/electron.js b/public/electron.js index b837b15..f17d8c1 100644 --- a/public/electron.js +++ b/public/electron.js @@ -44,7 +44,7 @@ const UpgradeIPC = require('../src/renderer/ipc/UpgradeIPC'); const platform = os.platform(); const dimensions = { - height: platform === 'win32' ? 326 : platform === 'darwin' ? 322 : 300, + height: platform === 'win32' ? 326 : platform === 'darwin' ? 322 : 400, width: platform === 'win32' ? 468 : 628, }; diff --git a/src/App.css b/src/App.css index 197dcb6..6d7548b 100644 --- a/src/App.css +++ b/src/App.css @@ -8,19 +8,3 @@ background-size: cover; } -.AppContainer { - width: 100%; - height: 100%; - box-sizing: border-box; -} - -.AppHeader { - height: 28px; - margin-bottom: var(--default_spacing); - box-sizing: border-box; -} - -.AppContent { - height: calc(100% - 36px); - box-sizing: border-box; -} diff --git a/src/App.jsx b/src/App.jsx index 5c2b9c3..239845e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -280,7 +280,7 @@ class App extends IPCContainer { let mainContent = []; if (this.props.DisplaySelectAppPlatform || !this.props.AppReady) { mainContent = ( - + ); @@ -288,24 +288,25 @@ class App extends IPCContainer { let key = 0; mainContent.push( + dxStyle={{ padding: 'var(--default_spacing)' }}> ); - mainContent.push( -
- ); if (allowMount) { mainContent.push( @@ -329,41 +334,39 @@ class App extends IPCContainer { return (
-
-
- - - - 0) - } - newReleases={ - !missingDependencies && - !this.props.UpgradeAvailable && - this.props.NewReleasesAvailable2.length > 0 - } - clicked={this.handleUpgradeIconClicked} - col={(dimensions) => dimensions.columns - 6} - colSpan={5} - row={1} - rowSpan={(remain) => remain - 1} - /> - - -
-
{mainContent}
-
+ + + + + 0) + } + newReleases={ + !missingDependencies && + !this.props.UpgradeAvailable && + this.props.NewReleasesAvailable2.length > 0 + } + clicked={this.handleUpgradeIconClicked} + col={(dimensions) => dimensions.columns - 6} + colSpan={1} + row={1} + rowSpan={(remain) => remain - 1} + /> + + + {mainContent} + {importDisplay} {exportDisplay} {newReleasesDisplay} diff --git a/src/containers/AddEditHost/AddEditHost.js b/src/containers/AddEditHost/AddEditHost.js index bec33db..1f6a799 100644 --- a/src/containers/AddEditHost/AddEditHost.js +++ b/src/containers/AddEditHost/AddEditHost.js @@ -5,12 +5,13 @@ import DropDown from '../../components/UI/DropDown/DropDown'; import PropTypes from 'prop-types'; import Text from '../../components/UI/Text/Text'; import { Component } from 'react'; -import { connect } from 'react-redux'; -import { createDismissDisplay } from '../../utils.jsx'; import { addEditHost, completeAddEditHost, } from '../../redux/actions/host_actions'; +import { connect } from 'react-redux'; +import { createDismissDisplay } from '../../utils.jsx'; +import { notifyError } from '../../redux/actions/error_actions'; class AddEditHost extends Component { state = { @@ -37,6 +38,18 @@ class AddEditHost extends Component { } handleSave = () => { + if (this.state.HostNameOrIp.trim().length == 0) { + this.props.notifyError('Host / IP cannot be empty'); + return; + } + if (this.state.HostNameOrIp.trim().indexOf('/') >= 0) { + this.props.notifyError(`Host / IP cannot be contain '/'`); + return; + } + if (this.state.HostNameOrIp.trim().indexOf(':') >= 0) { + this.props.notifyError(`Host / IP cannot be contain ':'`); + return; + } this.props.completeAddEditHost(this.state); }; @@ -224,6 +237,7 @@ const mapDispatchToProps = (dispatch) => { Close: () => dispatch(addEditHost(false)), completeAddEditHost: (host_data) => dispatch(completeAddEditHost(true, host_data)), + notifyError: (msg) => dispatch(notifyError(msg)), }; }; @@ -231,6 +245,7 @@ AddEditHost.propTypes = { Close: PropTypes.func.isRequired, completeAddEditHost: PropTypes.func.isRequired, HostData: PropTypes.object, + notifyError: PropTypes.func.isRequired, }; export default connect(mapStateToProps, mapDispatchToProps)(AddEditHost); diff --git a/src/containers/HostList/Host/Host.js b/src/containers/HostList/Host/Host.js index 6a03dcd..1cd255e 100644 --- a/src/containers/HostList/Host/Host.js +++ b/src/containers/HostList/Host/Host.js @@ -24,6 +24,7 @@ const Host = ({ allowDelete, addEditHost, value, onChange, onDelete }) => { }); }; + const premium = value.AuthURL && value.AuthUser; return (
{
) : null} -

- {value.HostNameOrIp + - ((value.Protocol === 'http' && value.ApiPort === 80) || - (value.Protocol === 'https' && value.ApiPort === 443) - ? '' - : ':' + value.ApiPort)} -

+ {premium ? ( +

+ + {'(premium) ' + + value.HostNameOrIp + + ((value.Protocol === 'http' && value.ApiPort === 80) || + (value.Protocol === 'https' && value.ApiPort === 443) + ? '' + : ':' + value.ApiPort)} + +

+ ) : ( +

+ {value.HostNameOrIp + + ((value.Protocol === 'http' && value.ApiPort === 80) || + (value.Protocol === 'https' && value.ApiPort === 443) + ? '' + : ':' + value.ApiPort)} +

+ )}
); }; diff --git a/src/containers/MountItems/MountItems.css b/src/containers/MountItems/MountItems.css index ee9a79a..6e7326e 100644 --- a/src/containers/MountItems/MountItems.css +++ b/src/containers/MountItems/MountItems.css @@ -1,7 +1,7 @@ .MountItems { padding: 0; margin: 0; - height: 121px; + height: 212px; width: 100%; box-sizing: border-box; overflow: hidden; @@ -10,7 +10,7 @@ .MountItemsRemote { padding: 0; margin: 0; - height: 121px; + height: 212px; width: 100%; box-sizing: border-box; overflow-x: hidden; diff --git a/src/containers/MountItems/MountItems.js b/src/containers/MountItems/MountItems.js index 74267d0..411ba02 100644 --- a/src/containers/MountItems/MountItems.js +++ b/src/containers/MountItems/MountItems.js @@ -314,7 +314,7 @@ class MountItems extends IPCContainer { return false; }; - onDetectMountReply = (event, arg) => { + onDetectMountReply = (_, arg) => { const provider = arg.data.Provider; if (!this.state.RetryItems[provider]) { if ( @@ -344,13 +344,13 @@ class MountItems extends IPCContainer { } }; - onMountDriveReply = (event, arg) => { + onMountDriveReply = (_, arg) => { this.props.setMounted(arg.data.Provider, arg.data.Success); this.detectMount(arg.data.Provider); this.removeMountsBusy(arg.data.Provider); }; - onUnmountDriveReply = (event, arg) => { + onUnmountDriveReply = (_, arg) => { if ( arg && arg.data && @@ -480,78 +480,49 @@ class MountItems extends IPCContainer { ); } - let items = []; - for (const provider of this.getProviderList(true)) { - items.push( + let mountItems = []; + const addMountItem = (provider, remote, s3) => { + if (mountItems.length > 0) { + mountItems.push( +
+ ); + } + + mountItems.push( this.handleMountLocationChanged(provider, e.target.value) } clicked={this.handleMountUnMount} - key={'it_' + items.length} + key={'it_' + mountItems.length} provider={provider} + remote={remote} + s3={s3} /> ); - items.push( -
- ); + }; + + for (const provider of this.getProviderList(true)) { + addMountItem(provider); } if (this.props.remoteSupported) { for (const provider of this.props.RemoteMounts) { - items.push( - - this.handleMountLocationChanged(provider, e.target.value) - } - clicked={this.handleMountUnMount} - key={'it_' + items.length} - provider={provider} - remote - /> - ); - items.push( -
- ); + addMountItem(provider, true); } } if (this.props.s3Supported) { for (const provider of this.props.S3Mounts) { - items.push( - - this.handleMountLocationChanged(provider, e.target.value) - } - clicked={this.handleMountUnMount} - key={'it_' + items.length} - provider={provider} - s3 - /> - ); - items.push( -
- ); + addMountItem(provider, false, true); } } - items.splice(items.length - 1, 1); - return (
{retryDisplay} @@ -561,7 +532,7 @@ class MountItems extends IPCContainer { ? 'MountItemsRemote' : 'MountItems' }> - {items} + {mountItems}
{footerItems}