erp5_web_renderjs_ui: highlight the current view

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_nojqm_css.css

@@ -524,7 +524,8 @@ div[data-gadget-scope='panel'] ul li a {
   white-space: nowrap;
 }
 div[data-gadget-scope='panel'] ul li a:hover,
-div[data-gadget-scope='panel'] ul li a:active {
+div[data-gadget-scope='panel'] ul li a:active,
+div[data-gadget-scope='panel'] ul li a.active {
   background-color: #2b2b2b;
 }
 div[data-gadget-scope='panel'] ul li a::before {
@@ -561,7 +562,8 @@ div[data-gadget-scope='panel'] dl dd a {
   padding-left: 36pt;
 }
 div[data-gadget-scope='panel'] dl dd a:hover,
-div[data-gadget-scope='panel'] dl dd a:active {
+div[data-gadget-scope='panel'] dl dd a:active,
+div[data-gadget-scope='panel'] dl dd a.active {
   background-color: #2b2b2b;
 }
 div[data-gadget-scope='panel'] dl dd a::before {

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>964.15703.62439.17117</string> </value>
+                <value> <string>964.39807.38275.63129</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -260,7 +260,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1513850228.39</float>
+                        <float>1515141640.51</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_form_js.js

@@ -189,7 +189,8 @@
             /*jslint regexp: false*/
             return gadget.updatePanel({
               erp5_document: erp5_document,
-              editable: gadget.state.options.editable
+              editable: gadget.state.options.editable,
+              view: options.view
             });
           }
         });

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_page_form_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>962.55953.16877.49032</string> </value>
+                <value> <string>963.49235.21851.43451</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1508331971.69</float>
+                        <float>1515078479.71</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.html

@@ -60,13 +60,13 @@
         <dt class="ui-content-title ui-body-c ui-btn ui-btn-icon-left ui-icon-eye" data-i18n="Views">Views</dt>
         {{#each view_list}}
         <dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
-          <a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
+          <a data-i18n="{{title}}" class="ui-body-inherit {{class_name}}" href="{{href}}">{{title}}</a>
         </dd>
         {{/each}}
         <dt class="ui-content-title ui-body-c  ui-btn ui-btn-icon-left ui-icon-cogs" data-i18n="Decisions">Decisions</dt>
         {{#each workflow_list}}
         <dd data-role="listview" data-theme="c" data-inset="true" class="document-listview">
-          <a data-i18n="{{title}}" class="ui-body-inherit" href="{{href}}">{{title}}</a>
+          <a data-i18n="{{title}}" class="ui-body-inherit {{class_name}}" href="{{href}}">{{title}}</a>
         </dd>
         {{/each}}
     </script>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_html.xml

@@ -234,7 +234,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>958.33121.48203.5614</string> </value>
+                <value> <string>964.38775.35841.14779</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -252,7 +252,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1491822419.47</float>
+                        <float>1515079552.11</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_js.js

@@ -54,6 +54,8 @@
       var erp5_document = options.erp5_document,
         workflow_list,
         view_list,
+        view = options.view,
+        i,
         context = this;
       if (erp5_document !== undefined) {
         workflow_list = erp5_document._links.action_workflow || [];
@@ -64,6 +66,18 @@
         if (view_list.constructor !== Array) {
           view_list = [view_list];
         }
+        if (view === 'view') {
+          for (i = 0; i < view_list.length; i += 1) {
+            view_list[i].class_name = view_list[i].name === view ? 'active' : '';
+          }
+        } else {
+          for (i = 0; i < workflow_list.length; i += 1) {
+            workflow_list[i].class_name = workflow_list[i].href === view ? 'active' : '';
+          }
+          for (i = 0; i < view_list.length; i += 1) {
+            view_list[i].class_name = view_list[i].href === view ? 'active' : '';
+          }
+        }
         // Prevent has much as possible to modify the DOM panel
         // stateChange prefer to compare strings
         workflow_list = JSON.stringify(workflow_list);
@@ -243,12 +257,14 @@
               for (i = 0; i < workflow_list.length; i += 1) {
                 result_workflow_list.push({
                   title: workflow_list[i].title,
+                  class_name: workflow_list[i].class_name,
                   href: result_list[i]
                 });
               }
               for (i = 0; i < view_list.length; i += 1) {
                 result_view_list.push({
                   title: view_list[i].title,
+                  class_name: view_list[i].class_name,
                   href: result_list[i + workflow_list.length]
                 });
               }

bt5/erp5_web_renderjs_ui/PathTemplateItem/web_page_module/rjs_gadget_erp5_panel_js.xml

@@ -230,7 +230,7 @@
             </item>
             <item>
                 <key> <string>serial</string> </key>
-                <value> <string>961.1708.1551.12032</string> </value>
+                <value> <string>964.39835.8408.1945</string> </value>
             </item>
             <item>
                 <key> <string>state</string> </key>
@@ -248,7 +248,7 @@
                     </tuple>
                     <state>
                       <tuple>
-                        <float>1501231473.84</float>
+                        <float>1515142977.99</float>
                         <string>UTC</string>
                       </tuple>
                     </state>

bt5/erp5_web_renderjs_ui/SkinTemplateItem/portal_skins/erp5_web_renderjs_ui/erp5css.less.txt

@@ -640,7 +640,7 @@ div[data-gadget-scope='panel'] {
   .linkpanel() {
     color: @white;
     display: block;
-    &:hover, &:active {
+    &:hover, &:active, &.active {
       background-color: darken(@panelbackgroundcolor, 10%);
     }
   }

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/testPanelHighlightCurrentView.xml

+<?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>testPanelHighlightCurrentView</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>

bt5/erp5_web_renderjs_ui_test/PathTemplateItem/portal_tests/renderjs_ui_zuite/testPanelHighlightCurrentView.zpt

+<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 RenderJS UI</title>
+</head>
+<body>
+<table cellpadding="1" cellspacing="1" border="1">
+<thead>
+<tr><td rowspan="1" colspan="3">Test RenderJS UI</td></tr>
+</thead><tbody>
+<tal:block metal:use-macro="here/Zuite_CommonTemplate/macros/init" />
+
+<!-- Initialize -->
+<tr>
+  <td>open</td>
+  <td>${base_url}/web_site_module/renderjs_runner/#/foo_module</td>
+  <td></td>
+</tr>
+
+<!-- hack to display Views&Decisions on panel for small screen-->
+<tr>
+  <td>getEval</td>
+  <td>window.matchMedia = function () {return {matches:true}}</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Add']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>click</td>
+  <td>link=Add</td>
+  <td></td>
+</tr>
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/submit_dialog" />
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//button[@data-i18n='Save']</td>
+  <td></td>
+</tr>
+
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='panel']//a[@data-i18n='View'][contains(@class, 'active')]</td>
+  <td></td>
+</tr>
+
+<tal:block metal:use-macro="here/Zuite_CommonTemplateForRenderjsUi/macros/go_to_foo_relation_field_view" />
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//div[@data-gadget-scope='panel']//a[@data-i18n='View'][contains(@class, 'active')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementPresent</td>
+  <td>//div[@data-gadget-scope='panel']//a[@data-i18n='Relation Fields'][contains(@class, 'active')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='header']//a[@data-i18n='Actions']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//div[@data-gadget-scope='header']//a[@data-i18n='Actions']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementNotPresent</td>
+  <td>//div[@data-gadget-scope='header']//a[@data-i18n='Actions']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//a[@data-i18n='Custom Dialog Action']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>click</td>
+  <td>//a[@data-i18n='Custom Dialog Action']</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>waitForElementPresent</td>
+  <td>//div[@data-gadget-scope='panel']//a[@data-i18n='Custom Dialog Action'][contains(@class, 'active')]</td>
+  <td></td>
+</tr>
+
+<tr>
+  <td>verifyElementNotPresent</td>
+  <td>//div[@data-gadget-scope='panel']//a[@data-i18n='Relation Fields'][contains(@class, 'active')]</td>
+  <td></td>
+</tr>
+
+</tbody></table>
+</body>
+</html>
\ No newline at end of file