feat(editor): compact file explorer — less indent, smaller icons and rows, 150px default
The explorer rows carried a 26px indent plus 22px file icons, 5px vertical padding and 12px names in a 165px pane: a lot of margin for a sidebar whose only job is listing a handful of files, and every px of it was taken from the code editor. Now: root files indent 16px (12px per nested level), file icons render at 16px like the folder icon, rows are 3px/6px with an 11px name, the board header actions are 18px, and the header buttons 20px with a title that truncates before the actions do. The pane defaults to 150px (min 100) and the account footer keeps the first name visible at that width.
This commit is contained in:
David Montero
parent
e71c78f734
commit
7fc131d4fb
|
|
@ -673,8 +673,10 @@ body {
|
|||
}
|
||||
|
||||
/* Tight footer (narrow explorer): the avatar alone identifies the account;
|
||||
the name is a luxury that costs exactly the width we do not have. */
|
||||
@container (max-width: 150px) {
|
||||
the name is a luxury that costs exactly the width we do not have. The
|
||||
threshold sits under the explorer's 150px default so the first name shows
|
||||
out of the box and only goes when the user drags the pane narrower. */
|
||||
@container (max-width: 135px) {
|
||||
.explorer-account-footer .header-username-text {
|
||||
display: none;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -13,20 +13,32 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0 10px;
|
||||
gap: 4px;
|
||||
padding: 0 4px 0 6px;
|
||||
height: 46px;
|
||||
color: #9d9d9d;
|
||||
font-size: 11px;
|
||||
font-size: 10px;
|
||||
font-weight: 600;
|
||||
letter-spacing: 0.5px;
|
||||
letter-spacing: 0.3px;
|
||||
border-bottom: 1px solid #333;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
/* The title gives way before the actions do: at narrow pane widths the
|
||||
three buttons must stay reachable, the word can truncate. */
|
||||
.file-explorer-title {
|
||||
flex: 1 1 auto;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.file-explorer-header-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 2px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.file-explorer-new-btn {
|
||||
|
|
@ -39,8 +51,14 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.file-explorer-new-btn svg,
|
||||
.file-explorer-save-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.file-explorer-new-btn:hover {
|
||||
|
|
@ -58,8 +76,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
.file-explorer-save-btn:hover {
|
||||
|
|
@ -91,20 +109,25 @@
|
|||
.file-explorer-list {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 4px 0;
|
||||
padding: 2px 0;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #3c3c3c transparent;
|
||||
}
|
||||
|
||||
/* Rows are deliberately compact (VS Code density): the explorer is a narrow
|
||||
pane and every px of padding, indent or icon here is a px the code editor
|
||||
does not get. */
|
||||
.file-explorer-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 6px;
|
||||
padding: 5px 8px;
|
||||
gap: 4px;
|
||||
padding: 3px 6px;
|
||||
cursor: pointer;
|
||||
color: #ccc;
|
||||
border-radius: 3px;
|
||||
margin: 1px 4px;
|
||||
margin: 0 2px;
|
||||
font-size: 11px;
|
||||
line-height: 16px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
|
|
@ -124,11 +147,17 @@
|
|||
}
|
||||
|
||||
.file-explorer-icon {
|
||||
font-size: 12px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.file-explorer-icon svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.file-explorer-name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
|
|
@ -136,8 +165,8 @@
|
|||
}
|
||||
|
||||
.file-explorer-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: #e8a87c;
|
||||
flex-shrink: 0;
|
||||
|
|
@ -148,7 +177,7 @@
|
|||
background: #3c3c3c;
|
||||
border: 1px solid var(--color-action-primary);
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
font-size: 11px;
|
||||
padding: 1px 4px;
|
||||
border-radius: 2px;
|
||||
outline: none;
|
||||
|
|
@ -204,12 +233,12 @@
|
|||
.fe-board-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
padding: 5px 6px 5px 4px;
|
||||
gap: 4px;
|
||||
padding: 3px 4px 3px 2px;
|
||||
cursor: pointer;
|
||||
color: #aaa;
|
||||
border-radius: 3px;
|
||||
margin: 0 4px;
|
||||
margin: 0 2px;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -282,8 +311,8 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
opacity: 0;
|
||||
transition: opacity 0.1s;
|
||||
|
|
@ -294,6 +323,11 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.fe-board-new-btn svg {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.fe-board-new-btn:hover {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
color: #fff;
|
||||
|
|
@ -304,8 +338,10 @@
|
|||
}
|
||||
|
||||
.fe-file-item {
|
||||
/* --fe-depth: nesting level inside the board's folder tree (0 = root). */
|
||||
padding-left: calc(26px + var(--fe-depth, 0) * 14px) !important;
|
||||
/* --fe-depth: nesting level inside the board's folder tree (0 = root).
|
||||
Root files sit just inside the board header's chevron, not under its
|
||||
icon — the deeper indent read as wasted margin in a 150px pane. */
|
||||
padding-left: calc(16px + var(--fe-depth, 0) * 12px) !important;
|
||||
}
|
||||
|
||||
/* ── Folder rows ────────────────────────────────────────────────────────── */
|
||||
|
|
|
|||
|
|
@ -1113,11 +1113,12 @@ export const FileExplorer: React.FC<FileExplorerProps> = ({ onSaveClick, onNewCl
|
|||
<span
|
||||
style={{
|
||||
marginLeft: 'auto',
|
||||
fontSize: 10,
|
||||
fontSize: 9,
|
||||
lineHeight: '14px',
|
||||
color: '#9d9d9d',
|
||||
background: '#2d2d2d',
|
||||
borderRadius: 8,
|
||||
padding: '1px 7px',
|
||||
borderRadius: 7,
|
||||
padding: '0 5px',
|
||||
}}
|
||||
title={
|
||||
board.libraries && board.libraries.length
|
||||
|
|
|
|||
|
|
@ -43,9 +43,12 @@ const BOTTOM_PANEL_MIN = 80;
|
|||
const BOTTOM_PANEL_MAX = 600;
|
||||
const BOTTOM_PANEL_DEFAULT = 200;
|
||||
|
||||
const EXPLORER_MIN = 110;
|
||||
const EXPLORER_MIN = 100;
|
||||
const EXPLORER_MAX = 500;
|
||||
const EXPLORER_DEFAULT = 165;
|
||||
// Narrow by default: the explorer rows are compact (see FileExplorer.css),
|
||||
// so 150px fits a board header with its actions and typical file names,
|
||||
// and every px saved here goes to the code editor.
|
||||
const EXPLORER_DEFAULT = 150;
|
||||
|
||||
// Once per full page load: the pristine-visit starter dialog must not pop
|
||||
// again when the user closes it and later navigates away from and back to
|
||||
|
|
|
|||
Loading…
Reference in New Issue