Merge pull request #1038 from mlorb/ml-sci-2118

Code left-side menu bar [SCI-2118]

app/assets/stylesheets/partials/_sidebar.scss

@@ -26,7 +26,6 @@ $toggle-btn-size: 50px;
     z-index: 1000;
     position: fixed;
     width: $wrapper-width;
-    left: $wrapper-width;
     height: 100%;
     margin-left: -$wrapper-width;
     -webkit-transition: all 0.5s ease;
@@ -99,6 +98,7 @@ $toggle-btn-size: 50px;
   padding-left: 0;
 
   #sidebar-wrapper {
+    margin-left: 0;
     width: 0;
 
     #slide-panel {

app/assets/stylesheets/themes/main_navigation.scss

@@ -368,6 +368,7 @@
 
 #content-wrapper {
   margin-top: 50px;
+  margin-left: 83px;
 }
 
 

app/assets/stylesheets/themes/menu_bar.scss

@@ -0,0 +1,57 @@
+@import "constants";
+@import "mixins";
+
+.menu-bar {
+  background-color: $color-white;
+  box-shadow: inset -4px 0 0 0 $color-alto;
+  height: 100%;
+  left: 0;
+  overflow-x: hidden;
+  padding-bottom: 16px;
+  padding-top: 16px;
+  position: fixed;
+  width: 83px;
+
+  ul.nav > li {
+    padding-right: 4px;
+
+    & > a {
+      color: $color-gray;
+      display: grid;
+      font-size: 12px;
+      margin-left: auto;
+      margin-right: auto;
+      padding: 10px;
+      text-align: center;
+
+      & > span {
+        padding-top: 4px;
+      }
+    }
+
+    &.active {
+      background-color: $color-gainsboro;
+      margin-right: 4px;
+      padding-right: 0;
+      @include box-shadow(4px 0 0 $color-theme-primary);
+
+      & > a {
+        color: $color-emperor;
+      }
+    }
+  }
+
+  ul.nav-bottom {
+    bottom: 0;
+    padding-bottom: 16px;
+    position: fixed;
+    width: inherit;
+  }
+}
+
+@media(max-height:480px) {
+  .menu-bar > ul.nav-bottom {
+    position: relative;
+    width: auto;
+  }
+}

app/helpers/left_menu_bar_helper.rb

@@ -0,0 +1,31 @@
+module LeftMenuBarHelper
+  def projects_are_selected?
+    controller_name.in? %w(projects experiments my_modules)
+  end
+
+  def repositories_are_selected?
+    controller_name == 'repositories'
+  end
+
+  def templates_are_selected?
+    # TODO
+    controller_name == 'protocols'
+  end
+
+  def reports_are_selected?
+    # TODO
+    controller_name == 'reports'
+  end
+
+  def settings_are_selected?
+    controller_name.in? %(registrations preferences addons teams)
+  end
+
+  def activities_are_selected?
+    controller_name == 'activities'
+  end
+
+  def help_is_selected?
+    # TODO
+  end
+end

app/views/layouts/application.html.erb

@@ -64,6 +64,7 @@
       <% end %>
     </div>
 
+    <%= render "shared/left_menu_bar" if user_signed_in? %>
     <div id="content-wrapper">
       <%= yield :content %>
     </div>

app/views/shared/_left_menu_bar.html.erb

@@ -0,0 +1,48 @@
+<div id="left-menu-bar" class="menu-bar">
+  <ul class="nav">
+    <li class="<%= "active" if projects_are_selected? %>">
+      <a id="projects-link" title="<%= t('left_menu_bar.projects') %>" href="<%= projects_path %>">
+        <span class="glyphicon glyphicon-home"></span>
+        <span><%= t('left_menu_bar.projects') %></span>
+      </a>
+    </li>
+    <li class="<%= "active" if repositories_are_selected? %>">
+      <a id="repositories-link" title="<%= t('left_menu_bar.repositories') %>" href="<%= team_repositories_path current_team %>">
+        <span class="fa fa-cubes" aria-hidden="true"></span>
+        <span><%= t('left_menu_bar.repositories') %></span>
+      </a>
+    </li>
+    <li class="<%= "active" if templates_are_selected? %>">
+      <a id="templates-link" title="<%= t('left_menu_bar.templates') %>" href="<%= protocols_path %>">
+        <span class="glyphicon glyphicon-list-alt"></span>
+        <span><%= t('left_menu_bar.templates') %></span>
+      </a>
+    </li>
+    <li class="<%= "active" if reports_are_selected? %>">
+      <a id="reports-link" title="<%= t('left_menu_bar.reports') %>" href="#">
+        <span class="glyphicon glyphicon-indent-left"></span>
+        <span><%= t('left_menu_bar.reports') %></span>
+      </a>
+    </li>
+    <li class="<%= "active" if settings_are_selected? %>">
+      <a id="settings-link" title="<%= t('left_menu_bar.settings') %>" href="<%= edit_user_registration_path %>">
+        <span class="glyphicon glyphicon-cog"></span>
+        <span><%= t('left_menu_bar.settings') %></span>
+      </a>
+    </li>
+  </ul>
+  <ul class="nav nav-bottom">
+    <li class="<%= "active" if activities_are_selected? %>">
+      <a id="activities-link" title="<%= t('left_menu_bar.activities') %>" href="<%= activities_path %>">
+        <span class="glyphicon glyphicon-equalizer"></span>
+        <span><%= t('left_menu_bar.activities') %></span>
+      </a>
+    </li>
+    <li class="<%= "active" if help_is_selected? %>">
+      <a id="activities-link" title="<%= t('left_menu_bar.help') %>" href="#">
+        <span class="glyphicon glyphicon-paperclip"></span>
+        <span><%= t('left_menu_bar.help') %></span>
+      </a>
+    </li>
+  </ul>
+</div>

config/locales/en.yml

@@ -102,6 +102,15 @@ en:
     core_version: "sciNote core version"
     addon_versions: "Addon versions"
 
+  left_menu_bar:
+    projects: "Projects"
+    repositories: "Libraries"
+    templates: "Templates"
+    reports: "Reports"
+    settings: "Settings"
+    activities: "Activities"
+    help: "Help"
+
   sidebar:
     title: "Navigation"
     no_module_group: "No workflow"