[IMP]improve the dropdown selection widget

bzr revid: mba@tinyerp.com-20140318132948-85nnbkbwqri8gnld

diff --git a/addons/web/static/src/css/base.css b/addons/web/static/src/css/base.css
index 7e615c5..9bb218f 100644 (file)
--- a/addons/web/static/src/css/base.css
+++ b/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");
@@ -3431,33 +3431,58 @@ body.oe_single_form .oe_single_form_container {
     overflow: hidden !important;
   }
 }
-.dropdown-menu.state {
+.openerp .dropdown-menu.state {
   background: white;
   background: white !important;
   min-width: 100%;
-  padding-right: 9px !important;
+  padding-right: 10px !important;
 }
-
-.dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus {
+.openerp .dropdown-menu.state li a, .openerp .dropdown-menu.state li a:hover, .openerp .dropdown-menu.state li a:focus {
   text-decoration: none;
   color: #333333;
   padding-left: 5px;
   padding-right: 0px;
+  font-size: 13px;
 }
-
-.btn.btn-xs.btn-danger {
-  color: white;
-  text-decoration: none !important;
-}
-
-.btn.btn-xs.btn-default {
+.openerp .btn.btn-xs.btn-default {
   color: #333333;
   text-decoration: none !important;
+  float: none;
 }
-
-.btn.btn-xs.btn-success {
-  color: white;
-  text-decoration: none !important;
+.openerp .btn-group:focus, .openerp .btn-group:hover {
+  padding: 1px 5px;
+  border: 1px solid #98999b;
+  display: inline;
+}
+.openerp .status {
+  display: inline-block;
+  position: relative;
+  height: 12px;
+  width: 12px;
+  -moz-border-radius: 6px;
+  -webkit-border-radius: 6px;
+  border-radius: 6px;
+  -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
+  background-position: center center;
+  background-image: radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%);
+  background-image: -moz-radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%);
+  background-image: -webkit-radial-gradient(circle, #dddddd 0%, #aaaaaa 40%, #999999 100%);
+}
+.openerp .status.error {
+  background: #cc3333;
+  background-position: center center;
+  background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
+  background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
+  background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
+}
+.openerp .status.ok {
+  background: #44dd44;
+  background-position: center center;
+  background-image: radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%);
+  background-image: -moz-radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%);
+  background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44cc44 40%, #33bb33 100%);
 }
 
 .ui-icon {

diff --git a/addons/web/static/src/css/base.sass b/addons/web/static/src/css/base.sass
index b034206..c95272c 100644 (file)
--- a/addons/web/static/src/css/base.sass
+++ b/addons/web/static/src/css/base.sass
@@ -2771,25 +2771,57 @@ body.oe_single_form
             overflow: hidden !important
 // }}}
 
-.dropdown-menu.state
-    background: white
-    background: white !important
-    min-width: 100%
-    padding-right: 10px !important
-.dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus
-    text-decoration: none
-    color: #333
-    padding-left: 5px
-    padding-right: 0px
-.btn.btn-xs.btn-danger
-    color: #FFF
-    text-decoration: none !important
-.btn.btn-xs.btn-default
-    color: #333
-    text-decoration: none !important
-.btn.btn-xs.btn-success
-    color: #FFF
-    text-decoration: none !important
+.openerp
+    .dropdown-menu.state
+        background: white
+        background: white !important
+        min-width: 100%
+        padding-right: 10px !important
+    .dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus
+        text-decoration: none
+        color: #333
+        padding-left: 5px
+        padding-right: 0px
+        font-size: 13px
+    .btn.btn-xs.btn-default
+        color: #333
+        text-decoration: none !important
+        float: none
+    .btn-group:focus, .btn-group:hover
+        padding: 1px 5px
+        border: 1px solid #98999B
+        display: inline
+
+    .status
+        display: inline-block
+        position: relative
+        height: 12px
+        width: 12px
+        -moz-border-radius: 6px
+        -webkit-border-radius: 6px
+        border-radius: 6px
+        -moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
+        -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
+        -box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6)
+        background-position: center center
+        background-image: radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%)
+        background-image: -moz-radial-gradient(#dddddd 0%, #aaaaaa 40%, #999999 100%)
+        background-image: -webkit-radial-gradient(circle, #dddddd 0%, #aaaaaa 40%, #999999 100%)
+
+    .status.error
+        background: #cc3333
+        background-position: center center
+        background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%)
+        background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%)
+        background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%)
+
+    .status.ok
+        background: #44dd44
+        background-position: center center
+        background-image: radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%)
+        background-image: -moz-radial-gradient(#55dd55 0%, #44cc44 40%, #33bb33 100%)
+        background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44cc44 40%, #33bb33 100%)
+
 // End hack }}}
 
 // Hack for ui icon {{{

diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js
index c9344ae..62367ad 100644 (file)
--- a/addons/web/static/src/js/view_form.js
+++ b/addons/web/static/src/js/view_form.js
@@ -2337,9 +2337,9 @@ instance.web.form.DropdownSelection = instance.web.form.FieldChar.extend({
         this._super(field_manager, node);
     },
     prepare_dropdown_selection: function() {
-        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_icon': '<img src="/web/static/src/img/icons/gtk-normal.png"/>' },
-                { 'name': 'blocked', 'state_name': ' Blocked', 'state_icon': '<img src="/web/static/src/img/icons/gtk-no.png"/>' },
-                { 'name': 'done', 'state_name': ' Ready', 'state_icon': '<img src="/web/static/src/img/icons/gtk-yes.png"/>' }]
+        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_icon': 'status' },
+                { 'name': 'blocked', 'state_name': ' Blocked', 'state_icon': 'status error' },
+                { 'name': 'done', 'state_name': ' Ready', 'state_icon': 'status ok' }]
     },
     render_value: function() {
         var self = this;

diff --git a/addons/web/static/src/xml/base.xml b/addons/web/static/src/xml/base.xml
index 505f3e5..f7dd56f 100644 (file)
--- a/addons/web/static/src/xml/base.xml
+++ b/addons/web/static/src/xml/base.xml
@@ -1011,9 +1011,8 @@
 <t t-name="DropdownSelection">
     <span class="btn-group">
         <t t-foreach="states" t-as="rec">
-            <a t-att-class="'btn btn-default btn-xs'" t-if="widget.get('value') === rec.name" t-att-title="rec.state_name" >
-                <t t-raw="rec.state_icon"/>
-                <a t-att-class="'oe_legend btn btn-default btn-xs dropdown-toggle'" data-toggle="dropdown">
+            <a t-att-class="rec.state_icon" t-if="widget.get('value') === rec.name" t-att-title="rec.state_name" >
+                <a t-att-class="'oe_legend dropdown-toggle'" data-toggle="dropdown">
                 <span class="caret"></span>
                 <span class="sr-only">Toggle Dropdown</span> </a>
             </a>
@@ -1022,8 +1021,7 @@
             <t t-foreach="states" t-as="rec">
                 <t t-if="widget.get('value') !== rec.name">
                     <li class="oe_legend" t-att-data-value="rec.name" ><a href="#">
-                        <t t-raw="rec.state_icon" />
-                        <t t-raw="rec.state_name" /></a>
+                        <span t-att-class="rec.state_icon"/> <t t-raw="rec.state_name" /></a>
                     </li>
                 </t>
             </t>

diff --git a/addons/web_kanban/static/src/js/kanban.js b/addons/web_kanban/static/src/js/kanban.js
index 0992073..b78b5c9 100644 (file)
--- a/addons/web_kanban/static/src/js/kanban.js
+++ b/addons/web_kanban/static/src/js/kanban.js
@@ -1319,9 +1319,9 @@ instance.web_kanban.DropdownSelection = instance.web_kanban.AbstractField.extend
         this.parent = parent;
     },
     prepare_dropdown_selection: function() {
-        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_icon': '<img src="/web/static/src/img/icons/gtk-normal.png"/>' },
-                { 'name': 'blocked', 'state_name': ' Blocked', 'state_icon': '<img src="/web/static/src/img/icons/gtk-no.png"/>' },
-                { 'name': 'done', 'state_name': ' Ready', 'state_icon': '<img src="/web/static/src/img/icons/gtk-yes.png"/>' }]
+        return [{ 'name': 'normal', 'state_name': ' In Progress', 'state_icon': 'status' },
+                { 'name': 'blocked', 'state_name': ' Blocked', 'state_icon': 'status error' },
+                { 'name': 'done', 'state_name': ' Ready', 'state_icon': 'status ok' }]
     },
     renderElement: function() {
         var self = this;