Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: improve mobile table editor button location (#25426)

This commit is contained in:
Kris 2024-01-26 13:08:12 -05:00 committed by GitHub
parent 4266b0cf7d
commit 4e72b06a54
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 31 additions and 26 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
View File

@ -22,6 +22,7 @@ export default {
const siteSettings = owner.lookup("service:site-settings"); const siteSettings = owner.lookup("service:site-settings");
const session = owner.lookup("service:session"); const session = owner.lookup("service:session");
const site = owner.lookup("service:site"); const site = owner.lookup("service:site");
const capabilities = owner.lookup("service:capabilities");
const modal = owner.lookup("service:modal"); const modal = owner.lookup("service:modal");
// will eventually just be called lightbox // will eventually just be called lightbox
const lightboxService = owner.lookup("service:lightbox"); const lightboxService = owner.lookup("service:lightbox");
@ -118,7 +119,7 @@ export default {
"btn-default", "btn-default",
"btn", "btn",
"btn-icon", "btn-icon",
"no-text", ...(props.label ? ["no-text"] : []),
]; ];
openPopupBtn.classList.add(...defaultClasses); openPopupBtn.classList.add(...defaultClasses);
@ -131,11 +132,18 @@ export default {
openPopupBtn.title = I18n.t(props.title); openPopupBtn.title = I18n.t(props.title);
} }
if (props.label && capabilities.touch) {
openPopupBtn.innerHTML = `
<span class="d-button-label">
${I18n.t(props.label)}
</div>`;
}
if (props.icon) { if (props.icon) {
const icon = create( const icon = create(
iconNode(props.icon.name, { class: props.icon?.class }) iconNode(props.icon.name, { class: props.icon?.class })
); );
openPopupBtn.append(icon); openPopupBtn.prepend(icon);
} }
return openPopupBtn; return openPopupBtn;
@ -180,6 +188,7 @@ export default {
const tableEditorBtn = _createButton({ const tableEditorBtn = _createButton({
classes: ["btn-edit-table"], classes: ["btn-edit-table"],
title: "table_builder.edit.btn_edit", title: "table_builder.edit.btn_edit",
label: "table_builder.edit.btn_edit",
icon: { icon: {
name: "pencil-alt", name: "pencil-alt",
class: "edit-table-icon", class: "edit-table-icon",

6
app/assets/stylesheets/common/base/topic-post.scss
View File

@ -1683,12 +1683,6 @@ iframe {
transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
display: block; display: block;
position: relative; position: relative;
&__buttons {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
} }
.fullscreen-table-modal .modal-inner-container, .fullscreen-table-modal .modal-inner-container,

6
app/assets/stylesheets/common/table-builder/insert-table-modal.scss
View File

@ -45,6 +45,12 @@
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.primary-actions {
display: flex;
align-items: center;
gap: 0.5rem;
}
.secondary-actions { .secondary-actions {
display: flex; display: flex;
align-items: center; align-items: center;

32
app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
View File

@ -10,27 +10,23 @@
opacity: 100%; opacity: 100%;
} }
.mobile-view {
.btn-edit-table {
display: none;
z-index: 2;
position: absolute;
top: 1rem;
left: 1rem;
}
.fullscreen-table-wrapper { .fullscreen-table-wrapper {
position: relative; .discourse-no-touch & {
&__buttons {
&:hover { position: absolute;
table { top: 0.5rem;
opacity: 0.5; right: 0.5rem;
}
} }
.btn-edit-table { .discourse-touch & {
display: block; display: flex;
z-index: 2; flex-direction: column-reverse;
} padding-bottom: 0.5em;
.open-popup-link {
left: 0;
margin: 0;
} }
} }
} }