Adjusts handling of the folder browser

Makes it so that the "active" item is highlighted/bolded depending on the situation.
It also makes it so that keyboard navigation has a focus effect.

fixes CNVS-15596

Test Plan:
  - Enable Better File Browsing
  - Go to New Files
  - Navigate folders using the left side navigation
  - The actively displayed folder should be bold.
  - When you use the keyboard to go up and down, a blue background should be there.
  - Move a file using the Move dialog
  - The currently selected folder should have a blue background.

Change-Id: I260750b41a41d39f925b33e8b84c5b0984d0d7a2
Reviewed-on: https://gerrit.instructure.com/43249
Tested-by: Jenkins <jenkins@instructure.com>
Reviewed-by: Ryan Shaw <ryan@instructure.com>
Product-Review: Ryan Shaw <ryan@instructure.com>
QA-Review: Jahnavi Yetukuri <jyetukuri@instructure.com>

Author: claydiffrient

app/coffeescripts/react_files/components/FolderTree.coffee

@@ -12,7 +12,7 @@ define [
       rootFoldersToShow: React.PropTypes.arrayOf(customPropTypes.folder).isRequired
       rootTillCurrentFolder: React.PropTypes.arrayOf(customPropTypes.folder)
 
-    mixins: [Router.Navigation]
+    mixins: [Router.Navigation, Router.ActiveState]
 
     componentDidMount: ->
       new FileBrowserView({
@@ -21,6 +21,8 @@ define [
         onClick: @onClick
         dndOptions: @props.dndOptions
         href: @hrefFor
+        focusStyleClass: @focusStyleClass
+        selectedStyleClass: @selectedStyleClass
       }).render().$el.appendTo(@refs.FolderTreeHolder.getDOMNode())
       @expandTillCurrentFolder(@props)
 
@@ -31,13 +33,20 @@ define [
 
     onClick: (event, folder) ->
       event.preventDefault()
+      $(@refs.FolderTreeHolder.getDOMNode()).find('.' + @focusStyleClass).each( (key, value) => $(value).removeClass(@focusStyleClass))
+      $(@refs.FolderTreeHolder.getDOMNode()).find('.' + @selectedStyleClass).each( (key, value) => $(value).removeClass(@selectedStyleClass))
       @transitionTo (if folder.urlPath() then 'folder' else 'rootFolder'), splat: folder.urlPath()
 
 
     hrefFor: (folder) ->
       @makeHref (if folder.urlPath() then 'folder' else 'rootFolder'), splat: folder.urlPath()
 
 
+
+    focusStyleClass: 'FolderTree__folderItem--focused'
+    selectedStyleClass: 'FolderTree__folderItem--selected'
+
+
     expandTillCurrentFolder: (props) ->
       expandFolder = (folderIndex) ->
         return unless folder = props.rootTillCurrentFolder?[folderIndex]

app/coffeescripts/react_files/components/MoveDialog.coffee

@@ -33,6 +33,8 @@ define [
         onlyShowFolders: true,
         rootFoldersToShow: @props.rootFoldersToShow
         onClick: @onSelectFolder
+        focusStyleClass: 'MoveDialog__folderItem--focused'
+        selectedStyleClass: 'MoveDialog__folderItem--selected'
       }).render().$el.appendTo(@refs.FolderTreeHolder.getDOMNode()).find(':tabbable:first').focus();
 
     onSelectFolder: (event, folder) ->

app/coffeescripts/views/FileBrowserView.coffee

@@ -18,6 +18,8 @@ define [
     @optionProperty 'onClick'
     @optionProperty 'dndOptions'
     @optionProperty 'href'
+    @optionProperty 'focusStyleClass'
+    @optionProperty 'selectedStyleClass'
 
     # Handle keyboard events for accessibility.
     events:
@@ -58,7 +60,7 @@ define [
         contextTypeAndId = splitAssetString(ENV.context_asset_string || '')
         if contextTypeAndId && contextTypeAndId.length == 2 && (contextTypeAndId[0] == 'courses' || contextTypeAndId[0] == 'groups')
           contextFiles = new Folder({contentTypes: @contentTypes})
-          contextFiles.set 'custom_name', if contextTypeAndId[0] is 'courses' then I18n.t('course_files', 'Course files') else I18n.t('group_files', 'Group files') 
+          contextFiles.set 'custom_name', if contextTypeAndId[0] is 'courses' then I18n.t('course_files', 'Course files') else I18n.t('group_files', 'Group files')
           contextFiles.url = "/api/v1/#{contextTypeAndId[0]}/#{contextTypeAndId[1]}/folders/root"
           contextFiles.fetch()
 
@@ -81,15 +83,17 @@ define [
           onClick: @onClick
           dndOptions: @dndOptions
           href: @href
+          selectedStyleClass: @selectedStyleClass
         }).$el.appendTo(@$folderTree)
       super
 
     # Set the focus from one tree item to another.
     setFocus: ($to, $from) ->
       if not $to?.length or $from?.is? $to
         return
-      @$folderTree.find('[role=treeitem]').not($to).attr 'aria-selected', false
+      @$folderTree.find('[role=treeitem]').not($to).attr('aria-selected', false).removeClass(@focusStyleClass)
       $to.attr 'aria-selected', true
+      $to.addClass(@focusStyleClass)
       toId = $to.attr 'id'
       if not toId
         toId = _.uniqueId 'treenode-'
@@ -176,6 +180,7 @@ define [
       else
         @setFocus $current.parent().closest('[role=treeitem]'), $current
 
-    activateCurrent: ($current) -> $current.find('a:first').click()
+    activateCurrent: ($current) ->
+      $current.find('a:first').trigger('selectItem')
 
     ariaPropIsTrue: ($e, attrib) -> $e.attr(attrib)?.toLowerCase?() is 'true'

app/coffeescripts/views/FolderTreeView.coffee

@@ -12,14 +12,15 @@ define [
   class FolderTreeView extends Backbone.View
 
     tagName: 'li'
-    
+
     @optionProperty 'nestingLevel'
     @optionProperty 'onlyShowFolders'
     @optionProperty 'onClick'
     @optionProperty 'dndOptions'
     @optionProperty 'href'
+    @optionProperty 'focusStyleClass'
+    @optionProperty 'selectedStyleClass'
 
-    
     defaults:
       nestingLevel: 1
 
@@ -31,6 +32,7 @@ define [
 
     events:
       'click .folderLabel': 'toggle'
+      'selectItem .folderLabel': 'selectItem'
 
     initialize: ->
       @tagId = _.uniqueId 'treenode-'
@@ -54,13 +56,21 @@ define [
       @model.toggle({onlyShowFolders: @onlyShowFolders})
       @$el.attr(@attributes())
 
+    selectItem: (event) ->
+      $span = $(event.target).find('span')
+      $span.trigger('click')
+
     title_text: ->
       @model.get('custom_name') || @model.get('name')
-      
+
     renderSelf: ->
       @$el.attr @attributes()
       @$label ||= do =>
-        @$labelInner = $('<span>').click (event) => @onClick?(event, @model)
+        @$labelInner = $('<span>').click (event) =>
+          if (@selectedStyleClass)
+            $('.' + _this.selectedStyleClass).each((key, element) => $(element).removeClass(@selectedStyleClass))
+            $(event.target).addClass(@selectedStyleClass)
+          @onClick?(event, @model)
 
         $label = $("""
           <a
@@ -92,6 +102,9 @@ define [
         .toggleClass('expanded', !!@model.isExpanded)
         .toggleClass('loading after', !!@model.isExpanding)
 
+      # Let's this work well with file browsers like New Files
+      if (@selectedStyleClass)
+        @$label.toggleClass(@selectedStyleClass, window.location.pathname is @href?(@model))
 
     renderContents: ->
       if @model.isExpanded
@@ -106,6 +119,8 @@ define [
               onClick: @onClick
               dndOptions: @dndOptions
               href: @href
+              focusStyleClass: @focusStyleClass
+              selectedStyleClass: @selectedStyleClass
             tagName: 'li'
             className: 'folders'
             template: collectionTemplate

app/stylesheets/pages/react_files/_FolderTree.scss

@@ -0,0 +1,9 @@
+.FolderTree__folderItem--selected {
+  font-weight: bold;
+}
+
+.FolderTree__folderItem--focused {
+  & > .folderLabel {
+    background-color: $base-list-item-background--hover;
+  }
+}

app/stylesheets/pages/react_files/_MoveDialog.scss

@@ -0,0 +1,9 @@
+.MoveDialog__folderItem--selected {
+  background-color: $base-list-item-background--selected
+}
+
+.MoveDialog__folderItem--focused {
+  & > .folderLabel {
+    background-color: $base-list-item-background--hover
+  }
+}

app/stylesheets/pages/react_files/compiler-react_files.scss

@@ -6,4 +6,6 @@
 // Styles for specific React Components
 @import "./FilePreview";
 @import "./RestrictedDialogForm";
-@import "./UploadDropZone";
+@import "./UploadDropZone";
+@import "./MoveDialog";
+@import "./FolderTree";