initial create torrent window design

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');
     }
 });

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();
         }

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

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;