Merge pull request #21 from smartlabsAT/release/v0.2.6

Release v0.2.6

Author: smartlabsAT

.gitignore

@@ -7,4 +7,6 @@ claude.md
 /.idea/
 /.claude/
 .DS_Store
-**/.DS_Store
+**/.DS_Store
+/release/
+*.tar.gz

CHANGELOG.md

@@ -5,6 +5,24 @@ All notable changes to the Super Layout Table Extension will be documented in th
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.2.6] - 2025-08-21
+
+### Added
+- Smart hover preview for images that follows mouse position (Issue #6)
+- Column alignment support for ColorCell component
+- Proper aspect ratio preservation for all images
+
+### Changed
+- Image display now uses `object-fit: contain` to show complete images without cropping
+- File browser thumbnails increased from 60px to 140px for better visibility
+- Hover preview dynamically positions to avoid screen edges
+
+### Fixed
+- Images being cropped in table cells and file browser (Issue #6)
+- Column alignment not working for image and color cells
+- Cursor showing as `not-allowed` when hovering over cells in non-edit mode
+- Navigation to detail page blocked by incorrect cursor styles
+
 ## [0.2.5] - 2025-08-21
 
 ### Fixed

README.md

@@ -10,7 +10,7 @@ A powerful and feature-rich table layout extension for Directus 11+ that enhance
 
 ## Version
 
-v0.2.3 - Stable release
+v0.2.6 - Stable release
 
 ## 🌟 Top Features
 
@@ -29,8 +29,8 @@ Powerful search functionality across all table fields, including nested relation
 ### 👁️ View & Edit Mode
 Switch seamlessly between read-only view mode and interactive edit mode. Control when and how users can modify data.
 
-### 🖼️ Advanced Image Selector
-Built-in file browser with image preview for selecting and managing media files directly from table cells.
+### 🖼️ Advanced Image Display & Selection
+Smart image handling with hover preview, proper aspect ratios, and built-in file browser for selecting media files directly from table cells.
 
 ### 🔄 Deep Duplication
 Duplicate items with all their relationships and translations. Perfect for creating variations of complex data structures.
@@ -130,9 +130,9 @@ Edit data directly in the table without opening a separate form:
    - Text fields: Simple input or WYSIWYG editor
    - Boolean: Checkbox toggle
    - Select: Dropdown menu
-   - Date/Time: Full date picker with calendar (✨ NEW in v0.2.3)
-   - Color: Color picker
-   - Image/File: Advanced file browser with preview
+   - Date/Time: Full date picker with calendar
+   - Color: Color picker with alignment support
+   - Image/File: Enhanced file browser with larger previews (✨ IMPROVED in v0.2.6)
 3. **Unified Header Actions** (✨ NEW in v0.2.3):
    - Save/Cancel buttons now in popover header for all field types
    - Consistent UI across all editors

eslint.config.js

@@ -17,6 +17,7 @@ export default [
   {
     ignores: [
       'dist/**',
+      'release/**',
       'node_modules/**',
       'playwright-tools/**',
       '*.config.js',

package.json

@@ -1,6 +1,6 @@
 {
   "name": "directus-extension-super-table",
-  "version": "0.2.5",
+  "version": "0.2.6",
   "type": "module",
   "directus:extension": {
     "type": "layout",

src/components/CellRenderers/ColorCell.vue

@@ -1,6 +1,6 @@
 <!-- ./extensions/layouts/super-layout-table/components/CellRenderers/ColorCell.vue -->
 <template>
-  <div class="color-cell">
+  <div class="color-cell" :class="`align-${alignment || 'left'}`">
     <div
       v-if="colorValue"
       class="color-display"
@@ -33,6 +33,7 @@ const props = defineProps<{
   item?: any;
   field?: string;
   editMode?: boolean;
+  alignment?: 'left' | 'center' | 'right';
 }>();
 
 const { useNotificationsStore } = useStores();
@@ -96,6 +97,20 @@ async function copyToClipboard() {
   display: flex;
   align-items: center;
   min-height: 32px;
+  width: 100%;
+}
+
+/* Alignment variations */
+.color-cell.align-left {
+  justify-content: flex-start;
+}
+
+.color-cell.align-center {
+  justify-content: center;
+}
+
+.color-cell.align-right {
+  justify-content: flex-end;
 }
 
 .color-display {

src/components/CellRenderers/ImageCell.vue

@@ -1,10 +1,28 @@
 <!-- ./extensions/layouts/super-layout-table/components/CellRenderers/ImageCell.vue -->
 <template>
-  <div class="image-cell">
-    <div v-if="imageSrc" class="image-wrapper">
+  <div class="image-cell" :class="`align-${alignment || 'center'}`">
+    <div
+      v-if="imageSrc"
+      class="image-wrapper"
+      @mouseenter="handleMouseEnter"
+      @mouseleave="showPreview = false"
+    >
       <img :src="imageSrc" :alt="alt || 'Preview'" class="preview-image" @error="onImageError" />
     </div>
     <span v-else class="image-empty">—</span>
+
+    <!-- Hover preview außerhalb des Wrappers mit v-show -->
+    <Teleport to="body" v-if="imageSrc">
+      <div
+        v-show="showPreview"
+        class="image-hover-preview"
+        :style="previewStyle"
+        @mouseenter="showPreview = true"
+        @mouseleave="showPreview = false"
+      >
+        <img :src="imageSrc" :alt="alt || 'Preview'" />
+      </div>
+    </Teleport>
   </div>
 </template>
 
@@ -21,9 +39,13 @@ const props = defineProps<{
   value?: string | ImageValue | null;
   item?: any;
   field?: string;
+  alignment?: 'left' | 'center' | 'right';
 }>();
 
 const imageError = ref(false);
+const showPreview = ref(false);
+const mouseX = ref(0);
+const mouseY = ref(0);
 
 const imageSrc = computed(() => {
   if (!props.value || imageError.value) return null;
@@ -48,6 +70,42 @@ const alt = computed(() => {
   return props.field || 'Image';
 });
 
+// Dynamische Position basierend auf Mausposition mit Offset
+const previewStyle = computed(() => {
+  const offset = 20; // Offset von der Maus
+  const previewWidth = 400;
+  const previewHeight = 400;
+  const windowWidth = window.innerWidth;
+  const windowHeight = window.innerHeight;
+
+  let left = mouseX.value + offset;
+  let top = mouseY.value - previewHeight / 2; // Vertikal zentriert zur Maus
+
+  // Wenn Preview rechts aus dem Fenster ragt, links von der Maus anzeigen
+  if (left + previewWidth > windowWidth - 20) {
+    left = mouseX.value - previewWidth - offset;
+  }
+
+  // Sicherstellen dass Preview nicht aus dem Fenster ragt
+  if (left < 20) left = 20;
+  if (top < 20) top = 20;
+  if (top + previewHeight > windowHeight - 20) {
+    top = windowHeight - previewHeight - 20;
+  }
+
+  return {
+    left: `${left}px`,
+    top: `${top}px`,
+    transform: 'none', // Kein transform mehr nötig
+  };
+});
+
+function handleMouseEnter(event: MouseEvent) {
+  showPreview.value = true;
+  mouseX.value = event.clientX;
+  mouseY.value = event.clientY;
+}
+
 function onImageError() {
   imageError.value = true;
 }
@@ -57,44 +115,95 @@ function onImageError() {
 .image-cell {
   display: flex;
   align-items: center;
-  justify-content: center;
   width: 100%;
   padding: 2px;
-  /* Contained height */
-  height: fit-content;
+  height: 100%;
+}
+
+/* Alignment variations */
+.image-cell.align-left {
+  justify-content: flex-start;
+}
+
+.image-cell.align-center {
+  justify-content: center;
+}
+
+.image-cell.align-right {
+  justify-content: flex-end;
 }
 
 .image-wrapper {
   position: relative;
   border-radius: 4px;
-  overflow: hidden;
   background: var(--background-subdued);
   border: 1px solid var(--border-color);
-  /* Start small, grow with column width */
-  width: min(100%, max(60px, 80%));
-  /* Maintain aspect ratio */
-  aspect-ratio: 16/10;
-  /* Start with reasonable height */
-  height: auto;
-  min-height: 32px;
-  max-height: 150px;
+  /* Kompakter Thumbnail der in normale Rows passt */
+  width: 60px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: visible; /* Allow hover preview to overflow */
 }
 
 .preview-image {
   display: block;
-  width: 100%;
-  height: 100%;
-  object-fit: cover;
-  transition: transform 0.2s ease;
+  max-width: calc(100% - 4px);
+  max-height: calc(100% - 4px);
+  width: auto;
+  height: auto;
+  object-fit: contain; /* Zeigt das komplette Bild ohne Abschneiden */
+  object-position: center;
+}
+
+/* Hover preview tooltip - Fixed positioning */
+.image-hover-preview {
+  position: fixed;
+  width: 400px;
+  height: 400px;
+  background: white;
+  border: 1px solid #e0e0e0;
+  border-radius: 8px;
+  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 9999;
+  padding: 12px;
+  pointer-events: auto; /* Wichtig für mouseenter/leave */
+  transition: opacity 0.2s ease;
+}
+
+.image-hover-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+  border-radius: 4px;
 }
 
-.image-wrapper:hover .preview-image {
+.image-wrapper:hover {
+  cursor: zoom-in;
+  border-color: var(--primary);
   transform: scale(1.05);
-  cursor: pointer;
+  transition: all 0.2s ease;
 }
 
 .image-empty {
   color: var(--foreground-subdued);
   font-style: italic;
 }
+
+/* Bessere Responsivität für schmale Spalten */
+@media (max-width: 768px) {
+  .image-wrapper {
+    width: 80px;
+    height: 60px;
+  }
+
+  .image-hover-preview {
+    width: 300px;
+    height: 300px;
+  }
+}
 </style>

src/components/EditableCellRelational.vue

@@ -36,6 +36,7 @@
         :item="item"
         :field="actualFieldKey"
         :edit-mode="props.editMode"
+        :alignment="props.align"
       />
       <!-- Use custom ImageCell for image fields -->
       <ImageCell
@@ -51,6 +52,7 @@
         :value="value"
         :item="item"
         :field="actualFieldKey"
+        :alignment="align"
       />
       <!-- Use custom RelationalCell for relational fields -->
       <RelationalCell