aboutsummaryrefslogtreecommitdiffstats
path: root/apps
diff options
context:
space:
mode:
authorFerdinand Thiessen <opensource@fthiessen.de>2024-10-07 18:17:55 +0200
committerFerdinand Thiessen <opensource@fthiessen.de>2024-10-08 14:31:21 +0200
commit52cfac5067baebc7b436255fb21884e37d3a46e3 (patch)
tree2441f66469009292e291944142ac2fe2eea64e5c /apps
parent38cd9d3915d00ff904a273c2669851040233f32e (diff)
downloadnextcloud-server-52cfac5067baebc7b436255fb21884e37d3a46e3.tar.gz
nextcloud-server-52cfac5067baebc7b436255fb21884e37d3a46e3.zip
fix(federatedfilessharing): Use social media icons from core rather than inline SVGs
Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
Diffstat (limited to 'apps')
-rw-r--r--apps/federatedfilesharing/src/components/PersonalSettings.vue34
1 files changed, 27 insertions, 7 deletions
diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
index 38e237308e9..190b55f99f3 100644
--- a/apps/federatedfilesharing/src/components/PersonalSettings.vue
+++ b/apps/federatedfilesharing/src/components/PersonalSettings.vue
@@ -13,7 +13,7 @@
:title="copyLinkTooltip"
:aria-label="copyLinkTooltip"
class="clipboard"
- type="tertiary-no-background"
+ type="tertiary"
@click.prevent="copyCloudId">
<template #icon>
<Clipboard :size="20" />
@@ -26,22 +26,19 @@
<NcButton @click="goTo(shareFacebookUrl)">
{{ t('federatedfilesharing', 'Facebook') }}
<template #icon>
- <Facebook :size="20" />
+ <img class="social-button__icon social-button__icon--bright" :src="urlFacebookIcon">
</template>
</NcButton>
<NcButton @click="goTo(shareXUrl)">
{{ t('federatedfilesharing', 'formerly Twitter') }}
<template #icon>
- <svg width="20"
- height="20"
- viewBox="0 0 15 15"
- xmlns="http://www.w3.org/2000/svg"><path fill="black" d="m 3.384891,2.6 c -0.3882,0 -0.61495,0.4362184 -0.39375,0.7558594 L 6.5841098,8.4900156 2.9770785,12.707422 C 2.7436785,12.979821 2.9370285,13.4 3.2958285,13.4 H 3.694266 c 0.176,0 0.3430313,-0.07714 0.4570313,-0.210938 L 7.294266,9.5065156 9.6602817,12.887891 C 9.8762817,13.208984 10.25229,13.4 10.743485,13.4 h 1.900391 c 0.3882,0 0.61575,-0.436688 0.39375,-0.754688 L 9.2466097,7.2195156 12.682547,3.1941408 C 12.881744,2.9601408 12.715528,2.6 12.407473,2.6 h -0.506566 c -0.175,0 -0.34186,0.076453 -0.45586,0.2197656 L 8.5405785,6.2058438 6.3790317,3.1132812 C 6.1568442,2.7913687 5.6965004,2.6 5.3958285,2.6 Z" /></svg>
+ <img class="social-button__icon" :src="urlXIcon">
</template>
</NcButton>
<NcButton @click="goTo(shareMastodonUrl)">
{{ t('federatedfilesharing', 'Mastodon') }}
<template #icon>
- <Mastodon :size="20" />
+ <img class="social-button__icon" :src="urlMastodonIcon">
</template>
</NcButton>
<NcButton class="social-button__website-button"
@@ -76,6 +73,8 @@
<script>
import { showError, showSuccess } from '@nextcloud/dialogs'
import { loadState } from '@nextcloud/initial-state'
+import { t } from '@nextcloud/l10n'
+import { imagePath } from '@nextcloud/router'
import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
import Mastodon from 'vue-material-design-icons/Mastodon.vue'
@@ -93,6 +92,14 @@ export default {
Web,
Clipboard,
},
+ setup() {
+ return {
+ t,
+ urlFacebookIcon: imagePath('core', 'facebook'),
+ urlMastodonIcon: imagePath('core', 'mastodon'),
+ urlXIcon: imagePath('core', 'x'),
+ }
+ },
data() {
return {
color: loadState('federatedfilesharing', 'color'),
@@ -162,14 +169,27 @@ export default {
<style lang="scss" scoped>
.social-button {
margin-top: 0.5rem;
+
button {
display: inline-flex;
margin-inline-start: 0.5rem;
margin-top: 1rem;
}
+
&__website-button {
width: min(100%, 400px) !important;
}
+
+ &__icon {
+ height: 20px;
+ width: 20px;
+ filter: var(--background-invert-if-dark);
+
+ &--bright {
+ // Some logos like the Facebook logo have bright color schema
+ filter: var(--background-invert-if-bright);
+ }
+ }
}
.cloud-id-text {
display: flex;