diff options
Diffstat (limited to 'src/components/status/status.vue')
| -rw-r--r-- | src/components/status/status.vue | 397 |
1 files changed, 184 insertions, 213 deletions
diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 798443f1..885083c4 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,123 +1,98 @@ <template> - <div class="status-el" v-if="compact"> - <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div> - <div v-if="loggedIn"> - <div class='status-actions'> - <div> - <a href="#" v-on:click.prevent="toggleReplying"> - <i class="icon-reply" :class="{'icon-reply-active': replying}"></i> - </a> - </div> - <retweet-button :loggedIn="loggedIn" :status=status></retweet-button> - <favorite-button :loggedIn="loggedIn" :status=status></favorite-button> - </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"/> - </div> - <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"> + <div class="status-el status-fadein" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"> + <template v-if="muted && !noReplyLinks"> <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 class="muteWords">{{muteWordHits.join(', ')}}</small> <a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a> </div> </template> - <template v-if="!muted"> - <div v-if="retweet" class="media container retweet-info"> - <div class="media-left"> + <template v-else> + <div v-if="retweet && !noHeading" class="media container retweet-info"> + <StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/> + <div class="media-body faint"> + <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a> <i class='fa icon-retweet retweeted'></i> - </div> - <div class="media-body"> - Repeated by <a :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a> + {{$t('timeline.repeated')}} </div> </div> - <div class="media status container"> - <div class="media-left"> - <a :href="status.user.statusnet_profile_url"> - <StillImage @click.native.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original"/> - <StillImage v-if="retweet" class='avatar avatar-retweeter' :src="statusoid.user.profile_image_url_original"/> + + <div class="media status"> + <div v-if="!noHeading" class="media-left"> + <a :href="status.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> + <StillImage class='avatar' :class="{'avatar-compact': compact}" :src="status.user.profile_image_url_original"/> </a> </div> - <div class="media-body"> - <div class="usercard" v-if="userExpanded"> + <div class="status-body"> + <div class="usercard media-body" v-if="userExpanded"> <user-card-content :user="status.user" :switcher="false"></user-card-content> </div> - <div class="user-content"> - <div class="media-heading"> + <div v-if="!noHeading" class="media-body container media-heading"> + <div class="media-heading-left"> <div class="name-and-links"> <h4 class="user-name">{{status.user.name}}</h4> - <div class="links"> - <h4> - <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"> > + <span class="links"> + <router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link> + <span 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> - <template v-if="isReply"> - <small> - <a href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"><i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i></a> - </small> - </template> - - - <small> - <router-link :to="{ name: 'conversation', params: { id: status.id } }"> - <timeago :since="status.created_at" :auto-update="60"></timeago> - </router-link> - </small> - </h4> - </div> - <h4 class="replies" v-if="inConversation"> - <small v-if="replies.length">Replies:</small> - <small v-for="reply in replies"> - <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}} </a> - </small> - </h4> - </div> - <div class="heading-icons"> - <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="icon-binoculars"></i></a> - <template v-if="expandable"> - <a href="#" @click.prevent="toggleExpanded" class="expand"><i class="icon-plus-squared"></i></a> - </template> + </span> + <a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)"> + <i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i> + </a> + </span> </div> + <h4 class="replies" v-if="inConversation && !noReplyLinks"> + <small v-if="replies.length">Replies:</small> + <small class="reply-link" v-for="reply in replies"> + <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}} </a> + </small> + </h4> </div> - - <div class="status-preview" v-if="showPreview && preview"> - <StillImage class="avatar" :src="preview.user.profile_image_url_original"/> - <div class="text"> - <h4> - {{ preview.user.name }} - <small><a>{{ preview.user.screen_name}}</a></small> - </h4> - <div @click.prevent="linkClicked" class="status-content" v-html="preview.statusnet_html"></div> - </div> + <div class="media-heading-right"> + <router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }"> + <timeago :since="status.created_at" :auto-update="60"></timeago> + </router-link> + <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"> + <a href="#" @click.prevent="toggleExpanded"><i class="icon-plus-squared"></i></a> + </template> + <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a> </div> - <div class="status-preview status-preview-loading" v-else-if="showPreview"> + </div> + + <div v-if="showPreview" class="status-preview-container"> + <status class="status-preview" v-if="preview" :noReplyLinks="true" :statusoid="preview" :compact=true></status> + <div class="status-preview status-preview-loading base00-background base03-border" v-else> <i class="icon-spin4 animate-spin"></i> </div> + </div> - <div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div> + <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper"> + <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a> + <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div> + <a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a> + </div> - <div v-if='status.attachments' class='attachments'> - <attachment v-if="!hideAttachments" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id"> - </attachment> - </div> + <div v-if='status.attachments' class='attachments media-body'> + <attachment :size="attachmentSize" :status-id="status.id" :nsfw="status.nsfw" :attachment="attachment" v-for="attachment in status.attachments" :key="attachment.id"> + </attachment> </div> - <div class='status-actions'> + <div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'> <div v-if="loggedIn"> <a href="#" v-on:click.prevent="toggleReplying"> <i class="icon-reply" :class="{'icon-reply-active': replying}"></i> </a> </div> - <retweet-button :loggedIn="loggedIn" :status=status></retweet-button> - <favorite-button :loggedIn="loggedIn" :status=status></favorite-button> - <delete-button :status=status></delete-button> + <retweet-button :loggedIn='loggedIn' :status='status'></retweet-button> + <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button> + <delete-button :status='status'></delete-button> </div> </div> </div> - <div class="status container" v-if="replying"> + <div class="container" v-if="replying"> <div class="reply-left"/> <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" v-on:posted="toggleReplying"/> </div> @@ -126,18 +101,29 @@ </template> <script src="./status.js" ></script> - <style lang="scss"> @import '../../_variables.scss'; -status-text-container { - display: block; +.status-body { + flex: 1; + min-width: 0; +} + +.status-preview.status-el { + border-style: solid; + border-width: 1px; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); +} + +.status-preview-container { + position: relative; + max-width: 100%; } .status-preview { position: absolute; - max-width: 34em; - padding: 0.5em; + max-width: 95%; display: flex; background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); @@ -148,26 +134,13 @@ status-text-container { border-radius: $fallback--tooltipRadius; border-radius: var(--tooltipRadius, $fallback--tooltipRadius); box-shadow: 2px 2px 3px rgba(0, 0, 0, 0.5); - margin-top: 0.5em; - margin-left: 1em; + margin-top: 0.25em; + margin-left: 0.5em; z-index: 50; - - .avatar { - flex-shrink: 0; - width: 32px; - height: 32px; - border-radius: $fallback--avatarAltRadius; - border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); - } - - .text { - h4 { - margin-bottom: 0.4em; - small { - font-weight: lighter; - } - } - padding: 0 0.5em 0.5em 0.5em; + .status { + flex: 1; + border: 0; + min-width: 15em; } } @@ -175,7 +148,10 @@ status-text-container { display: block; font-size: 2em; min-width: 8em; + padding: 0.5em; text-align: center; + border-width: 1px; + border-style: solid; } .status-el { @@ -185,6 +161,7 @@ status-text-container { word-break: break-word; border-left-width: 0px; line-height: 18px; + min-width: 0; background-color: $fallback--bg; background-color: var(--bg, $fallback--bg); border-color: $fallback--border; @@ -195,70 +172,67 @@ status-text-container { background-color: var(--lightBg, $fallback--lightBg); } - .usercard { - border-color: $fallback--border; - border-color: var(--border, $fallback--border); - } - .timeline & { border-bottom-width: 1px; border-bottom-style: solid; } - .notify { - .avatar { - border-width: 3px; - border-style: solid; - } - } - .media-body { flex: 1; - padding-left: 0.5em; - } - - - .user-content { - min-height: 52px; - padding-top: 1px; + padding: 0; + margin: 0 0 0.25em 0.8em; } .media-heading { - display: flex; - min-height: 1.4em; - margin-bottom: 0.3em; - - .links a i { - color: $fallback--link; - color: var(--link, $fallback--link); - } + flex-wrap: nowrap; + } + .media-heading-left { + padding: 0; + vertical-align: bottom; + flex-basis: 100%; small { font-weight: lighter; } - h4 { - margin-right: 0.4em; + font-size: 14px; + margin-right: 0.25em; } - .name-and-links { + padding: 0; flex: 1 0; display: flex; flex-wrap: wrap; } - + .links a { + padding-top: 1px; + font-size: 12px; + color: $fallback--link; + color: var(--link, $fallback--link); + } .replies { - flex-basis: 100%; + line-height: 16px; + } + .reply-link { + margin-right: 0.2em; } } - .source_url { - - } - - .expand { - margin-right: -0.3em; + .media-heading-right { + flex-shrink: 0; + display: flex; + flex-wrap: nowrap; + max-height: 1.5em; + margin-left: 0.25em; + .timeago { + margin-right: 0.2em; + font-size: 12px; + padding-top: 1px; + } + i { + margin-left: 0.2em; + } } a { @@ -266,12 +240,35 @@ status-text-container { word-break: break-all; } - .status-content { - margin: 3px 15px 4px 0; - max-height: 400px; - overflow-y: auto; + .tall-status { + position: relative; + height: 220px; overflow-x: hidden; + overflow-y: hidden; + } + + .tall-status-hider { + position: absolute; + height: 70px; + margin-top: 150px; + width: 100%; + text-align: center; + line-height: 110px; + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); + &_focused { + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%); + background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%); + } + } + + .tall-status-unhider { + width: 100%; + text-align: center; + } + .status-content { + margin-right: 0.5em; img, video { max-width: 100%; max-height: 400px; @@ -283,43 +280,34 @@ status-text-container { margin: 0.2em 0 0.2em 2em; font-style: italic; } - } - p { - margin: 0; - margin-top: 0.2em; - margin-bottom: 0.5em; - } - - .media-left { - margin: 0.2em 0.3em 0 0; - .avatar { - float: right; - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); + p { + margin: 0; + margin-top: 0.2em; + margin-bottom: 0.5em; } } .retweet-info { - padding: 0.7em 0 0 0.6em; - - .media-left { - display: flex; + padding: 0.3em 0.6em 0 0.6em; + margin: 0 0 -0.3em 0; + .avatar { + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + margin-left: 28px; + width: 20px; + height: 20px; + } - i { - align-self: center; - text-align: right; - flex: 1; - padding-right: 0.3em; - } + .media-body { + font-size: 1em; + line-height: 22px; } } - - } .status-fadein { - animation-duration: 0.5s; + animation-duration: 0.3s; animation-name: fadein; } @@ -327,7 +315,6 @@ status-text-container { from { opacity: 0; } - to { opacity: 1; } @@ -342,11 +329,11 @@ status-text-container { } .status-actions { - padding-top: 0.15em; width: 100%; display: flex; div, favorite-button { + padding-top: 0.25em; max-width: 6em; flex: 1; } @@ -362,12 +349,20 @@ status-text-container { color: var(--cBlue, $fallback--cBlue); } -.status .avatar { +.status .avatar-compact { + width: 32px; + height: 32px; + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); +} + +.avatar { width: 48px; height: 48px; border-radius: $fallback--avatarRadius; border-radius: var(--avatarRadius, $fallback--avatarRadius); overflow: hidden; + position: relative; img { width: 100%; @@ -379,10 +374,6 @@ status-text-container { } &.retweeted { - width: 40px; - height: 40px; - margin-right: 8px; - margin-bottom: 8px; } } @@ -395,20 +386,9 @@ status-text-container { } } -.status .avatar-retweeter { - width: 24px; - height: 24px; - position: absolute; - margin-left: 24px; - margin-top: 24px; -} - -.status.compact .avatar { - width: 32px; -} - .status { - padding: 0.4em 0.7em 0.45em 0.7em; + display: flex; + padding: 0.6em; border-left: 4px $fallback--cRed; border-left: 4px var(--cRed, $fallback--cRed); border-left-style: inherit; @@ -423,7 +403,7 @@ status-text-container { } .muted { - padding: 0.1em 0.4em 0.1em 0.8em; + padding: 0.25em 0.5em; button { margin-left: auto; } @@ -449,11 +429,12 @@ a.unmute { @media all and (max-width: 960px) { .status-el { - .name-and-links { - margin-left: -0.25em; + .retweet-info { + .avatar { + margin-left: 20px; + } } } - .status { max-width: 100%; } @@ -461,21 +442,11 @@ a.unmute { .status .avatar { width: 40px; height: 40px; - - &.retweeted { - width: 34px; - height: 34px; - margin-right: 8px; - margin-bottom: 8px; - } } - .status .avatar-retweeter { - width: 22px; - height: 22px; - position: absolute; - margin-left: 18px; - margin-top: 18px; + .status .avatar-compact { + width: 32px; + height: 32px; } } |