Discource-C/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-02-10 13:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: always show image preview controls, improve spacing (#27489)

Browse Source
This commit is contained in:
Kris 2024-06-17 08:43:43 -04:00 committed by GitHub
parent d1f1e93f3f
commit 0a99407bfb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 17 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
app/assets/stylesheets/common/base/d-image-grid.scss
View File

@ -24,6 +24,10 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start; justify-content: flex-start;
.button-wrapper {
bottom: 0;
min-width: unset;
}
> div, > div,
> span { > span {
@ -88,15 +92,4 @@
} }
} }
} }
.mobile-view .d-editor-preview & {
.image-wrapper {
.button-wrapper {
opacity: 0;
}
&:hover .button-wrapper {
opacity: 1;
}
}
}
} }

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

@ -149,12 +149,12 @@
} }
.d-editor-preview img { .d-editor-preview img {
padding-bottom: 1.4em; vertical-align: baseline; // consistent with cooked
&.emoji, &.emoji,
&.avatar, &.avatar,
&.onebox-avatar, &.onebox-avatar,
&.site-icon { &.site-icon {
padding-bottom: 0; vertical-align: text-bottom;
} }
&.resizable { &.resizable {
object-fit: cover; object-fit: cover;
@ -163,50 +163,33 @@
} }
.d-editor-preview .image-wrapper { .d-editor-preview .image-wrapper {
--resizer-height: 1.75em;
position: relative; position: relative;
display: inline-block; display: inline-block;
.discourse-no-touch & {
// on hover-capable devices we position the controls within the padding
padding-bottom: var(--resizer-height);
margin-bottom: calc(var(--resizer-height) * -1);
}
img {
padding-bottom: 0;
}
&:hover {
.button-wrapper {
opacity: 1;
}
}
.button-wrapper { .button-wrapper {
min-width: 10em; --resizer-height: 2.5em;
box-sizing: border-box;
padding: 0.25em 0.5em;
min-width: 19em; // wide enough to contain all controls
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: var(--resizer-height);
bottom: 0; bottom: 0.4em;
left: 0; left: 0;
opacity: 0; opacity: 0.9;
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);
color: var(--primary);
&[editing] {
opacity: 1;
}
.scale-btn-container, .scale-btn-container,
.alt-text-readonly-container, .alt-text-readonly-container,
.alt-text-edit-container, .alt-text-edit-container,
.delete-image-button { .delete-image-button {
background: var(--secondary);
display: flex; display: flex;
height: var(--resizer-height); height: var(--resizer-height);
align-items: center; align-items: center;
@ -262,11 +245,11 @@
gap: 0 0.25em; gap: 0 0.25em;
flex: 1; flex: 1;
max-width: 100%; max-width: 100%;
height: 95%; // gives input some padding
.alt-text-input, .alt-text-input,
.alt-text-edit-ok, .alt-text-edit-ok,
.alt-text-edit-cancel { .alt-text-edit-cancel {
height: var(--resizer-height); height: 100%;
} }
.alt-text-input { .alt-text-input {
@ -310,10 +293,6 @@
} }
} }
.discourse-touch .d-editor-preview .image-wrapper .button-wrapper {
opacity: 1;
}
// d-editor bar button sizing // d-editor bar button sizing
.d-editor-button-bar { .d-editor-button-bar {
display: grid; display: grid;