opensourcemirror
/
nextcloud-tasks
mirror of https://github.com/nextcloud/tasks.git
1
0
Fork 0
Code Issues Releases Wiki Activity

Use new named slot syntax 

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
This commit is contained in:
Raimund Schlüßler 2021-08-02 22:04:42 +02:00
parent be61cb4bc6
commit a370527576
No known key found for this signature in database
GPG Key ID: 036FA7EB1A599178
15 changed files with 141 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/AppNavigation/CalendarSharee.vue
View File

@ -27,7 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
<template>
<AppNavigationItem
:title="sharee.displayName">
<template slot="icon">
<template #icon>
<div v-if="sharee.isGroup" class="avatar icon-group" />
<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
<Avatar v-else
@ -36,7 +36,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
:disable-menu="true" />
</template>
<template slot="counter">
<template #counter>
<ActionCheckbox
:disabled="loading"
:checked="writeable"
@ -45,11 +45,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
</ActionCheckbox>
</template>
<template slot="actions">
<template #actions>
<ActionButton
:disabled="loading"
@click.prevent.stop="deleteSharee">
<Delete slot="icon" :size="24" decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ $t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
</ActionButton>
</template>

46
src/components/AppNavigation/ListItemCalendar.vue
View File

@ -32,15 +32,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
@dragover.native="dragOver"
@dragenter.native="dragEnter"
@dragleave.native="dragLeave">
<AppNavigationIconBullet slot="icon" :color="calendar.color" />
<template #icon>
<AppNavigationIconBullet :color="calendar.color" />
</template>
<template v-if="!deleteTimeout" slot="counter">
<template v-if="!deleteTimeout" #counter>
<Actions v-if="calendar.canBeShared"
:class="{shared: hasShares}"
class="sharing">
<ActionButton
@click="toggleShare">
<ShareVariant slot="icon" :size="24" decorative />
<template #icon>
<ShareVariant :size="24" decorative />
</template>
{{ sharedWithTooltip }}
</ActionButton>
</Actions>
@ -51,20 +55,24 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</AppNavigationCounter>
</template>
<template v-if="!deleteTimeout" slot="actions">
<template v-if="!deleteTimeout" #actions>
<ActionButton
v-if="!calendar.readOnly"
icon="icon-rename"
class="edit-calendar"
:close-after-click="true"
@click="editCalendar">
<Pencil slot="icon" :size="24" decorative />
<template #icon>
<Pencil :size="24" decorative />
</template>
{{ $t('tasks', 'Edit') }}
</ActionButton>
<ActionButton
:close-after-click="true"
@click="copyCalDAVUrl($event, calendar)">
<LinkVariant slot="icon" :size="24" decorative />
<template #icon>
<LinkVariant :size="24" decorative />
</template>
{{ !copied
? $t('tasks', 'Copy private link')
: copySuccess
@ -75,7 +83,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
icon="icon-download"
:close-after-click="true"
:href="exportUrl">
<Download slot="icon" :size="24" decorative />
<template #icon>
<Download :size="24" decorative />
</template>
{{ $t('tasks', 'Download') }}
</ActionLink>
<ActionButton
@ -86,24 +96,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
content: deleteMessage
}"
@click="scheduleDelete">
<Delete
v-if="!calendar.isSharedWithMe"
slot="icon"
:size="24"
decorative />
<Close
v-else
slot="icon"
:size="24"
decorative />
<template v-if="!calendar.isSharedWithMe" #icon>
<Delete :size="24" decorative />
</template>
<template v-else #icon>
<Close :size="24" decorative />
</template>
{{ !calendar.isSharedWithMe ? $t('tasks', 'Delete') : $t('tasks', 'Unshare') }}
</ActionButton>
</template>
<template v-if="!!deleteTimeout" slot="actions">
<template v-else #actions>
<ActionButton
@click.prevent.stop="cancelDelete">
<Undo slot="icon" :size="24" decorative />
<template #icon>
<Undo :size="24" decorative />
</template>
{{ undoDeleteMessage }}
</ActionButton>
</template>

21
src/components/AppNavigation/Trashbin.vue
View File

@ -24,10 +24,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<AppNavigationItem :title="t('tasks', 'Trash bin')"
:pinned="true"
@click.prevent="onShow">
<Delete
slot="icon"
:size="24"
decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
<template #extra>
<Modal v-if="showModal"
@close="showModal = false">
@ -36,10 +35,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
{{ t('tasks', 'Loading deleted calendars, tasks and events.') }}
</EmptyContent>
<EmptyContent v-else-if="!items.length">
<Delete
slot="icon"
:size="24"
decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ t('tasks', 'You do not have any deleted calendars, tasks or events.') }}
</EmptyContent>
<template v-else>
@ -78,10 +76,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<Actions :force-menu="true">
<ActionButton
@click="onDeletePermanently(item)">
<Delete
slot="icon"
:size="24"
decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ t('tasks','Delete permanently') }}
</ActionButton>
</Actions>

