summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-02-26 02:39:09 +0100
committerUdo Walter2019-02-26 02:39:09 +0100
commit5e0e32ef49c1007c179fe8fd7b598a53f6e91143 (patch)
tree714da0789127fe607f28f15ebbe7331d5b5439ea /webapp
parent[webapp] small ui fixes (diff)
downloadbas-5e0e32ef49c1007c179fe8fd7b598a53f6e91143.tar.gz
bas-5e0e32ef49c1007c179fe8fd7b598a53f6e91143.tar.xz
bas-5e0e32ef49c1007c179fe8fd7b598a53f6e91143.zip
[webapp] small tabbar design tweaks
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/assets/styles.css17
-rw-r--r--webapp/src/components/AccountModule.vue5
-rw-r--r--webapp/src/components/BackendModule.vue7
-rw-r--r--webapp/src/components/ConfiguratorModule.vue14
-rw-r--r--webapp/src/components/ConfiguratorModuleAssign.vue44
-rw-r--r--webapp/src/components/GroupModule.vue4
-rw-r--r--webapp/src/components/IpxeBuilderModule.vue8
-rw-r--r--webapp/src/components/PermissionModule.vue8
-rw-r--r--webapp/src/components/RegistrationModule.vue4
-rw-r--r--webapp/src/components/SettingsModule.vue4
-rw-r--r--webapp/src/components/UserModule.vue7
11 files changed, 68 insertions, 54 deletions
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index 0bcfdfe..e9f292f 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -31,25 +31,18 @@ html {
display: none;
}
-.tabs-wrapper {
- display: flex;
- flex-direction: column
-}
-
-.tabs-wrapper > .v-tabs__items {
- padding: 0 5px;
- margin: 0 -5px;
- flex: 1
-}
-
.tabbar-card {
position: sticky;
top: 64px;
z-index: 9;
}
+.tabbar-card .v-tabs .v-tabs__item {
+ text-transform: none !important;
+}
+
.tabbar-tabicon {
- margin-right: 10px;
+ margin-right: 12px;
}
.no-animation {
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index 22ad287..abb5439 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -62,11 +62,12 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card>
<v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
v-model="tab"
- centered
+ grow
+ hide-slider
>
<v-tab>
<v-icon class="tabbar-tabicon">assignment_ind</v-icon>
diff --git a/webapp/src/components/BackendModule.vue b/webapp/src/components/BackendModule.vue
index c48c20d..d499437 100644
--- a/webapp/src/components/BackendModule.vue
+++ b/webapp/src/components/BackendModule.vue
@@ -16,14 +16,15 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card>
<v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
v-model="tab"
- centered
+ grow
+ hide-slider
>
<v-tab>
- {{ $t('backends') }}
+ <v-icon class="tabbar-tabicon">cloud</v-icon>{{ $t('backends') }}
</v-tab>
</v-tabs>
</v-card>
diff --git a/webapp/src/components/ConfiguratorModule.vue b/webapp/src/components/ConfiguratorModule.vue
index 9682dc0..f7255b1 100644
--- a/webapp/src/components/ConfiguratorModule.vue
+++ b/webapp/src/components/ConfiguratorModule.vue
@@ -28,9 +28,9 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" centered :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :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>
@@ -75,7 +75,7 @@
<v-dialog
:value="dialog.show"
@input="setDialog({ show: $event })"
- :max-width="dialog.type === 'delete' || dialog.type === 'assign' ? '500px' : '1200px'"
+ :max-width="dialogWidthMap[dialog.type]"
scrollable
:persistent="dialog.type !== 'delete'"
:fullscreen="$vuetify.breakpoint.smAndDown"
@@ -109,7 +109,13 @@ export default {
return {
tabs: 0,
selectedConfigs: [],
- selectedEntries: []
+ selectedEntries: [],
+ dialogWidthMap: {
+ 'delete': '500px',
+ 'assign': '600px',
+ 'config': '1200px',
+ 'entry': '1200px'
+ }
}
},
computed: {
diff --git a/webapp/src/components/ConfiguratorModuleAssign.vue b/webapp/src/components/ConfiguratorModuleAssign.vue
index 6f6e61f..8c9ba83 100644
--- a/webapp/src/components/ConfiguratorModuleAssign.vue
+++ b/webapp/src/components/ConfiguratorModuleAssign.vue
@@ -21,27 +21,29 @@
<v-card style="overflow: hidden">
<v-card-title class="dialog-title elevation-3">
<div class="headline">{{ $t('title') }}</div>
- <v-subheader>asdf</v-subheader>
+ <div class="subheading text--secondary pa-2">{{ dialog.info.name }}</div>
</v-card-title>
- <v-card-text style="height: 100%;">
- <v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
- <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>
+ <v-card-text class="dialog-content">
+ <data-table v-model="selectedGroups" :headers="groupHeaders" :items="groupList" slim></data-table>
</v-card-text>
<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 :color="dialog.info.id ? 'primary' : 'success'" @click="saveEntry">{{ dialog.info.id ? $t('save') : $t('create') }}</v-btn>
+ <v-btn color="primary" @click="saveEntry">{{ $t('assign') }}</v-btn>
</v-card-actions>
</v-card>
</template>
<script>
+import DataTable from '@/components/DataTable'
import { mapState } from 'vuex'
export default {
name: 'ConfiguratorModuleEntry',
+ components: {
+ DataTable
+ },
data () {
return {
selectedGroups: [],
@@ -50,7 +52,19 @@ export default {
},
computed: {
...mapState('configurator', ['dialog']),
- ...mapState('groups', ['groupList', 'clientList'])
+ ...mapState('groups', ['groupList', 'clientList']),
+ groupHeaders () {
+ return [
+ { key: 'name', text: this.$t('name') },
+ { key: 'description', text: this.$t('description') }
+ ]
+ },
+ clientHeaders () {
+ return [
+ { key: 'name', text: this.$t('name') },
+ { key: 'ip', text: this.$t('ip') }
+ ]
+ }
},
watch: {
dialog: {
@@ -93,18 +107,14 @@ export default {
<style scoped>
.dialog-title {
z-index: 1;
-}
-
-.script-heading {
display: flex;
- align-items: center;
-}
-
-.script-heading > span {
- margin-left: 9px;
+ flex-direction: column;
+ align-items: flex-start;
}
-.script-editor {
- margin-top: 8px;
+.dialog-content {
+ height: 100%;
+ margin: 0;
+ padding: 0;
}
</style>
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 32ea4fd..0c9d6ef 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -10,8 +10,8 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
- <v-card class="tabbar-card" style="display: flex; justify-content: space-between">
+ <v-flex xl10 offset-xl1 lg12>
+ <v-card class="tabbar-card non-selectable" style="display: flex; justify-content: space-between">
<v-tabs :value="activeTab" @change="setActiveTab" :dark="tabsDark" :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>
diff --git a/webapp/src/components/IpxeBuilderModule.vue b/webapp/src/components/IpxeBuilderModule.vue
index 56fd4ab..2cd6eaf 100644
--- a/webapp/src/components/IpxeBuilderModule.vue
+++ b/webapp/src/components/IpxeBuilderModule.vue
@@ -14,11 +14,11 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" centered :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
- <v-tab>{{ $t('efi') }}</v-tab>
- <v-tab>{{ $t('bios') }}</v-tab>
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tab><v-icon class="tabbar-tabicon">memory</v-icon>{{ $t('efi') }}</v-tab>
+ <v-tab><v-icon class="tabbar-tabicon">memory</v-icon>{{ $t('bios') }}</v-tab>
</v-tabs>
</v-card>
diff --git a/webapp/src/components/PermissionModule.vue b/webapp/src/components/PermissionModule.vue
index 9d6d77a..15d9adc 100644
--- a/webapp/src/components/PermissionModule.vue
+++ b/webapp/src/components/PermissionModule.vue
@@ -20,14 +20,14 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card>
<v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
- centered
+ grow
v-model="tab"
>
- <v-tab>{{ $t('roles') }}</v-tab>
- <v-tab>{{ $t('users') }}</v-tab>
+ <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>
</v-card>
<v-tabs-items v-model="tab" v-if="canView">
diff --git a/webapp/src/components/RegistrationModule.vue b/webapp/src/components/RegistrationModule.vue
index aedd53e..4e66019 100644
--- a/webapp/src/components/RegistrationModule.vue
+++ b/webapp/src/components/RegistrationModule.vue
@@ -14,9 +14,9 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" centered :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
+ <v-tabs v-model="tabs" grow hide-slider :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
<v-tab><v-icon class="tabbar-tabicon">extension</v-icon>{{ $t('hooks') }}</v-tab>
</v-tabs>
</v-card>
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index f285e07..10dc57d 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -26,11 +26,13 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card>
<v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
v-model="tab"
centered
+ grow
+
>
<v-tab>
<v-icon class="tabbar-tabicon">settings_applications</v-icon>{{ $t('general') }}
diff --git a/webapp/src/components/UserModule.vue b/webapp/src/components/UserModule.vue
index bee7607..01d097a 100644
--- a/webapp/src/components/UserModule.vue
+++ b/webapp/src/components/UserModule.vue
@@ -24,13 +24,14 @@
<template>
<v-container fill-height>
<v-layout>
- <v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
+ <v-flex xl10 offset-xl1 lg12>
<v-card>
<v-tabs :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor"
- centered
+ grow
+ hide-slider
v-model="tab"
>
- <v-tab>{{ $t('users') }}</v-tab>
+ <v-tab><v-icon class="tabbar-tabicon">people</v-icon>{{ $t('users') }}</v-tab>
</v-tabs>
</v-card>
<v-tabs-items v-model="tab">