From d67fc13da4b2aad86e1aa03223074d3e9f829a5d Mon Sep 17 00:00:00 2001 From: Jordan Lee Date: Wed, 26 Oct 2011 23:19:38 +0000 Subject: [PATCH] (trunk web) the preferences dialog is now activated from a toolbar button. This is in preparation for merging about 80% of the scss code between the default and mobile versions of Clutch. Previously the mobile client had the prefs button in the footer and the default client had it in the popup menu. Now both have it in the toolbar instead. --- web/index.html | 3 +-- web/javascript/prefs-dialog.js | 6 +++++ web/javascript/transmission.js | 24 ++++++++++++------ web/style/transmission/common.css | 5 ++-- web/style/transmission/common.scss | 12 +++++---- web/style/transmission/images/Makefile.am | 4 +-- .../transmission/images/toolbar-wrench.png | Bin 0 -> 378 bytes web/style/transmission/images/wrench.png | Bin 337 -> 0 bytes 8 files changed, 35 insertions(+), 19 deletions(-) create mode 100644 web/style/transmission/images/toolbar-wrench.png delete mode 100644 web/style/transmission/images/wrench.png diff --git a/web/index.html b/web/index.html index 110e55f52..13ce2487e 100755 --- a/web/index.html +++ b/web/index.html @@ -44,6 +44,7 @@
+
@@ -376,7 +377,6 @@
  • Transmission Homepage
  • Transmission Tip Jar
  • -
  • Preferences
  • Statistics
  • Total Download Rate @@ -438,7 +438,6 @@
     
     
    -
     
    • diff --git a/web/javascript/prefs-dialog.js b/web/javascript/prefs-dialog.js index 40a6275a5..99ffb304b 100644 --- a/web/javascript/prefs-dialog.js +++ b/web/javascript/prefs-dialog.js @@ -298,6 +298,12 @@ function PrefsDialog(remote) { data.elements.root.dialog('open'); }; + this.close = function () + { + transmission.hideMobileAddressbar(); + data.elements.root.dialog('close'); + }, + this.shouldAddedTorrentsStart = function() { return data.elements.root.find('#start-added-torrents')[0].checked; diff --git a/web/javascript/transmission.js b/web/javascript/transmission.js index 129db0a89..6703198d3 100644 --- a/web/javascript/transmission.js +++ b/web/javascript/transmission.js @@ -26,6 +26,8 @@ Transmission.prototype = this.remote = new TransmissionRemote(this); this.inspector = new Inspector(this, this.remote); this.prefsDialog = new PrefsDialog(this.remote); + $(this.prefsDialog).bind('closed', $.proxy(this.onPrefsDialogClosed,this)); + this.isMenuEnabled = !isMobileDevice; // Initialize the implementation fields @@ -45,8 +47,7 @@ Transmission.prototype = $('#toolbar-remove').click($.proxy(this.removeClicked,this)); $('#toolbar-open').click($.proxy(this.openTorrentClicked,this)); $('#toolbar-select').click($.proxy(this.toggleSelectionClicked,this)); - - $('#prefs-button').click($.proxy(this.showPrefsDialog,this)); + $('#toolbar-prefs').click($.proxy(this.togglePrefsDialogClicked,this)); $('#upload_confirm_button').click($.proxy(this.confirmUploadClicked,this)); $('#upload_cancel_button').click($.proxy(this.hideUploadDialog,this)); @@ -549,9 +550,20 @@ Transmission.prototype = * *--------------------------------------------*/ - showPrefsDialog: function() + onPrefsDialogClosed: function() { + $('#toolbar-prefs').removeClass('selected'); + }, + + togglePrefsDialogClicked: function(ev) { - this.prefsDialog.show(); + var e = $('#toolbar-prefs'); + + if (e.hasClass('selected')) + this.prefsDialog.close(); + else { + e.addClass('selected'); + this.prefsDialog.show(); + } }, setFilterText: function(search) { @@ -600,10 +612,6 @@ Transmission.prototype = } else switch (id) { - case 'preferences': - this.showPrefsDialog(); - break; - case 'statistics': this.showStatsDialog(); break; diff --git a/web/style/transmission/common.css b/web/style/transmission/common.css index 2313225e9..f16ada6a9 100644 --- a/web/style/transmission/common.css +++ b/web/style/transmission/common.css @@ -35,7 +35,9 @@ div#toolbar > div#toolbar-pause { -moz-border-radius-topright: 5px; -moz-border- div#toolbar > div#toolbar-pause:active, div#toolbar > div#toolbar-pause:hover, div#toolbar > div#toolbar-pause.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pause.png"); /* fallback */ background-image: url("images/toolbar-pause.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pause.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pause.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pause.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pause.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pause.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } div#toolbar > div#toolbar-select { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; margin-left: 20px; } div#toolbar > div#toolbar-select:active, div#toolbar > div#toolbar-select:hover, div#toolbar > div#toolbar-select.selected { background-color: #7dc9f2; background-image: url("images/toolbar-pointer.png"); /* fallback */ background-image: url("images/toolbar-pointer.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-pointer.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-pointer.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-pointer.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-pointer.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-pointer.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } -div#toolbar > div#toolbar-inspector { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; } +div#toolbar > div#toolbar-prefs { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; border-right-width: 0px; float: right; } +div#toolbar > div#toolbar-prefs:active, div#toolbar > div#toolbar-prefs:hover, div#toolbar > div#toolbar-prefs.selected { background-color: #7dc9f2; background-image: url("images/toolbar-wrench.png"); /* fallback */ background-image: url("images/toolbar-wrench.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-wrench.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-wrench.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-wrench.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-wrench.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-wrench.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } +div#toolbar > div#toolbar-inspector { -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; float: right; margin-right: 8px; } div#toolbar > div#toolbar-inspector:active, div#toolbar > div#toolbar-inspector:hover, div#toolbar > div#toolbar-inspector.selected { background-color: #7dc9f2; background-image: url("images/toolbar-info.png"); /* fallback */ background-image: url("images/toolbar-info.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/toolbar-info.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/toolbar-info.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/toolbar-info.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/toolbar-info.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/toolbar-info.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } div#toolbar > *.disabled { opacity: 0.25; } @@ -235,7 +237,6 @@ div.torrent_footer #turtle-button { -moz-border-radius-topleft: 5px; -moz-border div.torrent_footer #turtle-button:active, div.torrent_footer #turtle-button:hover, div.torrent_footer #turtle-button.selected { background-color: #7dc9f2; background-image: url("images/turtle.png"); /* fallback */ background-image: url("images/turtle.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/turtle.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/turtle.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/turtle.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/turtle.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/turtle.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } div.torrent_footer #compact-button { -moz-border-radius-topleft: 5px; -moz-border-radius-bottomleft: 5px; border-top-left-radius: 5px; border-bottom-left-radius: 5px; -moz-border-radius-topright: 5px; -moz-border-radius-bottomright: 5px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; background-color: #dddddd; background-image: url("images/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(white), to(#bbbbbb)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, white, #bbbbbb); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, white, #bbbbbb); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, white, #bbbbbb); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, white, #bbbbbb); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, white, #bbbbbb); /* W3C */ background-position: center; background-repeat: no-repeat; } div.torrent_footer #compact-button:active, div.torrent_footer #compact-button:hover, div.torrent_footer #compact-button.selected { background-color: #7dc9f2; background-image: url("images/compact.png"); /* fallback */ background-image: url("images/compact.png"), -webkit-gradient(linear, left top, left bottom, from(#68abe6), to(#93e8ff)); /* Saf4+, Chrome */ background-image: url("images/compact.png"), -webkit-linear-gradient(top, #68abe6, #93e8ff); /* Chrome 10+, Saf5.1+ */ background-image: url("images/compact.png"), -moz-linear-gradient(top, #68abe6, #93e8ff); /* FF3.6+ */ background-image: url("images/compact.png"), -ms-linear-gradient(top, #68abe6, #93e8ff); /* IE10 */ background-image: url("images/compact.png"), -o-linear-gradient(top, #68abe6, #93e8ff); /* Opera 11.10+ */ background-image: url("images/compact.png"), linear-gradient(top, #68abe6, #93e8ff); /* W3C */ background-position: center; background-repeat: no-repeat; } -div.torrent_footer #prefs-button { display: none; } /**** ***** diff --git a/web/style/transmission/common.scss b/web/style/transmission/common.scss index c658d22e5..13c8034d4 100644 --- a/web/style/transmission/common.scss +++ b/web/style/transmission/common.scss @@ -181,8 +181,14 @@ div#toolbar @include buttonImage('images/toolbar-pointer.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom); margin-left: $separator-spacing; } - > div#toolbar-inspector { + + > div#toolbar-prefs { @include leftRoundedBox(5px); + @include buttonImage('images/toolbar-wrench.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom); + border-right-width: 0px; + float: right; + } + > div#toolbar-inspector { @include rightRoundedBox(5px); @include buttonImage('images/toolbar-info.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom); float: right; @@ -972,10 +978,6 @@ div.torrent_footer @include rightRoundedBox(5px); @include buttonImage('images/compact.png', $idle-color-top, $idle-color-bottom, $active-color-top, $active-color-bottom); } - - #prefs-button { - display: none; - } } /**** diff --git a/web/style/transmission/images/Makefile.am b/web/style/transmission/images/Makefile.am index 9efdd3d05..659b90f5d 100644 --- a/web/style/transmission/images/Makefile.am +++ b/web/style/transmission/images/Makefile.am @@ -23,6 +23,6 @@ dist_data_DATA = \ toolbar-pause.png \ toolbar-pointer.png \ toolbar-start.png \ - turtle.png \ - wrench.png + toolbar-wrench.png \ + turtle.png diff --git a/web/style/transmission/images/toolbar-wrench.png b/web/style/transmission/images/toolbar-wrench.png new file mode 100644 index 0000000000000000000000000000000000000000..7ad86bcdc25d608701c9f3b9af9744be1747ba8f GIT binary patch literal 378 zcmeAS@N?(olHy`uVBq!ia0vp^{2k44ofy`glX(f`FeQ1ryD#+by2c=a&%XJt$u&h|06`igfYMZ1b``@7@&;U{*x z4sYFZ^Kg1OOMCZ=S#s8ncdmDwXLuGU9m(0WrCR-rWsuk44ofy`glX(f`a29w(7Bet# z3xhBt!>l(V)e}xy16$i`DSU02A>gIE0}yWzfEgV zhi=rVbWx=i-{N&lTsIb7xVzJ#q4Mtw>G^;Ab!L5K`=s0X{Zqt+5`(ua^CtA1d0{K} e&+BX4HTjkYLEOc0Mu|WVGI+ZBxvX