Commit 9ec083f6f5e194d8b3a712ec397ba633a3ee166b
1 parent
7d27aebe
Exists in
master
and in
28 other branches
ActionItem152: mais na barra!
git-svn-id: https://svn.colivre.coop.br/svn/noosfero/trunk@1194 3f533792-8f58-4932-b0fe-aaf55b0a4547
Showing
15 changed files
with
71 additions
and
41 deletions
Show diff stats
app/helpers/application_helper.rb
| ... | ... | @@ -129,7 +129,7 @@ module ApplicationHelper |
| 129 | 129 | ] |
| 130 | 130 | else |
| 131 | 131 | [ |
| 132 | - ( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ), | |
| 132 | + #( link_to _("%s's home") % @environment.name, { :controller=>"home" }, :id=>"link_to_envhome" ), | |
| 133 | 133 | ( link_to content_tag('span', _('Login')), { :controller => 'account', :action => 'login' }, :id => 'link_login' ), |
| 134 | 134 | search_link, |
| 135 | 135 | ] | ... | ... |
app/views/shared/categories_menu.rhtml
| 1 | 1 | <ul id='cat_menu'> |
| 2 | - <%= link_to( "<span>"+ _("Go Home") +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %> | |
| 2 | + <%= link_to( "<span>"+ @environment.name() +"</span>", {:controller=>"home"}, :id=>"menu_link_to_envhome", :title=>@environment.name) %> | |
| 3 | 3 | <% @environment.display_categories.each do |item| %> |
| 4 | 4 | <li id='category<%= item.display_color %>'<%= ' class="active"' if (@category && (@category.top_ancestor == item)) %>> |
| 5 | 5 | <%= item.name %> | ... | ... |
179 Bytes
200 Bytes
200 Bytes
200 Bytes
200 Bytes
public/images/icons-bar/ico-edit.gif
123 Bytes
public/images/icons-bar/ico-exit.gif
142 Bytes
35 Bytes
public/javascripts/menu.js
| 1 | 1 | function prepareMenu(id, options) { |
| 2 | 2 | |
| 3 | - var menuCloseTimeout = options.timeout || 333; | |
| 3 | + var menuCloseTimeout = options.timeout || 33; | |
| 4 | 4 | |
| 5 | 5 | if ( document.all ) { |
| 6 | 6 | // add a class for work arround msie´s css bugs |
| ... | ... | @@ -20,9 +20,11 @@ function prepareMenu(id, options) { |
| 20 | 20 | link.href = "#"; |
| 21 | 21 | link.className = "linkSubMenu"; |
| 22 | 22 | linkText.parentNode.insertBefore( link, linkText ); |
| 23 | - link.appendChild( linkText ); | |
| 24 | 23 | link.parentNode.style.zIndex = zIndex++; |
| 25 | 24 | link.subMenu = ul; |
| 25 | + var span = document.createElement("span"); | |
| 26 | + span.appendChild( linkText ); | |
| 27 | + link.appendChild( span ); | |
| 26 | 28 | ul.linkControle = link; |
| 27 | 29 | link.openSubMenu = |
| 28 | 30 | function ( isMouseClick ) { |
| ... | ... | @@ -35,12 +37,17 @@ function prepareMenu(id, options) { |
| 35 | 37 | return false; |
| 36 | 38 | } |
| 37 | 39 | } else { |
| 40 | + link.className += " menu-opened" | |
| 38 | 41 | this.subMenu.style.display = "block"; |
| 39 | 42 | clearTimeout(this.timeOutClose); |
| 40 | 43 | clearTimeout(this.subMenu.timeOutClose); |
| 41 | 44 | } |
| 42 | 45 | } |
| 43 | - link.closeSubMenu = function(){ this.subMenu.style.display = "none" } | |
| 46 | + link.closeSubMenu = | |
| 47 | + function(){ | |
| 48 | + this.subMenu.style.display = "none"; | |
| 49 | + link.className = link.className.replace( / menu-opened/g, "" ); | |
| 50 | + } | |
| 44 | 51 | |
| 45 | 52 | //link.onclick = function(){ this.openSubMenu(true); return false }Is not working |
| 46 | 53 | |
| ... | ... | @@ -56,7 +63,8 @@ function prepareMenu(id, options) { |
| 56 | 63 | this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout ); |
| 57 | 64 | }; |
| 58 | 65 | |
| 59 | - ul.closeSubMenu = function(){ this.style.display = "none" } | |
| 66 | + //ul.closeSubMenu = function(){ this.style.display = "none" } | |
| 67 | + ul.closeSubMenu = function(){ this.linkControle.closeSubMenu() } | |
| 60 | 68 | |
| 61 | 69 | ul.onmouseover = ul.onfocus = |
| 62 | 70 | function () { |
| ... | ... | @@ -68,7 +76,7 @@ function prepareMenu(id, options) { |
| 68 | 76 | function () { |
| 69 | 77 | if ( this.blurCalledByIEWorkArroundBug ) { return false } |
| 70 | 78 | this.blurCalledByIEWorkArroundBug = true; |
| 71 | - this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 ); | |
| 79 | + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout ); | |
| 72 | 80 | }; |
| 73 | 81 | }); |
| 74 | 82 | |
| ... | ... | @@ -99,7 +107,7 @@ function prepareMenu(id, options) { |
| 99 | 107 | }; |
| 100 | 108 | a.onblur = function() { |
| 101 | 109 | forceUlBlurFromLink(this); |
| 102 | - this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), 333 ); | |
| 110 | + this.timeOutClose = setTimeout( this.closeSubMenu.bind(this), menuCloseTimeout ); | |
| 103 | 111 | }; |
| 104 | 112 | } else { |
| 105 | 113 | a.onfocus = function() { forceUlFocusFromLink(this) }; | ... | ... |
public/stylesheets/common.css
public/stylesheets/menu.css
| ... | ... | @@ -19,31 +19,27 @@ |
| 19 | 19 | height: 22px; |
| 20 | 20 | z-index: 4500; |
| 21 | 21 | background-color: #3465A4; |
| 22 | + font-size: 11px; | |
| 23 | + letter-spacing: -1px; | |
| 24 | + background: url(/images/white-pixel.gif) 0px 100% repeat-x; | |
| 22 | 25 | } |
| 23 | 26 | |
| 24 | 27 | #menu_link_to_envhome { |
| 25 | - position: absolute; | |
| 26 | - top: 0px; | |
| 27 | - left: 0px; | |
| 28 | + float: left; | |
| 28 | 29 | display: block; |
| 29 | - width: 35px; | |
| 30 | + padding-left: 36px; | |
| 30 | 31 | height: 100%; |
| 31 | - background: url(/images/icons-bar/ico-fbes-fundo-azul.gif) 0px 50% no-repeat; | |
| 32 | + background: url(/images/icons-bar/ico-fbes-fundo-azul.gif) 0px 0% no-repeat; | |
| 32 | 33 | text-align: center; |
| 33 | 34 | color: transparent; |
| 34 | - font-size: 0px; | |
| 35 | 35 | text-decoration: none; |
| 36 | 36 | } |
| 37 | 37 | body.category1 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-laranja.gif) } |
| 38 | 38 | body.category2 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-verde.gif) } |
| 39 | 39 | body.category3 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-lilas.gif) } |
| 40 | 40 | body.category4 #menu_link_to_envhome { background-image: url(/images/icons-bar/ico-fbes-fundo-vermelho.gif) } |
| 41 | -#menu_link_to_envhome span { | |
| 42 | - position: relative; | |
| 43 | - left: -100px; | |
| 44 | -} | |
| 45 | 41 | |
| 46 | -body.category #noosfero_bar { background-color: #2A5896 } | |
| 42 | +body.category #noosfero_bar { background-color: #2A5896 } | |
| 47 | 43 | |
| 48 | 44 | body.category1 #noosfero_bar { background-color: #E26B00 } |
| 49 | 45 | #category1 .linkSubMenu, |
| ... | ... | @@ -69,6 +65,11 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 69 | 65 | #category4:hover .linkSubMenu, |
| 70 | 66 | #category4:hover ul { background-color: #A40000 } |
| 71 | 67 | |
| 68 | +body.category1 .linkSubMenu { background-image: url(/images/borda-esq-aba-laranja.gif) } | |
| 69 | +body.category2 .linkSubMenu { background-image: url(/images/borda-esq-aba-verde.gif) } | |
| 70 | +body.category3 .linkSubMenu { background-image: url(/images/borda-esq-aba-lilas.gif) } | |
| 71 | +body.category4 .linkSubMenu { background-image: url(/images/borda-esq-aba-vermelho.gif) } | |
| 72 | + | |
| 72 | 73 | #user_box { |
| 73 | 74 | position: absolute; |
| 74 | 75 | top: 0px; |
| ... | ... | @@ -77,33 +78,35 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 77 | 78 | |
| 78 | 79 | #user_box a:link, |
| 79 | 80 | #user_box a:visited { |
| 80 | - font-size: 11px; | |
| 81 | 81 | font-weight: bold; |
| 82 | 82 | text-decoration: none; |
| 83 | 83 | line-height: 20px; |
| 84 | 84 | color: #FFF; |
| 85 | - margin-right: 10px; | |
| 85 | + margin-right: 20px; | |
| 86 | + padding-left: 21px; | |
| 86 | 87 | opacity: 0.7; |
| 87 | 88 | display: block; |
| 88 | 89 | float: left; |
| 89 | 90 | height: 20px; |
| 91 | + background-position: 0px 0%; | |
| 92 | + background-repeat: no-repeat; | |
| 90 | 93 | } |
| 94 | + | |
| 91 | 95 | #user_box a:hover, |
| 92 | 96 | #user_box a:active { |
| 93 | 97 | opacity: 1; |
| 94 | 98 | } |
| 95 | 99 | |
| 96 | 100 | #user_box a#link_to_envhome { |
| 97 | - margin-right: 50px; | |
| 101 | + margin-right: 40px; | |
| 98 | 102 | } |
| 99 | 103 | |
| 100 | -#link_go_home, | |
| 101 | -#link_go_home:hover { | |
| 104 | +#user_box #link_go_home, | |
| 105 | +#user_box #link_go_home:hover { | |
| 102 | 106 | position: relative; |
| 103 | 107 | padding: 0px; |
| 104 | - margin: 0px; | |
| 105 | 108 | } |
| 106 | -#link_go_home img { | |
| 109 | +#user_box #link_go_home img { | |
| 107 | 110 | position: absolute; |
| 108 | 111 | top: -1px; |
| 109 | 112 | left: -23px; |
| ... | ... | @@ -113,15 +116,10 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 113 | 116 | top: -1px; |
| 114 | 117 | } |
| 115 | 118 | |
| 116 | -#link_edit_profile { | |
| 117 | - padding-left: 20px; | |
| 118 | - background: url(/images/icons-bar/ico-edit.gif) 0px 0% no-repeat; | |
| 119 | -} | |
| 120 | - | |
| 121 | -#link_logout { | |
| 122 | - padding-left: 20px; | |
| 123 | - background: url(/images/icons-bar/ico-exit.gif) 0px 0% no-repeat; | |
| 124 | -} | |
| 119 | +#link_login { background-image: url(/images/icons-bar/ico-enter.gif) } | |
| 120 | +#open_search { background-image: url(/images/icons-bar/ico-search.gif) } | |
| 121 | +#link_edit_profile { background-image: url(/images/icons-bar/ico-edit.gif) } | |
| 122 | +#link_logout { background-image: url(/images/icons-bar/ico-exit.gif) } | |
| 125 | 123 | |
| 126 | 124 | #cat_menu { |
| 127 | 125 | padding: 0px; |
| ... | ... | @@ -136,9 +134,13 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 136 | 134 | color: #FFF; |
| 137 | 135 | } |
| 138 | 136 | |
| 137 | +#category1 .menu-opened, | |
| 139 | 138 | #category1 ul a:hover, #category1 a:active { color: #FDD79E } |
| 139 | +#category2 .menu-opened, | |
| 140 | 140 | #category2 ul a:hover, #category2 a:active { color: #C4F099 } |
| 141 | +#category3 .menu-opened, | |
| 141 | 142 | #category3 ul a:hover, #category3 a:active { color: #D6BFD3 } |
| 143 | +#category4 .menu-opened, | |
| 142 | 144 | #category4 ul a:hover, #category4 a:active { color: #F79494 } |
| 143 | 145 | |
| 144 | 146 | .linkSubMenu { |
| ... | ... | @@ -146,10 +148,23 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 146 | 148 | float: left; |
| 147 | 149 | display: block; |
| 148 | 150 | margin-left: 5px; |
| 149 | - padding: 0px 5px; | |
| 150 | - height: 100%; | |
| 151 | 151 | position: relative; |
| 152 | - left: 50px; | |
| 152 | + left: 10px; | |
| 153 | + background-position: 0% 0%; | |
| 154 | + background-repeat: no-repeat; | |
| 155 | + background-image: url(/images/borda-esq-aba-azul.gif); | |
| 156 | + border-right: 1px solid #FFF; | |
| 157 | +} | |
| 158 | +.linkSubMenu span { | |
| 159 | + display: block; | |
| 160 | + line-height: 22px; | |
| 161 | + padding: 0px 5px; | |
| 162 | + background-position: 0% 100%; | |
| 163 | + background-repeat: repeat-x; | |
| 164 | + background-image: url(/images/white-pixel.gif); | |
| 165 | +} | |
| 166 | +.menu-opened span { | |
| 167 | + background-image: none; | |
| 153 | 168 | } |
| 154 | 169 | |
| 155 | 170 | #cat_menu li { |
| ... | ... | @@ -157,6 +172,8 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 157 | 172 | margin: 0px; |
| 158 | 173 | list-style: none; |
| 159 | 174 | display: inline; |
| 175 | + font-size: 14px; | |
| 176 | + letter-spacing: 0px; | |
| 160 | 177 | } |
| 161 | 178 | |
| 162 | 179 | #cat_menu ul { |
| ... | ... | @@ -164,9 +181,14 @@ body.category4 #noosfero_bar { background-color: #B80000 } |
| 164 | 181 | position: absolute; |
| 165 | 182 | top: 22px; |
| 166 | 183 | left: 0px; |
| 167 | - width: 100%; | |
| 168 | - padding: 0px 0px 0px 20px; | |
| 184 | + right: 0px; | |
| 185 | + padding: 0px 0px 2px 20px; | |
| 169 | 186 | margin: 0px; |
| 187 | + border: 1px solid #FFF; | |
| 188 | + border-top: none; | |
| 189 | +} | |
| 190 | +.msie #cat_menu ul { | |
| 191 | + width: 100%; | |
| 170 | 192 | } |
| 171 | 193 | |
| 172 | 194 | #cat_menu ul a { | ... | ... |