diff options
Diffstat (limited to 'src/components')
23 files changed, 224 insertions, 97 deletions
diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index f4f6aebf..7715add5 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -11,7 +11,9 @@ const Attachment = { return { nsfwImage, hideNsfwLocal: this.$store.state.config.hideNsfw, - showHidden: false + showHidden: false, + loading: false, + img: document.createElement('img') } }, computed: { @@ -20,6 +22,13 @@ const Attachment = { }, hidden () { return this.nsfw && this.hideNsfwLocal && !this.showHidden + }, + autoHeight () { + if (this.type === 'image' && this.nsfw) { + return { + 'min-height': '311px' + } + } } }, methods: { @@ -29,7 +38,16 @@ const Attachment = { } }, toggleHidden () { - this.showHidden = !this.showHidden + if (this.img.onload) { + this.img.onload() + } else { + this.loading = true + this.img.src = this.attachment.url + this.img.onload = () => { + this.loading = false + this.showHidden = !this.showHidden + } + } } } } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index ad60acf9..8f51b891 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,15 +1,14 @@ <template> - <div class="attachment" :class="type"> - <a class="image-attachment" v-if="hidden" v-on:click.prevent="toggleHidden()"> - <img :key="nsfwImage" :src="nsfwImage"></img> + <div class="attachment" :class="{[type]: true, loading}" :style="autoHeight"> + <a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()"> + <img :key="nsfwImage" :src="nsfwImage"/> </a> <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden"> <a href="#" @click.prevent="toggleHidden()">Hide</a> </div> - <a class="image-attachment" v-if="type === 'image' && !hidden" - :href="attachment.url" target="_blank"> - <img class="base05-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"></img> + <a v-if="type === 'image' && !hidden" class="image-attachment" :href="attachment.url" target="_blank"> + <img class="base05-border" referrerpolicy="no-referrer" :src="attachment.large_thumb_url || attachment.url"/> </a> <video v-if="type === 'video' && !hidden" :src="attachment.url" controls></video> @@ -18,7 +17,7 @@ <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed"> <div v-if="attachment.thumb_url" class="image"> - <img :src="attachment.thumb_url"></img> + <img :src="attachment.thumb_url"/> </div> <div class="text"> <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1> @@ -45,6 +44,10 @@ display: flex; } + &.loading { + cursor: progress; + } + .hider { position: absolute; margin: 10px; @@ -111,7 +114,6 @@ flex: 1; img { - width: 100%; border-style: solid; border-width: 1px; border-radius: 5px; diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index ecc76e71..281b0183 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -47,6 +47,13 @@ const conversation = { .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) .then(() => this.fetchConversation()) } + }, + focused: function (id) { + if (this.statusoid.retweeted_status) { + return (id === this.statusoid.retweeted_status.id) + } else { + return (id === this.statusoid.id) + } } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 9675e69f..33a43e15 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -2,13 +2,13 @@ <div class="timeline panel panel-default base00-background"> <div class="panel-heading base01-background base04"> Conversation - <div v-if="collapsable"> + <span v-if="collapsable" style="float:right;"> <small><a href="#" @click.prevent="$emit('toggleExpanded')">Collapse</a></small> - </div> + </span> </div> <div class="panel-body"> <div class="timeline"> - <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false'></status> + <status v-for="status in conversation" :key="status.id" v-bind:statusoid="status":expandable='false':focused="focused(status.id)"></status> </div> </div> </div> diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js index 4ee3890f..466e9b84 100644 --- a/src/components/favorite_button/favorite_button.js +++ b/src/components/favorite_button/favorite_button.js @@ -1,5 +1,10 @@ const FavoriteButton = { - props: [ 'status' ], + props: ['status'], + data () { + return { + animated: false + } + }, methods: { favorite () { if (!this.status.favorited) { @@ -7,13 +12,18 @@ const FavoriteButton = { } else { this.$store.dispatch('unfavorite', {id: this.status.id}) } + this.animated = true + setTimeout(() => { + this.animated = false + }, 500) } }, computed: { classes () { return { 'icon-star-empty': !this.status.favorited, - 'icon-star': this.status.favorited + 'icon-star': this.status.favorited, + 'animate-spin': this.animated } } } diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index fd53b505..0abece31 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -1,6 +1,6 @@ <template> <div> - <i :class='classes' class='favorite-button fa' v-on:click.prevent='favorite()'></i> + <i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/> <span v-if='status.fave_num > 0'>{{status.fave_num}}</span> </div> </template> @@ -10,6 +10,7 @@ <style lang='scss'> .favorite-button { cursor: pointer; + animation-duration: 0.6s; &:hover { color: orange; } @@ -17,4 +18,5 @@ .icon-star { color: orange; } + </style> diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue index afe5cc89..3bf3b543 100644 --- a/src/components/friends_timeline/friends_timeline.vue +++ b/src/components/friends_timeline/friends_timeline.vue @@ -1,10 +1,5 @@ <template> - <div class="timeline panel panel-default"> - <div class="panel-heading base01-background base04">Friends Timeline</div> - <div class="panel-body"> - <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/> - </div> - </div> + <Timeline :title="'Friends'" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/> </template> <script src="./friends_timeline.js"></script> diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index b55f770f..1a6f6015 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -1,15 +1,21 @@ const LoginForm = { data: () => ({ - user: {} + user: {}, + authError: false }), computed: { loggingIn () { return this.$store.state.users.loggingIn } }, methods: { submit () { - this.$store.dispatch('loginUser', this.user).then(() => { - this.$router.push('/main/friends') - }) + this.$store.dispatch('loginUser', this.user).then( + () => {}, + (error) => { + this.authError = error + this.user.username = '' + this.user.password = '' + } + ) } } } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index c0ea4313..b2fa5341 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -1,7 +1,7 @@ <template> <div class="login panel panel-default base00-background"> <!-- Default panel contents --> - <div class="panel-heading base01-background"> + <div class="panel-heading base01-background base04"> Log in </div> <div class="panel-body"> @@ -17,6 +17,9 @@ <div class='form-group'> <button :disabled="loggingIn" type='submit' class='btn btn-default base05 base01-background'>Submit</button> </div> + <div v-if="authError" class='form-group'> + <div class='error base05'>{{authError}}</div> + </div> </form> </div> </div> @@ -39,6 +42,14 @@ margin-top: 1.0em; min-height: 28px; } + + .error { + border-radius: 5px; + text-align: center; + background-color: rgba(255, 48, 16, 0.65); + min-height: 28px; + line-height: 28px; + } } </style> diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue index 59f00241..7af402ce 100644 --- a/src/components/mentions/mentions.vue +++ b/src/components/mentions/mentions.vue @@ -1,10 +1,5 @@ <template> - <div class="timeline panel panel-default"> - <div class="panel-heading base01-background base04">Mentions</div> - <div class="panel-body"> - <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> - </div> - </div> + <Timeline :title="'Mentions'" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> </template> <script src="./mentions.js"></script> diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 85ed163c..1d96f4d6 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -1,24 +1,24 @@ <template> <div class="nav-panel"> - <div class="panel panel-default base01-background"> + <div class="panel panel-default base02-background"> <ul> <li v-if='currentUser'> - <router-link to='/main/friends'> + <router-link class="base01-background" to='/main/friends'> Timeline </router-link> </li> <li v-if='currentUser'> - <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> + <router-link class="base01-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> Mentions </router-link> </li> <li> - <router-link to='/main/public'> + <router-link class="base01-background" to='/main/public'> Public Timeline </router-link> </li> <li> - <router-link to='/main/all'> + <router-link class="base01-background" to='/main/all'> The Whole Known Network </router-link> </li> @@ -30,7 +30,6 @@ <script src="./nav_panel.js" ></script> <style lang="scss"> - .nav-panel ul { list-style: none; margin: 0; @@ -39,7 +38,15 @@ .nav-panel li { border-bottom: 1px solid; - padding: 0.8em 0.85em; + padding: 0; + &:first-child a { + border-top-right-radius: 10px; + border-top-left-radius: 10px; + } + &:last-child a { + border-bottom-right-radius: 10px; + border-bottom-left-radius: 10px; + } } .nav-panel li:last-child { @@ -48,10 +55,16 @@ .nav-panel a { display: block; - width: 100%; - + padding: 0.8em 0.85em; + &:hover { + background-color: transparent; + } &.router-link-active { - font-weight: bold + font-weight: bolder; + background-color: transparent; + &:hover { + text-decoration: underline; + } } } diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index 5da6d495..6ad7ec1e 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -6,19 +6,32 @@ // force the text to stay centered, while keeping // the button in the right side of the panel heading position: relative; - button { + .read-button { position: absolute; padding: 0.1em 0.3em 0.25em 0.3em; - right: 0.6em; + right: 0.7em; } } - .unseen { - border-left: 4px solid rgba(255, 48, 16, 0.65); + .unseen-count { + display: inline-block; + background-color: rgba(255, 16, 8, 0.8); + text-shadow: 0px 0px 3px rgba(0, 0, 0, 0.5); + min-width: 1.3em; + border-radius: 1.3em; + margin: 0 0.2em 0 -0.4em; + color: white; + font-size: 0.9em; + text-align: center; + line-height: 1.3em; } .notification { - padding: 0.4em 0 0 0.7em; + // Will have to use pixels here to ensure consistent distance with + // pad alone and pad + border, browsers bad at rounding this with em, + // they love to give a 1 pixel ghost offset with 0.7em vs 0.3em + 0.4em, + // which does not happen with 10px vs 4px + 6px. + padding: 0.4em 0 0 10px; display: flex; border-bottom: 1px solid silver; @@ -62,4 +75,9 @@ border: none } } + + .unseen { + border-left: 4px solid rgba(255, 16, 8, 0.75); + padding-left: 6px; + } } diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 41c274aa..91f6cfdc 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -2,8 +2,9 @@ <div class="notifications"> <div class="panel panel-default base00-background"> <div class="panel-heading base01-background base04"> - Notifications ({{unseenCount}}) - <button @click.prevent="markAsSeen" class="base05 base02-background">Read!</button> + <span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span> + Notifications + <button @click.prevent="markAsSeen" class="base06 base02-background read-button">Read!</button> </div> <div class="panel-body"> <div v-for="notification in visibleNotifications" class="notification" :class='{"unseen": !notification.seen}'> diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue index bda51153..fd696938 100644 --- a/src/components/public_and_external_timeline/public_and_external_timeline.vue +++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue @@ -1,10 +1,5 @@ <template> - <div class="timeline panel panel-default"> - <div class="panel-heading base01-background base04">THE WHOLE KNOWN NETWORK</div> - <div class="panel-body"> - <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/> - </div> - </div> + <Timeline :title="'THE WHOLE KNOWN NETWORK'"v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/> </template> <script src="./public_and_external_timeline.js"></script> diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue index d05695b2..bd6a23ed 100644 --- a/src/components/public_timeline/public_timeline.vue +++ b/src/components/public_timeline/public_timeline.vue @@ -1,10 +1,5 @@ <template> - <div class="timeline panel panel-default"> - <div class="panel-heading base01-background base04">Public Timeline</div> - <div class="panel-body"> - <Timeline v-bind:timeline="timeline" v-bind:timeline-name="'public'"/> - </div> - </div> + <Timeline :title="'Public Timeline'" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/> </template> <script src="./public_timeline.js"></script> diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index e7318dc5..2280f315 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -1,16 +1,26 @@ const RetweetButton = { - props: [ 'status' ], + props: ['status'], + data () { + return { + animated: false + } + }, methods: { retweet () { if (!this.status.repeated) { this.$store.dispatch('retweet', {id: this.status.id}) } + this.animated = true + setTimeout(() => { + this.animated = false + }, 500) } }, computed: { classes () { return { - 'retweeted': this.status.repeated + 'retweeted': this.status.repeated, + 'animate-spin': this.animated } } } diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 9b2f5c7b..d923c5c4 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -11,12 +11,12 @@ @import '../../_variables.scss'; .icon-retweet { cursor: pointer; + animation-duration: 0.6s; &:hover { color: $green; } } .retweeted { - cursor: auto; color: $green; } </style> diff --git a/src/components/status/status.js b/src/components/status/status.js index 22292ffa..bc9d6e6c 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -8,7 +8,8 @@ import UserCardContent from '../user_card_content/user_card_content.vue' const Status = { props: [ 'statusoid', - 'expandable' + 'expandable', + 'focused' ], data: () => ({ replying: false, @@ -30,7 +31,8 @@ const Status = { loggedIn () { return !!this.$store.state.users.currentUser }, - muted () { return !this.unmuted && this.status.user.muted } + muted () { return !this.unmuted && this.status.user.muted }, + isReply () { return !!this.status.in_reply_to_status_id } }, components: { Attachment, diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 585bf621..6476e1e5 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,5 +1,5 @@ <template> - <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="{ 'expanded-status': !expandable }"> + <div class="status-el base00-background" v-if="!status.deleted" v-bind:class="[{ 'expanded-status': !expandable }, { 'base01-background': focused }]"> <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> @@ -34,6 +34,13 @@ {{status.in_reply_to_screen_name}} </router-link> </small> + <template v-if="isReply"> + <small> + <router-link :to="{ name: 'conversation', params: { id: status.in_reply_to_status_id } }"> + <i class="icon-reply"></i> + </router-link> + </small> + </template> - <small> <router-link :to="{ name: 'conversation', params: { id: status.id } }"> diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue index 4fabfab2..4aaaf2ff 100644 --- a/src/components/status_or_conversation/status_or_conversation.vue +++ b/src/components/status_or_conversation/status_or_conversation.vue @@ -1,7 +1,7 @@ <template> <div> <conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation> - <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid"></status> + <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :statusoid="statusoid" :focused="false"></status> </div> </template> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index addd0255..b4e80fe1 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -5,7 +5,8 @@ import StatusOrConversation from '../status_or_conversation/status_or_conversati const Timeline = { props: [ 'timeline', - 'timelineName' + 'timelineName', + 'title' ], components: { Status, diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 45886f6c..ac074f3c 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -1,33 +1,69 @@ <template> - <div class="timeline"> - <a href="#" v-on:click.prevent='showNewStatuses()' v-if="timeline.newStatusCount > 0"> - <div class="base01-background base05-border new-status-notification"> - <p class="text-center" > - {{timeline.newStatusCount}} new statuses - </p> + <div class="timeline panel panel-default"> + <div class="panel-heading timeline-heading base01-background base04"> + <div class="title"> + {{title}} </div> - </a> - <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation> - <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> - <div class="base01-background base05-border new-status-notification"> - <p class="text-center" > - Load older statuses. - </p> + <button @click.prevent="showNewStatuses" class="base06 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timeline.error"> + Show new ({{timeline.newStatusCount}}) + </button> + <button @click.prevent class="base06 error no-press loadmore-button" v-if="timeline.error"> + Error fetching updates + </button> + <button @click.prevent class="base04 base01-background no-press loadmore-button" v-if="!timeline.newStatusCount > 0 && !timeline.error"> + Up-to-date + </button> + </div> + <div class="panel-body"> + <div class="timeline"> + <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status-or-conversation> + <a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading"> + <div class="base01-background base05-border new-status-notification text-center">Load older statuses.</div> + </a> + <div class="base01-background base05-border new-status-notification text-center" v-else>...</div> </div> - </a> + </div> </div> </template> <script src="./timeline.js"></script> <style lang="scss"> - .new-status-notification { - border-style: solid; - border-width: 1px 0 1px 0; - font-size: 1.1em; - p { - margin: 0px; - padding: 10px; - } - } + .timeline { + .timeline-heading { + position: relative; + display: flex; + } + .title { + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + max-width: 70%; + } + .loadmore-button { + position: absolute; + right: 0.6em; + padding: 0.1em 0.3em 0.25em 0.3em; + min-width: 6em; + } + .error { + background-color: rgba(255, 48, 16, 0.65); + } + .no-press { + opacity: 0.8; + cursor: default; + } + } + + + .new-status-notification { + position:relative; + margin-top: -1px; + font-size: 1.1em; + border-width: 1px 0 0 0; + border-style: solid; + border-radius: 0 0 10px 10px; + padding: 10px; + z-index: 1; + } </style> diff --git a/src/components/user_card_content/user_card_content.vue b/src/components/user_card_content/user_card_content.vue index 178100b8..3fa34773 100644 --- a/src/components/user_card_content/user_card_content.vue +++ b/src/components/user_card_content/user_card_content.vue @@ -63,15 +63,13 @@ headingStyle () { let rgb = this.$store.state.config.colors['base00'].match(/\d+/g) return { - backgroundColor: 'rgb(' + Math.floor(rgb[0] * 0.53) + ', ' + - Math.floor(rgb[1] * 0.56) + ', ' + - Math.floor(rgb[2] * 0.59) + ')', + backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`, backgroundImage: `url(${this.user.cover_photo})` } }, bodyStyle () { return { - background: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), ' + this.$store.state.config.colors['base00'] + ' 80%)' + background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)` } }, isOtherUser () { @@ -106,6 +104,11 @@ .profile-panel-background { background-size: cover; border-radius: 10px; + + .panel-heading { + padding: 0.6em 0em; + text-align: center; + } } .profile-panel-body { |