fix(big screen ui, global search not working) (#1534)

Co-authored-by: Ajit Kumar <dellevenjack@gmail>

Author: deadlyjack

src/components/collapsableList.js

@@ -68,6 +68,8 @@ export default function collapsableList(
 
 	[$title, $mainWrapper].forEach(defineProperties);
 
+	$mainWrapper.dataset.id = `${Math.random().toString(36).substring(2, 15)}`;
+
 	return $mainWrapper;
 
 	function onUlScroll() {

src/components/contextmenu/style.scss

@@ -29,12 +29,6 @@ body.no-animation {
   border: solid 1px transparent;
   border: solid 1px var(--popup-border-color);
 
-  @media (min-width: 1024px) {
-    min-width: 260px;
-    max-width: 400px;
-    min-height: 48px;
-  }
-
   &+.mask {
     z-index: 110;
   }
@@ -101,25 +95,6 @@ body.no-animation {
       pointer-events: none;
       opacity: 0.5;
     }
-
-    @media (min-width: 1024px) {
-      height: 55px;
-      font-size: 1.05em;
-
-      &.notice::after {
-        font-size: 1.3em;
-      }
-
-      .text {
-        .value {
-          font-size: 0.85em;
-        }
-      }
-
-      .icon {
-        font-size: 1.1em;
-      }
-    }
   }
 
   &.hide {

src/components/searchbar/style.scss

@@ -44,21 +44,4 @@
     opacity: 0;
     transform: translate(0, -100%, 0);
   }
-
-  @media (min-width: 1024px) {
-    height: 50px;
-
-    input {
-      margin: 8px;
-      border-radius: 6px;
-      font-size: 1.1em;
-      padding: 0 12px;
-    }
-
-    .icon {
-      height: 50px;
-      width: 50px;
-      font-size: 1.3em;
-    }
-  }
 }

src/components/sidebar/index.js

@@ -1,5 +1,5 @@
-import toast from "components/toast";
 import "./style.scss";
+import toast from "components/toast";
 import Ref from "html-tag-js/ref";
 import actionStack from "lib/actionStack";
 import auth, { loginEvents } from "lib/auth";

src/components/sidebar/style.scss

@@ -139,8 +139,8 @@ body.no-animation {
       max-height: 100%;
 
       &.hidden {
-        max-height: 30px !important;
-        min-height: 30px !important;
+        max-height: 30px;
+        min-height: 30px;
         overflow: hidden !important;
       }
 

src/components/tile/style.scss

@@ -18,14 +18,6 @@ header {
       white-space: nowrap;
       overflow: auto;
     }
-
-    @media (min-width: 1024px) {
-      height: 60px;
-
-      >.text {
-        font-size: 1.4em;
-      }
-    }
   }
 }
 
@@ -105,12 +97,5 @@ header {
       transition: all 100ms ease;
       transform: scale(0.95) translateZ(0);
     }
-
-    @media (min-width: 1024px) {
-      height: 60px;
-      width: 60px;
-      font-size: 2.5em;
-      background-size: 2em;
-    }
   }
 }

src/dialogs/style.scss

@@ -24,10 +24,6 @@
   display: flex;
   flex-direction: column;
 
-  @media (min-width: 1024px) {
-    max-width: 400px;
-  }
-
   &.box {
     z-index: 113;
   }
@@ -70,27 +66,6 @@
         background-position: center;
       }
     }
-
-    @media (min-width: 1024px) {
-      min-width: 280px;
-      max-width: 420px;
-
-      ul {
-        padding: 15px;
-
-        li {
-          height: 48px;
-          font-size: 1.1em;
-          margin: 2px 0;
-          padding: 0 8px;
-
-          .icon {
-            font-size: 1.1em;
-            margin-right: 8px;
-          }
-        }
-      }
-    }
   }
 
   ul {
@@ -121,11 +96,6 @@
       justify-content: center;
       color: rgb(37, 37, 37);
       color: var(--popup-text-color);
-
-      @media (min-width: 1024px) {
-        height: 48px;
-        font-size: 1.1em;
-      }
     }
   }
 
@@ -158,15 +128,6 @@
       min-height: 40px;
       margin: 5px 10px 0 10px;
     }
-
-    @media (min-width: 1024px) {
-      font-size: 1.35em;
-
-      &:not(:empty) {
-        min-height: 48px;
-        margin: 8px 15px 0 15px;
-      }
-    }
   }
 
   .message {
@@ -253,12 +214,6 @@
       padding: 10px;
       min-height: 40px;
       font-size: 1.2em;
-
-      @media (min-width: 1024px) {
-        padding: 15px;
-        min-height: 48px;
-        font-size: 1.3em;
-      }
     }
   }
 
@@ -282,21 +237,6 @@
       height: 40px;
       width: 50%;
     }
-
-    @media (min-width: 1024px) {
-      min-height: 48px;
-      margin: 4px auto;
-      max-width: 360px;
-
-      .hero {
-        height: 48px;
-        font-size: 1.3em;
-      }
-
-      .input-checkbox {
-        height: 48px;
-      }
-    }
   }
 
   .input {
@@ -320,13 +260,6 @@
       border-bottom: solid 1px rgb(51, 153, 255);
       border-bottom: solid 1px var(--active-color);
     }
-
-    @media (min-width: 1024px) {
-      max-width: 360px;
-      font-size: 1.1em;
-      margin: 4px auto;
-      padding: 4px 0;
-    }
   }
 
   li {

src/lib/openFolder.js

@@ -114,7 +114,6 @@ function openFolder(_path, opts = {}) {
 			$root.expand();
 		},
 	};
-	addedFolder.push(folder);
 
 	editorManager.emit("update", "add-folder");
 	editorManager.onupdate("add-folder", event);
@@ -136,6 +135,7 @@ function openFolder(_path, opts = {}) {
 		}
 
 		folder.listFiles = listFiles;
+		addedFolder.push(folder);
 	})();
 
 	if (listState[_path]) {
@@ -834,29 +834,6 @@ function createFileTile(name, url) {
 	return $tile;
 }
 
-/**
- * Create a tail for the tile
- * @param {object} param0
- * @param {HTMLElement} param0.target
- * @returns {HTMLElement}
- */
-// function Tail({ target }) {
-// 	return (
-// 		<span
-// 			className="icon more_vert"
-// 			attr-action="close"
-// 			onclick={(e) => {
-// 				e.stopPropagation();
-// 				e.preventDefault();
-// 				handleItems({
-// 					target: target(),
-// 					type: "contextmenu",
-// 				});
-// 			}}
-// 		></span>
-// 	);
-// }
-
 /**
  * Add file or folder to the list if expanded
  * @param {string} url Url of file or folder to add

src/main.js

@@ -5,6 +5,7 @@ import "./main.scss";
 import "res/icons/style.css";
 import "res/file-icons/style.css";
 import "styles/overrideAceStyle.scss";
+import "styles/wideScreen.scss";
 
 import "lib/polyfill";
 import "ace/supportedModes";
@@ -204,16 +205,6 @@ async function onDeviceReady() {
 				"data-small-msg",
 				"This is taking unexpectedly long time!",
 			);
-			// share the log file (but currently doesn't work)
-			// system.fileAction(
-			//   Url.join(DATA_STORAGE, constants.LOG_FILE_NAME),
-			//   constants.LOG_FILE_NAME,
-			//   "SEND",
-			//   "text/plain",
-			//   () => {
-			//     toast(strings["no app found to handle this file"]);
-			//   },
-			// );
 		}
 	}, 1000 * 10);
 

src/main.scss

@@ -27,10 +27,6 @@ body {
   width: 100%;
   height: 100%;
   font-size: 14px;
-
-  @media (min-width: 1024px) {
-    font-size: 15px;
-  }
 }
 
 body {
@@ -331,10 +327,6 @@ footer {
   user-select: none;
   width: 100%;
 
-  @media (min-width: 1024px) {
-    min-height: 45px;
-  }
-
   &.primary {
     button {
       color: white !important;
@@ -411,10 +403,6 @@ footer {
   .icon {
     color: inherit;
     font-size: 1.3em;
-
-    @media (min-width: 1024px) {
-      font-size: 1.4em;
-    }
   }
 
   .search,
@@ -441,12 +429,6 @@ input {
     border-bottom-color: #a90000 !important;
     border-bottom-color: var(--active-color) !important;
   }
-
-  @media (min-width: 1024px) {
-    height: 45px;
-    font-size: 1.1em;
-    text-indent: 12px;
-  }
 }
 
 input,
@@ -609,14 +591,6 @@ textarea {
   &.hide {
     opacity: 0 !important;
   }
-
-  @media (min-width: 1024px) {
-    height: 65px;
-    width: 65px;
-    font-size: 2rem;
-    top: 15px;
-    right: 15px;
-  }
 }
 
 button {