UPDATE: volume widget updated

stereum-dev · Sep 30, 2024 · 0231764 · 0231764
1 parent 35881a8
commit 0231764
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 58 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -1624,6 +1624,10 @@ video {
   height: 33.333333%;
 }
 
+.h-1\/4{
+  height: 25%;
+}
+
 .h-1\/5{
   height: 20%;
 }
@@ -1898,10 +1902,6 @@ video {
   height: 100vh;
 }
 
-.h-1\/4{
-  height: 25%;
-}
-
 .max-h-10{
   max-height: 2.5rem;
 }
@@ -2130,6 +2130,10 @@ video {
   width: 83.333333%;
 }
 
+.w-11{
+  width: 2.75rem;
+}
+
 .w-11\/12{
   width: 91.666667%;
 }
@@ -2438,10 +2442,6 @@ video {
   width: 100vw;
 }
 
-.w-11{
-  width: 2.75rem;
-}
-
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2851,12 +2851,6 @@ video {
           align-items: center;
 }
 
-.items-baseline{
-  -webkit-box-align: baseline;
-      -ms-flex-align: baseline;
-          align-items: baseline;
-}
-
 .justify-normal{
   -webkit-box-pack: normal;
       -ms-flex-pack: normal;
@@ -4258,16 +4252,6 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
-.bg-red-400{
-  --tw-bg-opacity: 1;
-  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
-}
-
-.bg-blue-600{
-  --tw-bg-opacity: 1;
-  background-color: rgb(37 99 235 / var(--tw-bg-opacity));
-}
-
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
@@ -4613,6 +4597,10 @@ video {
   font-size: 26px;
 }
 
+.text-\[30\%\]{
+  font-size: 30%;
+}
+
 .text-\[40\%\]{
   font-size: 40%;
 }
@@ -4675,8 +4663,12 @@ video {
   line-height: 1rem;
 }
 
-.text-\[30\%\]{
-  font-size: 30%;
+.text-\[70\%\]{
+  font-size: 70%;
+}
+
+.text-\[43\%\]{
+  font-size: 43%;
 }
 
 .font-\[400\]{

diff --git a/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
@@ -4,38 +4,71 @@
       <div class="volume-Ico-container flex justify-center items-center w-full h-4/5">
         <img class="w-3/4" src="/img/icon/control-page-icons/hdd.svg" />
       </div>
-      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">volume</span>
+      <span
+        class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase"
+        >volume</span
+      >
     </div>
     <div class="volume-box w-2/3 h-full flex flex-col justify-center items-center p-1">
-      <div class="volume_services p-1 gap-1 flex w-full h-2/3 border rounded-md border-gray-500 overflow-x-scroll">
+      <div
+        class="volume_services flex w-full h-1/3 border rounded-sm border-gray-500 overflow-hidden relative"
+      >
         <div
           v-for="item in storagestatus"
           :key="item.id"
-          :class="getDynamicClass(item.percentage)"
-          class="squa flex-shrink-0 border border-gray-500 rounded-none flex justify-center items-center"
-        >
-          <!-- Display service icon -->
-          <img :src="item.icon" alt="Service Icon" class="w-4/5 h-4/5" />
-        </div>
+          class="h-full"
+          :style="{
+            width: getSegmentWidth(item.percentage),
+            backgroundColor: getStableColor(item.service),
+            minWidth: '1px',
+          }"
+        ></div>
       </div>
-      <div class="hdd-services w-full h-1/3 flex">
-        <div class="left-side w-3/5 h-full flex justify-center items-center text-[40%] text-green-500 uppercase">
+
+      <div class="hdd-services w-full h-2/3 flex">
+        <div
+          class="left-side w-2/3 h-full flex justify-center items-center text-[45%] text-green-500 uppercase"
+        >
           <span>{{ availDisk }} GB {{ $t("controlPage.free") }} </span
-          ><span class="text-gray-400"> / {{ totalDisk }} GB {{ $t("controlPage.total") }}</span>
+          ><span class="text-gray-400">
+            / {{ totalDisk }} GB {{ $t("controlPage.total") }}</span
+          >
         </div>
-        <div class="right-side w-2/5 h-full flex justify-center items-center uppercase">
+        <div class="right-side w-1/3 h-full flex justify-center items-center uppercase">
           <div class="ttl-box w-1/4 h-full flex flex-col justify-center items-center">
-            <div class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase">write</div>
-            <div class="title w-full text-[40%] h-1/2 flex justify-center items-center text-gray-200 uppercase">read</div>
+            <div
+              class="title w-full text-[50%] h-1/2 flex justify-center items-center text-gray-200 uppercase mr-1"
+            >
+              write
+            </div>
+            <div
+              class="title w-full text-[50%] h-1/2 flex justify-center items-center text-gray-200 uppercase mr-1"
+            >
+              read
+            </div>
           </div>
-          <div class="val-box w-3/4 h-full flex flex-col text-[60%] justify-center font-semibold items-center">
-            <div class="title w-full h-1/2 flex justify-center items-center text-orange-500 uppercase">
+          <div
+            class="val-box w-3/4 h-full flex flex-col text-[70%] justify-center font-semibold items-center"
+          >
+            <div
+              class="title w-full h-1/2 flex justify-center items-center text-orange-500 uppercase"
+            >
               {{ convertWriteValueToMb }}
-              {{ controlStore.writeValue / 1024 < 1 && controlStore.writeValue / 1024 > 0 ? "KB" : "MB" }}
+              {{
+                controlStore.writeValue / 1024 < 1 && controlStore.writeValue / 1024 > 0
+                  ? "KB"
+                  : "MB"
+              }}
             </div>
-            <div class="title w-full h-1/2 flex justify-center items-center text-teal-700 uppercase">
+            <div
+              class="title w-full h-1/2 flex justify-center items-center text-teal-700 uppercase"
+            >
               {{ convertReadValueToMb }}
-              {{ controlStore.readValue / 1024 < 1 && controlStore.writeValue / 1024 > 0 ? "KB" : "MB" }}
+              {{
+                controlStore.readValue / 1024 < 1 && controlStore.writeValue / 1024 > 0
+                  ? "KB"
+                  : "MB"
+              }}
             </div>
           </div>
         </div>
@@ -69,8 +102,12 @@ const storagestatus = computed(() => {
 
     const percentage = (valueInGB / totalDisk.value) * 100;
 
-    const matchingService = serviceStore.installedServices.find((service) => service.service === item.service);
-    const serviceIcon = matchingService ? matchingService.icon : "/path/to/default/icon.png";
+    const matchingService = serviceStore.installedServices.find(
+      (service) => service.service === item.service
+    );
+    const serviceIcon = matchingService
+      ? matchingService.icon
+      : "/path/to/default/icon.png";
 
     return {
       ...item,
@@ -86,18 +123,23 @@ const writeValue = computed(() => controlStore.writeValue);
 
 const readValue = computed(() => controlStore.readValue);
 
-const getDynamicClass = (percentage) => {
-  if (percentage < 10) {
-    return "w-[8%] h-[30%]";
-  } else if (percentage < 25) {
-    return "w-[20%] h-[50%]";
-  } else if (percentage < 40) {
-    return "w-[30%] h-[70%]";
-  } else if (percentage < 75) {
-    return "w-[40%] h-[90%]";
-  } else {
-    return "w-[50%] h-[100%]";
+const getSegmentWidth = (percentage) => {
+  return percentage < 1 ? "1px" : `${percentage}%`;
+};
+
+const getStableColor = (identifier) => {
+  let hash = 0;
+  for (let i = 0; i < identifier.length; i++) {
+    hash = identifier.charCodeAt(i) + ((hash << 5) - hash);
   }
+
+  let color = "#";
+  for (let i = 0; i < 3; i++) {
+    const value = (hash >> (i * 8)) & 0xff;
+    color += ("00" + value.toString(16)).slice(-2);
+  }
+
+  return color;
 };
 
 const convertWriteValueToMb = computed(() => {