Merge pull request #86 from rclone/ui-redesign

Ui redesign v2.0

Author: negative0

.github/workflows/nodejs.yml

@@ -6,11 +6,11 @@ on:
 jobs:
   build:
 
-    runs-on: ubuntu-latest
-
     strategy:
       matrix:
+        platform: [ubuntu-latest, macos-latest, windows-latest]
         node-version: [8.x, 10.x, 12.x]
+    runs-on: ${{ matrix.platform }}
 
     steps:
       - uses: actions/checkout@v1

.github/workflows/prerelease.yml

@@ -0,0 +1,64 @@
+name: Pre Release
+
+on:
+  push:
+    # Sequence of patterns matched against refs/tags
+    tags:
+      - 'v*-beta' # Push events to matching v*, i.e. v1.0, v20.15.10
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [12.x]
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node-version }}
+      - name: npm install, build, and test
+        run: |
+          npm ci
+          npm run test:cov
+          npm run build
+        env:
+          CI: true
+      - name: Zip build
+        run: |
+          zip -r currentbuild.zip build
+      - name: Deploy to gh-pages
+        if: success()
+        uses: crazy-max/ghaction-github-pages@v1
+        with:
+          target_branch: gh-pages
+          build_dir: build
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Create Release
+        id: create_release
+        uses: actions/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: Release ${{ github.ref }}
+          draft: false
+          prerelease: true
+
+      - name: Upload Release Asset
+        id: upload-release-asset
+        if: success()
+        uses: actions/[email protected]
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }} # This pulls from the CREATE RELEASE step above, referencing it's ID to get its outputs object, which include a `upload_url`. See this blog post for more info: https://jasonet.co/posts/new-features-of-github-actions/#passing-data-to-future-steps
+          asset_path: ./currentbuild.zip
+          asset_name: currentbuild.zip
+          asset_content_type: application/zip
+

src/containers/DefaultLayout/DefaultLayout.js

@@ -49,7 +49,7 @@ class DefaultLayout extends Component {
         }
     }
 
-    componentWillMount() {
+    componentDidMount() {
         if (!localStorage.getItem(AUTH_KEY)) {
             this.props.history.push('/login');
         } else {

src/utils/Tools.js

@@ -173,6 +173,15 @@ export function validateDuration(str) {
     return baseValidator(regex, str);
 }
 
+/**
+ * Validate the allowed drive name
+ * @returns {boolean|*|never}
+ * */
+export function validateDriveName(name) {
+    const regex = /^[0-9A-Za-z_-]*$/i;
+    return baseValidator(regex, name);
+}
+
 /**
  * Opens the specified URL in a new tab and focus on it.
  * @param url {string} URL to be opened.

src/views/Base/BackendStatusCard/BackendStatusCard.js

@@ -25,7 +25,7 @@ function TaskModal() {
 class BackendStatusCard extends React.Component {
 
 
-    componentWillMount() {
+    componentDidMount() {
 
         // Check if the connection to the backend is active
         this.props.getStatus();

src/views/Explorer/FilesView/FilesView.js

@@ -56,7 +56,6 @@ const filesTarget = {
     },
     canDrop(props, monitor) {
         const {remoteName, remotePath} = monitor.getItem();
-        console.log(remoteName, props.currentPath.remoteName, remotePath, props.currentPath.remotePath);
         const destRemoteName = props.currentPath.remoteName;
         const destRemotePath = props.currentPath.remotePath;
         if (destRemoteName === remoteName) {

src/views/Explorer/RemoteExplorerLayout/RemoteExplorerLayout.js

@@ -8,7 +8,7 @@ import {connect} from "react-redux";
 import {compose} from "redux";
 import {createPath} from "../../../actions/explorerStateActions";
 import * as PropTypes from 'prop-types';
-import {changeDistractionFreeMode, changeNumCols} from "../../../actions/explorerActions";
+import {addRemoteContainer, changeDistractionFreeMode, changeNumCols} from "../../../actions/explorerActions";
 import ErrorBoundary from "../../../ErrorHandling/ErrorBoundary";
 
 import singlePaneImg from '../../../assets/img/single-pane.png';
@@ -19,25 +19,24 @@ import TabsLayout from "../TabsLayout/TabsLayout";
 
 class RemoteExplorerLayout extends React.Component {
 
+	changeLayout = (nos, mode) => {
+		const {changeNumCols} = this.props;
+		// Check if the current layout is not same as previous
+		if (nos !== changeNumCols) {
+			changeNumCols(nos, mode);
+		}
+	};
 
-    changeLayout = (nos, mode) => {
-        const {changeNumCols} = this.props;
-        // Check if the current layout is not same as previous
-        if(nos !== changeNumCols){
-            changeNumCols(nos, mode);
-        }
-    };
-
-    componentDidMount() {
-        //Load one explorer layout
-        const {numCols, changeNumCols} = this.props;
+	componentDidMount() {
+		//Load one explorer layout
+		const {numContainers, addRemoteContainer} = this.props;
 
-        if (numCols < 1) {
-            changeNumCols(1, "horizontal");
-        }
-    }
+		if (numContainers < 1) {
+			addRemoteContainer(0)
+		}
+	}
 
-    toggleDistractionFreeMode = (_) => {
+	toggleDistractionFreeMode = (_) => {
 		const {distractionFreeMode, changeDistractionFreeMode} = this.props;
 		// this.setState((prevState) => ({
 		//     distractionFreeMode: !prevState.distractionFreeMode
@@ -68,9 +67,6 @@ class RemoteExplorerLayout extends React.Component {
 							}
 						})
 					}
-					{/*{activeRemoteContainerID && activeRemoteContainerID[pane] && activeRemoteContainerID[pane] !== "" &&*/}
-					{/*<RemoteExplorer containerID={activeRemoteContainerID[pane]} className={"d-none"}*/}
-					{/*                distractionFreeMode={distractionFreeMode}/>}*/}
 
 				</Col>
             ))
@@ -135,12 +131,13 @@ class RemoteExplorerLayout extends React.Component {
 }
 
 const mapStateToProps = (state) => ({
-    backStacks: state.explorer.backStacks,
-    numCols: state.remote.numCols,
-    distractionFreeMode: state.remote.distractionFreeMode,
-    splitMode: state.remote.splitMode,
-    activeRemoteContainerID: state.remote.activeRemoteContainerID,
-    containers: state.remote.containers,
+	backStacks: state.explorer.backStacks,
+	numCols: state.remote.numCols,
+	numContainers: state.remote.numContainers,
+	distractionFreeMode: state.remote.distractionFreeMode,
+	splitMode: state.remote.splitMode,
+	activeRemoteContainerID: state.remote.activeRemoteContainerID,
+	containers: state.remote.containers,
 });
 
 RemoteExplorerLayout.propTypes = {
@@ -151,6 +148,6 @@ RemoteExplorerLayout.propTypes = {
 };
 
 export default compose(
-    connect(mapStateToProps, {createPath, changeNumCols, changeDistractionFreeMode}),
-    DragDropContext(HTML5Backend)
+	connect(mapStateToProps, {createPath, changeNumCols, changeDistractionFreeMode, addRemoteContainer}),
+	DragDropContext(HTML5Backend)
 )(RemoteExplorerLayout);