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

Merge pull request #572 from nextcloud/checkbox

Browse source 
first try to implement the nextcloud checkbox design
This commit is contained in:
Raimund Schlüßler 2019-09-02 20:48:19 +02:00 committed by GitHub
commit 71b630262c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
5 changed files with 75 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
css/src/style.scss
View file

@ -853,6 +853,15 @@
span {
cursor: pointer;
}
input[type='checkbox'].checkbox + label {
&::before {
margin-left: 0;
}
>span {
font-weight: bold;
margin-left: 10px;
}
}
}
&.editing {
@ -1181,6 +1190,29 @@
}
}
.task-checkbox,
.detail-checkbox {
float: left;
margin: 7px;
margin-right: 3px;
opacity: 0.5;
}
.detail-checkbox {
padding: 8px;
}
input[type='checkbox'].checkbox {
&:checked + label::before {
background-image: var(--icon-checkmark-000);
background-color: unset;
border-color: unset;
}
&:disabled + label::before {
background-color: var(--color-background-darker) !important;
}
}
.icon {
height: 16px;
width: 16px;
@ -1212,27 +1244,6 @@
opacity: 1 !important;
}
&.task-checkbox,
&.detail-checkbox {
border-radius: 3px;
border: 1px solid var(--color-main-text);
float: left;
margin: 9px;
opacity: 0.5;
&:not(.icon-checkmark) {
background: unset;
}
&:not(.disabled):hover {
opacity: 0.7;
}
&.disabled {
cursor: not-allowed;
}
}
&.right {
float: right;
}

2
img/src/bw/checkmark.svg
View file

@ -1 +1 @@
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.1754 13.693c2.5618-5.7886 5.8526-9.6003 7.3076-11.335 1.183-1.401 0.719-1.177 0.199-0.8234-2.137 1.4563-6.1287 6.1399-7.6559 7.7638-0.2793 0.299-0.9223 1.0036-1.067 1.0036-0.1596 0-0.7052-0.263-1.0197-0.4552-1.1895-0.7316-2.3298-1.4514-3.0451-1.7203-1.5226-0.5738-1.0921-0.0263-1.0048 0.1568 0.2709 0.5679 3.9479 3.6637 5.1652 5.1237 0.66413 0.7746 0.72507 1.2925 1.1207 0.286z" stroke="#000" stroke-miterlimit="10" stroke-width=".535"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16"><path d="m2.35 7.3 4 4l7.3-7.3" stroke="#000" stroke-width="2" fill="none"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 553 B

After

Width:  |  Height:  |  Size: 180 B

2
img/src/color/checkmark-color.svg
View file

@ -1 +1 @@
<svg width="16" height="16" version="1.1" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="m7.1754 13.693c2.5618-5.7886 5.8526-9.6003 7.3076-11.335 1.183-1.401 0.719-1.177 0.199-0.8234-2.137 1.4563-6.1287 6.1399-7.6559 7.7638-0.2793 0.299-0.9223 1.0036-1.067 1.0036-0.1596 0-0.7052-0.263-1.0197-0.4552-1.1895-0.7316-2.3298-1.4514-3.0451-1.7203-1.5226-0.5738-1.0921-0.0263-1.0048 0.1568 0.2709 0.5679 3.9479 3.6637 5.1652 5.1237 0.66413 0.7746 0.72507 1.2925 1.1207 0.286z" fill="#71b73d" stroke="#71b73d" stroke-miterlimit="10" stroke-width=".535"/></svg>
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16" version="1.1" viewBox="0 0 16 16"><path d="m2.35 7.3 4 4l7.3-7.3" stroke="#71b73d" stroke-width="2" fill="none"/></svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 571 B

After

Width:  |  Height:  |  Size: 183 B

21
src/components/Task.vue
View file

@ -40,14 +40,19 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
/>
</div>
<span :aria-checked="task.completed"
:aria-label="t('tasks', 'Task is completed')"
class="task-checkbox"
name="toggleCompleted"
role="checkbox"
@click="toggleCompleted(task)"
>
<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw task-checkbox reactive no-nav" />
<span class="task-checkbox">
<input :id="'toggleCompleted_' + task.uid"
type="checkbox"
class="checkbox"
name="toggleCompleted"
:class="{'disabled': task.calendar.readOnly}"
:checked="task.completed"
:aria-checked="task.completed"
:disabled="task.calendar.readOnly"
:aria-label="t('tasks', 'Task is completed')"
@click="toggleCompleted(task)"
>
<label class="reactive no-nav" :for="'toggleCompleted_' + task.uid" />
</span>
<span class="icon task-separator" />
<span class="task-star" @click="toggleStarred(task)">

43
src/components/TheDetails.vue
View file

@ -26,14 +26,21 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
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)"
>
<span :class="{'icon-checkmark': task.completed, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
</a>
<span class="detail-checkbox">
<input :id="'detailsToggleCompleted_' + task.uid"
type="checkbox"
class="checkbox"
name="detailsToggleCompleted"
:class="{'disabled': task.calendar.readOnly}"
:checked="task.completed"
:aria-checked="task.completed"
:disabled="task.calendar.readOnly"
:aria-label="t('tasks', 'Task is completed')"
@click="toggleCompleted(task)"
>
<label :for="'detailsToggleCompleted_' + task.uid" />
</span>
<a class="star reactive" @click="toggleStarred(task)">
<span :class="[{'disabled': task.calendar.readOnly}, iconStar]"
class="icon"
@ -130,16 +137,22 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
</div>
</li>
<li v-show="isAllDayPossible"
:aria-checked="task.allDay"
class="section detail-all-day reactive"
role="checkbox"
@click="toggleAllDay(task)"
>
<div>
<span :class="{'icon-checkmark': task.allDay, 'disabled': task.calendar.readOnly}" class="icon icon-bw detail-checkbox" />
<span class="section-title">
{{ t('tasks', 'All day') }}
</span>
<input id="isAllDayPossible"
type="checkbox"
class="checkbox"
name="isAllDayPossible"
:class="{'disabled': task.calendar.readOnly}"
:aria-checked="task.allDay"
:checked="task.allDay"
:disabled="task.calendar.readOnly"
@click="toggleAllDay(task)"
>
<label for="isAllDayPossible">
<span>{{ t('tasks', 'All day') }}</span>
</label>
</div>
</li>
<li class="section detail-calendar reactive">