changeset 5050:a970a1678b17 time-sliding

toolbar: smaller font for display of time in toolbar. Tooltip shows selected time
author Thomas Junk <thomas.junk@intevation.de>
date Mon, 02 Mar 2020 14:34:15 +0100
parents 86fd2dd24e9e
children 72bf187cefc9
files client/src/components/toolbar/TimeSlider.vue
diffstat 1 files changed, 15 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- a/client/src/components/toolbar/TimeSlider.vue	Mon Mar 02 14:23:35 2020 +0100
+++ b/client/src/components/toolbar/TimeSlider.vue	Mon Mar 02 14:34:15 2020 +0100
@@ -34,29 +34,33 @@
 import locale2 from "locale2";
 import { format } from "date-fns";
 
-const formatDate = date => {
-  const result = date.toLocaleDateString(locale2, {
-    day: "2-digit",
-    month: "2-digit"
-  });
-  return `${format(date, "HH:MM")}\n${result}\n${date.getFullYear()}`;
-};
+const formatDate = date => {};
 
 export default {
   computed: {
     ...mapState("application", ["showTimeSlider", "selectedTime"]),
     label() {
-      return this.$gettext("Time slider");
+      const date = this.selectedTime;
+      const result = date.toLocaleDateString(locale2, {
+        day: "2-digit",
+        month: "2-digit"
+      });
+      return `<b>${result}${date.getFullYear()} ${format(date, "HH:MM")}</b>`;
     },
     currentTimeSelection() {
-      return formatDate(this.selectedTime);
+      const date = this.selectedTime;
+      const result = date.toLocaleDateString(locale2, {
+        day: "2-digit",
+        month: "2-digit"
+      });
+      return `${format(date, "HH:MM")}\n${result}\n${date.getFullYear()}`;
     }
   }
 };
 </script>
 <style lang="scss" scoped>
 .menuEntry {
-  font-size: 9px;
+  font-size: 8px;
   font-weight: bold;
   line-height: normal;
 }
@@ -65,6 +69,7 @@
   margin-top: 0px;
   margin-bottom: 0px;
   text-align: left;
+  font-family: sans-serif;
 }
 
 .toolbar-button {