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;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #64B5F6;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #81C784;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #FFD54F;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1e1e1e;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #BA68C8;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #2196F3;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #4CAF50;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #ffffff;
color: #495057;
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #FFC107;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #64B5F6;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #81C784;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #FFD54F;

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

@ -2785,7 +2785,7 @@
border-bottom: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
border-top-right-radius: 3px;
border-top-left-radius: 3px;
}
@ -2819,13 +2819,13 @@
.p-dialog .p-dialog-content {
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 0 1.5rem;
}
.p-dialog .p-dialog-footer {
border-top: 0 none;
background: #1f2d40;
color: rgba(255, 255, 255, 0.87);
padding: 1rem;
padding: 1.5rem;
text-align: right;
border-bottom-right-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);
}
.p-overlaypanel .p-overlaypanel-content {
padding: 1rem;
padding: 0 1.5rem;
}
.p-overlaypanel .p-overlaypanel-close {
background: #BA68C8;

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

@ -119,7 +119,10 @@
</Dialog>
<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>
<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" />
@ -127,7 +130,10 @@
</Dialog>
<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>
<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" />
@ -250,19 +256,25 @@
&lt;/Dialog&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;template #footer&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;/template&gt;
&lt;/Dialog&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;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;/template&gt;
&lt;/Dialog&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;template #footer&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;/template&gt;
&lt;Dialog :visible.sync="deleteProductsDialog" :style="{width: '450px'}" header="Confirm" :modal="true"&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;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;/template&gt;
&lt;/Dialog&gt;
</template>
</CodeHighlight>
@ -497,4 +509,10 @@ export default {
margin: 0 auto 2rem auto;
display: block;
}
.confirmation-content {
display: flex;
align-items: center;
justify-content: center;
}
</style>

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

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