Author: damoxc
Revision: 4961
Log:
replace the "File" button with a fileuploadbutton
Diff:
Modified: trunk/deluge/ui/web/css/deluge.css
===================================================================
--- trunk/deluge/ui/web/css/deluge.css 2009-03-31 00:51:43 UTC (rev 4960)
+++ trunk/deluge/ui/web/css/deluge.css 2009-03-31 01:16:17 UTC (rev 4961)
@@ -95,6 +95,15 @@
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;
Modified: trunk/deluge/ui/web/css/ext-all.css
===================================================================
--- trunk/deluge/ui/web/css/ext-all.css 2009-03-31 00:51:43 UTC (rev 4960)
+++ trunk/deluge/ui/web/css/ext-all.css 2009-03-31 01:16:17 UTC (rev 4961)
@@ -48,4 +48,32 @@
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
Modified: trunk/deluge/ui/web/js/deluge-add.js
===================================================================
--- trunk/deluge/ui/web/js/deluge-add.js 2009-03-31 00:51:43 UTC (rev
4960)
+++ trunk/deluge/ui/web/js/deluge-add.js 2009-03-31 01:16:17 UTC (rev
4961)
@@ -151,12 +151,15 @@
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'),
Modified: trunk/deluge/ui/web/js/deluge-ext.js
===================================================================
--- trunk/deluge/ui/web/js/deluge-ext.js 2009-03-31 00:51:43 UTC (rev
4960)
+++ trunk/deluge/ui/web/js/deluge-ext.js 2009-03-31 01:16:17 UTC (rev
4961)
@@ -137,4 +137,124 @@
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
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"deluge-commit" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/deluge-commit?hl=en
-~----------~----~----~----~------~----~------~--~---
