Skip to content

V
vlc-2-2
Commit ad1ec863 authored by Francois Cartegnie's avatar Francois Cartegnie
Browse files
Options

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.
parent f33918cf
Hide whitespace changes
Inline Side-by-side
Showing with 54 additions and 28 deletions
share/lua/http/css/main.css
View file @ ad1ec863
...@@ -78,30 +78,47 @@ body{ ...@@ -78,30 +78,47 @@ body{
text-align: left; text-align: left;
width: 380px; width: 380px;
} }
#buttonzone {
.buttonszone{
position:absolute; position:absolute;
top: 200px;
width: 20px; width: 20px;
margin-left:-20px; margin-left:-20px;
vertical-align:top; vertical-align:top;
padding:0px; padding:0px;
font-size:0px;
line-height:0px;
} }
#buttonzone li{
float:left; #buttonszone1 {
top: 200px;
} }
#buttonszone{ #buttonszone2 {
position: absolute;
top: 20px; 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{ #volumesliderzone{
position: absolute; position: absolute;
top: 105px; top: 105px;
......
share/lua/http/index.html
View file @ ad1ec863
...@@ -50,7 +50,7 @@ ...@@ -50,7 +50,7 @@
$('#libraryContainer').animate({ $('#libraryContainer').animate({
height: 'toggle' height: 'toggle'
}); });
$('#buttonzone').animate({ $('#buttonszone1').animate({
width: 'toggle' width: 'toggle'
}); });
return false; return false;
...@@ -207,13 +207,13 @@ ...@@ -207,13 +207,13 @@
<li id="buttonFull" class="button48 ui-corner-all" title="<?vlc gettext("Full Screen") ?>"></li> <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> <li id="buttonSout" class="button48 ui-corner-all" title="<?vlc gettext("Easy Stream") ?>"></li>
</ul> </ul>
<ul id="buttonszone"> <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></li> <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></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></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></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></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></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> </ul>
<div id="volumesliderzone"> <div id="volumesliderzone">
<div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div> <div id="volumeSlider" title="Volume"><img src="images/speaker-32.png" class="ui-slider-handle" alt="volume"/></div>
...@@ -231,14 +231,14 @@ ...@@ -231,14 +231,14 @@
</div> </div>
</div> </div>
<div id="libraryContainer" class="ui-widget"> <div id="libraryContainer" class="ui-widget">
<ul id="buttonzone" align="left" class="ui-widget-content" style="overflow:hidden; white-space: nowrap;"> <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></li> <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></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></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></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></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></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></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> </ul>
<div id="libraryTree" class="ui-widget-content"></div> <div id="libraryTree" class="ui-widget-content"></div>
</div> </div>
......
share/lua/http/js/ui.js
View file @ ad1ec863
...@@ -94,4 +94,13 @@ $(function () { ...@@ -94,4 +94,13 @@ $(function () {
codeimg.dialog({width: 350, height: 350, title: 'QR-Code'}); codeimg.dialog({width: 350, height: 350, title: 'QR-Code'});
return false; return false;
}); });
$('.buttonszone').each(function(i){
$(this).mouseover(function(){
$(this).addClass('buttonszone_active');
}).mouseleave(function () {
$(this).removeClass('buttonszone_active');
});
});
}) })
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment