chore(build): update JavaScript and CSS files, remove obsolete files, and add new assets for improved performance

app/src/plugins/app/_theme/_components/modals.sass

@@ -37,7 +37,7 @@
 	justify-content: space-between
 
 	.left
-		width: 70% !important
+		width: calc(75% - 15px) !important
 
 	.right
-		width: 25% !important
+		width: calc(25% - 15px) !important

app/src/plugins/tm@modal/_components/a-close-button.vue

@@ -0,0 +1,37 @@
+<template>
+	<v-btn
+		icon
+		size="small"
+		variant="text"
+		@click="handleClose"
+		class="close-button"
+	>
+		<v-icon icon="mdi-close" size="large"></v-icon>
+		<v-tooltip activator="parent" location="bottom">
+			Close
+		</v-tooltip>
+	</v-btn>
+</template>
+
+<script>
+export default {
+	name: 'ACloseButton',
+	emits: ['close'],
+
+	methods: {
+		handleClose() {
+			this.$emit('close')
+		}
+	}
+}
+</script>
+
+<style scoped lang="sass">
+.close-button
+	opacity: 0.7
+	transition: opacity 0.2s ease
+
+	&:hover
+		opacity: 1
+</style>
+

app/src/plugins/tm@modal/_components/a-reset-size-button.vue

@@ -0,0 +1,41 @@
+<template>
+	<v-btn
+		icon
+		size="small"
+		variant="text"
+		@click="handleReset"
+		class="reset-size-button"
+	>
+		<v-icon icon="mdi-arrow-expand-all" size="small"></v-icon>
+		<v-tooltip activator="parent" location="bottom">
+			Reset modal size
+		</v-tooltip>
+	</v-btn>
+</template>
+
+<script>
+export default {
+	name: 'AResetSizeButton',
+	emits: ['reset'],
+
+	methods: {
+		handleReset() {
+			this.$emit('reset')
+		}
+	}
+}
+</script>
+
+<style scoped lang="sass">
+.reset-size-button
+	margin-right: 8px
+	opacity: 0.7
+	transition: opacity 0.2s ease
+
+	&:hover
+		opacity: 1
+
+	@media (max-width: 768px)
+		display: none !important
+</style>
+

app/src/plugins/tm@modal/_components/a-resize-handle.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="modal-resize-handle"
+    @mousedown="startResize"
+    @touchstart="startResize"
+  >
+    <v-icon icon="mdi-resize-bottom-right" size="small"></v-icon>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AResizeHandle',
+  emits: ['resize', 'resize-end'],
+
+  props: {
+    currentWidth: {
+      type: [String, Number],
+      default: '100%',
+    },
+    currentHeight: {
+      type: [String, Number],
+      default: '100%',
+    },
+  },
+
+  data() {
+    return {
+      isResizing: false,
+      startX: 0,
+      startY: 0,
+      startWidth: 0,
+      startHeight: 0,
+    };
+  },
+
+  methods: {
+    startResize(event) {
+      // Prevent default to avoid text selection during drag
+      event.preventDefault();
+
+      this.isResizing = true;
+
+      // Store initial position and size
+      if (event.type === 'touchstart') {
+        this.startX = event.touches[0].clientX;
+        this.startY = event.touches[0].clientY;
+      } else {
+        this.startX = event.clientX;
+        this.startY = event.clientY;
+      }
+
+      // Parse current dimensions to pixels
+      this.startWidth = this.parseToPixels(this.currentWidth, 'width');
+      this.startHeight = this.parseToPixels(this.currentHeight, 'height');
+
+      // Add event listeners for move and end
+      document.addEventListener('mousemove', this.handleResize);
+      document.addEventListener('mouseup', this.stopResize);
+      document.addEventListener('touchmove', this.handleResize);
+      document.addEventListener('touchend', this.stopResize);
+
+      // Add cursor style to body
+      document.body.style.cursor = 'nwse-resize';
+    },
+
+    handleResize(event) {
+      if (!this.isResizing) return;
+
+      let clientX, clientY;
+      if (event.type === 'touchmove') {
+        clientX = event.touches[0].clientX;
+        clientY = event.touches[0].clientY;
+      } else {
+        clientX = event.clientX;
+        clientY = event.clientY;
+      }
+
+      // Calculate the difference
+      const deltaX = clientX - this.startX;
+      const deltaY = clientY - this.startY;
+
+      // Calculate new dimensions
+      const newWidth = this.startWidth + deltaX;
+      const newHeight = this.startHeight + deltaY;
+
+      // Emit resize event with new dimensions
+      this.$emit('resize', { width: newWidth, height: newHeight });
+    },
+
+    stopResize() {
+      if (!this.isResizing) return;
+
+      this.isResizing = false;
+
+      // Remove event listeners
+      document.removeEventListener('mousemove', this.handleResize);
+      document.removeEventListener('mouseup', this.stopResize);
+      document.removeEventListener('touchmove', this.handleResize);
+      document.removeEventListener('touchend', this.stopResize);
+
+      // Reset cursor style
+      document.body.style.cursor = '';
+
+      // Emit final resize event
+      this.$emit('resize-end');
+    },
+
+    parseToPixels(value, type) {
+      if (typeof value === 'number') {
+        return value;
+      }
+
+      // Remove 'px' suffix if present
+      const numericValue = parseFloat(value);
+
+      // If it's a percentage, calculate based on viewport
+      if (typeof value === 'string' && value.includes('%')) {
+        const percent = numericValue;
+        return type === 'height'
+          ? (window.innerHeight * percent) / 100
+          : (window.innerWidth * percent) / 100;
+      }
+
+      return numericValue || 600; // Fallback to 600px
+    },
+  },
+
+  beforeUnmount() {
+    // Clean up event listeners if component is destroyed during resize
+    if (this.isResizing) {
+      this.stopResize();
+    }
+  },
+};
+</script>
+
+<style scoped lang="sass">
+.modal-resize-handle
+	position: absolute
+	bottom: 0
+	right: 0
+	width: 32px
+	height: 32px
+	cursor: nwse-resize
+	display: flex
+	align-items: center
+	justify-content: center
+	z-index: 1000
+	background: rgba(0, 0, 0, 0.05)
+	border-radius: 4px 0 0 0
+	transition: background 0.2s ease
+
+	&:hover
+		background: rgba(0, 0, 0, 0.1)
+
+	.v-icon
+		opacity: 0.5
+		transition: opacity 0.2s ease
+
+	&:hover .v-icon
+		opacity: 0.8
+
+	@media (max-width: 768px)
+		display: none !important
+</style>

