Add reusable checkbox directive #1450

ucdavis · Jan 16, 2018 · 0cfbcd9 · 0cfbcd9
1 parent 0b020d4
commit 0cfbcd9
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 0 deletions.
diff --git a/app/shared/directives/ipaCheckbox/ipaCheckbox.css b/app/shared/directives/ipaCheckbox/ipaCheckbox.css
@@ -0,0 +1,27 @@
+.ipa-checkbox {
+	height: 18px;
+	width: 18px;
+	border: 1px solid #303641;
+	border-radius: 3px;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	transition: 250ms all cubic-bezier(0.455, 0.030, 0.515, 0.955);
+	cursor: pointer;
+}
+
+.ipa-checkbox__inner {
+	height: 12px;
+	width: 12px;
+	transition: 250ms all cubic-bezier(0.455, 0.030, 0.515, 0.955);
+}
+
+.ipa-checkbox__inner--checked {
+	border: 1px solid #303641;
+	border-radius: 2px;
+	background-color: #303641;
+}
+
+.ipa-checkbox:hover {
+	box-shadow: rgba(48, 54, 65, 0.1) 0px 0px 0px 2px;
+}
diff --git a/app/shared/directives/ipaCheckbox/ipaCheckbox.html b/app/shared/directives/ipaCheckbox/ipaCheckbox.html
@@ -0,0 +1,4 @@
+<div>
+	<div class="ipa-checkbox" ng-click="clickAction()">
+		<div class="ipa-checkbox__inner" ng-class="{ 'ipa-checkbox__inner--checked': isChecked }"></div>
+</div>
diff --git a/app/shared/directives/ipaCheckbox/ipaCheckbox.js b/app/shared/directives/ipaCheckbox/ipaCheckbox.js
@@ -0,0 +1,20 @@
+sharedApp.directive("ipaCheckbox", this.ipaCheckbox = function() {
+	return {
+		restrict: 'E', // Use this via an element selector <ipa-modal></ipa-modal>
+		templateUrl: 'ipaCheckbox.html', // directive html found here:
+		scope: {
+			isChecked: '=',
+			clickAction: '&'
+		},
+		replace: true, // Replace with the template below
+		link: function(scope, element, attrs) {
+			/* Example Usage:
+			<ipa-checkbox
+				is-checked="supportCall.commentsRequired"
+				click=action="toggleThing()">
+			</ipa-checkbox>
+			*/
+
+		}
+	};
+});