Commit 70532fa2 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Improve relation field rendering

parent aae6a745
...@@ -870,6 +870,52 @@ div[data-gadget-scope='header'] .ui-header ul a { ...@@ -870,6 +870,52 @@ div[data-gadget-scope='header'] .ui-header ul a {
color: red; 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 * Listbox
**********************************************/ **********************************************/
div[data-gadget-scope='erp5_searchfield'] .ui-input-text { div[data-gadget-scope='erp5_searchfield'] .ui-input-text {
......
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>952.34617.43772.45602</string> </value> <value> <string>952.41846.15957.29576</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1468421631.31</float> <float>1468855551.83</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -13,17 +13,21 @@ ...@@ -13,17 +13,21 @@
<script id="relation-input-template" type="text/x-handlebars-template"> <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}}"> <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}}">
<input type='search' title="{{title}}" name="{{name}}" autocomplete="off" data-enhanced="true" value="{{value}}" > <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> <ul class="ui-listview ui-corner-all search_ul"></ul>
</div> </div>
<a href={{href}} tabindex="-1" class="{{class_name}}" >Jump to this document</a> <a href={{href}} tabindex="-1" class="{{class_name}}" >Jump to this document</a>
</div>
</script> </script>
<script id="relation-listview-template" type="text/x-handlebars-template"> <script id="relation-listview-template" type="text/x-handlebars-template">
{{#if list.length}} {{#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}} {{#each list}}
<li class="ui-li-static ui-body-inherit ui-icon-mail-forward ui-btn-icon-right" data-relative-url={{id}} >{{value}}</li> <li class="ui-li-static ui-body-inherit ui-icon-mail-forward ui-btn-icon-right" data-relative-url={{id}} >{{value}}</li>
{{/each}} {{/each}}
...@@ -31,7 +35,7 @@ ...@@ -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> <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}} {{/each}}
{{else}} {{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}} {{#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> <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}} {{/each}}
......
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>952.37478.47429.24456</string> </value> <value> <string>952.41816.36917.26982</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -252,7 +252,7 @@ ...@@ -252,7 +252,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1468593487.51</float> <float>1468854973.0</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -151,6 +151,7 @@ ...@@ -151,6 +151,7 @@
href: jump_href, href: jump_href,
create_object: create_object, create_object: create_object,
readonly: field_json.editable ? "" : "ui-state-readonly", readonly: field_json.editable ? "" : "ui-state-readonly",
input_readonly: field_json.editable ? "" : 'readonly="readonly"',
required: field_json.required ? "required" : "", required: field_json.required ? "required" : "",
value: value, value: value,
title: field_json.title, title: field_json.title,
......
...@@ -236,7 +236,7 @@ ...@@ -236,7 +236,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>952.37471.28952.41693</string> </value> <value> <string>952.37517.63345.57514</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -254,7 +254,7 @@ ...@@ -254,7 +254,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1468592850.23</float> <float>1468595439.59</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -1003,9 +1003,60 @@ div[data-gadget-scope='header'] .ui-header { ...@@ -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'] { div[data-gadget-scope='erp5_searchfield'] {
.ui-input-text { .ui-input-text {
display: flex; display: flex;
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment