From cb19cdd2569f55a228bbedaebf5af73649928f61 Mon Sep 17 00:00:00 2001
From: Chris Rodriguez <github@chrisrodriguez.me>
Date: Thu, 5 May 2016 08:44:21 -0400
Subject: [PATCH] AC-405 calculator image to icon

---
 lms/static/coffee/src/calculator.coffee         |  8 ++++++++
 lms/static/sass/course/modules/_calculator.scss | 17 +++++++----------
 lms/templates/calculator/toggle_calculator.html |  1 +
 3 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/lms/static/coffee/src/calculator.coffee b/lms/static/coffee/src/calculator.coffee
index dd8c02f50c..3224aeb719 100644
--- a/lms/static/coffee/src/calculator.coffee
+++ b/lms/static/coffee/src/calculator.coffee
@@ -51,6 +51,7 @@ class @Calculator
     $calcWrapper = $('#calculator_wrapper')
     text = gettext('Open Calculator')
     isExpanded = false
+    icon = 'fa-calculator'
 
     $('div.calc-main').toggleClass 'open'
     if $calc.hasClass('closed')
@@ -59,6 +60,7 @@ class @Calculator
         .attr 'tabindex', -1
     else
       text = gettext('Close Calculator')
+      icon = 'fa-close'
       isExpanded = true
 
       $calcWrapper
@@ -74,6 +76,12 @@ class @Calculator
         'title': text
         'aria-expanded': isExpanded
       .find('.utility-control-label').text text
+      
+    $calc
+      .find('.icon')
+      .removeClass('fa-calculator')
+      .removeClass('fa-close')
+      .addClass(icon)
 
     $calc.toggleClass 'closed'
 
diff --git a/lms/static/sass/course/modules/_calculator.scss b/lms/static/sass/course/modules/_calculator.scss
index 6dc086e28f..38196f8a9f 100644
--- a/lms/static/sass/course/modules/_calculator.scss
+++ b/lms/static/sass/course/modules/_calculator.scss
@@ -17,23 +17,20 @@
 
   .calc {
     @include transition(background-color $tmg-f2 ease-in-out 0s);
-    background: url("#{$static-path}/images/calc-icon.png") $black-t1 no-repeat center;
-    border-bottom: 0;
-    color: $white;
-    float: right;
-    height: $baseline;
-    margin-right: ($baseline*0.75);
-    padding: $baseline;
+    @include float(right);
+    @include right($baseline*.75);
     position: relative;
     top: -42px;
-    width: ($baseline*0.75);
+    border-bottom: 0;
+    padding: ($baseline/1.5);
+    background: $black-t1;
+    color: $white;
 
     &:hover, &:focus {
-      background: url("#{$static-path}/images/calc-icon.png") $gray-d1 no-repeat center;
+      background: $gray-d1;
     }
 
     &.closed {
-      background-image: url("#{$static-path}/images/close-calc-icon.png");
       background-color: $black;
       top: -36px;
     }
diff --git a/lms/templates/calculator/toggle_calculator.html b/lms/templates/calculator/toggle_calculator.html
index 3a7e10d040..1b0255aabb 100644
--- a/lms/templates/calculator/toggle_calculator.html
+++ b/lms/templates/calculator/toggle_calculator.html
@@ -5,6 +5,7 @@ from django.core.urlresolvers import reverse
 
 <div class="calc-main">
   <button title="${_('Open Calculator')}" aria-controls="calculator_wrapper" aria-expanded="false" class="calc utility-control-button">
+    <span class="icon fa fa-calculator" aria-hidden="true"></span>
     <span class="utility-control-label sr">${_("Open Calculator")}</span>
   </button>