JENKINS-34041 Added Themes for DPP and ability to select from differe…

…nt options (#178)

Along with this fixed some of the issues in pagination which got
effected with themes feature

src/main/java/se/diabol/jenkins/pipeline/DeliveryPipelineView.java

@@ -88,6 +88,8 @@ public class DeliveryPipelineView extends View {
     private static final String OLD_NONE_SORTER = "se.diabol.jenkins.pipeline.sort.NoOpComparator";
     public static final String NONE_SORTER = "none";
 
+    public static final String DEFAULT_THEME = "default";
+
     private List<ComponentSpec> componentSpecs;
     private int noOfPipelines = DEFAULT_NO_OF_PIPELINES;
     private boolean showAggregatedPipeline = false;
@@ -109,6 +111,7 @@ public class DeliveryPipelineView extends View {
     private boolean pagingEnabled = false;
     private boolean showAggregatedChanges = false;
     private String aggregatedChangesGroupingPattern = null;
+    private String theme = DEFAULT_THEME;
 
     private List<RegExpSpec> regexpFirstJobs;
 
@@ -266,6 +269,14 @@ public boolean getPagingEnabled() {
         return pagingEnabled;
     }
 
+    public String getTheme() {
+        return this.theme == null ? DEFAULT_THEME : this.theme;
+    }
+
+    public void setTheme(String theme) {
+        this.theme = theme;
+    }
+
     public boolean isFullScreenView() {
         StaplerRequest req = Stapler.getCurrentRequest();
         if (req == null) {

src/main/java/se/diabol/jenkins/pipeline/PipelinePagination.java

@@ -54,23 +54,15 @@ public String getTag() {
 
     private void setNextPage(StringBuilder sb) {
         sb.append("<a href='").append(moveLink)
-                .append(nextPage).append("'>\n").append("Next").append("<img src='").append(rootUrl)
-                .append("/plugin/delivery-pipeline-plugin/nextbutton.gif' width='3' height='5' alt='' border='0'>\n")
+                .append(nextPage).append("'>\n").append("Next")
                 .append("</a>\n");
     }
 
     private void setPrePage(StringBuilder sb) {
         sb.append("<a href='").append(moveLink).append(prevPage).append("'>\n")
-                .append("<img src='").append(rootUrl)
-                .append("/plugin/delivery-pipeline-plugin/prevbutton.gif' width='3' height='5' alt='' border='0'>\n")
                 .append("Prev").append("</a>\n");
     }
 
-    private void setBlankSpan(StringBuilder sb) {
-        sb.append("<span class='page dark'>\n");
-        sb.append("</span>");
-    }
-
     private void setIndex(StringBuilder sb) {
         for (count = prevPage + 1; count < nextPage && count <= totalPage; count++) {
             if (count == currentPage) {

src/main/resources/se/diabol/jenkins/pipeline/DeliveryPipelineView/configure-entries.jelly

@@ -85,6 +85,12 @@
             <f:checkbox/>
         </f:entry>
 
+        <f:entry name="theme" title="Theme" field="theme">
+            <select name="theme" class="setting-input  select">
+                <option value="default" selected="${instance.getTheme().equals('default')? 'true':null}">Default</option>
+            </select>
+        </f:entry>
+
     </f:section>
 
     <f:section title="Pipelines">

src/main/resources/se/diabol/jenkins/pipeline/DeliveryPipelineView/main.jelly

@@ -13,16 +13,16 @@
     <st:bind var="component" value='${request.getParameter("component")}'/>
     <j:set var="component" value='${request.getParameter("component") == null ? 1 : request.getParameter("component")}'/>
 
-    <link rel="stylesheet" href="${resURL}/plugin/delivery-pipeline-plugin/pipeline-common.css"/>
+    <link rel="stylesheet" href="${resURL}/plugin/delivery-pipeline-plugin/themes/${it.theme}/pipeline-common.css"/>
     <j:switch on="${fullscreen}">
         <j:case value="true">
-            <link rel="stylesheet" href="${resURL}/plugin/delivery-pipeline-plugin/pipeline-fullscreen.css"/>
+            <link rel="stylesheet" href="${resURL}/plugin/delivery-pipeline-plugin/themes/${it.theme}/pipeline-fullscreen.css"/>
             <j:if test="${it.fullScreenCss != null}">
                 <link rel="stylesheet" href="${it.fullScreenCss}"/>
             </j:if>
         </j:case>
         <j:default>
-            <link rel="stylesheet" href="${resURL}/plugin/delivery-pipeline-plugin/pipeline.css"/>
+            <link rel="stylesheet" href="${resURL}/plugin/delivery-pipeline-plugin/themes/${it.theme}/pipeline.css"/>
             <j:if test="${it.embeddedCss != null}">
                 <link rel="stylesheet" href="${it.embeddedCss}"/>
             </j:if>

src/main/webapp/pipe.js

@@ -351,7 +351,7 @@ function generatePromotionsInfo(data, task) {
     if (data.showPromotions && task.status.promoted && task.status.promotions && task.status.promotions.length > 0) {
         var html = ["<div class='infoPanelOuter'>"];
         Q.each(task.status.promotions, function(i, promo) {
-            html.push("<div class='infoPanel'><div class='infoPanelInner'>");
+            html.push("<div class='infoPanel'><div class='infoPanelInner'><div class='promo-layer'>");
             html.push("<img class='promo-icon' height='16' width='16' src='" + rootURL + promo.icon + "'/>");
             html.push("<span class='promo-name'><a href='" + rootURL + "/" + task.link + "promotion'>" + htmlEncode(promo.name) + "</a></span><br/>");
             if (promo.user != 'anonymous') {
@@ -364,7 +364,7 @@ function generatePromotionsInfo(data, task) {
             Q.each(promo.params, function (j, param) {
                 html.push(param.replace(/\r\n/g, '<br/>') + "<br />");
             });
-            html.push("</div></div>");
+            html.push("</div></div></div>");
         });
         html.push("</div>");
         return html.join("");

src/main/webapp/pipeline-common.css → src/main/webapp/themes/default/pipeline-common.css

@@ -367,15 +367,15 @@ div.aggregatedChangesPanelInner > ul {
 	font-family:Arial, Helvetica, sans-serif;
 	font-size:14px;
 	font-weight:normal;
-	margin-bottom:5px;
+	margin-bottom:8px;
+	margin-left:10px;
 }
 
-.pagination a:link, .pagination a:visited{
-	padding:7px;	
+.pagination a, .pagination a:visited{
+	padding:7px;
 	padding-top:2px;
 	padding-bottom:2px;
 	border:1px solid #EBEBEB;
-	margin-left:10px;
 	text-decoration:none;
 	background-color:#F5F5F5;
 	color:#0072bc;
@@ -389,12 +389,10 @@ div.aggregatedChangesPanelInner > ul {
 	color:#0072BC;	
 }
 
-.pagination .active_link {
-	padding:7px;
+.pagination .active_link a {
 	padding-top:2px;
 	padding-bottom:2px;
 	border:1px solid #BBDDFF;
-	margin-left:10px;
 	text-decoration:none;
 	background-color:#DDEEFF;
 	color:#0072BC;

src/test/java/se/diabol/jenkins/pipeline/DeliveryPipelineViewTest.java

@@ -204,6 +204,7 @@ public void testDefaults() {
         assertFalse(view.isShowStaticAnalysisResults());
         assertFalse(view.getPagingEnabled());
         assertFalse(view.isAllowPipelineStart());
+        assertEquals("default", view.getTheme());
     }
 
     @Test
@@ -241,6 +242,8 @@ public void testSettersAndGetters() {
         assertTrue(view.getPagingEnabled());
         view.setAllowPipelineStart(true);
         assertTrue(view.isAllowPipelineStart());
+        view.setTheme("test");
+        assertEquals("test", view.getTheme());
     }
 
     @Test