mirror of
https://github.com/wavetermdev/waveterm.git
synced 2025-01-10 19:58:00 +01:00
75c9e211d9
Adds resizability to the layout system. Hovering in the margins of a block will highlight the available resize handle and show a cursor indicating its resize direction. Dragging will cause the resizing nodes to blur out and be replaced by an outline. Releasing the handle will commit the new resize operation and cause the underlying nodes to update to their new sizes. We'll want to refactor this in the future to move all layout and resize logic into a shared model that the TileLayout code can talk to, but that's a future improvement. For now, this makes some compromises, mainly that the logic is kind of distributed around. --------- Co-authored-by: sawka <mike.sawka@gmail.com>
157 lines
3.4 KiB
Plaintext
157 lines
3.4 KiB
Plaintext
// Copyright 2024, Command Line Inc.
|
|
// SPDX-License-Identifier: Apache-2.0
|
|
|
|
.block {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
position: relative;
|
|
|
|
.block-frame-icon {
|
|
margin-right: 0.5em;
|
|
}
|
|
|
|
.block-content {
|
|
display: flex;
|
|
flex-grow: 1;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
min-height: 0;
|
|
padding: 5px;
|
|
}
|
|
|
|
.block-focuselem {
|
|
height: 0;
|
|
width: 0;
|
|
input {
|
|
width: 0;
|
|
height: 0;
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
|
|
.block-header-animation-wrap {
|
|
max-height: 0;
|
|
transition:
|
|
max-height 0.3s ease-out,
|
|
opacity 0.3s ease-out;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 30px;
|
|
z-index: var(--zindex-header-hover);
|
|
|
|
&.is-showing {
|
|
max-height: 30px;
|
|
}
|
|
}
|
|
|
|
&.block-frame-tech {
|
|
border: 2px solid var(--border-color);
|
|
border-radius: 7px;
|
|
margin: 8px 0 0 0;
|
|
padding: 10px 2px 2px 2px;
|
|
height: calc(100% - 8px);
|
|
width: 100%;
|
|
overflow: visible;
|
|
|
|
&.block-preview {
|
|
background-color: var(--main-bg-color);
|
|
|
|
.block-frame-tech-close {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
&.block-focused {
|
|
border: 2px solid var(--accent-color);
|
|
|
|
.block-frame-tech-header {
|
|
color: var(--main-text-color);
|
|
}
|
|
}
|
|
|
|
.block-frame-tech-header {
|
|
position: absolute;
|
|
max-width: 85%;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
top: -11px;
|
|
padding: 4px 6px 4px 6px;
|
|
background-color: var(--main-bg-color);
|
|
font: var(--fixed-font);
|
|
color: var(--secondary-text-color);
|
|
white-space: nowrap;
|
|
cursor: grab;
|
|
}
|
|
|
|
.block-frame-tech-close {
|
|
position: absolute;
|
|
top: 0;
|
|
right: -2px;
|
|
padding: 0 0 1px 1px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
|
|
&:hover {
|
|
color: var(--secondary-text-color);
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.block-frame-preview {
|
|
background-color: var(--main-bg-color);
|
|
width: 100%;
|
|
flex-grow: 1;
|
|
}
|
|
}
|
|
|
|
.block-header {
|
|
display: flex;
|
|
flex-direction: row;
|
|
flex-shrink: 0;
|
|
height: 30px;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: var(--panel-bg-color);
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
cursor: default;
|
|
border-radius: 0 0 4px 4px;
|
|
cursor: grab;
|
|
|
|
.block-header-icon {
|
|
font-size: 20px;
|
|
padding: 0 5px;
|
|
}
|
|
|
|
.block-header-text {
|
|
padding: 0 5px;
|
|
flex-grow: 1;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.close-button {
|
|
font-size: 12px;
|
|
padding: 5px 5px 5px 5px;
|
|
margin-right: 5px;
|
|
border-radius: 4px;
|
|
cursor: pointer;
|
|
|
|
&:hover {
|
|
background-color: var(--highlight-bg-color);
|
|
}
|
|
}
|
|
}
|