Merge pull request #148 from owncloud/switch-view-button

Turn the Gallery button into a switch

8 files changed, 315 insertions, 122 deletions

diff --git a/css/gallerybutton.css b/css/gallerybutton.css
index 78c9008c..a120e01a 100644
--- a/css/gallerybutton.css
+++ b/css/gallerybutton.css
@@ -1,14 +1,171 @@
-/* toggle for opening shared picture view as file list */
-#openAsFileListButton {
+/* Gallery buttons design  */
+#controls .left {
+	float: left;
+}
+
+#controls .button.view-switcher {
 	float: right;
-	margin-right: 4px;
 	margin-top: 5px;
 	font-weight: normal;
+	width: 40px;
+	padding: 6px 11px;
+	background-color: transparent;
+	border: 1px solid transparent;
 }
 
-#openAsFileListButton img {
-	vertical-align: text-top;
+#controls .button.view-switcher img{
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
+	filter: alpha(opacity=30);
+	opacity: .3;
+}
+
+#controls .button.view-switcher.gallery {
+	float: none;
+	margin-right: 4px;
+	padding: 7px 11px;
+	background-color: rgba(240, 240, 240, .9);
+}
+
+#controls .button.view-switcher.gallery img{
 	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
 	filter: alpha(opacity=50);
 	opacity: .5;
 }
+
+#controls .button.sorting {
+	padding: 8px 7px;
+	-webkit-perspective: 1000px;
+	-moz-perspective: 1000px;
+	perspective: 1000px;
+}
+
+#controls .button.left-switch-button,
+#controls .button.left-switch-button:hover {
+	float: right;
+	display: inline;
+	border-radius: 3px 0 0 3px;
+	margin-left: 3px;
+	margin-right: 0;
+	border-right: 0;
+	border-right: 1px solid rgba(216, 216, 216, 0.9);
+}
+
+#controls .button.right-switch-button {
+	float: right;
+	display: inline;
+	border-radius: 0 3px 3px 0;
+	margin-left: -1px;
+}
+
+#share-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);
+	opacity: 0.6;
+}
+
+#controls .disabled-button {
+	pointer-events: none;
+	background-color: rgba(230, 230, 230, .9);
+	border: 1px solid rgba(230, 230, 230, .9);
+}
+
+#controls .disabled-button img {
+	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
+	filter: alpha(opacity=25);
+	opacity: 0.25;
+}
+
+#controls .disabled-button:hover,
+#controls .disabled-button:focus,
+#controls .disabled-button a:focus,
+#controls .disabled-button.loading {
+	background-color: rgba(255, 255, 255, .9);
+	color: #111;
+	border: 1px solid rgba(240, 240, 240, .9);
+}
+
+#controls .button.view-switcher:hover {
+	background-color: rgba(255, 255, 255, .9);
+	color: #111;
+	border: 1px solid rgba(240, 240, 240, .9);
+}
+
+#controls .button.sorting.active-button {
+	background-color: rgba(255, 255, 255, .9);
+	color: #111;
+	border: 1px solid rgba(240, 240, 240, .9);
+	border-right-color: rgba(216, 216, 216, 0.9);
+}
+
+#controls .button.sorting.active-button:hover {
+	background-color: rgba(255, 255, 255, .9);
+	color: #111;
+	border: 1px solid rgba(240, 240, 240, .9);
+	border-right-color: rgba(216, 216, 216, 0.9);
+}
+
+/* Original Flip CSS by David Walsh
+http://davidwalsh.name/css-flip*/
+
+/* Wrapping both sort images */
+#controls .button.sorting .flipper {
+	-webkit-transform: perspective(1000px);
+	-moz-transform: perspective(1000px);
+	transform: perspective(1000px);
+
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+
+	-webkit-transition: 0.3s;
+	-moz-transition: 0.3s;
+	transition: 0.3s;
+
+	position: relative;
+}
+
+#controls .button.sorting .front,
+#controls .button.sorting .back {
+	-webkit-backface-visibility: hidden;
+	-moz-backface-visibility: hidden;
+	backface-visibility: hidden;
+
+	-webkit-transform-style: preserve-3d;
+	-moz-transform-style: preserve-3d;
+	transform-style: preserve-3d;
+
+	-webkit-transition: 0.3s;
+	-moz-transition: 0.3s;
+	transition: 0.3s;
+
+	position: absolute;
+	top: 0;
+	left: 0;
+	padding: 2px 1px;
+}
+
+#controls .button.sorting .front,
+#controls .button.sorting.active-button.hover .back {
+	z-index: 2;
+
+	-webkit-transform: rotateX(0deg);
+	-moz-transform: rotateX(0deg);
+	transform: rotateX(0deg);
+}
+
+#controls .button.sorting .back {
+	filter: alpha(opacity=0); /* Hide this class in IE<10 */
+
+	-webkit-transform: rotateX(180deg);
+	-moz-transform: rotateX(180deg);
+	transform: rotateX(180deg);
+}
+
+#controls .button.sorting.active-button.hover .front {
+	-webkit-transform: rotateX(180deg);
+	-moz-transform: rotateX(180deg);
+	transform: rotateX(180deg);
+}
diff --git a/css/styles.css b/css/styles.css
index 5c84a584..bb22aa49 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -24,47 +24,19 @@ div.crumb.last a {
 
 #controls .button {
 	margin-top: 5px;
+	width: 40px;
 }
 
