Mercurial > gemma

changeset 2408:02d30251d594

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
client: table component for unified style
author Markus Kottlaender <markus@intevation.de>
date Thu, 28 Feb 2019 11:25:50 +0100
parents 8fc546b03822
children d9758395e09d
files client/src/components/ui/UIBoxHeader.vue client/src/components/ui/UITableBody.vue client/src/components/ui/UITableHeader.vue client/src/components/ui/box/Header.vue client/src/main.js
diffstat 5 files changed, 218 insertions(+), 65 deletions(-) [+]
line wrap: on
line diff
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ui/UIBoxHeader.vue	Thu Feb 28 11:25:50 2019 +0100
@@ -0,0 +1,63 @@
+<template>
+  <h6 class="box-header">
+    <span class="box-title">
+      <font-awesome-icon
+        :icon="icon"
+        class="box-icon"
+        v-if="icon"
+        fixed-width
+      />
+      {{ $gettext(title) }}
+    </span>
+    <span class="box-close" @click="closeCallback" v-if="closeCallback">
+      <font-awesome-icon icon="times" />
+    </span>
+  </h6>
+</template>
+
+<style lang="sass">
+.box-header
+  display: flex
+  justify-content: space-between
+  align-items: center
+  min-height: 35px
+  padding-left: .5rem
+  border-bottom: 1px solid #dee2e6
+  color: $color-info
+  margin-bottom: 0
+  padding: 0.25rem
+  font-weight: bold
+  .box-title
+    padding-left: 0.25rem
+    .box-icon
+      margin-right: 0.25rem
+  .box-close
+    color: #888
+    padding: 3px 7px
+    border-radius: 0.25rem
+    cursor: pointer
+    transition: background-color 0.3s, color 0.3s
+    &:hover
+      color: #666
+      background-color: #eee
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+export default {
+  props: ["icon", "title", "closeCallback"]
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ui/UITableBody.vue	Thu Feb 28 11:25:50 2019 +0100
@@ -0,0 +1,49 @@
+<template>
+  <div
+    class="table-body text-left small"
+    :style="'overflow-y: auto; max-height: ' + maxHeight"
+    v-if="data.length"
+  >
+    <div
+      v-for="(item, index) in data"
+      :key="index"
+      :class="['border-top row mx-0', { active: active === item }]"
+    >
+      <slot :item="item" :index="index"></slot>
+    </div>
+  </div>
+  <div v-else class="small text-center py-3 border-top">
+    <translate>No results.</translate>
+  </div>
+</template>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+
+export default {
+  props: {
+    data: {
+      type: Array
+    },
+    maxHeight: {
+      type: String,
+      default: "18rem"
+    },
+    active: {
+      type: [Object, Array]
+    }
+  }
+};
+</script>
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ui/UITableHeader.vue	Thu Feb 28 11:25:50 2019 +0100
@@ -0,0 +1,94 @@
+<template>
+  <div
+    :class="['table-header row no-gutters bg-light', { sortable: sortable }]"
+  >
+    <a
+      v-for="column in columns"
+      @click.prevent="sortBy(column.id)"
+      :key="column.id"
+      :class="[
+        'd-flex py-2 align-items-center justify-content-center small col ' +
+          column.class,
+        { active: sortColumn === column.id }
+      ]"
+    >
+      <span
+        :style="'opacity: ' + (sortColumn === column.id ? '1' : '0.3')"
+        v-if="sortable"
+      >
+        <font-awesome-icon
+          :icon="sortIcon(column.id)"
+          class="ml-1"
+          fixed-width
+        />
+      </span>
+      {{ $gettext(column.title) }}
+    </a>
+    <div v-if="extraColumnForButtons" class="col"></div>
+  </div>
+</template>
+
+<style lang="sass">
+.table-header
+  > a
+    border-right: solid 1px #e7e8e9
+    background-color: #f8f9fa
+    a
+      outline: none
+      &:hover
+        text-decoration: none
+        background-color: #f8f9fa
+  &.sortable
+    a
+      cursor: pointer
+      &:hover,
+      &.active
+        background: #e7e8e9
+</style>
+
+<script>
+/* This is Free Software under GNU Affero General Public License v >= 3.0
+ * without warranty, see README.md and license for details.
+ *
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ * License-Filename: LICENSES/AGPL-3.0.txt
+ *
+ * Copyright (C) 2018 by via donau
+ *   – Österreichische Wasserstraßen-Gesellschaft mbH
+ * Software engineering by Intevation GmbH
+ *
+ * Author(s):
+ * Markus Kottländer <markus.kottlaender@intevation.de>
+ */
+export default {
+  props: {
+    columns: { type: Array },
+    sortable: { type: Boolean, default: true },
+    extraColumnForButtons: { type: Boolean, default: true }
+  },
+  data() {
+    return {
+      sortColumn: null,
+      sortDirection: "ASC"
+    };
+  },
+  methods: {
+    sortIcon(id) {
+      if (this.sortColumn === id) {
+        return "sort-" + (this.sortDirection === "ASC" ? "down" : "up");
+      }
+      return "sort";
+    },
+    sortBy(id) {
+      if (this.sortable) {
+        this.sortColumn = id;
+        this.sortDirection = this.sortDirection === "ASC" ? "DESC" : "ASC";
+        this.$emit("sortingChanged", {
+          sortColumn: this.sortColumn,
+          sortDirection: this.sortDirection
+        });
+      }
+    }
+  }
+};
+</script>
--- a/client/src/components/ui/box/Header.vue	Thu Feb 28 10:30:33 2019 +0100
+++ /dev/null	Thu Jan 01 00:00:00 1970 +0000
@@ -1,63 +0,0 @@
-<template>
-  <h6 class="box-header">
-    <span class="box-title">
-      <font-awesome-icon
-        :icon="icon"
-        class="box-icon"
-        v-if="icon"
-        fixed-width
-      />
-      {{ $gettext(title) }}
-    </span>
-    <span class="box-close" @click="closeCallback" v-if="closeCallback">
-      <font-awesome-icon icon="times" />
-    </span>
-  </h6>
-</template>
-
-<style lang="sass">
-.box-header
-  display: flex
-  justify-content: space-between
-  align-items: center
-  min-height: 35px
-  padding-left: .5rem
-  border-bottom: 1px solid #dee2e6
-  color: $color-info
-  margin-bottom: 0
-  padding: 0.25rem
-  font-weight: bold
-  .box-title
-    padding-left: 0.25rem
-    .box-icon
-      margin-right: 0.25rem
-  .box-close
-    color: #888
-    padding: 3px 7px
-    border-radius: 0.25rem
-    cursor: pointer
-    transition: background-color 0.3s, color 0.3s
-    &:hover
-      color: #666
-      background-color: #eee
-</style>
-
-<script>
-/* This is Free Software under GNU Affero General Public License v >= 3.0
- * without warranty, see README.md and license for details.
- *
- * SPDX-License-Identifier: AGPL-3.0-or-later
- * License-Filename: LICENSES/AGPL-3.0.txt
- *
- * Copyright (C) 2018 by via donau
- *   – Österreichische Wasserstraßen-Gesellschaft mbH
- * Software engineering by Intevation GmbH
- *
- * Author(s):
- * Markus Kottländer <markus.kottlaender@intevation.de>
- */
-
-export default {
-  props: ["icon", "title", "closeCallback"]
-};
-</script>
--- a/client/src/main.js	Thu Feb 28 10:30:33 2019 +0100
+++ b/client/src/main.js	Thu Feb 28 11:25:50 2019 +0100
@@ -29,7 +29,9 @@
 import store from "./store";
 import translations from "./locale/translations.json";
 import { supportedLanguages, defaultLanguage } from "./locale/languages.js";
-import Header from "@/components/ui/box/Header";
+import UIBoxHeader from "@/components/ui/UIBoxHeader";
+import UITableHeader from "@/components/ui/UITableHeader";
+import UITableBody from "@/components/ui/UITableBody";
 
 // styles
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@@ -74,8 +76,11 @@
   faRuler,
   faSearch,
   faShip,
+  faSort,
   faSortAmountDown,
   faSortAmountUp,
+  faSortDown,
+  faSortUp,
   faSpinner,
   faStar,
   faTasks,
@@ -126,6 +131,9 @@
   faRuler,
   faSearch,
   faShip,
+  faSort,
+  faSortDown,
+  faSortUp,
   faSortAmountDown,
   faSortAmountUp,
   faSpinner,
@@ -154,7 +162,9 @@
 
 // register global components
 Vue.component("font-awesome-icon", FontAwesomeIcon);
-Vue.component("UIBoxHeader", Header);
+Vue.component("UIBoxHeader", UIBoxHeader);
+Vue.component("UITableHeader", UITableHeader);
+Vue.component("UITableBody", UITableBody);
 
 // global vue config
 Vue.config.productionTip = false;