github-mirror/discourse
2
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-01-16 06:52:41 +08:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

UX: improve table hover states, fix table button margin issue (#30585)

Browse Source
This commit is contained in:
Kris 2025-01-06 13:59:48 -05:00 committed by GitHub
parent 3dfe1a9fda
commit 116c3f7f8d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -119,7 +119,7 @@ export default {
"btn-default", "btn-default",
"btn", "btn",
"btn-icon", "btn-icon",
...(props.label ? ["no-text"] : []), ...(props.label ? [] : ["no-text"]),
]; ];
openPopupBtn.classList.add(...defaultClasses); openPopupBtn.classList.add(...defaultClasses);
@ -197,7 +197,6 @@ 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", name: "pencil",
class: "edit-table-icon", class: "edit-table-icon",
@ -208,6 +207,7 @@ export default {
table.parentNode.classList.add("fullscreen-table-wrapper"); table.parentNode.classList.add("fullscreen-table-wrapper");
if (attrs.canEdit) { if (attrs.canEdit) {
table.parentNode.classList.add("--editable");
buttonWrapper.append(tableEditorBtn); buttonWrapper.append(tableEditorBtn);
tableEditorBtn.addEventListener( tableEditorBtn.addEventListener(
"click", "click",
@ -229,6 +229,8 @@ export default {
return; return;
} }
table.parentNode.classList.add("--has-overflow");
const expandTableBtn = _createButton({ const expandTableBtn = _createButton({
classes: ["btn-expand-table"], classes: ["btn-expand-table"],
title: "fullscreen_table.expand_btn", title: "fullscreen_table.expand_btn",

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

@ -1596,12 +1596,16 @@ iframe {
html.discourse-no-touch .fullscreen-table-wrapper:hover { html.discourse-no-touch .fullscreen-table-wrapper:hover {
border-radius: 5px; border-radius: 5px;
box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
.open-popup-link { .open-popup-link {
opacity: 100%; opacity: 100%;
} }
&.--has-overflow,
&.--editable {
box-shadow: 0 2px 5px 0 rgba(var(--always-black-rgb), 0.1),
0 2px 10px 0 rgba(var(--always-black-rgb), 0.1);
}
} }
.read-state { .read-state {