-#controls .button.left-sort-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 {
-	float: left;
-	display: inline;
-	padding: 8px 9px 8px 8px;
-	border-radius: 0 3px 3px 0;
-	margin-left: -1px;
-}
-
-.sort-inactive {
-	background-color: rgb(230, 230, 230);
+#controls > .right {
+	float: right;
 }
 
-#controls .sort-inactive img {
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=25)";
-	filter: alpha(opacity=25);
-	opacity: 0.25;
+#album-info-button {
+	position: relative;
 }
 
-#share-button img,
-#sort-name-button img,
-#sort-date-button img {
+#album-info-button img {
 	vertical-align: -3px;
-	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
-	filter: alpha(opacity=60);
-	opacity: 0.6;
-}
-
-#album-info-button {
-	position: relative;
 }
 
 .album-info-content {
@@ -232,10 +204,6 @@ div.crumb.last a {
 	opacity: 0;
 }
 
-#controls > .right {
-	float: right;
-}
-
 #gallery > h2 {
 	background: #f7f7f7;
 	height: 2.8em;
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..048cb41e 100644
--- a/js/gallery.js
+++ b/js/gallery.js
@@ -144,6 +144,28 @@
 			// 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: '/' + Gallery.currentAlbum};
+			if (Gallery.token) {
+				params.token = Gallery.token;
+				subUrl = 's/{token}?path={path}';
+			} else {
+				subUrl = 'apps/files?dir={path}';
+			}
+			
+			var button = $('#filelist-button');
+			button.addClass('loading');
+			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..d645a39f 100644
--- a/js/gallerybutton.js
+++ b/js/gallerybutton.js
@@ -57,13 +57,16 @@ $(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>');
+			// Button for opening files list as gallery view
+			GalleryButton.button =
+				$('<div id="gallery-button" class="button view-switcher">' +
+					'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') +
+					'"' +
+					'alt="' + t('gallery', 'Gallery view') + '"/>' +
+					'</div>');
 
 			GalleryButton.button.click(function () {
+				$(this).addClass('loading');
 				window.location.href = GalleryButton.url;
 			});
 
