add visual indicator to RCE color selector

fixes CNVS-6705
This commit adds a visual highlighting of the color chosen when selecting
colors in the tinymce editor.

Test Plan
1. Go to a page that includes the RCE (the quiz edit page includes one)
2. Switch between background and font colors using the color selector.
- There should be a visual indication of which color you chose (a
  shading of the background of the selected color)

Change-Id: Id3af0b7d36ee8f8fb3b069ef4fa9906558e9da2b
Reviewed-on: https://gerrit.instructure.com/28380
Tested-by: Jenkins <jenkins@instructure.com>
QA-Review: Myller de Araujo <myller@instructure.com>
Reviewed-by: Derek DeVries <ddevries@instructure.com>
Product-Review: Josh Simpson <jsimpson@instructure.com>

app/coffeescripts/editor/editorAccessibility.coffee

@@ -13,8 +13,14 @@ define [
       @_cacheElements()
       @_addTitles()
       @_addLabels()
+      @_highlightSelectedColor()
 
     ### PRIVATE FUNCTIONS ###
+    _highlightSelectedColor: ->
+      $("body").on 'click', '.mceColorSplitMenu td', ->
+        $(this).parentsUntil(".mceColorSplitMenu").find(".selectedColor").removeClass("selectedColor")
+        $(this).addClass("selectedColor")
+
     _cacheElements: ->
       @$iframe = @$el.find(".mceIframeContainer iframe")
 

app/stylesheets/g_vendor.scss

@@ -1,4 +1,3 @@
 @import "environment";
 @import "jqueryui/jquery.ui.all";
 @import "bootstrap_parts/main";
-

app/stylesheets/tinymce.editor_box.sass

@@ -23,3 +23,4 @@ a.instructure_inline_media_comment
 
 img
   padding: 5px
+

public/javascripts/tinymce/jscripts/tiny_mce/themes/advanced/skins/default/ui.css

@@ -77,6 +77,7 @@
 .defaultSkin .mceColorSplitMenu td {padding:2px}
 .defaultSkin .mceColorSplitMenu a {display:block; width:9px; height:9px; overflow:hidden; border:1px solid #808080}
 .defaultSkin .mceColorSplitMenu td.mceMoreColors {padding:1px 3px 1px 1px}
+.defaultSkin .mceColorSplitMenu td.selectedColor { background-color: rgba(0, 0, 0, 0.4) }
 .defaultSkin .mceColorSplitMenu a.mceMoreColors {width:100%; height:auto; text-align:center; font-family:Tahoma,Verdana,Arial,Helvetica; font-size:11px; line-height:20px; border:1px solid #FFF}
 .defaultSkin .mceColorSplitMenu a.mceMoreColors:hover {border:1px solid #0A246A; background-color:#B6BDD2}
 .defaultSkin a.mceMoreColors:hover {border:1px solid #0A246A}