improve layout of import wizard

scm-webapp/src/main/webapp/index.mustache

@@ -77,6 +77,7 @@
     <!-- sonia.util -->
     <script type="text/javascript" src="resources/js/util/sonia.util.js"></script>
     <script type="text/javascript" src="resources/js/util/sonia.util.link.js"></script>
+    <script type="text/javascript" src="resources/js/util/sonia.util.tip.js"></script>
 
     <!-- sonia.override -->
     <script type="text/javascript" src="resources/js/override/ext.form.vtypes.js"></script>

scm-webapp/src/main/webapp/resources/css/style.css

@@ -105,6 +105,11 @@ a.scm-link:hover {
   margin-left: 2px;
 }
 
+.scm-form-fileupload-help-button {
+  position: absolute;
+  right: -19px;
+}
+
 .scm-nav-item {
   cursor: pointer;
 }
@@ -238,3 +243,12 @@ div.noscript-container h1 {
 .unhealthy {
   color: red;
 }
+
+/** import **/
+.import-fu {
+  margin-right: 24px;
+}
+
+.import-fu input {
+  width: 215px;
+}

scm-webapp/src/main/webapp/resources/js/override/ext.form.field.js

@@ -77,6 +77,9 @@ Ext.override(Ext.form.Field, {
           cls = 'scm-form-combo-help-button';
         }
         break;
+      case 'fileuploadfield':
+        cls = 'scm-form-fileupload-help-button';
+        break;
       case 'textarea':
         cls = 'scm-form-textarea-help-button';
         break;

scm-webapp/src/main/webapp/resources/js/repository/sonia.repository.importwindow.js

@@ -41,7 +41,7 @@ Sonia.repository.ImportWindow =  Ext.extend(Ext.Window,{
       title: this.title,
       layout: 'fit',
       width: 420,
-      height: 140,
+      height: 190,
       closable: true,
       resizable: true,
       plain: true,
@@ -85,6 +85,21 @@ Sonia.repository.ImportPanel = Ext.extend(Ext.Panel, {
   importJobsFinished: 0,
   importJobs: 0,
   
+  // help text
+  importTypeDirectoryHelpText: 'Imports all repositories that are located at the repository folder of SCM-Manager.',
+  importTypeURLHelpText: 'Imports a repository from a remote url.',
+  importTypeFileHelpText: 'Imports a repository from a file (e.g. SVN dump).',
+  
+  importUrlNameHelpText: 'The name of the repository in SCM-Manager.',
+  importUrlHelpText: 'The source url of the repository.',
+  
+  importFileNameHelpText: 'The name of the repository in SCM-Manager.',
+  importFileHelpText: 'Choose the dump file you want to import to SCM-Manager.',
+  
+  // tips
+  tipRepositoryType: 'Choose your repository type for the import.',
+  tipImportType: 'Select the type of import. <b>Note:</b> Not all repository types support all options.',
+  
   // settings
   repositoryType: null,
   
@@ -108,11 +123,10 @@ Sonia.repository.ImportPanel = Ext.extend(Ext.Panel, {
       ]
     });
     
-    var types = [];
+    var typeItems = [];
   
     Ext.each(state.repositoryTypes, function(repositoryType){
-      console.log(repositoryType);
+      typeItems.push({
-      types.push({
         boxLabel: repositoryType.displayName,
         name: 'repositoryType', 
         inputValue: repositoryType.name,
@@ -120,6 +134,16 @@ Sonia.repository.ImportPanel = Ext.extend(Ext.Panel, {
       });
     });
     
+    typeItems = typeItems.sort(function(a, b){
+      return a.boxLabel > b.boxLabel;
+    });
+    
+    typeItems.push({
+      xtype: 'scmTip',
+      content: this.tipRepositoryType,
+      width: '100%'
+    });
+    
     var config = {
       layout: 'card',
       activeItem: 0,
@@ -156,7 +180,7 @@ Sonia.repository.ImportPanel = Ext.extend(Ext.Panel, {
           xtype: 'radiogroup',
           name: 'chooseRepositoryType',
           columns: 1,
-          items: [types],
+          items: [typeItems],
           listeners: {
             change: function(){
               Ext.getCmp('move-next').setDisabled(false);
@@ -175,21 +199,28 @@ Sonia.repository.ImportPanel = Ext.extend(Ext.Panel, {
             boxLabel: 'Import from directory',
             name: 'importType', 
             inputValue: 'directory',
-            disabled: false
+            disabled: false,
+            helpText: this.importTypeDirectoryHelpText
           },{
             id: 'importTypeURL',
-            boxLabel: 'Import from URL',
+            boxLabel: 'Import from url',
             name: 'importType', 
             inputValue: 'url',
             checked: false,
-            disabled: true
+            disabled: true,
+            helpText: this.importTypeURLHelpText
           },{
             id: 'importTypeFile',
-            boxLabel: 'Import from File',
+            boxLabel: 'Import from file',
             name: 'importType', 
             inputValue: 'file',
             checked: false,
-            disabled: true
+            disabled: true,
+            helpText: this.importTypeFileHelpText
+          },{
+            xtype: 'scmTip',
+            content: this.tipImportType,
+            width: '100%'
           }],
           listeners: {
             change: function(){
@@ -209,33 +240,46 @@ Sonia.repository.ImportPanel = Ext.extend(Ext.Panel, {
           fieldLabel: 'Repository name',
           name: 'importUrlName', 
           type: 'textfield',
-          disabled: false
+          disabled: false,
+          helpText: this.importUrlNameHelpText
         },{
           id: 'importUrl',
           xtype: 'textfield',
           fieldLabel: 'Import URL',
           name: 'importUrl', 
-          disabled: false
+          disabled: false,
+          helpText: this.importUrlHelpText
+        },{
+          xtype: 'scmTip',
+          content: 'Please insert name and remote url of the repository.',
+          width: '100%'
         }]
       },{
         id: 'importFileLayout',
         layout: 'form',
-        defaults: {
-          width: 250
-        },
         items: [{
           id: 'importFileName',
           xtype: 'textfield',
           fieldLabel: 'Repository name',
           name: 'importFileName', 
           type: 'textfield',
-          disabled: false
+          width: 250,
+          helpText: this.importFileNameHelpText
         },{
           id: 'importFile',
-          xtype: 'textfield',
+          xtype: 'fileuploadfield',
           fieldLabel: 'Import File',
+          ctCls: 'import-fu',
           name: 'importFile', 
-          disabled: false
+          helpText: this.importFileHelpText,
+          cls: 'import-fu',
+          buttonCfg: {
+            iconCls: 'upload-icon'
+          }
+        },{
+          xtype: 'scmTip',
+          content: 'Please insert name and upload the repository file.',
+          width: '100%'
         }]
       },{
         id: 'importFinishedLayout',

scm-webapp/src/main/webapp/resources/js/util/sonia.util.tip.js

@@ -0,0 +1,77 @@
+/*
+ * Copyright (c) 2010, Sebastian Sdorra
+ * All rights reserved.
+ *
+ * Redistribution and use in source and binary forms, with or without
+ * modification, are permitted provided that the following conditions are met:
+ *
+ * 1. Redistributions of source code must retain the above copyright notice,
+ *    this list of conditions and the following disclaimer.
+ * 2. Redistributions in binary form must reproduce the above copyright notice,
+ *    this list of conditions and the following disclaimer in the documentation
+ *    and/or other materials provided with the distribution.
+ * 3. Neither the name of SCM-Manager; nor the names of its
+ *    contributors may be used to endorse or promote products derived from this
+ *    software without specific prior written permission.
+ *
+ * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+ * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+ * DISCLAIMED.  IN NO EVENT SHALL THE REGENTS OR CONTRIBUTORS BE LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
+ * (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
+ * LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON
+ * ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS
+ * SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ *
+ * http://bitbucket.org/sdorra/scm-manager
+ *
+ */
+   
+Sonia.util.Tip = Ext.extend(Ext.BoxComponent, {
+
+  tpl: new Ext.XTemplate('\
+    <div id="" class="x-tip" style="position: inherit; visibility: visible;">\
+      <div class="x-tip-tl">\
+        <div class="x-tip-tr">\
+          <div class="x-tip-tc">\
+            <div class="x-tip-header x-unselectable">\
+              <span class="x-tip-header-text"></span>\
+            </div>\
+          </div>\
+        </div>\
+      </div>\
+      <div class="x-tip-bwrap">\
+        <div class="x-tip-ml">\
+          <div class="x-tip-mr">\
+            <div class="x-tip-mc">\
+              <div class="x-tip-body" style="height: auto; width: auto;">\
+                {content}\
+              </div>\
+            </div>\
+          </div>\
+        </div>\
+        <div class="x-tip-bl x-panel-nofooter">\
+          <div class="x-tip-br">\
+            <div class="x-tip-bc"></div>\
+          </div>\
+        </div>\
+      </div>\
+    </div>'),
+  
+  constructor: function(config) {
+    config = config || {};
+    var cl = 'scm-tip';
+    if (config['class']){
+      cl += ' ' + config['class'];
+    }
+    config.xtype = 'box';
+    this.html = this.tpl.apply({content: config.content});
+    Sonia.util.Tip.superclass.constructor.apply(this, arguments);
+  }
+
+});
+
+// register xtype
+Ext.reg('scmTip', Sonia.util.Tip);