summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-02-25 23:27:43 +0100
committerUdo Walter2019-02-25 23:27:43 +0100
commit24781d33c17f78f25d93b022eaa49b3baa1361ac (patch)
tree0a6ac1c237dd0db9b56f33b8f7636f1655f0457b /webapp
parent[configloader] fix non-expert-mode not loading correctly (diff)
downloadbas-24781d33c17f78f25d93b022eaa49b3baa1361ac.tar.gz
bas-24781d33c17f78f25d93b022eaa49b3baa1361ac.tar.xz
bas-24781d33c17f78f25d93b022eaa49b3baa1361ac.zip
[webapp/groups] ipranges design change; add icons to some tabs
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/assets/styles.css4
-rw-r--r--webapp/src/components/AccountModule.vue1
-rw-r--r--webapp/src/components/ConfiguratorModule.vue4
-rw-r--r--webapp/src/components/GroupModule.vue2
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue38
-rw-r--r--webapp/src/components/RegistrationModule.vue2
-rw-r--r--webapp/src/components/SettingsModule.vue4
7 files changed, 34 insertions, 21 deletions
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index 59bd978..0bcfdfe 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -48,6 +48,10 @@ html {
z-index: 9;
}
+.tabbar-tabicon {
+ margin-right: 10px;
+}
+
.no-animation {
/*CSS transitions*/
-o-transition-property: none !important;
diff --git a/webapp/src/components/AccountModule.vue b/webapp/src/components/AccountModule.vue
index 3823633..3b3b2e4 100644
--- a/webapp/src/components/AccountModule.vue
+++ b/webapp/src/components/AccountModule.vue
@@ -69,6 +69,7 @@
centered
>
<v-tab>
+ <v-icon class="tabbar-tabicon">assignment_ind</v-icon>
{{ $t('accountInfo') }}
</v-tab>
</v-tabs>
diff --git a/webapp/src/components/ConfiguratorModule.vue b/webapp/src/components/ConfiguratorModule.vue
index 6f2cebd..597ff30 100644
--- a/webapp/src/components/ConfiguratorModule.vue
+++ b/webapp/src/components/ConfiguratorModule.vue
@@ -31,8 +31,8 @@
<v-flex class="tabs-wrapper" 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('configs') }}</v-tab>
- <v-tab>{{ $t('entries') }}</v-tab>
+ <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>
</v-card>
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index 0634008..32ea4fd 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -17,7 +17,7 @@
<v-icon v-if="item.id > 0 || item.id === 'create'" :key="'arrow' + index">keyboard_arrow_right</v-icon>
<v-tab ripple :key="'tab' + index">
<v-icon v-if="item.tabType === 'group' && item.id === 0">home</v-icon>
- <v-icon v-if="item.tabType === 'client'" style="margin-right: 10px">computer</v-icon>
+ <v-icon v-if="item.tabType === 'client'" class="tabbar-tabicon">computer</v-icon>
<template v-if="item.id > 0 || item.id === 'create'">{{ item.name ? item.name : item.id !== 'create' ? item.id : ' . . . . . . . . . . ' }}</template>
</v-tab>
</template>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index ae8d533..59d57d1 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -98,19 +98,21 @@
</div>
<div class="info-box">
- <div class="body-2 info-heading">
- <v-icon>settings_ethernet</v-icon><span>{{ $t('ipranges') }}</span>
- <v-btn v-if="editMode" small icon @click="addIprange" class="info-heading-button"><v-icon>add</v-icon></v-btn>
- </div>
+ <div class="body-2 info-heading"><v-icon>settings_ethernet</v-icon><span>{{ $t('ipranges') }}</span></div>
<div class="info-text">
<div v-if="editMode">
- <div v-for="(iprange, index) in ipranges" :key="index" class="iprange">
- <v-btn class="iprange-remove-button" small icon @click="removeIprange(index)"><v-icon>remove</v-icon></v-btn>
- <v-text-field class="info-input" hide-details :label="$t('startIp')" color="primary" v-model="iprange.startIp" single-line></v-text-field>
+ <div v-for="(iprange, index) in ipranges" :key="index">
+ <div class="iprange">
+ <v-btn class="iprange-button" small icon @click="removeIprange(index)"><v-icon>remove</v-icon></v-btn>
+ <v-text-field solo flat hide-details :label="$t('startIp')" color="primary" v-model="iprange.startIp" single-line></v-text-field>
<span class="ip-seperator">-</span>
- <v-text-field class="info-input" hide-details :label="$t('endIp')" color="primary" v-model="iprange.endIp" single-line></v-text-field>
+ <v-text-field solo flat hide-details :label="$t('endIp')" color="primary" v-model="iprange.endIp" single-line></v-text-field>
+ </div>
+ <v-divider></v-divider>
+ </div>
+ <div class="iprange-add-wrapper">
+ <v-btn class="iprange-button" small icon @click="addIprange"><v-icon>add</v-icon></v-btn>
</div>
- <div v-if="ipranges && ipranges.length === 0">-</div>
</div>
<div v-else>
<table>
@@ -285,8 +287,18 @@ export default {
min-height: 34px;
}
+.iprange-add-wrapper {
+ height: 32px;
+ display: flex;
+ align-items: center;
+}
+
+.iprange >>> .v-text-field.v-text-field--solo .v-input__control {
+ min-height: 32px;
+}
+
.iprange >>> .v-label, .iprange >>> input {
- font-size: 14px !important;
+ font-size: 14px;
}
.chip-container {
@@ -315,7 +327,7 @@ export default {
padding: 0 10px;
}
-.iprange-remove-button {
+.iprange-button {
margin: 0 8px 0 0;
}
@@ -335,10 +347,6 @@ export default {
margin-bottom: 10px;
}
-.info-heading-button {
- margin: -2px 0 -2px 10px;
-}
-
.info-heading > span {
margin-left: 10px;
}
diff --git a/webapp/src/components/RegistrationModule.vue b/webapp/src/components/RegistrationModule.vue
index 61e5583..aedd53e 100644
--- a/webapp/src/components/RegistrationModule.vue
+++ b/webapp/src/components/RegistrationModule.vue
@@ -17,7 +17,7 @@
<v-flex class="tabs-wrapper" 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('hooks') }}</v-tab>
+ <v-tab><v-icon class="tabbar-tabicon">extension</v-icon>{{ $t('hooks') }}</v-tab>
</v-tabs>
</v-card>
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index 4b86f9c..f285e07 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -33,10 +33,10 @@
centered
>
<v-tab>
- <v-icon>settings_applications</v-icon>{{ $t('general') }}
+ <v-icon class="tabbar-tabicon">settings_applications</v-icon>{{ $t('general') }}
</v-tab>
<v-tab>
- <v-icon>color_lens</v-icon>{{ $t('appearance') }}
+ <v-icon class="tabbar-tabicon">color_lens</v-icon>{{ $t('appearance') }}
</v-tab>
</v-tabs>
</v-card>