summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorUdo Walter2020-01-19 22:18:15 +0100
committerUdo Walter2020-01-19 22:18:15 +0100
commit7c273a8bcab2da87acb3431448a53e91e360d5eb (patch)
treea83294c281ae3f33ee2a59dafe4d32b23e43fe71
parent[configloader] remove port from dynamic menu (diff)
downloadbas-7c273a8bcab2da87acb3431448a53e91e360d5eb.tar.gz
bas-7c273a8bcab2da87acb3431448a53e91e360d5eb.tar.xz
bas-7c273a8bcab2da87acb3431448a53e91e360d5eb.zip
[webapp] upgrade/migration from vuetify 1.5 to 2.X
still TODO: switch from old grid system (v-layout/v-flex) to the new one (v-row/v-col)
-rw-r--r--webapp/package-lock.json23
-rw-r--r--webapp/package.json6
-rw-r--r--webapp/src/assets/styles.css26
-rw-r--r--webapp/src/components/AccountModule.vue18
-rw-r--r--webapp/src/components/BackendModule.vue19
-rw-r--r--webapp/src/components/BackendModuleEdit.vue6
-rw-r--r--webapp/src/components/BackendModuleEditDynamicFields.vue2
-rw-r--r--webapp/src/components/BackendModuleSync.vue28
-rw-r--r--webapp/src/components/ComponentSearchTable.vue8
-rw-r--r--webapp/src/components/ConfiguratorModule.vue25
-rw-r--r--webapp/src/components/ConfiguratorModuleAssign.vue6
-rw-r--r--webapp/src/components/ConfiguratorModuleConfig.vue50
-rw-r--r--webapp/src/components/ConfiguratorModuleDelete.vue2
-rw-r--r--webapp/src/components/ConfiguratorModuleEntry.vue2
-rw-r--r--webapp/src/components/DashboardPage.vue96
-rw-r--r--webapp/src/components/DataTable.vue166
-rw-r--r--webapp/src/components/DataTableSearch.vue7
-rw-r--r--webapp/src/components/EventModule.vue2
-rw-r--r--webapp/src/components/EventModuleDelete.vue2
-rw-r--r--webapp/src/components/EventModuleEdit.vue14
-rw-r--r--webapp/src/components/EventModuleEventList.vue8
-rw-r--r--webapp/src/components/GroupModule.vue8
-rw-r--r--webapp/src/components/GroupModuleClientList.vue12
-rw-r--r--webapp/src/components/GroupModuleClientView.vue8
-rw-r--r--webapp/src/components/GroupModuleDialog.vue7
-rw-r--r--webapp/src/components/GroupModuleGroupInfo.vue10
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue16
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue46
-rw-r--r--webapp/src/components/HomeModule.vue2
-rw-r--r--webapp/src/components/IprangeModule.vue17
-rw-r--r--webapp/src/components/IpxeBuilderModule.vue4
-rw-r--r--webapp/src/components/IpxeBuilderModuleConfig.vue78
-rw-r--r--webapp/src/components/LogModule.vue10
-rw-r--r--webapp/src/components/LogModuleEntry.vue6
-rw-r--r--webapp/src/components/NotificationsAlerts.vue16
-rw-r--r--webapp/src/components/NotificationsSnackbars.vue3
-rw-r--r--webapp/src/components/PermissionModule.vue2
-rw-r--r--webapp/src/components/PermissionModuleDelete.vue2
-rw-r--r--webapp/src/components/PermissionModuleEdit.vue4
-rw-r--r--webapp/src/components/PermissionModuleGrantRevoke.vue2
-rw-r--r--webapp/src/components/PermissionModuleRoleList.vue8
-rw-r--r--webapp/src/components/PermissionModuleUserList.vue10
-rw-r--r--webapp/src/components/RegistrationModule.vue36
-rw-r--r--webapp/src/components/RegistrationModuleDelete.vue2
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue4
-rw-r--r--webapp/src/components/SelectBox.vue65
-rw-r--r--webapp/src/components/SettingsModule.vue2
-rw-r--r--webapp/src/components/StartPage.vue31
-rw-r--r--webapp/src/components/StartPageSetup.vue2
-rw-r--r--webapp/src/components/UserModule.vue10
-rw-r--r--webapp/src/components/UserModuleDelete.vue2
-rw-r--r--webapp/src/components/UserModuleEdit.vue2
-rw-r--r--webapp/src/main.js16
53 files changed, 548 insertions, 411 deletions
diff --git a/webapp/package-lock.json b/webapp/package-lock.json
index 96a917c..9fc511e 100644
--- a/webapp/package-lock.json
+++ b/webapp/package-lock.json
@@ -1,5 +1,5 @@
{
- "name": "webappnew",
+ "name": "webapp",
"version": "0.1.0",
"lockfileVersion": 1,
"requires": true,
@@ -1205,6 +1205,12 @@
"integrity": "sha512-M2280E9PMxetu6mOdtyh1d6Dif7LwH4gvxD2dgsu7HOyzR26AUNok8DxZ1Y5YAexJvPfbBXC75Llui2myO05Hg==",
"dev": true
},
+ "@mdi/font": {
+ "version": "4.8.95",
+ "resolved": "https://registry.npmjs.org/@mdi/font/-/font-4.8.95.tgz",
+ "integrity": "sha512-mfEjd6kkuheZ15CBU7g/q+De9+dah/SEgVH0uZsgCJTSYa+CkXIen35aNyHoixgcEfPV4Or0NLJvyYM5CXUnbQ==",
+ "dev": true
+ },
"@mrmlnc/readdir-enhanced": {
"version": "2.2.1",
"resolved": "https://registry.npmjs.org/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz",
@@ -10048,6 +10054,15 @@
"integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
"dev": true
},
+ "sass": {
+ "version": "1.25.0",
+ "resolved": "https://registry.npmjs.org/sass/-/sass-1.25.0.tgz",
+ "integrity": "sha512-uQMjye0Y70SEDGO56n0j91tauqS9E1BmpKHtiYNQScXDHeaE9uHwNEqQNFf4Bes/3DHMNinB6u79JsG10XWNyw==",
+ "dev": true,
+ "requires": {
+ "chokidar": ">=2.0.0 <4.0.0"
+ }
+ },
"sax": {
"version": "1.2.4",
"resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
@@ -11749,9 +11764,9 @@
}
},
"vuetify": {
- "version": "1.5.11",
- "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-1.5.11.tgz",
- "integrity": "sha512-S4f0wXEbQNHnP4IUtSSIRmzU/fjyPtTN5fC80JlHdTcF78VLT1/xsTqXgNtSW5712UJtrLPpF6b0LfOTJrCCBg=="
+ "version": "2.2.4",
+ "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-2.2.4.tgz",
+ "integrity": "sha512-jhSdCeatWgHrY4Bb2FTi1sFfGDrVHLmkvI7pkG9FEF9TmZ+Qq7Ts85XAft9ucwU8ybB5nDmN6s+oeHJgvL+4tA=="
},
"vuex": {
"version": "3.1.0",
diff --git a/webapp/package.json b/webapp/package.json
index 4750d1a..05da26d 100644
--- a/webapp/package.json
+++ b/webapp/package.json
@@ -1,5 +1,5 @@
{
- "name": "webappnew",
+ "name": "webapp",
"version": "0.1.0",
"private": true,
"scripts": {
@@ -17,11 +17,12 @@
"vue-router": "^3.0.3",
"vue-virtual-scroller": "^1.0.0-rc.2",
"vuedraggable": "^2.20.0",
- "vuetify": "^1.5.11",
+ "vuetify": "^2.2.4",
"vuex": "^3.1.0"
},
"devDependencies": {
"@kazupon/vue-i18n-loader": "^0.3.0",
+ "@mdi/font": "^4.8.95",
"@vue/cli-plugin-babel": "^3.5.5",
"@vue/cli-plugin-eslint": "^3.5.1",
"@vue/cli-service": "^3.5.3",
@@ -29,6 +30,7 @@
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
+ "sass": "^1.25.0",
"vue-template-compiler": "^2.6.10"
},
"postcss": {
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index 2aaeddc..a5b1e28 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -54,7 +54,7 @@ html {
z-index: 3;
}
-.tabbar-card .v-tabs .v-tabs__item {
+.tabbar-card .v-tabs .v-tab {
text-transform: none !important;
}
@@ -182,3 +182,27 @@ html {
.tutorial-enabled .tutorial-element.label-right::before {
right: -14px;
}
+
+
+/* Vuetify overwrites */
+
+.container {
+ padding: 24px;
+}
+
+.v-tab {
+ min-width: auto;
+}
+
+.v-tabs-items {
+ background-color: transparent !important;
+}
+
+.v-dialog > .v-card > .v-card__text {
+ padding: 16px 24px;
+}
+
+.theme--dark .v-tooltip__content {
+ background: white;
+ color: black;
+} \ No newline at end of file
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index a39a414..73f85fb 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -66,7 +66,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ <v-tabs :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor"
v-model="tab"
grow
hide-slider
@@ -122,15 +122,15 @@
</v-layout>
</v-flex>
- <v-flex lg3 md6 sm6 xs12 order-lg7 order-md3 order-sm3 order-xs1 class="text-xs-right">
+ <v-flex lg3 md6 sm6 xs12 order-lg7 order-md3 order-sm3 order-xs1 class="text-right">
<div class="info-input">
<div v-if="!editInfoMode">
- <v-btn color="primary" flat @click="editInfo" class="info-buttons tutorial-element label-left" style="--label-number: '1'">
+ <v-btn color="primary" text @click="editInfo" class="info-buttons tutorial-element label-left" style="--label-number: '1'">
<v-icon left>create</v-icon>{{ $t('edit') }}
</v-btn>
</div>
<div v-else>
- <v-btn color="primary" flat @click="cancelEditInfo" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" text @click="cancelEditInfo" class="info-buttons">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="submitInfo" class="info-buttons">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
@@ -197,17 +197,17 @@
</v-layout>
</v-flex>
- <v-flex v-if="!editPasswordMode" lg8 sm6 xs12 order-lg3 order-sm2 order-xs1 class="text-xs-right">
+ <v-flex v-if="!editPasswordMode" lg8 sm6 xs12 order-lg3 order-sm2 order-xs1 class="text-right">
<div class="info-input">
- <v-btn color="primary" flat @click="editPassword" class="info-buttons tutorial-element label-left" style="--label-number: '2'">
+ <v-btn color="primary" text @click="editPassword" class="info-buttons tutorial-element label-left" style="--label-number: '2'">
<v-icon left>create</v-icon>{{ $t('edit') }}
</v-btn>
</div>
</v-flex>
- <v-flex v-else lg4 sm12 xs12 order-lg3 order-sm1 order-xs1 class="text-xs-right">
+ <v-flex v-else lg4 sm12 xs12 order-lg3 order-sm1 order-xs1 class="text-right">
<div class="info-input">
- <v-btn color="primary" flat @click="cancelEditPassword" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" text @click="cancelEditPassword" class="info-buttons">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="submitPassword" class="info-buttons">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
@@ -247,7 +247,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="dialog = false">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="dialog = false">{{ $t('cancel') }}</v-btn>
<v-btn color="error" @click="deleteAccount">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index 6945d82..2670230 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -40,7 +40,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ <v-tabs :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor"
v-model="tab"
grow
hide-slider
@@ -59,11 +59,12 @@
<div slot="action" slot-scope="row" style="text-align: right">
<v-tooltip top open-delay="800">
<template v-slot:activator="{ on }">
- <v-btn flat icon :loading="row.item.loading"
+ <v-btn text icon :loading="row.item.loading"
:disabled="row.item.loading"
:color="row.item.connection"
@click.stop="checkConnection(row.item)"
v-on="on"
+ class="mx-2"
><v-icon>cached</v-icon></v-btn>
</template>
<span>{{ $t('checkConnectionTooltip') }}</span>
@@ -71,14 +72,14 @@
<v-tooltip top open-delay="800">
<template v-slot:activator="{ on }">
- <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editSync', row.item.id)" v-on="on"><v-icon>settings_ethernet</v-icon></v-btn>
+ <v-btn text icon color="primary" @click.stop="$store.commit('backends/editSync', row.item.id)" v-on="on" class="mx-2"><v-icon>settings_ethernet</v-icon></v-btn>
</template>
<span>{{ $t('editSyncTooltip') }}</span>
</v-tooltip>
<v-tooltip top open-delay="800">
<template v-slot:activator="{ on }">
- <v-btn flat icon color="primary" @click.stop="$store.commit('backends/editBackend', row.item.id)" v-on="on"><v-icon>edit</v-icon></v-btn>
+ <v-btn text icon color="primary" @click.stop="$store.commit('backends/editBackend', row.item.id)" v-on="on" class="mx-2"><v-icon>edit</v-icon></v-btn>
</template>
<span>{{ $t('editTooltip') }}</span>
</v-tooltip>
@@ -86,15 +87,15 @@
</data-table>
</v-card>
- <div class="text-xs-right">
+ <div class="text-right">
- <v-btn color="primary" flat @click="checkConnections(selectedBackends)" :disabled="selectedBackends.length === 0">
+ <v-btn color="primary" text @click="checkConnections(selectedBackends)" :disabled="selectedBackends.length === 0" class="ma-2">
<v-icon left>cached</v-icon>{{ $tc('checkConnection', selectedBackends.length, [selectedBackends.length]) }}
</v-btn>
- <v-btn color="error" flat @click="$store.commit('backends/setDialog', true)" :disabled="selectedBackends.length === 0">
+ <v-btn color="error" text @click="$store.commit('backends/setDialog', true)" :disabled="selectedBackends.length === 0" class="ma-2">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('removeBackend', selectedBackends.length, [selectedBackends.length]) }}
</v-btn>
- <v-btn color="success" flat @click="$store.commit('backends/editBackend', 0)">
+ <v-btn color="success" text @click="$store.commit('backends/editBackend', 0)" class="ma-2">
<v-icon left>add_circle_outline</v-icon>{{ $t('addBackendBtn') }}
</v-btn>
</div>
@@ -124,7 +125,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="$store.commit('backends/setDialog', false)">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="$store.commit('backends/setDialog', false)">{{ $t('cancel') }}</v-btn>
<v-btn color="error" @click="$store.commit('backends/setDialog', false); deleteSelectedBackends()">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/BackendModuleEdit.vue b/webapp/src/components/BackendModuleEdit.vue
index c5c1c31..0b235da 100644
--- a/webapp/src/components/BackendModuleEdit.vue
+++ b/webapp/src/components/BackendModuleEdit.vue
@@ -41,7 +41,7 @@
>
<!-- dialog needs scrollable attribute-->
<v-card>
- <v-card-title style="padding: 0px">
+ <v-card-title style="padding: 0px" class="body-2">
<v-stepper v-model="step" horizontal style="width: 100%; background: transparent;" class="elevation-3">
<v-stepper-header>
<v-stepper-step
@@ -116,8 +116,8 @@
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
- <v-flex xl10 offset-xl2 lg12 text-xs-right>
- <v-btn flat @click.native="$store.commit('backends/setEdit', false)">{{ $t('cancel') }}</v-btn>
+ <v-flex xl10 offset-xl2 lg12 text-right>
+ <v-btn text @click.native="$store.commit('backends/setEdit', false)">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
<v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
<v-btn type="submit" @click="submit" v-show="step == 3" class="primary" raised>{{ backendId ? $t('save') : $t('create') }}</v-btn>
diff --git a/webapp/src/components/BackendModuleEditDynamicFields.vue b/webapp/src/components/BackendModuleEditDynamicFields.vue
index 6d17357..b8e96b0 100644
--- a/webapp/src/components/BackendModuleEditDynamicFields.vue
+++ b/webapp/src/components/BackendModuleEditDynamicFields.vue
@@ -32,7 +32,7 @@
v-model="element.value"
:prepend-icon="element.icon"
></v-text-field>
- <v-btn @click="setPassword(element)" flat icon><v-icon color="primary">edit</v-icon></v-btn>
+ <v-btn @click="setPassword(element)" text icon class="ma-2"><v-icon color="primary">edit</v-icon></v-btn>
</v-layout>
</div>
diff --git a/webapp/src/components/BackendModuleSync.vue b/webapp/src/components/BackendModuleSync.vue
index 8c385b9..7ac76ae 100644
--- a/webapp/src/components/BackendModuleSync.vue
+++ b/webapp/src/components/BackendModuleSync.vue
@@ -46,13 +46,13 @@
prepend-icon="device_hub"
>
<template slot="no-data">
- <v-list-tile>
- <v-list-tile-content>
- <v-list-tile-title>
+ <v-list-item>
+ <v-list-item-content>
+ <v-list-item-title>
<p v-html="$t('noResultsCombobox', { search: searchGroups })"></p>
- </v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
+ </v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
</template>
</v-combobox>
<v-autocomplete v-else
@@ -83,13 +83,13 @@
prepend-icon="computer"
>
<template slot="no-data">
- <v-list-tile>
- <v-list-tile-content>
- <v-list-tile-title>
+ <v-list-item>
+ <v-list-item-content>
+ <v-list-item-title>
No results matching "<strong>{{ searchClients }}</strong>". Press <kbd>enter</kbd> to create a new one
- </v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
+ </v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
</template>
</v-combobox>
<v-autocomplete v-else
@@ -108,8 +108,8 @@
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
- <v-flex xl10 offset-xl2 lg12 text-xs-right>
- <v-btn flat @click.native="$store.commit('backends/setSync', false)">{{ $t('cancel') }}</v-btn>
+ <v-flex xl10 offset-xl2 lg12 text-right>
+ <v-btn text @click.native="$store.commit('backends/setSync', false)">{{ $t('cancel') }}</v-btn>
<v-btn @click.native="save" class="primary" raised>{{ $t('save') }}</v-btn>
</v-flex>
</v-card-actions>
diff --git a/webapp/src/components/ComponentSearchTable.vue b/webapp/src/components/ComponentSearchTable.vue
index e9101dc..35046d7 100644
--- a/webapp/src/components/ComponentSearchTable.vue
+++ b/webapp/src/components/ComponentSearchTable.vue
@@ -20,7 +20,7 @@
<template>
<div>
<v-layout v-if="actionsNeeded" wrap align-center class="actions-container">
- <v-flex md3 sm5 xs12 order-md1 order-sm1 order-xs1 class="text-xs-left">
+ <v-flex md3 sm5 xs12 order-md1 order-sm1 order-xs1 class="text-left">
<v-text-field
class="search-field"
:placeholder="$t('search')"
@@ -30,7 +30,7 @@
></v-text-field>
</v-flex>
<v-flex md4 sm12 xs12 offset-md1 offset-sm0 offset-xs0 order-md2 order-sm3 order-xs3
- class="text-md-center text-xs-right caption font-weight-thin">
+ class="text-md-center text-right caption font-weight-thin">
{{ $t('rowsPerPageText') }}
<v-select
class="rows-per-page-select body-1"
@@ -45,7 +45,7 @@
></v-select>
</v-flex>
<v-flex md4 sm6 xs12 offset-md0 offset-sm1 offset-xs0 order-md3 order-sm2 order-xs2
- class="text-xs-right caption font-weight-thin">
+ class="text-right caption font-weight-thin">
<span class="page-text">{{
pagination.totalItems > 0 ? $t('pageText', [
(pagination.page - 1) * pagination.rowsPerPage + 1,
@@ -74,7 +74,7 @@
@click.native.capture.passive="setShiftState"
>
<template v-if="$scopedSlots.items" slot="items" slot-scope="props">
- <slot name="items" :data="props" :color="props.selected && { backgroundColor: $vuetify.theme.primary + '11' }" ></slot>
+ <slot name="items" :data="props" :color="props.selected && { backgroundColor: $vuetify.theme.currentTheme.primary + '11' }" ></slot>
</template>
</v-data-table>
</div>
diff --git a/webapp/src/components/ConfiguratorModule.vue b/webapp/src/components/ConfiguratorModule.vue
index a08eb47..0d625e9 100644
--- a/webapp/src/components/ConfiguratorModule.vue
+++ b/webapp/src/components/ConfiguratorModule.vue
@@ -34,7 +34,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">list</v-icon>{{ $t('configs') }}</v-tab>
<v-tab><v-icon class="tabbar-tabicon">code</v-icon>{{ $t('entries') }}</v-tab>
</v-tabs>
@@ -47,27 +47,29 @@
<div slot="actions" slot-scope="row" style="display: flex; justify-content: flex-end; align-items: center">
<v-tooltip top v-if="row.item.isDefault">
<template #activator="{ on }">
- <v-icon v-on="on" color="success" style="margin-right: 14px">flag</v-icon>
+ <v-icon v-on="on" color="success" style="width: 36px">flag</v-icon>
</template>
<span>{{ $t('defaultConfig') }}</span>
</v-tooltip>
<v-btn v-else icon @click.stop="setAsDefault(row.item.id)">
<v-icon style="opacity: 0.2">outlined_flag</v-icon>
</v-btn>
- <v-btn flat small @click.stop="assignConfig(row.item)">
+ <v-btn text small @click.stop="assignConfig(row.item)" class="mx-2">
<span class="mr-1">{{ row.item.groupCount }}</span><v-icon small>category</v-icon>
<span class="mx-1">/</span>
<span class="mr-1">{{ row.item.clientCount }}</span><v-icon small>computer</v-icon>
</v-btn>
- <v-btn flat icon @click.stop="editConfig(row.item)"><v-icon color="primary">edit</v-icon></v-btn>
+ <v-btn text icon @click.stop="editConfig(row.item)"><v-icon color="primary">edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="deleteSelectedConfigs" :disabled="selectedConfigs.length === 0">
+ <div class="text-right">
+ <v-btn text color="error" @click="deleteSelectedConfigs" :disabled="selectedConfigs.length === 0" class="ma-2">
<v-icon left>delete</v-icon>{{ $tc('deleteConfigs', selectedConfigs.length, [selectedConfigs.length]) }}
</v-btn>
- <v-btn flat color="success" @click="createConfig"><v-icon left>create</v-icon>{{ $t('createConfig') }}</v-btn>
+ <v-btn text color="success" @click="createConfig" class="ma-2">
+ <v-icon left>create</v-icon>{{ $t('createConfig') }}
+ </v-btn>
</div>
</v-tab-item>
<v-tab-item :transition="false" :reverse-transition="false">
@@ -79,11 +81,13 @@
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="deleteSelectedEntries" :disabled="selectedEntries.length === 0">
+ <div class="text-right">
+ <v-btn text color="error" @click="deleteSelectedEntries" :disabled="selectedEntries.length === 0" class="ma-2">
<v-icon left>delete</v-icon>{{ $tc('deleteEntries', selectedEntries.length, [selectedEntries.length]) }}
</v-btn>
- <v-btn flat color="success" @click="createEntry"><v-icon left>create</v-icon>{{ $t('createEntry') }}</v-btn>
+ <v-btn text color="success" @click="createEntry" class="ma-2">
+ <v-icon left>create</v-icon>{{ $t('createEntry') }}
+ </v-btn>
</div>
</v-tab-item>
</v-tabs-items>
@@ -96,7 +100,6 @@
scrollable
:persistent="dialog.type !== 'delete'"
:fullscreen="$vuetify.breakpoint.smAndDown"
- lazy
>
<configurator-module-delete v-if="dialog.type === 'delete'" />
<configurator-module-config v-else-if="dialog.type === 'config'"/>
diff --git a/webapp/src/components/ConfiguratorModuleAssign.vue b/webapp/src/components/ConfiguratorModuleAssign.vue
index 5a0d654..c592267 100644
--- a/webapp/src/components/ConfiguratorModuleAssign.vue
+++ b/webapp/src/components/ConfiguratorModuleAssign.vue
@@ -30,7 +30,7 @@
<v-card-title class="dialog-title elevation-3">
<div class="dialog-title-text">
<div class="headline non-selectable">{{ $t('title') }}</div>
- <div class="subheading text--secondary pa-2">{{ $t('config') + ': ' + dialog.info.name }}</div>
+ <div class="subtitle-1 text--secondary pa-2">{{ $t('config') + ': ' + dialog.info.name }}</div>
</div>
<v-tabs v-model="tabs" grow slider-color="primary">
<v-tab><v-icon class="tabbar-tabicon">category</v-icon>{{ selectedGroups.length + ' ' + $t('groups') }}</v-tab>
@@ -50,7 +50,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="saveAssignment">{{ $t('assign') }}</v-btn>
</v-card-actions>
</v-card>
@@ -132,7 +132,7 @@ export default {
flex-direction: column;
align-items: stretch;
margin: 0;
- padding: 0;
+ padding: 0 !important;
}
.dialog-title >>> .v-tabs .v-tabs__item {
diff --git a/webapp/src/components/ConfiguratorModuleConfig.vue b/webapp/src/components/ConfiguratorModuleConfig.vue
index 654f493..fdb9047 100644
--- a/webapp/src/components/ConfiguratorModuleConfig.vue
+++ b/webapp/src/components/ConfiguratorModuleConfig.vue
@@ -45,12 +45,12 @@
<v-flex>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
</v-flex>
- <v-flex class="text-xs-center">
+ <v-flex class="text-center">
<div v-if="!expertMode" style="display: inline-block; max-width: 180px">
<v-text-field prepend-icon="timer" :label="$t('timeout')" color="primary" v-model="timeout" mask="######" suffix="ms"></v-text-field>
</div>
</v-flex>
- <v-flex class="text-xs-center">
+ <v-flex class="text-center">
<div style="display: inline-block"><v-switch v-model="expertMode" color="primary" :label="$t('expertMode')"></v-switch></div>
</v-flex>
</v-layout>
@@ -59,33 +59,37 @@
<div class="body-1 script-heading"><v-icon>code</v-icon><span>{{ $t('script') }}</span></div>
<codemirror class="script-editor" ref="editor" v-model="script"></codemirror>
</div>
- <div v-else class="text-xs-right">
+ <div v-else class="text-right">
<v-subheader>{{ $t('entries') }}</v-subheader>
<v-list>
- <draggable v-if="items.length" v-model="items" :options="{ handle:'.handle' }">
- <v-list-tile v-for="item in items" :key="item.entry.id" @click.stop>
- <v-list-tile-action class="handle">
+ <draggable v-if="items.length" v-model="items" handle=".handle">
+ <v-list-item v-for="item in items" :key="item.entry.id" @click.stop :ripple="false">
+ <v-list-item-action class="handle">
<v-icon>drag_handle</v-icon>
- </v-list-tile-action>
- <v-list-tile-action>
+ </v-list-item-action>
+ <v-list-item-action>
<v-tooltip top open-delay="800">
- <v-radio-group slot="activator" v-model="defaultEntry">
- <v-radio v-if="item.entry.id" color="primary" :value="item.entry.id"></v-radio>
- </v-radio-group>
+ <template #activator="{ on }">
+ <v-radio-group v-on="on" v-model="defaultEntry">
+ <v-radio v-if="item.entry.id" color="primary" :value="item.entry.id"></v-radio>
+ </v-radio-group>
+ </template>
<span>{{ $t('defaultEntry') }}</span></v-tooltip>
- </v-list-tile-action>
- <v-list-tile-content class="item-content">
- <v-select return-object class="entry-input" item-text="name" menu-props="offsetY" :label="$t('entry')" color="primary" v-model="item.entry"
- :items="item.entry.id ? [item.entry, ...availableEntries] : availableEntries" hide-details single-line></v-select>
- <v-text-field v-if="item.entry.id" class="custom-name-input" :label="$t('customName')" color="primary" v-model="item.customName" hide-details single-line></v-text-field>
- <v-text-field v-if="item.entry.id" class="keybind-input" prepend-icon="keyboard" color="primary" v-model="item.keyBind" maxlength="1" hide-details single-line></v-text-field>
- </v-list-tile-content>
- <v-list-tile-action>
+ </v-list-item-action>
+ <v-list-item-content class="item-content">
+ <div style="display: flex">
+ <v-select return-object class="entry-input" item-text="name" menu-props="offsetY" :label="$t('entry')" color="primary" v-model="item.entry"
+ :items="item.entry.id ? [item.entry, ...availableEntries] : availableEntries" hide-details single-line></v-select>
+ <v-text-field v-if="item.entry.id" class="custom-name-input" :label="$t('customName')" color="primary" v-model="item.customName" hide-details single-line></v-text-field>
+ <v-text-field v-if="item.entry.id" class="keybind-input" prepend-icon="keyboard" color="primary" v-model="item.keyBind" maxlength="1" hide-details single-line></v-text-field>
+ </div>
+ </v-list-item-content>
+ <v-list-item-action>
<v-btn @click="removeItem(item)" icon><v-icon>clear</v-icon></v-btn>
- </v-list-tile-action>
- </v-list-tile>
+ </v-list-item-action>
+ </v-list-item>
</draggable>
- <div v-else class="text-xs-center">{{ $t('noEntries') }}</div>
+ <div v-else class="text-center">{{ $t('noEntries') }}</div>
</v-list>
<v-btn @click="addItem" color="success" fab small><v-icon dark>add</v-icon></v-btn>
</div>
@@ -93,7 +97,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveConfig">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/ConfiguratorModuleDelete.vue b/webapp/src/components/ConfiguratorModuleDelete.vue
index 2703e88..036e3cc 100644
--- a/webapp/src/components/ConfiguratorModuleDelete.vue
+++ b/webapp/src/components/ConfiguratorModuleDelete.vue
@@ -20,7 +20,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn color="error" @click="deleteItems">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/ConfiguratorModuleEntry.vue b/webapp/src/components/ConfiguratorModuleEntry.vue
index 6a284ca..ab833c1 100644
--- a/webapp/src/components/ConfiguratorModuleEntry.vue
+++ b/webapp/src/components/ConfiguratorModuleEntry.vue
@@ -28,7 +28,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveEntry">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/DashboardPage.vue b/webapp/src/components/DashboardPage.vue
index 278340c..c32e87d 100644
--- a/webapp/src/components/DashboardPage.vue
+++ b/webapp/src/components/DashboardPage.vue
@@ -16,7 +16,7 @@
</i18n>
<template>
- <v-app :dark="settings.dark" :class="{ 'no-animation': settings.noAnimations }" class="">
+ <v-app :class="{ 'no-animation': settings.noAnimations }" class="">
<v-navigation-drawer
class="drawer non-selectable"
@@ -31,70 +31,86 @@
<div class="tutorial-element label-bottom tutorial-border" style="--label-number: '1'">
<div class="drawer-header grey darken-4 hidden-lg-and-up"><img src="@/assets/logo.svg" /></div>
<div v-for="category in categories" :key="category.name">
- <div class="dashboard-category text--secondary">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
+ <div class="dashboard-category text--secondary body-2">{{ desktop && drawerMini ? '' : $t('$dashboardCategories.' + category.name) }}</div>
<v-list>
- <v-list-tile ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
- <v-list-tile-action>
+ <v-list-item ripple v-for="module in category.modules" :key="module.name" :to="{ name: module.name }">
+ <v-list-item-action>
<v-icon v-html="module.icon"></v-icon>
- </v-list-tile-action>
- <v-list-tile-content>
- <v-list-tile-title v-text="$t('$dashboardModules.' + module.name)"></v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
+ </v-list-item-action>
+ <v-list-item-content>
+ <v-list-item-title v-text="$t('$dashboardModules.' + module.name)"></v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
</v-list>
- <v-divider></v-divider>
+ <v-divider :class="{ 'd-none': desktop && drawerMini }"></v-divider>
</div>
</div>
</v-navigation-drawer>
- <v-toolbar :height="$vuetify.breakpoint.smAndDown ? 56 : 64" dark app :clipped-left="settings.clipped" class="non-selectable" style="z-index: 10;" id="topbar">
- <v-toolbar-side-icon
+ <v-app-bar app dark
+ color="#212121"
+ :height="$vuetify.breakpoint.smAndDown ? 56 : 64"
+ :clipped-left="settings.clipped"
+ class="non-selectable"
+ style="z-index: 10;"
+ id="topbar"
+ >
+ <v-app-bar-nav-icon
@click.stop="toggleDrawer"
- class="drawer-icon tutorial-element label-bottom tutorial-border element-icon"
+ :class="{ 'ml-n2': $vuetify.breakpoint.mdAndUp }"
+ class="tutorial-element label-bottom tutorial-border element-icon"
style="--label-number: '2'"
- ></v-toolbar-side-icon>
+ ></v-app-bar-nav-icon>
+
<a class="logo" href="/dashboard/home"><img class="non-draggable hidden-md-and-down" src="@/assets/logo.svg" /></a>
+
<v-spacer></v-spacer>
+
<v-btn v-if="devMode" icon @click="$store.commit('saveSetting', { name: 'locale', value: settings.locale === 'en' ? 'de' : 'en' })"><v-icon>language</v-icon></v-btn>
+
<v-btn
class="tutorial-element label-top-left element-icon" style="--label-number: '3'"
icon
@click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })"
><v-icon>invert_colors</v-icon></v-btn>
+
<notifications-alerts style="margin-right: 16px;"></notifications-alerts>
- <v-toolbar-items>
- <v-menu offset-y attach>
+
+ <v-menu offset-y attach>
+ <template #activator="{ on }">
<v-btn class="user-button tutorial-element label-bottom tutorial-border"
- style="--label-number: '5'; text-transform: none;"
- flat slot="activator" >
- <v-icon left>account_circle</v-icon>
+ style="height: calc(100% + 8px); --label-number: '5'; text-transform: none;"
+ text v-on="on">
+ <v-icon>account_circle</v-icon>
<v-flex>
{{ user.name }}
<v-spacer></v-spacer>
<v-subheader class="user-subheader">{{ user.username }}</v-subheader>
</v-flex>
</v-btn>
- <v-list>
- <v-list-tile to="/dashboard/account" active-class="">
- <v-icon class="user-menu-icon">perm_identity</v-icon>
- <v-list-tile-title>{{ $t('user') }}</v-list-tile-title>
- </v-list-tile>
- <v-list-tile to="/dashboard/settings" active-class="">
- <v-icon class="user-menu-icon">settings</v-icon>
- <v-list-tile-title>{{ $t('settings') }}</v-list-tile-title>
- </v-list-tile>
- <v-list-tile @click="logout">
- <v-icon class="user-menu-icon">power_settings_new</v-icon>
- <v-list-tile-title>{{ $t('logout') }}</v-list-tile-title>
- </v-list-tile>
- </v-list>
- </v-menu>
- </v-toolbar-items>
- </v-toolbar>
+ </template>
+ <v-list>
+ <v-list-item to="/dashboard/account" active-class="">
+ <v-icon class="user-menu-icon">perm_identity</v-icon>
+ <v-list-item-title>{{ $t('user') }}</v-list-item-title>
+ </v-list-item>
+ <v-list-item to="/dashboard/settings" active-class="">
+ <v-icon class="user-menu-icon">settings</v-icon>
+ <v-list-item-title>{{ $t('settings') }}</v-list-item-title>
+ </v-list-item>
+ <v-list-item @click="logout">
+ <v-icon class="user-menu-icon">power_settings_new</v-icon>
+ <v-list-item-title>{{ $t('logout') }}</v-list-item-title>
+ </v-list-item>
+ </v-list>
+ </v-menu>
+
+ </v-app-bar>
<v-content>
<router-view />
</v-content>
+
<back-to-top-button></back-to-top-button>
<notifications-snackbars></notifications-snackbars>
</v-app>
@@ -134,11 +150,15 @@ export default {
computed: {
...mapState(['settings']),
...mapGetters(['user']),
+ dark () { return this.settings.dark },
mini () { return this.settings.mini },
desktop () { return this.$vuetify.breakpoint.lgAndUp },
devMode () { return localStorage.getItem('dev') === 'true' }
},
watch: {
+ dark (value) {
+ this.$vuetify.theme.dark = value
+ },
mini (value) {
if (value) {
this.drawerMini = !this.drawerOpen
@@ -179,7 +199,7 @@ export default {
}
.logo {
- height: 100%;
+ height: calc(100% + 8px);
overflow: hidden;
}
@@ -205,7 +225,7 @@ export default {
}
.user-button {
- min-width: 160px;
+ min-width: 160px !important;
}
.user-menu-icon {
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index c011353..4643d54 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -35,78 +35,81 @@
<template>
<div>
- <v-layout wrap :class="{ 'd-block': slim }">
- <v-flex xs12 :md6="!slim" class="d-flex align-center search-wrapper" :class="{ 'slim-search-wrapper': slim }">
- <data-table-search
- ref="search"
- @filter="filteredRows = $event"
- :selected="value"
- :items="sortedRows"
- :data-keys="headersWithText"
- nested-data
- :regex="regex"
- :case-sensitive="caseSensitive"
- :only-show-selected="onlyShowSelected"
- :slim="slim"
- :dispatch-scroll="computedRowCount <= 0"
- ></data-table-search>
+
+ <v-row no-gutters>
+ <v-col cols="12" :md="slim ? 12 : 6" class="search-wrapper" :class="{ 'slim-search-wrapper': slim }">
+ <div class="d-flex" style="flex: 1">
+ <data-table-search
+ ref="search"
+ @filter="filteredRows = $event"
+ :selected="value"
+ :items="sortedRows"
+ :data-keys="headersWithText"
+ nested-data
+ :regex="regex"
+ :case-sensitive="caseSensitive"
+ :only-show-selected="onlyShowSelected"
+ :slim="slim"
+ :dispatch-scroll="computedRowCount <= 0"
+ ></data-table-search>
+ <slot name="after-search"></slot>
+ </div>
<v-divider :class="{ 'hidden-md-and-up': !slim }"></v-divider>
<v-divider v-if="!slim" vertical class="hidden-sm-and-down"></v-divider>
- </v-flex>
- <v-flex style="padding: 6px 16px" class="non-selectable" xs12 :md6="!slim">
- <div class="d-flex align-center" style="font-size: 12px">
- <div class="nowrap">
- <v-tooltip top open-delay="800">
- <template #activator="{ on }">
- <v-btn v-on="on" icon class="toggle-button" @click="regex = !regex">
- <span :class="regex ? 'primary--text' : ''">.*?</span>
- </v-btn>
- </template>
- <span>{{ $t('regex') }}</span>
- </v-tooltip>
- <v-tooltip top open-delay="800">
- <template #activator="{ on }">
- <v-btn v-on="on" icon class="toggle-button" @click="caseSensitive = !caseSensitive">
- <span :class="caseSensitive ? 'primary--text' : ''">Aa</span>
- </v-btn>
- </template>
- <span>{{ $t('caseSensitive') }}</span>
- </v-tooltip>
- <v-tooltip v-if="!noSelect" top open-delay="800">
- <template #activator="{ on }">
- <v-btn v-on="on" icon class="toggle-button" @click="onlyShowSelected = !onlyShowSelected">
- <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">{{ singleSelect ? 'radio_button_checked' : 'check_box' }}</v-icon>
- </v-btn>
- </template>
- <span>{{ $t('onlyShowSelected') }}</span>
- </v-tooltip>
- </div>
+ </v-col>
+
+ <v-col cols="12" :md="slim ? 12 : 6" class="px-4 table-controls non-selectable">
+ <div class="nowrap">
+ <v-tooltip top open-delay="800">
+ <template #activator="{ on }">
+ <v-btn v-on="on" icon class="toggle-button" @click="regex = !regex">
+ <span :class="regex ? 'primary--text' : ''">.*?</span>
+ </v-btn>
+ </template>
+ <span>{{ $t('regex') }}</span>
+ </v-tooltip>
+ <v-tooltip top open-delay="800">
+ <template #activator="{ on }">
+ <v-btn v-on="on" icon class="toggle-button" @click="caseSensitive = !caseSensitive">
+ <span :class="caseSensitive ? 'primary--text' : ''">Aa</span>
+ </v-btn>
+ </template>
+ <span>{{ $t('caseSensitive') }}</span>
+ </v-tooltip>
+ <v-tooltip v-if="!noSelect" top open-delay="800">
+ <template #activator="{ on }">
+ <v-btn v-on="on" icon class="toggle-button" @click="onlyShowSelected = !onlyShowSelected">
+ <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">{{ singleSelect ? 'radio_button_checked' : 'check_box' }}</v-icon>
+ </v-btn>
+ </template>
+ <span>{{ $t('onlyShowSelected') }}</span>
+ </v-tooltip>
+ </div>
- <div class="entry-count" :style=" { 'justify-content': rowCount === undefined ? 'center' : 'flex-end' }">
- <span class="nowrap" :style="{ 'margin': noSelect ? '0' : '0 4px' }">{{ filteredRows.length + ' ' + $t('entries') }}</span>
- <span v-if="!noSelect" class="nowrap">{{ '(' + selected.length + ' ' + $t('selected') + ')' }}</span>
- </div>
+ <div class="entry-count" :style=" { 'justify-content': rowCount === undefined ? 'center' : 'flex-end' }">
+ <span class="nowrap" :style="{ 'margin': noSelect ? '0' : '0 4px' }">{{ filteredRows.length + ' ' + $t('entries') }}</span>
+ <span v-if="!noSelect" class="nowrap">{{ '(' + selected.length + ' ' + $t('selected') + ')' }}</span>
+ </div>
- <div v-if="rowCount === undefined" class="text-xs-right hidden-xs-only">
- {{ $t('height') }}:
- </div>
- <v-select
- v-if="rowCount === undefined"
- solo flat
- class="rowcount-select"
- v-model="internalRowCount"
- :items="[ 5, 10, 20, 50, { text: $t('all'), value: '-1' }]"
- color="primary"
- hide-details
- :menu-props="{
- offsetY: true,
- left: true,
- contentClass: 'data-table-rowcount-select-content'
- }"
- ></v-select>
+ <div v-if="rowCount === undefined" class="text-right hidden-xs-only">
+ {{ $t('height') }}:
</div>
- </v-flex>
- </v-layout>
+ <v-select
+ v-if="rowCount === undefined"
+ solo flat
+ class="rowcount-select"
+ v-model="internalRowCount"
+ :items="[ 5, 10, 20, 50, { text: $t('all'), value: '-1' }]"
+ color="primary"
+ hide-details
+ :menu-props="{
+ offsetY: true,
+ left: true,
+ contentClass: 'data-table-rowcount-select-content'
+ }"
+ ></v-select>
+ </v-col>
+ </v-row>
<v-divider></v-divider>
@@ -154,7 +157,7 @@
</template>
<template #default="{ item, index }">
<div class="table-row"
- :style="item.selected && { backgroundColor: $vuetify.theme.primary + '11' }"
+ :style="item.selected && { backgroundColor: $vuetify.theme.currentTheme.primary + '11' }"
@click="selectItem(item, index)"
@dblclick="$emit('dblclick', item.data)"
>
@@ -176,11 +179,10 @@
v-model="copyDialog"
scrollable
:max-width="300"
- lazy
>
<v-card class="non-selectable">
<v-card-title class="elevation-3">
- <div class="subheading">{{ $t('copyHeading') }}</div>
+ <div class="subtitle-1">{{ $t('copyHeading') }}</div>
<v-spacer></v-spacer>
<v-btn-toggle v-model="copyFormat" mandatory class="copy-format-toggle">
<v-btn small :color="copyFormat === 0 ? 'primary' : ''">CSV</v-btn>
@@ -202,7 +204,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn small flat @click="copyDialog = false">{{ $t('close') }}</v-btn>
+ <v-btn small text @click="copyDialog = false">{{ $t('close') }}</v-btn>
<v-btn small color="primary" @click="copyToClipboard">{{ $t('copy') }}</v-btn>
</v-card-actions>
</v-card>
@@ -558,6 +560,11 @@ export default {
font-weight: 600;
}
+.search-wrapper {
+ display: flex;
+ align-items: center;
+}
+
@media (max-width: 959px) {
.search-wrapper {
flex-direction: column;
@@ -570,6 +577,17 @@ export default {
align-items: stretch;
}
+.table-controls {
+ display: flex;
+ align-items: center;
+ font-size: 12px;
+ min-height: 48px;
+}
+
+.table-controls > * {
+ flex: 1 1 auto;
+}
+
.entry-count {
display: flex;
flex-wrap: wrap;
@@ -723,11 +741,13 @@ export default {
</style>
<style>
-.data-table-rowcount-select-content .v-list__tile {
+.data-table-search-select-content .v-list-item,
+.data-table-rowcount-select-content .v-list-item {
height: 36px;
+ min-height: 36px;
}
-.data-table-rowcount-select-content .v-list__tile__title {
+.data-table-rowcount-select-content .v-list-item__title {
text-align: right;
}
</style>
diff --git a/webapp/src/components/DataTableSearch.vue b/webapp/src/components/DataTableSearch.vue
index 2b2980c..17e6976 100644
--- a/webapp/src/components/DataTableSearch.vue
+++ b/webapp/src/components/DataTableSearch.vue
@@ -19,7 +19,7 @@
solo flat
style="padding: 0: margin: 0;"
class="search-field"
- :placeholder="$t('search')"
+ :label="$t('search')"
:value="s.text.raw"
@input="prerocessSearch(s, $event)"
hide-details
@@ -44,8 +44,8 @@
}"
></v-select>
<template v-if="!slim">
- <v-btn v-if="index === 0" icon @click="newSearchField"><v-icon>add</v-icon></v-btn>
- <v-btn v-else icon @click="removeSearchField(s)"><v-icon>remove</v-icon></v-btn>
+ <v-btn v-if="index === 0" icon @click="newSearchField" class="mx-2"><v-icon>add</v-icon></v-btn>
+ <v-btn v-else icon @click="removeSearchField(s)" class="mx-2"><v-icon>remove</v-icon></v-btn>
</template>
</div>
</div>
@@ -216,6 +216,7 @@ export default {
.search-field-wrapper {
display: flex;
flex-direction: column;
+ flex: 1;
}
.search-field-wrapper > div {
diff --git a/webapp/src/components/EventModule.vue b/webapp/src/components/EventModule.vue
index 88a79b7..f9dbf1f 100644
--- a/webapp/src/components/EventModule.vue
+++ b/webapp/src/components/EventModule.vue
@@ -18,7 +18,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">calendar_view_day</v-icon>{{ $t('eventList') }}</v-tab>
</v-tabs>
</v-card>
diff --git a/webapp/src/components/EventModuleDelete.vue b/webapp/src/components/EventModuleDelete.vue
index b06d29c..0763e58 100644
--- a/webapp/src/components/EventModuleDelete.vue
+++ b/webapp/src/components/EventModuleDelete.vue
@@ -25,7 +25,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click.native="$store.commit('events/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click.native="$store.commit('events/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
<v-btn color="error" @click="deleteEvents">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/EventModuleEdit.vue b/webapp/src/components/EventModuleEdit.vue
index 4bda15f..c079ee5 100644
--- a/webapp/src/components/EventModuleEdit.vue
+++ b/webapp/src/components/EventModuleEdit.vue
@@ -146,7 +146,7 @@
<v-stepper v-model="step" horizontal style="width: 100%; background: transparent" class="elevation-0">
<v-stepper-items>
<v-stepper-content step="1">
- <v-layout row wrap>
+ <v-layout wrap>
<v-flex xs12 md5>
<v-text-field
:value="name"
@@ -197,13 +197,12 @@
></v-checkbox>
</v-flex>
</v-layout>
- <v-layout row wrap class="tutorial-element label-right tutorial-border" style="--label-number: '4'">
+ <v-layout wrap class="tutorial-element label-right tutorial-border" style="--label-number: '4'">
<v-flex xs12 md5>
<v-menu
v-model="startDateMenu"
transition="scale-transition"
:close-on-content-click="false"
- lazy
offset-y
full-width
min-width="290px"
@@ -225,7 +224,6 @@
v-model="endDateMenu"
transition="scale-transition"
:close-on-content-click="false"
- lazy
offset-y
full-width
min-width="290px"
@@ -247,7 +245,6 @@
v-model="startTimeMenu"
transition="scale-transition"
:close-on-content-click="false"
- lazy
offset-y
full-width
max-width="290px"
@@ -278,7 +275,6 @@
v-model="endTimeMenu"
transition="scale-transition"
:close-on-content-click="false"
- lazy
offset-y
full-width
max-width="290px"
@@ -306,12 +302,12 @@
</v-menu>
</v-flex>
</v-layout>
- <v-layout row wrap>
+ <v-layout wrap>
<v-flex>
<v-switch color="primary" v-model="repetitiveEvent" :label="$t('repetitiveModeSwitch')" class="tutorial-element tutorial-no-border label-left tutorial-switch" style="--label-number: '5';"/>
</v-flex>
</v-layout>
- <v-layout row wrap v-show="repetitiveEvent" class="">
+ <v-layout wrap v-show="repetitiveEvent" class="">
<v-flex xs12 md12>
<p class="tutorial-element tutorial-no-border tutorial-label label-right" style="margin-bottom: 0px; --label-number: '1'">{{ $t('days') }}</p>
<v-btn small class="no-margin" :color="dayMap[0] ? 'primary' : ''" @click="setDayMap(0)">{{ $t('monday') }}</v-btn>
@@ -388,7 +384,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat @click.native="$store.commit('events/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
+ <v-btn text @click.native="$store.commit('events/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="submit" type="submit">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
<v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
<v-btn color="primary" v-show="step == 2 && groups.length > 0" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
diff --git a/webapp/src/components/EventModuleEventList.vue b/webapp/src/components/EventModuleEventList.vue
index 038c296..f97b891 100644
--- a/webapp/src/components/EventModuleEventList.vue
+++ b/webapp/src/components/EventModuleEventList.vue
@@ -24,15 +24,15 @@
<v-card>
<data-table v-model="selectedEvents" :headers="headers" :items="events" @dblclick="editEvent($event)">
<div slot="action" slot-scope="row" style="text-align: right">
- <v-btn flat icon color="primary" @click.stop="editEvent(row.item)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
+ <v-btn text icon color="primary" @click.stop="editEvent(row.item)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn color="error" flat @click="deleteEvent" :disabled="selectedEvents.length === 0" class="tutorial-element label-left" style="--label-number: '2'">
+ <div class="text-right">
+ <v-btn color="error" text @click="deleteEvent" :disabled="selectedEvents.length === 0" class="ma-2 tutorial-element label-left" style="--label-number: '2'">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-event', selectedEvents.length, [selectedEvents.length]) }}
</v-btn>
- <v-btn color="success" flat @click="createEvent" class="tutorial-element label-right" style="--label-number: '1'">
+ <v-btn color="success" text @click="createEvent" class="ma-2 tutorial-element label-right" style="--label-number: '1'">
<v-icon left>add_circle_outline</v-icon>{{ $t('create-event') }}
</v-btn>
</div>
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 279b7f9..078dbca 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -11,8 +11,8 @@
<v-container fill-height>
<v-layout>
<v-flex xl10 offset-xl1 lg12>
- <v-card class="tabbar-card non-selectable" style="display: flex; justify-content: space-between" :color="tabsColor">
- <v-tabs :value="activeTab" @change="setActiveTab" :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor" style="overflow-x: hidden;">
+ <v-card class="tabbar-card non-selectable" style="display: flex; justify-content: space-between; align-items: center;" :color="tabsColor">
+ <v-tabs :value="activeTab" @change="setActiveTab" :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor" style="overflow-x: hidden;">
<template v-for="(item, index) in tabChain">
<v-icon v-if="item.id > 0 || item.id === 'create'" :key="'arrow' + index">keyboard_arrow_right</v-icon>
<v-tab ripple :key="'tab' + index">
@@ -22,10 +22,10 @@
</v-tab>
</template>
</v-tabs>
- <v-btn icon :loading="reloading" @click="reload" class="tutorial-element label-top-left element-icon" style="--label-number: '2'"><v-icon>refresh</v-icon></v-btn>
+ <v-btn icon :loading="reloading" @click="reload" class="mx-2 tutorial-element label-top-left element-icon" style="--label-number: '2'"><v-icon>refresh</v-icon></v-btn>
</v-card>
<v-tabs-items :value="activeTab" @input="setActiveTab" touchless style="padding-bottom: 12px">
- <v-tab-item v-for="(item, index) in tabChain" :key="index" lazy :transition="false" :reverse-transition="false">
+ <v-tab-item v-for="(item, index) in tabChain" :key="index" :transition="false" :reverse-transition="false">
<group-module-group-view v-if="item.tabType === 'group'" :group="item" :tabIndex="index" />
<group-module-client-view v-if="item.tabType === 'client'" :client="item" :tabIndex="index" />
</v-tab-item>
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index bc1dc52..4871c7e 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -36,21 +36,21 @@
</div>
</data-table>
<v-divider></v-divider>
- <div class="text-xs-right">
- <v-btn flat color="primary" @click="wake" :disabled="selected.length === 0">
+ <div class="text-right">
+ <v-btn text color="primary" @click="wake" :disabled="selected.length === 0">
<v-icon left>notifications_active</v-icon>{{ $tc('wakeClients', selected.length, [selected.length]) }}
</v-btn>
<template v-if="tabIndex === 0">
- <v-btn flat color="error" @click="deleteSelected" :disabled="selected.length === 0">
+ <v-btn text color="error" @click="deleteSelected" :disabled="selected.length === 0">
<v-icon left>delete</v-icon>{{ $tc('deleteClients', selected.length, [selected.length]) }}
</v-btn>
- <v-btn flat color="success" @click="newClient"><v-icon left>create</v-icon>{{ $t('createClient') }}</v-btn>
+ <v-btn text color="success" @click="newClient"><v-icon left>create</v-icon>{{ $t('createClient') }}</v-btn>
</template>
<template v-else>
- <v-btn flat color="error" @click="removeSelected" :disabled="selected.length === 0">
+ <v-btn text color="error" @click="removeSelected" :disabled="selected.length === 0">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('removeClients', selected.length, [selected.length]) }}
</v-btn>
- <v-btn flat color="success" @click="addExisting"><v-icon left>add_circle_outline</v-icon>{{ $t('addClients') }}</v-btn>
+ <v-btn text color="success" @click="addExisting"><v-icon left>add_circle_outline</v-icon>{{ $t('addClients') }}</v-btn>
</template>
</div>
</div>
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index db8a2c6..dbac06f 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -80,18 +80,18 @@
</div>
</div>
</v-flex>
- <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
+ <v-flex lg4 xs12 order-lg3 order-xs1 class="text-right">
<div class="info-box">
<div v-if="!editMode">
- <v-btn color="error" flat @click="deleteClient" class="info-buttons">
+ <v-btn color="error" text @click="deleteClient" class="info-buttons">
<v-icon left>delete</v-icon>{{ $t('delete') }}
</v-btn>
- <v-btn color="primary" flat @click="editInfo" class="info-buttons">
+ <v-btn color="primary" text @click="editInfo" class="info-buttons">
<v-icon left>create</v-icon>{{ $t('edit') }}
</v-btn>
</div>
<div v-else>
- <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" text @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="saveData" class="info-buttons" tabindex="6">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 41b98b5..55053e6 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -107,13 +107,12 @@
scrollable
:persistent="action === 'add' || action === 'select'"
:fullscreen="$vuetify.breakpoint.smAndDown"
- lazy
>
<v-card>
<v-card-title class="dialog-title elevation-3">
<div class="headline">{{ title }}</div>
<v-spacer></v-spacer>
- <v-btn v-if="action === 'add'" class="new-button" flat color="success" @click="newItem">
+ <v-btn v-if="action === 'add'" class="new-button" text color="success" @click="newItem">
<v-icon left>create</v-icon>{{ $t('new') }}
</v-btn>
</v-card-title>
@@ -160,7 +159,7 @@
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="actionColorMap[action]" @click="submitAction">{{ $t(action) }}</v-btn>
</v-card-actions>
</v-card>
@@ -299,7 +298,7 @@ export default {
<style scoped>
.table-container {
height: 100%;
- padding: 0;
+ padding: 0 !important;
}
.dialog-title {
z-index: 1;
diff --git a/webapp/src/components/GroupModuleGroupInfo.vue b/webapp/src/components/GroupModuleGroupInfo.vue
index bcefe7f..2b5a561 100644
--- a/webapp/src/components/GroupModuleGroupInfo.vue
+++ b/webapp/src/components/GroupModuleGroupInfo.vue
@@ -98,7 +98,7 @@
<div v-else>
<table>
<tr v-for="(iprange, index) in group.ipranges" :key="index">
- <td class="text-xs-right">{{ iprange.startIp }}</td>
+ <td class="text-right">{{ iprange.startIp }}</td>
<td class="ip-seperator">-</td>
<td>{{ iprange.endIp }}</td>
</tr>
@@ -108,18 +108,18 @@
</div>
</div>
</v-flex>
- <v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
+ <v-flex lg4 xs12 order-lg3 order-xs1 class="text-right">
<div class="info-box">
<div v-if="!editMode">
- <v-btn color="error" flat @click="deleteGroup" class="info-buttons tutorial-element label-left" style="--label-number: '2'">
+ <v-btn color="error" text @click="deleteGroup" class="info-buttons tutorial-element label-left" style="--label-number: '2'">
<v-icon left>delete</v-icon>{{ $t('delete') }}
</v-btn>
- <v-btn color="primary" flat @click="editInfo" class="info-buttons tutorial-element label-right" style="--label-number: '1'">
+ <v-btn color="primary" text @click="editInfo" class="info-buttons tutorial-element label-right" style="--label-number: '1'">
<v-icon left>create</v-icon>{{ $t('edit') }}
</v-btn>
</div>
<div v-else>
- <v-btn color="primary" flat @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" text @click="cancelEdit" class="info-buttons">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="saveData" class="info-buttons" tabindex="3">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index ede61b9..8425fb5 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -34,17 +34,21 @@
</div>
</data-table>
<v-divider></v-divider>
- <div v-if="tabIndex === 0" class="text-xs-right">
- <v-btn flat color="error" @click="deleteSelected" :disabled="selected.length === 0">
+ <div v-if="tabIndex === 0" class="text-right">
+ <v-btn text color="error" @click="deleteSelected" :disabled="selected.length === 0" class="ma-2">
<v-icon left>delete</v-icon>{{ $tc('deleteGroups', selected.length, [selected.length]) }}
</v-btn>
- <v-btn flat color="success" @click="newGroup"><v-icon left>create</v-icon>{{ $t('createGroup') }}</v-btn>
+ <v-btn text color="success" @click="newGroup" class="ma-2">
+ <v-icon left>create</v-icon>{{ $t('createGroup') }}
+ </v-btn>
</div>
- <div v-else class="text-xs-right">
- <v-btn flat color="error" @click="removeSelected" :disabled="selected.length === 0">
+ <div v-else class="text-right">
+ <v-btn text color="error" @click="removeSelected" :disabled="selected.length === 0" class="ma-2">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('removeSubgroups', selected.length, [selected.length]) }}
</v-btn>
- <v-btn flat color="success" @click="addExisting"><v-icon left>add_circle_outline</v-icon>{{ $t('addSubgroups') }}</v-btn>
+ <v-btn text color="success" @click="addExisting" class="ma-2">
+ <v-icon left>add_circle_outline</v-icon>{{ $t('addSubgroups') }}
+ </v-btn>
</div>
</div>
</template>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index b969691..0a94d2a 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -81,23 +81,25 @@
</div>
<v-card v-else style="margin-top: 24px">
- <v-tabs v-model="activeTab" grow hide-slider>
- <v-tab v-if="group.id !== 0" class="groupview-tab" :class="(group.id !== 0 && activeTab === 0) ? 'primary--text' : ''">
- <v-icon :color="(group.id !== 0 && activeTab === 0) ? 'primary' : ''">list_alt</v-icon>
- <span class="hidden-xs-only ml-2">Info</span>
- </v-tab>
- <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 0 : 1) ? 'primary--text' : ''">
- <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 0 : 1) ? 'primary' : ''">category</v-icon>
- {{ group.subgroups ? group.subgroups.length : 0 }}
- <span class="hidden-xs-only ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
- </v-tab>
- <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 1 : 2) ? 'primary--text' : ''">
- <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 1 : 2) ? 'primary' : ''">computer</v-icon>
- {{ group.clients ? group.clients.length : 0 }}
- <span class="hidden-xs-only ml-1">{{ $t('clients') }}</span>
- </v-tab>
+ <div style="display: flex; align-items: center; font-weight: bold;">
+ <v-tabs v-model="activeTab" grow hide-slider>
+ <v-tab v-if="group.id !== 0" class="groupview-tab" :class="(group.id !== 0 && activeTab === 0) ? 'primary--text' : ''">
+ <v-icon :color="(group.id !== 0 && activeTab === 0) ? 'primary' : ''">list_alt</v-icon>
+ <span class="hidden-xs-only ml-2">Info</span>
+ </v-tab>
+ <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 0 : 1) ? 'primary--text' : ''">
+ <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 0 : 1) ? 'primary' : ''">category</v-icon>
+ {{ group.subgroups ? group.subgroups.length : 0 }}
+ <span class="hidden-xs-only ml-1">{{ group.id > 0 ? $t('subgroups') : $t('groups') }}</span>
+ </v-tab>
+ <v-tab v-if="group.id !== 'create'" class="groupview-tab" :class="activeTab === (group.id === 0 ? 1 : 2) ? 'primary--text' : ''">
+ <v-icon class="mr-2" :color="activeTab === (group.id === 0 ? 1 : 2) ? 'primary' : ''">computer</v-icon>
+ {{ group.clients ? group.clients.length : 0 }}
+ <span class="hidden-xs-only ml-1">{{ $t('clients') }}</span>
+ </v-tab>
+ </v-tabs>
- <v-btn v-if="group.id !== 'create'" icon @click="toggleCollapsedView">
+ <v-btn v-if="group.id !== 'create'" icon @click="toggleCollapsedView" class="ml-2">
<v-icon>expand_more</v-icon>
</v-btn>
<v-switch
@@ -109,19 +111,18 @@
hide-details
color="primary"
></v-switch>
-
- <v-tabs-items touchless>
- <v-tab-item v-if="group.id !== 0" lazy :transition="false" :reverse-transition="false">
+ </div>
+ <v-tabs-items v-model="activeTab" touchless>
+ <v-tab-item v-if="group.id !== 0" :transition="false" :reverse-transition="false">
<group-module-group-info :tabIndex="tabIndex" :group="group" />
</v-tab-item>
- <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
+ <v-tab-item v-if="group.id !== 'create'" :transition="false" :reverse-transition="false">
<group-module-group-list :tabIndex="tabIndex" :groupId="group.id" :groups="group.subgroups || []" />
</v-tab-item>
- <v-tab-item v-if="group.id !== 'create'" lazy :transition="false" :reverse-transition="false">
+ <v-tab-item v-if="group.id !== 'create'" :transition="false" :reverse-transition="false">
<group-module-client-list :tabIndex="tabIndex" :groupId="group.id" :clients="group.clients || []" />
</v-tab-item>
</v-tabs-items>
- </v-tabs>
</v-card>
</div>
</template>
@@ -214,5 +215,6 @@ export default {
display: flex;
flex-direction: row;
align-items: center;
+ font-size: 14px;
}
</style>
diff --git a/webapp/src/components/HomeModule.vue b/webapp/src/components/HomeModule.vue
index 8a6febf..4f7b1e8 100644
--- a/webapp/src/components/HomeModule.vue
+++ b/webapp/src/components/HomeModule.vue
@@ -40,8 +40,6 @@ export default {
},
computed: {
...mapState(['settings', 'user'])
- },
- methods: {
}
}
</script>
diff --git a/webapp/src/components/IprangeModule.vue b/webapp/src/components/IprangeModule.vue
index d782707..5d1ff46 100644
--- a/webapp/src/components/IprangeModule.vue
+++ b/webapp/src/components/IprangeModule.vue
@@ -42,7 +42,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">settings_ethernet</v-icon>{{ $t('ipranges') }}</v-tab>
</v-tabs>
</v-card>
@@ -52,23 +52,25 @@
<v-card>
<data-table v-model="selected" :headers="headers" :items="ipranges" @dblclick="dialog = { show: true, type: 'edit', iprange: { ...$event } }" min-width="840px" copy-button>
<template #group="row">
- <v-btn small flat :to="{ name: 'GroupModule.group', params: { id: row.item.groupId } }" class="ma-0" style="text-transform: none;">
+ <v-btn small text :to="{ name: 'GroupModule.group', params: { id: row.item.groupId } }" class="ma-0" style="text-transform: none;">
{{ row.item.group.name }}
<v-icon small class="ml-2">open_in_new</v-icon>
</v-btn>
</template>
<template #actions="row">
<div style="text-align: right">
- <v-btn flat icon @click.stop="dialog = { show: true, type: 'edit', iprange: { ...row.item } }" class="ma-0"><v-icon color="primary">edit</v-icon></v-btn>
+ <v-btn text icon @click.stop="dialog = { show: true, type: 'edit', iprange: { ...row.item } }" class="ma-0"><v-icon color="primary">edit</v-icon></v-btn>
</div>
</template>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="dialog = { show: true, type: 'delete' }" :disabled="selected.length === 0">
+ <div class="text-right">
+ <v-btn text color="error" @click="dialog = { show: true, type: 'delete' }" :disabled="selected.length === 0" class="ma-2">
<v-icon left>delete</v-icon>{{ $tc('deleteIpranges', selected.length, [selected.length]) }}
</v-btn>
- <v-btn flat color="success" @click="dialog = { show: true, type: 'create', iprange: {} }"><v-icon left>create</v-icon>{{ $t('createIprange') }}</v-btn>
+ <v-btn text color="success" @click="dialog = { show: true, type: 'create', iprange: {} }" class="ma-2">
+ <v-icon left>create</v-icon>{{ $t('createIprange') }}
+ </v-btn>
</div>
</v-tab-item>
</v-tabs-items>
@@ -81,7 +83,6 @@
scrollable
:persistent="dialog.type !== 'delete'"
:fullscreen="$vuetify.breakpoint.smAndDown"
- lazy
>
<v-card>
<v-card-title class="elevation-3">
@@ -111,7 +112,7 @@
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="dialog.show = false">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="dialog.show = false">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialogColor" @click="submitAction">{{ dialogButtonText }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/IpxeBuilderModule.vue b/webapp/src/components/IpxeBuilderModule.vue
index e2c38ff..c98912e 100644
--- a/webapp/src/components/IpxeBuilderModule.vue
+++ b/webapp/src/components/IpxeBuilderModule.vue
@@ -14,12 +14,12 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor" hide-slider>
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor" hide-slider>
<v-tab><v-icon class="tabbar-tabicon">memory</v-icon>{{ $t('ipxe') }}</v-tab>
</v-tabs>
</v-card>
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
- <v-tab-item lazy :transition="false" :reverse-transition="false">
+ <v-tab-item :transition="false" :reverse-transition="false">
<ipxe-builder-module-config></ipxe-builder-module-config>
</v-tab-item>
</v-tabs-items>
diff --git a/webapp/src/components/IpxeBuilderModuleConfig.vue b/webapp/src/components/IpxeBuilderModuleConfig.vue
index 26ceb01..fc6b2ff 100644
--- a/webapp/src/components/IpxeBuilderModuleConfig.vue
+++ b/webapp/src/components/IpxeBuilderModuleConfig.vue
@@ -119,24 +119,24 @@
@input="createTarget"
>
<template #no-data>
- <v-list-tile>
- <v-list-tile-content>
- <v-list-tile-title>
+ <v-list-item>
+ <v-list-item-content>
+ <v-list-item-title>
No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
- </v-list-tile-title>
- </v-list-tile-content>
- </v-list-tile>
+ </v-list-item-title>
+ </v-list-item-content>
+ </v-list-item>
</template>
<template #item="{ index, item }">
- <v-list-tile-content>
+ <v-list-item-content>
{{ item }}
- </v-list-tile-content>
- <v-list-tile-action @click.stop>
+ </v-list-item-content>
+ <v-list-item-action @click.stop>
<v-btn icon @click.stop.prevent="deleteTarget(item)">
<v-icon color="error">delete</v-icon>
</v-btn>
- </v-list-tile-action>
+ </v-list-item-action>
</template>
</v-combobox>
@@ -145,17 +145,17 @@
</v-layout>
</v-flex>
- <v-flex v-if="!editParametersMode" lg3 md4 sm4 xs12 order-lg3 order-md2 order-sm2 order-xs1 class="text-xs-right">
+ <v-flex v-if="!editParametersMode" lg3 md4 sm4 xs12 order-lg3 order-md2 order-sm2 order-xs1 class="text-right">
<div class="info-input">
- <v-btn color="primary" flat @click="editParameters" class="info-buttons">
+ <v-btn color="primary" text @click="editParameters" class="info-buttons">
<v-icon left>create</v-icon>{{ $t('edit') }}
</v-btn>
</div>
</v-flex>
- <v-flex v-else lg3 md4 sm4 xs12 order-lg3 order-md2 order-sm2 order-xs1 class="text-xs-right">
+ <v-flex v-else lg3 md4 sm4 xs12 order-lg3 order-md2 order-sm2 order-xs1 class="text-right">
<div class="info-input">
- <v-btn color="primary" flat @click="cancelEditParameters" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" text @click="cancelEditParameters" class="info-buttons">{{ $t('cancel') }}</v-btn>
<v-btn color="primary" @click="submitParameters" class="info-buttons">
<v-icon left>save</v-icon>{{ $t('save') }}
</v-btn>
@@ -192,14 +192,14 @@
</div>
</div>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="cleanIpxe" :disabled=disableButtons class="tutorial-element label-left" style="--label-number: '1'"><v-icon left>delete</v-icon>{{ $t('cleanIpxe') }}</v-btn>
- <v-btn flat color="warning" @click="cancelIpxe" :disabled=!disableButtons class="tutorial-element label-bottom" style="--label-number: '2'"><v-icon left>cancel</v-icon>{{ $t('cancelIpxe') }}</v-btn>
- <v-btn flat color="primary" @click="buildIpxe" :disabled=disableButtons class="tutorial-element label-right" style="--label-number: '3'"><v-icon left>gavel</v-icon>{{ $t('buildIpxe') }}</v-btn>
+ <div class="text-right">
+ <v-btn text color="error" @click="cleanIpxe" :disabled=disableButtons class="ma-2 tutorial-element label-left" style="--label-number: '1'"><v-icon left>delete</v-icon>{{ $t('cleanIpxe') }}</v-btn>
+ <v-btn text color="warning" @click="cancelIpxe" :disabled=!disableButtons class="ma-2 tutorial-element label-bottom" style="--label-number: '2'"><v-icon left>cancel</v-icon>{{ $t('cancelIpxe') }}</v-btn>
+ <v-btn text color="primary" @click="buildIpxe" :disabled=disableButtons class="ma-2 tutorial-element label-right" style="--label-number: '3'"><v-icon left>gavel</v-icon>{{ $t('buildIpxe') }}</v-btn>
</div>
<v-subheader>{{ $t('scripts') }}</v-subheader>
<v-card class="tabbar-card subtabs" :color="tabsColor">
- <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor" hide-slider class="tutorial-element tutorial-border label-bottom" style="--label-number: '1'">
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor" hide-slider class="tutorial-element tutorial-border label-bottom" style="--label-number: '1'">
<v-tab :class="tabs === 0 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 0 ? 'primary' : ''">description</v-icon>{{ $t('script') }}</v-tab>
<v-tab :class="tabs === 1 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 1 ? 'primary' : ''">description</v-icon>{{ $t('trust') }}</v-tab>
<v-tab :class="tabs === 2 ? 'primary--text' : ''"><v-icon class="tabbar-tabicon" :color="tabs === 2 ? 'primary' : ''">description</v-icon>{{ $t('general') }}</v-tab>
@@ -207,47 +207,47 @@
</v-tabs>
</v-card>
<v-tabs-items v-model="tabs" style="padding-bottom: 12px"> <!--20px-->
- <v-tab-item lazy :transition="false" :reverse-transition="false">
+ <v-tab-item :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('script') }}</div>
<v-card>
<codemirror class="script-editor" ref="script" v-model="script"></codemirror>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ <div class="text-right">
+ <v-btn class="ma-2" text color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn class="ma-2" text color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn class="ma-2" color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
</div>
</v-card>
</v-tab-item>
- <v-tab-item lazy :transition="false" :reverse-transition="false">
+ <v-tab-item :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('trust') }}</div>
<v-card>
<codemirror class="script-editor" ref="certificate" v-model="certificate"></codemirror>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ <div class="text-right">
+ <v-btn class="ma-2" text color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn class="ma-2" text color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn class="ma-2" color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
</div>
</v-card>
</v-tab-item>
- <v-tab-item lazy :transition="false" :reverse-transition="false">
+ <v-tab-item :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('general') }}</div>
<v-card>
<codemirror class="script-editor" ref="general" v-model="general"></codemirror>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ <div class="text-right">
+ <v-btn class="ma-2" text color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn class="ma-2" text color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn class="ma-2" color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
</div>
</v-card>
</v-tab-item>
- <v-tab-item lazy :transition="false" :reverse-transition="false">
+ <v-tab-item :transition="false" :reverse-transition="false">
<div slot="header">{{ $t('console') }}</div>
<v-card>
<codemirror class="script-editor" ref="console" v-model="console"></codemirror>
- <div class="text-xs-right">
- <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
- <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
- <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ <div class="text-right">
+ <v-btn class="ma-2" text color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn class="ma-2" text color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn class="ma-2" color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
</div>
</v-card>
</v-tab-item>
diff --git a/webapp/src/components/LogModule.vue b/webapp/src/components/LogModule.vue
index cb7f035..386b46b 100644
--- a/webapp/src/components/LogModule.vue
+++ b/webapp/src/components/LogModule.vue
@@ -42,7 +42,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">error_outline</v-icon>{{ $t('systemLog') }}</v-tab>
</v-tabs>
</v-card>
@@ -66,11 +66,11 @@
</v-flex>
<v-flex xs12 md6 order-xs1 order-md2 class="text-md-right">
<div style="display: inline-block; white-space: nowrap">
- <span class="text-xs-right picker-label">{{ $t('from') }}</span>
+ <span class="text-right picker-label mr-2">{{ $t('from') }}</span>
<v-menu left offset-y :close-on-content-click="false" style="display: inline-block">
<template #activator="{ on }">
- <v-btn v-on="on" small class="date-picker-button"><v-icon small class="mr-1">today</v-icon>{{ filter.fromDate }}</v-btn>
+ <v-btn v-on="on" small class="date-picker-button mr-2"><v-icon small class="mr-1">today</v-icon>{{ filter.fromDate }}</v-btn>
</template>
<v-date-picker
:value="filter.fromDate"
@@ -98,11 +98,11 @@
</div>
<div style="display: inline-block; white-space: nowrap">
- <span class="text-xs-right picker-label">{{ $t('to') }}</span>
+ <span class="text-right picker-label mr-2">{{ $t('to') }}</span>
<v-menu v-model="toDateMenu" left offset-y :close-on-content-click="false" style="display: inline-block">
<template #activator="{ on }">
- <v-btn v-on="on" small class="date-picker-button">
+ <v-btn v-on="on" small class="date-picker-button mr-2">
<v-icon small class="mr-1">today</v-icon>
{{ filter.toDate ? filter.toDate : $t('today') }}
</v-btn>
diff --git a/webapp/src/components/LogModuleEntry.vue b/webapp/src/components/LogModuleEntry.vue
index a037e79..8339b4a 100644
--- a/webapp/src/components/LogModuleEntry.vue
+++ b/webapp/src/components/LogModuleEntry.vue
@@ -30,7 +30,7 @@
<template v-if="item.client">
<v-menu v-model="menus.client" :close-on-content-click="false" offset-y content-class="log-entry-menu-conent">
<template #activator="{ on }">
- <v-btn v-on="on" outline small class="description-button" :class="{ 'error--text': item.client.deleted }">
+ <v-btn v-on="on" outlined small class="description-button" :class="{ 'error--text': item.client.deleted }">
<v-icon small class="mr-1">computer</v-icon>{{ item.client.name }}
</v-btn>
</template>
@@ -56,7 +56,7 @@
<template v-if="item.group">
<v-menu v-model="menus.group" :close-on-content-click="false" offset-y content-class="log-entry-menu-conent">
<template #activator="{ on }">
- <v-btn v-on="on" outline small class="description-button" :class="{ 'error--text': item.group.deleted }">
+ <v-btn v-on="on" outlined small class="description-button" :class="{ 'error--text': item.group.deleted }">
<v-icon small class="mr-1">category</v-icon>{{ item.group.name }}
</v-btn>
</template>
@@ -80,7 +80,7 @@
<template v-if="item.user">
<v-menu v-model="menus.user" :close-on-content-click="false" offset-y content-class="log-entry-menu-conent">
<template #activator="{ on }">
- <v-btn v-on="on" outline small class="description-button" :class="{ 'error--text': item.user.deleted }">
+ <v-btn v-on="on" outlined small class="description-button" :class="{ 'error--text': item.user.deleted }">
<v-icon small class="mr-1">person</v-icon>{{ item.user.name }}
</v-btn>
</template>
diff --git a/webapp/src/components/NotificationsAlerts.vue b/webapp/src/components/NotificationsAlerts.vue
index efedd2a..e1aafe3 100644
--- a/webapp/src/components/NotificationsAlerts.vue
+++ b/webapp/src/components/NotificationsAlerts.vue
@@ -18,17 +18,19 @@
<template>
<div>
<v-menu v-model="menu" offset-y left :close-on-content-click="false" :nudge-bottom="10" content-class="notifications" attach>
- <v-btn icon slot="activator" class="tutorial-element label-top-left element-icon" style="--label-number: '4'">
- <v-badge :value="!menu && newAlertCount" color="red darken-3" bottom>
- <span slot="badge">{{newAlertCount}}</span>
- <v-icon>notifications</v-icon>
- </v-badge>
- </v-btn>
+ <template #activator="{ on }">
+ <v-btn icon v-on="on" class="tutorial-element label-top-left element-icon" style="--label-number: '4'">
+ <v-badge :value="!menu && newAlertCount" color="red darken-3" bottom>
+ <span slot="badge">{{newAlertCount}}</span>
+ <v-icon>notifications</v-icon>
+ </v-badge>
+ </v-btn>
+ </template>
<v-card>
<v-card-text>
<div style="max-height: 70vh; overflow: auto">
- <div v-if="alerts.length === 0" class="text-xs-center" style="width: 100%">{{ $t('noNotifications') }}</div>
+ <div v-if="alerts.length === 0" class="text-center" style="width: 100%">{{ $t('noNotifications') }}</div>
<div v-else class="flex-between-center">
<v-subheader v-if="newAlertCount > 0">{{ $t('new') }}</v-subheader>
<v-subheader v-else>{{ $t('notifications') }}</v-subheader>
diff --git a/webapp/src/components/NotificationsSnackbars.vue b/webapp/src/components/NotificationsSnackbars.vue
index c01c5c4..f8e3ecf 100644
--- a/webapp/src/components/NotificationsSnackbars.vue
+++ b/webapp/src/components/NotificationsSnackbars.vue
@@ -11,6 +11,7 @@
<template>
<v-snackbar
+ class="ma-4"
v-model="showSnackbar"
bottom
right
@@ -19,7 +20,7 @@
>
{{ currentSnackbar.text }}
<v-btn
- flat
+ text
@click="showSnackbar = false"
>
{{ $t('close') }}
diff --git a/webapp/src/components/PermissionModule.vue b/webapp/src/components/PermissionModule.vue
index 4a6838e..c86d8a8 100644
--- a/webapp/src/components/PermissionModule.vue
+++ b/webapp/src/components/PermissionModule.vue
@@ -22,7 +22,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="elevation-3">
- <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">verified_user</v-icon>{{ $t('roles') }}</v-tab>
<v-tab><v-icon class="tabbar-tabicon">people</v-icon>{{ $t('users') }}</v-tab>
</v-tabs>
diff --git a/webapp/src/components/PermissionModuleDelete.vue b/webapp/src/components/PermissionModuleDelete.vue
index 01e4957..df2e81d 100644
--- a/webapp/src/components/PermissionModuleDelete.vue
+++ b/webapp/src/components/PermissionModuleDelete.vue
@@ -25,7 +25,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
<v-btn color="error" @click="deleteRoles">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/PermissionModuleEdit.vue b/webapp/src/components/PermissionModuleEdit.vue
index 7da3565..bd44860 100644
--- a/webapp/src/components/PermissionModuleEdit.vue
+++ b/webapp/src/components/PermissionModuleEdit.vue
@@ -83,7 +83,7 @@
<v-stepper v-model="step" horizontal style="width: 100%; background: transparent" class="elevation-0">
<v-stepper-items>
<v-stepper-content step="1">
- <v-layout row wrap>
+ <v-layout wrap>
<v-flex xs12 md5>
<v-text-field
:value="name"
@@ -127,7 +127,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
+ <v-btn text @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="submit" type="submit">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
<v-btn color="primary" v-show="step == 1" @click.native="completeStepOne()">{{ $t('continue') }}</v-btn>
<v-btn color="primary" v-show="step == 2" @click.native="completeStepTwo()">{{ $t('continue') }}</v-btn>
diff --git a/webapp/src/components/PermissionModuleGrantRevoke.vue b/webapp/src/components/PermissionModuleGrantRevoke.vue
index 10a5ad6..1675477 100644
--- a/webapp/src/components/PermissionModuleGrantRevoke.vue
+++ b/webapp/src/components/PermissionModuleGrantRevoke.vue
@@ -42,7 +42,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
+ <v-btn text @click.native="$store.commit('permissions/setDialog', { show : false } )">{{ $t('cancel') }}</v-btn>
<v-btn type="submit" @click="submit" v-if="grant" class="success">{{ $t('grant') }}</v-btn>
<v-btn type="submit" @click="submit" v-if="revoke" class="error">{{ $t('revoke') }}</v-btn>
</v-card-actions>
diff --git a/webapp/src/components/PermissionModuleRoleList.vue b/webapp/src/components/PermissionModuleRoleList.vue
index 9f9ac73..effaedc 100644
--- a/webapp/src/components/PermissionModuleRoleList.vue
+++ b/webapp/src/components/PermissionModuleRoleList.vue
@@ -22,15 +22,15 @@
<v-card>
<data-table v-model="selectedRoles" :headers="headers" :items="roles" @dblclick="editRole($event)">
<div slot="action" slot-scope="row" style="text-align: right">
- <v-btn flat icon color="primary" @click.stop="editRole(row.item)"><v-icon>edit</v-icon></v-btn>
+ <v-btn text icon color="primary" @click.stop="editRole(row.item)"><v-icon>edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn color="error" flat @click="deleteRole" :disabled="selectedRoles.length === 0">
+ <div class="text-right">
+ <v-btn class="ma-2" color="error" text @click="deleteRole" :disabled="selectedRoles.length === 0">
<v-icon left>remove_circle_outline</v-icon>{{ $tc('delete-role', selectedRoles.length, [selectedRoles.length]) }}
</v-btn>
- <v-btn color="success" flat @click="createRole">
+ <v-btn class="ma-2" color="success" text @click="createRole">
<v-icon left>add_circle_outline</v-icon>{{ $t('create-role') }}
</v-btn>
</div>
diff --git a/webapp/src/components/PermissionModuleUserList.vue b/webapp/src/components/PermissionModuleUserList.vue
index d25d1e8..83b2ee5 100644
--- a/webapp/src/components/PermissionModuleUserList.vue
+++ b/webapp/src/components/PermissionModuleUserList.vue
@@ -24,18 +24,20 @@
<div slot="roles" slot-scope="row">
<template v-for="role in row.item.roles">
<v-tooltip top :key="role.id">
- <v-chip small slot="activator">{{ role.name }}</v-chip>
+ <template #activator="{ on }">
+ <v-chip small v-on="on">{{ role.name }}</v-chip>
+ </template>
<span>{{ role.descr }}</span>
</v-tooltip>
</template>
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn color="error" flat @click="revokeRoles" :disabled="selectedUsers.length === 0">
+ <div class="text-right">
+ <v-btn class="ma-2" color="error" text @click="revokeRoles" :disabled="selectedUsers.length === 0">
<v-icon left>remove_circle_outline</v-icon>{{ $t('revoke-role') }}
</v-btn>
- <v-btn color="success" flat @click="grantRoles" :disabled="selectedUsers.length === 0">
+ <v-btn class="ma-2" color="success" text @click="grantRoles" :disabled="selectedUsers.length === 0">
<v-icon left>add_circle_outline</v-icon>{{ $t('grant-role') }}
</v-btn>
</div>
diff --git a/webapp/src/components/RegistrationModule.vue b/webapp/src/components/RegistrationModule.vue
index c921e9c..e970ded 100644
--- a/webapp/src/components/RegistrationModule.vue
+++ b/webapp/src/components/RegistrationModule.vue
@@ -20,7 +20,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">extension</v-icon>{{ $t('hooks') }}</v-tab>
</v-tabs>
</v-card>
@@ -29,33 +29,33 @@
<v-subheader>{{ $t('hooksInOrder') }}</v-subheader>
<v-card v-if="hooks.length > 0">
<v-list two-line>
- <draggable :value="hooks" @input="setHooks($event)" :options="{ handle:'.handle' }">
- <v-list-tile v-for="(hook, index) in hooks" :key="hook.id" @click.stop @dblclick="editHook(hook)">
- <v-list-tile-action class="handle">
- <v-icon>drag_handle</v-icon>{{ index + 1 }}
- </v-list-tile-action>
- <v-list-tile-content>
- <v-list-tile-title>{{ hook.name }}<small class="type">{{ hook.type }}</small></v-list-tile-title>
- <v-list-tile-sub-title>{{ hook.description }}</v-list-tile-sub-title>
- </v-list-tile-content>
+ <draggable :value="hooks" @input="setHooks($event)" handle=".handle">
+ <v-list-item v-for="(hook, index) in hooks" :key="hook.id" @click.stop @dblclick="editHook(hook)">
+ <v-list-item-action class="handle">
+ <v-icon class="mr-6">drag_handle</v-icon>{{ index + 1 }}
+ </v-list-item-action>
+ <v-list-item-content>
+ <v-list-item-title>{{ hook.name }}<small class="type">{{ hook.type }}</small></v-list-item-title>
+ <v-list-item-subtitle>{{ hook.description }}</v-list-item-subtitle>
+ </v-list-item-content>
<v-tooltip v-if="hook.groups.length > 0" top>
<template #activator="{ on }">
- <v-icon v-on="on" small>category</v-icon>
+ <v-icon v-on="on" small class="mr-6">category</v-icon>
</template>
<span>{{ $t('groupRestricted') }}</span>
</v-tooltip>
- <v-list-tile-action>
+ <v-list-item-action>
<v-btn @click="editHook(hook)" icon><v-icon color="primary">edit</v-icon></v-btn>
- </v-list-tile-action>
- <v-list-tile-action class="delete">
+ </v-list-item-action>
+ <v-list-item-action class="delete">
<v-btn @click="deleteHook(hook)" icon><v-icon color="error">delete</v-icon></v-btn>
- </v-list-tile-action>
- </v-list-tile>
+ </v-list-item-action>
+ </v-list-item>
</draggable>
</v-list>
</v-card>
- <div class="text-xs-right">
- <v-btn flat color="success" @click="createHook"><v-icon left>create</v-icon>{{ $t('createHook') }}</v-btn>
+ <div class="text-right">
+ <v-btn text color="success" @click="createHook" class="ma-2"><v-icon left>create</v-icon>{{ $t('createHook') }}</v-btn>
</div>
</v-tab-item>
</v-tabs-items>
diff --git a/webapp/src/components/RegistrationModuleDelete.vue b/webapp/src/components/RegistrationModuleDelete.vue
index 1b0d42c..753c199 100644
--- a/webapp/src/components/RegistrationModuleDelete.vue
+++ b/webapp/src/components/RegistrationModuleDelete.vue
@@ -20,7 +20,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn color="error" @click="deleteItems">{{ $t('delete') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index 81b15fb..b0ad9e9 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -27,7 +27,7 @@
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
<v-card-text style="height: 100%;">
- <v-layout row wrap>
+ <v-layout wrap>
<v-flex xs12 sm9>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
</v-flex>
@@ -47,7 +47,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveHook">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 6f188a2..5deafa3 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -12,35 +12,37 @@
</i18n>
<template>
- <v-input class="v-text-field select-input" :class="inputClasses" :hide-details="hideDetails" :prepend-icon="prependIcon" :value="value" :rules="rules">
- <v-menu v-model="menu" offset-y :close-on-content-click="false" lazy class="select-menu non-selectable" :nudge-bottom="1">
- <div slot="activator" class="select-input-content">
- <label v-if="label !== undefined && (!singleLine || (singleLine && value.length === 0))"
- class="select-label v-label"
- :class="labelClasses"
- >{{ label }}</label>
- <div class="select-input-chips">
- <v-tooltip v-for="(item, index) in firstValueItems" :key="item[idKey]" top open-delay="800">
- <template #activator="{ on }">
- <v-chip
- v-on="on"
- class="item-chip"
- :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
- small
- close
- @input="removeItem(index)"
- >
- <div class="select-input-chip-text">{{ item.name || item.id }}</div>
- </v-chip>
- </template>
- <span>{{ item.name || item.id }}</span>
- </v-tooltip>
- <span v-if="value.length > maxShow" class="text--secondary and-more" :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }">
- + {{ value.length - maxShow }} {{ $t('more') }}
- </span>
+ <v-input class="v-text-field v-text-field--is-booted select-input" :class="inputClasses" :hide-details="hideDetails" :prepend-icon="prependIcon" :value="value" :rules="rules">
+ <v-menu v-model="menu" offset-y :close-on-content-click="false" class="select-menu non-selectable" :nudge-bottom="1">
+ <template #activator="{ on }">
+ <div v-on="on" class="select-input-content">
+ <label v-if="label !== undefined && (!singleLine || (singleLine && value.length === 0))"
+ class="select-label v-label"
+ :class="labelClasses"
+ >{{ label }}</label>
+ <div class="select-input-chips">
+ <v-tooltip v-for="(item, index) in firstValueItems" :key="item[idKey]" top open-delay="800">
+ <template #activator="{ on }">
+ <v-chip
+ v-on="on"
+ class="item-chip ma-1"
+ :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
+ small
+ close
+ @click:close="removeItem(index)"
+ >
+ <div class="select-input-chip-text">{{ item.name || item.id }}</div>
+ </v-chip>
+ </template>
+ <span>{{ item.name || item.id }}</span>
+ </v-tooltip>
+ <span v-if="value.length > maxShow" class="text--secondary and-more" :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }">
+ + {{ value.length - maxShow }} {{ $t('more') }}
+ </span>
+ </div>
+ <v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
</div>
- <v-icon class="select-input-arrow" :class="{ 'expand-arrow-flipped': menu }" :color="menu ? 'primary' : ''">arrow_drop_down</v-icon>
- </div>
+ </template>
<v-card>
<data-table
:value="value"
@@ -50,7 +52,8 @@
slim
:row-count="6"
:single-select="singleSelect"
- ></data-table>
+ >
+ </data-table>
</v-card>
</v-menu>
</v-input>
@@ -117,7 +120,8 @@ export default {
},
data () {
return {
- menu: false
+ menu: false,
+ listView: false
}
},
computed: {
@@ -205,6 +209,7 @@ export default {
.select-input-chip-text {
overflow: hidden;
text-overflow: ellipsis;
+ width: 100%;
}
.item-chip >>> .v-chip__content {
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index 8fea4d2..7b3477f 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -30,7 +30,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ <v-tabs :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor"
v-model="tab"
centered
grow
diff --git a/webapp/src/components/StartPage.vue b/webapp/src/components/StartPage.vue
index fa5da86..2b3dc12 100644
--- a/webapp/src/components/StartPage.vue
+++ b/webapp/src/components/StartPage.vue
@@ -8,9 +8,17 @@
</i18n>
<template>
- <v-app dark class="grey darken-4 non-selectable">
- <div class="start-page">
- <img class="logo non-draggable" src="@/assets/logo.svg" />
+ <v-app class="grey darken-4 non-selectable">
+
+ <div class="setting-buttons">
+ <v-btn class="ma-2" icon @click="$store.commit('saveSetting', { name: 'dark', value: !settings.dark })">
+ <v-icon>invert_colors</v-icon>
+ </v-btn>
+ </div>
+
+ <div dark class="start-page">
+ <img v-if="settings.dark" class="logo" src="@/assets/logo.svg"/>
+ <img v-else class="logo" src="@/assets/logo-light.svg"/>
<router-view></router-view>
</div>
<notifications-snackbars></notifications-snackbars>
@@ -18,9 +26,11 @@
</template>
<script>
+import { mapState } from 'vuex'
import NotificationsSnackbars from '@/components/NotificationsSnackbars'
import StartPageLogin from '@/components/StartPageLogin'
import StartPageSetup from '@/components/StartPageSetup'
+
export default {
name: 'StartPage',
routes () {
@@ -31,11 +41,26 @@ export default {
},
components: {
NotificationsSnackbars
+ },
+ computed: {
+ ...mapState(['settings', 'user']),
+ dark () { return this.settings.dark }
+ },
+ watch: {
+ dark (value) {
+ this.$vuetify.theme.dark = value
+ }
}
}
</script>
<style scoped>
+.setting-buttons {
+ position: absolute;
+ top: 0;
+ right: 0;
+}
+
.start-page {
height: 100%;
width: 100%;
diff --git a/webapp/src/components/StartPageSetup.vue b/webapp/src/components/StartPageSetup.vue
index 8b7e941..3bed6ea 100644
--- a/webapp/src/components/StartPageSetup.vue
+++ b/webapp/src/components/StartPageSetup.vue
@@ -34,7 +34,7 @@
<template>
<div class="setup-page">
<label class="error--text" style="font-size: large; margin-bottom: 20px;margin-top: -20px;">{{ $t('createRoot') }}</label>
- <div class="text-xs-right">
+ <div class="text-right">
<signup v-model="user" ref="setupRoot"></signup>
<v-btn @click="setup" class="setup-button primary" raised>{{ $t('signup') }}</v-btn>
</div>
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue
index b6c5269..ec74e16 100644
--- a/webapp/src/components/UserModule.vue
+++ b/webapp/src/components/UserModule.vue
@@ -26,7 +26,7 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
+ <v-tabs :dark="tabsDark" :background-color="tabsColor" :slider-color="tabsSliderColor"
grow
hide-slider
v-model="tab"
@@ -41,15 +41,15 @@
<v-card>
<data-table v-model="selectedUsers" :headers="headers" :items="users" @dblclick="editUser($event.id)">
<div slot="action" slot-scope="row" style="text-align: right">
- <v-btn flat icon color="primary" @click.stop="editUser(row.item.id)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
+ <v-btn text icon color="primary" @click.stop="editUser(row.item.id)" :class="row.index === 0 ? 'tutorial-element label-top-left element-icon' : ''" style="--label-number: '3'"><v-icon>edit</v-icon></v-btn>
</div>
</data-table>
</v-card>
- <div class="text-xs-right">
- <v-btn color="error" flat @click="deleteUsers" :disabled="selectedUsers.length === 0" class="tutorial-element label-left" style="--label-number: '2'">
+ <div class="text-right">
+ <v-btn color="error" text @click="deleteUsers" :disabled="selectedUsers.length === 0" class="ma-2 tutorial-element label-left" style="--label-number: '2'">
<v-icon left>delete</v-icon>{{ $tc('deleteUsers', selectedUsers.length, [selectedUsers.length]) }}
</v-btn>
- <v-btn color="success" flat @click="editUser(0)" class="tutorial-element label-right" style="--label-number: '1'">
+ <v-btn color="success" text @click="editUser(0)" class="ma-2 tutorial-element label-right" style="--label-number: '1'">
<v-icon left>edit</v-icon>{{ $t('createUser') }}
</v-btn>
</div>
diff --git a/webapp/src/components/UserModuleDelete.vue b/webapp/src/components/UserModuleDelete.vue
index c0c54e1..1cebd33 100644
--- a/webapp/src/components/UserModuleDelete.vue
+++ b/webapp/src/components/UserModuleDelete.vue
@@ -26,7 +26,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="doIDeleteMyself ? 'white' : 'error'" @click="deleteItems"><div :class="doIDeleteMyself ? 'red--text' : 'white--text'">{{ $t('delete') }}</div></v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/components/UserModuleEdit.vue b/webapp/src/components/UserModuleEdit.vue
index e134a7e..29dd55c 100644
--- a/webapp/src/components/UserModuleEdit.vue
+++ b/webapp/src/components/UserModuleEdit.vue
@@ -28,7 +28,7 @@
<v-divider></v-divider>
<v-card-actions>
<v-spacer></v-spacer>
- <v-btn flat="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
+ <v-btn text="flat" @click="setDialog({ show: false })">{{ $t('cancel') }}</v-btn>
<v-btn :color="dialog.info.id ? 'primary' : 'success'" @click="saveUser">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
</v-card-actions>
</v-card>
diff --git a/webapp/src/main.js b/webapp/src/main.js
index 0ace2fc..93f1224 100644
--- a/webapp/src/main.js
+++ b/webapp/src/main.js
@@ -1,3 +1,4 @@
+import '@mdi/font/css/materialdesignicons.css'
import Vue from 'vue'
import Vuetify from 'vuetify'
import 'vuetify/dist/vuetify.min.css'
@@ -36,9 +37,19 @@ const i18n = new VueI18n({
messages: i18nMessages
})
-Vue.use(Vuetify, {
+Vue.use(Vuetify)
+
+const vuetify = new Vuetify({
theme: {
- primary: '#0095ff'
+ dark: store.state.settings.dark,
+ themes: {
+ light: {
+ primary: '#0095ff'
+ },
+ dark: {
+ primary: '#0095ff'
+ }
+ }
},
lang: {
t: (key, ...params) => i18n.t(key, params)
@@ -132,6 +143,7 @@ new Vue({
store,
router,
i18n,
+ vuetify,
computed: {
locale: () => store.state.settings.locale
},