jeans/etcher
jeans/etcher
1
0
Fork 0
mirror of https://github.com/balena-io/etcher.git synced 2025-07-23 19:26:33 +00:00
Code Issues Packages Projects Releases Wiki Activity

Sticky header in target selection table

Browse Source 
Changelog-entry: Sticky header in target selection table
Change-type: patch
This commit is contained in:
Alexis Svinartchouk 2020-06-17 14:12:00 +02:00
parent 9444f0e1b1
commit 6554ccf0f8
1 changed files with 17 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
lib/gui/app/components/target-selector/target-selector-modal.tsx
View File

@ -87,6 +87,11 @@ const ScrollableFlex = styled(Flex)`
::-webkit-scrollbar { ::-webkit-scrollbar {
display: none; display: none;
} }
> div > div {
/* This is required for the sticky table header in TargetsTable */
overflow-x: visible;
}
`; `;
const TargetsTable = styled(({ refFn, ...props }) => { const TargetsTable = styled(({ refFn, ...props }) => {
@ -96,28 +101,21 @@ const TargetsTable = styled(({ refFn, ...props }) => {
</div> </div>
); );
})` })`
[data-display='table-head'] [data-display='table-head'] [data-display='table-cell'] {
[data-display='table-row'] position: sticky;
> [data-display='table-cell']:first-child { top: 0;
background-color: ${(props) => props.theme.colors.quartenary.light};
}
[data-display='table-cell']:first-child {
padding-left: 15px; padding-left: 15px;
} }
[data-display='table-head'] [data-display='table-cell']:last-child {
[data-display='table-row'] width: 150px;
> [data-display='table-cell'] {
padding: 6px 8px;
color: #2a506f;
} }
[data-display='table-body'] && [data-display='table-row'] > [data-display='table-cell'] {
> [data-display='table-row']
> [data-display='table-cell']:first-child {
padding-left: 15px;
}
[data-display='table-body']
> [data-display='table-row']
> [data-display='table-cell'] {
padding: 6px 8px; padding: 6px 8px;
color: #2a506f; color: #2a506f;
} }
@ -248,7 +246,8 @@ export class TargetSelectorModal extends React.Component<
{ {
field: 'description', field: 'description',
key: 'extra', key: 'extra',
label: '', // Space as empty string would use the field name as label
label: ' ',
render: (_description: string, drive: Target) => { render: (_description: string, drive: Target) => {
if (isUsbbootDrive(drive)) { if (isUsbbootDrive(drive)) {
return this.renderProgress(drive.progress); return this.renderProgress(drive.progress);