odoo
/
odoo
2
0
Fork 0
Code Pull Requests Releases Activity

[CLEAN] web: cleaned dropdown selection widget implementation: cleaned css and js code. 

bzr revid: tde@openerp.com-20140508123347-ye6pvk1uo5jargec
This commit is contained in:
Thibault Delavallée 2014-05-08 14:33:47 +02:00
parent 0b28fb706f
commit dae5ee484a
8 changed files with 105 additions and 177 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
addons/web/static/src/css/Makefile
View File

@ -1,5 +1,5 @@
all: *.css
%.css: %.sass
sass -t expanded --compass --unix-newlines $< $@
sass -t expanded --unix-newlines $< $@
watch:
sass -t expanded --compass --unix-newlines --watch .:.
sass -t expanded --unix-newlines --watch .:.

93
addons/web/static/src/css/base.css
View File

@ -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");
@ -449,6 +449,51 @@
border-style: inset;
border-width: 1px;
}
.openerp .oe_kanban_status {
position: relative;
display: inline-block;
height: 12px;
width: 12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-position: center center;
background-image: -webkit-radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
background-image: -moz-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
background-image: -ms-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
background-image: radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
}
.openerp .oe_kanban_status_green {
background: green;
background-position: center center;
background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44aa44 40%, #339933 100%);
background-image: -moz-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
background-image: -ms-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
background-image: radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
}
.openerp .oe_kanban_status_red {
background: red;
background-position: center center;
background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
background-image: -ms-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
}
.openerp .btn-group.kanban_state {
padding-top: 8px;
margin-right: 4px !important;
}
.openerp .btn-group.kanban_state .dropdown-menu {
min-width: 100%;
padding-right: 10px !important;
}
.openerp .btn-group.kanban_state .dropdown-menu li a, .openerp .btn-group.kanban_state .dropdown-menu li a:hover, .openerp .btn-group.kanban_state .dropdown-menu li a:focus {
padding-left: 5px;
padding-right: 0px;
}
.openerp .btn-group.kanban_state a {
color: #333333;
}
.openerp .oe_tag {
border: 1px solid #afafb6;
font-size: 11px;
@ -777,7 +822,7 @@
background-image: -moz-linear-gradient(top, #fc8787, maroon);
background-image: -ms-linear-gradient(top, #fc8787, maroon);
background-image: -o-linear-gradient(top, #fc8787, maroon);
background-image: linear-gradient(to bottom, #fc8787, #800000);
background-image: linear-gradient(to bottom, #fc8787, maroon);
}
.openerp .navbar .oe_topbar_anonymous_login a {
display: block;
@ -3378,47 +3423,3 @@ input[type="radio"], input[type="checkbox"] {
background-color: black;
opacity: 0.6;
}
.openerp .dropdown-menu.state {
min-width: 100%;
padding-right: 10px !important;
}
.openerp .dropdown-menu.state li a, .openerp .dropdown-menu.state li a:hover, .openerp .dropdown-menu.state li a:focus {
padding-left: 5px;
padding-right: 0px;
}
.openerp .btn-group.state {
padding-top: 8px;
}
.openerp .btn-group.state a {
color: #333333;
}
.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%);
}

66
addons/web/static/src/css/base.sass
View File

@ -424,7 +424,33 @@ $sheet-padding: 16px
border-style: inset
border-width: 1px
// }}}
// Kanban state (used in form and kanban) {{{
.oe_kanban_status
position: relative
display: inline-block
height: 12px
width: 12px
@include radius(6px)
@include radial-gradient((#eee 0%, #ccc 40%, #bbb 100%))
// +background-image(radial-gradient(45px 45px, #0ff 10px, #1e90ff 30px))
.oe_kanban_status_green
background: green
@include radial-gradient((#55dd55 0%, #44aa44 40%, #339933 100%))
.oe_kanban_status_red
background: red
@include radial-gradient((#ee7777 0%, #cc3333 40%, #bb0808 100%))
.btn-group.kanban_state
padding-top: 8px
margin-right: 4px !important
.dropdown-menu
min-width: 100%
padding-right: 10px !important
.dropdown-menu li a, .dropdown-menu li a:hover, .dropdown-menu li a:focus
padding-left: 5px
padding-right: 0px
a
color: #333333
// }}}
// Tags (for many2many tags, among others) {{{
.oe_tag
border: 1px solid $tag-border
@ -2751,45 +2777,7 @@ input[type="radio"], input[type="checkbox"]
.blockUI.blockOverlay
background-color: black
opacity: 0.6000000238418579
.openerp
.dropdown-menu.state
min-width: 100%
padding-right: 10px !important
.dropdown-menu.state li a, .dropdown-menu.state li a:hover, .dropdown-menu.state li a:focus
padding-left: 5px
padding-right: 0px
.btn-group.state
padding-top: 8px
.btn-group.state a
color: #333333
.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%)
// au BufWritePost,FileWritePost *.sass :!sass --style expanded --line-numbers <afile> > "%:p:r.css"
// vim:tabstop=4:shiftwidth=4:softtabstop=4:fdm=marker:

22
addons/web/static/src/js/view_form.js
View File

@ -2374,29 +2374,23 @@ instance.web.form.DropdownSelection = instance.web.form.FieldChar.extend({
var data = [];
var selection = self.field.selection || [];
_.map(selection, function(res) {
var state_class;
if (res[0] == 'normal')
state_class = 'status'
else if(res[0] == 'done')
state_class = 'status ok'
else
state_class = 'status error'
value = {
var value = {
'name': res[0],
'tooltip': res[1],
'state_name': res[1],
'state_class': state_class
}
data.push(value)
if (res[0] == 'normal') { value['state_class'] = 'oe_kanban_status'; }
else if (res[0] == 'done') { value['state_class'] = 'oe_kanban_status oe_kanban_status_green'; }
else { value['state_class'] = 'oe_kanban_status oe_kanban_status_red'; }
data.push(value);
});
return data;
},
render_value: function() {
var self = this;
var data = {'widget': self }
self.record_id = self.view.datarecord.id;
data['states'] = self.prepare_dropdown_selection();
this.$el.html(QWeb.render("DropdownSelection", data));
this.record_id = self.view.datarecord.id;
this.states = self.prepare_dropdown_selection();;
this.$el.html(QWeb.render("DropdownSelection", {'widget': self}));
this.$el.find('.oe_legend').click(self.do_action.bind(self));
},
do_action: function(e) {

21
addons/web/static/src/xml/base.xml
View File

@ -1029,26 +1029,29 @@
</t>
</span>
</t>
<t t-name="DropdownSelection">
<span class="btn-group state">
<t t-foreach="states" t-as="rec">
<a>
<div class="btn-group kanban_state">
<t t-foreach="widget.states" t-as="rec">
<a t-if="widget.get('value') === rec.name">
<a class="oe_legend dropdown-toggle" data-toggle="dropdown">
<span t-att-class="rec.state_class" t-if="widget.get('value') === rec.name" t-att-title="rec.tooltip" ></span>
<span class="sr-only">Toggle Dropdown</span></a>
<!-- <img height="16" width="16" t-att-src="'/web/static/src/img/icons/' + rec.icon_name"/> -->
<span t-att-class="rec.state_class" t-if="widget.get('value') === rec.name" t-att-title="rec.tooltip"/>
<span class="sr-only">Toggle Dropdown</span>
</a>
</a>
</t>
<ul class="dropdown-menu state" role="menu">
<t t-foreach="states" t-as="rec">
<t t-foreach="widget.states" t-as="rec">
<t t-if="widget.get('value') !== rec.name">
<li class="oe_legend" t-att-data-value="rec.name" ><a href="#">
<span t-att-class="rec.state_class"/> <t t-raw="rec.state_name" /></a>
<span t-att-class="rec.state_class" t-att-title="rec.tooltip"/>
<!-- <img height="16" width="16" t-att-src="'/web/static/src/img/icons/' + rec.icon_name"/> -->
<t t-raw="rec.state_name" /></a>
</li>
</t>
</t>
</ul>
</span>
</div>
</t>
<t t-name="Priority">
<ul style="list-style: none; padding-left: 2px;">

36
addons/web_kanban/static/src/css/kanban.css
View File

@ -9,8 +9,6 @@
.openerp .oe_kanban_view .oe_view_nocontent {
position: relative;
max-width: none;
z-index: 1;
width: 100%;
height: 100%;
}
.openerp .oe_kanban_view .oe_view_nocontent .oe_view_nocontent_content {
@ -165,9 +163,6 @@
.openerp .oe_kanban_view .oe_kanban_column, .openerp .oe_kanban_view .oe_kanban_column_cards {
height: 100%;
}
.openerp .oe_kanban_view .oe_kanban_column, .openerp .oe_kanban_view .oe_kanban_column_cards {
height: 100%;
}
.openerp .oe_kanban_view .oe_kanban_aggregates {
padding: 0;
margin: 0px;
@ -522,37 +517,6 @@
position: relative;
top: 2px;
}
.openerp .oe_kanban_view .oe_kanban_status {
position: relative;
top: 4px;
display: inline-block;
height: 12px;
width: 12px;
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
background-position: center center;
background-image: -webkit-radial-gradient(circle, #eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
background-image: -moz-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
background-image: -ms-radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
background-image: radial-gradient(#eeeeee 0%, #cccccc 40%, #bbbbbb 100%);
}
.openerp .oe_kanban_view .oe_kanban_status_green {
background: green;
background-position: center center;
background-image: -webkit-radial-gradient(circle, #55dd55 0%, #44aa44 40%, #339933 100%);
background-image: -moz-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
background-image: -ms-radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
background-image: radial-gradient(#55dd55 0%, #44aa44 40%, #339933 100%);
}
.openerp .oe_kanban_view .oe_kanban_status_red {
background: red;
background-position: center center;
background-image: -webkit-radial-gradient(circle, #ee7777 0%, #cc3333 40%, #bb0808 100%);
background-image: -moz-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
background-image: -ms-radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
background-image: radial-gradient(#ee7777 0%, #cc3333 40%, #bb0808 100%);
}
.openerp .oe_kanban_view .oe_kanban_text_red {
color: #a61300;
font-weight: bold;

14
addons/web_kanban/static/src/css/kanban.sass
View File

@ -454,20 +454,6 @@
position: relative
top: 2px
.oe_kanban_status
position: relative
top: 4px
display: inline-block
height: 12px
width: 12px
@include radius(6px)
@include radial-gradient((#eee 0%, #ccc 40%, #bbb 100%))
.oe_kanban_status_green
background: green
@include radial-gradient((#55dd55 0%, #44aa44 40%, #339933 100%))
.oe_kanban_status_red
background: red
@include radial-gradient((#ee7777 0%, #cc3333 40%, #bb0808 100%))
.oe_kanban_text_red
color: #A61300
font-weight: bold

26
addons/web_kanban/static/src/js/kanban.js
View File

@ -1318,33 +1318,25 @@ instance.web_kanban.DropdownSelection = instance.web_kanban.AbstractField.extend
this.parent = parent;
},
prepare_dropdown_selection: function() {
var self = this;
var data = [];
var selection = self.field.selection || [];
_.map(selection, function(res) {
var state_class;
if (res[0] == 'normal')
state_class = 'status'
else if(res[0] == 'done')
state_class = 'status ok'
else
state_class = 'status error'
value = {
_.map(this.field.selection || [], function(res) {
var value = {
'name': res[0],
'tooltip': res[1],
'state_name': res[1],
'state_class': state_class
}
data.push(value)
if (res[0] == 'normal') { value['state_class'] = 'oe_kanban_status'; }
else if (res[0] == 'done') { value['state_class'] = 'oe_kanban_status oe_kanban_status_green'; }
else { value['state_class'] = 'oe_kanban_status oe_kanban_status_red'; }
data.push(value);
});
return data;
},
renderElement: function() {
var self = this;
self.record_id = self.parent.id;
var data = {'widget': self }
data['states'] = self.prepare_dropdown_selection();
this.$el = $(QWeb.render("DropdownSelection", data));
this.record_id = self.parent.id;
this.states = self.prepare_dropdown_selection();;
this.$el = $(QWeb.render("DropdownSelection", {'widget': self}));
this.$el.find('.oe_legend').click(self.do_action.bind(self));
},
do_action: function(e) {