Use button for grid view toggle instead of hidden checkbox

Signed-off-by: Christopher Ng <chrng8@gmail.com>

core/css/server.css

@@ -711,7 +711,6 @@ code {
   position: relative;
   display: flex;
   flex-direction: column;
-  /* Grid view toggle */
 }
 #oc-dialog-filepicker-content .dirtree {
   flex-wrap: wrap;
@@ -733,7 +732,7 @@ code {
   content: ">";
   padding: 3px;
 }
-#oc-dialog-filepicker-content #picker-view-toggle {
+#oc-dialog-filepicker-content #picker-showgridview {
   position: absolute;
   background-color: transparent;
   border: none;
@@ -743,10 +742,7 @@ code {
   right: 0;
   top: 0;
 }
-#oc-dialog-filepicker-content #picker-view-toggle:hover, #oc-dialog-filepicker-content #picker-view-toggle:focus {
-  opacity: 1;
-}
-#oc-dialog-filepicker-content #picker-showgridview:focus + #picker-view-toggle {
+#oc-dialog-filepicker-content #picker-showgridview:hover, #oc-dialog-filepicker-content #picker-showgridview:active, #oc-dialog-filepicker-content #picker-showgridview:focus {
   box-shadow: 0 0 0 2px var(--color-primary);
   opacity: 1;
 }

core/css/styles.css

@@ -710,7 +710,6 @@ code {
   position: relative;
   display: flex;
   flex-direction: column;
-  /* Grid view toggle */
 }
 #oc-dialog-filepicker-content .dirtree {
   flex-wrap: wrap;
@@ -732,7 +731,7 @@ code {
   content: ">";
   padding: 3px;
 }
-#oc-dialog-filepicker-content #picker-view-toggle {
+#oc-dialog-filepicker-content #picker-showgridview {
   position: absolute;
   background-color: transparent;
   border: none;
@@ -742,10 +741,7 @@ code {
   right: 0;
   top: 0;
 }
-#oc-dialog-filepicker-content #picker-view-toggle:hover, #oc-dialog-filepicker-content #picker-view-toggle:focus {
-  opacity: 1;
-}
-#oc-dialog-filepicker-content #picker-showgridview:focus + #picker-view-toggle {
+#oc-dialog-filepicker-content #picker-showgridview:hover, #oc-dialog-filepicker-content #picker-showgridview:active, #oc-dialog-filepicker-content #picker-showgridview:focus {
   box-shadow: 0 0 0 2px var(--color-primary);
   opacity: 1;
 }

core/css/styles.scss

@@ -760,8 +760,7 @@ code {
 		}
 	}
 
-	/* Grid view toggle */
-	#picker-view-toggle {
+	#picker-showgridview {
 		position: absolute;
 		background-color: transparent;
 		border: none;
@@ -772,17 +771,13 @@ code {
 		top: 0;
 
 		&:hover,
+		&:active,
 		&:focus {
+			box-shadow: 0 0 0 2px var(--color-primary);
 			opacity: 1;
 		}
 	}
 
-	// keyboard focus
-	#picker-showgridview:focus + #picker-view-toggle {
-		box-shadow: 0 0 0 2px var(--color-primary);
-		opacity: 1;
-	}
-
 	.actions.creatable {
 		flex-wrap: wrap;
 		padding: 0px;

core/src/OC/dialogs.js

@@ -310,8 +310,12 @@ const Dialogs = {
 
 			$('body').prepend(self.$filePicker)
 
-			self.$showGridView = $('input#picker-showgridview')
-			self.$showGridView.on('change', _.bind(self._onGridviewChange, self))
+			self.$showGridView = $('button#picker-showgridview')
+			self.$showGridView.on('click keydown', function(event) {
+				if (event.type === 'click' || (event.type === 'keydown' && event.key === 'Enter')) {
+					self._onGridviewChange()
+				}
+			})
 			self._getGridSettings()
 
 			var newButton = self.$filePicker.find('.actions.creatable .button-add')
@@ -1035,27 +1039,24 @@ const Dialogs = {
 	},
 	// get the gridview setting and set the input accordingly
 	_getGridSettings: function() {
-		var self = this
+		const self = this
 		$.get(OC.generateUrl('/apps/files/api/v1/showgridview'), function(response) {
-			self.$showGridView.get(0).checked = response.gridview
-			self.$showGridView.next('#picker-view-toggle')
+			self.$showGridView
 				.removeClass('icon-toggle-filelist icon-toggle-pictures')
 				.addClass(response.gridview ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
 			$('.list-container').toggleClass('view-grid', response.gridview)
 		})
 	},
 	_onGridviewChange: function() {
-		var show = this.$showGridView.is(':checked')
+		const show = this.$showGridView.hasClass('icon-toggle-filelist')
 		// only save state if user is logged in
 		if (OC.currentUser) {
-			$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), {
-				show: show
-			})
+			$.post(OC.generateUrl('/apps/files/api/v1/showgridview'), { show: !show })
 		}
-		this.$showGridView.next('#picker-view-toggle')
+		this.$showGridView
 			.removeClass('icon-toggle-filelist icon-toggle-pictures')
-			.addClass(show ? 'icon-toggle-filelist' : 'icon-toggle-pictures')
-		$('.list-container').toggleClass('view-grid', show)
+			.addClass(show ? 'icon-toggle-pictures' : 'icon-toggle-filelist')
+		$('.list-container').toggleClass('view-grid', !show)
 	},
 	_getFilePickerTemplate: function() {
 		var defer = $.Deferred()

core/templates/filepicker.html

@@ -13,8 +13,7 @@
 
 	</span>
 
-	<input type="checkbox" class="hidden-visually" id="picker-showgridview" checked="checked" />
-	<label id="picker-view-toggle" for="picker-showgridview" class="button icon-toggle-filelist"></label>
+	<button id="picker-showgridview" class="icon-toggle-pictures"></button>
 	<div class="filelist-container">
 		<div class="emptycontent">
 			<div class="icon-folder"></div>