From 15134ea04bc46e8cb13977d75b788f5ff71c800e Mon Sep 17 00:00:00 2001
From: undergroundwires <git@undergroundwires.dev>
Date: Tue, 12 Dec 2023 03:44:02 +0100
Subject: [PATCH] Fix tree view alignment and padding issues

This commit addresses issues with the tree view not fully utilizing the
available width (appearing squeezed on the left) on bigger screens, and
inconsistent padding during searches.

The changes centralize padding and script tree rendering logic to
enforce consistency and prevent regression.

Changes:

- Fix tree view width utilization.
- Refactor SCSS variables for better IDE support.
- Unify padding and tree background color logic for consistent padding
  and coloring around the tree component.
- Fix no padding around the tree in tree view.
- Centralize color SCSS variable for script background for consistent
  application theming.
---
 src/presentation/assets/styles/_colors.scss   | 16 ++++++++++--
 src/presentation/assets/styles/_mixins.scss   |  2 +-
 .../Scripts/View/Cards/CardListItem.vue       | 21 +++++++--------
 .../Scripts/View/TheScriptsView.vue           | 25 +++++-------------
 .../Documentation/DocumentationText.vue       |  2 +-
 .../Scripts/View/Tree/ScriptsTree.vue         | 26 +++++++++++++++++--
 .../Scripts/View/Tree/TreeView/TreeView.vue   |  1 +
 .../View/Tree/TreeView/tree-colors.scss       |  2 +-
 8 files changed, 59 insertions(+), 36 deletions(-)

diff --git a/src/presentation/assets/styles/_colors.scss b/src/presentation/assets/styles/_colors.scss
index 82b5c521..b5434895 100644
--- a/src/presentation/assets/styles/_colors.scss
+++ b/src/presentation/assets/styles/_colors.scss
@@ -1,7 +1,10 @@
 /*
     Colors used throughout the application
-    Inspired by material color system: https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color
-    Colors are named using Vue Design System: https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors
+    Inspired by the material color system (https://material.io/design/color/the-color-system.html, https://material.io/develop/web/theming/color).
+    Colors are named according to the Vue Design System guidelines (https://github.com/viljamis/vue-design-system/wiki/Naming-of-Things#naming-colors):
+        - Default: The default base color is `color-{name}`.
+        - Darker than default: Shades are named as `color-{name}-dark`, `color-{name}-darker`, or `color-{name}-darkest`.
+        - Lighter than default: Tints are named as `color-{name}-light`, `color-{name}-lighter`, or `color-{name}-lightest`.
 */
 
 // --- Primary | The color displayed most frequently across screens and components
@@ -26,3 +29,12 @@ $color-on-surface           : #4d5156;
 
 // Background | Appears behind scrollable content.
 $color-background           : #e6ecf4;
+
+
+/*
+    Application-specific colors:
+    These are tailored to the specific needs of the application and derived from the above theme colors.
+    Use these colors to ensure consistent styling across components. When adding new colors, reference existing theme colors.
+    This approach maintains a cohesive look and feel and simplifies theme adjustments.
+*/
+$color-scripts-bg: $color-primary-darker;
diff --git a/src/presentation/assets/styles/_mixins.scss b/src/presentation/assets/styles/_mixins.scss
index d7466e13..7af67c66 100644
--- a/src/presentation/assets/styles/_mixins.scss
+++ b/src/presentation/assets/styles/_mixins.scss
@@ -64,4 +64,4 @@
   margin: 0;
   padding: 0;
   list-style: none;
-}
\ No newline at end of file
+}
diff --git a/src/presentation/components/Scripts/View/Cards/CardListItem.vue b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
index 3f12a132..906fc8b1 100644
--- a/src/presentation/components/Scripts/View/Cards/CardListItem.vue
+++ b/src/presentation/components/Scripts/View/Cards/CardListItem.vue
@@ -37,7 +37,10 @@
         />
       </div>
       <div class="card__expander__content">
-        <ScriptsTree :category-id="categoryId" />
+        <ScriptsTree
+          :category-id="categoryId"
+          :has-top-padding="false"
+        />
       </div>
     </div>
   </div>
@@ -159,27 +162,26 @@ $card-horizontal-gap    : $card-gap;
     &:after {
       transition: all 0.3s ease-in-out;
     }
