Commit 4874fbb5 authored by Janis Streib's avatar Janis Streib 🦉
Browse files

ADD: mockup for a dark mode

parent 8d4cea1f
Pipeline #118730 failed with stages
in 3 minutes and 16 seconds
......@@ -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",
......@@ -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",
......
......@@ -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';
......
.bg-devel {
background-color: #35383B;
border: 2px solid red;
}
\ No newline at end of file
}
......@@ -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;
}
......
<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']"/>
......
<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>
......
......@@ -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
)
......@@ -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))
......
......@@ -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>
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment