summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTable.vue
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/src/components/DataTable.vue
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/src/components/DataTable.vue')
-rw-r--r--webapp/src/components/DataTable.vue65
1 files changed, 27 insertions, 38 deletions
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 {