fix(theme): add black theme

clabroche · Feb 15, 2024 · bee4697 · bee4697
1 parent 9fbf646
commit bee4697
Show file tree

Hide file tree

Showing 19 changed files with 393 additions and 91 deletions.
diff --git a/fronts/app/src/App.vue b/fronts/app/src/App.vue
@@ -36,6 +36,8 @@ import NotifHistory from './components/NotifHistory.vue'
 import SidebarViewMode from './components/SidebarViewMode.vue'
 import EnvironmentsChooser from './components/EnvironmentsChooser.vue'
 import { useRouter } from 'vue-router';
+import Theme from './helpers/Theme'
+
 
 export default {
   components: {
@@ -46,6 +48,7 @@ export default {
     EnvironmentsChooser,
   },
   setup() {
+    Theme.load()
     const router = useRouter(); 
     const connected = ref(true)
     const redirect = async () => {
@@ -126,8 +129,9 @@ body {
   margin: 0;
   width: 100vw;
   height: 100vh;
-  background-color: #f2f4f7;
-  color: #4c4c4c;
+  background-color: var(--system-backgroundColor);
+  color: var(--system-color);
+  transition: 300ms;
   font-size: 0.9em;
   font-family: JOST, sans-serif;
 }
@@ -143,13 +147,11 @@ button {
   border:none;
   transition: 300ms;
   cursor: pointer;
-  box-sizing: border-box;
-  box-shadow:
-    -5px 5px 10px rgba(0,0,0,0.1),
-    5px -5px 10px rgba(0,0,0,0.2);
+  transition: 300ms;
   &:hover {
-    background-color: #194f91;
-    box-shadow: 1px 1px 1px 1px rgba(0,0,0,0.5);
+    $gradient: 50deg, #3e7b9e 0%, #053857 100%;
+    background: -webkit-linear-gradient($gradient);
+    background: linear-gradient($gradient);
   }
   &.bordered {
     border: 1px solid #074971;
@@ -193,8 +195,9 @@ button[disabled] {
 input {
   padding: 3px 5px;
   border-radius: 10px;
-  border: 1px solid #999;
+  border: 1px solid var(--system-border-borderColor);
   box-sizing: border-box;
+  background-color: var(--system-backgroundColor);
 }
 </style>
 

diff --git a/fronts/app/src/components/Modal.vue b/fronts/app/src/components/Modal.vue
@@ -106,7 +106,7 @@ export default {
 </script>
 <style scoped lang="scss">
 .modal-root {
-  color: #4A5361;
+  color: var(--system-accents-color);
   z-index: 1299;
   position: fixed;
   top: 0;
@@ -119,7 +119,7 @@ export default {
   align-items: center;
   transition: 300ms;
   #modal-content {
-    background: white;
+    background: var(--system-backgroundColor);
     height: auto;
     margin: auto;
     .close-cross {
@@ -176,10 +176,10 @@ export default {
 .button-box {
   display: flex;
   .notif-button {
-    color: #4a5361;
+    color: var(--system-accents-color);;
     font-size: 18px;
     padding: 12px 0px 12px 0px;
-    background-color: #eaebed;
+    background-color: var(--system-accents-backgroundColor);
     display: flex;
     justify-content: center;
     align-items: center;

diff --git a/fronts/app/src/components/Popover.vue b/fronts/app/src/components/Popover.vue
@@ -29,6 +29,7 @@ export default {
     appendTo: {default: 'parent'},
     disable: {default: false},
     fullWidth: {default: false},
+    showOnCreate: {default: false}
   },
   setup(props) {
     /** @type {import('vue').Ref<Element | import('tippy.js').MultipleTargets | null>} */
@@ -49,6 +50,7 @@ export default {
         hideOnClick: true,
         animation: 'shift-away',
         theme: 'light-border',
+        showOnCreate: props.showOnCreate,
       })
     })
     return {
@@ -63,8 +65,29 @@ export default {
 
 <style scoped lang="scss">
 .fullWidth {
-  &.popover-root, .trigger {
+
+  &.popover-root,
+  .trigger {
     width: 100%;
   }
 }
+</style>
+<style lang="scss">
+.tippy-content {
+  background-color: var(--system-sidebar-backgroundColor);
+  color: var(--system-color);
+}
+.tippy-box[data-theme~=light-border][data-placement^=right]>.tippy-arrow:before{
+  border-right-color: var(--system-sidebar-backgroundColor) !important;
+}
+
+.tippy-box[data-theme~=light-border][data-placement^=left]>.tippy-arrow:before{
+  border-left-color: var(--system-sidebar-backgroundColor) !important;
+}
+.tippy-box[data-theme~=light-border][data-placement^=top]>.tippy-arrow:before{
+  border-top-color: var(--system-sidebar-backgroundColor) !important;
+}
+.tippy-box[data-theme~=light-border][data-placement^=bottom]>.tippy-arrow:before{
+  border-bottom-color: var(--system-sidebar-backgroundColor) !important;
+}
 </style>
diff --git a/fronts/app/src/components/Section.vue b/fronts/app/src/components/Section.vue
@@ -78,12 +78,12 @@ $shadow: rgb(165, 177, 179);
   border-right: 0;
   display: flex;
   flex-direction: column;
-  border: 1px solid #dbdbdb;
+  border: 1px solid var(--system-border-borderColor);
   border-radius: 5px;
   position: relative;
   .background{
     border-radius: 5px;
-    background: white;
+    background: var(--system-sections-backgroundColor);
     position: absolute;
     width: 100%;
     height: 100%;
@@ -105,7 +105,7 @@ $shadow: rgb(165, 177, 179);
       left: calc(50%);
       transform: rotate(20deg);
       transform-origin: bottom left;
-      box-shadow: inset 0 10px 100px #f7f7f7;
+      box-shadow: inset 0 10px 100px var(--system-sections-innerShadow);
     }
     &::after {
       left: calc(50%);

diff --git a/fronts/app/src/components/SidebarViewMode.vue b/fronts/app/src/components/SidebarViewMode.vue
@@ -33,6 +33,30 @@
         :padding="14"
         strokeColor="#00f7ff"
         strokeColorBg="#2db7d0"/>
+      <Popover appendTo="parent" trigger="mouseenter" placement="right" :showOnCreate="false">
+        <template #trigger>
+          <sidebar-view-mode-item key="Themes" :button="{
+            text: '',
+            icon: 'fas fa-sun',
+            click: () => Theme.toggle()
+          }"/>
+        </template>
+        <template #content>
+          <div class="themes">
+            <div class="theme"
+              v-for="theme of Object.keys(Theme.themes).map(key => ({theme: Theme.themes[key], label: key})).filter(t => t.theme.public && t.theme.preview)"
+              @click="Theme.apply(theme.label)"
+            >
+              <div class="background" :style="theme.theme.preview.background">
+                <div class="foreground foreground-1" :style="theme.theme.preview.foreground1"></div>
+                <div class="foreground foreground-2" :style="theme.theme.preview.foreground2 || theme.theme.preview.foreground1"></div>
+                <div class="foreground foreground-3" :style="theme.theme.preview.foreground3 || theme.theme.preview.foreground1"></div>
+                <div class="foreground foreground-4" :style="theme.theme.preview.foreground4 || theme.theme.preview.foreground1"></div>
+              </div>
+            </div>
+          </div>
+        </template>
+      </Popover>
       <sidebar-view-mode-item v-for="button of buttonsBottom" :key="button.label" :button="button"/>
     </ul>
   </div>
@@ -47,11 +71,14 @@ import DoughtnutChart from './DoughtnutChart.vue'
 import axios from '../helpers/axios'
 import Socket from '../helpers/Socket';
 import { useRouter } from 'vue-router';
+import Theme from '../helpers/Theme'
+import Popover from './Popover.vue';
 
 export default {
   components: {
     SidebarViewModeItem: SidebarViewModeItemVue,
-    DoughtnutChart
+    DoughtnutChart,
+    Popover
   },
   props: {
     currentService: {default: null}
@@ -75,6 +102,7 @@ export default {
     })
 
     return {
+      Theme,
       buttons:computed(() => ([
         {
           text: 'Overview',
@@ -129,7 +157,7 @@ export default {
   justify-content: space-between;
   box-shadow: 0px 0px 4px 0px black;
   width: 50px;
-  background-color: white;
+  background-color: var(--system-sidebar-backgroundColor);
   height: 100%;
   flex-shrink: 0;
   z-index: 4;
@@ -163,5 +191,41 @@ export default {
 .system .title {
   justify-content: center;
 }
+.themes {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  .theme {
+    cursor: pointer;
+    .background {
+      width: 40px;
+      height: 40px;
+      border-radius: 40px;
+      border: 1px solid var(--system-border-borderColor);
+      position: relative;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      align-items: center;
+      .foreground {
+        position: absolute;
+        width: 100%;
+        height: 1px;
+      }
 
+      .foreground-1 {
+        transform: rotate(45deg);
+      }
+      .foreground-2 {
+        transform: rotate(90deg);
+      }
+      .foreground-3 {
+        transform: rotate(135deg);
+      }
+      .foreground-4 {
+        transform: rotate(180deg);
+      }
+    }
+  }
+}
 </style>
diff --git a/fronts/app/src/components/SidebarViewModeItem.vue b/fronts/app/src/components/SidebarViewModeItem.vue
@@ -37,7 +37,7 @@ const isActive = computed(() => {
   z-index: 2;
   
   &:hover {
-    background-color: #eee;
+    background-color: var(--system-secondary-sidebar-backgroundColor);
     i {
       opacity: 1;
     }
@@ -62,22 +62,17 @@ button {
   background: transparent;
   margin: 0 5px;
   font-size: 1em;
-  border: 1px solid #efefef;
-  color: #aaa;
-  border-color: transparent;
-  box-shadow: 2px 2px 5px rgba(0,0,0,0.2),
-    -2px -2px 5px rgba(255,255,255,0.2);
+  color: var(--system-color);
   &.active {
     background: transparent;
     border-radius: 5px 5px 0 0;
-    color: #777;
+    color: var(--system-color);
     margin-bottom: -1px;
     border-bottom: 3px solid #0076bc;
-    box-shadow: 2px 2px 7px rgba(0,0,0,0.2) inset,
-    -5px -5px 7px rgba(255,255,255,0.6) inset;
   }
   &:hover {
-    box-shadow: none;
+    background: var(--system-accents-backgroundColor) !important;
+    color: var(--system-accents-color) !important;
     transform: none;
   }
   i {

diff --git a/fronts/app/src/components/Tabs.vue b/fronts/app/src/components/Tabs.vue
@@ -154,14 +154,14 @@ defineExpose({
   flex-shrink: 0;
   width: max-content;
   gap: 5px;
-  background-color: white;
+  background-color: var(--system-backgroundColor);
   z-index: 1;
-  border: 1px solid #dbdbdb;
+  border: 1px solid var(--system-border-borderColor);
   button {
     position: relative;
     outline: none;
     margin: 0;
-    color: #777;
+    color: var(--system-color);
     transition: 200ms;
     border-bottom: 0;
     height: 40px;

diff --git a/fronts/app/src/components/sidebar.vue b/fronts/app/src/components/sidebar.vue
@@ -199,7 +199,7 @@ input {
     box-shadow: 0px 0px 4px 0px black;
     width: 250px;
     max-width: 250px;
-    background-color: white;
+    background-color: var(--system--secondary-sidebar-backgroundColor);
     height: 100%;
     flex-shrink: 0;
     z-index: 3;

diff --git a/fronts/app/src/helpers/CustomObservable.js b/fronts/app/src/helpers/CustomObservable.js
@@ -1,20 +1,27 @@
-
 function CustomObservable() {
   /** @type {GenericFunction[]} */
-  this.funcs = []
+  this.funcs = [];
 }
 /** @param {GenericFunction} fun */
 CustomObservable.prototype.subscribe = function (fun) {
-  this.funcs.push(fun)
-}
+  this.funcs.push(fun);
+  return {
+    unsubscribe: () => this.unsubscribe(fun),
+  };
+};
 
 /** @param {any[]} value */
 CustomObservable.prototype.next = function (...value) {
-  this.funcs.forEach(f => f(...value))
-}
+  this.funcs.forEach((f) => f(...value));
+};
+
+/** @param {GenericFunction} fun */
+CustomObservable.prototype.unsubscribe = function (fun) {
+  this.funcs = [...this.funcs.filter((f) => f !== fun)];
+};
 
-export default CustomObservable
+export default CustomObservable;
 
 /**
  * @typedef {(...args: any[]) => any} GenericFunction
- */
+ */