WIP: contextual actions on file/folder.

ubidefeo · ubidefeo · commit 315812caf696 · 2024-12-23T15:32:35.000+01:00
Signed-off-by: ubi de feo &lt;me@ubidefeo.com&gt;
diff --git a/ui/arduino/main.css b/ui/arduino/main.css
@@ -638,7 +638,7 @@ button.small .icon {
   height: 28px;
   min-height: 28px;
   max-height: 28px;;
-  padding: 5px 10px;
+  padding: 5px 0;
   align-items: center;
   gap: 10px;
   align-self: stretch;
@@ -657,14 +657,27 @@ button.small .icon {
   align-items: center;
   align-self: stretch;
   cursor: pointer;
-  width: 22px;
   transition: all 0.1s;
 }
 
 .file-list .item:hover .options {
   opacity: 1;
 }
 
+.file-list .item.selected.actionable .options {
+  opacity: 0;
+}
+
+.file-list .item .checkbox {
+  display: none;
+}
+.file-list .item.actionable .checkbox {
+  display: flex;
+}
+.file-list .item.selected.actionable .checkbox {
+  display: none;
+}
+
 .file-list .item .icon {
   width: 32px;
   height: 32px;
@@ -715,18 +728,18 @@ button.small .icon {
 }
 
 .popup-menu {
-  position: absolute;
+  /* position: absolute;
   top: auto;
-  bottom: auto;
-  background: white;
-  border: 1px solid #ddd;
+  bottom: auto; */
+  /* background: white;
+  border: 1px solid #ddd; */
   border-radius: 8px;
   display: flex;
   z-index: 1000;
   gap: 4px;
   align-items: stretch;
   height: 28px;
-  padding: 4px 4px;
+  padding: 0px 4px;
   margin: 0;
   flex-direction: row;
   right: 0px;
diff --git a/ui/arduino/store.js b/ui/arduino/store.js
@@ -30,7 +30,7 @@ async function store(state, emitter) {
   win.setWindowSize(720, 640)
 
   state.platform = window.BridgeWindow.getOS()
-  state.view = 'editor'
+  state.view = 'file-manager'
   state.diskNavigationPath = '/'
   state.diskNavigationRoot = getDiskNavigationRootFromStorage()
   state.diskFiles = []
@@ -39,7 +39,7 @@ async function store(state, emitter) {
   state.boardFiles = []
   state.openFiles = []
   state.selectedFiles = []
-  state.fileContextMenu = null
+  state.itemActionMenu = null
 
   state.newTabFileName = null
   state.editingFile = null
@@ -1138,7 +1138,7 @@ async function store(state, emitter) {
   })
 
   emitter.on('file-context-menu', (file, source, event) => {
-    state.selectedFiles = []
+    // state.selectedFiles = []
     let parentFolder = source == 'board' ? state.boardNavigationPath : state.diskNavigationPath
     log('file-contextual-menu', file, source, event)
     const isSelected = state.selectedFiles.find((f) => {
@@ -1156,13 +1156,14 @@ async function store(state, emitter) {
         parentFolder: parentFolder
       })
     }
-    state.fileContextMenu = state.selectedFiles[state.selectedFiles.length - 1]
+    state.itemActionMenu = state.selectedFiles[state.selectedFiles.length - 1]
     emitter.emit('render')
   })
 
   emitter.on('toggle-file-selection', (file, source, event) => {
     log('toggle-file-selection', file, source, event)
     let parentFolder = source == 'board' ? state.boardNavigationPath : state.diskNavigationPath
+    
     // Single file selection unless holding keyboard key
     if (event && !event.ctrlKey && !event.metaKey) {
       state.selectedFiles = [{
@@ -1171,7 +1172,9 @@ async function store(state, emitter) {
         source: source,
         parentFolder: parentFolder
       }]
+      state.itemActionMenu = null
       emitter.emit('render')
+      console.log(state.selectedFiles)
       return
     }
 
@@ -1190,6 +1193,7 @@ async function store(state, emitter) {
         parentFolder: parentFolder
       })
     }
+    console.log(state.selectedFiles)
     emitter.emit('render')
   })
   emitter.on('open-selected-files', async () => {
diff --git a/ui/arduino/views/components/file-list.js b/ui/arduino/views/components/file-list.js
@@ -1,7 +1,8 @@
 const DiskFileList = generateFileList('disk')
 const BoardFileList = generateFileList('board')
 
-function generateFileList(source) {
+function generateFileList(source, selectedFiles) {
+  
   return function FileList(state, emit) {
     function onKeyEvent(e) {
       if(e.key.toLowerCase() === 'enter') {
@@ -13,6 +14,8 @@ function generateFileList(source) {
       }
     }
 
+    /*  template for new file item, with focussed input
+        ESC to cancel, ENTER to finish */
     const newFileItem = html`
       <div class="item">
         <img class="icon" src="media/file.svg" />
@@ -26,6 +29,8 @@ function generateFileList(source) {
         </div>
       </div>
     `
+    /*  template for new folder item, with focussed input
+        ESC to cancel, ENTER to finish */
     const newFolderItem = html`
       <div class="item">
         <img class="icon" src="media/folder.svg" />
@@ -39,22 +44,23 @@ function generateFileList(source) {
         </div>
       </div>
     `
+
     function dismissContextMenu(e, item) {
       console.log("click action", e, item)
       e.stopPropagation()
-      state.fileContextMenu = null
+      state.itemActionMenu = null
       state.selectedFiles = []
       emit('render')
     }
     function triggerRemove() {
       emit('remove-files')
-      state.fileContextMenu = null
+      state.itemActionMenu = null
       emit('render')
     }
     function triggerRename(item) {
       emit('rename-file', source, item)
 
-      state.fileContextMenu = null
+      state.itemActionMenu = null
       emit('render')
     }
     function triggerTransfer() {
@@ -63,10 +69,11 @@ function generateFileList(source) {
       }else{
         emit('download-files')
       }
-      state.fileContextMenu = null
+      state.itemActionMenu = null
       emit('render')
     }
-    function FileOptions(item, i){
+
+    function ItemActions(item, i){
       const popupMenu = html`
         <div class="popup-menu">
           <div class="popup-menu-item ${state.isConnected ? '' : 'disabled'}" onclick=${triggerTransfer}><img src="media/${source === 'disk' ? 'upload' : 'download'}.svg" /></div>
@@ -91,7 +98,6 @@ function generateFileList(source) {
         f => f.fileName === item.fileName && f.source === source
       )
 
-      const hasContextMenu = state.fileContextMenu && state.fileContextMenu.fileName === item.fileName && state.fileContextMenu.source === source
       function renameItem(e) {
         e.preventDefault()
         emit('rename-file', source, item)
@@ -104,54 +110,72 @@ function generateFileList(source) {
         if (!state.renamingFile) emit(`open-file`, source, item)
       }
 
-      function toggleContextMenu(item, source, e) {
+      function toggleActionsMenu(item, source, e) {
         e.stopPropagation()
         console.log("show file options", item, source, e)
         // const popupMenu = e.currentTarget.parentElement.querySelector('.popup-menu')
         // popupMenu.classList.add('visible')
         emit('file-context-menu', item, source, e)
       }
+
+      function checkboxToggle(item, source, e) {
+        e.stopPropagation()
+        emit('toggle-file-selection', item, source, e)
+      }
+
       let fileName = item.fileName
       const isSelected = state.selectedFiles.find(f => f.fileName === fileName)
 
       if (state.renamingFile == source && isSelected) {
         fileName = renamingFileItem
       }
 
-      contextMenuHtml = html``
-      if (hasContextMenu) {
-        contextMenuHtml = html`${FileOptions(item, i)}` 
-      }
+      // a context menu has been triggered
+      const contextMenuOpen = state.itemActionMenu != null
+      
+      // only show the action menu on current item
+      const showActionMenu = state.itemActionMenu && state.itemActionMenu.fileName === item.fileName && state.itemActionMenu.source === source
+      
+      // let actionMenuHtml = html``
+      // if (showActionMenu) {
+      const actionMenuHtml = showActionMenu ? html`${ItemActions(item, i)}` : html``
+      // }
 
       if (item.type === 'folder') {
         return html`
           <div
-            class="item ${isChecked ? 'selected' : ''}"
+            class="item ${isChecked ? 'selected' : ''} ${showActionMenu ? 'actionable' : ''}"
             onclick=${(e) => emit('toggle-file-selection', item, source, e)}
             ondblclick=${navigateToFolder}
             >
             <img class="icon" src="media/folder.svg" />
             <div class="text">${fileName}</div>
-            <div class="options" onclick=${(e) => toggleContextMenu(item, source, e)}>}>
+            <div class="options" onclick=${(e) => toggleActionsMenu(item, source, e)}>}>
               <img src="media/more.svg" />
             </div>
-            ${contextMenuHtml}
+            <div class="checkbox" onclick=${(e) => checkboxToggle(item, source, e)}>}>
+              <img src="media/unchecked.svg" />
+            </div>
+            ${actionMenuHtml}
           </div>
         `
       } else {
         //<div class="options" onclick=${(e) => {contextualMenu(e, item)}}>
         return html`
           <div
-            class="item ${isChecked ? 'selected' : ''}"
+            class="item ${isChecked ? 'selected' : ''} ${showActionMenu ? 'actionable' : ''}"
             onclick=${(e) => emit('toggle-file-selection', item, source, e)}
             ondblclick=${openFile}
             >
             <img class="icon" src="media/file.svg"  />
             <div class="text">${fileName}</div>
-            <div class="options" onclick=${(e) => toggleContextMenu(item, source, e)}>
+            <div class="options" onclick=${(e) => toggleActionsMenu(item, source, e)}>
               <img src="media/more.svg" />
             </div>
-            ${contextMenuHtml}
+            <div class="checkbox" onclick=${(e) => checkboxToggle(item, source, e)}>}>
+              <img src="media/unchecked.svg" />
+            </div>
+            ${actionMenuHtml}
           </div>
         `
       }
