StudentSupportCallForm: Add ipaButton shared directive #1450

ucdavis · Jan 16, 2018 · 94b395c · 94b395c
1 parent f4c1d15
commit 94b395c
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 0 deletions.
diff --git a/app/shared/directives/ipaButton/ipaButton.css b/app/shared/directives/ipaButton/ipaButton.css
@@ -0,0 +1,57 @@
+.ipa-button {
+	word-wrap: break-word;
+	display: inline-flex;
+	font-size: 12px;
+	color: #24292e;
+	font-weight: 500;
+	padding: 3px 6px 3px 6px;
+	user-select: none;
+}
+
+.ipa-button .icon-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ipa-button .button-text-container {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding-left: 5px;
+}
+
+.ipa-button.skin-light {
+	background-color: #eff3f6;
+	background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+	border: 1px solid rgba(27,31,35,0.2);
+	border-radius: 0.25em;
+	cursor: pointer;
+}
+
+.ipa-button.skin-light:hover {
+	background-color: #e6ebf1;
+	background-image: linear-gradient(-180deg, #f0f3f6 0%, #e6ebf1 90%);
+	border-color: rgba(27,31,35,0.35);
+}
+
+.ipa-button.skin-light.disabled,
+.ipa-button.skin-light.disabled:hover {
+
+}
+
+.ipa-button.skin-dark {
+	background-color: #eff3f6;
+	background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+	border: 1px solid rgba(27,31,35,0.2);
+	border-radius: 0.25em;
+	cursor: pointer;
+}
+
+.ipa-button.skin-danger {
+	background-color: #eff3f6;
+	background-image: linear-gradient(-180deg, #fafbfc 0%, #eff3f6 90%);
+	border: 1px solid rgba(27,31,35,0.2);
+	border-radius: 0.25em;
+	cursor: pointer;
+}
diff --git a/app/shared/directives/ipaButton/ipaButton.html b/app/shared/directives/ipaButton/ipaButton.html
@@ -0,0 +1,12 @@
+<div
+class="ipa-button"
+ng-class="{ 'skin-light' : color == 'light', 'skin-dark' : color == 'dark', 'skin-danger' : color == 'danger' }"
+ng-click="onClick()">
+	<div class="icon-container">
+		<div ng-class="iconClass">
+		</div>
+	</div>
+	<div class="button-text-container">
+		{{ buttonText }}
+	</div>
+</div>
diff --git a/app/shared/directives/ipaButton/ipaButton.js b/app/shared/directives/ipaButton/ipaButton.js
@@ -0,0 +1,29 @@
+/** Example Usage:
+<ipa-button
+	button-text="'waffle'"
+	color="'light'"
+	icon-class="'glyphicon glyphicon-envelope'"
+	on-click="testComment()">
+</ipa-button>
+
+**/
+
+sharedApp.directive("ipaButton", this.ipaButton = function () {
+	return {
+		restrict: 'E',
+		templateUrl: 'ipaButton.html',
+		replace: true,
+		scope: {
+			buttonText: '<?',
+			onClick: '&?',
+			argument: '<?',
+			isDisabled: '<?',
+			hoverText: '<?',
+			color: '<?',
+			iconClass: '<?',
+		},
+		link: function(scope, element, attrs) {
+			// Intentionally empty
+		}
+	};
+});