6
src/components/AppSidebar/CalendarPickerItem.vue
View File

@ -32,13 +32,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:value="calendar"
:placeholder="translate('tasks', 'Select a calendar')"
@select="change">
<template slot="singleLabel" slot-scope="scope">
<template #singleLabel="scope">
<CalendarPickerOption v-bind="scope.option" />
</template>
<template slot="option" slot-scope="scope">
<template #option="scope">
<CalendarPickerOption v-bind="scope.option" />
</template>
<template slot="noResult">
<template #noResult>
<CalendarPickerOption
color=""
owner=""

8
src/components/AppSidebar/DatetimePickerItem.vue
View File

@ -61,12 +61,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="item__actions">
<Actions v-show="editing" class="actions__set">
<ActionButton @click="setValue()">
<Check slot="icon" :size="24" decorative />
<template #icon>
<Check :size="24" decorative />
</template>
{{ $t('tasks', 'Set date') }}
</ActionButton>
</Actions><Actions v-show="editing" class="actions__clear">
<ActionButton @click="clearValue">
<Delete slot="icon" :size="24" decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ $t('tasks', 'Delete date') }}
</ActionButton>
</Actions>

6
src/components/AppSidebar/MultiselectItem.vue
View File

@ -38,13 +38,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
track-by="type"
@input="change"
@tag="change">
<template slot="placeholder">
<template #placeholder>
<MultiselectOption :display-name="placeholder" :icon="icon" />
</template>
<template slot="singleLabel" slot-scope="scope">
<template #singleLabel="scope">
<MultiselectOption v-bind="scope.option" />
</template>
<template slot="option" slot-scope="scope">
<template #option="scope">
<MultiselectOption v-bind="scope.option" />
</template>
</Multiselect>

8
src/components/AppSidebar/SliderItem.vue
View File

@ -51,12 +51,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="item__actions">
<Actions v-show="editing" class="actions__set">
<ActionButton @click="setValue()">
<Check slot="icon" :size="24" decorative />
<template #icon>
<Check :size="24" decorative />
</template>
{{ $t('tasks', 'Set value') }}
</ActionButton>
</Actions><Actions v-show="editing" class="actions__clear">
<ActionButton @click="clearValue">
<Delete slot="icon" :size="24" decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ $t('tasks', 'Delete value') }}
</ActionButton>
</Actions>

6
src/components/AppSidebar/TagsItem.vue
View File

@ -35,15 +35,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:tag-placeholder="$t('tasks', 'Add this as a new tag')"
@input="setTags"
@tag="addTag">
<template slot="placeholder">
<template #placeholder>
<MultiselectOption :display-name="placeholder" :icon="icon" />
</template>
<template slot="clear">
<template #clear>
<div v-if="tags.length" class="multiselect__icon">
<Tag :size="24" decorative />
</div>
</template>
<template slot="noOptions">
<template #noOptions>
{{ $t('tasks', 'No tag available. Create one!') }}
</template>
</Multiselect>

2
src/components/Header.vue
View File

@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div v-if="$route.params.collectionId !== 'completed' && calendar && !calendar.readOnly"
class="header__input">
<form @submit.prevent="addTask">
<Plus slot="icon" :size="24" decorative />
<Plus :size="24" decorative />
<input
v-model="newTaskName"
:placeholder="placeholder"

4
src/components/SortorderDropdown.vue
View File

@ -24,7 +24,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:title="$t('tasks', 'Change sort order')"
container=".header"
menu-align="right">
<template slot="icon">
<template #icon>
<component :is="sortOrderIcon" :size="24" decorative />
<MenuDown
v-if="sortDirection"
@ -48,7 +48,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:class="{selected: sortOrder === order.id}"
:close-after-click="true"
@click="setSortOrder(order.id)">
<template slot="icon">
<template #icon>
<component :is="order.icon" :size="24" decorative />
<MenuDown
v-if="order.id == sortOrder && sortDirection"

26
src/components/TaskBody.vue
View File

