restyle flash messages and unauthorized-style pages, fixes #9466

test plan: 1. go to a course page when not logged in 1. you should see the unauthorized message 2. it should be styled correctly 2. go to a course page when logged in that you are not enrolled in 1. you should see the unauthorized message 2. it should be styled correctly 3. perform an action that generates a flash notice (e.g. send a message in conversations) 1. the notice should appear and should overlap the header 2. it should disappear when clicked (or after a few seconds) 4. perform an action that generates a flash error message 1. the error should appear and should overlap the header 2. it should disappear when clicked (or after a few seconds) 5. go to a page that has an initial flash notice (e.g. view course you've been invited to) 1. the notice should appear and should shift all content down 2. it should only disappear if clicked 6. go to a page that has an initial flash error 1. the error should appear and should shift all content down 2. it should only disappear if clicked Change-Id: I3a1ca8f44e9f36bc7ce191392a7bf8922eb4fcc4 Reviewed-on: https://gerrit.instructure.com/12324 Reviewed-by: Ryan Shaw <[email protected]> Tested-by: Jenkins <[email protected]>
Timvandervoord · Jul 18, 2012 · c906c49 · c906c49
1 parent cc72146
commit c906c49
Show file tree

Hide file tree

Showing 52 changed files with 261 additions and 200 deletions.
diff --git a/app/coffeescripts/conversations/Inbox.coffee b/app/coffeescripts/conversations/Inbox.coffee
@@ -32,7 +32,7 @@ define [
   'jqueryui/dialog'
   'jquery.instructure_misc_helpers'
   'jquery.disableWhileLoading'
-  'jquery.rails_flash_notifications'
+  'compiled/jquery.rails_flash_notifications'
   'media_comments'
   'vendor/jquery.ba-hashchange'
   'vendor/jquery.elastic'

diff --git a/app/coffeescripts/jquery.rails_flash_notifications.coffee b/app/coffeescripts/jquery.rails_flash_notifications.coffee
@@ -0,0 +1,46 @@
+# does Rails-style flash message/error boxes that drop down from the top of the screen
+define [
+  'i18n!shared.flash_notices'
+  'underscore'
+  'compiled/fn/preventDefault'
+  'jqueryui/effects/drop'
+], (I18n, _, preventDefault) ->
+
+  $buffer = $("#flash_message_buffer")
+  $holder = $("#flash_message_holder")
+  $holder.on 'click', '.close_link', preventDefault
+  $holder.on 'click', 'li', ->
+    $this = $(this)
+    return if $this.hasClass('no_close')
+    $this.stop(true, true).remove()
+    if $this.hasClass('static_message')
+      $buffer.height _.reduce($holder.find('.static_message'),
+        (s, n) -> s + $(n).outerHeight()
+      , 0)
+
+  flashBox = (type, content, timeout) ->
+    $node = $("""
+      <li class='ui-state-#{type}'>
+        <i></i>
+        #{content}
+        <a href='#' class='close_link'>#{I18n.t("close", "Close")}</a>
+      </li>
+    """)
+
+    $node.appendTo($holder).
+      css('z-index', 1).
+      show('drop', direction: "up", 'fast').
+      slideDown('fast', -> $(this).css('z-index', 2)).
+      delay(timeout || 7000).
+      animate({'z-index': 1}, 0).
+      fadeOut('slow', -> $(this).slideUp('fast', -> $(this).remove()))
+      #hide('drop', { direction: "up" }, 'fast', -> $(this).remove())
+
+  # Pops up a small notification box at the top of the screen.
+  $.flashMessage = (content, timeout = 3000) ->
+    flashBox("success", content, timeout)
+
+  # Pops up a small error box at the top of the screen.
+  $.flashError = (content, timeout) ->
+    flashBox("error", content, timeout);
+
diff --git a/app/coffeescripts/user_lists.coffee b/app/coffeescripts/user_lists.coffee
@@ -7,7 +7,7 @@ define [
   'jquery.instructure_misc_helpers'
   'jquery.instructure_misc_plugins'
   'jquery.loadingImg'
-  'jquery.rails_flash_notifications'
+  'compiled/jquery.rails_flash_notifications'
   'jquery.scrollToVisible'
   'jquery.templateData'
   'vendor/jquery.scrollTo'

diff --git a/app/coffeescripts/views/QuickStartBar/EventView.coffee b/app/coffeescripts/views/QuickStartBar/EventView.coffee
@@ -5,9 +5,8 @@ define [
   'compiled/views/QuickStartBar/BaseItemView'
   'compiled/models/CalendarEvent'
   'jst/quickStartBar/event'
-  'jquery.rails_flash_notifications'
+  'compiled/jquery.rails_flash_notifications'
   'jquery.disableWhileLoading'
-  'jquery.rails_flash_notifications'
 ], (I18n, $, _, BaseItemView, CalendarEvent, template) ->
 
   class EventView extends BaseItemView

diff --git a/app/coffeescripts/views/QuickStartBar/MessageView.coffee b/app/coffeescripts/views/QuickStartBar/MessageView.coffee
@@ -3,7 +3,7 @@ define [
   'compiled/views/QuickStartBar/BaseItemView'
   'compiled/models/Message'
   'jst/quickStartBar/message'
-  'jquery.rails_flash_notifications'
+  'compiled/jquery.rails_flash_notifications'
   'jquery.disableWhileLoading'
 ], (I18n, BaseItemView, Message, template) ->
 

diff --git a/app/coffeescripts/views/QuickStartBar/PinView.coffee b/app/coffeescripts/views/QuickStartBar/PinView.coffee
@@ -6,7 +6,7 @@ define [
   'jst/quickStartBar/pin'
   'compiled/models/KollectionItem'
   'jquery.instructure_date_and_time'
-  'jquery.rails_flash_notifications'
+  'compiled/jquery.rails_flash_notifications'
 ], (_, KollectionItemSaveView, BaseItemView, Pin, template, KollectionItem) ->
 
   class QuickStartKollectionItemSaveView extends KollectionItemSaveView

diff --git a/app/coffeescripts/views/course_settings/EditSectionsView.coffee b/app/coffeescripts/views/course_settings/EditSectionsView.coffee
@@ -6,7 +6,7 @@ define [
   'jst/courses/settings/EditSectionsView'
   'compiled/widget/ContextSearch'
   'str/htmlEscape'
-  'jquery.rails_flash_notifications'
+  'compiled/jquery.rails_flash_notifications'
   'jquery.disableWhileLoading'
 ], (I18n, $, _, DialogBaseView, editSectionsViewTemplate, ContextSearch, h) ->
 

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -1355,5 +1355,17 @@ def load_all_contexts
     end
   end
 
-
+  def flash_notices
+    @notices ||= begin
+      notices = []
+      if error = flash.delete(:error)
+        notices << {:type => 'error', :content => error}
+      end
+      if notice = (flash[:html_notice] ? raw(flash.delete(:html_notice)) : flash.delete(:notice))
+        notices << {:type => 'success', :content => notice}
+      end
+      notices
+    end
+  end
+  helper_method :flash_notices
 end
diff --git a/app/controllers/pseudonym_sessions_controller.rb b/app/controllers/pseudonym_sessions_controller.rb
@@ -188,7 +188,6 @@ def destroy
       flash[:delegated_message] = message if message
     end
 
-    flash[:notice] = t 'notices.logged_out', "You are currently logged out"
     flash[:logged_out] = true
     respond_to do |format|
       session.delete(:return_to)
@@ -365,7 +364,6 @@ def successful_login(user, pseudonym)
     @current_user = user
     @current_pseudonym = pseudonym
     respond_to do |format|
-      flash[:notice] = t 'notices.login_success', "Login successful." unless flash[:error]
       if session[:oauth2]
         return redirect_to(oauth2_auth_confirm_url)
       elsif session[:course_uuid] && user && (course = Course.find_by_uuid_and_workflow_state(session[:course_uuid], "created"))

diff --git a/app/stylesheets/g_instructure.sass b/app/stylesheets/g_instructure.sass
@@ -15,40 +15,96 @@
   :height 300px
   :overflow auto
 
-#flash_message_holder
-  :position fixed
-  :top -5px
-  :z-index 9999
-  width: 100%
-  height: 0
-  a
-    :color #ddd
-#flash_message_wrapper
-  width: 350px
-  max-height: 200px
-  margin: auto
-
-body.no-headers #flash_message_wrapper
+#fixed_bottom, #flash_message_holder
+  position: fixed
+  z-index: 100000
+  left: 0
   width: 100%
 
-#flash_notice_message, #flash_error_message
-  :text-align center
-  :background-color #308b4f
-  :color #fff
-  :font-weight bold
-  :overflow auto
-  :padding 6px 30px 4px 15px
-  :cursor pointer
-  box-shadow: 3px 3px 6px rgba(0,0,0,0.5)
-  position: relative
-  a.close-link
-    position: absolute
-    right: 4px
-    top: 8px
-
-#flash_error_message
-  :background-color #b4302d
-
+#flash_message_holder
+  top: 0
+  list-style: none
+  margin: 0
+  padding: 0
+  height: 0
+  li
+    box-shadow: 0 1px 1px rgba(0,0,0,0.25)
+    border-bottom-color: rgba(0,0,0,0.5)
+    margin: 0
+    padding: 0
+    height: 28px
+    line-height: 28px
+    vertical-align: middle
+    text-align: center
+    font-weight: bold
+    position: relative
+    z-index: 2
+    width: 400px
+    margin: 0 auto
+    &.static_message
+      width: auto
+      margin: 0
+    a.close_link
+      position: absolute
+      right: 10px
+      top: 50%
+      margin-top: -8px
+    i
+      display: inline-block
+      vertical-align: middle
+      margin-right: 0
+      width: 20px
+      height: 20px
+      background-image: url(/images/check_16.png)
+      background-repeat: no-repeat
+    &.ui-state-error, &.ui-state-warning
+      i
+        background-image: url(/images/warning_16.png)
+    &.xlarge
+      font-size: 1.5em
+      height: 58px
+      line-height: 58px
+      i
+        width: 40px
+        height: 40px
+        background-image: url(/images/check_36.png)
+      &.ui-state-error, &.ui-state-warning
+        i
+          background-image: url(/images/warning_36.png)
+
+#unauthorized_message
+  border: 1px solid #000
+  margin: 4em auto
+  width: 500px
+  .ui-state-error, &.ui-state-error
+    position: relative
+    z-index: 1
+    border-style: solid
+    border-width: 1px
+    border-color: rgba(0,0,0,0.1) rgba(0,0,0,0.3) rgba(0,0,0,0.5)
+    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 3px 3px -1px rgba(0,0,0,0.25)
+    &:before
+      content: " "
+      background: transparent url(/images/warning_36.png) 0 4px no-repeat
+      position: absolute
+      top: 6px
+      left: 22px
+      width: 42px
+      height: 42px
+  h2
+    font-size: 1.5em
+    &.ui-state-error
+      padding: 15px
+      margin: -1px
+      color: #fff
+      height: 60px
+      line-height: 60px
+      padding: 0 0 0 80px
+  p
+    font-size: 1.1em
+    padding: 2em 3em
+    font-weight: bold
+    margin: 0
 
 .user_content,.mceContentBody
   position: relative
@@ -1446,12 +1502,7 @@ form.user_content_post_form
   padding-bottom: 60px
 
 #fixed_bottom
-  position: fixed
-  z-index: 100000
   bottom: 0
-  top: auto
-  left: 0
-  width: 100%
   i
     vertical-align: middle
     margin-right: 10px

diff --git a/app/stylesheets/g_util_misc.sass b/app/stylesheets/g_util_misc.sass
@@ -176,17 +176,17 @@ table.zebra-stripes
       background: #F5F8F9 url(/images/jqueryui/ui-bg_inset-hard_100_f5f8f9_1x100.png) repeat-x 50%
       color: #030F1B
 
-.close-link
+.close_link
   display: block
-  background: url(/images/jqueryui/icon_sprite.png) 0px -16px no-repeat
+  background: url(/images/close.png) 0 -0 no-repeat
   height: 16px
   width: 16px
   text-indent: -99999px
   overflow: hidden
   &:hover, &:focus
-    background-position: -16px -16px
+    background-position: 0 -16px
 
-// this allows you to have a block-level element that does not have a defined with be horizontalally centered.
+// this allows you to have a block-level element that does not have a defined with be horizontally centered.
 // usage:
 //     <div class="centered-block">
 //       <div class="centered-block-wrap">

diff --git a/app/stylesheets/jqueryui/_jquery.ui.theme.scss b/app/stylesheets/jqueryui/_jquery.ui.theme.scss
@@ -73,6 +73,23 @@
 .ui-priority-secondary, .ui-widget-content .ui-priority-secondary,  .ui-widget-header .ui-priority-secondary { @include opacity(.7); font-weight: normal; }
 .ui-state-disabled, .ui-widget-content .ui-state-disabled, .ui-widget-header .ui-state-disabled { @include opacity(.35); background-image: none; }
 
+// instructure additions
+.ui-state-success, .ui-state-warning {
+  border-width: 1px;
+  border-style: solid;
+  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
+  color: $white;
+  text-shadow: 0 -1px 0 rgba(0,0,0,.25);
+}
+.ui-state-success {
+  @include vertical-gradient($btnSuccessBackground, $btnSuccessBackgroundHighlight);
+}
+.ui-state-warning {
+  @include vertical-gradient($btnWarningBackground, $btnWarningBackgroundHighlight);
+}
+
+
 /* Icons
 ----------------------------------*/
 

diff --git a/app/stylesheets/login.sass b/app/stylesheets/login.sass
@@ -197,21 +197,20 @@ span.field-with-fancyplaceholder
   #modal-box.login-box
     margin: 0
     box-shadow: none
-  .ui-state-error
+  #unauthorized_message
+    margin: 0
+    width: auto
     padding: 15px $modal_box_padding
-    border-color: #bf3828 #83271b #83271b #83271b
-    font-size: 1.25em
     line-height: 1.2
-    position: relative
-    z-index: 1
-    box-shadow: 0 3px 3px -1px rgba(0,0,0,0.25)
+    &.ui-state-error:before
+      top: 15px
     h2
-      background: transparent url(/images/warning_36.png) 0 4px no-repeat
       height: 41px
       margin: 0 0 -15px 0
       padding: 0 0 0 60px
       color: #000
-      font-size: 1.25em
     p
       padding: 0 0 0 60px
       margin: 0
+      font-size: 1.25em
+      font-weight: normal
diff --git a/app/views/accounts/_add_course_or_user.html.erb b/app/views/accounts/_add_course_or_user.html.erb
@@ -114,7 +114,7 @@ require([
   'str/htmlEscape' /* htmlEscape, /\$\.h/ */,
   'jquery.instructure_forms' /* formSubmit */,
   'jqueryui/dialog',
-  'jquery.rails_flash_notifications' /* flashMessage */,
+  'compiled/jquery.rails_flash_notifications',
   'jquery.templateData' /* fillTemplateData */
 ], function(I18n, $, htmlEscape) {
 

diff --git a/app/views/context/roster_user.html.erb b/app/views/context/roster_user.html.erb
@@ -175,7 +175,7 @@ require([
   'jquery.ajaxJSON' /* ajaxJSON */,
   'jquery.instructure_misc_plugins' /* .dim, undim, confirmDelete */,
   'jquery.loadingImg' /* loadingImage */,
-  'jquery.rails_flash_notifications' /* flashError */,
+  'compiled/jquery.rails_flash_notifications',
   'link_enrollment' /* link_enrollment */
 ], function($) {