gsadmin/libredesk
1
0
Fork 0
mirror of https://github.com/abhinavxd/libredesk.git synced 2026-09-10 14:15:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix help center feedback counts, empty state, mobile logo and a11y

Browse Source
This commit is contained in:
Abhinav Raut
2026-08-09 19:47:57 +05:30
parent 048eb1acd5
commit fbbef49bb3
10 changed files with 33 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/apps/main/src/components/editor/EditorToolbar.vue
+17 -6
View File
@@ -51,6 +51,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('globals.terms.bold')"
@click.prevent="editor?.chain().focus().toggleBold().run()"
:class="{ 'bg-secondary': editor?.isActive('bold') }"
>
@@ -65,6 +66,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('globals.terms.italic')"
@click.prevent="editor?.chain().focus().toggleItalic().run()"
:class="{ 'bg-secondary': editor?.isActive('italic') }"
>
@@ -79,6 +81,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.strikethrough')"
@click.prevent="editor?.chain().focus().toggleStrike().run()"
:class="{ 'bg-secondary': editor?.isActive('strike') }"
>
@@ -93,6 +96,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.underline')"
@click.prevent="editor?.chain().focus().toggleUnderline().run()"
:class="{ 'bg-secondary': editor?.isActive('underline') }"
>
@@ -107,6 +111,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.bulletList')"
@click.prevent="editor?.chain().focus().toggleBulletList().run()"
:class="{ 'bg-secondary': editor?.isActive('bulletList') }"
>
@@ -121,6 +126,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.orderedList')"
@click.prevent="editor?.chain().focus().toggleOrderedList().run()"
:class="{ 'bg-secondary': editor?.isActive('orderedList') }"
>
@@ -135,6 +141,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.link')"
@click.prevent="emit('openLink')"
:class="{ 'bg-secondary': editor?.isActive('link') }"
>
@@ -150,6 +157,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.codeBlock')"
@click.prevent="editor?.chain().focus().toggleCodeBlock().run()"
:class="{ 'bg-secondary': editor?.isActive('codeBlock') }"
>
@@ -164,6 +172,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t('editor.tooltip.blockquote')"
@click.prevent="editor?.chain().focus().toggleBlockquote().run()"
:class="{ 'bg-secondary': editor?.isActive('blockquote') }"
>
@@ -178,6 +187,7 @@
type="button"
size="sm"
variant="ghost"
:aria-label="$t(a.label)"
@click.prevent="editor?.chain().focus().setTextAlign(a.dir).run()"
:class="{ 'bg-secondary': editor?.isActive({ textAlign: a.dir }) }"
>
@@ -190,7 +200,7 @@
<Tooltip>
<TooltipTrigger as-child>
<DropdownMenuTrigger as-child>
<Button type="button" size="sm" variant="ghost" class="bg-secondary flex items-center">
<Button type="button" size="sm" variant="ghost" class="bg-secondary flex items-center" :aria-label="$t('editor.tooltip.table')">
<TableIcon size="14" />
<ChevronDown class="w-3 h-3 ml-1" />
</Button>
@@ -211,7 +221,7 @@
</DropdownMenu>
<Tooltip v-else>
<TooltipTrigger as-child>
<Button type="button" size="sm" variant="ghost" @click.prevent="editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
<Button type="button" size="sm" variant="ghost" :aria-label="$t('editor.tooltip.table')" @click.prevent="editor?.chain().focus().insertTable({ rows: 3, cols: 3, withHeaderRow: true }).run()">
<TableIcon size="14" />
</Button>
</TooltipTrigger>
@@ -219,7 +229,7 @@
</Tooltip>
<Tooltip>
<TooltipTrigger as-child>
<Button type="button" size="sm" variant="ghost" @click.prevent="editor?.chain().focus().setHorizontalRule().run()">
<Button type="button" size="sm" variant="ghost" :aria-label="$t('editor.tooltip.horizontalRule')" @click.prevent="editor?.chain().focus().setHorizontalRule().run()">
<Minus size="14" />
</Button>
</TooltipTrigger>
@@ -227,7 +237,7 @@
</Tooltip>
<Tooltip v-if="enableInlineImages">
<TooltipTrigger as-child>
<Button type="button" size="sm" variant="ghost" @click.prevent="emit('openImage')">
<Button type="button" size="sm" variant="ghost" :aria-label="$t('globals.terms.image', 1)" @click.prevent="emit('openImage')">
<ImageIcon size="14" />
</Button>
</TooltipTrigger>
@@ -235,7 +245,7 @@
</Tooltip>
<Tooltip>
<TooltipTrigger as-child>
<Button type="button" size="sm" variant="ghost" @click.prevent="emit('openYoutube')">
<Button type="button" size="sm" variant="ghost" :aria-label="$t('editor.tooltip.youtube')" @click.prevent="emit('openYoutube')">
<YoutubeIcon size="14" />
</Button>
</TooltipTrigger>
@@ -250,6 +260,7 @@
size="sm"
variant="ghost"
class="flex items-center"
:aria-label="$t('editor.tooltip.callout')"
:class="{ 'bg-secondary': editor?.isActive('callout') }"
>
<Info size="14" />
@@ -269,7 +280,7 @@
</DropdownMenu>
<Tooltip>
<TooltipTrigger as-child>
<Button type="button" size="sm" variant="ghost" @click.prevent="editor?.chain().focus().setDetails().run()">
<Button type="button" size="sm" variant="ghost" :aria-label="$t('editor.tooltip.collapsible')" @click.prevent="editor?.chain().focus().setDetails().run()">
<ListCollapse size="14" />
</Button>
</TooltipTrigger>
frontend/apps/main/src/features/admin/help-center/ArticleEditSheet.vue
+2 -2
View File
@@ -283,9 +283,9 @@
<span class="text-muted-foreground">{{ t('helpCenter.createdBy') }}</span>
<span>{{ loadedArticle.created_by_name }}</span>
</div>
<div v-if="article.helpful_count !== undefined" class="flex justify-between py-1">
<div v-if="loadedArticle?.helpful_count !== undefined" class="flex justify-between py-1">
<span class="text-muted-foreground">{{ t('globals.terms.feedback') }}</span>
<span>👍 {{ article.helpful_count }} · 👎 {{ article.not_helpful_count }}</span>
<span>👍 {{ loadedArticle.helpful_count }} · 👎 {{ loadedArticle.not_helpful_count }}</span>
</div>
<div class="flex justify-between py-1">
<span class="text-muted-foreground">{{ t('globals.terms.createdAt') }}</span>
i18n/en-US.json
+2 -1
View File
@@ -1197,7 +1197,7 @@
"helpCenter.noSearchData": "No searches recorded yet.",
"helpCenter.onThisPage": "On this page",
"helpCenter.skipToContent": "Skip to main content",
"helpCenter.resultsCount": "{count} results",
"helpCenter.resultsCount": "{count} result | {count} results",
"helpCenter.supportedLanguages": "Supported languages",
"helpCenter.visitSite": "Visit site",
"helpCenter.supportedLanguagesHint": "Language codes this help center supports, e.g. en, es, fr. Add a language before authoring articles in it.",
@@ -1258,6 +1258,7 @@
"helpCenter.newCollection": "New collection",
"helpCenter.noArticles": "This collection has no articles yet. Try searching, or browse the other collections.",
"helpCenter.noCollections": "No collections yet.",
"helpCenter.noPublishedContent": "Nothing has been published here yet. Please check back later.",
"helpCenter.noCollectionsInLanguage": "No collections in this language. Create one before saving the article in it.",
"helpCenter.noResults": "No articles matched your search. Try fewer or different words.",
"helpCenter.pageTitle": "Page title",
static/public/static/help-center-classic.css
+3 -3
View File
@@ -82,10 +82,10 @@ a:hover { text-decoration: underline; }
gap: 1.25rem;
padding: 2rem 1.5rem;
}
.hc-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hc-header-text, var(--hc-ink)); }
.hc-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hc-header-text, var(--hc-ink)); min-width: 0; }
.hc-brand:hover { text-decoration: none; }
.hc-brand img { max-height: 1.9rem; width: auto; display: block; }
.hc-brand .hc-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.hc-brand img { max-height: 1.9rem; max-width: 100%; width: auto; object-fit: contain; display: block; }
.hc-brand .hc-name { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-nav-links { margin-left: auto; display: flex; gap: 1.4rem; flex-wrap: wrap; align-items: center; }
.hc-nav-links a { color: var(--hc-header-text, var(--hc-muted)); font-size: .95rem; font-weight: 500; opacity: .92; }
.hc-nav-links a:hover { opacity: 1; text-decoration: none; }
static/public/static/help-center-docs.css
+3 -3
View File
@@ -106,10 +106,10 @@ body[data-hcd-modal-open] { overflow: hidden; }
padding: 0 1.5rem;
}
.hcd-topbar-start { display: flex; align-items: center; gap: .8rem; min-width: 0; }
.hcd-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hc-ink); flex: none; }
.hcd-brand { display: inline-flex; align-items: center; gap: .6rem; color: var(--hc-ink); flex: 0 1 auto; min-width: 0; }
.hcd-brand:hover { text-decoration: none; }
.hcd-brand img { max-height: 1.7rem; width: auto; display: block; }
.hcd-brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; }
.hcd-brand img { max-height: 1.7rem; max-width: 100%; width: auto; object-fit: contain; display: block; }
.hcd-brand-name { font-weight: 700; font-size: 1.02rem; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hcd-topnav { display: flex; gap: 1.35rem; flex-wrap: nowrap; overflow: hidden; }
.hcd-topnav a { color: var(--hc-muted); font-size: .92rem; font-weight: 500; white-space: nowrap; }
.hcd-topnav a:hover { color: var(--hc-ink); text-decoration: none; }
static/public/static/help-center-search.js
+2 -1
View File
@@ -7,6 +7,7 @@
var locale = form.getAttribute('data-hc-locale');
var emptyText = form.getAttribute('data-hc-empty') || 'No results';
var resultsText = form.getAttribute('data-hc-results') || '{count} results';
var resultsTextOne = form.getAttribute('data-hc-results-one') || '{count} result';
if (!input || !slug) return;
var DEBOUNCE = 250;
@@ -76,7 +77,7 @@
panel.hidden = false;
active = -1;
input.setAttribute('aria-expanded', 'true');
status.textContent = list.length ? resultsText.replace('{count}', list.length) : emptyText;
status.textContent = list.length ? (list.length > 1 ? resultsText : resultsTextOne).replace('{count}', list.length) : emptyText;
pending = q;
}
static/public/web-templates/help/classic/home.html
+1 -1
View File
@@ -40,7 +40,7 @@
{{ end }}
</div>
{{ else }}
<p class="hc-empty">{{ $.L.T "helpCenter.noArticles" }}</p>
<p class="hc-empty">{{ $.L.T "helpCenter.noPublishedContent" }}</p>
{{ end }}
{{ template "classic-footer" . }}
static/public/web-templates/help/classic/layout.html
+1 -1
View File
@@ -24,7 +24,7 @@
<h1>{{ $heroText }}</h1>
{{ if .Data.HelpCenter.TaglineHTML }}<p class="hc-hero-tagline">{{ .Data.HelpCenter.TaglineHTML }}</p>{{ end }}
{{ end }}
<form class="hc-search" action="/hc/{{ .Data.HelpCenter.Slug }}/{{ .Data.HelpCenter.CurrentLocale }}/search" method="GET" role="search" data-hc-slug="{{ .Data.HelpCenter.Slug }}" data-hc-locale="{{ .Data.HelpCenter.CurrentLocale }}" data-hc-empty="{{ $.L.T "helpCenter.noResults" }}" data-hc-results="{{ $.L.T "helpCenter.resultsCount" }}">
<form class="hc-search" action="/hc/{{ .Data.HelpCenter.Slug }}/{{ .Data.HelpCenter.CurrentLocale }}/search" method="GET" role="search" data-hc-slug="{{ .Data.HelpCenter.Slug }}" data-hc-locale="{{ .Data.HelpCenter.CurrentLocale }}" data-hc-empty="{{ $.L.T "helpCenter.noResults" }}" data-hc-results-one="{{ $.L.Tc "helpCenter.resultsCount" 1 }}" data-hc-results="{{ $.L.Tc "helpCenter.resultsCount" 2 }}">
<svg class="hc-search-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="9" cy="9" r="6" /><path d="m18 18-4.5-4.5" stroke-linecap="round" /></svg>
<input type="search" name="q" value="{{ .Data.Query }}" placeholder="{{ $.L.T "helpCenter.searchPlaceholder" }}" aria-label="{{ $.L.T "helpCenter.searchPlaceholder" }}" autocomplete="off" />
<button type="submit">{{ $.L.T "globals.terms.search" }}</button>
static/public/web-templates/help/docs/home.html
+1 -1
View File
@@ -49,7 +49,7 @@
</div>
</section>
{{ else }}
<p class="hcd-empty">{{ .L.T "helpCenter.noArticles" }}</p>
<p class="hcd-empty">{{ .L.T "helpCenter.noPublishedContent" }}</p>
{{ end }}
{{ template "docs-footer" . }}
static/public/web-templates/help/docs/layout.html
+1 -1
View File
@@ -32,7 +32,7 @@
<div class="hcd-search-layer" data-hcd-search hidden>
<div class="hcd-search-backdrop" data-hcd-search-close></div>
<div class="hcd-search-panel" role="dialog" aria-modal="true" aria-label="{{ .L.T "globals.terms.search" }}">
<form class="hc-search" action="/hc/{{ .Data.HelpCenter.Slug }}/{{ .Data.HelpCenter.CurrentLocale }}/search" method="GET" role="search" data-hc-slug="{{ .Data.HelpCenter.Slug }}" data-hc-locale="{{ .Data.HelpCenter.CurrentLocale }}" data-hc-empty="{{ .L.T "helpCenter.noResults" }}" data-hc-results="{{ .L.T "helpCenter.resultsCount" }}">
<form class="hc-search" action="/hc/{{ .Data.HelpCenter.Slug }}/{{ .Data.HelpCenter.CurrentLocale }}/search" method="GET" role="search" data-hc-slug="{{ .Data.HelpCenter.Slug }}" data-hc-locale="{{ .Data.HelpCenter.CurrentLocale }}" data-hc-empty="{{ .L.T "helpCenter.noResults" }}" data-hc-results-one="{{ .L.Tc "helpCenter.resultsCount" 1 }}" data-hc-results="{{ .L.Tc "helpCenter.resultsCount" 2 }}">
<svg class="hc-search-icon" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="9" cy="9" r="6" /><path d="m18 18-4.5-4.5" stroke-linecap="round" /></svg>
<input type="search" name="q" value="" placeholder="{{ .L.T "helpCenter.searchPlaceholder" }}" aria-label="{{ .L.T "helpCenter.searchPlaceholder" }}" autocomplete="off" />
<button type="submit" class="hc-sr-only">{{ .L.T "globals.terms.search" }}</button>