From 0af6c7e444b09d40b419b39e33685c66027994fd Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 5 Apr 2023 12:24:43 -0300 Subject: [PATCH 1/7] Update to text-overflow logic inside dropdowns. --- .../admin/scss/_dropdown-and-autocomplete.scss | 15 ++++++++++++++- .../components/view-mode-slideshow.vue | 2 +- .../theme-search/scss/_view-mode-slideshow.scss | 4 ++-- 3 files changed, 17 insertions(+), 4 deletions(-) diff --git a/src/views/admin/scss/_dropdown-and-autocomplete.scss b/src/views/admin/scss/_dropdown-and-autocomplete.scss index f028fbeb9..a123fb2c0 100644 --- a/src/views/admin/scss/_dropdown-and-autocomplete.scss +++ b/src/views/admin/scss/_dropdown-and-autocomplete.scss @@ -73,17 +73,30 @@ margin-right: 0.5em; display: flex; } + .media-content { + width: 100%; display: flex; - width: 80%; .ellipsed-text { overflow-x: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 3px; + transition: white-space .3s ease, overflow .3s ease; } } + .media-left+.media-content { + width: calc(100% - 32px); + } + } + + &:hover { + .ellipsed-text { + overflow-x: visible !important; + white-space: normal !important; + word-wrap: break-word; + } } } } diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue index 759c00a2f..73f3018c7 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-slideshow.vue @@ -316,7 +316,7 @@ placement: 'auto-start', popperClass: ['tainacan-tooltip', 'tooltip'] }" - class="ellipsed-text"> + class="ellipsed-name"> {{ metadatum.name }} diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss index d91dc5d69..4181202a0 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss @@ -126,11 +126,11 @@ color: var(--tainacan-white); - span:not(.ellipsed-text) { + span:not(.ellipsed-name) { margin-right: 5px; margin-left: -5px; } - .ellipsed-text { + .ellipsed-name { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; From 1dabc2206f0667050081d838312a52520c27e075 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Wed, 5 Apr 2023 12:24:59 -0300 Subject: [PATCH 2/7] Dynamic imports for registered view modes --- .../blocks/faceted-search/theme.js | 62 ++++++++++--------- 1 file changed, 33 insertions(+), 29 deletions(-) diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js index 678ce7adf..271ef4ed8 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js @@ -44,15 +44,6 @@ import TaincanFiltersList from '../../../admin/components/filter-types/tainacan- import ThemeItemsPage from './theme-search/theme-items-page.vue'; import ThemeSearch from './theme.vue'; -// View Modes -import ViewModeTable from './theme-search/components/view-mode-table.vue'; -import ViewModeCards from './theme-search/components/view-mode-cards.vue'; -import ViewModeRecords from './theme-search/components/view-mode-records.vue'; -import ViewModeMasonry from './theme-search/components/view-mode-masonry.vue'; -import ViewModeSlideshow from './theme-search/components/view-mode-slideshow.vue'; -import ViewModeList from './theme-search/components/view-mode-list.vue'; -import ViewModeMap from './theme-search/components/view-mode-map.vue'; - // Remaining imports import store from '../../../admin/js/store/store'; import routerTheme from './theme-search/js/theme-router.js'; @@ -154,14 +145,32 @@ export default (element) => { Vue.component('theme-items-page', ThemeItemsPage); Vue.component('theme-search', ThemeSearch); - // Oficial view modes - Vue.component('view-mode-table', ViewModeTable); - Vue.component('view-mode-cards', ViewModeCards); - Vue.component('view-mode-records', ViewModeRecords); - Vue.component('view-mode-masonry', ViewModeMasonry); - Vue.component('view-mode-slideshow', ViewModeSlideshow); - Vue.component('view-mode-list', ViewModeList); - Vue.component('view-mode-map', ViewModeMap); + // View Modes Logic + const registeredViewModes = + ( tainacan_plugin && tainacan_plugin.registered_view_modes && tainacan_plugin.registered_view_modes.lenght ) ? + tainacan_plugin.registered_view_modes : + [ 'table', 'cards', 'records', 'masonry', 'slideshow', 'list', 'map' ]; + + // At first, we consider that all registered view modes are included. + let possibleViewModes = registeredViewModes; + if ( blockElement.attributes['enabled-view-modes'] != undefined ) + possibleViewModes = blockElement.attributes['enabled-view-modes'].value.split(','); + + // View Mode settings + let possibleDefaultViewMode = 'masonry'; + if ( blockElement.attributes['default-view-mode'] != undefined) + possibleDefaultViewMode = blockElement.attributes['default-view-mode'].value; + + if ( possibleViewModes.indexOf(possibleDefaultViewMode) < 0 ) + possibleViewModes.push(possibleDefaultViewMode); + + // Logic for dynamic importing Tainacan oficial view modes only if they are necessary + possibleViewModes.forEach(viewModeSlug => { + if ( registeredViewModes.indexOf(viewModeSlug) >= 0 ) + import('./theme-search/components/view-mode-' + viewModeSlug + '.vue') + .then(importedModule => Vue.component('view-mode-' + viewModeSlug, importedModule.default) ) + .catch(error => console.log(error)); + }); Vue.use(eventBusSearch, { store: store, router: routerTheme}); @@ -215,18 +224,6 @@ export default (element) => { if (this.$el.attributes['taxonomy'] != undefined) this.taxonomy = this.$el.attributes['taxonomy'].value; - // View Mode settings - if (this.$el.attributes['default-view-mode'] != undefined) - this.defaultViewMode = this.$el.attributes['default-view-mode'].value; - else - this.defaultViewMode = 'cards'; - - if (this.$el.attributes['is-forced-view-mode'] != undefined) - this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value); - - if (this.$el.attributes['enabled-view-modes'] != undefined) - this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(','); - // Sorting options if (this.$el.attributes['default-order'] != undefined) this.defaultOrder = this.$el.attributes['default-order'].value; @@ -239,6 +236,13 @@ export default (element) => { if (this.$el.attributes['default-orderby-type'] != undefined) this.defaultOrderByType = this.maybeConvertFromJSON(this.$el.attributes['default-orderby-type'].value); + // View modes settings + if (this.$el.attributes['is-forced-view-mode'] != undefined) + this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value); + + this.defaultViewMode = possibleDefaultViewMode; + this.enabledViewModes = possibleViewModes; + // Options related to hidding elements if (this.$el.attributes['hide-filters'] != undefined) this.hideFilters = this.isParameterTrue('hide-filters'); From 566ad66a9d4b53e7c9f01f144e5e53699f4a3d57 Mon Sep 17 00:00:00 2001 From: mateuswetah Date: Thu, 6 Apr 2023 11:28:14 -0300 Subject: [PATCH 3/7] Dynamic load of filters list bundle in case hideFilters is passed. --- .../filter-types/tainacan-filter-item.vue | 25 +++++++++++ .../components/search/filters-items-list.vue | 2 + src/views/admin/js/admin-main.js | 31 +------------- .../theme-search/theme-items-page.vue | 2 - .../blocks/faceted-search/theme.js | 41 ++++++------------- 5 files changed, 40 insertions(+), 61 deletions(-) diff --git a/src/views/admin/components/filter-types/tainacan-filter-item.vue b/src/views/admin/components/filter-types/tainacan-filter-item.vue index 4fc6c6c65..b44825cd3 100644 --- a/src/views/admin/components/filter-types/tainacan-filter-item.vue +++ b/src/views/admin/components/filter-types/tainacan-filter-item.vue @@ -86,8 +86,33 @@