Completed menu UI changes

Work for #275 . There are lots of changes. There are still links that need to be cleaned up in the admin section. There likely is a better way to do a lot of this too. In paritcular I'm thinking some kind of MVVM methodolgy (where view specific variables can be defined in code for entire folders). Even so, a lot of helper functions have been defined that will ensure consistency of menu links. However we need to ship, so smaller changes/refactors/fixes will be done at a later time.
QutEcoacoustics · Feb 1, 2017 · 437db3f · 437db3f
1 parent c0aaf12
commit 437db3f
Show file tree

Hide file tree

Showing 56 changed files with 329 additions and 268 deletions.
diff --git a/Gemfile b/Gemfile
@@ -66,6 +66,9 @@ gem 'recaptcha', '~> 3.3.0',  require: 'recaptcha/rails'
 gem 'tzinfo', '~> 1.2.2'
 gem 'tzinfo-data', '~> 1.2016'
 
+# for tying inflections into I18n
+gem 'i18n-inflector-rails', '~>1.0'
+
 # USERS & PERMISSIONS
 # -------------------------------------
 # https://github.com/plataformatec/devise/blob/master/CHANGELOG.md

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -210,6 +210,12 @@ GEM
       nokogiri (~> 1.6.0)
       ruby_parser (~> 3.5)
     i18n (0.7.0)
+    i18n-inflector (2.6.7)
+      i18n (>= 0.4.1)
+    i18n-inflector-rails (1.0.7)
+      actionpack (>= 3.0.0)
+      i18n-inflector (~> 2.6)
+      railties (>= 3.0.0)
     i18n-tasks (0.9.5)
       activesupport (>= 4.0.2)
       ast (>= 2.1.0)
@@ -491,6 +497,7 @@ DEPENDENCIES
   haml (~> 4.0.6)
   haml-rails (~> 0.9.0)
   haml_lint
+  i18n-inflector-rails (~> 1.0)
   i18n-tasks (~> 0.9.0)
   jbuilder (~> 2.6.0)
   jc-validates_timeliness (~> 3.1.1)

