mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-02-22 02:41:23 +01: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
@ -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 New Issue
Block a user