From 005db434f80c93423ab02731710ecde6f379baaa Mon Sep 17 00:00:00 2001 From: Benjamin Dykstra Date: Fri, 2 Oct 2015 01:41:29 +0000 Subject: [PATCH] [#2769] [WebUI] Simplified torrent file upload UX Previously, the process for uploading a file in the Web-UI required three steps. Click 'File' to open the 'Add from File' window. Click 'Browse' to select the file. Finally, click 'Add' to upload the file. These steps have been combined into one, making the process much easier. Now, clicking 'File' opens the file browser directly. After a file is selected, it is uploaded automatically. --- deluge/ui/web/js/deluge-all/add/AddWindow.js | 95 ++++++++++++-- deluge/ui/web/js/deluge-all/add/FileWindow.js | 117 ------------------ 2 files changed, 83 insertions(+), 129 deletions(-) delete mode 100644 deluge/ui/web/js/deluge-all/add/FileWindow.js diff --git a/deluge/ui/web/js/deluge-all/add/AddWindow.js b/deluge/ui/web/js/deluge-all/add/AddWindow.js index a2027109f..67df31eef 100644 --- a/deluge/ui/web/js/deluge-all/add/AddWindow.js +++ b/deluge/ui/web/js/deluge-all/add/AddWindow.js @@ -32,8 +32,35 @@ Ext.namespace('Deluge.add'); -Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { +// This override allows file upload buttons to contain icons +Ext.override(Ext.ux.form.FileUploadField, { + onRender : function(ct, position){ + Ext.ux.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.createFileInput(); + + var btnCfg = Ext.applyIf(this.buttonCfg || {}, { + text: this.buttonText + }); + this.button = new Ext.Button(Ext.apply(btnCfg, { + renderTo: this.wrap, + cls: 'x-form-file-btn' + (btnCfg.iconCls ? ' x-btn-text-icon' : '') + })); + + if(this.buttonOnly){ + this.el.hide(); + this.wrap.setWidth(this.button.getEl().getWidth()); + } + + this.bindListeners(); + this.resizeEl = this.positionEl = this.wrap; + } +}); + +Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { title: _('Add Torrents'), layout: 'border', width: 470, @@ -94,10 +121,25 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { margins: '5 5 5 5', bbar: new Ext.Toolbar({ items: [{ - iconCls: 'x-deluge-add-file', - text: _('File'), - handler: this.onFile, - scope: this + id: 'fileUploadForm', + xtype: 'form', + layout: 'fit', + baseCls: 'x-plain', + fileUpload: true, + items: [{ + buttonOnly: true, + xtype: 'fileuploadfield', + id: 'torrentFile', + name: 'file', + buttonCfg: { + iconCls: 'x-deluge-add-file', + text: _('File') + }, + listeners: { + scope: this, + 'fileselected': this.onFileSelected + } + }] }, { text: _('Url'), iconCls: 'icon-add-url', @@ -117,6 +159,7 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { }) }); + this.fileUploadForm = Ext.getCmp('fileUploadForm').getForm(); this.optionsPanel = this.add(new Deluge.add.OptionsPanel()); this.on('hide', this.onHide, this); this.on('show', this.onShow, this); @@ -125,6 +168,8 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { clear: function() { this.list.getStore().removeAll(); this.optionsPanel.clear(); + // Reset upload form so handler fires when a canceled file is reselected + this.fileUploadForm.reset(); }, onAddClick: function() { @@ -141,7 +186,7 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { deluge.client.web.add_torrents(torrents, { success: function(result) { } - }) + }); this.clear(); this.hide(); }, @@ -188,15 +233,41 @@ Deluge.add.AddWindow = Ext.extend(Deluge.add.Window, { this.url.on('add', this.onTorrentAdd, this); } - if (!this.file) { - this.file = new Deluge.add.FileWindow(); - this.file.on('beforeadd', this.onTorrentBeforeAdd, this); - this.file.on('add', this.onTorrentAdd, this); - } - this.optionsPanel.form.getDefaults(); }, + onFileSelected: function() { + if (this.fileUploadForm.isValid()) { + this.torrentId = this.createTorrentId(); + this.fileUploadForm.submit({ + url: deluge.config.base + 'upload', + waitMsg: _('Uploading your torrent...'), + success: this.onUploadSuccess, + scope: this + }); + var name = this.fileUploadForm.findField('torrentFile').value; + name = name.split('\\').slice(-1)[0]; + this.onTorrentBeforeAdd(this.torrentId, name); + } + }, + + onUploadSuccess: function(fp, upload) { + if (upload.result.success) { + var filename = upload.result.files[0]; + this.fileUploadForm.findField('torrentFile').setValue(''); + deluge.client.web.get_torrent_info(filename, { + success: this.onGotInfo, + scope: this, + filename: filename + }); + } + }, + + onGotInfo: function(info, obj, response, request) { + info.filename = request.options.filename; + this.onTorrentAdd(this.torrentId, info); + }, + onTorrentBeforeAdd: function(torrentId, text) { var store = this.list.getStore(); store.loadData([[torrentId, null, text]], true); diff --git a/deluge/ui/web/js/deluge-all/add/FileWindow.js b/deluge/ui/web/js/deluge-all/add/FileWindow.js deleted file mode 100644 index 29185d9c5..000000000 --- a/deluge/ui/web/js/deluge-all/add/FileWindow.js +++ /dev/null @@ -1,117 +0,0 @@ -/*! - * Deluge.add.File.js - * - * Copyright (c) Damien Churchill 2009-2010 - * - * This program is free software; you can redistribute it and/or modify - * it under the terms of the GNU General Public License as published by - * the Free Software Foundation; either version 3, or (at your option) - * any later version. - * - * This program is distributed in the hope that it will be useful, - * but WITHOUT ANY WARRANTY; without even the implied warranty of - * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the - * GNU General Public License for more details. - * - * You should have received a copy of the GNU General Public License - * along with this program. If not, write to: - * The Free Software Foundation, Inc., - * 51 Franklin Street, Fifth Floor - * Boston, MA 02110-1301, USA. - * - * In addition, as a special exception, the copyright holders give - * permission to link the code of portions of this program with the OpenSSL - * library. - * You must obey the GNU General Public License in all respects for all of - * the code used other than OpenSSL. If you modify file(s) with this - * exception, you may extend this exception to your version of the file(s), - * but you are not obligated to do so. If you do not wish to do so, delete - * this exception statement from your version. If you delete this exception - * statement from all source files in the program, then also delete it here. - */ -Ext.ns('Deluge.add'); - -/** - * @class Deluge.add.FileWindow - * @extends Deluge.add.Window - */ -Deluge.add.FileWindow = Ext.extend(Deluge.add.Window, { - - title: _('Add from File'), - layout: 'fit', - width: 350, - height: 115, - modal: true, - plain: true, - buttonAlign: 'center', - closeAction: 'hide', - bodyStyle: 'padding: 10px 5px;', - iconCls: 'x-deluge-add-file', - - initComponent: function() { - Deluge.add.FileWindow.superclass.initComponent.call(this); - this.addButton(_('Add'), this.onAddClick, this); - - this.form = this.add({ - xtype: 'form', - baseCls: 'x-plain', - labelWidth: 35, - autoHeight: true, - fileUpload: true, - items: [{ - xtype: 'fileuploadfield', - id: 'torrentFile', - width: 280, - height: 24, - emptyText: _('Select a torrent'), - fieldLabel: _('File'), - name: 'file', - buttonCfg: { - text: _('Browse') + '...' - } - }] - }); - }, - - // private - onAddClick: function(field, e) { - if (this.form.getForm().isValid()) { - this.torrentId = this.createTorrentId(); - this.form.getForm().submit({ - url: deluge.config.base + 'upload', - waitMsg: _('Uploading your torrent...'), - failure: this.onUploadFailure, - success: this.onUploadSuccess, - scope: this - }); - var name = this.form.getForm().findField('torrentFile').value; - name = name.split('\\').slice(-1)[0]; - this.fireEvent('beforeadd', this.torrentId, name); - } - }, - - // private - onGotInfo: function(info, obj, response, request) { - info['filename'] = request.options.filename; - this.fireEvent('add', this.torrentId, info); - }, - - // private - onUploadFailure: function(form, action) { - this.hide(); - }, - - // private - onUploadSuccess: function(fp, upload) { - this.hide(); - if (upload.result.success) { - var filename = upload.result.files[0]; - this.form.getForm().findField('torrentFile').setValue(''); - deluge.client.web.get_torrent_info(filename, { - success: this.onGotInfo, - scope: this, - filename: filename - }); - } - } -});