From ce9b941a4cb9d97ff7a10b23b4764f33a6afa071 Mon Sep 17 00:00:00 2001 From: Marius BALTEANU Date: Fri, 27 Sep 2019 01:18:42 +0300 Subject: [PATCH] wip --- app/views/layouts/base.html.erb | 81 ++++++++++++------ lib/redmine/menu_manager.rb | 10 ++- public/javascripts/application.js | 4 +- public/stylesheets/application.css | 127 +++++++++++++++++++++-------- 4 files changed, 156 insertions(+), 66 deletions(-) diff --git a/app/views/layouts/base.html.erb b/app/views/layouts/base.html.erb index 42819c1fb..56b42aa28 100644 --- a/app/views/layouts/base.html.erb +++ b/app/views/layouts/base.html.erb @@ -60,46 +60,75 @@
-
-
- <%= render_menu :account_menu -%> -
- <%= content_tag('div', "#{l(:label_logged_as)} #{link_to_user(User.current, :format => :username)}".html_safe, :id => 'loggedas') if User.current.logged? %> +
+ + + diff --git a/lib/redmine/menu_manager.rb b/lib/redmine/menu_manager.rb index eb40141c1..ac83b2b2c 100644 --- a/lib/redmine/menu_manager.rb +++ b/lib/redmine/menu_manager.rb @@ -110,12 +110,14 @@ module Redmine menu_name.present? && Redmine::MenuManager.items(menu_name).children.present? end - def render_menu(menu, project=nil) + def render_menu(menu, project=nil, options={}) links = [] menu_items_for(menu, project) do |node| links << render_menu_node(node, project) end - links.empty? ? nil : content_tag('ul', links.join.html_safe) + default_options = {:class => 'nav-list'} + options = default_options.merge(options) + links.empty? ? nil : content_tag('ul', links.join.html_safe, options) end def render_menu_node(node, project=nil) @@ -124,7 +126,7 @@ module Redmine else caption, url, selected = extract_node_details(node, project) return content_tag('li', - render_single_menu_node(node, caption, url, selected)) + render_single_menu_node(node, caption, url, selected), :class => 'nav-item') end end @@ -132,7 +134,7 @@ module Redmine caption, url, selected = extract_node_details(node, project) html = [].tap do |html| - html << '
  • ' + html << '
  • ' # Parent html << render_single_menu_node(node, caption, url, selected) diff --git a/public/javascripts/application.js b/public/javascripts/application.js index e125e68b4..152dc016f 100644 --- a/public/javascripts/application.js +++ b/public/javascripts/application.js @@ -892,8 +892,8 @@ function toggleDisabledInit() { $('input[data-disables], input[data-enables], input[data-shows]').each(toggleDisabledOnChange); } -function toggleNewObjectDropdown() { - var dropdown = $('#new-object + ul.menu-children'); +function toggleNewObjectDropdown(element) { + var dropdown = $(element).next('.menu-children'); if(dropdown.hasClass('visible')){ dropdown.removeClass('visible'); }else{ diff --git a/public/stylesheets/application.css b/public/stylesheets/application.css index 800415f91..5f15198f4 100644 --- a/public/stylesheets/application.css +++ b/public/stylesheets/application.css @@ -15,44 +15,79 @@ div#wrapper, div#wrapper2, div#wrapper3 { min-height: inherit; } #wrapper {background: white;overflow: hidden;} #wrapper3 { display: flex; flex-direction: column; } -#top-menu {background: #3E5B76; color: #fff; height:1.8em; font-size: 0.8em; padding: 2px 2px 0px 6px;} -#top-menu ul {margin: 0; padding: 0;} -#top-menu li { - float:left; - list-style-type:none; - margin: 0px 0px 0px 0px; - padding: 0px 0px 0px 0px; - white-space:nowrap; +#top-menu *, *::before, *::after { + box-sizing: border-box; } -#top-menu a {color: #fff; margin-right: 8px; font-weight: bold;} -#top-menu #loggedas { float: right; margin-right: 0.5em; color: #fff; } - -#account {float:right;} - -#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 20px 6px; position:relative;} +#top-menu {background: #3E5B76; padding: 2px 6px 0px 6px; display: flex;} +#top-menu > nav { + line-height: 24px; + padding: 6px 0 6px 0; +} +#top-menu .general-menu { + align-items: stretch; + flex: 1 1 auto; +} +#top-menu .profile-menu { + flex: 0 0 auto; + border-top: 0; +} +#top-menu ul.nav-list > li.nav-item { + margin-right: 8px; +} +#top-menu ul.nav-list > li.nav-item:last-child { + margin-right: 0; +} +#top-menu ul.nav-list li.nav-item > a { + font-size: 0.9em; + color: #fff; +} +#top-menu .profile-menu li.avatar-menu .drdn-content { + padding-top: 5px; + padding-bottom: 5px; +} +#top-menu .profile-menu li.avatar-menu li { + flex-direction: column; +} +#top-menu .profile-menu li.avatar-menu li a { + width: 100%; + display: block; + padding: 4px; +} +#top-menu .profile-menu li.avatar-menu:hover > a { + text-decoration: none; +} +#top-menu .profile-menu li.avatar-menu img.gravatar { + border: 1px solid #dfdfdf; + margin-right: 4px; +} +#top-menu .profile-menu li.avatar-menu:hover img.gravatar { + border: 1px solid #fff; +} +#top-menu .profile-menu li.avatar-menu ul { + padding: 0; + min-width: 200px; +} +#loggedas span.name { + font-weight: 600; + padding: 4px; +} +#loggedas span.login { + display: block; +} +#header {min-height:5.3em;margin:0;background-color:#628DB6;color:#f8f8f8; padding: 4px 8px 0 6px;} #header a {color:#f8f8f8;} #header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;} #header h1 .breadcrumbs { display:block; font-size: .5em; font-weight: normal; } -#quick-search {float:right;} -#quick-search #q {width:130px; height:24px; box-sizing:border-box; vertical-align:middle; border:1px solid #ccc; border-radius:3px;} +#quick-search label, #quick-search label a {color: #fff;} +#quick-search #q {width:130px; height:24px;} -#main-menu {position: absolute; bottom: 0px; left:6px; margin-right: -500px; width: 100%;} -#main-menu ul {margin: 0; padding: 0; width: 100%; white-space: nowrap;} -#main-menu li { - float:none; - list-style-type:none; - margin: 0px 2px 0px 0px; - padding: 0px 0px 0px 0px; - white-space:nowrap; - display:inline-block; -} -#main-menu li a { - display: block; +#main-menu {margin-right: -500px; width: 100%;} +#main-menu li.nav-item a { color: #fff; text-decoration: none; font-weight: bold; - margin: 0; + display: block; padding: 4px 10px 4px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; @@ -149,6 +184,24 @@ a.collapsible {padding-left: 12px; } a#toggle-completed-versions {color:#999;} +/***** Navigation *****/ +nav ul.nav-list { + margin: 0; + padding: 0; + width: 100%; + white-space: nowrap; + display: flex; + flex-direction: row; +} +nav ul.nav-list li.nav-item { + list-style-type: none; + margin: 0; + padding: 0; + white-space: nowrap; +} +nav ul.nav-list li.nav-item > a { + padding: 4px; +} /***** Dropdown *****/ .drdn {position:relative;} .drdn-trigger { @@ -165,7 +218,7 @@ a#toggle-completed-versions {color:#999;} display:none; position:absolute; right:0px; - top:25px; + top:28px; min-width:100px; background-color:#fff; border:1px solid #ccc; @@ -173,6 +226,13 @@ a#toggle-completed-versions {color:#999;} color:#555; z-index:99; } +.drdn-content .divider { + height: 1px; + background-color: #ccc; + padding: 0; + margin: 0; + border: 0; +} .drdn.expanded .drdn-content {display:block;} .drdn-content .quick-search {margin:8px;} @@ -207,7 +267,6 @@ div + .drdn-items {border-top:1px solid #ccc;} border: none; } .drdn-items>span {color:#999;} - .contextual .drdn-content {top:18px;} .contextual .drdn-items {padding:2px;} .contextual .drdn-items>a:hover {color:#2A5685; border:1px solid #628db6; background-color:#eef5fd; border-radius:3px;} @@ -216,19 +275,19 @@ div + .drdn-items {border-top:1px solid #ccc;} #project-jump .drdn-trigger { width:100%; height:24px; + line-height: 16px; display:inline-block; padding:3px 18px 3px 6px; border-radius:3px; border:1px solid #ccc; - margin:0 !important; vertical-align:middle; color:#555; background:#fff url(../images/arrow_down.png) no-repeat 97% 50%; } #project-jump .drdn.expanded .drdn-trigger {background-image:url(../images/arrow_up.png);} #project-jump .drdn-content {width:280px;} -#project-jump .drdn-items>* {color:#555 !important;} -#project-jump .drdn-items>a:hover {background-color:#759FCF; color:#fff !important;} +#project-jump .drdn-items>*, .avatar-menu .drdn-items * {color:#555 !important;} +#project-jump .drdn-items>a:hover, .avatar-menu .drdn-items a:hover {background-color:#759FCF; color:#fff !important; text-decoration: none;} /***** Tables *****/ table.list, .table-list { border: 1px solid #e4e4e4; width: 100%; margin-bottom: 4px; border-radius: 3px; border-spacing: 0; overflow: hidden;} -- 2.22.0