ADD: mockup for a dark mode

frontend/package-lock.json

@@ -18,6 +18,7 @@
         "axios": "^0.19.2",
         "bootstrap": "^4.5.3",
         "bootstrap-vue": "^2.19.0",
+        "bootswatch": "^4.5.3",
         "http-proxy-middleware": "^0.19.2",
         "i": "^0.3.6",
         "ipaddr.js": "^2.0.0",
@@ -3208,6 +3209,11 @@
         "vue-functional-data-merge": "^3.1.0"
       }
     },
+    "node_modules/bootswatch": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.5.3.tgz",
+      "integrity": "sha512-gaB3gBSAegmYbk97aVELKcSKVdPjWsSY4yCITkUt/SqbqjtMU/HtIUszb4O9vzdbrfuVXThc/qCXzjoJaAPgiQ=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -21093,6 +21099,11 @@
         "vue-functional-data-merge": "^3.1.0"
       }
     },
+    "bootswatch": {
+      "version": "4.5.3",
+      "resolved": "https://registry.npmjs.org/bootswatch/-/bootswatch-4.5.3.tgz",
+      "integrity": "sha512-gaB3gBSAegmYbk97aVELKcSKVdPjWsSY4yCITkUt/SqbqjtMU/HtIUszb4O9vzdbrfuVXThc/qCXzjoJaAPgiQ=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

frontend/package.json

@@ -18,6 +18,7 @@
     "axios": "^0.19.2",
     "bootstrap": "^4.5.3",
     "bootstrap-vue": "^2.19.0",
+    "bootswatch": "^4.5.3",
     "http-proxy-middleware": "^0.19.2",
     "i": "^0.3.6",
     "ipaddr.js": "^2.0.0",

frontend/src/App.vue

@@ -108,8 +108,10 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../node_modules/bootstrap/scss/bootstrap.scss';
+//@import '../node_modules/bootstrap/scss/bootstrap.scss';
 @import '../node_modules/bootstrap-vue/dist/bootstrap-vue.css';
+//@import '../node_modules/bootswatch/dist/flatly/bootstrap.css';
+@import '../node_modules/bootswatch/dist/darkly/bootstrap.css';
 @import 'assets/css/net-suite.css';
 @import 'assets/css/net-suite-devel.css';
 @import 'assets/css/net-suite-test.css';

frontend/src/assets/css/net-suite-devel.css

 .bg-devel {
-    background-color:  #35383B;
-    border: 2px solid red;
-}
\ No newline at end of file
+}

frontend/src/assets/css/net-suite.css

@@ -197,7 +197,6 @@ table.collapse.in {
 .net-filter {
     position: sticky;
     top: 110px;
-    background: rgba(255, 255, 255, 0.9);
     padding: 20px 0;
     z-index: 10;
 }
@@ -205,7 +204,6 @@ table.collapse.in {
 .net-filter-direct {
     top: 40px;
     position: sticky;
-    background: rgba(255, 255, 255, 0.9);
     padding: 20px 0;
     z-index: 10;
 }

frontend/src/components/FilterInput.vue

 <template>
   <div class="net-filter-direct d-print-none">
-    <b-input-group class="shadow">
+    <b-input-group>
       <b-input-group-prepend>
         <b-input-group-text>
           <font-awesome-icon :icon="['fas', 'filter']"/>

frontend/src/components/Navbar.vue

 <template>
   <b-navbar toggleable="lg" fixed="top" :type="$sysinfo.host_oper_mode.is_prod?'light':'dark'"
-            :variant="$sysinfo.host_oper_mode.is_prod?'light':'dark'"
+            :variant="'dark'"
             :class="`bg-${$sysinfo.host_oper_mode.mode}` + ' shadow'">
     <!-- Brand and toggle get grouped for better mobile display -->
     <b-navbar-brand to="/">
@@ -82,6 +82,9 @@
           <font-awesome-icon :icon="['fas', 'sign-in-alt']"/>
           <span> Anmelden</span>
         </b-nav-item>
+        <b-nav-item @click="$store.commit('toggleDarkMode')" :active="!$store.state.dark_mode">
+          <font-awesome-icon icon="adjust"></font-awesome-icon>
+        </b-nav-item>
       </b-navbar-nav>
     </b-collapse><!-- /.navbar-collapse -->
   </b-navbar>

frontend/src/icons.js

@@ -48,7 +48,8 @@ import {
   faNetworkWired,
   faHistory,
   faEthernet,
-  faPooStorm
+  faPooStorm,
+  faAdjust
 } from '@fortawesome/free-solid-svg-icons'
 
 import {
@@ -117,5 +118,6 @@ library.add(
   faNetworkWired,
   faHistory,
   faEthernet,
-  faPooStorm
+  faPooStorm,
+  faAdjust
 )

frontend/src/main.js

@@ -66,6 +66,7 @@ async function init() {
 
   const store = new Vuex.Store({
     state: {
+      dark_mode: JSON.parse(window.localStorage.getItem('dark_mode')) || false,
       user: session_info ? session_info.user : null,
       token: session_info ? session_info.token : null,
       ta_list: JSON.parse(window.localStorage.getItem('ta_list')),
@@ -80,6 +81,10 @@ async function init() {
       db_editor_cache: JSON.parse(window.localStorage.getItem('db_editor_cache')) || {}
     },
     mutations: {
+      toggleDarkMode(state) {
+        state.dark_mode = !state.dark_mode
+        window.localStorage.setItem('dark_mode', JSON.stringify(state.dark_mode))
+      },
       emptyState(state) {
         state.ta_list = null
         window.localStorage.setItem('ta_list', JSON.stringify(state.ta_list))

frontend/src/views/dnsvs/BCDRecords.vue

@@ -6,11 +6,11 @@
           {{ range.name }} <small class="text-muted">Broadcastdomain</small>
         </h1>
         <div style="margin-bottom: 1.5rem">
-          <b-button variant="outline-primary" @click="editBCD">
+          <b-button variant="primary" @click="editBCD">
             BCD Bearbeiten
             <font-awesome-icon :icon="['far', 'edit']"></font-awesome-icon>
           </b-button>
-          <b-button style="margin-left: 15px" variant="outline-secondary" @click="$bvModal.show('evlog_bcd')">
+          <b-button style="margin-left: 15px" variant="secondary" @click="$bvModal.show('evlog_bcd')">
             Eventlog
             <font-awesome-icon icon="history"></font-awesome-icon>
           </b-button>