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

Refactored ConfirmPopup and ConfirmDialog

pull/5677/head
Cagatay Civici 2024-04-08 15:21:41 +03:00
parent 0c07f9424a
commit cdd0cb38ac
4 changed files with 34 additions and 34 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/lib/confirmdialog/style/ConfirmDialogStyle.js
View File

@ -1,11 +1,11 @@
import BaseStyle from 'primevue/base/style'; import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: 'p-confirm-dialog', root: 'p-confirmdialog',
icon: 'p-confirm-dialog-icon', icon: 'p-confirmdialog-icon',
message: 'p-confirm-dialog-message', message: 'p-confirmdialog-message',
rejectButton: 'p-confirm-dialog-reject', rejectButton: 'p-confirmdialog-reject-button',
acceptButton: 'p-confirm-dialog-accept' acceptButton: 'p-confirmdialog-accept-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

14
components/lib/confirmpopup/style/ConfirmPopupStyle.js
View File

@ -2,17 +2,17 @@ import BaseStyle from 'primevue/base/style';
const classes = { const classes = {
root: ({ instance }) => [ root: ({ instance }) => [
'p-confirm-popup p-component', 'p-confirmpopup p-component',
{ {
'p-ripple-disabled': instance.$primevue.config.ripple === false 'p-ripple-disabled': instance.$primevue.config.ripple === false
} }
], ],
content: 'p-confirm-popup-content', content: 'p-confirmpopup-content',
icon: 'p-confirm-popup-icon', icon: 'p-confirmpopup-icon',
message: 'p-confirm-popup-message', message: 'p-confirmpopup-message',
footer: 'p-confirm-popup-footer', footer: 'p-confirmpopup-footer',
rejectButton: 'p-confirm-popup-reject', rejectButton: 'p-confirmpopup-reject-button',
acceptButton: 'p-confirm-popup-accept' acceptButton: 'p-confirmpopup-accept-button'
}; };
export default BaseStyle.extend({ export default BaseStyle.extend({

4
components/lib/themes/primeone/base/confirmdialog/index.js
View File

@ -1,12 +1,12 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-confirm-dialog .p-dialog-content { .p-confirmdialog .p-dialog-content {
display: flex; display: flex;
align-items: center; align-items: center;
gap: 1rem; gap: 1rem;
} }
.p-confirm-dialog-icon { .p-confirmdialog-icon {
font-size: 2rem; font-size: 2rem;
} }
` `

40
components/lib/themes/primeone/base/confirmpopup/index.js
View File

@ -1,6 +1,6 @@
export default { export default {
css: ({ dt }) => ` css: ({ dt }) => `
.p-confirm-popup { .p-confirmpopup {
position: absolute; position: absolute;
margin-top: 10px; margin-top: 10px;
top: 0; top: 0;
@ -12,61 +12,61 @@ export default {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
} }
.p-confirm-popup-content { .p-confirmpopup-content {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 1rem; padding: 1rem;
} }
.p-confirm-popup-icon { .p-confirmpopup-icon {
font-size: 1.5rem; font-size: 1.5rem;
width: 1.5rem; width: 1.5rem;
height: 1.5rem; height: 1.5rem;
} }
.p-confirm-popup-message { .p-confirmpopup-message {
margin-left: 1rem; margin-left: 1rem;
} }
.p-confirm-popup-footer { .p-confirmpopup-footer {
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
gap: 0.5rem; gap: 0.5rem;
padding: 0 1rem 1rem 1rem; padding: 0 1rem 1rem 1rem;
} }
.p-confirm-popup-footer button { .p-confirmpopup-footer button {
width: auto; width: auto;
} }
.p-confirm-popup-footer button:last-child { .p-confirmpopup-footer button:last-child {
margin: 0; margin: 0;
} }
.p-confirm-popup-flipped { .p-confirmpopup-flipped {
margin-top: 0; margin-top: 0;
margin-bottom: 10px; margin-bottom: 10px;
} }
.p-confirm-popup-enter-from { .p-confirmpopup-enter-from {
opacity: 0; opacity: 0;
transform: scaleY(0.8); transform: scaleY(0.8);
} }
.p-confirm-popup-leave-to { .p-confirmpopup-leave-to {
opacity: 0; opacity: 0;
} }
.p-confirm-popup-enter-active { .p-confirmpopup-enter-active {
transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1); transition: transform 0.12s cubic-bezier(0, 0, 0.2, 1), opacity 0.12s cubic-bezier(0, 0, 0.2, 1);
} }
.p-confirm-popup-leave-active { .p-confirmpopup-leave-active {
transition: opacity 0.1s linear; transition: opacity 0.1s linear;
} }
.p-confirm-popup:after, .p-confirmpopup:after,
.p-confirm-popup:before { .p-confirmpopup:before {
bottom: 100%; bottom: 100%;
left: ${dt('{overlay.arrow.left} + 1.25rem', 0)}; left: ${dt('{overlay.arrow.left} + 1.25rem', 0)};
content: " "; content: " ";
@ -76,7 +76,7 @@ export default {
pointer-events: none; pointer-events: none;
} }
.p-confirm-popup:after { .p-confirmpopup:after {
border-width: 8px; border-width: 8px;
margin-left: -8px; margin-left: -8px;
border-style: solid; border-style: solid;
@ -84,7 +84,7 @@ export default {
border-bottom-color: ${dt('confirmpopup.background')}; border-bottom-color: ${dt('confirmpopup.background')};
} }
.p-confirm-popup:before { .p-confirmpopup:before {
border-width: 10px; border-width: 10px;
margin-left: -10px; margin-left: -10px;
border-style: solid; border-style: solid;
@ -92,18 +92,18 @@ export default {
border-bottom-color: ${dt('confirmpopup.border.color')}; border-bottom-color: ${dt('confirmpopup.border.color')};
} }
.p-confirm-popup-flipped:after, .p-confirmpopup-flipped:after,
.p-confirm-popup-flipped:before { .p-confirmpopup-flipped:before {
bottom: auto; bottom: auto;
top: 100%; top: 100%;
} }
.p-confirm-popup-flipped:after { .p-confirmpopup-flipped:after {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: ${dt('confirmpopup.background')}; border-top-color: ${dt('confirmpopup.background')};
} }
.p-confirm-popup-flipped:before { .p-confirmpopup-flipped:before {
border-bottom-color: transparent; border-bottom-color: transparent;
border-top-color: ${dt('confirmpopup.border.color')}; border-top-color: ${dt('confirmpopup.border.color')};
} }