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

Refactored Galleria

pull/5677/head
Cagatay Civici 2024-04-10 15:05:27 +03:00
parent 475d4da54a
commit b828f34a86
4 changed files with 98 additions and 73 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
components/lib/galleria/style/GalleriaStyle.js
View File

@ -15,54 +15,54 @@ const classes = {
'p-galleria p-component', 'p-galleria p-component',
{ {
'p-galleria-fullscreen': instance.$attrs.fullScreen, 'p-galleria-fullscreen': instance.$attrs.fullScreen,
'p-galleria-indicator-onitem': instance.$attrs.showIndicatorsOnItem, 'p-galleria-inset-indicators': instance.$attrs.showIndicatorsOnItem,
'p-galleria-item-nav-onhover': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen 'p-galleria-hover-navigators': instance.$attrs.showItemNavigatorsOnHover && !instance.$attrs.fullScreen
}, },
thumbnailsPosClass, thumbnailsPosClass,
indicatorPosClass indicatorPosClass
]; ];
}, },
closeButton: 'p-galleria-close p-link', closeButton: 'p-galleria-close-button',
closeIcon: 'p-galleria-close-icon', closeIcon: 'p-galleria-close-icon',
header: 'p-galleria-header', header: 'p-galleria-header',
content: 'p-galleria-content', content: 'p-galleria-content',
footer: 'p-galleria-footer', footer: 'p-galleria-footer',
itemWrapper: 'p-galleria-item-wrapper', itemWrapper: 'p-galleria-items-container',
itemContainer: 'p-galleria-item-container', itemContainer: 'p-galleria-items',
previousItemButton: ({ instance }) => [ previousItemButton: ({ instance }) => [
'p-galleria-item-prev p-galleria-item-nav p-link', 'p-galleria-prev-button p-galleria-navigate-button',
{ {
'p-disabled': instance.isNavBackwardDisabled() 'p-disabled': instance.isNavBackwardDisabled()
} }
], ],
previousItemIcon: 'p-galleria-item-prev-icon', previousItemIcon: 'p-galleria-prev-icon',
item: 'p-galleria-item', item: 'p-galleria-item',
nextItemButton: ({ instance }) => [ nextItemButton: ({ instance }) => [
'p-galleria-item-next p-galleria-item-nav p-link', 'p-galleria-next-button p-galleria-navigate-button',
{ {
'p-disabled': instance.isNavForwardDisabled() 'p-disabled': instance.isNavForwardDisabled()
} }
], ],
nextItemIcon: 'p-galleria-item-next-icon', nextItemIcon: 'p-galleria-next-icon',
caption: 'p-galleria-caption', caption: 'p-galleria-caption',
indicators: 'p-galleria-indicators p-reset', indicators: 'p-galleria-indicators',
indicator: ({ instance, index }) => [ indicator: ({ instance, index }) => [
'p-galleria-indicator', 'p-galleria-indicator',
{ {
'p-highlight': instance.isIndicatorItemActive(index) 'p-galleria-indicator-active': instance.isIndicatorItemActive(index)
} }
], ],
indicatorButton: 'p-link', indicatorButton: 'p-galleria-indicator-button',
thumbnailWrapper: 'p-galleria-thumbnail-wrapper', thumbnailWrapper: 'p-galleria-thumbnails',
thumbnailContainer: 'p-galleria-thumbnail-container', thumbnailContainer: 'p-galleria-thumbnails-content',
previousThumbnailButton: ({ instance }) => [ previousThumbnailButton: ({ instance }) => [
'p-galleria-thumbnail-prev p-link', 'p-galleria-thumbnail-prev-button',
{ {
'p-disabled': instance.isNavBackwardDisabled() 'p-disabled': instance.isNavBackwardDisabled()
} }
], ],
previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon', previousThumbnailIcon: 'p-galleria-thumbnail-prev-icon',
thumbnailItemsContainer: 'p-galleria-thumbnail-items-container', thumbnailItemsContainer: 'p-galleria-thumbnails-viewport',
thumbnailItems: 'p-galleria-thumbnail-items', thumbnailItems: 'p-galleria-thumbnail-items',
thumbnailItem: ({ instance, index, activeIndex }) => [ thumbnailItem: ({ instance, index, activeIndex }) => [
'p-galleria-thumbnail-item', 'p-galleria-thumbnail-item',
@ -73,9 +73,9 @@ const classes = {
'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index 'p-galleria-thumbnail-item-end': instance.lastItemActiveIndex() === index
} }
], ],
thumbnailItemContent: 'p-galleria-thumbnail-item-content', thumbnailItemContent: 'p-galleria-thumbnail',
nextThumbnailButton: ({ instance }) => [ nextThumbnailButton: ({ instance }) => [
'p-galleria-thumbnail-next p-link', 'p-galleria-thumbnail-next-button',
{ {
'p-disabled': instance.isNavForwardDisabled() 'p-disabled': instance.isNavForwardDisabled()
} }

127
components/lib/themes/primeone/base/galleria/index.js
View File

@ -5,19 +5,19 @@ export default {
flex-direction: column; flex-direction: column;
} }
.p-galleria-item-wrapper { .p-galleria-items-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
position: relative; position: relative;
} }
.p-galleria-item-container { .p-galleria-items {
position: relative; position: relative;
display: flex; display: flex;
height: 100%; height: 100%;
} }
.p-galleria-item-nav { .p-galleria-navigate-button {
position: absolute; position: absolute;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: -0.5rem;
@ -32,24 +32,28 @@ export default {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
border-radius: 50%; border-radius: 50%;
margin: 0 0.5rem; margin: 0 0.5rem;
padding: 0;
user-select: none;
border: none;
cursor: pointer;
} }
.p-galleria-item-nav:not(.p-disabled):hover { .p-galleria-navigate-button:not(.p-disabled):hover {
background: ${dt('galleria.navigator.hover.background')}; background: ${dt('galleria.navigator.hover.background')};
} }
.p-galleria-item-prev-icon, .p-galleria-next-icon,
.p-galleria-item-next-icon { .p-galleria-prev-icon {
font-size: 1.5rem; font-size: 1.5rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
} }
.p-galleria-item-prev { .p-galleria-prev-button {
left: 0; left: 0;
} }
.p-galleria-item-next { .p-galleria-next-button {
right: 0; right: 0;
} }
@ -61,18 +65,18 @@ export default {
width: 100%; width: 100%;
} }
.p-galleria-item-nav-onhover .p-galleria-item-nav { .p-galleria-hover-navigators .p-galleria-navigate-button {
pointer-events: none; pointer-events: none;
opacity: 0; opacity: 0;
transition: opacity ${dt('transition.duration')} ease-in-out; transition: opacity ${dt('transition.duration')} ease-in-out;
} }
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav { .p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button {
pointer-events: all; pointer-events: all;
opacity: 1; opacity: 1;
} }
.p-galleria-item-nav-onhover .p-galleria-item-wrapper:hover .p-galleria-item-nav.p-disabled { .p-galleria-hover-navigators .p-galleria-items-container:hover .p-galleria-navigate-button.p-disabled {
pointer-events: none; pointer-events: none;
} }
@ -86,15 +90,15 @@ export default {
padding: 1rem; padding: 1rem;
} }
.p-galleria-thumbnail-wrapper { .p-galleria-thumbnails {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: auto; overflow: auto;
flex-shrink: 0; flex-shrink: 0;
} }
.p-galleria-thumbnail-prev, .p-galleria-thumbnail-prev-button,
.p-galleria-thumbnail-next { .p-galleria-thumbnail-next-button {
align-self: center; align-self: center;
flex: 0 0 auto; flex: 0 0 auto;
display: flex; display: flex;
@ -103,6 +107,10 @@ export default {
overflow: hidden; overflow: hidden;
position: relative; position: relative;
margin: 0.5rem; margin: 0.5rem;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
background: transparent; background: transparent;
color: ${dt('galleria.thumbnail.navigator.color')}; color: ${dt('galleria.thumbnail.navigator.color')};
width: 2rem; width: 2rem;
@ -112,33 +120,33 @@ export default {
border-radius: 50%; border-radius: 50%;
} }
.p-galleria-thumbnail-prev:hover, .p-galleria-thumbnail-prev-button:hover,
.p-galleria-thumbnail-next:hover { .p-galleria-thumbnail-next-button:hover {
background: ${dt('galleria.thumbnail.navigator.hover.background')}; background: ${dt('galleria.thumbnail.navigator.hover.background')};
color: ${dt('galleria.thumbnail.navigator.hover.color')}; color: ${dt('galleria.thumbnail.navigator.hover.color')};
} }
.p-galleria-thumbnail-prev:focus-visible, .p-galleria-thumbnail-prev-button:focus-visible,
.p-galleria-thumbnail-next:focus-visible { .p-galleria-thumbnail-next-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-galleria-thumbnail-prev span, .p-galleria-thumbnail-prev-button span,
.p-galleria-thumbnail-next span { .p-galleria-thumbnail-next-button span {
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
} }
.p-galleria-thumbnail-container { .p-galleria-thumbnails-content {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
background: ${dt('galleria.thumbnail.container.background')}; background: ${dt('galleria.thumbnail.container.background')};
padding: 1rem 0.25rem; padding: 1rem 0.25rem;
} }
.p-galleria-thumbnail-items-container { .p-galleria-thumbnails-viewport {
overflow: hidden; overflow: hidden;
width: 100%; width: 100%;
} }
@ -156,11 +164,11 @@ export default {
opacity: 0.5; opacity: 0.5;
} }
.p-galleria-thumbnail-item-content { .p-galleria-thumbnail {
outline-color: transparent; outline-color: transparent;
} }
.p-galleria-thumbnail-item-content:focus-visible { .p-galleria-thumbnail:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
@ -179,23 +187,23 @@ export default {
flex-direction: row; flex-direction: row;
} }
.p-galleria-thumbnails-left .p-galleria-item-wrapper, .p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-right .p-galleria-item-wrapper { .p-galleria-thumbnails-right .p-galleria-items-container {
flex-direction: row; flex-direction: row;
} }
.p-galleria-thumbnails-left .p-galleria-item-wrapper, .p-galleria-thumbnails-left .p-galleria-items-container,
.p-galleria-thumbnails-top .p-galleria-item-wrapper { .p-galleria-thumbnails-top .p-galleria-items-container {
order: 2; order: 2;
} }
.p-galleria-thumbnails-left .p-galleria-thumbnail-wrapper, .p-galleria-thumbnails-left .p-galleria-thumbnails,
.p-galleria-thumbnails-top .p-galleria-thumbnail-wrapper { .p-galleria-thumbnails-top .p-galleria-thumbnails {
order: 1; order: 1;
} }
.p-galleria-thumbnails-left .p-galleria-thumbnail-container, .p-galleria-thumbnails-left .p-galleria-thumbnails-content,
.p-galleria-thumbnails-right .p-galleria-thumbnail-container { .p-galleria-thumbnails-right .p-galleria-thumbnails-content {
flex-direction: column; flex-direction: column;
flex-grow: 1; flex-grow: 1;
} }
@ -212,9 +220,11 @@ export default {
justify-content: center; justify-content: center;
padding: 1rem; padding: 1rem;
gap: 0.5rem; gap: 0.5rem;
margin: 0;
list-style: none;
} }
.p-galleria-indicator > button { .p-galleria-indicator-button {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
background: ${dt('galleria.indicator.background')}; background: ${dt('galleria.indicator.background')};
@ -223,29 +233,34 @@ export default {
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
outline-color: transparent; outline-color: transparent;
border-radius: 50%; border-radius: 50%;
margin: 0;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
} }
.p-galleria-indicator > button:hover { .p-galleria-indicator-button:hover {
background: ${dt('galleria.indicator.hover.background')}; background: ${dt('galleria.indicator.hover.background')};
} }
.p-galleria-indicator > button:focus-visible { .p-galleria-indicator-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-galleria-indicator.p-highlight > button { .p-galleria-indicator-active .p-galleria-indicator-button {
background-color: ${dt('galleria.indicator.active.background')}; background-color: ${dt('galleria.indicator.active.background')};
} }
.p-galleria-indicators-left .p-galleria-item-wrapper, .p-galleria-indicators-left .p-galleria-items-container,
.p-galleria-indicators-right .p-galleria-item-wrapper { .p-galleria-indicators-right .p-galleria-items-container {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.p-galleria-indicators-left .p-galleria-item-container, .p-galleria-indicators-left .p-galleria-items,
.p-galleria-indicators-top .p-galleria-item-container { .p-galleria-indicators-top .p-galleria-items {
order: 2; order: 2;
} }
@ -259,43 +274,47 @@ export default {
flex-direction: column; flex-direction: column;
} }
.p-galleria-indicator-onitem .p-galleria-indicators { .p-galleria-inset-indicators .p-galleria-indicators {
position: absolute; position: absolute;
display: flex; display: flex;
z-index: 1; z-index: 1;
background: ${dt('galleria.inset.indicators.background')}; background: ${dt('galleria.inset.indicators.background')};
} }
.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator > button { .p-galleria-inset-indicators .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.background')}; background: ${dt('galleria.inset.indicator.background')};
} }
.p-galleria-indicator-onitem .p-galleria-indicators .p-galleria-indicator.p-highlight > button { .p-galleria-inset-indicators .p-galleria-indicator-button:hover {
background: ${dt('galleria.inset.indicator.hover.background')};
}
.p-galleria-inset-indicators .p-galleria-indicator-active .p-galleria-indicator-button {
background: ${dt('galleria.inset.indicator.active.background')}; background: ${dt('galleria.inset.indicator.active.background')};
} }
.p-galleria-indicator-onitem.p-galleria-indicators-top .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-top .p-galleria-indicators {
top: 0; top: 0;
left: 0; left: 0;
width: 100%; width: 100%;
align-items: flex-start; align-items: flex-start;
} }
.p-galleria-indicator-onitem.p-galleria-indicators-right .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-right .p-galleria-indicators {
right: 0; right: 0;
top: 0; top: 0;
height: 100%; height: 100%;
align-items: flex-end; align-items: flex-end;
} }
.p-galleria-indicator-onitem.p-galleria-indicators-bottom .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-bottom .p-galleria-indicators {
bottom: 0; bottom: 0;
left: 0; left: 0;
width: 100%; width: 100%;
align-items: flex-end; align-items: flex-end;
} }
.p-galleria-indicator-onitem.p-galleria-indicators-left .p-galleria-indicators { .p-galleria-inset-indicators.p-galleria-indicators-left .p-galleria-indicators {
left: 0; left: 0;
top: 0; top: 0;
height: 100%; height: 100%;
@ -314,7 +333,7 @@ export default {
--p-mask-background: ${dt('galleria.mask.background')}; --p-mask-background: ${dt('galleria.mask.background')};
} }
.p-galleria-close { .p-galleria-close-button {
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
@ -327,6 +346,10 @@ export default {
color: ${dt('galleria.close.color')}; color: ${dt('galleria.close.color')};
width: 3rem; width: 3rem;
height: 3rem; height: 3rem;
padding: 0;
border: none;
user-select: none;
cursor: pointer;
border-radius: 50%; border-radius: 50%;
outline-color: transparent; outline-color: transparent;
transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')}; transition: background-color ${dt('transition.duration')}, color ${dt('transition.duration')}, outline-color ${dt('transition.duration')};
@ -338,17 +361,17 @@ export default {
height: 1.5rem; height: 1.5rem;
} }
.p-galleria-close:hover { .p-galleria-close-button:hover {
background: ${dt('galleria.close.hover.background')}; background: ${dt('galleria.close.hover.background')};
color: ${dt('galleria.close.hover.color')}; color: ${dt('galleria.close.hover.color')};
} }
.p-galleria-close:focus-visible { .p-galleria-close-button:focus-visible {
outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')}; outline: ${dt('focus.ring.width')} ${dt('focus.ring.style')} ${dt('focus.ring.color')};
outline-offset: ${dt('focus.ring.offset')}; outline-offset: ${dt('focus.ring.offset')};
} }
.p-galleria-mask .p-galleria-item-nav { .p-galleria-mask .p-galleria-navigate-button {
position: fixed; position: fixed;
top: 50%; top: 50%;
margin-top: -0.5rem; margin-top: -0.5rem;
@ -368,7 +391,7 @@ export default {
transform: scale(0.7); transform: scale(0.7);
} }
.p-galleria-enter-active .p-galleria-item-nav { .p-galleria-enter-active .p-galleria-navigate-button {
opacity: 0; opacity: 0;
} }

6
components/lib/themes/primeone/presets/aura/galleria/index.js
View File

@ -27,7 +27,8 @@ export default {
}, },
insetIndicator: { insetIndicator: {
background: 'rgba(255, 255, 255, 0.4)', background: 'rgba(255, 255, 255, 0.4)',
hoverBackground: 'rgba(255, 255, 255, 0.4)' hoverBackground: 'rgba(255, 255, 255, 0.6)',
activeBackground: 'rgba(255, 255, 255, 0.9)'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'
@ -65,7 +66,8 @@ export default {
}, },
insetIndicator: { insetIndicator: {
background: 'rgba(255, 255, 255, 0.4)', background: 'rgba(255, 255, 255, 0.4)',
hoverBackground: 'rgba(255, 255, 255, 0.4)' hoverBackground: 'rgba(255, 255, 255, 0.6)',
activeBackground: 'rgba(255, 255, 255, 0.9)'
}, },
mask: { mask: {
background: 'rgba(0,0,0,0.9)' background: 'rgba(0,0,0,0.9)'

2
doc/galleria/navigator/ItemWithoutThumbnailsDoc.vue
View File

@ -1,6 +1,6 @@
<template> <template>
<DocSectionText v-bind="$attrs"> <DocSectionText v-bind="$attrs">
<p>Simple example with indicators only.</p> <p>Simple example with navigators only.</p>
</DocSectionText> </DocSectionText>
<DeferredDemo @load="loadDemoData"> <DeferredDemo @load="loadDemoData">
<div class="card"> <div class="card">