wbrawner/tasks
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix vue style

Browse source
This commit is contained in:
Raimund Schlüßler 2018-12-06 22:41:38 +01:00
parent 8e442d56e9
commit ecc6a784e7
No known key found for this signature in database
GPG key ID: 036FA7EB1A599178
14 changed files with 291 additions and 184 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

12
src/app.vue
View file

@ -22,18 +22,18 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<div id="content" class="app-tasks">
<div id="app-navigation">
<theList />
<theSettings />
<TheList />
<TheSettings />
</div>
<div id="app-content">
<div class="content-wrapper">
<router-view />
<RouterView />
</div>
</div>
<div id="app-sidebar" :class="{disappear: $route.params.taskId === undefined}">
<router-view name="details" />
<RouterView name="details" />
</div>
</div>
</template>
@ -47,8 +47,8 @@ import client from './services/cdav.js'
export default {
name: 'App',
components: {
'theSettings': TheSettings,
'theList': TheList
'TheSettings': TheSettings,
'TheList': TheList
},
computed: Object.assign({},
mapState({

12
src/components/Colorpicker.vue
View file

@ -32,20 +32,24 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:key="color"
:class="{ selected: (color===selectedColor) }"
:style="{'background-color': color}"
@click="pick(color)" />
@click="pick(color)"
/>
<li v-if="!supportsColorPicker"
:style="{'background-color': random}"
class="randomcolour"
@click="randomizeColour">
@click="randomizeColour"
>
<span class="icon icon-random" />
</li>
<label v-if="supportsColorPicker"
:style="{'background-color': selectedColor}"
class="color-selector-label">
class="color-selector-label"
>
<input :value="selectedColor"
type="color"
class="color-selector"
@change="pick($event.target.value)">
@change="pick($event.target.value)"
>
</label>
</ul>
</div>

14
src/components/Confirmation.vue
View file

@ -35,22 +35,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
boundariesElement: 'body',
content: message
}"
class="confirmation-confirm icon-delete-white no-permission" @click="deleteCalendar($event)">
<span class="countdown">{{ remaining }}</span>
class="confirmation-confirm icon-delete-white no-permission" @click="deleteCalendar($event)"
>
<span class="countdown">
{{ remaining }}
</span>
</a>
</li>
</template>
<script>
import clickOutside from 'vue-click-outside'
import ClickOutside from 'vue-click-outside'
export default {
name: 'PopoverMenu',
components: {
clickOutside
},
directives: {
clickOutside
ClickOutside
},
props: {
message: {

4
src/components/LoadCompletedButton.vue
View file

@ -21,7 +21,9 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<div v-show="loadedCompleted" class="loadmore">
<span @click="loadCompletedTasks">{{ t('tasks', 'Load remaining completed tasks.') }}</span>
<span @click="loadCompletedTasks">
{{ t('tasks', 'Load remaining completed tasks.') }}
</span>
</div>
</template>

4
src/components/PopoverMenu.vue
View file

@ -20,12 +20,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<component :is="tag">
<Component :is="tag">
<button v-click-outside="closeMenu" class="icon-more" @click="toggleMenu" />
<div :class="{'open': menuOpen}" class="app-navigation-entry-menu">
<slot />
</div>
</component>
</Component>
</template>
<script>

14
src/components/SortorderDropdown.vue
View file

@ -34,10 +34,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<li v-for="order in orders"
:key="order.id"
:class="{active: sortOrder == order.id}"
@click="setSortOrder(order.id)">
@click="setSortOrder(order.id)"
>
<a>
<span :class="order.icon" class="icon icon-bw" />
<span class="label">{{ order.text }}</span>
<span class="label">
{{ order.text }}
</span>
<span :class="sortDirection ? 'icon-sort-up' : 'icon-sort-down'" class="icon icon-bw sort-indicator" />
</a>
</li>
@ -47,15 +50,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</template>
<script>
import clickOutside from 'vue-click-outside'
import ClickOutside from 'vue-click-outside'
export default {
name: 'SortorderDropdown',
components: {
clickOutside
},
directives: {
clickOutside
ClickOutside
},
data() {
return {

63
src/components/Task.vue
View file

@ -22,16 +22,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<li :task-id="task.uri"
:class="{done: task.completed}"
class="task-item">
class="task-item"
>
<div :task-id="task.uri"
:class="{active: $route.params.taskId==task.uri}"
class="task-body"
type="task"
@click="navigate($event)">
@click="navigate($event)"
>
<div v-if="task.complete > 0" class="percentbar">
<div :style="{ width: task.complete + '%', 'background-color': task.calendar.color }"
:aria-label="t('tasks', '{complete} % completed', {complete: task.complete})"
class="percentdone" />
class="percentdone"
/>
</div>
<span :aria-checked="task.completed"
@ -39,7 +42,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
class="task-checkbox"
name="toggleCompleted"
role="checkbox"
@click="toggleCompleted(task)">
@click="toggleCompleted(task)"
>
<span :class="{'icon-checkmark': task.completed}" class="icon icon-bw task-checkbox reactive no-nav" />
</span>
<span class="icon task-separator" />
@ -47,54 +51,67 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<span :class="[iconStar]" class="icon right large reactive no-nav" />
</span>
<span v-if="!task.calendar.readOnly"
class="task-addsubtask add-subtask">
class="task-addsubtask add-subtask"
>
<span :taskId="task.uri"
:title="subtasksCreationPlaceholder" class="icon icon-bw icon-add right large reactive no-nav"
@click="showSubtaskInput = true" />
@click="showSubtaskInput = true"
/>
</span>
<span v-if="task.subTasks.length" @click="toggleSubtasks(task)">
<span :title="t('tasks', 'Toggle subtasks')"
:class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
class="icon icon-bw right large subtasks reactive no-nav" />
class="icon icon-bw right large subtasks reactive no-nav"
/>
</span>
<span v-if="hasCompletedSubtasks" @click="toggleCompletedSubtasks(task)">
<span :title="t('tasks', 'Toggle completed subtasks')"
:class="{'active': !task.hideCompletedSubtasks}"
class="icon icon-bw icon-toggle right large toggle-completed-subtasks reactive no-nav" />
class="icon icon-bw icon-toggle right large toggle-completed-subtasks reactive no-nav"
/>
</span>
<span v-if="task.note!=''">
<span class="icon icon-bw icon-note right large" />
</span>
<span :class="{overdue: overdue(task.due)}" class="duedate">{{ task.due | formatDate }}</span>
<span v-if="$route.params.collectionId=='week'" class="listname">{{ task.calendar.displayName }}</span>
<span :class="{overdue: overdue(task.due)}" class="duedate">
{{ task.due | formatDate }}
</span>
<span v-if="$route.params.collectionId=='week'" class="listname">
{{ task.calendar.displayName }}
</span>
<div class="task-info-wrapper">
<div class="title">
<span>{{ task.summary }}</span>
</div>
<div class="categories-list">
<span v-for="category in task.categories" :key="category" class="category">
<span :title="category" class="category-label">{{ category }}</span>
<span :title="category" class="category-label">
{{ category }}
</span>
</span>
</div>
</div>
</div>
<div class="subtasks-container">
<div v-click-outside="($event) => cancelCreation($event)"
v-if="showSubtaskInput"
class="task-item add-subtask">
<div v-if="showSubtaskInput"
v-click-outside="($event) => cancelCreation($event)"
class="task-item add-subtask"
>
<form name="addTaskForm" @submit="addTask">
<input v-focus
v-model="newTaskName"
<input v-model="newTaskName"
v-focus
:placeholder="subtasksCreationPlaceholder"
:disabled="isAddingTask"
@keyup.27="showSubtaskInput = false">
@keyup.27="showSubtaskInput = false"
>
</form>
</div>
<ol v-if="!task.hideSubtasks" :calendarID="task.calendar.uri">
<task-body-component v-for="subtask in task.subTasks"
<TaskBodyComponent v-for="subtask in task.subTasks"
:key="subtask.uid"
:task="subtask"
class="subtask" />
class="subtask"
/>
<!-- "orderBy:getSortOrder():settingsmodel.getById('various').sortDirection" -->
</ol>
</div>
@ -103,17 +120,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<script>
import { overdue, valid } from '../store/storeHelper'
import clickOutside from 'vue-click-outside'
import ClickOutside from 'vue-click-outside'
import { mapActions } from 'vuex'
import focus from '../directives/focus'
export default {
name: 'TaskBodyComponent',
components: {
clickOutside
},
directives: {
clickOutside,
ClickOutside,
focus
},
filters: {
@ -157,6 +171,7 @@ export default {
} else if (collectionId) {
return '/collections/' + collectionId + '/tasks/' + this.task.uri
}
return ''
},
iconStar: function() {

32
src/components/TheCollections/Calendar.vue
View file

@ -23,26 +23,30 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div v-if="calendar">
<div v-if="!calendar.readOnly"
id="add-task"
class="add-task">
class="add-task"
>
<form name="addTaskForm" @submit="addTask">
<input id="target"
v-model="newTaskName"
:placeholder="inputString"
:disabled="isAddingTask"
class="transparent"
@keyup.27="clearNewTask($event)">
@keyup.27="clearNewTask($event)"
>
</form>
</div>
<sortorderDropdown />
<SortorderDropdown />
<div class="task-list">
<div class="grouped-tasks">
<ol :calendarId="calendarId"
class="tasks"
collectionId="uncompleted"
type="list">
<task v-for="task in uncompletedRootTasks(calendar.tasks)"
type="list"
>
<Task v-for="task in uncompletedRootTasks(calendar.tasks)"
:key="task.id"
:task="task" />
:task="task"
/>
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
</ol>
<h2 v-show="completedCount(calendarId)" class="heading-hiddentasks icon-triangle-s" @click="toggleHidden">
@ -52,13 +56,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:calendarId="calendarId"
class="completed-tasks"
collectionId="completed"
type="list">
<task v-for="task in completedRootTasks(calendar.tasks)"
type="list"
>
<Task v-for="task in completedRootTasks(calendar.tasks)"
:key="task.id"
:task="task" />
:task="task"
/>
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,route.calendarID) | filter:{'completed':true} | orderBy:'completed_date':true"> -->
</ol>
<loadCompletedButton :calendar="calendar" />
<LoadCompletedButton :calendar="calendar" />
</div>
</div>
</div>
@ -72,9 +78,9 @@ import Task from '../Task'
export default {
components: {
'task': Task,
'sortorderDropdown': SortorderDropdown,
'loadCompletedButton': LoadCompletedButton
'Task': Task,
'SortorderDropdown': SortorderDropdown,
'LoadCompletedButton': LoadCompletedButton
},
props: {
calendarId: {

10
src/components/TheCollections/Collections.vue
View file

@ -20,7 +20,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
<component :is="collectionType" />
<Component :is="collectionType" />
</template>
<script>
@ -29,15 +29,15 @@ import Week from './Week'
export default {
components: {
'collection-general': General,
'collection-week': Week
'CollectionGeneral': General,
'CollectionWeek': Week
},
computed: {
collectionType: function() {
if (this.$route.params.collectionId === 'week') {
return 'collection-week'
return 'CollectionWeek'
} else {
return 'collection-general'
return 'CollectionGeneral'
}
}
}

31
src/components/TheCollections/General.vue
View file

@ -23,32 +23,39 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div v-if="calendar">
<div v-if="collectionId !== 'completed' && !calendar.readOnly"
id="add-task"
class="add-task">
class="add-task"
>
<form name="addTaskForm" @submit="addTask">
<input v-model="newTaskName"
:placeholder="inputString"
:disabled="isAddingTask"
class="transparent"
@keyup.27="clearNewTask($event)">
@keyup.27="clearNewTask($event)"
>
</form>
</div>
<sortorderDropdown />
<SortorderDropdown />
<div class="task-list">
<div v-for="calendar in filteredCalendars"
:key="calendar.id"
:rel="calendar.id"
class="grouped-tasks ui-droppable">
<h2 class="heading">{{ calendar.displayName }}</h2>
class="grouped-tasks ui-droppable"
>
<h2 class="heading">
{{ calendar.displayName }}
</h2>
<ol :calendarID="calendar.id"
:collectionID="collectionId"
class="tasks"
type="list">
<task-body v-for="task in uncompletedRootTasks(calendar.tasks)"
type="list"
>
<TaskBody v-for="task in uncompletedRootTasks(calendar.tasks)"
:key="task.id"
:task="task" />
:task="task"
/>
<!-- ng-repeat="task in filtered = filteredTasks() | filter:hasNoParent(task) | filter:filterTasks(task,calendar.uri) | filter:filterTasks(task,route.collectionID) | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
</ol>
<loadCompletedButton v-if="collectionId === 'completed'" :calendar="calendar" />
<LoadCompletedButton v-if="collectionId === 'completed'" :calendar="calendar" />
</div>
</div>
</div>
@ -62,9 +69,9 @@ import TaskBody from '../Task'
export default {
components: {
'task-body': TaskBody,
'sortorderDropdown': SortorderDropdown,
'loadCompletedButton': LoadCompletedButton
'TaskBody': TaskBody,
'SortorderDropdown': SortorderDropdown,
'LoadCompletedButton': LoadCompletedButton
},
data() {
return {

18
src/components/TheCollections/Week.vue
View file

@ -21,17 +21,21 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<div>
<sortorderDropdown />
<SortorderDropdown />
<div class="task-list">
<div v-for="day in dayHasEntry(days)" :key="day" class="grouped-tasks ui-droppable">
<h2 class="heading">{{ day | formatDay }}</h2>
<h2 class="heading">
{{ day | formatDay }}
</h2>
<ol collectionID="week"
class="tasks"
listID=""
type="list">
<task-body v-for="task in uncompletedRootTasks(tasks)"
type="list"
>
<TaskBody v-for="task in uncompletedRootTasks(tasks)"
:key="task.id"
:task="task" />
:task="task"
/>
<!-- ng-repeat="task in filtered = filteredTasks() | filter:taskAtDay(task,day) | filter:hasNoParent(task) | filter:{'completed':'false'} | orderBy:getSortOrder():settingsmodel.getById('various').sortDirection"> -->
</ol>
</div>
@ -46,8 +50,8 @@ import TaskBody from '../Task'
export default {
components: {
'task-body': TaskBody,
'sortorderDropdown': SortorderDropdown
'TaskBody': TaskBody,
'SortorderDropdown': SortorderDropdown
},
filters: {
formatDay: function(day) {

123
src/components/TheDetails.vue
View file

@ -23,23 +23,27 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="content-wrapper">
<div v-if="task!=undefined"
:class="{'disabled': task.calendar.readOnly}"
class="flex-container">
class="flex-container"
>
<div :class="{'editing': edit=='summary'}" class="title">
<a :aria-checked="task.completed"
:aria-label="t('tasks', 'Task is completed')"
class="checkbox reactive"
role="checkbox"
@click="toggleCompleted(task.uri)">
@click="toggleCompleted(task.uri)"
>
<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
</a>
<a class="star reactive" @click="toggleStarred(task.uri)">
<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
class="icon" />
class="icon"
/>
</a>
<div v-click-outside="() => finishEditing('summary')">
<div :class="{'strike-through': task.completed}"
class="title-text"
@click="editProperty('summary')">
@click="editProperty('summary')"
>
{{ task.summary }}
</div>
<div class="expandable-container">
@ -49,7 +53,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
v-model="tmpTask.summary"
maxlength="200"
@keyup.27="cancelEditing('summary')"
@keydown.enter.prevent="finishEditing('summary')" />
@keydown.enter.prevent="finishEditing('summary')"
/>
</div>
</div>
</div>
@ -57,21 +62,28 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="body">
<ul class="sections">
<li :class="{'date': valid(task.start), 'editing': edit=='start', 'high': overdue(task.start)}"
class="section detail-start">
class="section detail-start"
>
<div v-click-outside="() => finishEditing('start')"
@click="editProperty('start', $event)">
@click="editProperty('start', $event)"
>
<span :class="[dateIcon(task.start)]"
class="icon" />
<span class="section-title">{{ task.start | startDate }}</span>
class="icon"
/>
<span class="section-title">
{{ task.start | startDate }}
</span>
<div v-if="edit=='start'" class="section-edit">
<datetime-picker :value="startDate" :lang="lang"
<DatetimePicker :value="startDate" :lang="lang"
:format="dateFormat" :clearable="false" :first-day-of-week="firstDay"
:type="'date'" :placeholder="t('tasks', 'Set start date')"
class="date" @change="setStartDate" />
<datetime-picker :value="startDate" :lang="lang"
class="date" @change="setStartDate"
/>
<DatetimePicker :value="startDate" :lang="lang"
:format="timeFormat" :clearable="false" :time-picker-options="timePickerOptions"
:type="'time'" :placeholder="t('tasks', 'Set start time')"
class="time" @change="setStartTime" />
class="time" @change="setStartTime"
/>
</div>
</div>
<div class="utils">
@ -84,21 +96,28 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
</li>
<li :class="{'date': valid(task.due), 'editing': edit=='due', 'high': overdue(task.due)}"
class="section detail-date">
class="section detail-date"
>
<div v-click-outside="() => finishEditing('due')"
@click="editProperty('due', $event)">
@click="editProperty('due', $event)"
>
<span :class="[dateIcon(task.due)]"
class="icon" />
<span class="section-title">{{ task.due | dueDate }}</span>
class="icon"
/>
<span class="section-title">
{{ task.due | dueDate }}
</span>
<div v-if="edit=='due'" class="section-edit">
<datetime-picker :value="dueDate" :lang="lang"
<DatetimePicker :value="dueDate" :lang="lang"
:format="dateFormat" :clearable="false" :first-day-of-week="firstDay"
:type="'date'" :placeholder="t('tasks', 'Set due date')"
class="date" @change="setDueDate" />
<datetime-picker :value="dueDate" :lang="lang"
class="date" @change="setDueDate"
/>
<DatetimePicker :value="dueDate" :lang="lang"
:format="timeFormat" :clearable="false" :time-picker-options="timePickerOptions"
:type="'time'" :placeholder="t('tasks', 'Set due time')"
class="time" @change="setDueTime" />
class="time" @change="setDueTime"
/>
</div>
</div>
<div class="utils">
@ -114,19 +133,27 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:aria-checked="task.allDay"
class="section detail-all-day reactive"
role="checkbox"
@click="toggleAllDay(task.uri)">
@click="toggleAllDay(task.uri)"
>
<div>
<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon icon-color detail-checkbox" />
<span class="section-title">{{ t('tasks', 'All day') }}</span>
<span class="section-title">
{{ t('tasks', 'All day') }}
</span>
</div>
</li>
<li :class="[{'editing': edit=='priority', 'date': task.priority>0}, priorityString]"
class="section detail-priority">
class="section detail-priority"
>
<div v-click-outside="() => finishEditing('priority')"
@click="editProperty('priority')">
@click="editProperty('priority')"
>
<span :class="[iconStar]"
class="icon" />
<span class="section-title">{{ task.priority | priority }}</span>
class="icon"
/>
<span class="section-title">
{{ task.priority | priority }}
</span>
<div class="section-edit">
<input v-model="tmpTask.priority"
class="priority-input"
@ -134,13 +161,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
min="0"
max="9"
@keyup.27="cancelEditing('priority')"
@keydown.enter.prevent="finishEditing('priority')">
@keydown.enter.prevent="finishEditing('priority')"
>
<input v-model="tmpTask.priority"
type="range"
min="0"
max="9"
step="1"
@change="finishEditing('priority')">
@change="finishEditing('priority')"
>
</div>
</div>
<div class="utils">
@ -153,11 +182,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
</li>
<li :class="{'editing': edit=='complete', 'date': task.complete>0}"
class="section detail-complete">
class="section detail-complete"
>
<div v-click-outside="() => finishEditing('complete')"
@click="editProperty('complete')">
@click="editProperty('complete')"
>
<span :class="[iconPercent]" class="icon" />
<span class="section-title">{{ task.complete | complete }}</span>
<span class="section-title">
{{ task.complete | complete }}
</span>
<div class="section-edit">
<input v-model="tmpTask.complete"
class="percent-input"
@ -166,13 +199,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
max="100"
@keyup.27="cancelEditing('complete')"
@keydown.enter.prevent="finishEditing('complete')"
@keyup="setPropertyTemporarily('complete', tmpTask.complete)">
@keyup.exact="setPropertyTemporarily('complete', tmpTask.complete)"
>
<input v-model="tmpTask.complete"
type="range"
min="0"
max="100"
step="1"
@change="setPropertyTemporarily('complete', tmpTask.complete)">
@change="setPropertyTemporarily('complete', tmpTask.complete)"
>
</div>
</div>
<div class="utils">
@ -188,7 +223,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div>
<span :class="[iconCategories]" class="icon detail-categories" />
<div class="detail-categories-container">
<multiselect v-if="task.categories"
<Multiselect v-if="task.categories"
v-model="task.categories"
:multiple="true"
:searchable="true"
@ -199,7 +234,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
:close-on-select="false"
class="multiselect-vue"
@input="updateCategories"
@tag="addCategory" />
@tag="addCategory"
/>
</div>
</div>
</li>
@ -207,9 +243,12 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="note">
<div v-click-outside="() => finishEditing('note')"
class="note-body selectable"
@click="editProperty('note')">
@click="editProperty('note')"
>
<div :class="{'editing': edit=='note'}" class="content-fakeable">
<div class="display-view">{{ task.note }}</div>
<div class="display-view">
{{ task.note }}
</div>
<div class="edit-view">
<div class="expandingArea active">
<pre><span>{{ tmpTask.note }}</span><br><br></pre>
@ -225,7 +264,8 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div class="footer">
<a v-show="!task.calendar.readOnly"
class="left close-all reactive"
@click="deleteTask(task.uri)">
@click="deleteTask(task.uri)"
>
<span class="icon icon-bw icon-trash" />
</a>
<a class="right close-all reactive" @click="closeDetails">
@ -244,16 +284,15 @@ import { mapState, mapGetters, mapActions } from 'vuex'
import { valid, overdue } from '../store/storeHelper'
import { DatetimePicker, Multiselect } from 'nextcloud-vue'
import clickOutside from 'vue-click-outside'
import ClickOutside from 'vue-click-outside'
export default {
components: {
clickOutside,
DatetimePicker,
Multiselect
},
directives: {
clickOutside
ClickOutside
},
filters: {
startDate: function(date) {

102
src/components/TheList.vue
View file

@ -21,44 +21,56 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template>
<ul id="collections">
<router-link
<RouterLink
v-for="collection in collections"
:id="'collection_' + collection.id"
:key="collection.id"
:collection-id="collection.id"
:to="'/collections/' + collection.id"
:key="collection.id"
:class="[collection.icon, {'animate-up': hideCollection(collection) }]"
tag="li" class="collection reactive"
active-class="active">
active-class="active"
>
<a class="sprite">
<span v-if="collection.id=='today'" class="date">{{ dayOfMonth }}</span>
<span class="title">{{ collection.displayName }}</span>
<span v-if="collection.id=='today'" class="date">
{{ dayOfMonth }}
</span>
<span class="title">
{{ collection.displayName }}
</span>
</a>
<div v-if="collection.id!='completed'" class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-counter">{{ collectionCount(collection.id) | counterFormatter }}</li>
<li class="app-navigation-entry-utils-counter">
{{ collectionCount(collection.id) | counterFormatter }}
</li>
</ul>
</div>
</router-link>
<router-link
v-click-outside="() => resetView(calendar)"
</RouterLink>
<RouterLink
v-for="calendar in calendars"
:id="'list_' + calendar.id"
:key="calendar.id"
v-click-outside="() => resetView(calendar)"
:calendar-id="calendar.id"
:to="'/calendars/' + calendar.id"
:key="calendar.id"
:class="{edit: editing == calendar.id, caldav: caldav == calendar.id}"
tag="li"
class="list with-menu editing"
active-class="active">
active-class="active"
>
<div :style="{'background-color': calendar.color}" class="app-navigation-entry-bullet" />
<a>
<span class="title">{{ calendar.displayName }}</span>
<span class="title">
{{ calendar.displayName }}
</span>
</a>
<div class="app-navigation-entry-utils">
<ul>
<li class="app-navigation-entry-utils-counter">{{ calendarCount(calendar.id) | counterFormatter }}</li>
<popover v-show="!calendar.readOnly" tag="li" class="app-navigation-entry-utils-menu-button">
<li class="app-navigation-entry-utils-counter">
{{ calendarCount(calendar.id) | counterFormatter }}
</li>
<Popover v-show="!calendar.readOnly" tag="li" class="app-navigation-entry-utils-menu-button">
<ul>
<li>
<a @click="edit(calendar)">
@ -78,79 +90,90 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<span>{{ t('tasks', 'Download') }}</span>
</a>
</li>
<confirmation :message="deleteMessage(calendar.displayName)" @delete-calendar="deleteCalendar(calendar)" />
<Confirmation :message="deleteMessage(calendar.displayName)" @delete-calendar="deleteCalendar(calendar)" />
</ul>
</popover>
</Popover>
</ul>
</div>
<div :class="{error: nameError}" class="app-navigation-entry-edit name">
<form>
<input v-tooltip="{
<input v-model="newCalendarName"
v-tooltip="{
content: tooltipMessage,
show: showTooltip('list_' + calendar.id),
trigger: 'manual'
}"
v-model="newCalendarName"
class="edit"
type="text"
@keyup="checkName($event, calendar.id)">
@keyup="checkName($event, calendar.id)"
>
<input :title="t('tasks', 'Cancel')"
type="cancel"
value=""
class="action icon-close"
@click="resetView(calendar)">
@click="resetView(calendar)"
>
<input :title="t('tasks', 'Save')"
type="submit"
value=""
class="action icon-checkmark"
@click="save(calendar)">
@click="save(calendar)"
>
</form>
<colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
</div>
<div class="app-navigation-entry-edit caldav">
<form>
<input :value="url(calendar)"
class="caldav"
readonly
type="text">
type="text"
>
<input :title="t('tasks', 'Cancel')"
type="cancel"
value=""
class="action icon-close"
@click="resetView(calendar)">
@click="resetView(calendar)"
>
</form>
</div>
</router-link>
</RouterLink>
<li v-click-outside="cancelCreate" :class="{edit: creating}" class="newList icon-add reactive editing">
<a class="icon icon-bw addlist sprite"
@click="startCreate($event)">
<span class="title">{{ t('tasks', 'Add List...') }}</span>
@click="startCreate($event)"
>
<span class="title">
{{ t('tasks', 'Add List...') }}
</span>
</a>
<div :class="{error: nameError}" class="app-navigation-entry-edit name">
<form>
<input v-tooltip="{
<input id="newListInput"
v-model="newCalendarName"
v-tooltip="{
content: tooltipMessage,
show: showTooltip('list_'),
trigger: 'manual'
}"
id="newListInput"
:placeholder="t('tasks', 'New List')"
v-model="newCalendarName"
class="edit"
type="text"
@keyup="checkName($event, '')">
@keyup="checkName($event, '')"
>
<input :title="t('tasks', 'Cancel')"
type="cancel"
value=""
class="action icon-close"
@click="cancelCreate">
@click="cancelCreate"
>
<input :title="t('tasks', 'Save')"
type="submit"
value=""
class="action icon-checkmark"
@click="create($event)">
@click="create($event)"
>
</form>
<colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
<Colorpicker :selected-color="selectedColor" @color-selected="setColor(...arguments)" />
</div>
</li>
</ul>
@ -162,17 +185,16 @@ import Colorpicker from './Colorpicker'
import PopoverMenu from './PopoverMenu'
import Confirmation from './Confirmation'
import clickOutside from 'vue-click-outside'
import ClickOutside from 'vue-click-outside'
export default {
components: {
'colorpicker': Colorpicker,
'popover': PopoverMenu,
'confirmation': Confirmation,
clickOutside
'Colorpicker': Colorpicker,
'Popover': PopoverMenu,
'Confirmation': Confirmation
},
directives: {
clickOutside
ClickOutside
},
filters: {
counterFormatter: function(count) {

26
src/components/TheSettings.vue
View file

@ -29,11 +29,14 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div id="app-settings-content">
<ul>
<li>
<label for="defaultCalendar">{{ t('tasks', 'Default list') }}</label>
<label for="defaultCalendar">
{{ t('tasks', 'Default list') }}
</label>
<select id="defaultCalendar" v-model="defaultCalendarId">
<option v-for="calendar in calendars"
:key="calendar.id"
:value="calendar.id"
:key="calendar.id">
>
{{ calendar.displayName }}
</option>
</select>
@ -42,19 +45,26 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
{{ t('tasks', 'Visibility of Smart Collections') }}
</li>
<li v-for="collection in collections"
:key="collection.id">
:key="collection.id"
>
<div class="label-container">
<span :class="collection.icon" class="icon icon-bw">
<span v-if="collection.id=='today'">{{ dayOfMonth }}</span>
<span v-if="collection.id=='today'">
{{ dayOfMonth }}
</span>
<label :for="'visibilityCollection-' + collection.id" class="title">{{ collection.displayName }}</label>
</span>
<label :for="'visibilityCollection-' + collection.id" class="title">
{{ collection.displayName }}
</label>
</div>
<select :id="'visibilityCollection-' + collection.id"
:value="collection.show"
@change="setVisibility({ id: collection.id, show: +$event.target.value })">
@change="setVisibility({ id: collection.id, show: +$event.target.value })"
>
<option v-for="collectionOption in collectionOptions"
:key="collectionOption.id"
:value="collectionOption.id"
:key="collectionOption.id">
>
{{ collectionOption.name }}
</option>
</select>
@ -68,8 +78,6 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
import { mapState, mapGetters, mapActions } from 'vuex'
export default {
components: {
},
data: function() {
return {
collectionOptions: [