miscellaneous fixes and style tweaks for pages

behaviors:
 - general
   - prevent links to unauthorized pages (course/pages index)
 - index page
   - add loading indicator
 - show page
   - prevent unauthorized attempts to query sequence footer
 - edit page
   - editing with the sidebar works again
   - removed the toolbar
   - will not prompt to save an unedited page
     (when the user doesn't have rights to modify the title)

style:
 - sticky toolbar
   - margins (left & right)
   - drop shadow
 - index page
   - hide empty toolbar
   - fills the entire page width & height
   - inner border color
   - prevent sort headers from wrapping
 - show page
   - hide empty toolbar
   - adjusted margins for the 'Front Page' label
 - sequence footer
   - faster animation
   - print stylesheet

test plan:
 * ensure all wiki draft state pages still function correctly

closes CNVS-7756

Change-Id: I3b13a672b4caacb3a41fa28a1b1c2b29d35140f3
Reviewed-on: https://gerrit.instructure.com/24308
Reviewed-by: Jeremy Stanley <jeremy@instructure.com>
Tested-by: Jenkins <jenkins@instructure.com>
Product-Review: Matt Goodwin <mattg@instructure.com>
QA-Review: August Thornton <august@instructure.com>
QA-Review: Hannah Bottalla <hannah@instructure.com>

app/coffeescripts/bundles/wiki_page_edit.coffee

@@ -4,7 +4,7 @@ require [
   'compiled/views/wiki/WikiPageEditView'
 ], ($, WikiPage, WikiPageEditView) ->
 
-  $('body').addClass('pages edit')
+  $('body').addClass('edit')
 
   wikiPage = new WikiPage ENV.WIKI_PAGE, revision: ENV.WIKI_PAGE_REVISION, contextAssetString: ENV.context_asset_string
 

app/coffeescripts/bundles/wiki_page_index.coffee

@@ -10,7 +10,7 @@ require [
     $.cookie('deleted_page_title', null, path: '/')
     $.flashMessage htmlEscape(I18n.t('notices.page_deleted', 'The page "%{title}" has been deleted.', title: deleted_page_title))
 
-  $('body').addClass('pages index')
+  $('body').addClass('index').removeClass('with-right-side')
 
   view = new WikiPageIndexView
     collection: new WikiPageCollection
@@ -19,10 +19,7 @@ require [
     WIKI_RIGHTS: ENV.WIKI_RIGHTS
 
   view.collection.setParams sort:'title', per_page:30
-  view.collection.fetch().then ->
+  view.collection.fetch()
-    view.fetched = true
-    # Re-render after fetching is complete, but only if there are no pages in the collection
-    view.render() if view.collection.models.length == 0
-  $('#content').append(view.$el)
 
+  $('#content').append(view.$el)
   view.render()

app/coffeescripts/bundles/wiki_page_show.coffee

@@ -5,7 +5,7 @@ require [
   'compiled/jquery/ModuleSequenceFooter'
 ], ($, WikiPage, WikiPageView) ->
 
-  $('body').addClass('pages show')
+  $('body').addClass('show')
 
   wikiPage = new WikiPage ENV.WIKI_PAGE, revision: ENV.WIKI_PAGE_REVISION, contextAssetString: ENV.context_asset_string
 

app/coffeescripts/views/wiki/WikiPageEditView.coffee

@@ -104,10 +104,11 @@ define [
     # @api private
     initWikiSidebar: ->
       unless wikiSidebar.inited
+        $wikiPageBody = @$wikiPageBody
         $ ->
           wikiSidebar.init()
           $.scrollSidebar()
-          wikiSidebar.attachToEditor(@$wikiPageBody).show()
+          wikiSidebar.attachToEditor($wikiPageBody).show()
       $ ->
         wikiSidebar.show()
 
@@ -131,11 +132,14 @@ define [
       errors
 
     hasUnsavedChanges: ->
+      json = @toJSON()
+
       formData = @getFormData()
       oldBody = @model.get('body') || ''
       newBody = formData.body || ''
-      oldTitle = @model.get('title') || ''
+      if json.CAN.EDIT_TITLE
-      newTitle = formData.title || ''
+        oldTitle = @model.get('title') || ''
+        newTitle = formData.title || ''
       return (oldBody != newBody) || (oldTitle != newTitle)
 
     unsavedWarning: ->

app/coffeescripts/views/wiki/WikiPageIndexView.coffee

@@ -43,6 +43,14 @@ define [
       [@contextName, @contextId] = splitAssetString(@contextAssetString) if @contextAssetString
       @itemViewOptions.contextName = @contextName
 
+      @collection.on 'fetch', =>
+        unless @fetched
+          @fetched = true
+          @render()
+      @collection.on 'fetched:last', =>
+        @fetchedLast = true
+        @render()
+
       @collection.on 'sortChanged', @sortChanged
       @currentSortField = @collection.currentSortField
 
@@ -87,7 +95,7 @@ define [
 
       @$el.hide()
       $('body').removeClass('index')
-      $('body').addClass('edit')
+      $('body').addClass('edit with-right-side')
 
       @editModel = new WikiPage {editing_roles: @default_editing_roles}, contextAssetString: @contextAssetString
       @editView = new WikiPageEditView
@@ -107,7 +115,7 @@ define [
         @editView.$el.remove()
         wikiSidebar.hide()
 
-        $('body').removeClass('edit')
+        $('body').removeClass('edit with-right-side')
         $('body').addClass('index')
         @$el.show()
 
@@ -117,5 +125,7 @@ define [
         CREATE: !!@WIKI_RIGHTS.create_page
         MANAGE: !!@WIKI_RIGHTS.manage
         PUBLISH: !!@WIKI_RIGHTS.manage && @contextName == 'courses'
-      json.fetched = @fetched
+      json.CAN.VIEW_TOOLBAR = json.CAN.CREATE
+      json.fetched = !!@fetched
+      json.fetchedLast = !!@fetchedLast
       json

app/coffeescripts/views/wiki/WikiPageView.coffee

@@ -82,4 +82,5 @@ define [
         DELETE: !!@PAGE_RIGHTS.delete
         READ_REVISIONS: !!@PAGE_RIGHTS.read_revisions
         ACCESS_GEAR_MENU: !!@PAGE_RIGHTS.delete || !!@PAGE_RIGHTS.read_revisions
+      json.CAN.VIEW_TOOLBAR = json.CAN.VIEW_PAGES || json.CAN.PUBLISH || json.CAN.UPDATE_CONTENT || json.CAN.ACCESS_GEAR_MENU
       json

app/controllers/application_controller.rb

@@ -440,7 +440,10 @@ class ApplicationController < ActionController::Base
       end
       set_badge_counts_for(@context, @current_user, @current_enrollment)
       assign_localizer if @context.present?
-      add_crumb(@context.short_name, named_context_url(@context, :context_url), :id => "crumb_#{@context.asset_string}") if @context && @context.respond_to?(:short_name)
+      if @context && @context.respond_to?(:short_name)
+        crumb_url = named_context_url(@context, :context_url) if @context.grants_right?(@current_user, :read)
+        add_crumb(@context.short_name, crumb_url)
+      end
     end
   end
   

app/controllers/wiki_pages_controller.rb

@@ -24,12 +24,17 @@ class WikiPagesController < ApplicationController
   before_filter :set_js_rights, :only => [:pages_index, :show_page, :edit_page]
   before_filter :set_js_wiki_data, :only => [:pages_index, :show_page, :edit_page]
   add_crumb(proc { t '#crumbs.wiki_pages', "Pages"}) do |c|
+    url = nil
     context = c.instance_variable_get('@context')
-    if context.draft_state_enabled?
+    current_user = c.instance_variable_get('@current_user')
-      c.send :polymorphic_path, [context, :pages]
+    if context.grants_right?(current_user, :read)
-    else
+      if context.draft_state_enabled?
-      c.send :named_context_url, c.instance_variable_get("@context"), :context_wiki_pages_url
+        url = c.send :polymorphic_path, [context, :pages]
+      else
+        url = c.send :named_context_url, c.instance_variable_get("@context"), :context_wiki_pages_url
+      end
     end
+    url
   end
   before_filter { |c| c.active_tab = "pages" }
 
@@ -234,8 +239,11 @@ class WikiPagesController < ApplicationController
       hash[:WIKI_PAGE_REVISION] = (current_version = @page.versions.current) ? current_version.number : nil
       hash[:WIKI_PAGE_SHOW_PATH] = polymorphic_path([@context, :named_page], :wiki_page_id => @page)
       hash[:WIKI_PAGE_EDIT_PATH] = polymorphic_path([@context, :edit_named_page], :wiki_page_id => @page)
-      hash[:COURSE_ID] = @context.id if @context.is_a? Course
       hash[:WIKI_PAGE_HISTORY_PATH] = polymorphic_path([@context, @page, :wiki_page_revisions])
+
+      if @context.is_a?(Course)
+        hash[:COURSE_ID] = @context.id if @context.grants_right?(@current_user, :read)
+      end
     end
 
     js_env hash

app/stylesheets/base/module_sequence_footer.scss

@@ -55,6 +55,12 @@ $button-hover: #dee5ea;
 }
 
 .module-sequence-padding, .module-sequence-footer{
-  animation: module-sequence-footer-animation 1.25s;
+  animation: module-sequence-footer-animation 1s;
-  -webkit-animation: module-sequence-footer-animation 1.25s;
+  -webkit-animation: module-sequence-footer-animation 1s;
+}
+
+@media print {
+  .module-sequence-padding, .module-sequence-footer {
+    display: none;
+  }
 }

app/stylesheets/g_wiki.sass

@@ -12,44 +12,49 @@ $unpublished-icon-color: #b4b7ba
 $border-color: #c1c7cf
 $border-radius: 3px
 
+$pages-border: 1px solid #c1c7cf
+$pages-dashed-border: 1px dashed #c1c7cf
+$pages-inner-border: 1px solid #e1e3e4
+
 $index-background: #e8ecef
 $item-background: #ffffff
 $item-hover-background: #eef7ff
 
 $shadow: 0 1px 0 rgba(0,0,0,0.15)
+$table-shadow: 0 1px 0 #dde0e4
+
+.pages .sticky
+  position: fixed
+  z-index: 1000
+  top: 0px
+  left: 0px
+  right: 0px
+  margin-left: 1px
+  background: white
+  height: 33px
+  max-width: $max_main_width
+  border-color: $menu-border-color
+
+.pages.with-left-side .sticky
+  margin-left: $left_side_width + 1px
+.pages.with-right-side .sticky
+  margin-right: $right_side_width + 1px
 
 .pages
-  .sticky
-    position: fixed
-    z-index: 1000
-    top: 0px
-    left: 0px
-    margin-left: $left_side_width + 1px
-    background: white
-    height: 33px
-    max-width: $max_main_width
-    border-color: $menu-border-color
-
-    &.sticky-toolbar
-      right: 0px
-
-    &.sticky-toolbar-with-right-side
-      right: $right_side_width + 1px
-      min-width: $min_main_width - 2px
-
   #breadcrumbs
-    :border-bottom 1px solid $border-color
+    :border-bottom $pages-border
 
   .header-bar-outer-container
     :height 64px
     .header-bar-container
-      :box-shadow $shadow
       :height 64px
       .page-changed-alert
         :overflow hidden
         :height 0
       .page-changed-alert .alert
         :border-radius 0
+      .header-bar
+        :box-shadow $shadow
 
   .header-bar-outer-container.page-changed
     :height 103px
@@ -62,12 +67,16 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
 
       .page-changed-alert
         :margin -1px 0 0 0
-        :border-bottom 1px solid $border-color
+        :border-bottom $pages-border
+        :box-shadow $shadow
         :height 39px
         :animation page-changed-alert 1.15s
         :-webkit-animation page-changed-alert 1.15s
 
 .pages.index
+  #main
+    :background $index-background
+
   .index-content-container
     :margin-top 1px
 
@@ -84,10 +93,10 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
       :width 270px
 
   .index-content
-    :background $index-background
     :padding 0 1em 1em
 
     .table
+      :margin-bottom 0
       :border-collapse separate
       :border-spacing 0
       td, th
@@ -102,6 +111,7 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
           :cursor pointer
           :user-select none
           :color inherit
+          :white-space nowrap
           i
             :color #ccc
         a.sort-field:hover
@@ -113,6 +123,7 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
             :color black
 
     .table thead
+      :background $index-background
       tr
         :height 40px
       th
@@ -137,18 +148,21 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
           :text-decoration inherit
           :color inherit
         td:first-child
-          :border-left 1px solid $border-color
+          :border-left $pages-border
         td:last-child
-          :border-right 1px solid $border-color
+          :border-right $pages-border
 
       tr:first-child
+        td
+          :border-top $pages-border
         td:first-child
           :border-top-left-radius $border-radius
         td:last-child
           :border-top-right-radius $border-radius
       tr:last-child
         td
-          :border-bottom 1px solid $border-color
+          :border-bottom $pages-border
+          :box-shadow $table-shadow
         td:first-child
           :border-bottom-left-radius $border-radius
         td:last-child
@@ -157,7 +171,7 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
       td
         :font-size 11px
         :color $subdued-text-color
-        :border-top 1px solid $border-color
+        :border-top $pages-inner-border
 
         .wiki-page-link
           :font-size 13px
@@ -174,12 +188,32 @@ $shadow: 0 1px 0 rgba(0,0,0,0.15)
           :color $unpublished-icon-color
 
     .table .no-pages .no-pages-cell
-      :border 1px dashed $border-color
+      :border $pages-dashed-border
+
+    .loading
+      :text-align center
+      :color #8f9295
+
+      img
+        :margin-top -3px
+        :opacity 0.75
+      &.loading
+        :border 1px solid transparent
+      &.loading-more
+        :border $pages-dashed-border
+        :border-top-width 0
+        :border-bottom-left-radius $border-radius
+        :border-bottom-right-radius $border-radius
+        :margin-top 1px
+        :padding 4px 12px
+        :background #f4f6f8
 
 .pages.show
   .header-bar
     .publish-button
-      :margin 0 12px
+      :margin 0 12px 0 0
+    .front-page.label
+      :margin 6px 12px 6px 0
 
   .show-content
     :padding 15px 25px

app/views/jst/wiki/WikiPage.handlebars

@@ -1,3 +1,4 @@
+{{#if CAN.VIEW_TOOLBAR}}
 <div class="header-bar-outer-container">
   <div class="header-bar-container sticky-toolbar" data-sticky>
     <div class="header-bar">
@@ -35,6 +36,7 @@
     <div class="page-changed-alert" role="alert" aria-atomic="true" aria-live="polite"></div>
   </div>
 </div>
+{{/if}}
 
 <div class="show-content">
   <h2 class="page-title">{{title}}</h2>

app/views/jst/wiki/WikiPageEdit.handlebars

@@ -1,31 +1,3 @@
-<div class="header-bar-outer-container">
-  <div class="header-bar-container" data-sticky>
-    <div class="header-bar">
-      <div class="header-bar-left">
-      </div>
-      <div class="header-bar-right">
-        {{#if CAN.PUBLISH}}
-          {{#if published}}
-            <span class="published" aria-label="{{#t 'unpublish'}}Unpublish{{/t}}"><i class="icon-publish"></i> {{#t 'buttons.unpublish'}}Published{{/t}}</span>
-          {{else}}
-            <span class="unpublished" aira-label="{{#t 'publish'}}Publish{{/t}}"><i class="icon-unpublished muted"></i> {{#t 'buttons.publish'}}Unpublished{{/t}}</span>
-          {{/if}}
-        {{/if}}
-        {{#if CAN.DELETE}}
-          <a class="btn al-trigger" tabindex="0" role="button">
-            <i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
-            <span class="screenreader-only">{{#t 'toolbar_menu.settings'}}Settings{{/t}}</span>
-          </a>
-          <ul class="al-options">
-            <li><a href="#" class="icon-trash delete_page{{#unless deletable}} disabled{{/unless}}" {{#unless deletable}}aria-disabled="true"{{/unless}}>{{#t "delete_wiki"}}Delete{{/t}}</a></li>
-          </ul>
-        {{/if}}
-      </div>
-    </div>
-    <div class="page-changed-alert" role="alert" aria-atomic="true" aria-live="assertive"></div>
-  </div>
-</div>
-
 <div class="edit-content">
   <div class="edit-header">
     {{#if CAN.EDIT_TITLE}}
@@ -37,7 +9,7 @@
     <a href="#" class="switch_views">{{#t "#editor.switch_views"}}Switch Views{{/t}}</a>
   </div>
 
-  <textarea rows="16" cols="40" name="body" class="body" aria-hidden="true"{{#unless PAGE_RIGHTS.update}} autofocus{{/unless}}>{{body}}</textarea>
+  <textarea rows="20" cols="40" name="body" class="body" aria-hidden="true"{{#unless PAGE_RIGHTS.update}} autofocus{{/unless}}>{{body}}</textarea>
 
   {{#if CAN.EDIT_ROLES}}
     <div class="control-group options">

app/views/jst/wiki/WikiPageIndex.handlebars

@@ -1,3 +1,4 @@
+{{#if CAN.VIEW_TOOLBAR}}
 <div class="header-bar-outer-container">
   <div class="header-bar-container sticky-toolbar-with-right-side" data-sticky>
     <div class="header-bar">
@@ -9,6 +10,7 @@
     </div>
   </div>
 </div>
+{{/if}}
 
 <div class="index-content-container">
   <div class="index-content">
@@ -38,5 +40,11 @@
         {{/if}}
       </tbody>
     </table>
+    {{#unless fetchedLast}}
+      <div class="loading {{#unless fetched}}loading{{else}}loading-more{{/unless}}">
+        <img src="/images/ajax-reload-animated.gif">
+        {{#unless fetched}}{{#t 'loading'}}Loading ...{{/t}}{{else}}{{#t 'loading_more'}}Loading more ...{{/t}}{{/unless}}
+      </div>
+    {{/unless}}
   </div>
 </div>