diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 133 |
1 files changed, 81 insertions, 52 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index f113fb7e..0c004936 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,70 +1,84 @@ <template> <div class="status-el base00-background" v-if="!status.deleted"> - <div v-if="retweet" class="media container retweet-info"> - <div class="media-left"> - <i class='fa icon-retweet retweeted'></i> + <template v-if="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> + <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a> </div> - <div class="media-body"> - Retweeted by {{retweeter}} - </div> - </div> - <div class="media status container"> - <div class="media-left"> - <a :href="status.user.statusnet_profile_url"> - <img class='avatar' :src="status.user.profile_image_url_original"> - </a> + </template> + <template v-if="!muted"> + <div v-if="retweet" class="media container retweet-info"> + <div class="media-left"> + <i class='fa icon-retweet retweeted'></i> + </div> + <div class="media-body"> + Retweeted by {{retweeter}} + </div> </div> - <div class="media-body"> - <div class="user-content"> - <h4 class="media-heading"> - {{status.user.name}} - <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> - <small v-if="status.in_reply_to_screen_name"> > - <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }"> - {{status.in_reply_to_screen_name}} - </router-link> - </small> - - - <small> - <router-link :to="{ name: 'conversation', params: { id: status.id } }"> - <timeago :since="status.created_at" :auto-update="60"></timeago> - </router-link> - </small> - <template v-if="expandable"> + <div class="media status container"> + <div class="media-left"> + <a :href="status.user.statusnet_profile_url"> + <img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original"> + </a> + </div> + <div class="media-body"> + <div class="base05 base05=border usercard" v-if="userExpanded"> + <user-card-content :user="status.user"></user-card-content> + </div> + <div class="user-content"> + <h4 class="media-heading"> + {{status.user.name}} + <small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small> + <small v-if="status.in_reply_to_screen_name"> > + <router-link :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }"> + {{status.in_reply_to_screen_name}} + </router-link> + </small> - <small> - <a href="#" @click.prevent="toggleExpanded" >Expand</a> + <router-link :to="{ name: 'conversation', params: { id: status.id } }"> + <timeago :since="status.created_at" :auto-update="60"></timeago> + </router-link> </small> - </template> - <small v-if="!status.is_local" class="source_url"> - <a :href="status.external_url" target="_blank" >Source</a> - </small> - </h4> + <template v-if="expandable"> + - + <small> + <a href="#" @click.prevent="toggleExpanded" ><i class="icon-plus-squared"></i></a> + </small> + <small v-if="status.user.muted"> + <a href="#" @click.prevent="toggleMute" ><i class="icon-eye-off"></i></a> + </small> + </template> + <small v-if="!status.is_local" class="source_url"> + <a :href="status.external_url" target="_blank" ><i class="icon-binoculars"></i></a> + </small> + </h4> - <div class="status-content" v-html="status.statusnet_html"></div> + <div class="status-content" v-html="status.statusnet_html"></div> - <div v-if='status.attachments' class='attachments'> - <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments"> - </attachment> + <div v-if='status.attachments' class='attachments'> + <attachment :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments"> + </attachment> + </div> </div> - </div> - <div v-if="loggedIn"> - <div class='status-actions'> - <div> - <a href="#" v-on:click.prevent="toggleReplying"> - <i class='fa icon-reply'></i> - </a> + <div v-if="loggedIn"> + <div class='status-actions'> + <div> + <a href="#" v-on:click.prevent="toggleReplying"> + <i class='fa icon-reply'></i> + </a> + </div> + <retweet-button :status=status></retweet-button> + <favorite-button :status=status></favorite-button> + <delete-button :status=status></delete-button> </div> - <retweet-button :status=status></retweet-button> - <favorite-button :status=status></favorite-button> - <delete-button :status=status></delete-button> - </div> - <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> + <post-status-form v-if="replying" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"></post-status-form> + </div> </div> </div> - </div> + </template> </div> </template> @@ -128,4 +142,19 @@ padding-right: 1em; border-bottom: 1px solid; } + .muted button { + margin-left: auto; + } + + a.unmute { + display: block; + margin-left: auto; + } + + .usercard { + border-style: solid; + border-width: 1px; + border-radius: 1em; + margin-bottom: 1em; + } </style> |