Migrate NcModal to NcDialog

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>
nextcloud · Aug 2, 2024 · 873fd22 · 873fd22
1 parent 7285e26
commit 873fd22
Show file tree

Hide file tree

Showing 14 changed files with 103 additions and 129 deletions.
diff --git a/css/modal.css b/css/modal.css
@@ -3,7 +3,7 @@
 }
 
 .modal__content {
-	padding: 20px;
+	padding: 0 0 20px 20px;
 }
 
 .modal__content h2 {

diff --git a/cypress/e2e/column-selection-multi.cy.js b/cypress/e2e/column-selection-multi.cy.js
@@ -26,7 +26,6 @@ describe('Test column ' + columnTitle, () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
 		cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
 		cy.get('.modal__content span[title="first option"]').should('be.visible')
 		cy.get('.modal__content span[title="second option"]').should('be.visible')
@@ -72,7 +71,6 @@ describe('Test column ' + columnTitle, () => {
 
 		// check if default value is set on row creation
 		cy.get('button').contains('Create row').click()
-		cy.get('.modal__content h2').contains('Create row').should('be.visible')
 		cy.get('button').contains('Save').click()
 		cy.get('.custom-table table tr td div').should('exist')
 		cy.get('.NcTable tr td button').should('exist')

diff --git a/src/modules/modals/CreateColumn.vue b/src/modules/modals/CreateColumn.vue
@@ -1,11 +1,10 @@
 <template>
-	<NcModal v-if="showModal" size="large" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create column')"
+		size="large"
+		@closing="actionCancel">
 		<div class="modal__content create-column">
 			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Create column') }}</h2>
-				</div>
-
 				<div class="fix-col-2">
 					<MainForm :description.sync="column.description"
 						:mandatory.sync="column.mandatory"
@@ -84,7 +83,7 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
@@ -99,7 +98,7 @@ import MainForm from '../../shared/components/ncTable/partials/columnTypePartial
 import DatetimeForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/DatetimeForm.vue'
 import DatetimeDateForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/DatetimeDateForm.vue'
 import DatetimeTimeForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/DatetimeTimeForm.vue'
-import { NcModal, NcCheckboxRadioSwitch } from '@nextcloud/vue'
+import { NcDialog, NcCheckboxRadioSwitch } from '@nextcloud/vue'
 import SelectionForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/SelectionForm.vue'
 import SelectionMultiForm from '../../shared/components/ncTable/partials/columnTypePartials/forms/SelectionMultiForm.vue'
 import { showError, showInfo, showSuccess, showWarning } from '@nextcloud/dialogs'
@@ -113,7 +112,7 @@ export default {
 	name: 'CreateColumn',
 	components: {
 		ColumnTypeSelection,
-		NcModal,
+		NcDialog,
 		NumberForm,
 		TextLineForm,
 		TextLinkForm,

diff --git a/src/modules/modals/CreateContext.vue b/src/modules/modals/CreateContext.vue
@@ -1,11 +1,10 @@
 <template>
-	<NcModal v-if="showModal" size="normal" data-cy="createContextModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create an application')"
+		size="normal"
+		data-cy="createContextModal"
+		@closing="actionCancel">
 		<div class="modal__content">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Create an application') }}</h2>
-				</div>
-			</div>
 			<div class="row space-T">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
@@ -47,11 +46,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
@@ -62,7 +61,7 @@ import permissionBitmask from '../../shared/components/ncContextResource/mixins/
 export default {
 	name: 'CreateContext',
 	components: {
-		NcModal,
+		NcDialog,
 		NcIconPicker,
 		NcButton,
 		NcIconSvgWrapper,

diff --git a/src/modules/modals/CreateRow.vue b/src/modules/modals/CreateRow.vue
@@ -1,13 +1,9 @@
 <template>
-	<NcModal v-if="showModal" data-cy="createRowModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create row')"
+		data-cy="createRowModal"
+		@closing="actionCancel">
 		<div class="modal__content" @keydown="onKeydown">
-			<div class="row">
-				<div class="col-4">
-					<h2 style="padding: 0" tabindex="0">
-						{{ t('tables', 'Create row') }}
-					</h2>
-				</div>
-			</div>
 			<div v-for="column in nonMetaColumns" :key="column.id" :data-cy="column.title">
 				<ColumnFormComponent
 					:column="column"
@@ -30,11 +26,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcCheckboxRadioSwitch, NcNoteCard, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcCheckboxRadioSwitch, NcNoteCard, NcButton } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
@@ -43,7 +39,7 @@ import { translate as t } from '@nextcloud/l10n'
 export default {
 	name: 'CreateRow',
 	components: {
-		NcModal,
+		NcDialog,
 		ColumnFormComponent,
 		NcCheckboxRadioSwitch,
 		NcNoteCard,

diff --git a/src/modules/modals/CreateTable.vue b/src/modules/modals/CreateTable.vue
@@ -1,18 +1,16 @@
 <template>
-	<NcModal v-if="showModal" size="normal"
-		data-cy="createTableModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Create table')"
+		data-cy="createTableModal"
+		size="normal"
+		@closing="actionCancel">
 		<div class="modal__content">
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Create table') }}</h2>
-				</div>
-			</div>
-			<div class="row">
+			<div class="row space-T">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
 				</div>
 				<div class="col-4 content-emoji">
-					<NcEmojiPicker :close-on-select="true" @select="setIcon">
+					<NcEmojiPicker class="content--emoji" :close-on-select="true" @select="setIcon">
 						<NcButton type="tertiary"
 							:aria-label="t('tables', 'Select emoji for table')"
 							:title="t('tables', 'Select emoji')"
@@ -78,11 +76,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcEmojiPicker, NcButton } from '@nextcloud/vue'
+import { NcDialog, NcEmojiPicker, NcButton } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import axios from '@nextcloud/axios'
@@ -96,7 +94,7 @@ import { mapState } from 'vuex'
 export default {
 	name: 'CreateTable',
 	components: {
-		NcModal,
+		NcDialog,
 		NcEmojiPicker,
 		NcButton,
 		NcTile,

diff --git a/src/modules/modals/EditColumn.vue b/src/modules/modals/EditColumn.vue
@@ -1,14 +1,9 @@
 <template>
-	<NcModal size="large" @close="actionCancel">
+	<NcDialog size="large"
+		:name="t('tables', 'Edit column')"
+		@closing="actionCancel">
 		<div class="modal__content">
 			<div v-if="loading" class="icon-loading" />
-
-			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Edit column') }}</h2>
-				</div>
-			</div>
-
 			<div class="row space-L">
 				<div class="col-2">
 					<MainForm :description.sync="editColumn.description"
@@ -22,15 +17,15 @@
 				</div>
 			</div>
 			<div class="buttons">
-				<div class="flex">
+				<div class="edit-info">
 					<ColumnInfoPopover :column="column" />&nbsp;
 					<div class="last-edit-info">
 						{{ t('tables', 'Last edit') + ': ' }}
 						{{ updateTime }}&nbsp;
-						<NcUserBubble :user="column.lastEditBy" :display-name="column.lastEditByDisplayName ? column.lastEditByDisplayName : column.lastEditBy" />
+						<NcUserBubble class="last-edit-info-bubble" :user="column.lastEditBy" :display-name="column.lastEditByDisplayName ? column.lastEditByDisplayName : column.lastEditBy" />
 					</div>
 				</div>
-				<div class="flex">
+				<div class="right-additional-button">
 					<div class="button-padding-right">
 						<NcButton type="secondary" :aria-label="t('tables', 'Cancel')" @click="actionCancel">
 							{{ t('tables', 'Cancel') }}
@@ -42,11 +37,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcActions, NcActionButton, NcButton, NcUserBubble } from '@nextcloud/vue'
+import { NcDialog, NcActions, NcActionButton, NcButton, NcUserBubble } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/dist/index.css'
 import ColumnInfoPopover from '../main/partials/ColumnInfoPopover.vue'
@@ -85,7 +80,7 @@ export default {
 		MainForm,
 		SelectionForm,
 		SelectionMultiForm,
-		NcModal,
+		NcDialog,
 		NcActions,
 		NcActionButton,
 		ColumnInfoPopover,
@@ -218,12 +213,24 @@ export default {
 .last-edit-info {
 	display: flex;
 	align-items: center;
+	flex-wrap: wrap;
 }
 
 .buttons :deep(.user-bubble__wrapper) {
 	padding-top: 5px;
 }
 
-.flex { display: flex }
+.edit-info {
+	display: flex;
+}
+
+.right-additional-button {
+	display: flex;
+	align-items: center;
+}
+
+.last-edit-info-bubble {
+	display: flex!important;
+}
 
 </style>
diff --git a/src/modules/modals/EditContext.vue b/src/modules/modals/EditContext.vue
@@ -1,12 +1,11 @@
 <template>
-	<NcModal v-if="showModal" size="normal" data-cy="editContextModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		:name="t('tables', 'Edit application')"
+		size="normal"
+		data-cy="editContextModal"
+		@closing="actionCancel">
 		<div class="modal__content" data-cy="editContextModal">
 			<div class="row">
-				<div class="col-4">
-					<h2>{{ t('tables', 'Edit application') }}</h2>
-				</div>
-			</div>
-			<div class="row space-T">
 				<div class="col-4 mandatory">
 					{{ t('tables', 'Title') }}
 				</div>
@@ -55,11 +54,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcIconSvgWrapper } from '@nextcloud/vue'
 import { showError, showSuccess } from '@nextcloud/dialogs'
 import { getCurrentUser } from '@nextcloud/auth'
 import '@nextcloud/dialogs/dist/index.css'
@@ -75,7 +74,7 @@ import permissionsMixin from '../../shared/components/ncTable/mixins/permissions
 export default {
 	name: 'EditContext',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		NcIconPicker,
 		NcIconSvgWrapper,

diff --git a/src/modules/modals/EditRow.vue b/src/modules/modals/EditRow.vue
@@ -1,13 +1,9 @@
 <template>
-	<NcModal v-if="showModal" data-cy="editRowModal" @close="actionCancel">
+	<NcDialog v-if="showModal"
+		data-cy="editRowModal"
+		:name="t('tables', 'Edit row')"
+		@closing="actionCancel">
 		<div class="modal__content" @keydown="onKeydown">
-			<div class="row">
-				<div class="col-4">
-					<h2 tabindex="0">
-						{{ t('tables', 'Edit row') }}
-					</h2>
-				</div>
-			</div>
 			<div v-for="column in nonMetaColumns" :key="column.id">
 				<ColumnFormComponent
 					:column="column"
@@ -42,11 +38,11 @@
 				</div>
 			</div>
 		</div>
-	</NcModal>
+	</NcDialog>
 </template>
 
 <script>
-import { NcModal, NcButton, NcNoteCard } from '@nextcloud/vue'
+import { NcDialog, NcButton, NcNoteCard } from '@nextcloud/vue'
 import { showError } from '@nextcloud/dialogs'
 import { translate as t } from '@nextcloud/l10n'
 import '@nextcloud/dialogs/dist/index.css'
@@ -56,7 +52,7 @@ import permissionsMixin from '../../shared/components/ncTable/mixins/permissions
 export default {
 	name: 'EditRow',
 	components: {
-		NcModal,
+		NcDialog,
 		NcButton,
 		ColumnFormComponent,
 		NcNoteCard,