Merge pull request #81 from Kriechi/button-layout-and-folder-logging

Button layout and folder logging

Author: makermelissa

assets/js/workflows/usb.js

@@ -199,7 +199,7 @@ class USBWorkflow extends Workflow {
         const fileClient = this.fileHelper.getFileClient();
         const changed = await fileClient.loadDirHandle(false);
         if (changed) {
-            this._hostFolderChanged();
+            await this._hostFolderChanged();
         }
     }
 
@@ -208,15 +208,17 @@ class USBWorkflow extends Workflow {
         this.onConnected();
     }
 
-    _hostFolderChanged() {
+    async _hostFolderChanged() {
         const fileClient = this.fileHelper.getFileClient();
         const folderName = fileClient.getWorkingDirectoryName();
-        console.log(folderName);
+        console.log("New folder name:", folderName);
         if (folderName) {
             // Set the working folder label
             lblWorkingfolder.innerHTML = folderName;
             btnUseHostFolder.classList.remove("hidden");
-            btnSelectHostFolder.innerHTML = "Select New Folder";
+            btnSelectHostFolder.innerHTML = "Select Different Folder";
+            btnSelectHostFolder.classList.add("inverted");
+            btnSelectHostFolder.classList.remove("first-item");
         }
     }
 
@@ -246,11 +248,12 @@ class USBWorkflow extends Workflow {
         // At this point we should see if we should init the file client and check if have a saved dir handle
         this.initFileClient(new FileTransferClient(this.connectionStatus.bind(this), this._uid));
         const fileClient = this.fileHelper.getFileClient();
-        console.log("Got file client");
         const result = await fileClient.loadSavedDirHandle();
-        console.log(result);
         if (result) {
-            this._hostFolderChanged();
+            console.log("Successfully loaded directory:", fileClient.getWorkingDirectoryName());
+            await this._hostFolderChanged();
+        } else {
+            console.log("Failed to load directory");
         }
     }
 

assets/sass/base/_base.scss

@@ -62,11 +62,11 @@ h5 {
     cursor: pointer;
     white-space: nowrap;
 
-    &:first-of-type {
+    &:first-of-type, &.first-item {
         margin-left: 0;
     }
 
-    &:last-of-type {
+    &:last-of-type, &.last-item {
         margin-right: 0;
     }
 

index.html

@@ -297,7 +297,7 @@ <h1>Select USB Host Folder</h1>
                     <p>Select the root folder of your device. This is typically the CIRCUITPY Drive on your computer unless you renamed it. If your device does not appear as a drive on your computer, it will need to have the USB Host functionality enabled.</p>
                     <p>
                         <button class="purple-button hidden" id="useHostFolder">Use <span id="workingFolder"></span></button>
-                        <button class="purple-button" id="selectHostFolder">Select Working Folder</button>
+                        <button class="purple-button first-item" id="selectHostFolder">Select New Folder</button>
                     </p>
                 </div>
             </section>