fix: added marquee + hover title for long cluster names

fixes #14
unxsist · Jul 17, 2024 · e3d8c45 · e3d8c45
1 parent 8931ac1
commit e3d8c45
Showing 1 changed file with 69 additions and 4 deletions.
diff --git a/src/components/ContextSwitcher.vue b/src/components/ContextSwitcher.vue
@@ -20,7 +20,7 @@ const showSingleCommand = injectStrict(ShowSingleCommandKey);
 const registerCommand = injectStrict(RegisterCommandStateKey);
 const closeCommandPalette = injectStrict(CloseCommandPaletteKey);
 const rerunLastCommand = injectStrict(RerunLastCommandKey);
-// import authenticated as clusterAuthenticated
+
 const {
   context,
   namespace,
@@ -31,6 +31,10 @@ const setNamespace = injectStrict(KubeContextSetNamespaceKey);
 const { settings } = injectStrict(SettingsContextStateKey);
 const spawnDialog = injectStrict(DialogProviderSpawnDialogKey);
 
+const needsMarquee = ref(false);
+const marqueeContainer = ref<HTMLDivElement | null>();
+const marqueeText = ref<HTMLDivElement | null>();
+
 onMounted(() => {
   registerCommand({
     id: "switch-context",
@@ -191,6 +195,18 @@ onMounted(() => {
       );
     },
   });
+
+  setInterval(() => {
+    if (
+      marqueeContainer.value &&
+      marqueeText.value &&
+      marqueeText.value.offsetWidth > marqueeContainer.value.offsetWidth
+    ) {
+      needsMarquee.value = true;
+    } else {
+      needsMarquee.value = false;
+    }
+  }, 1000);
 });
 </script>
 <template>
@@ -199,13 +215,62 @@ onMounted(() => {
       class="flex flex-col w-full text-xs border rounded-lg p-2 text-left hover:bg-background"
       @click="showSingleCommand('switch-context')"
     >
-      <span class="uppercase font-bold mb-1">{{
-        context || "No context"
-      }}</span>
+      <div
+        ref="marqueeContainer"
+        class="overflow-hidden whitespace-nowrap uppercase font-bold mb-1 w-full"
+        :title="context"
+      >
+        <div
+          ref="marqueeText"
+          class="inline-block"
+          :class="{ marquee: needsMarquee }"
+        >
+          {{ context || "No context" }}
+        </div>
+      </div>
       <span v-if="context">{{
         namespace == "" ? "All namespaces" : namespace
       }}</span>
       <span v-else>Click here to set context</span>
     </button>
   </div>
 </template>
+
+<style scoped>
+.marquee-container {
+  overflow: hidden;
+  white-space: nowrap;
+  /* width: 100%; */
+}
+
+.marquee {
+  display: inline-block;
+  /* transform: translateX(0%);
+  margin-left: 0%; */
+  animation: marquee 30s linear infinite;
+  animation-delay: 0s, 5;
+}
+
+@keyframes marquee {
+  0% {
+    transform: translateX(0%);
+    margin-left: 0%;
+  }
+  25% {
+    transform: translateX(-100%);
+    margin-left: 100%;
+  }
+  50% {
+    transform: translateX(-100%);
+    margin-left: 100%;
+  }
+  75% {
+    transform: translateX(0%);
+    margin-left: 0%;
+  }
+  100% {
+    transform: translateX(0%);
+    margin-left: 0%;
+  }
+}
+</style>