@cloudron/pankow 4.1.1 → 4.1.2

package/components/DirectoryView.vue

@@ -6,6 +6,8 @@
     ref="main"
     @keydown.up.prevent="onKeyUp($event)"
     @keydown.down.prevent="onKeyDown($event)"
+    @keydown.left.prevent="onKeyLeft($event)"
+    @keydown.right.prevent="onKeyRight($event)"
     @keydown.enter="onKeyEnter($event)"
     @keydown.delete="onKeyDelete($event)"
     @keydown.esc="onKeyEscape($event)"
@@ -28,7 +30,7 @@
       </slot>
     </div>
 
-    <div class="directory-view-header" v-show="items.length">
+    <div class="directory-view-header" v-if="items.length && viewMode === 'list'">
       <div class="directory-view-header-icon"></div>
       <div class="directory-view-header-name" @click="toggleSort(SORT_BY.NAME)"><i v-show="sortBy === SORT_BY.NAME" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> {{ tr('filemanager.list.name') }}</div>
       <div class="directory-view-header-star" v-show="showStar" @click="toggleSort(SORT_BY.STAR)"><i v-show="sortBy === SORT_BY.STAR" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> <i class="fa-regular fa-star"></i></div>
@@ -37,32 +39,55 @@
       <div class="directory-view-header-modified" v-show="showModified" @click="toggleSort(SORT_BY.MTIME)"><i v-show="sortBy === SORT_BY.MTIME" class="fa-solid" :class="{ 'fa-arrow-up': sortDirection === SORT_DIRECTION.DESC, 'fa-arrow-down': sortDirection === SORT_DIRECTION.ASC }"></i> {{ tr('filemanager.list.mtime') }}</div>
       <div class="directory-view-header-actions"></div>
     </div>
-    <div class="directory-view-body-container" v-show="items.length">
+    <div class="directory-view-body-container" :class="{ 'directory-view-body-container-full': viewMode !== 'list' }" v-show="items.length">
       <div
+        ref="gridBody"
         class="directory-view-body"
+        :class="{ 'directory-view-body-grid': viewMode === 'grid' }"
         @contextmenu="onContextMenuBody($event)"
         >
-        <DirectoryViewListItem v-for="item in filteredSortedItems" :ref="(el) => this.elements[item.id] = el"
-          :key="item.id"
-          :fallbackIcon="fallbackIcon"
-          :item="item"
-          :show-owner="showOwner"
-          :show-extract="showExtract"
-          :show-size="showSize"
-          :show-star="showStar"
-          :show-modified="showModified"
-          :rename-handler="renameHandler"
-          :share-indicator-property="shareIndicatorProperty"
-          :select-handler="onSelectAndFocus"
-          :drop-handler="onDrop"
-          :can-drop-handler="onCanDropHandler"
-          :star-handler="starHandler"
-          @contextmenu="onContextMenu(item, $event)"
-          @action-menu="onContextMenu"
-          @dblclick="onItemActivated(item)"
-          @activated="onItemActivated(item)"
-          @dragstart="onItemDragStart($event, item)"
-        />
+        <template v-if="viewMode === 'list'">
+          <DirectoryViewListItem v-for="item in filteredSortedItems" :ref="(el) => this.elements[item.id] = el"
+            :key="item.id"
+            :fallbackIcon="fallbackIcon"
+            :item="item"
+            :show-owner="showOwner"
+            :show-extract="showExtract"
+            :show-size="showSize"
+            :show-star="showStar"
+            :show-modified="showModified"
+            :rename-handler="renameHandler"
+            :share-indicator-property="shareIndicatorProperty"
+            :select-handler="onSelectAndFocus"
+            :drop-handler="onDrop"
+            :can-drop-handler="onCanDropHandler"
+            :star-handler="starHandler"
+            @contextmenu="onContextMenu(item, $event)"
+            @action-menu="onContextMenu"
+            @dblclick="onItemActivated(item)"
+            @activated="onItemActivated(item)"
+            @dragstart="onItemDragStart($event, item)"
+          />
+        </template>
+        <template v-else-if="viewMode === 'grid'">
+          <DirectoryViewGridItem v-for="item in filteredSortedItems" :ref="(el) => this.elements[item.id] = el"
+            :key="item.id"
+            :fallbackIcon="fallbackIcon"
+            :item="item"
+            :show-star="showStar"
+            :rename-handler="renameHandler"
+            :share-indicator-property="shareIndicatorProperty"
+            :select-handler="onSelectAndFocus"
+            :drop-handler="onDrop"
+            :can-drop-handler="onCanDropHandler"
+            :star-handler="starHandler"
+            @contextmenu="onContextMenu(item, $event)"
+            @action-menu="onContextMenu"
+            @dblclick="onItemActivated(item)"
+            @activated="onItemActivated(item)"
+            @dragstart="onItemDragStart($event, item)"
+          />
+        </template>
       </div>
 
       <div class="drag-handle"></div>
