Refactored navigation

Dmitriy Zaporozhets
1 parent 51f174b9
Showing 9 changed files with 152 additions and 72 deletions Show diff stats
app/assets/images/ajax_loader.gif
app/assets/stylesheets/header.scss
app/assets/stylesheets/nav.scss
app/assets/stylesheets/themes/ui_modern.scss
app/helpers/application_helper.rb
app/views/layouts/_app_menu.html.haml
app/views/layouts/_project_menu.html.haml
app/views/layouts/admin.html.haml
app/views/layouts/profile.html.haml
@@ -74,7 +74,7 @@ header {
     font-size:24px;
     line-height:36px;
     font-weight:500;
-    color:#567;
+    color:$style_color;
     text-shadow: 0 1px 1px #FFF;
   }
@@ -82,7 +82,9 @@ header {
     float: right;
     margin-right:10px;
     .btn { 
-      margin-left:8px;
+      margin-left:7px;
+      background: #F1F1F1;
+      border: 1px solid #CCC;
     }
   }
@@ -96,8 +98,8 @@ header {
     float: right;
     margin-right: 55px;
-    .search-input { 
-      width:130px;
+    .search-input {
+      @extend .span2;
       background-image: url("icon-search.png");
       background-repeat: no-repeat;
       background-position: 10px;
@@ -2,7 +2,7 @@
  *  Main Menu of Application
  *
  */
-nav.main_menu { 
+ul.main_menu { 
   border-radius: 4px;
   margin: auto;
   margin:30px 0;
@@ -13,9 +13,7 @@ nav.main_menu {
   background-image: -webkit-linear-gradient(#eee 6.6%, #dfdfdf);
   background-image: -moz-linear-gradient(#eee 6.6%, #dfdfdf);
   background-image: -o-linear-gradient(#eee 6.6%, #dfdfdf);
-  display:table;
-  table-layout:fixed;
-  width:100%;
+  position:relative;
   @include shade;
   .count { 
     position: relative;
@@ -39,10 +37,14 @@ nav.main_menu {
     text-shadow:none;
     color:$style_color;
   }
-  a { 
-    display:table-cell;
-    text-align:center;
-    font-weight:bold;
+  li { 
+    list-style-type: none;
+    margin: 0;
+    display: table-cell;
+    width: 1%;
+    border-right: 1px solid #DDD;
+    border-left: 1px solid #EEE;
+
     &:first-child{ 
       -webkit-border-top-left-radius: 4px;
       -webkit-border-bottom-left-radius: 4px;
@@ -52,22 +54,7 @@ nav.main_menu {
       border-bottom-left-radius: 4px;
       border-left: 0;
     }
-    padding: 9px 2px;
-    color: $style_color;
-    position: relative;
-    margin: 0;
-    text-shadow:0 1px 1px white;
-    border-right: 1px solid #DDD;
-    border-left: 1px solid #EEE;
-    &.home { 
-      background: url(home_icon.PNG) no-repeat center center;
-      text-indent:-9999px;
-      img { 
-        position:relative;
-        top:4px;
-      }
-    }
     &.current { 
       background-color:#D5D5D5;
       border-bottom: 1px solid #567;
@@ -80,11 +67,28 @@ nav.main_menu {
       }
     }
-    &.wide { 
-      width:185px;
-      @media (min-width: 1080px) and (max-width: 1200px) { width:160px; }
+    &.home { 
+      a { 
+        background: url(home_icon.PNG) no-repeat center center;
+        text-indent:-9999px;
+        min-width:20px;
+        img { 
+          position:relative;
+          top:4px;
+        }
+      }
     }
   }
+  a { 
+    display: block;
+    text-align: center;
+    font-weight:bold;
+    height:35px;
+    line-height:36px;
+    color: $style_color;
+    text-shadow:0 1px 1px white;
+
+  }
 }
 /*
  *  End of Main Menu
@@ -9,19 +9,21 @@
  *
  */
 .ui_modern { 
-  nav.main_menu { 
+  ul.main_menu { 
     background:none;
     box-shadow:none;
     @include border-radius(0px);
     border:none;
     border-bottom:2px solid #456;
-    a { 
+    li { 
       border:none;
       &.current {
         border-bottom:2px solid #f90;
         background-color:#fff;
+        position:relative;
+        top:1px;
       }
     }
   }
@@ -96,4 +96,41 @@ module ApplicationHelper
       event.project && 
       event.project.merge_requests_enabled
   end
+
+  def tab_class(tab_key)
+    active = case tab_key
+             
+             # Project Area
+             when :wall; wall_tab?
+             when :wiki; controller.controller_name == "wikis"
+             when :issues; issues_tab?
+             when :network; current_page?(:controller => "projects", :action => "graph", :id => @project)
+             when :merge_requests; controller.controller_name == "merge_requests"
+
+             # Dashboard Area
+             when :help; controller.controller_name == "help"
+             when :search; current_page?(search_path)
+             when :dash_issues; current_page?(dashboard_issues_path)
+             when :dash_mr; current_page?(dashboard_merge_requests_path)
+             when :root; current_page?(dashboard_path) || current_page?(root_path)
+
+             # Profile Area
+             when :profile;  current_page?(:controller => "profile", :action => :show)
+             when :password; current_page?(:controller => "profile", :action => :password)
+             when :token;    current_page?(:controller => "profile", :action => :token)
+             when :design;   current_page?(:controller => "profile", :action => :design)
+             when :ssh_keys; controller.controller_name == "keys"
+
+             # Admin Area
+             when :admin_root;     controller.controller_name == "dashboard"
+             when :admin_users;    controller.controller_name == 'users'
+             when :admin_projects; controller.controller_name == "projects"
+             when :admin_emails;   controller.controller_name == 'mailer'
+             when :admin_resque;   controller.controller_name == 'resque'
+
+             else
+               false
+             end
+    active ? "current" : nil
+  end
 end
-%nav.main_menu
-  = link_to "Home", root_path, :class => "home #{"current" if current_page?(dashboard_path) || current_page?(root_path)}", :title => "Home"
-  = link_to dashboard_issues_path, :class => "#{"current" if current_page?(dashboard_issues_path)}", :id => "issues_slide" do
-    Issues
-    %span.count= current_user.assigned_issues.opened.count
-  = link_to dashboard_merge_requests_path, :class => "#{"current" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide" do
-    Requests
-    %span.count= current_user.cared_merge_requests.count
-  = link_to search_path, :class => "#{"current" if current_page?(search_path)}" do
-    Search
-  = link_to "Help", help_path, :class => "#{"current" if controller.controller_name == "help"}"
+%ul.main_menu
+  %li.home{:class => tab_class(:root)}
+    = link_to "Home", root_path, :title => "Home"
+
+  %li{:class => tab_class(:dash_issues)}
+    = link_to dashboard_issues_path do
+      Issues
+      %span.count= current_user.assigned_issues.opened.count
+
+  %li{:class => tab_class(:dash_mr)}
+    = link_to dashboard_merge_requests_path do
+      Merge Requests
+      %span.count= current_user.cared_merge_requests.count
+
+  %li{:class => tab_class(:search)}
+    = link_to "Search", search_path
+
+  %li{:class => tab_class(:help)}
+    = link_to "Help", help_path
-%nav.main_menu
-  = link_to @project.code, project_path(@project), :class => "home #{project_tab_class}", :title => "Project"
+%ul.main_menu
+  %li.home{:class => project_tab_class}
+    = link_to @project.code, project_path(@project), :title => "Project"
+
   - if @project.repo_exists?
     - if can? current_user, :download_code, @project
-      = link_to tree_project_ref_path(@project, @project.root_ref), :class => tree_tab_class do
-        Files
-      = link_to "Commits", project_commits_path(@project), :class => commit_tab_class
+      %li{:class => tree_tab_class}
+        = link_to tree_project_ref_path(@project, @project.root_ref) do
+          Files
+      %li{:class => commit_tab_class}
+        = link_to "Commits", project_commits_path(@project)
+
+      %li{:class => tab_class(:network)}
+        = link_to "Network", graph_project_path(@project)
-    = link_to "Network", graph_project_path(@project), :class => current_page?(:controller => "projects", :action => "graph", :id => @project) ? "current" : nil
     - if @project.issues_enabled
-      = link_to  project_issues_filter_path(@project), :class => issues_tab? ? "current" : nil do
-        Issues
-        %span.count= @project.issues.opened.count
+      %li{:class => tab_class(:issues)}
+        = link_to  project_issues_filter_path(@project)  do
+          Issues
+          %span.count= @project.issues.opened.count
+
     - if @project.merge_requests_enabled
-      = link_to project_merge_requests_path(@project), :class => (controller.controller_name == "merge_requests") ? "current wide" : "wide" do
-        Merge Requests
-        %span.count= @project.merge_requests.opened.count
+      %li{:class => tab_class(:merge_requests)}
+        = link_to project_merge_requests_path(@project) do
+          Merge Requests
+          %span.count= @project.merge_requests.opened.count
     - if @project.wall_enabled
-      = link_to wall_project_path(@project), :class => wall_tab? ? "current" : nil do
-        Wall
+      %li{:class =>  tab_class(:wall)}
+        = link_to wall_project_path(@project) do
+          Wall
     - if @project.wiki_enabled
-      = link_to project_wiki_path(@project, :index), :class => (controller.controller_name == "wikis") ? "current" : nil do
-        Wiki
+      %li{:class =>  tab_class(:wiki)}
+        = link_to project_wiki_path(@project, :index) do
+          Wiki
@@ -5,11 +5,16 @@
     = render "layouts/flash"
     = render "layouts/head_panel", :title => "Admin area"
     .container
-      %nav.main_menu
-        = link_to "Stats", admin_root_path, :class => "home #{'current' if controller.controller_name == "dashboard"}"
-        = link_to "Projects", admin_projects_path, :class => ('current' if controller.controller_name == "projects")
-        = link_to "Users", admin_users_path, :class => ('current' if controller.controller_name == 'users')
-        = link_to "Emails", admin_emails_path, :class => ('current' if controller.controller_name == 'mailer')
-        = link_to "Resque", admin_resque_path, :class => ('current' if controller.controller_name == 'resque')
+      %ul.main_menu
+        %li.home{:class => tab_class(:admin_root)}
+          = link_to "Stats", admin_root_path
+        %li{:class => tab_class(:admin_projects)}
+          = link_to "Projects", admin_projects_path
+        %li{:class => tab_class(:admin_users)}
+          = link_to "Users", admin_users_path
+        %li{:class => tab_class(:admin_emails)}
+          = link_to "Emails", admin_emails_path
+        %li{:class => tab_class(:admin_resque)}
+          = link_to "Resque", admin_resque_path
       .content= yield
@@ -5,12 +5,23 @@
     = render "layouts/flash"
     = render "layouts/head_panel", :title => "Profile"
     .container
-      %nav.main_menu
-        = link_to "Profile", profile_path, :class => "home #{current_page?(:controller => "profile", :action => :show) ? "current" : nil}"
-        = link_to "Password", profile_password_path,  :class => current_page?(:controller => "profile", :action => :password) ? "current" : nil
-        = link_to "Token", profile_token_path,  :class => current_page?(:controller => "profile", :action => :token) ? "current" : nil
-        = link_to "Design", profile_design_path, :class => current_page?(:controller => "profile", :action => :design) ? "current" : nil
-        = link_to keys_path,  :class => controller.controller_name == "keys" ? "current" : nil do
-          SSH Keys
+      %ul.main_menu
+        %li.home{:class => tab_class(:profile)}
+          = link_to "Profile", profile_path
+
+        %li{:class => tab_class(:password)}
+          = link_to "Password", profile_password_path
+
+        %li{:class => tab_class(:token)}
+          = link_to "Token", profile_token_path
+
+        %li{:class => tab_class(:design)}
+          = link_to "Design", profile_design_path
+
+        %li{:class => tab_class(:ssh_keys)}
+          = link_to keys_path do
+            SSH Keys
+            %span.count= current_user.keys.count
+
       .content
         = yield
	@@ -96,4 +96,41 @@ module ApplicationHelper		@@ -96,4 +96,41 @@ module ApplicationHelper
96	event.project &&	96	event.project &&
97	event.project.merge_requests_enabled	97	event.project.merge_requests_enabled
98	end	98	end
		99	+
		100	+ def tab_class(tab_key)
		101	+ active = case tab_key
		102	+
		103	+ # Project Area
		104	+ when :wall; wall_tab?
		105	+ when :wiki; controller.controller_name == "wikis"
		106	+ when :issues; issues_tab?
		107	+ when :network; current_page?(:controller => "projects", :action => "graph", :id => @project)
		108	+ when :merge_requests; controller.controller_name == "merge_requests"
		109	+
		110	+ # Dashboard Area
		111	+ when :help; controller.controller_name == "help"
		112	+ when :search; current_page?(search_path)
		113	+ when :dash_issues; current_page?(dashboard_issues_path)
		114	+ when :dash_mr; current_page?(dashboard_merge_requests_path)
		115	+ when :root; current_page?(dashboard_path) \|\| current_page?(root_path)
		116	+
		117	+ # Profile Area
		118	+ when :profile; current_page?(:controller => "profile", :action => :show)
		119	+ when :password; current_page?(:controller => "profile", :action => :password)
		120	+ when :token; current_page?(:controller => "profile", :action => :token)
		121	+ when :design; current_page?(:controller => "profile", :action => :design)
		122	+ when :ssh_keys; controller.controller_name == "keys"
		123	+
		124	+ # Admin Area
		125	+ when :admin_root; controller.controller_name == "dashboard"
		126	+ when :admin_users; controller.controller_name == 'users'
		127	+ when :admin_projects; controller.controller_name == "projects"
		128	+ when :admin_emails; controller.controller_name == 'mailer'
		129	+ when :admin_resque; controller.controller_name == 'resque'
		130	+
		131	+ else
		132	+ false
		133	+ end
		134	+ active ? "current" : nil
		135	+ end
99	end	136	end
1	-%nav.main_menu
2	- = link_to "Home", root_path, :class => "home #{"current" if current_page?(dashboard_path) \|\| current_page?(root_path)}", :title => "Home"
3	- = link_to dashboard_issues_path, :class => "#{"current" if current_page?(dashboard_issues_path)}", :id => "issues_slide" do
4	- Issues
5	- %span.count= current_user.assigned_issues.opened.count
6	- = link_to dashboard_merge_requests_path, :class => "#{"current" if current_page?(dashboard_merge_requests_path)}", :id => "merge_requests_slide" do
7	- Requests
8	- %span.count= current_user.cared_merge_requests.count
9	- = link_to search_path, :class => "#{"current" if current_page?(search_path)}" do
10	- Search
11	- = link_to "Help", help_path, :class => "#{"current" if controller.controller_name == "help"}"	1	+%ul.main_menu
		2	+ %li.home{:class => tab_class(:root)}
		3	+ = link_to "Home", root_path, :title => "Home"
		4	+
		5	+ %li{:class => tab_class(:dash_issues)}
		6	+ = link_to dashboard_issues_path do
		7	+ Issues
		8	+ %span.count= current_user.assigned_issues.opened.count
		9	+
		10	+ %li{:class => tab_class(:dash_mr)}
		11	+ = link_to dashboard_merge_requests_path do
		12	+ Merge Requests
		13	+ %span.count= current_user.cared_merge_requests.count
		14	+
		15	+ %li{:class => tab_class(:search)}
		16	+ = link_to "Search", search_path
		17	+
		18	+ %li{:class => tab_class(:help)}
		19	+ = link_to "Help", help_path
	@@ -5,12 +5,23 @@		@@ -5,12 +5,23 @@
5	= render "layouts/flash"	5	= render "layouts/flash"
6	= render "layouts/head_panel", :title => "Profile"	6	= render "layouts/head_panel", :title => "Profile"
7	.container	7	.container
8	- %nav.main_menu
9	- = link_to "Profile", profile_path, :class => "home #{current_page?(:controller => "profile", :action => :show) ? "current" : nil}"
10	- = link_to "Password", profile_password_path, :class => current_page?(:controller => "profile", :action => :password) ? "current" : nil
11	- = link_to "Token", profile_token_path, :class => current_page?(:controller => "profile", :action => :token) ? "current" : nil
12	- = link_to "Design", profile_design_path, :class => current_page?(:controller => "profile", :action => :design) ? "current" : nil
13	- = link_to keys_path, :class => controller.controller_name == "keys" ? "current" : nil do
14	- SSH Keys	8	+ %ul.main_menu
		9	+ %li.home{:class => tab_class(:profile)}
		10	+ = link_to "Profile", profile_path
		11	+
		12	+ %li{:class => tab_class(:password)}
		13	+ = link_to "Password", profile_password_path
		14	+
		15	+ %li{:class => tab_class(:token)}
		16	+ = link_to "Token", profile_token_path
		17	+
		18	+ %li{:class => tab_class(:design)}
		19	+ = link_to "Design", profile_design_path
		20	+
		21	+ %li{:class => tab_class(:ssh_keys)}
		22	+ = link_to keys_path do
		23	+ SSH Keys
		24	+ %span.count= current_user.keys.count
		25	+
15	.content	26	.content
16	= yield	27	= yield