mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-09 19:48:45 +01:00
c892c39a73
Make the block content sizing update once when its node moves or becomes magnified. By manually updating this inner sizing rather than letting the block flow in the DOM, the animations of the block frames are much smoother. This also fixes an issue where two scrollbars were being rendered for the Directory Preview widget. This also sets zero padding on nodes when there's only a single node being rendered.
146 lines
3.3 KiB
Plaintext
146 lines
3.3 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.tile-layout {
|
|
position: relative;
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
--gap-size-px: 5px;
|
|
|
|
.overlay-container,
|
|
.display-container,
|
|
.placeholder-container {
|
|
position: absolute;
|
|
display: flex;
|
|
top: 0;
|
|
left: 0;
|
|
height: 100%;
|
|
width: 100%;
|
|
min-height: 4rem;
|
|
min-width: 4rem;
|
|
}
|
|
|
|
.display-container {
|
|
z-index: var(--zindex-layout-display-container);
|
|
}
|
|
|
|
.placeholder-container {
|
|
z-index: var(--zindex-layout-placeholder-container);
|
|
}
|
|
|
|
.overlay-container {
|
|
z-index: var(--zindex-layout-overlay-container);
|
|
}
|
|
|
|
.overlay-node {
|
|
display: flex;
|
|
flex: 0 1 auto;
|
|
}
|
|
|
|
.resize-handle {
|
|
z-index: var(--zindex-layout-resize-handle);
|
|
&.flex-row {
|
|
cursor: ew-resize;
|
|
.line {
|
|
height: 100%;
|
|
margin-left: calc(var(--gap-size-px) - 1px);
|
|
}
|
|
}
|
|
&.flex-column {
|
|
cursor: ns-resize;
|
|
.line {
|
|
margin-top: calc(var(--gap-size-px) - 1px);
|
|
}
|
|
}
|
|
&:hover {
|
|
&.flex-row .line {
|
|
border-left: 2px solid var(--accent-color);
|
|
}
|
|
&.flex-column .line {
|
|
border-bottom: 2px solid var(--accent-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
.tile-node {
|
|
border-radius: calc(var(--block-border-radius) + 2px);
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
&.dragging {
|
|
filter: blur(8px);
|
|
}
|
|
|
|
&.magnified {
|
|
background-color: var(--block-bg-solid-color);
|
|
z-index: var(--zindex-layout-magnified-node);
|
|
}
|
|
&.last-magnified {
|
|
z-index: var(--zindex-layout-last-magnified-node);
|
|
}
|
|
|
|
.tile-preview-container {
|
|
position: absolute;
|
|
top: 10000px;
|
|
white-space: nowrap !important;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
|
|
.tile-preview {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
&.resizing {
|
|
border: 1px solid var(--accent-color);
|
|
backdrop-filter: blur(8px);
|
|
}
|
|
|
|
.tile-leaf {
|
|
overflow: hidden;
|
|
}
|
|
|
|
&:not(:only-child) .tile-leaf {
|
|
padding: calc(var(--gap-size-px) / 2);
|
|
}
|
|
}
|
|
|
|
&.animate {
|
|
.tile-node,
|
|
.placeholder {
|
|
transition-duration: var(--animation-time-s);
|
|
transition-timing-function: ease-in;
|
|
transition-property: transform, width, height, background-color;
|
|
}
|
|
}
|
|
|
|
.tile-leaf,
|
|
.overlay-leaf {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
.placeholder {
|
|
background-color: var(--accent-color);
|
|
opacity: 0.5;
|
|
border-radius: calc(var(--block-border-radius) + 2px);
|
|
}
|
|
}
|
|
|
|
.prefers-reduced-motion {
|
|
.tile-layout {
|
|
&.animate {
|
|
.tile-node,
|
|
.placeholder {
|
|
transition-duration: none;
|
|
transition-timing-function: none;
|
|
transition-property: none;
|
|
}
|
|
}
|
|
}
|
|
}
|