Merge pull request #313 from QutBioacoustics/secondary-menu-redesign

Refactoring and standardizing secondary menus - Closes #275

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

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)

app/assets/javascripts/shared.js

@@ -1,5 +1,24 @@
 $(document).ready(function () {
-    $('body').tooltip({selector: "[data-toggle~='tooltip']"})
+    var body = $('body');
+    body.tooltip({
+        selector: "[data-toggle~='tooltip']",
+        container: 'body',
+        placement: function getPlacement(tooltip, element) {
+            var rect = element.getBoundingClientRect(),
+                top = rect.top,
+                left = rect.left,
+                docHeight = body.outerHeight(),
+                docWidth = body.outerWidth(),
+                vertical = 0.5 * docHeight - top,
+                verticalPlacement = vertical > 0 ? 'bottom' : 'top',
+                horizontal = 0.5 * docWidth - left,
+                horizontalPlacement = horizontal > 0 ? 'right' : 'left',
+                // if the page is wider than taller, choose horizontal
+                //placement = Math.abs(horizontal) > Math.abs(vertical) ?  horizontalPlacement : verticalPlacement;
+                placement = rect.width + 200 < docWidth ? horizontalPlacement : verticalPlacement;
+            return placement
+        }
+    })
 });
 
 

app/assets/stylesheets/application.scss

@@ -4,10 +4,6 @@
 
 $grid-float-breakpoint: 992px;
 
-ul.nav-pills > li > a {
-  padding: 5px 10px;
-}
-
 @import "bootstrap-sprockets";
 @import "bootstrap";
 

app/assets/stylesheets/custom.scss

@@ -13,9 +13,74 @@ body {
   padding-top: 60px;
 }
 
+/**
+ * sidebar menus
+ * These definitions have parallels in https://github.com/QutBioacoustics/baw-client/blob/master/src/app/navigation/_navigation.scss#L1
+ */
+
+.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 (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"
+    }
+  }
+}
+
+.left-nav-bar {
+
+  @for $i from 0 through 4 {
+    .indentation-#{$i} {
+      width: calc(100% - #{1em * $i});
+      margin-left: (1em * $i) !important;
+      font-size: 100% - ($i * 3%);
+    }
+  }
+}
+
+/**
+ * End sidebar menus
+ */
+
+.fa-baw-annotation {
+  &:before {
+    content: $fa-var-square-o;
+    position: relative;
+    margin-left: 0.1em;
+  }
+
+  &:after {
+    content: $fa-var-th-large + "\00a0" !important;
+    font-size: (2/3) * 100%;
+    position: relative;
+    top: -2px;
+    left: calc(-1em - (1/3 * 1px));
+  }
+}
+
 h1 {
   margin-bottom: 30px;
 }
+
 h3 {
   margin-top: 30px;
 }
@@ -41,6 +106,7 @@ h3 {
     }
   }
 }
