adding scrollspy

core/src/main/resources/hudson/model/Job/configure.jelly

@@ -33,7 +33,7 @@ THE SOFTWARE.
     <l:main-panel>
       <l:js src="jsbundles/config-tabbar.js" />
       <l:css src="jsbundles/jenkins-widgets.css" />
-      <div class="behavior-loading">${%LOADING}</div>
+      <div class="behavior-loading">${%loading}</div>
       <f:form method="post" action="configSubmit" name="config" tableClass="job-config tabbed">
         <j:set var="descriptor" value="${it.descriptor}" />
         <j:set var="instance" value="${it}" />

core/src/main/resources/lib/form/select/select.js

@@ -43,7 +43,7 @@ function updateListBox(listBox,url,config) {
 Behaviour.specify("SELECT.select", 'select', 1000, function(e) {
 
         function hasChanged(selectEl, originalValue) {
-            var firstValue = selectEl.options[0].value;
+            var firstValue = (selectEl.options && selectEl.options[0])? selectEl.options[0].value : originalValue;
             var selectedValue = selectEl.value;
             if (originalValue == "" && selectedValue == firstValue) {
                 // There was no value pre-selected but after the call to updateListBox the first value is selected by

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

@@ -2,7 +2,6 @@ var $ = require('jquery-detached').getJQuery();
 var jenkinsLocalStorage = require('./util/jenkinsLocalStorage.js');
 var configMetadata = require('./widgets/config/model/ConfigTableMetaData.js');
 
-$('body').addClass('config');
 $(function() {
     // Horrible ugly hack...
     // We need to use Behaviour.js to wait until after radioBlock.js Behaviour.js rules
@@ -10,7 +9,6 @@ $(function() {
     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;
@@ -37,7 +35,7 @@ $(function() {
                     if (generalSection) {
                         generalSection.adoptSection('config_advanced_project_options');
                     }
-                    
+                    console.log('??????');
                     addFinderToggle(tabBar);
                     tabBar.onShowSection(function() {
                         // Hook back into hudson-behavior.js
@@ -59,7 +57,10 @@ $(function() {
                         });
                         tabBar.showSection(tabBarLastSection);
                     }
+                    watchScroll(tabBar);
+                    $(window).on('scroll',function(){watchScroll(tabBar)});
                 });
+                
             } else {
                 configTables.each(function() {
                     var configTable = $(this);
@@ -73,6 +74,8 @@ $(function() {
             }
         }
     });
+    
+    
 });
 
 function addFinderToggle(configTableMetadata) {
@@ -96,6 +99,44 @@ function addFinderToggle(configTableMetadata) {
     }
 }
 
+function watchScroll(tabControl){
+  var $window = $(window);
+  var $tabBox= tabControl.configWidgets;
+  var $tabs = $tabBox.find('.tab');
+  var $table= tabControl.configTable;
+  var toolbarFromTop = $tabs.offset().top;
+  var $jenkTools = $('#breadcrumbBar')
+  var winScoll = $window.scrollTop();
+  var jenkToolOffset = $jenkTools.height() + $jenkTools.offset().top + 15;
+  
+  $tabs.find('.active').removeClass('active');
+  
+  $.each(tabControl.sections,function(i,cat){
+    var $cat = $(cat.headerRow);
+    var catHeight = ($cat.length > 0)?
+        $cat.offset().top - (jenkToolOffset):
+          0;
+    if(winScoll < catHeight){
+      var $thisTab = $($tabs.get(i));
+      var $nav = $thisTab.closest('.tabBar');
+      $nav.find('.active').removeClass('active');
+      $thisTab.addClass('active');
+      return false;
+    }
+  });
+
+  if(winScoll > $('#page-head').height() - 5 ){  
+    $tabBox.width($tabBox.width()).css({
+      'position':'fixed',
+      'top':($jenkTools.height() - 5 )+'px'});
+    $table.css({'margin-top':$tabBox.outerHeight()+'px'});
+    
+  }
+  else{
+    $tabBox.add($table).removeAttr('style');
+  }
+}
+
 function fireBottomStickerAdjustEvent() {
     Event.fire(window, 'jenkins:bottom-sticker-adjust'); // jshint ignore:line
 }

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

@@ -234,8 +234,21 @@ ConfigTableMetaData.prototype.showSection = function(section) {
     if (typeof section === 'string') {
         section = this.getSection(section);
     }
-
+    if(!section) return;
+
+    var $ = this.$;
+    var $header = $(section.headerRow);
+    var scrollTop = $header.offset().top - ($('#main-panel .jenkins-config-widgets').outerHeight() + 15);
+
+    $('html,body').animate({
+      scrollTop: scrollTop
+    }, 500);
+    setTimeout(function(){
+      section.activator.closest('.tabBar').find('.active').removeClass('active');
+      section.activator.addClass('active');
+    },510);
     if (section) {
+      /*
         var topRows = this.getTopRows();
 
         // Deactivate currently active section ...
@@ -252,6 +265,7 @@ ConfigTableMetaData.prototype.showSection = function(section) {
         section.highlightText(this.findInput.val());
 
         fireListeners(this.showListeners, section);
+      */
     }
 };
 

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

 /*
  * Tab bar specific rules.
  */
+body.add-item.hide-side  #side-panel{width:0; padding:0; overflow:hidden; transition: all 0.5s ease;}
+body.add-item.hide-side  #main-panel{margin:0 auto; max-width:900px; transition: all 0.5s ease;}
+body.add-item .jenkins-config table tr {display:none;}
+body.add-item .jenkins-config table tr:last-of-type {display:table-row}
+body.add-item .jenkins-config-widgets .form-config.tabBarFrame .tabBar .tab.active {background:@bright; border-bottom-color:@bright}
+body.add-item .category.jenkins-config.hide-cat {display:none;}
+body#jenkins.add-item .jenkins-config {
+  padding:10px; 
+  background:@bright;
+  box-shadow:inset;
+  
+  h2 {
+    margin-bottom:5px;
+  }
+  
+  .category-header > p {
+    margin-top:5px;
+  }
+  
+}
+.jenkins-config > .category-header {padding:0 20px}
+.j-item-options > li.active {background:#fff;}
+.j-item-options li,
+.j-item-options {display:block; margin:0; list-style:none; position:relative; padding:0 10px}
+.j-item-options li{
+  .no-select;
+  cursor:pointer;
+  border:1px solid transparent;
+  border-radius:@radius;
+  padding:10px 10px 10px 68px;
+  min-height:68px;
+  
+  .icn:before {
+    content:' ';
+    display:block;
+    position:absolute;
+    top:0;
+    left:0;
+    right:0;
+    height:24px;
+    border-top-left-radius:24px;
+    border-top-right-radius:24px;
+    background:#C0D8E2;
+  }
+  
+  .icn {
+    position:absolute; left:10px; top:10px; height:48px; 
+    width:48px; background:@brightest; border:1px solid @line-blue;  
+    border-radius:50%; text-align:center; line-height:48px;
+  
+    img {width:100%; position:relative; z-index:2}
+  }
+  
+  label{
+    display:block;
+    font-size:1.1em;
+    font-weight:bold;
+    color:#000;
+    padding-bottom:5px;
+    
+    input{
+      position:absolute;
+      top:20px;
+      left:20px;
+    }
+  }
+}
+.j-item-options li.focus,
+.j-item-options li:focus,
+.j-item-options li:hover{
+  border-color:@solid-border;
+  background:@medium-translucent;
+}
+.j-item-options li.active{
+  cursor:text;
+  background-color:@brightest;
+  border-color:@line-blue;
+  box-shadow:inset 999rem 0 @brightest;
+  .text-select;
+}
+
+.add-item .jenkins-config-widgets {
+  border-top-left-radius:5px;
+  border-top-right-radius:5px;
+  position:relative;
+  z-index:5;
+}
 
 .jenkins-config-widgets {
   position: relative;
@@ -8,8 +95,12 @@
   border-bottom:none;
   background:@light-backgrond;
   min-height:2.5em;
-  border-top-left-radius:@radius;
-  border-top-right-radius:@radius;
+  border-top-left-radius: @radius;
+  border-top-right-radius: @radius;
+  z-index:2;
+  
+  nav:before,
+  nav:after {display:none;}
   
   :hover .noTabs{
     color:#bbb;
@@ -27,6 +118,20 @@
     margin:0;
     .find-container(@width: @find-container-width);
   }
+
+  .j-add-item-name {
+    padding:20px 20px 10px;
+    
+    input {
+      font-size:1.5em;
+      background-color:#fff;
+      border-radius:0;
+      padding:5px;
+      border:none;
+      box-shadow:none;
+      border-bottom:1px solid #ccc;
+    }
+  }
   
   .showTabs,
   .noTabs {
@@ -46,17 +151,20 @@
     border-bottom: solid 1px @solid-border;
 
     .config-section-activators {
-      margin-right: 80px;
+      margin:0  ;
+      padding:0;
     }
 
     .tabBar {
+      li {padding:0; margin:0; list-style:none; display:block}
       .tab {
         border: solid 1px transparent;
         color: #999;
         padding: 7px 10px;
         .border-radius-top(5px);
         cursor: pointer;
-        margin-top:1px;
+        margin:1px 0 0 10px;
+        text-decoration:none;
       }
       .tab:hover {
         background:#bbb; color:@brightest;
@@ -86,38 +194,43 @@
 #jenkins{
   .jenkins-config {
     border:1px solid @solid-border;
-    padding:10px;
-    border-top:none;
     border-bottom-left-radius:@radius;
     border-bottom-right-radius:@radius;
+    padding:10px;
+    border-top:none;
     
     .showTabs{
       display:block;
       text-align:right;
       
     }
-    
+    table.job-config.tabbed{
+      .section-header-row {background:none; border-color:transparent}
+      .section-header {margin-top:10; }
+    }
     table{
       border-collapse:collapse;
       
+      .section-header-row.general .section-header{
+        display:none;
+      }
+      
       .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;    
+        border: 1px solid @line-green;
+        background: @pale-green-trans;    
       }
          
       .bottom-sticker, 
       #bottom-sticker{ 
         width: auto;
-        margin-left: -10px;
         overflow: hidden;
         padding-bottom: 10px;
-        margin: 30px 30px -25px -15px;
+        margin: 30px 30px -26px -16px;
         z-index:9;
 
         .yui-button{
@@ -125,7 +238,15 @@
           
           button{
             padding:5px 20px;
-            border-radius:@radius;
+            background:@j-pale-blue;
+            border-color:@line-blue;
+          }
+          
+        }
+        .yui-button-disabled{
+          button{
+            background:@light-backgrond;
+            border-color:@solid-border;
           }
         }
       }
@@ -172,6 +293,7 @@
           height:@input-line-height;
           line-height:@input-line-height;
           padding:0 5px;
+          border-radius:@radius;
         }
         .yui-button button{
           padding:0 10px;
@@ -262,8 +384,8 @@
         right:35px;
         height:18px;
         width:32px;
-        border-bottom-left-radius:@radius;
-        border-bottom-right-radius:@radius;
+        border-bottom-left-radius:3px;
+        border-bottom-right-radius:3px;
         overflow:hidden;
         
         button{
@@ -305,4 +427,6 @@
   border:1px solid @line-blue !important;
   opacity:.5;
 }
-.yui-skin-sam .yuimenu {z-index:9999 !important}
\ No newline at end of file
+.yui-skin-sam .yuimenu {z-index:9999 !important}
+
+.yui-skin-sam .yui-button-disabled {opacity:.75}
\ No newline at end of file

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

@@ -2,7 +2,22 @@
  * General/layout mixins
  */
 
-
+.no-select{
+  -webkit-touch-callout: none; /* iOS Safari */
+  -webkit-user-select: none;   /* Chrome/Safari/Opera */
+  -khtml-user-select: none;    /* Konqueror */
+  -moz-user-select: none;      /* Firefox */
+  -ms-user-select: none;       /* IE/Edge */
+  user-select: none; 
+}
+.text-select{
+  -webkit-touch-callout: text; /* iOS Safari */
+  -webkit-user-select: text;   /* Chrome/Safari/Opera */
+  -khtml-user-select: text;    /* Konqueror */
+  -moz-user-select: text;      /* Firefox */
+  -ms-user-select: text;       /* IE/Edge */
+  user-select: text; 
+}
 /*
  * Border radius
  */

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

@@ -5,23 +5,13 @@
 @pale-green-trans:rgba(245, 249, 239,.75);
 @j-pale-blue:#C0D8E2;
 
+
 @shade-hint: rgba(0,0,0,.025);
 @shade: rgba(0,0,0,.1);
 
 @light-border: #f3f3f3;
 @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;
-@light-backgrond: #eee;
-@solid-border: #ccc;
 @radius:3px;
 
 @line-blue: #69c;

war/src/main/webapp/css/style.css

@@ -86,6 +86,7 @@ body {
 #main-panel {
   padding: 15px 15px 40px 15px;
   margin-left: 320px;
+  position:relative;
 }
 
 @media (max-width: 750px) {
@@ -710,6 +711,59 @@ div.behavior-loading {
     filter: alpha(opacity=50);
 }
 
+.config div.behavior-loading{
+    background: rgba(255,255,255,.85);
+    left: 15px;
+    right: 15px;
+    top: 15px;
+    bottom: 0px;
+    height: 100%;
+    width: auto;
+    min-height: 100%;
+    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
+    filter: alpha(opacity=100);
+    font-size: 1.5em;
+    z-index: 99;
+    opacity: 1;
+    color: #999; 
+    text-shadow:#fff 0 0 5px,#fff 0 0 5px,#fff 0 0 5px,#fff 0 0 5px,#fff 0 0 5px
+}
+
+.behavior-loading:before {
+  content:' ';
+  display:block;
+  width: 100px;
+  height: 100px;
+  margin: 200px auto 25px;
+  background-color: rgba(0,0,0,.15);
+  border:5px solid rgba(0,0,0,.33);
+  position:relative;
+  z-index:2;
+  border-radius: 100%;  
+  -webkit-animation: sk-scaleout 1.0s infinite ease-in-out;
+  animation: sk-scaleout 1.0s infinite ease-in-out;
+  box-shaodw:#fff 0 0 0 10px
+}
+
+@-webkit-keyframes sk-scaleout {
+  0% { -webkit-transform: scale(0) }
+  100% {
+    -webkit-transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
+@keyframes sk-scaleout {
+  0% { 
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 100% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+    opacity: 0;
+  }
+}
+
 LABEL.attach-previous {
     margin-left: 0.5em;
 }