Merge pull request #268 from eclipse/maierthomas/#112/fix-styling-pro…

…ject-links fix(ui): Fix table styling for components and projects tested-by:adrian.vaidos@siemens.com review-by:alex.borodin@evosoft.com
eclipse-sw360 · May 18, 2018 · fa916e9 · fa916e9
2 parents 85208a6 + 1b7aa8a
commit fa916e9
Show file tree

Hide file tree

Showing 6 changed files with 76 additions and 57 deletions.
diff --git a/frontend/sw360-portlet/src/main/webapp/html/projects/ajax/linkedProjectsAjax.jsp b/frontend/sw360-portlet/src/main/webapp/html/projects/ajax/linkedProjectsAjax.jsp
@@ -12,7 +12,6 @@
 <%@ page import="com.liferay.portlet.PortletURLFactoryUtil" %>
 <%@include file="/html/init.jsp" %>
 
-
 <%@ taglib prefix="sw360" uri="/WEB-INF/customTags.tld" %>
 
 <portlet:defineObjects/>
@@ -23,36 +22,27 @@
 <%@ page import="org.eclipse.sw360.datahandler.thrift.projects.ProjectRelationship" %>
 <jsp:useBean id="projectList" type="java.util.List<org.eclipse.sw360.datahandler.thrift.projects.ProjectLink>"  scope="request"/>
 
-
 <core_rt:forEach items="${projectList}" var="projectLink" varStatus="loop">
     <core_rt:set var="uuid" value="${projectLink.id}"/>
     <tr id="projectLinkRow${uuid}" >
         <td width="32%">
             <input type="hidden" value="${projectLink.id}" name="<portlet:namespace/><%=Project._Fields.LINKED_PROJECTS%><%=ProjectLink._Fields.ID%>">
-            <label class="textlabel stackedLabel" for="projectName">Project name</label>
-            <input id="projectName" type="text" class="toplabelledInput" placeholder="Enter project"
+            <input id="projectName" type="text" placeholder="Enter project"
                    value="<sw360:out value="${projectLink.name}"/>" readonly onclick="window.location='<sw360:DisplayProjectLink projectId="${projectLink.id}" bare="true"/>'"/>
         </td>
         <td width="32%">
             <input type="hidden" value="${projectLink.version}" name="<portlet:namespace/><%=ProjectLink._Fields.VERSION%>">
-            <label class="textlabel stackedLabel" for="projectVersion">Project version</label>
-            <input id="projectVersion" type="text" class="toplabelledInput" placeholder="No project version"
+            <input id="projectVersion" type="text" placeholder="No project version"
                    value="<sw360:out value="${projectLink.version}"/>" readonly/>
         </td>
         <td width="32%">
-            <label class="textlabel stackedLabel" for="projectRelation">Project relation</label>
-            <select class="toplabelledInput" id="projectRelation"
-                    name="<portlet:namespace/><%=Project._Fields.LINKED_PROJECTS%><%=ProjectLink._Fields.RELATION%>"
-                    style="min-width: 162px; min-height: 28px;">
-
+            <select id="projectRelation" name="<portlet:namespace/><%=Project._Fields.LINKED_PROJECTS%><%=ProjectLink._Fields.RELATION%>"
+                    style="min-height: 28px;">
                 <sw360:DisplayEnumOptions type="<%=ProjectRelationship.class%>" selected="${projectLink.relation}"/>
             </select>
-            <sw360:DisplayEnumInfo type="<%=ProjectRelationship.class%>"/>
         </td>
-
         <td class="deletor">
             <img src="<%=request.getContextPath()%>/images/Trash.png" onclick="deleteProjectLink('projectLinkRow${uuid}')" alt="Delete">
         </td>
-
     </tr>
 </core_rt:forEach>
diff --git a/frontend/sw360-portlet/src/main/webapp/html/projects/includes/linkedProjectsEdit.jspf b/frontend/sw360-portlet/src/main/webapp/html/projects/includes/linkedProjectsEdit.jspf
@@ -9,11 +9,25 @@
   ~ http://www.eclipse.org/legal/epl-v10.html
 --%>
 
+<%@ page import="org.eclipse.sw360.datahandler.thrift.projects.ProjectRelationship" %>
+
 <table class="table info_table" id="LinkedProjectsInfo">
+       <colgroup>
+           <col style="width: 33.33333%;" />
+           <col style="width: 33.33333%;" />
+           <col style="width: 33.33333%;" />
+           <col style="width: 45px;" /> <!-- width of one action (25) with padding of 10 for the column-->
+       </colgroup>
     <thead>
-    <tr>
-        <th colspan="4" class="headlabel">Linked Projects</th>
-    </tr>
+        <tr>
+            <th class="headLabel" colspan="4">Linked Projects</th>
+        </tr>
+        <tr>
+            <th class="headlabel" rowspan="2">Project Name</th>
+            <th class="headlabel" rowspan="2">Project Version</th>
+            <th class="headlabel" rowspan="2">Project Relation <sw360:DisplayEnumInfo type="<%=ProjectRelationship.class%>"/></th>
+            <th class="headlabel" rowspan="2"></th>
+        </tr>
     </thead>
     <tbody>
         <jsp:include page="/html/projects/ajax/linkedProjectsAjax.jsp" />

