Merge pull request jenkinsci#2 from gusreiber/rec-31162

Reviews in the UI.
gusreiber · Mar 17, 2016 · e7fa0b7 · e7fa0b7
2 parents 2418f6f + b08b1bc
commit e7fa0b7
Show file tree

Hide file tree

Showing 4 changed files with 56 additions and 17 deletions.
diff --git a/core/src/main/resources/lib/hudson/newFromList/form.jelly b/core/src/main/resources/lib/hudson/newFromList/form.jelly
@@ -49,25 +49,19 @@ THE SOFTWARE.
     </st:attribute>
   </st:documentation>
 
-
+  <!-- hide form initially to avoid jerky display (class add-item set by add-item.js) -->
+  <style>
+    form{display:none;} 
+    body.add-item form{display:block;} 
+  </style>
+
   <j:set var="descriptors" value="${h.filterDescriptors(it,attrs.descriptors)}" />
-
   <s:form method="post" action="${attrs.action?:'createItem'}" name="createItem">
     <div id="j-add-item-form-data" data-root="${rootURL}/"></div>
 
     <l:js src="jsbundles/add-item.js" />
     <l:css src="jsbundles/jenkins-widgets.css" />  
 
-    <j:forEach var="descriptor" items="${descriptors}">
-      <s:block>
-        <input type="radio" name="mode" value="${descriptor.id}" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />
-        <label class="attach-previous"><b>${descriptor.displayName}</b></label>
-      </s:block>
-      <s:entry>
-        <st:set var="instance" value="${descriptor}" />
-        <st:include page="newInstanceDetail.jelly" it="${descriptor}" />
-      </s:entry>
-    </j:forEach>
     <j:if test="${!empty(attrs.copyNames) or attrs.showCopyOption}">
       <s:block>
         <input type="radio" id="copy" name="mode" value="copy" onchange="updateOk(this.form)" onclick="updateOk(this.form)" />

diff --git a/war/src/main/js/add-item.js b/war/src/main/js/add-item.js
@@ -28,8 +28,18 @@ $.when(getItems(jRoot)).done(function(data){
       .prependTo($form);
     var $tabs = $('<div class="jenkins-config-widgets" />').appendTo($newView);
     var $categories = $('<div class="categories" />').appendTo($newView);
+    var $subBtn = $('#bottom-sticker .yui-submit-button');
     var sectionsToShow = [];    
 
+    ////////////////////////////////
+    // submit button click
+
+    $subBtn.on('click',function(e){
+      var $this = $(this).addClass('yui-button-disabled yui-submit-button-disabled')
+        .find('button')
+          .attr('disabled','disabled')
+          .text('. . .')   
+    });
 
     ////////////////////////////////
     // scroll action......
@@ -83,6 +93,7 @@ $.when(getItems(jRoot)).done(function(data){
               class:"copy",
               description:copyDom,
               displayName:copyTitle,
+              iconFilePathPattern:'images/items/copy.png'
             }
           ]
       };
@@ -247,14 +258,11 @@ $.when(getItems(jRoot)).done(function(data){
     }
 
     function drawItem(elem){
-      var $iconFilePath = jRoot + '/' + elem.iconFilePathPattern.replace(":size", "48x48");
       var $item = $([
           '<li class="',cleanClassName(elem.class),'"><label><input name="mode" value="',elem.class,'" type="radio" /> <span class="label">', elem.displayName, '</span></label></li>'
       ].join('')).append([
           '<div class="desc">', elem.description, '</div>'
-      ].join('')).append([
-          '<div class="icn"><span class="img" style="background:url(', $iconFilePath, ')"></span></div>'
-      ].join(''));
+      ].join('')).append(drawIcon(elem));
 
       function setSelectState(){
         var $this = $(this).closest('li');
@@ -276,6 +284,29 @@ $.when(getItems(jRoot)).done(function(data){
       return $item;
     }
 
+    function drawIcon(elem){
+      var $icn = $('<div class="icn">');
+      if (!elem.iconFilePathPattern) {
+        var name = elem.displayName;
+        var aName = name.split(' ');
+        var a = name.substring(0,1);
+        var b = ((aName.length === 1)?
+            name.substring(1,2):
+              aName[1].substring(0,1));
+        var $defIcon = $([
+          '<span class="dfIcn"><span class="a">',a,'</span><span class="b">',b,'</span></span>'
+         ].join(''))
+          .appendTo($icn);
+        return $icn.addClass('df');
+      }
+
+      var iconFilePath = jRoot + '/' + elem.iconFilePathPattern.replace(":size", "48x48");
+      var iconDom = $(['<span class="img" style="background:url(', iconFilePath, ')"></span>'].join(''))
+        .appendTo($icn);
+
+      return $icn;
+    }
+
     // initialize
 
     var sortedDCategories = sortItemsByOrder(data.categories);

diff --git a/war/src/main/js/widgets/config/tabbar.less b/war/src/main/js/widgets/config/tabbar.less
@@ -2,7 +2,6 @@
  * 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:75em; 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}
@@ -37,6 +36,19 @@ body#jenkins.add-item .jenkins-config {
   }
 
 }
+.icn.df{box-shadow:inset #039 0 0 1px, inset #fff 0 0 0 1px, 0 5px 3px -2px rgba(0, 0, 0, 0.25), inset -5px -5px 10px 2px #369, inset -5px -10px 15px 14px #69c}
+.icn.df:before {background:none !important; content:' '}
+.icn > .dfIcn{
+  position: relative;
+  z-index: 2;
+  font-weight: bold;
+  font-size: 175%;
+  color: @brightest;
+  text-shadow: @shadow 0 -1px 1px;
+  vertical-align: top;
+}
+
+
 .jenkins-config > .category-header {padding:0 20px}
 .j-item-options > li.active {background:#fff;}
 .j-item-options li,

diff --git a/war/src/main/js/widgets/variables.less b/war/src/main/js/widgets/variables.less
@@ -3,13 +3,15 @@
 @medium-translucent: rgba(255,255,255,.75);
 
 @pale-green-trans:rgba(245, 249, 239,.75);
+@pale-blue-trans:rgba(120, 180, 220, 0.5);
 @pale-blue:#cde;
 @middle-blue:#478;
 @dark-blue:#356;
 
 
 @shade-hint: rgba(0,0,0,.025);
 @shade: rgba(0,0,0,.1);
+@shadow: rgba(0,0,0,.25);
 
 @light-border: #f3f3f3;
 @light-backgrond: #eee;