app/src/plugins/tm@modal/_mixins/modal.mixin.ts

@@ -1,12 +1,107 @@
+import modalResizeUtils from '@/plugins/tm@modal/_utils/modal-resize.utils'
+
 export default {
+	data() {
+		return {
+			modalWidth: '100%',
+			modalHeight: '100%',
+			modalName: '' // Should be set by component
+		}
+	},
+
+	computed: {
+		modalWidthPx() {
+			return this.modalWidth
+		},
+		modalHeightPx() {
+			return this.modalHeight
+		}
+	},
+
 	mounted() {
 		window.addEventListener('keydown', this.handleKeyDown)
+		window.addEventListener('resize', this.handleWindowResize)
+		this.initModalSize()
+	},
+
+	beforeUnmount() {
+		window.removeEventListener('keydown', this.handleKeyDown)
+		window.removeEventListener('resize', this.handleWindowResize)
 	},
 
 	methods: {
 		handleKeyDown(event) {
 			// if (event.keyCode === 27) this.closeModal()
 			if (event.keyCode === 27) this.visible = false
+		},
+
+		/**
+		 * Initialize modal size from localStorage or defaults
+		 */
+		initModalSize() {
+			if (!this.modalName) {
+				console.warn('Modal name not set for resize functionality')
+				return
+			}
+
+			const size = modalResizeUtils.getModalSize(this.modalName)
+			this.modalWidth = typeof size.width === 'number' ? `${size.width}px` : size.width
+			this.modalHeight = typeof size.height === 'number' ? `${size.height}px` : size.height
+		},
+
+		/**
+		 * Handle window resize - adjust modal if on mobile
+		 */
+		handleWindowResize() {
+			if (modalResizeUtils.isMobile()) {
+				this.modalWidth = '100%'
+				this.modalHeight = '100%'
+			} else {
+				// Reload stored or default size on desktop
+				this.initModalSize()
+			}
+		},
+
+		/**
+		 * Handle modal resize from resize handle
+		 */
+		handleModalResize({ width, height }) {
+			if (modalResizeUtils.isMobile()) {
+				return // Don't resize on mobile
+			}
+
+			const constrained = modalResizeUtils.constrainSize(width, height)
+			this.modalWidth = `${constrained.width}px`
+			this.modalHeight = `${constrained.height}px`
+		},
+
+		/**
+		 * Handle resize end - save to localStorage
+		 */
+		handleResizeEnd() {
+			if (!this.modalName || modalResizeUtils.isMobile()) {
+				return
+			}
+
+			// Parse current dimensions
+			const width = parseFloat(this.modalWidth)
+			const height = parseFloat(this.modalHeight)
+
+			if (!isNaN(width) && !isNaN(height)) {
+				modalResizeUtils.saveSize(this.modalName, width, height)
+			}
+		},
+
+		/**
+		 * Reset modal size to defaults
+		 */
+		resetModalSize() {
+			if (!this.modalName) {
+				return
+			}
+
+			modalResizeUtils.resetSize(this.modalName)
+			this.initModalSize()
 		}
-	},
+	}
 }

app/src/plugins/tm@modal/_utils/modal-resize.utils.ts

