[IMP] the top menu is now the same as on the website

bzr revid: fva@openerp.com-20120925162628-62e5ki5it2pj3ijl

2 files changed, 167 insertions, 130 deletions

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 496f84e8c17..a5edb871028 100644
--- a/addons/web/static/src/css/base.css
+++ b/addons/web/static/src/css/base.css
@@ -711,7 +711,7 @@
   text-indent: -99999px;
   vertical-align: top;
   margin-top: 8px;
-  margin-left: 4px;
+  margin-left: 3px;
   border-left: 4px solid transparent;
   border-right: 4px solid transparent;
   border-top: 4px solid #404040;
@@ -977,16 +977,23 @@
   padding: 5px 10px 7px;
   line-height: 20px;
   height: 20px;
+  text-decoration: none;
   color: #eeeeee;
   vertical-align: top;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
 }
 .openerp .oe_topbar .oe_topbar_item:hover {
-  background: #303030;
+  background: rgba(0, 0, 0, 0.2);
+  text-shadow: black 0px 0px 3px;
   color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
 }
 .openerp .oe_topbar .oe_topbar_avatar {
   width: 24px;
@@ -1040,36 +1047,103 @@
   float: left;
   padding: 0;
   margin: 0;
+  font-size: 13px;
 }
 .openerp .oe_menu > li {
   list-style-type: none;
   padding: 0;
   margin: 0;
   float: left;
+  display: block;
+  color: #eeeeee;
 }
 .openerp .oe_menu > li > a {
   display: block;
   padding: 5px 10px 7px;
   line-height: 20px;
   height: 20px;
+  text-decoration: none;
   color: #eeeeee;
   vertical-align: top;
   text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
+  -webkit-transition: all 0.2s ease-out;
+  -moz-transition: all 0.2s ease-out;
+  -ms-transition: all 0.2s ease-out;
+  -o-transition: all 0.2s ease-out;
+  transition: all 0.2s ease-out;
 }
 .openerp .oe_menu > li > a:hover {
-  background: #303030;
+  background: rgba(0, 0, 0, 0.2);
+  text-shadow: black 0px 0px 3px;
   color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
 }
 .openerp .oe_menu > li > .oe_active {
-  background: #303030;
+  background: rgba(0, 0, 0, 0.2);
+  text-shadow: black 0px 0px 3px;
   font-weight: bold;
-  color: white;
-  -moz-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  -webkit-box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
-  box-shadow: 0 1px 2px rgba(255, 255, 255, 0.3) inset;
+  -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4) inset;
+}
+.openerp .oe_user_menu {
+  float: right;
+  padding: 0;
+  margin: 0;
+}
+.openerp .oe_user_menu li {
+  list-style-type: none;
+  float: left;
+}
+.openerp .oe_user_menu .oe_dropdown_menu {
+  right: -1px;
+}
+.openerp .oe_systray > div {
+  float: left;
+  padding: 0 4px 0 4px;
+}
+.openerp .oe_systray {
+  float: right;
+}
+.openerp .oe_leftbar {
+  display: none;
+  width: 220px;
+  background: #f0eeee;
+  border-right: 1px solid #afafb6;
+  text-shadow: 0 1px 1px white;
+  padding-bottom: 16px;
+}
+.openerp a.oe_logo {
+  width: 220px;
+  display: block;
+  text-align: center;
+  height: 70px;
+  line-height: 70px;
+}
+.openerp a.oe_logo img {
+  height: 40px;
+  width: 157px;
+  margin: 14px 0;
+}
+.openerp .oe_footer {
+  position: fixed;
+  bottom: 0;
+  padding: 4px 0;
+  background: #f0eeee;
+  width: 220px;
+  text-align: center;
+}
+.openerp .oe_footer a {
+  font-weight: 800;
+  font-family: serif;
+  font-size: 16px;
+  color: black;
+}
+.openerp .oe_footer a span {
+  color: #c81010;
+  font-style: italic;
 }
 .openerp .oe_secondary_menu_section {
   font-weight: bold;
@@ -1177,63 +1251,6 @@
   border-right: 4px solid transparent;
   border-top: 4px solid #4c4c4c;
 }
-.openerp .oe_user_menu {
-  float: right;
-  padding: 0;
-  margin: 0;
-}
-.openerp .oe_user_menu li {
-  list-style-type: none;
-  float: left;
-}
-.openerp .oe_user_menu .oe_dropdown_menu {
-  right: -1px;
-}
-.openerp .oe_systray > div {
-  float: left;
-  padding: 0 4px 0 4px;
-}
-.openerp .oe_systray {
-  float: right;
-}
-.openerp .oe_leftbar {
-  display: none;
-  width: 220px;
-  background: #f0eeee;
-  border-right: 1px solid #afafb6;
-  text-shadow: 0 1px 1px white;
-  padding-bottom: 16px;
-}
-.openerp a.oe_logo {
-  width: 220px;
-  display: block;
-  text-align: center;
-  height: 70px;
-  line-height: 70px;
-}
-.openerp a.oe_logo img {
-  height: 40px;
-  width: 157px;
-  margin: 14px 0;
-}
-.openerp .oe_footer {
-  position: fixed;
-  bottom: 0;
-  padding: 4px 0;
-  background: #f0eeee;
-  width: 220px;
-  text-align: center;
-}
-.openerp .oe_footer a {
-  font-weight: 800;
-  font-family: serif;
-  font-size: 16px;
-  color: black;
-}
-.openerp .oe_footer a span {
-  color: #c81010;
-  font-style: italic;
-}
 .openerp .oe_about {
   background-color: white;
   background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAYAAAAGCAYAAADgzO9IAAAAKUlEQVQIHWO8e/fufwYsgAUkJigoiCIF5DMyoYggcUiXgNnBiGQKmAkARpcEQeriln4AAAAASUVORK5CYII=);
diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index c1d721115da..84ec0ee218c 100644
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -599,7 +599,8 @@ $sheet-max-width: 860px
         text-indent: -99999px
         vertical-align: top
         margin-top: 8px
-        margin-left: 4px
+        //margin-left set at 3px to avoid a strange overflow
+        margin-left: 3px 
         border-left: 4px solid transparent
         border-right: 4px solid transparent
         border-top: 4px solid#404040
@@ -792,6 +793,7 @@ $sheet-max-width: 860px
             display: none
     // }}}
     // Top Menu {{{
+    
     .oe_topbar
         width: 100%
         height: 32px
@@ -802,13 +804,16 @@ $sheet-max-width: 860px
             padding: 5px 10px 7px
             line-height: 20px
             height: 20px
+            text-decoration: none
             color: #eee
             vertical-align: top
             text-shadow: 0 1px 1px rgba(0,0,0,0.2)
-            &:hover
-                background: #303030
+            @include transition(all 0.2s ease-out)
+            &:hover,
+                background: rgba(0,0,0,0.2)
+                text-shadow: black 0px 0px 3px
                 color: white
-                @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+                @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
 
         .oe_topbar_avatar
             width: 24px
@@ -838,32 +843,96 @@ $sheet-max-width: 860px
                     @include vertical-gradient(#292929, #191919)
                     @include box-shadow(none)
 
+    // oe menu is the list of the buttons on the left side of the bar.
+    // So why aren't the buttons oe_topbar_items ? This sad state of affairs
+    // is a leftover from an uncomplete refactoring when the left and top menu
+    // were merged. You are welcome to refactor and clean this up
     .oe_menu
         float: left
         padding: 0
         margin: 0
+        font-size: 13px
         > li
             list-style-type: none
             padding: 0
             margin: 0
             float: left
+            display: block
+            color: #eeeeee
             > a
                 display: block
                 padding: 5px 10px 7px
                 line-height: 20px
                 height: 20px
+                text-decoration: none
                 color: #eee
                 vertical-align: top
                 text-shadow: 0 1px 1px rgba(0,0,0,0.2)
-                &:hover
-                    background: #303030
+                @include transition(all 0.2s ease-out)
+                &:hover,
+                    background: rgba(0,0,0,0.2)
+                    text-shadow: black 0px 0px 3px
                     color: white
-                    @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+                    @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
             > .oe_active
-                background: #303030
+                background: rgba(0,0,0,0.2)
+                text-shadow: black 0px 0px 3px
                 font-weight: bold
-                color: white
-                @include box-shadow(0 1px 2px rgba(255,255,255,0.3) inset)
+                @include box-shadow(0 1px 2px rgba(0,0,0,0.4) inset)
+
+    .oe_user_menu
+        float: right
+        padding: 0
+        margin: 0
+        li
+            list-style-type: none
+            float: left
+        .oe_dropdown_menu
+            right: -1px
+
+    .oe_systray > div
+        float: left
+        padding: 0 4px 0 4px
+    .oe_systray
+        float: right
+
+    // }}}
+    // Webclient.leftbar {{{
+    .oe_leftbar
+        display: none
+        width: 220px
+        background: #f0eeee
+        border-right: 1px solid $tag-border
+        text-shadow: 0 1px 1px white
+        padding-bottom: 16px
+    a.oe_logo
+        width: 220px
+        display: block
+        text-align: center
+        height: 70px
+        line-height: 70px
+        img
+            height: 40px
+            width: 157px
+            margin: 14px 0
+    .oe_footer
+        position: fixed
+        bottom: 0
+        padding: 4px 0
+        background: #f0eeee
+        width: 220px
+        text-align: center
+        a
+            font-weight: 800
+            font-family: serif
+            font-size: 16px
+            color: black
+            span
+                color: #c81010
+                font-style: italic
+    // }}}
+    // Webclient.leftbar items {{{
+
     .oe_secondary_menu_section
         font-weight: bold
         margin-left: 8px
@@ -943,55 +1012,6 @@ $sheet-max-width: 860px
             border-right: 4px solid transparent
             border-top: 4px solid #4c4c4c
 
-    .oe_user_menu
-        float: right
-        padding: 0
-        margin: 0
-        li
-            list-style-type: none
-            float: left
-        .oe_dropdown_menu
-            right: -1px
-
-    .oe_systray > div
-        float: left
-        padding: 0 4px 0 4px
-    .oe_systray
-        float: right
-    // }}}
-    // Webclient.leftbar {{{
-    .oe_leftbar
-        display: none
-        width: 220px
-        background: #f0eeee
-        border-right: 1px solid $tag-border
-        text-shadow: 0 1px 1px white
-        padding-bottom: 16px
-    a.oe_logo
-        width: 220px
-        display: block
-        text-align: center
-        height: 70px
-        line-height: 70px
-        img
-            height: 40px
-            width: 157px
-            margin: 14px 0
-    .oe_footer
-        position: fixed
-        bottom: 0
-        padding: 4px 0
-        background: #f0eeee
-        width: 220px
-        text-align: center
-        a
-            font-weight: 800
-            font-family: serif
-            font-size: 16px
-            color: black
-            span
-                color: #c81010
-                font-style: italic
     // }}}
     // About openerp {{{
     .oe_about