Merge pull request #890 from owncloud/media_move_settings

[Media] Move settings to the app page
owncloud-archive · Mar 31, 2013 · 95524c6 · 95524c6
2 parents acbeef4 + 8cc0a32
commit 95524c6
Show file tree

Hide file tree

Showing 7 changed files with 109 additions and 26 deletions.
diff --git a/media/appinfo/app.php b/media/appinfo/app.php
@@ -45,8 +45,6 @@
 //list for file moves to update the database
 OCP\Util::connectHook('OC_Filesystem', 'post_rename', 'OCA\Media\Media', 'moveFile');
 
-OCP\App::registerPersonal('media', 'settings');
-
 OCP\App::addNavigationEntry(array('id' => 'media_index', 'order' => 2, 'href' => OCP\Util::linkTo('media', 'index.php'), 'icon' => OCP\Util::imagePath('core', 'places/music.svg'), 'name' => $l->t('Music')));
 
 OC_Search::registerProvider('OCA\Media\SearchProvider');
diff --git a/media/css/music.css b/media/css/music.css
@@ -117,23 +117,27 @@ div.jp-volume-bar-value {
 	white-space: nowrap;
 }
 
+#content .hascontrols{
+	padding-bottom: 2.9em;
+}
+
 #leftcontent {
-	z-index: 50;
+	z-index: 49;
 }
 
-#leftcontent img.remove {
+#playlist img.remove {
 	display: none;
 	float: right;
 	cursor: pointer;
 	opacity: 0;
 }
 
-#leftcontent li:hover img.remove {
+#playlist li:hover img.remove {
 	display: inline;
 	opacity: .3;
 }
 
-#leftcontent li div.label {
+#playlist li div.label {
 	float: left;
 	width: 200px;
 	overflow: hidden;
@@ -235,3 +239,67 @@ tr.song td.artist {
 	height: 1.5em;
 	top: .4em;
 }
+
+#media-settings .settings { 
+	height:1.4em;
+	background-repeat: no-repeat;
+	background-position:0px 4px;
+	background-origin: content-box;
+	background-image:url('%webroot%/core/img/actions/settings.svg'); 
+}
+#media-settings .settings:hover { 
+	font-weight: normal;
+	color: #666666;
+}
+#media-settings.open {
+	height: auto;
+}
+#media-settings {
+-webkit-box-sizing: border-box; 
+-moz-box-sizing: border-box;
+	box-sizing: border-box;
+	background: none repeat scroll 0 0 #EEEEEE;
+	border-right: 1px solid #CCCCCC;
+	border-top: 1px solid #CCCCCC;
+	bottom: 0;
+	height: 2.8em;
+	margin: 0;
+	overflow: visible;
+	padding: 0;
+	position: fixed;
+	width: 20em;
+	z-index: 2;
+}
+
+#media-settings h2 {
+	text-indent: .5em;
+	font-weight: bold;
+	font-size: 1.2em;
+}
+
+#media-settings h3 { 
+	cursor: pointer; 
+	-moz-transition: background 300ms ease 0s; 
+	background: none no-repeat scroll 1em center #eee; 
+	border-bottom: 1px solid #ddd; border-top: 1px solid #fff;
+	display: block; 
+	max-width: 100%; 
+	height: 2em;
+	padding: 0.5em 0.8em; 
+	color: #666; 
+	text-shadow: 0 1px 0 #f8f8f8; 
+	font-size: 1.2em; 
+}
+#media-settings h3:hover, #media-settings h3:active, #media-settings h3.active { 
+	background-color: #DBDBDB; 
+	border-bottom: 1px solid #CCCCCC; border-top: 1px solid #D4D4D4; 
+	color: #333333; font-weight: bold; 
+}
+.action{
+	cursor: pointer;
+	background-repeat: no-repeat;
+}
+
+.ampache-link {padding:0 10px 0 7px}
+.ampache-link input{width:100%}
+
diff --git a/media/js/music.js b/media/js/music.js
@@ -42,6 +42,30 @@ $(document).ready(function(){
 	$('.jp-current-time').mouseenter(function(){
 		$('.jp-current-time').hide();
 	});
+
+	$('.ampache-link').click(function() {
+		$(this).find('input').select();
+	});
+	$('#media-settings').find('.settings').on('click keydown',function(event) {
+			if((event.type === 'keydown' || event.type === 'keypress') 
+				&& (event.keyCode !== 32 && event.keyCode !== 13)
+			) {
+				return;
+			}
+			var bodyListener = function(e) {
+				if($('#media-settings').find($(e.target)).length == 0) {
+					$('#media-settings').switchClass('open', '');
+				}
+			};
+			if($('#media-settings').hasClass('open')) {
+				$('#media-settings').switchClass('open', '');
+				$('body').unbind('click', bodyListener);
+			} else {
+				$('#media-settings').find('h2').trigger('click');
+				$('#media-settings').switchClass('', 'open');
+				$('body').bind('click', bodyListener);
+			}
+		});
 });
 
 function getUrlVars(){

diff --git a/media/js/playlist.js b/media/js/playlist.js
@@ -41,17 +41,17 @@ PlayList.hide=function(){
 };
 
 $(document).ready(function(){
-	PlayList.parent=$('#leftcontent');
+	PlayList.parent=$('#playlist');
 	PlayList.init();
 	$('#selectAll').click(function(){
 		if($(this).attr('checked')){
 			// Check all
-			$('#leftcontent li.song input:checkbox').attr('checked', true);
-			$('#leftcontent li.song input:checkbox').parent().addClass('selected');
+			$('#playlist li.song input:checkbox').attr('checked', true);
+			$('#playlist li.song input:checkbox').parent().addClass('selected');
 		}else{
 			// Uncheck all
-			$('#leftcontent li.song input:checkbox').attr('checked', false);
-			$('#leftcontent li.song input:checkbox').parent().removeClass('selected');
+			$('#playlist li.song input:checkbox').attr('checked', false);
+			$('#playlist li.song input:checkbox').parent().removeClass('selected');
 		}
 	});
 });
diff --git a/media/settings.php b/media/settings.php
diff --git a/media/templates/music.php b/media/templates/music.php
@@ -29,7 +29,14 @@
 	<div class="player" id="jp-player"></div>
 </div>
 
-<ul id="leftcontent" class="hascontrols"></ul>
+<div id="leftcontent">
+	<ul id="playlist" class="hascontrols"></ul>
+	<div id="media-settings">
+		<h3 class="settings action text" tabindex="0" role="button" title="<?php p($l->t('Settings')); ?>"></h3>
+	    <h2><?php p($l->t('Ampache address:')); ?></h2>
+	    <div class="ampache-link"><input readonly value="<?php print_unescaped(OCP\Util::linkToRemote('ampache')); ?>" /></div>
+	</div>
+</div>
 
 <div id="rightcontent">
 <table id="collection" data-etag="<?php p($_['etag']); ?>">

diff --git a/media/templates/settings.php b/media/templates/settings.php