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

refactor: align copy code pattern with rest of components page

Browse Source 
Use inline template literals with {% raw %}{% endraw %} and HTML entities
(") for quotes, consistent with other copy code buttons on the page.
Removed the codeSnippets JS variables.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Samir Boulahtit
2026-01-24 21:53:15 +01:00
parent 2bac4dfc90
commit f7ca6c0747
2 changed files with 32 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2626,25 +2626,41 @@ goToPage(n) { if (n !== '...' && n >= 1 && n <= this.totalPages) { this.paginati
<div class="space-y-4"> <div class="space-y-4">
<div> <div>
<div class="flex items-center justify-between mb-2"> <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Static Message (confirm_modal):</p>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Static Message (confirm_modal):</p> <button @click="copyCode(`{% raw %}{% from 'shared/macros/modals.html' import confirm_modal %}
<button @click="copyCode(codeSnippets.confirmModal)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
{{ confirm_modal(
'deleteConfirm',
'Delete Item',
'Are you sure you want to delete this item?',
'deleteItem()',
'showDeleteModal',
'Delete',
'Cancel',
'danger'
) }}{% 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> <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
Copy Copy Code
</button> </button>
</div> </div>
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModal"></code></pre>
</div>
<div> <div>
<div class="flex items-center justify-between mb-2"> <p class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Dynamic Message (confirm_modal_dynamic):</p>
<p class="text-sm font-medium text-gray-700 dark:text-gray-300">Dynamic Message (confirm_modal_dynamic):</p> <button @click="copyCode(`{% raw %}{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
<button @click="copyCode(codeSnippets.confirmModalDynamic)" class="text-sm text-purple-600 hover:text-purple-700 dark:text-purple-400 flex items-center">
{{ confirm_modal_dynamic(
'removePlatformModal',
'Remove Platform',
&quot;'Are you sure you want to remove ' + (item?.name || '') + '?'&quot;,
'confirmRemove()',
'showConfirmModal',
'Remove',
'Cancel',
'warning'
) }}{% 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> <span x-html="$icon('duplicate', 'w-4 h-4 mr-1')"></span>
Copy Copy Code
</button> </button>
</div> </div>
<pre class="bg-gray-100 dark:bg-gray-700 p-3 rounded-lg text-xs overflow-x-auto"><code x-text="codeSnippets.confirmModalDynamic"></code></pre>
</div>
</div> </div>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-4"> <p class="text-sm text-gray-500 dark:text-gray-400 mt-4">

28
static/admin/js/components.js
View File

@@ -435,34 +435,6 @@ function adminComponents() {
showDynamicConfirmDemo: false, showDynamicConfirmDemo: false,
dynamicItemName: '', dynamicItemName: '',
// Code snippets for confirm modal macros
codeSnippets: {
confirmModal: `{% from 'shared/macros/modals.html' import confirm_modal %}
{{ confirm_modal(
'deleteConfirm',
'Delete Item',
'Are you sure you want to delete this item?',
'deleteItem()',
'showDeleteModal',
'Delete',
'Cancel',
'danger'
) }}`,
confirmModalDynamic: `{% from 'shared/macros/modals.html' import confirm_modal_dynamic %}
{{ confirm_modal_dynamic(
'removePlatformModal',
'Remove Platform',
"'Are you sure you want to remove \\\"' + (item?.name || '') + '\\\" ?'",
'confirmRemove()',
'showConfirmModal',
'Remove',
'Cancel',
'warning'
) }}`
},
// Example log data for demo // Example log data for demo
showErrorLogDemo() { showErrorLogDemo() {
this.exampleLog = { this.exampleLog = {