Skip to content

Commit

Permalink
PSDP-244 UX/UI improvements (#356)
Browse files Browse the repository at this point in the history 
* light theme preparations

* some optimizations:
- move the tabbar initialize logic to pimcore.helpers for removing code duplication
- remove isNewHeadbarLayoutEnabled property to rely on global setting new_admin_style
- move checkIfNewHeadbarLayoutIsEnabled to pimcore.helpers

* optimizations for asset/folder.js

* Replace user profile avatar image with purple background

* Minor code quality improvements

* Remove unused translation

---------

Co-authored-by: Bernhard Rusch <bernhard.rusch@pimcore.com>
Co-authored-by: Divesh Pahuja <divesh.pahuja@pimcore.com>
  • Loading branch information
@vin0401 @brusch @dvesh3
3 people authored Nov 21, 2023
1 parent bc5649f commit 686e913
Show file tree
Hide file tree
Showing 24 changed files with 1,158 additions and 289 deletions.
13 changes: 12 additions & 1 deletion public/css/icons.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1095,6 +1095,10 @@
background: url(/bundles/pimcoreadmin/img/flat-color-icons/more.svg) center center no-repeat !important;
}

.pimcore_icon_more_white {
background: url(/bundles/pimcoreadmin/img/flat-white-icons/more.svg) center center no-repeat !important;
}

.pimcore_icon_export{
background: url(/bundles/pimcoreadmin/img/flat-color-icons/external.svg) center center no-repeat !important;
}
Expand Down Expand Up @@ -1312,7 +1316,6 @@
background: url(/bundles/pimcoreadmin/img/flat-color-icons/more.svg) center center no-repeat !important;
}


.pimcore_icon_gender {
background: url(/bundles/pimcoreadmin/img/flat-color-icons/manager.svg) center center no-repeat !important;
}
Expand Down Expand Up @@ -1780,6 +1783,14 @@
background: url(/bundles/pimcoreadmin/img/material-icons/outline-style-24px.svg) center center no-repeat;
}

.pimcore_material_icon_logout {
background: url(/bundles/pimcoreadmin/img/material-icons/outline-logout-24px.svg) center center no-repeat;
}

.pimcore_icon_share {
background: url(/bundles/pimcoreadmin/img/flat-white-icons/share.svg) center center no-repeat;
}