@ -101,25 +101,33 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:close-after-click="true"
class="reactive no-nav open-input"
@click="openSubtaskInput">
<Plus slot="icon" :size="24" decorative />
<template #icon>
<Plus :size="24" decorative />
</template>
{{ $t('tasks', 'Add subtask') }}
</ActionButton>
<ActionButton v-if="Object.values(task.subTasks).length"
class="reactive no-nav"
@click="toggleSubtasksVisibility(task)">
<SortVariant slot="icon" :size="24" decorative />
<template #icon>
<SortVariant :size="24" decorative />
</template>
{{ task.hideSubtasks ? $t('tasks', 'Show subtasks') : $t('tasks', 'Hide subtasks') }}
</ActionButton>
<ActionButton v-if="hasCompletedSubtasks"
class="reactive no-nav"
@click="toggleCompletedSubtasksVisibility(task)">
<Eye slot="icon" :size="24" decorative />
<template #icon>
<Eye :size="24" decorative />
</template>
{{ task.hideCompletedSubtasks ? $t('tasks', 'Show closed subtasks') : $t('tasks', 'Hide closed subtasks') }}
</ActionButton>
<ActionButton v-if="!readOnly"
class="reactive no-nav"
@click="scheduleTaskDeletion(task)">
<Delete slot="icon" :size="24" decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ $t('tasks', 'Delete task') }}
</ActionButton>
</Actions>
@ -127,7 +135,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<ActionButton
class="reactive no-nav"
@click.prevent.stop="clearTaskDeletion(task)">
<Undo slot="icon" :size="24" decorative />
<template #icon>
<Undo :size="24" decorative />
</template>
{{ $n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', task.deleteCountdown, { countdown: task.deleteCountdown }) }}
</ActionButton>
</Actions>
@ -135,7 +145,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<ActionButton
:disabled="readOnly"
@click="toggleStarred(task)">
<Star slot="icon" :size="24" decorative />
<template #icon>
<Star :size="24" decorative />
</template>
{{ $t('tasks', 'Toggle starred') }}
</ActionButton>
</Actions>
@ -146,7 +158,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
v-click-outside="{ handler: closeSubtaskInput, middleware: clickOutsideMiddleware }"
class="task-item task-item--input">
<form name="addTaskForm" @submit.prevent="addTask">
<Plus slot="icon" :size="24" decorative />
<Plus :size="24" decorative />
<input ref="input"
v-model="newTaskName"
:placeholder="subtasksCreationPlaceholder"

4
src/components/TaskCreateDialog.vue
View File

@ -38,7 +38,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
@changeCalendar="changeCalendar" />
<div class="property property__summary">
<ViewHeadline slot="icon" :size="24" decorative />
<ViewHeadline :size="24" decorative />
<input v-model="pendingTitle"
type="text"
:placeholder="t('tasks', 'Task summary')"
@ -46,7 +46,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
<div class="property property__notes">
<TextBoxOutline slot="icon" :size="24" decorative />
<TextBoxOutline :size="24" decorative />
<textarea v-model="pendingDescription"
:disabled="loading" />
<div class="modal-buttons">

2
src/components/TaskStatusDisplay.vue
View File

@ -22,7 +22,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<Actions v-if="status" :disabled="isDisabled">
<ActionButton :key="status.status" :disabled="isDisabled" @click="statusClicked">
<template slot="icon">
<template #icon>
<AlertCircleOutline v-if="status.status==='error'" :size="24" class="status--error" />
<Check v-if="status.status==='success'" :size="24" class="status--success" />
<Loading v-if="status.status==='sync'" :size="24" class="status--sync" />

23
src/views/AppNavigation.vue
View File

@ -38,14 +38,17 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
@dragenter.native="dragEnter(...arguments, collection)"
@dragleave.native="dragLeave"
@click="setInitialRoute(`/collections/${collection.id}`)">
<component
:is="collection.icon"
slot="icon"
:size="24"
decorative />
<AppNavigationCounter v-show="collectionCount(collection.id)" slot="counter">
{{ collectionCount(collection.id) | counterFormatter }}
</AppNavigationCounter>
<template #icon>
<component
:is="collection.icon"
:size="24"
decorative />
</template>
<template #counter>
<AppNavigationCounter v-show="collectionCount(collection.id)">
{{ collectionCount(collection.id) | counterFormatter }}
</AppNavigationCounter>
</template>
</AppNavigationItem>
<draggable
class="draggable-container"
@ -63,7 +66,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:class="{'collection--edit': creating}"
class="collection reactive"
@click="startCreate($event)">
<Plus slot="icon" :size="24" decorative />
<template #icon>
<Plus :size="24" decorative />
</template>
<div :class="{error: nameError}" class="app-navigation-entry-edit">
<form>
<input id="newListInput"

58
src/views/AppSidebar.vue
View File

@ -44,7 +44,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:task="task"
@editing="(editing) => editingStart = editing"
@setValue="setStartDate">
<CalendarStart slot="icon" :size="24" decorative />
<template #icon>
<CalendarStart :size="24" decorative />
</template>
</DatetimePickerItem>
<DatetimePickerItem
v-show="!readOnly || task.due"
@ -56,7 +58,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:task="task"
@editing="(editing) => editingDue = editing"
@setValue="setDueDate">
<CalendarEnd slot="icon" :size="24" decorative />
<template #icon>
<CalendarEnd :size="24" decorative />
</template>
</DatetimePickerItem>
<CheckboxItem
v-show="showAllDayToggle"
@ -75,38 +79,44 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template v-if="!task || (task && task.deleteCountdown === null)" #secondary-actions>
<ActionButton v-if="!readOnly"
@click="togglePinned(task)">
<PinOff v-if="task.pinned"
slot="icon"
:size="24"
decorative />
<Pin v-else
slot="icon"
:size="24"
decorative />
<template v-if="task.pinned" #icon>
<PinOff :size="24" decorative />
</template>
<template v-else #icon>
<Pin :size="24" decorative />
</template>
{{ task.pinned ? $t('tasks', 'Unpin') : $t('tasks', 'Pin') }}
</ActionButton>
<ActionLink v-if="showInCalendar"
:href="calendarLink"
:close-after-click="true"
target="_blank">
<Calendar slot="icon" :size="24" decorative />
<template #icon>
<Calendar :size="24" decorative />
</template>
{{ $t('tasks', 'Show in Calendar') }}
</ActionLink>
<ActionButton v-if="!readOnly"
:close-after-click="true"
@click="editTitle(true)">
<Pencil slot="icon" :size="24" decorative />
<template #icon>
<Pencil :size="24" decorative />
</template>
{{ $t('tasks', 'Edit title') }}
</ActionButton>
<ActionLink
:href="downloadURL"
:close-after-click="true">
<Download slot="icon" :size="24" decorative />
<template #icon>
<Download :size="24" decorative />
</template>
{{ $t('tasks', 'Download') }}
</ActionLink>
<ActionButton v-if="!readOnly"
@click="scheduleTaskDeletion(task)">
<Delete slot="icon" :size="24" decorative />
<template #icon>
<Delete :size="24" decorative />
</template>
{{ $t('tasks', 'Delete') }}
</ActionButton>
</template>
@ -114,7 +124,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<ActionButton
class="reactive no-nav"
@click.prevent.stop="clearTaskDeletion(task)">
<Undo slot="icon" :size="24" decorative />
<template #icon>
<Undo :size="24" decorative />
</template>
{{ $n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', task.deleteCountdown, { countdown: task.deleteCountdown }) }}
</ActionButton>
</template>
@ -141,7 +153,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
class="app-sidebar-tab"
:name="$t('tasks', 'Details')"
:order="0">
<InformationOutline slot="icon" :size="24" decorative />
<template #icon>
<InformationOutline :size="24" decorative />
</template>
<div>
<MultiselectItem
v-show="!readOnly || task.class !== 'PUBLIC'"
@ -169,7 +183,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:color="priorityColor"
:task="task"
@setValue="({task, value}) => setPriority({ task, priority: value })">
<Star slot="icon" :size="24" decorative />
<template #icon>
<Star :size="24" decorative />
</template>
</SliderItem>
<SliderItem
v-show="!readOnly || task.complete"
@ -181,7 +197,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:color="task.complete > 0 ? '#4271a6' : null"
:task="task"
@setValue="({task, value}) => setPercentComplete({ task, complete: value })">
<Percent slot="icon" :size="24" decorative />
<template #icon>
<Percent :size="24" decorative />
</template>
</SliderItem>
<TagsItem
v-show="!readOnly || task.tags.length > 0"
@ -203,7 +221,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
class="app-sidebar-tab"
:name="$t('tasks', 'Notes')"
:order="1">
<TextBoxOutline slot="icon" :size="24" decorative />
<template #icon>
<TextBoxOutline :size="24" decorative />
</template>
<NotesItem
v-show="!readOnly || task.note"
:value="task.note"