modal optional expand to full size button - used for qr window; added missing phrase editEntschuldigung;

public/js/components/Bootstrap/Modal.js

@@ -3,7 +3,8 @@
 export default {
 	name: 'BootstrapModal',
 	data: () => ({
-		modal: null
+		modal: null,
+		fullscreen: false
 	}),
 	props: {
 		backdrop: {
@@ -26,6 +27,10 @@ export default {
 		bodyClass: {
 			type: [String,Array,Object],
 			default: 'px-4 py-5'
+		},
+		allowFullscreenExpand: {
+			type: Boolean,
+			default: false
 		}
 	},
 	emits: [
@@ -50,6 +55,9 @@ export default {
 		},
 		toggle() {
 			return this.modal.toggle();
+		},
+		toggleFullscreen() {
+			this.fullscreen = !this.fullscreen
 		}
 	},
 	mounted() {
@@ -115,12 +123,20 @@ export default {
 		});
 	},
 	template: `<div ref="modal" class="bootstrap-modal modal" tabindex="-1" @[\`hide.bs.modal\`]="$emit('hideBsModal')" @[\`hidden.bs.modal\`]="$emit('hiddenBsModal')" @[\`hidePrevented.bs.modal\`]="$emit('hidePreventedBsModal')" @[\`show.bs.modal\`]="$emit('showBsModal')" >
-		<div class="modal-dialog" :class="dialogClass">
+		<div class="modal-dialog" :class="fullscreen ? 'modal-fullscreen' : dialogClass">
 			<div class="modal-content">
-				<div v-if="$slots.title" class="modal-header">
+				<div v-if="$slots.title" class="modal-header d-flex align-items-center">
 					<h5 class="modal-title"><slot name="title"/></h5>
-					<slot name="popoutButton"></slot>
-					<button v-if="!noCloseBtn" type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+					<div class="d-flex align-items-center ms-auto">
+						<slot name="popoutButton"></slot>
+					
+						<button type="button" class="btn ms-2" v-if="allowFullscreenExpand" @click="toggleFullscreen">
+						  <i v-if="!fullscreen" class="fa-solid fa-expand"></i>
+						  <i v-else class="fa-solid fa-compress"></i>
+						</button>
+					
+						<button v-if="!noCloseBtn" type="button" class="btn-close ms-2" data-bs-dismiss="modal" aria-label="Close"></button>
+					  </div>
 				</div>
 				<div class="modal-body" :class="bodyClass">
 					<slot></slot>