Identify external links with a trailing icon

This commit is contained in:
Bubka 2022-09-18 17:07:46 +02:00
parent d889947773
commit b04a4cd5d2
3 changed files with 13 additions and 2 deletions

View File

@ -36,6 +36,7 @@ import {
faSortAlphaUp,
faEye,
faEyeSlash,
faExternalLinkAlt,
} from '@fortawesome/free-solid-svg-icons'
import {
@ -76,6 +77,7 @@ library.add(
faSortAlphaUp,
faEye,
faEyeSlash,
faExternalLinkAlt,
);
Vue.component('font-awesome-icon', FontAwesomeIcon)

View File

@ -8,7 +8,13 @@
<h4 class="title is-4 has-text-grey-light">{{ $t('settings.general') }}</h4>
<!-- Language -->
<form-select v-on:lang="saveSetting('lang', $event)" :options="langs" :form="form" fieldName="lang" :label="$t('settings.forms.language.label')" :help="$t('settings.forms.language.help')" />
<div class="field help">{{ $t('settings.forms.some_translation_are_missing') }}<a class="ml-2" href="https://crowdin.com/project/2fauth">{{ $t('settings.forms.help_translate_2fauth') }}</a></div>
<div class="field help">
{{ $t('settings.forms.some_translation_are_missing') }}
<a class="ml-2" href="https://crowdin.com/project/2fauth">
{{ $t('settings.forms.help_translate_2fauth') }}
<font-awesome-icon :icon="['fas', 'external-link-alt']" />
</a>
</div>
<!-- display mode -->
<form-toggle v-on:displayMode="saveSetting('displayMode', $event)" :choices="layouts" :form="form" fieldName="displayMode" :label="$t('settings.forms.display_mode.label')" :help="$t('settings.forms.display_mode.help')" />
<!-- show icon -->

View File

@ -164,7 +164,10 @@
<!-- Open in browser -->
<div class="block has-text-link" v-if="isUrl(uri)" @click="openInBrowser(uri)">
<button class="button is-link is-outlined is-rounded">
{{ $t('commons.open_in_browser') }}
<span>{{ $t('commons.open_in_browser') }}</span>
<span class="icon is-small">
<font-awesome-icon :icon="['fas', 'external-link-alt']" />
</span>
</button>
</div>
</modal>