diff --git a/frontend/sw360-portlet/src/main/webapp/html/utils/ajax/linkedReleasesAjax.jsp b/frontend/sw360-portlet/src/main/webapp/html/utils/ajax/linkedReleasesAjax.jsp
@@ -12,7 +12,6 @@
 <%@ page import="com.liferay.portlet.PortletURLFactoryUtil" %>
 <%@include file="/html/init.jsp" %>
 
-
 <portlet:defineObjects/>
 <liferay-theme:defineObjects/>
 
@@ -27,45 +26,34 @@
     <core_rt:set var="uuid" value="${releaseLink.id}"/>
     <tr id="releaseLinkRow${uuid}" >
         <td>
-            <label class="textlabel stackedLabel" for="releaseVendor">Vendor name</label>
-            <input id="releaseVendor" type="text" class="toplabelledInput" placeholder="No vendor"
+            <input id="releaseVendor" type="text" placeholder="No vendor"
                    value="<sw360:out value="${releaseLink.vendor}"/>" readonly/>
         </td>
         <td>
             <input type="hidden" value="${releaseLink.id}" name="<portlet:namespace/><%=Project._Fields.RELEASE_ID_TO_USAGE%><%=ReleaseLink._Fields.ID%>">
-            <label class="textlabel stackedLabel" for="releaseName">Release name</label>
-            <input id="releaseName" type="text" class="toplabelledInput" placeholder="Enter release"
+            <input id="releaseName" type="text" placeholder="Enter release"
                    value="<sw360:out value="${releaseLink.name}"/>" readonly/>
         </td>
         <td>
-            <label class="textlabel stackedLabel" for="releaseVersion">Release version</label>
-            <input id="releaseVersion" type="text" class="toplabelledInput" placeholder="Enter version"
+            <input id="releaseVersion" type="text" placeholder="Enter version"
                    value="<sw360:out value="${releaseLink.version}"/>" readonly/>
         </td>
         <td>
-            <label class="textlabel stackedLabel" for="releaseRelation">Release relation</label>
-            <select class="toplabelledInput" id="releaseRelation"
+            <select  id="releaseRelation"
                     name="<portlet:namespace/><%=Project._Fields.RELEASE_ID_TO_USAGE%><%=ProjectReleaseRelationship._Fields.RELEASE_RELATION%>"
                     style="min-height: 28px;">
-
                 <sw360:DisplayEnumOptions type="<%=ReleaseRelationship.class%>" selected="${releaseLink.releaseRelationship}"/>
             </select>
-            <sw360:DisplayEnumInfo type="<%=ReleaseRelationship.class%>"/>
         </td>
         <td>
-            <label class="textlabel stackedLabel" for="mainlineState">Project Mainline state</label>
-            <select class="toplabelledInput" id="mainlineState"
+            <select class= id="mainlineState"
                     name="<portlet:namespace/><%=Project._Fields.RELEASE_ID_TO_USAGE%><%=ProjectReleaseRelationship._Fields.MAINLINE_STATE%>"
                     style="min-height: 28px;">
-
                 <sw360:DisplayEnumOptions type="<%=MainlineState.class%>" selected="${releaseLink.mainlineState}"/>
             </select>
-            <sw360:DisplayEnumInfo type="<%=MainlineState.class%>"/>
         </td>
-
         <td class="deletor">
             <img src="<%=request.getContextPath()%>/images/Trash.png" onclick="deleteReleaseLink('releaseLinkRow${uuid}','<sw360:out value='${releaseLink.longName}' jsQuoting="true"/>')" alt="Delete">
         </td>
-
     </tr>
 </core_rt:forEach>
diff --git a/frontend/sw360-portlet/src/main/webapp/html/utils/ajax/linkedReleasesRelationAjax.jsp b/frontend/sw360-portlet/src/main/webapp/html/utils/ajax/linkedReleasesRelationAjax.jsp
@@ -22,36 +22,28 @@
 <core_rt:forEach items="${releaseList}" var="releaseLink" varStatus="loop">
     <core_rt:set var="uuid" value="${releaseLink.id}"/>
     <tr id="releaseLinkRow${uuid}" >
-        <td width="23%">
-            <label class="textlabel stackedLabel" for="releaseVendor">Vendor name</label>
-            <input id="releaseVendor" type="text" class="toplabelledInput" placeholder="Enter vendor"
+        <td>
+            <input id="releaseVendor" type="text" placeholder="Enter vendor"
                    value="<sw360:out value="${releaseLink.vendor}"/>" readonly/>
         </td>
-        <td width="23%">
+        <td>
             <input type="hidden" value="${releaseLink.id}" name="<portlet:namespace/><%=Release._Fields.RELEASE_ID_TO_RELATIONSHIP%><%=ReleaseLink._Fields.ID%>">