diff --git a/app/assets/stylesheets/custom.scss b/app/assets/stylesheets/custom.scss
@@ -19,15 +19,30 @@ body {
  */
 
 .left-nav-bar, .right-nav-bar {
+  // /font-awesome-sass-4.6.2/assets/stylesheets/font-awesome/_fixed-width.scss
+  $fa-fixed-width: (18em / 14);
+
   ul.nav-pills > li {
     & > a, & > button, & > form > button {
-      padding: 5px 5px;
+      padding: 5px (1em/4); // approximately 1 standard space's width
       text-align: left;
+
+      // flex styles are for multi line text
+      display: flex;
+      align-items: baseline;
     }
   }
 
+
+
   a .fa, a > .glyphicon {
     color: $text-color;
+
+    // flex styles are for multi line text
+    flex-basis: $fa-fixed-width;
+    &::after{
+      content: "\00a0"
+    }
   }
 }
 
@@ -50,11 +65,11 @@ body {
   &:before {
     content: $fa-var-square-o;
     position: relative;
-    margin-left: 0.25em;
+    margin-left: 0.1em;
   }
 
   &:after {
-    content: $fa-var-th-large;
+    content: $fa-var-th-large + "\00a0" !important;
     font-size: (2/3) * 100%;
     position: relative;
     top: -2px;

diff --git a/app/controllers/application_controller.rb b/app/controllers/application_controller.rb
@@ -82,6 +82,12 @@ def user_signed_in?
 
   protected
 
+  inflection_method :possessive_determiner
+
+  def possessive_determiner
+    current_user&.id != nil && User.same_user?(current_user, @user) ? :my : :their
+  end
+
   # Add archived at header to HTTP response
   # @param [ActiveRecord::Base] model
   # @return [void]

diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
@@ -27,6 +27,10 @@ def bootstrap_class_for(flash_type)
     flash_type_keys.include?(flash_type.to_s) ? flash_types[flash_type.to_sym] : 'alert-info'
   end
 
+  def nav_item(options)
+    render partial: 'shared/nav_item', locals: options
+  end
+
   def destroy_button(href, model_name, icon = 'trash')
     render partial: 'shared/nav_button', locals: {
         href: href,
@@ -64,7 +68,7 @@ def listen_link(site)
 
     render partial: 'shared/nav_item', locals: {
         href: play_link,
-        title: t('baw.shared.links.listen.title'),
+        title: t('baw.shared.links.listen.long_title'),
         tooltip: t('baw.shared.links.listen.description'),
         icon: 'headphones'
     }

diff --git a/app/helpers/global_menu_helper.rb b/app/helpers/global_menu_helper.rb
@@ -6,6 +6,41 @@ module GlobalMenuHelper
   EDIT_PATH = 'edit'
   NEW_PATH = 'new'
 
+  def extra_items
+    @extra_items ||= {}
+  end
+
+  def set_current_menu_item(key, menu_item)
+    extra_items[key] = menu_item
+  end
+
+  def menu_new_link(key, href, model_name = nil)
+
+    set_current_menu_item(key, {
+        href: href,
+        title: t('helpers.titles.new') + ' ' + t('baw.shared.links.' + model_name + '.title').downcase,
+        icon: 'plus'
+    })
+  end
+
+  def menu_edit_link(key, href, model_name = nil)
+    editing_what = model_name.blank? ? '' : ' ' + t('baw.shared.links.' + model_name + '.title').downcase
+    set_current_menu_item(key, {
+        href: href,
+        title: t('helpers.titles.editing') + editing_what,
+        icon: 'pencil'
+    })
+  end
+
+  def menu_default_link(title, icon = nil)
+    set_current_menu_item(title.to_sym, {
+        href: request.original_fullpath,
+        title: t('baw.shared.links.' + title + '.title'),
+        tooltip: t('baw.shared.links.' + title + '.description'),
+        icon: icon
+    })
+  end
+
   def menu_definition
     current_user = controller.current_user
 
@@ -23,36 +58,31 @@ def menu_definition
     # finally transform any dynamic hrefs
     items = items.map { |menu_item|
       next menu_item if menu_item.nil?
-      next menu_item unless menu_item[:href].respond_to?(:call)
 
-      # clone hash so we don't overwrite values
-      new_item = menu_item.dup
-      new_item[:href] = instance_exec(current_user, &menu_item[:href])
+      new_item = menu_item
+      if menu_item[:href].respond_to?(:call)
+        # clone hash so we don't overwrite values
+        new_item = menu_item.dup
+        new_item[:href] = instance_exec(current_user, &menu_item[:href])
+      end
+
+      # insert any other items
+      if extra_items.has_key?(new_item[:id])
+        extra = extra_items.delete(new_item[:id])
+        extra[:indentation] = (new_item[:indentation] || 0) + 1
+        next [new_item, extra]
+      end
+
       next new_item
-    }
+    }.flatten
+
+    # lastly append any extra items
+    items = items.concat(extra_items.values)
 
     items
   end
 
-  def insert_new_or_edit(item)
-    if current_page?(item[:href], action: :new)
-      return [item, {
-          href: request.original_fullpath,
-          title: t('helpers.titles.new'),
-          icon: 'plus'
-      }]
-    end
-
-    if current_page?(item[:href], action: :edit)
-      return [item, {
-          href: href,
-          title: t('helpers.titles.edit'),
-          icon: 'pencil'
-      }]
-    end
-
-    item
-  end
+
 
   # title and tooltip are translate keys
   # :controller is used to make new and edit links work automatically
@@ -64,16 +94,18 @@ def insert_new_or_edit(item)
           icon: 'home',
       },
       {
+          id: :login,
           title: I18n.t('baw.shared.links.log_in.title'),
           href: -> _ { Api::UrlHelpers.new_user_session_path },
           tooltip: I18n.t('baw.shared.links.log_in.description'),
           icon: 'sign-in',
           predicate: -> user { user.blank? },
       },
       {
+          id: :my_profile,
           title: I18n.t('baw.shared.links.profile.title'),
           href: -> _ { Api::UrlHelpers.my_account_path },
-          tooltip: I18n.t('baw.shared.links.profile.title'),
+          tooltip: I18n.t('baw.shared.links.profile.description'),
           icon: 'user',
           predicate: -> user { !user.blank? },
       },
@@ -92,28 +124,29 @@ def insert_new_or_edit(item)
           predicate: -> user { !user.blank? },
       },
       {
+          id: :projects,
           title: I18n.t('baw.shared.links.projects.title'),
           href: Api::UrlHelpers.projects_path,
           tooltip: I18n.t('baw.shared.links.projects.description'),
           icon: 'globe',
       },
       {
+          id: :project,
           title: I18n.t('baw.shared.links.project.title'),
           href: -> _ { Api::UrlHelpers.project_path(@project) },
           tooltip: I18n.t('baw.shared.links.project.description'),
           icon: 'folder-open',
           indentation: 1,
-          predicate: -> _ { @project },
-          controller: ProjectsController
+          predicate: -> _ { @project&.persisted? }
       },
       {
           title: I18n.t('baw.shared.links.site.title'),
           href: -> _ { Api::UrlHelpers.project_site_path(@project, @site) },
           tooltip: I18n.t('baw.shared.links.site.description'),
           icon: 'map-marker',
           indentation: 2,
-          predicate: -> _ { @site },
-          controller: SitesController
+          predicate: -> _ { @site&.persisted? },
+          id: :site
       },
       {
           title: I18n.t('baw.shared.links.harvest.short_title'),

diff --git a/app/views/devise/confirmations/new.html.haml b/app/views/devise/confirmations/new.html.haml
@@ -1,12 +1,10 @@
 - content_for :meta_title, t('devise.shared.links.confirm_account')
 - content_for :page_title, t('devise.confirmations.new.resend_confirmation_instructions')
+- @info_bar = {title: t('baw.shared.links.accounts.title'),  icon: 'user'}
+- set_current_menu_item(:login, {href: new_confirmation_path(resource_name),
+  title: t('devise.shared.links.confirm_account'),
+  icon: 'envelope' })
 
-= render partial: 'shared/sidebar_devise',
-locals: { devise_mapping_o: devise_mapping,
-resource_class_o: resource_class,
-resource_name_o: resource_name,
-user_show: resource,
-user_current: current_user}
 
 = simple_form_for(resource, as: resource_name, url: confirmation_path(resource_name), html: { class: 'form-horizontal' }) do |f|
   = field_set_tag do

diff --git a/app/views/devise/passwords/edit.html.haml b/app/views/devise/passwords/edit.html.haml
@@ -1,11 +1,9 @@
 - content_for :title, t('devise.passwords.edit.change_your_password')
+- @info_bar = {title: t('baw.shared.links.accounts.title'),  icon: 'user'}
+- set_current_menu_item(:login, {href: request.original_fullpath,
+  title: t('devise.passwords.edit.change_your_password'),
+  icon: 'key' })
 
-= render partial: 'shared/sidebar_devise',
-locals: { devise_mapping_o: devise_mapping,
-resource_class_o: resource_class,
-resource_name_o: resource_name,
-user_show: resource,
-user_current: current_user}
 
 = simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { class: 'form-horizontal', method: :put }) do |f|
   = field_set_tag do

diff --git a/app/views/devise/passwords/new.html.haml b/app/views/devise/passwords/new.html.haml
@@ -1,12 +1,10 @@
 - content_for :meta_title, t('devise.shared.links.reset_password')
 - content_for :page_title, t('devise.passwords.new.forgot_your_password')
+- @info_bar = {title: t('baw.shared.links.accounts.title'),  icon: 'user'}
+- set_current_menu_item(:login, {href: new_password_path(resource_name),
+  title: t('devise.shared.links.reset_password'),
+  icon: 'key' })
 
-= render partial: 'shared/sidebar_devise',
-locals: { devise_mapping_o: devise_mapping,
-resource_class_o: resource_class,
-resource_name_o: resource_name,
-user_show: resource,
-user_current: current_user}
 
 = simple_form_for(resource, as: resource_name, url: password_path(resource_name), html: { class: 'form-horizontal', method: :post }) do |f|
   = field_set_tag do

diff --git a/app/views/devise/registrations/edit.html.haml b/app/views/devise/registrations/edit.html.haml
@@ -1,7 +1,7 @@
 - content_for :meta_title, "Editing profile for #{resource.user_name}"
 - content_for :page_title, 'Profile Settings'
-
-= render partial: 'shared/sidebar_user', locals: {user_show: resource, user_current: current_user}
+- @info_bar = {title: t('baw.shared.links.profile.title'), icon: 'user'}
+- menu_edit_link(:my_profile, edit_user_registration_path, 'profile')
 
 = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: 'form-horizontal', method: :put }) do |f|
   = field_set_tag do
