From c73223c9682c7e1be152908261cfd4a075f8fea0 Mon Sep 17 00:00:00 2001 From: Nolan Lawson <nolan@nolanlawson.com> Date: Sun, 28 Jan 2018 21:07:31 -0800 Subject: [PATCH] simplify ExternalLink --- routes/_components/ExternalLink.html | 43 +++++++++---------- routes/_components/status/Status.html | 18 ++------ .../_components/timeline/StatusListItem.html | 1 - routes/_components/timeline/Timeline.html | 3 +- 4 files changed, 26 insertions(+), 39 deletions(-) diff --git a/routes/_components/ExternalLink.html b/routes/_components/ExternalLink.html index c2879b6..841b97c 100644 --- a/routes/_components/ExternalLink.html +++ b/routes/_components/ExternalLink.html @@ -1,31 +1,30 @@ -{{#if class}} - <a rel="nofollow noopener" target="_blank" href="{{href}}" class="external-link {{class}}"> - <slot></slot> - {{#if showIcon}} - <svg> - <use xlink:href="#fa-external-link" /> - </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}} +<a rel="nofollow noopener" + target="_blank" + href="{{href}}" + class="{{className || ''}} {{showIcon ? 'external-link-with-icon' : ''}}"> + <slot></slot> + {{#if showIcon}} + <svg> + <use xlink:href="#fa-external-link" /> + </svg> + {{/if}} +</a> <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> \ No newline at end of file +</style> +<script> + export default { + oncreate() { + this.set({className: this.get('class')}) // workaround for "class" property name bug in svelte + } + } +</script> \ No newline at end of file diff --git a/routes/_components/status/Status.html b/routes/_components/status/Status.html index f252bc3..e8336bf 100644 --- a/routes/_components/status/Status.html +++ b/routes/_components/status/Status.html @@ -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}} + <a href="/accounts/{{status.account.id}}">{{status.account.username}}</a> 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}} + <a class="status-author-name" href="/accounts/{{originalAccount.id}}"> + {{originalAccount.display_name || originalAccount.username}} + </a> <span class="status-author-handle"> {{'@' + originalAccount.acct}} </span> diff --git a/routes/_components/timeline/StatusListItem.html b/routes/_components/timeline/StatusListItem.html index 6b9635e..61b14eb 100644 --- a/routes/_components/timeline/StatusListItem.html +++ b/routes/_components/timeline/StatusListItem.html @@ -1,6 +1,5 @@ <Status status="{{virtualProps.status}}" timelineType="{{virtualProps.timelineType}}" - timelineValue="{{virtualProps.timelineValue}}" index="{{virtualIndex}}" length="{{virtualLength}}" on:recalculateHeight /> diff --git a/routes/_components/timeline/Timeline.html b/routes/_components/timeline/Timeline.html index fd29a82..803dd3f 100644 --- a/routes/_components/timeline/Timeline.html +++ b/routes/_components/timeline/Timeline.html @@ -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) => {