summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/DataTable.vue
diff options
context:
space:
mode:
authorUdo Walter2019-01-15 04:55:52 +0100
committerUdo Walter2019-01-15 04:55:52 +0100
commit4b8fa5d36d7b8212f6124eb319f68d42c3892b67 (patch)
tree71c40b8201afe7e11b2237f3231067faee789ae9 /webapp/src/components/DataTable.vue
parenteslint fixes :| (diff)
downloadbas-4b8fa5d36d7b8212f6124eb319f68d42c3892b67.tar.gz
bas-4b8fa5d36d7b8212f6124eb319f68d42c3892b67.tar.xz
bas-4b8fa5d36d7b8212f6124eb319f68d42c3892b67.zip
[webapp/datatable] Add ability to only show selected entries
Diffstat (limited to 'webapp/src/components/DataTable.vue')
-rw-r--r--webapp/src/components/DataTable.vue31
1 files changed, 27 insertions, 4 deletions
diff --git a/webapp/src/components/DataTable.vue b/webapp/src/components/DataTable.vue
index e843a64..6f522f4 100644
--- a/webapp/src/components/DataTable.vue
+++ b/webapp/src/components/DataTable.vue
@@ -63,7 +63,7 @@
<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="caption font-weight-thin d-flex align-start non-selectable" xs12 sm6>
+ <v-flex style="padding: 6px 16px" class="d-flex align-start non-selectable" xs12 sm6>
<div class="d-flex align-center">
<div>
<v-tooltip top open-delay="800">
@@ -79,16 +79,17 @@
<span>{{ $t('caseSensitive') }}</span>
</v-tooltip>
</div>
- <div class="text-xs-center">
+ <div class="text-xs-center muted-text-color">
{{ filterdRows.length + ' ' + $t('entries') }}
<span
@click="onlyShowSelected = !onlyShowSelected"
- :style="{ cursor: 'pointer', 'font-weight': onlyShowSelected ? 'bold' : '' }"
+ :class="{ 'show-only-selected': onlyShowSelected }"
+ :style="{ cursor: 'pointer' }"
>
{{ '(' + selected.length + ' ' + $t('selected') + ')' }}
</span>
</div>
- <div class="text-xs-right">
+ <div class="text-xs-right muted-text-color">
{{ $t('height') }}:
</div>
<v-select
@@ -359,6 +360,28 @@ 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;