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

Merge pull request #735 from nextcloud/fix-392

Browse source 
Increase clickable area of active elements
This commit is contained in:
Raimund Schlüßler 2019-11-26 11:19:11 +01:00 committed by GitHub
commit c8aefccd3e
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 74 additions and 75 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

67
css/src/style.scss
View file

@ -366,7 +366,7 @@
margin: 0; margin: 0;
cursor: text; cursor: text;
outline: none; outline: none;
min-height: 32px; min-height: 44px;
} }
} }
@ -428,9 +428,9 @@
cursor: text; cursor: text;
font-size: 100%; font-size: 100%;
margin: 0; margin: 0;
padding: 0 60px 0 32px; padding: 0 60px 0 44px;
width: 100%; width: 100%;
min-height: 36px; min-height: 44px;
} }
} }
@ -439,7 +439,7 @@
} }
.subtasks-container { .subtasks-container {
margin-left: 37px; margin-left: 44px;
} }
.task-body { .task-body {
@ -447,7 +447,7 @@
flex-direction: row; flex-direction: row;
flex-wrap: nowrap; flex-wrap: nowrap;
align-items: center; align-items: center;
height: 37px; height: 44px;
position: relative; position: relative;
border: 1px solid $gray_light; border: 1px solid $gray_light;
overflow: hidden; overflow: hidden;
@ -459,9 +459,9 @@
} }
.task-checkbox { .task-checkbox {
padding: 8px; padding: 11px;
height: 37px; height: 44px;
width: 37px; width: 44px;
border-right: 1px dotted $gray; border-right: 1px dotted $gray;
opacity: 0.5; opacity: 0.5;
} }
@ -481,7 +481,7 @@
.title { .title {
cursor: text; cursor: text;
display: inline-flex; display: inline-flex;
padding: 10px; padding: 14px;
overflow: hidden; overflow: hidden;
span { span {
@ -496,7 +496,7 @@
} }
.categories-list { .categories-list {
padding: 8px; padding: 11px;
overflow: hidden; overflow: hidden;
.category { .category {
@ -545,8 +545,8 @@
overflow: hidden; overflow: hidden;
&>div { &>div {
height: 37px; height: 44px;
padding: 10px; padding: 14px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
@ -996,23 +996,7 @@
} }
&.section-utils button { &.section-utils button {
box-sizing: border-box;
width: 44px;
height: 44px;
margin: 0;
cursor: pointer;
border: none;
background-color: transparent;
display: none; display: none;
padding: 14px;
&:hover .icon {
opacity: 0.7;
}
span {
display: block;
}
} }
} }
@ -1174,22 +1158,31 @@
opacity: 1; opacity: 1;
} }
.disabled .icon.detail-star:hover { button.inline {
cursor: not-allowed; box-sizing: border-box;
} width: 44px;
height: 44px;
margin: 0;
cursor: pointer;
border: none;
padding: 14px;
background-color: transparent !important;
border-radius: 0;
.reactive { &:hover .icon {
&:hover { opacity: 0.7;
.icon {
opacity: .7;
}
} }
.icon { span.icon {
display: block;
cursor: pointer; cursor: pointer;
} }
} }
.disabled .icon.detail-star:hover {
cursor: not-allowed;
}
input[type='checkbox'].checkbox { input[type='checkbox'].checkbox {
&:checked + label::before { &:checked + label::before {
background-image: var(--icon-checkmark-000) !important; background-image: var(--icon-checkmark-000) !important;

50
src/components/Task.vue
View file

@ -85,29 +85,35 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
<div v-if="task.note!=''"> <div v-if="task.note!=''">
<span class="icon icon-bw icon-note" /> <span class="icon icon-bw icon-note" />
</div> </div>
<div v-if="hasCompletedSubtasks" @click="toggleCompletedSubtasksVisibility(task)"> <button v-if="hasCompletedSubtasks"
<span :title="$t('tasks', 'Toggle visibility of completed subtasks.')" class="inline reactive no-nav"
:class="{'active': !task.hideCompletedSubtasks}" :title="$t('tasks', 'Toggle visibility of completed subtasks.')"
class="icon icon-bw icon-toggle toggle-completed-subtasks reactive no-nav" @click="toggleCompletedSubtasksVisibility(task)"
/>
</div>
<div v-if="Object.values(task.subTasks).length" @click="toggleSubtasksVisibility(task)">
<span :title="$t('tasks', 'Toggle visibility of all subtasks.')"
:class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
class="icon icon-bw subtasks reactive no-nav"
/>
</div>
<div v-if="!task.calendar.readOnly"
class="task-addsubtask add-subtask"
> >
<span :taskId="task.uri" <span :class="{'active': !task.hideCompletedSubtasks}"
:title="subtasksCreationPlaceholder" class="icon icon-bw icon-add reactive no-nav" class="icon icon-bw icon-toggle toggle-completed-subtasks"
@click="showSubtaskInput = true"
/> />
</div> </button>
<div class="task-star" @click="toggleStarred(task)"> <button v-if="Object.values(task.subTasks).length"
<span :class="[iconStar, {'disabled': task.calendar.readOnly}]" class="icon reactive no-nav" /> class="inline reactive no-nav"
</div> :title="$t('tasks', 'Toggle visibility of all subtasks.')"
@click="toggleSubtasksVisibility(task)"
>
<span :class="task.hideSubtasks ? 'icon-subtasks-hidden' : 'icon-subtasks-visible'"
class="icon icon-bw subtasks"
/>
</button>
<button v-if="!task.calendar.readOnly"
class="inline task-addsubtask add-subtask reactive no-nav"
:taskId="task.uri"
:title="subtasksCreationPlaceholder"
@click="showSubtaskInput = true"
>
<span class="icon icon-bw icon-add" :taskId="task.uri" />
</button>
<button class="inline task-star reactive no-nav" @click="toggleStarred(task)">
<span :class="[iconStar, {'disabled': task.calendar.readOnly}]" class="icon" />
</button>
</div> </div>
</div> </div>
<div class="subtasks-container"> <div class="subtasks-container">
@ -366,7 +372,7 @@ export default {
* @param {String} route the route to navigate to * @param {String} route the route to navigate to
*/ */
navigate: function($event) { navigate: function($event) {
if (!$event.target.classList.contains('no-nav') if (!$event.target.closest('.no-nav')
&& (this.$route.params.taskId !== this.task.uri || this.$route.params.collectionParam !== this.collectionParam)) { && (this.$route.params.taskId !== this.task.uri || this.$route.params.collectionParam !== this.collectionParam)) {
if (!this.task.loadedCompleted) { if (!this.task.loadedCompleted) {
this.getTasksFromCalendar({ calendar: this.task.calendar, completed: true, related: this.task.uid }) this.getTasksFromCalendar({ calendar: this.task.calendar, completed: true, related: this.task.uid })

32
src/components/TheDetails.vue
View file

@ -99,11 +99,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<div class="section-utils"> <div class="section-utils">
<button> <button class="inline reactive">
<span class="icon icon-color icon-checkmark-color reactive" /> <span class="icon icon-color icon-checkmark-color" />
</button> </button>
<button class="delete" @click="setProperty('start', null)"> <button class="delete inline reactive" @click="setProperty('start', null)">
<span class="icon icon-bw icon-trash reactive" /> <span class="icon icon-bw icon-trash" />
</button> </button>
</div> </div>
</li> </li>
@ -136,11 +136,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<div class="section-utils"> <div class="section-utils">
<button> <button class="inline reactive">
<span class="icon icon-color icon-checkmark-color reactive" /> <span class="icon icon-color icon-checkmark-color" />
</button> </button>
<button class="delete" @click="setProperty('due', null)"> <button class="delete inline reactive" @click="setProperty('due', null)">
<span class="icon icon-bw icon-trash reactive" /> <span class="icon icon-bw icon-trash" />
</button> </button>
</div> </div>
</li> </li>
@ -272,11 +272,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<div class="section-utils"> <div class="section-utils">
<button> <button class="inline reactive">
<span class="icon icon-color icon-checkmark-color reactive" /> <span class="icon icon-color icon-checkmark-color" />
</button> </button>
<button class="delete" @click="setProperty('priority', 0)"> <button class="delete inline reactive" @click="setProperty('priority', 0)">
<span class="icon icon-bw icon-trash reactive" /> <span class="icon icon-bw icon-trash" />
</button> </button>
</div> </div>
</li> </li>
@ -311,11 +311,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div> </div>
</div> </div>
<div class="section-utils"> <div class="section-utils">
<button> <button class="inline reactive">
<span class="icon icon-color icon-checkmark-color reactive" /> <span class="icon icon-color icon-checkmark-color" />
</button> </button>
<button class="delete" @click="setProperty('complete', 0)"> <button class="delete inline reactive" @click="setProperty('complete', 0)">
<span class="icon icon-bw icon-trash reactive" /> <span class="icon icon-bw icon-trash" />
</button> </button>
</div> </div>
</li> </li>