From 2b18892796f832edb0c7e52e8317d3d75f2864ed Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Thu, 14 May 2020 16:05:33 +0200
Subject: [PATCH] start new media picker

---
 .../forms/{media.vue => media-old.vue}        |   2 +-
 .../pickers/mediaPicker/mediapicker.vue       | 106 ++++++++++
 .../pickers/mediaPicker/overlay.vue           | 183 ++++++++++++++++++
 zero.Web.UI/App/pages/settings/user.vue       |   2 +-
 .../Resources/Localization/zero.en-us.json    |   4 +-
 zero.Web/ZeroMiddleware.cs                    |   2 +-
 6 files changed, 294 insertions(+), 5 deletions(-)
 rename zero.Web.UI/App/components/forms/{media.vue => media-old.vue} (99%)
 create mode 100644 zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
 create mode 100644 zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue

diff --git a/zero.Web.UI/App/components/forms/media.vue b/zero.Web.UI/App/components/forms/media-old.vue
similarity index 99%
rename from zero.Web.UI/App/components/forms/media.vue
rename to zero.Web.UI/App/components/forms/media-old.vue
index 7f64ed4a..c72c94d8 100644
--- a/zero.Web.UI/App/components/forms/media.vue
+++ b/zero.Web.UI/App/components/forms/media-old.vue
@@ -64,7 +64,7 @@
   };
 
   export default {
-    name: 'uiMedia',
+    name: 'uiMediaOld',
 
     props: {
       disabled: {
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
new file mode 100644
index 00000000..fb78d5a8
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/mediapicker.vue
@@ -0,0 +1,106 @@
+<template>
+  <div class="ui-iconpicker" :class="{'is-disabled': disabled }">
+    <input ref="input" type="hidden" :value="value" />
+    <ui-select-button icon="fth-plus" label="@mediapicker.select_text" description="@mediapicker.select_description" @click="pick" :disabled="disabled" />
+  </div>
+</template>
+
+
+<script>
+  import PickMediaOverlay from './overlay';
+  import Overlay from 'zero/services/overlay';
+  import { each as _each, extend as _extend, debounce as _debounce, isArray as _isArray } from 'underscore';
+  import Strings from 'zero/services/strings.js';
+
+  const TYPES = {
+    ALL: 'all',
+    IMAGE: 'image',
+    VIDEO: 'video',
+    DOCUMENT: 'document',
+    OTHER: 'other'
+  };
+
+  const DISPLAY = {
+    DEFAULT: 'default',
+    BIG: 'big',
+    GRID: 'grid'
+  };
+
+  const MAX_FILENAME_LENGTH = 32;
+
+  const defaultConfig = {
+    // maximum media items
+    limit: 1,
+    // media type
+    type: TYPES.ALL,
+    // how the previews are displayed
+    display: DISPLAY.DEFAULT,
+    // whether the select button is disallowed
+    disallowSelect: false,
+    // whether file upload is disallowed
+    disallowUpload: false,
+    // allowed file extensions
+    fileExtensions: [],
+    // maximum file size in MiB
+    maxFileSize: 10
+  };
+
+  export default {
+    name: 'uiMediapicker',
+
+    props: {
+      value: {
+        type: [Array, String],
+        default: null
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      config: {
+        type: Object,
+        default: () =>
+        {
+          return defaultConfig;
+        }
+      },
+    },
+
+    computed: {
+      
+    },
+
+    methods: {
+
+      onChange(value)
+      {
+        this.$emit('change', value);
+        this.$emit('input', value);
+        // TODO this does not trigger the forms dirty flag
+      },
+
+      pick()
+      {
+        if (this.disabled)
+        {
+          return;
+        }
+
+        let options = _extend({
+          title: '@iconpicker.title',
+          closeLabel: '@ui.close',
+          component: PickMediaOverlay,
+          model: this.value,
+          theme: 'dark',
+        }, typeof this.config === 'object' ? this.config : {});
+
+        return Overlay.open(options).then(value =>
+        {
+          this.onChange(value);
+          //this.$refs.input.value = value;
+        });
+      }
+      
+    }
+  }
+</script>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
new file mode 100644
index 00000000..1069a1a4
--- /dev/null
+++ b/zero.Web.UI/App/components/pickers/mediaPicker/overlay.vue
@@ -0,0 +1,183 @@
+<template>
+  <ui-form v-if="!loading" ref="form" class="ui-mediapicker-overlay" v-slot="form">
+    <h2 class="ui-headline" v-localize="'@media.name'"></h2>
+
+    <!--<div class="app-confirm-buttons">
+      <ui-button v-if="!disabled" type="light" :submit="true" :state="form.state" label="@ui.save"></ui-button>
+      <ui-button type="light" :label="config.closeLabel" :disabled="loading" @click="config.close"></ui-button>
+    </div>-->
+  </ui-form>
+</template>
+
+
+<script>
+  import { debounce as _debounce, filter as _filter } from 'underscore';
+
+  export default {
+
+    props: {
+      model: String,
+      config: Object
+    },
+
+    data: () => ({
+      colors: [ 'default', 'gray', 'blue-gray', 'blue', 'teal', 'green', 'lime', 'yellow', 'orange', 'red', 'purple', 'brown' ],
+      icon: null,
+      color: null,
+      query: '',
+      items: []
+    }),
+
+    watch: {
+      model()
+      {
+        this.init();
+      },
+      query()
+      {
+        this.debouncedSearch();
+      }
+    },
+
+    created()
+    {
+      this.debouncedSearch = _debounce(this.search, 100);
+      this.items = this.config.items;
+      this.init();
+    },
+
+    mounted()
+    {
+      let $selected = this.$el.querySelector('.ui-iconpicker-overlay-item.is-active');
+
+      if ($selected)
+      {
+        let $scrollable = this.$el.querySelector('content');
+        const offset = $selected.offsetTop - $scrollable.clientHeight * 0.5 - 30;
+        $scrollable.scrollTop = offset < 0 ? 0 : offset;
+      }
+    },
+
+    methods: {
+
+      confirm()
+      {
+        const result = (this.icon || '') + ' ' + (this.color || '').trim();
+        this.config.confirm(result);
+      },
+
+      select(item)
+      {
+        this.icon = item;
+        this.confirm();
+      },
+
+      selectColor(color)
+      {
+        this.color = color === 'default' ? null : 'color-' + color;
+      },
+
+      init()
+      {
+        if (!this.model)
+        {
+          this.icon = null;
+          this.color = null;
+        }
+        else
+        {
+          const parts = this.model.split(' ');
+          this.icon = parts[0];
+          this.color = parts.length > 1 ? parts[1] : null;
+        }
+      },
+
+      search()
+      {
+        const query = this.query;
+
+        if (!query)
+        {
+          this.items = this.config.items;
+        }
+        else
+        {
+          this.items = _filter(this.config.items, function (item)
+          {
+            return item.toLowerCase().indexOf(query) > -1;
+          })
+        }
+      }
+    }
+  }
+</script>
+
+<style lang="scss">
+  .ui-iconpicker-overlay content
+  {
+    padding-top: 0;
+  }
+
+  .ui-iconpicker-overlay-items
+  {
+    display: grid;
+    grid-gap: 0;
+    grid-template-columns: repeat(auto-fill, 61px);
+    align-items: stretch;
+  }
+
+  .ui-iconpicker-overlay-item
+  {
+    display: block;
+    text-align: center;
+    font-size: 20px;
+    height: 60px;
+    border-radius: var(--radius);
+    /*border: 2px solid transparent;*/
+
+    &:hover, &.is-active
+    {
+      background: var(--color-box);
+      box-shadow: 0 0 20px var(--color-shadow);
+    }
+
+    &.is-active
+    {
+      //color: var(--color-primary);
+    }
+  }
+
+  .ui-iconpicker-overlay-search
+  {
+    margin-bottom: 20px;
+  }
+
+  .ui-iconpicker-overlay-colors
+  {
+    text-align: center;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin: 0 20px;
+
+    i
+    {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      border-radius: 20px;
+      cursor: pointer;
+      transition: transform 0.2s ease;
+
+      &.is-active
+      {
+        transform: scale(1.4);
+      }
+    }
+  }
+
+  .ui-iconpicker-overlay-line
+  {
+
+  }
+</style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/pages/settings/user.vue b/zero.Web.UI/App/pages/settings/user.vue
index bf38a835..9a688d63 100644
--- a/zero.Web.UI/App/pages/settings/user.vue
+++ b/zero.Web.UI/App/pages/settings/user.vue
@@ -30,7 +30,7 @@
             </div>
           </ui-property>
           <ui-property label="@user.fields.avatar" description="@user.fields.avatar_text" :required="true">
-            <ui-media :config="avatarConfig" v-model="model.avatarId" :disabled="disabled" />
+            <ui-mediapicker :config="avatarConfig" v-model="model.avatarId" :disabled="disabled" />
           </ui-property>
         </div>
 
diff --git a/zero.Web/Resources/Localization/zero.en-us.json b/zero.Web/Resources/Localization/zero.en-us.json
index 0ab2d1ff..8b113e1c 100644
--- a/zero.Web/Resources/Localization/zero.en-us.json
+++ b/zero.Web/Resources/Localization/zero.en-us.json
@@ -297,8 +297,8 @@
   },
 
   "mediapicker": {
-    "select_text": "Select",
-    "select_description": "from library",
+    "select_text": "Add media",
+    "select_description": "Upload or select",
     "upload_text": "Upload",
     "upload_description": "Upload a new file"
   },
diff --git a/zero.Web/ZeroMiddleware.cs b/zero.Web/ZeroMiddleware.cs
index 919ec84c..849f42ff 100644
--- a/zero.Web/ZeroMiddleware.cs
+++ b/zero.Web/ZeroMiddleware.cs
@@ -13,7 +13,7 @@ namespace zero.Web
     public ZeroMiddleware(RequestDelegate next, IZeroOptions options)
     {
       Next = next;
-      Options = options;
+      Options = options; 
     }