Commit 6455fd01 authored by Romain Courteaud's avatar Romain Courteaud Committed by Sebastien Robin

New navigation pattern for ERP5 JS.

Display document as read only by default.
Ease navigation on small screen.

Thx to Sven Franck for the UI and Thierry Brettnacher for the UX.
parent 14768f82
......@@ -99,10 +99,19 @@
</item>
<item>
<key> <string>text_content</string> </key>
<value> <string>CACHE MANIFEST\n
# generated on Thu, 18 Sep 2014 12:48:25 +0000\n
<value> <string encoding="cdata"><![CDATA[
CACHE MANIFEST\n
# generated on Mon, 29 Sep 2014 14:23:16 +0000\n
# XXX + fonts\n
# images/ajax-loader.gif\n
CACHE:\n
images/ajax-loader.gif\n
https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css\n
https://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.eot?v=4.0.3\n
https://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.eot?#iefix&v=4.0.3\n
https://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.woff?v=4.0.3\n
https://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.ttf?v=4.0.3\n
https://netdna.bootstrapcdn.com/font-awesome/4.0.3/fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular\n
RSVP.js\n
URI.js\n
codemirror.css\n
......@@ -117,6 +126,7 @@ codemirror_keymap_vim.js\n
codemirror_mode_clike.js\n
codemirror_mode_javascript.js\n
codemirror_theme_solarized.css\n
dygraph.js\n
gadget_bin.css\n
gadget_bin.html\n
gadget_bin.js\n
......@@ -126,36 +136,45 @@ gadget_codemirror.js\n
gadget_erp5.css\n
gadget_erp5.html\n
gadget_erp5.js\n
gadget_erp5_breadcrumb.html\n
gadget_erp5_breadcrumb.js\n
gadget_erp5_floatfield.html\n
gadget_erp5_floatfield.js\n
gadget_erp5_field_float.html\n
gadget_erp5_field_float.js\n
gadget_erp5_field_list.html\n
gadget_erp5_field_list.js\n
gadget_erp5_field_listbox.html\n
gadget_erp5_field_listbox.js\n
gadget_erp5_field_readonly.html\n
gadget_erp5_field_readonly.js\n
gadget_erp5_field_string.html\n
gadget_erp5_field_string.js\n
gadget_erp5_field_textarea.html\n
gadget_erp5_field_textarea.js\n
gadget_erp5_form.html\n
gadget_erp5_form.js\n
gadget_erp5_listbox.html\n
gadget_erp5_listbox.js\n
gadget_erp5_listfield.html\n
gadget_erp5_listfield.js\n
gadget_erp5_header.html\n
gadget_erp5_header.js\n
gadget_erp5_latest.css\n
gadget_erp5_page_action.html\n
gadget_erp5_page_action.js\n
gadget_erp5_page_breadcrumb.html\n
gadget_erp5_page_breadcrumb.js\n
gadget_erp5_page_form.html\n
gadget_erp5_page_form.js\n
gadget_erp5_page_front.html\n
gadget_erp5_page_front.js\n
gadget_erp5_page_login.html\n
gadget_erp5_page_login.js\n
gadget_erp5_page_tab.html\n
gadget_erp5_page_tab.js\n
gadget_erp5_pt_form_dialog.html\n
gadget_erp5_pt_form_dialog.js\n
gadget_erp5_pt_form_list.html\n
gadget_erp5_pt_form_list.js\n
gadget_erp5_pt_form_view.html\n
gadget_erp5_pt_form_view.js\n
gadget_erp5_pt_frontpage.html\n
gadget_erp5_pt_frontpage.js\n
gadget_erp5_pt_loginform.html\n
gadget_erp5_pt_loginform.js\n
gadget_erp5_readonlyfield.html\n
gadget_erp5_readonlyfield.js\n
gadget_erp5_pt_form_view_editable.html\n
gadget_erp5_pt_form_view_editable.js\n
gadget_erp5_searchfield.html\n
gadget_erp5_searchfield.js\n
gadget_erp5_stringfield.html\n
gadget_erp5_stringfield.js\n
gadget_erp5_tab_list.html\n
gadget_erp5_tab_list.js\n
gadget_erp5_textareafield.html\n
gadget_erp5_textareafield.js\n
gadget_global.js\n
gadget_jio.html\n
gadget_jio.js\n
......@@ -172,7 +191,9 @@ jquerymobile.js\n
renderjs.js\n
uritemplate.js\n
NETWORK:\n
*</string> </value>
*
]]></string> </value>
</item>
<item>
<key> <string>title</string> </key>
......@@ -301,7 +322,7 @@ NETWORK:\n
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.42655.40265.30037</string> </value>
<value> <string>937.58588.9950.37290</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -319,7 +340,7 @@ NETWORK:\n
</tuple>
<state>
<tuple>
<float>1411044505.47</float>
<float>1412000596.45</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -75,7 +75,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_floatfield.html</string> </value>
<value> <string>gadget_erp5_field_float.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -116,7 +116,7 @@
<script src="RSVP.js" type="text/javascript"></script>\n
<script src="renderjs.js" type="text/javascript"></script>\n
<!-- custom script -->\n
<script src="gadget_erp5_floatfield.js" type="text/javascript"></script>\n
<script src="gadget_erp5_field_float.js" type="text/javascript"></script>\n
\n
</head>\n
<body>\n
......@@ -259,7 +259,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>936.53479.26332.17100</string> </value>
<value> <string>937.51521.250.37802</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -277,7 +277,7 @@
</tuple>
<state>
<tuple>
<float>1407762037.69</float>
<float>1411576768.35</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -71,7 +71,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_floatfield.js</string> </value>
<value> <string>gadget_erp5_field_float.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -122,6 +122,7 @@
input.setAttribute(\'title\', field_json.title);\n
if (field_json.editable !== 1) {\n
input.setAttribute(\'readonly\', \'readonly\');\n
input.setAttribute(\'data-wrapper-class\', \'ui-state-disabled ui-state-readonly\');\n
input.setAttribute(\'disabled\', \'disabled\');\n
\n
}\n
......@@ -255,7 +256,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>romain</string> </value>
<value> <string>sven</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -269,7 +270,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.42715.45132.18756</string> </value>
<value> <string>937.48460.49347.43246</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -287,7 +288,7 @@
</tuple>
<state>
<tuple>
<float>1411053203.71</float>
<float>1411576355.41</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -161,7 +161,8 @@
queue\n
.push(function () {\n
var j,\n
fieldset_element = document.createElement("fieldset"),\n
// XXX: > Romain: fieldset will be needed later for menus\n
fieldset_element = document.createElement("div"),\n
group_queue = new RSVP.Queue();\n
\n
function addField(field) {\n
......@@ -169,15 +170,17 @@
if (rendered_form.hasOwnProperty(field[0])) {\n
// Field is enabled in this context\n
var field_queue = new RSVP.Queue(),\n
field_url = \'gadget_erp5_readonlyfield.html\',\n
sandbox = "public",\n
field_url = \'gadget_erp5_field_readonly.html\',\n
field_element = document.createElement("div"),\n
gadget_element = document.createElement("div"),\n
label_element = document.createElement("label"),\n
renderered_field = rendered_form[field[0]];\n
\n
field_element.className = "ui-field-contain";\n
if (renderered_field.hidden === 1) {\n
// Hide field\n
field_element.setAttribute("class", "ui-screen-hidden");\n
field_element.className = field_element.className + " ui-screen-hidden";\n
}\n
// field_element.setAttribute(\'data-role\', \'fieldcontain\');\n
label_element.setAttribute(\'for\', renderered_field.key);\n
......@@ -187,27 +190,30 @@
}\n
field_element.appendChild(gadget_element);\n
fieldset_element.appendChild(field_element);\n
if ((renderered_field.type === \'ListField\') ||\n
(renderered_field.type === \'ParallelListField\') ||\n
(renderered_field.type === \'MultiListField\')) {\n
field_url = \'gadget_erp5_listfield.html\';\n
if (renderered_field.type === \'ListField\') {\n
// (renderered_field.type === \'ParallelListField\') ||\n
// (renderered_field.type === \'MultiListField\')) {\n
field_url = \'gadget_erp5_field_list.html\';\n
} else if (renderered_field.type === \'StringField\') {\n
field_url = \'gadget_erp5_stringfield.html\';\n
field_url = \'gadget_erp5_field_string.html\';\n
} else if (renderered_field.type === \'TextAreaField\') {\n
field_url = \'gadget_erp5_textareafield.html\';\n
field_url = \'gadget_erp5_field_textarea.html\';\n
} else if (renderered_field.type === \'FloatField\') {\n
field_url = \'gadget_erp5_floatfield.html\';\n
field_url = \'gadget_erp5_field_float.html\';\n
} else if (renderered_field.type === \'ListBox\') {\n
field_url = \'gadget_erp5_listbox.html\';\n
field_url = \'gadget_erp5_field_listbox.html\';\n
} else if (renderered_field.type === \'EditorField\') {\n
field_url = \'gadget_codemirror.html\';\n
field_url = \'gadget_erp5_field_textarea.html\';\n
// field_url = \'gadget_codemirror.html\';\n
// sandbox = \'iframe\';\n
}\n
\n
return field_queue\n
.push(function () {\n
return form_gadget.declareGadget(field_url, {\n
scope: renderered_field.key,\n
element: gadget_element\n
element: gadget_element,\n
sandbox: sandbox\n
});\n
})\n
.push(function (field_gadget) {\n
......@@ -418,7 +424,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.42816.54745.57241</string> </value>
<value> <string>937.58318.16438.37768</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -436,7 +442,7 @@
</tuple>
<state>
<tuple>
<float>1411054146.03</float>
<float>1411999896.88</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -108,9 +108,10 @@
<head>\n
<meta charset="utf-8">\n
<meta name="viewport" content="width=device-width, initial-scale=1">\n
<title>RenderJS Bin</title>\n
<title>ERP5</title>\n
<link rel="shortcut icon" href="favicon.ico">\n
\n
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />\n
<link rel="stylesheet" href="jquerymobile.css">\n
<link rel="stylesheet" href="gadget_erp5.css">\n
<script src="RSVP.js" type="text/javascript"></script>\n
......@@ -135,15 +136,11 @@
\n
<div data-role="panel" id="leftpanel" data-display="overlay"></div>\n
\n
<header data-role="header">\n
<a href="#leftpanel" class="responsive ui-btn ui-icon-bars ui-btn-icon-left">Menu</a>\n
<div data-gadget-url="gadget_erp5_breadcrumb.html"\n
data-gadget-scope="breadcrumb"\n
<div data-gadget-url="gadget_erp5_header.html"\n
data-gadget-scope="header"\n
data-gadget-sandbox="public"></div>\n
<a class="responsive ui-btn ui-icon-plus ui-btn-icon-left ui-disabled" role="button" data-role="button">New</a>\n
</header>\n
\n
<article></article>\n
<article class="ui-content"></article>\n
\n
<section data-gadget-url="gadget_jio.html"\n
data-gadget-scope="jio_gadget"\n
......@@ -286,7 +283,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.43906.3473.2406</string> </value>
<value> <string>937.58476.63930.3566</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -304,7 +301,7 @@
</tuple>
<state>
<tuple>
<float>1411130950.24</float>
<float>1412000194.01</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -75,7 +75,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_listbox.html</string> </value>
<value> <string>gadget_erp5_field_listbox.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -119,16 +119,19 @@
\n
\n
<!-- custom script -->\n
<script src="gadget_erp5_listbox.js" type="text/javascript"></script>\n
<script src="gadget_erp5_field_listbox.js" type="text/javascript"></script>\n
\n
</head>\n
<body>\n
\n
<!-- XXX must set a theme here -->\n
<section class="document_table">\n
<table class="document-table ui-table-inset">\n
<thead>\n
</thead>\n
<table class="ui-responsive ui-body-c ui-table-inset">\n
<thead class="ui-bar-inherit"></thead>\n
<tfoot class="ui-bar-inherit"></tfoot>\n
</table>\n
</section>\n
\n
</body>\n
</html>
......@@ -267,7 +270,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>936.33436.2727.34850</string> </value>
<value> <string>937.51306.4912.34986</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -285,7 +288,7 @@
</tuple>
<state>
<tuple>
<float>1406559285.77</float>
<float>1411576737.72</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -71,7 +71,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_listbox.js</string> </value>
<value> <string>gadget_erp5_field_listbox.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -101,7 +101,7 @@
<key> <string>text_content</string> </key>
<value> <string encoding="cdata"><![CDATA[
/*jslint indent: 2, maxerr: 3 */\n
/*jslint indent: 2, maxerr: 3, nomen: true */\n
/*global window, document, rJS, URI, RSVP */\n
(function (window, document, rJS, URI, RSVP) {\n
"use strict";\n
......@@ -216,6 +216,7 @@
th = document.createElement("th");\n
a = document.createElement("a");\n
a.href = tmp_url;\n
a.className = "ui-link";\n
a.textContent = (result.data.rows[i]\n
.value[field_json.column_list[j][0]] || "");\n
th.appendChild(a);\n
......@@ -248,7 +249,8 @@
\n
}).push(function (url_list) {\n
var fragment = document.createDocumentFragment(),\n
tfoot = document.createElement("tfoot"),\n
tfoot = gadget.__element.querySelector("tfoot"),\n
//tfoot = document.createElement("tfoot"),\n
tr = document.createElement("tr"),\n
th = document.createElement("th"),\n
paging_prev = document.createElement("a"),\n
......@@ -435,7 +437,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.42823.42032.43861</string> </value>
<value> <string>937.51222.46996.32273</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -453,7 +455,7 @@
</tuple>
<state>
<tuple>
<float>1411054572.53</float>
<float>1411984629.48</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -75,7 +75,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_listfield.html</string> </value>
<value> <string>gadget_erp5_field_list.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -117,7 +117,7 @@
<script src="renderjs.js" type="text/javascript"></script>\n
<script src="handlebars.js" type="text/javascript"></script>\n
<!-- custom script -->\n
<script src="gadget_erp5_listfield.js" type="text/javascript"></script>\n
<script src="gadget_erp5_field_list.js" type="text/javascript"></script>\n
\n
<script id="option-template" type="text/x-handlebars-template">\n
<option value="{{value}}">{{text}}</option>\n
......@@ -254,7 +254,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>zope</string> </value>
<value> <string>sven</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -268,7 +268,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>936.14639.2726.21299</string> </value>
<value> <string>937.51428.60613.12390</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -286,7 +286,7 @@
</tuple>
<state>
<tuple>
<float>1405933454.94</float>
<float>1411576752.72</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -71,7 +71,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_listfield.js</string> </value>
<value> <string>gadget_erp5_field_list.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -128,7 +128,7 @@
});\n
})\n
.declareMethod(\'render\', function (options) {\n
var select = this.element.getElementsByTagName(\'select\')[0],\n
var select = this.element.querySelector(\'select\'),\n
i,\n
template,\n
field_json = options.field_json,\n
......@@ -146,6 +146,12 @@
});\n
}\n
select.innerHTML += tmp;\n
if (field_json.editable !== 1) {\n
select.setAttribute(\'readonly\', \'readonly\');\n
select.setAttribute(\'data-wrapper-class\', \'ui-state-readonly\');\n
// select.setAttribute(\'disabled\', \'disabled\');\n
\n
}\n
})\n
\n
.declareMethod(\'getContent\', function () {\n
......@@ -278,7 +284,7 @@
</item>
<item>
<key> <string>actor</string> </key>
<value> <string>romain</string> </value>
<value> <string>sven</string> </value>
</item>
<item>
<key> <string>comment</string> </key>
......@@ -292,7 +298,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.42824.63714.12373</string> </value>
<value> <string>937.51405.48576.10854</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -310,7 +316,7 @@
</tuple>
<state>
<tuple>
<float>1411054676.69</float>
<float>1411570828.74</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -75,7 +75,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_breadcrumb.html</string> </value>
<value> <string>gadget_erp5_page_breadcrumb.html</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -85,7 +85,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>rjs_gadget_erp5_breadcrumb_html</string> </value>
<value> <string>rjs_gadget_erp5_pt_breadcrumbpage_html</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -110,34 +110,29 @@
<head>\n
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />\n
<meta name="viewport" content="width=device-width, user-scalable=no" />\n
<title>ERP5 Breadcrumb</title>\n
<title>ERP5 Page Tab</title>\n
\n
<!-- renderjs -->\n
<script src="RSVP.js" type="text/javascript"></script>\n
<script src="renderjs.js" type="text/javascript"></script>\n
<script src="URI.js" type="text/javascript"></script>\n
\n
<script src="handlebars.js" type="text/javascript"></script>\n
\n
<!-- custom script -->\n
<script src="gadget_erp5_breadcrumb.js" type="text/javascript"></script>\n
\n
<script id="breadcrumb-template" type="text/x-handlebars-template">\n
<p>\n
{{#each parentlist}}\n
<a href="{{link}}">{{title}}</a> >\n
<script src="gadget_global.js" type="text/javascript"></script>\n
<script src="gadget_erp5_page_breadcrumb.js" type="text/javascript"></script>\n
\n
<script id="table-template" type="text/x-handlebars-template">\n
<ul data-role="listview" data-theme="c" data-inset="true" class="document-listview">\n
<li data-role="list-divider"><h1>{{definition_title}}</h1></li>\n
{{#each documentlist}}\n
<li><a class="ui-body-inherit" href="{{link}}">{{title}}</a></li>\n
{{/each}}\n
<a class="responsive ui-btn ui-icon-carat-d ui-btn-icon-right" data-role="button" role="button">{{title}}</a>\n
</p>\n
</ul>\n
</script>\n
\n
\n
</head>\n
<body>\n
<nav class="ui-title">\n
<p>\n
<a class="responsive ui-btn ui-icon-carat-d ui-btn-icon-right" data-role="button" role="button">ERP5</a>\n
</p>\n
</nav>\n
</body>\n
</html>
......@@ -231,7 +226,7 @@
</tuple>
<state>
<tuple>
<float>1407249185.95</float>
<float>1411741130.71</float>
<string>GMT</string>
</tuple>
</state>
......@@ -276,7 +271,7 @@
</item>
<item>
<key> <string>serial</string> </key>
<value> <string>937.44124.45260.39765</string> </value>
<value> <string>937.54266.11951.14011</string> </value>
</item>
<item>
<key> <string>state</string> </key>
......@@ -294,7 +289,7 @@
</tuple>
<state>
<tuple>
<float>1411132836.24</float>
<float>1411741122.87</float>
<string>GMT</string>
</tuple>
</state>
......@@ -351,7 +346,7 @@
</tuple>
<state>
<tuple>
<float>1407246316.11</float>
<float>1411741075.58</float>
<string>GMT</string>
</tuple>
</state>
......
......@@ -71,7 +71,7 @@
</item>
<item>
<key> <string>default_reference</string> </key>
<value> <string>gadget_erp5_breadcrumb.js</string> </value>
<value> <string>gadget_erp5_page_breadcrumb.js</string> </value>
</item>
<item>
<key> <string>description</string> </key>
......@@ -81,7 +81,7 @@
</item>
<item>
<key> <string>id</string> </key>
<value> <string>rjs_gadget_erp5_breadcrumb_js</string> </value>
<value> <string>rjs_gadget_erp5_pt_breadcrumbpage_js</string> </value>
</item>
<item>
<key> <string>language</string> </key>
......@@ -99,9 +99,9 @@
</item>
<item>
<key> <string>text_content</string> </key>
<value> <string>/*jslint nomen: true, indent: 2, maxerr: 3 */\n
/*global URI, window, rJS, Handlebars, RSVP */\n
(function (URI, window, rJS, Handlebars, RSVP) {\n
<value> <string>/*global window, rJS, RSVP, Handlebars, URI */\n
/*jslint nomen: true, indent: 2, maxerr: 3 */\n
(function (window, rJS, RSVP, Handlebars, URI) {\n
"use strict";\n
\n
/////////////////////////////////////////////////////////////////\n
......@@ -110,9 +110,9 @@
// Precompile the templates while loading the first gadget instance\n
var gadget_klass = rJS(window),\n
source = gadget_klass.__template_element\n
.getElementById("breadcrumb-template")\n