Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-02-22 02:41:23 +01:00
Code Issues Packages Projects Releases Wiki Activity

More Directory Formatting (#103)

Browse Source 
This change is to make general directory formatting match the current
designs in figma. It doesn't change the resize behavior yet, but that
will be added very soon.
This commit is contained in:
Sylvie Crowe 2024-07-08 16:42:01 -07:00 committed by GitHub
parent b97802b1ac
commit f4702cca29
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 72 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

67
frontend/app/view/directorypreview.less
View File

@ -1,49 +1,64 @@
.dir-table-container {
width: 100%;
display: flex;
flex-direction: column;
height: 100%;
overflow-x: hidden;
.dir-table {
height: 100%;
--col-size-size: 0.2rem;
border-radius: 3px;
display: flex;
flex-direction: column;
font-family: Inter;
.dir-table-head {
.dir-table-head-row {
display: flex;
border-bottom: 2px solid var(--border-color);
padding: 4px 0;
border-bottom: 1px solid var(--border-color);
padding: 4px 6px;
background-color: var(--panel-bg-color);
align-items: center;
font-size: 0.75rem;
.dir-table-head-cell:not(:first-child) {
position: relative;
padding: 2px 4px;
font-weight: bold;
display: flex;
justify-content: space-between;
white-space: nowrap;
overflow: hidden;
.dir-table-head-cell-content {
padding: 2px 4px;
display: flex;
gap: 0.3rem;
flex: 1 1 auto;
overflow-x: hidden;
.dir-table-head-direction {
margin-right: 0.2rem;
margin-top: 0.2rem;
}
.dir-table-head-size {
width: 100%;
text-align: right;
}
}
.dir-table-head-resize-box {
width: 12px;
display: flex;
justify-content: center;
flex: 0 0 auto;
.dir-table-head-resize {
position: absolute;
top: 0;
right: 0;
height: 100%;
cursor: col-resize;
user-select: none;
-webkit-user-select: none;
touch-action: none;
width: 4px;
background: linear-gradient(var(--border-color), var(--border-color)) no-repeat center/2px 100%;
}
.dir-table-head-direction {
color: var(--grey-text-color);
margin-right: 0.2rem;
margin-top: 0.2rem;
}
&:last-child {
.dir-table-head-resize {
.dir-table-head-resize-box {
width: 0;
}
}
@ -75,10 +90,13 @@
}
.dir-table-body-row {
display: flex;
border-radius: 3px;
align-items: center;
align-self: stretch;
border-radius: 6px;
gap: 12px;
&.focused {
background-color: rgb(from var(--accent-color) r g b / 0.7);
background-color: rgb(from var(--accent-color) r g b / 0.5);
color: var(--main-text-color);
.dir-table-body-cell {
@ -92,7 +110,7 @@
}
&:focus {
background-color: rgb(from var(--accent-color) r g b / 0.7);
background-color: rgb(from var(--accent-color) r g b / 0.5);
color: var(--main-text-color);
.dir-table-body-cell {
@ -114,6 +132,7 @@
white-space: nowrap;
padding: 0.25rem;
cursor: default;
font-size: 0.8125rem;
&.col-size {
text-align: right;
@ -125,6 +144,14 @@
.dir-table-type {
color: var(--secondary-text-color);
}
.dir-table-modestr {
font-family: Hack;
}
.dir-table-name {
font-weight: 500;
}
}
}
}

10
frontend/app/view/directorypreview.tsx
View File

@ -188,7 +188,7 @@ function DirectoryTable({
}),
columnHelper.accessor("modestr", {
cell: (info) => <span className="dir-table-modestr">{info.getValue()}</span>,
header: () => <span>Perm</span>,
header: () => <span>Permissions</span>,
size: 91,
sortingFn: "alphanumeric",
}),
@ -200,7 +200,7 @@ function DirectoryTable({
}),
columnHelper.accessor("size", {
cell: (info) => <span className="dir-table-size">{getBestUnit(info.getValue())}</span>,
header: () => <span>Size</span>,
header: () => <span className="dir-table-head-size">Size</span>,
size: 55,
sortingFn: "auto",
}),
@ -270,8 +270,9 @@ function DirectoryTable({
{table.getHeaderGroups().map((headerGroup) => (
<div className="dir-table-head-row" key={headerGroup.id}>
{headerGroup.headers.map((header) => (
<div className="dir-table-head-cell">
<div
className="dir-table-head-cell"
className="dir-table-head-cell-content"
key={header.id}
style={{ width: `calc(var(--header-${header.id}-size) * 1px)` }}
onClick={() => header.column.toggleSorting()}
@ -280,12 +281,15 @@ function DirectoryTable({
? null
: flexRender(header.column.columnDef.header, header.getContext())}
{getSortIcon(header.column.getIsSorted())}
</div>
<div className="dir-table-head-resize-box">
<div
className="dir-table-head-resize"
onMouseDown={header.getResizeHandler()}
onTouchStart={header.getResizeHandler()}
/>
</div>
</div>
))}
</div>
))}