@@ -16,10 +16,13 @@
     = f.input :current_password, hint: t('devise.registrations.edit.we_need_your_current_password_to_confirm_your_changes'), required: true
     = render partial: 'shared/image_upload', locals: { f: f,  model_instance: resource, model_name: resource_name }
     = f.button :submit_cancel, t('devise.registrations.edit.update'), class: 'btn-default'
-  %h3 Cancel my account
-  %p
-    = t('devise.registrations.edit.unhappy')
-    = link_to t('devise.registrations.edit.cancel_my_account'), registration_path(resource_name),
+
+%h3 Cancel my account
+%p
+  = t('devise.registrations.edit.unhappy')
+  %br/
+  = button_to t('devise.registrations.edit.cancel_my_account'), registration_path(resource_name),
     data: { confirm: t('devise.registrations.edit.are_you_sure'), toggle: 'tooltip',  placement: 'right' },
     title: 'WARNING: This will permanently delete your account',
-    method: :delete
+    method: :delete,
+    class: "btn btn-danger"
diff --git a/app/views/devise/registrations/new.html.haml b/app/views/devise/registrations/new.html.haml
@@ -1,12 +1,7 @@
 - content_for :meta_title, t('devise.shared.links.sign_up')
 - content_for :page_title, t('devise.registrations.new.sign_up')
