mirror of
https://github.com/wavetermdev/waveterm
synced 2026-05-24 09:18:27 +00:00
More Directory Formatting (#103)
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
GitHub
parent
b97802b1ac
commit
f4702cca29
2 changed files with 72 additions and 41 deletions
|
|
@ -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-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-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-direction {
|
||||
color: var(--grey-text-color);
|
||||
margin-right: 0.2rem;
|
||||
margin-top: 0.2rem;
|
||||
.dir-table-head-resize-box {
|
||||
width: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex: 0 0 auto;
|
||||
.dir-table-head-resize {
|
||||
cursor: col-resize;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
touch-action: none;
|
||||
width: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
&: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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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,21 +270,25 @@ 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"
|
||||
key={header.id}
|
||||
style={{ width: `calc(var(--header-${header.id}-size) * 1px)` }}
|
||||
onClick={() => header.column.toggleSorting()}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? null
|
||||
: flexRender(header.column.columnDef.header, header.getContext())}
|
||||
{getSortIcon(header.column.getIsSorted())}
|
||||
<div className="dir-table-head-cell">
|
||||
<div
|
||||
className="dir-table-head-resize"
|
||||
onMouseDown={header.getResizeHandler()}
|
||||
onTouchStart={header.getResizeHandler()}
|
||||
/>
|
||||
className="dir-table-head-cell-content"
|
||||
key={header.id}
|
||||
style={{ width: `calc(var(--header-${header.id}-size) * 1px)` }}
|
||||
onClick={() => header.column.toggleSorting()}
|
||||
>
|
||||
{header.isPlaceholder
|
||||
? 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>
|
||||
|
|
|
|||
Loading…
Reference in a new issue