feat: refactorer l'interface d'édition de bookmarks avec UI sombre raffinée, éditeur Markdown Toast UI intégré, système de tags interactif avec pills et suppression, grille de toggles pour read later/note/private, variables CSS personnalisées pour thème cohérent, et amélioration responsive avec grid layouts optimisés et support mobile complet
This commit is contained in:
+46
-17
@@ -15,10 +15,19 @@
|
||||
{if="!isset($index)"}
|
||||
{$index=""}
|
||||
{/if}
|
||||
{$batchModeValue=empty($batch_mode) ? '0' : '1'}
|
||||
{$readLaterChecked=strpos(' ' . $link.tags . ' ', ' readlater ') != false || strpos(' ' . $link.tags . ' ', ' toread ') != false}
|
||||
{$noteDefaultChecked=$link_is_new && empty($link.url)}
|
||||
{$noteChecked=strpos(' ' . $link.tags . ' ', ' note ') != false || $noteDefaultChecked}
|
||||
{$effectiveTags=$link.tags}
|
||||
{if="$noteDefaultChecked && strpos(' ' . $effectiveTags . ' ', ' note ') == false"}
|
||||
{$effectiveTags=trim($effectiveTags . ' note')}
|
||||
{/if}
|
||||
{$privateChecked=$link.private == true || $link_is_new}
|
||||
<div id="editlinkform{$index}" class="editlinkform container page-edit">
|
||||
<div class="row editlinkform-row">
|
||||
<div class="col-md-6 col-md-offset-3 editlinkform-col">
|
||||
<form method="post" name="linkform" class="card" action="{$base_path}/admin/shaare">
|
||||
<form method="post" name="linkform" class="card bookmark-editor-card bookmark-editor-form" action="{$base_path}/admin/shaare" data-batch-mode="{$batchModeValue}">
|
||||
{if="isset($link.id)"}
|
||||
<input type="hidden" name="lf_id" value="{$link.id}">
|
||||
{/if}
|
||||
@@ -28,54 +37,74 @@
|
||||
<input type="hidden" name="returnurl" value="{$http_referer}">
|
||||
{/if}
|
||||
|
||||
<div class="card-header">
|
||||
{if="!$link_is_new"}Edit Bookmark{else}New Bookmark{/if}
|
||||
{if="!$link_is_new"}<span class="card-subheader" style="font-size:0.85rem; color:var(--text-muted); font-weight:normal;"> - {'created on'|t} {$link.created|format_date}</span>{/if}
|
||||
<div class="card-header bookmark-editor-header">
|
||||
<div class="bookmark-editor-title-wrap">
|
||||
<h1 class="bookmark-editor-title">{if="!$link_is_new"}Edit Bookmark{else}New Bookmark{/if}</h1>
|
||||
{if="!$link_is_new"}
|
||||
<p class="bookmark-editor-meta">{'created on'|t} {$link.created|format_date}</p>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="form-group">
|
||||
<div class="form-group bookmark-field-group">
|
||||
<label class="form-label" for="lf_url{$index}">{'URL'|t}</label>
|
||||
<input type="text" class="form-control" name="lf_url" id="lf_url{$index}" value="{$link.url}" placeholder="https://...">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group bookmark-field-group">
|
||||
<label class="form-label" for="lf_title{$index}">{'Title'|t}</label>
|
||||
<div class="{$asyncLoadClass}">
|
||||
<input type="text" class="form-control{if="empty($batch_mode) && $link.title==''"} autofocus{/if}" name="lf_title" id="lf_title{$index}" value="{$link.title}" placeholder="Page title">
|
||||
</div>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label class="form-label" for="lf_description{$index}">{'Description'|t}</label>
|
||||
<div class="form-group bookmark-field-group">
|
||||
<label class="form-label" for="lf_description{$index}">{'Description'|t} (Markdown)</label>
|
||||
<div class="{$asyncLoadClass}">
|
||||
<textarea class="form-control{if="empty($batch_mode) && $link.description==''"} autofocus{/if}" name="lf_description" id="lf_description{$index}" placeholder="Add a description..." rows="5">{$link.description}</textarea>
|
||||
<textarea class="form-control bookmark-editor-source{if="empty($batch_mode) && $link.description==''"} autofocus{/if}" name="lf_description" id="lf_description{$index}" placeholder="Add a description..." rows="6">{$link.description}</textarea>
|
||||
<div id="lf_description_editor{$index}" class="bookmark-markdown-editor" aria-label="Markdown editor"></div>
|
||||
</div>
|
||||
{if="$formatter==='markdown'"}
|
||||
<div class="sublabel">
|
||||
<div class="sublabel bookmark-editor-sublabel">
|
||||
{'Description will be rendered with'|t} <a href="http://daringfireball.net/projects/markdown/syntax" target="_blank" rel="noopener">{'Markdown syntax'|t}</a>.
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="form-group bookmark-field-group">
|
||||
<label class="form-label" for="lf_tags{$index}">{'Tags'|t}</label>
|
||||
<div class="{$asyncLoadClass}">
|
||||
<input type="text" class="form-control" id="lf_tags{$index}" name="lf_tags" {if="empty($batch_mode)"}class="autofocus form-control"{/if} value="{$link.tags}"
|
||||
data-list="{loop="$tags"}{$key}, {/loop}" data-multiple autocomplete="off" placeholder="tags separated by space" />
|
||||
<input type="text" class="bookmark-tags-hidden-input" id="lf_tags{$index}" name="lf_tags" value="{$effectiveTags}" data-tag-options="{loop="$tags"}{$key},{/loop}" autocomplete="off" />
|
||||
<div class="bookmark-tags-input" data-tags-container="lf_tags{$index}">
|
||||
<div class="bookmark-tags-list" id="bookmark-tags-list{$index}"></div>
|
||||
<input type="text" class="bookmark-tags-text-input" id="bookmark-tags-text{$index}" placeholder="Type a tag and press Enter or Space" autocomplete="off" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{if="isset($edit_link_plugin)"}
|
||||
{loop="$edit_link_plugin"}
|
||||
{if="!strstr(strtolower($value), 'lf_readlater') && !strstr(strtolower($value), 'lf_private')"}
|
||||
<div class="form-group">
|
||||
{$value}
|
||||
</div>
|
||||
{/if}
|
||||
{/loop}
|
||||
{/if}
|
||||
|
||||
<div class="form-group checkbox-wrapper">
|
||||
<input type="checkbox" {if="$link.private === true"}checked="checked"{/if} name="lf_private" id="lf_private{$index}" style="width:auto;"/>
|
||||
<label for="lf_private{$index}" style="margin:0;">{'Private bookmark'|t}</label>
|
||||
<div class="bookmark-toggle-grid">
|
||||
<label class="bookmark-toggle-item" for="lf_readlater{$index}">
|
||||
<input type="checkbox" id="lf_readlater{$index}" class="bookmark-toggle-readlater" {if="$readLaterChecked"}checked="checked"{/if}>
|
||||
<span>{'Read it later'|t}</span>
|
||||
</label>
|
||||
<label class="bookmark-toggle-item" for="lf_note{$index}">
|
||||
<input type="checkbox" id="lf_note{$index}" class="bookmark-toggle-note" {if="$noteChecked"}checked="checked"{/if}>
|
||||
<span>Note</span>
|
||||
</label>
|
||||
<label class="bookmark-toggle-item" for="lf_private{$index}">
|
||||
<input type="checkbox" {if="$privateChecked"}checked="checked"{/if} name="lf_private" id="lf_private{$index}" />
|
||||
<span>{'Private'|t}</span>
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<div class="card-footer bookmark-editor-footer">
|
||||
{if="!empty($batch_mode)"}
|
||||
<button type="button" name="cancel-batch-link" class="btn btn-secondary">{'Cancel'|t}</button>
|
||||
{/if}
|
||||
|
||||
Reference in New Issue
Block a user