From 44dace245d5c4b3f2b430e5c7a5356c2128020ff Mon Sep 17 00:00:00 2001 From: Xiaowu Zhang <xiaowu.zhang@nexedi.com> Date: Wed, 6 Sep 2017 14:03:41 +0000 Subject: [PATCH] erp5_web_renderjs_ui: change color of notification message green for success and orange for fail --- .../rjs_gadget_erp5_nojqm_css.css | 7 +- .../rjs_gadget_erp5_nojqm_css.xml | 4 +- .../rjs_gadget_erp5_notification_html.html | 11 +++- .../rjs_gadget_erp5_notification_html.xml | 4 +- .../rjs_gadget_erp5_notification_js.js | 38 ++++++++--- .../rjs_gadget_erp5_notification_js.xml | 4 +- .../rjs_gadget_erp5_pt_form_dialog_js.js | 10 ++- .../rjs_gadget_erp5_pt_form_dialog_js.xml | 4 +- ...js_gadget_erp5_pt_form_view_editable_js.js | 10 ++- ...s_gadget_erp5_pt_form_view_editable_js.xml | 4 +- .../erp5_web_renderjs_ui/erp5css.less.txt | 8 ++- .../testActionFail.xml | 58 ++++++++++++++++ .../testActionFail.zpt | 66 +++++++++++++++++++ .../testFormViewEditableSaveFail.zpt | 5 ++ .../testFormViewEditableSaveSuccess.zpt | 6 ++ .../testWorkflowTransitionPass.zpt | 6 ++ 16 files changed, 218 insertions(+), 27 deletions(-) create mode 100644 bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.xml create mode 100644 bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.zpt diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css index 3338fe1b12..92d2e38542 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css @@ -1414,10 +1414,15 @@ div[data-gadget-scope='notification'] button { text-align: left; width: 180pt; padding: 12pt; - background-color: #FF6600; color: #f8fff3; 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 **********************************************/ diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml index e731e84bfe..5db3a60db9 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.xml @@ -242,7 +242,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>961.52328.26727.8140</string> </value> + <value> <string>961.60702.420.63744</string> </value> </item> <item> <key> <string>state</string> </key> @@ -260,7 +260,7 @@ </tuple> <state> <tuple> - <float>1504269035.79</float> + <float>1504771529.73</float> <string>UTC</string> </tuple> </state> diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.html b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.html index d939ddb91e..f6e394eea1 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.html +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.html @@ -8,12 +8,21 @@ <!-- renderjs --> <script src="rsvp.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 --> <script src="gadget_erp5_notification.js" type="text/javascript"></script> </head> <body> - <button type="submit"></button> </body> </html> \ No newline at end of file diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.xml index d74aa9ccad..089b13f6e7 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_html.xml @@ -234,7 +234,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>956.4305.51031.8243</string> </value> + <value> <string>961.59386.3771.60654</string> </value> </item> <item> <key> <string>state</string> </key> @@ -252,7 +252,7 @@ </tuple> <state> <tuple> - <float>1482165353.33</float> + <float>1504692216.38</float> <string>UTC</string> </tuple> </state> diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.js index 05259cc0ed..4040cb6a39 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.js +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.js @@ -1,18 +1,29 @@ /*jslint nomen: true, indent: 2, maxerr: 3 */ -/*global window, Node, rJS */ -(function (window, Node, rJS) { +/*global window, Node, rJS, Handlebars */ +(function (window, Node, rJS, Handlebars) { "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 ///////////////////////////////////////////////////////////////// - .declareMethod('notify', function (message) { - if (typeof message === "string") { - // alertify.log(message); + gadget_klass + .declareMethod('notify', function (options) { + if (options) { return this.changeState({ visible: true, - message: message + message: options.message, + status: options.status }); } return this.changeState({ @@ -40,8 +51,15 @@ } if (modification_dict.hasOwnProperty('message')) { - var button = this.element.querySelector('button'); - button.textContent = this.state.message; + if (this.state.status === 'success') { + 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 @@ } }, false, false); -}(window, Node, rJS)); \ No newline at end of file +}(window, Node, rJS, Handlebars)); \ No newline at end of file diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.xml index bcf8ae139e..0dec608dc2 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_notification_js.xml @@ -230,7 +230,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>956.5681.7605.23227</string> </value> + <value> <string>961.59536.21138.61354</string> </value> </item> <item> <key> <string>state</string> </key> @@ -248,7 +248,7 @@ </tuple> <state> <tuple> - <float>1482241180.82</float> + <float>1504769866.21</float> <string>UTC</string> </tuple> </state> diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js index 39e9215139..e6f1bd56d5 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.js @@ -262,7 +262,10 @@ message = JSON.parse(responseText).portal_status_message; } catch (ignore) { } - list.push(form_gadget.notifySubmitted(message)); + list.push(form_gadget.notifySubmitted({ + "message": message, + "status": "success" + })); if (redirect_to_parent) { list.push(form_gadget.redirect({command: 'history_previous'})); @@ -312,7 +315,10 @@ return form_gadget.translate(error_text); }) .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) // we parse out field errors and display them to the user diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml index a89afde3f6..45f850ed9d 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_dialog_js.xml @@ -230,7 +230,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>961.16461.13159.33399</string> </value> + <value> <string>961.59533.60499.59221</string> </value> </item> <item> <key> <string>state</string> </key> @@ -248,7 +248,7 @@ </tuple> <state> <tuple> - <float>1502116641.07</float> + <float>1504701037.67</float> <string>UTC</string> </tuple> </state> diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js index 6bc2f7bea5..a88cb0ae9d 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.js @@ -165,7 +165,10 @@ message = JSON.parse(event.target.result).portal_status_message; } catch (ignore) { } - return form_gadget.notifySubmitted(message); + return form_gadget.notifySubmitted({ + "message": message, + "status": "success" + }); }) .push(function () { return form_gadget.redirect({command: 'reload'}); @@ -189,7 +192,10 @@ return form_gadget.translate(error_text); }) .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) diff --git a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml index 28cb378d88..af38b741a4 100644 --- a/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml +++ b/bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_pt_form_view_editable_js.xml @@ -230,7 +230,7 @@ </item> <item> <key> <string>serial</string> </key> - <value> <string>961.58176.38662.18807</string> </value> + <value> <string>961.59393.42745.39918</string> </value> </item> <item> <key> <string>state</string> </key> @@ -248,7 +248,7 @@ </tuple> <state> <tuple> - <float>1504706147.57</float> + <float>1504701066.63</float> <string>UTC</string> </tuple> </state> diff --git a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt index ebb4309488..bab09be721 100644 --- a/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt +++ b/bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt @@ -8,6 +8,7 @@ @txtgreen: #22CC22; @txtsubgrey: #575757; @grey: #777777; +@backgroundgreen: #37A419; // Default background for pages and other controls @@ -1634,9 +1635,14 @@ div[data-gadget-scope='notification'] { text-align: left; width: @panelwidth; padding: @double-margin-size; - background-color: @coloraccent; color: @colorsubheaderlink; border-radius: @border-radius; + &.success { + background-color: @backgroundgreen; + } + &.error { + background-color: @coloraccent; + } } } diff --git a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.xml b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.xml new file mode 100644 index 0000000000..c850ce928c --- /dev/null +++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.xml @@ -0,0 +1,58 @@ +<?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> diff --git a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.zpt b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.zpt new file mode 100644 index 0000000000..869534a3f1 --- /dev/null +++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testActionFail.zpt @@ -0,0 +1,66 @@ +<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 diff --git a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveFail.zpt b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveFail.zpt index c4737734be..6fce1dbb5c 100644 --- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveFail.zpt +++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveFail.zpt @@ -79,6 +79,11 @@ <td></td> </tr> +<tr> + <td>verifyElementPresent</td> + <td>//div[@data-gadget-scope='notification']//button[@class='error']</td> + <td></td> +</tr> </tbody></table> </body> </html> \ No newline at end of file diff --git a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveSuccess.zpt b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveSuccess.zpt index d043edab54..938b9bf678 100644 --- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveSuccess.zpt +++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testFormViewEditableSaveSuccess.zpt @@ -76,6 +76,12 @@ <td></td> </tr> +<tr> + <td>verifyElementPresent</td> + <td>//div[@data-gadget-scope='notification']//button[@class='success']</td> + <td></td> +</tr> + </tbody></table> </body> </html> \ No newline at end of file diff --git a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testWorkflowTransitionPass.zpt b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testWorkflowTransitionPass.zpt index 8aa9c563a4..74571ae3e5 100644 --- a/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testWorkflowTransitionPass.zpt +++ b/bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_notification_zuite/testWorkflowTransitionPass.zpt @@ -66,6 +66,12 @@ <td></td> </tr> +<tr> + <td>verifyElementPresent</td> + <td>//div[@data-gadget-scope='notification']//button[@class='success']</td> + <td></td> +</tr> + </tbody></table> </body> </html> \ No newline at end of file -- 2.30.9