StudentSupportCallForm: Fix styling on add comment button #1450

ucdavis · Jan 16, 2018 · 49dfb32 · 49dfb32
1 parent 747a56d
commit 49dfb32
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 13 deletions.
diff --git a/...CallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html b/...CallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html
@@ -29,12 +29,14 @@
 							<ipa-icon-button
 								icon-class="'glyphicon glyphicon-chevron-up'"
 								on-click="updatePreferencesOrder(preference, -1)"
-								is-disabled="$first">
+								is-disabled="$first"
+								size="'slim'">
 							</ipa-icon-button>
 							<ipa-icon-button
 								icon-class="'glyphicon glyphicon-chevron-down'"
 								on-click="updatePreferencesOrder(preference, 1)"
-								is-disabled="$last">
+								is-disabled="$last"
+								size="'slim'">
 							</ipa-icon-button>
 						</div>
 						<div class="student-preference-table__priority-label">
@@ -47,9 +49,10 @@
 						{{ preference.subjectCode }} {{ preference.courseNumber }} - {{ preference.sequencePattern }}
 					</div>
 					<div class="ipa-table__body-cell ipa-table__body-cell--medium">
-						<button class="btn btn-default" ng-click="openPreferenceCommentModal(preference)">
-							Add preference comments
-						</button>
+						<ipa-icon-button
+							on-click="openPreferenceCommentModal(preference)"
+							button-text="'Add Comments'">
+						</ipa-icon-button>
 					</div>
 					<div class="ipa-table__body-cell ipa-table__body-cell--small">
 						<ipa-icon-button

diff --git a/app/shared/directives/ipaIconButton/ipaIconButton.css b/app/shared/directives/ipaIconButton/ipaIconButton.css
@@ -10,7 +10,19 @@
 	border-radius: 0.25em;
 	cursor: pointer;
 	width: fit-content;
-	padding-right: 5px;
+}
+
+.ipa-icon-button__icon-container {
+	padding-right: 10px;
+	padding-left: 10px;
+	padding-top: 7px;
+	padding-bottom: 7px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.ipa-icon-button__text {
 	padding-left: 5px;
 }
 
@@ -24,8 +36,9 @@
 	border-color: rgba(27,31,35,0.35);
 }
 
-.ipa-icon__icon-container {
-	display: flex;
-	align-items: center;
-	justify-content: center;
+.ipa-icon-button__icon-container--slim {
+	padding-top: 0px;
+	padding-bottom: 0px;
+	padding-right: 5px;
+	padding-left: 5px;
 }
diff --git a/app/shared/directives/ipaIconButton/ipaIconButton.html b/app/shared/directives/ipaIconButton/ipaIconButton.html
@@ -5,27 +5,43 @@
 ng-class="{'ipa-icon-button--disabled': isDisabled }">
 
 	<div ng-show="!(isDisabled)">
+		<!-- with confirmation -->
 		<div
 		ng-show="confirmMessage && confirmMessage.length > 0"
 		class="ipa-icon-button__icon-container"
+		ng-class="{'ipa-icon-button__icon-container--slim': size == 'slim'}"
 		confirm-button="onClick()"
 		message="{{confirmMessage}}"
 		yes="Confirm" no="Cancel" placement="top">
+			<div class="ipa-icon-button__text" ng-show="buttonText">
+				{{ buttonText }}
+			</div>
 			<div ng-class="iconClass">
 			</div>
 		</div>
 
+		<!-- without confirmation -->
 		<div
 		ng-show="!confirmMessage || confirmMessage.length == 0"
 		class="ipa-icon-button__icon-container"
+		ng-class="{'ipa-icon-button__icon-container--slim': size == 'slim'}"
 		ng-click="onClick()">
-			<div ng-class="iconClass">
+		<div class="ipa-icon-button__text" ng-show="buttonText">
+			{{ buttonText }}
+		</div>
+		<div ng-class="iconClass">
 			</div>
 		</div>
 	</div>
 
+	<!-- disabled state -->
 	<div ng-show="(isDisabled)">
-		<div class="ipa-icon-button__icon-container">
+		<div
+		class="ipa-icon-button__icon-container"
+		ng-class="{'ipa-icon-button__icon-container--slim': size == 'slim'}">
+			<div class="ipa-icon-button__text" ng-show="buttonText">
+				{{ buttonText }}
+			</div>
 			<div ng-class="iconClass">
 			</div>
 		</div>

diff --git a/app/shared/directives/ipaIconButton/ipaIconButton.js b/app/shared/directives/ipaIconButton/ipaIconButton.js
@@ -18,7 +18,9 @@ sharedApp.directive("ipaIconButton", this.ipaIconButton = function () {
 			iconClass: '<?',
 			isDisabled: '<?',
 			tooltipMessage: '<?',
-			confirmMessage: '<?'
+			confirmMessage: '<?',
+			buttonText: '<?',
+			size: '<?'
 		},
 		link: function(scope, element, attrs) {
 			// Intentionally empty