Skip to content

Commit 7918a38

Browse files
luka-nextcloudluka-nextcloud
authored
Merge pull request #7441 from theoholl/keep-input-dialogs-in-position
Keep input dialogs in position
2 parents b1e6aca + 11213e6 commit 7918a38

2 files changed

Lines changed: 181 additions & 177 deletions

File tree

‎src/components/navigation/AppNavigationAddBoard.vue‎

Lines changed: 36 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -3,40 +3,42 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55
<template>
6-
<NcAppNavigationItem v-if="!editing"
7-
:name="t('deck', 'Add board')"
8-
icon="icon-add"
9-
@click.prevent.stop="startCreateBoard" />
10-
<div v-else class="board-create">
11-
<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
12-
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
13-
</NcColorPicker>
14-
<form @submit.prevent.stop="createBoard">
15-
<NcTextField ref="inputField"
16-
:disable="loading"
17-
:value.sync="value"
18-
:placeholder="t('deck', 'Board name')"
19-
type="text"
20-
required />
21-
<NcButton type="tertiary"
22-
:disabled="loading"
23-
:title="t('deck', 'Cancel edit')"
24-
@click.stop.prevent="cancelEdit">
25-
<template #icon>
26-
<CloseIcon :size="20" />
27-
</template>
28-
</NcButton>
29-
<NcButton type="tertiary"
30-
native-type="submit"
31-
:disabled="loading"
32-
:title="t('deck', 'Save board')">
33-
<template #icon>
34-
<CheckIcon v-if="!loading" :size="20" />
35-
<NcLoadingIcon v-else :size="20" />
36-
</template>
37-
</NcButton>
38-
</form>
39-
</div>
6+
<span>
7+
<NcAppNavigationItem v-if="!editing"
8+
:name="t('deck', 'Add board')"
9+
icon="icon-add"
10+
@click.prevent.stop="startCreateBoard" />
11+
<div v-else class="board-create">
12+
<NcColorPicker v-model="color" class="app-navigation-entry-bullet-wrapper" :disabled="loading">
13+
<div :style="{ backgroundColor: color }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
14+
</NcColorPicker>
15+
<form @submit.prevent.stop="createBoard">
16+
<NcTextField ref="inputField"
17+
:disable="loading"
18+
:value.sync="value"
19+
:placeholder="t('deck', 'Board name')"
20+
type="text"
21+
required />
22+
<NcButton type="tertiary"
23+
:disabled="loading"
24+
:title="t('deck', 'Cancel edit')"
25+
@click.stop.prevent="cancelEdit">
26+
<template #icon>
27+
<CloseIcon :size="20" />
28+
</template>
29+
</NcButton>
30+
<NcButton type="tertiary"
31+
native-type="submit"
32+
:disabled="loading"
33+
:title="t('deck', 'Save board')">
34+
<template #icon>
35+
<CheckIcon v-if="!loading" :size="20" />
36+
<NcLoadingIcon v-else :size="20" />
37+
</template>
38+
</NcButton>
39+
</form>
40+
</div>
41+
</span>
4042
</template>
4143

4244
<script>

‎src/components/navigation/AppNavigationBoard.vue‎