.pimcore_icon_profile {
background: url(/bundles/pimcoreadmin/img/flat-white-icons/profile.svg) center center no-repeat;
}
Binary file modified public/img/avatar.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
8 changes: 8 additions & 0 deletions public/img/flat-white-icons/profile.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion public/js/pimcore/asset/archive.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -90,4 +90,4 @@ pimcore.asset.archive = Class.create(pimcore.asset.asset, {
this.tabbar = pimcore.helpers.getTabBar({items: items});
return this.tabbar;
}
});
});
150 changes: 112 additions & 38 deletions public/js/pimcore/asset/asset.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -66,25 +66,63 @@ pimcore.asset.asset = Class.create(pimcore.element.abstract, {
},

addTab: function () {

var tabTitle = this.data.filename;

if (this.id == 1) {
tabTitle = "home";
}

this.tabPanel = Ext.getCmp("pimcore_panel_tabs");
var tabId = "asset_" + this.id;

this.tab = new Ext.Panel({
id: tabId,
title: htmlspecialchars(tabTitle),
closable:true,
layout: "border",
items: [this.getLayoutToolbar(),this.getTabPanel()],
asset: this,
iconCls: this.getIconClass()
const tabbarContainer = new Ext.Container({
flex: 2
});

const tabPanel = this.getTabPanel();
const toolbar = this.getLayoutToolbar();

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.tab = new Ext.Panel({
id: tabId,
cls: "pimcore_panel_toolbar_horizontal_border_layout",
title: htmlspecialchars(tabTitle),
closable:true,
hideMode: "offsets",
layout: "border",
items: [
{
xtype: 'panel',
width: "100%",
region: 'north',
layout: 'hbox',
items: [
toolbar,
tabbarContainer,
]
},

tabPanel
],
iconCls: this.getIconClass(),
asset: this,
});

this.toolbarSubmenu.menu.addCls('pimcore_headbar_submenu_menu');

pimcore.helpers.headbar.prepareTabPanel(tabPanel, tabbarContainer, this.tab);
} else {
this.tab = new Ext.Panel({
id: tabId,
title: htmlspecialchars(tabTitle),
closable:true,
layout: "border",
items: [toolbar, tabPanel],
asset: this,
iconCls: this.getIconClass()
});
}

this.tab.on("activate", function () {
this.tab.updateLayout();
pimcore.layout.refresh();
Expand Down Expand Up @@ -174,49 +212,80 @@ pimcore.asset.asset = Class.create(pimcore.element.abstract, {

buttons.push("-");

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu = new Ext.Button({
...pimcore.helpers.headbar.getSubmenuConfig()
});

buttons.push(this.toolbarSubmenu);
}

if (this.isAllowed("delete") && !this.data.locked) {
this.toolbarButtons.remove = new Ext.Button({
tooltip: t('delete'),
const deleteConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('delete') } : { tooltip: t('delete') })(),
iconCls: "pimcore_material_icon_delete pimcore_material_icon",
scale: "medium",
handler: this.remove.bind(this)
});
buttons.push(this.toolbarButtons.remove);
};

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(deleteConfig);
} else {
this.toolbarButtons.remove = new Ext.Button(deleteConfig);
buttons.push(this.toolbarButtons.remove);
}
}

if (this.isAllowed("rename") && !this.data.locked) {
this.toolbarButtons.rename = new Ext.Button({
tooltip: t('rename'),
const renameConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('rename') } : { tooltip: t('rename') })(),
iconCls: "pimcore_material_icon_rename pimcore_material_icon",
scale: "medium",
handler: this.rename.bind(this)
});
buttons.push(this.toolbarButtons.rename);
};

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(renameConfig);
} else {
this.toolbarButtons.rename = new Ext.Button(renameConfig);
buttons.push(this.toolbarButtons.rename);
}
}

if (this.isAllowed("publish")) {
this.toolbarButtons.upload = new Ext.Button({
tooltip: t("upload_new_version"),
const uploadConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('upload_new_version') } : { tooltip: t('upload_new_version') })(),
iconCls: "pimcore_material_icon_upload pimcore_material_icon",
scale: "medium",
handler: function () {
pimcore.elementservice.replaceAsset(this.data.id, function () {
this.reload();
}.bind(this));
}.bind(this)
});
buttons.push(this.toolbarButtons.upload);
};

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(uploadConfig);
} else {
this.toolbarButtons.upload = new Ext.Button(uploadConfig);
buttons.push(this.toolbarButtons.upload);
}
}

buttons.push({
tooltip: t("download"),
const downloadConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('download') } : { tooltip: t('download') })(),
iconCls: "pimcore_material_icon_download pimcore_material_icon",
scale: "medium",
handler: function () {
pimcore.helpers.download(Routing.generate('pimcore_admin_asset_download', {id: this.data.id}));
}.bind(this)
});
};

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(downloadConfig);
} else {
buttons.push(downloadConfig);
}

buttons.push({
tooltip: t('reload'),
Expand Down Expand Up @@ -245,8 +314,8 @@ pimcore.asset.asset = Class.create(pimcore.element.abstract, {

// only for videos and images
if (this.isAllowed("publish") && in_array(this.data.type,["image","video"]) || this.data.mimetype == "application/pdf") {
buttons.push({
tooltip: t("clear_thumbnails"),
const clearThumbnailsConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('clear_thumbnails') } : { tooltip: t('clear_thumbnails') })(),
iconCls: "pimcore_material_icon_clear_thumbnails pimcore_material_icon",
scale: "medium",
handler: function () {
Expand All @@ -258,24 +327,29 @@ pimcore.asset.asset = Class.create(pimcore.element.abstract, {
}
});
}.bind(this)
});
};

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(clearThumbnailsConfig);
} else {
buttons.push(clearThumbnailsConfig);
}
}

