Only render elements when necessary

This speeds up the rendering quite a bit
This commit is contained in:
Raimund Schlüßler 2018-11-13 08:28:18 +01:00
parent fe83b5801a
commit 71738d7a9a
No known key found for this signature in database
GPG key ID: 036FA7EB1A599178
3 changed files with 5 additions and 5 deletions

View file

@ -50,7 +50,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<span class="task-star" @click="toggleStarred(task.uri)"> <span class="task-star" @click="toggleStarred(task.uri)">
<span :class="[iconStar]" class="icon icon-task-star right large reactive no-nav" /> <span :class="[iconStar]" class="icon icon-task-star right large reactive no-nav" />
</span> </span>
<span v-show="!task.calendar.readOnly" <span v-if="!task.calendar.readOnly"
class="task-addsubtask add-subtask"> class="task-addsubtask add-subtask">
<span :taskId="task.uri" <span :taskId="task.uri"
:title="subtasksCreationPlaceholder(task.summary)" class="icon icon-add right large reactive no-nav" :title="subtasksCreationPlaceholder(task.summary)" class="icon icon-add right large reactive no-nav"
@ -71,7 +71,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<span class="icon icon-note right large" /> <span class="icon icon-note right large" />
</span> </span>
<span :class="{overdue: overdue(task.due)}" class="duedate">{{ task.due | formatDate }}</span> <span :class="{overdue: overdue(task.due)}" class="duedate">{{ task.due | formatDate }}</span>
<span v-show="$route.params.collectionId=='week'" class="listname">{{ task.calendar.displayname }}</span> <span v-if="$route.params.collectionId=='week'" class="listname">{{ task.calendar.displayname }}</span>
<div class="task-info-wrapper"> <div class="task-info-wrapper">
<div class="title"> <div class="title">
<span>{{ task.summary }}</span> <span>{{ task.summary }}</span>
@ -90,7 +90,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
dnd-drop="dropAsSubtask(event, item, index)" dnd-drop="dropAsSubtask(event, item, index)"
dnd-dragover="dragover(event, index)"> dnd-dragover="dragover(event, index)">
<li v-click-outside="($event) => cancelCreation($event)" <li v-click-outside="($event) => cancelCreation($event)"
v-show="showSubtaskInput" v-if="showSubtaskInput"
class="task-item ui-draggable add-subtask"> class="task-item ui-draggable add-subtask">
<form name="addTaskForm" @submit="addTask"> <form name="addTaskForm" @submit="addTask">
<input v-model="newTaskName" <input v-model="newTaskName"

View file

@ -21,7 +21,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template> <template>
<div v-if="calendar"> <div v-if="calendar">
<div v-show="!calendar.readOnly" <div v-if="!calendar.readOnly"
id="add-task" id="add-task"
class="add-task"> class="add-task">
<form name="addTaskForm" @submit="addTask"> <form name="addTaskForm" @submit="addTask">

View file

@ -21,7 +21,7 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<template> <template>
<div v-if="calendar"> <div v-if="calendar">
<div v-show="collectionId !== 'completed' && !calendar.readOnly" <div v-if="collectionId !== 'completed' && !calendar.readOnly"
id="add-task" id="add-task"
class="add-task"> class="add-task">
<form name="addTaskForm" @submit="addTask"> <form name="addTaskForm" @submit="addTask">