From b9889576a1229f41edc2c1daf9b649d97fb7fd2e Mon Sep 17 00:00:00 2001 From: =?utf8?q?Sven=20Sch=C3=B6ling?= Date: Mon, 9 May 2016 10:06:23 +0200 Subject: [PATCH] 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 --- css/kivitendo/main.css | 20 +++++++++++- css/lx-office-erp/main.css | 38 +++++++++++++++++++++- image/search.svg | 6 ++++ js/autocomplete_part.js | 8 ++--- templates/webpages/part/test_page.html | 44 +++++++++++++++++++++++++- 5 files changed, 108 insertions(+), 8 deletions(-) create mode 100644 image/search.svg diff --git a/css/kivitendo/main.css b/css/kivitendo/main.css index fc6b38fd9..06afe14af 100644 --- a/css/kivitendo/main.css +++ b/css/kivitendo/main.css @@ -392,7 +392,6 @@ label { } .part_picker { - padding-right: 16px; } .chart_picker { padding-right: 16px; @@ -430,6 +429,25 @@ div.ppp_block { float:left; width: 350px; } +span.ppp_popup_button { + position: absolute; + margin-left: -24px; + margin-top: 5px; + width: 20px; + height: 20px; + cursor: pointer; + background: url("../../image/search.svg") no-repeat center right; + background-size: contain; +} +span.part_picker input { + padding-right: 20px; + box-sizing: padding-box; + -moz-box-sizing: padding-box; + -webkit-box-sizing: padding-box; +} +span.part_picker { + white-space: nowrap; +} /* div.cpc_block { */ /* overflow:hidden; */ /* float:left; */ diff --git a/css/lx-office-erp/main.css b/css/lx-office-erp/main.css index a2c0e68b8..4ab75385a 100644 --- a/css/lx-office-erp/main.css +++ b/css/lx-office-erp/main.css @@ -25,6 +25,9 @@ input, textarea, select { select { -moz-appearance: none; + -webkit-appearance: none; + -o-appearance: none; + height: 16px; appearance : none; background: white url('../../image/select-down.png') no-repeat scroll right center; padding: 0 14px 0 0; @@ -409,7 +412,6 @@ label { } .part_picker { - padding-right: 16px; } .chart_picker { padding-right: 16px; @@ -445,6 +447,40 @@ div.ppp_block { float:left; width: 350px; } +span.ppp_popup_button { + display: inline-block; + position: relative; + margin-left: -18px; + margin-top: 3px; + height: 16px; + width: 16px; + cursor: pointer; +} + +td span.ppp_popup_button, +th span.ppp_popup_button { + height: 9px; + width: 9px; + margin-left: -13px; +} +span.part_picker input { + padding-right: 20px; + background: white url("../../image/search.svg") no-repeat center right; + background-size: contain; + box-sizing: padding-box; + -moz-box-sizing: padding-box; + -webkit-box-sizing: padding-box; +} + +td span.part_picker input, +th span.part_picker input { + padding-right: 15px; +} + +span.part_picker { + /* white-space: nowrap;*/ +} + div.ppp_block span.ppp_block_number, div.cpc_block span.cpc_block_number { diff --git a/image/search.svg b/image/search.svg new file mode 100644 index 000000000..4858934cc --- /dev/null +++ b/image/search.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/js/autocomplete_part.js b/js/autocomplete_part.js index 0366ed270..cc9354ac3 100644 --- a/js/autocomplete_part.js +++ b/js/autocomplete_part.js @@ -237,11 +237,9 @@ namespace('kivi', function(k){ }); // now add a picker div after the original input - var pcont = $('').addClass('position-absolute'); - var picker = $('
'); - $dummy.after(pcont); - pcont.append(picker); - picker.addClass('icon16 search').click(open_dialog); + var popup_button = $('').addClass('ppp_popup_button'); + $dummy.after(popup_button); + popup_button.click(open_dialog); var pp = { real: function() { return $real }, diff --git a/templates/webpages/part/test_page.html b/templates/webpages/part/test_page.html index 61aa10593..f5458096d 100644 --- a/templates/webpages/part/test_page.html +++ b/templates/webpages/part/test_page.html @@ -1,6 +1,6 @@ [% USE L %] -

Waren Picker Testpage

+

Part Picker Testpage


Alle:
@@ -12,7 +12,49 @@ Nur Dienstleistungen:
Waren und Dienstleistungen:
[% L.part_picker('part_id4', undef, type='part,service') %]
+

Styling

+ +Ina span: +Leading text: [% L.part_picker('p1', undef, type='part,service') %] and text after with spacing
+Leading text:[% L.part_picker('p2', undef, type='part,service') %]and text after without spacing
+
Leading text: [% L.part_picker('p3', undef, type='part,service') %] and text after with spacing with div

+
Leading text:[% L.part_picker('p4', undef, type='part,service') %]and text after with spacing with div

+ +Picker + input next to each other: [% L.part_picker('p5', undef, type='part,service', width="100%") %] + +
[% L.part_picker('p6', undef, type='part,service', style="width:500px") %] 500px width
+
[% L.part_picker('p7', undef, type='part,service', style="width:200px") %] 200px width
+
[% L.part_picker('p8', undef, type='part,service', style="height:40px") %] 40px height
+ [%# FOREACH i IN 1..50 %] [%# L.part_picker('part_id_' _ i) %]
[%# END %] + +

In tables

+ +

No classes:

+ + + + + + + + + + +
Part picker in table heading[% L.part_picker('p9', undef, type='part,service') %]
Part picker in table cell[% L.part_picker('p10', undef, type='part,service') %]
+ +

With classes:

+ + + + + + + + + + +
Part picker in table heading[% L.part_picker('p11', undef, type='part,service') %]
Part picker in table cell[% L.part_picker('p12', undef, type='part,service') %]
-- 2.20.1