Merge pull request #735 from nextcloud/fix-392
Increase clickable area of active elements
This commit is contained in:
Raimund Schlüßler
GitHub
commit
c8aefccd3e
3 changed files with 74 additions and 75 deletions
|
|
@ -366,7 +366,7 @@
|
|||
margin: 0;
|
||||
cursor: text;
|
||||
outline: none;
|
||||
min-height: 32px;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -428,9 +428,9 @@
|
|||
cursor: text;
|
||||
font-size: 100%;
|
||||
margin: 0;
|
||||
padding: 0 60px 0 32px;
|
||||
padding: 0 60px 0 44px;
|
||||
width: 100%;
|
||||
min-height: 36px;
|
||||
min-height: 44px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -439,7 +439,7 @@
|
|||
}
|
||||
|
||||
.subtasks-container {
|
||||
margin-left: 37px;
|
||||
margin-left: 44px;
|
||||
}
|
||||
|
||||
.task-body {
|
||||
|
|
@ -447,7 +447,7 @@
|
|||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
height: 37px;
|
||||
height: 44px;
|
||||
position: relative;
|
||||
border: 1px solid $gray_light;
|
||||
overflow: hidden;
|
||||
|
|
@ -459,9 +459,9 @@
|
|||
}
|
||||
|
||||
.task-checkbox {
|
||||
padding: 8px;
|
||||
height: 37px;
|
||||
width: 37px;
|
||||
padding: 11px;
|
||||
height: 44px;
|
||||
width: 44px;
|
||||
border-right: 1px dotted $gray;
|
||||
opacity: 0.5;
|
||||
}
|
||||
|
|
@ -481,7 +481,7 @@
|
|||
.title {
|
||||
cursor: text;
|
||||
display: inline-flex;
|
||||
padding: 10px;
|
||||
padding: 14px;
|
||||
overflow: hidden;
|
||||
|
||||
span {
|
||||
|
|
@ -496,7 +496,7 @@
|
|||
}
|
||||
|
||||
.categories-list {
|
||||
padding: 8px;
|
||||
padding: 11px;
|
||||
overflow: hidden;
|
||||
|
||||
.category {
|
||||
|
|
@ -545,8 +545,8 @@
|
|||
overflow: hidden;
|
||||
|
||||
&>div {
|
||||
height: 37px;
|
||||
padding: 10px;
|
||||
height: 44px;
|
||||
padding: 14px;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
|
|
@ -996,23 +996,7 @@
|
|||
}
|
||||
|
||||
&.section-utils button {
|
||||
box-sizing: border-box;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
margin: 0;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background-color: transparent;
|
||||
display: none;
|
||||
padding: 14px;
|
||||
|
||||
&:hover .icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -1174,22 +1158,31 @@
|
|||
opacity: 1;
|
||||
}
|
||||
|
||||
.disabled .icon.detail-star:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
button.inline {
|
||||
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 {
|
||||
opacity: .7;
|
||||
}
|
||||
&:hover .icon {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.icon {
|
||||
span.icon {
|
||||
display: block;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
||||
.disabled .icon.detail-star:hover {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
input[type='checkbox'].checkbox {
|
||||
&:checked + label::before {
|
||||
background-image: var(--icon-checkmark-000) !important;
|
||||
|
|
|
|||
|
|
@ -85,29 +85,35 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
<div v-if="task.note!=''">
|
||||
<span class="icon icon-bw icon-note" />
|
||||
</div>
|
||||
<div v-if="hasCompletedSubtasks" @click="toggleCompletedSubtasksVisibility(task)">
|
||||
<span :title="$t('tasks', 'Toggle visibility of completed subtasks.')"
|
||||
:class="{'active': !task.hideCompletedSubtasks}"
|
||||
class="icon icon-bw icon-toggle toggle-completed-subtasks reactive no-nav"
|
||||
/>
|
||||
</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"
|
||||
<button v-if="hasCompletedSubtasks"
|
||||
class="inline reactive no-nav"
|
||||
:title="$t('tasks', 'Toggle visibility of completed subtasks.')"
|
||||
@click="toggleCompletedSubtasksVisibility(task)"
|
||||
>
|
||||
<span :taskId="task.uri"
|
||||
:title="subtasksCreationPlaceholder" class="icon icon-bw icon-add reactive no-nav"
|
||||
@click="showSubtaskInput = true"
|
||||
<span :class="{'active': !task.hideCompletedSubtasks}"
|
||||
class="icon icon-bw icon-toggle toggle-completed-subtasks"
|
||||
/>
|
||||
</div>
|
||||
<div class="task-star" @click="toggleStarred(task)">
|
||||
<span :class="[iconStar, {'disabled': task.calendar.readOnly}]" class="icon reactive no-nav" />
|
||||
</div>
|
||||
</button>
|
||||
<button v-if="Object.values(task.subTasks).length"
|
||||
class="inline reactive no-nav"
|
||||
: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 class="subtasks-container">
|
||||
|
|
@ -366,7 +372,7 @@ export default {
|
|||
* @param {String} route the route to navigate to
|
||||
*/
|
||||
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)) {
|
||||
if (!this.task.loadedCompleted) {
|
||||
this.getTasksFromCalendar({ calendar: this.task.calendar, completed: true, related: this.task.uid })
|
||||
|
|
|
|||
|
|
@ -99,11 +99,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
</div>
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
<button class="inline reactive">
|
||||
<span class="icon icon-color icon-checkmark-color" />
|
||||
</button>
|
||||
<button class="delete" @click="setProperty('start', null)">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
<button class="delete inline reactive" @click="setProperty('start', null)">
|
||||
<span class="icon icon-bw icon-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -136,11 +136,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
</div>
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
<button class="inline reactive">
|
||||
<span class="icon icon-color icon-checkmark-color" />
|
||||
</button>
|
||||
<button class="delete" @click="setProperty('due', null)">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
<button class="delete inline reactive" @click="setProperty('due', null)">
|
||||
<span class="icon icon-bw icon-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -272,11 +272,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
</div>
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
<button class="inline reactive">
|
||||
<span class="icon icon-color icon-checkmark-color" />
|
||||
</button>
|
||||
<button class="delete" @click="setProperty('priority', 0)">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
<button class="delete inline reactive" @click="setProperty('priority', 0)">
|
||||
<span class="icon icon-bw icon-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
|
|
@ -311,11 +311,11 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
|
|||
</div>
|
||||
</div>
|
||||
<div class="section-utils">
|
||||
<button>
|
||||
<span class="icon icon-color icon-checkmark-color reactive" />
|
||||
<button class="inline reactive">
|
||||
<span class="icon icon-color icon-checkmark-color" />
|
||||
</button>
|
||||
<button class="delete" @click="setProperty('complete', 0)">
|
||||
<span class="icon icon-bw icon-trash reactive" />
|
||||
<button class="delete inline reactive" @click="setProperty('complete', 0)">
|
||||
<span class="icon icon-bw icon-trash" />
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
|
|
|
|||
Loading…
Reference in a new issue