Commit 44dace24 authored by Xiaowu Zhang's avatar Xiaowu Zhang

erp5_web_renderjs_ui: change color of notification message

green for success and orange for fail
parent 77259dea
...@@ -1414,10 +1414,15 @@ div[data-gadget-scope='notification'] button { ...@@ -1414,10 +1414,15 @@ div[data-gadget-scope='notification'] button {
text-align: left; text-align: left;
width: 180pt; width: 180pt;
padding: 12pt; padding: 12pt;
background-color: #FF6600;
color: #f8fff3; color: #f8fff3;
border-radius: 0.325em; border-radius: 0.325em;
} }
div[data-gadget-scope='notification'] button.success {
background-color: #37A419;
}
div[data-gadget-scope='notification'] button.error {
background-color: #FF6600;
}
/********************************************** /**********************************************
* JQM * JQM
**********************************************/ **********************************************/
......
...@@ -242,7 +242,7 @@ ...@@ -242,7 +242,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.52328.26727.8140</string> </value> <value> <string>961.60702.420.63744</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>1504269035.79</float> <float>1504771529.73</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -8,12 +8,21 @@ ...@@ -8,12 +8,21 @@
<!-- renderjs --> <!-- renderjs -->
<script src="rsvp.js" type="text/javascript"></script> <script src="rsvp.js" type="text/javascript"></script>
<script src="renderjs.js" type="text/javascript"></script> <script src="renderjs.js" type="text/javascript"></script>
<script src="handlebars.js" type="text/javascript"></script>
<script id="success-button-template" type="text/x-handlebars-template">
<button type="submit" class='success'>{{message}}</button>
</script>
<script id="error-button-template" type="text/x-handlebars-template">
<button type="submit" class='error'>{{message}}</button>
</script>
<!-- custom script --> <!-- custom script -->
<script src="gadget_erp5_notification.js" type="text/javascript"></script> <script src="gadget_erp5_notification.js" type="text/javascript"></script>
</head> </head>
<body> <body>
<button type="submit"></button>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -234,7 +234,7 @@ ...@@ -234,7 +234,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>956.4305.51031.8243</string> </value> <value> <string>961.59386.3771.60654</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>1482165353.33</float> <float>1504692216.38</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
/*jslint nomen: true, indent: 2, maxerr: 3 */ /*jslint nomen: true, indent: 2, maxerr: 3 */
/*global window, Node, rJS */ /*global window, Node, rJS, Handlebars */
(function (window, Node, rJS) { (function (window, Node, rJS, Handlebars) {
"use strict"; "use strict";
rJS(window) var gadget_klass = rJS(window),
success_button_source = gadget_klass.__template_element
.getElementById("success-button-template")
.innerHTML,
success_button_template = Handlebars.compile(success_button_source),
error_button_source = gadget_klass.__template_element
.getElementById("error-button-template")
.innerHTML,
error_button_template = Handlebars.compile(error_button_source);
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
// declared methods // declared methods
///////////////////////////////////////////////////////////////// /////////////////////////////////////////////////////////////////
.declareMethod('notify', function (message) { gadget_klass
if (typeof message === "string") { .declareMethod('notify', function (options) {
// alertify.log(message); if (options) {
return this.changeState({ return this.changeState({
visible: true, visible: true,
message: message message: options.message,
status: options.status
}); });
} }
return this.changeState({ return this.changeState({
...@@ -40,8 +51,15 @@ ...@@ -40,8 +51,15 @@
} }
if (modification_dict.hasOwnProperty('message')) { if (modification_dict.hasOwnProperty('message')) {
var button = this.element.querySelector('button'); if (this.state.status === 'success') {
button.textContent = this.state.message; this.element.innerHTML = success_button_template({
message: this.state.message
});
} else {
this.element.innerHTML = error_button_template({
message: this.state.message
});
}
} }
}) })
...@@ -53,4 +71,4 @@ ...@@ -53,4 +71,4 @@
} }
}, false, false); }, false, false);
}(window, Node, rJS)); }(window, Node, rJS, Handlebars));
\ No newline at end of file \ No newline at end of file
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>956.5681.7605.23227</string> </value> <value> <string>961.59536.21138.61354</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>1482241180.82</float> <float>1504769866.21</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -262,7 +262,10 @@ ...@@ -262,7 +262,10 @@
message = JSON.parse(responseText).portal_status_message; message = JSON.parse(responseText).portal_status_message;
} catch (ignore) { } catch (ignore) {
} }
list.push(form_gadget.notifySubmitted(message)); list.push(form_gadget.notifySubmitted({
"message": message,
"status": "success"
}));
if (redirect_to_parent) { if (redirect_to_parent) {
list.push(form_gadget.redirect({command: 'history_previous'})); list.push(form_gadget.redirect({command: 'history_previous'}));
...@@ -312,7 +315,10 @@ ...@@ -312,7 +315,10 @@
return form_gadget.translate(error_text); return form_gadget.translate(error_text);
}) })
.push(function (message) { .push(function (message) {
return form_gadget.notifyChange(message + '.'); return form_gadget.notifyChange({
"message": message + '.',
"status": "error"
});
}); });
// if server validation of form data failed (indicated by response code 400) // if server validation of form data failed (indicated by response code 400)
// we parse out field errors and display them to the user // we parse out field errors and display them to the user
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.16461.13159.33399</string> </value> <value> <string>961.59533.60499.59221</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>1502116641.07</float> <float>1504701037.67</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -165,7 +165,10 @@ ...@@ -165,7 +165,10 @@
message = JSON.parse(event.target.result).portal_status_message; message = JSON.parse(event.target.result).portal_status_message;
} catch (ignore) { } catch (ignore) {
} }
return form_gadget.notifySubmitted(message); return form_gadget.notifySubmitted({
"message": message,
"status": "success"
});
}) })
.push(function () { .push(function () {
return form_gadget.redirect({command: 'reload'}); return form_gadget.redirect({command: 'reload'});
...@@ -189,7 +192,10 @@ ...@@ -189,7 +192,10 @@
return form_gadget.translate(error_text); return form_gadget.translate(error_text);
}) })
.push(function (message) { .push(function (message) {
return form_gadget.notifyChange(message + '.'); return form_gadget.notifyChange({
'message': message + '.',
'status': 'error'
});
}); });
// if server validation of form data failed (indicated by response code 400) // if server validation of form data failed (indicated by response code 400)
......
...@@ -230,7 +230,7 @@ ...@@ -230,7 +230,7 @@
</item> </item>
<item> <item>
<key> <string>serial</string> </key> <key> <string>serial</string> </key>
<value> <string>961.58176.38662.18807</string> </value> <value> <string>961.59393.42745.39918</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>1504706147.57</float> <float>1504701066.63</float>
<string>UTC</string> <string>UTC</string>
</tuple> </tuple>
</state> </state>
......
...@@ -8,6 +8,7 @@ ...@@ -8,6 +8,7 @@
@txtgreen: #22CC22; @txtgreen: #22CC22;
@txtsubgrey: #575757; @txtsubgrey: #575757;
@grey: #777777; @grey: #777777;
@backgroundgreen: #37A419;
// Default background for pages and other controls // Default background for pages and other controls
...@@ -1634,9 +1635,14 @@ div[data-gadget-scope='notification'] { ...@@ -1634,9 +1635,14 @@ div[data-gadget-scope='notification'] {
text-align: left; text-align: left;
width: @panelwidth; width: @panelwidth;
padding: @double-margin-size; padding: @double-margin-size;
background-color: @coloraccent;
color: @colorsubheaderlink; color: @colorsubheaderlink;
border-radius: @border-radius; border-radius: @border-radius;
&.success {
background-color: @backgroundgreen;
}
&.error {
background-color: @coloraccent;
}
} }
} }
......
<?xml version="1.0"?>
<ZopeData>
<record id="1" aka="AAAAAAAAAAE=">
<pickle>
<global name="ZopePageTemplate" module="Products.PageTemplates.ZopePageTemplate"/>
</pickle>
<pickle>
<dictionary>
<item>
<key> <string>_bind_names</string> </key>
<value>
<object>
<klass>
<global name="NameAssignments" module="Shared.DC.Scripts.Bindings"/>
</klass>
<tuple/>
<state>
<dictionary>
<item>
<key> <string>_asgns</string> </key>
<value>
<dictionary>
<item>
<key> <string>name_subpath</string> </key>
<value> <string>traverse_subpath</string> </value>
</item>
</dictionary>
</value>
</item>
</dictionary>
</state>
</object>
</value>
</item>
<item>
<key> <string>content_type</string> </key>
<value> <string>text/html</string> </value>
</item>
<item>
<key> <string>expand</string> </key>
<value> <int>0</int> </value>
</item>
<item>
<key> <string>id</string> </key>
<value> <string>testActionFail</string> </value>
</item>
<item>
<key> <string>output_encoding</string> </key>
<value> <string>utf-8</string> </value>
</item>
<item>
<key> <string>title</string> </key>
<value> <unicode></unicode> </value>
</item>
</dictionary>
</pickle>
</record>
</ZopeData>
<html xmlns:tal="http://xml.zope.org/namespaces/tal"
xmlns:metal="http://xml.zope.org/namespaces/metal">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Test Form View Editable Save Action</title>
</head>
<body>
<table cellpadding="1" cellspacing="1" border="1">
<thead>
<tr><td rowspan="1" colspan="3">Test Default Module View</td></tr>
</thead><tbody>
<tal:block metal:use-macro="here/PTZuite_CommonTemplate/macros/init" />
<tr>
<td>open</td>
<td>${base_url}/web_site_module/renderjs_runner/#/foo_module/1?editable=true</td>
<td></td>
</tr>
<!-- Wait for gadget to be loaded -->
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-url='${base_url}/web_site_module/renderjs_runner/gadget_erp5_pt_form_view_editable.html']</td>
<td></td>
</tr>
<tr>
<td>waitForTextPresent</td>
<td>Actions</td>
<td></td>
</tr>
<!-- Go to the new content dialog -->
<tr>
<td>click</td>
<td>//div[@data-gadget-scope='header']//a[text()='Actions' and contains(@href, '#!change')]</td>
<td></td>
</tr>
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-url='${base_url}/web_site_module/renderjs_runner/gadget_erp5_page_action.html']</td>
<td></td>
</tr>
<!-- Header has a save button -->
<tr>
<td>waitForElementPresent</td>
<td>//a[text()='Do Nothing Action' and contains(@href, '#!change')]</td>
<td></td>
</tr>
<tr>
<td>click</td>
<td>//a[text()='Do Nothing Action' and contains(@href, '#!change')]</td>
<td></td>
</tr>
<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_dialog" />
<tr>
<td>waitForElementPresent</td>
<td>//div[@data-gadget-scope='notification']//button[@class='error']</td>
<td></td>
</tr>
</tbody></table>
</body>
</html>
\ No newline at end of file
...@@ -79,6 +79,11 @@ ...@@ -79,6 +79,11 @@
<td></td> <td></td>
</tr> </tr>
<tr>
<td>verifyElementPresent</td>
<td>//div[@data-gadget-scope='notification']//button[@class='error']</td>
<td></td>
</tr>
</tbody></table> </tbody></table>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -76,6 +76,12 @@ ...@@ -76,6 +76,12 @@
<td></td> <td></td>
</tr> </tr>
<tr>
<td>verifyElementPresent</td>
<td>//div[@data-gadget-scope='notification']//button[@class='success']</td>
<td></td>
</tr>
</tbody></table> </tbody></table>
</body> </body>
</html> </html>
\ No newline at end of file
...@@ -66,6 +66,12 @@ ...@@ -66,6 +66,12 @@
<td></td> <td></td>
</tr> </tr>
<tr>
<td>verifyElementPresent</td>
<td>//div[@data-gadget-scope='notification']//button[@class='success']</td>
<td></td>
</tr>
</tbody></table> </tbody></table>
</body> </body>
</html> </html>
\ No newline at end of file
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