Skip to content

Commit daea980

Browse files
ubidefeoubidefeo
committed
Working implementation of contextual menu on file/folder.
Signed-off-by: ubi de feo <me@ubidefeo.com>
1 parent af741cb commit daea980

File tree

5 files changed

+52
-44
lines changed

5 files changed

+52
-44
lines changed

‎ui/arduino/main.css

Lines changed: 11 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -652,12 +652,7 @@ button.small .icon {
652652
}
653653

654654
.file-list .item .options {
655-
display: flex;
656655
opacity: 0;
657-
align-items: center;
658-
align-self: stretch;
659-
cursor: pointer;
660-
transition: all 0.1s;
661656
}
662657

663658
.file-list .item:hover .options {
@@ -728,21 +723,18 @@ button.small .icon {
728723
}
729724

730725
.popup-menu {
731-
/* position: absolute;
732-
top: auto;
733-
bottom: auto; */
734-
/* background: white;
735-
border: 1px solid #ddd; */
736726
border-radius: 8px;
737727
display: flex;
738728
z-index: 1000;
739-
gap: 4px;
729+
gap: 6px;
740730
align-items: stretch;
741731
height: 28px;
742-
padding: 0px 4px;
743732
margin: 0;
744733
flex-direction: row;
745-
right: 0px;
734+
right: 4px;
735+
position: absolute;
736+
justify-content: flex-end;
737+
background: #fff;
746738
}
747739

748740
.popup-menu-item {
@@ -764,8 +756,13 @@ button.small .icon {
764756
max-height: 24px;
765757
}
766758

759+
.popup-menu-item.disabled img {
760+
opacity: 0.5;
761+
}
762+
767763
.popup-menu-item:last-child {
768764
flex: 0 0 18px;
765+
width: auto;
769766
}
770767
.popup-menu-item:last-child:hover {
771768
background-color: #bbb;
@@ -777,21 +774,13 @@ button.small .icon {
777774
.popup-menu-item.disabled {
778775
color: #ccc;
779776
cursor: default;
780-
background: #eee;
781-
opacity: 0.5;
777+
background: #f7f7f7;
782778
}
783779

784780
.options {
785781
cursor: pointer;
786782
}
787783

788-
.options img{
789-
width: 28px;
790-
height: 28px;
791-
max-width: 28px;
792-
max-height: 28px;
793-
}
794-
795784
#code-editor .cm-panels {
796785
border-color: #DAE3E3;
797786
padding: 0 10px;

‎ui/arduino/media/filetype-js.svg

Lines changed: 3 additions & 0 deletions
Loading

‎ui/arduino/media/filetype-json.svg

Lines changed: 3 additions & 0 deletions
Loading

‎ui/arduino/media/filetype-py.svg

Lines changed: 3 additions & 0 deletions
Loading

‎ui/arduino/views/components/file-list.js

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -97,6 +97,14 @@ function generateFileList(source) {
9797
return popupMenu
9898
}
9999

100+
// function ItemMore(item, i){
101+
// const popupMenu = html`
102+
// <div class="popup-menu">
103+
// <div class="popup-menu-item" onclick=${(e) => toggleActionsMenu(item, source, e)}><img src="media/arrow-right-white.svg" /></div>
104+
// </div>`
105+
// return popupMenu
106+
// }
107+
100108
function FileItem(item, i) {
101109
const renamingFileItem = html`
102110
<input type="text"
@@ -111,11 +119,11 @@ function generateFileList(source) {
111119
f => f.fileName === item.fileName && f.source === source
112120
)
113121

114-
function renameItem(e) {
115-
e.preventDefault()
116-
emit('rename-file', source, item)
117-
return false
118-
}
122+
// function renameItem(e) {
123+
// e.preventDefault()
124+
// emit('rename-file', source, item)
125+
// return false
126+
// }
119127
function navigateToFolder() {
120128
if (!state.renamingFile) emit(`navigate-${source}-folder`, item.fileName)
121129
}
@@ -129,10 +137,10 @@ function generateFileList(source) {
129137
emit('file-context-menu', item, source, e)
130138
}
131139

132-
function checkboxToggle(item, source, e) {
133-
e.stopPropagation()
134-
emit('toggle-file-selection', item, source, e)
135-
}
140+
// function checkboxToggle(item, source, e) {
141+
// e.stopPropagation()
142+
// emit('toggle-file-selection', item, source, e)
143+
// }
136144

137145
let fileName = item.fileName
138146
const isSelected = state.selectedFiles.find(f => f.fileName === fileName)
@@ -150,12 +158,21 @@ function generateFileList(source) {
150158
const actionMenuHtml = showActionMenu ? html`${ItemActions(item, i)}` : html``
151159

152160
const optionsButtonHtml = html`
153-
<div class="options" onclick=${(e) => toggleActionsMenu(item, source, e)}>}>
154-
<img src="media/more.svg" />
161+
<div class="popup-menu options" onclick=${(e) => toggleActionsMenu(item, source, e)}>}>
162+
<div class="popup-menu-item">
163+
<img src="media/more.svg" />
164+
</div>
155165
</div>
156166
`
157167
const optionsButton = showActionMenu ? html`` : optionsButtonHtml
158168

169+
// const checkboxHtml = html`
170+
// <div class="checkbox" onclick=${(e) => checkboxToggle(item, source, e)}>}>
171+
// <img src="media/unchecked.svg" />
172+
// </div>
173+
// `
174+
175+
159176
if (item.type === 'folder') {
160177
return html`
161178
<div
@@ -166,9 +183,6 @@ function generateFileList(source) {
166183
<img class="icon" src="media/folder.svg" />
167184
<div class="text">${fileName}</div>
168185
${showActionMenu ? '' : optionsButton}
169-
<div class="checkbox" onclick=${(e) => checkboxToggle(item, source, e)}>}>
170-
<img src="media/unchecked.svg" />
171-
</div>
172186
${actionMenuHtml}
173187
</div>
174188
`
@@ -182,9 +196,6 @@ function generateFileList(source) {
182196
<img class="icon" src="media/file.svg" />
183197
<div class="text">${fileName}</div>
184198
${showActionMenu ? '' : optionsButton}
185-
<div class="checkbox" onclick=${(e) => checkboxToggle(item, source, e)}>}>
186-
<img src="media/unchecked.svg" />
187-
</div>
188199
${actionMenuHtml}
189200
</div>
190201
`
@@ -204,11 +215,9 @@ function generateFileList(source) {
204215
return 0
205216
})
206217
const parentNavigationDots = html`<div class="item"
207-
onclick=${() => emit(`navigate-${source}-parent`)}
208-
style="cursor: pointer"
209-
>
210-
..
211-
</div>`
218+
onclick=${() => emit(`navigate-${source}-parent`)} style="cursor: pointer">
219+
<img class="icon" src="media/arrow-up.svg" />
220+
</div>`
212221

213222
const list = html`
214223
<div class="file-list">
@@ -223,6 +232,7 @@ function generateFileList(source) {
223232
`
224233

225234
// Mutation observer
235+
// monitors for the appearance of the new file/folder input field to give it focus
226236
const observer = new MutationObserver((mutations) => {
227237
const el = list.querySelector('input')
228238
if (el) {

0 commit comments

Comments
 (0)
pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy