Merge pull request #196 from nextcloud/change-button-to-new-style

Remove obsolete/faulty css for the top right button
nextcloud · Aug 2, 2017 · 484b964 · 484b964
2 parents a146c4f + 8074f5c
commit 484b964
Show file tree

Hide file tree

Showing 6 changed files with 16 additions and 43 deletions.
diff --git a/css/gallerybutton.css b/css/gallerybutton.css
@@ -6,26 +6,17 @@
 #controls .button.view-switcher {
 	float: right;
 	margin-top: 5px;
-	font-weight: normal;
-	width: 40px;
 	padding: 6px 11px;
-	background-color: transparent;
-	border: 1px solid transparent;
-}
-
-#controls .button.view-switcher img{
-	opacity: .3;
 }
 
 #controls .button.view-switcher.gallery {
 	float: none;
 	margin-right: 4px;
-	padding: 7px 11px;
-	background-color: rgba(240, 240, 240, .9);
+	padding: 9px 11px;
 }
 
-#controls .button.view-switcher.gallery img{
-	opacity: .5;
+.icon-toggle-pictures.hidden {
+	opacity: 0 !important;
 }
 
 #controls .button.sorting {
@@ -42,8 +33,6 @@
 	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 {
@@ -80,23 +69,8 @@
 }
 
 #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
@@ -140,7 +114,7 @@ http://davidwalsh.name/css-flip*/
 }
 
 #controls .button.sorting .front,
-#controls .button.sorting.active-button.hover .back {
+#controls .button.sorting.active.hover .back {
 	z-index: 2;
 
 	-webkit-transform: rotateX(0deg);
@@ -160,12 +134,11 @@ http://davidwalsh.name/css-flip*/
 	position: absolute;
 	width: 24px;
 	height: 24px;
-	background-size: 24px 24px;
 	margin-left: -4px;
-	margin-top: -3px;
+	margin-top: -5px;
 }
 
-#controls .button.sorting.active-button.hover .front {
+#controls .button.sorting.active.hover .front {
 	-webkit-transform: rotateX(180deg);
 	-moz-transform: rotateX(180deg);
 	transform: rotateX(180deg);

diff --git a/js/gallery.js b/js/gallery.js
@@ -187,7 +187,8 @@
 			}
 
 			var button = $('#filelist-button');
-			button.children('#button-loading').addClass('loading');
+			button.children('img').addClass('hidden');
+			button.children('#button-loading').removeClass('hidden').addClass('icon-loading-small');
 			OC.redirect(OC.generateUrl(subUrl, params));
 		},
 

diff --git a/js/gallerybutton.js b/js/gallerybutton.js
@@ -71,14 +71,13 @@ $(document).ready(function () {
 			// Button for opening files list as gallery view
 			GalleryButton.button =
 				$('<div id="gallery-button" class="button view-switcher">' +
-						'<div id="button-loading"></div>' +
-					'<img class="svg" src="' + OC.imagePath('core', 'actions/toggle-pictures.svg') +
-					'"' +
-					'alt="' + t('gallery', 'Gallery view') + '"/>' +
+						'<div id="button-loading" class="hidden"></div>' +
+					'<span class="icon-toggle-pictures"></span>' +
 					'</div>');
 
 			GalleryButton.button.click(function () {
-				$(this).children('#button-loading').addClass('loading');
+				$(this).children('span').addClass('hidden');
+				$(this).children('#button-loading').removeClass('hidden').addClass('icon-loading-small');
 				window.location.href = GalleryButton.url;
 			});
 

diff --git a/js/galleryview.js b/js/galleryview.js
@@ -511,7 +511,7 @@
 		_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.removeClass('active');
 			button.find('img').removeClass('front');
 			button.find('img').removeClass('back');
 
@@ -527,7 +527,7 @@
 
 			// The active button needs a hover action for the flip effect
 			if (active) {
-				button.addClass('active-button');
+				button.addClass('active');
 				if (button.is(":hover")) {
 					button.removeClass('hover');
 				}

diff --git a/templates/part.content.php b/templates/part.content.php
@@ -95,7 +95,7 @@
 		</div>
 		<!-- button for opening the current album as file list -->
 		<div id="filelist-button" class="button view-switcher gallery">
-			<div id="button-loading"></div>
+			<div id="button-loading" class="hidden"></div>
 			<img class="svg" src="<?php print_unescaped(
 				image_path('core', 'actions/toggle-filelist.svg')
 			); ?>" alt="<?php p($l->t('File list')); ?>"/>

diff --git a/templates/public.php b/templates/public.php
@@ -110,7 +110,7 @@ class="icon-confirm svg" disabled></button>
 					</div>
 					<!-- toggle for opening the current album as file list -->
 					<div id="filelist-button" class="button view-switcher gallery">
-						<div id="button-loading"></div>
+						<div id="button-loading" class="hidden"></div>
 						<img class="svg" src="<?php print_unescaped(
 							image_path('core', 'actions/toggle-filelist.svg')
 						); ?>" alt="<?php p($l->t('Picture view')); ?>"/>