Skip to content

3RD_PARTY_CLICK_TO_ADD.md

Latest commit

 

History

History
171 lines (119 loc) · 4.05 KB

3RD_PARTY_CLICK_TO_ADD.md

File metadata and controls

171 lines (119 loc) · 4.05 KB

3rd Party Tab - Click to Add Implementation ✅

Changes Made

What Changed:

  • ❌ Removed: Drag and drop functionality
  • ❌ Removed: Drag handles on cards in the 3rd Party tab
  • ✅ Added: Click-to-add functionality
  • ✅ Added: Plus icon hint on cards
  • ✅ Updated: Instructions to reflect click behavior

How It Works Now

1. User Workflow:

Step 1: Select Column

  • Click "Add Module" button on any column
  • This opens the module selector AND sets which column to add to

Step 2: Navigate to 3rd Party Tab

  • Click "3rd Party" tab (between Modules and Presets)
  • See all installed custom cards

Step 3: Click to Add

  • Click any installed card
  • Card is instantly added to the selected column
  • Module selector closes automatically

Step 4: Card in Builder Once added, the card displays with:

  • ✅ Drag handle (for reordering)
  • ✅ Edit button (pencil icon)
  • ✅ Duplicate button
  • ✅ Delete button

Step 5: Edit with Native Editor

  • Click pencil icon
  • If card has native editor → Opens automatically
  • If no native editor → YAML editor shown
  • Configure and save

Visual Changes

Card Items in 3rd Party Tab:

  • Icon: Plus circle (mdi:plus-circle) instead of drag handle
  • Cursor: Pointer instead of grab
  • Interaction: Click to add
  • Hover: Border highlight and transform
  • Active: Slight press effect

Builder Display:

External cards in the builder look identical to other modules:

  • Module card with icon and name
  • Full set of action buttons (drag, edit, duplicate, delete)
  • Same styling as other modules

Error Handling

No Column Selected:

If user clicks a card without first selecting a column:

  • Alert shown: "Please select a column first by clicking 'Add Module' on the column where you want to add this card."
  • User must select a column first

Technical Implementation

Files Modified:

layout-tab.ts Changes:

  1. Removed @dragstart and @dragend handlers from card items
  2. Removed draggable="true" attribute
  3. Added @click=${() => this._addCardFromTab(card.type)}
  4. Changed .card-drag-hint to .card-add-hint
  5. Changed drag icon to plus-circle icon
  6. Changed cursor: grab to cursor: pointer
  7. Added _addCardFromTab() method with column selection validation
  8. Removed drag/drop detection from _onDrop() method
  9. Removed _onCardDragStart() and _onCardDragEnd() methods

Build Status

✅ TypeScript: No errors
✅ Webpack: Success (3.74MB)
✅ Distribution: Updated

Testing Checklist

  • ✅ Click "Add Module" selects a column
  • ✅ Navigate to 3rd Party tab
  • ✅ Cards show with plus icons
  • ✅ Click card adds it to selected column
  • ✅ Module selector closes after adding
  • ✅ Card appears in builder with all controls
  • ✅ Drag handle works for reordering
  • ✅ Edit button opens native editor
  • ✅ Duplicate button works
  • ✅ Delete button works
  • ✅ Logic and Design tabs available
  • ✅ No Actions tab (as intended)
  • ✅ Alert shows if no column selected

User Experience

Benefits:

  1. Simpler - Just click to add, no dragging required
  2. Clearer - Plus icon makes action obvious
  3. Consistent - Works like clicking modules in the Modules tab
  4. Error-proof - Can't accidentally drop in wrong place
  5. Faster - One click vs drag-drop motion

Example Flow:

1. Click "Add Module" on Column 1
2. Click "3rd Party" tab
3. Click "Mushroom Entity Card"
4. Card appears in Column 1
5. Click pencil on card
6. Mushroom's native editor opens
7. Configure entity, icon, etc.
8. Done!

Next Steps for User

  1. Hard refresh browser (Ctrl+Shift+R)
  2. Open Ultra Card editor
  3. Click "Add Module" on any column
  4. Click "3rd Party" tab
  5. Click any installed card to add it

The card will appear in your builder with full controls, and clicking the pencil will open its native editor automatically!

Version

  • Ultra Card Version: 2.0-beta11
  • Feature: 3rd Party Click-to-Add
  • Status: ✅ Complete and Ready
  • Date: October 11, 2025