websites/flask-vim-docs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

wip

Browse source
This commit is contained in:
pika 2025-04-14 22:56:18 +02:00
parent 627f805377
commit 02582c6b06
4 changed files with 336 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

175
app/templates/category_edit.html
View file

@ -22,8 +22,54 @@
<div>
<label for="category-icon" class="block text-sm font-medium text-gray-400 mb-1">Icon (Material Design Icon)</label>
<input type="text" id="category-icon" value="{% if category %}{{ category.icon }}{% else %}mdi-folder-outline{% endif %}"
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
<div class="relative">
<div class="flex items-center">
<div class="icon-preview w-10 h-10 flex items-center justify-center bg-gray-700 rounded-md mr-3">
<i id="icon-preview" class="mdi mdi-folder-outline text-xl"></i>
</div>
<input type="text" id="category-icon" value="{% if category %}{{ category.icon }}{% else %}mdi-folder-outline{% endif %}"
class="flex-1 px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
<button type="button" id="icon-search-btn" class="ml-2 px-3 py-2 bg-gray-600 text-white rounded-md hover:bg-gray-500">
<i class="mdi mdi-magnify"></i>
</button>
</div>
<!-- Icon Search Modal -->
<div id="icon-search-modal" class="hidden fixed inset-0 z-50 overflow-y-auto">
<div class="flex items-center justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
<div class="fixed inset-0 transition-opacity" aria-hidden="true">
<div class="absolute inset-0 bg-gray-900 opacity-75"></div>
</div>
<div class="inline-block align-bottom bg-gray-800 rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-2xl sm:w-full">
<div class="bg-gray-800 px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
<div class="mt-3 text-center sm:mt-0 sm:text-left">
<h3 class="text-lg leading-6 font-medium text-white mb-4">
Select an Icon
</h3>
<div class="mt-2">
<!-- Search Input -->
<div class="mb-4">
<input type="text" id="icon-search-input" placeholder="Search icons..."
class="w-full px-3 py-2 bg-gray-700 border border-gray-600 rounded-md text-white focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary">
</div>
<!-- Icons Grid -->
<div id="icons-grid" class="grid grid-cols-6 gap-2 max-h-96 overflow-y-auto">
<!-- Icons will be populated dynamically -->
</div>
</div>
</div>
</div>
<div class="bg-gray-700 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
<button type="button" id="close-icon-modal" class="mt-3 w-full inline-flex justify-center rounded-md border border-gray-600 shadow-sm px-4 py-2 bg-gray-700 text-white hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary sm:mt-0 sm:ml-3 sm:w-auto sm:text-sm">
Close
</button>
</div>
</div>
</div>
</div>
</div>
<p class="text-sm text-gray-500 mt-1">Example: mdi-folder-outline, mdi-code-tags, mdi-book-open-page-variant</p>
</div>
@ -188,6 +234,131 @@
alert('Error saving category: ' + error.message);
});
});
// Icon Preview Functionality
const iconPreview = document.getElementById('icon-preview');
// Update icon preview when input changes
function updateIconPreview() {
const iconClass = iconInput.value.trim();
// Remove all mdi classes
iconPreview.className = '';
// Add the mdi base class and the selected icon class
iconPreview.classList.add('mdi');
// If the value doesn't start with mdi-, add it
if (iconClass.startsWith('mdi-')) {
iconPreview.classList.add(iconClass);
} else if (iconClass) {
iconPreview.classList.add('mdi-' + iconClass.replace('mdi-', ''));
} else {
iconPreview.classList.add('mdi-folder-outline');
}
}
// Initial preview
updateIconPreview();
// Update preview on input change
iconInput.addEventListener('input', updateIconPreview);
// Icon Search Modal
const iconSearchBtn = document.getElementById('icon-search-btn');
const iconSearchModal = document.getElementById('icon-search-modal');
const closeIconModal = document.getElementById('close-icon-modal');
const iconSearchInput = document.getElementById('icon-search-input');
const iconsGrid = document.getElementById('icons-grid');
// Common Material Design Icons
const commonIcons = [
'mdi-folder-outline', 'mdi-folder', 'mdi-folder-open', 'mdi-folder-plus',
'mdi-file-document-outline', 'mdi-file-document', 'mdi-file',
'mdi-note-outline', 'mdi-note', 'mdi-notebook', 'mdi-notebook-outline',
'mdi-code-tags', 'mdi-code-braces', 'mdi-console', 'mdi-database',
'mdi-server', 'mdi-desktop-tower', 'mdi-monitor', 'mdi-laptop',
'mdi-home', 'mdi-account', 'mdi-cog', 'mdi-star', 'mdi-heart',
'mdi-book', 'mdi-book-open', 'mdi-bookshelf', 'mdi-bookmark',
'mdi-alert', 'mdi-information', 'mdi-help-circle', 'mdi-check-circle',
'mdi-tools', 'mdi-wrench', 'mdi-hammer', 'mdi-screwdriver',
'mdi-shield', 'mdi-lock', 'mdi-key', 'mdi-wifi', 'mdi-web',
'mdi-link', 'mdi-github', 'mdi-git', 'mdi-docker', 'mdi-language-python',
'mdi-language-javascript', 'mdi-language-html5', 'mdi-language-css3',
'mdi-chart-bar', 'mdi-chart-line', 'mdi-chart-pie', 'mdi-chart-bubble',
'mdi-movie', 'mdi-music', 'mdi-image', 'mdi-camera', 'mdi-video',
'mdi-atom', 'mdi-microscope', 'mdi-flask', 'mdi-test-tube',
'mdi-robot', 'mdi-brain', 'mdi-bug', 'mdi-rocket', 'mdi-satellite',
'mdi-car', 'mdi-airplane', 'mdi-train', 'mdi-bike', 'mdi-walk',
'mdi-food', 'mdi-coffee', 'mdi-beer', 'mdi-pizza', 'mdi-cake',
'mdi-currency-usd', 'mdi-cash', 'mdi-credit-card', 'mdi-bank',
'mdi-message', 'mdi-email', 'mdi-chat', 'mdi-forum', 'mdi-comment',
'mdi-calendar', 'mdi-clock', 'mdi-alarm', 'mdi-timer', 'mdi-watch',
'mdi-weather-sunny', 'mdi-weather-night', 'mdi-weather-rainy', 'mdi-weather-snowy',
'mdi-map', 'mdi-map-marker', 'mdi-compass', 'mdi-earth', 'mdi-directions',
'mdi-shopping', 'mdi-cart', 'mdi-store', 'mdi-tag', 'mdi-sale',
'mdi-palette', 'mdi-brush', 'mdi-format-paint', 'mdi-pencil', 'mdi-pen',
'mdi-printer', 'mdi-scanner', 'mdi-fax', 'mdi-file-pdf', 'mdi-file-excel',
'mdi-file-word', 'mdi-file-powerpoint', 'mdi-file-image', 'mdi-file-video',
'mdi-file-music', 'mdi-file-xml', 'mdi-file-code', 'mdi-zip-box'
];
// Populate the icons grid
function populateIconsGrid(searchTerm = '') {
iconsGrid.innerHTML = '';
const filteredIcons = searchTerm
? commonIcons.filter(icon => icon.toLowerCase().includes(searchTerm.toLowerCase()))
: commonIcons;
filteredIcons.forEach(icon => {
const iconDiv = document.createElement('div');
iconDiv.className = 'cursor-pointer p-2 bg-gray-700 rounded-md flex flex-col items-center hover:bg-gray-600';
const iconEl = document.createElement('i');
iconEl.className = 'mdi ' + icon + ' text-2xl mb-1';
const iconName = document.createElement('div');
iconName.className = 'text-xs text-gray-400 truncate w-full text-center';
iconName.textContent = icon.replace('mdi-', '');
iconDiv.appendChild(iconEl);
iconDiv.appendChild(iconName);
// Select icon when clicked
iconDiv.addEventListener('click', function() {
iconInput.value = icon;
updateIconPreview();
iconSearchModal.classList.add('hidden');
});
iconsGrid.appendChild(iconDiv);
});
}
// Open modal
iconSearchBtn.addEventListener('click', function() {
populateIconsGrid();
iconSearchModal.classList.remove('hidden');
iconSearchInput.focus();
});
// Close modal
closeIconModal.addEventListener('click', function() {
iconSearchModal.classList.add('hidden');
});
// Click outside to close
iconSearchModal.addEventListener('click', function(e) {
if (e.target === iconSearchModal) {
iconSearchModal.classList.add('hidden');
}
});
// Search functionality
iconSearchInput.addEventListener('input', function() {
populateIconsGrid(this.value);
});
});
</script>
{% endblock %}