home/links
2
0
Fork 0
mirror of https://github.com/wahyd4/links.git synced 2026-08-08 21:04:53 +10:00
Code Issues Packages Projects Releases Wiki Activity

fix: hide template description on Action tab, Discord-style message preview

Browse Source 
- template-description box was shown on Action tab (JS never controlled it)
- Message preview now renders as a Discord-style chat bubble (avatar, author,
  dark background) with {query} highlighted as a chip
This commit is contained in:
OpenClaw Sub-agent
2026-08-01 21:27:19 +10:00
parent e2c76bd341
commit 3e1dd31bab
1 changed files with 31 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
links/templates/links/link_form.html
+31 -14
View File
@@ -48,22 +48,29 @@
color: transparent; font-size: .8rem; transition: all .2s;
}
.action-card.selected .action-card-check { background: #8b5cf6; border-color: #8b5cf6; color: #fff; }
/* ── Message preview bubble ── */
/* ── Message preview bubble (Discord-like) ── */
.msg-preview {
margin-top: .6rem; border-radius: 14px; background: #f9fafb;
border: 1px solid #e5e7eb; padding: .7rem .9rem;
}
.msg-preview-label { font-size: .7rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .35rem; }
.msg-preview-bubble {
display: inline-block; background: #fff; border: 1px solid #e5e7eb;
border-radius: 12px; padding: .45rem .8rem; font-size: .85rem; color: #111827;
box-shadow: 0 1px 2px rgba(0,0,0,.04);
.msg-preview-label { font-size: .7rem; font-weight: 600; color: #9ca3af; text-transform: uppercase; letter-spacing: .04em; margin-bottom: .45rem; }
.msg-preview-chat {
background: #313338; border-radius: 12px; padding: .6rem .8rem;
display: flex; gap: .6rem; align-items: flex-start;
}
.msg-preview-bubble .qchip {
.msg-preview-avatar {
width: 2rem; height: 2rem; flex-shrink: 0; border-radius: 50%;
background: linear-gradient(135deg, #5865F2, #7c3aed);
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: .9rem; font-weight: 700;
}
.msg-preview-author { font-size: .82rem; font-weight: 600; color: #e2e3e7; margin-bottom: 2px; }
.msg-preview-text { font-size: .85rem; color: #dcddde; line-height: 1.4; word-break: break-word; }
.msg-preview-text .qchip {
background: #ede9fe; color: #6d28d9; border-radius: 6px;
padding: 0 .3rem; font-weight: 600;
}
.msg-preview-hint { font-size: .72rem; color: #9ca3af; margin-top: .4rem; }
.msg-preview-hint { font-size: .72rem; color: #9ca3af; margin-top: .45rem; }
</style>
{% endblock %}
@@ -102,7 +109,7 @@
{% trans "Custom type allows you to create a link with custom HTML content. Use this when you want to display a message or custom content instead of redirecting." %}
</p>
</div>
<div id="template-description" class="bg-purple-50 border-l-4 border-purple-400 p-4 mb-4 {% if is_custom %}hidden{% endif %}">
<div id="template-description" class="bg-purple-50 border-l-4 border-purple-400 p-4 mb-4 {% if is_custom or is_action %}hidden{% endif %}">
<p class="text-sm text-purple-700">
{% trans "Template type allows you to create dynamic URLs with parameters. Use {query, default=value} syntax in the URL." %}
</p>
@@ -176,8 +183,14 @@
{{ field }}
<div class="msg-preview" id="msg-preview">
<div class="msg-preview-label">发送效果预览</div>
<div class="msg-preview-bubble" id="msg-preview-bubble">{{ field.value|default:'@小黑 帮我看看 {query}' }}</div>
<div class="msg-preview-hint">打开 go/ask/今天天气 时，<span class="qchip">今天天气</span> 会自动填入消息</div>
<div class="msg-preview-chat">
<div class="msg-preview-avatar">黑</div>
<div>
<div class="msg-preview-author">小黑</div>
<div class="msg-preview-text" id="msg-preview-text">{{ field.value|default:'@小黑 帮我看看 {query}' }}</div>
</div>
</div>
<div class="msg-preview-hint">别人打开 go/ask/今天天气 时，消息里的 <span class="qchip">今天天气</span> 会被自动替换成链接后面的字</div>
</div>
{% endif %}
{% elif field.name == 'alias' and form.instance.pk %}
@@ -264,6 +277,7 @@
const actionFields = document.querySelectorAll('.action-field');
const linkDescription = document.getElementById('link-description');
const customDescription = document.getElementById('custom-description');
const templateDescription = document.getElementById('template-description');
const actionDescription = document.getElementById('action-description');
const linkTypeInput = document.getElementById('id_link_type');
const textField = document.querySelector('.custom-field');
@@ -292,6 +306,7 @@
if (label) label.classList.add('hidden');
});
linkDescription.classList.remove('hidden');
templateDescription.classList.remove('hidden');
customDescription.classList.add('hidden');
actionDescription.classList.add('hidden');
linkTypeInput.value = 'LINK';
@@ -321,6 +336,7 @@
if (label) label.classList.add('hidden');
});
customDescription.classList.remove('hidden');
templateDescription.classList.add('hidden');
linkDescription.classList.add('hidden');
actionDescription.classList.add('hidden');
linkTypeInput.value = 'CUSTOM';
@@ -351,6 +367,7 @@
if (label) label.classList.add('hidden');
});
actionDescription.classList.remove('hidden');
templateDescription.classList.add('hidden');
linkDescription.classList.add('hidden');
customDescription.classList.add('hidden');
linkTypeInput.value = 'ACTION';
@@ -429,10 +446,10 @@
});
// ── Live preview: {query} → highlight chip ──
const previewBubble = document.getElementById('msg-preview-bubble');
const previewText = document.getElementById('msg-preview-text');
const msgInput = document.getElementById('id_action_message_template');
function renderPreview() {
if (!previewBubble || !msgInput) return;
if (!previewText || !msgInput) return;
const sample = '今天天气';
const raw = msgInput.value || '@小黑 帮我看看 {query}';
const parts = raw.split('{query}');
@@ -441,7 +458,7 @@
html += part.replace(/&/g, '&amp;').replace(/</g, '&lt;');
if (i < parts.length - 1) html += '<span class="qchip">' + sample + '</span>';
});
previewBubble.innerHTML = html;
previewText.innerHTML = html;
}
if (msgInput) msgInput.addEventListener('input', renderPreview);
renderPreview();