[vlc-commits] lua http: reveal interface buttons.

Francois Cartegnie git at videolan.org
Fri Apr 6 16:06:48 CEST 2012


vlc | branch: master | Francois Cartegnie <fcartegnie at free.fr> | 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');
+        });
+    });
+
 })



More information about the vlc-commits mailing list