simplify ExternalLink
This commit is contained in:
parent
689cd97071
commit
c73223c968
|
@ -1,5 +1,7 @@
|
|||
{{#if class}}
|
||||
<a rel="nofollow noopener" target="_blank" href="{{href}}" class="external-link {{class}}">
|
||||
<a rel="nofollow noopener"
|
||||
target="_blank"
|
||||
href="{{href}}"
|
||||
class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}}">
|
||||
<slot></slot>
|
||||
{{#if showIcon}}
|
||||
<svg>
|
||||
|
@ -7,25 +9,22 @@
|
|||
</svg>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a rel="nofollow noopener" target="_blank" href="{{href}}" class="external-link">
|
||||
<slot></slot>
|
||||
{{#if showIcon}}
|
||||
<svg>
|
||||
<use xlink:href="#fa-external-link" />
|
||||
</svg>
|
||||
{{/if}}
|
||||
</a>
|
||||
{{/if}}
|
||||
<style>
|
||||
.external-link {
|
||||
.external-link-with-icon {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
.external-link svg {
|
||||
.external-link-with-icon svg {
|
||||
margin-left: 4px;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--deemphasized-text-color);
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
export default {
|
||||
oncreate() {
|
||||
this.set({className: this.get('class')}) // workaround for "class" property name bug in svelte
|
||||
}
|
||||
}
|
||||
</script>
|
|
@ -7,25 +7,15 @@
|
|||
<use xlink:href="#fa-retweet" />
|
||||
</svg>
|
||||
<span>
|
||||
{{#if timelineType === 'account' && timelineValue === status.account.id}}
|
||||
<ExternalLink href="{{status.account.url}}">{{status.account.username}}</ExternalLink>
|
||||
{{else}}
|
||||
<a href="/accounts/{{status.account.id}}">{{status.account.username}}</a>
|
||||
{{/if}}
|
||||
boosted
|
||||
</span>
|
||||
</div>
|
||||
{{/if}}
|
||||
<div class="status-author">
|
||||
{{#if timelineType === 'account' && timelineValue === originalAccount.id}}
|
||||
<ExternalLink class="status-author-name" href="{{originalAccount.url}}">
|
||||
{{originalAccount.display_name || originalAccount.username}}
|
||||
</ExternalLink>
|
||||
{{else}}
|
||||
<a class="status-author-name" href="/accounts/{{originalAccount.id}}">
|
||||
{{originalAccount.display_name || originalAccount.username}}
|
||||
</a>
|
||||
{{/if}}
|
||||
<span class="status-author-handle">
|
||||
{{'@' + originalAccount.acct}}
|
||||
</span>
|
||||
|
|
|
@ -1,6 +1,5 @@
|
|||
<Status status="{{virtualProps.status}}"
|
||||
timelineType="{{virtualProps.timelineType}}"
|
||||
timelineValue="{{virtualProps.timelineValue}}"
|
||||
index="{{virtualIndex}}"
|
||||
length="{{virtualLength}}"
|
||||
on:recalculateHeight />
|
||||
|
|
|
@ -33,9 +33,8 @@
|
|||
LoadingFooter: LoadingFooter
|
||||
}),
|
||||
computed: {
|
||||
makeProps: ($currentInstance, timelineType, timelineValue) => async (statusId) => ({
|
||||
makeProps: ($currentInstance, timelineType) => async (statusId) => ({
|
||||
timelineType: timelineType,
|
||||
timelineValue: timelineValue,
|
||||
status: await database.getStatus($currentInstance, statusId)
|
||||
}),
|
||||
label: (timeline, $currentInstance, timelineType, timelineValue) => {
|
||||
|
|
Loading…
Reference in a new issue