Turn the Gallery button into a switch

Implementation of #145

8 files changed, 129 insertions, 42 deletions

diff --git a/css/gallerybutton.css b/css/gallerybutton.css
index 78c9008c..5561be66 100644
--- a/css/gallerybutton.css
+++ b/css/gallerybutton.css
@@ -1,14 +1,54 @@
-/* toggle for opening shared picture view as file list */
-#openAsFileListButton {
+/* Toggle for opening the files list in the Gallery app */
+#controls .button.view-switcher {
 	float: right;
 	margin-right: 4px;
 	margin-top: 5px;
 	font-weight: normal;
+	width: 40px;
+	padding: 8px 11px;
 }
 
-#openAsFileListButton img {
-	vertical-align: text-top;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
-	filter: alpha(opacity=50);
-	opacity: .5;
+.button.left-switch-button img,
+.button.right-switch-button img {
+	vertical-align: -3px;
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
+	filter: alpha(opacity=60);
+	opacity: 0.6;
 }
+
+#controls .button.left-switch-button {
+	float: left;
+	display: inline;
+	border-radius: 3px 0 0 3px;
+	margin-left: 3px;
+	margin-right:0;
+	border-right: 0;
+}
+#controls .button.right-switch-button {
+	float: left;
+	display: inline;
+	border-radius: 0 3px 3px 0;
+	margin-left: -1px;
+}
+
+#controls .inactive-button {
+	background-color: rgb(230, 230, 230);
+}
+
+#controls .inactive-button img{
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
+	filter: alpha(opacity=25);
+	opacity: 0.25;
+}
+
+#controls .inactive-button:hover,
+#controls .inactive-button:focus,
+#controls .inactive-button a:focus{
+	background-color: rgba(255, 255, 255, .95);
+	color: #111;
+}
+
+#controls .disabled-button {
+	pointer-events: none;
+}
+
diff --git a/css/styles.css b/css/styles.css
index 5c84a584..3a4a3035 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -24,39 +24,57 @@ div.crumb.last a {
 
 #controls .button {
 	margin-top: 5px;
+	width: 40px;
 }
 
-#controls .button.left-sort-button {
+#controls .button.left-switch-button {
 	float: left;
 	display: inline;
-	padding: 8px;
 	border-radius: 3px 0 0 3px;
 	margin-left: 3px;
 	margin-right: 0;
 	border-right: 0;
 }
 
-#controls .button.right-sort-button {
+#controls .button.right-switch-button {
 	float: left;
 	display: inline;
-	padding: 8px 9px 8px 8px;
 	border-radius: 0 3px 3px 0;
 	margin-left: -1px;
 }
 
-.sort-inactive {
+#controls .button.view-switcher {
+	padding: 8px 11px;
+}
+
+#controls .button.sorting {
+	padding: 8px;
+}
+
+#controls .inactive-button {
 	background-color: rgb(230, 230, 230);
 }
 
-#controls .sort-inactive img {
+#controls .inactive-button img{
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
 	filter: alpha(opacity=25);
 	opacity: 0.25;
 }
 
+#controls .inactive-button:hover,
+#controls .inactive-button:focus,
+#controls .inactive-button a:focus{
+	background-color: rgba(255, 255, 255, .95);
+	color: #111;
+}
+
+#controls .disabled-button {
+	pointer-events: none;
+}
+
 #share-button img,
-#sort-name-button img,
-#sort-date-button img {
+.button.left-switch-button img,
+.button.right-switch-button img {
 	vertical-align: -3px;
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
 	filter: alpha(opacity=60);
@@ -67,6 +85,10 @@ div.crumb.last a {
 	position: relative;
 }
 
+#album-info-button img {
+	vertical-align: -3px;
+}
+
 .album-info-content {
 	background-color: #eee;
 	border-bottom-left-radius: 5px;
diff --git a/js/app.js b/js/app.js
index cdf93b6d..bfcb4520 100644
--- a/js/app.js
+++ b/js/app.js
@@ -40,18 +40,6 @@ $(document).ready(function () {
 				});
 			});
 
-		$('#openAsFileListButton').click(function () {
-			var subUrl = '';
-			var params = {path: '/' + Gallery.currentAlbum};
-			if (Gallery.token) {
-				params.token = Gallery.token;
-				subUrl = 's/{token}?path={path}';
-			} else {
-				subUrl = 'apps/files?dir={path}';
-			}
-			OC.redirect(OC.generateUrl(subUrl, params));
-		});
-
 		$(document).click(function () {
 			$('.album-info-content').slideUp();
 		});
diff --git a/js/gallery.js b/js/gallery.js
index 396eea47..c79a30a5 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -144,6 +144,25 @@
 			// Refresh the view
 			Gallery.view.viewAlbum(Gallery.currentAlbum);
 		},
