From 5421ea77a6083d9e5f320c9d0e3e48d7fe8674e3 Mon Sep 17 00:00:00 2001 From: Damien Churchill Date: Tue, 7 Oct 2008 21:08:54 +0000 Subject: [PATCH] initial create torrent window design --- .../templates/ajax/static/js/deluge-add.js | 71 ++++++++++++++++++- .../templates/ajax/static/js/deluge-ui.js | 4 +- .../ajax/static/themes/classic/style.css | 60 +++++++++++++++- .../webui/templates/ajax/template_style.css | 17 +++-- 4 files changed, 140 insertions(+), 12 deletions(-) diff --git a/deluge/ui/webui/templates/ajax/static/js/deluge-add.js b/deluge/ui/webui/templates/ajax/static/js/deluge-add.js index 009753b11..869e02033 100644 --- a/deluge/ui/webui/templates/ajax/static/js/deluge-add.js +++ b/deluge/ui/webui/templates/ajax/static/js/deluge-add.js @@ -31,12 +31,12 @@ Deluge.Widgets.AddWindow = new Class({ } }); -Deluge.Widgets.CreateWindow = new Class({ +Deluge.Widgets.CreateTorrent = new Class({ Extends: Widgets.Window, options: { width: 400, - height: 200, + height: 400, title: Deluge.Strings.get('Create Torrent'), url: '/template/render/html/window_create_torrent.html' }, @@ -47,6 +47,71 @@ Deluge.Widgets.CreateWindow = new Class({ }, loaded: function(event) { - + this.tabs = new Deluge.Widgets.CreateTorrent.Tabs(this.content.getElement('div')); + this.content.addClass('createTorrent'); + } +}); + +Deluge.Widgets.CreateTorrent.Tabs = new Class({ + Extends: Widgets.Tabs, + + initialize: function(element) { + this.parent(element); + this.info = new Deluge.Widgets.CreateTorrent.InfoTab(); + this.trackers = new Deluge.Widgets.CreateTorrent.TrackersTab(); + this.webseeds = new Deluge.Widgets.CreateTorrent.WebseedsTab(); + this.options = new Deluge.Widgets.CreateTorrent.OptionsTab(); + this.addPage(this.info); + this.addPage(this.trackers); + this.addPage(this.webseeds); + this.addPage(this.options); + } +}); + +Deluge.Widgets.CreateTorrent.InfoTab = new Class({ + Extends: Widgets.TabPage, + + options: { + url: '/template/render/html/create_torrent_info.html' + }, + + initialize: function() { + this.parent('Info'); + } +}); + +Deluge.Widgets.CreateTorrent.TrackersTab = new Class({ + Extends: Widgets.TabPage, + + options: { + url: '/template/render/html/create_torrent_trackers.html' + }, + + initialize: function() { + this.parent('Trackers'); + } +}); + +Deluge.Widgets.CreateTorrent.WebseedsTab = new Class({ + Extends: Widgets.TabPage, + + options: { + url: '/template/render/html/create_torrent_webseeds.html' + }, + + initialize: function() { + this.parent('Webseeds'); + } +}); + +Deluge.Widgets.CreateTorrent.OptionsTab = new Class({ + Extends: Widgets.TabPage, + + options: { + url: '/template/render/html/create_torrent_options.html' + }, + + initialize: function() { + this.parent('Options'); } }); diff --git a/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js b/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js index bd98c8b78..8a0958270 100644 --- a/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js +++ b/deluge/ui/webui/templates/ajax/static/js/deluge-ui.js @@ -25,7 +25,7 @@ Deluge.UI = { }; this.loadUi.delay(250, this); window.addEvent('load', function(e) { - this.vbox.calculatePositions(); + if (this.vbox) this.vbox.calculatePositions(); }.bindWithEvent(this)); }, @@ -34,7 +34,7 @@ Deluge.UI = { this.toolbar = new Deluge.Widgets.Toolbar(); this.addWindow = new Deluge.Widgets.AddWindow(); - this.createWindow = new Deluge.Widgets.CreateWindow(); + this.createWindow = new Deluge.Widgets.CreateTorrent(); if (Browser.Engine.name != 'trident') { this.prefsWindow = new Deluge.Widgets.PreferencesWindow(); } diff --git a/deluge/ui/webui/templates/ajax/static/themes/classic/style.css b/deluge/ui/webui/templates/ajax/static/themes/classic/style.css index 2c7eb454b..6dd2bea65 100644 --- a/deluge/ui/webui/templates/ajax/static/themes/classic/style.css +++ b/deluge/ui/webui/templates/ajax/static/themes/classic/style.css @@ -200,7 +200,7 @@ ul.moouiMenu li.moouiMenuSep:hover { } .moouiWindow { - background: #426187; + background: #405a79; border: 1px solid #1c2431; -moz-border-radius: 5px; -webkit-border-radius: 5px; @@ -249,7 +249,7 @@ form .disabled { color: Gray; } -form .deluge_button, button.deluge_button { +form .deluge_button, button.deluge_button, button.delugeButton { background-color: #37506f; border:1px solid #68a; cursor: pointer; @@ -261,7 +261,7 @@ form .deluge_button, button.deluge_button { margin: 2px; } -form .deluge_button:hover, button.deluge_button:hover { +form .deluge_button:hover, button.deluge_button:hover, button.delugeButton:hover { background-color:#68a; } @@ -354,3 +354,57 @@ label.fluid { line-height: 5px; margin: 2px; } + +#createTorrentTabs .moouiTabPage { + height: 110px; +} + +#createTorrentTabs textarea { + width: 360px; + height: 95px; + margin: 0; +} + +#createTorrentFiles { + height: 110px; + width: 370px; + margin: 10px; + border:1px solid #23344b; + background: #99acc3; +} + +#createTorrentTrackersTable { + margin: 5px; + float: left; + width: 280px; + height: 95px; + background: #99acc3; + border:1px solid #23344b; + color: Black; +} + +#createTorrentTrackersTable thead tr { + background: #304663 url(/static/images/simple_bg_flipped.jpg) repeat-x; + color: White; +} + +#createTorrentTabs .tier { + width: 70px; +} + +#createTorrentTabs .tracker { + width: 230px; +} + +#createTorrentTrackersButtons { + float: right; + width: 80px; +} + +#createTorrentTrackersButtons button { + width: 70px; +} + +#createButtons { + float: right; +} diff --git a/deluge/ui/webui/templates/ajax/template_style.css b/deluge/ui/webui/templates/ajax/template_style.css index 7719945f6..ce027fe8e 100644 --- a/deluge/ui/webui/templates/ajax/template_style.css +++ b/deluge/ui/webui/templates/ajax/template_style.css @@ -43,22 +43,31 @@ html, body { padding: 5px; } -#details .moouiTabs li { +.moouiTabs { + +} + +.moouiTabs li { + position: relative; + top: 1px; background: #37506f; + border: 1px solid #364961; + border-bottom: none; padding: 7px; font-size: 1.1em; } -#details .moouiTabs li:hover { +.moouiTabs li:hover { background: #426187; } -#details li.moouiTabActive { +li.moouiTabActive { background: #426187; } -#details .moouiTabPage { +.moouiTabPage { background: #426187; + border: 1px solid #364961; padding: 5px; -moz-border-radius:0 5px 5px 5px; -webkit-border-radius: 0 5px 5px 5px;