[ARVADOS-WORKBENCH2] created: 1.2.0-374-ga6540e0
Git user
git at public.curoverse.com
Mon Sep 17 05:31:20 EDT 2018
at a6540e058f12352e3cde3486f6a613b6a7420172 (commit)
commit a6540e058f12352e3cde3486f6a613b6a7420172
Author: Janicki Artur <artur.janicki at contractors.roche.com>
Date: Mon Sep 17 11:31:06 2018 +0200
init resizing panels and improve new button.
Feature #14038
Arvados-DCO-1.1-Signed-off-by: Janicki Artur <artur.janicki at contractors.roche.com>
diff --git a/package.json b/package.json
index 84d1510..623e117 100644
--- a/package.json
+++ b/package.json
@@ -21,6 +21,7 @@
"react-router-dom": "4.3.1",
"react-router-redux": "5.0.0-alpha.9",
"react-scripts-ts": "2.17.0",
+ "react-splitter-layout": "3.0.1",
"react-transition-group": "2.4.0",
"redux": "4.0.0",
"redux-thunk": "2.3.0",
diff --git a/src/views-components/side-panel-button/side-panel-button.tsx b/src/views-components/side-panel-button/side-panel-button.tsx
index e39b378..89c3400 100644
--- a/src/views-components/side-panel-button/side-panel-button.tsx
+++ b/src/views-components/side-panel-button/side-panel-button.tsx
@@ -45,7 +45,7 @@ type SidePanelProps = SidePanelDataProps & DispatchProp & WithStyles<CssRules>;
const transformOrigin: PopoverOrigin = {
vertical: -50,
- horizontal: 45
+ horizontal: 0
};
const isButtonVisible = ({ router }: RootState) => {
@@ -70,7 +70,7 @@ export const SidePanelButton = withStyles(styles)(
const { anchorEl } = this.state;
return <Toolbar>
{buttonVisible && <Grid container>
- <Grid container item xs alignItems="center" justify="center">
+ <Grid container item xs alignItems="center" justify="flex-start">
<Button variant="contained" color="primary" size="small" className={classes.button}
aria-owns={anchorEl ? 'aside-menu-list' : undefined}
aria-haspopup="true"
diff --git a/src/views/project-panel/project-panel.tsx b/src/views/project-panel/project-panel.tsx
index 2c962ef..c3581e0 100644
--- a/src/views/project-panel/project-panel.tsx
+++ b/src/views/project-panel/project-panel.tsx
@@ -3,7 +3,7 @@
// SPDX-License-Identifier: AGPL-3.0
import * as React from 'react';
-import { Button, StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
+import { StyleRulesCallback, WithStyles, withStyles } from '@material-ui/core';
import { DataExplorer } from "~/views-components/data-explorer/data-explorer";
import { DispatchProp, connect } from 'react-redux';
import { DataColumns } from '~/components/data-table/data-table';
@@ -25,23 +25,16 @@ import { ProjectResource } from '~/models/project';
import { navigateTo } from '~/store/navigation/navigation-action';
import { getProperty } from '~/store/properties/properties';
import { PROJECT_PANEL_CURRENT_UUID } from '~/store/project-panel/project-panel-action';
-import { openCollectionCreateDialog } from '~/store/collections/collection-create-actions';
-import { openProjectCreateDialog } from '~/store/projects/project-create-actions';
import { filterResources } from '~/store/resources/resources';
import { PanelDefaultView } from '~/components/panel-default-view/panel-default-view';
import { DataTableDefaultView } from '~/components/data-table-default-view/data-table-default-view';
-type CssRules = 'root' | "button";
+type CssRules = "root";
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
- position: 'relative',
- width: '100%',
- height: '100%'
- },
- button: {
- marginLeft: theme.spacing.unit
- },
+
+ }
});
export enum ProjectPanelColumnNames {
@@ -137,22 +130,17 @@ export const ProjectPanel = withStyles(styles)(
}))(
class extends React.Component<ProjectPanelProps> {
render() {
- const { classes } = this.props;
- return <div className={classes.root}>
- {this.hasAnyItems()
- ? <DataExplorer
- id={PROJECT_PANEL_ID}
- onRowClick={this.handleRowClick}
- onRowDoubleClick={this.handleRowDoubleClick}
- onContextMenu={this.handleContextMenu}
- contextMenuColumn={true}
- dataTableDefaultView={<DataTableDefaultView icon={ProjectIcon}/>} />
- : <PanelDefaultView
- icon={ProjectIcon}
- messages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']} />
- }
-
- </div>;
+ return this.hasAnyItems()
+ ? <DataExplorer
+ id={PROJECT_PANEL_ID}
+ onRowClick={this.handleRowClick}
+ onRowDoubleClick={this.handleRowDoubleClick}
+ onContextMenu={this.handleContextMenu}
+ contextMenuColumn={true}
+ dataTableDefaultView={<DataTableDefaultView icon={ProjectIcon}/>} />
+ : <PanelDefaultView
+ icon={ProjectIcon}
+ messages={['Your project is empty.', 'Please create a project or create a collection and upload a data.']} />;
}
hasAnyItems = () => {
diff --git a/src/views/workbench/workbench.tsx b/src/views/workbench/workbench.tsx
index db38957..4d3c8ce 100644
--- a/src/views/workbench/workbench.tsx
+++ b/src/views/workbench/workbench.tsx
@@ -43,8 +43,9 @@ import { TrashPanel } from "~/views/trash-panel/trash-panel";
import { MainContentBar } from '~/views-components/main-content-bar/main-content-bar';
import { Grid } from '@material-ui/core';
import { ProcessCommandDialog } from '~/views-components/process-command-dialog/process-command-dialog';
+import SplitterLayout from 'react-splitter-layout';
-type CssRules = 'root' | 'asidePanel' | 'contentWrapper' | 'content' | 'appBar';
+type CssRules = 'root' | 'container' | 'splitter' | 'asidePanel' | 'contentWrapper' | 'content' | 'appBar';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
@@ -52,8 +53,16 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
width: '100vw',
height: '100vh'
},
+ container: {
+ position: 'relative'
+ },
+ splitter: {
+ '& > .layout-splitter': {
+ width: '2px'
+ }
+ },
asidePanel: {
- maxWidth: '240px',
+ height: '100%',
background: theme.palette.background.default
},
contentWrapper: {
@@ -62,7 +71,6 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
content: {
minWidth: 0,
- overflow: 'auto',
paddingLeft: theme.spacing.unit * 3,
paddingRight: theme.spacing.unit * 3,
},
@@ -111,28 +119,34 @@ export const Workbench = withStyles(styles)(
</Grid>
{this.props.user &&
<Grid container item xs alignItems="stretch" wrap="nowrap">
- <Grid container item xs component='aside' direction='column' className={classes.asidePanel}>
- <SidePanel />
- </Grid>
- <Grid container item xs component="main" direction="column" className={classes.contentWrapper}>
- <Grid item>
- <MainContentBar />
- </Grid>
- <Grid item xs className={classes.content}>
- <Switch>
- <Route path={Routes.PROJECTS} component={ProjectPanel} />
- <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
- <Route path={Routes.FAVORITES} component={FavoritePanel} />
- <Route path={Routes.PROCESSES} component={ProcessPanel} />
- <Route path={Routes.TRASH} component={TrashPanel} />
- <Route path={Routes.PROCESS_LOGS} component={ProcessLogPanel} />
- </Switch>
- </Grid>
+ <Grid container item className={classes.container}>
+ <SplitterLayout customClassName={classes.splitter}
+ primaryIndex={0} primaryMinSize={20} secondaryInitialSize={80} percentage={true}>
+ <Grid container item xs component='aside' direction='column' className={classes.asidePanel}>
+ <SidePanel />
+ </Grid>
+ <Grid container item xs component="main" direction="column" className={classes.contentWrapper}>
+ <Grid item>
+ <MainContentBar />
+ </Grid>
+ <Grid item xs className={classes.content}>
+ <Switch>
+ <Route path={Routes.PROJECTS} component={ProjectPanel} />
+ <Route path={Routes.COLLECTIONS} component={CollectionPanel} />
+ <Route path={Routes.FAVORITES} component={FavoritePanel} />
+ <Route path={Routes.PROCESSES} component={ProcessPanel} />
+ <Route path={Routes.TRASH} component={TrashPanel} />
+ <Route path={Routes.PROCESS_LOGS} component={ProcessLogPanel} />
+ </Switch>
+ </Grid>
+ </Grid>
+ </SplitterLayout>
</Grid>
<Grid item>
<DetailsPanel />
</Grid>
- </Grid>}
+ </Grid>
+ }
</Grid>
<ContextMenu />
<CopyCollectionDialog />
diff --git a/typings/global.d.ts b/typings/global.d.ts
index 70a3fe5..39d124b 100644
--- a/typings/global.d.ts
+++ b/typings/global.d.ts
@@ -11,3 +11,5 @@ declare interface System {
import<T = any>(module: string): Promise<T>
}
declare var System: System;
+
+declare module '*';
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 3599271..3765778 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -82,14 +82,7 @@
dependencies:
"@types/enzyme" "*"
-"@types/enzyme@*":
- version "3.1.12"
- resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.12.tgz#293bb07c1ef5932d37add3879e72e0f5bc614f3c"
- dependencies:
- "@types/cheerio" "*"
- "@types/react" "*"
-
-"@types/enzyme at 3.1.13":
+"@types/enzyme@*", "@types/enzyme at 3.1.13":
version "3.1.13"
resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.1.13.tgz#4bbc5c81fa40c9fc7efee25c4a23cb37119a33ea"
dependencies:
@@ -115,11 +108,7 @@
version "4.14.116"
resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.116.tgz#5ccf215653e3e8c786a58390751033a9adca0eb9"
-"@types/node@*":
- version "10.5.2"
- resolved "https://registry.yarnpkg.com/@types/node/-/node-10.5.2.tgz#f19f05314d5421fe37e74153254201a7bf00a707"
-
-"@types/node at 10.7.1":
+"@types/node@*", "@types/node at 10.7.1":
version "10.7.1"
resolved "https://registry.yarnpkg.com/@types/node/-/node-10.7.1.tgz#b704d7c259aa40ee052eec678758a68d07132a2e"
@@ -1701,14 +1690,10 @@ color-convert@^1.3.0, color-convert@^1.9.0:
dependencies:
color-name "1.1.1"
-color-name at 1.1.1:
+color-name at 1.1.1, color-name@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.1.tgz#4b1415304cf50028ea81643643bd82ea05803689"
-color-name@^1.0.0:
- version "1.1.3"
- resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.3.tgz#a7d0558bd89c42f795dd42328f740831ca53bc25"
-
color-string@^0.3.0:
version "0.3.0"
resolved "https://registry.yarnpkg.com/color-string/-/color-string-0.3.0.tgz#27d46fb67025c5c2fa25993bfbf579e47841b991"
@@ -2357,20 +2342,13 @@ domutils at 1.1:
dependencies:
domelementtype "1"
-domutils at 1.5.1:
+domutils at 1.5.1, domutils@^1.5.1:
version "1.5.1"
resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
dependencies:
dom-serializer "0"
domelementtype "1"
-domutils@^1.5.1:
- version "1.7.0"
- resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
- dependencies:
- dom-serializer "0"
- domelementtype "1"
-
dot-prop@^4.1.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.0.tgz#1f19e0c2e1aa0e32797c49799f2837ac6af69c57"
@@ -2832,14 +2810,10 @@ extract-text-webpack-plugin at 3.0.2:
schema-utils "^0.3.0"
webpack-sources "^1.0.1"
-extsprintf at 1.3.0:
+extsprintf at 1.3.0, extsprintf@^1.2.0:
version "1.3.0"
resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.3.0.tgz#96918440e3041a7a414f8c52e3c574eb3c3e1e05"
-extsprintf@^1.2.0:
- version "1.4.0"
- resolved "https://registry.yarnpkg.com/extsprintf/-/extsprintf-1.4.0.tgz#e2689f8f356fad62cca65a3a91c5df5f9551692f"
-
fast-deep-equal@^1.0.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/fast-deep-equal/-/fast-deep-equal-1.1.0.tgz#c053477817c86b51daa853c81e059b733d023614"
@@ -4934,7 +4908,7 @@ minimatch@^3.0.2, minimatch@^3.0.3, minimatch@^3.0.4:
dependencies:
brace-expansion "^1.1.7"
-minimist at 0.0.8:
+minimist at 0.0.8, minimist@~0.0.1:
version "0.0.8"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.8.tgz#857fcabfc3397d2625b8228262e86aa7a011b05d"
@@ -4942,10 +4916,6 @@ minimist@^1.1.0, minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0:
version "1.2.0"
resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
-minimist@~0.0.1:
- version "0.0.10"
- resolved "https://registry.yarnpkg.com/minimist/-/minimist-0.0.10.tgz#de3f98543dbf96082be48ad1a0c7cda836301dcf"
-
minipass@^2.2.1, minipass@^2.3.3:
version "2.3.3"
resolved "https://registry.yarnpkg.com/minipass/-/minipass-2.3.3.tgz#a7dcc8b7b833f5d368759cce544dccb55f50f233"
@@ -5345,18 +5315,12 @@ onetime@^2.0.0:
dependencies:
mimic-fn "^1.0.0"
-opn at 5.2.0:
+opn at 5.2.0, opn@^5.1.0:
version "5.2.0"
resolved "https://registry.yarnpkg.com/opn/-/opn-5.2.0.tgz#71fdf934d6827d676cecbea1531f95d354641225"
dependencies:
is-wsl "^1.1.0"
-opn@^5.1.0:
- version "5.3.0"
- resolved "https://registry.yarnpkg.com/opn/-/opn-5.3.0.tgz#64871565c863875f052cfdf53d3e3cb5adb53b1c"
- dependencies:
- is-wsl "^1.1.0"
-
optimist@^0.6.1:
version "0.6.1"
resolved "https://registry.yarnpkg.com/optimist/-/optimist-0.6.1.tgz#da3ea74686fa21a19a111c326e90eb15a0196686"
@@ -6036,14 +6000,10 @@ q@^1.1.2:
version "1.5.1"
resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
-qs at 6.5.1:
+qs at 6.5.1, qs@~6.5.1:
version "6.5.1"
resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.1.tgz#349cdf6eef89ec45c12d7d5eb3fc0c870343a6d8"
-qs@~6.5.1:
- version "6.5.2"
- resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
-
query-string@^4.1.0:
version "4.3.4"
resolved "https://registry.yarnpkg.com/query-string/-/query-string-4.3.4.tgz#bbb693b9ca915c232515b228b1a02b609043dbeb"
@@ -6181,11 +6141,7 @@ react-event-listener@^0.6.2:
prop-types "^15.6.0"
warning "^4.0.1"
-react-is@^16.4.1:
- version "16.4.1"
- resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.1.tgz#d624c4650d2c65dbd52c72622bbf389435d9776e"
-
-react-is@^16.4.2:
+react-is@^16.4.1, react-is@^16.4.2:
version "16.4.2"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.4.2.tgz#84891b56c2b6d9efdee577cc83501dfc5ecead88"
@@ -6298,6 +6254,10 @@ react-scripts-ts at 2.17.0:
optionalDependencies:
fsevents "^1.1.3"
+react-splitter-layout at 3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/react-splitter-layout/-/react-splitter-layout-3.0.1.tgz#c2e00e69b35d240ab7a44f395d41803c5f4b70ef"
+
react-test-renderer@^16.0.0-0:
version "16.4.1"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.4.1.tgz#f2fb30c2c7b517db6e5b10ed20bb6b0a7ccd8d70"
@@ -6665,18 +6625,12 @@ resolve at 1.1.7:
version "1.1.7"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
-resolve at 1.6.0:
+resolve at 1.6.0, resolve@^1.1.7, resolve@^1.3.2:
version "1.6.0"
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
dependencies:
path-parse "^1.0.5"
-resolve@^1.1.7, resolve@^1.3.2:
- version "1.8.1"
- resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.8.1.tgz#82f1ec19a423ac1fbd080b0bab06ba36e84a7a26"
- dependencies:
- path-parse "^1.0.5"
-
restore-cursor@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/restore-cursor/-/restore-cursor-2.0.0.tgz#9f7ee287f82fd326d4fd162923d62129eee0dfaf"
@@ -7124,11 +7078,7 @@ static-extend@^0.1.1:
define-property "^0.2.5"
object-copy "^0.1.0"
-"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2":
- version "1.5.0"
- resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-
-statuses@~1.4.0:
+"statuses@>= 1.3.1 < 2", "statuses@>= 1.4.0 < 2", statuses@~1.4.0:
version "1.4.0"
resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.4.0.tgz#bb73d446da2796106efcc1b601a253d6c46bd087"
@@ -7998,14 +7948,10 @@ whatwg-encoding@^1.0.1, whatwg-encoding@^1.0.3:
dependencies:
iconv-lite "0.4.19"
-whatwg-fetch at 2.0.3:
+whatwg-fetch at 2.0.3, whatwg-fetch@>=0.10.0:
version "2.0.3"
resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.3.tgz#9c84ec2dcf68187ff00bc64e1274b442176e1c84"
-whatwg-fetch@>=0.10.0:
- version "2.0.4"
- resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-2.0.4.tgz#dde6a5df315f9d39991aa17621853d720b85566f"
-
whatwg-mimetype@^2.0.0, whatwg-mimetype@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.1.0.tgz#f0f21d76cbba72362eb609dbed2a30cd17fcc7d4"
@@ -8052,14 +7998,10 @@ window-size at 0.1.0:
version "0.1.0"
resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
-wordwrap at 0.0.2:
+wordwrap at 0.0.2, wordwrap@~0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
-wordwrap@~0.0.2:
- version "0.0.3"
- resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.3.tgz#a3d5da6cd5c0bc0008d37234bbaf1bed63059107"
-
wordwrap@~1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list