Merge pull request #2097 from gusreiber/2.0_J-33407

[FIX JENKINS-33407] Config form styling

core/src/main/resources/lib/form/descriptorList.jelly

@@ -67,7 +67,7 @@ THE SOFTWARE.
   <j:if test="${!empty(descriptors) or context['org.apache.commons.jelly.body']!=null}">
     <f:section title="${attrs.title}" name="${attrs.field?:attrs.name}">
       <j:if test="${attrs.field!=null}">
-        <tr>
+        <tr class="stapler-class-bag">
           <td>
             <input type="hidden" name="stapler-class-bag" value="true" />
           </td>

war/src/main/js/config-tabbar.js

@@ -7,6 +7,9 @@ $(function() {
     // We need to use Behaviour.js to wait until after radioBlock.js Behaviour.js rules
     // have been applied, otherwise row-set rows become visible across sections.
     var done = false;
+    
+    Behaviour.specify(".dd-handle", 'config-drag-start',1000,fixDragEvent); // jshint ignore:line
+    
     Behaviour.specify(".block-control", 'row-set-block-control', 1000, function() { // jshint ignore:line
         if (done) {
             return;
@@ -18,7 +21,9 @@ $(function() {
         if (configTables.size() > 0) {
             var tabBarShowPreferenceKey = 'config:usetabs';
             var tabBarShowPreference = jenkinsLocalStorage.getGlobalItem(tabBarShowPreferenceKey, "yes");
-
+            
+            fixDragEvent(configTables);
+            
             var tabBarWidget = require('./widgets/config/tabbar.js');
             if (tabBarShowPreference === "yes") {
                 configTables.each(function() {
@@ -73,7 +78,6 @@ function addFinderToggle(configTableMetadata) {
     var findToggle = $('<div class="find-toggle" title="Find"></div>');
     var finderShowPreferenceKey = 'config:showfinder';
     
-    $('.tabBar', configTableMetadata.configWidgets).append(findToggle);
     findToggle.click(function() {
         var findContainer = $('.find-container', configTableMetadata.configWidgets);
         if (findContainer.hasClass('visible')) {
@@ -94,3 +98,22 @@ function addFinderToggle(configTableMetadata) {
 function fireBottomStickerAdjustEvent() {
     Event.fire(window, 'jenkins:bottom-sticker-adjust'); // jshint ignore:line
 }
+// YUI Drag widget does not like to work on elements with a relative position.
+// This tells the element to switch to static position at the start of the drag, so it can work.
+function fixDragEvent(handle){
+    var isReady = false;
+    var $handle = $(handle);
+    var $chunk = $handle.closest('.repeated-chunk');
+    $handle.add('#ygddfdiv')
+    	.mousedown(function(){
+    	    isReady = true; 
+    	})
+    	.mousemove(function(){
+    	    if(isReady && !$chunk.hasClass('dragging')){
+    		$chunk.addClass('dragging');
+    	    }
+    	}).mouseup(function(){
+    	    isReady = false;
+    	    $chunk.removeClass('dragging');
+    	});
+}

war/src/main/js/widgets/config/model/ConfigRowGrouping.js

@@ -50,7 +50,7 @@ ConfigRowGrouping.prototype.updateVisibility = function() {
             if (isChecked) {
                 this.rows[i].show();
             } else {
-                this.rows[i].hide();
+                this.rows[i].not('.help-area').hide();
             }
         }
     }

war/src/main/js/widgets/config/model/ConfigTableMetaData.js

@@ -47,6 +47,16 @@ exports.fromConfigTable = function(configTable) {
     // The first set of rows don't have a 'section-header-row', so we manufacture one,
     // calling it a "General" section. We do this by marking the first row in the table.
     // See the next block of code.
+    
+    if(!firstRow.hasClass('section-header-row')){
+      var generalRow = $('<tr class="section-header-row insert first" title="General"><td colspan="4"><div class="section-header"><a class="section-anchor">#</a>General</div></td></tr>');
+      firstRow.before(generalRow);
+      firstRow = configTableMetadata.getFirstRow();
+      var newArray = $.makeArray(topRows);
+      newArray.unshift(generalRow[0]);
+      topRows = $(newArray);
+    }
+
     firstRow.addClass('section-header-row');
     firstRow.attr('title', "General");
 

war/src/main/js/widgets/config/tabbar.js

@@ -46,10 +46,10 @@ exports.addTabs = function(configTable) {
     }
 
     var tabs = $('<div class="form-config tabBarFrame"></div>');
-    var noTabs = $('<div class="noTabs" title="Remove configuration tabs and revert to the &quot;classic&quot; configuration view">untab</div>');
+    var noTabs = $('<div class="noTabs" title="Remove configuration tabs and revert to the &quot;classic&quot; configuration view">Remove tabs</div>');
 
     configTableMetadata.configWidgets.append(tabs);
-    tabs.append(noTabs);
+    configTableMetadata.configWidgets.prepend(noTabs);
     tabs.append(tabBar);
 
     tabs.mouseenter(function() {
@@ -60,7 +60,7 @@ exports.addTabs = function(configTable) {
     });
     configTableMetadata.deactivator = noTabs;
 
-    // Always activate the first section by default.
+    // Always activate the first section by default. 
     configTableMetadata.activateFirstSection();
 
     return configTableMetadata;
@@ -68,7 +68,7 @@ exports.addTabs = function(configTable) {
 
 exports.addTabsActivator = function(configTable) {
     var $ = jQD.getJQuery();
-    var configWidgets = $('<div class="jenkins-config-widgets"><span class="showTabs" title="Add configuration section tabs">tab</span></div>');
-    configWidgets.insertBefore(configTable);
+    var configWidgets = $('<div class="jenkins-config-widgets"><div class="showTabs" title="Add configuration section tabs">Add tabs</div></div>');
+    configWidgets.insertBefore(configTable.parent());
     return configWidgets;
 };

war/src/main/js/widgets/config/tabbar.less

@@ -4,48 +4,46 @@
 
 .jenkins-config-widgets {
   position: relative;
-
-  .showTabs {
-    float: right;
-    margin-bottom: 5px;
-    margin-right: 20px;
-    cursor: pointer;
-    opacity: 0.4;
+  border:1px solid @solid-border;
+  border-bottom:none;
+  background:@light-backgrond;
+  min-height:2.5em;
+  border-top-left-radius:@radius;
+  border-top-right-radius:@radius;
+  
+  :hover .noTabs{
+    color:#bbb;
   }
+  .noTabs:hover,
   .showTabs:hover {
     opacity: 0.8;
+    background:#bbb;
+    color:@light-backgrond;
+    text-shadow:none    
   }
 
-  @find-container-height: 40px;
   @find-container-width: 200px;
   .find-container {
-    .border-radius(@find-container-height/2);
-    .find-container(@height: @find-container-height, @width: @find-container-width);
-    display: none;
-    background-color: @light-backgrond;
-    margin-bottom: 15px;
-
-    .find {
-      left: 50%;
-      margin-left: -100px;
-    }
+    margin:0;
+    .find-container(@width: @find-container-width);
   }
-  .find-container.visible {
-    display: block;
+  
+  .showTabs,
+  .noTabs {
+    position: absolute;
+    border-radius: @radius;
+    right: 5px;
+    top: 5px;
+    cursor: pointer;
+    color: @solid-border;
+    text-shadow: @brightest 0 1px 2px;
+    font-size: 0.85em;
+    padding: 3px 7px;
   }
 
   .form-config.tabBarFrame {
     position: relative;
-
-    .noTabs {
-      display: none;
-      position: absolute;
-      margin: 3px;
-      right: 0px;
-      top: 7px;
-      cursor: pointer;
-      opacity: 0.4;
-    }
+    border-bottom: solid 1px @solid-border;
 
     .config-section-activators {
       margin-right: 80px;
@@ -53,33 +51,26 @@
 
     .tabBar {
       .tab {
-        border: solid 1px @light-border;
-        border-bottom: none;
+        border: solid 1px transparent;
         color: #999;
         padding: 7px 10px;
         .border-radius-top(5px);
         cursor: pointer;
+        margin-top:1px;
+      }
+      .tab:hover {
+        background:#bbb; color:@brightest;
       }
       .tab.active {
-        background: #eee;
+        background: @brightest;
         color: #000;
         font-weight: bold;
         z-index: 2;
-      }
-
-      .find-toggle {
-        background-image: url("../images/16x16/search.png");
-        background-repeat: no-repeat;
-        width: 16px;
-        height: 16px;
-        margin: 8px;
-        float: left;
-        cursor: pointer;
+        border:1px solid @solid-border;
+        border-bottom:1px solid #fff
       }
     }
 
-    border-bottom: solid 1px @light-border;
-    margin-bottom: 10px;
   }
 
   .form-config.tabBarFrame.mouse-over {
@@ -92,9 +83,226 @@
   }
 
 }
+#jenkins{
+  .jenkins-config {
+    border:1px solid @solid-border;
+    padding:10px;
+    border-top:none;
+    border-bottom-left-radius:@radius;
+    border-bottom-right-radius:@radius;
+    
+    .showTabs{
+      display:block;
+      text-align:right;
+      
+    }
+    
+    table{
+      border-collapse:collapse;
+      
+      .bottom-sticker-edge {
+        display:none;
+      }
+      .bottom-sticker-inner{
+        padding: 20px 10px 25px 20px;
+        border-top-right-radius: 10px;
+        border-top: 1px solid @brightest;
+        border-right: 1px solid @brightest;
+        background: @medium-translucent;    
+      }
+         
+      .bottom-sticker, 
+      #bottom-sticker{ 
+        width: auto;
+        margin-left: -10px;
+        overflow: hidden;
+        padding-bottom: 10px;
+        margin: 30px 30px -25px -15px;
+        z-index:9;
+
+        .yui-button{
+          margin-right:10px;
+          
+          button{
+            padding:5px 20px;
+            border-radius:@radius;
+          }
+        }
+      }
+
+      .section-header{
+        margin: 30px 0px 5px -10px;
+        font-size: 1.5em;
+        padding: 10px 15px;
+        border: none;
+        border-top: 1px solid #ddd;
+      }
+      .attach-previous {
+        margin-left:3px;
+      }
+      .validation-error-area td{
+        padding:0 5px;
+      }
 
-.jenkins-config {
-  span.highlight {
-    background-color: #ffff00;
+      .stapler-class-bag td {
+        padding: 0px;
+      }
+      
+      td.setting-name{
+        line-height:29px;
+      }
+      td.setting-main{
+        input[type='radio'],
+        input[type='checkbox']{
+          position:relative;
+          top:.33em;
+        }
+      }
+      td{
+        padding:5px;
+        
+        textarea.setting-input {
+          display:block;
+        }
+        
+        .yui-button button,
+        input[type='email'].setting-input,
+        input[type='password'].setting-input,
+        input[type='text'].setting-input{
+          height:@input-line-height;
+          line-height:@input-line-height;
+          padding:0 5px;
+        }
+        .yui-button button{
+          padding:0 10px;
+          box-sizing:content-box;
+        }
+        
+        .yui-button button.hetero-list-add{
+          padding-right:25px;
+        }
+        
+        select:not([multiple]){
+          height:@input-line-height;
+          line-height:@input-line-height;
+        }
+        select{
+          border-radius:0;
+          background:@brightest;
+        }
+        .help{
+          background:@medium-translucent;
+        }
+        p,
+        .help,
+        .setting-description {
+          font-size:1em;
+          line-height:1.4;
+        } 
+      }
+      td[colspan="4"]:empty{
+        display:none
+      }
+      td.setting-help{
+        vertical-align:top;
+        padding:5px 10px 5px 5px
+      }
+      td.setting-leftspace:after {
+        content:' '; 
+        display:block; 
+        width:13px; 
+        height:1px;
+      }
+      .repeated-chunk,
+      tr[nameref^="rowSetStart"],
+      tr[nameref^="cb"],
+      tr[nameref^="radio-block"] {
+        background:@shade-hint; 
+        border-left:5px solid @shade
+      }
+      .hetero-list-container,
+      .repeated-container,
+      tr.optional-block-start,
+      tr.radio-block-start {
+        border-left:5px solid @shade; 
+        background:none;
+      }
+      tr.help-area {
+        background:none !important;
+        
+        td {
+          padding:0 5px
+        }
+      }
+      .CodeMirror {
+        background:@brightest;
+  
+      }
+      .CodeMirror-scroll {
+          border:1px solid @solid-border !important;
+      }
+      .repeated-container > .repeated-chunk {padding-top:15px;}
+      .repeated-chunk.hover{ 
+        border-color:@line-blue; 
+        box-shadow:0 2px 10px @shade, inset 0 200px 200px -200px @brightest; 
+        position:relative; 
+        z-index:2
+      }
+      .repeated-chunk.dragging{
+        position:static;
+      }
+      .repeated-chunk{
+        border:1px solid @shade;
+        margin:2px;
+        position:relative;
+      }  
+      .repeatable-delete {
+        position:absolute;
+        top:-2px;
+        right:35px;
+        height:18px;
+        width:32px;
+        border-bottom-left-radius:@radius;
+        border-bottom-right-radius:@radius;
+        overflow:hidden;
+        
+        button{
+          padding:0;
+          margin:0;
+          text-indent:999em;
+          background-color: @danger;
+          color: @light-backgrond;
+          border: 1px solid @danger-line;
+        }
+        button:hover{
+          background-color: @danger-dark;
+          border-color:@danger-dark-line;
+        }
+        button:before{
+          content: 'X';
+          font-weight: bold;
+          text-indent: 0;
+          display: block;
+          position: absolute;
+          left: 0;
+          right: 0;
+          top: 0;
+          bottom: 0;
+          text-align: center;
+          font-size: 12px;
+          line-height: 18px;
+        }  
+  
+      }
+    }
+    span.highlight {
+      background-color: #ffff00;
+    }
   }
-}
\ No newline at end of file
+}
+#ygddfdiv {
+  background:@light-backgrond;
+  border:1px solid @line-blue !important;
+  opacity:.5;
+}
+.yui-skin-sam .yuimenu {z-index:9999 !important}
\ No newline at end of file

war/src/main/js/widgets/form/form-mixins.less

@@ -2,41 +2,33 @@
  * Mixins for form elements
  */
 
-/*
- * Search input field
- */
-.search(@height) {
-  height: @height;
-  .border-radius(@height/2);
-  padding: 0px 15px;
-  outline: none;
-  border: 1px solid #DDD;
-  box-shadow: 0 0 5px #DDD inset;
-  background-color: #ffffff;
-}
-
-.find-container(@height: 40px, @width: 200px) {
-  height: @height;
+.find-container(@width: 200px) {
   padding: 5px;
 
   .find {
-    position: absolute;
-    top: 5px;
+    position: relative;
     width: @width;
     vertical-align: middle;
 
     input {
       width: 100%;
-      .search(@height - 10);
+      height:@input-line-height;
+      line-height:@input-line-height;
+      padding:0 5px;
+      border: 1px solid #DDD;
+      background-color: #fff;
+      border-radius:@radius;
     }
     .clear {
       position: absolute;
-      padding: 0px 4px;
+      height:@input-line-height;
+      line-height:@input-line-height;
       cursor: pointer;
-      top: (@height/2 - 13);
-      right: 5px;
+      right: 0;
       opacity: 0.5;
       font-weight: bold;
+      display:block;
+      padding:0 7px;
     }
     .clear:hover {
       opacity: 1.0;

war/src/main/js/widgets/variables.less

+@brightest:#fff;
+@medium-translucent: rgba(255,255,255,.75);
+
+@shade-hint: rgba(0,0,0,.025);
+@shade: rgba(0,0,0,.1);
+
 @light-border: #f3f3f3;
-@light-backgrond: #eee;
\ No newline at end of file
+@light-backgrond: #eee;
+@solid-border: #ccc;
+
+@line-blue: #69c;
+@danger: #d24939;
+@danger-line:#be3a2b;
+@danger-dark:#a23225;
+@danger-dark-line:#942e22;
+
+@input-line-height:2.25em;
+@radius:3px;
\ No newline at end of file