From 49dfb32416bcd32211dd2c914b3e6eeac7cba6e7 Mon Sep 17 00:00:00 2001
From: Lloyd Wheeler <ltwheeler@ucdavis.edu>
Date: Wed, 6 Dec 2017 16:34:58 -0800
Subject: [PATCH] StudentSupportCallForm: Fix styling on add comment button
 #1450

---
 .../studentPreferenceTable.html               | 13 +++++++----
 .../ipaIconButton/ipaIconButton.css           | 23 +++++++++++++++----
 .../ipaIconButton/ipaIconButton.html          | 20 ++++++++++++++--
 .../directives/ipaIconButton/ipaIconButton.js |  4 +++-
 4 files changed, 47 insertions(+), 13 deletions(-)

diff --git a/app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html b/app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html
index 4e279992b..425f6a269 100644
--- a/app/instructionalSupport/studentSupportCallForm/directives/studentPreferences/studentPreferenceTable/studentPreferenceTable.html
+++ b/app/instructionalSupport/studentSupportCallForm/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
index 8c58c4548..4117eea39 100644
--- 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;
 }
\ No newline at end of file
diff --git a/app/shared/directives/ipaIconButton/ipaIconButton.html b/app/shared/directives/ipaIconButton/ipaIconButton.html
index e8a306afa..11c5fb72a 100644
--- 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
index 699a51d57..9feb3eb77 100644
--- 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