Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-14 01:15:44 +01:00
Code Issues Packages Projects Releases Activity

improve layout of import wizard

Browse Source
This commit is contained in:
Sebastian Sdorra
2014-11-28 13:58:18 +01:00
parent 054ea07a34
commit c5bb3c70b6
5 changed files with 157 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
scm-webapp/src/main/webapp/index.mustache
View File

@@ -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>

14
scm-webapp/src/main/webapp/resources/css/style.css
View File

@@ -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;
}

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

@@ -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;

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

@@ -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);
types.push({
typeItems.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',

77
scm-webapp/src/main/webapp/resources/js/util/sonia.util.tip.js Normal file
View File

@@ -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);