ADD: alert box added to the new control

stereum-dev · Sep 18, 2024 · 7ca89ab · 7ca89ab
1 parent f2d0e35
commit 7ca89ab
Show file tree

Hide file tree

Showing 7 changed files with 51 additions and 31 deletions.
diff --git a/launcher/public/output.css b/launcher/public/output.css
@@ -4205,6 +4205,11 @@ video {
   background-color: rgb(248 113 113 / var(--tw-bg-opacity));
 }
 
+.bg-yellow-500{
+  --tw-bg-opacity: 1;
+  background-color: rgb(234 179 8 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }

diff --git a/launcher/src/components/UI/control-page/ControlScreen.vue b/launcher/src/components/UI/control-page/ControlScreen.vue
@@ -3,13 +3,15 @@
     <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
       <ControlHeader />
       <CommonSidebar />
+      <AlertSection />
     </div>
   </base-layout>
 </template>
 
 <script setup>
 import ControlHeader from "./sections/ControlHeader.vue";
 import CommonSidebar from "./sections/CommonSidebar.vue";
+import AlertSection from "./sections/AlertSection.vue";
 </script>
 <style scoped>
 .Control-screen {

diff --git a/...omponents/UI/the-control/ControlAlert.vue → ...ol-page/components/alert/ControlAlert.vue b/...omponents/UI/the-control/ControlAlert.vue → ...ol-page/components/alert/ControlAlert.vue
@@ -1,7 +1,7 @@
 <template>
-  <div class="alert-box_parent">
+  <div class="alert-box_parent rounded-md">
     <div class="alert-box">
-      <div class="alert-box_header h-8 w-full flex justify-center items-center">
+      <div class="alert-box_header h-7 w-full flex justify-center items-center">
         <div class="alert-box_icons border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center pt-0.5">
           <div
             class="icon_alarm"
@@ -31,7 +31,7 @@
             <img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
           </div>
         </div>
-        <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center">
+        <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center ml-1">
           <div class="volBtn cursor-pointer w-8" @click="volToggle">
             <img
               :src="volState ? '/img/icon/node-alert-icons/alert-settings.png' : '/img/icon/node-alert-icons/alert-settings-mute.png'"
@@ -666,24 +666,22 @@ export default {
   right: 0 !important;
 }
 .alert-box_parent {
-  width: 161px;
-  max-height: 333px;
-  height: 333px;
-  border-radius: 15px;
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
   background-color: #264744;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
-  padding: 10px 5px;
+
   position: relative;
-  box-shadow: 0px 0px 5px 2px #001717;
   cursor: default;
 }
 .alert-box {
   display: flex;
-  height: 330px;
-  justify-content: space-between;
+  height: 100%;
+  width: 100%;
   align-items: center;
   flex-direction: column;
   padding: 5px;
@@ -731,9 +729,9 @@ export default {
   display: flex;
   justify-content: flex-start;
   align-items: center;
-  width: 140px;
-  max-height: 338px;
-  height: 338px;
+  width: 100%;
+
+  height: 92%;
   background: #23272a;
   border: 1px solid #707070;
   border-radius: 5px;
@@ -746,7 +744,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 95%;
-  height: 13%;
+  height: 9%;
   background: #ffd924;
   border: 1px solid #707070;
   border-radius: 5px;
@@ -758,7 +756,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 95%;
-  height: 13%;
+  height: 9%;
   background: rgb(173, 7, 7);
   border: 1px solid #707070;
   border-radius: 5px;
@@ -771,7 +769,7 @@ export default {
   justify-content: space-between;
   align-items: center;
   width: 95%;
-  height: 13%;
+  height: 9%;
   background: #5f7e6a;
   border: 1px solid #707070;
   border-radius: 5px;
@@ -782,15 +780,15 @@ export default {
 }
 
 .icon-box {
-  width: 28%;
-  height: 95%;
+  width: 25%;
+  height: 100%;
   display: flex;
   justify-content: center;
   align-items: center;
 }
 .icon-box img {
-  width: 95%;
-  height: 99%;
+  width: 1.5rem;
+  height: 1.5rem;
 }
 .message-box {
   width: 90%;

diff --git a/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue b/launcher/src/components/UI/control-page/components/widgets/VolumeWidget.vue
@@ -0,0 +1,18 @@
+<template>
+  <div class="volume-Parent flex w-full h-full justify-center items-center">
+    <div class="volume-Ico w-1/3 h-full flex flex-col justify-center items-center">
+      <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>
+    </div>
+    <div class="volume-box w-2/3 h-full flex flex-col justify-center items-center p-1">
+      <div class="volume_services w-full h-2/3 flex rounded-md border border-gray-500"></div>
+      <div class="hdd-services w-full h-1/3 flex"></div>
+    </div>
+  </div>
+</template>
+
+<script setup></script>
+
+<style scoped></style>
diff --git a/launcher/src/components/UI/control-page/sections/AlertSection.vue b/launcher/src/components/UI/control-page/sections/AlertSection.vue
@@ -1,11 +1,9 @@
 <template>
-  <div class="w-full h-full col-start-7 col-end-10 grid-cols-5 grid-rows-12 items-center">
-    <AlertHeader />
-    <AlertBody />
+  <div class="w-full h-full col-start-7 col-end-10 row-start-2 row-span-full flex justify-center items-center pt-2 pb-2">
+    <ControlAlert />
   </div>
 </template>
 
 <script setup>
-import AlertBody from "../components/alert/AlertBody.vue";
-import AlertHeader from "../components/alert/AlertHeader.vue";
+import ControlAlert from "../components/alert/ControlAlert.vue";
 </script>
diff --git a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
@@ -1,9 +1,7 @@
 <template>
-  <div
-    class="w-full h-full col-start-1 col-end-7 row-start-2 row-span-full grid grid-cols-6 grid-rows-15 items-center bg-red-600 gap-1 p-1"
-  >
+  <div class="w-full h-full col-start-1 col-end-7 row-start-2 row-span-full grid grid-cols-6 grid-rows-15 items-center gap-1 p-1">
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-1 row-span-3"><InfoWidget /></WidgetCard>
-    <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3" />
+    <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3"><VolumeWidget /></WidgetCard>
     <WidgetCard class="cpu-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheCpu /></WidgetCard>
     <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheRam /></WidgetCard>
     <WidgetCard class="network-widget col-start-1 col-span-6 row-start-13 row-span-3"><TheNetwork /></WidgetCard>
@@ -16,4 +14,5 @@ import TheNetwork from "../components/widgets/TheNetwork.vue";
 import TheRam from "../components/widgets/TheRam.vue";
 import TheCpu from "../components/widgets/TheCpu.vue";
 import InfoWidget from "../components/widgets/InfoWidget.vue";
+import VolumeWidget from "../components/widgets/VolumeWidget.vue";
 </script>
diff --git a/launcher/src/components/UI/the-control/ControlScreen.vue b/launcher/src/components/UI/the-control/ControlScreen.vue
@@ -134,7 +134,7 @@ import LogsSection from "../node-page/sections/LogsSection.vue";
 import { useStateHandler } from "@/composables/services";
 import ControlDashboard from "./ControlDashboard.vue";
 import ControlPlugins from "./ControlPlugins.vue";
-import ControlAlert from "./ControlAlert.vue";
+import ControlAlert from "../control-page/components/alert/ControlAlert.vue";
 import { saveAs } from "file-saver";
 import ExpertWindow from "../node-page/sections/ExpertWindow.vue";
 import { useServices } from "@/store/services";