data.coop/pinafore
8
0
Fork 0
Code Issues 1 Pull requests Packages Projects Releases Wiki Activity

simplify ExternalLink

Browse source
This commit is contained in:
Nolan Lawson 2018-01-28 21:07:31 -08:00
parent 689cd97071
commit c73223c968
4 changed files with 26 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
routes/_components/ExternalLink.html
View file

@ -1,31 +1,30 @@
{{#if class}} <a rel="nofollow noopener"
<a rel="nofollow noopener" target="_blank" href="{{href}}" class="external-link {{class}}"> target="_blank"
<slot></slot> href="{{href}}"
{{#if showIcon}} class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}}">
<svg> <slot></slot>
<use xlink:href="#fa-external-link" /> {{#if showIcon}}
</svg> <svg>
{{/if}} <use xlink:href="#fa-external-link" />
</a> </svg>
{{else}} {{/if}}
<a rel="nofollow noopener" target="_blank" href="{{href}}" class="external-link"> </a>
<slot></slot>
{{#if showIcon}}
<svg>
<use xlink:href="#fa-external-link" />
</svg>
{{/if}}
</a>
{{/if}}
<style> <style>
.external-link { .external-link-with-icon {
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
} }
.external-link svg { .external-link-with-icon svg {
margin-left: 4px; margin-left: 4px;
width: 14px; width: 14px;
height: 14px; height: 14px;
fill: var(--deemphasized-text-color); fill: var(--deemphasized-text-color);
} }
</style> </style>
<script>
export default {
oncreate() {
this.set({className: this.get('class')}) // workaround for "class" property name bug in svelte
}
}
</script>

18
routes/_components/status/Status.html
View file

@ -7,25 +7,15 @@
<use xlink:href="#fa-retweet" /> <use xlink:href="#fa-retweet" />
</svg> </svg>
<span> <span>
{{#if timelineType === 'account' && timelineValue === status.account.id}} <a href="/accounts/{{status.account.id}}">{{status.account.username}}</a>
<ExternalLink href="{{status.account.url}}">{{status.account.username}}</ExternalLink>
{{else}}
<a href="/accounts/{{status.account.id}}">{{status.account.username}}</a>
{{/if}}
boosted boosted
</span> </span>
</div> </div>
{{/if}} {{/if}}
<div class="status-author"> <div class="status-author">
{{#if timelineType === 'account' && timelineValue === originalAccount.id}} <a class="status-author-name" href="/accounts/{{originalAccount.id}}">
<ExternalLink class="status-author-name" href="{{originalAccount.url}}"> {{originalAccount.display_name || originalAccount.username}}
{{originalAccount.display_name || originalAccount.username}} </a>
</ExternalLink>
{{else}}
<a class="status-author-name" href="/accounts/{{originalAccount.id}}">
{{originalAccount.display_name || originalAccount.username}}
</a>
{{/if}}
<span class="status-author-handle"> <span class="status-author-handle">
{{'@' + originalAccount.acct}} {{'@' + originalAccount.acct}}
</span> </span>

1
routes/_components/timeline/StatusListItem.html
View file

@ -1,6 +1,5 @@
<Status status="{{virtualProps.status}}" <Status status="{{virtualProps.status}}"
timelineType="{{virtualProps.timelineType}}" timelineType="{{virtualProps.timelineType}}"
timelineValue="{{virtualProps.timelineValue}}"
index="{{virtualIndex}}" index="{{virtualIndex}}"
length="{{virtualLength}}" length="{{virtualLength}}"
on:recalculateHeight /> on:recalculateHeight />

3
routes/_components/timeline/Timeline.html
View file

@ -33,9 +33,8 @@
LoadingFooter: LoadingFooter LoadingFooter: LoadingFooter
}), }),
computed: { computed: {
makeProps: ($currentInstance, timelineType, timelineValue) => async (statusId) => ({ makeProps: ($currentInstance, timelineType) => async (statusId) => ({
timelineType: timelineType, timelineType: timelineType,
timelineValue: timelineValue,
status: await database.getStatus($currentInstance, statusId) status: await database.getStatus($currentInstance, statusId)
}), }),
label: (timeline, $currentInstance, timelineType, timelineValue) => { label: (timeline, $currentInstance, timelineType, timelineValue) => {