From 4289145268b7fb5630812e48112692140a25c3db Mon Sep 17 00:00:00 2001
From: Keegan George <kgeorge13@gmail.com>
Date: Wed, 10 Aug 2022 13:50:38 -0700
Subject: [PATCH] UX: Wrap words instead of dynamic widths and align left (#11)

* UX: Wrap words instead of dynamic widths and align left

* UX: Improve sticky header on scroll

* DEV: Convert default column text to localizable strings
---
 .../components/spreadsheet-editor.js          | 43 ++++++++++++-------
 locales/en.yml                                |  4 ++
 scss/modal/insert-table-modal.scss            |  5 +++
 scss/theme/jspreadsheet-theme.scss            |  4 +-
 4 files changed, 38 insertions(+), 18 deletions(-)

diff --git a/javascripts/discourse/components/spreadsheet-editor.js b/javascripts/discourse/components/spreadsheet-editor.js
index 7334dcd..e7c5e2a 100644
--- a/javascripts/discourse/components/spreadsheet-editor.js
+++ b/javascripts/discourse/components/spreadsheet-editor.js
@@ -11,6 +11,7 @@ import { tracked } from "@glimmer/tracking";
 export default class SpreadsheetEditor extends GlimmerComponent {
   @tracked showEditReason = false;
   spreadsheet = null;
+  defaultColWidth = 150;
 
   // Getters:
   get isEditingTable() {
@@ -100,9 +101,24 @@ export default class SpreadsheetEditor extends GlimmerComponent {
     ];
 
     const columns = [
-      { title: "Column 1", width: 150 },
-      { title: "Column 2", width: 150 },
-      { title: "Column 3", width: 150 },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_1")
+        ),
+        width: this.defaultColWidth,
+      },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_2")
+        ),
+        width: this.defaultColWidth,
+      },
+      {
+        title: I18n.t(
+          themePrefix("discourse_table_builder.default_header.col_3")
+        ),
+        width: this.defaultColWidth,
+      },
     ];
 
     return this.buildSpreadsheet(data, columns);
@@ -127,23 +143,16 @@ export default class SpreadsheetEditor extends GlimmerComponent {
         headings = this.extractTableContent(row).map((heading) => {
           return {
             title: heading,
-            width: heading.length * rowWidthFactor,
+            width: Math.max(
+              heading.length * rowWidthFactor,
+              this.defaultColWidth
+            ),
+            align: "left",
           };
         });
       } else {
         // rows:
-        const rowContent = this.extractTableContent(row);
-
-        // If row content is larger than header, update column width:
-        rowContent.forEach((c, i) => {
-          const colWidth = rowContent[i].length * rowWidthFactor;
-
-          if (headings[i].width < colWidth) {
-            headings[i].width = colWidth;
-          }
-        });
-
-        rows.push(rowContent);
+        rows.push(this.extractTableContent(row));
       }
     });
 
@@ -155,6 +164,8 @@ export default class SpreadsheetEditor extends GlimmerComponent {
     this.spreadsheet = jspreadsheet(this.spreadsheet, {
       data,
       columns,
+      defaultColAlign: "left",
+      wordWrap: true,
       ...opts,
     });
   }
diff --git a/locales/en.yml b/locales/en.yml
index 9825c04..23d454a 100644
--- a/locales/en.yml
+++ b/locales/en.yml
@@ -23,5 +23,9 @@ en:
         reason: "why are you editing?"
         trigger_reason: "Add reason for edit"
       default_edit_reason: "Update Table with Table Editor"
+    default_header:
+      col_1: "Column 1"
+      col_2: "Column 2"
+      col_3: "Column 3"
   theme_metadata:
     description: "Adds a button to the composer to easily build tables in markdown"
diff --git a/scss/modal/insert-table-modal.scss b/scss/modal/insert-table-modal.scss
index 5f6329f..d760faf 100644
--- a/scss/modal/insert-table-modal.scss
+++ b/scss/modal/insert-table-modal.scss
@@ -28,6 +28,11 @@
     width: max-content;
   }
 
+  .modal-body {
+    padding: 0;
+    margin: 0.5em;
+  }
+
   .btn-edit-reason {
     background: none;
     .d-icon {
diff --git a/scss/theme/jspreadsheet-theme.scss b/scss/theme/jspreadsheet-theme.scss
index e252c0b..3eb5dcd 100644
--- a/scss/theme/jspreadsheet-theme.scss
+++ b/scss/theme/jspreadsheet-theme.scss
@@ -23,7 +23,7 @@
 
 .jexcel {
   border-bottom: 1px solid var(--jexcel_border_color);
-  border-right: 1px solid var(--jexcel_border_color);
+  border-right: transparent;
   background-color: transparent;
 }
 
@@ -225,7 +225,7 @@ table.jexcel > tbody > tr.selected > td:first-child {
 table.jexcel > thead > tr > td {
   border-top: 1px solid var(--jexcel_border_color);
   border-right: 1px solid var(--jexcel_border_color);
-  border-bottom: none;
+  border-bottom: 1px solid var(--jexcel_border_color);
   background-color: var(--jexcel_header_background);
 
   &:first-child {