Skip to content

Commit

Permalink
Merge pull request #85 from rclone/ui-redesign
Browse files Browse the repository at this point in the history
Ui redesign
  • Loading branch information
negative0 authored Apr 16, 2020
2 parents 7d72ca4 + 1efb2f2 commit 1266423
Show file tree
Hide file tree
Showing 49 changed files with 2,548 additions and 2,138 deletions.
11 changes: 11 additions & 0 deletions .idea/inspectionProfiles/Project_Default.xml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

84 changes: 70 additions & 14 deletions src/actions/explorerActions.js
Original file line number Diff line number Diff line change
@@ -1,15 +1,18 @@
import axiosInstance from "../utils/API/API";
import {
CHANGE_DISTRACTION_FREE_MODE,
CHANGE_LAYOUT_COLS,
GET_CONFIG_FOR_REMOTE,
GET_FILES_LIST,
GET_REMOTE_LIST,
REQUEST_ERROR,
REQUEST_SUCCESS
ADD_LAYOUT_CONTAINER,
CHANGE_ACTIVE_REMOTE_CONTAINER,
CHANGE_DISTRACTION_FREE_MODE,
CHANGE_LAYOUT_COLS,
GET_CONFIG_FOR_REMOTE,
GET_FILES_LIST,
GET_REMOTE_LIST,
REMOVE_LAYOUT_CONTAINER,
REQUEST_ERROR,
REQUEST_SUCCESS
} from "./types";
import {addColonAtLast, isLocalRemoteName} from "../utils/Tools";
import {createPath} from "./explorerStateActions";
import {addColonAtLast, isLocalRemoteName, makeUniqueID} from "../utils/Tools";
import {createPath, removePath} from "./explorerStateActions";
import urls from "../utils/API/endpoint";

