plugins-nextcloud-mirror/libresign
1
0
Fork 0
mirror of https://github.com/LibreSign/libresign.git synced 2025-12-18 05:20:45 +01:00
Code Projects Releases Activity

feat: add Twig documentation links to template editors

Browse source 
Add clickable links to Twig documentation (https://twig.symfony.com/)
in both Signature Stamp and Footer Template editor sections using
the v-linkify directive from @nextcloud/vue.

This improves user experience by providing direct access to Twig
syntax documentation when configuring custom templates.

Signed-off-by: Vitor Mattos <1079143+vitormattos@users.noreply.github.com>
This commit is contained in:
Vitor Mattos 2025-12-16 09:50:47 -03:00
parent 0249686c1e
commit 8b6a0da085
No known key found for this signature in database
GPG key ID: 6FECE2AD4809003A
2 changed files with 21 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
src/components/FooterTemplateEditor.vue
View file

@ -4,6 +4,7 @@
-->
<template>
<div class="footer-template-section">
<p v-linkify="{ linkify: true, text: footerDescription }" class="footer-template-description" />
<div class="footer-template-header">
<NcButton type="tertiary"
:aria-label="t('libresign', 'Show available variables')"
@ -142,6 +143,7 @@ import NcDialog from '@nextcloud/vue/components/NcDialog'
import NcFormBoxButton from '@nextcloud/vue/components/NcFormBoxButton'
import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import Linkify from '@nextcloud/vue/directives/Linkify'
// eslint-disable-next-line import/default
import VuePdfEditor from '@libresign/vue-pdf-editor'
@ -156,6 +158,9 @@ import Undo from 'vue-material-design-icons/UndoVariant.vue'
export default {
name: 'FooterTemplateEditor',
directives: {
Linkify,
},
components: {
Check,
CodeEditor,
@ -177,6 +182,7 @@ export default {
return {
DEFAULT_PREVIEW_WIDTH,
DEFAULT_PREVIEW_HEIGHT,
footerDescription: t('libresign', 'Configure the content displayed at the footer of the PDF. The text template uses Twig syntax: https://twig.symfony.com/'),
footerTemplate: '',
pdfPreviewFile: null,
loadingPreview: false,
@ -314,6 +320,10 @@ export default {
flex-direction: column;
gap: 16px;
.footer-template-description {
color: var(--color-text-lighter);
}
.footer-template-header {
display: flex;
gap: 8px;

13
src/views/Settings/SignatureStamp.vue
View file

@ -3,7 +3,8 @@
- SPDX-License-Identifier: AGPL-3.0-or-later
-->
<template>
<NcSettingsSection :name="name" :description="description">
<NcSettingsSection :name="name">
<p v-linkify="{ linkify: true, text: description }" class="settings-section__description" />
<fieldset class="settings-section__row">
<legend>{{ t('libresign', 'Display signature mode') }}</legend>
<NcCheckboxRadioSwitch v-model="renderMode"
@ -349,11 +350,15 @@ import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
import NcTextField from '@nextcloud/vue/components/NcTextField'
import { useIsDarkTheme } from '@nextcloud/vue/composables/useIsDarkTheme'
import Linkify from '@nextcloud/vue/directives/Linkify'
import CodeEditor from '../../components/CodeEditor.vue'
export default {
name: 'SignatureStamp',
directives: {
Linkify,
},
components: {
Check,
CodeEditor,
@ -384,7 +389,7 @@ export default {
const backgroundType = loadState('libresign', 'signature_background_type')
return {
name: t('libresign', 'Signature stamp'),
description: t('libresign', 'Configure the content displayed with the signature. The text template uses Twig syntax.'),
description: t('libresign', 'Configure the content displayed with the signature. The text template uses Twig syntax: https://twig.symfony.com/'),
showLoadingBackground: false,
backgroundType,
acceptMime: ['image/png'],
@ -696,6 +701,10 @@ export default {
.settings-section{
display: flex;
flex-direction: column;
&__description {
color: var(--color-text-lighter);
margin-bottom: 8px;
}
&:deep(.settings-section__name) {
justify-content: unset;
}