From 031ae7756e11f3aa3c53b81b408abdd762eef42a Mon Sep 17 00:00:00 2001 From: Dmitriy Zaporozhets Date: Tue, 3 Jul 2012 20:52:48 +0300 Subject: [PATCH] Refactored navigation --- app/assets/images/ajax_loader.gif | Bin 7542 -> 0 bytes app/assets/stylesheets/header.scss | 10 ++++++---- app/assets/stylesheets/nav.scss | 56 ++++++++++++++++++++++++++++++-------------------------- app/assets/stylesheets/themes/ui_modern.scss | 6 ++++-- app/helpers/application_helper.rb | 37 +++++++++++++++++++++++++++++++++++++ app/views/layouts/_app_menu.html.haml | 30 +++++++++++++++++++----------- app/views/layouts/_project_menu.html.haml | 43 +++++++++++++++++++++++++++---------------- app/views/layouts/admin.html.haml | 17 +++++++++++------ app/views/layouts/profile.html.haml | 25 ++++++++++++++++++------- 9 files changed, 152 insertions(+), 72 deletions(-) diff --git a/app/assets/images/ajax_loader.gif b/app/assets/images/ajax_loader.gif index c585e8f..8a97c91 100644 Binary files a/app/assets/images/ajax_loader.gif and b/app/assets/images/ajax_loader.gif differ diff --git a/app/assets/stylesheets/header.scss b/app/assets/stylesheets/header.scss index f7adc67..5e2e410 100644 --- a/app/assets/stylesheets/header.scss +++ b/app/assets/stylesheets/header.scss @@ -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; diff --git a/app/assets/stylesheets/nav.scss b/app/assets/stylesheets/nav.scss index e909eee..8a7bbc2 100644 --- a/app/assets/stylesheets/nav.scss +++ b/app/assets/stylesheets/nav.scss @@ -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 diff --git a/app/assets/stylesheets/themes/ui_modern.scss b/app/assets/stylesheets/themes/ui_modern.scss index fc4aaba..b8801f0 100644 --- a/app/assets/stylesheets/themes/ui_modern.scss +++ b/app/assets/stylesheets/themes/ui_modern.scss @@ -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; } } } diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb index de3f36c..2e4281a 100644 --- a/app/helpers/application_helper.rb +++ b/app/helpers/application_helper.rb @@ -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 diff --git a/app/views/layouts/_app_menu.html.haml b/app/views/layouts/_app_menu.html.haml index 7b5f2cf..6575ee9 100644 --- a/app/views/layouts/_app_menu.html.haml +++ b/app/views/layouts/_app_menu.html.haml @@ -1,11 +1,19 @@ -%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 diff --git a/app/views/layouts/_project_menu.html.haml b/app/views/layouts/_project_menu.html.haml index ff73bc2..da534c2 100644 --- a/app/views/layouts/_project_menu.html.haml +++ b/app/views/layouts/_project_menu.html.haml @@ -1,25 +1,36 @@ -%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 diff --git a/app/views/layouts/admin.html.haml b/app/views/layouts/admin.html.haml index bac3e71..fee77f1 100644 --- a/app/views/layouts/admin.html.haml +++ b/app/views/layouts/admin.html.haml @@ -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 diff --git a/app/views/layouts/profile.html.haml b/app/views/layouts/profile.html.haml index 93f7c18..dfe48d6 100644 --- a/app/views/layouts/profile.html.haml +++ b/app/views/layouts/profile.html.haml @@ -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 -- libgit2 0.21.2