summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorUdo Walter2019-01-16 18:54:58 +0100
committerUdo Walter2019-01-16 18:54:58 +0100
commitb8da9b16ab89bd8d781481ae6bfc5a3c63641618 (patch)
tree309ba0dcc6666a2f1c32ccdbf889ecd615be756a /webapp
parent[webapp] small bugfixes (diff)
downloadbas-b8da9b16ab89bd8d781481ae6bfc5a3c63641618.tar.gz
bas-b8da9b16ab89bd8d781481ae6bfc5a3c63641618.tar.xz
bas-b8da9b16ab89bd8d781481ae6bfc5a3c63641618.zip
[webapp/datatable] add button to filter only selected rows
+ some scrolling bugfixes
Diffstat (limited to 'webapp')
-rw-r--r--webapp/index.html3
-rw-r--r--webapp/src/assets/styles.css29
-rw-r--r--webapp/src/components/ConfiguratorModule.vue3
-rw-r--r--webapp/src/components/ConfiguratorModuleConfig.vue9
-rw-r--r--webapp/src/components/ConfiguratorModuleEntry.vue2
-rw-r--r--webapp/src/components/DataTable.vue65
-rw-r--r--webapp/src/components/GroupModule.vue9
-rw-r--r--webapp/src/components/GroupModuleClientList.vue47
-rw-r--r--webapp/src/components/GroupModuleClientView.vue3
-rw-r--r--webapp/src/components/GroupModuleDialog.vue1
-rw-r--r--webapp/src/components/GroupModuleGroupList.vue6
-rw-r--r--webapp/src/components/GroupModuleGroupView.vue3
-rw-r--r--webapp/src/components/RegistrationModule.vue3
-rw-r--r--webapp/src/components/RegistrationModuleEdit.vue2
-rw-r--r--webapp/src/components/SettingsModule.vue4
15 files changed, 87 insertions, 102 deletions
diff --git a/webapp/index.html b/webapp/index.html
index a7ac8cb..1e30823 100644
--- a/webapp/index.html
+++ b/webapp/index.html
@@ -7,7 +7,8 @@
<title>Dashboard</title>
<meta name="theme-color" content="#0195ff" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500" type="text/css">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto" type="text/css">
+ <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Mono">
</head>
<body>
<div id="app"></div>
diff --git a/webapp/src/assets/styles.css b/webapp/src/assets/styles.css
index c540d57..22bb716 100644
--- a/webapp/src/assets/styles.css
+++ b/webapp/src/assets/styles.css
@@ -1,5 +1,5 @@
html {
- overflow-y: auto;
+ overflow-y: scroll;
}
.non-selectable {
@@ -24,7 +24,7 @@ html {
}
::-webkit-scrollbar-corner {
- background: rgba(0,0,0,0);
+ background-color: transparent;
}
::-webkit-scrollbar-button {
@@ -42,11 +42,24 @@ html {
flex: 1
}
-.element-container {
- padding: 26px;
+.tabbar-card {
+ position: sticky;
+ top: 64px;
+ z-index: 2;
}
-.CodeMirror {
- min-height: 200px;
- height: auto;
-}
+.no-animation {
+/*CSS transitions*/
+-o-transition-property: none !important;
+-moz-transition-property: none !important;
+-ms-transition-property: none !important;
+-webkit-transition-property: none !important;
+transition-property: none !important;
+
+/*CSS animations*/
+-webkit-animation: none !important;
+-moz-animation: none !important;
+-o-animation: none !important;
+-ms-animation: none !important;
+animation: none !important;
+} \ No newline at end of file
diff --git a/webapp/src/components/ConfiguratorModule.vue b/webapp/src/components/ConfiguratorModule.vue
index 51889de..5121fcf 100644
--- a/webapp/src/components/ConfiguratorModule.vue
+++ b/webapp/src/components/ConfiguratorModule.vue
@@ -29,7 +29,7 @@
<v-container fill-height>
<v-layout>
<v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
- <v-card>
+ <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>
@@ -104,6 +104,7 @@
:max-width="dialog.type === 'delete' ? '500px' : '1200px'"
scrollable
:persistent="dialog.type !== 'delete'"
+ :fullscreen="$vuetify.breakpoint.xsOnly"
>
<configurator-module-delete v-if="dialog.type === 'delete'" />
<configurator-module-config v-else-if="dialog.type === 'config'"/>
diff --git a/webapp/src/components/ConfiguratorModuleConfig.vue b/webapp/src/components/ConfiguratorModuleConfig.vue
index 3b3c18e..a00f345 100644
--- a/webapp/src/components/ConfiguratorModuleConfig.vue
+++ b/webapp/src/components/ConfiguratorModuleConfig.vue
@@ -34,11 +34,11 @@
</i18n>
<template>
- <v-card>
+ <v-card style="overflow: hidden">
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
- <v-card-text>
+ <v-card-text style="height: 100%">
<v-layout wrap>
<v-flex>
<v-text-field prepend-icon="label" :label="$t('name')" color="primary" v-model="name"></v-text-field>
@@ -222,4 +222,9 @@ export default {
.script-editor {
margin-top: 8px;
}
+
+.script-editor >>> .CodeMirror {
+ height: calc(90vh - 340px);
+}
+
</style>
diff --git a/webapp/src/components/ConfiguratorModuleEntry.vue b/webapp/src/components/ConfiguratorModuleEntry.vue
index 01e2fd1..addbcf5 100644
--- a/webapp/src/components/ConfiguratorModuleEntry.vue
+++ b/webapp/src/components/ConfiguratorModuleEntry.vue
@@ -16,7 +16,7 @@
</i18n>
<template>
- <v-card>
+ <v-card style="overflow: hidden">
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 0443918..86aa789 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -56,14 +56,14 @@
}"
></v-select>
<v-btn v-if="index === 0" icon @click="newSearchField"><v-icon>add</v-icon></v-btn>
- <v-btn v-else icon @click="search.splice(search.indexOf(s), 1)"><v-icon>remove</v-icon></v-btn>
+ <v-btn v-else icon @click="removeSearchField(s)"><v-icon>remove</v-icon></v-btn>
</div>
</div>
<v-divider class="hidden-sm-and-up"></v-divider>
<v-divider vertical class="hidden-xs-only"></v-divider>
</v-flex>
<v-flex style="padding: 6px 16px" class="d-flex align-start non-selectable" xs12 sm6>
- <div class="d-flex align-center">
+ <div class="d-flex align-center" style="font-size: 12px">
<div>
<v-tooltip top open-delay="800">
<v-btn icon class="toggle-button" @click="regex = !regex" slot="activator">
@@ -77,18 +77,19 @@
</v-btn>
<span>{{ $t('caseSensitive') }}</span>
</v-tooltip>
+ <v-tooltip top open-delay="800">
+ <v-btn icon class="toggle-button" @click="onlyShowSelected = !onlyShowSelected" slot="activator">
+ <v-icon small :class="onlyShowSelected ? 'primary--text' : ''">check_box</v-icon>
+ </v-btn>
+ <span>{{ $t('onlyShowSelected') }}</span>
+ </v-tooltip>
</div>
- <div class="text-xs-center muted-text-color">
- {{ filterdRows.length + ' ' + $t('entries') }}
- <span
- @click="onlyShowSelected = !onlyShowSelected"
- :class="{ 'show-only-selected': onlyShowSelected }"
- :style="{ cursor: 'pointer' }"
- >
- {{ '(' + selected.length + ' ' + $t('selected') + ')' }}
- </span>
+
+ <div class="text-xs-center">
+ {{ filterdRows.length + ' ' + $t('entries') + ' (' + selected.length + ' ' + $t('selected') + ')' }}
</div>
- <div class="text-xs-right muted-text-color">
+
+ <div class="text-xs-right">
{{ $t('height') }}:
</div>
<v-select
@@ -366,6 +367,10 @@ export default {
},
key: null })
},
+ removeSearchField (s) {
+ this.search.splice(this.search.indexOf(s), 1)
+ window.dispatchEvent(new Event('scroll'))
+ },
toggleHeaderSort (header) {
if (header.text === undefined) return
const state = this.headerSortState[header.key]
@@ -387,28 +392,6 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-.muted-text-color {
- font-size: 12px;
-}
-
-.theme--dark .muted-text-color {
- color: rgba(255,255,255,0.7);
-}
-
-.theme--light .muted-text-color {
- color: rgba(0,0,0,0.54);
- font-weight: 500;
-}
-
-.theme--dark .show-only-selected {
- color: rgb(255,255,255);
-}
-
-.theme--light .show-only-selected {
- color: rgb(0,0,0,0.87);
- font-weight: 600;
-}
-
.toggle-button {
margin: 0;
padding: 0;
@@ -438,6 +421,7 @@ export default {
.search-field {
margin: 0;
padding: 0;
+ font-family: 'Roboto Mono';
}
.column-select {
@@ -447,7 +431,7 @@ export default {
.rowcount-select {
padding: 0;
display: inline-block;
- margin: 0 0 0 10px;
+
max-width: 80px;
}
@@ -465,6 +449,7 @@ export default {
.scroller {
overflow-x: auto;
font-size: 13px;
+ font-family: 'Roboto Mono';
}
.scroller >>> .vue-recycle-scroller__item-wrapper {
@@ -551,11 +536,15 @@ export default {
will-change: background;
}
+.table-row ::-webkit-scrollbar {
+ width: 3px;
+ height: 3px;
+}
+
.table-row > div, .table-head > div {
- margin: 0 24px;
+ margin: 0 16px;
white-space: nowrap;
- overflow: hidden;
- text-overflow: ellipsis;
+ overflow: auto;
}
.auto-width {
diff --git a/webapp/src/components/GroupModule.vue b/webapp/src/components/GroupModule.vue
index cc34350..cd487b0 100644
--- a/webapp/src/components/GroupModule.vue
+++ b/webapp/src/components/GroupModule.vue
@@ -113,12 +113,3 @@ export default {
}
}
</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-.tabbar-card {
- position: sticky;
- top: 64px;
- z-index: 2;
-}
-</style>
diff --git a/webapp/src/components/GroupModuleClientList.vue b/webapp/src/components/GroupModuleClientList.vue
index 35819d5..bc2e59a 100644
--- a/webapp/src/components/GroupModuleClientList.vue
+++ b/webapp/src/components/GroupModuleClientList.vue
@@ -28,27 +28,11 @@
<template>
<div>
<v-card>
- <component-search-table v-model="selected" :headers="headers" :items="clients" select-all :loading="loading">
- <template slot="items" slot-scope="row">
- <tr :style="row.color" @click="row.data.selected = !row.data.selected" @dblclick="loadClient(row.data.item)">
- <td class="narrow-td">
- <v-checkbox
- color="primary"
- v-model="row.data.selected"
- hide-details
- ></v-checkbox>
- </td>
- <td class="narrow-td">{{ row.data.item.id }}</td>
- <td>{{ row.data.item.name }}</td>
- <td>{{ row.data.item.ip }}</td>
- <td>{{ row.data.item.mac }}</td>
- <td>{{ row.data.item.uuid }}</td>
- <td class="narrow-td">
- <v-btn class="next-arrow" icon @click.stop="loadClient(row.data.item)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
- </td>
- </tr>
- </template>
- </component-search-table>
+ <data-table v-model="selected" :headers="headers" :items="clients" :loading="loading" @dblclick="loadClient($event)" min-width="1000px">
+ <div slot="actions" slot-scope="row" style="text-align: right">
+ <v-btn icon @click.stop @mousedown="loadClient(row.item)" style="margin: 0"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ </div>
+ </data-table>
</v-card>
<div v-if="tabIndex === 0" class="text-xs-right">
<v-btn flat color="error" @click="deleteSelected" :disabled="selected.length === 0">
@@ -66,14 +50,14 @@
</template>
<script>
-import ComponentSearchTable from '@/components/ComponentSearchTable'
+import DataTable from '@/components/DataTable'
import { mapMutations } from 'vuex'
export default {
name: 'GroupModuleClientList',
props: ['tabIndex', 'groupId', 'clients'],
components: {
- ComponentSearchTable
+ DataTable
},
data () {
return {
@@ -83,23 +67,18 @@ export default {
computed: {
headers () {
return [
- { text: this.$t('id'), value: 'id' },
- { text: this.$t('name'), value: 'name' },
- { text: this.$t('ip'), value: 'ip' },
- { text: this.$t('mac'), value: 'mac' },
- { text: this.$t('uuid'), value: 'uuid' },
- { sortable: false }
+ { key: 'id', text: this.$t('id'), width: '50px' },
+ { key: 'name', text: this.$t('name') },
+ { key: 'ip', text: this.$t('ip'), width: '100px' },
+ { key: 'mac', text: this.$t('mac'), width: '160px' },
+ { key: 'uuid', text: this.$t('uuid'), width: '180px' },
+ { key: 'actions', width: '60px' }
]
},
loading () {
return this.$store.state.groups.tabChain[this.tabIndex].loading
}
},
- watch: {
- clients () {
- this.selected = []
- }
- },
methods: {
...mapMutations('groups', ['setActiveTab', 'setTab', 'setDialog']),
loadClient (item) {
diff --git a/webapp/src/components/GroupModuleClientView.vue b/webapp/src/components/GroupModuleClientView.vue
index 03c3b77..bc7ea10 100644
--- a/webapp/src/components/GroupModuleClientView.vue
+++ b/webapp/src/components/GroupModuleClientView.vue
@@ -78,7 +78,7 @@
<v-textarea prepend-icon="description" v-if="editMode" rows="1" auto-grow class="info-input" :label="$t('description')" color="primary" v-model="info.description"></v-textarea>
<div v-else class="info-input">
<div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
- <pre class="info-text">{{ client.description || '-' }}</pre>
+ <div class="info-text">{{ client.description || '-' }}</div>
</div>
</v-flex>
<v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
@@ -218,5 +218,6 @@ export default {
}
.info-text {
margin-left: 34px;
+ font-family: 'Roboto Mono';
}
</style>
diff --git a/webapp/src/components/GroupModuleDialog.vue b/webapp/src/components/GroupModuleDialog.vue
index 4a56fe0..a60a8e5 100644
--- a/webapp/src/components/GroupModuleDialog.vue
+++ b/webapp/src/components/GroupModuleDialog.vue
@@ -84,6 +84,7 @@
:max-width="action === 'add' ? '1000px' : '500px'"
scrollable
:persistent="action === 'add'"
+ :fullscreen="$vuetify.breakpoint.xsOnly"
>
<v-card>
<v-card-title primary-title class="dialog-title elevation-3">
diff --git a/webapp/src/components/GroupModuleGroupList.vue b/webapp/src/components/GroupModuleGroupList.vue
index 1c981fc..c721241 100644
--- a/webapp/src/components/GroupModuleGroupList.vue
+++ b/webapp/src/components/GroupModuleGroupList.vue
@@ -26,7 +26,7 @@
<v-card>
<data-table v-model="selected" :headers="headers" :items="groups" :loading="loading" @dblclick="loadGroup($event)">
<div slot="actions" slot-scope="row" style="text-align: right">
- <v-btn icon @click="loadGroup(row.item)"><v-icon>keyboard_arrow_right</v-icon></v-btn>
+ <v-btn icon @click.stop @mousedown="loadGroup(row.item)" style="margin: 0"><v-icon>keyboard_arrow_right</v-icon></v-btn>
</div>
</data-table>
</v-card>
@@ -63,10 +63,10 @@ export default {
computed: {
headers () {
return [
- { key: 'id', text: this.$t('id'), width: '60px' },
+ { key: 'id', text: this.$t('id'), width: '50px' },
{ key: 'name', text: this.$t('name'), width: '180px' },
{ key: 'description', text: this.$t('description') },
- { key: 'actions', width: '48px' }
+ { key: 'actions', width: '60px' }
]
},
loading () {
diff --git a/webapp/src/components/GroupModuleGroupView.vue b/webapp/src/components/GroupModuleGroupView.vue
index 383bfec..7418928 100644
--- a/webapp/src/components/GroupModuleGroupView.vue
+++ b/webapp/src/components/GroupModuleGroupView.vue
@@ -82,7 +82,7 @@
<v-textarea prepend-icon="description" v-if="editMode" rows="1" auto-grow class="info-input" :label="$t('description')" color="primary" v-model="info.description"></v-textarea>
<div v-else class="info-input">
<div class="body-2 info-heading"><v-icon>description</v-icon><span>{{ $t('description') }}</span></div>
- <pre class="info-text">{{ group.description || '-' }}</pre>
+ <div class="info-text">{{ group.description || '-' }}</div>
</div>
</v-flex>
<v-flex lg4 xs12 order-lg3 order-xs1 class="text-xs-right">
@@ -221,6 +221,7 @@ export default {
}
.info-text {
margin-left: 34px;
+ font-family: 'Roboto Mono';
}
.show-toggle {
margin-top: 20px;
diff --git a/webapp/src/components/RegistrationModule.vue b/webapp/src/components/RegistrationModule.vue
index 8ba3c58..fdc3923 100644
--- a/webapp/src/components/RegistrationModule.vue
+++ b/webapp/src/components/RegistrationModule.vue
@@ -15,7 +15,7 @@
<v-container fill-height>
<v-layout>
<v-flex class="tabs-wrapper" xl10 offset-xl1 lg12>
- <v-card>
+ <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-tabs>
@@ -58,6 +58,7 @@
:max-width="dialog.type === 'delete' ? '500px' : '1200px'"
scrollable
:persistent="dialog.type !== 'delete'"
+ :fullscreen="$vuetify.breakpoint.xsOnly"
>
<registration-module-delete v-show="dialog.type === 'delete'" />
<registration-module-edit v-show="dialog.type === 'edit'"/>
diff --git a/webapp/src/components/RegistrationModuleEdit.vue b/webapp/src/components/RegistrationModuleEdit.vue
index b9ab52e..f223523 100644
--- a/webapp/src/components/RegistrationModuleEdit.vue
+++ b/webapp/src/components/RegistrationModuleEdit.vue
@@ -22,7 +22,7 @@
</i18n>
<template>
- <v-card>
+ <v-card style="overflow: hidden">
<v-card-title primary-title class="dialog-title elevation-3">
<div class="headline">{{ dialog.info.id ? $t('titleExisting') : $t('titleNew') }}</div>
</v-card-title>
diff --git a/webapp/src/components/SettingsModule.vue b/webapp/src/components/SettingsModule.vue
index 642e52a..4b86f9c 100644
--- a/webapp/src/components/SettingsModule.vue
+++ b/webapp/src/components/SettingsModule.vue
@@ -89,5 +89,7 @@ export default {
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
-
+.element-container {
+ padding: 26px;
+}
</style>