+		
+		/**
+		 * Switches to the Files view
+		 *
+		 * @param event
+		 */
+		switchToFilesView: function (event) {
+			event.stopPropagation();
+		
+			var subUrl = '';
+			var params = {path: '/' + encodeURIComponent(Gallery.currentAlbum)};
+			if (Gallery.token) {
+				params.token = Gallery.token;
+				subUrl = 's/{token}?path={path}';
+			} else {
+				subUrl = 'apps/files?dir={path}';
+			}
+			OC.redirect(OC.generateUrl(subUrl, params));
+		},
 
 		/**
 		 * Populates the share dialog with the needed information
diff --git a/js/gallerybutton.js b/js/gallerybutton.js
index f131572c..970cbde0 100644
--- a/js/gallerybutton.js
+++ b/js/gallerybutton.js
@@ -58,10 +58,17 @@ $(document).ready(function () {
 			$('#fileList').on('updated', GalleryButton.onFileListUpdated);
 
 			// Toggle for opening files list as gallery view
-			GalleryButton.button = $('<div id="openAsFileListButton" class="button">' +
-			'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') + '"' +
-			'alt="' + t('gallery', 'Picture view') + '"/>' +
-			'</div>');
+			GalleryButton.button =
+				$('<div class="button view-switcher left-switch-button disabled-button">' +
+					'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-filelist.svg') +
+					'"' +
+					'alt="' + t('gallery', 'Picture view') + '"/>' +
+					'</div>' +
+					'<div id="gallery-button" class="button view-switcher right-switch-button inactive-button">' +
+					'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') +
+					'"' +
+					'alt="' + t('gallery', 'Picture view') + '"/>' +
+					'</div>');
 
 			GalleryButton.button.click(function () {
 				window.location.href = GalleryButton.url;
diff --git a/js/galleryview.js b/js/galleryview.js
index 8872d74b..9436562e 100644
--- a/js/galleryview.js
+++ b/js/galleryview.js
@@ -54,6 +54,7 @@
 			} else {
 				// Only do it when the app is initialised
 				if (this.requestId === -1) {
+					$('#filelist-button').click(Gallery.switchToFilesView);
 					$('#download').click(Gallery.download);
 					$('#share-button').click(Gallery.share);
 					Gallery.infoBox = new Gallery.InfoBox();
@@ -128,9 +129,9 @@
 			var icon = sortType + sortOrder;
 
 			var setButton = function (button, icon, active) {
-				button.removeClass('sort-inactive');
+				button.removeClass('inactive-button');
 				if (!active) {
-					button.addClass('sort-inactive');
+					button.addClass('inactive-button');
 				}
 				button.find('img').attr('src', OC.imagePath(Gallery.appName, icon));
 			};
diff --git a/templates/part.content.php b/templates/part.content.php
index 33db81ad..f7187f48 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -35,7 +35,6 @@ style(
 	[
 		'styles',
 		'mobile',
-		'gallerybutton',
 		'github-markdown',
 		'slideshow'
 	]
@@ -43,18 +42,23 @@ style(
 ?>
 <div id="controls">
 	<div id='breadcrumbs'></div>
-	<!-- toggle for opening shared picture view as file list -->
-	<div id="openAsFileListButton" class="button">
+	<!-- toggle for opening the current album as file list -->
+	<div id="filelist-button" class="button view-switcher left-switch-button inactive-button">
 		<img class="svg" src="<?php print_unescaped(
 			image_path('core', 'actions/toggle-filelist.svg')
 		); ?>" alt="<?php p($l->t('File list')); ?>"/>
 	</div>
-	<div id="sort-name-button" class="button left-sort-button">
+	<div class="button view-switcher right-switch-button disabled-button">
+		<img class="svg" src="<?php print_unescaped(
+			image_path('core', 'actions/toggle-pictures.svg')
+		); ?>" alt="<?php p($l->t('Picture view')); ?>"/>
+	</div>
+	<div id="sort-name-button" class="button sorting left-switch-button">
 		<img class="svg" src="<?php print_unescaped(
 			image_path($_['appName'], 'nameasc.svg')
 		); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
 	</div>
-	<div id="sort-date-button" class="button right-sort-button">
+	<div id="sort-date-button" class="button sorting right-switch-button">
 		<img class="svg" src="<?php print_unescaped(
 			image_path($_['appName'], 'dateasc.svg')
 		); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
diff --git a/templates/public.php b/templates/public.php
index f33c7155..f497aa91 100644
--- a/templates/public.php
+++ b/templates/public.php
@@ -103,18 +103,24 @@ style(
 		<div id="app">
 			<div id="controls">
 				<div id="breadcrumbs"></div>
-				<!-- toggle for opening shared picture view as file list -->
-				<div id="openAsFileListButton" class="button">
+				<!-- toggle for opening the current album as file list -->
+				<div id="filelist-button"
+					 class="button view-switcher left-switch-button inactive-button ">
 					<img class="svg" src="<?php print_unescaped(
 						image_path('core', 'actions/toggle-filelist.svg')
 					); ?>" alt="<?php p($l->t('File list')); ?>"/>
 				</div>
-				<div id="sort-name-button" class="button left-sort-button">
+				<div class="button view-switcher right-switch-button disabled-button">
+					<img class="svg" src="<?php print_unescaped(
+						image_path('core', 'actions/toggle-pictures.svg')
+					); ?>" alt="<?php p($l->t('Picture view')); ?>"/>
+				</div>
+				<div id="sort-name-button" class="button sorting left-switch-button">
 					<img class="svg" src="<?php print_unescaped(
 						image_path($_['appName'], 'nameasc.svg')
 					); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
 				</div>
-				<div id="sort-date-button" class="button right-sort-button">
+				<div id="sort-date-button" class="button sorting right-switch-button">
 					<img class="svg" src="<?php print_unescaped(
 						image_path($_['appName'], 'dateasc.svg')
 					); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>