From 9b107359a47d6a9147af02d96c7abdd39d795b3c Mon Sep 17 00:00:00 2001 From: Damien Churchill Date: Tue, 31 Mar 2009 01:16:17 +0000 Subject: [PATCH] replace the "File" button with a fileuploadbutton --- deluge/ui/web/css/deluge.css | 9 +++ deluge/ui/web/css/ext-all.css | 28 ++++++++ deluge/ui/web/js/deluge-add.js | 13 ++-- deluge/ui/web/js/deluge-ext.js | 122 ++++++++++++++++++++++++++++++++- 4 files changed, 166 insertions(+), 6 deletions(-) diff --git a/deluge/ui/web/css/deluge.css b/deluge/ui/web/css/deluge.css index e0f58cc77..972888485 100644 --- a/deluge/ui/web/css/deluge.css +++ b/deluge/ui/web/css/deluge.css @@ -95,6 +95,15 @@ input { background: url('/icons/add.png') no-repeat 2px; } +.x-deluge-add-file { + background: url('/icons/add_file.png'); + padding-left: 20px; +} + +.x-form-file-wrap, .x-form-file { + cursor: pointer; +} + /* Add Url Window */ .x-deluge-add-url-window-icon { background: url('/icons/add_url.png') no-repeat 2px; diff --git a/deluge/ui/web/css/ext-all.css b/deluge/ui/web/css/ext-all.css index a4605a146..eb97ddc0a 100644 --- a/deluge/ui/web/css/ext-all.css +++ b/deluge/ui/web/css/ext-all.css @@ -48,4 +48,32 @@ html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,bloc overflow:hidden; border-left:1px solid #eee; border-right:1px solid #d0d0d0; +} + +/* + * FileUploadField component styles + */ +.x-form-file-wrap { + position: relative; + height: 22px; +} +.x-form-file-wrap .x-form-file { + position: absolute; + right: 0; + -moz-opacity: 0; + filter:alpha(opacity: 0); + opacity: 0; + z-index: 2; + height: 22px; +} +.x-form-file-wrap .x-form-file-btn { + position: absolute; + right: 0; + z-index: 1; +} +.x-form-file-wrap .x-form-file-text { + position: absolute; + left: 0; + z-index: 3; + color: #777; } \ No newline at end of file diff --git a/deluge/ui/web/js/deluge-add.js b/deluge/ui/web/js/deluge-add.js index 1b134e039..2773c2f8a 100644 --- a/deluge/ui/web/js/deluge-add.js +++ b/deluge/ui/web/js/deluge-add.js @@ -151,12 +151,15 @@ Deluge.Add.Grid = new Ext.grid.GridPanel({ margins: '5 5 5 5', bbar: new Ext.Toolbar({ items: [ - { + new Ext.form.FileUploadField({ id: 'file', - cls: 'x-btn-text-icon', - text: _('File'), - icon: '/icons/add_file.png' - }, { + buttonOnly: true, + buttonCfg: { + cls: 'x-btn-text-icon', + icon: '/icons/add_file.png', + text: _('File') + } + }), { id: 'url', cls: 'x-btn-text-icon', text: _('Url'), diff --git a/deluge/ui/web/js/deluge-ext.js b/deluge/ui/web/js/deluge-ext.js index 07a127894..77aea7a6e 100644 --- a/deluge/ui/web/js/deluge-ext.js +++ b/deluge/ui/web/js/deluge-ext.js @@ -137,4 +137,124 @@ Ext.tree.ColumnNodeUI = Ext.extend(Ext.tree.TreeNodeUI, { this.anchor = cs[3]; this.textNode = cs[3].firstChild; } -}); \ No newline at end of file +}); + +Ext.form.FileUploadField = Ext.extend(Ext.form.TextField, { + /** + * @cfg {String} buttonText The button text to display on the upload button (defaults to + * 'Browse...'). Note that if you supply a value for {@link #buttonCfg}, the buttonCfg.text + * value will be used instead if available. + */ + buttonText: 'Browse...', + /** + * @cfg {Boolean} buttonOnly True to display the file upload field as a button with no visible + * text field (defaults to false). If true, all inherited TextField members will still be available. + */ + buttonOnly: false, + /** + * @cfg {Number} buttonOffset The number of pixels of space reserved between the button and the text field + * (defaults to 3). Note that this only applies if {@link #buttonOnly} = false. + */ + buttonOffset: 3, + /** + * @cfg {Object} buttonCfg A standard {@link Ext.Button} config object. + */ + + // private + readOnly: true, + + /** + * @hide + * @method autoSize + */ + autoSize: Ext.emptyFn, + + // private + initComponent: function(){ + Ext.form.FileUploadField.superclass.initComponent.call(this); + + this.addEvents( + /** + * @event fileselected + * Fires when the underlying file input field's value has changed from the user + * selecting a new file from the system file selection dialog. + * @param {Ext.form.FileUploadField} this + * @param {String} value The file value returned by the underlying file input field + */ + 'fileselected' + ); + }, + + // private + onRender : function(ct, position){ + Ext.form.FileUploadField.superclass.onRender.call(this, ct, position); + + this.wrap = this.el.wrap({cls:'x-form-field-wrap x-form-file-wrap'}); + this.el.addClass('x-form-file-text'); + this.el.dom.removeAttribute('name'); + + this.fileInput = this.wrap.createChild({ + id: this.getFileInputId(), + name: this.name||this.getId(), + cls: 'x-form-file', + tag: 'input', + type: 'file', + size: 1 + }); + + var btnCfg = Ext.applyIf(this.buttonCfg || {}, { + text: this.buttonText + }); + this.button = new Ext.Button(Ext.apply(btnCfg, { + renderTo: this.wrap + })); + + if(this.buttonOnly){ + this.el.hide(); + this.wrap.setWidth(this.button.getEl().getWidth()); + } + + this.fileInput.on('change', function(){ + var v = this.fileInput.dom.value; + this.setValue(v); + this.fireEvent('fileselected', this, v); + }, this); + }, + + // private + getFileInputId: function(){ + return this.id+'-file'; + }, + + // private + onResize : function(w, h){ + Ext.form.FileUploadField.superclass.onResize.call(this, w, h); + + this.wrap.setWidth(w); + + if(!this.buttonOnly){ + var w = this.wrap.getWidth() - this.button.getEl().getWidth() - this.buttonOffset; + this.el.setWidth(w); + } + }, + + // private + preFocus : Ext.emptyFn, + + // private + getResizeEl : function(){ + return this.wrap; + }, + + // private + getPositionEl : function(){ + return this.wrap; + }, + + // private + alignErrorIcon : function(){ + this.errorIcon.alignTo(this.wrap, 'tl-tr', [2, 0]); + } + +}); +Ext.reg('fileuploadfield', Ext.form.FileUploadField); \ No newline at end of file