# HG changeset patch
# User Markus Kottlaender <markus@intevation.de>
# Date 1551103354 -3600
# Node ID f185503ef35adf9fc3d87e07b39c8baf86d873e4
# Parent  24e3e86b8cb687209fb192742ea86dd37d205127
client: unified box's header styles by creating a reusable component

The clients html/css and resulting look and feel of the app is partially very inconsistent.
By moving code to more small and reusable components consistency will hopefully be increased.

diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/Bottlenecks.vue
--- a/client/src/components/Bottlenecks.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/Bottlenecks.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -1,9 +1,10 @@
 <template>
   <div>
-    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="ship" class="mr-2"></font-awesome-icon>
-      <translate>Bottlenecks</translate>
-    </h6>
+    <UIBoxHeader
+      icon="ship"
+      title="Bottlenecks"
+      :closeCallback="$parent.close"
+    />
     <div class="row p-2 text-left small">
       <div class="col-5">
         <a href="#" @click="sortBy('name')" class="sort-link">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/Contextbox.vue
--- a/client/src/components/Contextbox.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/Contextbox.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -1,8 +1,5 @@
 <template>
   <div :class="style">
-    <div @click="close" class="ui-element close-contextbox text-muted">
-      <font-awesome-icon icon="times" class="pointer"></font-awesome-icon>
-    </div>
     <Bottlenecks v-if="contextBoxContent === 'bottlenecks'"></Bottlenecks>
     <Staging v-if="contextBoxContent === 'staging'"></Staging>
     <Stretches v-if="contextBoxContent === 'stretches'"></Stretches>
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/ImportApprovedGaugeMeasurement.vue
--- a/client/src/components/ImportApprovedGaugeMeasurement.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/ImportApprovedGaugeMeasurement.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -2,14 +2,7 @@
   <div class="d-flex flex-row">
     <Spacer></Spacer>
     <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3">
-      <h6
-        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-      >
-        <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
-        <translate class="headline"
-          >Import approved gaugemeasurements</translate
-        >
-      </h6>
+      <UIBoxHeader icon="upload" title="Import approved gaugemeasurements" />
       <div class="card-body stretches-card">
         <div class="w-95 ml-auto mr-auto mt-4 mb-4">
           <div class="d-flex flex-column text-left w-25">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/ImportSoundingresults.vue
--- a/client/src/components/ImportSoundingresults.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/ImportSoundingresults.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -3,12 +3,7 @@
     <div class="d-flex flex-row">
       <Spacer></Spacer>
       <div class="card shadow-xs mt-3 mr-3 w-100 importsoundingresultscard">
-        <h6
-          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-        >
-          <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
-          <translate class="headline">Import Soundingresults</translate>
-        </h6>
+        <UIBoxHeader icon="upload" title="Import Soundingresults" />
         <div v-if="editState" class="ml-auto mr-auto mt-4 w-95">
           <div class="d-flex flex-column">
             <div class="d-flex flex-row">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/ImportStretches.vue
--- a/client/src/components/ImportStretches.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/ImportStretches.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -1,9 +1,10 @@
 <template>
   <div class="d-flex flex-column mb-3">
-    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon icon="road" class="mr-2"></font-awesome-icon>
-      <translate>Define stretches</translate>
-    </h6>
+    <UIBoxHeader
+      icon="road"
+      title="Define Stretches"
+      :closeCallback="$parent.close"
+    />
     <div v-if="!edit" class="mb-3 mr-3 ml-3 text-left">
       <table v-if="stretches.length > 0" class="table">
         <thead>
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/ImportWaterwayProfiles.vue
--- a/client/src/components/ImportWaterwayProfiles.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/ImportWaterwayProfiles.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -2,12 +2,7 @@
   <div class="d-flex flex-row">
     <Spacer></Spacer>
     <div class="card sysconfig mt-3 shadow-xs w-100 h-100 mr-3">
-      <h6
-        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-      >
-        <font-awesome-icon icon="upload" class="mr-2"></font-awesome-icon>
-        <translate class="headline">Import Waterwayprofiles</translate>
-      </h6>
+      <UIBoxHeader icon="upload" title="Import Waterway Profiles" />
       <div class="card-body stretches-card">
         <div class="w-95 ml-auto mr-auto mt-4 mb-4">
           <div class="mb-4">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/Logs.vue
