feat(ui): Added collapse and expand icon for all the tabs

Signed-off-by: sameed.ahmad <[email protected]>
eclipse-sw360 · Aug 23, 2023 · 1974005 · 1974005
1 parent 7177fc8
commit 1974005
Show file tree

Hide file tree

Showing 15 changed files with 280 additions and 48 deletions.
diff --git a/...et/src/main/resources/META-INF/resources/html/components/includes/components/summary.jspf b/...et/src/main/resources/META-INF/resources/html/components/includes/components/summary.jspf
@@ -17,9 +17,17 @@
 </core_rt:if>
 
 <table class="table label-value-table" id="componentOverview">
-    <thead data-toggle="collapse" data-target="#componentOverviewBody" aria-expanded="true" aria-controls="componentOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#componentOverviewBody" aria-expanded="true" aria-controls="componentOverviewBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="general" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="general" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="componentOverviewBody" class="collapse show">
@@ -105,9 +113,17 @@
 </table>
 
 <table class="table label-value-table" id="releaseAggregateTable">
-    <thead data-toggle="collapse" data-target="#releaseAggregateTableBody" aria-expanded="true" aria-controls="releaseAggregateTableBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#releaseAggregateTableBody" aria-expanded="true" aria-controls="releaseAggregateTableBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="release.aggregate.data" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="release.aggregate.data" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="releaseAggregateTableBody" class="collapse show">
@@ -137,9 +153,17 @@
 </table>
 
 <table class="table label-value-table" id="componentRolesTable">
-    <thead data-toggle="collapse" data-target="#componentRolesTableBody" aria-expanded="true" aria-controls="componentRolesTableBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#componentRolesTableBody" aria-expanded="true" aria-controls="componentRolesTableBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="roles" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="roles" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="componentRolesTableBody" class="collapse show">
@@ -179,3 +203,15 @@
     </tr>
     </tbody>
 </table>
+
+<%@ include file="/html/utils/includes/requirejs.jspf" %>
+<script>
+
+    require(['jquery', 'modules/expandCollapse'], function($, expandCollapse){
+
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+    });
+
+</script>
diff --git a/.../main/resources/META-INF/resources/html/components/includes/releases/clearingDetails.jspf b/.../main/resources/META-INF/resources/html/components/includes/releases/clearingDetails.jspf
@@ -91,9 +91,17 @@
 <table class="table label-value-table" id="assessmentSummary"
         data-load-assessment-summary-info-url="<%=loadAssessmentSummaryInfoUrl%>"
         data-attachment-content-id="${cliDbid}" data-approved-attachment-content-id="${approvedCliDbid}">
-    <thead data-toggle="collapse" data-target="#assessmentSummaryBody" aria-expanded="true" aria-controls="assessmentSummaryBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#assessmentSummaryBody" aria-expanded="true" aria-controls="assessmentSummaryBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="assessment.summary" /> <liferay-ui:message key="info" />:</th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="assessment.summary" /> <liferay-ui:message key="info" />:
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
 
@@ -146,9 +154,17 @@
 </table>
 
 <table class="table label-value-table" id="ReleaseClearingOverview">
-    <thead data-toggle="collapse" data-target="#ReleaseClearingOverviewBody" aria-expanded="true" aria-controls="ReleaseClearingOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#ReleaseClearingOverviewBody" aria-expanded="true" aria-controls="ReleaseClearingOverviewBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="clearing.details" />: <sw360:ReleaseName release="${release}" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="clearing.details" />: <sw360:ReleaseName release="${release}" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="ReleaseClearingOverviewBody" class="collapse show">
@@ -263,9 +279,17 @@
 </table>
 
 <table class="table label-value-table" id="RequestInfo">
-    <thead data-toggle="collapse" data-target="#RequestInfoBody" aria-expanded="true" aria-controls="RequestInfoBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#RequestInfoBody" aria-expanded="true" aria-controls="RequestInfoBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="request.information" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="request.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="RequestInfoBody" class="collapse show">
@@ -289,9 +313,17 @@
 </table>
 
 <table class="table label-value-table" id="ReleaseSupplementalInfo">
