Skip to content

Commit c18a1c7

Browse files
indirectlylitindirectlylit
authored
Merge pull request #1903 from christianmemije/morestyleguide
Checkboxes & Radios
2 parents 8e0666b + afdff2d commit c18a1c7

File tree

25 files changed

+736
-397
lines changed

25 files changed

+736
-397
lines changed

‎kolibri/core/assets/src/core-app/apiSpec.js‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,8 @@ import elapsedTime from '../views/elapsed-time';
4545
import pointsIcon from '../views/points-icon';
4646
import authMessage from '../views/auth-message';
4747
import kBreadcrumbs from '../views/k-breadcrumbs';
48+
import kCheckbox from '../views/k-checkbox';
49+
import kRadioButton from '../views/k-radio-button';
4850
import router from '../router';
4951
import responsiveWindow from '../mixins/responsive-window';
5052
import responsiveElement from '../mixins/responsive-element';
@@ -100,6 +102,8 @@ export default {
100102
pointsIcon,
101103
authMessage,
102104
kBreadcrumbs,
105+
kCheckbox,
106+
kRadioButton,
103107
},
104108
router,
105109
mixins: {

‎kolibri/core/assets/src/styles/definitions.styl‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ $nav-width = 300px
3636
$portrait-breakpoint = 520px
3737
$medium-breakpoint = 619px
3838

39-
39+
$core-outline = $core-action-light 2px solid

‎kolibri/core/assets/src/styles/main.styl‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -61,10 +61,10 @@ a
6161
color: $core-action-dark
6262

6363
&:hover:focus
64-
outline: $core-action-light 2px solid
64+
outline: $core-outline
6565

6666
:focus
67-
outline: $core-action-light 2px solid
67+
outline: $core-outline
6868

6969
// https://davidwalsh.name/html5-boilerplate
7070
img

‎kolibri/core/assets/src/views/k-button/index.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -112,6 +112,10 @@
112112
font-weight: bold
113113
line-height: 36px
114114
text-transform: uppercase
115+
max-width: 100%
116+
white-space: nowrap
117+
overflow: hidden
118+
text-overflow: ellipsis
115119
&:focus
116120
outline: none
117121
&::-moz-focus-inner

‎kolibri/core/assets/src/views/k-checkbox/index.vue‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<template>
2+
3+
<div
4+
class="k-checkbox-container"
5+
:class="{ 'k-checkbox-disabled': disabled }"
6+
@click.prevent="toggleCheck"
7+
>
8+
<div class="tr">
9+
10+
<div class="k-checkbox" :class="{ 'k-checkbox-active': isActive }">
11+
<input
12+
ref="kCheckboxInput"
13+
type="checkbox"
14+
class="k-checkbox-input"
15+
:id="id"
16+
:checked="isCurrentlyChecked"
17+
:indeterminate.prop="isCurrentlyIndeterminate"
18+
:disabled="disabled"
19+
:title="label"
20+
@click.stop="toggleCheck"
21+
@focus="isActive = true"
22+
@blur="isActive = false"
23+
>
24+
25+
<mat-svg
26+
v-if="isCurrentlyIndeterminate"
27+
category="toggle"
28+
name="indeterminate_check_box"
29+
class="k-checkbox-indeterminate"
30+
/>
31+
<mat-svg
32+
v-else-if="!isCurrentlyIndeterminate && isCurrentlyChecked"
33+
category="toggle"
34+
name="check_box"
35+
class="k-checkbox-checked"
36+
/>
37+
<mat-svg
38+
v-else
39+
category="toggle"
40+
name="check_box_outline_blank"
41+
class="k-checkbox-unchecked"
42+
/>
43+
44+
</div>
45+
46+
<label
47+
v-if="label"
48+
class="k-checkbox-label"
49+
:for="id"
50+
:class="{ 'visuallyhidden': !showLabel }"
51+
>
52+
{{ label }}
53+
</label>
54+
55+
</div>
56+
</div>
57+
58+
</template>
59+
60+
61+
<script>
62+
63+
/**
64+
* Used for selection
65+
*/
66+
export default {
67+
name: 'k-checkbox',
68+
props: {
69+
/**
70+
* Label
71+
*/
72+
label: {
73+
type: String,
74+
required: true,
75+
},
76+
/**
77+
* Whether to show label
78+
*/
79+
showLabel: {
80+
type: Boolean,
81+
default: true,
82+
},
83+
/**
84+
* Checked state
85+
*/
86+
checked: {
87+
type: Boolean,
88+
default: false,
89+
},
90+
/**
91+
* Indeterminate state, overrides checked state
92+
*/
93+
indeterminate: {
94+
type: Boolean,
95+
default: false,
96+
},
97+
/**
98+
* Disabled state
99+
*/
100+
disabled: {
101+
type: Boolean,
102+
default: false,
103+
},
104+
},
105+
data: () => ({
106+
isCurrentlyChecked: false,
107+
isCurrentlyIndeterminate: false,
108+
isActive: false,
109+
}),
110+
computed: {
111+
id() {
112+
return `k-checkbox-${this._uid}`;
113+
},
114+
},
115+
watch: {
116+
checked(newCheckedState) {
117+
this.isCurrentlyChecked = newCheckedState;
118+
},
119+
indeterminate(newIndeterminateState) {
120+
this.isCurrentlyIndeterminate = newIndeterminateState;
121+
},
122+
},
123+
created() {
124+
this.isCurrentlyChecked = this.checked;
125+
this.isCurrentlyIndeterminate = this.indeterminate;
126+
},
127+
methods: {
128+
toggleCheck(event) {
129+
if (!this.disabled) {
130+
this.isCurrentlyChecked = !this.isCurrentlyChecked;
131+
this.$refs.kCheckboxInput.focus();
132+
this.isCurrentlyIndeterminate = false;
133+
/**
134+
* Emits change event
135+
*/
136+
this.$emit('change', this.isCurrentlyChecked, event);
137+
}
138+
},
139+
},
140+
};
141+
142+
</script>
143+
144+
145+
<style lang="stylus" scoped>
146+
147+
@require '~kolibri.styles.definitions'
148+
149+
$checkbox-height = 24px
150+
151+
.k-checkbox-container
152+
display: table
153+
margin-top: 8px
154+
margin-bottom: 8px
155+
156+
.tr
157+
display: table-row
158+
159+
.k-checkbox
160+
display: table-cell
161+
position: relative
162+
vertical-align: top
163+
width: $checkbox-height
164+
height: $checkbox-height
165+
cursor: pointer
166+
167+
.k-checkbox-input
168+
position: absolute
169+
top: 50%
170+
left: 50%
171+
transform: translate(-50%, -50%)
172+
opacity: 0
173+
cursor: pointer
174+
175+
.k-checkbox-checked, .k-checkbox-indeterminate
176+
fill: $core-action-normal
177+
178+
.k-checkbox-unchecked
179+
fill: $core-text-annotation
180+
181+
.k-checkbox-active
182+
.k-checkbox-checked, .k-checkbox-indeterminate
183+
outline: $core-outline
184+
185+
.k-checkbox-unchecked
186+
outline: $core-outline
187+
188+
.k-checkbox-label
189+
display: table-cell
190+
padding-left: 8px
191+
cursor: pointer
192+
line-height: 24px
193+
user-select: none
194+
195+
.k-checkbox-disabled
196+
svg
197+
fill: $core-grey-300
198+
199+
.k-checkbox, .k-checkbox-input, .k-checkbox-label
200+
cursor: default
201+
202+
.k-checkbox-label
203+
color: $core-text-disabled
204+
205+
</style>

0 commit comments

Comments
 (0)