waveterm/backup
0
0
Fork 0
mirror of https://github.com/wavetermdev/backup.git synced 2026-08-05 13:57:07 -07:00
Code Issues Packages Projects Releases Wiki Activity

Make magnify icon always visible, transition from magnify to minimize (#197)

Browse Source 
I'm updating the magnify button to be always visible and animate a
transition between being a "Magnify" button and a "Minimize" button.

This also cleans up some text shrinking behavior in the block frame
header so the end icons are always visible.

Also fixes some height discrepancies in the block frame header.

Also implements a `prefers-reduced-motion` query for the tilelayout and
block frame to ensure transitions are not set if the user does not want
them.
This commit is contained in:
Evan Simkowitz
2024-08-05 16:13:26 -07:00
committed by GitHub
parent 2f8642db5b
commit e29cb2debe
12 changed files with 131 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/app/block/block.less
+22 -4
View File
@@ -70,6 +70,8 @@
flex-direction: column;
.block-frame-default-header {
max-height: var(--header-height);
min-height: var(--header-height);
display: flex;
padding: 4px 5px 4px 10px;
align-items: center;
@@ -90,8 +92,10 @@
.block-frame-default-header-iconview {
display: flex;
flex-shrink: 1;
align-items: center;
gap: 8px;
overflow-x: hidden;
.block-frame-view-icon {
font-size: var(--header-icon-size);
@@ -103,10 +107,9 @@
}
.block-frame-view-type {
line-height: 12px;
font-weight: 700;
text-wrap: nowrap;
overflow-x: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
@@ -119,8 +122,8 @@
font: var(--fixed-font);
font-size: 11px;
opacity: 0.7;
text-wrap: nowrap;
overflow-x: hidden;
text-wrap: nowrap;
text-overflow: ellipsis;
}
@@ -148,6 +151,7 @@
min-width: 0;
gap: 8px;
align-items: center;
overflow-x: hidden;
.block-frame-div {
display: flex;
@@ -200,6 +204,7 @@
.block-frame-end-icons {
display: flex;
flex-shrink: 0;
.iconbutton {
display: flex;
@@ -207,6 +212,19 @@
padding: 4px 6px;
align-items: center;
}
.block-frame-magnify {
justify-content: center;
align-items: center;
padding: 0;
svg {
#arrow1,
#arrow2 {
fill: var(--main-text-color);
}
}
}
}
}
@@ -220,7 +238,7 @@
align-items: center;
justify-content: center;
i {
.iconbutton {
opacity: 0.7;
font-size: 45px;
margin: -30px 0 0 0;