--- a/client/src/components/Logs.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/Logs.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -3,12 +3,7 @@
     <div class="d-flex flex-row">
       <Spacer></Spacer>
       <div class="card logs shadow-xs mt-3 mr-3">
-        <h6
-          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-        >
-          <font-awesome-icon class="mr-2 fa-fw" icon="book"></font-awesome-icon>
-          <translate class="headline">Logs</translate>
-        </h6>
+        <UIBoxHeader icon="book" title="Logs" />
         <div class="logoutput text-left bg-white">
           <pre id="code" v-highlightjs="logs">
           <code class="bash hljs hljs-string"></code>
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/Pdftool.vue
--- a/client/src/components/Pdftool.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/Pdftool.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -6,15 +6,11 @@
     ]"
   >
     <div style="width: 18rem">
-      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-        <font-awesome-icon icon="file-pdf" class="mr-2"></font-awesome-icon>
-        <translate>Generate PDF</translate>
-        <font-awesome-icon
-          icon="times"
-          class="ml-auto text-muted pointer"
-          @click="$store.commit('application/showPdfTool', false)"
-        ></font-awesome-icon>
-      </h6>
+      <UIBoxHeader
+        icon="file-pdf"
+        title="Generate PDF"
+        :closeCallback="close"
+      />
       <div class="p-3 text-left">
         <select
           @change="applyTemplateToForm"
@@ -199,6 +195,9 @@
     }
   },
   methods: {
+    close() {
+      this.$store.commit("application/showPdfTool", false);
+    },
     // When a template is chosen from the dropdown, its propoerties are
     // applied to the rest of the form.
     applyTemplateToForm() {
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/Popup.vue
--- a/client/src/components/Popup.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/Popup.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -5,15 +5,11 @@
       v-if="popup"
     >
       <div class="popup">
-        <h6 class="popup-header">
-          <span class="popup-title">
-            <font-awesome-icon :icon="popup.icon" class="popup-icon" />
-            {{ popup.title }}
-          </span>
-          <span class="popup-close" @click="close()">
-            <font-awesome-icon icon="times" />
-          </span>
-        </h6>
+        <UIBoxHeader
+          :icon="popup.icon"
+          :title="popup.title"
+          :closeCallback="close"
+        />
         <div class="popup-content" v-html="popup.content"></div>
         <div class="popup-footer" v-if="popup.cancel || popup.confirm">
           <button
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/fairway/Profiles.vue
--- a/client/src/components/fairway/Profiles.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/fairway/Profiles.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -6,15 +6,7 @@
     ]"
   >
     <div style="width: 18rem">
-      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-        <font-awesome-icon icon="chart-area" class="mr-2"></font-awesome-icon>
-        <translate>Profiles</translate>
-        <font-awesome-icon
-          icon="times"
-          class="ml-auto text-muted pointer"
-          @click="$store.commit('application/showProfiles', false)"
-        ></font-awesome-icon>
-      </h6>
+      <UIBoxHeader icon="chart-area" title="Profiles" :closeCallback="close" />
       <div
         class="d-flex flex-column p-3 flex-grow-1 text-left position-relative"
       >
@@ -358,6 +350,9 @@
     }
   },
   methods: {
+    close() {
+      this.$store.commit("application/showProfiles", false);
+    },
     formatSurveyDate(date) {
       return formatSurveyDate(date);
     },
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/identify/Identify.vue
--- a/client/src/components/identify/Identify.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/identify/Identify.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -6,15 +6,7 @@
     ]"
   >
     <div style="width: 18rem">
-      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-        <font-awesome-icon icon="info" class="mr-2"></font-awesome-icon>
-        <translate>Identified</translate>
-        <font-awesome-icon
-          icon="times"
-          class="ml-auto text-muted"
-          @click="$store.commit('application/showIdentify', false)"
-        ></font-awesome-icon>
-      </h6>
+      <UIBoxHeader icon="info" title="Identified" :closeCallback="close" />
       <div class="features flex-grow-1 text-left">
         <div v-if="currentMeasurement">
           <small class="d-block bg-dark text-light text-center px-2 py-1">