Lines changed: 145 additions & 143 deletions
Original file line numberDiff line numberDiff line change
@@ -3,162 +3,164 @@
33
- SPDX-License-Identifier: AGPL-3.0-or-later
44
-->
55
<template>
6-
<NcAppNavigationItem v-if="!editing"
7-
:name="!deleted ? board.title : undoText"
8-
:loading="loading"
9-
:to="routeTo"
10-
:undo="deleted"
11-
:menu-placement="'auto'"
12-
:force-display-actions="isTouchDevice"
13-
@click="onNavigate"
14-
@undo="unDelete">
15-
<template #icon>
16-
<NcAppNavigationIconBullet :color="board.color" />
17-
<BoardCloneModal v-if="cloneModalOpen" :board-title="board.title" @close="onCloseCloneModal" />
18-
<BoardExportModal v-if="exportModalOpen"
19-
:board-title="board.title"
20-
@export="onExportBoard"
21-
@close="onCloseExportBoard" />
22-
</template>
6+
<span>
7+
<NcAppNavigationItem v-if="!editing"
8+
:name="!deleted ? board.title : undoText"
9+
:loading="loading"
10+
:to="routeTo"
11+
:undo="deleted"
12+
:menu-placement="'auto'"
13+
:force-display-actions="isTouchDevice"
14+
@click="onNavigate"
15+
@undo="unDelete">
16+
<template #icon>
17+
<NcAppNavigationIconBullet :color="board.color" />
18+
<BoardCloneModal v-if="cloneModalOpen" :board-title="board.title" @close="onCloseCloneModal" />
19+
<BoardExportModal v-if="exportModalOpen"
20+
:board-title="board.title"
21+
@export="onExportBoard"
22+
@close="onCloseExportBoard" />
23+
</template>
2324

24-
<template #counter>
25-
<AccountIcon v-if="board.acl.length > 0" />
26-
</template>
25+
<template #counter>
26+
<AccountIcon v-if="board.acl.length > 0" />
27+
</template>
2728

