Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Migrate NcModal to NcDialog #1239

Merged
merged 1 commit into from
Aug 29, 2024
Merged

Migrate NcModal to NcDialog #1239

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion css/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
}

.modal__content {
padding: 20px;
padding: 0 0 20px 20px;
}

.modal__content h2 {
Expand Down
7 changes: 5 additions & 2 deletions cypress/e2e/column-selection-multi.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,11 @@ 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-container__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')
cy.get('.modal__content .title').click() // focus out of the multiselect
cy.get('button').contains('Save').click()
cy.get('.custom-table table tr td div').contains('first option').should('be.visible')
cy.get('.custom-table table tr td div').contains('second option').should('be.visible')
Expand All @@ -44,6 +45,7 @@ describe('Test column ' + columnTitle, () => {
cy.get('.vs--multiple .vs__selected button').first().click()
cy.get('.modal__content .slot input').first().click()
cy.get('ul.vs__dropdown-menu li span[title="👋 third option"]').click()
cy.get('.modal__content .title').click() // focus out of the multiselect
cy.get('button').contains('Save').click()
cy.get('.custom-table table tr td div').contains('third option').should('be.visible')

Expand All @@ -58,6 +60,7 @@ describe('Test column ' + columnTitle, () => {
cy.get('.NcTable tr td button').first().click()
cy.get('.modal__content .slot input').first().click()
cy.get('ul.vs__dropdown-menu li span[title="first option"]').click()
cy.get('.modal__content .title').click() // focus out of the multiselect
cy.get('button').contains('Save').click()
cy.get('.custom-table table tr td div').contains('first option').should('be.visible')
cy.get('.custom-table table tr td div').contains('third option').should('be.visible')
Expand All @@ -76,7 +79,7 @@ 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-container__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')
Expand Down
4 changes: 2 additions & 2 deletions cypress/e2e/column-selection.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ 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-container__content h2').contains('Create row').should('be.visible')
cy.get('.modal__content .title').contains(columnTitle).should('be.visible')
cy.get('.modal__content .title').click()
cy.get('.vs__dropdown-toggle .vs__selected span[title="second option"]').should('exist')
Expand Down Expand Up @@ -71,7 +71,7 @@ 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-container__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')
Expand Down
2 changes: 1 addition & 1 deletion cypress/e2e/column-text-line.cy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ describe('Test column text line', () => {

// 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-container__content h2').contains('Create row').should('be.visible')
cy.get('.modal__content .title').contains('text line').should('be.visible')
cy.get('.modal__content input').first().should('be.visible')
cy.get('.modal__content input').first().clear().type('hello world')
Expand Down
3 changes: 2 additions & 1 deletion cypress/support/e2e.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,5 +20,6 @@
import './commands.js'

Cypress.on('uncaught:exception', (err) => {
return !err.message.includes('ResizeObserver loop limit exceeded')
return !err.message.includes('ResizeObserver loop limit exceeded') &&
!err.message.includes('ResizeObserver loop completed with undelivered notifications')
})
15 changes: 7 additions & 8 deletions src/modules/modals/CreateColumn.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcModal v-if="showModal" size="large" @close="actionCancel">
<NcDialog v-if="showModal"
:name="t('tables', 'Create column')"
size="large"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could we also pass the buttons to the actions slot? That should make them sticky at the bottom of the modal so they are not hidden behind scroll bars

@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"
Expand Down Expand Up @@ -88,7 +87,7 @@
</div>
</div>
</div>
</NcModal>
</NcDialog>
</template>

<script>
Expand All @@ -103,7 +102,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'
Expand All @@ -117,7 +116,7 @@ export default {
name: 'CreateColumn',
components: {
ColumnTypeSelection,
NcModal,
NcDialog,
NumberForm,
TextLineForm,
TextLinkForm,
Expand Down
17 changes: 8 additions & 9 deletions src/modules/modals/CreateContext.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,12 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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') }}
Expand Down Expand Up @@ -51,11 +50,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/style.css'
import NcContextResource from '../../shared/components/ncContextResource/NcContextResource.vue'
Expand All @@ -66,7 +65,7 @@ import permissionBitmask from '../../shared/components/ncContextResource/mixins/
export default {
name: 'CreateContext',
components: {
NcModal,
NcDialog,
NcIconPicker,
NcButton,
NcIconSvgWrapper,
Expand Down
18 changes: 7 additions & 11 deletions src/modules/modals/CreateRow.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,15 +3,11 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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"
Expand All @@ -34,11 +30,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/style.css'
import ColumnFormComponent from '../main/partials/ColumnFormComponent.vue'
Expand All @@ -48,7 +44,7 @@ import rowHelper from '../../shared/components/ncTable/mixins/rowHelper.js'
export default {
name: 'CreateRow',
components: {
NcModal,
NcDialog,
ColumnFormComponent,
NcCheckboxRadioSwitch,
NcNoteCard,
Expand Down
22 changes: 10 additions & 12 deletions src/modules/modals/CreateTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,20 +3,18 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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')"
Expand Down Expand Up @@ -82,11 +80,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/style.css'
import axios from '@nextcloud/axios'
Expand All @@ -100,7 +98,7 @@ import { mapState } from 'vuex'
export default {
name: 'CreateTable',
components: {
NcModal,
NcDialog,
NcEmojiPicker,
NcButton,
NcTile,
Expand Down
37 changes: 22 additions & 15 deletions src/modules/modals/EditColumn.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,11 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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"
Expand All @@ -26,15 +21,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') }}
Expand All @@ -46,11 +41,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/style.css'
import ColumnInfoPopover from '../main/partials/ColumnInfoPopover.vue'
Expand Down Expand Up @@ -89,7 +84,7 @@ export default {
MainForm,
SelectionForm,
SelectionMultiForm,
NcModal,
NcDialog,
NcActions,
NcActionButton,
ColumnInfoPopover,
Expand Down Expand Up @@ -222,12 +217,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>
17 changes: 8 additions & 9 deletions src/modules/modals/EditContext.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,13 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<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>
Expand Down Expand Up @@ -59,11 +58,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/style.css'
Expand All @@ -79,7 +78,7 @@ import permissionsMixin from '../../shared/components/ncTable/mixins/permissions
export default {
name: 'EditContext',
components: {
NcModal,
NcDialog,
NcButton,
NcIconPicker,
NcIconSvgWrapper,
Expand Down
Loading
Loading