@@ -0,0 +1,162 @@
+interface ModalSize {
+	width: string | number
+	height: string | number
+}
+
+interface StoredModalSize {
+	width: number
+	height: number
+	timestamp: number
+}
+
+const MOBILE_BREAKPOINT = 768
+const DEFAULT_DESKTOP_WIDTH_PERCENT = 80
+const DEFAULT_DESKTOP_MAX_WIDTH = 1440
+const DEFAULT_DESKTOP_HEIGHT_PERCENT = 90
+
+export default {
+	/**
+	 * Check if the current viewport is mobile
+	 */
+	isMobile(): boolean {
+		return window.innerWidth <= MOBILE_BREAKPOINT
+	},
+
+	/**
+	 * Get default modal size based on viewport
+	 */
+	getDefaultSize(): ModalSize {
+		if (this.isMobile()) {
+			return {
+				width: '100%',
+				height: '100%'
+			}
+		}
+
+		const viewportWidth = window.innerWidth
+		const calculatedWidth = Math.min(
+			(viewportWidth * DEFAULT_DESKTOP_WIDTH_PERCENT) / 100,
+			DEFAULT_DESKTOP_MAX_WIDTH
+		)
+		const calculatedHeight = (window.innerHeight * DEFAULT_DESKTOP_HEIGHT_PERCENT) / 100
+
+		return {
+			width: calculatedWidth,
+			height: calculatedHeight
+		}
+	},
+
+	/**
+	 * Get stored modal size from localStorage
+	 */
+	getStoredSize(modalName: string): ModalSize | null {
+		try {
+			const key = `modal-size-${modalName}`
+			const stored = localStorage.getItem(key)
+
+			if (!stored) {
+				return null
+			}
+
+			const parsed: StoredModalSize = JSON.parse(stored)
+
+			// Return stored size if it exists and is valid
+			if (parsed && typeof parsed.width === 'number' && typeof parsed.height === 'number') {
+				return {
+					width: parsed.width,
+					height: parsed.height
+				}
+			}
+
+			return null
+		} catch (error) {
+			console.error('Error reading stored modal size:', error)
+			return null
+		}
+	},
+
+	/**
+	 * Save modal size to localStorage
+	 */
+	saveSize(modalName: string, width: number, height: number): void {
+		try {
+			const key = `modal-size-${modalName}`
+			const data: StoredModalSize = {
+				width,
+				height,
+				timestamp: Date.now()
+			}
+			localStorage.setItem(key, JSON.stringify(data))
+		} catch (error) {
+			console.error('Error saving modal size:', error)
+		}
+	},
+
+	/**
+	 * Reset modal size (clear from localStorage)
+	 */
+	resetSize(modalName: string): void {
+		try {
+			const key = `modal-size-${modalName}`
+			localStorage.removeItem(key)
+		} catch (error) {
+			console.error('Error resetting modal size:', error)
+		}
+	},
+
+	/**
+	 * Get modal size (stored or default)
+	 */
+	getModalSize(modalName: string): ModalSize {
+		// On mobile, always return 100%
+		if (this.isMobile()) {
+			return {
+				width: '100%',
+				height: '100%'
+			}
+		}
+
+		// Check for stored size
+		const storedSize = this.getStoredSize(modalName)
+		if (storedSize) {
+			return storedSize
+		}
+
+		// Return default size
+		return this.getDefaultSize()
+	},
+
+	/**
+	 * Convert size to pixels if percentage, otherwise return as is
+	 */
+	normalizeSize(size: string | number): number {
+		if (typeof size === 'number') {
+			return size
+		}
+
+		// If it's a percentage, calculate pixel value
+		if (size.includes('%')) {
+			const percent = parseFloat(size)
+			return (window.innerWidth * percent) / 100
+		}
+
+		// If it's already pixels, parse it
+		return parseFloat(size)
+	},
+
+	/**
+	 * Constrain size within reasonable bounds
+	 */
+	constrainSize(width: number, height: number): { width: number; height: number } {
+		const minWidth = 400
+		const minHeight = 300
+		const maxWidth = window.innerWidth
+		const maxHeight = window.innerHeight
+
+		return {
+			width: Math.max(minWidth, Math.min(width, maxWidth)),
+			height: Math.max(minHeight, Math.min(height, maxHeight))
+		}
+	}
+}
+

app/src/plugins/tm@modal/blocker/z-blocker-modal.vue

@@ -1,10 +1,13 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
 		<W-loadable :content="blocker" class="h-100">
-			<v-card height="100%" class="d-flex flex-column">
+			<v-card height="100%" class="d-flex flex-column" style="position: relative">
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ blocker.id ? "Upraviť" : "Vytvoriť" }} blocker</h1>
-					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
+					<div class="d-flex align-center">
+						<a-reset-size-button @reset="resetModalSize" />
+						<a-close-button @close="closeModal()" />
+					</div>
 				</div>
 
 				<v-card-actions class="d-flex flex-column modal-content">
