summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/GroupModuleGroupView.vue
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/src/components/GroupModuleGroupView.vue
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/src/components/GroupModuleGroupView.vue')
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue38
1 files changed, 23 insertions, 15 deletions
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;
}