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

Dialog cosmetics

pull/358/head
cagataycivici 2020-07-01 19:13:36 +03:00
parent d69dd3adc0
commit b97352ca4b
13 changed files with 80 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/themes/arya-blue/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #64B5F6; background: #64B5F6;

8
public/themes/arya-green/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #81C784; background: #81C784;

8
public/themes/arya-orange/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #FFD54F; background: #FFD54F;

8
public/themes/arya-purple/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1e1e1e; background: #1e1e1e;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #BA68C8; background: #BA68C8;

8
public/themes/saga-blue/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #2196F3; background: #2196F3;

8
public/themes/saga-green/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #4CAF50; background: #4CAF50;

8
public/themes/saga-orange/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #ffffff; background: #ffffff;
color: #495057; color: #495057;
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #FFC107; background: #FFC107;

8
public/themes/vela-blue/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #64B5F6; background: #64B5F6;

8
public/themes/vela-green/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #81C784; background: #81C784;

8
public/themes/vela-orange/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #FFD54F; background: #FFD54F;

8
public/themes/vela-purple/theme.css
View File

@ -2785,7 +2785,7 @@
border-bottom: 0 none; border-bottom: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
border-top-right-radius: 3px; border-top-right-radius: 3px;
border-top-left-radius: 3px; border-top-left-radius: 3px;
} }
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content { .p-dialog .p-dialog-content {
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 0 1.5rem;
} }
.p-dialog .p-dialog-footer { .p-dialog .p-dialog-footer {
border-top: 0 none; border-top: 0 none;
background: #1f2d40; background: #1f2d40;
color: rgba(255, 255, 255, 0.87); color: rgba(255, 255, 255, 0.87);
padding: 1rem; padding: 1.5rem;
text-align: right; text-align: right;
border-bottom-right-radius: 3px; border-bottom-right-radius: 3px;
border-bottom-left-radius: 3px; border-bottom-left-radius: 3px;
@ -2847,7 +2847,7 @@
box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12); box-shadow: 0px 11px 15px -7px rgba(0, 0, 0, 0.2), 0px 24px 38px 3px rgba(0, 0, 0, 0.14), 0px 9px 46px 8px rgba(0, 0, 0, 0.12);
} }
.p-overlaypanel .p-overlaypanel-content { .p-overlaypanel .p-overlaypanel-content {
padding: 1rem; padding: 0 1.5rem;
} }
.p-overlaypanel .p-overlaypanel-close { .p-overlaypanel .p-overlaypanel-close {
background: #BA68C8; background: #BA68C8;

26
src/views/datatable/DataTableCrudDemo.vue
View File

@ -119,7 +119,10 @@
</Dialog> </Dialog>
<Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<p v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</p> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete <b>{{product.name}}</b>?</span>
</div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/> <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" />
@ -127,7 +130,10 @@
</Dialog> </Dialog>
<Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"> <Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<p v-if="product">Are you sure you want to delete selected products?</p> <div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
<span v-if="product">Are you sure you want to delete the selected products?</span>
</div>
<template #footer> <template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/> <Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /> <Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" />
@ -250,7 +256,10 @@
&lt;/Dialog&gt; &lt;/Dialog&gt;
&lt;Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt; &lt;Dialog :visible.sync="deleteProductDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
&lt;p v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/p&gt; &lt;div class="confirmation-content"&gt;
&lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
&lt;span v-if="product"&gt;Are you sure you want to delete &lt;b&gt;{{product.name}}&lt;/b&gt;?&lt;/span&gt;
&lt;/div&gt;
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/&gt; &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductDialog = false"/&gt;
&lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /&gt; &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteProduct" /&gt;
@ -258,7 +267,10 @@
&lt;/Dialog&gt; &lt;/Dialog&gt;
&lt;Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt; &lt;Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&gt;
&lt;p v-if="product"&gt;Are you sure you want to delete selected products?&lt;/p&gt; &lt;div class="confirmation-content"&gt;
&lt;i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" /&gt;
&lt;span v-if="product"&gt;Are you sure you want to delete the selected products?&lt;/span&gt;
&lt;/div&gt;
&lt;template #footer&gt; &lt;template #footer&gt;
&lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/&gt; &lt;Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteProductsDialog = false"/&gt;
&lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /&gt; &lt;Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteSelectedProducts" /&gt;
@ -497,4 +509,10 @@ export default {
margin: 0 auto 2rem auto; margin: 0 auto 2rem auto;
display: block; display: block;
} }
.confirmation-content {
display: flex;
align-items: center;
justify-content: center;
}
</style> </style>

4
src/views/dialog/DialogDemo.vue
View File

@ -190,4 +190,8 @@ p {
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.p-dialog .p-button {
min-width: 6rem;
}
</style> </style>