28-
<template v-if="!deleted" slot="actions">
29-
<template v-if="!isDueSubmenuActive">
30-
<NcActionButton icon="icon-info"
31-
:close-after-click="true"
32-
@click="actionDetails">
33-
{{ t('deck', 'Board details') }}
29+
<template v-if="!deleted" slot="actions">
30+
<template v-if="!isDueSubmenuActive">
31+
<NcActionButton icon="icon-info"
32+
:close-after-click="true"
33+
@click="actionDetails">
34+
{{ t('deck', 'Board details') }}
35+
</NcActionButton>
36+
<NcActionButton v-if="canManage && !board.archived"
37+
icon="icon-rename"
38+
:close-after-click="true"
39+
@click="actionEdit">
40+
{{ t('deck', 'Edit board') }}
41+
</NcActionButton>
42+
<NcActionButton v-if="canCreate && !board.archived"
43+
:close-after-click="true"
44+
@click="showCloneModal">
45+
<template #icon>
46+
<CloneIcon :size="20" decorative />
47+
</template>
48+
{{ t('deck', 'Clone board') }}
49+
</NcActionButton>
50+
<NcActionButton v-if="canManage && board.archived"
51+
:close-after-click="true"
52+
@click="actionUnarchive">
53+
<template #icon>
54+
<ArchiveIcon :size="20" decorative />
55+
</template>
56+
{{ t('deck', 'Unarchive board') }}
57+
</NcActionButton>
58+
<NcActionButton v-else-if="canManage && !board.archived"
59+
:close-after-click="true"
60+
@click="actionArchive">
61+
<template #icon>
62+
<ArchiveIcon :size="20" decorative />
63+
</template>
64+
{{ t('deck', 'Archive board') }}
65+
</NcActionButton>
66+
<NcActionButton v-if="canManage && !board.archived"
67+
icon="icon-download"
68+
:close-after-click="true"
69+
@click="actionExport">
70+
{{ t('deck', 'Export board') }}
71+
</NcActionButton>
72+
<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
73+
{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
74+
</NcActionButton>
75+
</template>
76+
77+
<!-- Due date reminder settings -->
78+
<template v-if="isDueSubmenuActive">
79+
<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
80+
:disabled="updateDueSetting"
81+
@click="isDueSubmenuActive=false">
82+
{{ t('deck', 'Due date reminders') }}
83+
</NcActionButton>
84+
85+
<NcActionButton name="notification"
86+
icon="icon-sound"
87+
:disabled="updateDueSetting"
88+
:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
89+
@click="updateSetting('notify-due', 'all')">
90+
{{ t('deck', 'All cards') }}
91+
</NcActionButton>
92+
<NcActionButton name="notification"
93+
icon="icon-user"
94+
:disabled="updateDueSetting"
95+
:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
96+
@click="updateSetting('notify-due', 'assigned')">
97+
{{ t('deck', 'Assigned cards') }}
98+
</NcActionButton>
99+
<NcActionButton name="notification"
100+
icon="icon-sound-off"
101+
:disabled="updateDueSetting"
102+
:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
103+
@click="updateSetting('notify-due', 'off')">
104+
{{ t('deck', 'No notifications') }}
105+
</NcActionButton>
106+
</template>
107+
<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
108+
:name="t('deck', 'Due date reminders')"
109+
:icon="dueDateReminderIcon"
110+
@click="isDueSubmenuActive=true">
111+
{{ dueDateReminderText }}
34112
</NcActionButton>
35-
<NcActionButton v-if="canManage && !board.archived"
36-
icon="icon-rename"
113+
114+
<NcActionButton v-if="canManage && !isDueSubmenuActive"
115+
icon="icon-delete"
37116
:close-after-click="true"
38-
@click="actionEdit">
39-
{{ t('deck', 'Edit board') }}
117+
@click="actionDelete">
118+
{{ t('deck', 'Delete board') }}
40119
</NcActionButton>
41-
<NcActionButton v-if="canCreate && !board.archived"
120+
121+
<NcActionButton v-if="canLeave && !isDueSubmenuActive"
122+
icon="icon-delete"
42123
:close-after-click="true"
43-
@click="showCloneModal">
124+
@click="actionLeave">
44125
<template #icon>
45-
<CloneIcon :size="20" decorative />
126+
<LeaveIcon :size="20" decorative />
46127
</template>
47-
{{ t('deck', 'Clone board') }}
128+
{{ t('deck', 'Leave board') }}
48129
</NcActionButton>
49-
<NcActionButton v-if="canManage && board.archived"
50-
:close-after-click="true"
51-
@click="actionUnarchive">
130+
</template>
131+
</NcAppNavigationItem>
132+
<div v-else-if="editing" class="board-edit">
133+
<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
134+
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
135+
</NcColorPicker>
136+
<form @submit.prevent.stop="applyEdit">
137+
<NcTextField ref="inputField"
138+
:disable="loading"
139+
:value.sync="editTitle"
140+
:placeholder="t('deck', 'Board name')"
141+
type="text"
142+
required />
143+
<NcButton type="tertiary"
144+
:disabled="loading"
145+
native-type="submit"
146+
:title="t('deck', 'Cancel edit')"
147+
@click.stop.prevent="cancelEdit">
52148
<template #icon>
53-
<ArchiveIcon :size="20" decorative />
149+
<CloseIcon :size="20" />
54150
</template>
55-
{{ t('deck', 'Unarchive board') }}
56-
</NcActionButton>
57-
<NcActionButton v-else-if="canManage && !board.archived"
58-
:close-after-click="true"
59-
@click="actionArchive">
151+
</NcButton>
152+
<NcButton type="tertiary"
153+
native-type="submit"
154+
:disabled="loading"
155+
:title="t('deck', 'Save board')">
60156
<template #icon>
61-
<ArchiveIcon :size="20" decorative />
157+
<CheckIcon v-if="!loading" :size="20" />
158+
<NcLoadingIcon v-else :size="20" />
62159
</template>
63-
{{ t('deck', 'Archive board') }}
64-
</NcActionButton>
65-
<NcActionButton v-if="canManage && !board.archived"
66-
icon="icon-download"
67-
:close-after-click="true"
68-
@click="actionExport">
69-
{{ t('deck', 'Export board') }}
70-
</NcActionButton>
71-
<NcActionButton v-if="!board.archived && board.acl.length === 0" :icon="board.settings['notify-due'] === 'off' ? 'icon-sound' : 'icon-sound-off'" @click="board.settings['notify-due'] === 'off' ? updateSetting('notify-due', 'all') : updateSetting('notify-due', 'off')">
72-
{{ board.settings['notify-due'] === 'off' ? t('deck', 'Turn on due date reminders') : t('deck', 'Turn off due date reminders') }}
73-
</NcActionButton>
74-
</template>
75-
76-
<!-- Due date reminder settings -->
77-
<template v-if="isDueSubmenuActive">
78-
<NcActionButton :icon="updateDueSetting ? 'icon-loading-small' : 'icon-view-previous'"
79-
:disabled="updateDueSetting"
80-
@click="isDueSubmenuActive=false">
81-
{{ t('deck', 'Due date reminders') }}
82-
</NcActionButton>
83-
84-
<NcActionButton name="notification"
85-
icon="icon-sound"
86-
:disabled="updateDueSetting"
87-
:class="{ 'forced-active': board.settings['notify-due'] === 'all' }"
88-
@click="updateSetting('notify-due', 'all')">
89-
{{ t('deck', 'All cards') }}
90-
</NcActionButton>
91-
<NcActionButton name="notification"
92-
icon="icon-user"
93-
:disabled="updateDueSetting"
94-
:class="{ 'forced-active': board.settings['notify-due'] === 'assigned' }"
95-
@click="updateSetting('notify-due', 'assigned')">
96-
{{ t('deck', 'Assigned cards') }}
97-
</NcActionButton>
98-
<NcActionButton name="notification"
99-
icon="icon-sound-off"
100-
:disabled="updateDueSetting"
101-
:class="{ 'forced-active': board.settings['notify-due'] === 'off' }"
102-
@click="updateSetting('notify-due', 'off')">
103-
{{ t('deck', 'No notifications') }}
104-
</NcActionButton>
105-
</template>
106-
<NcActionButton v-else-if="!board.archived && board.acl.length > 0"
107-
:name="t('deck', 'Due date reminders')"
108-
:icon="dueDateReminderIcon"
109-
@click="isDueSubmenuActive=true">
110-
{{ dueDateReminderText }}
111-
</NcActionButton>
112-
113-
<NcActionButton v-if="canManage && !isDueSubmenuActive"
114-
icon="icon-delete"
115-
:close-after-click="true"
116-
@click="actionDelete">
117-
{{ t('deck', 'Delete board') }}
118-
</NcActionButton>
119-
120-
<NcActionButton v-if="canLeave && !isDueSubmenuActive"
121-
icon="icon-delete"
122-
:close-after-click="true"
123-
@click="actionLeave">
124-
<template #icon>
125-
<LeaveIcon :size="20" decorative />
126-
</template>
127-
{{ t('deck', 'Leave board') }}
128-
</NcActionButton>
129-
</template>
130-
</NcAppNavigationItem>
131-
<div v-else-if="editing" class="board-edit">
132-
<NcColorPicker class="app-navigation-entry-bullet-wrapper" :value="`#${board.color}`" @input="updateColor">
133-
<div :style="{ backgroundColor: getColor }" class="color0 icon-colorpicker app-navigation-entry-bullet" />
134-
</NcColorPicker>
135-
<form @submit.prevent.stop="applyEdit">
136-
<NcTextField ref="inputField"
137-
:disable="loading"
138-
:value.sync="editTitle"
139-
:placeholder="t('deck', 'Board name')"
140-
type="text"
141-
required />
142-
<NcButton type="tertiary"
143-
:disabled="loading"
144-
native-type="submit"
145-
:title="t('deck', 'Cancel edit')"
146-
@click.stop.prevent="cancelEdit">
147-
<template #icon>
148-
<CloseIcon :size="20" />
149-
</template>
150-
</NcButton>
151-
<NcButton type="tertiary"
152-
native-type="submit"
153-
:disabled="loading"
154-
:title="t('deck', 'Save board')">
155-
<template #icon>
156-
<CheckIcon v-if="!loading" :size="20" />
157-
<NcLoadingIcon v-else :size="20" />
158-
</template>
159-
</NcButton>
160-
</form>
161-
</div>
160+
</NcButton>
161+
</form>
162+
</div>
163+
</span>
162164
</template>
163165

164166
<script>

0 commit comments

Comments
 (0)