Skip to content

erp5
erp5
Commit ca443ae7 authored by Romain Courteaud's avatar Romain Courteaud
Browse files
Options

WIP [erp5_web_renderjs_ui] Select editor 

Not usable prototype
parent bfb01b33
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1021 additions and 26 deletions
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.html
View file @ ca443ae7
......@@ -4,7 +4,7 @@
<!--
data-i18n=No records
data-i18n=Records
data-i18n=Hide Rows
data-i18n=Select
data-i18n=Submit
data-i18n=sample of
-->
......@@ -50,7 +50,7 @@
{{#if show_anchor}}
<th data-i18n="Jump">Jump</th>
{{/if}}
<th></th>
<th><!--input value="couscous" type="checkbox" data-checked="true" class="hide_element"></input--></th>
{{#each head_value}}
<th class="{{class_value}}">{{text}}</th>
{{/each}}
......@@ -118,7 +118,7 @@
</th>
{{/if}}
<td>
<input value="{{uid}}" type="checkbox" checked="true" class="hide_element">
<input value="{{uid}}" type="checkbox" data-checked="true" class="hide_element"></input>
</td>
{{#each cell_list}}
<td>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_html.xml
View file @ ca443ae7
......@@ -234,7 +234,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>966.44549.11438.13482</string> </value>
<value> <string>968.19884.63675.46848</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -252,8 +252,8 @@
</tuple>
<state>
<tuple>
<float>1523030835.06</float>
<string>GMT+2</string>
<float>1529332816.46</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.js
View file @ ca443ae7
......@@ -430,7 +430,7 @@
hide_button_name = 'SelectRows';
} else {
listbox_thead_template = listbox_hidden_thead_template;
hide_button_text = 'Hide Rows';
hide_button_text = 'Select';
hide_button_name = 'Hide';
}
return RSVP.all([
......@@ -880,10 +880,20 @@
}
if (evt.target === hide_button) {
evt.preventDefault();
url = "gadget_erp5_select_editor.html";
// options.sort_column_list = JSON.parse(gadget.state.sort_column_list_json);
// options.sort_list = JSON.parse(gadget.state.sort_list_json);
// options.key = gadget.state.key + "_sort_list:json";
return gadget.renderEditorPanel(url, {
all_docs: gadget.state.allDocs_result
});
/*
evt.preventDefault();
return gadget.changeState({
show_line_selector: true
});
*/
}
if (evt.target === select_button) {
......@@ -893,7 +903,7 @@
//maybe submit
all_hide_element_list = gadget.element.querySelectorAll(".hide_element");
for (i = 0; i < all_hide_element_list.length; i += 1) {
if (!all_hide_element_list[i].checked) {
if (all_hide_element_list[i].checked) {
hide_element_list.push(all_hide_element_list[i]);
}
}
......@@ -902,22 +912,25 @@
query_list.push(new SimpleQuery({
key: "catalog.uid",
type: "simple",
operator: "!=",
// operator: "!=",
value: hide_element_list[i].getAttribute("value")
}));
}
if (gadget.state.extended_search) {
search_query = QueryFactory.create(gadget.state.extended_search);
}
if (search_query) {
query_list.push(search_query);
}
search_query = new ComplexQuery({
operator: "AND",
operator: "OR",
query_list: query_list,
type: "complex"
});
if (gadget.state.extended_search) {
search_query = new ComplexQuery({
operator: "AND",
query_list: [search_query,
QueryFactory.create(gadget.state.extended_search)],
type: "complex"
});
}
return gadget.redirect({
command: 'store_and_change',
options: {
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_listbox_js.xml
View file @ ca443ae7
......@@ -236,7 +236,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>967.65060.33188.22937</string> </value>
<value> <string>968.22405.48825.19148</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -254,7 +254,7 @@
</tuple>
<state>
<tuple>
<float>1528107178.27</float>
<float>1529480446.04</float>
<string>UTC</string>
</tuple>
</state>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css
View file @ ca443ae7
......@@ -684,7 +684,8 @@ div[data-gadget-scope='editor_panel'] section fieldset input[type="radio"] {
}
div[data-gadget-scope='editor_panel'] section .filter_item_container > div,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div,
div[data-gadget-scope='editor_panel'] section .column_item_container > div {
div[data-gadget-scope='editor_panel'] section .column_item_container > div,
div[data-gadget-scope='editor_panel'] section .select_item_container > div {
display: flex;
align-items: flex-start;
padding: 6pt 0;
......@@ -692,14 +693,74 @@ div[data-gadget-scope='editor_panel'] section .column_item_container > div {
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 .column_item_container > div .filter_item,
div[data-gadget-scope='editor_panel'] section .select_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,
div[data-gadget-scope='editor_panel'] section .column_item_container > div .sort_item,
div[data-gadget-scope='editor_panel'] section .select_item_container > div .sort_item,
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .column_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .column_item,
div[data-gadget-scope='editor_panel'] section .column_item_container > div .column_item {
div[data-gadget-scope='editor_panel'] section .column_item_container > div .column_item,
div[data-gadget-scope='editor_panel'] section .select_item_container > div .column_item,
div[data-gadget-scope='editor_panel'] section .filter_item_container > div .select_item,
div[data-gadget-scope='editor_panel'] section .sort_item_container > div .select_item,
div[data-gadget-scope='editor_panel'] section .column_item_container > div .select_item,
div[data-gadget-scope='editor_panel'] section .select_item_container > div .select_item {
flex: 1;
}
div[data-gadget-scope='editor_panel'] section .select_item_container {
/*
@checkbox-height: @double-margin-size + @smartphone-font-size;
input[type=checkbox] {
-webkit-appearance: none;
width: @checkbox-height;
height: @checkbox-height;
display: inline-block;
vertical-align: middle;
border: none;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
border-radius: @border-radius;
border: @border;
// outline-offset: -2px;
&:checked {
// background-color: @colortextboxforeground;
// border: @margin-size @border-type @border-color;
// outline-offset: -@margin-size;
}
}
*/
}
div[data-gadget-scope='editor_panel'] section .select_item_container label {
width: 100%;
padding: 3pt;
background-color: #FFFFFF;
color: #1F1F1F;
border: 1px solid rgba(0, 0, 0, 0.3);
border-radius: 0.325em;
}
div[data-gadget-scope='editor_panel'] section .select_item_container label::before {
width: 1em;
display: inline-block;
font-weight: bold;
content: '☐';
color: rgba(0, 0, 0, 0.3);
margin-right: 6pt;
}
div[data-gadget-scope='editor_panel'] section .select_item_container input[type="checkbox"] {
display: none;
/*
display: inline-block;
width: 15%;
vertical-align: middle;
border: none;
outline: none;
*/
}
div[data-gadget-scope='editor_panel'] section .select_item_container input[type="checkbox"]:checked + label::before {
color: #1F1F1F;
content: '☒';
}
div[data-gadget-scope='editor_panel'] section button {
padding: 3pt 6pt;
border: 1px solid rgba(0, 0, 0, 0.14);
......@@ -3194,4 +3255,4 @@ hmtl .ui-icon-carat-u::before {
}
.ui-icon-clone::before {
content: "\f24d";
}
\ No newline at end of file
}
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml
View file @ ca443ae7
......@@ -242,7 +242,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>966.44071.41960.10069</string> </value>
<value> <string>968.21425.21393.56439</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -260,8 +260,8 @@
</tuple>
<state>
<tuple>
<float>1523002193.07</float>
<string>GMT+2</string>
<float>1529422871.91</float>
<string>UTC</string>
</tuple>
</state>
</object>
......
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_selecteditor_html.html 0 → 100644
View file @ ca443ae7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>ERP5 Select Editor</title>
<!-- renderjs -->
<script src="rsvp.js"></script>
<script src="renderjs.js"></script>
<script src="handlebars.js"></script>
<!-- custom script -->
<script src="gadget_erp5_select_editor.js"></script>
<script id="select-item-template" type="text/x-handlebars-template">
<div><div class="select_item">
{{#each title_list}}
<input type="checkbox" name="selected" id="couscous_{{@index}}" />
<label for="couscous_{{@index}}">{{this}}</label>
<!--option {{#if selected}}selected="selected"{{/if}} data-i18n="{{text}}" value="{{value}}">{{text}}</option-->
{{/each}}
<!--input type="checkbox" name="couscous" id="couscous_1" />
<label for="couscous_1">Line 1</label>
<input type="checkbox" name="couscous" id="couscous_2" />
<label for="couscous_2">Line 2</label>
<input type="checkbox" name="couscous" id="couscous_3" />
<label for="couscous_3">Line 3</label>
<input type="checkbox" name="couscous" id="couscous_4" />
<label for="couscous_4">Line 4</label-->
</div></div>
</script>
<script id="select-template" type="text/x-handlebars-template">
<div class="ui-panel-inner">
<div data-role="header" role="banner" class="ui-header ui-bar-inherit">
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-right">
<div class="ui-controlgroup-controls">
<button data-rel="save" data-i18n="Submit" type="submit" class="submit responsive ui-last-child ui-btn ui-btn-icon-left ui-icon-check">Submit</button>
</div>
</div>
<h1 class="ui-title" role="heading" data-i18n="Select Editor" aria-level="1">Select Editor</h1>
<div class="ui-controlgroup ui-controlgroup-horizontal ui-btn-left">
<div class="ui-controlgroup-controls">
<button data-i18n="Close" data-rel="close" type="submit" class="close responsive ui-first-child ui-btn ui-btn-icon-left ui-icon-times">Close</button>
</div>
</div>
</div>
<section class="ui-body-c ui-content-section">
<fieldset class="ui-controlgroup ui-corner-all">
<select data-iconpos="left" name="heard_about">
<option data-i18n="Include" value="include">Include</option>
<option data-i18n="Exclude" value="exclude">Exclude</option>
</select>
</fieldset>
<div class="select_item_container ui-controlgroup ui-corner_all">
</div>
</section>
</div>
</script>
</head>
<body>
<form class="select_editor">
<div class="container"></div>
</form>
</body>
</html>
\ No newline at end of file
bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_selecteditor_js.js 0 → 100644
View file @ ca443ae7
/*jslint indent: 2, maxerr: 3, nomen: true */
/*global window, document, rJS, RSVP, Handlebars*/
(function (window, document, rJS, RSVP, Handlebars) {
"use strict";
var gadget_klass = rJS(window),
template_element = gadget_klass.__template_element,
select_item_template = Handlebars.compile(template_element
.getElementById("select-item-template")
.innerHTML),
select_template = Handlebars.compile(template_element
.getElementById("select-template")
.innerHTML);
function createSelectItemTemplate(gadget, select_value) {
var sort_column_list = gadget.state.sort_column_list,
sort_value_list = sort_value || [],
option_list = [],
is_selected = false,
i;
for (i = 0; i < sort_column_list.length; i += 1) {
is_selected = is_selected || (sort_value_list[0] === sort_column_list[i][0]);
option_list.push({
text: sort_column_list[i][1],
value: sort_column_list[i][0],
selected: sort_value_list[0] === sort_column_list[i][0]
});
}
if (!is_selected && (sort_value !== undefined)) {
option_list.push({
text: sort_value_list[0],
value: sort_value_list[0],
selected: true
});
}
return gadget.translateHtml(sort_item_template({
option: option_list,
operator: sort_value_list[1]
}));
}
gadget_klass
//////////////////////////////////////////////
// acquired method
//////////////////////////////////////////////
.declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("redirect", "redirect")
.declareAcquiredMethod("trigger", "trigger")
.onStateChange(function onStateChange() {
var gadget = this;
return gadget.translateHtml(select_template())
.push(function (translated_html) {
var div = document.createElement("div");
div.innerHTML = translated_html;
var i,
subdiv,
container = gadget.element.querySelector(".container"),
filter_item_container = div.querySelector('.select_item_container'),
title_list = [];
for (i = 0; i < gadget.state.all_docs.data.rows.length; i += 1) {
// subdiv = document.createElement("div");
title_list.push(gadget.state.all_docs.data.rows[i].value.title);
// subdiv.innerHTML =
// filter_item_container.appendChild(subdiv);
}
filter_item_container.innerHTML = select_item_template({
title_list: title_list
});
/*
return RSVP.all(gadget.state.sort_list
.filter(isValidSortItem)
.map(function (sort_item) {
return createSortItemTemplate(gadget, sort_item);
})
);
})
.push(function (result_list) {
var i,
subdiv,
filter_item_container = div.querySelector('.sort_item_container');
for (i = 0; i < result_list.length; i += 1) {
subdiv = document.createElement("div");
subdiv.innerHTML = result_list[i];
filter_item_container.appendChild(subdiv);
}
*/
while (container.firstChild) {
container.removeChild(container.firstChild);
}
container.appendChild(div);
});
})
.declareMethod('render', function render(options) {
return this.changeState({
all_docs: options.all_docs
/*
sort_column_list: options.sort_column_list || [],
key: options.key,
sort_list: options.sort_list
*/
});
})
.onEvent('click', function click(evt) {
if (evt.target.classList.contains('close')) {
evt.preventDefault();
return this.trigger();
}
}, false, false)
.onEvent('submit', function submit() {
var gadget = this,
sort_list = gadget.element.querySelectorAll(".sort_item"),
sort_query = [],
select_list,
sort_item,
options = {},
i;
for (i = 0; i < sort_list.length; i += 1) {
sort_item = sort_list[i];
select_list = sort_item.querySelectorAll("select");
sort_query[i] = [select_list[0][select_list[0].selectedIndex].value,
select_list[1][select_list[1].selectedIndex].value];
}
if (i === 0) {
options[gadget.state.key] = undefined;
} else {
options[gadget.state.key] = sort_query;
}
return gadget.redirect({
command: 'store_and_change',
options: options
});
});
}(window, document, rJS, RSVP, Handlebars));
\ No newline at end of file
bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt
View file @ ca443ae7
......@@ -823,18 +823,82 @@ div[data-gadget-scope='editor_panel'] {
}
}
.filter_item_container, .sort_item_container, .column_item_container {
.filter_item_container, .sort_item_container, .column_item_container, .select_item_container {
& > div {
display: flex;
align-items: flex-start;
padding: @margin-size 0;
.filter_item, .sort_item, .column_item {
.filter_item, .sort_item, .column_item, .select_item {
flex: 1;
}
}
}
.select_item_container {
label {
// XXX Copy/paste from form input
width: 100%;
// display: inline-block;
padding: @half-margin-size;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
border: @border;
border-radius: @border-radius;
&::before {
width: 1em;
display: inline-block;
font-weight: bold;
content: '☐';
color: @border-color;
margin-right: @margin-size;
}
}
/*
@checkbox-height: @double-margin-size + @smartphone-font-size;
input[type=checkbox] {
-webkit-appearance: none;
width: @checkbox-height;
height: @checkbox-height;
display: inline-block;
vertical-align: middle;
border: none;
background-color: @colortextboxbackground;
color: @colortextboxforeground;
border-radius: @border-radius;
border: @border;
// outline-offset: -2px;
&:checked {
// background-color: @colortextboxforeground;
// border: @margin-size @border-type @border-color;
// outline-offset: -@margin-size;
}
}
*/
input[type="checkbox"] {
display: none;
/*
display: inline-block;
width: 15%;
vertical-align: middle;
border: none;
outline: none;
*/
&:checked + label {
// font-weight: bold;
&::before {
color: @colortextboxforeground;
content: '☒';
}
}
}
}
button {
// Copy pasted from listbox buttons
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7