From 5fc614d2585969eda152ebf68722311622e048c6 Mon Sep 17 00:00:00 2001 From: Tobias Klika Date: Wed, 13 Jan 2021 13:51:55 +0100 Subject: [PATCH] UI updates --- zero.Web.UI/App/components/header-bar.vue | 2 +- zero.Web.UI/App/components/tables/table.scss | 2 +- zero.Web.UI/App/navigation.vue | 16 +++++++++++++--- zero.Web.UI/Sass/Canvas/_navigation.scss | 9 +++++++-- zero.Web.UI/Sass/Core/_core.scss | 15 +++++++++++++-- zero.Web.UI/Sass/Modules/_button.scss | 4 ++-- zero.Web.UI/Sass/Settings/_theme-light.scss | 6 +++--- zero.Web.UI/app/core/editor-field.ts | 1 + zero.Web.UI/app/core/editor.ts | 3 ++- .../BackofficeCollectionController.cs | 4 +++- zero.Web/Controllers/BackofficeController.cs | 12 ++++++++---- zero.Web/Views/Zero/Index.cshtml | 2 +- 12 files changed, 55 insertions(+), 21 deletions(-) diff --git a/zero.Web.UI/App/components/header-bar.vue b/zero.Web.UI/App/components/header-bar.vue index c9022eb2..4d6ca01a 100644 --- a/zero.Web.UI/App/components/header-bar.vue +++ b/zero.Web.UI/App/components/header-bar.vue @@ -2,7 +2,7 @@
- +

diff --git a/zero.Web.UI/App/components/tables/table.scss b/zero.Web.UI/App/components/tables/table.scss index 78f54a0a..a427f791 100644 --- a/zero.Web.UI/App/components/tables/table.scss +++ b/zero.Web.UI/App/components/tables/table.scss @@ -53,7 +53,7 @@ a.ui-table-row:hover { - box-shadow: var(--shadow-mid); + //box-shadow: var(--shadow-mid); background: var(--color-table-hover); z-index: 2; } diff --git a/zero.Web.UI/App/navigation.vue b/zero.Web.UI/App/navigation.vue index 9c09a6d3..def2a634 100644 --- a/zero.Web.UI/App/navigation.vue +++ b/zero.Web.UI/App/navigation.vue @@ -1,8 +1,9 @@  - + @@ -64,6 +65,8 @@ import MediaApi from 'zero/api/media.js' import IconPicker from 'zero/components/pickers/iconPicker/iconpicker.vue'; + const compactCacheKey = 'zero.navigation.compact'; + export default { name: 'app-navigation', @@ -90,6 +93,7 @@ created() { + this.compact = localStorage.getItem(compactCacheKey) === 'true'; this.buildUser(AuthApi.user); AuthApi.$on('user', user => @@ -171,6 +175,12 @@ location.reload(); } }); + }, + + toggleSidebar() + { + this.compact = !this.compact; + localStorage.setItem(compactCacheKey, this.compact.toString()); } } } diff --git a/zero.Web.UI/Sass/Canvas/_navigation.scss b/zero.Web.UI/Sass/Canvas/_navigation.scss index 99ae48fb..fc25c42a 100644 --- a/zero.Web.UI/Sass/Canvas/_navigation.scss +++ b/zero.Web.UI/Sass/Canvas/_navigation.scss @@ -257,6 +257,11 @@ a.app-nav-child { display: block; } + + &:before + { + display: none; + } } .app-nav-item-text, .app-nav-item-arrow @@ -276,11 +281,11 @@ a.app-nav-child border-top-left-radius: 0; border-bottom-left-radius: 0; border: 1px solid var(--color-dropdown-border); - box-shadow: var(--shadow-dropdown); + box-shadow: 6px 1px 8px rgba(0, 0, 0, 0.02); padding: 5px; color: var(--color-text); margin-left: 82px; - margin-top: -50px; + margin-top: -55px; &:hover { diff --git a/zero.Web.UI/Sass/Core/_core.scss b/zero.Web.UI/Sass/Core/_core.scss index 5bc85205..eefa41d4 100644 --- a/zero.Web.UI/Sass/Core/_core.scss +++ b/zero.Web.UI/Sass/Core/_core.scss @@ -296,9 +296,9 @@ code margin: 0; } - .ui-box + .ui-box + .ui-box + .ui-box:not(.ui-tab) { - margin-top: var(--padding-s); + margin-top: var(--padding-s); } .ui-tabs-list, .editor @@ -319,4 +319,15 @@ code top: 50%; margin: -14px 0 0 -14px; } +} + +.show-dark, .hide-light, +.theme-dark .show-light, .theme-dark .hide-dark +{ + display: none !important; +} + +.theme-dark .show-dark, .theme-dark .hide-light +{ + display: initial !important; } \ No newline at end of file diff --git a/zero.Web.UI/Sass/Modules/_button.scss b/zero.Web.UI/Sass/Modules/_button.scss index fb34242e..05720ef9 100644 --- a/zero.Web.UI/Sass/Modules/_button.scss +++ b/zero.Web.UI/Sass/Modules/_button.scss @@ -71,9 +71,9 @@ button::-moz-focus-inner &.type-small { - height: 34px; + height: 38px; font-size: var(--font-size-s); - padding: 0 12px; + padding: 0 16px; } &.type-light, &.type-action diff --git a/zero.Web.UI/Sass/Settings/_theme-light.scss b/zero.Web.UI/Sass/Settings/_theme-light.scss index 208528df..d081190d 100644 --- a/zero.Web.UI/Sass/Settings/_theme-light.scss +++ b/zero.Web.UI/Sass/Settings/_theme-light.scss @@ -18,10 +18,10 @@ // background colors $color-bg: #f4f4f6; - $color-bg-shade-0: #fff; + $color-bg-shade-0: #f7f7f9; $color-bg-shade-1: #fff; // bright - $color-bg-shade-2: #f8f8f9; // dim - $color-bg-shade-3: #f5f5f6; // bright-two + $color-bg-shade-2: #f8f8fa; // dim + $color-bg-shade-3: #f5f5f7; // bright-two $color-bg-shade-4: #efeff1; // bright-three $color-bg-shade-5: #eaecef; $color-bg-shade-6: #d2d2d7; diff --git a/zero.Web.UI/app/core/editor-field.ts b/zero.Web.UI/app/core/editor-field.ts index e8b85aab..8eda5877 100644 --- a/zero.Web.UI/app/core/editor-field.ts +++ b/zero.Web.UI/app/core/editor-field.ts @@ -39,6 +39,7 @@ class EditorField condition: null, disabled: false, tab: null, + allTabs: false, coreDatabase: false, class: '' }; diff --git a/zero.Web.UI/app/core/editor.ts b/zero.Web.UI/app/core/editor.ts index b161bdb4..f55a0901 100644 --- a/zero.Web.UI/app/core/editor.ts +++ b/zero.Web.UI/app/core/editor.ts @@ -96,6 +96,7 @@ class Editor * @param {boolean|function} [options.disabled=false] - Conditionally disable the field * @param {boolean} [options.coreDatabase] - Operate on the core database for this field (default is set by Editor.options.coreDatabase) * @param {string|object} [options.tab] - Add this field to a tab (by passing the alias or the tab instance) + * @param {boolean} [options.allTabs] - Add this field to all defined tabs (could be an information property for instance) * @param {string} [options.classes] - Append HTML class to the generated property * @returns {EditorField} */ @@ -164,7 +165,7 @@ class Editor getFields(tab) { const alias = typeof tab === 'undefined' ? null : (typeof tab === 'string' ? tab : tab.alias); - return this.fields.filter(x => !alias ? true : x.options.tab === alias); + return this.fields.filter(x => !alias || x.options.allTabs ? true : x.options.tab === alias); } diff --git a/zero.Web/Controllers/BackofficeCollectionController.cs b/zero.Web/Controllers/BackofficeCollectionController.cs index 565f006d..17e93d9d 100644 --- a/zero.Web/Controllers/BackofficeCollectionController.cs +++ b/zero.Web/Controllers/BackofficeCollectionController.cs @@ -21,6 +21,8 @@ namespace zero.Web.Controllers protected Action PreviewTransform { get; set; } + protected Action PickerTransform { get; set; } + public BackofficeCollectionController(TCollection collection) { @@ -55,7 +57,7 @@ namespace zero.Web.Controllers } - public virtual async Task> GetForPicker() => await SelectList(Collection.Stream()); + public virtual async Task> GetForPicker() => await SelectList(Collection.Stream(), PickerTransform); public virtual async Task> GetPreviews([FromQuery] List ids) => Previews(await Collection.GetByIds(ids.ToArray()), PreviewTransform); diff --git a/zero.Web/Controllers/BackofficeController.cs b/zero.Web/Controllers/BackofficeController.cs index 909ca5bb..f238e491 100644 --- a/zero.Web/Controllers/BackofficeController.cs +++ b/zero.Web/Controllers/BackofficeController.cs @@ -138,7 +138,7 @@ namespace zero.Web.Controllers } else { - PreviewModel model = new PreviewModel() + PreviewModel model = new() { Id = item.Value.Id, Name = item.Value.Name @@ -155,18 +155,22 @@ namespace zero.Web.Controllers - public async Task> SelectList(IAsyncEnumerable enumerable) where T : IZeroEntity + public async Task> SelectList(IAsyncEnumerable enumerable, Action transform = null) where T : IZeroEntity { List items = new List(); await foreach (T item in enumerable) { - items.Add(new SelectModel() + SelectModel model = new() { Id = item.Id, Name = item.Name, IsActive = item.IsActive - }); + }; + + transform?.Invoke(item, model); + + items.Add(model); } return items; diff --git a/zero.Web/Views/Zero/Index.cshtml b/zero.Web/Views/Zero/Index.cshtml index ab19f004..135aba7d 100644 --- a/zero.Web/Views/Zero/Index.cshtml +++ b/zero.Web/Views/Zero/Index.cshtml @@ -19,7 +19,7 @@ zero - +