From b3a0c2b8ec3da2992a5724147131a6dc0112d849 Mon Sep 17 00:00:00 2001
From: Tobias Klika <cee@live.at>
Date: Sun, 12 Sep 2021 13:00:07 +0200
Subject: [PATCH] UI updates

---
 zero.Core/Extensions/QueryableExtensions.cs   |  7 +++++
 .../App/components/forms/form-header.vue      |  3 +-
 zero.Web.UI/App/components/header-bar.vue     | 20 +++++++------
 .../App/components/overlays/dropdown.vue      |  2 +-
 .../components/overlays/overlay-holder.vue    |  4 +--
 .../pickers/datePicker/datepicker.vue         |  6 +++-
 .../dateRangePicker/daterangepicker.vue       | 30 +++++++++++--------
 zero.Web.UI/App/components/tables/table.scss  |  2 +-
 zero.Web.UI/App/components/tables/table.vue   |  2 +-
 .../App/editor/fields/daterangepicker.vue     |  4 +--
 zero.Web.UI/app/helpers/overlay.js            |  2 +-
 zero.Web/Controllers/MediaController.cs       | 13 ++++++--
 12 files changed, 60 insertions(+), 35 deletions(-)

diff --git a/zero.Core/Extensions/QueryableExtensions.cs b/zero.Core/Extensions/QueryableExtensions.cs
index d59209af..b5b3f750 100644
--- a/zero.Core/Extensions/QueryableExtensions.cs
+++ b/zero.Core/Extensions/QueryableExtensions.cs
@@ -82,6 +82,8 @@ namespace zero.Core.Extensions
         return source;
       }
 
+      searchTerms = searchTerms.Trim();
+
       string[] searchParts = searchTerms.Split(new[] { " " }, StringSplitOptions.RemoveEmptyEntries).Select(x =>
       {
         if (suffix != null)
@@ -95,6 +97,11 @@ namespace zero.Core.Extensions
         return x;
       }).ToArray();
 
+      if (searchTerms.StartsWith('"') && searchTerms.EndsWith('"'))
+      {
+        searchParts = new[] { searchTerms };
+      }
+
       return source.Search(fieldSelector, searchParts, @operator: @operator);
     }
   }
diff --git a/zero.Web.UI/App/components/forms/form-header.vue b/zero.Web.UI/App/components/forms/form-header.vue
index bc975121..9bbf54b1 100644
--- a/zero.Web.UI/App/components/forms/form-header.vue
+++ b/zero.Web.UI/App/components/forms/form-header.vue
@@ -2,7 +2,8 @@
   <ui-header-bar class="ui-form-header" :back-button="true">
     <template v-slot:title>
       <h2 class="ui-header-bar-title" :class="{'is-empty': title && !value.name && !titleDisabled}">
-        <span v-if="prefix" class="-minor -prefix"><span v-localize:html="prefix"></span> <ui-icon symbol="fth-chevron-right" /></span>
+        <span v-if="prefix" class="-minor -prefix" v-localize:html="prefix"></span>
+        <ui-icon v-if="prefix" class="-chevron" symbol="fth-chevron-right" />
         <input v-if="!titleDisabled" class="ui-form-header-title-input" type="text" v-model="value.name" v-localize:placeholder="title" :readonly="titleDisabled || disabled" />
         <!--<ui-alias class="ui-form-header-title-alias" v-if="hasAlias" v-model="value.alias" :name="value.name" :disabled="disabled" />-->
         <span v-if="titleDisabled" v-localize="forceTitle ? title : (value.name || title)"></span>
diff --git a/zero.Web.UI/App/components/header-bar.vue b/zero.Web.UI/App/components/header-bar.vue
index fe390cdc..55e3f4c9 100644
--- a/zero.Web.UI/App/components/header-bar.vue
+++ b/zero.Web.UI/App/components/header-bar.vue
@@ -6,7 +6,8 @@
         <div class="ui-header-bar-main-title">
           <slot name="title">
             <h2 class="ui-header-bar-title" :class="{'is-empty': !title && titleEmpty}">
-              <span v-if="prefix" class="-minor -prefix"><span v-localize:html="prefix"></span> <ui-icon symbol="fth-chevron-right" /></span>
+              <span v-if="prefix" class="-minor -prefix" v-localize:html="prefix"></span>
+              <ui-icon v-if="prefix" class="-chevron" symbol="fth-chevron-right" />
               <span v-localize="title || titleEmpty"></span>
               <span v-if="suffix" class="-minor -suffix" v-localize:html="suffix"></span>
               <span v-if="count > 0" class="-minor -count">{{count}}</span>
