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: Remove extra space added by img resize controls in composer preview

Browse Source
This commit is contained in:
Kris 2020-07-06 19:11:58 -04:00
parent 339549d14a
commit 4f12768d10
2 changed files with 19 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
app/assets/javascripts/pretty-text/addon/engines/discourse-markdown/resize-controls.js
View File

@ -54,7 +54,7 @@ function rule(state) {
} }
function buildScaleButton(selectedScale, scale) { function buildScaleButton(selectedScale, scale) {
const activeScaleClass = selectedScale === scale ? "active" : ""; const activeScaleClass = selectedScale === scale ? " active" : "";
return ( return (
"<span class='scale-btn" + "<span class='scale-btn" +
activeScaleClass + activeScaleClass +
@ -99,7 +99,7 @@ export function setup(helper) {
result += SCALES.map(scale => result += SCALES.map(scale =>
buildScaleButton(selectedScale, scale) buildScaleButton(selectedScale, scale)
).join("<span class='separator'>&nbsp;•&nbsp;</span>"); ).join("");
result += "</span></span>"; result += "</span></span>";

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

@ -194,9 +194,11 @@
} }
.d-editor-preview .image-wrapper { .d-editor-preview .image-wrapper {
--resizer-height: 1.75em;
position: relative; position: relative;
display: inline-block; display: inline-block;
padding-bottom: 1.4em; padding-bottom: var(--resizer-height);
margin-bottom: calc(var(--resizer-height) * -1);
img { img {
padding-bottom: 0; padding-bottom: 0;
@ -204,26 +206,29 @@
&:hover { &:hover {
.button-wrapper { .button-wrapper {
opacity: 0.9; opacity: 1;
} }
} }
.button-wrapper { .button-wrapper {
opacity: 0;
position: absolute; position: absolute;
transition: all 0.25s; height: var(--resizer-height);
display: flex;
align-items: center;
bottom: 0; bottom: 0;
left: 0; left: 0;
.separator { opacity: 0;
color: $primary-low-mid; display: flex;
} align-items: center;
transition: all 0.25s;
z-index: 1; // needs to be higher than image
width: 100%;
background: $secondary; // for when images are wider than controls
.scale-btn { .scale-btn {
background: $secondary; // for when controls are wider than image
color: $tertiary; color: $tertiary;
padding: 0 0.4em; padding: 0 1em;
&:first-of-type { &:first-child,
padding-left: 0; &:last-child {
padding: 0;
} }
&.active { &.active {