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

FIX: Desktop touchscreens and allow edits on mobileView (#32)

This commit is contained in:
Keegan George 2022-10-27 10:52:40 -07:00 committed by GitHub
parent ae101e3b95
commit 7028ba0660
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 29 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
javascripts/discourse/api-initializers/table-editor.js
View File

@ -10,8 +10,6 @@ import { parseAsync } from "discourse/lib/text";
import { tokenRange } from "../discourse-table-builder/lib/utilities"; import { tokenRange } from "../discourse-table-builder/lib/utilities";
export default apiInitializer("0.11.1", (api) => { export default apiInitializer("0.11.1", (api) => {
const site = api.container.lookup("service:site");
function createButton() { function createButton() {
const openPopupBtn = document.createElement("button"); const openPopupBtn = document.createElement("button");
openPopupBtn.classList.add( openPopupBtn.classList.add(
@ -53,10 +51,6 @@ export default apiInitializer("0.11.1", (api) => {
function generatePopups(tables, attrs) { function generatePopups(tables, attrs) {
tables.forEach((table, index) => { tables.forEach((table, index) => {
if (site.isMobileDevice) {
return;
}
const popupBtn = createButton(); const popupBtn = createButton();
popupBtn.setAttribute("data-table-id", index); // sets a table id so each table can be distinctly edited popupBtn.setAttribute("data-table-id", index); // sets a table id so each table can be distinctly edited
table.parentNode.classList.add("fullscreen-table-wrapper"); table.parentNode.classList.add("fullscreen-table-wrapper");

29
scss/post/table-edit-decorator.scss
View File

@ -10,3 +10,32 @@
-ms-user-select: none; -ms-user-select: none;
user-select: none; user-select: none;
} }
.fullscreen-table-wrapper:hover .btn-edit-table {
opacity: 100%;
}
.mobile-view {
.btn-edit-table {
display: none;
}
.fullscreen-table-wrapper {
position: relative;
border: 1px solid transparent;
&:hover {
border: 1px solid var(--primary-low);
table {
opacity: 0.5;
}
.btn-edit-table {
z-index: 2;
display: block;
position: absolute;
top: 1rem;
left: 1rem;
}
}
}
}