@@ -77,7 +78,7 @@
   .ui-header-bar
   {
     width: 100%;
-    height: 100px;
+    height: 90px;
     padding: 0 var(--padding) 0; //10px;
 
     & + .ui-blank-box, & + .ui-box, & + .ui-view-box
@@ -159,6 +160,14 @@
       flex-shrink: 0;
     }
 
+    .-chevron
+    {
+      color: var(--color-text-dim);
+      position: relative;
+      top: -1px;
+      margin: 0 var(--padding-xxs);
+    }
+
     .-count
     {
       display: inline-block;
@@ -179,13 +188,6 @@
       position: relative;
       top: -1px;
     }
-
-    .ui-icon
-    {
-      position: relative;
-      top: 2px;
-      margin: 0 5px;
-    }
   }
 
   .ui-header-bar-description
diff --git a/zero.Web.UI/App/components/overlays/dropdown.vue b/zero.Web.UI/App/components/overlays/dropdown.vue
index 95b696ef..396cc2b5 100644
--- a/zero.Web.UI/App/components/overlays/dropdown.vue
+++ b/zero.Web.UI/App/components/overlays/dropdown.vue
@@ -23,7 +23,7 @@
       },
       theme: {
         type: String,
-        default: 'light'
+        default: 'dark'
       },
       locked: {
         type: Boolean,
diff --git a/zero.Web.UI/App/components/overlays/overlay-holder.vue b/zero.Web.UI/App/components/overlays/overlay-holder.vue
index 14474ba6..8f7282e5 100644
--- a/zero.Web.UI/App/components/overlays/overlay-holder.vue
+++ b/zero.Web.UI/App/components/overlays/overlay-holder.vue
@@ -2,7 +2,7 @@
   <div class="app-overlays" :class="{ 'has-multiple': instances.length > 1 }">
     <transition-group name="overlay" :duration="600">
       <div class="app-overlay-outer" :display="instance.display" v-for="(instance, index) in instances" :key="instance.id" 
-           :style="{ transform: instance.display !== 'editor' ? null : 'translateX(' + (editorLength - index - 1) * -60 + 'px)' }"
+           :style="{ transform: instance.display !== 'editor' ? null : 'translateX(' + (editorLength - index - 1) * -120 + 'px)' }"
            :class="instance.class || ''">
         <div class="app-overlay-bg" @click="close(instance)"></div>
         <div open class="app-overlay" :data-alias="instance.alias" :style="{ width: instance.width ? (instance.width + 'px') : null }" :class="'theme-' + instance.theme" :display="instance.display">
@@ -77,7 +77,7 @@
     z-index: 5;
     justify-content: center;
     align-items: flex-start;
-    transition: transform 0.4s ease-out;
+    transition: transform 0.55s ease-out;
 
     & + .app-overlay-outer .app-overlay
     {
diff --git a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
index 9184f8fb..abff4da4 100644
--- a/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
+++ b/zero.Web.UI/App/components/pickers/datePicker/datepicker.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="ui-datepicker" :class="{'is-disabled': disabled }">
-    <input type="text" class="ui-input ui-datepicker-input" v-localize:placeholder="'@ui.date.select'" :value="output" @input="onChange" @focus="onFocus" @blur="onBlur" :disabled="disabled" />
+    <input type="text" class="ui-input ui-datepicker-input" v-localize:placeholder="placeholder" :value="output" @input="onChange" @focus="onFocus" @blur="onBlur" :disabled="disabled" />
     <ui-icon v-if="!clear || !value" symbol="fth-calendar" class="ui-datepicker-icon" :size="17" />
     <button v-if="clear && value" type="button" class="ui-datepicker-input-button" @click="clearInput"><i class="fth-x"></i></button>
 
@@ -30,6 +30,10 @@
         type: String,
         default: null
       },
+      placeholder: {
+        type: String,
+        default: '@ui.date.select'
+      },
       clear: {
         type: Boolean,
         default: true
diff --git a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
index 9660db6a..828531fa 100644
--- a/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
+++ b/zero.Web.UI/App/components/pickers/dateRangePicker/daterangepicker.vue
@@ -2,17 +2,15 @@
   <div class="ui-daterangepicker" :class="{'is-disabled': disabled }">
     <button v-if="!inline" type="button" class="ui-link" @click="schedule" v-localize="scheduleLocalize" :disabled="disabled"></button>
     <div v-if="inline" class="ui-daterangepicker-inline">
-      <div class="ui-split">
-        <div class="ui-daterangepicker-group">
-          <ui-property :label="fromLabel" :vertical="true">
-            <ui-datepicker v-model="value.from" :time="time" />
-          </ui-property>
-        </div>
-        <div class="ui-daterangepicker-group" v-if="rangeEnd">
-          <ui-property :label="toLabel" :vertical="true">
-            <ui-datepicker v-model="value.to" :time="time" />
-          </ui-property>
-        </div>
+      <div class="ui-daterangepicker-group">
+        <ui-property :vertical="true">
+          <ui-datepicker v-model="value.from" :time="time" />
+        </ui-property>
+      </div>
+      <div class="ui-daterangepicker-group" v-if="rangeEnd">
+        <ui-property :vertical="true">
+          <ui-datepicker v-model="value.to" :time="time" />
+        </ui-property>
       </div>
     </div>
   </div>
@@ -64,11 +62,11 @@
       },
       fromLabel: {
         type: String,
-        default: '@page.schedule.publish'
+        default: '@ui.date.range_from'
       },
       toLabel: {
         type: String,
-        default: '@page.schedule.unpublish'
+        default: '@ui.date.range_to' 
       },
       amPm: {
         type: Boolean,
@@ -155,4 +153,10 @@
     font-weight: 700;
     text-decoration-color: var(--color-primary) !important;
   }
+
+  .ui-daterangepicker-inline
+  {
+    display: flex;
+    gap: var(--padding-s);
+  }
 </style>
\ No newline at end of file
diff --git a/zero.Web.UI/App/components/tables/table.scss b/zero.Web.UI/App/components/tables/table.scss
index eb2acd1b..d4f52d77 100644
--- a/zero.Web.UI/App/components/tables/table.scss
+++ b/zero.Web.UI/App/components/tables/table.scss
@@ -74,6 +74,7 @@ a.ui-table-row:hover, button.ui-table-row:hover
   .ui-table-cell
   {
     justify-content: space-between; 
+    font-size: var(--font-size-s);
   }
 
   .ui-table.is-inline &
@@ -221,7 +222,6 @@ a.ui-table-row:hover, button.ui-table-row:hover
 
 .ui-table-empty-icon
 {
-  font-size: 34px;
   margin-bottom: 20px;
 }
 
diff --git a/zero.Web.UI/App/components/tables/table.vue b/zero.Web.UI/App/components/tables/table.vue
index d1c9e6b8..7ac78bbf 100644
--- a/zero.Web.UI/App/components/tables/table.vue
+++ b/zero.Web.UI/App/components/tables/table.vue
@@ -25,7 +25,7 @@
       </component>
 
       <div class="ui-table-empty" v-if="!isLoading && items.length < 1">
-        <i class="ui-table-empty-icon fth-list"></i>
+        <ui-icon class="ui-table-empty-icon" symbol="fth-list" size="32" />
         There are no items to show in this list
       </div>
 
diff --git a/zero.Web.UI/App/editor/fields/daterangepicker.vue b/zero.Web.UI/App/editor/fields/daterangepicker.vue
index 9228cdff..db16ab65 100644
--- a/zero.Web.UI/App/editor/fields/daterangepicker.vue
+++ b/zero.Web.UI/App/editor/fields/daterangepicker.vue
@@ -34,11 +34,11 @@
       },
       fromLabel: {
         type: String,
-        default: null
+        default: '@ui.date.range_from'
       },
       toLabel: {
         type: String,
-        default: null
+        default: '@ui.date.range_to' 
       },
       amPm: {
         type: Boolean,
diff --git a/zero.Web.UI/app/helpers/overlay.js b/zero.Web.UI/app/helpers/overlay.js
index c9b653f3..6efbeed3 100644
--- a/zero.Web.UI/app/helpers/overlay.js
+++ b/zero.Web.UI/app/helpers/overlay.js
@@ -75,7 +75,7 @@ export default new Vue({
 
       if (typeof options.theme === 'undefined')
       {
-        options.theme = 'default';
+        options.theme = 'default'; 
       }
 
       this.instances.push(options);
diff --git a/zero.Web/Controllers/MediaController.cs b/zero.Web/Controllers/MediaController.cs
index fb9fee98..b5706b42 100644
--- a/zero.Web/Controllers/MediaController.cs
+++ b/zero.Web/Controllers/MediaController.cs
@@ -92,9 +92,16 @@ namespace zero.Web.Controllers
 
       if (path.StartsWith("http"))
       {
-        using var client = new WebClient();
-        var content = client.DownloadData(path);
-        return File(content, contentType, DateTimeOffset.Now, EntityTagHeaderValue.Any);
+        try
+        {
+          using var client = new WebClient();
+          var content = client.DownloadData(path);
+          return File(content, contentType, DateTimeOffset.Now, EntityTagHeaderValue.Any);
+        }
+        catch
+        {
+          return NotFound();
+        }
       }
 
       string fullPath = Path.Combine(Paths.WebRoot, path?.Trim('/') ?? String.Empty);