Styling of the graph view dropdown menu

bzr revid: mit@openerp.com-20120613120826-q1mmzhx1qdx2m8cw

addons/web/static/src/css/base.css

@@ -1,4 +1,4 @@
-@charset "utf-8";
+@charset "UTF-8";
 @font-face {
   font-family: "mnmliconsRegular";
   src: url("/web/static/src/font/mnmliconsv21-webfont.eot") format("eot");
@@ -153,6 +153,7 @@
 }
 .openerp .oe_fade {
   color: #888888;
+  font-size: 12px;
 }
 .openerp .oe_bold {
   font-weight: bold;
@@ -1262,7 +1263,7 @@
 }
 .openerp .oe_searchview .oe_searchview_drawer {
   position: absolute;
-  z-index: 1;
+  z-index: 100;
   margin-top: 4px;
   top: 100%;
   right: -1px;

addons/web/static/src/css/base.sass

@@ -187,7 +187,7 @@ $colour4: #8a89ba
         cursor: wait
     .oe_fade
         color: #888
-        //font-size: 12px
+        font-size: 12px
     .oe_bold
         font-weight: bold
     // }}}
@@ -1007,7 +1007,7 @@ $colour4: #8a89ba
 
         .oe_searchview_drawer
             position: absolute
-            z-index: 1
+            z-index: 100
             // detach drawer from field slightly
             margin-top: 4px
             top: 100%

addons/web_graph/static/src/css/graph.css

@@ -1,9 +1,12 @@
-.dropdown-menu-icon {
-    z-index: 5000;
+.openerp a.dropdown-menu-icon {
+    z-index: 10;
     position: absolute;
-    right: 0px;
+    color: #4c4c4c;
+    right: 8px;
+}
+.openerp a.dropdown-menu-icon:hover {
+    text-decoration: none;
 }
-
 .editor-render {
     position: relative;
 }
@@ -12,24 +15,62 @@
     width: 650px;
     height: 350px;
 }
-.graph-dropdown {
-    padding: 5px;
-    width: 200px;
-    border: 1px #333 solid;
+.openerp .graph-dropdown {
     display: none;
     position: absolute;
-    right: 0px;
-    background: #fafaf5;
-    z-index: 100;
+    top: 40px;
+    right: 8px;
+    padding: 8px;
+    border: 1px solid #afafb6;
+    background: white;
+    z-index: 900;
+    min-width: 160px;
+    overflow-x: hidden;
+    -moz-border-radius: 3px;
+    -webkit-border-radius: 3px;
+    border-radius: 3px;
+    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
+    -box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
 }
-.open .graph-dropdown {
+.openerp .graph-dropdown h3 {
+    margin: 8px 4px 4px 0;
+    color: #8786b7;
+    font-size: 13px;
+}
+.openerp .graph-menu > li > a {
+    position: relative;
+    display: block;
+    padding: 2px 4px 2px 20px;
+    line-height: 14px;
+    color: #4c4c4c;
+    text-decoration: none;
+}
+.openerp .graph-menu > li > a:hover {
+    text-decoration: none;
+    background: #f0f0fa;
+    background: -moz-linear-gradient(#f0f0fa, #eeeef6);
+    background: -webkit-gradient(linear, left top, left bottom, from(#f0f0fa), to(#eeeef6));
+    background: -webkit-linear-gradient(#f0f0fa, #eeeef6);
+    -moz-box-shadow: none;
+    -webkit-box-shadow: none;
+    -box-shadow: none;
+}
+.openerp .open .graph-dropdown {
     display: block;
 }
 .graph-menu {
     padding: 3px;
 }
-.graph-menu .active {
-    background: #aaaaff;
+.graph-menu .active:before {
+    content: "W";
+    font-family: "entypoRegular" !important;
+    font-size: 24px;
+    font-weight: 300 !important;
+    color: #a3a3a3;
+    position: absolute;
+    left: 4px;
+    top: -2px;
 }
 li {
     padding: 2px;

addons/web_graph/static/src/xml/web_graph.xml

@@ -4,45 +4,30 @@
         </div>
         <a href="#" class="oe_i dropdown-menu-icon" data-toggle="dropdown" title="Graph Options">B</a>
         <div class="graph-dropdown">
-            <div class="menu-section">
-                Graph Mode:
-            </div>
+            <h3 class="menu-section">
+                Graph Mode
+            </h3>
             <ul class="graph-menu oe_graph_options">
                 <li><a href="#" data-mode="pie">Pie</a></li>
-                <li>
-                    <a href="#" data-mode="bar" data-legend="top"
-                       data-stacked="true">Bars</a>
-                    <div class="oe_i graph-menu-options">
-                        <a href="#" data-mode="bar" data-legend="top"
-                           data-stacked="true" title="Stacked Bars">w</a>
-                        <a href="#" data-mode="bar" data-legend="top"
-                           data-stacked="false" title="Multiple Bars">O</a>
-                    </div>
+                <li><a href="#" data-mode="bar" data-legend="top" data-stacked="true">Bars</a>
                 </li>
                 <li><a href="#" data-mode="line">Lines</a></li>
-                <li><a href="#" data-mode="area" data-legend="top"
-                        data-stacked="true">Areas</a>
-                    <div class="oe_i graph-menu-options">
-                        <a href="#" data-mode="area" data-legend="top"
-                            data-stacked="true" title="Stacked Areas">w</a>
-                        <a href="#" data-mode="area" data-legend="top"
-                            data-stacked="false" title="Multiple Areas">O</a>
-                    </div>
+                <li><a href="#" data-mode="area" data-legend="top" data-stacked="true">Areas</a>
                 </li>
                 <li><a href="#" data-mode="radar" data-legend="inside"
                         data-orientation="0">Radar</a></li>
             </ul>
-            <div class="menu-section">
-                Legend:
-            </div>
+            <h3 class="menu-section">
+                Legend
+            </h3>
             <ul class="graph-menu oe_graph_options">
-                <li><a href="#" data-legend="no">Hide</a></li>
+                <li><a href="#" data-legend="no">Hidden</a></li>
                 <li><a href="#" data-legend="inside">Inside</a></li>
                 <li><a href="#" data-legend="top">Top</a></li>
             </ul>
-            <div class="menu-section">
-                Actions:
-            </div>
+            <h3 class="menu-section">
+                Actions
+            </h3>
             <ul class="graph-menu">
                 <li><a href="#" id="graph_switch">Switch Axis</a></li>
                 <li><a href="#" id="graph_show_data">Show Data</a></li>

addons/web_kanban/static/src/css/kanban.css

@@ -391,7 +391,7 @@
   position: absolute;
   top: 30px;
   right: -140px;
-  padding: 4px;
+  padding: 8px;
   border: 1px solid #afafb6;
   min-width: 160px;
   overflow-x: hidden;