Refactor
This commit is contained in:
parent
39aa49884c
commit
9d49f71b48
|
@ -3,15 +3,15 @@
|
||||||
<div class="popover { compact: opts.compact }" ref="popover">
|
<div class="popover { compact: opts.compact }" ref="popover">
|
||||||
<p if={ !opts.compact }>{ title }</p>
|
<p if={ !opts.compact }>{ title }</p>
|
||||||
<div>
|
<div>
|
||||||
<button onclick={ react.bind(null, 'like') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'like') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="1" title="%i18n:common.reactions.like%"><mk-reaction-icon reaction='like'/></button>
|
||||||
<button onclick={ react.bind(null, 'love') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'love') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="2" title="%i18n:common.reactions.love%"><mk-reaction-icon reaction='love'/></button>
|
||||||
<button onclick={ react.bind(null, 'laugh') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'laugh') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="3" title="%i18n:common.reactions.laugh%"><mk-reaction-icon reaction='laugh'/></button>
|
||||||
<button onclick={ react.bind(null, 'hmm') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'hmm') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="4" title="%i18n:common.reactions.hmm%"><mk-reaction-icon reaction='hmm'/></button>
|
||||||
<button onclick={ react.bind(null, 'surprise') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'surprise') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="5" title="%i18n:common.reactions.surprise%"><mk-reaction-icon reaction='surprise'/></button>
|
||||||
<button onclick={ react.bind(null, 'congrats') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'congrats') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="6" title="%i18n:common.reactions.congrats%"><mk-reaction-icon reaction='congrats'/></button>
|
||||||
<button onclick={ react.bind(null, 'angry') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="4" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'angry') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="4" title="%i18n:common.reactions.angry%"><mk-reaction-icon reaction='angry'/></button>
|
||||||
<button onclick={ react.bind(null, 'confused') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="5" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'confused') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="5" title="%i18n:common.reactions.confused%"><mk-reaction-icon reaction='confused'/></button>
|
||||||
<button onclick={ react.bind(null, 'pudding') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="6" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'></mk-reaction-icon></button>
|
<button onclick={ react.bind(null, 'pudding') } onmouseover={ onmouseover } onmouseout={ onmouseout } tabindex="6" title="%i18n:common.reactions.pudding%"><mk-reaction-icon reaction='pudding'/></button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<style>
|
<style>
|
||||||
|
|
|
@ -1,14 +1,14 @@
|
||||||
<mk-reactions-viewer>
|
<mk-reactions-viewer>
|
||||||
<virtual if={ reactions }>
|
<virtual if={ reactions }>
|
||||||
<span if={ reactions.like }><mk-reaction-icon reaction='like'></mk-reaction-icon><span>{ reactions.like }</span></span>
|
<span if={ reactions.like }><mk-reaction-icon reaction='like'/><span>{ reactions.like }</span></span>
|
||||||
<span if={ reactions.love }><mk-reaction-icon reaction='love'></mk-reaction-icon><span>{ reactions.love }</span></span>
|
<span if={ reactions.love }><mk-reaction-icon reaction='love'/><span>{ reactions.love }</span></span>
|
||||||
<span if={ reactions.laugh }><mk-reaction-icon reaction='laugh'></mk-reaction-icon><span>{ reactions.laugh }</span></span>
|
<span if={ reactions.laugh }><mk-reaction-icon reaction='laugh'/><span>{ reactions.laugh }</span></span>
|
||||||
<span if={ reactions.hmm }><mk-reaction-icon reaction='hmm'></mk-reaction-icon><span>{ reactions.hmm }</span></span>
|
<span if={ reactions.hmm }><mk-reaction-icon reaction='hmm'/><span>{ reactions.hmm }</span></span>
|
||||||
<span if={ reactions.surprise }><mk-reaction-icon reaction='surprise'></mk-reaction-icon><span>{ reactions.surprise }</span></span>
|
<span if={ reactions.surprise }><mk-reaction-icon reaction='surprise'/><span>{ reactions.surprise }</span></span>
|
||||||
<span if={ reactions.congrats }><mk-reaction-icon reaction='congrats'></mk-reaction-icon><span>{ reactions.congrats }</span></span>
|
<span if={ reactions.congrats }><mk-reaction-icon reaction='congrats'/><span>{ reactions.congrats }</span></span>
|
||||||
<span if={ reactions.angry }><mk-reaction-icon reaction='angry'></mk-reaction-icon><span>{ reactions.angry }</span></span>
|
<span if={ reactions.angry }><mk-reaction-icon reaction='angry'/><span>{ reactions.angry }</span></span>
|
||||||
<span if={ reactions.confused }><mk-reaction-icon reaction='confused'></mk-reaction-icon><span>{ reactions.confused }</span></span>
|
<span if={ reactions.confused }><mk-reaction-icon reaction='confused'/><span>{ reactions.confused }</span></span>
|
||||||
<span if={ reactions.pudding }><mk-reaction-icon reaction='pudding'></mk-reaction-icon><span>{ reactions.pudding }</span></span>
|
<span if={ reactions.pudding }><mk-reaction-icon reaction='pudding'/><span>{ reactions.pudding }</span></span>
|
||||||
</virtual>
|
</virtual>
|
||||||
<style>
|
<style>
|
||||||
:scope
|
:scope
|
||||||
|
|
|
@ -8,7 +8,7 @@
|
||||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=48' } alt="avatar"/>
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p><mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<p><mk-reaction-icon reaction={ notification.reaction }/><a href={ '/' + notification.user.username } data-user-preview={ notification.user.id }>{ notification.user.name }</a></p><a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
<virtual if={ notification.type == 'repost' }>
|
<virtual if={ notification.type == 'repost' }>
|
||||||
|
|
|
@ -2,7 +2,7 @@
|
||||||
<virtual if={ notification.type == 'reaction' }>
|
<virtual if={ notification.type == 'reaction' }>
|
||||||
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
<img class="avatar" src={ notification.user.avatar_url + '?thumbnail&size=64' } alt="avatar"/>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p><mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon>{ notification.user.name }</p>
|
<p><mk-reaction-icon reaction={ notification.reaction }/>{ notification.user.name }</p>
|
||||||
<p class="post-ref">{ getPostSummary(notification.post) }</p>
|
<p class="post-ref">{ getPostSummary(notification.post) }</p>
|
||||||
</div>
|
</div>
|
||||||
</virtual>
|
</virtual>
|
||||||
|
|
|
@ -6,7 +6,7 @@
|
||||||
</a>
|
</a>
|
||||||
<div class="text">
|
<div class="text">
|
||||||
<p>
|
<p>
|
||||||
<mk-reaction-icon reaction={ notification.reaction }></mk-reaction-icon>
|
<mk-reaction-icon reaction={ notification.reaction }/>
|
||||||
<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
|
<a href={ '/' + notification.user.username }>{ notification.user.name }</a>
|
||||||
</p>
|
</p>
|
||||||
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
<a class="post-ref" href={ '/' + notification.post.user.username + '/' + notification.post.id }>{ getPostSummary(notification.post) }</a>
|
||||||
|
|
Loading…
Reference in New Issue