mirror of
https://bitbucket.org/studiotem/jandl-taskmanager-app.git
synced 2026-10-21 14:29:34 +00:00
feat(modal): enhance modal functionality with resizing support and improved layout
This commit is contained in:
1 parent
54e12a1713
commit
9c32c0d99f
23 files changed
+569
-331
No files matched your search
@@ -1,39 +1,52 @@
|
||||
<template>
|
||||
<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent :retain-focus="false" >
|
||||
<v-card style="position: relative">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Vytvoriť</h1>
|
||||
<div class="d-flex align-center">
|
||||
<a-reset-size-button @reset="resetModalSize" />
|
||||
<a-close-button @close="closeModal()" />
|
||||
</div>
|
||||
</div>
|
||||
<v-dialog
|
||||
v-model="visible"
|
||||
:width="modalWidth"
|
||||
:height="modalHeight"
|
||||
persistent
|
||||
:retain-focus="false"
|
||||
>
|
||||
<v-card style="position: relative; height: 100%">
|
||||
<div class="d-flex justify-space-between align-center">
|
||||
<h1>Vytvoriť</h1>
|
||||
<div class="d-flex align-start">
|
||||
<a-reset-size-button @reset="resetModalSize" />
|
||||
<a-close-button @close="closeModal()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
|
||||
<v-btn class="button primary half outline" @click.stop="createTask()"
|
||||
>SUB TASK</v-btn
|
||||
>
|
||||
<v-btn class="button primary half outline" @click.stop="createBlocker()"
|
||||
>BLOCKER</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
<a-resize-handle :current-width="modalWidthPx" :current-height="modalHeightPx" @resize="handleModalResize" @resize-end="handleResizeEnd" />
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
<v-card-actions
|
||||
class="mt-10 d-flex justify-start align-center mobile-view"
|
||||
>
|
||||
<v-btn class="button primary half outline" @click.stop="createTask()"
|
||||
>SUB TASK</v-btn
|
||||
>
|
||||
<v-btn class="button primary half outline" @click.stop="createBlocker()"
|
||||
>BLOCKER</v-btn
|
||||
>
|
||||
</v-card-actions>
|
||||
<a-resize-handle
|
||||
:current-width="modalWidthPx"
|
||||
:current-height="modalHeightPx"
|
||||
@resize="handleModalResize"
|
||||
@resize-end="handleResizeEnd"
|
||||
/>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin'
|
||||
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue'
|
||||
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue'
|
||||
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue'
|
||||
import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
|
||||
import AResizeHandle from '@/plugins/tm@modal/_components/a-resize-handle.vue';
|
||||
import AResetSizeButton from '@/plugins/tm@modal/_components/a-reset-size-button.vue';
|
||||
import ACloseButton from '@/plugins/tm@modal/_components/a-close-button.vue';
|
||||
|
||||
export default {
|
||||
|
||||
components: {
|
||||
AResizeHandle,
|
||||
AResetSizeButton, ACloseButton,
|
||||
},
|
||||
components: {
|
||||
AResizeHandle,
|
||||
AResetSizeButton,
|
||||
ACloseButton,
|
||||
},
|
||||
mixins: [modalMixin],
|
||||
props: {
|
||||
data: {
|
||||
@@ -43,13 +56,14 @@ export default {
|
||||
},
|
||||
emits: ['update', 'data'],
|
||||
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
localData: null,
|
||||
modalName: 'z-show-menu-modal',
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
localData: null,
|
||||
modalName: 'z-show-menu-modal',
|
||||
modalSize: 'small',
|
||||
};
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.$events.on('blocker-created', () => {
|
||||
|
||||
Reference in new issue
Block a user