[erp5_web_renderjs_ui] Improve relation field rendering

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.css

@@ -870,6 +870,52 @@ div[data-gadget-scope='header'] .ui-header ul a {
   color: red;
 }
 /**********************************************
+* Gadget: relation field
+**********************************************/
+.relation-input {
+  display: flex;
+}
+.relation-input a {
+  width: 3em;
+  overflow: hidden;
+  text-indent: -9999px;
+  white-space: nowrap;
+  display: block;
+  line-height: 2.6em;
+}
+.relation-input a::before {
+  float: left;
+  text-indent: 0;
+  margin-left: 1em;
+}
+.relation-input div {
+  position: relative;
+}
+.relation-input ul {
+  position: absolute;
+  display: block;
+  width: 100%;
+  z-index: 501;
+}
+.relation-input ul li {
+  cursor: pointer;
+  background-color: #444444;
+  color: #FFFFFF;
+  padding: .4em;
+  padding-left: 1em;
+  display: block;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
+}
+.relation-input ul li::before {
+  width: 2em;
+}
+.relation-input ul li:hover,
+.relation-input ul li:active {
+  background-color: #2b2b2b;
+}
+/**********************************************
 * Listbox
 **********************************************/
 div[data-gadget-scope='erp5_searchfield'] .ui-input-text {

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_css.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.34617.43772.45602</string> </value>
+                <value> <string>952.41846.15957.29576</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468421631.31</float>
+                        <float>1468855551.83</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_html.html

@@ -13,17 +13,21 @@
 
 
     <script id="relation-input-template" type="text/x-handlebars-template">
-      <div class="ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear ui-input-has-icon {{readonly}}">
-        <input type='search' title="{{title}}" name="{{name}}" autocomplete="off" data-enhanced="true" value="{{value}}" >
-        <ul class="ui-listview ui-corner-all search_ul"></ul>
+      <div class="relation-input ui-input-text ui-body-inherit ui-corner-all ui-shadow-inset ui-input-has-clear ui-input-has-icon {{readonly}}">
+        <div>
+          <input type='search' title="{{title}}" name="{{name}}" autocomplete="off" {{{input_readonly}}} data-enhanced="true" value="{{value}}" >
+          <ul class="ui-listview ui-corner-all search_ul"></ul>
+        </div>
+        <a href={{href}} tabindex="-1" class="{{class_name}}" >Jump to this document</a>
       </div>
-       <a href={{href}} tabindex="-1" class="{{class_name}}" >Jump to this document</a>
+        
+
     </script>
 
 
     <script id="relation-listview-template" type="text/x-handlebars-template">
       {{#if list.length}}
-        <li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">Select from the {{list.length}} Search Results</li>
+        <!--li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">Select from the {{list.length}} Search Results</li-->
         {{#each list}}
           <li class="ui-li-static ui-body-inherit ui-icon-mail-forward ui-btn-icon-right" data-relative-url={{id}} >{{value}}</li>
         {{/each}}
@@ -31,7 +35,7 @@
          <li class="ui-li-static ui-body-inherit ui-bar-inherit ui-icon-plus ui-btn-icon-right" data-create-object="{{this}}" name="{{this}}">Create New {{this}}: {{../value}}</li>
         {{/each}}
       {{else}}
-        <li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">No result</li>
+        <!--li class="ui-autocomplete ui-li ui-li-divider ui-bar-inherit ui-first-child" role="heading">No result</li-->
         {{#each type}}
          <li class="ui-li-static ui-body-inherit ui-bar-inherit ui-icon-plus ui-btn-icon-right" data-create-object="{{this}}" name="{{this}}">Create New {{this}}: {{../value}}</li>
         {{/each}}

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.37478.47429.24456</string> </value>
+                <value> <string>952.41816.36917.26982</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468593487.51</float>
+                        <float>1468854973.0</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.js

@@ -151,6 +151,7 @@
             href: jump_href,
             create_object: create_object,
             readonly: field_json.editable ? "" : "ui-state-readonly",
+            input_readonly: field_json.editable ? "" : 'readonly="readonly"',
             required: field_json.required ? "required" : "",
             value: value,
             title: field_json.title,

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_relation_input_js.xml

@@ -236,7 +236,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>952.37471.28952.41693</string> </value>
+                <value> <string>952.37517.63345.57514</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -254,7 +254,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1468592850.23</float>
+                        <float>1468595439.59</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -1003,9 +1003,60 @@ div[data-gadget-scope='header'] .ui-header {
 }
 
 /**********************************************
-* Listbox
+* Gadget: relation field
 **********************************************/
+.relation-input {
+  display: flex;
+  a {
+      .hide_text();
+
+      &::before {
+        float: left;
+        text-indent: 0;
+        margin-left: 1em;
+      }
+
+      display: block;
+
+      line-height: @headerheight;
+
+  }
+
+  div {
+    position: relative;
+  }
+  ul {
+    position: absolute;
+    display: block;
+    width: 100%;
+    z-index: 501;
+    li {
+      cursor: pointer;
+
+      background-color: @panelbackgroundcolor;
+
+      color: @white;
+      padding: .4em;
+      padding-left: 1em;
+      display: block;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      white-space: nowrap; 
 
+      &::before {
+        width: 2em;
+      }
+      &:hover, &:active {
+        background-color: darken(@panelbackgroundcolor, 10%);
+      }
+
+    }
+  }
+}
+
+/**********************************************
+* Listbox
+**********************************************/
 div[data-gadget-scope='erp5_searchfield'] {
   .ui-input-text {
     display: flex;