if (pimcore.globalmanager.get("user").isAllowed('notifications_send')) {
buttons.push({
tooltip: t('share_via_notifications'),
const notificationConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('share_via_notifications') } : { tooltip: t('share_via_notifications') })(),
iconCls: "pimcore_icon_share",
scale: "medium",
handler: this.shareViaNotifications.bind(this)
});
}
};

buttons.push("-");
buttons.push({
xtype: 'tbtext',
text: t("id") + " " + this.data.id,
scale: "medium"
});
if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(notificationConfig);
} else {
buttons.push(notificationConfig);
}
}

//workflow management
pimcore.elementservice.integrateWorkflowManagement('asset', this.data.id, this, buttons);
Expand All @@ -284,6 +358,7 @@ pimcore.asset.asset = Class.create(pimcore.element.abstract, {
id: "asset_toolbar_" + this.id,
region: "north",
border: false,
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { flex: 3 } : { })(),
cls: "pimcore_main_toolbar",
items: buttons,
overflowHandler: 'scroller'
Expand All @@ -309,7 +384,6 @@ pimcore.asset.asset = Class.create(pimcore.element.abstract, {
this.save(false, onCompleteCallback, "session")
},


getSaveData : function (only) {
var parameters = {};

Expand Down
53 changes: 39 additions & 14 deletions public/js/pimcore/asset/folder.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -162,7 +162,6 @@ pimcore.asset.folder = Class.create(pimcore.asset.asset, {
items.push(this.workflows.getLayout());
}


this.tabbar = pimcore.helpers.getTabBar({items: items});
return this.tabbar;
},
Expand Down Expand Up @@ -258,21 +257,53 @@ pimcore.asset.folder = Class.create(pimcore.asset.asset, {

buttons.push("-");

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu = new Ext.Button({
...pimcore.helpers.headbar.getSubmenuConfig()
});

buttons.push(this.toolbarSubmenu);
}

if (this.isAllowed("delete") && !this.data.locked && this.data.id != 1) {
buttons.push(this.toolbarButtons.remove);
if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add({
text: t('delete'),
iconCls: "pimcore_material_icon_delete pimcore_material_icon",
scale: "medium",
handler: this.remove.bind(this)
});
} else {
buttons.push(this.toolbarButtons.remove);
}
}
if (this.isAllowed("rename") && !this.data.locked && this.data.id != 1) {
buttons.push(this.toolbarButtons.rename);
if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add({
text: t('rename'),
iconCls: "pimcore_material_icon_rename pimcore_material_icon",
scale: "medium",
handler: this.rename.bind(this)
});
} else {
buttons.push(this.toolbarButtons.rename);
}
}

buttons.push({
tooltip: t("download_as_zip"),
const downloadAsZipConfig = {
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { text: t('download_as_zip') } : { tooltip: t('download_as_zip') })(),
iconCls: "pimcore_material_icon_download_zip pimcore_material_icon",
scale: "medium",
handler: function () {
pimcore.elementservice.downloadAssetFolderAsZip(this.id)
}.bind(this)
});
}

if (pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled()) {
this.toolbarSubmenu.menu.add(downloadAsZipConfig);
} else {
buttons.push(downloadAsZipConfig);
}

buttons.push({
tooltip: t('reload'),
Expand All @@ -298,18 +329,12 @@ pimcore.asset.folder = Class.create(pimcore.asset.asset, {
handler: this.showMetaInfo.bind(this),
menu: this.getMetaInfoMenuItems()
});

buttons.push("-");
buttons.push({
xtype: 'tbtext',
text: t("id") + " " + this.data.id,
scale: "medium"
});


this.toolbar = new Ext.Toolbar({
id: "asset_toolbar_" + this.id,
region: "north",
border: false,
...(() => pimcore.helpers.checkIfNewHeadbarLayoutIsEnabled() ? { flex: 3 } : { })(),
cls: "pimcore_main_toolbar",
items: buttons,
overflowHandler: 'scroller'
Expand Down
2 changes: 1 addition & 1 deletion public/js/pimcore/asset/unknown.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,4 +91,4 @@ pimcore.asset.unknown = Class.create(pimcore.asset.asset, {
this.tabbar = pimcore.helpers.getTabBar({items: items});
return this.tabbar;
}
});
});
Loading

0 comments on commit 686e913

Please sign in to comment.