diff --git a/public/js/pimcore/iconlibrary.js b/public/js/pimcore/iconlibrary.js
index 0d7243e658..6f83253909 100644
--- a/public/js/pimcore/iconlibrary.js
+++ b/public/js/pimcore/iconlibrary.js
@@ -11,77 +11,213 @@
* @license http://www.pimcore.org/license GPLv3 and PCL
*/
-pimcore.registerNS("pimcore.iconlibrary.panel");
+pimcore.registerNS("pimcore.iconlibrary");
/**
* @private
*/
-pimcore.iconlibrary.panel = Class.create({
+pimcore.iconlibrary = {
- initialize: function () {
- this.getTabPanel();
- },
-
- activate: function () {
- const tabPanel = Ext.getCmp("pimcore_panel_tabs");
- tabPanel.setActiveItem("pimcore_iconlibrary_panel");
- },
+ panel: Class.create({
- getTabPanel: function () {
- if (!this.panel) {
- const iconLibraryTab = Ext.create('Ext.tab.Panel', {
- region: 'center',
- deferredRender: true,
- id: "pimcore_icon_library_tabs",
- hideMode: "display",
- cls: "tab_panel",
- height: "100%",
- items: [
- {
- title: t('color_icons'),
- html: '',
- },
- {
- title: t('white_icons'),
- html: '',
- },
- {
- title: t('twemoji'),
- html: '',
- },
- {
- title: t('flags'),
- html: '',
- }
- ]
- });
-
- this.panel = new Ext.Panel({
- id: "pimcore_iconlibrary_panel",
- title: t("icon_library"),
- iconCls: "pimcore_icon_icons",
- border: false,
- layout: 'border',
- closable: true,
- items: [
- iconLibraryTab
- ],
- });
+ initialize: function () {
+ this.getTabPanel();
+ },
+ activate: function () {
const tabPanel = Ext.getCmp("pimcore_panel_tabs");
- tabPanel.add(this.panel);
+ tabPanel.setActiveItem("pimcore_iconlibrary_panel");
+ },
+
+ getTabPanel: function () {
+ if (!this.panel) {
+ const iconLibraryTab = Ext.create('Ext.tab.Panel', {
+ region: 'center',
+ deferredRender: true,
+ id: "pimcore_icon_library_tabs",
+ hideMode: "display",
+ cls: "tab_panel",
+ height: "100%",
+ items: [
+ {
+ title: t('color_icons'),
+ html: '',
+ },
+ {
+ title: t('white_icons'),
+ html: '',
+ },
+ {
+ title: t('twemoji'),
+ html: '',
+ },
+ {
+ title: t('flags'),
+ html: '',
+ }
+ ]
+ });
+
+ this.panel = new Ext.Panel({
+ id: "pimcore_iconlibrary_panel",
+ title: t("icon_library"),
+ iconCls: "pimcore_icon_icons",
+ border: false,
+ layout: 'border',
+ closable: true,
+ items: [
+ iconLibraryTab
+ ],
+ });
+ const tabPanel = Ext.getCmp("pimcore_panel_tabs");
+ tabPanel.add(this.panel);
+
+
+ this.panel.on("destroy", function () {
+ pimcore.globalmanager.remove("iconlibrary");
+ });
+
+ pimcore.layout.refresh();
+ }
+
+ return this.panel;
+ }
+ }),
- this.panel.on("destroy", function () {
- pimcore.globalmanager.remove("iconlibrary");
- });
+ // needed for compatibility reasons when the icon library is loaded as iframe panel
+ replaceCurrentTabWithIconLibrary: function () {
+ var tabpanel = Ext.getCmp("pimcore_panel_tabs");
+ var activeTab = tabpanel.getActiveTab();
- pimcore.layout.refresh();
+ if (activeTab) {
+ activeTab.close();
}
- return this.panel;
+ pimcore.globalmanager.get("layout_toolbar").showIconLibrary()
},
-});
+
+^^ createIconSelectionWidget: function (value, classId, fieldName = 'icon', width = 396, labelWidth = 200) {
+ const iconCss = ' left center no-repeat; text-indent: 20px';
+
+ const iconTypes = Ext.create('Ext.data.Store', {
+ fields: ['text', 'value'],
+ data: [
+ { "text": t('color_icons'), "value": 'color' },
+ { "text": t('white_icons'), "value": 'white' },
+ { "text": t('twemoji') + ' (1/3)', "value": 'twemoji-1' },
+ { "text": t('twemoji') + ' (2/3)', "value": 'twemoji-2' },
+ { "text": t('twemoji') + ' (3/3)', "value": 'twemoji-3' },
+ { "text": t('twemoji_variants') + ' (1/3)', "value": 'twemoji_variants-1' },
+ { "text": t('twemoji_variants') + ' (2/3)', "value": 'twemoji_variants-2' },
+ { "text": t('twemoji_variants') + ' (3/3)', "value": 'twemoji_variants-3' },
+ ]
+ });
+
+ const iconTypeBox = Ext.create('Ext.form.ComboBox', {
+ store: iconTypes,
+ width: 180,
+ displayField: 'text',
+ valueField: 'value',
+ emptyText: t('type'),
+ listeners: {
+ select: function (classId, elem) {
+ iconStore.proxy.extraParams = {
+ 'type' : elem.value,
+ classId: classId,
+ };
+ iconStore.load();
+ }.bind(this, classId)
+ }
+ });
+
+ const iconStore = new Ext.data.ArrayStore({
+ proxy: {
+ url: Routing.generate('pimcore_admin_dataobject_class_geticons'),
+ type: 'ajax',
+ reader: {
+ type: 'json'
+ },
+ extraParams: {
+ classId: classId,
+ type: ''
+ }
+ },
+ fields: ["text", "value"]
+ });
+
+ const iconField = new Ext.form.field.Text({
+ name: fieldName,
+ width: width,
+ renderer: Ext.util.Format.htmlEncode,
+ value: value,
+ listeners: {
+ "afterrender": function (el) {
+ el.inputEl.applyStyles("background:url(" + el.getValue() + ")" + iconCss);
+ }.bind(this)
+ }
+ });
+
+ return Ext.create('Ext.form.FieldContainer', {
+ layout: 'vbox',
+ items: [
+ {
+ xtype: "fieldcontainer",
+ layout: "hbox",
+ fieldLabel: t("icon"),
+ labelWidth: labelWidth,
+ items: [
+ iconField
+ ]
+ },
+ {
+ xtype: "fieldcontainer",
+ layout: "hbox",
+ fieldLabel: t("icon_tools"),
+ labelWidth: labelWidth,
+ items: [
+ iconTypeBox,
+ {
+ xtype: "combobox",
+ store: iconStore,
+ width: 75,
+ valueField: 'value',
+ displayField: 'text',
+ emptyText: t('select_type_first'),
+ listeners: {
+ select: function (iconField, iconCss, ele, rec, idx) {
+ const newValue = rec.data.value;
+ iconField.setValue(newValue);
+ iconField.inputEl.applyStyles("background:url(" + newValue + ")" + iconCss);
+ return newValue;
+ }.bind(this, iconField, iconCss)
+ }
+ },
+ {
+ iconCls: "pimcore_icon_refresh",
+ xtype: "button",
+ tooltip: t("refresh"),
+ handler: function (iconField, iconCss) {
+ iconField.inputEl.applyStyles("background:url(" + iconField.getValue() + ")" + iconCss);
+ }.bind(this, iconField, iconCss)
+ },
+ {
+ xtype: "button",
+ iconCls: "pimcore_icon_icons",
+ text: t('icon_library'),
+ handler: function () {
+ pimcore.globalmanager.get("layout_toolbar").showIconLibrary();
+ }
+ }
+ ]
+ }
+ ]
+ });
+ }
+};
+
+
+
diff --git a/public/js/pimcore/object/classes/class.js b/public/js/pimcore/object/classes/class.js
index eddda19605..1c58b807ba 100644
--- a/public/js/pimcore/object/classes/class.js
+++ b/public/js/pimcore/object/classes/class.js
@@ -22,7 +22,6 @@ pimcore.object.classes.klass = Class.create({
context: "class",
uploadRoute: 'pimcore_admin_dataobject_class_importclass',
exportRoute: 'pimcore_admin_dataobject_class_exportclass',
- iconCss: ' left center no-repeat; text-indent: 20px',
initialize: function (data, parentPanel, reopen, editorPrefix) {
this.parentPanel = parentPanel;
this.data = data;
@@ -701,64 +700,6 @@ pimcore.object.classes.klass = Class.create({
return "Pimcore\\Model\\DataObject\\" + ucfirst(name);
};
- const iconTypes = Ext.create('Ext.data.Store', {
- fields: ['text', 'value'],
- data: [
- { "text": t('color_icons'), "value": 'color' },
- { "text": t('white_icons'), "value": 'white' },
- { "text": t('twemoji') + ' (1/3)', "value": 'twemoji-1' },
- { "text": t('twemoji') + ' (2/3)', "value": 'twemoji-2' },
- { "text": t('twemoji') + ' (3/3)', "value": 'twemoji-3' },
- { "text": t('twemoji_variants') + ' (1/3)', "value": 'twemoji_variants-1' },
- { "text": t('twemoji_variants') + ' (2/3)', "value": 'twemoji_variants-2' },
- { "text": t('twemoji_variants') + ' (3/3)', "value": 'twemoji_variants-3' },
- ]
- });
-
- const iconTypeBox = Ext.create('Ext.form.ComboBox', {
- store: iconTypes,
- width: 180,
- displayField: 'text',
- valueField: 'value',
- emptyText: t('type'),
- listeners: {
- select: function (elem) {
- iconStore.proxy.extraParams = {
- 'type' : elem.value,
- classId: this.getId(),
- };
- iconStore.load();
- }.bind(this)
- }
- });
-
- const iconStore = new Ext.data.ArrayStore({
- proxy: {
- url: Routing.generate('pimcore_admin_dataobject_class_geticons'),
- type: 'ajax',
- reader: {
- type: 'json'
- },
- extraParams: {
- classId: this.getId()
- }
- },
- fields: ["text", "value"]
- });
-
- var iconField = new Ext.form.field.Text({
- id: "iconfield-" + this.getId(),
- name: "icon",
- width: 396,
- renderer: Ext.util.Format.htmlEncode,
- value: this.data.icon,
- listeners: {
- "afterrender": function (el) {
- el.inputEl.applyStyles("background:url(" + el.getValue() + ")" + this.iconCss);
- }.bind(this)
- }
- });
-
this.compositeIndexTypeStore = new Ext.data.ArrayStore({
data: [['query'], ['localized_query'],['store'], ['localized_store']],
fields: ['value']
@@ -895,61 +836,7 @@ pimcore.object.classes.klass = Class.create({
renderer: Ext.util.Format.htmlEncode,
value: this.data.previewGeneratorReference
},
- {
- xtype: "fieldcontainer",
- layout: "hbox",
- fieldLabel: t("icon"),
- defaults: {
- labelWidth: 200
- },
- items: [
- iconField
- ]
- },
- {
- xtype: "fieldcontainer",
- layout: "hbox",
- fieldLabel: t("icon_tools"),
- defaults: {
- labelWidth: 200
- },
- items: [
- iconTypeBox,
- {
- xtype: "combobox",
- store: iconStore,
- width: 75,
- valueField: 'value',
- displayField: 'text',
- emptyText: t('select_type_first'),
- listeners: {
- select: function (ele, rec, idx) {
- const icon = Ext.getCmp("iconfield-" + this.getId());
- const newValue = rec.data.value;
- icon.setValue(newValue);
- icon.inputEl.applyStyles("background:url(" + newValue + ")" + this.iconCss);
- return newValue;
- }.bind(this)
- }
- },
- {
- iconCls: "pimcore_icon_refresh",
- xtype: "button",
- tooltip: t("refresh"),
- handler: function(iconField) {
- iconField.inputEl.applyStyles("background:url(" + iconField.getValue() + ")" + this.iconCss);
- }.bind(this, iconField)
- },
- {
- xtype: "button",
- iconCls: "pimcore_icon_icons",
- text: t('icon_library'),
- handler: function () {
- pimcore.globalmanager.get("layout_toolbar").showIconLibrary();
- }
- }
- ]
- },
+ pimcore.iconlibrary.createIconSelectionWidget(this.data.icon, this.getId()),
{
xtype: "textfield",
fieldLabel: t("group"),
diff --git a/src/Controller/Admin/DataObject/ClassController.php b/src/Controller/Admin/DataObject/ClassController.php
index 7c07eccae9..4b6b2b7d31 100644
--- a/src/Controller/Admin/DataObject/ClassController.php
+++ b/src/Controller/Admin/DataObject/ClassController.php
@@ -1809,28 +1809,35 @@ public function getSelectOptionsUsagesAction(Request $request): Response
*/
public function getIconsAction(Request $request, EventDispatcherInterface $eventDispatcher): Response
{
- $classId = $request->get('classId');
- $type = $request->get('type');
-
- if (!$type) {
- return $this->adminJson([]);
- }
+ $classId = $request->query->get('classId');
+ $type = $request->query->has('type') ? $request->query->getString('type') : null;
$iconDir = PIMCORE_WEB_ROOT . '/bundles/pimcoreadmin/img';
- $icons = match($type) {
- 'color' => rscandir($iconDir . '/flat-color-icons/'),
- 'white' => rscandir($iconDir . '/flat-white-icons/'),
- 'twemoji-1', 'twemoji-2', 'twemoji-3',
- 'twemoji_variants-1', 'twemoji_variants-2', 'twemoji_variants-3'
- => rscandir($iconDir . '/twemoji/'),
- default => []
- };
+ if ($type === '') {
+ return $this->adminJson([]);
+ } elseif ($type === null) {
+ $classIcons = rscandir($iconDir . '/object-icons/');
+ $colorIcons = rscandir($iconDir . '/flat-color-icons/');
+ $twemoji = rscandir($iconDir . '/twemoji/');
+
+ $icons = array_merge($classIcons, $colorIcons, $twemoji);
+ } else {
+ $icons = match($type) {
+ 'color' => rscandir($iconDir . '/flat-color-icons/'),
+ 'white' => rscandir($iconDir . '/flat-white-icons/'),
+ 'twemoji-1', 'twemoji-2', 'twemoji-3',
+ 'twemoji_variants-1', 'twemoji_variants-2', 'twemoji_variants-3'
+ => rscandir($iconDir . '/twemoji/'),
+ default => [],
+ };
+ }
$style = '';
if ($type === 'white') {
$style = 'background-color:#000';
}
+
foreach ($icons as &$icon) {
$icon = str_replace(PIMCORE_WEB_ROOT, '', $icon);
}
@@ -1845,7 +1852,7 @@ public function getIconsAction(Request $request, EventDispatcherInterface $event
$startIndex = 0;
$result = [];
- if (str_starts_with($type, 'twemoji')) {
+ if ($type !== null && str_starts_with($type, 'twemoji')) {
foreach ($icons as $index => $twemojiIcon) {
$iconBase = basename($twemojiIcon);
diff --git a/src/Controller/Admin/MiscController.php b/src/Controller/Admin/MiscController.php
index 01a832ed1f..3f4762cf5b 100644
--- a/src/Controller/Admin/MiscController.php
+++ b/src/Controller/Admin/MiscController.php
@@ -326,6 +326,10 @@ public function iconListAction(Request $request, ?Profiler $profiler): Response
$iconsCss = file_get_contents($publicDir . '/css/icons.css');
+ if ($type === null) {
+ return $this->render('@PimcoreAdmin/admin/misc/icon_library_reload.html.twig');
+ }
+
return $this->render('@PimcoreAdmin/admin/misc/icon_list.html.twig', [
'icons' => $icons,
'iconsCss' => $iconsCss,
diff --git a/templates/admin/misc/icon_library_reload.html.twig b/templates/admin/misc/icon_library_reload.html.twig
new file mode 100644
index 0000000000..5cb14dfdd1
--- /dev/null
+++ b/templates/admin/misc/icon_library_reload.html.twig
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
\ No newline at end of file