sidebar layout
switch the app from floating panels to a static sidebar on the right with resizable tools expect more layout bugs from now on
This commit is contained in:
parent
f78f3136d9
commit
0ddc42c00f
10 changed files with 272 additions and 178 deletions
246
static/index.css
246
static/index.css
|
|
@ -44,9 +44,6 @@ main {
|
|||
& > .panels {
|
||||
--right-width: 384px; /* Overridden by JavaScript */
|
||||
|
||||
box-sizing: border-box;
|
||||
padding: 16px;
|
||||
|
||||
display: grid;
|
||||
grid-template-columns: [left] 1fr [right-resize] auto [right] minmax(
|
||||
0,
|
||||
|
|
@ -63,9 +60,9 @@ main {
|
|||
& > .left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 16px;
|
||||
|
||||
pointer-events: none;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
|
@ -80,8 +77,8 @@ main {
|
|||
min-height: 0;
|
||||
|
||||
display: grid;
|
||||
grid-template-rows: minmax(0, min-content);
|
||||
grid-template-columns: [floating] max-content [resize] min-content [docked] auto;
|
||||
grid-template-rows: 100%;
|
||||
grid-template-columns: [resize] min-content [docked] auto;
|
||||
|
||||
padding-left: 16px;
|
||||
|
||||
|
|
@ -92,29 +89,14 @@ main {
|
|||
min-height: 0;
|
||||
}
|
||||
|
||||
& > rkgk-resize-handle {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
& > .docked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
& > * {
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > .docked > rkgk-brush-editor {
|
||||
max-height: 100%;
|
||||
}
|
||||
|
||||
& > .floating {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
gap: 12px;
|
||||
|
||||
padding: 16px;
|
||||
|
||||
& > rkgk-brush-preview {
|
||||
width: 128px;
|
||||
height: 128px;
|
||||
|
|
@ -126,6 +108,35 @@ main {
|
|||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
& > rkgk-resize-handle {
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
& > .docked {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
max-height: 100%;
|
||||
|
||||
background-color: var(--color-panel-background);
|
||||
box-shadow: 0 0 0 1px var(--color-panel-border);
|
||||
|
||||
pointer-events: auto;
|
||||
|
||||
& > * {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
& > rkgk-brush-editor {
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
|
||||
& > .menu-bar {
|
||||
border-bottom: 1px solid var(--color-panel-border);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -148,6 +159,7 @@ main {
|
|||
|
||||
& > #js-loading {
|
||||
background-color: var(--color-panel-background);
|
||||
z-index: var(--z-modal);
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -158,47 +170,54 @@ main {
|
|||
/* Resize handle */
|
||||
|
||||
rkgk-resize-handle {
|
||||
--width: 16px;
|
||||
--line-width: 2px;
|
||||
--width: 8px;
|
||||
--line: none;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-shrink: 0;
|
||||
|
||||
z-index: var(--z-resize-handle);
|
||||
|
||||
&.always-visible {
|
||||
--line: 1px solid var(--color-panel-border);
|
||||
}
|
||||
|
||||
&[data-direction="horizontal"] {
|
||||
width: 100%;
|
||||
height: var(--width);
|
||||
margin: calc(var(--width) / -2) 0;
|
||||
|
||||
flex-direction: column;
|
||||
|
||||
cursor: row-resize;
|
||||
|
||||
& > .visual {
|
||||
width: 100%;
|
||||
height: var(--line-width);
|
||||
height: 0;
|
||||
border-bottom: var(--line);
|
||||
}
|
||||
}
|
||||
|
||||
&[data-direction="vertical"] {
|
||||
width: var(--width);
|
||||
height: 100%;
|
||||
margin: 0 calc(var(--width) / -2);
|
||||
|
||||
flex-direction: row;
|
||||
|
||||
cursor: col-resize;
|
||||
|
||||
& > .visual {
|
||||
width: var(--line-width);
|
||||
width: 0;
|
||||
height: 100%;
|
||||
border-left: var(--line);
|
||||
}
|
||||
}
|
||||
|
||||
& > .visual {
|
||||
background-color: var(--color-brand-blue);
|
||||
opacity: 0%;
|
||||
}
|
||||
|
||||
&:hover > .visual,
|
||||
&.dragging > .visual {
|
||||
opacity: 100%;
|
||||
--line: 2px solid var(--color-brand-blue);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -261,12 +280,15 @@ rkgk-reticle-cursor {
|
|||
|
||||
/* Brush box */
|
||||
|
||||
rkgk-brush-box.rkgk-panel {
|
||||
rkgk-brush-box {
|
||||
--button-size: 56px;
|
||||
|
||||
height: var(--height);
|
||||
padding: 12px;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
& > .brushes {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(
|
||||
|
|
@ -275,8 +297,6 @@ rkgk-brush-box.rkgk-panel {
|
|||
);
|
||||
|
||||
max-height: 100%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
|
||||
& > button {
|
||||
padding: 0;
|
||||
|
|
@ -337,20 +357,20 @@ rkgk-brush-box.rkgk-panel {
|
|||
/* Code editor */
|
||||
|
||||
rkgk-code-editor {
|
||||
--gutter-width: 2.75em;
|
||||
--gutter-width: 3.5em;
|
||||
--vertical-padding: 12px;
|
||||
|
||||
display: block;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
padding: var(--vertical-padding) 0;
|
||||
overflow: auto;
|
||||
|
||||
& > .layer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
top: var(--vertical-padding);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
|
||||
margin: 0;
|
||||
|
|
@ -468,58 +488,70 @@ rkgk-code-editor {
|
|||
|
||||
&:has(textarea:focus) {
|
||||
outline: 1px solid var(--color-brand-blue);
|
||||
outline-offset: 4px;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Brush editor */
|
||||
|
||||
rkgk-brush-editor.rkgk-panel {
|
||||
padding: 12px;
|
||||
|
||||
rkgk-brush-editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
|
||||
min-height: 0;
|
||||
|
||||
position: relative;
|
||||
|
||||
& > .name {
|
||||
margin-bottom: 4px;
|
||||
font-weight: bold;
|
||||
& > .editor {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
height: calc(100% - var(--brush-preview-height));
|
||||
|
||||
& > .name {
|
||||
margin: 12px;
|
||||
margin-bottom: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
& > rkgk-code-editor {
|
||||
height: 100%;
|
||||
flex-shrink: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& > .text-area {
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
resize: none;
|
||||
white-space: pre-wrap;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
& > .errors:empty,
|
||||
& > .error-header:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > .error-header {
|
||||
margin: 0;
|
||||
margin-top: 0.5em;
|
||||
font-size: 1rem;
|
||||
color: var(--color-error);
|
||||
}
|
||||
|
||||
& > .errors {
|
||||
margin: 0;
|
||||
color: var(--color-error);
|
||||
white-space: pre-wrap;
|
||||
& > output {
|
||||
height: 64px;
|
||||
flex-grow: 1;
|
||||
|
||||
user-select: text;
|
||||
|
||||
max-height: 20em;
|
||||
overflow-y: auto;
|
||||
&[data-state="ok"] > .errors {
|
||||
display: none;
|
||||
}
|
||||
&[data-state="error"] > .ok {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > .ok {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
height: 100%;
|
||||
|
||||
& > rkgk-brush-preview {
|
||||
flex-grow: 1;
|
||||
}
|
||||
}
|
||||
|
||||
& > .errors {
|
||||
margin: 0;
|
||||
color: var(--color-error);
|
||||
white-space: pre-wrap;
|
||||
|
||||
max-height: 20em;
|
||||
overflow-y: auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -594,7 +626,6 @@ rkgk-brush-preview {
|
|||
var(--checkerboard-dark) 0% 50%
|
||||
)
|
||||
50% 50% / var(--checkerboard-size) var(--checkerboard-size);
|
||||
border-radius: 4px;
|
||||
|
||||
& > canvas {
|
||||
display: block;
|
||||
|
|
@ -625,26 +656,20 @@ rkgk-brush-preview {
|
|||
|
||||
/* Brush cost gauges */
|
||||
|
||||
rkgk-brush-cost-gauges,
|
||||
rkgk-brush-cost-gauges.rkgk-panel {
|
||||
rkgk-brush-cost-gauges {
|
||||
--gauge-size: 20px;
|
||||
|
||||
height: var(--gauge-size);
|
||||
border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
|
||||
overflow: clip; /* clip corners */
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& > rkgk-brush-cost-gauge {
|
||||
display: block;
|
||||
height: var(--gauge-size);
|
||||
flex-grow: 1;
|
||||
width: var(--gauge-size);
|
||||
height: 100%;
|
||||
|
||||
&.hidden {
|
||||
display: none;
|
||||
|
|
@ -654,7 +679,7 @@ rkgk-brush-cost-gauges.rkgk-panel {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
clip-path: xywh(0 0 var(--progress) 100%);
|
||||
clip-path: inset(calc(100% - var(--progress)) 0 0 0);
|
||||
|
||||
background-color: var(--gauge-color);
|
||||
}
|
||||
|
|
@ -672,6 +697,10 @@ rkgk-brush-cost-gauges.rkgk-panel {
|
|||
--gauge-color: #5aca40;
|
||||
}
|
||||
}
|
||||
|
||||
& .icon {
|
||||
background-position: 50% calc(100% - 4px);
|
||||
}
|
||||
}
|
||||
|
||||
/* Zoom indicator */
|
||||
|
|
@ -789,21 +818,38 @@ rkgk-context-menu.rkgk-panel {
|
|||
/* Menu bar */
|
||||
|
||||
.menu-bar {
|
||||
--border-radius: 4px;
|
||||
|
||||
display: flex;
|
||||
align-items: center;
|
||||
box-sizing: border-box;
|
||||
|
||||
width: fit-content;
|
||||
height: 24px;
|
||||
border-radius: var(--border-radius);
|
||||
width: 100%;
|
||||
height: 28px;
|
||||
|
||||
& > a {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style: none;
|
||||
|
||||
& > li {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
& > li.icon {
|
||||
display: block;
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
& > li > a {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
||||
color: var(--color-text);
|
||||
padding: 4px 8px;
|
||||
height: 100%;
|
||||
padding: 0 8px;
|
||||
text-decoration: none;
|
||||
|
||||
line-height: 1;
|
||||
|
|
@ -816,16 +862,6 @@ rkgk-context-menu.rkgk-panel {
|
|||
width: 24px;
|
||||
height: 24px;
|
||||
}
|
||||
|
||||
&:first-child {
|
||||
border-top-left-radius: var(--border-radius);
|
||||
border-bottom-left-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-top-right-radius: var(--border-radius);
|
||||
border-bottom-right-radius: var(--border-radius);
|
||||
}
|
||||
}
|
||||
|
||||
& > hr {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue