From 260fa160584ab36c6c7cc4d5251c1aa494cf23eb Mon Sep 17 00:00:00 2001
From: ansuz <ansuz@transitiontech.ca>
Date: Tue, 4 May 2021 18:55:34 +0530
Subject: [PATCH] half-fix for iphone drive grid/list toggle

---
 customize.dist/src/less2/include/drive.less |  5 +-
 www/common/drive-ui.js                      | 74 +++++++++++++--------
 2 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/customize.dist/src/less2/include/drive.less b/customize.dist/src/less2/include/drive.less
index 9b9294e86..1b9e0b2e3 100644
--- a/customize.dist/src/less2/include/drive.less
+++ b/customize.dist/src/less2/include/drive.less
@@ -606,7 +606,7 @@
             }
         }
 
-        .cp-app-drive-content-list {
+        div.cp-app-drive-content-list {
             .cp-app-drive-element-grid {
                 display: none;
             }
@@ -896,7 +896,8 @@
     .cp-toolbar-bottom {
         .cp-toolbar-bottom-right {
             .fa-history { order: 50; }
-            .fa-list, .fa-th-large { order: 25; }
+            // .fa-list, .fa-th-large,
+            .cp-drive-viewmode-button { order: 25; }
             #cp-app-drive-toolbar-context-mobile, #cp-app-drive-toolbar-contextbuttons { order: 0; }
             #cp-app-drive-toolbar-context-mobile {
                 .fa { margin: 0 !important; }
diff --git a/www/common/drive-ui.js b/www/common/drive-ui.js
index 2d128b468..a1084fd83 100644
--- a/www/common/drive-ui.js
+++ b/www/common/drive-ui.js
@@ -122,8 +122,8 @@ define([
     var $trashEmptyIcon = $('<span>', {"class": "fa fa-trash-o"});
     //var $collapseIcon = $('<span>', {"class": "fa fa-minus-square-o cp-app-drive-icon-expcol"});
     var $expandIcon = $('<span>', {"class": "fa fa-plus-square-o cp-app-drive-icon-expcol"});
-    var $listIcon = $('<button>', {"class": "fa fa-list"});
-    var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
+    //var $listIcon = $('<button>', {"class": "fa fa-list"});
+    //var $gridIcon = $('<button>', {"class": "fa fa-th-large"});
     var $sortAscIcon = $('<span>', {"class": "fa fa-angle-up sortasc"});
     var $sortDescIcon = $('<span>', {"class": "fa fa-angle-down sortdesc"});
     var $closeIcon = $('<span>', {"class": "fa fa-times"});
@@ -2407,36 +2407,52 @@ define([
             return $box;
         };
 
+        var getOppositeViewMode = function (viewMode) {
+            viewMode = viewMode || getViewMode();
+            var newViewMode = viewMode === 'grid'? 'list': 'grid';
+            return newViewMode;
+        };
+
         // Create the button allowing the user to switch from list to icons modes
         var createViewModeButton = function ($container) {
-            var $listButton = $listIcon.clone();
-            var $gridButton = $gridIcon.clone();
-
-            $listButton.click(function () {
-                $gridButton.show();
-                $listButton.hide();
-                setViewMode('list');
-                $('#' + FOLDER_CONTENT_ID).removeClass('cp-app-drive-content-grid');
-                $('#' + FOLDER_CONTENT_ID).addClass('cp-app-drive-content-list');
-                Feedback.send('DRIVE_LIST_MODE');
-            });
-            $gridButton.click(function () {
-                $listButton.show();
-                $gridButton.hide();
-                setViewMode('grid');
-                $('#' + FOLDER_CONTENT_ID).addClass('cp-app-drive-content-grid');
-                $('#' + FOLDER_CONTENT_ID).removeClass('cp-app-drive-content-list');
-                Feedback.send('DRIVE_GRID_MODE');
+            var viewMode = getViewMode();
+            var gridIcon = h('button.fa.fa-th-large', { title: Messages.fm_viewGridButton });
+            var listIcon = h('button.fa.fa-list', { title: Messages.fm_viewListButton });
+
+            var $button = $(h('span.cp-drive-viewmode-button', [
+                gridIcon,
+                listIcon
+            ]));
+            var $gridIcon = $(gridIcon);
+            var $listIcon = $(listIcon);
+            var showMode = function (mode) {
+                if (mode === 'grid') {
+                    $gridIcon.hide();
+                    $listIcon.show();
+                } else {
+                    $listIcon.hide();
+                    $gridIcon.show();
+                }
+            };
+            setViewMode(viewMode || 'grid');
+            showMode(viewMode);
+
+            $button.click(function (e) {
+                console.error(e);
+                var viewMode = getViewMode();
+                var newViewMode = getOppositeViewMode(viewMode);
+                setViewMode(newViewMode);
+                showMode(newViewMode);
+                var $folder = $('#' + FOLDER_CONTENT_ID);
+                if (newViewMode === 'list') {
+                    $folder.removeClass('cp-app-drive-content-grid').addClass('cp-app-drive-content-list');
+                    Feedback.send('DRIVE_LIST_MODE');
+                } else {
+                    $folder.addClass('cp-app-drive-content-grid').removeClass('cp-app-drive-content-list');
+                    Feedback.send('DRIVE_GRID_MODE');
+                }
             });
-
-            if (getViewMode() === 'list') {
-                $listButton.hide();
-            } else {
-                $gridButton.hide();
-            }
-            $listButton.attr('title', Messages.fm_viewListButton);
-            $gridButton.attr('title', Messages.fm_viewGridButton);
-            $container.append($listButton).append($gridButton);
+            $container.append($button);
         };
         var emptyTrashModal = function () {
             var ownedInTrash = manager.ownedInTrash();