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

Turn the Gallery button into a switch
owncloud · Sep 15, 2015 · eca7469 · eca7469
2 parents 5539a6f + d1574f2
commit eca7469
Show file tree

Hide file tree

Showing 8 changed files with 315 additions and 122 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 			});