reivilibre/TaskBoard
Archived
1
0
Fork 0
Code Issues 1 Pull Requests Projects Releases 2 Wiki Activity

Use toggles instead of checkboxes

Browse Source
This commit is contained in:
kiswa 2016-08-26 21:39:38 +00:00
parent 271fc5d1ba
commit 84bf2b46c2
3 changed files with 63 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/settings/board-admin/board-admin.component.html
View File

@ -73,9 +73,19 @@
</ul>
</td>
<td>
<a href="" title="Edit Board"><i class="icon icon-edit color-primary"></i></a>
<a href="" title="Remove Board"><i class="icon icon-trash-empty color-secondary"></i></a>
<label><input type="checkbox" checked> Active</label>
<a href="javascript:" title="Edit Board"
(click)="showModal('Edit', board)">
<i class="icon icon-edit color-primary"></i>
</a>
<a href="javascript:" title="Remove Board"
(click)="showConfirmModal(board)">
<i class="icon icon-trash-empty color-secondary"></i>
</a>
<label>
<input type="checkbox" class="hidden" [ngModel]="board.is_active">
<span class="toggle"></span>
Active
</label>
</td>
</tr>
</tbody>

9
src/app/settings/user-settings/user-settings.component.html
View File

@ -49,9 +49,10 @@
</label>
<label>
Display tasks side-by-side in colums?
<input type="checkbox"
<input type="checkbox" class="hidden"
[ngModel]="userOptions.multiple_tasks_per_row"
(ngModelChange)="onOptionChange('mult_tasks', $event)">
<span class="toggle"></span>
</label>
</div>
@ -87,15 +88,17 @@
<div class="hold-bottom">
<label>
Show animations?
<input type="checkbox"
<input type="checkbox" class="hidden"
[ngModel]="userOptions.show_animations"
(ngModelChange)="onOptionChange('show_anim', $event)">
<span class="toggle"></span>
</label>
<label>
Show Assignee on task cards?
<input type="checkbox"
<input type="checkbox" class="hidden"
[ngModel]="userOptions.show_assignee"
(ngModelChange)="onOptionChange('show_assign', $event)">
<span class="toggle"></span>
</label>
</div>
</div>

44
src/scss/_core.scss
View File

@ -179,3 +179,47 @@ button {
}
}
.hidden {
display: none;
}
.toggle {
position: relative;
vertical-align: middle;
&::before {
background-color: $color-secondary;
border-radius: 3px;
content: ' ';
display: inline-block;
height: 1em;
padding: 5px 7px;
transition: background 300ms;
width: 30px;
}
&::after {
background-color: $white;
border: 1px solid $color-border;
border-radius: 2px;
content: ' ';
display: inline-block;
height: 1.5em;
left: 0;
position: absolute;
top: -.25em;
transition: transform 150ms;
width: 15px;
}
}
.hidden:checked + .toggle {
&::before {
background-color: $color-primary;
}
&::after {
transform: translate(15px);
}
}