+
 .thumbnail.right-caption img {
   float: left;
   margin-right: 9px;
@@ -54,7 +120,7 @@ h3 {
   padding: 0px 4px;
   h3 {
     margin: 0px;
-    float:left;
+    float: left;
   }
 }
 
@@ -106,6 +172,7 @@ h3 {
   font-family: FontAwesome;
   content: '\f044\0009';
 }
+
 .btn-destroy:before {
   font-family: FontAwesome;
   content: '\f00d\0009';
@@ -125,10 +192,10 @@ button.list-group-item[disabled] {
 /* Home page styles */
 
 .home-arrow {
-  padding-top:100px;
-  height:210px;
+  padding-top: 100px;
+  height: 210px;
   font-weight: bold;
-  font-size:40px;
+  font-size: 40px;
   vertical-align: middle;
   text-align: center;
   display: table-cell;
@@ -162,8 +229,8 @@ footer {
 /* Project styles */
 
 .project_sites {
-  height:400px;
-  overflow:auto;
+  height: 400px;
+  overflow: auto;
 }
 
 .project_thumbnail {
@@ -183,18 +250,18 @@ select[multiple] {
   min-width: 20px;
   border: 1px solid #555;
   white-space: nowrap;
-  background-color:white;
-  padding:0 2px;
+  background-color: white;
+  padding: 0 2px;
 }
 
 /* end Project styles */
 
 /* Site styles */
 
 .map-placeholder {
-  border:1px solid black;
-  height:400px;
-  display:block;
+  border: 1px solid black;
+  height: 400px;
+  display: block;
   line-height: 400px;
   text-align: center;
 }

app/controllers/application_controller.rb

@@ -82,8 +82,15 @@ def user_signed_in?
     super
   end
 
+
   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]

app/controllers/public_controller.rb

@@ -37,11 +37,11 @@ def index
     end
 
     @random_projects = Access::ByPermission
-        .projects(current_user)
-        .includes(:creator)
-        .references(:creator)
-        .order("RANDOM()")
-        .take(3)
+                           .projects(current_user)
+                           .includes(:creator)
+                           .references(:creator)
+                           .order('RANDOM()')
+                           .take(3)
 
     respond_to do |format|
       format.html
@@ -254,6 +254,38 @@ def cors_preflight
     fail CustomErrors::BadRequestError, "CORS preflight request to '#{params[:requested_route]}' was not valid. Required headers: Origin, Access-Control-Request-Method. Optional headers: Access-Control-Request-Headers."
   end
 
+  def nav_menu
+    {
+        #anchor_after: 'baw.shared.links.home.title',
+        menu_items: [
+            {
+                title: 'baw.shared.links.disclaimers.title',
+                href: disclaimers_path,
+                tooltip: 'baw.shared.links.disclaimers.description',
+                icon: nil,
+                indentation: 0,
+                predicate: lambda { |user| action_name == 'disclaimers' }
+            },
+            {
+                title: 'baw.shared.links.credits.title',
+                href: credits_path,
+                tooltip: 'baw.shared.links.credits.description',
+                icon: nil,
+                indentation: 0,
+                predicate: lambda { |user| action_name == 'credits' }
+            },
+            {
+                title: 'baw.shared.links.ethics_statement.title',
+                href: ethics_statement_path,
+                tooltip: 'baw.shared.links.ethics_statement.description',
+                icon: nil,
+                indentation: 0,
+                predicate: lambda { |user| action_name == 'ethics_statement' }
+            }
+        ]
+    }
+  end
+
   private
 
   def recent_audio_recordings
@@ -272,18 +304,18 @@ def recent_audio_events
 
     if current_user.blank?
       @recent_audio_events = AudioEvent
-          .order(order_by_coalesce)
-          .limit(7)
+                                 .order(order_by_coalesce)
+                                 .limit(7)
     elsif Access::Core.is_admin?(current_user)
       @recent_audio_events = AudioEvent
-          .includes([:creator, audio_recording: {site: :projects}])
-          .order(order_by_coalesce)
-          .limit(10)
+                                 .includes([:creator, audio_recording: {site: :projects}])
+                                 .order(order_by_coalesce)
+                                 .limit(10)
     else
       @recent_audio_events = Access::ByPermission
-          .audio_events(current_user, Access::Core.levels)
-          .includes([:updater, audio_recording: :site])
-          .order(order_by_coalesce).limit(10)
+                                 .audio_events(current_user, Access::Core.levels)
+                                 .includes([:updater, audio_recording: :site])
+                                 .order(order_by_coalesce).limit(10)
     end
 
   end
@@ -344,4 +376,5 @@ def annotation_download_params
         :selected_timezone_name)
   end
 
+
 end

app/controllers/sites_controller.rb

@@ -172,6 +172,38 @@ def filter
     respond_filter(filter_response, opts)
   end
 
+  def nav_menu
+    {
+        anchor_after: 'baw.shared.links.projects.title',
+        menu_items: [
+            {
+                title: 'baw.shared.links.projects.title',
+                href: project_path(@project),
+                tooltip: 'baw.shared.links.projects.description',
+                icon: nil,
+                indentation: 1,
+                #predicate:
+            },
+            {
+                title: 'baw.shared.links.site.title',
+                href: project_site_path(@project, @site),
+                tooltip: 'baw.shared.links.site.description',
+                icon: nil,
+                indentation: 2,
+                #predicate:
+            },
+            # {
+            #     title: 'baw.shared.links.ethics_statement.title',
+            #     href: ethics_statement_path,
+            #     tooltip: 'baw.shared.links.ethics_statement.description',
+            #     icon: nil,
+            #     indentation: 0,
+            #     predicate: lambda { |user| action_name == 'ethics_statement' }
+            # }
+        ]
+    }
+  end
+
   private
 
   def get_project