Update Announcement lock/delete buttonset icons

Fixes: CNVS-19019

This change turns off the javascript that populates
the jQueryUI buttonset with background-image icons
and instead adds them directly to the markup via
the icon font.

Test Plan:

- Go to the Announcements page in a course
- Select an existing Announcement from the main list
  via the checkbox. The lock/delete buttonset should
  appear in the header bar.
- The buttonset should now look like this:
  http://cl.ly/image/0q3f170Y1H1u
  ...and not like this:
  https://help.instructure.com/attachments/token/CtARKfdli9FnpLwm3szEKmupO/?name=AnnouncementButtons.jpg

Change-Id: I9c08160f943fdbe23e438c78d6fb199f8ed001ae
Reviewed-on: https://gerrit.instructure.com/49861
Tested-by: Jenkins
Product-Review: Hilary Scharton <hilary@instructure.com>
Reviewed-by: Colleen Palmer <colleen@instructure.com>
QA-Review: Steven Shepherd <sshepherd@instructure.com>

Author: Chris Hart

app/coffeescripts/views/announcements/IndexView.coffee

@@ -100,14 +100,6 @@ define [
         $actions.removeClass 'screenreader-only'
         $actions.find('button,input').prop('disabled', false)
         checkLock = _.any selectedTopics, (model) -> model.get('locked')
-        $actions.find('#lock').prop('checked', checkLock).button
-          text: false
-          icons:
-            primary: 'ui-icon-locked'
-        $actions.find('#delete').button
-          text: false
-          icons:
-            primary: 'ui-icon-trash'
         $actions.buttonset()
       else
         $actions.addClass 'screenreader-only'

app/stylesheets/vendor/jqueryui/_jquery.ui.button.scss

@@ -31,10 +31,15 @@ We use jQuery UI button set
   .ui-button {
     margin-left: 0;
     margin-right: -5px;
-
-    // get rid of rounded borders except on left-most and right-most edges
-    &:not(:first-of-type){ @include border-left-radius(0) }
-    &:not(:last-of-type){ @include border-right-radius(0) }
+    border-radius: 0;
+    &.ui-corner-right { 
+      border-top-right-radius: $baseBorderRadius;
+      border-bottom-right-radius: $baseBorderRadius;
+    }
+    &.ui-corner-left { 
+      border-top-left-radius: $baseBorderRadius;
+      border-bottom-left-radius: $baseBorderRadius;
+    }
   }
 }
 

app/views/jst/announcements/IndexView.handlebars

@@ -26,8 +26,14 @@
       {{/if}}
       <span id="actionsForSelectedDiscussions" class="screenreader-only">
         <input type="checkbox" id="lock" disabled="disabled"/>
-        <label for="lock" data-tooltip>{{#t "lock_for_comments"}}Lock for comments{{/t}}</label>
-        <button id="delete" data-tooltip disabled="disabled">{{#t "delete"}}Delete{{/t}}</button>
+        <label for="lock" data-tooltip title="{{#t "lock_for_comments"}}Lock for comments{{/t}}">
+          <i class="icon-lock"></i>
+          <span class="screenreader-only">{{#t "lock_for_comments"}}Lock for comments{{/t}}</span>
+        </label>
+        <button id="delete" data-tooltip data-tooltip title="{{#t "delete"}}Delete{{/t}}" disabled="disabled">
+          <i class="icon-trash"></i>
+          <span class="screenreader-only">{{#t "delete"}}Delete{{/t}}</span>
+        </button>
       </span>
 
       {{#if options.permissions.create}}