-    &__title {
+    .card__inner__title {
       display: flex;
       flex-direction: column;
       flex: 1;
       justify-content: center;
     }
-    &__selection_indicator {
+    .card__inner__selection_indicator {
       height: $card-inner-padding;
       margin-right: -$card-inner-padding;
       padding-right: 10px;
       display: flex;
       justify-content: flex-end;
     }
-
-    &__expand-icon {
+    .card__inner__expand-icon {
       width: 100%;
       margin-top: .25em;
       vertical-align: middle;
     }
   }
-  &__expander {
+  .card__expander {
     transition: all 0.2s ease-in-out;
     position: relative;
     background-color: $color-primary-darker;
@@ -189,17 +191,14 @@ $card-horizontal-gap    : $card-gap;
     align-items: center;
     flex-direction: column;
 
-    &__content {
+    .card__expander__content {
       display: flex;
       justify-content: center;
       word-break: break-word;
-      margin-bottom: 1em;
-      margin-left: 0.5em;
-      margin-right: 0.5em;
       max-width: 100%; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
     }
 
-    &__close-button {
+    .card__expander__close-button {
       font-size: 1.5em;
       align-self: flex-end;
       margin-right: 0.25em;
diff --git a/src/presentation/components/Scripts/View/TheScriptsView.vue b/src/presentation/components/Scripts/View/TheScriptsView.vue
index f7742b92..4a24ef1f 100644
--- a/src/presentation/components/Scripts/View/TheScriptsView.vue
+++ b/src/presentation/components/Scripts/View/TheScriptsView.vue
@@ -5,9 +5,7 @@
         <CardList />
       </template>
       <template v-else-if="currentView === ViewType.Tree">
-        <div class="tree">
-          <ScriptsTree />
-        </div>
+        <ScriptsTree />
       </template>
     </template>
     <template v-else>
@@ -30,8 +28,8 @@
           </div>
         </div>
       </div>
-      <div v-if="searchHasMatches" class="tree tree--searching">
-        <ScriptsTree />
+      <div v-if="searchHasMatches">
+        <ScriptsTree :has-top-padding="false" />
       </div>
     </template>
   </div>
@@ -139,29 +137,20 @@ $margin-inner: 4px;
     overflow: auto;
     max-height: 70vh;
   }
-  .tree {
-    padding-left: 3%;
-    padding-top: 15px;
-    padding-bottom: 15px;
-    &--searching {
-      background-color: $color-primary-darker;
-      padding-top: 0px;
-    }
-  }
 }
 
 .search {
   display: flex;
   flex-direction: column;
-  background-color: $color-primary-darker;
-  &__query {
+  background-color: $color-scripts-bg;
+  .search__query {
     display: flex;
     justify-content: center;
     flex-direction: row;
     align-items: center;
     margin-top: 1em;
     color: $color-primary;
-    &__close-button {
+    .search__query__close-button {
       @include clickable;
       font-size: 1.25em;
       margin-left: 0.25rem;
@@ -170,7 +159,7 @@ $margin-inner: 4px;
       }
     }
   }
-  &-no-matches {
+  .search-no-matches {
     display:flex;
     flex-direction: column;
     word-break:break-word;
diff --git a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
index 175605ad..2cc2e942 100644
--- a/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
+++ b/src/presentation/components/Scripts/View/Tree/NodeContent/Documentation/DocumentationText.vue
@@ -167,7 +167,7 @@ $base-spacing: $text-size;
     @include no-margin('blockquote');
     @include no-margin('pre');
 
-    /* Add spacing between elements using `margin-bottom` only (bottom-out instead of top-down strategy). */
+    /* Add spacing between elements using `margin-bottom` only (bottom-up instead of top-down strategy). */
     $small-vertical-spacing: math.div($base-vertical-spacing, 2);
     @include bottom-margin('p', $base-vertical-spacing);
     @include bottom-margin('h1, h2, h3, h4, h5, h6', $base-vertical-spacing);
diff --git a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
index 7611b508..b7f85f2c 100644
--- a/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
+++ b/src/presentation/components/Scripts/View/Tree/ScriptsTree.vue
@@ -1,5 +1,10 @@
 <template>
-  <div class="scripts-tree-container">
+  <div
+    class="scripts-tree-container"
+    :class="{
+      'top-padding': hasTopPadding,
+    }"
+  >
     <template v-if="initialNodes.length">
       <TreeView
         :initial-nodes="initialNodes"
@@ -39,6 +44,10 @@ export default defineComponent({
       type: [Number],
       default: undefined,
     },
+    hasTopPadding: {
+      type: Boolean,
+      default: true,
+    },
   },
   setup(props) {
     const useUserCollectionStateHook = injectKey((keys) => keys.useUserSelectionState);
@@ -62,8 +71,21 @@ export default defineComponent({
 </script>
 
 <style scoped lang="scss">
+@use "@/presentation/assets/styles/main" as *;
+
+$padding: 20px;
+
 .scripts-tree-container {
   display: flex; // We could provide `block`, but `flex` is more versatile.
-  overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+
+  /* Set background color in consistent way so it has similar look when searching, on tree view, in cards etc. */
+  background: $color-scripts-bg;
+
+  padding-bottom: $padding;
+  padding-left: $padding;
+  padding-right: $padding;
+  &.top-padding {
+    padding-top: $padding;
+  }
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
index 3ca105b4..daf61739 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/TreeView.vue
@@ -98,5 +98,6 @@ export default defineComponent({
 .tree {
   background: $color-tree-bg;
   overflow: auto; // Prevents horizontal expansion of inner content (e.g., when a code block is shown)
+  flex: 1; // Expands the node horizontally, allowing its content to utilize full width for child item alignment, such as icons and text.
 }
 </style>
diff --git a/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss b/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
index 8d6bf015..5ecfa73e 100644
--- a/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
+++ b/src/presentation/components/Scripts/View/Tree/TreeView/tree-colors.scss
@@ -1,7 +1,7 @@
 @use "@/presentation/assets/styles/main" as *;
 
 /* Tree colors, based on global colors */
-$color-tree-bg                              : $color-primary-darker;
+$color-tree-bg                              : $color-scripts-bg;
 $color-node-arrow                           : $color-on-primary;
 $color-node-fg                              : $color-on-primary;
 $color-node-highlight-bg                    : $color-primary-dark;