Commit 8693f426 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Improve editor panel rendering

parent 5d185b40
......@@ -402,12 +402,10 @@ img {
**********************************************/
div[data-gadget-scope='panel'] {
background-color: #444444;
border-color: #888888;
color: #FFFFFF;
width: 17em;
min-height: 100%;
max-height: none;
border-width: 0;
position: fixed;
top: 0;
left: 0;
......@@ -487,59 +485,54 @@ div[data-gadget-scope='panel'] ul li a:active {
* Gadget: editor panel
**********************************************/
div[data-gadget-scope='editor_panel'] {
background-color: #444444;
border-color: #888888;
box-shadow: 5px 0 0 5px rgba(0, 0, 0, 0.15);
color: #FFFFFF;
background-color: #FFFFFF;
width: 17em;
min-height: 100%;
max-height: none;
border-width: 0;
position: fixed;
top: 0;
right: 0;
display: block;
z-index: 2000;
transition: transform 200ms ease-out;
transform: translate3d(110%, 0, 0);
z-index: 3000;
}
div[data-gadget-scope='editor_panel'].visible {
transform: translate3d(0, 0, 0);
@media only screen and (min-width: 62em) {
div[data-gadget-scope='editor_panel'] {
left: 0;
transition: transform 200ms ease-out;
transform: translate3d(-110%, 0, 0);
box-shadow: 5px 0 5px rgba(0, 0, 0, 0.15);
}
div[data-gadget-scope='editor_panel'].visible {
transform: translate3d(0, 0, 0);
}
}
@media only screen and (max-width: 28em), only screen and (min-width: 28em) and (max-width: 62em) {
div[data-gadget-scope='editor_panel'] {
right: 0;
transition: transform 200ms ease-out;
transform: translate3d(110%, 0, 0);
box-shadow: -5px 0 5px rgba(0, 0, 0, 0.15);
}
div[data-gadget-scope='editor_panel'].visible {
transform: translate3d(0, 0, 0);
}
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] {
background-color: #252525;
color: #FFFFFF;
display: flex;
justify-content: space-between;
border-color: rgba(255, 255, 255, 0.3);
border-width: 0 0 1px 0;
border-style: solid;
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] h1 {
text-align: left;
line-height: 2.6em;
max-height: 2.6em;
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] > div:first-of-type {
border-color: rgba(255, 255, 255, 0.3);
border-style: solid;
border-width: 0 1px 0 0;
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] > div:last-of-type {
border-color: rgba(255, 255, 255, 0.3);
border-style: solid;
border-width: 0 0 0 1px;
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] button,
div[data-gadget-scope='editor_panel'] div[data-role="header"] a {
width: 3em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
background-color: #252525;
display: block;
line-height: 2.6em;
color: #FFFFFF;
}
div[data-gadget-scope='editor_panel'] div[data-role="header"] button::before,
div[data-gadget-scope='editor_panel'] div[data-role="header"] a::before {
......@@ -547,6 +540,50 @@ div[data-gadget-scope='editor_panel'] div[data-role="header"] a::before {
text-indent: 0;
margin-left: 1em;
}
div[data-gadget-scope='editor_panel'] section {
padding: 1em;
}
div[data-gadget-scope='editor_panel'] section fieldset > div {
display: inline-block;
}
div[data-gadget-scope='editor_panel'] section fieldset label {
display: inline-block;
text-align: center;
font-size: 0.8em;
}
div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] {
display: inline-block;
}
div[data-gadget-scope='editor_panel'] section .filter_item_container > div,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div {
display: flex;
align-items: flex-start;
padding: 0.5em 0;
}
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .filter_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .filter_item,
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .sort_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .sort_item {
flex: 1;
}
div[data-gadget-scope='editor_panel'] section button {
padding: 0.5em;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: 0.325em;
margin-right: 0.5em;
width: 2em;
overflow: hidden;
text-indent: -9999px;
white-space: nowrap;
}
div[data-gadget-scope='editor_panel'] section button:last-of-type {
margin-right: 0;
}
div[data-gadget-scope='editor_panel'] section button::before {
margin-right: 0.4em;
float: left;
text-indent: 0;
}
/**********************************************
* Gadget: header
**********************************************/
......
......@@ -69,6 +69,12 @@
<none/>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value>
<none/>
</value>
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5.css</string> </value>
......@@ -230,7 +236,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.31797.52108.19336</string> </value>
<value> <string>952.34328.50500.53981</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +254,7 @@
</tuple>
<state>
<tuple>
<float>1468252822.53</float>
<float>1468416052.89</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -25,6 +25,7 @@
<script id="filter-item-template" type="text/x-handlebars-template">
<button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
<div class="filter_item {{class_value}}" >
<select data-iconpos="left">
{{#each option}}
......@@ -45,8 +46,7 @@
{{/each}}
</select>
<div class="ui-controlgroup-controls">
<input type= "{{input_type}}" value="{{input_value}}"></input>
<button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-delete ui-icon-shadow"></button>
<input type="{{input_type}}" value="{{input_value}}"></input>
</div>
</div>
......@@ -81,17 +81,10 @@
<section class="ui-body-c ui-content-section">
<fieldset class="ui-controlgroup ui-corner-all">
<div class="ui-controlgroup-controls">
<div class="ui-radio">
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-on" data-i18n="All criterions(AND)">All criterions(AND)</label>
<input type="radio" value="on" checked="checked" name="heard_about" id="heard_about_a" class="and checkboxradio" data-cacheval="false" data-enhanced="true">
</div>
<div class="ui-radio">
<label class="ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off" data-i18n="At lease one(OR)">At lease one(OR)</label>
<input type="radio" value="Off" name="heard_about" id="heard_about_b" class="or checkboxradio" data-cacheval="true" data-enhanced="true">
</div>
</div>
<select data-iconpos="left" name="heard_about">
<option data-i18n="All criterions (AND)" value="AND">All criterions (AND)</option>
<option data-i18n="At lease one (OR)" value="OR">At lease one (OR)</option>
</select>
</fieldset>
<div class="filter_item_container">
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>947.25389.31975.29218</string> </value>
<value> <string>952.34496.35921.52275</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1448651417.88</float>
<float>1468414694.8</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -69,7 +69,7 @@
option = [],
tmp,
operator_option = [],
input_type = "text",
input_type = "search",
i;
if (filter_item) {
......@@ -209,8 +209,7 @@
var gadget = this,
i,
list = [],
or = gadget.props.element.querySelector(".or"),
and = gadget.props.element.querySelector(".and"),
operator_select = gadget.props.element.querySelector("select"),
container = gadget.props.element.querySelector(".filter_item_container"),
query_list;
if (gadget.props.extended_search) {
......@@ -224,12 +223,7 @@
return;
}
if (query_list.operator === "OR") {
or.checked = true;
and.checked = false;
or.parentElement.children[0].setAttribute("class",
"ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-on");
and.parentElement.children[0].setAttribute("class",
"ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-radio-off");
operator_select.querySelectorAll("option")[1].selected = "selected";
}
query_list = query_list.query_list || [query_list];
......@@ -241,11 +235,12 @@
return RSVP.all(list);
})
.push(function (all_result) {
var innerHTML = "";
var div;
for (i = 0; i < all_result.length; i += 1) {
innerHTML += all_result[i];
div = document.createElement("div");
div.innerHTML = all_result[i];
container.appendChild(div);
}
container.innerHTML = innerHTML;
return listenToSelect(gadget, "auto");
});
}
......@@ -260,7 +255,7 @@
function () {
var focused = document.activeElement;
if (focused.nodeName === "BUTTON") {
container.removeChild(focused.parentElement.parentElement);
container.removeChild(focused.parentElement);
}
}
);
......@@ -283,7 +278,8 @@
value,
options = {},
filter_item_list = gadget.props.element.querySelectorAll(".filter_item"),
and = gadget.props.element.querySelector(".and");
operator_select = gadget.props.element.querySelector("select"),
operator = operator_select[operator_select.selectedIndex].value;
for (i = 0; i < filter_item_list.length; i += 1) {
select_list = filter_item_list[i].querySelectorAll("select");
value = filter_item_list[i].querySelector("input").value;
......@@ -313,7 +309,7 @@
if (simple_query_list.length > 0) {
complex_query = new ComplexQuery({
operator: and.checked ? "AND" : "OR",
operator: operator,
query_list: simple_query_list,
type: "complex"
});
......@@ -349,7 +345,7 @@
var tmp = document.createElement("div"),
container = gadget.props.element.querySelector(".filter_item_container");
tmp.innerHTML = template;
container.appendChild(tmp.querySelector("div"));
container.appendChild(tmp);
return listenToSelect(gadget, class_value);
});
}
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.10062.13895.62105</string> </value>
<value> <string>952.34519.30853.16520</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1467034494.63</float>
<float>1468415510.46</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -16,6 +16,7 @@
<script id="sort-item-template" type="text/x-handlebars-template">
<button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-minus ui-icon-shadow"></button>
<div class="sort_item ui-controlgroup-controls" >
<select data-iconpos="left">
{{#each option}}
......@@ -37,7 +38,6 @@
{{/equal}}
</select>
<button type="submit" class="ui-icon ui-btn ui-btn-inline ui-icon-delete ui-icon-shadow"></button>
</div>
</script>
......
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>946.64691.21179.17203</string> </value>
<value> <string>952.34318.26924.28552</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,7 +252,7 @@
</tuple>
<state>
<tuple>
<float>1447352776.31</float>
<float>1468413387.26</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -105,11 +105,13 @@
return RSVP.all(list);
})
.push(function (all_result) {
var innerHTML = "";
var div,
container = gadget.props.element.querySelector(".sort_item_container");
for (i = 0; i < all_result.length; i += 1) {
innerHTML += all_result[i];
div = document.createElement("div");
div.innerHTML = all_result[i];
container.appendChild(div);
}
gadget.props.element.querySelector(".sort_item_container").innerHTML = innerHTML;
});
})
.declareService(function () {
......@@ -172,7 +174,7 @@
var tmp = document.createElement("div"),
container = gadget.props.element.querySelector(".sort_item_container");
tmp.innerHTML = template;
container.appendChild(tmp.querySelector("div"));
container.appendChild(tmp);
});
}
);
......
......@@ -230,7 +230,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>952.11593.64274.11281</string> </value>
<value> <string>952.21277.40593.7202</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -248,7 +248,7 @@
</tuple>
<state>
<tuple>
<float>1467126398.3</float>
<float>1468403615.53</float>
<string>UTC</string>
</tuple>
</state>
......
......@@ -459,8 +459,6 @@ div[data-gadget-scope='panel'] {
background-color: @panelbackgroundcolor;
border-color: #888888;
@media @smartphone, @tablet {
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
......@@ -469,7 +467,6 @@ div[data-gadget-scope='panel'] {
width: @panelwidth;
min-height: 100%;
max-height: none;
border-width: 0;
position: fixed;
top: 0;
left: 0;
......@@ -556,66 +553,51 @@ div[data-gadget-scope='panel'] {
div[data-gadget-scope='editor_panel'] {
background-color: @panelbackgroundcolor;
border-color: #888888;
box-shadow: 5px 0 0 5px rgba(0,0,0,.15);
color: @white;
background-color: @colorbackground;
width: @panelwidth;
min-height: 100%;
max-height: none;
border-width: 0;
position: fixed;
top: 0;
right: 0;
display: block;
z-index: 2000;
z-index: 3000;
transition: transform 200ms ease-out;
transform: translate3d(110%, 0, 0);
&.visible {
transform: translate3d(0, 0, 0);
@media @desktop {
left: 0;
transition: transform 200ms ease-out;
transform: translate3d(-110%, 0, 0);
&.visible {
transform: translate3d(0, 0, 0);
}
box-shadow: 5px 0 5px rgba(0,0,0,.15);
}
@media @smartphone, @tablet {
right: 0;
transition: transform 200ms ease-out;
transform: translate3d(110%, 0, 0);
&.visible {
transform: translate3d(0, 0, 0);
}
box-shadow: -5px 0 5px rgba(0,0,0,.15);
}
div[data-role="header"] {
background-color: #252525;
color: @white;
display: flex;
justify-content: space-between;
border-color: rgba(255,255,255, .3);
border-width: 0 0 1px 0;
border-style: solid;
h1 {
text-align: left;
line-height: @headerheight;
max-height: @headerheight;
}
> div {
&:first-of-type {
border-color: rgba(255,255,255, .3);
border-style: solid;
border-width: 0 1px 0 0;
}
&:last-of-type {
border-color: rgba(255,255,255, .3);
border-style: solid;
border-width: 0 0 0 1px;
}
}
button, a {
.hide_text();
background-color: #252525;
&::before {
float: left;
......@@ -626,11 +608,61 @@ div[data-gadget-scope='editor_panel'] {
display: block;
line-height: @headerheight;
color: @white;
}
}
section {
padding: 1em;
fieldset {
& > div {
display: inline-block;
}
label {
display: inline-block;
text-align: center;
font-size: 0.8em;
}
input[type="radio"] {
display: inline-block;
}
}
.filter_item_container, .sort_item_container {
& > div {
display: flex;
align-items: flex-start;
padding: 0.5em 0;
.filter_item, .sort_item {
flex: 1;
}
}
}
button {
// Copy pasted from listbox buttons
padding: 0.5em;
border: 1px solid rgba(0, 0, 0, 0.14);
border-radius: @radius;
margin-right: 0.5em;
&:last-of-type {
margin-right: 0;
}
.hide_text(@width: 2em);
&::before {
margin-right: 0.4em;
float: left;
text-indent: 0;
}
}
}
}
......
......@@ -66,14 +66,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......@@ -190,27 +190,27 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
<tr>
<td>check</td>
<td>//input[@class='or checkboxradio']</td>
<td></td>
<td>select</td>
<td>//select[@name='heard_about']</td>
<td>index=1</td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>off</td>
<td>//select[@name='heard_about']</td>
<td>OR</td>
</tr>
......
......@@ -66,14 +66,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......@@ -150,14 +150,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......
......@@ -67,14 +67,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......@@ -165,14 +165,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......@@ -196,15 +196,15 @@
<tr>
<td>check</td>
<td>//input[@class='or checkboxradio']</td>
<td></td>
<td>select</td>
<td>//select[@name='heard_about']</td>
<td>index=1</td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>off</td>
<td>//select[@name='heard_about']</td>
<td>OR</td>
</tr>
......@@ -264,21 +264,15 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>off</td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='or checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>OR</td>
</tr>
......
......@@ -66,14 +66,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......@@ -94,27 +94,27 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
<tr>
<td>check</td>
<td>//input[@class='or checkboxradio']</td>
<td></td>
<td>select</td>
<td>//select[@name='heard_about']</td>
<td>index=1</td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>off</td>
<td>//select[@name='heard_about']</td>
<td>OR</td>
</tr>
......
......@@ -66,20 +66,20 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>check</td>
<td>//input[@class='or checkboxradio']</td>
<td>on</td>
<td>select</td>
<td>//select[@name='heard_about']</td>
<td>index=1</td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='or checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>OR</td>
</tr>
......
......@@ -66,14 +66,14 @@
<tr>
<td>waitForElementPresent</td>
<td>//input[@class='and checkboxradio']</td>
<td>//select[@name='heard_about']</td>
<td></td>
</tr>
<tr>
<td>verifyValue</td>
<td>//input[@class='and checkboxradio']</td>
<td>on</td>
<td>//select[@name='heard_about']</td>
<td>AND</td>
</tr>
......
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