Skip to content

Commit

Permalink
fix(federatedfilessharing): Use social media icons from core rather t…
Browse files Browse the repository at this point in the history
…han inline SVGs

* Use correct facebook icon provided by Meta
  The legal terms require to exactly use the facebook logo as provided by Meta.
* Add correct X logo as provided by X Corp.
* Use social media icons from core rather than inline SVGs
* Make copy logic more resilient and use Typescript
* Add aria label to include the `X` in `X (formerly Twitter)` button.
* Use valid mastodon URL for sharing

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
  • Loading branch information
susnux committed Oct 8, 2024
1 parent ce3e92f commit 0366b61
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 29 deletions.
2 changes: 1 addition & 1 deletion .reuse/dep5
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ Files: core/img/apps/richdocumentscode.svg
Copyright: 2016-2024 Collabora Ltd.
License: LicenseRef-CollaboraTrademarks

Files: core/img/twitter.svg core/img/actions/twitter.svg apps/federatedfilesharing/img/social-twitter.svg
Files: core/img/x.svg core/img/twitter.svg core/img/actions/twitter.svg apps/federatedfilesharing/img/social-twitter.svg
Copyright: X Corp.
License: LicenseRef-XTrademarks

Expand Down
70 changes: 44 additions & 26 deletions apps/federatedfilesharing/src/components/PersonalSettings.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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" />
Expand All @@ -26,22 +26,20 @@
<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)">
<NcButton :aria-label="t('federatedfilesharing', 'X (formerly Twitter)')"
@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"
Expand Down Expand Up @@ -73,13 +71,13 @@
</NcSettingsSection>
</template>

<script>
import { showError, showSuccess } from '@nextcloud/dialogs'
<script lang="ts">
import { 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'
import Facebook from 'vue-material-design-icons/Facebook.vue'
import Web from 'vue-material-design-icons/Web.vue'
import Clipboard from 'vue-material-design-icons/ContentCopy.vue'

Expand All @@ -88,18 +86,25 @@ export default {
components: {
NcButton,
NcSettingsSection,
Mastodon,
Facebook,
Web,
Clipboard,
},
setup() {
return {
t,

cloudId: loadState<string>('federatedfilesharing', 'cloudId'),
reference: loadState<string>('federatedfilesharing', 'reference'),
urlFacebookIcon: imagePath('core', 'facebook'),
urlMastodonIcon: imagePath('core', 'mastodon'),
urlXIcon: imagePath('core', 'x'),
}
},
data() {
return {
color: loadState('federatedfilesharing', 'color'),
textColor: loadState('federatedfilesharing', 'textColor'),
logoPath: loadState('federatedfilesharing', 'logoPath'),
reference: loadState('federatedfilesharing', 'reference'),
cloudId: loadState('federatedfilesharing', 'cloudId'),
docUrlFederated: loadState('federatedfilesharing', 'docUrlFederated'),
showHtml: false,
isCopied: false,
Expand All @@ -113,7 +118,7 @@ export default {
return t('federatedfilesharing', 'Share with me through my #Nextcloud Federated Cloud ID')
},
shareMastodonUrl() {
return `https://https://mastodon.xyz/?text=${encodeURIComponent(this.messageWithoutURL)}&url=${encodeURIComponent(this.reference)}`
return `https://mastodon.social/?text=${encodeURIComponent(this.messageWithoutURL)}&url=${encodeURIComponent(this.reference)}`
},
shareXUrl() {
return `https://x.com/intent/tweet?text=${encodeURIComponent(this.messageWithURL)}`
Expand Down Expand Up @@ -141,18 +146,18 @@ export default {
},
},
methods: {
async copyCloudId() {
if (!navigator.clipboard) {
// Clipboard API not available
showError(t('federatedfilesharing', 'Clipboard is not available'))
return
async copyCloudId(): Promise<void> {
try {
await navigator.clipboard.writeText(this.cloudId)
showSuccess(t('federatedfilesharing', 'Cloud ID copied to the clipboard'))
} catch (e) {
// no secure context or really old browser - need a fallback
window.prompt(t('federatedfilesharing', 'Clipboard not available. Please copy the cloud ID manually.'), this.reference)
}
await navigator.clipboard.writeText(this.cloudId)
this.isCopied = true
showSuccess(t('federatedfilesharing', 'Copied!'))
this.$refs.clipboard.$el.focus()
},
goTo(url) {

goTo(url: string): void {
window.location.href = url
},
},
Expand All @@ -162,14 +167,27 @@ export default {
<style lang="scss" scoped>
.social-button {
margin-top: 0.5rem;

button {
display: inline-flex;
margin-left: 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;
Expand Down
2 changes: 1 addition & 1 deletion core/img/facebook.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion core/img/mastodon.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions core/img/x.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0366b61

Please sign in to comment.