diff --git a/js/galleryview.js b/js/galleryview.js
index 8872d74b..5216ceb4 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();
@@ -118,30 +119,16 @@
 		/**
 		 * Manages the sorting interface
 		 *
-		 * @param {string} sortType
-		 * @param {string} sortOrder
+		 * @param {string} sortType name or date
+		 * @param {string} sortOrder asc or des
 		 */
 		sortControlsSetup: function (sortType, sortOrder) {
-			var sortNameButton = $('#sort-name-button');
-			var sortDateButton = $('#sort-date-button');
-			// namedes, dateasc etc.
-			var icon = sortType + sortOrder;
-
-			var setButton = function (button, icon, active) {
-				button.removeClass('sort-inactive');
-				if (!active) {
-					button.addClass('sort-inactive');
-				}
-				button.find('img').attr('src', OC.imagePath(Gallery.appName, icon));
-			};
-
-			if (sortType === 'name') {
-				setButton(sortNameButton, icon, true);
-				setButton(sortDateButton, 'dateasc', false); // default icon
-			} else {
-				setButton(sortDateButton, icon, true);
-				setButton(sortNameButton, 'nameasc', false); // default icon
+			var reverseSortType = 'date';
+			if (sortType === 'date') {
+				reverseSortType = 'name';
 			}
+			this._setSortButton(sortType, sortOrder, true);
+			this._setSortButton(reverseSortType, 'asc', false); // default icon
 		},
 
 		/**
@@ -306,6 +293,47 @@
 			} else {
 				wrapper.css('background-color', '#fff');
 			}
+		},
+
+		/**
+		 * Picks the image which matches the sort order
+		 *
+		 * @param {string} sortType name or date
+		 * @param {string} sortOrder asc or des
+		 * @param {bool} active determines if we're setting up the active sort button
+		 * @private
+		 */
+		_setSortButton: function (sortType, sortOrder, active) {
+			var button = $('#sort-' + sortType + '-button');
+			// Removing all the classes which control the image in the button
+			button.removeClass('active-button');
+			button.find('img').removeClass('front');
+			button.find('img').removeClass('back');
+
+			// We need to determine the reverse order in order to send that image to the back
+			var reverseSortOrder = 'des';
+			if (sortOrder === 'des') {
+				reverseSortOrder = 'asc';
+			}
+
+			// We assign the proper order to the button images
+			button.find('img.' + sortOrder).addClass('front');
+			button.find('img.' + reverseSortOrder).addClass('back');
+
+			// The active button needs a hover action for the flip effect
+			if (active) {
+				button.addClass('active-button');
+				if (button.is(":hover")) {
+					button.removeClass('hover');
+				}
+				// We can't use a toggle here
+				button.hover(function () {
+						$(this).addClass('hover');
+					},
+					function () {
+						$(this).removeClass('hover');
+					});
+			}
 		}
 	};
 
diff --git a/templates/part.content.php b/templates/part.content.php
index 33db81ad..7e19a847 100644
--- a/templates/part.content.php
+++ b/templates/part.content.php
@@ -35,31 +35,48 @@ style(
 	[
 		'styles',
 		'mobile',
-		'gallerybutton',
 		'github-markdown',
-		'slideshow'
+		'slideshow',
+		'gallerybutton'
 	]
 );
 ?>
 <div id="controls">
 	<div id='breadcrumbs'></div>
-	<!-- toggle for opening shared picture view as file list -->
-	<div id="openAsFileListButton" class="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">
-		<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">
-		<img class="svg" src="<?php print_unescaped(
-			image_path($_['appName'], 'dateasc.svg')
-		); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
+	<div class="left">
+		<!-- sorting buttons -->
+		<div id="sort-date-button" class="button sorting right-switch-button">
+			<div class="flipper">
+				<img class="svg asc front" src="<?php print_unescaped(
+					image_path($_['appName'], 'dateasc.svg')
+				); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
+				<img class="svg des back" src="<?php print_unescaped(
+					image_path($_['appName'], 'datedes.svg')
+				); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
+			</div>
+		</div>
+		<div id="sort-name-button" class="button sorting left-switch-button">
+			<div class="flipper">
+				<img class="svg asc front" src="<?php print_unescaped(
+					image_path($_['appName'], 'nameasc.svg')
+				); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
+				<img class="svg des back" src="<?php print_unescaped(
+					image_path($_['appName'], 'namedes.svg')
+				); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
+			</div>
+		</div>
 	</div>
 	<span class="right">
