Permalink
Browse files

feat(checkbox): simple checkbox features

animation and show checked
bind to value with two way binding
bind to checked with two way binding
  • Loading branch information...
ZHollingshead committed Apr 13, 2017
1 parent a417b46 commit fde48f4773336a928e0ed1a29c27f871288fa4eb
@@ -1,11 +1,56 @@
styles.checkbox {
display: inline-flex;
align-items: center;
+ margin: auto;
+ cursor: pointer;
}
styles.checkbox>.box {
- width: 20px;
- height: 20px;
- border: #5d5d5d solid 2px;
- border-radius: 3px;
+ width: 20px;
+ height: 20px;
+ border: ${border || $swatches.grey.p700} solid 2px;
+ border-radius: 3px;
+}
+
+styles.checkbox>.box+label:not(:empty) {
+ margin-left: 8px;
+}
+
+styles.checkbox>.box:hover {
+ width: 20px;
+ height: 20px;
+ border: ${background || $design.accent} solid 2px;
+ border-radius: 3px;
+}
+
+styles.checkbox.checked>.box {
+ background-color: ${background || $design.accent};
+ border: ${background || $design.accent} solid 2px;
+}
+
+styles.checkbox>.box>.background-box {
+ width: 100%;
+ height: 100%;
+ transform: scale3d(0, 0, 0);
+ border-radius: 50%;
+ transition: 100ms;
+}
+
+styles.checkbox>.box>.background-box::after {
+ margin: auto;
+ display: block;
+ width: 6px;
+ height: 12px;
+ border: ${foreground || $design.accentForeground} solid 2px;
+ border-top: none;
+ border-left: none;
+ -webkit-transform-origin: 6px 6px;
+ transform-origin: 6px 6px;
+ transform: rotate(45deg);
+ content: ' ';
+}
+
+styles.checkbox.checked>.box>.background-box {
+ transform: scale3d(1, 1, 1);
+ border-radius: 0;
}
@@ -6,6 +6,7 @@ export class UxCheckboxTheme {
public background: string;
public foreground: string;
+ public border: string;
public backgroundDisabled: string;
public foregroundDisabled: string;
@@ -1,10 +1,10 @@
<template styles.checkbox>
<require from="./ux-checkbox-theme"></require>
- <div class="box">
+ <div class="box" click.trigger="toggle()">
+ <div class="background-box"></div>
</div>
- <label>
- <slot></slot>
- </label>
+ <!-- Leave Inline, uses :not(:empty) selector to determine margin -->
+ <label ref="label"><slot></slot></label>
</template>
@@ -1,22 +1,27 @@
-import {customElement, bindable, ViewResources, View, processAttributes} from 'aurelia-templating';
-import {inject} from 'aurelia-dependency-injection';
-import {StyleEngine} from '../styles/style-engine';
-import {Themable} from '../styles/themable';
-import {processDesignAttributes} from '../designs/design-attributes';
+import { customElement, bindable, ViewResources, View, processAttributes } from 'aurelia-templating';
+import { bindingMode } from 'aurelia-binding';
+import { inject } from 'aurelia-dependency-injection';
+import { StyleEngine } from '../styles/style-engine';
+import { Themable } from '../styles/themable';
+import { processDesignAttributes } from '../designs/design-attributes';
@inject(Element, ViewResources, StyleEngine)
@customElement('ux-checkbox')
@processAttributes(processDesignAttributes)
-export class UxButton implements Themable {
- @bindable public type = null;
- @bindable public size = null;
+export class UxCheckbox implements Themable {
@bindable public effect = null;
@bindable public disabled = false;
@bindable public theme = null;
+ @bindable({ defaultBindingMode: bindingMode.twoWay })
+ @bindable public checked = false;
+
+ @bindable({ defaultBindingMode: bindingMode.twoWay })
+ @bindable public value: any = false;
+
public view: View;
- constructor(public element: Element, public resources: ViewResources, private styleEngine: StyleEngine) {}
+ constructor(public element: Element, public resources: ViewResources, private styleEngine: StyleEngine) { }
public created(_: any, myView: View) {
this.view = myView;
@@ -26,9 +31,25 @@ export class UxButton implements Themable {
if (this.theme) {
this.styleEngine.applyTheme(this, this.theme);
}
+
+ if (this.checked) {
+ this.element.classList.add('checked');
+ }
}
public themeChanged(newValue: any) {
this.styleEngine.applyTheme(this, newValue);
}
-}
+
+ public checkedChanged(newValue: any) {
+ if (newValue) {
+ this.element.classList.add('checked');
+ } else {
+ this.element.classList.remove('checked');
+ }
+ }
+
+ public toggle() {
+ this.checked = !this.checked;
+ }
+}

0 comments on commit fde48f4

Please sign in to comment.