sboulahtit/orion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

docs: add language selector macro to admin components showcase

Browse Source 
Add language_selector.html to the Jinja Macros section with:
- Entry in Available Macro Files grid
- Live demo showing all three variants:
  - language_selector() - full dropdown with labels
  - language_selector_compact() - flag icon only
  - language_toggle() - toggle for 2 languages
- Code examples with copy functionality

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2025-12-13 22:40:13 +01:00
parent d5c9173a2e
commit b1a2971009
1 changed files with 72 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

72
app/templates/admin/components.html
View File

@@ -1476,6 +1476,14 @@ html {
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Specialized input components</p>
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">search_autocomplete(), number_stepper()</code>
</div>
<div class="p-4 bg-gray-50 dark:bg-gray-900 rounded-lg">
<h4 class="font-semibold text-gray-800 dark:text-gray-200 mb-2 flex items-center">
<span x-html="$icon('translate', 'w-4 h-4 mr-2 text-purple-600 dark:text-purple-400')"></span>
language_selector.html
</h4>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-2">Language/i18n components</p>
<code class="text-xs bg-gray-200 dark:bg-gray-700 px-2 py-1 rounded">language_selector(), language_selector_compact(), language_toggle()</code>
</div>
</div>
</div>
@@ -1576,6 +1584,70 @@ html {
Copy Code
</button>
</div>
<!-- Language Selector Component -->
<div class="mt-8 pt-8 border-t border-gray-200 dark:border-gray-700">
<h3 class="text-lg font-semibold text-gray-700 dark:text-gray-300 mb-3">Language Selector</h3>
<p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
Language selector components for multi-language support. Use macros from <code class="bg-gray-100 dark:bg-gray-700 px-1 rounded">language_selector.html</code>. Supports dropdown, compact (icon-only), and toggle variants.
</p>
<div class="bg-gray-50 dark:bg-gray-900 rounded-lg p-4 mb-3">
<!-- Live Demo -->
<div class="space-y-6">
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Full Selector (with labels)</label>
{% from 'shared/macros/language_selector.html' import language_selector %}
{{ language_selector(current_language='fr', enabled_languages=['en', 'fr', 'de', 'lb'], position='left') }}
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Compact Selector (flag only)</label>
{% from 'shared/macros/language_selector.html' import language_selector_compact %}
{{ language_selector_compact(current_language='de', enabled_languages=['en', 'fr', 'de'], position='left') }}
</div>
<div>
<label class="block text-sm font-medium text-gray-700 dark:text-gray-400 mb-2">Toggle (2 languages)</label>
{% from 'shared/macros/language_selector.html' import language_toggle %}
{{ language_toggle(current_language='fr', enabled_languages=['fr', 'de']) }}
</div>
</div>
</div>
<div class="bg-gray-900 rounded-lg p-4 mb-3 overflow-x-auto">
<pre class="text-sm text-gray-100"><code>{% raw %}{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact, language_toggle %}
{# Full dropdown with labels #}
{{ language_selector(
current_language='fr',
enabled_languages=['en', 'fr', 'de', 'lb'],
position='right'
) }}
{# Compact (flag icon only) - good for headers #}
{{ language_selector_compact(
current_language='fr',
enabled_languages=['en', 'fr', 'de'],
position='right'
) }}
{# Toggle for 2 languages #}
{{ language_toggle(
current_language='fr',
enabled_languages=['fr', 'de']
) }}{% endraw %}</code></pre>
</div>
<button @click="copyCode(`{% raw %}{% from 'shared/macros/language_selector.html' import language_selector, language_selector_compact, language_toggle %}
{# Full dropdown with labels #}
{{ language_selector(current_language='fr', enabled_languages=['en', 'fr', 'de', 'lb'], position='right') }}
{# Compact (flag icon only) #}
{{ language_selector_compact(current_language='fr', enabled_languages=['en', 'fr', 'de'], position='right') }}
{# Toggle for 2 languages #}
{{ language_toggle(current_language='fr', enabled_languages=['fr', 'de']) }}{% endraw %}`)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
<span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
Copy Code
</button>
</div>
</div>
</section>