@@ -30,6 +33,7 @@
 				</v-card-actions>
 
 				<v-btn class="button primary" @click="save()">{{ blocker.id ? "UPRAVIŤ" : "VYTVORIŤ" }}</v-btn>
+				<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 			</v-card>
 		</W-loadable>
 	</v-dialog>
@@ -45,6 +49,9 @@ import { mapGetters } from "vuex"
 import moment from "moment"
 import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.mixin'
 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 {
 	mixins: [VuetifyFixFocusMixin, AutocompleteMixin, modalMixin],
@@ -54,6 +61,8 @@ export default {
 	components: {
 		Datepicker,
 		// ZAutocomplete
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
 	},
 
 	data() {
@@ -65,7 +74,8 @@ export default {
 			datepicker: null,
 			starts_at_time: null,
 			ends_at_time: null,
-			employee: null
+			employee: null,
+			modalName: 'z-blocker-modal',
 		}
 	},
 

app/src/plugins/tm@modal/blocker/z-delete-blocker-modal.vue

@@ -1,36 +1,44 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1>Ste si istý, že chcete zmazať <b>{{ blocker.name }}</b>?</h1>
 
-				<v-icon
+				<div class="d-flex align-center">
-					@click.stop="closeModal()"
+					<a-reset-size-button @reset="resetModalSize" />
-					icon="mdi-close"
+					<a-close-button @close="closeModal()" class="mb-15" />
-					size="large"
+				</div>
-					class="mb-15"
-				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteBlocker()" :disabled="isDeleting">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	mixins: [ modalMixin ],
 	emits: ['on-blocker-deleted'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			blocker: null,
-			isDeleting: false
+			isDeleting: false,
+			modalName: 'z-delete-blocker-modal',
 		}
 	},
 

app/src/plugins/tm@modal/master-task/z-complete-master-task-modal.vue

@@ -1,33 +1,42 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1>Ste si istý, že chcete {{ mastertask.is_finished ? 'znovu otvoriť' : 'dokončiť' }} <b>{{ mastertask?.name }}</b>?</h1>
-				<v-icon
+				<div class="d-flex align-center">
-					@click.stop="visible = false"
+					<a-reset-size-button @reset="resetModalSize" />
-					icon="mdi-close"
+					<a-close-button @close="() => visible = false" />
-					size="large"
+				</div>
-				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="complete()">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="visible = false">ZRUŠIŤ</v-btn>
 			</v-card-actions>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	mixins: [ modalMixin ],
 	emits: ['close', 'master-task-edited'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
-			mastertask: null
+			mastertask: null,
+			modalName: 'z-complete-master-task-modal',
 		}
 	},
 

app/src/plugins/tm@modal/master-task/z-delete-master-task-modal.vue

@@ -1,36 +1,44 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1>Ste si istý, že chcete zmazať <b>{{ mastertask.name }}</b>?</h1>
 
-				<v-icon
+				<div class="d-flex align-center">
-					@click.stop="closeModal()"
+					<a-reset-size-button @reset="resetModalSize" />
-					icon="mdi-close"
+					<a-close-button @close="closeModal()" class="mb-15" />
-					size="large"
+				</div>
-					class="mb-15"
-				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteMasterTask()" :disabled="isDeleting">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	mixins: [ modalMixin ],
 	emits: ['on-mastertask-deleted'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			mastertask: null,
-			isDeleting: false
+			isDeleting: false,
+			modalName: 'z-delete-master-task-modal',
 		}
 	},
 

app/src/plugins/tm@modal/master-task/z-delete-team-member-modal.vue

@@ -1,9 +1,15 @@
 <template>
-	<v-dialog v-model="visible" max-width="500" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
-        <h1 class="text-h5">
+			<div class="d-flex justify-space-between align-center">
-          Chcete túto osobu odstrániť z tímu?
+				<h1 class="text-h5">
-        </h1>
+					Chcete túto osobu odstrániť z tímu?
+				</h1>
+				<div class="d-flex align-center">
+					<a-reset-size-button @reset="resetModalSize" />
+					<a-close-button @close="closeModal()" />
+				</div>
+			</div>
 		<v-card-text>{{ member.name + ' ' + member.surname }} bude odstránený/á z teamu.</v-card-text>
         <v-card-actions>
           <v-btn
@@ -22,6 +28,7 @@
             Áno
           </v-btn>
         </v-card-actions>
+		<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
       </v-card>
 	</v-dialog>
 </template>
@@ -29,14 +36,24 @@
 <script>
 import tmUtils from '@/plugins/tm@_utils/tm.utils'
 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 {
 	mixins: [ modalMixin ],
+
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			member: null,
-			team: null
+			team: null,
+			modalName: 'z-delete-team-member-modal',
 		}
 	},
 

app/src/plugins/tm@modal/master-task/z-master-task-modal.vue

@@ -1,9 +1,8 @@
 <template>
   <v-dialog
     v-model="visible"
