vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Refactored PanelMenu

pull/5677/head
Cagatay Civici 2024-04-09 17:27:13 +03:00
parent 6b605f6b57
commit 9c5251a2a1
2 changed files with 34 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
components/lib/panelmenu/style/PanelMenuStyle.js
View File

@ -6,30 +6,30 @@ const classes = {
header: ({ instance, item }) => [ header: ({ instance, item }) => [
'p-panelmenu-header', 'p-panelmenu-header',
{ {
'p-highlight': instance.isItemActive(item) && !!item.items, 'p-panelmenu-header-active': instance.isItemActive(item) && !!item.items,
'p-disabled': instance.isItemDisabled(item) 'p-disabled': instance.isItemDisabled(item)
} }
], ],
headerContent: 'p-panelmenu-header-content', headerContent: 'p-panelmenu-header-content',
headerAction: 'p-panelmenu-header-action', headerAction: 'p-panelmenu-header-link',
headerIcon: 'p-menuitem-icon', headerIcon: 'p-panelmenu-header-icon',
headerLabel: 'p-menuitem-text', headerLabel: 'p-panelmenu-header-label',
toggleableContent: 'p-toggleable-content', toggleableContent: 'p-panelmenu-content-container',
menuContent: 'p-panelmenu-content', menuContent: 'p-panelmenu-content',
menu: 'p-panelmenu-root-list', menu: 'p-panelmenu-root-list',
menuitem: ({ instance, processedItem }) => [ menuitem: ({ instance, processedItem }) => [
'p-menuitem', 'p-panelmenu-item',
{ {
'p-focus': instance.isItemFocused(processedItem), 'p-focus': instance.isItemFocused(processedItem),
'p-disabled': instance.isItemDisabled(processedItem) 'p-disabled': instance.isItemDisabled(processedItem)
} }
], ],
content: 'p-menuitem-content', content: 'p-panelmenu-item-content',
action: 'p-menuitem-link', action: 'p-panelmenu-item-link',
icon: 'p-menuitem-icon', icon: 'p-panelmenu-item-icon',
label: 'p-menuitem-text', label: 'p-panelmenu-item-label',
submenuIcon: 'p-submenu-icon', submenuIcon: 'p-panelmenu-submenu-icon',
submenu: 'p-submenu-list', submenu: 'p-panelmenu-submenu',
separator: 'p-menuitem-separator' separator: 'p-menuitem-separator'
}; };

43
components/lib/themes/primeone/base/panelmenu/index.js
View File

@ -27,7 +27,7 @@ export default {
outline-color: transparent; outline-color: transparent;
} }
.p-panelmenu-header-action { .p-panelmenu-header-link {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
@ -40,9 +40,10 @@ export default {
font-weight: 600; font-weight: 600;
} }
.p-panelmenu .p-submenu-icon, .p-panelmenu-header-icon,
.p-panelmenu .p-menuitem-icon { .p-panelmenu-item-icon,
color: ${dt('panelmenu.item.icon.icolor')}; .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.item.icon.color')};
} }
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content { .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content {
@ -50,8 +51,8 @@ export default {
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.focus.color')};
} }
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-submenu-icon, .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-submenu-icon,
.p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-menuitem-icon { .p-panelmenu-header:not(.p-disabled):focus-visible .p-panelmenu-header-content .p-panelmenu-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')}; color: ${dt('panelmenu.item.icon.focus.color')};
} }
@ -60,30 +61,30 @@ export default {
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.focus.color')};
} }
.p-panelmenu-header:not(.p-disabled).p-panelmenu-header-content:hover .p-submenu-icon, .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-submenu-icon,
.p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-menuitem-icon { .p-panelmenu-header:not(.p-disabled) .p-panelmenu-header-content:hover .p-panelmenu-header-icon {
color: ${dt('panelmenu.item.icon.focus.color')}; color: ${dt('panelmenu.item.icon.focus.color')};
} }
.p-panelmenu .p-menuitem { .p-panelmenu .p-panelmenu-item {
margin: 2px 0; margin: 2px 0;
} }
.p-panelmenu .p-menuitem:first-child { .p-panelmenu .p-panelmenu-item:first-child {
margin-top: 0; margin-top: 0;
} }
.p-panelmenu .p-menuitem:last-child { .p-panelmenu .p-panelmenu-item:last-child {
margin-bottom: 0; margin-bottom: 0;
} }
.p-panelmenu .p-submenu-list { .p-panelmenu-submenu {
margin: 4px 0 0 0; margin: 4px 0 0 0;
padding: 0 0 0 1rem; padding: 0 0 0 1rem;
list-style: none; list-style: none;
} }
.p-panelmenu .p-menuitem-link { .p-panelmenu-item-link {
display: flex; display: flex;
gap: 0.5rem; gap: 0.5rem;
align-items: center; align-items: center;
@ -96,33 +97,33 @@ export default {
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
} }
.p-panelmenu .p-menuitem-text { .p-panelmenu-item-label {
line-height: 1; line-height: 1;
} }
.p-panelmenu .p-menuitem-content { .p-panelmenu-item-content {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')};
border-radius: ${dt('rounded.sm')}; border-radius: ${dt('rounded.sm')};
color: ${dt('panelmenu.item.color')}; color: ${dt('panelmenu.item.color')};
} }
.p-panelmenu .p-menuitem.p-focus > .p-menuitem-content { .p-menupanelmenu-item.p-focus > .p-panelmenu-item-content {
background: ${dt('panelmenu.item.focus.background')}; background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.focus.color')};
} }
.p-panelmenu .p-menuitem.p-focus > .p-menuitem-icon { .p-panelmenu-item.p-focus > .p-panelmenu-item-icon {
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.focus.color')};
} }
.p-panelmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover { .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover {
background: ${dt('panelmenu.item.focus.background')}; background: ${dt('panelmenu.item.focus.background')};
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.focus.color')};
} }
.p-panelmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-menuitem-icon, .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-item-icon,
.p-panelmenu .p-menuitem:not(.p-disabled) > .p-menuitem-content:hover .p-submenu-icon { .p-panelmenu-item:not(.p-disabled) > .p-panelmenu-item-content:hover .p-panelmenu-submenu-icon {
color: ${dt('panelmenu.item.focus.color')}; color: ${dt('panelmenu.item.icon.focus.color')};
} }
` `
}; };