Font Awesome Modernization

Font Awesome Icon System - UI Modernization

Issue #139

Modernize TestLink UI from legacy GIF icons to Font Awesome icons.

Status

Partial Completion ⚠️

✅ Completed

• Template icons modernized (containerViewTestSuiteTextButtons.inc.tpl, containerView.tpl)
• Smarty integration updated (tlsmarty.inc.php refactored)
• Modern icon approach implemented in templates

🔄 Remaining

• Drag-and-drop folder tree system modernization

What Was Modernized

Template Icons ✅

Before:

<img src="images/add.gif" />
<img src="images/delete.gif" />

After:

<i class="fas fa-plus-circle"></i>
<i class="fas fa-times-circle"></i>

Affected Templates

• gui/templates/dashio/testcases/include/containerViewTestSuiteTextButtons.inc.tpl
• gui/templates/dashio/testcases/containerView.tpl

Icon Updates

• Plus/Add: fa-plus-circle
• Delete: fa-times-circle
• Edit: fa-pencil-alt
• Copy/Move: fa-copy
• Export: fa-file-export
• Import: fa-file-import
• Report/Document: fa-book
• Settings/Cog: fa-cog

Remaining Work: Drag-and-Drop System

The drag-and-drop folder tree system (/gui/drag_and_drop/) still uses legacy GIF icons:

Current Legacy Icons

• dhtmlgoodies_folder.gif
• dhtmlgoodies_plus.gif
• dhtmlgoodies_minus.gif
• dhtmlgoodies_sheet.gif
• folder_close.gif, folder_open.gif
• And 8+ more GIF files

Files Requiring Updates

1. gui/drag_and_drop/js/drag-drop-folder-tree.js

   • Replace hardcoded GIF references with CSS classes
   • Update image loading logic

2. gui/drag_and_drop/css/drag-drop-folder-tree.css

   • Add Font Awesome styling via ::before pseudo-elements
   • Remove image-based styling

3. gui/drag_and_drop/js/context-menu.js

   • Review and update if necessary

Implementation Approach

Option 1: Font Awesome Migration

// Old
this.folderImage = 'dhtmlgoodies_folder.gif';
this.plusImage = 'dhtmlgoodies_plus.gif';

// New
this.folderClass = 'fa-folder';
this.expandClass = 'fa-plus';

Option 2: CSS-Based Icons

.folder-icon::before {
  content: '\f07b';  /* Font Awesome folder */
  font-family: 'Font Awesome 6 Free';
}

Benefits of Modernization

✅ Completed

• Cleaner, scalable UI
• Reduced HTTP requests
• Better theme integration
• Responsive icon sizing

🔄 Remaining Benefits

• Consistent icon system across entire UI
• Eliminating 64+ legacy GIF files
• Better performance
• Modern design language

File Structure

Current

gui/drag_and_drop/
├── images/
│   ├── dhtmlgoodies_folder.gif
│   ├── dhtmlgoodies_plus.gif
│   ├── dhtmlgoodies_minus.gif
│   └── ... (10+ more GIF files)
├── css/
│   └── drag-drop-folder-tree.css
└── js/
    ├── drag-drop-folder-tree.js
    └── context-menu.js

Post-Modernization (Proposed)

gui/drag_and_drop/
├── images/
│   └── [removed - use Font Awesome instead]
├── css/
│   └── drag-drop-folder-tree.css (Font Awesome styling)
└── js/
    ├── drag-drop-folder-tree.js (updated)
    └── context-menu.js (if needed)

Font Awesome Version

Current: Font Awesome 6.2.0

Available Icons:

• Folders: fa-folder, fa-folder-open, fa-folder-plus
• Trees: fa-tree, fa-sitemap
• Documents: fa-file, fa-file-alt
• Navigation: fa-chevron-right, fa-chevron-down, fa-plus, fa-minus

Migration Checklist

• Test drag-and-drop with Font Awesome icons
• Update JavaScript to use CSS classes instead of image URLs
• Update CSS for icon styling
• Verify functionality in all browsers
• Remove legacy GIF files
• Test context menus
• Test keyboard navigation
• Performance testing

Next Steps

To complete this modernization:

1. Create updated drag-drop-folder-tree.js with CSS class support
2. Update drag-drop-folder-tree.css with Font Awesome styling
3. Comprehensive testing of drag-and-drop functionality
4. Remove legacy GIF files from version control
5. Update build/deployment scripts if needed

Related Links

• Font Awesome Icons
• Font Awesome Free License
• Developer-Guide - Development setup

---

Status: 🔄 Partial
Issue: #139
Completed: 2 of 3 areas
Priority: Medium (functionality, not blocking)
Recommended: Complete as part of next UI refresh