Mercurial > gemma
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 {