Improve toolbar styling

Fixes #216
tgrosinger · Nov 26, 2022 · 8b1112b · 8b1112b
1 parent b617eaa
commit 8b1112b
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 2 deletions.
diff --git a/src/table-controls-view.ts b/src/table-controls-view.ts
@@ -42,8 +42,13 @@ export class TableControlsView extends ItemView {
     const rootEl = document.createElement('div');
     rootEl.addClass("advanced-tables-buttons");
 
+    rootEl.createDiv().
+      createSpan({ cls: 'title' }).
+      setText("Advanced Tables")
+
     const navHeader = rootEl.createDiv({ cls: 'nav-header' });
     const rowOneBtns = navHeader.createDiv({ cls: 'nav-buttons-container' });
+    rowOneBtns.createSpan({ cls: 'advanced-tables-row-label' }).setText("Align:");
     this.drawBtn(rowOneBtns, 'alignLeft', 'left align column', (te) =>
       te.leftAlignColumn(),
     );
@@ -55,6 +60,7 @@ export class TableControlsView extends ItemView {
     );
 
     const rowTwoBtns = navHeader.createDiv({ cls: 'nav-buttons-container' });
+    rowTwoBtns.createSpan({ cls: 'advanced-tables-row-label' }).setText("Move:");
     this.drawBtn(rowTwoBtns, 'moveRowDown', 'move row down', (te) =>
       te.moveRowDown(),
     );
@@ -69,6 +75,7 @@ export class TableControlsView extends ItemView {
     );
 
     const rowThreeBtns = navHeader.createDiv({ cls: 'nav-buttons-container' });
+    rowThreeBtns.createSpan({ cls: 'advanced-tables-row-label' }).setText("Edit:");
     this.drawBtn(rowThreeBtns, 'insertRow', 'insert row above', (te) =>
       te.insertRow(),
     );
@@ -83,6 +90,7 @@ export class TableControlsView extends ItemView {
     );
 
     const rowFourBtns = navHeader.createDiv({ cls: 'nav-buttons-container' });
+    rowFourBtns.createSpan({ cls: 'advanced-tables-row-label' }).setText("Sort/F:");
     this.drawBtn(rowFourBtns, 'sortAsc', 'sort by column ascending', (te) =>
       te.sortRowsAsc(),
     );
@@ -94,6 +102,7 @@ export class TableControlsView extends ItemView {
     );
 
     const rowFiveBtns = navHeader.createDiv({ cls: 'nav-buttons-container' });
+    rowFiveBtns.createSpan({ cls: 'advanced-tables-row-label' }).setText("Misc:");
     this.drawBtn(rowFiveBtns, 'csv', 'export as csv', (te) =>
       te.exportCSVModal(),
     );

diff --git a/styles.css b/styles.css
@@ -1,5 +1,50 @@
-.advanced-tables-button {
-  padding: 4px 6px;
+:root {
+  --advanced-tables-helper-size: 28px;
+}
+
+.advanced-tables-buttons>div>.title {
+  font-weight: var(--font-medium);
+  font-size: var(--nav-item-size);
+  color: var(--nav-item-color);
+  text-decoration: underline;
+}
+
+[data-type="advanced-tables-toolbar"] .nav-buttons-container {
+  column-gap: 0.2rem;
+  margin: 0.2rem 0 0.2rem 0;
+  justify-content: start;
+}
+
+[data-type="advanced-tables-toolbar"] .nav-buttons-container::before {
+  min-width: 2.6rem;
+  line-height: var(--advanced-tables-helper-size);
+  font-size: var(--nav-item-size);
+  font-weight: var(--nav-item-weight);
+  color: var(--nav-item-color);
+}
+
+[data-type="advanced-tables-toolbar"] .nav-buttons-container>* {
+  height: var(--advanced-tables-helper-size);
+  line-height: var(--advanced-tables-helper-size);
+}
+
+[data-type="advanced-tables-toolbar"] .nav-buttons-container .nav-action-button {
+  width: var(--advanced-tables-helper-size);
+  height: var(--advanced-tables-helper-size);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: var(--radius-s);
+}
+
+[data-type="advanced-tables-toolbar"] .nav-buttons-container .nav-action-button:hover {
+  background-color: var(--nav-item-background-hover);
+  color: var(--nav-item-color-hover);
+  font-weight: var(--nav-item-weight-hover);
+}
+
+.advanced-tables-row-label {
+  width: 50px;
 }
 
 .widget-icon {