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

Refactor styles

pull/193/head
cagataycivici 2020-02-06 14:57:20 +03:00
parent 6b21c1d839
commit e741c3d269
3 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/dialog/Dialog.d.ts vendored
View File

@ -12,6 +12,8 @@ export declare class Dialog extends Vue {
baseZIndex?: number; baseZIndex?: number;
autoZIndex?: boolean; autoZIndex?: boolean;
ariaCloseLabel?: string; ariaCloseLabel?: string;
position?: string;
maximizable?: boolean;
$emit(eventName: 'show'): this; $emit(eventName: 'show'): this;
$emit(eventName: 'hide'): this; $emit(eventName: 'hide'): this;
$slots: { $slots: {

42
src/components/dialog/Dialog.vue
View File

@ -186,7 +186,7 @@ export default {
} }
}, },
getPositionClass() { getPositionClass() {
const positions = ['left', 'right', 'top', 'topLeft', 'topRight', 'bottom', 'bottomLeft', 'bottomRight']; const positions = ['left', 'right', 'top', 'topleft', 'topright', 'bottom', 'bottomleft', 'bottomright'];
const pos = positions.find(item => item === this.position); const pos = positions.find(item => item === this.position);
return pos ? `p-dialog-${pos}` : ''; return pos ? `p-dialog-${pos}` : '';
@ -369,10 +369,10 @@ export default {
.p-dialog-bottom .p-dialog, .p-dialog-bottom .p-dialog,
.p-dialog-left .p-dialog, .p-dialog-left .p-dialog,
.p-dialog-right .p-dialog, .p-dialog-right .p-dialog,
.p-dialog-topLeft .p-dialog, .p-dialog-topleft .p-dialog,
.p-dialog-topRight .p-dialog, .p-dialog-topright .p-dialog,
.p-dialog-bottomLeft .p-dialog, .p-dialog-bottomleft .p-dialog,
.p-dialog-bottomRight .p-dialog { .p-dialog-bottomright .p-dialog {
margin: .75em; margin: .75em;
transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);
} }
@ -384,14 +384,14 @@ export default {
.p-dialog-left .p-dialog-leave-active, .p-dialog-left .p-dialog-leave-active,
.p-dialog-right .p-dialog-enter-active, .p-dialog-right .p-dialog-enter-active,
.p-dialog-right .p-dialog-leave-active, .p-dialog-right .p-dialog-leave-active,
.p-dialog-topLeft .p-dialog-enter-active, .p-dialog-topleft .p-dialog-enter-active,
.p-dialog-topLeft .p-dialog-leave-active, .p-dialog-topleft .p-dialog-leave-active,
.p-dialog-topRight .p-dialog-enter-active, .p-dialog-topright .p-dialog-enter-active,
.p-dialog-topRight .p-dialog-leave-active, .p-dialog-topright .p-dialog-leave-active,
.p-dialog-bottomLeft .p-dialog-enter-active, .p-dialog-bottomleft .p-dialog-enter-active,
.p-dialog-bottomLeft .p-dialog-leave-active, .p-dialog-bottomleft .p-dialog-leave-active,
.p-dialog-bottomRight .p-dialog-enter-active, .p-dialog-bottomright .p-dialog-enter-active,
.p-dialog-bottomRight .p-dialog-leave-active { .p-dialog-bottomright .p-dialog-leave-active {
transition: all .3s ease-out; transition: all .3s ease-out;
} }
.p-dialog-top .p-dialog-enter, .p-dialog-top .p-dialog-enter,
@ -404,18 +404,18 @@ export default {
} }
.p-dialog-left .p-dialog-enter, .p-dialog-left .p-dialog-enter,
.p-dialog-left .p-dialog-leave-to, .p-dialog-left .p-dialog-leave-to,
.p-dialog-topLeft .p-dialog-enter, .p-dialog-topleft .p-dialog-enter,
.p-dialog-topLeft .p-dialog-leave-to, .p-dialog-topleft .p-dialog-leave-to,
.p-dialog-bottomLeft .p-dialog-enter, .p-dialog-bottomleft .p-dialog-enter,
.p-dialog-bottomLeft .p-dialog-leave-to { .p-dialog-bottomleft .p-dialog-leave-to {
transform: translate3d(-100%, 0px, 0px); transform: translate3d(-100%, 0px, 0px);
} }
.p-dialog-right .p-dialog-enter, .p-dialog-right .p-dialog-enter,
.p-dialog-right .p-dialog-leave-to, .p-dialog-right .p-dialog-leave-to,
.p-dialog-topRight .p-dialog-enter, .p-dialog-topright .p-dialog-enter,
.p-dialog-topRight .p-dialog-leave-to, .p-dialog-topright .p-dialog-leave-to,
.p-dialog-bottomRight .p-dialog-enter, .p-dialog-bottomright .p-dialog-enter,
.p-dialog-bottomRight .p-dialog-leave-to { .p-dialog-bottomright .p-dialog-leave-to {
transform: translate3d(100%, 0px, 0px); transform: translate3d(100%, 0px, 0px);
} }
/* Maximize */ /* Maximize */

6
src/views/dialog/DialogDoc.vue
View File

@ -50,8 +50,8 @@ export default {
</Dialog> </Dialog>
</CodeHighlight> </CodeHighlight>
<h3>Dynamic Content</h3> <h3>Positioning</h3>
<p>Dynamic content may move the dialog boundaries outside of the viewport. Common solution is defining max-height via <i>contentStyle</i> so longer content displays a scrollbar.</p> <p>Dialog location is controlled with the <i>position</i> property whose default value is center. Other valid values are top", "bottom", "left", "right", "topleft", "topright", "bottomleft" and "bottomright"<div class=""></div>
<h3>Properties</h3> <h3>Properties</h3>
<div class="doc-tablewrapper"> <div class="doc-tablewrapper">
@ -93,7 +93,7 @@ export default {
<td>position</td> <td>position</td>
<td>string</td> <td>string</td>
<td>center</td> <td>center</td>
<td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topLeft", "topRight", "bottomLeft" or "bottomRight".</td> <td>Position of the dialog, options are "center", "top", "bottom", "left", "right", "topleft", "topright", "bottomleft" or "bottomright".</td>
</tr> </tr>
<tr> <tr>
<td>contentStyle</td> <td>contentStyle</td>