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

diff --git a/css/kivitendo/main.css b/css/kivitendo/main.css
index fc6b38f..06afe14 100644 (file)
--- 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 a2c0e68..4ab7538 100644 (file)
--- 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 (file)
index 0000000..4858934
--- /dev/null
+++ b/image/search.svg
@@ -0,0 +1,6 @@
+<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" >
+  <rect id="svgEditorBackground" x="0" y="0" width="1000" height="1000" style="fill: none; stroke: none;"/>
+    <circle id="e2_circle" cx="600" cy="400" style="stroke-width: 30px; vector-effect: non-scaling-stroke;" stroke="grey" r="250" fill="grey"/>
+    <circle id="e3_circle" cx="600" cy="400" style="stroke-width: 30px; vector-effect: non-scaling-stroke;" stroke="lightgrey" r="190" fill="white"/>
+    <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)"/>
+  </svg>

diff --git a/js/autocomplete_part.js b/js/autocomplete_part.js
index 0366ed2..cc9354a 100644 (file)
--- 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  = $('<span>').addClass('position-absolute');
-    var picker = $('<div>');
-    $dummy.after(pcont);
-    pcont.append(picker);
-    picker.addClass('icon16 search').click(open_dialog);
+    var popup_button = $('<span>').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 61aa105..f545809 100644 (file)
--- a/templates/webpages/part/test_page.html
+++ b/templates/webpages/part/test_page.html
@@ -1,6 +1,6 @@
 [% USE L %]
 
-<h1>Waren Picker Testpage</h1>
+<h1>Part Picker Testpage</h1>
 
 <br>
 Alle: <br>
@@ -12,7 +12,49 @@ Nur Dienstleistungen: <br>
 Waren und Dienstleistungen: <br>
 [% L.part_picker('part_id4', undef, type='part,service') %]<br>
 
+<h2>Styling</h2>
+
+Ina span:
+<span>Leading text: [% L.part_picker('p1', undef, type='part,service') %] and text after with spacing</span><br>
+<span>Leading text:[% L.part_picker('p2', undef, type='part,service') %]and text after without spacing</span><br>
+<div>Leading text: [% L.part_picker('p3', undef, type='part,service') %] and text after with spacing with div</div><br>
+<div>Leading text:[% L.part_picker('p4', undef, type='part,service') %]and text after with spacing with div</div><br>
+
+<span>Picker + input next to each other: [% L.part_picker('p5', undef, type='part,service', width="100%") %]<input type=text></span>
+
+<div>[% L.part_picker('p6', undef, type='part,service', style="width:500px") %] 500px width</div>
+<div>[% L.part_picker('p7', undef, type='part,service', style="width:200px") %] 200px width</div>
+<div>[% L.part_picker('p8', undef, type='part,service', style="height:40px") %] 40px height</div>
+
 
 [%# FOREACH i IN 1..50 %]
 [%# L.part_picker('part_id_' _ i) %] <br>
 [%# END %]
+
+<h2>In tables</h2>
+
+<p>No classes:</p>
+
+<table>
+ <tr>
+  <th>Part picker in table heading</th>
+  <th>[% L.part_picker('p9', undef, type='part,service') %]</th>
+ </tr>
+ <tr>
+  <td>Part picker in table cell</td>
+  <td>[% L.part_picker('p10', undef, type='part,service') %]</td>
+ </tr>
+</table>
+
+<p>With classes:</p>
+
+<table>
+ <tr class=listheading>
+  <th>Part picker in table heading</th>
+  <th>[% L.part_picker('p11', undef, type='part,service') %]</th>
+ </tr>
+ <tr class=listrow>
+  <td>Part picker in table cell</td>
+  <td>[% L.part_picker('p12', undef, type='part,service') %]</td>
+ </tr>
+</table>