Merge pull request #13031 from nextcloud/fix/12997/modal-headers-styling

fix(style): apply NcDialog header styles to NcModal headers
nextcloud · Aug 19, 2024 · 83ec165 · 83ec165
2 parents 98d64ed + e4113b1
commit 83ec165
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 16 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -786,8 +786,15 @@ body .modal-wrapper * {
 	box-sizing: border-box;
 }
 
-.modal-wrapper h2 {
-	margin-top: 0;
+/* FIXME: Align styles of NcModal header with NcDialog header. Remove if all are migrated */
+.modal-wrapper h2.nc-dialog-alike-header {
+	font-size: 21px;
+	text-align: center;
+	height: fit-content;
+	min-height: var(--default-clickable-area);
+	line-height: var(--default-clickable-area);
+	overflow-wrap: break-word;
+	margin-block: 0 12px;
 }
 </style>
 

diff --git a/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue b/src/components/BreakoutRoomsEditor/BreakoutRoomsEditor.vue
@@ -10,7 +10,7 @@
 		v-on="$listeners">
 		<div class="breakout-rooms-editor"
 			:class="{'breakout-rooms-editor__participants-step': isEditingParticipants}">
-			<h2 :id="dialogHeaderId">
+			<h2 :id="dialogHeaderId" class="nc-dialog-alike-header">
 				{{ modalTitle }}
 			</h2>
 			<template v-if="!isEditingParticipants">
@@ -171,9 +171,8 @@ export default {
 	flex-direction: column;
 	padding: 20px;
 	justify-content: flex-start;
-	align-items: flex-start;
 
-	&__number-input{
+	&__number-input {
 		display: block;
 		margin-bottom: calc(var(--default-grid-baseline)*4);
 	}
@@ -191,11 +190,11 @@ export default {
 
 	&__participants-step {
 		height: 100%;
-
 	}
 
 	&__main {
 		height: 100%;
+		align-self: flex-start;
 	}
 
 	&__buttons {

diff --git a/src/components/GuestWelcomeWindow.vue b/src/components/GuestWelcomeWindow.vue
@@ -12,7 +12,7 @@
 		<div class="modal__content">
 			<div class="conversation-information">
 				<ConversationIcon :item="conversation" hide-user-status />
-				<h2 :id="dialogHeaderId">
+				<h2 :id="dialogHeaderId" class="nc-dialog-alike-header">
 					{{ conversationDisplayName }}
 				</h2>
 			</div>

diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
@@ -9,7 +9,7 @@
 		:label-id="dialogHeaderId"
 		@close="closeModal">
 		<div class="media-settings">
-			<h2 :id="dialogHeaderId" class="media-settings__title">
+			<h2 :id="dialogHeaderId" class="media-settings__title nc-dialog-alike-header">
 				{{ t('spreed', 'Media settings') }}
 			</h2>
 			<!-- Preview -->
@@ -682,10 +682,6 @@ export default {
 	padding: calc(var(--default-grid-baseline) * 5);
 	padding-bottom: 0;
 
-	&__title {
-		text-align: center;
-	}
-
 	&__preview {
 		position: relative;
 		margin: 0 auto calc(var(--default-grid-baseline) * 4);

diff --git a/src/components/NewConversationDialog/NewConversationDialog.vue b/src/components/NewConversationDialog/NewConversationDialog.vue
@@ -12,7 +12,7 @@
 			:container="container"
 			:label-id="dialogHeaderPrepId"
 			@close="closeModal">
-			<h2 :id="dialogHeaderPrepId" class="new-group-conversation__header">
+			<h2 :id="dialogHeaderPrepId" class="new-group-conversation__header nc-dialog-alike-header">
 				{{ t('spreed', 'Create a new group conversation') }}
 			</h2>
 
@@ -381,8 +381,8 @@ export default {
 .new-group-conversation {
 	&__header {
 		flex-shrink: 0;
-		margin: 0;
-		padding: 10px 20px;
+		padding-top: calc(3 * var(--default-grid-baseline));
+		padding-inline: var(--default-clickable-area);
 	}
 
 	&__main {

diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
@@ -94,7 +94,7 @@
 			:label-id="dialogHeaderId"
 			@close="closeParticipantsEditor">
 			<div class="breakout-rooms-actions__editor">
-				<h2 :id="dialogHeaderId">
+				<h2 :id="dialogHeaderId" class="nc-dialog-alike-header">
 					{{ manageBreakoutRoomsTitle }}
 				</h2>
 				<BreakoutRoomsParticipantsEditor :token="mainToken"