jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-29 14:16:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

Add dash on table when selecting only some rows

Browse Source 
Change-type: patch
Signed-off-by: Lorenzo Alberto Maria Ambrosi <lorenzothunder.ambrosi@gmail.com>
This commit is contained in:
Lorenzo Alberto Maria Ambrosi 2020-09-29 15:27:23 +02:00
parent 153e37b9dc
commit c3296eed54
2 changed files with 52 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
lib/gui/app/components/drive-selector/drive-selector.tsx
View File

@ -79,7 +79,7 @@ const DrivesTable = styled((props: GenericTableProps<Drive>) => (
[data-display='table-body'] { [data-display='table-body'] {
> [data-display='table-row'] > [data-display='table-cell'] { > [data-display='table-row'] > [data-display='table-cell'] {
&:nth-child(2) { &:nth-child(2) {
width: 38%; width: 32%;
} }
&:nth-child(3) { &:nth-child(3) {
@ -345,6 +345,16 @@ export class DriveSelector extends React.Component<
} }
} }
private deselectingAll(rows: DrivelistDrive[]) {
return (
rows.length > 0 &&
rows.length === this.state.selectedList.length &&
this.state.selectedList.every(
(d) => rows.findIndex((r) => d.device === r.device) > -1,
)
);
}
componentDidMount() { componentDidMount() {
this.unsubscribe = store.subscribe(() => { this.unsubscribe = store.subscribe(() => {
const drives = getDrives(); const drives = getDrives();
@ -423,6 +433,7 @@ export class DriveSelector extends React.Component<
t.setRowSelection(selectedList); t.setRowSelection(selectedList);
} }
}} }}
checkedRowsNumber={selectedList.length}
multipleSelection={this.props.multipleSelection} multipleSelection={this.props.multipleSelection}
columns={this.tableColumns} columns={this.tableColumns}
data={displayedDrives} data={displayedDrives}
@ -432,8 +443,11 @@ export class DriveSelector extends React.Component<
} }
rowKey="displayName" rowKey="displayName"
onCheck={(rows: Drive[]) => { onCheck={(rows: Drive[]) => {
const newSelection = rows.filter(isDrivelistDrive); let newSelection = rows.filter(isDrivelistDrive);
if (this.props.multipleSelection) { if (this.props.multipleSelection) {
if (this.deselectingAll(newSelection)) {
newSelection = [];
}
this.setState({ this.setState({
selectedList: newSelection, selectedList: newSelection,
}); });
@ -450,24 +464,20 @@ export class DriveSelector extends React.Component<
) { ) {
return; return;
} }
if (this.props.multipleSelection) { const index = selectedList.findIndex(
const newList = [...selectedList]; (d) => d.device === row.device,
const selectedIndex = selectedList.findIndex( );
(drive) => drive.device === row.device, const newList = this.props.multipleSelection
); ? [...selectedList]
if (selectedIndex === -1) { : [];
newList.push(row); if (index === -1) {
} else { newList.push(row);
// Deselect if selected } else {
newList.splice(selectedIndex, 1); // Deselect if selected
} newList.splice(index, 1);
this.setState({
selectedList: newList,
});
return;
} }
this.setState({ this.setState({
selectedList: [row], selectedList: newList,
}); });
}} }}
/> />

26
lib/gui/app/styled-components.tsx
View File

@ -168,6 +168,11 @@ export const Modal = styled(({ style, children, ...props }) => {
padding: 0; padding: 0;
height: 100%; height: 100%;
> div:first-child {
height: 81%;
padding: 24px 30px 0;
}
> h3 { > h3 {
margin: 0; margin: 0;
padding: 24px 30px 0; padding: 24px 30px 0;
@ -242,6 +247,8 @@ export const Alert = styled((props) => (
export interface GenericTableProps<T> extends BaseTableProps<T> { export interface GenericTableProps<T> extends BaseTableProps<T> {
refFn: (t: BaseTable<T>) => void; refFn: (t: BaseTable<T>) => void;
data: T[];
checkedRowsNumber?: number;
multipleSelection: boolean; multipleSelection: boolean;
showWarnings?: boolean; showWarnings?: boolean;
} }
@ -271,6 +278,22 @@ function StyledTable<T>() {
input[type='checkbox'] + div { input[type='checkbox'] + div {
display: ${(props) => (props.multipleSelection ? 'flex' : 'none')}; display: ${(props) => (props.multipleSelection ? 'flex' : 'none')};
${(props) =>
props.multipleSelection &&
props.checkedRowsNumber !== 0 &&
props.checkedRowsNumber !== props.data.length
? `
font-weight: 600;
color: ${colors.primary.foreground};
background: ${colors.primary.background};
::after {
content: '–';
}
`
: ''}
}
} }
} }
@ -293,8 +316,7 @@ function StyledTable<T>() {
&[data-highlight='true'] { &[data-highlight='true'] {
&.system { &.system {
background-color: ${(props) => background-color: ${(props) => (props.showWarnings ? '#fff5e6' : '#e8f5fc')};
props.showWarnings ? '#fff5e6' : '#e8f5fc'};
} }
> [data-display='table-cell']:first-child { > [data-display='table-cell']:first-child {