[arvados-workbench2] created: 2.4.0-329-g1c5ffeeb
git repository hosting
git at public.arvados.org
Thu Oct 27 15:42:52 UTC 2022
at 1c5ffeebd86ab557913b098498825eaa847f4877 (commit)
commit 1c5ffeebd86ab557913b098498825eaa847f4877
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Thu Oct 27 12:41:31 2022 -0300
19631: Removes unused styling code on Search component.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/search-input/search-input.tsx b/src/components/search-input/search-input.tsx
index 8d86307a..6d85ed22 100644
--- a/src/components/search-input/search-input.tsx
+++ b/src/components/search-input/search-input.tsx
@@ -3,35 +3,16 @@
// SPDX-License-Identifier: AGPL-3.0
import React, {useState, useEffect} from 'react';
-import { IconButton, StyleRulesCallback, withStyles, WithStyles, FormControl, InputLabel, Input, InputAdornment, Tooltip } from '@material-ui/core';
+import {
+ IconButton,
+ FormControl,
+ InputLabel,
+ Input,
+ InputAdornment,
+ Tooltip,
+} from '@material-ui/core';
import SearchIcon from '@material-ui/icons/Search';
-type CssRules = 'container' | 'input' | 'button';
-
-const styles: StyleRulesCallback<CssRules> = theme => {
- return {
- container: {
- position: 'relative',
- width: '100%'
- },
- input: {
- border: 'none',
- borderRadius: theme.spacing.unit / 4,
- boxSizing: 'border-box',
- padding: theme.spacing.unit,
- paddingRight: theme.spacing.unit * 4,
- width: '100%',
- },
- button: {
- position: 'absolute',
- top: theme.spacing.unit / 2,
- right: theme.spacing.unit / 2,
- width: theme.spacing.unit * 3,
- height: theme.spacing.unit * 3
- }
- };
-};
-
interface SearchInputDataProps {
value: string;
label?: string;
@@ -43,11 +24,11 @@ interface SearchInputActionProps {
debounce?: number;
}
-type SearchInputProps = SearchInputDataProps & SearchInputActionProps & WithStyles<CssRules>;
+type SearchInputProps = SearchInputDataProps & SearchInputActionProps;
export const DEFAULT_SEARCH_DEBOUNCE = 1000;
-const SearchInputComponent = (props: SearchInputProps) => {
+export const SearchInput = (props: SearchInputProps) => {
const [timeout, setTimeout] = useState(0);
const [value, setValue] = useState("");
const [label, setLabel] = useState("Search");
@@ -114,6 +95,4 @@ const SearchInputComponent = (props: SearchInputProps) => {
} />
</FormControl>
</form>;
-}
-
-export const SearchInput = withStyles(styles)(SearchInputComponent);
\ No newline at end of file
+};
commit f24547605e700cd0796864e40aebc4e64ca03b6d
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Thu Oct 27 12:41:00 2022 -0300
19631: Fixes toolbar icons alignment on subprocesses panel.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/components/data-explorer/data-explorer.tsx b/src/components/data-explorer/data-explorer.tsx
index 02532011..c7a296a6 100644
--- a/src/components/data-explorer/data-explorer.tsx
+++ b/src/components/data-explorer/data-explorer.tsx
@@ -25,11 +25,11 @@ type CssRules = 'searchBox' | 'headerMenu' | "toolbar" | "footer" | "root" | 'mo
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
searchBox: {
- paddingBottom: theme.spacing.unit * 2
+ paddingBottom: 0,
},
toolbar: {
- paddingTop: theme.spacing.unit,
- paddingRight: theme.spacing.unit * 2,
+ paddingTop: 0,
+ paddingRight: theme.spacing.unit,
},
footer: {
overflow: 'auto'
@@ -42,8 +42,8 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
title: {
display: 'inline-block',
- paddingLeft: theme.spacing.unit * 3,
- paddingTop: theme.spacing.unit * 3,
+ paddingLeft: theme.spacing.unit * 2,
+ paddingTop: theme.spacing.unit * 2,
fontSize: '18px'
},
dataTable: {
@@ -55,7 +55,7 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
},
headerMenu: {
float: 'right',
- display: 'inline-block'
+ display: 'inline-block',
}
});
@@ -169,19 +169,17 @@ export const DataExplorer = withStyles(styles)(
(!hideColumnSelector || !hideSearchInput || !!actions) &&
<Grid className={classes.headerMenu} item xs>
<Toolbar className={classes.toolbar}>
- <Grid container justify="space-between" wrap="nowrap" alignItems="center">
- {!hideSearchInput && <div className={classes.searchBox}>
- {!hideSearchInput && <SearchInput
- label={searchLabel}
- value={searchValue}
- selfClearProp={currentItemUuid}
- onSearch={onSearch} />}
- </div>}
- {actions}
- {!hideColumnSelector && <ColumnSelector
- columns={columns}
- onColumnToggle={onColumnToggle} />}
- </Grid>
+ {!hideSearchInput && <div className={classes.searchBox}>
+ {!hideSearchInput && <SearchInput
+ label={searchLabel}
+ value={searchValue}
+ selfClearProp={currentItemUuid}
+ onSearch={onSearch} />}
+ </div>}
+ {actions}
+ {!hideColumnSelector && <ColumnSelector
+ columns={columns}
+ onColumnToggle={onColumnToggle} />}
{ doUnMaximizePanel && panelMaximized &&
<Tooltip title={`Unmaximize ${panelName || 'panel'}`} disableFocusListener>
<IconButton onClick={doUnMaximizePanel}><UnMaximizeIcon /></IconButton>
commit 417866564ecc0b1fee98246fe1e70ae6a3e3856a
Author: Lucas Di Pentima <lucas.dipentima at curii.com>
Date: Thu Oct 27 12:40:25 2022 -0300
19631: Adds panel title and icon to subprocesses.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <lucas.dipentima at curii.com>
diff --git a/src/views/subprocess-panel/subprocess-panel-root.tsx b/src/views/subprocess-panel/subprocess-panel-root.tsx
index 52fbc51f..c27673d2 100644
--- a/src/views/subprocess-panel/subprocess-panel-root.tsx
+++ b/src/views/subprocess-panel/subprocess-panel-root.tsx
@@ -17,6 +17,21 @@ import { createTree } from 'models/tree';
import { getInitialProcessStatusFilters } from 'store/resource-type-filters/resource-type-filters';
import { ResourcesState } from 'store/resources/resources';
import { MPVPanelProps } from 'components/multi-panel-view/multi-panel-view';
+import { StyleRulesCallback, Typography, WithStyles, withStyles } from '@material-ui/core';
+import { ArvadosTheme } from 'common/custom-theme';
+
+type CssRules = 'iconHeader' | 'cardHeader';
+
+const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
+ iconHeader: {
+ fontSize: '1.875rem',
+ color: theme.customs.colors.green700,
+ marginRight: theme.spacing.unit * 2,
+ },
+ cardHeader: {
+ display: 'flex',
+ },
+});
export enum SubprocessPanelColumnNames {
NAME = "Name",
@@ -80,6 +95,18 @@ const DEFAULT_VIEW_MESSAGES = [
'The current process may not have any or none matches current filtering.'
];
+type SubProcessesTitleProps = WithStyles<CssRules>;
+
+const SubProcessesTitle = withStyles(styles)(
+ ({classes}: SubProcessesTitleProps) =>
+ <div className={classes.cardHeader}>
+ <ProcessIcon className={classes.iconHeader} /><span></span>
+ <Typography noWrap variant='h6' color='inherit'>
+ Subprocesses
+ </Typography>
+ </div>
+);
+
export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps) => {
return <DataExplorer
id={SUBPROCESS_PANEL_ID}
@@ -93,5 +120,6 @@ export const SubprocessPanelRoot = (props: SubprocessPanelProps & MPVPanelProps)
doMaximizePanel={props.doMaximizePanel}
doUnMaximizePanel={props.doUnMaximizePanel}
panelMaximized={props.panelMaximized}
- panelName={props.panelName} />;
+ panelName={props.panelName}
+ title={<SubProcessesTitle/>} />;
};
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list