vlc | branch: master | Francois Cartegnie <[email protected]> | Fri Apr 6 15:56:33 2012 +0200| [5a7baf7b7bd1caa266de86bda642b1bf7995f26d] | committer: Francois Cartegnie
lua http: reveal interface buttons. Somewhat fixes a big usability problem: tiny buttons, unrevealant icons and associated text shown as tooltip. We now reveal all text on mouseover. > http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=5a7baf7b7bd1caa266de86bda642b1bf7995f26d --- share/lua/http/css/main.css | 41 +++++++++++++++++++++++++++++------------ share/lua/http/index.html | 32 ++++++++++++++++---------------- share/lua/http/js/ui.js | 9 +++++++++ 3 files changed, 54 insertions(+), 28 deletions(-) diff --git a/share/lua/http/css/main.css b/share/lua/http/css/main.css index ec178f0..605be68 100644 --- a/share/lua/http/css/main.css +++ b/share/lua/http/css/main.css @@ -78,30 +78,47 @@ body{ text-align: left; width: 380px; } -#buttonzone { + +.buttonszone{ position:absolute; - top: 200px; width: 20px; margin-left:-20px; vertical-align:top; padding:0px; + font-size:0px; + line-height:0px; } -#buttonzone li{ - float:left; + +#buttonszone1 { + top: 200px; } -#buttonszone{ - position: absolute; +#buttonszone2 { top: 20px; - width: 20px; - vertical-align: top; - margin-left:-20px; - padding: 0; } -#buttonszone li{ - float: left; + +.buttonszone li{ + float:left; + clear:left; + font-size:0px; +} + +.buttonszone li span{ + float:left } +.buttonszone_active { + width: 120px; + margin-left:-122px; + font-size:10px; + line-height:16px; +} + +.buttonszone_active li { + width:120px; +} + + #volumesliderzone{ position: absolute; top: 105px; diff --git a/share/lua/http/index.html b/share/lua/http/index.html index 7b74893..3538187 100644 --- a/share/lua/http/index.html +++ b/share/lua/http/index.html @@ -50,7 +50,7 @@ $('#libraryContainer').animate({ height: 'toggle' }); - $('#buttonzone').animate({ + $('#buttonszone1').animate({ width: 'toggle' }); return false; @@ -207,13 +207,13 @@ <li id="buttonFull" class="button48 ui-corner-all" title="<?vlc gettext("Full Screen") ?>"></li> <li id="buttonSout" class="button48 ui-corner-all" title="<?vlc gettext("Easy Stream") ?>"></li> </ul> - <ul id="buttonszone"> - <li id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Hide / Show Library") ?>"><span class="ui-icon ui-icon-note"></span></li> - <li id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Hide / Show Viewer") ?>"><span class="ui-icon ui-icon-video"></span></li> - <li id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Manage Streams") ?>"><span class="ui-icon ui-icon-script"></span></li> - <li id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Track Synchronisation") ?>"><span class="ui-icon ui-icon-transfer-e-w"></span></li> - <li id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Equalizer") ?>"><span class="ui-icon ui-icon-signal"></span></li> - <li id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("VLM Batch Commands") ?>"><span class="ui-icon ui-icon-suitcase"></span></li> + <ul id="buttonszone2" class="buttonszone"> + <li id="buttonPlayList" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Hide / Show Library") ?>"><span class="ui-icon ui-icon-note"></span><?vlc gettext("Hide / Show Library") ?></li> + <li id="buttonViewer" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Hide / Show Viewer") ?>"><span class="ui-icon ui-icon-video"></span><?vlc gettext("Hide / Show Viewer") ?></li> + <li id="buttonStreams" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Manage Streams") ?>"><span class="ui-icon ui-icon-script"></span><?vlc gettext("Manage Streams") ?></li> + <li id="buttonOffsets" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Track Synchronisation") ?>"><span class="ui-icon ui-icon-transfer-e-w"></span><?vlc gettext("Track Synchronisation") ?></li> + <li id="buttonEqualizer" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Equalizer") ?>"><span class="ui-icon ui-icon-signal"></span><?vlc gettext("Equalizer") ?></li> + <li id="buttonBatch" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("VLM Batch Commands") ?>"><span class="ui-icon ui-icon-suitcase"></span><?vlc gettext("VLM Batch Commands") ?></li> </ul> <div id="volumesliderzone"> <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div> @@ -231,14 +231,14 @@ </div> </div> <div id="libraryContainer" class="ui-widget"> - <ul id="buttonzone" align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;"> - <li id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Shuffle") ?>"><span class="ui-icon ui-icon-shuffle"></span></li> - <li id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Loop") ?>"><span class="ui-icon ui-icon-refresh"></span></li> - <li id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Repeat") ?>"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span></li> - <li id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Empty Playlist") ?>"><span class="ui-icon ui-icon-trash"></span></li> - <li id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Queue Selected") ?>"><span class="ui-icon ui-icon-plus"></span></li> - <li id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Play Selected") ?>"><span class="ui-icon ui-icon-play"></span></li> - <li id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Refresh List") ?>"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span></li> + <ul id="buttonszone1" align="left" class="buttonszone ui-widget-content" style="overflow:hidden; white-space: nowrap;"> + <li id="buttonShuffle" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Shuffle") ?>"><span class="ui-icon ui-icon-shuffle"></span><?vlc gettext("Shuffle") ?></li> + <li id="buttonLoop" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Loop") ?>"><span class="ui-icon ui-icon-refresh"></span><?vlc gettext("Loop") ?></li> + <li id="buttonRepeat" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Repeat") ?>"><span class="ui-icon ui-icon-arrowreturnthick-1-w"></span><?vlc gettext("Repeat") ?></li> + <li id="buttonPlEmpty" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Empty Playlist") ?>"><span class="ui-icon ui-icon-trash"></span><?vlc gettext("Empty Playlist") ?></li> + <li id="buttonPlAdd" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Queue Selected") ?>"><span class="ui-icon ui-icon-plus"></span><?vlc gettext("Queue Selected") ?></li> + <li id="buttonPlPlay" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Play Selected") ?>"><span class="ui-icon ui-icon-play"></span><?vlc gettext("Play Selected") ?></li> + <li id="buttonRefresh" class="button ui-widget ui-state-default ui-corner-all" title="<?vlc gettext("Refresh List") ?>"><span class="ui-icon ui-icon-arrowrefresh-1-n"></span><?vlc gettext("Refresh List") ?></li> </ul> <div id="libraryTree" class="ui-widget-content"></div> </div> diff --git a/share/lua/http/js/ui.js b/share/lua/http/js/ui.js index a3a833e..831f79c 100644 --- a/share/lua/http/js/ui.js +++ b/share/lua/http/js/ui.js @@ -94,4 +94,13 @@ $(function () { codeimg.dialog({width: 350, height: 350, title: 'QR-Code'}); return false; }); + + $('.buttonszone').each(function(i){ + $(this).mouseover(function(){ + $(this).addClass('buttonszone_active'); + }).mouseleave(function () { + $(this).removeClass('buttonszone_active'); + }); + }); + }) _______________________________________________ vlc-commits mailing list [email protected] http://mailman.videolan.org/listinfo/vlc-commits