@@ -129,6 +121,9 @@
     ...mapState("map", ["currentMeasurement"])
   },
   methods: {
+    close() {
+      this.$store.commit("application/showIdentify", false);
+    },
     featureId(feature) {
       // cut away everything from the last . to the end
       return feature.getId().replace(/[.][^.]*$/, "");
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/importqueue/Importqueue.vue
--- a/client/src/components/importqueue/Importqueue.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/importqueue/Importqueue.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -3,12 +3,7 @@
     <Spacer></Spacer>
     <div class="mt-3 importqueuecard flex-grow-1">
       <div class="card shadow-xs">
-        <h6
-          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-        >
-          <font-awesome-icon icon="tasks" class="mr-2"></font-awesome-icon>
-          <translate class="headline">Importqueue</translate>
-        </h6>
+        <UIBoxHeader icon="tasks" title="Importqueue" />
         <div class="card-body importcardbody">
           <div class="card-body importcardbody">
             <div class="searchandfilter d-flex flex-row">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/importschedule/Importschedule.vue
--- a/client/src/components/importschedule/Importschedule.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/importschedule/Importschedule.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -3,12 +3,7 @@
     <Spacer></Spacer>
     <div class="mt-3 w-100">
       <div class="card flex-grow-1 schedulecard shadow-xs">
-        <h6
-          class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-        >
-          <font-awesome-icon icon="clock" class="mr-2"></font-awesome-icon>
-          <translate class="headline">Imports</translate>
-        </h6>
+        <UIBoxHeader icon="clock" title="Imports" />
         <div class="card-body schedulecardbody">
           <div class="card-body schedulecardbody">
             <div class="searchandfilter mb-3  w-50 d-flex flex-row">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/importschedule/Importscheduledetail.vue
--- a/client/src/components/importschedule/Importscheduledetail.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/importschedule/Importscheduledetail.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -4,14 +4,7 @@
     v-if="importScheduleDetailVisible"
   >
     <div class="card shadow-xs importscheduledetailscard pb-5">
-      <h6
-        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-      >
-        {{ dialogLabel }}
-        <span @click="closeDetailview" class="closebutton">
-          <font-awesome-icon icon="times" class="pointer"></font-awesome-icon>
-        </span>
-      </h6>
+      <UIBoxHeader :title="dialogLabel" :closeCallback="closeDetailview" />
       <div class="card-body">
         <form @submit.prevent="save" class="ml-2 mr-2">
           <div class="d-flex flex-row">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/layers/Layers.vue
--- a/client/src/components/layers/Layers.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/layers/Layers.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -6,15 +6,7 @@
     ]"
   >
     <div style="width: 18rem">
-      <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-        <font-awesome-icon icon="layer-group" class="mr-2"></font-awesome-icon
-        ><translate>Layers</translate>
-        <font-awesome-icon
-          icon="times"
-          class="ml-auto text-muted pointer"
-          @click="$store.commit('application/showLayers', false)"
-        ></font-awesome-icon>
-      </h6>
+      <UIBoxHeader icon="layer-group" title="Layers" :closeCallback="close" />
       <div class="d-flex flex-column p-3 small">
         <Layerselect
           v-for="(layer, index) in layersForLegend"
@@ -55,6 +47,9 @@
     ...mapState("application", ["showLayers"])
   },
   methods: {
+    close() {
+      this.$store.commit("application/showLayers", false);
+    },
     visibilityToggled(layer) {
       this.$store.commit("map/toggleVisibility", layer);
     }
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/staging/Staging.vue
--- a/client/src/components/staging/Staging.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/staging/Staging.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -1,12 +1,10 @@
 <template>
   <div class="w-90 stagingcard">
-    <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-      <font-awesome-icon
-        class="mr-2"
-        icon="clipboard-check"
-      ></font-awesome-icon>
-      <translate>Staging Area</translate>
-    </h6>
+    <UIBoxHeader
+      icon="clipboard-check"
+      title="Staging Area"
+      :closeCallback="$parent.close"
+    />
     <div class="mt-3 pl-3 pr-3">
       <div class="mt-3 text-left flex-row d-flex border-bottom">
         <div class="header text-left name"><translate>Name</translate></div>
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/systemconfiguration/Systemconfiguration.vue
--- a/client/src/components/systemconfiguration/Systemconfiguration.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/systemconfiguration/Systemconfiguration.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -2,12 +2,7 @@
   <div class="d-flex flex-row">
     <Spacer></Spacer>
     <div class="card sysconfig mt-3 shadow-xs">
-      <h6
-        class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-      >
-        <font-awesome-icon icon="wrench" class="mr-2"></font-awesome-icon>
-        <translate class="headline">Systemconfiguration</translate>
-      </h6>
+      <UIBoxHeader icon="wrench" title="Systemconfiguration" />
       <div class="card-body text-left">
         <PDFTemplates />
         <ColorSettings v-if="isSysAdmin" />
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/ui/box/Header.vue
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/client/src/components/ui/box/Header.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -0,0 +1,63 @@
+<template>
+  <h6 class="popup-header">
+    <span class="popup-title">
+      <font-awesome-icon
+        :icon="icon"
+        class="popup-icon"
+        v-if="icon"
+        fixed-width
+      />
+      {{ $gettext(title) }}
+    </span>
+    <span class="popup-close" @click="closeCallback" v-if="closeCallback">
+      <font-awesome-icon icon="times" />
+    </span>
+  </h6>
+</template>
+
+<style lang="sass">
+.popup-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
+  .popup-title
+    padding-left: 0.25rem
+    .popup-icon
+      margin-right: 0.25rem
+  .popup-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>
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/usermanagement/Userdetail.vue
--- a/client/src/components/usermanagement/Userdetail.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/usermanagement/Userdetail.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -1,13 +1,10 @@
 <template>
   <div class="userdetails shadow-xs fadeIn animated card">
-    <h6
-      class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-    >
-      {{ this.cardHeader }}
-      <span @click="closeDetailview" class="closebutton">
-        <font-awesome-icon icon="times" class="pointer"></font-awesome-icon>
-      </span>
-    </h6>
+    <UIBoxHeader
+      icon="user"
+      :title="this.cardHeader"
+      :closeCallback="closeDetailview"
+    />
     <div class="card-body">
       <form @submit.prevent="save" class="ml-3">
         <div class="formfields">
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/components/usermanagement/Usermanagement.vue
--- a/client/src/components/usermanagement/Usermanagement.vue	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/components/usermanagement/Usermanagement.vue	Mon Feb 25 15:02:34 2019 +0100
@@ -4,15 +4,7 @@
     <div class="d-flex content py-3">
       <div :class="userlistStyle">
         <div class="card shadow-xs">
-          <h6
-            class="mb-0 py-2 px-3 border-bottom d-flex text-info align-items-center"
-          >
-            <font-awesome-icon
-              icon="users-cog"
-              class="mr-2 fa-fw"
-            ></font-awesome-icon>
-            <translate class="headline">Users</translate>
-          </h6>
+          <UIBoxHeader icon="users-cog" title="Users" />
           <div class="card-body">
             <table id="datatable" :class="tableStyle">
               <thead>
@@ -115,44 +107,6 @@
       </div>
       <Userdetail v-if="isUserDetailsVisible"></Userdetail>
     </div>
-
-    <div
-      :class="[
-        'box popup ui-element rounded bg-white',
-        { show: showDeleteUserPrompt }
-      ]"
-    >
-      <div>
-        <h6 class="mb-0 py-2 px-3 border-bottom d-flex align-items-center">
-          <font-awesome-icon icon="trash" class="mr-2"></font-awesome-icon>
-          <translate>Delete user</translate>
-          <font-awesome-icon
-            icon="times"
-            class="ml-auto text-muted pointer"
-            @click="showDeleteUserPrompt = false"
-          ></font-awesome-icon>
-        </h6>
-        <div class="p-3 text-left">
-          <translate class="text-center d-block"
-            >Do you really want to delete the following user account:</translate
-          >
-          <h5 class="mt-3 text-center">{{ userToDelete }}</h5>
-        </div>
-        <div
-          class="py-2 px-3 border-top d-flex align-items-center justify-content-between"
-        >
-          <button
-            class="btn btn-sm btn-warning"
-            @click="showDeleteUserPrompt = false"
-          >
-            no
-          </button>
-          <button class="btn btn-sm btn-info" @click="deleteUser(userToDelete)">
-            yes
-          </button>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
diff -r 24e3e86b8cb6 -r f185503ef35a client/src/main.js
--- a/client/src/main.js	Mon Feb 25 14:30:31 2019 +0100
+++ b/client/src/main.js	Mon Feb 25 15:02:34 2019 +0100
@@ -29,6 +29,7 @@
 import store from "./store";
 import translations from "./locale/translations.json";
 import { supportedLanguages, defaultLanguage } from "./locale/languages.js";
+import Header from "@/components/ui/box/Header";
 
 // styles
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@@ -153,6 +154,7 @@
 
 // register global components
 Vue.component("font-awesome-icon", FontAwesomeIcon);
+Vue.component("UIBoxHeader", Header);
 
 // global vue config
 Vue.config.productionTip = false;