Skip to content
Browse files

Changes to CSS for new Settings UI

  • Loading branch information...
1 parent fc7c7f1 commit 8374800ef204c1ab06d1f0b09f833e6f7bd492b1 @marioestrada marioestrada committed Apr 3, 2012
Showing with 108 additions and 25 deletions.
  1. +77 −10 dialogs.css
  2. +9 −6 main.js
  3. +22 −9 webui.js
View
87 dialogs.css
@@ -369,18 +369,78 @@
width: 375px;
}
+.panel-hider{
+ z-index: 499;
+ overflow: hidden;
+ position: absolute;
+ top: 85px;
+ bottom: 30px;
+ left: 0;
+ right: 0;
+ pointer-events: none;
+}
+.panel-hider .dlg-window{
+ position: absolute;
+ display: block;
+ height: 100%;
+ right: 0;
+ left: 0;
+ top: -100%;
+ border: 0;
+ -webkit-border-radius: 0;
+ -moz-border-radius: 0;
+ -ms-border-radius: 0;
+ -o-border-radius: 0;
+ border-radius: 0;
+ -webkit-box-shadow: none;
+ -moz-box-shadow: none;
+ -ms-box-shadow: none;
+ -o-box-shadow: none;
+ box-shadow: none;
+ -webkit-transition: top 0.25s linear;
+ -moz-transition: top 0.25s linear;
+ -ms-transition: top 0.25s linear;
+ -o-transition: top 0.25s linear;
+ transition: top 0.25s linear;
+}
+.panel-hider.open{
+ pointer-events: auto;
+}
+.panel-hider.open .dlg-window{
+/* height: 100%;*/
+ top: 0;
+}
+
/**************************************************
* DIALOG: Settings
**************************************************/
#dlgSettings {
- width: 680px;
+ width: 100%;
font-family: Helvetica, Arial, sans-serif;
font-size: 12px;
}
-#dlgSettings-head {
+#dlgSettings .dlg-body{
+ margin: 0;
+}
+
+/*#dlgSettings-head {
background-image: url(./images/settings.png);
+}*/
+
+#dlgSettings-title{
+ font-weight: normal;
+ font-size: 24px;
+ padding: 10px 0 5px;
+ margin: 0 20px 5px 170px;
+ border-bottom: 1px solid #ddd;
+}
+
+#dlgSettings .dlg-body,
+#dlgSettings-form{
+ height: 100%;
+ width: 100%;
}
#dlgSettings-menuCont {
@@ -394,12 +454,21 @@
top: 0;
width: 149px;
}
+#dlgSettings-menuCont h2{
+ font-weight: normal;
+ font-size: 22px;
+ padding: 10px 0 10px 10px;
+}
#dlgSettings-menuCont > div {
display: block !important;
min-width: 100%;
}
+#dlgSettings-advOptList{
+ min-height: 400px;
+}
+
#dlgSettings-menu {
list-style: none;
white-space: nowrap;
@@ -411,6 +480,7 @@
color: #333;
font-size: 12px;
border: 1px solid transparent;
+ text-indent: 10px;
border-left: 0;
border-right: 0;
}
@@ -427,12 +497,11 @@
}
#dlgSettings .settings-pane {
- height: 400px;
left: 150px;
overflow: auto;
- padding: 5px 10px;
+ padding: 5px 20px;
position: relative;
- width: 510px;
+ width: 560px;
background: #fff;
}
@@ -614,23 +683,21 @@ input[id="gui.dlrate_menu"] {
position: relative;
background: #fff;
margin: 8px 0;
- padding: 5px 15px 10px;
+ padding: 10px 15px 15px;
border: 0;
- border-top: 1px solid #ddd;
+ border-top: 1px solid #e2e2e2;
-webkit-border-radius: 0;
-moz-border-radius: 0;
-ms-border-radius: 0;
-o-border-radius: 0;
border-radius: 0;
- -webkit-box-shadow: 0 1px 0 #fdfdfd inset;
-/* background-image: -webkit-linear-gradient(top, #f2f2f2, #fff);*/
}
#dlgSettings fieldset legend{
padding: 0 5px;
font-family: Helvetica, Arial, sans-serif;
font-weight: normal;
- font-size: 16px;
+ font-size: 18px;
/* float: left;*/
}
#dlgSettings input.btn{
View
15 main.js
@@ -700,7 +700,7 @@ function setupDialogManager() {
DialogManager.init();
- ["About", "Add", "AddEditRSSFeed", "AddURL", "AddLabel", "Props", "RSSDownloader", "Settings"].each(function(k) {
+ ["About", "Add", "AddEditRSSFeed", "AddURL", "AddLabel", "Props", "RSSDownloader"/*, "Settings" */].each(function(k) {
var isModal = ["AddEditRSSFeed", "Props"].contains(k);
DialogManager.add(k, isModal, {
"Add": function() { utWebUI.getDirectoryList(); }
@@ -1000,14 +1000,16 @@ function setupSettings() {
// -- OK Button
$("DLG_SETTINGS_03").addEvent("click", function() {
- DialogManager.hide("Settings");
+ //DialogManager.hide("Settings");
+ utWebUI.hideSettings();
utWebUI.setSettings();
});
// -- Cancel Button
$("DLG_SETTINGS_04").addEvent("click", function(ev) {
- $("dlgSettings").getElement(".dlg-close").fireEvent("click", ev);
+ utWebUI.hideSettings(true);
+ //$("dlgSettings").getElement(".dlg-close").fireEvent("click", ev);
// Fire the "Close" button's click handler to make sure
// controls are restored if necessary
});
@@ -1020,9 +1022,10 @@ function setupSettings() {
// -- Close Button
- $("dlgSettings").getElement(".dlg-close").addEvent("click", function(ev) {
- utWebUI.loadSettings();
- });
+ /*$("dlgSettings").getElement(".dlg-close").addEvent("click", function(ev) {
+ utWebUI.hideSettings(true);
+ //utWebUI.loadSettings();
+ });*/
// -- Form Submission
View
31 webui.js
@@ -4,7 +4,7 @@ Copyright (c) 2011 BitTorrent, Inc. All rights reserved.
Use of this source code is governed by a BSD-style that can be
found in the LICENSE file.
*/
-(function(){
+(function(jQuery){
var LANG_LIST = LANG_LIST || {};
var urlBase = window.location.pathname.substr(0, window.location.pathname.indexOf("/gui"));
@@ -2476,11 +2476,11 @@ var utWebUI = {
// Insert custom keys...
this.settings["multi_day_transfer_mode"] = tcmode;
-{ // TODO: Remove this once backend support is stable (requires 3.0+)
- this.settings["sched_table"] = [this.settings["sched_table"], "033000330020000000000000300303003222000000000000000303003020000000000000033003003111010010100101000303003101011010100111300303003101010110100001033020330111010010110111"].pick();
- this.settings["search_list_sel"] = [this.settings["search_list_sel"], 0].pick();
- this.settings["search_list"] = [this.settings["search_list"], "BitTorrent|http://www.bittorrent.com/search?client=%v&search=\r\nGoogle|http://google.com/search?q=filetype%3Atorrent+\r\nMininova|http://www.mininova.org/search/?cat=0&search=\r\nVuze|http://search.vuze.com/xsearch/?q="].pick();
-}
+ { // TODO: Remove this once backend support is stable (requires 3.0+)
+ this.settings["sched_table"] = [this.settings["sched_table"], "033000330020000000000000300303003222000000000000000303003020000000000000033003003111010010100101000303003101011010100111300303003101010110100001033020330111010010110111"].pick();
+ this.settings["search_list_sel"] = [this.settings["search_list_sel"], 0].pick();
+ this.settings["search_list"] = [this.settings["search_list"], "BitTorrent|http://www.bittorrent.com/search?client=%v&search=\r\nGoogle|http://google.com/search?q=filetype%3Atorrent+\r\nMininova|http://www.mininova.org/search/?cat=0&search=\r\nVuze|http://search.vuze.com/xsearch/?q="].pick();
+ }
// Cleanup
delete json.settings;
@@ -2501,7 +2501,9 @@ var utWebUI = {
else
this.config.lang = (this.defConfig.lang || "en");
}
- if (window.utweb) return;
+ if (window.utweb)
+ return;
+
loadLangStrings({
"lang": this.config.lang,
"onload": (function() {
@@ -2842,7 +2844,15 @@ var utWebUI = {
},
"showSettings": function() {
- DialogManager.show("Settings");
+ jQuery("#settingsHider").addClass('open');
+ //DialogManager.show("Settings");
+ },
+
+ "hideSettings": function(load_settings) {
+ if(load_settings)
+ utWebUI.loadSettings();
+ jQuery("#settingsHider").removeClass('open');
+ //DialogManager.show("Settings");
},
"searchExecute": function() {
@@ -4814,6 +4824,9 @@ var utWebUI = {
if (this.config) {
this.config.activeSettingsPane = id;
}
+ //console.log('#tab_' + id);
+
+ jQuery('#dlgSettings-title').text(jQuery('#tab_' + id).text() || "Web UI");
},
"fdFormatRow": function(values, index) {
@@ -5026,4 +5039,4 @@ var utWebUI = {
window.isGuest = isGuest;
window.utWebUI = utWebUI;
-})();
+})(window.jQuery);

0 comments on commit 8374800

Please sign in to comment.
Something went wrong with that request. Please try again.