commit: 10399c193a68fc14c0c72b0cf970bfe2605a247e
parent 466fc84e8223b83d4da2f6a805041e78e3701447
Author: Shpuld Shpludson <shp@cock.li>
Date: Wed, 16 Dec 2020 17:46:15 +0000
Merge branch 'feat/move-external-source-button-to-extra-buttons' into 'develop'
Move external source link to extra buttons, expand the expand button
See merge request pleroma/pleroma-fe!1303
Diffstat:
8 files changed, 52 insertions(+), 28 deletions(-)
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers
- Made reply/fav/repeat etc buttons easier to hit
+- Moved external source link from status heading to the ellipsis menu
- Disabled horizontal textarea resize
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js
@@ -5,7 +5,8 @@ import {
faBookmark,
faEyeSlash,
faThumbtack,
- faShareAlt
+ faShareAlt,
+ faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons'
import {
faBookmark as faBookmarkReg
@@ -17,7 +18,8 @@ library.add(
faBookmarkReg,
faEyeSlash,
faThumbtack,
- faShareAlt
+ faShareAlt,
+ faExternalLinkAlt
)
const ExtraButtons = {
diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue
@@ -1,5 +1,6 @@
<template>
<Popover
+ class="ExtraButtons"
trigger="click"
placement="top"
:offset="{ y: 5 }"
@@ -96,11 +97,23 @@
icon="share-alt"
/><span>{{ $t("status.copy_link") }}</span>
</button>
+ <a
+ v-if="!status.is_local"
+ class="button-default dropdown-item dropdown-item-icon"
+ title="Source"
+ :href="status.external_url"
+ target="_blank"
+ >
+ <FAIcon
+ fixed-width
+ icon="external-link-alt"
+ /><span>{{ $t("status.external_source") }}</span>
+ </a>
</div>
</div>
<span
slot="trigger"
- class="ExtraButtons"
+ class="popover-trigger"
>
<FAIcon
class="fa-scale-110 fa-old-padding"
@@ -116,13 +129,15 @@
@import '../../_variables.scss';
.ExtraButtons {
- position: static;
- padding: 10px;
- margin: -10px;
+ .popover-trigger {
+ position: static;
+ padding: 10px;
+ margin: -10px;
- &:hover .svg-inline--fa {
- color: $fallback--text;
- color: var(--text, $fallback--text);
+ &:hover .svg-inline--fa {
+ color: $fallback--text;
+ color: var(--text, $fallback--text);
+ }
}
}
</style>
diff --git a/src/components/popover/popover.vue b/src/components/popover/popover.vue
@@ -95,6 +95,7 @@
box-shadow: none;
width: 100%;
height: 100%;
+ box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text);
diff --git a/src/components/status/status.js b/src/components/status/status.js
@@ -26,7 +26,6 @@ import {
faTimes,
faRetweet,
faReply,
- faExternalLinkSquareAlt,
faPlusSquare,
faSmileBeam,
faEllipsisH,
@@ -44,7 +43,6 @@ library.add(
faTimes,
faRetweet,
faReply,
- faExternalLinkSquareAlt,
faPlusSquare,
faStar,
faSmileBeam,
diff --git a/src/components/status/status.scss b/src/components/status/status.scss
@@ -139,6 +139,20 @@ $status-margin: 0.75em;
.heading-right {
display: flex;
flex-shrink: 0;
+
+ .button-unstyled {
+ padding: 5px;
+ margin: -5px;
+
+ &:hover svg {
+ color: $fallback--lightText;
+ color: var(--lightText, $fallback--lightText);
+ }
+ }
+
+ .svg-inline--fa {
+ margin-left: 0.25em;
+ }
}
.timeago {
diff --git a/src/components/status/status.vue b/src/components/status/status.vue
@@ -184,30 +184,20 @@
:title="status.visibility | capitalize"
>
<FAIcon
- class="fa-scale-110 fa-old-padding"
+ fixed-width
+ class="fa-scale-110"
:icon="visibilityIcon(status.visibility)"
/>
</span>
- <a
- v-if="!status.is_local && !isPreview"
- :href="status.external_url"
- target="_blank"
- class="source_url"
- title="Source"
- >
- <FAIcon
- class="fa-scale-110 fa-old-padding"
- icon="external-link-square-alt"
- />
- </a>
<button
v-if="expandable && !isPreview"
class="button-unstyled"
- title="Expand"
+ :title="$t('status.expand')"
@click.prevent="toggleExpanded"
>
<FAIcon
- class="fa-scale-110 fa-old-padding"
+ fixed-width
+ class="fa-scale-110"
icon="plus-square"
/>
</button>
@@ -217,8 +207,9 @@
@click.prevent="toggleMute"
>
<FAIcon
+ fixed-width
icon="eye-slash"
- class="fa-scale-110 fa-old-padding"
+ class="fa-scale-110"
/>
</button>
</span>
diff --git a/src/i18n/en.json b/src/i18n/en.json
@@ -662,6 +662,7 @@
"unmute_conversation": "Unmute conversation",
"status_unavailable": "Status unavailable",
"copy_link": "Copy link to status",
+ "external_source": "External source",
"thread_muted": "Thread muted",
"thread_muted_and_words": ", has words:",
"show_full_subject": "Show full subject",
@@ -669,7 +670,8 @@
"show_content": "Show content",
"hide_content": "Hide content",
"status_deleted": "This post was deleted",
- "nsfw": "NSFW"
+ "nsfw": "NSFW",
+ "expand": "Expand"
},
"user_card": {
"approve": "Approve",
