From 5b6b0fd163ad09d3d9a286ec6103d72e83d9bde9 Mon Sep 17 00:00:00 2001 From: Bruno Charest Date: Wed, 18 Feb 2026 13:29:45 -0500 Subject: [PATCH] =?UTF-8?q?feat:=20refactorer=20l'interface=20d'=C3=A9diti?= =?UTF-8?q?on=20de=20bookmarks=20avec=20UI=20sombre=20raffin=C3=A9e,=20?= =?UTF-8?q?=C3=A9diteur=20Markdown=20Toast=20UI=20int=C3=A9gr=C3=A9,=20sys?= =?UTF-8?q?t=C3=A8me=20de=20tags=20interactif=20avec=20pills=20et=20suppre?= =?UTF-8?q?ssion,=20grille=20de=20toggles=20pour=20read=20later/note/priva?= =?UTF-8?q?te,=20variables=20CSS=20personnalis=C3=A9es=20pour=20th=C3=A8me?= =?UTF-8?q?=20coh=C3=A9rent,=20et=20am=C3=A9lioration=20responsive=20avec?= =?UTF-8?q?=20grid=20layouts=20optimis=C3=A9s=20et=20support=20mobile=20co?= =?UTF-8?q?mplet?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- shaarli-pro/css/style.css | 349 ++++++++++++++++++++++++++++++++++++++ shaarli-pro/editlink.html | 63 +++++-- shaarli-pro/includes.html | 6 + shaarli-pro/js/script.js | 252 ++++++++++++++++++++++++++- 4 files changed, 651 insertions(+), 19 deletions(-) diff --git a/shaarli-pro/css/style.css b/shaarli-pro/css/style.css index 55e780b..feb7a5f 100644 --- a/shaarli-pro/css/style.css +++ b/shaarli-pro/css/style.css @@ -3840,4 +3840,353 @@ select:focus { outline: 2px solid var(--primary); outline-offset: 2px; } +} + +/* ===== Add/Edit Bookmark - Refined Dark UI ===== */ +.page-edit { + --bookmark-panel-bg: #121c30; + --bookmark-panel-border: #25324a; + --bookmark-panel-soft: #1a2640; + --bookmark-input-bg: #0c1528; + --bookmark-input-border: #334769; + --bookmark-input-focus: #70a0ff; + --bookmark-input-focus-ring: rgba(112, 160, 255, 0.25); + --bookmark-text-main: #eaf1ff; + --bookmark-text-muted: #9fb1d4; + --bookmark-tag-bg: #2f2f90; + --bookmark-tag-bg-hover: #3939a6; + --bookmark-tag-text: #cfdaff; + --bookmark-tag-remove-bg: rgba(255, 255, 255, 0.16); + --bookmark-tag-remove-bg-hover: rgba(255, 255, 255, 0.26); + --bookmark-save-bg: linear-gradient(135deg, #6fa8ff 0%, #4d82f0 100%); +} + +.page-edit .editlinkform-col { + width: 100%; + max-width: 920px; + margin: 0 auto; + float: none; +} + +.page-edit .bookmark-editor-card { + border-radius: 16px; + border: 1px solid var(--bookmark-panel-border); + background: linear-gradient(180deg, #1a2943 0%, var(--bookmark-panel-bg) 100%); + box-shadow: 0 16px 42px rgba(0, 8, 22, 0.42); + overflow: hidden; +} + +.page-edit .bookmark-editor-header { + background: linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(0, 0, 0, 0) 100%); + border-bottom: 1px solid var(--bookmark-panel-border); + padding: 1.25rem 1.5rem; +} + +.bookmark-editor-title { + margin: 0; + font-size: 1.35rem; + line-height: 1.2; + color: var(--bookmark-text-main); + letter-spacing: 0.01em; +} + +.bookmark-editor-meta { + margin: 0.35rem 0 0; + font-size: 0.8rem; + color: var(--bookmark-text-muted); + text-transform: uppercase; + letter-spacing: 0.04em; +} + +.page-edit .bookmark-editor-card .card-body { + padding: 1.5rem; + background: transparent; +} + +.page-edit .bookmark-field-group { + margin-bottom: 1.15rem; +} + +.page-edit .bookmark-field-group .form-label { + margin-bottom: 0.45rem; + color: var(--bookmark-text-main); + font-weight: 600; + font-size: 0.86rem; + letter-spacing: 0.02em; +} + +.page-edit .bookmark-editor-card .form-control, +.page-edit .bookmark-editor-card input[type="text"], +.page-edit .bookmark-editor-card textarea { + border-radius: 10px; + border: 1px solid var(--bookmark-input-border); + background: var(--bookmark-input-bg); + color: var(--bookmark-text-main); + min-height: 44px; +} + +.page-edit .bookmark-editor-card .form-control::placeholder, +.page-edit .bookmark-tags-text-input::placeholder { + color: var(--bookmark-text-muted); +} + +.page-edit .bookmark-editor-card .form-control:focus, +.page-edit .bookmark-editor-card input[type="text"]:focus, +.page-edit .bookmark-editor-card textarea:focus, +.page-edit .bookmark-tags-text-input:focus { + border-color: var(--bookmark-input-focus); + box-shadow: 0 0 0 3px var(--bookmark-input-focus-ring); +} + +.page-edit .bookmark-editor-form.is-enhanced .bookmark-editor-source { + display: none; +} + +.page-edit .bookmark-markdown-editor { + border: 1px solid var(--bookmark-input-border); + border-radius: 12px; + overflow: hidden; + background: var(--bookmark-input-bg); +} + +.page-edit .bookmark-editor-sublabel { + margin-top: 0.5rem; + color: var(--bookmark-text-muted); +} + +.page-edit .bookmark-editor-sublabel a { + color: #8fb8ff; +} + +.page-edit .toastui-editor-defaultUI, +.page-edit .toastui-editor-md-container, +.page-edit .toastui-editor-ww-container, +.page-edit .toastui-editor-toolbar, +.page-edit .toastui-editor-mode-switch { + background: var(--bookmark-input-bg); +} +.page-edit .toastui-editor-defaultUI { + border: 0; +} + +.page-edit .toastui-editor-toolbar { + border-bottom: 1px solid var(--bookmark-input-border); +} + +.page-edit .toastui-editor-toolbar button { + border: 0; + background-color: transparent; + box-shadow: none; +} + +.page-edit .toastui-editor-toolbar button:hover, +.page-edit .toastui-editor-toolbar button.active, +.page-edit .toastui-editor-toolbar button:focus-visible { + background-color: rgba(126, 168, 255, 0.16); +} + +.page-edit .toastui-editor-toolbar-icons { + opacity: 0.96; +} + +.page-edit .toastui-editor-toolbar-divider { + background-color: var(--bookmark-input-border); +} + +.page-edit .toastui-editor-mode-switch .tab-item { + color: var(--bookmark-text-main); +} + +.page-edit .toastui-editor-md-tab-container, +.page-edit .toastui-editor-mode-switch { + border-top: 1px solid var(--bookmark-input-border); +} + +.page-edit .bookmark-tags-input { + min-height: 48px; + display: flex; + align-items: center; + flex-wrap: wrap; + gap: 0.5rem; + padding: 0.5rem; + border-radius: 12px; + border: 1px solid var(--bookmark-input-border); + background: var(--bookmark-input-bg); + transition: border-color 0.2s ease, box-shadow 0.2s ease; +} + +.page-edit .bookmark-tags-input:focus-within { + border-color: var(--bookmark-input-focus); + box-shadow: 0 0 0 3px var(--bookmark-input-focus-ring); +} + +.page-edit .bookmark-tags-list { + display: flex; + flex-wrap: wrap; + gap: 0.45rem; +} + +.page-edit .bookmark-tag-pill { + display: inline-flex; + align-items: center; + gap: 0.4rem; + height: 34px; + padding: 0 0.4rem 0 0.8rem; + border-radius: 999px; + border: 1px solid rgba(191, 203, 255, 0.12); + background: var(--bookmark-tag-bg); + color: var(--bookmark-tag-text); + font-size: 0.95rem; + font-weight: 600; + letter-spacing: 0.01em; + transition: transform 0.2s ease, background-color 0.2s ease; +} + +.page-edit .bookmark-tag-pill:hover { + transform: translateY(-1px); + background: var(--bookmark-tag-bg-hover); +} + +.page-edit .bookmark-tag-remove { + border: 0; + width: 24px; + height: 24px; + border-radius: 999px; + background: var(--bookmark-tag-remove-bg); + color: var(--bookmark-tag-text); + display: inline-flex; + align-items: center; + justify-content: center; + cursor: pointer; + line-height: 1; + padding: 0; + transition: background-color 0.2s ease, transform 0.2s ease; +} + +.page-edit .bookmark-tag-remove:hover, +.page-edit .bookmark-tag-remove:focus-visible { + background: var(--bookmark-tag-remove-bg-hover); + transform: scale(1.04); +} + +.page-edit .bookmark-tag-remove:focus-visible { + outline: none; + box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2); +} + +.page-edit .bookmark-tags-text-input { + border: 0; + background: transparent; + color: var(--bookmark-text-main); + min-width: 190px; + flex: 1; + font-size: 0.92rem; + padding: 0.45rem 0.4rem; +} + +.page-edit .bookmark-tags-text-input:focus { + outline: none; + box-shadow: none; +} + +.page-edit .bookmark-toggle-grid { + display: grid; + grid-template-columns: repeat(3, minmax(0, 1fr)); + gap: 0.75rem; + margin-top: 0.45rem; +} + +.page-edit .bookmark-toggle-item { + display: inline-flex; + align-items: center; + gap: 0.55rem; + color: var(--bookmark-text-main); + font-size: 0.92rem; + font-weight: 500; + cursor: pointer; +} + +.page-edit .bookmark-toggle-item input[type="checkbox"] { + width: 18px; + height: 18px; + accent-color: #7ea8ff; +} + +.page-edit .bookmark-editor-footer { +background: var(--bookmark-panel-soft); +border-top: 1px solid var(--bookmark-panel-border); +padding: 1rem 1.5rem; +} + +.page-edit .bookmark-editor-footer .btn { +min-height: 42px; +border-radius: 10px; +padding-inline: 1rem; +font-weight: 600; +} + +.page-edit .bookmark-editor-footer .btn-primary { +background: var(--bookmark-save-bg); +border-color: transparent; +box-shadow: 0 10px 22px rgba(77, 130, 240, 0.35); +} + +.page-edit .bookmark-editor-footer .btn-primary:hover { +filter: brightness(1.06); +} + +.page-edit .bookmark-editor-footer .btn-danger { +background: #c84e4e; +border-color: transparent; +} + +.page-edit .bookmark-editor-footer .btn-danger:hover { +background: #dd5a5a; +} + +@media (max-width: 991px) { +.page-edit .editlinkform-col { +max-width: 100%; +padding-inline: 0; +} + +.page-edit .bookmark-editor-header, +.page-edit .bookmark-editor-card .card-body, +.page-edit .bookmark-editor-footer { +padding: 1rem; +} + +.page-edit .bookmark-toggle-grid { +grid-template-columns: 1fr; +} + +.page-edit .bookmark-tags-input { +gap: 0.4rem; +} + +.page-edit .bookmark-tag-pill { +height: 32px; +font-size: 0.9rem; +} + +.page-edit .bookmark-editor-footer { +flex-wrap: wrap; +justify-content: stretch; +} + +.page-edit .bookmark-editor-footer .btn, +.page-edit .bookmark-editor-footer a.btn { +flex: 1 1 calc(50% - 0.4rem); +} +} + +@media (max-width: 640px) { +.page-edit .bookmark-tags-text-input { +min-width: 120px; +} + +.page-edit .bookmark-editor-footer .btn, +.page-edit .bookmark-editor-footer a.btn { +flex: 1 1 100%; +} } \ No newline at end of file diff --git a/shaarli-pro/editlink.html b/shaarli-pro/editlink.html index e69da24..bea7b2a 100644 --- a/shaarli-pro/editlink.html +++ b/shaarli-pro/editlink.html @@ -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}
-
+ {if="isset($link.id)"} {/if} @@ -28,54 +37,74 @@ {/if} -
- {if="!$link_is_new"}Edit Bookmark{else}New Bookmark{/if} - {if="!$link_is_new"} - {'created on'|t} {$link.created|format_date}{/if} +
+
+

{if="!$link_is_new"}Edit Bookmark{else}New Bookmark{/if}

+ {if="!$link_is_new"} +

{'created on'|t} {$link.created|format_date}

+ {/if} +
-
+
-
+
-
- +
+
- + +
{if="$formatter==='markdown'"} -
+
{'Description will be rendered with'|t} {'Markdown syntax'|t}.
{/if}
-
+
- + +
+
+ +
{if="isset($edit_link_plugin)"} {loop="$edit_link_plugin"} + {if="!strstr(strtolower($value), 'lf_readlater') && !strstr(strtolower($value), 'lf_private')"}
{$value}
+ {/if} {/loop} {/if} -
- - +
+ + +
-
+
{if="!empty($batch_mode)"} {/if} diff --git a/shaarli-pro/includes.html b/shaarli-pro/includes.html index 877c3f3..7ee90a8 100644 --- a/shaarli-pro/includes.html +++ b/shaarli-pro/includes.html @@ -30,6 +30,12 @@ {/if} +{if="$pageName=='editlink' || $pageName=='editlinkbatch'"} + + + +{/if} + diff --git a/shaarli-pro/js/script.js b/shaarli-pro/js/script.js index 4d4e85f..9f48252 100644 --- a/shaarli-pro/js/script.js +++ b/shaarli-pro/js/script.js @@ -338,7 +338,16 @@ document.addEventListener('DOMContentLoaded', () => { // Keyboard shortcuts document.addEventListener('keydown', (e) => { const isSearchOpen = searchOverlay?.classList.contains('show'); - const isTyping = e.target.tagName === 'INPUT' || e.target.tagName === 'TEXTAREA'; + const target = e.target; + const isTyping = Boolean( + target && ( + target.tagName === 'INPUT' || + target.tagName === 'TEXTAREA' || + target.tagName === 'SELECT' || + target.isContentEditable || + (typeof target.closest === 'function' && target.closest('.toastui-editor-defaultUI, .toastui-editor-main, .toastui-editor-contents, .CodeMirror')) + ) + ); // Handle ESC - always close search/filter if (e.key === 'Escape') { @@ -373,7 +382,7 @@ document.addEventListener('DOMContentLoaded', () => { } // S to open search (when not typing) - if (!isTyping && (e.key === 's' || e.key === 'S')) { + if (!isTyping && !e.ctrlKey && !e.metaKey && !e.altKey && (e.key === 's' || e.key === 'S')) { e.preventDefault(); openSearch(); } @@ -1145,6 +1154,245 @@ document.addEventListener('DOMContentLoaded', () => { } }); + // ===== Bookmark Editor Form (Markdown + Tags UI) ===== + function initBookmarkEditorForms() { + const forms = document.querySelectorAll('.bookmark-editor-form[data-batch-mode="0"]'); + if (!forms.length) return; + + const normalizeTag = (value) => value.trim().replace(/\s+/g, '-'); + + forms.forEach((form) => { + form.classList.add('is-enhanced'); + + const descriptionSource = form.querySelector('.bookmark-editor-source'); + const editorMount = form.querySelector('.bookmark-markdown-editor'); + const hiddenTagsInput = form.querySelector('.bookmark-tags-hidden-input'); + const tagsInputContainer = form.querySelector('.bookmark-tags-input'); + const tagsList = form.querySelector('.bookmark-tags-list'); + const tagsTextInput = form.querySelector('.bookmark-tags-text-input'); + const readLaterCheckbox = form.querySelector('.bookmark-toggle-readlater'); + const noteCheckbox = form.querySelector('.bookmark-toggle-note'); + const isDarkTheme = document.documentElement.getAttribute('data-theme') === 'dark'; + + // Markdown editor + if (descriptionSource && editorMount && window.toastui && window.toastui.Editor) { + const previewStyle = window.innerWidth < 992 ? 'tab' : 'vertical'; + + const markdownEditor = new window.toastui.Editor({ + el: editorMount, + height: '320px', + initialEditType: 'markdown', + previewStyle, + initialValue: descriptionSource.value || '', + placeholder: descriptionSource.getAttribute('placeholder') || '', + theme: isDarkTheme ? 'dark' : undefined, + usageStatistics: false, + }); + + form.addEventListener('submit', () => { + descriptionSource.value = markdownEditor.getMarkdown(); + }); + } else if (editorMount) { + editorMount.style.display = 'none'; + if (descriptionSource) { + descriptionSource.style.display = 'block'; + } + } + + // Pill tags + if (!hiddenTagsInput || !tagsList || !tagsTextInput) return; + + const availableTags = (hiddenTagsInput.getAttribute('data-tag-options') || '') + .split(',') + .map((tag) => normalizeTag(tag)) + .filter(Boolean); + + const getSuggestionList = () => availableTags + .filter((tag) => !tags.some((existing) => existing.toLowerCase() === tag.toLowerCase())); + + let tagsAutocomplete = null; + + const refreshAutocomplete = () => { + if (!tagsAutocomplete) return; + tagsAutocomplete.list = getSuggestionList(); + }; + + if (tagsInputContainer) { + tagsInputContainer.addEventListener('click', () => tagsTextInput.focus()); + } + + let tags = hiddenTagsInput.value + .split(/[\s,]+/) + .map((tag) => normalizeTag(tag)) + .filter(Boolean); + + const updateHiddenTags = () => { + hiddenTagsInput.value = tags.join(' '); + }; + + const syncReadLaterCheckbox = () => { + if (!readLaterCheckbox) return; + readLaterCheckbox.checked = tags.some((tag) => /^(readlater|toread)$/i.test(tag)); + }; + + const syncNoteCheckbox = () => { + if (!noteCheckbox) return; + noteCheckbox.checked = tags.some((tag) => /^note$/i.test(tag)); + }; + + const addTag = (rawTag) => { + const tag = normalizeTag(rawTag); + if (!tag) return; + + const exists = tags.some((existing) => existing.toLowerCase() === tag.toLowerCase()); + if (!exists) { + tags.push(tag); + updateHiddenTags(); + syncReadLaterCheckbox(); + syncNoteCheckbox(); + renderTags(); + refreshAutocomplete(); + } + }; + + const removeTag = (tagToRemove) => { + tags = tags.filter((tag) => tag.toLowerCase() !== tagToRemove.toLowerCase()); + updateHiddenTags(); + syncReadLaterCheckbox(); + syncNoteCheckbox(); + renderTags(); + refreshAutocomplete(); + }; + + const commitInputValue = () => { + const value = tagsTextInput.value; + if (!value.trim()) return; + + value + .split(/[\s,]+/) + .map((tag) => tag.trim()) + .filter(Boolean) + .forEach(addTag); + + tagsTextInput.value = ''; + refreshAutocomplete(); + }; + + function renderTags() { + tagsList.innerHTML = ''; + + tags.forEach((tag) => { + const pill = document.createElement('span'); + pill.className = 'bookmark-tag-pill'; + pill.setAttribute('data-tag', tag); + + const label = document.createElement('span'); + label.className = 'bookmark-tag-label'; + label.textContent = tag; + + const removeBtn = document.createElement('button'); + removeBtn.type = 'button'; + removeBtn.className = 'bookmark-tag-remove'; + removeBtn.setAttribute('aria-label', `Remove tag ${tag}`); + removeBtn.innerHTML = ''; + removeBtn.addEventListener('click', () => removeTag(tag)); + + pill.appendChild(label); + pill.appendChild(removeBtn); + tagsList.appendChild(pill); + }); + } + + tagsTextInput.addEventListener('keydown', (event) => { + const hasOpenAutocomplete = Boolean(tagsAutocomplete && tagsAutocomplete.ul && !tagsAutocomplete.ul.hasAttribute('hidden')); + const shouldCommit = event.key === ' ' || event.key === ',' || (event.key === 'Enter' && !hasOpenAutocomplete); + + if (shouldCommit) { + event.preventDefault(); + commitInputValue(); + return; + } + + if (event.key === 'Backspace' && !tagsTextInput.value && tags.length) { + removeTag(tags[tags.length - 1]); + } + }); + + tagsTextInput.addEventListener('blur', commitInputValue); + + tagsTextInput.addEventListener('paste', (event) => { + const pasted = event.clipboardData ? event.clipboardData.getData('text') : ''; + if (!pasted) return; + + event.preventDefault(); + pasted + .split(/[\s,]+/) + .map((tag) => tag.trim()) + .filter(Boolean) + .forEach(addTag); + tagsTextInput.value = ''; + }); + + if (readLaterCheckbox) { + readLaterCheckbox.addEventListener('change', () => { + tags = tags.filter((tag) => !/^(readlater|toread)$/i.test(tag)); + + if (readLaterCheckbox.checked) { + tags.push('readlater'); + } + + updateHiddenTags(); + syncNoteCheckbox(); + renderTags(); + refreshAutocomplete(); + }); + } + + if (noteCheckbox) { + noteCheckbox.addEventListener('change', () => { + tags = tags.filter((tag) => !/^note$/i.test(tag)); + + if (noteCheckbox.checked) { + tags.push('note'); + } + + updateHiddenTags(); + syncReadLaterCheckbox(); + renderTags(); + refreshAutocomplete(); + }); + } + + if (window.Awesomplete && availableTags.length) { + tagsAutocomplete = new window.Awesomplete(tagsTextInput, { + list: getSuggestionList(), + minChars: 1, + maxItems: 8, + autoFirst: true, + sort: false, + filter: window.Awesomplete.FILTER_CONTAINS, + }); + + tagsTextInput.addEventListener('input', () => { + refreshAutocomplete(); + tagsAutocomplete.evaluate(); + }); + + tagsTextInput.addEventListener('awesomplete-selectcomplete', commitInputValue); + } + + form.addEventListener('submit', commitInputValue); + + updateHiddenTags(); + syncReadLaterCheckbox(); + syncNoteCheckbox(); + renderTags(); + refreshAutocomplete(); + }); + } + + initBookmarkEditorForms(); + // ===== Persistent Media Player (Popup via Blob URL) ===== // Audio plays in a separate popup window that survives page navigation. // The popup HTML is generated as a Blob URL (no server file needed).