From 4e72b06a54e85779d278d84be0d5373368fb77be Mon Sep 17 00:00:00 2001
From: Kris <kris.aubuchon@discourse.org>
Date: Fri, 26 Jan 2024 13:08:12 -0500
Subject: [PATCH] UX: improve mobile table editor button location (#25426)

---
 .../instance-initializers/post-decorations.js | 13 ++++++--
 .../stylesheets/common/base/topic-post.scss   |  6 ----
 .../table-builder/insert-table-modal.scss     |  6 ++++
 .../table-builder/table-edit-decorator.scss   | 32 ++++++++-----------
 4 files changed, 31 insertions(+), 26 deletions(-)

diff --git a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
index 9c04cdad135..21ddf8ea584 100644
--- a/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
+++ b/app/assets/javascripts/discourse/app/instance-initializers/post-decorations.js
@@ -22,6 +22,7 @@ export default {
       const siteSettings = owner.lookup("service:site-settings");
       const session = owner.lookup("service:session");
       const site = owner.lookup("service:site");
+      const capabilities = owner.lookup("service:capabilities");
       const modal = owner.lookup("service:modal");
       // will eventually just be called lightbox
       const lightboxService = owner.lookup("service:lightbox");
@@ -118,7 +119,7 @@ export default {
           "btn-default",
           "btn",
           "btn-icon",
-          "no-text",
+          ...(props.label ? ["no-text"] : []),
         ];
 
         openPopupBtn.classList.add(...defaultClasses);
@@ -131,11 +132,18 @@ export default {
           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) {
           const icon = create(
             iconNode(props.icon.name, { class: props.icon?.class })
           );
-          openPopupBtn.append(icon);
+          openPopupBtn.prepend(icon);
         }
 
         return openPopupBtn;
@@ -180,6 +188,7 @@ export default {
           const tableEditorBtn = _createButton({
             classes: ["btn-edit-table"],
             title: "table_builder.edit.btn_edit",
+            label: "table_builder.edit.btn_edit",
             icon: {
               name: "pencil-alt",
               class: "edit-table-icon",
diff --git a/app/assets/stylesheets/common/base/topic-post.scss b/app/assets/stylesheets/common/base/topic-post.scss
index e08864c631c..52f70950674 100644
--- a/app/assets/stylesheets/common/base/topic-post.scss
+++ b/app/assets/stylesheets/common/base/topic-post.scss
@@ -1683,12 +1683,6 @@ iframe {
   transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
   display: block;
   position: relative;
-
-  &__buttons {
-    position: absolute;
-    top: 0.5rem;
-    right: 0.5rem;
-  }
 }
 
 .fullscreen-table-modal .modal-inner-container,
diff --git a/app/assets/stylesheets/common/table-builder/insert-table-modal.scss b/app/assets/stylesheets/common/table-builder/insert-table-modal.scss
index 60fe5f7dd73..115c212a7c5 100644
--- a/app/assets/stylesheets/common/table-builder/insert-table-modal.scss
+++ b/app/assets/stylesheets/common/table-builder/insert-table-modal.scss
@@ -45,6 +45,12 @@
     align-items: center;
     justify-content: space-between;
 
+    .primary-actions {
+      display: flex;
+      align-items: center;
+      gap: 0.5rem;
+    }
+
     .secondary-actions {
       display: flex;
       align-items: center;
diff --git a/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss b/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
index 3ee65d9e2b2..261c40c843a 100644
--- a/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
+++ b/app/assets/stylesheets/common/table-builder/table-edit-decorator.scss
@@ -10,27 +10,23 @@
   opacity: 100%;
 }
 
-.mobile-view {
-  .btn-edit-table {
-    display: none;
-    z-index: 2;
-    position: absolute;
-    top: 1rem;
-    left: 1rem;
+.fullscreen-table-wrapper {
+  .discourse-no-touch & {
+    &__buttons {
+      position: absolute;
+      top: 0.5rem;
+      right: 0.5rem;
+    }
   }
 
-  .fullscreen-table-wrapper {
-    position: relative;
+  .discourse-touch & {
+    display: flex;
+    flex-direction: column-reverse;
+    padding-bottom: 0.5em;
 
-    &:hover {
-      table {
-        opacity: 0.5;
-      }
-
-      .btn-edit-table {
-        display: block;
-        z-index: 2;
-      }
+    .open-popup-link {
+      left: 0;
+      margin: 0;
     }
   }
 }