+		<!-- sharing button -->
+		<div id="share-button" class="button">
+			<img class="svg" src="<?php print_unescaped(
+				image_path('core', 'actions/share.svg')
+			); ?>" alt="<?php p($l->t("Share")); ?>"/>
+		</div>
+		<a class="share" data-item-type="folder" data-item=""
+		   title="<?php p($l->t("Share")); ?>"
+		   data-possible-permissions="31"></a>
+		<!-- info button -->
 		<div id="album-info-button" class="button">
 			<span class="ribbon black"></span>
 			<img class="svg" src="<?php print_unescaped(
@@ -67,16 +84,12 @@ style(
 			); ?>" alt="<?php p($l->t('Album information')); ?>"/>
 		</div>
 		<div class="album-info-content markdown-body"></div>
-	</span>
-	<span class="right">
-		<div id="share-button" class="button">
+		<!-- button for opening the current album as file list -->
+		<div id="filelist-button" class="button view-switcher gallery">
 			<img class="svg" src="<?php print_unescaped(
-				image_path('core', 'actions/share.svg')
-			); ?>" alt="<?php p($l->t("Share")); ?>"/>
+				image_path('core', 'actions/toggle-filelist.svg')
+			); ?>" alt="<?php p($l->t('File list')); ?>"/>
 		</div>
-		<a class="share" data-item-type="folder" data-item=""
-		   title="<?php p($l->t("Share")); ?>"
-		   data-possible-permissions="31"></a>
 	</span>
 </div>
 <div id="gallery" class="hascontrols"></div>
diff --git a/templates/public.php b/templates/public.php
index f33c7155..6ce935cc 100644
--- a/templates/public.php
+++ b/templates/public.php
@@ -38,7 +38,8 @@ style(
 		'public',
 		'gallerybutton',
 		'github-markdown',
-		'slideshow'
+		'slideshow',
+		'gallerybutton'
 	]
 );
 
@@ -103,21 +104,28 @@ 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">
-					<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">
-					<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">
-					<img class="svg" src="<?php print_unescaped(
-						image_path($_['appName'], 'dateasc.svg')
-					); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
+				<!-- sorting buttons -->
+				<div class="left">
+					<div id="sort-date-button" class="button sorting right-switch-button">
+						<div class="flipper">
+							<img class="svg asc front" src="<?php print_unescaped(
+								image_path($_['appName'], 'dateasc.svg')
+							); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
+							<img class="svg des back" src="<?php print_unescaped(
+								image_path($_['appName'], 'datedes.svg')
+							); ?>" alt="<?php p($l->t('Sort by date')); ?>"/>
+						</div>
+					</div>
+					<div id="sort-name-button" class="button sorting left-switch-button">
+						<div class="flipper">
+							<img class="svg asc front" src="<?php print_unescaped(
+								image_path($_['appName'], 'nameasc.svg')
+							); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
+							<img class="svg des back" src="<?php print_unescaped(
+								image_path($_['appName'], 'namedes.svg')
+							); ?>" alt="<?php p($l->t('Sort by name')); ?>"/>
+						</div>
+					</div>
 				</div>
 				<span class="right">
 					<div id="album-info-button" class="button">
@@ -127,6 +135,12 @@ style(
 						); ?>" alt="<?php p($l->t('Album information')); ?>"/>
 					</div>
 					<div class="album-info-content markdown-body"></div>
+					<!-- toggle for opening the current album as file list -->
+					<div id="filelist-button" class="button view-switcher gallery">
+						<img class="svg" src="<?php print_unescaped(
+							image_path('core', 'actions/toggle-filelist.svg')
+						); ?>" alt="<?php p($l->t('Picture view')); ?>"/>
+					</div>
 				</span>
 			</div>
 			<div id="gallery" class="hascontrols"