-    max-width="750"
+    :width="modalWidth"
-    max-height="90%"
+    :height="modalHeight"
-    height="700px"
     persistent
   >
     <W-loadable :content="mastertask" class="h-100">
@@ -11,6 +10,7 @@
         v-if="editMode"
         height="100%"
         class="d-flex flex-column scrolling"
+        style="position: relative"
       >
         <div class="d-flex justify-space-between align-center modal-header">
           <h1>
@@ -18,11 +18,10 @@
               mastertask?.id ? 'Upraviť master task' : 'Vytvoriť master task'
             }}
           </h1>
-          <v-icon
+          <div class="d-flex align-center">
-            @click.stop="closeModal()"
+            <a-reset-size-button @reset="resetModalSize" />
-            icon="mdi-close"
+            <a-close-button @close="closeModal()" />
-            size="large"
+          </div>
-          ></v-icon>
         </div>
 
         <v-card-actions class="d-flex flex-column modal-content">
@@ -221,7 +220,7 @@
           </v-btn>
 
           <div
-            class="w-100 modal-input"
+            class="w-100 modal-input quill-editor-wrapper"
             :class="{ error: v$.mastertask.description.$errors.length }"
           >
             <QuillEditor
@@ -248,17 +247,26 @@
         <v-btn class="button primary disabled" v-else disabled>{{
           $t('Ukladám...')
         }}</v-btn>
+        <a-resize-handle
+          @resize="handleModalResize"
+          @resize-end="handleResizeEnd"
+          :current-width="modalWidthPx"
+          :current-height="modalHeightPx"
+        />
       </v-card>
 
-      <v-card v-else height="100%" class="d-flex flex-column scrolling">
+      <v-card
+        v-else
+        height="100%"
+        class="d-flex flex-column scrolling"
+        style="position: relative"
+      >
         <div class="d-flex justify-space-between align-center">
           <p>{{ mastertask.project_code }}</p>
-          <v-icon
+          <div class="d-flex align-center">
-            @click.stop="closeModal()"
+            <a-reset-size-button @reset="resetModalSize" />
-            icon="mdi-close"
+            <a-close-button @close="closeModal()" class="pb-5" />
-            size="large"
+          </div>
-            class="pb-5"
-          ></v-icon>
         </div>
         <div
           class="d-flex justify-space-between align-center modal-header border-bottom pb-4"
@@ -306,6 +314,12 @@
             </div>
           </div>
         </v-card-actions>
+        <a-resize-handle
+          @resize="handleModalResize"
+          @resize-end="handleResizeEnd"
+          :current-width="modalWidthPx"
+          :current-height="modalHeightPx"
+        />
       </v-card>
     </W-loadable>
   </v-dialog>
@@ -331,6 +345,9 @@ import ATasksTable from './_components/a-tasks-table.vue';
 import AMastertaskDescription from './_components/a-mastertask-description.vue';
 import { mapGetters } from 'vuex';
 import AutocompleteMixin from '@/plugins/tm@_mixins/autocomplete.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 {
   // MIXINS
@@ -348,6 +365,9 @@ export default {
     ZFilesUpload,
     // ZAutocomplete,
     QuillEditor,
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
   },
 
   data() {
@@ -362,6 +382,7 @@ export default {
       showAddEmployeeInput: false,
       date: null,
       projectCodeSearch: null,
+      modalName: 'z-master-task-modal',
     };
   },
 
@@ -791,4 +812,22 @@ export default {
 		width: 100% !important
 		height: 100%
 		pointer-events: none
+
+.quill-editor-wrapper
+	:deep(.ql-container)
+		min-height: 200px
+		max-height: 500px
+		overflow-y: auto
+
+	:deep(.ql-editor)
+		min-height: 200px
+		max-height: 500px
+
+// Mobile fullscreen fix - remove padding
+:deep(.v-overlay__content)
+	@media (max-width: 768px)
+		max-height: 100% !important
+		width: 100% !important
+		max-width: 100% !important
+		margin: 0 !important
 </style>

app/src/plugins/tm@modal/task-cell/z-show-menu-modal.vue

@@ -1,9 +1,12 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1>Vytvoriť</h1>
-				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
+				<div class="d-flex align-center">
+					<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">
@@ -14,22 +17,32 @@
 					>BLOCKER</v-btn
 				>
 			</v-card-actions>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	emits: ['update', 'data'],
 	props: ['data'],
 	mixins: [ modalMixin ],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			localData: null,
+			modalName: 'z-show-menu-modal',
 		}
 	},
 

app/src/plugins/tm@modal/task/z-complete-task-modal.vue

@@ -1,6 +1,6 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent>
+  <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-    <v-card>
+    <v-card style="position: relative">
       <div class="d-flex justify-space-between align-center">
         <h1>
           Ste si istý, že chcete
@@ -9,11 +9,10 @@
           <b>{{ subtask?.master_task?.name || subtask.master_task }}</b
           >?
         </h1>
