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
This commit is contained in:
Shpuld Shpludson 2020-12-16 17:46:15 +00:00
commit 10399c193a
8 changed files with 52 additions and 28 deletions

View File

@ -25,6 +25,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/).
### Changed ### Changed
- Errors when fetching are now shown with popup errors instead of "Error fetching updates" in panel headers - 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 - Made reply/fav/repeat etc buttons easier to hit
- Moved external source link from status heading to the ellipsis menu
- Disabled horizontal textarea resize - Disabled horizontal textarea resize

View File

@ -5,7 +5,8 @@ import {
faBookmark, faBookmark,
faEyeSlash, faEyeSlash,
faThumbtack, faThumbtack,
faShareAlt faShareAlt,
faExternalLinkAlt
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { import {
faBookmark as faBookmarkReg faBookmark as faBookmarkReg
@ -17,7 +18,8 @@ library.add(
faBookmarkReg, faBookmarkReg,
faEyeSlash, faEyeSlash,
faThumbtack, faThumbtack,
faShareAlt faShareAlt,
faExternalLinkAlt
) )
const ExtraButtons = { const ExtraButtons = {

View File

@ -1,5 +1,6 @@
<template> <template>
<Popover <Popover
class="ExtraButtons"
trigger="click" trigger="click"
placement="top" placement="top"
:offset="{ y: 5 }" :offset="{ y: 5 }"
@ -96,11 +97,23 @@
icon="share-alt" icon="share-alt"
/><span>{{ $t("status.copy_link") }}</span> /><span>{{ $t("status.copy_link") }}</span>
</button> </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>
</div> </div>
<span <span
slot="trigger" slot="trigger"
class="ExtraButtons" class="popover-trigger"
> >
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" class="fa-scale-110 fa-old-padding"
@ -116,13 +129,15 @@
@import '../../_variables.scss'; @import '../../_variables.scss';
.ExtraButtons { .ExtraButtons {
position: static; .popover-trigger {
padding: 10px; position: static;
margin: -10px; padding: 10px;
margin: -10px;
&:hover .svg-inline--fa { &:hover .svg-inline--fa {
color: $fallback--text; color: $fallback--text;
color: var(--text, $fallback--text); color: var(--text, $fallback--text);
}
} }
} }
</style> </style>

View File

@ -95,6 +95,7 @@
box-shadow: none; box-shadow: none;
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
--btnText: var(--popoverText, $fallback--text); --btnText: var(--popoverText, $fallback--text);

View File

@ -26,7 +26,6 @@ import {
faTimes, faTimes,
faRetweet, faRetweet,
faReply, faReply,
faExternalLinkSquareAlt,
faPlusSquare, faPlusSquare,
faSmileBeam, faSmileBeam,
faEllipsisH, faEllipsisH,
@ -44,7 +43,6 @@ library.add(
faTimes, faTimes,
faRetweet, faRetweet,
faReply, faReply,
faExternalLinkSquareAlt,
faPlusSquare, faPlusSquare,
faStar, faStar,
faSmileBeam, faSmileBeam,

View File

@ -139,6 +139,20 @@ $status-margin: 0.75em;
.heading-right { .heading-right {
display: flex; display: flex;
flex-shrink: 0; 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 { .timeago {

View File

@ -184,30 +184,20 @@
:title="status.visibility | capitalize" :title="status.visibility | capitalize"
> >
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" fixed-width
class="fa-scale-110"
:icon="visibilityIcon(status.visibility)" :icon="visibilityIcon(status.visibility)"
/> />
</span> </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 <button
v-if="expandable && !isPreview" v-if="expandable && !isPreview"
class="button-unstyled" class="button-unstyled"
title="Expand" :title="$t('status.expand')"
@click.prevent="toggleExpanded" @click.prevent="toggleExpanded"
> >
<FAIcon <FAIcon
class="fa-scale-110 fa-old-padding" fixed-width
class="fa-scale-110"
icon="plus-square" icon="plus-square"
/> />
</button> </button>
@ -217,8 +207,9 @@
@click.prevent="toggleMute" @click.prevent="toggleMute"
> >
<FAIcon <FAIcon
fixed-width
icon="eye-slash" icon="eye-slash"
class="fa-scale-110 fa-old-padding" class="fa-scale-110"
/> />
</button> </button>
</span> </span>

View File

@ -662,6 +662,7 @@
"unmute_conversation": "Unmute conversation", "unmute_conversation": "Unmute conversation",
"status_unavailable": "Status unavailable", "status_unavailable": "Status unavailable",
"copy_link": "Copy link to status", "copy_link": "Copy link to status",
"external_source": "External source",
"thread_muted": "Thread muted", "thread_muted": "Thread muted",
"thread_muted_and_words": ", has words:", "thread_muted_and_words": ", has words:",
"show_full_subject": "Show full subject", "show_full_subject": "Show full subject",
@ -669,7 +670,8 @@
"show_content": "Show content", "show_content": "Show content",
"hide_content": "Hide content", "hide_content": "Hide content",
"status_deleted": "This post was deleted", "status_deleted": "This post was deleted",
"nsfw": "NSFW" "nsfw": "NSFW",
"expand": "Expand"
}, },
"user_card": { "user_card": {
"approve": "Approve", "approve": "Approve",