@@ -74,6 +99,7 @@
 
 import SingleSelect from './SingleSelect.vue';
 import DirectoryViewListItem from './DirectoryViewListItem.vue';
+import DirectoryViewGridItem from './DirectoryViewGridItem.vue';
 import Dialog from './Dialog.vue';
 import Menu from './Menu.vue';
 
@@ -99,11 +125,19 @@ export default {
   components: {
     Dialog,
     DirectoryViewListItem,
+    DirectoryViewGridItem,
     SingleSelect,
     Menu
   },
   emits: [ 'selectionChanged', 'item-activated' ],
   props: {
+    viewMode: {
+      type: String,
+      default: 'list',
+      validator(value) {
+        return ['list', 'grid'].includes(value);
+      }
+    },
     busy: {
       type: Boolean,
       default: false
@@ -508,11 +542,33 @@ export default {
       event.dataTransfer.setData('application/x-pankow', 'selected');
       event.dataTransfer.setDragImage(dragHandle, 0, 0);
     },
+    getGridColumns() {
+      const el = this.$refs.gridBody;
+      if (this.viewMode !== 'grid' || !el || !el.children.length) return 1;
+      const firstRowTop = el.children[0].getBoundingClientRect().top;
+      const tolerance = 2;
+      let cols = 0;
+      for (const child of el.children) {
+        if (Math.abs(child.getBoundingClientRect().top - firstRowTop) <= tolerance) cols++;
+        else break;
+      }
+      return cols || 1;
+    },
     onKeyUp(event) {
-      this.onSelectAndFocusIndex(this.focusItemIndex-1, event.shiftKey);
+      const step = this.viewMode === 'grid' ? this.getGridColumns() : 1;
+      this.onSelectAndFocusIndex(this.focusItemIndex - step, event.shiftKey);
     },
     onKeyDown(event) {
-      this.onSelectAndFocusIndex(this.focusItemIndex+1, event.shiftKey);
+      const step = this.viewMode === 'grid' ? this.getGridColumns() : 1;
+      this.onSelectAndFocusIndex(this.focusItemIndex + step, event.shiftKey);
+    },
+    onKeyLeft(event) {
+      if (this.viewMode !== 'grid') return;
+      this.onSelectAndFocusIndex(this.focusItemIndex - 1, event.shiftKey);
+    },
+    onKeyRight(event) {
+      if (this.viewMode !== 'grid') return;
+      this.onSelectAndFocusIndex(this.focusItemIndex + 1, event.shiftKey);
     },
     onKeyEnter(event) {
       if (this.focusItem) this.onItemActivated(this.focusItem);
@@ -748,6 +804,10 @@ export default {
   height: calc(100% - 38px); /* 38px is the header size */
 }
 
+.directory-view-body-container-full {
+  height: 100%;
+}
+
 .directory-view-body {
   padding: 0 10px;
   padding-bottom: 10px;
@@ -755,6 +815,13 @@ export default {
   overflow: auto;
 }
 
+.directory-view-body-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
+  gap: 4px;
+  align-content: start;
+}
+
 .directory-view-header-icon {
   width: 40px;
 }

package/components/DirectoryViewGridItem.vue

@@ -0,0 +1,363 @@
+<template>
+  <div class="grid-item-wrapper"
+    :draggable="!rename"
+    @mouseup="onSelect($event)"
+    @drop="onDrop($event)"
+    @dragover="onDragOver($event)"
+    @dragexit="onDragExit($event)"
+    >
+
+    <div class="grid-item" :class="{ 'focused': item.focused, 'selected': item.selected, 'drop-target-active': dropTargetActive }">
+      <div v-if="visible && showStar" class="grid-item-star" @dblclick.stop.prevent @click.stop.prevent="onToggleStar">
+        <Icon :icon="`${item.star ? 'fa-solid' : 'fa-regular'} fa-star`" class="star-icon" :class="{ 'star-visible': item.star }" />
+      </div>
+      <div v-if="visible" class="grid-item-actions" @mouseup.stop="onActionMenu($event)">
+        <i class="fa-solid fa-ellipsis-vertical"/>
+      </div>
+
+      <div class="grid-item-icon">
+        <template v-if="visible">
+          <img :src="item.previewUrl || item.icon" ref="iconImage" @error="iconError($event)"/>
+          <i v-show="shareIndicatorProperty !== '' && !!item[shareIndicatorProperty]" class="fa-solid fa-share-nodes is-shared"></i>
+        </template>
+      </div>
+
+      <div v-if="visible && !rename" class="grid-item-label" :title="item.name + (item.target ? ` → ${item.target}` : '')">
+        <a v-if="item.href" class="open-action" @dblclick.stop @click="onOpen($event)" :href="item.href">{{ item.name }}</a>
+        <span v-else>{{ item.name }}</span>
+      </div>
+      <div v-if="visible && rename" class="grid-item-label grid-item-rename">
+        <TextInput
+          ref="renameInput"
+          v-model="newName"
+          :disabled="renameBusy"
+          @blur="onRenameEnd"
+          @dblclick.stop
+          @keydown.enter.stop="onRenameSubmit"
+          @keydown.esc.stop="onRenameEnd"
+          @keydown.stop
+          />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import Icon from './Icon.vue';
+import TextInput from './TextInput.vue';
+
+export default {
+  name: 'DirectoryViewGridItem',
+  emits: [ 'activated', 'action-menu' ],
+  components: {
+    Icon,
+    TextInput
+  },
+  props: {
+    item: Object,
+    showStar: {
+      type: Boolean,
+      default: false
+    },
+    shareIndicatorProperty: {
+      type: String,
+      default: '',
+    },
+    fallbackIcon: String,
+    renameHandler: {
+      type: Function,
+      default() {
+        console.warn('Missing renameHandler for DirectoryViewGridItem');
+      }
+    },
+    starHandler: {
+      type: Function,
+      default() {
+        console.warn('Missing starHandler for DirectoryViewGridItem');
+      }
+    },
+    selectHandler: {
+      type: Function,
+      default() {
+        console.warn('Missing selectHandler for DirectoryViewGridItem');
+      }
+    },
+    dropHandler: {
+      type: Function,
+      default() {
+        console.warn('Missing dropHandler for DirectoryViewGridItem');
+      }
+    },
+    canDropHandler: {
+      type: Function,
+      default() {
+        console.warn('Missing canDropHandler for DirectoryViewGridItem');
+      }
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      rename: false,
+      renameBusy: false,
+      newName: '',
+      dropTargetActive: false,
+      previewRetries: 0
+    };
+  },
+  methods: {
+    highlight() {
+      this.$el.classList.add('pankow-directory-view-highlight-animation');
+      setTimeout(() => { this.$el.classList.remove('pankow-directory-view-highlight-animation'); }, 4000);
+    },
+    onToggleStar() {
+      this.starHandler(this.item);
+    },
+    onActionMenu(event) {
+      this.onSelect(event, true);
+      this.$emit('action-menu', this.item, event);
+    },
+    onRenameBegin() {
+      this.rename = true;
+      this.newName = this.item.name;
+
+      setTimeout(() => {
+        const elem = this.$refs.renameInput.$el;
+        elem.focus();
+
+        if (typeof elem.selectionStart !== 'undefined') {
+            elem.selectionStart = 0;
+            elem.selectionEnd = this.item.name.lastIndexOf('.');
+        }
+      }, 0);
+    },
+    onRenameEnd() {
+      this.rename = false;
+      this.renameBusy = false;
+      this.newName = '';
+    },
+    async onRenameSubmit() {
+      if (!this.newName) return;
+
+      this.renameBusy = true;
+      await this.renameHandler(this.item, this.newName);
+      this.onRenameEnd();
+    },
+    onOpen(event) {
+      if (event.ctrlKey || event.metaKey) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      this.$emit('activated', this.item);
+    },
+    onSelect(event, actionMenu = false) {
+      if ((event.button === 2 || actionMenu) && event.ctrlKey) {
+        this.selectHandler(this.item, event, true);
+      } else {
+        this.selectHandler(this.item, event);
+      }
+    },
+    onDrop(event) {
+      if (!this.canDropHandler(this.item)) return;
+
+      event.stopPropagation();
+
+      this.dropHandler(this.item, event);
+      this.dropTargetActive = false;
+    },
+    onDragOver(event) {
+      if (!this.canDropHandler(this.item)) return;
+
+      event.preventDefault();
+      event.stopPropagation();
+
+      event.dataTransfer.dropEffect = 'move';
+      this.dropTargetActive = true;
+    },
+    onDragExit(event) {
+      if (!this.item.isDirectory) return;
+
+      this.dropTargetActive = false;
+    },
+    iconError(event) {
+      event.target.src = this.fallbackIcon;
+
+      setTimeout(() => {
+        if (this.previewRetries > 5) return;
+        ++this.previewRetries;
+
+        event.target.src = this.item.previewUrl || this.item.icon;
+      }, 1000);
+    }
+  },
+  mounted() {
+    const observer = new IntersectionObserver(result => {
+      if (result[0].isIntersecting) {
+        this.visible = true;
+        observer.unobserve(this.$el);
+      }
+    });
+
+    observer.observe(this.$el);
+  }
+};
+
+</script>
+
+<style scoped>
+
+.grid-item-wrapper {
+  --background-color-hover: #ededed;
+  --background-color-selected: #dbedfb;
+  --border-color-focus: #b3cfe5;
+}
+
+@media (prefers-color-scheme: dark) {
+  .grid-item-wrapper {
+    --background-color-hover: rgba(255, 255, 255, 0.1);
+    --background-color-selected: rgba(255, 255, 255, 0.2);
+    --border-color-focus: rgba(255, 255, 255, 0.3);
+  }
+}
+
+.grid-item-wrapper {
+  padding: 2px;
+}
+
+.grid-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 10px 8px 8px;
+  border-radius: 6px;
+  border: 2px solid transparent;
+  position: relative;
+  transition: all 100ms;
+  cursor: default;
+}
+
+.grid-item-wrapper:hover > .grid-item {
+  background-color: var(--background-color-hover);
+}
+
+.grid-item.drop-target-active {
+  border: 2px solid var(--pankow-color-primary);
+}
+
+.grid-item.selected {
+  background-color: var(--background-color-selected) !important;
+}
+
+.grid-item.focused {
+  border: solid 2px var(--border-color-focus);
+}
+
+.grid-item-actions {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  padding: 2px 6px;
+  cursor: pointer;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 100ms;
+}
+
+.grid-item-actions:hover {
+  background-color: var(--background-color-hover);
+}
+
+.grid-item-wrapper:hover .grid-item-actions,
+.grid-item.focused .grid-item-actions,
+.grid-item.selected .grid-item-actions {
+  opacity: 1;
+}
+
+.grid-item-icon {
+  width: 80px;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  flex-shrink: 0;
+}
+
+.grid-item-icon > img {
+  max-width: 64px;
+  max-height: 64px;
+  object-fit: contain;
+}
+
+.is-shared {
+  position: absolute;
+  right: 2px;
+  bottom: 2px;
+  font-size: 1rem;
+}
+
+.grid-item-label {
+  width: 100%;
+  text-align: center;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  margin-top: 4px;
+  font-size: 0.85rem;
+  padding: 0 2px;
+}
+
+.grid-item-rename {
+  overflow: hidden;
+}
+
+.grid-item-rename :deep(input) {
+  width: 100%;
+  box-sizing: border-box;
+  text-align: center;
+  font-size: 0.85rem;
+  padding: 1px 4px;
+}
+
+.grid-item-star {
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  padding: 2px 6px;
+  cursor: pointer;
+  border-radius: 3px;
+  opacity: 0;
+  transition: opacity 100ms;
+}
+
+.grid-item-star:hover {
+  background-color: var(--background-color-hover);
+}
+
+.grid-item-wrapper:hover .grid-item-star,
+.grid-item.focused .grid-item-star,
+.grid-item.selected .grid-item-star {
+  opacity: 1;
+}
+
+.star-icon {
+  color: #ffcb00;
+  cursor: pointer;
+  font-size: 0.8rem;
+}
+
+.grid-item-star:has(.star-visible) {
+  opacity: 1 !important;
+}
+
+.open-action {
+  cursor: pointer;
+}
+
+.open-action:hover {
+  text-decoration: underline;
+}
+
+</style>

package/components/Menu.vue

@@ -78,6 +78,7 @@ let targetTop = 0;
 const offsetY = ref(0);
 const rollUp = ref(false);
 const searchString = ref('');
+const keyboardNav = ref(false);
 const emptyItem = ref({
   label: '',
   disabled: true,
@@ -193,12 +194,22 @@ async function open(event, element = null) {
   else container.value.focus();
 }
 
+function onMouseMove(event) {
+  keyboardNav.value = false;
+  const item = event.target.closest('.pankow-menu-item');
+  if (item && !item.classList.contains('pankow-menu-item-disabled') && item.getAttribute('separator') !== 'true') {
+    item.focus();
+  }
+}
+
 function onBackdrop(event) {
   close();
   event.preventDefault();
 }
 
 function selectUp() {
+  keyboardNav.value = true;
+
   if (!container.value.children[0]) return;
 
   const active = getActiveElement(container.value.children);
@@ -219,6 +230,8 @@ function selectUp() {
 }
 
 function selectDown() {
+  keyboardNav.value = true;
+
   if (!container.value.children[0]) return;
 
   const active = getActiveElement(container.value.children);
@@ -312,7 +325,7 @@ defineExpose({
   <teleport to="#app">
     <div class="pankow-menu-backdrop" @click="onBackdrop($event)" @contextmenu="onBackdrop($event)" v-show="isOpen"></div>
     <Transition :name="rollUp ? 'pankow-roll-up' : 'pankow-roll-down'">
-      <div class="pankow-menu" v-show="isOpen" ref="container" tabindex="0" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.esc.stop="close()" @keydown="onKeyDown">
+      <div class="pankow-menu" :class="{ 'pankow-menu--keyboard-nav': keyboardNav }" v-show="isOpen" ref="container" tabindex="0" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.esc.stop="close()" @keydown="onKeyDown" @mousemove="onMouseMove">
         <TextInput placeholder="Filter ..." autocomplete="off" @keydown.up.stop="selectUp()" @keydown.down.stop="selectDown()" @keydown.stop @keydown.esc.stop="close()" @click.stop style="width: 100%; border: 0; padding: 8px 12px;" v-model="searchString" v-if="searchThreshold < model.length"/>
         <component v-for="item in visibleItems" ref="itemElements" :is="item.type || (item.href ? MenuItemLink : MenuItem)" @activated="onItemActivated(item)" :item="item" :has-icons="hasIcons" />
         <MenuItem v-if="model.length === 0" :item="emptyItem"/>

package/components/MenuItem.vue

@@ -77,13 +77,31 @@ function onActivated() {
   opacity: .6
 }
 
-.pankow-menu-item:focus,
+.pankow-menu-item:focus {
+  background-color: var(--pankow-color-primary-hover);
+  color: white;
+}
+
 .pankow-menu-item:hover {
   background-color: var(--pankow-color-primary-hover);
   color: white;
 }
 
-.pankow-menu-item-disabled:focus,
+.pankow-menu--keyboard-nav .pankow-menu-item:hover {
+  background-color: inherit;
+  color: inherit;
+}
+
+.pankow-menu--keyboard-nav .pankow-menu-item:focus {
+  background-color: var(--pankow-color-primary-hover);
+  color: white;
+}
+
+.pankow-menu-item-disabled:focus {
+  background-color: inherit;
+  color: inherit;
+}
+
 .pankow-menu-item-disabled:hover {
   background-color: inherit;
   color: inherit;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@cloudron/pankow",
   "private": false,
-  "version": "4.1.1",
+  "version": "4.1.2",
   "description": "",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -34,7 +34,7 @@
     "highlight.js": "^11.11.1",
     "typescript": "^5.9.3",
     "vite": "^7.3.1",
-    "vue": "^3.5.28",
-    "vue-router": "^5.0.2"
+    "vue": "^3.5.29",
+    "vue-router": "^5.0.3"
   }
 }