Commit cb1a5334 authored by Romain Courteaud's avatar Romain Courteaud

[erp5_web_renderjs_ui] Add a search input in the panel

parent 322d3223
...@@ -108,7 +108,7 @@ ...@@ -108,7 +108,7 @@
<value> <string encoding="cdata"><![CDATA[ <value> <string encoding="cdata"><![CDATA[
CACHE MANIFEST\n CACHE MANIFEST\n
# generated on Thu, 07 Feb 2017 15:00:00 GMT\n # generated on Wed, 01 Mar 2017 15:00:00 GMT\n
# XXX + fonts\n # XXX + fonts\n
# images/ajax-loader.gif\n # images/ajax-loader.gif\n
CACHE:\n CACHE:\n
...@@ -369,7 +369,7 @@ NETWORK:\n ...@@ -369,7 +369,7 @@ NETWORK:\n
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>957.20616.7427.7406</string> </value> <value> <string>957.46857.4036.21879</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -387,7 +387,7 @@ NETWORK:\n ...@@ -387,7 +387,7 @@ NETWORK:\n
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1487069372.52</float> <float>1488385456.73</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -484,6 +484,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before { ...@@ -484,6 +484,16 @@ div[data-gadget-scope='panel'] div[data-role="header"] a::before {
display: none; display: none;
} }
} }
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] {
padding: 3pt 12pt;
}
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] button {
color: #FFFFFF;
}
div[data-gadget-scope='panel'] div[data-gadget-scope='erp5_searchfield'] input[type="search"] {
color: #FFFFFF !important;
background-color: #777777 !important;
}
div[data-gadget-scope='panel'] img { div[data-gadget-scope='panel'] img {
text-align: left; text-align: left;
height: 100%; height: 100%;
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>957.40793.17925.62225</string> </value> <value> <string>957.46743.737.30583</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -260,7 +260,7 @@ ...@@ -260,7 +260,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1488280785.24</float> <float>1488377833.8</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -26,6 +26,15 @@ ...@@ -26,6 +26,15 @@
<script id="panel-template-body" type="text/x-handlebars-template"> <script id="panel-template-body" type="text/x-handlebars-template">
<div class="ui-content"> <div class="ui-content">
<form class="dialog_form">
<button type="submit" class="ui-btn ui-btn-b ui-btn-inline
ui-icon-action ui-btn-icon-right ui-screen-hidden">Submit</button>
<div data-gadget-url="gadget_erp5_searchfield.html"
data-gadget-scope="erp5_searchfield"
data-gadget-sandbox="public"></div>
</form>
<ul data-role="listview" class="ui-listview" data-enhanced="true"> <ul data-role="listview" class="ui-listview" data-enhanced="true">
<li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li> <li class="ui-first-child"><a href="#" class="ui-btn ui-btn-icon-left ui-icon-home" data-i18n="Home">Home</a></li>
<li><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li> <li><a href="{{module_href}}" class="ui-btn ui-btn-icon-left ui-icon-puzzle-piece" data-i18n="Modules" accesskey="m">Modules</a></li>
......
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>957.39718.21180.26828</string> </value> <value> <string>957.46848.56526.7116</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>1488215553.05</float> <float>1488384141.54</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -29,6 +29,7 @@ ...@@ -29,6 +29,7 @@
////////////////////////////////////////////// //////////////////////////////////////////////
.declareAcquiredMethod("getUrlFor", "getUrlFor") .declareAcquiredMethod("getUrlFor", "getUrlFor")
.declareAcquiredMethod("translateHtml", "translateHtml") .declareAcquiredMethod("translateHtml", "translateHtml")
.declareAcquiredMethod("redirect", "redirect")
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// declared methods // declared methods
...@@ -73,7 +74,8 @@ ...@@ -73,7 +74,8 @@
.onStateChange(function (modification_dict) { .onStateChange(function (modification_dict) {
var context = this, var context = this,
gadget = this, gadget = this,
queue = new RSVP.Queue(); queue = new RSVP.Queue(),
tmp_element;
if (modification_dict.hasOwnProperty("visible")) { if (modification_dict.hasOwnProperty("visible")) {
if (this.state.visible) { if (this.state.visible) {
...@@ -114,7 +116,20 @@ ...@@ -114,7 +116,20 @@
); );
}) })
.push(function (my_translated_or_plain_html) { .push(function (my_translated_or_plain_html) {
context.element.querySelector("div").innerHTML = my_translated_or_plain_html; tmp_element = document.createElement('div');
tmp_element.innerHTML = my_translated_or_plain_html;
return context.declareGadget('gadget_erp5_searchfield.html', {
scope: "erp5_searchfield",
element: tmp_element.querySelector('[data-gadget-scope="erp5_searchfield"]')
});
})
.push(function (search_gadget) {
return search_gadget.render({
focus: false
});
})
.push(function () {
context.element.querySelector("div").appendChild(tmp_element);
return context.listenResize(); return context.listenResize();
}); });
} }
...@@ -223,6 +238,40 @@ ...@@ -223,6 +238,40 @@
event.initEvent('resize', true, true); event.initEvent('resize', true, true);
window.dispatchEvent(event); window.dispatchEvent(event);
return result; return result;
})
.allowPublicAcquisition('notifyChange', function () {
// Typing a search query should not modify the header status
return;
})
.onEvent('submit', function () {
var gadget = this;
return gadget.getDeclaredGadget("erp5_searchfield")
.push(function (search_gadget) {
return search_gadget.getContent();
})
.push(function (data) {
var options = {
page: "search"
};
if (data.search) {
options.extended_search = data.search;
}
// Remove focus from the search field
document.activeElement.blur();
return gadget.redirect({command: 'display', options: options});
}); });
}, false, true)
.onEvent('blur', function (evt) {
// XXX Horrible hack to clear the search when focus is lost
// This does not follow renderJS design, as a gadget should not touch
// another gadget content
if (evt.target.type === 'search') {
evt.target.value = "";
}
}, true, false);
}(window, document, rJS, Handlebars, RSVP, Node, loopEventListener)); }(window, document, rJS, Handlebars, RSVP, Node, loopEventListener));
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>957.41111.56434.58897</string> </value> <value> <string>957.46809.34243.17971</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1488299408.27</float> <float>1488381715.57</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
.declareMethod('render', function (options) { .declareMethod('render', function (options) {
var state_dict = { var state_dict = {
extended_search: options.extended_search || "" extended_search: options.extended_search || "",
focus: options.focus
}; };
return this.changeState(state_dict); return this.changeState(state_dict);
...@@ -20,9 +21,14 @@ ...@@ -20,9 +21,14 @@
return gadget.getDeclaredGadget('input') return gadget.getDeclaredGadget('input')
.push(function (input_gadget) { .push(function (input_gadget) {
var focus = false; var focus = false;
if (!gadget.state.extended_search) { var focus;
if (gadget.state.focus === undefined) {
if (gadget.state.extended_search) {
focus = false;
} else {
focus = true; focus = true;
} }
}
return input_gadget.render({ return input_gadget.render({
type: "search", type: "search",
value: gadget.state.extended_search, value: gadget.state.extended_search,
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>954.17336.1268.55074</string> </value> <value> <string>956.58742.58866.48708</string> </value>
</item> </item>
<item> <item>
<key> <string>state</string> </key> <key> <string>state</string> </key>
...@@ -248,7 +248,7 @@ ...@@ -248,7 +248,7 @@
</tuple> </tuple>
<state> <state>
<tuple> <tuple>
<float>1476194269.08</float> <float>1488381059.63</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -576,6 +576,17 @@ div[data-gadget-scope='panel'] { ...@@ -576,6 +576,17 @@ div[data-gadget-scope='panel'] {
} }
} }
div[data-gadget-scope='erp5_searchfield'] {
padding: @half-margin-size @double-margin-size;
button {
color: @white;
}
input[type="search"] {
color: @white !important;
background-color: @grey !important;
}
}
img { img {
text-align: left; text-align: left;
height: 100%; height: 100%;
......
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