summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTable.vue
diff options
context:
space:
mode:
authorUdo Walter2019-02-24 23:28:30 +0100
committerUdo Walter2019-02-24 23:31:05 +0100
commit68f57aba9f8fef2858c1c4df7cea394ca36ef2cd (patch)
treed9b6ea94a358126e764925c9a9c6aaf00f1c0c03 /webapp/src/components/DataTable.vue
parent[webapp/webapp] fix row-count getting string instead of number (diff)
downloadbas-68f57aba9f8fef2858c1c4df7cea394ca36ef2cd.tar.gz
bas-68f57aba9f8fef2858c1c4df7cea394ca36ef2cd.tar.xz
bas-68f57aba9f8fef2858c1c4df7cea394ca36ef2cd.zip
[webapp/datatable] improved slim mode
Diffstat (limited to 'webapp/src/components/DataTable.vue')
-rw-r--r--webapp/src/components/DataTable.vue19
1 files changed, 11 insertions, 8 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index 27a630a..d87cbc7 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -27,7 +27,7 @@
<template>
<div>
- <v-layout wrap>
+ <v-layout wrap :class="{ 'd-block': slim }">
<v-flex xs12 :md6="!slim" class="d-flex align-center search-wrapper" :class="{ 'slim-search-wrapper': slim }">
<div class="search-field-wrapper">
<div v-for="(s, index) in search" :key="index">
@@ -44,6 +44,7 @@
clearable
></v-text-field>
<v-select
+ v-if="!slim"
solo flat
class="column-select"
v-model="s.key"
@@ -57,8 +58,10 @@
left: true
}"
></v-select>
- <v-btn v-if="index === 0" icon @click="newSearchField"><v-icon>add</v-icon></v-btn>
- <v-btn v-else icon @click="removeSearchField(s)"><v-icon>remove</v-icon></v-btn>
+ <template v-if="!slim">
+ <v-btn v-if="index === 0" icon @click="newSearchField"><v-icon>add</v-icon></v-btn>
+ <v-btn v-else icon @click="removeSearchField(s)"><v-icon>remove</v-icon></v-btn>
+ </template>
</div>
</div>
<v-divider :class="{ 'hidden-md-and-up': !slim }"></v-divider>
@@ -125,7 +128,7 @@
@click.native.capture.passive="setShiftState"
>
<template slot="before-container">
- <div class="table-head-wrapper non-selectable" :style="{ 'min-width': computedMinWith }">
+ <div class="table-head-wrapper non-selectable" :style="{ 'min-width': computedMinWidth }">
<div class="table-head">
<div class="non-selectable header-cell">
<v-icon @click="toggleSelectAll">
@@ -220,16 +223,16 @@ export default {
searchableHeaders () {
return this.headers.filter(h => h.text !== undefined)
},
- computedMinWith () {
- if (this.minWith) return this.minWith
- if (this.slim) return '300px'
+ computedMinWidth () {
+ if (this.minWidth) return this.minWidth
+ if (this.slim) return '200px'
return '600px'
},
computedRowCount () {
return this.rowCount === undefined ? this.internalRowCount : this.rowCount
},
scrollerStyle () {
- const style = { '--min-table-width': this.computedMinWith }
+ const style = { '--min-table-width': this.computedMinWidth }
if (this.computedRowCount > 0) style.height = (Math.max(Math.min(this.computedRowCount, this.filteredRows.length), 1) * 48 + 58) + 'px'
return style
},