From cb6e8d4edf5c118f9efe6f16cd3674816c8da418 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Mon, 15 Jun 2020 10:41:27 +0200
Subject: [PATCH] ++

---
 zero.Web.UI/App/components/forms/property.vue |  19 +++
 .../pickers/datePicker/datepicker.vue         | 132 ++++++++++++++++++
 .../components/pickers/datePicker/overlay.vue |  29 ++++
 zero.Web.UI/App/navigation.vue                |   2 +-
 zero.Web.UI/Sass/Modules/Buttons/_button.scss |   2 +-
 zero.Web.UI/Sass/Modules/_all.scss            |   4 +-
 zero.Web.UI/Sass/Modules/_link.scss           |   7 +
 .../Resources/Localization/zero.en-us.json    |   5 +
 8 files changed, 197 insertions(+), 3 deletions(-)
 create mode 100644 zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
 create mode 100644 zero.Web.UI/App/components/pickers/datePicker/overlay.vue
 create mode 100644 zero.Web.UI/Sass/Modules/_link.scss

diff --git a/zero.Web.UI/App/components/forms/property.vue b/zero.Web.UI/App/components/forms/property.vue
index c2fde10e..351fc8f5 100644
--- a/zero.Web.UI/App/components/forms/property.vue
+++ b/zero.Web.UI/App/components/forms/property.vue
@@ -60,6 +60,7 @@
     .ui-property-label
     {
       width: 100%;
+      padding-right: 0;
     }
 
     .ui-property-content
@@ -145,4 +146,22 @@
       margin-right: 6px;
     }
   }
+
+  .ui-properties-floating
+  {
+    .ui-property
+    {
+      display: inline-flex;
+      min-height: 52px;
+    }
+
+    .ui-property + .ui-property
+    {
+      padding-top: 0;
+      margin-top: 0;
+      border-left: 1px solid var(--color-line);
+      padding-left: 50px;
+      margin-left: 50px;
+    }
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
new file mode 100644
index 00000000..8d168275
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
@@ -0,0 +1,132 @@
+<template>
+  <div class="ui-datepicker" :class="{'is-disabled': disabled }">
+    <input type="text" class="ui-input ui-datepicker-input" :value="output" @input="onChange" @focus="onFocus" @blur="onBlur" :disabled="disabled" />
+    <i class="fth-calendar ui-datepicker-icon"></i>
+
+    <ui-dropdown ref="overlay" class="ui-datepicker-overlay" @opened="overlayOpened">
+      <div>
+        <datepicker-overlay />
+      </div>
+    </ui-dropdown>
+  </div>
+</template>
+
+
+<script>
+  import Strings from 'zero/services/strings';
+  import DatepickerOverlay from './overlay';
+  import { extend as _extend } from 'underscore';
+
+  export default {
+    name: 'uiDatepicker',
+
+    components: { DatepickerOverlay },
+
+    props: {
+      value: {
+        type: String,
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      format: {
+        type: String,
+        default: 'DD.MM.YY HH:mm'
+      },
+      options: {
+        type: Object,
+        default: () => { }
+      }
+    },
+
+
+    data: () => ({
+      id: null,
+      output: null
+    }),
+
+
+    watch: {
+      value()
+      {
+        this.updateOutput();
+      },
+      format()
+      {
+        this.updateOutput();
+      }
+    },
+
+
+    created()
+    {
+      this.id = 'datepicker-' + Strings.guid();
+    },
+
+
+    methods: {
+
+      updateOutput()
+      {
+        this.output = Strings.date(this.value, this.format);
+      },
+
+
+      onChange(ev)
+      {
+        this.$emit('change', ev.target.value);
+        this.$emit('input', ev.target.value);
+        // TODO this does not trigger the forms dirty flag
+      },
+
+
+      onFocus()
+      {
+        this.$refs.overlay.show();
+      }, 
+
+
+      onBlur()
+      {
+        this.$refs.overlay.hide();
+      },
+
+
+      overlayOpened()
+      {
+
+      }
+
+      //pick()
+      //{
+      //  this.$el.
+      //}
+      
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-datepicker
+  {
+    position: relative;
+    max-width: 260px;
+  }
+
+  input[type="text"].ui-datepicker-input
+  {
+    padding-right: 36px;
+  }
+
+  .ui-datepicker-icon
+  {
+    position: absolute;
+    right: 13px;
+    top: 50%;
+    margin-top: -8px;
+    font-size: var(--font-size-l);
+  }
+
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/datePicker/overlay.vue b/zero.Web.UI/App/components/pickers/datePicker/overlay.vue
new file mode 100644
index 00000000..c9a07b32
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/datePicker/overlay.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="ui-datepicker-overlay">
+    hii
+  </div>
+</template>
+
+
+<script>
+  export default {
+
+    props: {
+      model: String,
+      config: Object
+    },
+
+    data: () => ({
+      
+    }),
+
+    created()
+    {
+      
+    }
+  }
+</script>
+
+<style lang="scss">
+
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue
index 1e9de825..a29c8b3d 100644
--- a/zero.Web.UI/App/navigation.vue
+++ b/zero.Web.UI/App/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="app-nav theme-dark">
+  <div class="app-nav">
 
     <h1 class="app-nav-headline" v-localize="'@zero.name'">zero</h1>
 
diff --git a/zero.Web.UI/Sass/Modules/Buttons/_button.scss b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
index b004cddd..3b96296b 100644
--- a/zero.Web.UI/Sass/Modules/Buttons/_button.scss
+++ b/zero.Web.UI/Sass/Modules/Buttons/_button.scss
@@ -291,7 +291,7 @@ button::-moz-focus-inner
   height: 42px;
   line-height: 42px !important;
   border-radius: var(--radius);
-  background: var(--color-bg-mid);
+  background: var(--color-bg-xlight);
   color: var(--color-fg);
   text-align: center;
   font-size: 16px;
diff --git a/zero.Web.UI/Sass/Modules/_all.scss b/zero.Web.UI/Sass/Modules/_all.scss
index 6f6b61fd..0b767a2c 100644
--- a/zero.Web.UI/Sass/Modules/_all.scss
+++ b/zero.Web.UI/Sass/Modules/_all.scss
@@ -3,4 +3,6 @@
 
 @import "headlines";
 
-@import "box";
\ No newline at end of file
+@import "box";
+
+@import "link";
\ No newline at end of file
diff --git a/zero.Web.UI/Sass/Modules/_link.scss b/zero.Web.UI/Sass/Modules/_link.scss
new file mode 100644
index 00000000..9a75fb3f
--- /dev/null
+++ b/zero.Web.UI/Sass/Modules/_link.scss
@@ -0,0 +1,7 @@
+
+
+.ui-link
+{
+  color: var(--color-primary);
+  text-decoration: underline dotted;
+}
\ No newline at end of file
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 1be171a3..7ffa21ec 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -38,6 +38,11 @@
       "title_multiple": "Choose",
       "title_autocomplete": "Enter a value",
       "max": "max. {count}"
+    },
+    "date": {
+      "xtoy": "{x} to {y}",
+      "x": "from {x}",
+      "y": "until {y}"
     }
   },