IntenseWebs/discourse
3
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-25 18:55:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

UX: disable the image preview controls while invisible (#25990)

Browse Source
This commit is contained in:
Kris
2024-03-01 15:06:43 -05:00
committed by GitHub
parent 0f32e496bc
commit 84882ad25f
1 changed files with 4 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
app/assets/stylesheets/common/d-editor.scss
View File

@@ -178,6 +178,7 @@
&:hover { &:hover {
.button-wrapper { .button-wrapper {
pointer-events: auto;
opacity: 1; opacity: 1;
} }
} }
@@ -185,12 +186,10 @@
.button-wrapper { .button-wrapper {
min-width: 10em; min-width: 10em;
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
gap: 0 0.5em; gap: 0 0.5em;
position: absolute; position: absolute;
height: calc(var(--resizer-height) + 0.5em); height: calc(var(--resizer-height) + 0.5em);
bottom: 0; bottom: 0;
@@ -199,9 +198,11 @@
transition: all 0.25s; transition: all 0.25s;
z-index: 1; // needs to be higher than image z-index: 1; // needs to be higher than image
background: var(--secondary); // for when images are wider than controls background: var(--secondary); // for when images are wider than controls
pointer-events: none; // the controls shouldn't be usable while invisible
&[editing] { &[editing] {
opacity: 1; opacity: 1;
pointer-events: auto;
} }
.scale-btn-container, .scale-btn-container,
@@ -314,6 +315,7 @@
.mobile-view .d-editor-preview .image-wrapper .button-wrapper { .mobile-view .d-editor-preview .image-wrapper .button-wrapper {
opacity: 1; opacity: 1;
pointer-events: auto;
} }
// d-editor bar button sizing // d-editor bar button sizing