[IMP] stock.ui: styling
bzr revid: fva@openerp.com-20130626131131-8hn0f5cmqw19k7no
This commit is contained in:
Frédéric van der Essen
parent
6e342986f0
commit
1e20612f17
|
|
@ -17,50 +17,65 @@
|
|||
}
|
||||
|
||||
.oe_pick_widget .oe_pick_header{
|
||||
background: red;
|
||||
background: #454343;
|
||||
background-image: linear-gradient(#646060,#262626);
|
||||
}
|
||||
.oe_pick_widget .oe_pick_body_cont{
|
||||
background: blue;
|
||||
height: 100%;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_body{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: green;
|
||||
background-color: white;
|
||||
background: url('/web/static/src/img/form_sheetbg.png');
|
||||
box-shadow: 0px 9px 5px -5px rgba(0, 0, 0, 0.16) inset;
|
||||
overflow: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_app{
|
||||
width: 600px;
|
||||
background: yellow;
|
||||
background: white;
|
||||
margin: 40px auto;
|
||||
padding: 20px;
|
||||
border: solid 1px rgb(228, 228, 255);
|
||||
box-shadow: 0px 2px 3px rgba(114, 114, 175, 0.11);
|
||||
}
|
||||
.oe_pick_widget .oe_pick_toolbar{
|
||||
width: 600px;
|
||||
background: purple;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_button{
|
||||
display: inline-block;
|
||||
min-width: 120px;
|
||||
padding: 15px;
|
||||
margin: 10px;
|
||||
padding: 5px;
|
||||
font-size: 18px;
|
||||
border-radius: 3px;
|
||||
margin: 10px 5px;
|
||||
text-align: center;
|
||||
line-height: 30px;
|
||||
background: white;
|
||||
background: linear-gradient(#b2b3d7, #7f82ac);
|
||||
color: #273072;
|
||||
border: 1px solid #353A7E;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1), 0 1px 1px rgba(255, 255, 255, 0.8) inset;
|
||||
cursor: pointer;
|
||||
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
.oe_pick_widget .oe_pick_right_toolbar{
|
||||
background: blue;
|
||||
float: right;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_col_small{ width: 50px; }
|
||||
.oe_pick_widget .oe_pick_col_medium{ width: 100px; }
|
||||
.oe_pick_widget .oe_pick_col_big{ width: 200px; }
|
||||
.oe_pick_widget .oe_pick_col_expand{ width: 100%; }
|
||||
.oe_pick_widget .oe_pick_right_toolbar .oe_pick_button{
|
||||
margin-right: 10px;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_col_small{ width: 50px; }
|
||||
.oe_pick_widget .oe_pick_col_medium{ width: 100px; }
|
||||
.oe_pick_widget .oe_pick_col_big{ width: 200px; }
|
||||
.oe_pick_widget .oe_pick_col_expand{ width: 100%; }
|
||||
.oe_pick_widget .oe_centeralign{ text-align: center; }
|
||||
|
||||
.oe_pick_widget .oe_invalid{
|
||||
background: red;
|
||||
color: white;
|
||||
background: rgb(255, 226, 226);
|
||||
color: rgb(168, 6, 6);
|
||||
}
|
||||
|
||||
/* ----------------------- *
|
||||
|
|
@ -68,112 +83,50 @@
|
|||
* ----------------------- */
|
||||
|
||||
.oe_pick_widget .oe_pick_list{
|
||||
background: red;
|
||||
margin: 20px 0px;
|
||||
margin: 0px 0px 20px 0px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.oe_pick_widget .oe_pick_list_header{
|
||||
background: blue;
|
||||
font-size: 20px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.oe_pick_widget .oe_pick_list_table{
|
||||
background: whitesmoke;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
background: greenyellow;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ----------------------- *
|
||||
* TACTILE LIST *
|
||||
* ----------------------- */
|
||||
|
||||
.openerp .oe_tactlist {
|
||||
font-size: 16px;
|
||||
border-radius: 3px;
|
||||
font-size: 18px;
|
||||
background: black;
|
||||
color: white;
|
||||
margin-bottom: 20px;
|
||||
|
||||
}
|
||||
.openerp .oe_tactlist .oe_tactlist_header{
|
||||
.oe_pick_widget .oe_pick_list_table tbody tr:nth-child(odd){
|
||||
background: rgb(250,250,250);
|
||||
}
|
||||
.oe_pick_widget .oe_pick_list_table td,
|
||||
.oe_pick_widget .oe_pick_list_table th {
|
||||
padding: 5px;
|
||||
font-size: 24px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_vresizer{
|
||||
cursor: ns-resize;
|
||||
height: 15px;
|
||||
.oe_pick_widget .oe_pick_list_table thead{
|
||||
background: rgb(224, 225, 235);
|
||||
border-top-left-radius: 3px;
|
||||
border-top-right-radius: 3px;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_hresizer{
|
||||
.oe_pick_widget .oe_pick_list_table th {
|
||||
background: none;
|
||||
border: none;
|
||||
font-weight: bold;
|
||||
}
|
||||
.oe_pick_widget .oe_row_button{
|
||||
display: inline-block;
|
||||
float: right;
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
line-height: 15px;
|
||||
text-align: center;
|
||||
font-size: 9px;
|
||||
color: rgba(255,255,255,0.3);
|
||||
cursor: move;
|
||||
background: rgb(255, 255, 255);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
line-height: 14px;
|
||||
color: rgb(102, 98, 133);
|
||||
font-weight: bold;
|
||||
border-radius: 9px;
|
||||
border: solid 1px rgba(0, 0, 0, 0.09);
|
||||
cursor: pointer;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable{
|
||||
position: relative;
|
||||
background: rgb(209,209,209);
|
||||
}
|
||||
.openerp .oe_tactlist td{
|
||||
padding: 5px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_scroll{
|
||||
height: 100%;
|
||||
overflow-y: scroll;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_header_container{
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_header{
|
||||
background: black;
|
||||
color: white;
|
||||
width: 100%;
|
||||
table-layout: fixed;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_body{
|
||||
table-layout: fixed;
|
||||
margin-top: 32px;
|
||||
background: #D6D6D6;
|
||||
color: #444444;
|
||||
}
|
||||
.openerp .oe_tactlist .oe_invalid{
|
||||
background: rgb(255, 192, 192);
|
||||
color: rgb(201, 0, 0);
|
||||
}
|
||||
.openerp .oe_tactlist .oe_scrolltable_body tr:nth-child(even){
|
||||
background: rgba(0,0,0,0.02);
|
||||
}
|
||||
.openerp .oe_tactlist td.oe_small, .openerp .oe_tactlist col.oe_small{ width: 50px; }
|
||||
.openerp .oe_tactlist td.oe_medium, .openerp .oe_tactlist col.oe_medium{ width: 100px; }
|
||||
.openerp .oe_tactlist td.oe_big, .openerp .oe_tactlist col.oe_big{ width: 200px; }
|
||||
.openerp .oe_tactlist td.oe_expand, .openerp .oe_tactlist col.oe_expand{ width: 100%; }
|
||||
|
||||
.openerp .oe_tactlist ::-webkit-scrollbar{
|
||||
width: 15px;
|
||||
background-color: black;
|
||||
}
|
||||
.openerp .oe_tactlist ::-webkit-scrollbar-track{
|
||||
background-color: black;
|
||||
}
|
||||
.openerp .oe_tactlist ::-webkit-scrollbar-thumb{
|
||||
background-color: rgba(255,255,255,0.6);
|
||||
border: solid 4px black;
|
||||
}
|
||||
.openerp .oe_tactlist ::-wekbit-scrollbar-button{
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -2,97 +2,18 @@
|
|||
function openerp_picking_widgets(instance){
|
||||
var module = instance.stock;
|
||||
|
||||
/*
|
||||
* new TactileListWidget(parent,{
|
||||
* height: '500px',
|
||||
* width: '100%',
|
||||
* title: 'Sample List',
|
||||
* collumns: [
|
||||
* {header:'Foobar', classes:'oe_small'},
|
||||
* {header:'Foobar', classes:'oe_medium'},
|
||||
* {header:'' , classes:'oe_big'},
|
||||
* {header:'BarFoo', classes:'oe_expand'},
|
||||
* ],
|
||||
* rows: [
|
||||
* {cols: [0,1,2,3] },
|
||||
* {cols: [1,2,3,4], classes:'oe_selected oe_invalid'},
|
||||
* {cols: [2,1,3,4] },
|
||||
* ]
|
||||
* });
|
||||
*/
|
||||
|
||||
module.TactileListWidget = instance.web.Widget.extend({
|
||||
template: 'TactileListWidget',
|
||||
init: function(parent, options){
|
||||
this._super(parent,options);
|
||||
this._collumns = options.collumns || [];
|
||||
this._rows = options.rows || [];
|
||||
this._title = options.title || '';
|
||||
this._width = options.width || 625;
|
||||
this._height = options.height || 200;
|
||||
this._scrollbarwidth = 15;
|
||||
},
|
||||
renderElement: function(){
|
||||
var self = this;
|
||||
this._super();
|
||||
this.$('.js_vresizer, .js_hresizer').mousedown(function(event){
|
||||
self._startsize = {height: self.get_height(), width: self.get_width()};
|
||||
console.log('drag init:',self._startsize);
|
||||
});
|
||||
this.$('.js_vresizer').drag(function(event,dragevent){
|
||||
self.set_height(self._startsize.height + dragevent.deltaY);
|
||||
});
|
||||
this.$('.js_hresizer').drag(function(event,dragevent){
|
||||
self.set_height(self._startsize.height + dragevent.deltaY);
|
||||
self.set_width(self._startsize.width + dragevent.deltaX);
|
||||
});
|
||||
},
|
||||
get_collumns: function(){
|
||||
return this._collumns;
|
||||
},
|
||||
get_rows: function(){
|
||||
return this._rows;
|
||||
},
|
||||
add_row: function(row){
|
||||
this._rows.push(row);
|
||||
this.renderElement();
|
||||
},
|
||||
get_title: function(){
|
||||
return this._title;
|
||||
},
|
||||
get_width: function(){
|
||||
return this._width;
|
||||
},
|
||||
get_innerwidth: function(){
|
||||
return this._width - this._scrollbarwidth;
|
||||
},
|
||||
set_width: function(width){
|
||||
if(width >= 0){
|
||||
this._width = width;
|
||||
this.$('.js_innerwidth').css({'width':this.get_innerwidth()+'px'});
|
||||
this.$el.css({'width':this.get_width()+'px'});
|
||||
}
|
||||
},
|
||||
get_height: function(){
|
||||
return this._height;
|
||||
},
|
||||
set_height: function(height){
|
||||
if(height >= 0){
|
||||
this._height = height;
|
||||
this.$('.js_height').css({'height':this.get_height()+'px'});
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
module.PickingEditorWidget = instance.web.Widget.extend({
|
||||
template: 'PickingEditorWidget',
|
||||
init: function(parent,options){
|
||||
this._super(parent,options);
|
||||
},
|
||||
get_header: function(){
|
||||
return 'Picking: INTERNAL/00112';
|
||||
return this._header || 'Picking: INTERNAL/00112';
|
||||
},
|
||||
get_rows: function(){
|
||||
return [
|
||||
return this._rows || [
|
||||
{ cols: { product:'abc', qty:1, rem: 4, uom: 5, loc: 'def', stat: 'available' }, },
|
||||
{ cols: { product:'dec', qty:2, rem: 3, uom: 5, loc: 'rcd', stat: 'available' }, classes: 'oe_invalid' },
|
||||
{ cols: { product:'dec', qty:2, rem: 3, uom: 5, loc: 'rcd', stat: 'available' }, classes: '' },
|
||||
{ cols: { product:'qcr', qty:4, rem: 4, uom: 5, loc: 'hre', stat: 'unavailable' }, },
|
||||
];
|
||||
},
|
||||
|
|
@ -101,12 +22,12 @@ function openerp_picking_widgets(instance){
|
|||
module.PackageEditorWidget = instance.web.Widget.extend({
|
||||
template: 'PackageEditorWidget',
|
||||
get_header: function(){
|
||||
return 'Package: 032 ';
|
||||
return this._header || 'Package: 032 ';
|
||||
},
|
||||
get_rows: function(){
|
||||
return [
|
||||
return this._rows || [
|
||||
{ cols: { product:'abc', qty:1, uom: 5, }, },
|
||||
{ cols: { product:'dec', qty:2, uom: 5, }, classes: 'oe_invalid' },
|
||||
{ cols: { product:'dec', qty:2, uom: 5, }, classes: '' },
|
||||
{ cols: { product:'qcr', qty:4, uom: 5, }, },
|
||||
];
|
||||
},
|
||||
|
|
@ -115,31 +36,52 @@ function openerp_picking_widgets(instance){
|
|||
module.PackageSelectorWidget = instance.web.Widget.extend({
|
||||
template: 'PackageSelectorWidget',
|
||||
get_header: function(){
|
||||
return 'Package Selector';
|
||||
return this._header || 'Package Selector';
|
||||
},
|
||||
get_rows: function(){
|
||||
return [
|
||||
{ cols: { pack:'abc' }, },
|
||||
{ cols: { pack:'def' }, classes: 'oe_invalid' },
|
||||
{ cols: { pack:'ghi' }, },
|
||||
return this._rows || [
|
||||
{ cols: { pack:'abc', qty:12 }, },
|
||||
{ cols: { pack:'def', qty:500 }, classes: '' },
|
||||
{ cols: { pack:'ghi', qty:1 }, },
|
||||
];
|
||||
},
|
||||
increment: function(){
|
||||
},
|
||||
decrement: function(){
|
||||
},
|
||||
});
|
||||
|
||||
module.PickingMainWidget = instance.web.Widget.extend({
|
||||
template: 'PickingMainWidget',
|
||||
init: function(parent,params){
|
||||
this._super(parent,params);
|
||||
console.log(params);
|
||||
|
||||
console.log('Action params:', params);
|
||||
|
||||
new instance.web.Model('stock.picking.in')
|
||||
.query()
|
||||
.all()
|
||||
.then(function(results){
|
||||
console.log('Picking In:',results);
|
||||
});
|
||||
|
||||
new instance.web.Model('stock.picking.out')
|
||||
.query()
|
||||
.all()
|
||||
.then(function(results){
|
||||
console.log('Picking Out:',results);
|
||||
});
|
||||
|
||||
new instance.web.Model('stock.quant.package')
|
||||
.query(['name','packaging_id','quant_ids','parent_id','children_ids','location_id','pack_operation_id'])
|
||||
.all()
|
||||
.then(function(result){
|
||||
console.log('Packages: ',result);
|
||||
});
|
||||
|
||||
new instance.web.Model('stock.pack.operation')
|
||||
.query(['picking_id','product_id','product_uom','product_qty','package_id','quant_id','result_package_id'])
|
||||
.all()
|
||||
.then(function(results){
|
||||
console.log('Pack Operations:',results);
|
||||
});
|
||||
|
||||
var packages = new instance.web.Model('stock.quant.package');
|
||||
packages.query('name','packaging_id','quant_ids','parent_id','children_ids','location_id','pack_operation_id').all().then(function(result){
|
||||
console.log(result);
|
||||
});
|
||||
},
|
||||
start: function(){
|
||||
var self = this;
|
||||
|
|
|
|||
|
|
@ -62,7 +62,12 @@
|
|||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th> <th>Qty</th> <th>Rem</th> <th>UoM</th> <th>Location</th> <th>Status</th>
|
||||
<th>Product</th>
|
||||
<th class='oe_centeralign'>Qty</th>
|
||||
<th class='oe_centeralign'>Rem</th>
|
||||
<th class='oe_centeralign'>UoM</th>
|
||||
<th>Location</th>
|
||||
<th>Status</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
|
@ -70,9 +75,9 @@
|
|||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<td> <t t-esc="row.cols.product" /> </td>
|
||||
<td> <t t-esc="row.cols.qty" /> </td>
|
||||
<td> <t t-esc="row.cols.rem" /> </td>
|
||||
<td> <t t-esc="row.cols.uom" /> </td>
|
||||
<td class='oe_centeralign'> <t t-esc="row.cols.qty" /> </td>
|
||||
<td class='oe_centeralign'> <t t-esc="row.cols.rem" /> </td>
|
||||
<td class='oe_centeralign'> <t t-esc="row.cols.uom" /> </td>
|
||||
<td> <t t-esc="row.cols.loc" /> </td>
|
||||
<td> <t t-esc="row.cols.stat" /> </td>
|
||||
</tr>
|
||||
|
|
@ -96,7 +101,9 @@
|
|||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Product</th> <th>Qty</th> <th>UoM</th>
|
||||
<th>Product</th>
|
||||
<th class='oe_centeralign'>Qty</th>
|
||||
<th class='oe_centeralign'>UoM</th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
|
@ -104,8 +111,8 @@
|
|||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<td> <t t-esc="row.cols.product" /> </td>
|
||||
<td> <t t-esc="row.cols.qty" /> </td>
|
||||
<td> <t t-esc="row.cols.uom" /> </td>
|
||||
<td class='oe_centeralign'> <t t-esc="row.cols.qty" /> </td>
|
||||
<td class='oe_centeralign'> <t t-esc="row.cols.uom" /> </td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
|
|
@ -123,11 +130,12 @@
|
|||
<col class='oe_pick_col_expand'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
<col class='oe_pick_col_small'></col>
|
||||
</colgroup>
|
||||
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Package</th> <th></th> <th></th>
|
||||
<th>Package</th> <th class='oe_centeralign'>Qty</th> <th></th> <th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
|
||||
|
|
@ -135,8 +143,9 @@
|
|||
<t t-foreach="widget.get_rows()" t-as="row">
|
||||
<tr t-att-class="row.classes">
|
||||
<td> <t t-esc="row.cols.pack" /> </td>
|
||||
<td> + </td>
|
||||
<td> - </td>
|
||||
<td class='oe_centeralign'> <t t-esc="row.cols.qty" /> </td>
|
||||
<td class='oe_centeralign'> <span class='oe_row_button js_pick_plus'>+</span> </td>
|
||||
<td class='oe_centeralign'> <span class='oe_row_button js_pick_minus'>-</span> </td>
|
||||
</tr>
|
||||
</t>
|
||||
</tbody>
|
||||
|
|
|
|||
Loading…
Reference in New Issue