+- @info_bar = {title: t('baw.shared.links.accounts.title'),  icon: 'user'}
 
-= render partial: 'shared/sidebar_devise',
-locals: { devise_mapping_o: devise_mapping,
-resource_class_o: resource_class,
-resource_name_o: resource_name,
-user_show: resource,
-user_current: current_user}
 
 = simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { class: 'form-horizontal', method: :post }) do |f|
   = field_set_tag do

diff --git a/app/views/devise/sessions/new.html.haml b/app/views/devise/sessions/new.html.haml
@@ -1,12 +1,34 @@
 - content_for :meta_title, t('devise.shared.links.sign_in')
 - content_for :page_title, t('devise.sessions.new.sign_in')
+- @info_bar = {title: t('baw.shared.links.accounts.title'),  icon: 'user'}
 
-= render partial: 'shared/sidebar_devise',
-locals: { devise_mapping_o: devise_mapping,
-resource_class_o: resource_class,
-resource_name_o: resource_name,
-user_show: resource,
-user_current: current_user}
+- content_for :page_actions do
+  - devise_mapping_o = devise_mapping
+  - resource_class_o = resource_class
+  - resource_name_o = resource_name
+  - user_show = resource
+  - user_current= current_user
+
+  - if devise_mapping_o.omniauthable?
+    - resource_class_o.omniauth_providers.each do |provider|
+      = nav_item(href: (omniauth_authorize_path(resource_name_o, provider)),
+        tooltip: t('devise.shared.links.sign_in_with_provider', provider: provider.to_s.titleize),
+        title: t('baw.shared.links.sign_in_with_provider.description', provider: provider.to_s.titleize))
+  - if devise_mapping_o.recoverable? && user_current.blank?
+    = nav_item(href: new_password_path(resource_name_o),
+      title: t('devise.shared.links.reset_password'),
+      tooltip: t('baw.shared.links.reset_password.description'),
+      icon: 'key' )
+  - if devise_mapping_o.confirmable?
+    = nav_item(href: new_confirmation_path(resource_name_o),
+        title: t('devise.shared.links.confirm_account'),
+        tooltip: t('baw.shared.links.confirm_account.description'),
+        icon: 'envelope' )
+  - if devise_mapping_o.lockable? && resource_class_o.unlock_strategy_enabled?(:email) && user_current.blank?
+    = nav_item(href: new_unlock_path(resource_name_o),
+        title: t('devise.shared.links.unlock_account'),
+        tooltip: t('baw.shared.links.unlock_account.description'),
+        icon: 'unlock-alt')
 
 = simple_form_for(resource, as: resource_name, url: session_path(resource_name), html: { class: 'form-horizontal', method: :post }) do |f|
   = field_set_tag do