-        <v-icon
+        <div class="d-flex align-center">
-          @click.stop="closeModal()"
+          <a-reset-size-button @reset="resetModalSize" />
-          icon="mdi-close"
+          <a-close-button @close="closeModal()" />
-          size="large"
+        </div>
-        ></v-icon>
       </div>
       <v-card-actions
         class="mt-10 d-flex justify-start align-center mobile-view"
@@ -25,6 +24,7 @@
           >ZRUŠIŤ</v-btn
         >
       </v-card-actions>
+      <a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
     </v-card>
   </v-dialog>
 </template>
@@ -32,15 +32,24 @@
 <script>
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import moment from 'moment';
+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 {
   mixins: [modalMixin],
   emits: ['close', 'on-subtask-edited'],
 
+  components: {
+    AResizeHandle,
+    AResetSizeButton, ACloseButton,
+  },
+
   data() {
     return {
       visible: false,
       subtask: null,
+      modalName: 'z-complete-task-modal',
     };
   },
 

app/src/plugins/tm@modal/task/z-delete-task-modal.vue

@@ -1,36 +1,45 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1>Ste si istý, že chcete zmazať sub task z mastertasku <b>{{ subtask.project_code }}</b>?</h1>
 
-				<v-icon
+				<div class="d-flex align-center">
-					@click.stop="closeModal()"
+					<a-reset-size-button @reset="resetModalSize" />
-					icon="mdi-close"
+					<a-close-button @close="closeModal()" class="mb-15" />
-					size="large"
+				</div>
-					class="mb-15"
-				></v-icon>
 			</div>
 			<v-card-actions class="mt-10 d-flex justify-start align-center mobile-view">
 				<v-btn class="button primary half" variant="flat" @click="deleteTask()" :disabled="isDeleting">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	mixins: [ modalMixin ],
 	emits: ['on-subtask-deleted'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton,
+		ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			subtask: null,
-			isDeleting: false
+			isDeleting: false,
+			modalName: 'z-delete-task-modal',
 		}
 	},
 

app/src/plugins/tm@modal/task/z-delete-timeblock-modal.vue

@@ -1,14 +1,13 @@
 <template>
-  <v-dialog v-model="visible" max-width="500" persistent>
+  <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-    <v-card>
+    <v-card style="position: relative">
       <div class="d-flex justify-space-between align-center">
         <h4 class="mt-3">Vyberte časový úsek, ktorý chcete odstrániť</h4>
 
-        <v-icon
+        <div class="d-flex align-center">
-          @click.stop="closeModal()"
+          <a-reset-size-button @reset="resetModalSize" />
-          icon="mdi-close"
+          <a-close-button @close="closeModal()" />
-          size="large"
+        </div>
-        ></v-icon>
       </div>
       <div
         v-for="(timeblock, index) in subtask.timeblocks"
@@ -33,6 +32,7 @@
           size="medium"
         />
       </div>
+      <a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
     </v-card>
   </v-dialog>
 </template>