/**
Expand Down Expand Up @@ -110,21 +113,74 @@ export const getFiles = (remoteName, remotePath) => dispatch => {

/**
* Changes the number of columns in current layout view.
* @param mode {string} Either "vertical or horizontal, defines the split type"
* @param numCols {number} Number of columns to create
* @returns {Function}
*/
export const changeNumCols = (numCols) => (dispatch) => {
export const changeNumCols = (numCols, mode) => (dispatch) => {
if (!numCols || numCols < 0) throw new Error(`Invalid number of cols:${numCols}`);


for (let i = 0; i < numCols; i++) {
dispatch(createPath(i.toString()))
}
// for (let i = 0; i < numCols; i++) {
// dispatch(createPath(i.toString()))
// }

dispatch({
type: CHANGE_LAYOUT_COLS,
payload: {
numCols
numCols, mode
}
})
};

/**
* Adds a new remote container.
* @param paneID {int} pane ID
* @returns {Function}
*/
export const addRemoteContainer = (paneID) => (dispatch) => {
const uniqueID = makeUniqueID(3);
dispatch(createPath(uniqueID));
dispatch(changeActiveRemoteContainer(uniqueID, paneID));
dispatch({
type: ADD_LAYOUT_CONTAINER,
payload: {
containerID: uniqueID,
paneID
}
})
};


/**
* Remove a new remote container.
* @param containerID {string} Container ID to remove
* @param paneID {int} pane ID
* @returns {Function}
*/
export const removeRemoteContainer = (containerID, paneID) => (dispatch) => {
dispatch(removePath(containerID));
// console.log("Removing : " + containerID);
dispatch({
type: REMOVE_LAYOUT_CONTAINER,
payload: {
containerID, paneID
}
})
};

/**
* Change active remote container.
* @param containerID {string} Container ID to remove
* @param paneID {int} pane ID
* @returns {Function}
*/
export const changeActiveRemoteContainer = (containerID, paneID) => (dispatch) => {
dispatch({
type: CHANGE_ACTIVE_REMOTE_CONTAINER,
payload: {
containerID,
paneID
}
})
};
Expand Down
29 changes: 28 additions & 1 deletion src/actions/explorerStateActions.js
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,13 @@ import {
CHANGE_REMOTE_NAME,
CHANGE_REMOTE_PATH,
CHANGE_SEARCH_QUERY,
CHANGE_SORT_FILTER,
CHANGE_VISIBILITY_FILTER,
CREATE_PATH,
NAVIGATE_BACK,
NAVIGATE_FWD,
NAVIGATE_UP
NAVIGATE_UP,
REMOVE_PATH
} from "./types";
import {getFiles} from "./explorerActions";

Expand Down Expand Up @@ -98,6 +100,20 @@ export const createPath = (containerID) => dispatch => {
};


/**
* Creates an empty path for initialization of a container.
* @param containerID {string}
* @returns {Function}
*/
export const removePath = (containerID) => dispatch => {

dispatch({
type: REMOVE_PATH,
id: containerID
})
};


/**
* Computes and requests the path for going one level up in the working directory.
* Eg: /tmp/abc -> navigateUp -> /tmp
Expand Down Expand Up @@ -197,3 +213,14 @@ export const setLoadImages = (containerID, shouldLoad) => dispatch => {
})
};

export const changeSortFilter = (containerID, sortFilter, sortFilterAscending) => dispatch => {
dispatch({
type: CHANGE_SORT_FILTER,
id: containerID,
payload: {
sortFilter,
sortFilterAscending
}
})
}

5 changes: 5 additions & 0 deletions src/actions/types.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ export const GET_CONFIG_DUMP = 'GET_CONFIG_DUMP';
export const GET_FILES_LIST = 'GET_FILES_LIST';
export const CHANGE_PATH = 'CHANGE_PATH';
export const CREATE_PATH = 'CREATE_PATH';
export const REMOVE_PATH = 'REMOVE_PATH';
export const CHANGE_REMOTE_NAME = 'CHANGE_REMOTE_NAME';
export const CHANGE_REMOTE_PATH = 'CHANGE_REMOTE_PATH';
export const NAVIGATE_UP = 'NAVIGATE_UP';
Expand All @@ -30,7 +31,11 @@ export const CHANGE_AXIOS_INTERCEPTOR = 'CHANGE_AXIOS_INTERCEPTOR';
export const CHANGE_LOAD_IMAGES = 'CHANGE_LOAD_IMAGES';
export const LOAD_IMAGE = 'LOAD_IMAGE';
export const CHANGE_LAYOUT_COLS = 'CHANGE_LAYOUT_COLS';
export const ADD_LAYOUT_CONTAINER = 'ADD_LAYOUT_CONTAINER';
export const REMOVE_LAYOUT_CONTAINER = 'REMOVE_LAYOUT_CONTAINER';
export const CHANGE_ACTIVE_REMOTE_CONTAINER = 'CHANGE_ACTIVE_REMOTE_CONTAINER';
export const CHANGE_DISTRACTION_FREE_MODE = "CHANGE_DISTRACTION_FREE_MODE";
export const CHANGE_SORT_FILTER = "CHANGE_SORT_FILTER";


export const REQUEST_ERROR = 'ERROR';
Expand Down
Binary file added src/assets/img/brand/animatedlogo.gif
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/brand/logo_symbol.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/double-pane1.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/new-folder.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/single-pane.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/img/triple-pane.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
10 changes: 4 additions & 6 deletions src/containers/DefaultLayout/DefaultHeader.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {NavLink} from 'react-router-dom';
import {Nav, NavItem} from 'reactstrap';
import PropTypes from 'prop-types';

import {AppAsideToggler, AppNavbarBrand, AppSidebarToggler} from '@coreui/react';
import {AppNavbarBrand, AppSidebarToggler} from '@coreui/react';
import logo from '../../assets/img/brand/logo.png'
import favicon from '../../assets/img/brand/favicon.png'
import BackendStatusCard from "../../views/Base/BackendStatusCard/BackendStatusCard";
Expand All @@ -24,8 +24,8 @@ class DefaultHeader extends Component {
<React.Fragment>
<AppSidebarToggler className="d-lg-none" display="md" mobile/>
<AppNavbarBrand
full={{src: logo, width: 89, height: 25, alt: 'CoreUI Logo'}}
minimized={{src: favicon, width: 30, height: 30, alt: 'CoreUI Logo'}}
full={{src: logo, width: 89, height: 25, alt: 'Rclone Logo'}}
minimized={{src: favicon, width: 30, height: 30, alt: 'Rclone Logo'}}
/>
<AppSidebarToggler className="d-md-down-none" display="lg"/>

Expand All @@ -37,10 +37,8 @@ class DefaultHeader extends Component {
</Nav>
<Nav className="ml-auto" navbar>
<BackendStatusCard mode={"button"}/>


</Nav>
<AppAsideToggler className="d-md-down-none"/>

</React.Fragment>
);
}
Expand Down
8 changes: 1 addition & 7 deletions src/containers/DefaultLayout/DefaultLayout.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import {Container} from 'reactstrap';
import {getVersion} from "../../actions/versionActions";

import {
AppAside,
AppBreadcrumb,
AppFooter,
AppHeader,
Expand All @@ -23,7 +22,7 @@ import {connect} from "react-redux";
import {AUTH_KEY} from "../../utils/Constants";
import ErrorBoundary from "../../ErrorHandling/ErrorBoundary";

const DefaultAside = React.lazy(() => import('./DefaultAside'));
// const DefaultAside = React.lazy(() => import('./DefaultAside'));
const DefaultFooter = React.lazy(() => import('./DefaultFooter'));
const DefaultHeader = React.lazy(() => import('./DefaultHeader'));

Expand Down Expand Up @@ -104,11 +103,6 @@ class DefaultLayout extends Component {
</Suspense>
</Container>
</main>
<AppAside fixed>
<Suspense fallback={this.loading()}>
<DefaultAside/>
</Suspense>
</AppAside>
</div>
<AppFooter>
<Suspense fallback={this.loading()}>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
"_result": null,
"_status": -1,
},
"name": "New Drive",
"name": "Edit Remote",
"path": "/newdrive/edit/:drivePrefix",
},
Object {
Expand All @@ -134,7 +134,7 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
"_status": -1,
},
"exact": true,
"name": "New Drive",
"name": "New Remote",
"path": "/newdrive",
},
Object {
Expand All @@ -145,7 +145,7 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
"_status": -1,
},
"exact": true,
"name": "New Drive",
"name": "Login Page",
"path": "/login",
},
Object {
Expand Down Expand Up @@ -220,21 +220,21 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
<Switch>
<Route
key="1"
name="New Drive"
name="Edit Remote"
path="/newdrive/edit/:drivePrefix"
render={[Function]}
/>
<Route
exact={true}
key="2"
name="New Drive"
name="New Remote"
path="/newdrive"
render={[Function]}
/>
<Route
exact={true}
key="3"
name="New Drive"
name="Login Page"
path="/login"
render={[Function]}
/>
Expand Down Expand Up @@ -277,25 +277,6 @@ exports[`Remote Explorer renders should match snapshot 1`] = `
</Suspense>
</Container>
</main>
<AppAside
display=""
fixed={true}
isOpen={false}
offCanvas={true}
tag="aside"
>
<Suspense
fallback={
<div
className="animated fadeIn pt-1 text-center"
>
Loading...
</div>
}
>
<lazy />
</Suspense>
</AppAside>
</div>
<AppFooter
fixed={false}
Expand Down
Loading

0 comments on commit 1266423

Please sign in to comment.