Merge pull request #1283 from nextcloud/fix/1276/edit-calendars

Move to v-click-outside, fix editing calendars

package.json

@@ -50,9 +50,9 @@
  "p-limit": "^3.0.2",
  "p-queue": "^6.6.1",
  "uuid": "^8.3.1",
+ "v-click-outside": "^3.1.2",
  "v-tooltip": "^2.0.3",
  "vue": "^2.6.12",
- "vue-click-outside": "^1.1.0",
  "vue-clipboard2": "^0.3.1",
  "vue-router": "^3.4.6",
  "vuedraggable": "^2.24.1",

src/components/AppNavigation/AppNavigation.vue

@@ -103,7 +103,7 @@ import TheSettings from './TheSettings'
 import draggable from 'vuedraggable'
 import AppNavigation from '@nextcloud/vue/dist/Components/AppNavigation'
 import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
-import ClickOutside from 'vue-click-outside'
+import ClickOutside from 'v-click-outside'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
 
@@ -119,7 +119,7 @@ export default {
  draggable,
  },
  directives: {
- ClickOutside,
+ clickOutside: ClickOutside.directive,
  },
  filters: {
  counterFormatter(count) {

src/components/AppNavigation/ListItemCalendar.vue

@@ -22,7 +22,7 @@ License along with this library. If not, see <http:https://www.gnu.org/licenses/>.
 <template>
  <AppNavigationItem
  :id="'list_' + calendar.id"
- v-click-outside="resetView"
+ v-click-outside="{ handler: resetView, middleware: clickOutsideMiddleware }"
  :calendar-id="calendar.id"
  :to="{ name: 'calendars', params: { calendarId: calendar.id } }"
  :title="calendar.displayName"
@@ -53,6 +53,8 @@ License along with this library. If not, see <http:https://www.gnu.org/licenses/>.
  <ActionButton
  v-if="!calendar.readOnly"
  icon="icon-rename"
+ class="edit-calendar"
+ :close-after-click="true"
  @click="editCalendar">
  {{ $t('tasks', 'Edit') }}
  </ActionButton>
@@ -126,7 +128,7 @@ import { mapGetters, mapActions } from 'vuex'
 import Colorpicker from './Colorpicker'
 import ShareCalendar from './CalendarShare'
 
-import ClickOutside from 'vue-click-outside'
+import ClickOutside from 'v-click-outside'
 import Avatar from '@nextcloud/vue/dist/Components/Avatar'
 import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationCounter from '@nextcloud/vue/dist/Components/AppNavigationCounter'
@@ -152,7 +154,7 @@ export default {
  ActionLink,
  },
  directives: {
- ClickOutside,
+ clickOutside: ClickOutside.directive,
  },
  filters: {
  counterFormatter(count) {
@@ -370,11 +372,14 @@ export default {
  toggleShare() {
  this.shareOpen = !this.shareOpen
  },
- resetView($event) {
+ resetView() {
  this.editing = false
  this.shareOpen = false
  this.tooltipTarget = ''
  },
+ clickOutsideMiddleware(event) {
+ return !event.target.closest('.edit-calendar')
+ },
  copyCalDAVUrl(event) {
  // change to loading status
  event.stopPropagation()

src/components/TaskBody.vue

@@ -96,7 +96,7 @@ License along with this library. If not, see <http:https://www.gnu.org/licenses/>.
  <Actions v-if="!deleteTimeout" class="reactive no-nav" menu-align="right">
  <ActionButton v-if="!task.calendar.readOnly"
  :close-after-click="true"
- class="reactive no-nav"
+ class="reactive no-nav open-input"
  icon="icon-add"
  @click="openSubtaskInput">
  {{ $t('tasks', 'Add subtask') }}
@@ -134,7 +134,7 @@ License along with this library. If not, see <http:https://www.gnu.org/licenses/>.
  </div>
  <div class="subtasks-container">
  <div v-if="showSubtaskInput"
- v-click-outside="($event) => closeSubtaskInput($event)"
+ v-click-outside="{ handler: closeSubtaskInput, middleware: clickOutsideMiddleware }"
  class="task-item add-task">
  <form name="addTaskForm" @submit.prevent="addTask">
  <input ref="input"
@@ -156,7 +156,7 @@ License along with this library. If not, see <http:https://www.gnu.org/licenses/>.
 
 <script>
 import { overdue, sort, searchSubTasks, isTaskInList } from '../store/storeHelper'
-import ClickOutside from 'vue-click-outside'
+import ClickOutside from 'v-click-outside'
 import { mapGetters, mapActions } from 'vuex'
 import { linkify } from '../directives/linkify.js'
 import TaskStatusDisplay from './TaskStatusDisplay'
@@ -172,7 +172,7 @@ const CD_DURATION = 7
 export default {
  name: 'TaskBody',
  directives: {
- ClickOutside,
+ clickOutside: ClickOutside.directive,
  linkify,
  },
  components: {
@@ -194,7 +194,6 @@ export default {
  data() {
  return {
  showSubtaskInput: false,
- justOpened: false,
  newTaskName: '',
  isAddingTask: false,
  // Deleting
@@ -567,21 +566,19 @@ export default {
 
  openSubtaskInput() {
  this.showSubtaskInput = true
- this.justOpened = true
  this.$nextTick(
  () => this.$refs.input.focus()
  )
  },
 
- closeSubtaskInput(e) {
- // don't cancel the task creation if the own add-subtask button is clicked
- if (this.justOpened) {
- this.justOpened = false
- return
- }
+ closeSubtaskInput() {
  this.showSubtaskInput = false
  },
 
+ clickOutsideMiddleware(event) {
+ return !event.target.closest('.open-input')
+ },
+
  addTask() {
  const task = { summary: this.newTaskName, calendar: this.task.calendar, related: this.task.uid }
 

src/components/TheDetails.vue

@@ -390,7 +390,7 @@ import Multiselect from '@nextcloud/vue/dist/Components/Multiselect'
 import Markdown from './Markdown'
 import TaskStatusDisplay from './TaskStatusDisplay'
 
-import ClickOutside from 'vue-click-outside'
+import ClickOutside from 'v-click-outside'
 import { linkify } from '../directives/linkify.js'
 
 export default {
@@ -401,7 +401,7 @@ export default {
  TaskStatusDisplay,
  },
  directives: {
- ClickOutside,
+ clickOutside: ClickOutside.directive,
  linkify,
  },
  filters: {