@saltcorn/filemanager 1.6.0-alpha.0 → 1.6.0-alpha.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/src/App.svelte CHANGED
@@ -323,6 +323,17 @@
323
323
  e.preventDefault();
324
324
  if (e.dataTransfer?.files?.length > 0) uploadFiles(e.dataTransfer.files);
325
325
  }
326
+
327
+ const editableExtensions = [
328
+ 'html', 'css', 'js', 'jsx',
329
+ 'ts', 'tsx', 'sql', 'py',
330
+ 'bash', 'sh', 'txt', 'json',
331
+ 'md', 'yml'
332
+ ];
333
+
334
+ $: extension = lastSelected?.location?.split('.').pop()?.toLowerCase();
335
+ $: isEditable = editableExtensions.includes(extension);
336
+
326
337
  </script>
327
338
 
328
339
  <main>
@@ -337,15 +348,26 @@
337
348
  <div>
338
349
  <nav aria-label="breadcrumb">
339
350
  <ol class="breadcrumb">
340
- {#each pathSegments as segment}
341
- <li
342
- class="breadcrumb-item"
343
- on:click={gotoFolder(segment.location)}
344
- >
345
- {#if segment.icon}
346
- <Fa icon={segment.icon} />
351
+ {#each pathSegments as segment, i}
352
+ <li class="breadcrumb-item">
353
+ {#if i === pathSegments.length - 1}
354
+ {#if segment.icon}
355
+ <Fa icon={segment.icon} />
356
+ {:else}
357
+ {segment.name}
358
+ {/if}
347
359
  {:else}
348
- {segment.name}
360
+ <button
361
+ type="button"
362
+ class="breadcrumb-link"
363
+ on:click={() => gotoFolder(segment.location)}
364
+ >
365
+ {#if segment.icon}
366
+ <Fa icon={segment.icon} />
367
+ {:else}
368
+ {segment.name}
369
+ {/if}
370
+ </button>
349
371
  {/if}
350
372
  </li>
351
373
  {/each}
@@ -514,6 +536,10 @@
514
536
  <a href={`/files/serve/${lastSelected.location}`}>Link</a>
515
537
  &nbsp;|&nbsp;
516
538
  <a href={`/files/download/${lastSelected.location}`}>Download</a>
539
+ {#if isEditable}
540
+ &nbsp;|&nbsp;
541
+ <a href={`/files/edit/${lastSelected.location}`}>Edit</a>
542
+ {/if}
517
543
  </div>
518
544
  {#if selectedList.length > 1}
519
545
  <strong
@@ -581,4 +607,11 @@
581
607
  max-height: 90vh;
582
608
  overflow-y: scroll;
583
609
  }
610
+ .breadcrumb-link {
611
+ background: none;
612
+ border: none;
613
+ padding: 0;
614
+ color: inherit;
615
+ cursor: pointer;
616
+ }
584
617
  </style>
package/src/Picker.svelte CHANGED
@@ -145,15 +145,26 @@
145
145
  <div>
146
146
  <nav aria-label="breadcrumb">
147
147
  <ol class="breadcrumb">
148
- {#each pathSegments as segment}
149
- <li
150
- class="breadcrumb-item"
151
- on:click={gotoFolder(segment.location)}
152
- >
153
- {#if segment.icon}
154
- <Fa icon={segment.icon} />
148
+ {#each pathSegments as segment, i}
149
+ <li class="breadcrumb-item">
150
+ {#if i === pathSegments.length - 1}
151
+ {#if segment.icon}
152
+ <Fa icon={segment.icon} />
153
+ {:else}
154
+ {segment.name}
155
+ {/if}
155
156
  {:else}
156
- {segment.name}
157
+ <button
158
+ type="button"
159
+ class="breadcrumb-link"
160
+ on:click={() => gotoFolder(segment.location)}
161
+ >
162
+ {#if segment.icon}
163
+ <Fa icon={segment.icon} />
164
+ {:else}
165
+ {segment.name}
166
+ {/if}
167
+ </button>
157
168
  {/if}
158
169
  </li>
159
170
  {/each}
@@ -247,4 +258,11 @@
247
258
  max-height: 90vh;
248
259
  overflow-y: scroll;
249
260
  }
261
+ .breadcrumb-link {
262
+ background: none;
263
+ border: none;
264
+ padding: 0;
265
+ color: inherit;
266
+ cursor: pointer;
267
+ }
250
268
  </style>