show history text on flex panel hide/unhide button

just a draft commit to show a possibility; collapse button with text
ahmedhamidawan · Dec 10, 2024 · f1e7117 · f1e7117
1 parent 39e38c9
commit f1e7117
Showing 1 changed file with 17 additions and 0 deletions.
diff --git a/client/src/components/Panels/FlexPanel.vue b/client/src/components/Panels/FlexPanel.vue
@@ -89,6 +89,7 @@ const sideClasses = computed(() => ({
             @focusin="hoverToggle = true"
             @mouseout="hoverToggle = false"
             @focusout="hoverToggle = false">
+            <span class="vertical-text">History</span>
             <FontAwesomeIcon v-if="side === 'left'" fixed-width icon="fa-chevron-left" />
             <FontAwesomeIcon v-else icon="fa-chevron-right" fixed-width />
         </button>
@@ -106,6 +107,7 @@ const sideClasses = computed(() => ({
                 show = true;
                 hoverToggle = false;
             ">
+            <span class="vertical-text">History</span>
             <FontAwesomeIcon v-if="side === 'right'" fixed-width icon="fa-chevron-left" />
             <FontAwesomeIcon v-else icon="fa-chevron-right" fixed-width />
         </button>
@@ -167,6 +169,11 @@ $border-width: 6px;
     transition: width 0.1s, left 0.1s, right 0.1s;
     border-style: none;
 
+    .vertical-text {
+        transform: rotate(180deg);
+        text-orientation: mixed;
+    }
+
     &:hover,
     &.show,
     &:focus {
@@ -192,6 +199,12 @@ $border-width: 6px;
         border-bottom-right-radius: 0;
     }
 
+    &.open {
+        .vertical-text {
+            writing-mode: vertical-rl;
+        }
+    }
+
     &.closed {
         --width: 0.75rem;
         border-style: solid;
@@ -214,6 +227,10 @@ $border-width: 6px;
             right: unset;
             left: 0;
         }
+
+        .vertical-text {
+            writing-mode: sideways-lr;
+        }
     }
 }