|
|
@ -1,11 +1,11 @@
|
|
|
|
<template>
|
|
|
|
<template>
|
|
|
|
<div class="status-el base00-background" v-if="compact">
|
|
|
|
<div class="status-el" v-if="compact">
|
|
|
|
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
|
|
|
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
|
|
|
<div v-if="loggedIn">
|
|
|
|
<div v-if="loggedIn">
|
|
|
|
<div class='status-actions'>
|
|
|
|
<div class='status-actions'>
|
|
|
|
<div>
|
|
|
|
<div>
|
|
|
|
<a href="#" v-on:click.prevent="toggleReplying">
|
|
|
|
<a href="#" v-on:click.prevent="toggleReplying">
|
|
|
|
<i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
|
|
|
|
<i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<retweet-button :loggedIn="loggedIn" :status=status></retweet-button>
|
|
|
|
<retweet-button :loggedIn="loggedIn" :status=status></retweet-button>
|
|
|
@ -14,12 +14,12 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
|
|
|
|
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying" v-if="replying"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="status-el base00-background base03-border status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'base01-background': isFocused }, { 'status-conversation': inConversation }]" >
|
|
|
|
<div class="status-el status-fadein" v-else-if="!status.deleted" v-bind:class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inConversation }]" >
|
|
|
|
<template v-if="muted">
|
|
|
|
<template v-if="muted">
|
|
|
|
<div class="media status container muted">
|
|
|
|
<div class="media status container muted">
|
|
|
|
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
|
|
|
|
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
|
|
|
|
<small class="muteWords">{{muteWordHits.join(', ')}}</small>
|
|
|
|
<small class="muteWords">{{muteWordHits.join(', ')}}</small>
|
|
|
|
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="base09 icon-eye-off"></i></a>
|
|
|
|
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
<template v-if="!muted">
|
|
|
|
<template v-if="!muted">
|
|
|
@ -39,7 +39,7 @@
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="media-body">
|
|
|
|
<div class="media-body">
|
|
|
|
<div class="base03-border usercard" v-if="userExpanded">
|
|
|
|
<div class="usercard" v-if="userExpanded">
|
|
|
|
<user-card-content :user="status.user" :switcher="false"></user-card-content>
|
|
|
|
<user-card-content :user="status.user" :switcher="false"></user-card-content>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="user-content">
|
|
|
|
<div class="user-content">
|
|
|
@ -75,15 +75,15 @@
|
|
|
|
</h4>
|
|
|
|
</h4>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="heading-icons">
|
|
|
|
<div class="heading-icons">
|
|
|
|
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="base09 icon-eye-off"></i></a>
|
|
|
|
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
|
|
|
|
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="base09 icon-binoculars"></i></a>
|
|
|
|
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-binoculars"></i></a>
|
|
|
|
<template v-if="expandable">
|
|
|
|
<template v-if="expandable">
|
|
|
|
<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="base09 icon-plus-squared"></i></a>
|
|
|
|
<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="icon-plus-squared"></i></a>
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div class="status-preview base00-background base03-border" v-if="showPreview && preview">
|
|
|
|
<div class="status-preview" v-if="showPreview && preview">
|
|
|
|
<StillImage class="avatar" :src="preview.user.profile_image_url_original"/>
|
|
|
|
<StillImage class="avatar" :src="preview.user.profile_image_url_original"/>
|
|
|
|
<div class="text">
|
|
|
|
<div class="text">
|
|
|
|
<h4>
|
|
|
|
<h4>
|
|
|
@ -93,8 +93,8 @@
|
|
|
|
<div @click.prevent="linkClicked" class="status-content" v-html="preview.statusnet_html"></div>
|
|
|
|
<div @click.prevent="linkClicked" class="status-content" v-html="preview.statusnet_html"></div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview">
|
|
|
|
<div class="status-preview status-preview-loading" v-else-if="showPreview">
|
|
|
|
<i class="base09 icon-spin4 animate-spin"></i>
|
|
|
|
<i class="icon-spin4 animate-spin"></i>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
|
|
|
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
|
|
@ -108,7 +108,7 @@
|
|
|
|
<div class='status-actions'>
|
|
|
|
<div class='status-actions'>
|
|
|
|
<div v-if="loggedIn">
|
|
|
|
<div v-if="loggedIn">
|
|
|
|
<a href="#" v-on:click.prevent="toggleReplying">
|
|
|
|
<a href="#" v-on:click.prevent="toggleReplying">
|
|
|
|
<i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
|
|
|
|
<i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
|
|
|
|
</a>
|
|
|
|
</a>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<retweet-button :loggedIn="loggedIn" :status=status></retweet-button>
|
|
|
|
<retweet-button :loggedIn="loggedIn" :status=status></retweet-button>
|
|
|
@ -117,7 +117,7 @@
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="status base00-background container" v-if="replying">
|
|
|
|
<div class="status container" v-if="replying">
|
|
|
|
<div class="reply-left"/>
|
|
|
|
<div class="reply-left"/>
|
|
|
|
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"/>
|
|
|
|
<post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -139,7 +139,8 @@
|
|
|
|
max-width: 34em;
|
|
|
|
max-width: 34em;
|
|
|
|
padding: 0.5em;
|
|
|
|
padding: 0.5em;
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
border-color: inherit;
|
|
|
|
background-color: var(--bg);
|
|
|
|
|
|
|
|
border-color: var(--border);
|
|
|
|
border-style: solid;
|
|
|
|
border-style: solid;
|
|
|
|
border-width: 1px;
|
|
|
|
border-width: 1px;
|
|
|
|
border-radius: 4px;
|
|
|
|
border-radius: 4px;
|
|
|
@ -154,6 +155,7 @@
|
|
|
|
height: 32px;
|
|
|
|
height: 32px;
|
|
|
|
border-radius: 50%;
|
|
|
|
border-radius: 50%;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.text {
|
|
|
|
.text {
|
|
|
|
h4 {
|
|
|
|
h4 {
|
|
|
|
margin-bottom: 0.4em;
|
|
|
|
margin-bottom: 0.4em;
|
|
|
@ -179,6 +181,16 @@
|
|
|
|
word-break: break-word;
|
|
|
|
word-break: break-word;
|
|
|
|
border-left-width: 0px;
|
|
|
|
border-left-width: 0px;
|
|
|
|
line-height: 18px;
|
|
|
|
line-height: 18px;
|
|
|
|
|
|
|
|
background-color: var(--bg);
|
|
|
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&_focused {
|
|
|
|
|
|
|
|
background-color: var(--lightBg);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.usercard {
|
|
|
|
|
|
|
|
border-color: var(--border);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timeline & {
|
|
|
|
.timeline & {
|
|
|
|
border-bottom-width: 1px;
|
|
|
|
border-bottom-width: 1px;
|
|
|
@ -267,6 +279,7 @@
|
|
|
|
margin: 0.2em 0.3em 0 0;
|
|
|
|
margin: 0.2em 0.3em 0 0;
|
|
|
|
.avatar {
|
|
|
|
.avatar {
|
|
|
|
float: right;
|
|
|
|
float: right;
|
|
|
|
|
|
|
|
border-radius: 5px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
@ -284,6 +297,8 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.status-fadein {
|
|
|
|
.status-fadein {
|
|
|
@ -320,11 +335,13 @@
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon-reply:hover {
|
|
|
|
.icon-reply:hover {
|
|
|
|
color: $blue;
|
|
|
|
color: $blue_;
|
|
|
|
|
|
|
|
color: var(--cBlue);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.icon-reply.icon-reply-active {
|
|
|
|
.icon-reply.icon-reply-active {
|
|
|
|
color: $blue;
|
|
|
|
color: $blue_;
|
|
|
|
|
|
|
|
color: var(--cBlue);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.status .avatar {
|
|
|
|
.status .avatar {
|
|
|
@ -373,7 +390,7 @@
|
|
|
|
|
|
|
|
|
|
|
|
.status {
|
|
|
|
.status {
|
|
|
|
padding: 0.4em 0.7em 0.45em 0.7em;
|
|
|
|
padding: 0.4em 0.7em 0.45em 0.7em;
|
|
|
|
border-left: 4px rgba(255, 48, 16, 0.65);
|
|
|
|
border-left: 4px var(--cRed);
|
|
|
|
border-left-style: inherit;
|
|
|
|
border-left-style: inherit;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|