summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-03-27 15:00:14 +0100
committerUdo Walter2019-03-27 15:00:14 +0100
commitc69d30fac05883b0e40f22a54a184b60001672ec (patch)
tree829209697e0aa048341a99eb4609595f32b53cdf /webapp
parent[docutmentation] Add german language support (wip) (diff)
downloadbas-c69d30fac05883b0e40f22a54a184b60001672ec.tar.gz
bas-c69d30fac05883b0e40f22a54a184b60001672ec.tar.xz
bas-c69d30fac05883b0e40f22a54a184b60001672ec.zip
[webapp] small style fixes in groups module and selectbox
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/GroupModule.vue10
-rw-r--r--webapp/src/components/GroupModuleClientView.vue14
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue13
-rw-r--r--webapp/src/components/SelectBox.vue29
-rw-r--r--webapp/src/config/dashboard.js4
-rw-r--r--webapp/src/config/i18n.js2
6 files changed, 48 insertions, 24 deletions
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index d12be50..36d6fcb 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -18,7 +18,7 @@
<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'" 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>
+ <div v-if="item.id > 0 || item.id === 'create'" class="tab-text">{{ item.name ? item.name : item.id !== 'create' ? item.id : ' . . . . . . . . . . ' }}</div>
</v-tab>
</template>
</v-tabs>
@@ -118,3 +118,11 @@ export default {
}
}
</script>
+
+<style scoped>
+.tab-text {
+ width: 100%;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+</style>
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 5f6ec5e..191c626 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -45,10 +45,16 @@
<div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('groups') }}</span></div>
<div class="info-text">
<select-box v-if="editMode" v-model="groups" :items="groupList" class="info-input" hide-details></select-box>
- <div v-else class="chip-container">
- <v-chip v-for="group in firstGroups" :key="group.id" small label style="width: calc(50% - 8px)">
- <span class="chip-text">{{ group.name || group.id }}</span>
- </v-chip>
+ <div v-else class="chip-container non-selectable">
+ <v-tooltip v-for="group in firstGroups" :key="group.id" top open-delay="800">
+ <template #activator="{ on }">
+ <v-chip v-on="on" small label style="width: calc(50% - 8px)">
+ <span class="chip-text">{{ group.name || group.id }}</span>
+ </v-chip>
+ </template>
+ <span>{{ group.name || group.id }}</span>
+ </v-tooltip>
+
<span v-if="client.groups && client.groups.length > 5" class="and-more">+ {{ client.groups.length - 5 }} {{ $t('more') }}</span>
<span v-else-if="client.groups === undefined || client.groups.length === 0">-</span>
</div>
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index fcfd390..33145a3 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -57,10 +57,15 @@
<div class="body-2 info-heading"><v-icon>device_hub</v-icon><span>{{ $t('parents') }}</span></div>
<div class="info-text">
<select-box v-if="editMode" v-model="parents" :items="groupList" class="info-input" hide-details></select-box>
- <div v-else class="chip-container">
- <v-chip v-for="parent in firstParents" :key="parent.id" small label style="width: calc(50% - 8px)">
- <span class="chip-text">{{ parent.name || parent.id }}</span>
- </v-chip>
+ <div v-else class="chip-container non-selectable">
+ <v-tooltip v-for="parent in firstParents" :key="parent.id" top open-delay="800">
+ <template #activator="{ on }">
+ <v-chip v-on="on" small label style="width: calc(50% - 8px)">
+ <span class="chip-text">{{ parent.name || parent.id }}</span>
+ </v-chip>
+ </template>
+ <span>{{ parent.name || parent.id }}</span>
+ </v-tooltip>
<span v-if="group.parents && group.parents.length > 5" class="and-more">+ {{ group.parents.length - 5 }} {{ $t('more') }}</span>
<span v-else-if="group.parents === undefined || group.parents.length === 0">-</span>
</div>
diff --git a/webapp/src/components/SelectBox.vue b/webapp/src/components/SelectBox.vue
index 98a207c..900b604 100644
--- a/webapp/src/components/SelectBox.vue
+++ b/webapp/src/components/SelectBox.vue
@@ -20,18 +20,22 @@
:class="labelClasses"
>{{ label }}</label>
<div class="select-input-chips">
- <v-chip
- class="item-chip"
- :style="{ width: 'calc(' + (100 / maxColumns) + '% - 8px)' }"
- v-for="(item, index) in firstValueItems"
- :key="item[idKey]"
- small
- label
- close
- @input="removeItem(index)"
- >
- <div class="select-input-chip-text">{{ item.name || item.id }}</div>
- </v-chip>
+ <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
+ label
+ 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>
@@ -192,6 +196,7 @@ export default {
display: flex;
flex-wrap: wrap;
flex: 1;
+ width: 0;
}
.select-input-chip-text {
diff --git a/webapp/src/config/dashboard.js b/webapp/src/config/dashboard.js
index 7a5244e..e049dc5 100644
--- a/webapp/src/config/dashboard.js
+++ b/webapp/src/config/dashboard.js
@@ -11,11 +11,11 @@ import EventModule from '@/components/EventModule'
export default [
{ path: 'groups', component: GroupModule, icon: 'category' },
{ path: 'configurator', component: ConfiguratorModule, icon: 'list' },
+ { path: 'events', component: EventModule, icon: 'event' },
{ path: 'registration', component: RegistrationModule, icon: 'assignment' },
{ path: 'backends', component: BackendModule, icon: 'cloud' },
{ path: 'permissions', component: PermissionModule, icon: 'lock_open' },
{ path: 'ipxe', component: IpxeBuilderModule, icon: 'merge_type' },
{ path: 'users', component: UserModule, icon: 'contacts' },
- { path: 'log', component: LogModule, icon: 'error_outline' },
- { path: 'events', component: EventModule, icon: 'event' }
+ { path: 'log', component: LogModule, icon: 'error_outline' }
]
diff --git a/webapp/src/config/i18n.js b/webapp/src/config/i18n.js
index 25e6f3a..478695b 100644
--- a/webapp/src/config/i18n.js
+++ b/webapp/src/config/i18n.js
@@ -58,7 +58,7 @@ export default {
'noDataText': 'Keine Daten verfügbar'
},
'$dashboardModules': {
- 'GroupModule': 'Gruppen / Clienten',
+ 'GroupModule': 'Gruppen / Clients',
'ConfiguratorModule': 'iPXE Konfigurator',
'RegistrationModule': 'Client Registrierung',
'BackendModule': 'Externe Backends',