diff --git a/Configuration/TypoScript/Main/Constants/Subcategory/Menu.typoscript b/Configuration/TypoScript/Main/Constants/Subcategory/Menu.typoscript index 7b477e082..f2fbaeb5d 100644 --- a/Configuration/TypoScript/Main/Constants/Subcategory/Menu.typoscript +++ b/Configuration/TypoScript/Main/Constants/Subcategory/Menu.typoscript @@ -108,7 +108,7 @@ pizpalue.menu { fast { items { first { - # cat=6060/1060/0510; type=string; label=Fastmenu first item icon class + # cat=6060/1060/0510; type=string; label=Fastmenu first item icon:Icon font class or svg-file path iconClass = ppicon ppicon-log-in # cat=6060/1060/0512; type=string; label=Fastmenu first item content uid:Uid from content element being rendered. Leave empty if not used. contentUid = @@ -117,7 +117,7 @@ pizpalue.menu { } second { - # cat=6060/1060/0520; type=string; label=Fastmenu second item icon class + # cat=6060/1060/0520; type=string; label=Fastmenu second item icon:Icon font class or svg-file path iconClass = ppicon ppicon-call # cat=6060/1060/0522; type=string; label=Fastmenu second item content uid:Uid from content element being rendered. Leave empty if not used. contentUid = @@ -126,7 +126,7 @@ pizpalue.menu { } third { - # cat=6060/1060/0530; type=string; label=Fastmenu third item icon class + # cat=6060/1060/0530; type=string; label=Fastmenu third item icon:Icon font class or svg-file path iconClass = ppicon ppicon-location # cat=6060/1060/0532; type=string; label=Fastmenu third item content uid:Uid from content element being rendered. Leave empty if not used. contentUid = diff --git a/Extensions/easyconf/Configuration/TCA/Overrides/20_tx_easyconf_configuration_menu.php b/Extensions/easyconf/Configuration/TCA/Overrides/20_tx_easyconf_configuration_menu.php index ae3d7974f..e028e28e5 100644 --- a/Extensions/easyconf/Configuration/TCA/Overrides/20_tx_easyconf_configuration_menu.php +++ b/Extensions/easyconf/Configuration/TCA/Overrides/20_tx_easyconf_configuration_menu.php @@ -117,6 +117,9 @@ $tca['columns']['menu_scroll_data_key']['description'] = $l10nFile . ':menu_scroll_data_key.description'; $tca['columns']['menu_scroll_menu_id']['description'] = $l10nFile . ':menu_scroll_menu_id.description'; $tca['columns']['menu_scroll_offset']['description'] = $l10nFile . ':menu_scroll_offset.description'; + $tca['columns']['menu_fast_items_first_icon_class']['description'] = $l10nFile . ':menu_fast_items_icon_class.description'; + $tca['columns']['menu_fast_items_second_icon_class']['description'] = $l10nFile . ':menu_fast_items_icon_class.description'; + $tca['columns']['menu_fast_items_third_icon_class']['description'] = $l10nFile . ':menu_fast_items_icon_class.description'; /** * Define palettes diff --git a/Extensions/easyconf/Resources/Private/Language/locallang_db_menu.xlf b/Extensions/easyconf/Resources/Private/Language/locallang_db_menu.xlf index 959d381f3..fe9d053ff 100644 --- a/Extensions/easyconf/Resources/Private/Language/locallang_db_menu.xlf +++ b/Extensions/easyconf/Resources/Private/Language/locallang_db_menu.xlf @@ -90,8 +90,11 @@ is opened. Just define one action by setting either a content or a link. + + Icon font class or svg-file path (e.g. EXT:your_extension/...) + - First item icon class + First item icon First item content @@ -100,7 +103,7 @@ First item link - Second item icon class + Second item icon Second item content @@ -109,7 +112,7 @@ Second item link - Third item icon class + Third item icon Third item content diff --git a/Resources/Private/Partials/Page/Navigation/Fast.html b/Resources/Private/Partials/Page/Navigation/Fast.html index 721d61462..81a55e419 100644 --- a/Resources/Private/Partials/Page/Navigation/Fast.html +++ b/Resources/Private/Partials/Page/Navigation/Fast.html @@ -1,5 +1,7 @@
@@ -22,23 +24,36 @@ {f:variable(name:'justShowIcon', value:1)} {f:variable(name:'justShowIcon', value:0)} - - + + {f:variable(name:'justShowIcon', value:0)} - - +
+ + + {f:variable(name: '_iconFile', value: item.iconClass) -> pvh:condition.string.contains(haystack: item.iconClass, needle: '.svg')} + + + {bp:inlineSvg(src: _iconFile)} + + + + + + diff --git a/Resources/Public/JavaScript/Dist/pizpalue.fastmenu.min.js b/Resources/Public/JavaScript/Dist/pizpalue.fastmenu.min.js index b2d89a6df..978dc4b8f 100644 --- a/Resources/Public/JavaScript/Dist/pizpalue.fastmenu.min.js +++ b/Resources/Public/JavaScript/Dist/pizpalue.fastmenu.min.js @@ -1 +1 @@ -!function(s){const e="fastMenu";function t(t){this.element=t,this._name=e,this.init()}t.prototype.init=function(){this._attachEventHandlers(),this._loadView()},t.prototype._hideContent=function(t){const e=s.getElementById(t.dataset.ppFmContenticon);t.classList.remove("pp-show"),e.classList.remove("pp-active"),this.element.classList.remove("ppc-content-show")},t.prototype._showContent=function(t){const e=s.getElementById(t.dataset.ppFmContenticon);t.classList.add("pp-show"),e.classList.add("pp-active"),this.element.classList.add("ppc-content-show")},t.prototype._contentIconClickHandler=function(t){const e=t.target,n=s.getElementById(e.dataset.ppFmContent);if(n.classList.contains("pp-show"))this._hideContent(n);else{const i=this.element.querySelectorAll(".pp-fm-content .pp-show");i.length&&i.forEach(t=>this._hideContent(t)),this._showContent(n)}},t.prototype._toggleMenu=function(){this.element.classList.toggle("pp-minimize"),this._saveView()},t.prototype._attachEventHandlers=function(){this.element.querySelectorAll(".pp-fm-handle").forEach(t=>{t.addEventListener("click",this._toggleMenu.bind(this))}),this.element.querySelectorAll(".pp-fm-contenticon").forEach(t=>{t.addEventListener("click",this._contentIconClickHandler.bind(this))})},t.prototype._loadView=function(){var t=Cookies.get("ppFastMenuMinimized");void 0===t&&this._saveView(),"true"===t?this.element.classList.add("pp-minimize"):this.element.classList.remove("pp-minimize")},t.prototype._saveView=function(){var t=String(this.element.classList.contains("pp-minimize"));Cookies.set("ppFastMenuMinimized",t,{expires:365})},Element.prototype[e]=function(){return this["plugin_"+e]||(this["plugin_"+e]=new t(this)),this}}((window,document)); \ No newline at end of file +!function(n){const e="fastMenu";function t(t){this.element=t,this._name=e,this.init()}t.prototype.init=function(){this._attachEventHandlers(),this._loadView()},t.prototype._hideContent=function(t){var e=n.getElementById(t.dataset.ppFmContenticon);t.classList.remove("pp-show"),e.classList.remove("pp-active"),this.element.classList.remove("ppc-content-show")},t.prototype._showContent=function(t){var e=n.getElementById(t.dataset.ppFmContenticon);t.classList.add("pp-show"),e.classList.add("pp-active"),this.element.classList.add("ppc-content-show")},t.prototype._contentIconClickHandler=function(t){var e,t=t.target.closest(".pp-fm-contenticon"),t=n.getElementById(t.dataset.ppFmContent);t.classList.contains("pp-show")?this._hideContent(t):((e=this.element.querySelectorAll(".pp-fm-content .pp-show")).length&&e.forEach(t=>this._hideContent(t)),this._showContent(t))},t.prototype._toggleMenu=function(){this.element.classList.toggle("pp-minimize"),this._saveView()},t.prototype._attachEventHandlers=function(){this.element.querySelectorAll(".pp-fm-handle").forEach(t=>{t.addEventListener("click",this._toggleMenu.bind(this))}),this.element.querySelectorAll(".pp-fm-contenticon").forEach(t=>{t.addEventListener("click",this._contentIconClickHandler.bind(this))})},t.prototype._loadView=function(){var t=Cookies.get("ppFastMenuMinimized");void 0===t&&this._saveView(),"true"===t?this.element.classList.add("pp-minimize"):this.element.classList.remove("pp-minimize")},t.prototype._saveView=function(){var t=String(this.element.classList.contains("pp-minimize"));Cookies.set("ppFastMenuMinimized",t,{expires:365})},Element.prototype[e]=function(){return this["plugin_"+e]||(this["plugin_"+e]=new t(this)),this}}((window,document)); \ No newline at end of file diff --git a/Resources/Public/JavaScript/Src/pizpalue.fastmenu.js b/Resources/Public/JavaScript/Src/pizpalue.fastmenu.js index 596499fad..361dd3e6f 100644 --- a/Resources/Public/JavaScript/Src/pizpalue.fastmenu.js +++ b/Resources/Public/JavaScript/Src/pizpalue.fastmenu.js @@ -29,7 +29,7 @@ Plugin.prototype._contentIconClickHandler = function (event) { const - contentIcon = event.target, + contentIcon = event.target.closest('.pp-fm-contenticon'), content = document.getElementById(contentIcon.dataset.ppFmContent); if ( content.classList.contains('pp-show') ) { // Hides selected content diff --git a/Resources/Public/Scss/Theme/Feature/fastmenu.scss b/Resources/Public/Scss/Theme/Feature/fastmenu.scss index d73c3282f..b2f0e6115 100644 --- a/Resources/Public/Scss/Theme/Feature/fastmenu.scss +++ b/Resources/Public/Scss/Theme/Feature/fastmenu.scss @@ -51,6 +51,10 @@ &.pp-active { color: $pp-fastmenu-icon-active-color; } + &.ppc-inline svg { + width: var(--pp-fastmenu-icon-size); + height: var(--pp-fastmenu-icon-size); + } } }