Changeset 12794


Ignore:
Timestamp:
Aug 30, 2011, 12:16:34 AM (10 years ago)
Author:
jordan
Message:

(trunk web) make the corners of the footer buttons handle transparency.

Location:
trunk/web
Files:
5 edited

Legend:

Unmodified
Added
Removed
  • trunk/web/index.html

    r12785 r12794  
    472472
    473473                <div class="torrent_footer">
    474                         <div id="disk_space_container"></div>
    475474                        <ul id="settings_menu">
    476475                                <li id="button">&nbsp;
     
    541540                                </li>
    542541                        </ul>
     542                        <div id="turtle-button">&nbsp;</div>
    543543                        <div id="compact-button">&nbsp;</div>
    544                         <div id="turtle_button">&nbsp;</div>
    545                         <div style="clear: both; visibility: hidden;"></div>
    546544                </div>
    547545
  • trunk/web/javascript/transmission.js

    r12792 r12794  
    5454                $('#upload_confirm_button').click(function(e) { tr.confirmUploadClicked(e); return false;});
    5555                $('#upload_cancel_button').click(function(e) { tr.hideUploadDialog(); return false; });
    56                 $('#turtle_button').click(function() { tr.toggleTurtleClicked(); return false; });
    57                 $('#compact-button').click(function() { tr.toggleCompactClicked(); return false; });
     56                $('#turtle-button').click(function() { tr.toggleTurtleClicked(); });
     57                $('#compact-button').click(function() { tr.toggleCompactClicked(); });
    5858                $('#prefs-tab-general').click(function() { tr.selectPrefsTab('general'); });
    5959                $('#prefs-tab-speed').click(function() { tr.selectPrefsTab('speed'); });
     
    753753
    754754        updateTurtleButton: function() {
    755                 var t;
    756                 var w = $('#turtle_button');
    757                 if (this[Prefs._TurtleState]) {
    758                         w.addClass('turtleEnabled');
    759                         w.removeClass('turtleDisabled');
    760                         t = [ 'Click to disable Temporary Speed Limits' ];
    761                 } else {
    762                         w.removeClass('turtleEnabled');
    763                         w.addClass('turtleDisabled');
    764                         t = [ 'Click to enable Temporary Speed Limits' ];
    765                 }
    766                 t.push('(', Transmission.fmt.speed(this._prefs[RPC._TurtleUpSpeedLimit]), 'up,',
    767                              Transmission.fmt.speed(this._prefs[RPC._TurtleDownSpeedLimit]), 'down)');
     755                var enabled = this[Prefs._TurtleState],
     756                    w = $('#turtle-button'),
     757                    t = [ 'Click to ', (enabled?'disable':'enable'), ' Temporary Speed Limits',
     758                          '(', Transmission.fmt.speed(this._prefs[RPC._TurtleUpSpeedLimit]), 'up,',
     759                               Transmission.fmt.speed(this._prefs[RPC._TurtleDownSpeedLimit]), 'down)' ];
     760                w.toggleClass('enabled',enabled);
    768761                w.attr('title', t.join(' '));
    769762        },
  • trunk/web/stylesheets/common.css

    r12793 r12794  
    2929}
    3030
     31#toolbar,
     32#statusbar,
     33.torrent_footer {
     34        background-color: #B9B9B9; /* fallback color if gradients are not supported */
     35        background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7));
     36        background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7);
     37        background-image:    -moz-linear-gradient(top, #C9C9C9, #A7A7A7);
     38        background-image:     -ms-linear-gradient(top, #C9C9C9, #A7A7A7);
     39        background-image:      -o-linear-gradient(top, #C9C9C9, #A7A7A7);
     40        background-image:         linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */
     41}
    3142
    3243/***
     
    4051        height: 75px;
    4152        margin: 0;
    42         background: transparent url('../images/graphics/chrome.png') left top repeat-x;
    4353        border: 1px outset #AEBBCB;
    4454        overflow: hidden;
     
    127137
    128138#statusbar {
    129         background: #ACACAC;
    130139        border: 1px outset #AEBBCB;
    131140        height: 24px;
     
    865874
    866875div.torrent_footer {
    867         background: #aaa url('../images/graphics/chrome.png') left -142px repeat-x;
     876        height: 22px;
    868877        border-top: 1px solid #555;
    869878        bottom: 0;
    870         height: 22px;
    871879        position: fixed;
    872880        width: 100%;
     
    874882}
    875883
     884div.torrent_footer > * {
     885        position: relative;
     886        float: left;
     887        margin: 2px 4px;
     888}
     889div.torrent_footer > *,
    876890div.torrent_footer ul#settings_menu li#button {
    877         height: 22px;
    878         width: 32px !important;
    879         background: transparent url('../images/graphics/chrome.png') left -75px no-repeat;
    880         margin: 0 0 0 3px;
    881         padding: 0;
    882         float: left;
    883         position: relative;
    884         -moz-user-select: none;
    885         -webkit-user-select: none;
    886 }
    887 
    888 div.torrent_footer ul#settings_menu li#button:active {
    889         background: transparent url('../images/graphics/chrome.png') -32px -75px no-repeat;
    890 }
    891 
    892 div.torrent_footer ul#settings_menu li#button:hover {
    893         background: transparent url('../images/graphics/chrome.png') -32px -75px no-repeat;
    894 }
    895 
    896 div.torrent_footer div#disk_space_container {
    897         float: right;
    898         font-size: 1.1em;
    899         line-height: 22px;
    900         vertical-align: middle;
    901         margin: 0 20px 0 0;
    902         padding: 0px;
    903 }
    904 
    905 div.torrent_footer div#turtle_button {
    906         height: 22px;
    907         width: 32px !important;
    908         margin: 0 0 0 38px;
    909         padding: 0;
     891        height: 18px;
     892        width: 32px;
    910893        cursor: pointer;
    911894        -moz-user-select: none;
     
    913896}
    914897
    915 .turtleEnabled {
    916         background: transparent url('../images/graphics/chrome.png') left -119px no-repeat;
    917 }
    918 .turtleEnabled:active {
    919         background: transparent url('../images/graphics/chrome.png') -32px -119px no-repeat;
    920 }
    921 .turtleDisabled {
    922         background: transparent url('../images/graphics/chrome.png') left -97px no-repeat;
    923 }
    924 .turtleDisabled:active {
    925         background: transparent url('../images/graphics/chrome.png') -32px -97px no-repeat;
    926 }
    927 
    928 div.torrent_footer #compact-button {
    929         height: 22px;
    930         width: 32px !important;
    931         visibility: visible;
     898div.torrent_footer ul#settings_menu li#button {
     899        background: transparent url('../images/graphics/chrome.png') left top no-repeat;
    932900        padding: 0;
    933         float: left;
    934         margin-left: 38px;
    935901        position: relative;
    936         cursor: pointer;
    937         -moz-user-select: none;
    938         -webkit-user-select: none;
    939 }
    940 div.torrent_footer #compact-button {
    941         background: transparent url('../images/graphics/chrome.png') left -185px no-repeat;
    942 }
    943 div.torrent_footer #compact-button:active {
    944         background: transparent url('../images/graphics/chrome.png') -32px -185px no-repeat;
    945 }
    946 div.torrent_footer #compact-button.enabled {
    947         background: transparent url('../images/graphics/chrome.png') left -163px no-repeat;
    948 }
    949 div.torrent_footer #compact-button.enabled:active {
    950         background: transparent url('../images/graphics/chrome.png') -32px -163px no-repeat;
     902}
     903div.torrent_footer ul#settings_menu li#button:active,
     904div.torrent_footer ul#settings_menu li#button:hover {
     905        background-position: -32px top;
     906}
     907
     908#turtle-button {
     909        background: transparent url('../images/graphics/chrome.png') left -18px no-repeat;
     910}
     911#turtle-button:active,
     912#turtle-button:hover {
     913        background-position: -32px -18px;
     914}
     915#turtle-button.enabled {
     916        background-position: left -36px;
     917}
     918#turtle-button.enabled:active,
     919#turtle-button.enabled:hover {
     920        background-position: -32px -36px;
     921}
     922
     923#compact-button {
     924        background: transparent url('../images/graphics/chrome.png') left -54px no-repeat;
     925}
     926#compact-button:active,
     927#compact-button:hover {
     928        background-position: -32px -54px;
     929}
     930#compact-button.enabled {
     931        background-position: left -72px;
     932}
     933#compact-button.enabled:active,
     934#compact-button.enabled:hover {
     935        background-position: -32px -72px;
    951936}
    952937
     
    12851270        margin: 0;
    12861271        padding: 0;
    1287         cursor: default;
    1288 }
    1289 
    1290 .trans_menu, .trans_menu ul {
     1272}
     1273
     1274.trans_menu,
     1275.trans_menu ul {
    12911276        list-style: none;
    12921277}
    12931278
    12941279.trans_menu ul {
     1280        /* place it right above the button */
     1281        position: relative;
     1282        bottom: 18px;
     1283
    12951284        min-width: 210px;
    1296         background-color: #fff;
    1297         opacity: .98;
     1285        background-color: white;
    12981286        padding: 5px 0;
    12991287        text-align: left;
     
    13111299}
    13121300
    1313 .trans_menu li {
     1301.trans_menu > * li {
    13141302        margin: 0;
    13151303        padding: 0 10px 2px 20px !important;
     
    13281316}
    13291317
    1330 .trans_menu li.separator, .trans_menu li.separator.hover {
     1318.trans_menu li.separator,
     1319.trans_menu li.separator.hover {
    13311320        border-top: 1px solid #ddd;
    13321321        margin: 5px 0;
     
    13441333
    13451334.trans_menu li.hover li.hover span.arrow, .trans_menu li.hover li.hover li.hover span.selected {
    1346         color: #fff;
     1335        color: white;
    13471336}
    13481337
     
    13661355}
    13671356
    1368 .trans_menu li.main {
    1369         float: left;
    1370         padding: 0 !important;
    1371         width: 30px !important;
    1372 }
    1373 
    13741357.trans_menu li.main li {
    13751358        z-index: 2;
    13761359        min-width: 78px;
    1377 }
    1378 
    1379 .trans_menu li.main.active {
    1380         background: transparent url('../images/graphics/chrome.png') right -75px no-repeat !important;
    13811360}
    13821361
  • trunk/web/stylesheets/mobile.css

    r12785 r12794  
    858858
    859859div.torrent_footer {
    860         margin: -1px 0 0;
     860        margin: 0px;
    861861        height: 20px;
    862         background: #ddd url('../images/graphics/filter_bar.png') repeat-x left -51px;
    863862        border-top: 1px solid #777;
    864863        position: relative;
     
    869868        text-shadow: 0 1px 1px #fff;
    870869        overflow: hidden;
     870
     871        background-color: #B9B9B9; /* fallback color if gradients are not supported */
     872        background-image: -webkit-gradient(linear, left top, left bottom, from(#C9C9C9), to(#A7A7A7));
     873        background-image: -webkit-linear-gradient(top, #C9C9C9, #A7A7A7);
     874        background-image:    -moz-linear-gradient(top, #C9C9C9, #A7A7A7);
     875        background-image:     -ms-linear-gradient(top, #C9C9C9, #A7A7A7);
     876        background-image:      -o-linear-gradient(top, #C9C9C9, #A7A7A7);
     877        background-image:         linear-gradient(top, #C9C9C9, #A7A7A7); /* standard, but currently unimplemented */
    871878}
    872879
     
    905912}
    906913
    907 div.torrent_footer #compact-button {
     914div.torrent_footer #compact-button,
     915div.torrent_footer #turtle-button {
    908916        position: absolute;
    909         top: 0px;
    910         right: 0px;
    911         margin: 2px;
    912917        height: 18px;
    913918        width: 32px !important;
    914 }
    915 div.torrent_footer #compact-button {
    916         background: transparent url('../images/graphics/chrome.png') left -31px no-repeat;
    917 }
    918 div.torrent_footer #compact-button.active {
    919         background: transparent url('../images/graphics/chrome.png') -32px -31px no-repeat;
    920 }
    921 div.torrent_footer #compact-button.enabled {
    922         background: transparent url('../images/graphics/chrome.png') left -53px no-repeat;
    923 }
    924 div.torrent_footer #compact-button.enabled.active {
    925         background: transparent url('../images/graphics/chrome.png') -32px -53px no-repeat;
    926 }
    927 
    928 div.torrent_footer div#turtle_button {
    929         position: absolute;
    930919        top: 0px;
     920        margin: 2px;
     921}
     922
     923#compact-button {
     924        right: 0px;
     925        background: transparent url('../images/graphics/chrome.png') left -54px no-repeat;
     926}
     927#compact-button:active {
     928        background-position: -32px -54px;
     929}
     930#compact-button.enabled {
     931        background-position: left -72px;
     932}
     933#compact-button.enabled:active {
     934        background-position: -32px -72px;
     935}
     936
     937#turtle-button {
    931938        left: 0px;
    932         margin: 2px;
    933         height: 18px;
    934         width: 32px !important;
    935 }
    936 
    937 .turtleEnabled {
    938         background: transparent url('../images/graphics/chrome.png') left -121px no-repeat;
    939 }
    940 .turtleEnabled:active {
    941         background: transparent url('../images/graphics/chrome.png') -32px -121px no-repeat;
    942 }
    943 .turtleDisabled {
    944         background: transparent url('../images/graphics/chrome.png') left -99px no-repeat;
    945 }
    946 .turtleDisabled:active {
    947         background: transparent url('../images/graphics/chrome.png') -32px -99px no-repeat;
    948 }
    949 
    950 div.torrent_footer #compact-button {
    951         position: absolute;
    952         top: 0px;
    953         right: 0px;
    954         margin: 2px;
    955         height: 18px;
    956         width: 32px !important;
    957         visibility: visible;
    958 }
    959 div.torrent_footer #compact-button {
    960         background: transparent url('../images/graphics/chrome.png') left -187px no-repeat;
    961 }
    962 div.torrent_footer #compact-button:active {
    963         background: transparent url('../images/graphics/chrome.png') -32px -187px no-repeat;
    964 }
    965 div.torrent_footer #compact-button.enabled {
    966         background: transparent url('../images/graphics/chrome.png') left -165px no-repeat;
    967 }
    968 div.torrent_footer #compact-button.enabled:active {
    969         background: transparent url('../images/graphics/chrome.png') -32px -165px no-repeat;
     939        background: transparent url('../images/graphics/chrome.png') left -18px no-repeat;
     940}
     941#turtle-button:active {
     942        background-position: -32px -18px;
     943}
     944#turtle-button.enabled {
     945        background-position: left -36px;
     946}
     947#turtle-button.enabled:active {
     948        background-position: -32px -36px;
    970949}
    971950
Note: See TracChangeset for help on using the changeset viewer.