Revision b9889576
Von Sven Schöling vor mehr als 8 Jahren hinzugefügt
| css/kivitendo/main.css | ||
|---|---|---|
| 392 | 392 |
} |
| 393 | 393 |
|
| 394 | 394 |
.part_picker {
|
| 395 |
padding-right: 16px; |
|
| 396 | 395 |
} |
| 397 | 396 |
.chart_picker {
|
| 398 | 397 |
padding-right: 16px; |
| ... | ... | |
| 430 | 429 |
float:left; |
| 431 | 430 |
width: 350px; |
| 432 | 431 |
} |
| 432 |
span.ppp_popup_button {
|
|
| 433 |
position: absolute; |
|
| 434 |
margin-left: -24px; |
|
| 435 |
margin-top: 5px; |
|
| 436 |
width: 20px; |
|
| 437 |
height: 20px; |
|
| 438 |
cursor: pointer; |
|
| 439 |
background: url("../../image/search.svg") no-repeat center right;
|
|
| 440 |
background-size: contain; |
|
| 441 |
} |
|
| 442 |
span.part_picker input {
|
|
| 443 |
padding-right: 20px; |
|
| 444 |
box-sizing: padding-box; |
|
| 445 |
-moz-box-sizing: padding-box; |
|
| 446 |
-webkit-box-sizing: padding-box; |
|
| 447 |
} |
|
| 448 |
span.part_picker {
|
|
| 449 |
white-space: nowrap; |
|
| 450 |
} |
|
| 433 | 451 |
/* div.cpc_block { */
|
| 434 | 452 |
/* overflow:hidden; */ |
| 435 | 453 |
/* float:left; */ |
| css/lx-office-erp/main.css | ||
|---|---|---|
| 25 | 25 |
|
| 26 | 26 |
select {
|
| 27 | 27 |
-moz-appearance: none; |
| 28 |
-webkit-appearance: none; |
|
| 29 |
-o-appearance: none; |
|
| 30 |
height: 16px; |
|
| 28 | 31 |
appearance : none; |
| 29 | 32 |
background: white url('../../image/select-down.png') no-repeat scroll right center;
|
| 30 | 33 |
padding: 0 14px 0 0; |
| ... | ... | |
| 409 | 412 |
} |
| 410 | 413 |
|
| 411 | 414 |
.part_picker {
|
| 412 |
padding-right: 16px; |
|
| 413 | 415 |
} |
| 414 | 416 |
.chart_picker {
|
| 415 | 417 |
padding-right: 16px; |
| ... | ... | |
| 445 | 447 |
float:left; |
| 446 | 448 |
width: 350px; |
| 447 | 449 |
} |
| 450 |
span.ppp_popup_button {
|
|
| 451 |
display: inline-block; |
|
| 452 |
position: relative; |
|
| 453 |
margin-left: -18px; |
|
| 454 |
margin-top: 3px; |
|
| 455 |
height: 16px; |
|
| 456 |
width: 16px; |
|
| 457 |
cursor: pointer; |
|
| 458 |
} |
|
| 459 |
|
|
| 460 |
td span.ppp_popup_button, |
|
| 461 |
th span.ppp_popup_button {
|
|
| 462 |
height: 9px; |
|
| 463 |
width: 9px; |
|
| 464 |
margin-left: -13px; |
|
| 465 |
} |
|
| 466 |
span.part_picker input {
|
|
| 467 |
padding-right: 20px; |
|
| 468 |
background: white url("../../image/search.svg") no-repeat center right;
|
|
| 469 |
background-size: contain; |
|
| 470 |
box-sizing: padding-box; |
|
| 471 |
-moz-box-sizing: padding-box; |
|
| 472 |
-webkit-box-sizing: padding-box; |
|
| 473 |
} |
|
| 474 |
|
|
| 475 |
td span.part_picker input, |
|
| 476 |
th span.part_picker input {
|
|
| 477 |
padding-right: 15px; |
|
| 478 |
} |
|
| 479 |
|
|
| 480 |
span.part_picker {
|
|
| 481 |
/* white-space: nowrap;*/ |
|
| 482 |
} |
|
| 483 |
|
|
| 448 | 484 |
div.ppp_block span.ppp_block_number, |
| 449 | 485 |
div.cpc_block span.cpc_block_number |
| 450 | 486 |
{
|
| image/search.svg | ||
|---|---|---|
| 1 |
<svg xmlns="http://www.w3.org/2000/svg" width="1000px" height="1000px" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid meet" zoomAndPan="disable" > |
|
| 2 |
<rect id="svgEditorBackground" x="0" y="0" width="1000" height="1000" style="fill: none; stroke: none;"/> |
|
| 3 |
<circle id="e2_circle" cx="600" cy="400" style="stroke-width: 30px; vector-effect: non-scaling-stroke;" stroke="grey" r="250" fill="grey"/> |
|
| 4 |
<circle id="e3_circle" cx="600" cy="400" style="stroke-width: 30px; vector-effect: non-scaling-stroke;" stroke="lightgrey" r="190" fill="white"/> |
|
| 5 |
<rect x="-250" y="475" style="stroke-width: 1px; vector-effect: non-scaling-stroke;" stroke="black" id="e4_rectangle" width="200" height="50" fill="grey" transform="matrix(1, -1, 1, 1, 0, 0)"/> |
|
| 6 |
</svg> |
|
| js/autocomplete_part.js | ||
|---|---|---|
| 237 | 237 |
}); |
| 238 | 238 |
|
| 239 | 239 |
// now add a picker div after the original input |
| 240 |
var pcont = $('<span>').addClass('position-absolute');
|
|
| 241 |
var picker = $('<div>');
|
|
| 242 |
$dummy.after(pcont); |
|
| 243 |
pcont.append(picker); |
|
| 244 |
picker.addClass('icon16 search').click(open_dialog);
|
|
| 240 |
var popup_button = $('<span>').addClass('ppp_popup_button');
|
|
| 241 |
$dummy.after(popup_button); |
|
| 242 |
popup_button.click(open_dialog); |
|
| 245 | 243 |
|
| 246 | 244 |
var pp = {
|
| 247 | 245 |
real: function() { return $real },
|
| templates/webpages/part/test_page.html | ||
|---|---|---|
| 1 | 1 |
[% USE L %] |
| 2 | 2 |
|
| 3 |
<h1>Waren Picker Testpage</h1>
|
|
| 3 |
<h1>Part Picker Testpage</h1>
|
|
| 4 | 4 |
|
| 5 | 5 |
<br> |
| 6 | 6 |
Alle: <br> |
| ... | ... | |
| 12 | 12 |
Waren und Dienstleistungen: <br> |
| 13 | 13 |
[% L.part_picker('part_id4', undef, type='part,service') %]<br>
|
| 14 | 14 |
|
| 15 |
<h2>Styling</h2> |
|
| 16 |
|
|
| 17 |
Ina span: |
|
| 18 |
<span>Leading text: [% L.part_picker('p1', undef, type='part,service') %] and text after with spacing</span><br>
|
|
| 19 |
<span>Leading text:[% L.part_picker('p2', undef, type='part,service') %]and text after without spacing</span><br>
|
|
| 20 |
<div>Leading text: [% L.part_picker('p3', undef, type='part,service') %] and text after with spacing with div</div><br>
|
|
| 21 |
<div>Leading text:[% L.part_picker('p4', undef, type='part,service') %]and text after with spacing with div</div><br>
|
|
| 22 |
|
|
| 23 |
<span>Picker + input next to each other: [% L.part_picker('p5', undef, type='part,service', width="100%") %]<input type=text></span>
|
|
| 24 |
|
|
| 25 |
<div>[% L.part_picker('p6', undef, type='part,service', style="width:500px") %] 500px width</div>
|
|
| 26 |
<div>[% L.part_picker('p7', undef, type='part,service', style="width:200px") %] 200px width</div>
|
|
| 27 |
<div>[% L.part_picker('p8', undef, type='part,service', style="height:40px") %] 40px height</div>
|
|
| 28 |
|
|
| 15 | 29 |
|
| 16 | 30 |
[%# FOREACH i IN 1..50 %] |
| 17 | 31 |
[%# L.part_picker('part_id_' _ i) %] <br>
|
| 18 | 32 |
[%# END %] |
| 33 |
|
|
| 34 |
<h2>In tables</h2> |
|
| 35 |
|
|
| 36 |
<p>No classes:</p> |
|
| 37 |
|
|
| 38 |
<table> |
|
| 39 |
<tr> |
|
| 40 |
<th>Part picker in table heading</th> |
|
| 41 |
<th>[% L.part_picker('p9', undef, type='part,service') %]</th>
|
|
| 42 |
</tr> |
|
| 43 |
<tr> |
|
| 44 |
<td>Part picker in table cell</td> |
|
| 45 |
<td>[% L.part_picker('p10', undef, type='part,service') %]</td>
|
|
| 46 |
</tr> |
|
| 47 |
</table> |
|
| 48 |
|
|
| 49 |
<p>With classes:</p> |
|
| 50 |
|
|
| 51 |
<table> |
|
| 52 |
<tr class=listheading> |
|
| 53 |
<th>Part picker in table heading</th> |
|
| 54 |
<th>[% L.part_picker('p11', undef, type='part,service') %]</th>
|
|
| 55 |
</tr> |
|
| 56 |
<tr class=listrow> |
|
| 57 |
<td>Part picker in table cell</td> |
|
| 58 |
<td>[% L.part_picker('p12', undef, type='part,service') %]</td>
|
|
| 59 |
</tr> |
|
| 60 |
</table> |
|
Auch abrufbar als: Unified diff
Partpicker styling
- Lupe jetzt inline
- Lupe in svg, kann also mitskalieren
- Inputfeld ist jetzt Model padding-box, size Angaben propagieren besser
auf die umliegenden Elemente
- getestet in lx-office-erp und kivitendo css