diff options
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.js | 6 | ||||
| -rw-r--r-- | src/components/extra_buttons/extra_buttons.vue | 29 | ||||
| -rw-r--r-- | src/components/popover/popover.vue | 1 | ||||
| -rw-r--r-- | src/components/status/status.js | 2 | ||||
| -rw-r--r-- | src/components/status/status.scss | 14 | ||||
| -rw-r--r-- | src/components/status/status.vue | 23 | ||||
| -rw-r--r-- | src/i18n/en.json | 4 |
7 files changed, 51 insertions, 28 deletions
diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js index 1a8eef72..b5b29e8a 100644 --- 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 index e687d487..dc790cad 100644 --- 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 index 020eab05..2252c68f 100644 --- 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 index 142e1fc6..f9c710ab 100644 --- 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 index 70c6d03d..58b55bc8 100644 --- 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 index 896635ee..6ee8117f 100644 --- 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 index ef23efd6..64425259 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -661,6 +661,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", @@ -668,7 +669,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", |