SAK-29568 : Change images in Feedback tool to use Font Awesome font a…

…nd add alt attribute
stetsche · Jun 30, 2015 · b02c8ed · b02c8ed
1 parent 578f14e
commit b02c8ed
Show file tree

Hide file tree

Showing 4 changed files with 100 additions and 25 deletions.
diff --git a/feedback/src/main/resources/org/sakaiproject/feedback.properties b/feedback/src/main/resources/org/sakaiproject/feedback.properties
@@ -7,6 +7,7 @@ state_technical_reporttechnical=Report a technical problem?
 no_suggestion_url='Feature Suggestion Url' is not set. Check the appropriate property.
 no_technical_address='Technical Address' is not set. Check the appropriate property.
 
+close=Close
 home_label=Home
 content_label=Content Report
 technical_label=Technical Report

diff --git a/feedback/src/webapp/WEB-INF/bootstrap.jsp b/feedback/src/webapp/WEB-INF/bootstrap.jsp
@@ -60,12 +60,12 @@
             <div class="portletBody">
                 <div id="feedback-error-message-wrapper">
                     <div>
-                        <img src="/library/image/silk/exclamation.png" /><span></span><a id="feedback-error-close" href="javascript:;"><img src="/library/image/silk/cross.png" /></a>
+                        <span></span><a href="javascript:;" alt="${i18n.close}" title="${i18n.close}"></a>
                     </div>
                 </div>
                 <div id="feedback-info-message-wrapper">
                     <div>
-                        <img src="/library/image/silk/information.png" /><span></span><a id="feedback-info-close" href="javascript:;"><img src="/library/image/silk/cross.png" /></a>
+                        <span></span><a href="javascript:;" alt="${i18n.close}" title="${i18n.close}"></a>
                     </div>
                 </div>
                 <div id="feedback-content"></div>
@@ -74,4 +74,4 @@
         <script type="text/javascript" src="/feedback-tool/js/feedback.js"></script>
 
     </body>
-</html>
+</html>
diff --git a/feedback/src/webapp/WEB-INF/templates/home.handlebars b/feedback/src/webapp/WEB-INF/templates/home.handlebars
@@ -34,7 +34,6 @@
 
     {{#if showTechnicalPanel}}
         <div class="feedback-box" id="feedback-tech-problem">
-        	<div>technicalToAddress : {{technicalToAddress}}</div>
             <h3>{{translate 'technical_title'}}</h3>
             <ul>{{translate 'technical_explanation'}}</ul>
         	{{#if enableTechnical}}

diff --git a/feedback/src/webapp/css/feedback.css b/feedback/src/webapp/css/feedback.css
@@ -52,6 +52,17 @@
     color: red;
 }
 
+#feedback-error-message-wrapper > div:before {
+	content: "\f06a"; /* fa-exclamation-circle */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: red;
+    font-size: 18px;
+}
+
 #feedback-info-message-wrapper > div{
     display: inline-block;
     padding: 5px;
@@ -60,14 +71,37 @@
     color: green;
 }
 
+#feedback-info-message-wrapper > div:before {
+	content: "\f05a"; /* fa-info-circle */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: green;
+    font-size: 18px;
+}
+
 #feedback-error-message-wrapper span, #feedback-info-message-wrapper span {
-    margin-right: 10px;
-    margin-left: 10px;
+    margin-right: 12px;
+    margin-left: 0px;
 }
 
-#feedback-error-message-wrapper img, #feedback-info-message-wrapper img {
-    margin: 0px;
+#feedback-error-message-wrapper a, #feedback-info-message-wrapper a {
+    margin-right: 0px;
     padding: 0px;
+    text-decoration: none;
+}
+
+#feedback-error-message-wrapper a:before, #feedback-info-message-wrapper a:before {
+    content: "\f00d"; /* fa-times */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: red;
+    font-size: 18px;
 }
 
 .feedback-explanation {
@@ -136,24 +170,65 @@
     padding-left: 8px;
 }
 
-#feedback-content-problem h3, #feedback-no-panels h3 {
-    background: url('/library/image/silk/page_white_error.png') no-repeat scroll left top transparent;
-    padding-left: 20px;
-}
-
-#feedback-ask-help h3 {
-    background: url('/library/image/silk/user_comment.png') no-repeat scroll left top transparent;
-    padding-left: 20px;
-}
-
-#feedback-tech-problem h3 {
-    background: url('/library/image/silk/bug.png') no-repeat scroll left top transparent;
-    padding-left: 20px;
+.feedback-box h3 {
+	padding-left: 25px;
+    position:relative;
 }
 
-#feedback-improvement h3 {
-    background: url('/library/image/silk/lightbulb.png') no-repeat scroll left top transparent;
-    padding-left: 20px;
+#feedback-content-problem h3:before, #feedback-no-panels h3:before {
+    content: "\f071"; /* fa-exclamation-triangle */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: red;
+    font-size: 18px;
+    position: absolute;
+    top: 10px;
+    left: 0;
+}
+
+#feedback-ask-help h3:before {
+    content: "\f0e5"; /* fa-comment-o */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: blue;
+    font-size: 18px;
+    position: absolute;
+    top: 0px;
+    left: 0;
+}
+
+#feedback-tech-problem h3:before {
+    content: "\f188"; /* fa-bug */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: green;
+    font-size: 18px;
+    position: absolute;
+    top: 10px;
+    left: 0;
+}
+
+#feedback-improvement h3:before {
+    content: "\f0eb"; /* fa-lightbulb-o */
+    font-family: FontAwesome;
+    font-style: normal;
+    font-weight: normal;
+    text-decoration: inherit;
+/*--adjust as necessary--*/
+    color: orange;
+    font-size: 18px;
+    position: absolute;
+    top: 10px;
+    left: 0;
 }
 
 #feedback-toolbar {
@@ -169,4 +244,4 @@
 }
 #feedback-no-panels {
 	width:240px;
-}
+}