@@ -41,17 +41,26 @@
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+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 {
   mixins: [modalMixin],
   emits: ['on-subtask-edited'],
 
+  components: {
+    AResizeHandle,
+    AResetSizeButton, ACloseButton,
+  },
+
   data() {
     return {
       visible: false,
       subtask: null,
       isDeleting: false,
       tmUtils,
+      modalName: 'z-delete-timeblock-modal',
     };
   },
 

app/src/plugins/tm@modal/task/z-task-add-time-modal.vue

@@ -1,14 +1,13 @@
 <template>
-  <v-dialog max-width="750" v-model="visible" persistent>
+  <v-dialog :width="modalWidth" :height="modalHeight" v-model="visible" persistent>
-    <v-card>
+    <v-card style="position: relative">
       <div class="d-flex justify-space-between align-center">
         <h1>Pridať odpracovaný čas</h1>
 
-        <v-icon
+        <div class="d-flex align-center">
-          @click.stop="closeModal()"
+          <a-reset-size-button @reset="resetModalSize" />
-          icon="mdi-close"
+          <a-close-button @close="closeModal()" />
-          size="large"
+        </div>
-        ></v-icon>
       </div>
       <v-card-actions class="mt-10 d-flex justify-start align-center">
         <v-text-field
@@ -27,6 +26,7 @@
         />
       </v-card-actions>
       <v-btn @click="submit()" class="button primary mt-5">Potvrdiť</v-btn>
+      <a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
     </v-card>
   </v-dialog>
 </template>
@@ -38,11 +38,20 @@ import { required, numeric, minValue } from '@vuelidate/validators';
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+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 {
   mixins: [modalMixin],
   emits: ['close', 'on-subtask-edited'],
 
+  components: {
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
+  },
+
   data() {
     return {
       v$: useVuelidate(),
@@ -52,6 +61,7 @@ export default {
       form: {
         hours: null,
       },
+      modalName: 'z-task-add-time-modal',
     };
   },
 

app/src/plugins/tm@modal/task/z-task-modal.vue

@@ -1,9 +1,8 @@
 <template>
   <v-dialog
     v-model="visible"
-    max-width="750"
+    :width="modalWidth"
-    max-height="90%"
+    :height="modalHeight"
-    height="700px"
     persistent
   >
     <W-loadable :content="subtask" class="h-100">
@@ -11,14 +10,14 @@
         v-if="editMode"
         height="100%"
         class="d-flex flex-column scrolling"
+        style="position: relative"
       >
         <div class="d-flex justify-space-between align-center modal-header">
           <h1>{{ subtask?.id ? 'Upraviť sub task' : 'Vytvoriť sub task' }}</h1>
-          <v-icon
+          <div class="d-flex align-center">
-            @click.stop="closeModal()"
+            <a-reset-size-button @reset="resetModalSize" />
-            icon="mdi-close"
+            <a-close-button @close="closeModal()" />
-            size="large"
+          </div>
-          ></v-icon>
         </div>
 
         <v-card-actions class="d-flex flex-column modal-content">
@@ -254,7 +253,7 @@
             </div>
           </div>
 
-          <div class="w-100 modal-input">
+          <div class="w-100 modal-input quill-editor-wrapper">
             <QuillEditor
               ref="description"
               v-model="subtask.description"
@@ -279,21 +278,20 @@
         <v-btn class="button primary disabled" v-else disabled>{{
           $t('Ukladám...')
         }}</v-btn>
+        <a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
       </v-card>
 
-      <v-card v-else height="100%" class="d-flex flex-column scrolling">
+      <v-card v-else height="100%" class="d-flex flex-column scrolling" style="position: relative">
         <div class="d-flex justify-space-between align-center">
           <div>
             <p>{{ subtask._master_task.project_code }}</p>
             <h1>{{ subtask._master_task.name }}</h1>
           </div>
 
-          <v-icon
+          <div class="d-flex align-center">
-            @click.stop="closeModal()"
+            <a-reset-size-button @reset="resetModalSize" />
-            icon="mdi-close"
+            <a-close-button @close="closeModal()" class="pb-5" />
-            size="large"
+          </div>
-            class="pb-5"
-          ></v-icon>
         </div>
         <div
           class="d-flex justify-space-between align-center modal-header border-bottom pb-4"
@@ -342,6 +340,7 @@
             </div>
           </div>
         </v-card-actions>
+        <a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
       </v-card>
     </W-loadable>
   </v-dialog>
@@ -366,6 +365,9 @@ import ZTaskReadonlyInfo from './_components/z-task-readonly-info.vue';
 import ATimeblock from './_components/a-timeblock.vue';
 import { mapGetters } from 'vuex';
 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 {
   emits: ['close', 'refresh'],
@@ -378,6 +380,9 @@ export default {
     Datepicker,
     // ATaskTimeblocks,
     QuillEditor,
+    AResizeHandle,
+    AResetSizeButton,
+    ACloseButton,
   },
 
   data() {
@@ -400,6 +405,7 @@ export default {
         },
       ],
       wasFormValidationTriggered: false,
+      modalName: 'z-task-modal',
     };
   },
 
@@ -1074,4 +1080,22 @@ export default {
 	.datepicker-input
 		width: 100% !important
 		pointer-events: none
+
+.quill-editor-wrapper
+	:deep(.ql-container)
+		min-height: 200px
+		max-height: 500px
+		overflow-y: auto
+
+	:deep(.ql-editor)
+		min-height: 200px
+		max-height: 500px
+
+// Mobile fullscreen fix - remove padding
+:deep(.v-overlay__content)
+	@media (max-width: 768px)
+		max-height: 100% !important
+		width: 100% !important
+		max-width: 100% !important
+		margin: 0 !important
 </style>

app/src/plugins/tm@modal/task/z-unable-to-complete-task-modal.vue

@@ -1,14 +1,13 @@
 <template>
-  <v-dialog v-model="visible" max-width="750" persistent>
+  <v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-    <v-card>
+    <v-card style="position: relative">
       <div class="d-flex justify-space-between align-center">
         <h1>Sub Task má nedokončené úlohy</h1>
 
-        <v-icon
+        <div class="d-flex align-center">
-          @click.stop="closeModal()"
+          <a-reset-size-button @reset="resetModalSize" />
-          icon="mdi-close"
+          <a-close-button @close="closeModal()" />
-          size="large"
+        </div>
-        ></v-icon>
       </div>
 
       <div class="card-content">
@@ -46,6 +45,7 @@
           >Uzatvoriť všetky</v-btn
         >
       </div>
+      <a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
     </v-card>
   </v-dialog>
 </template>
@@ -54,11 +54,19 @@
 import modalMixin from '@/plugins/tm@modal/_mixins/modal.mixin';
 import tmUtils from '@/plugins/tm@_utils/tm.utils';
 import moment from 'moment';
+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 {
   mixins: [modalMixin],
   emits: ['close', 'on-subtask-edited'],
 
+  components: {
+    AResizeHandle,
+    AResetSizeButton, ACloseButton,
+  },
+
   props: {
     mode: {
       type: String,
@@ -73,6 +81,7 @@ export default {
       subtask: null,
       loadingTimeblocks: {},
       loadingCloseAll: false,
+      modalName: 'z-unable-to-complete-task-modal',
     };
   },
 

app/src/plugins/tm@modal/task/z-unable-to-edit-office-task-modal.vue

@@ -1,27 +1,35 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1 v-if="mode === 'edit'">Sub Task zosynchronizovaný z Office365 sa nedá upravovat. Upravte ho vo svojom kalendári a pockajte na zosynchronizovanie s Task Managerom</h1>
 				<h1 v-else-if="mode === 'delete'">Sub Task zosynchronizovaný z Office365 sa nedá zmazať. Zmažte ho vo svojom kalendári a pockajte na zosynchronizovanie s Task Managerom</h1>
 
-				<v-icon
+				<div class="d-flex align-center">
-					@click.stop="closeModal()"
+					<a-reset-size-button @reset="resetModalSize" />
-					icon="mdi-close"
+					<a-close-button @close="closeModal()" />
-					size="large"
+				</div>
-				></v-icon>
 			</div>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	mixins: [ modalMixin ],
 	emits: ['close', 'on-subtask-edited'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	props: {
 		mode: {
 			type: String,
@@ -32,7 +40,8 @@ export default {
 	data() {
 		return {
 			visible: false,
-			subtask: null
+			subtask: null,
+			modalName: 'z-unable-to-edit-office-task-modal',
 		}
 	},
 

app/src/plugins/tm@modal/team/z-delete-team-modal.vue

@@ -1,33 +1,46 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
-		<v-card>
+		<v-card style="position: relative">
 			<div class="d-flex justify-space-between align-center">
 				<h1>
 					Ste si istý, že chcete zmazať tím <b>{{ team.name }}</b>?
 				</h1>
-				<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
+				<div class="d-flex align-center">
+					<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" variant="flat" @click="deleteTeam()" :disabled="isDeleting">ÁNO</v-btn>
 				<v-btn class="button primary half outline" @click.stop="closeModal()">ZRUŠIŤ</v-btn>
 			</v-card-actions>
+			<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 		</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'
 
 export default {
 	mixins: [ modalMixin ],
 	emits: ['update'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton, ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			team: null,
-			isDeleting: false
+			isDeleting: false,
+			modalName: 'z-delete-team-modal',
 		}
 	},
 

app/src/plugins/tm@modal/team/z-team-modal.vue

@@ -1,10 +1,13 @@
 <template>
-	<v-dialog v-model="visible" max-width="750" max-height="90%" height="700px" persistent>
+	<v-dialog v-model="visible" :width="modalWidth" :height="modalHeight" persistent>
 		<W-loadable :content="team" class="h-100">
-			<v-card height="100%" class="d-flex flex-column">
+			<v-card height="100%" class="d-flex flex-column" style="position: relative">
 				<div class="d-flex justify-space-between align-center modal-header">
 					<h1>{{ team.id ? 'Upraviť tím' : 'Vytvoriť tím' }}</h1>
-					<v-icon @click.stop="closeModal()" icon="mdi-close" size="large"></v-icon>
+					<div class="d-flex align-center">
+						<a-reset-size-button @reset="resetModalSize" />
+						<a-close-button @close="closeModal()" />
+					</div>
 				</div>
 
 				<v-card-actions class="d-flex flex-column modal-content">
@@ -31,6 +34,7 @@
 				</v-card-actions>
 
 				<v-btn class="button primary block" @click="save()">{{ team.id ? 'UPRAVIŤ' : 'VYTVORIŤ' }}</v-btn>
+				<a-resize-handle @resize="handleModalResize" @resize-end="handleResizeEnd" :current-width="modalWidthPx" :current-height="modalHeightPx" />
 			</v-card>
 		</W-loadable>
 	</v-dialog>
@@ -44,6 +48,9 @@ import tmUtils 				from '@/plugins/tm@_utils/tm.utils'
 import { mapGetters } 		from 'vuex'
 import AutocompleteMixin 	from '@/plugins/tm@_mixins/autocomplete.mixin'
 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'
 
 const atLeastOne = (value) => value.length
 
@@ -51,13 +58,20 @@ export default {
 	mixins: [AutocompleteMixin, modalMixin],
 	emits: ['close', 'update'],
 
+	components: {
+		AResizeHandle,
+		AResetSizeButton,
+		ACloseButton,
+	},
+
 	data() {
 		return {
 			visible: false,
 			v$: useVuelidate(),
 			errorUtils,
 			employeeSelect: null,
-			team: null
+			team: null,
+			modalName: 'z-team-modal',
 		}
 	},