-            <label class="textlabel stackedLabel" for="releaseName">Release name</label>
-            <input id="releaseName" type="text" class="toplabelledInput" placeholder="Enter release"
+            <input id="releaseName" type="text" placeholder="Enter release"
                    value="<sw360:out value="${releaseLink.name}"/>" readonly/>
         </td>
-
-        <td width="23%">
-            <label class="textlabel stackedLabel" for="releaseVersion">Release version</label>
-            <input id="releaseVersion" type="text" class="toplabelledInput" placeholder="Enter version"
+        <td>
+            <input id="releaseVersion" type="text" placeholder="Enter version"
                    value="<sw360:out value="${releaseLink.version}"/>" readonly/>
         </td>
-        <td width="23%">
-            <label class="textlabel stackedLabel mandatory" for="releaseRelation">Release relation</label>
-            <select class="toplabelledInput" id="releaseRelation"
+        <td>
+            <select id="releaseRelation"
                     name="<portlet:namespace/><%=Release._Fields.RELEASE_ID_TO_RELATIONSHIP%><%=ReleaseLink._Fields.RELEASE_RELATIONSHIP%>"
-                    style="min-width: 162px; min-height: 28px;">
-
+                    style="min-height: 28px;">
                 <sw360:DisplayEnumOptions type="<%=ReleaseRelationship.class%>" selected="${releaseLink.releaseRelationship}"/>
             </select>
-            <sw360:DisplayEnumInfo type="<%=ReleaseRelationship.class%>"/>
         </td>
         <td class="deletor">
             <img src="<%=request.getContextPath()%>/images/Trash.png" onclick="deleteReleaseLink('releaseLinkRow${uuid}')" alt="Delete">
         </td>
-
     </tr>
 </core_rt:forEach>
diff --git a/frontend/sw360-portlet/src/main/webapp/html/utils/includes/editLinkedReleases.jspf b/frontend/sw360-portlet/src/main/webapp/html/utils/includes/editLinkedReleases.jspf
@@ -9,11 +9,27 @@
   ~ http://www.eclipse.org/legal/epl-v10.html
 --%>
 
+<%@ page import="org.eclipse.sw360.datahandler.thrift.ReleaseRelationship" %>
+
 <table class="table info_table" id="LinkedReleasesInfo">
+       <colgroup>
+           <col style="width: 25%;" />
+           <col style="width: 25%;" />
+           <col style="width: 25%;" />
+           <col style="width: 25%;" />
+           <col style="width: 45px;" /> <!-- width of one action (25) with padding of 10 for the column-->
+       </colgroup>
     <thead>
-    <tr>
-        <th colspan="5" class="headlabel">Linked Releases</th>
-    </tr>
+        <tr>
+            <th class="headLabel" colspan="5">Linked Releases</th>
+        </tr>
+        <tr>
+            <th class="headlabel" rowspan="2">Vendor Name</th>
+            <th class="headlabel" rowspan="2">Release Name</th>
+            <th class="headlabel" rowspan="2">Release Version</th>
+            <th class="headlabel" rowspan="2">Release Relation <sw360:DisplayEnumInfo type="<%=ReleaseRelationship.class%>"/></th>
+            <th class="headlabel" rowspan="2"></th>
+        </tr>
     </thead>
     <tbody>
         <jsp:include page="/html/utils/ajax/linkedReleasesRelationAjax.jsp" />

diff --git a/frontend/sw360-portlet/src/main/webapp/html/utils/includes/linkedReleasesEdit.jspf b/frontend/sw360-portlet/src/main/webapp/html/utils/includes/linkedReleasesEdit.jspf
@@ -9,11 +9,30 @@
   ~ http://www.eclipse.org/legal/epl-v10.html
 --%>
 
+<%@ page import="org.eclipse.sw360.datahandler.thrift.MainlineState" %>
+<%@ page import="org.eclipse.sw360.datahandler.thrift.ReleaseRelationship" %>
+
 <table class="table info_table" id="LinkedReleasesInfo">
+       <colgroup>
+           <col style="width: 20%;" />
+           <col style="width: 20%;" />
+           <col style="width: 20%;" />
+           <col style="width: 20%;" />
+           <col style="width: 20%;" />
+           <col style="width: 45px;" /> <!-- width of one action (25) with padding of 10 for the column-->
+       </colgroup>
     <thead>
-    <tr>
-        <th colspan="6" class="headlabel">Linked Releases</th>
-    </tr>
+        <tr>
+            <th class="headLabel" colspan="6">Linked Releases</th>
+        </tr>
+        <tr>
+            <th class="headlabel" rowspan="2">Vendor Name</th>
+            <th class="headlabel" rowspan="2">Release Name</th>
+            <th class="headlabel" rowspan="2">Release Version</th>
+            <th class="headlabel" rowspan="2">Release Relation <sw360:DisplayEnumInfo type="<%=ReleaseRelationship.class%>"/></th>
+            <th class="headlabel" rowspan="2">Project Mainline State <sw360:DisplayEnumInfo type="<%=MainlineState.class%>"/></th>
+            <th class="headlabel" rowspan="2"></th>
+        </tr>
     </thead>
     <tbody>
         <jsp:include page="/html/utils/ajax/linkedReleasesAjax.jsp" />