Styling of the graph view dropdown menu

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

2 files changed, 67 insertions, 41 deletions

diff --git a/addons/web_graph/static/src/css/graph.css b/addons/web_graph/static/src/css/graph.css
index 7e01346cc3a..69c79542497 100644
--- a/addons/web_graph/static/src/css/graph.css
+++ b/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);
+}
+.openerp .graph-dropdown h3 {
+    margin: 8px 4px 4px 0;
+    color: #8786b7;
+    font-size: 13px;
 }
-.open .graph-dropdown {
+.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;
diff --git a/addons/web_graph/static/src/xml/web_graph.xml b/addons/web_graph/static/src/xml/web_graph.xml
index 5cdd0d46ee1..e1d9ba29a75 100644
--- a/addons/web_graph/static/src/xml/web_graph.xml
+++ b/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>