-    <thead data-toggle="collapse" data-target="#ReleaseSupplementalInfoBody" aria-expanded="true" aria-controls="ReleaseSupplementalInfoBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#ReleaseSupplementalInfoBody" aria-expanded="true" aria-controls="ReleaseSupplementalInfoBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="supplemental.information" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="supplemental.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="ReleaseSupplementalInfoBody" class="collapse show">
@@ -310,7 +342,7 @@
 <%--for javascript library loading --%>
 <%@ include file="/html/utils/includes/requirejs.jspf" %>
 <script type="text/javascript">
-    require(['jquery', 'modules/button', 'utils/includes/fossologyClearing', 'modules/dialog'], function ($, button, fossology, dialog) {
+    require(['jquery', 'modules/button', 'utils/includes/fossologyClearing', 'modules/dialog', 'modules/expandCollapse'], function ($, button, fossology, dialog, expandCollapse) {
         var releaseToLicenseDetailsMap = new Map();
         fossology.initialize();
 
@@ -541,6 +573,12 @@
             $parent.append($('<div>', { 'class': styleClass ? styleClass : '' })
                     .append($('<span>', { 'text': message })));
         }
+
+        $(document).ready(function () {
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+        });
     });
 
 </script>
diff --git a/...ain/resources/META-INF/resources/html/components/includes/releases/commercialDetails.jspf b/...ain/resources/META-INF/resources/html/components/includes/releases/commercialDetails.jspf
@@ -9,9 +9,17 @@
 --%>
 <core_rt:set var="cotsDetails" value="${release.cotsDetails}"/>
 <table class="table label-value-table" id="cotsDetailOverview">
-    <thead data-toggle="collapse" data-target="#cotsDetailOverviewBody" aria-expanded="true" aria-controls="cotsDetailOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#cotsDetailOverviewBody" aria-expanded="true" aria-controls="cotsDetailOverviewBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="commercial.details.administration" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="commercial.details.administration" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody  id="cotsDetailOverviewBody" class="collapse show">
@@ -36,9 +44,17 @@
 </table>
 
 <table class="table label-value-table" id="cotsOssInformation">
-    <thead data-toggle="collapse" data-target="#cotsOssInformationBody" aria-expanded="true" aria-controls="cotsOssInformationBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#cotsOssInformationBody" aria-expanded="true" aria-controls="cotsOssInformationBody">
     <tr>
-        <th colspan="2"><liferay-ui:message key="cots.oss.information" /></th>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+                <liferay-ui:message key="cots.oss.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody  id="cotsOssInformationBody" class="collapse show">

diff --git a/...t/src/main/resources/META-INF/resources/html/components/includes/releases/eccDetails.jspf b/...t/src/main/resources/META-INF/resources/html/components/includes/releases/eccDetails.jspf
@@ -11,9 +11,17 @@
 <core_rt:set var="eccInfo" value="${release.eccInformation}"/>
 
 <table class="table label-value-table" id="ECCInfo">
-    <thead data-toggle="collapse" data-target="#ECCInfoBody" aria-expanded="true" aria-controls="ECCInfoBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-    <tr>
-        <th colspan="2"><liferay-ui:message key="ecc.information" /></th>
+    <thead data-toggle="collapse" data-target="#ECCInfoBody" aria-expanded="true" aria-controls="ECCInfoBody">
+    <tr>
+        <th colspan="2">
+            <div class="d-flex justify-content-between">
+               <liferay-ui:message key="ecc.information" />
+                <div>
+                    <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                    <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                </div>
+            </div>
+        </th>
     </tr>
     </thead>
     <tbody id="ECCInfoBody" class="collapse show">

diff --git a/...c/main/resources/META-INF/resources/html/components/includes/releases/summaryRelease.jspf b/...c/main/resources/META-INF/resources/html/components/includes/releases/summaryRelease.jspf
@@ -16,9 +16,17 @@
 
 <core_rt:if test="${release != null}">
     <table class="table label-value-table" id="ReleaseDetailOverview">
-        <thead data-toggle="collapse" data-target="#ReleaseDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
-        <tr>
-            <th colspan="2"><liferay-ui:message key="general" /></th>
+        <thead data-toggle="collapse" data-target="#ReleaseDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody">
+        <tr>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="general" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
         </thead>
         <tbody id="ReleaseDetailOverviewBody" class="collapse show">
@@ -120,9 +128,17 @@
 
     <core_rt:if test="${release.setRepository}">
         <table class="table label-value-table" id="ReleaseRepository">
-            <thead data-toggle="collapse" data-target="#ReleaseRepositoryBody" aria-expanded="true" aria-controls="ReleaseRepositoryBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+            <thead data-toggle="collapse" data-target="#ReleaseRepositoryBody" aria-expanded="true" aria-controls="ReleaseRepositoryBody">
             <tr>
-                <th colspan="2"><liferay-ui:message key="release.repository" /></th>
+                <th colspan="2">
+                    <div class="d-flex justify-content-between">
+                        <liferay-ui:message key="release.repository" />
+                        <div>
+                            <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                            <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                        </div>
+                    </div>
+                </th>
             </tr>
             </thead>
             <tbody id="ReleaseRepositoryBody" class="collapse show">

diff --git a/.../src/main/resources/META-INF/resources/html/components/includes/vendors/vendorDetail.jspf b/.../src/main/resources/META-INF/resources/html/components/includes/vendors/vendorDetail.jspf
@@ -9,9 +9,17 @@
 --%>
 
 <table class="table label-value-table" id="ReleaseDetailVendor">
-    <thead data-toggle="collapse" data-target="#ReleaseDetailVendorBody" aria-expanded="true" aria-controls="ReleaseDetailVendorBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+    <thead data-toggle="collapse" data-target="#ReleaseDetailVendorBody" aria-expanded="true" aria-controls="ReleaseDetailVendorBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="release.vendor" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="release.vendor" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
     </thead>
     <tbody id="ReleaseDetailVendorBody" class="collapse show" >

diff --git a/...end/sw360-portlet/src/main/resources/META-INF/resources/html/packages/summaryPackage.jspf b/...end/sw360-portlet/src/main/resources/META-INF/resources/html/packages/summaryPackage.jspf
@@ -11,9 +11,17 @@
 
 <core_rt:if test="${pkg != null}">
     <table class="table label-value-table" id="PackageDetailOverview">
-        <thead data-toggle="collapse" data-target="#PackageDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody" title="<liferay-ui:message key="click.to.expand.or.collapse"/>">
+        <thead data-toggle="collapse" data-target="#PackageDetailOverviewBody" aria-expanded="true" aria-controls="ReleaseDetailOverviewBody">
         <tr>
-            <th colspan="2"><liferay-ui:message key="summary" /></th>
+            <th colspan="2">
+                <div class="d-flex justify-content-between">
+                    <liferay-ui:message key="summary" />
+                    <div>
+                        <div title="<liferay-ui:message key="click.to.collapse"/>"><clay:icon class="collapse-icon" symbol="caret-top"/></div>
+                        <div title="<liferay-ui:message key="click.to.expand"/>"><clay:icon class="expand-icon" style="display: none;" symbol="caret-bottom"/></div>
+                    </div>
+                </div>
+            </th>
         </tr>
         </thead>
         <tbody id="PackageDetailOverviewBody" class="collapse show">
@@ -96,4 +104,14 @@
 
 <%--for javascript library loading --%>
 <%@ include file="/html/utils/includes/requirejs.jspf" %>
+<script>
+
+    require(['jquery', 'modules/expandCollapse'], function($, expandCollapse){
+
+            $("th").click(function () {
+              expandCollapse.toggleIcon($(this));
+            });
+    });
+
+</script>
 </core_rt:if>