Merge branch 'develop' into feature/hash-routed
This commit is contained in:
Roger Braun
commit
0eeccb87ce
34 changed files with 472 additions and 204 deletions
|
|
@ -109,8 +109,8 @@ main-router {
|
|||
.panel-heading {
|
||||
border-radius: 10px 10px 0 0;
|
||||
background-size: cover;
|
||||
padding: 0.6em 0;
|
||||
text-align: center;
|
||||
padding: 0.6em 1.0em;
|
||||
text-align: left;
|
||||
font-size: 1.3em;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 = ''
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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}'>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,12 +11,12 @@
|
|||
@import '../../_variables.scss';
|
||||
.icon-retweet {
|
||||
cursor: pointer;
|
||||
animation-duration: 0.6s;
|
||||
&:hover {
|
||||
color: $green;
|
||||
}
|
||||
}
|
||||
.retweeted {
|
||||
cursor: auto;
|
||||
color: $green;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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 } }">
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -5,7 +5,8 @@ import StatusOrConversation from '../status_or_conversation/status_or_conversati
|
|||
const Timeline = {
|
||||
props: [
|
||||
'timeline',
|
||||
'timelineName'
|
||||
'timelineName',
|
||||
'title'
|
||||
],
|
||||
components: {
|
||||
Status,
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import merge from 'lodash.merge'
|
||||
import objectPath from 'object-path'
|
||||
import { throttle } from 'lodash'
|
||||
import lzstring from 'lz-string'
|
||||
import localforage from 'localforage'
|
||||
import { throttle, each } from 'lodash'
|
||||
|
||||
const defaultReducer = (state, paths) => (
|
||||
paths.length === 0 ? state : paths.reduce((substate, path) => {
|
||||
|
|
@ -11,32 +11,11 @@ const defaultReducer = (state, paths) => (
|
|||
)
|
||||
|
||||
const defaultStorage = (() => {
|
||||
const hasLocalStorage = typeof window !== 'undefined' && window.localStorage
|
||||
if (hasLocalStorage) {
|
||||
return window.localStorage
|
||||
}
|
||||
|
||||
class InternalStorage {
|
||||
setItem (key, item) {
|
||||
this[key] = item
|
||||
return item
|
||||
}
|
||||
getItem (key) {
|
||||
return this[key]
|
||||
}
|
||||
removeItem (key) {
|
||||
delete this[key]
|
||||
}
|
||||
clear () {
|
||||
Object.keys(this).forEach(key => delete this[key])
|
||||
}
|
||||
}
|
||||
|
||||
return new InternalStorage()
|
||||
return localforage
|
||||
})()
|
||||
|
||||
const defaultSetState = (key, state, storage) => {
|
||||
return storage.setItem(key, lzstring.compressToUTF16(JSON.stringify(state)))
|
||||
return storage.setItem(key, state)
|
||||
}
|
||||
|
||||
export default function createPersistedState ({
|
||||
|
|
@ -44,12 +23,7 @@ export default function createPersistedState ({
|
|||
paths = [],
|
||||
getState = (key, storage) => {
|
||||
let value = storage.getItem(key)
|
||||
try {
|
||||
value = lzstring.decompressFromUTF16(value) // inflate(value, { to: 'string' })
|
||||
} catch (e) {
|
||||
console.log("Couldn't inflate value... Maybe upgrading")
|
||||
}
|
||||
return value && value !== 'undefined' ? JSON.parse(value) : undefined
|
||||
return value
|
||||
},
|
||||
setState = throttle(defaultSetState, 60000),
|
||||
reducer = defaultReducer,
|
||||
|
|
@ -57,12 +31,20 @@ export default function createPersistedState ({
|
|||
subscriber = store => handler => store.subscribe(handler)
|
||||
} = {}) {
|
||||
return store => {
|
||||
const savedState = getState(key, storage)
|
||||
if (typeof savedState === 'object') {
|
||||
store.replaceState(
|
||||
merge({}, store.state, savedState)
|
||||
)
|
||||
}
|
||||
getState(key, storage).then((savedState) => {
|
||||
if (typeof savedState === 'object') {
|
||||
// build user cache
|
||||
const usersState = savedState.users || {}
|
||||
usersState.usersObject = {}
|
||||
const users = usersState.users || []
|
||||
each(users, (user) => { usersState.usersObject[user.id] = user })
|
||||
savedState.users = usersState
|
||||
|
||||
store.replaceState(
|
||||
merge({}, store.state, savedState)
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
subscriber(store)((mutation, state) => {
|
||||
try {
|
||||
|
|
|
|||
|
|
@ -53,7 +53,7 @@ const routes = [
|
|||
{ path: '/main/all', component: PublicAndExternalTimeline },
|
||||
{ path: '/main/public', component: PublicTimeline },
|
||||
{ path: '/main/friends', component: FriendsTimeline },
|
||||
{ name: 'conversation', path: '/notice/:id', component: ConversationPage },
|
||||
{ name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
|
||||
{ name: 'user-profile', path: '/users/:id', component: UserProfile },
|
||||
{ name: 'mentions', path: '/:username/mentions', component: Mentions },
|
||||
{ name: 'settings', path: '/settings', component: Settings }
|
||||
|
|
@ -62,6 +62,9 @@ const routes = [
|
|||
const router = new VueRouter({
|
||||
routes,
|
||||
scrollBehavior: (to, from, savedPosition) => {
|
||||
if (to.matched.some(m => m.meta.dontScroll)) {
|
||||
return false
|
||||
}
|
||||
return savedPosition || { x: 0, y: 0 }
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -4,45 +4,58 @@ import apiService from '../services/api/api.service.js'
|
|||
|
||||
export const defaultState = {
|
||||
allStatuses: [],
|
||||
allStatusesObject: {},
|
||||
maxId: 0,
|
||||
notifications: [],
|
||||
favorites: new Set(),
|
||||
timelines: {
|
||||
mentions: {
|
||||
statuses: [],
|
||||
statusesObject: {},
|
||||
faves: [],
|
||||
visibleStatuses: [],
|
||||
visibleStatusesObject: {},
|
||||
newStatusCount: 0,
|
||||
maxId: 0,
|
||||
minVisibleId: 0,
|
||||
loading: false
|
||||
loading: false,
|
||||
error: false
|
||||
},
|
||||
public: {
|
||||
statuses: [],
|
||||
statusesObject: {},
|
||||
faves: [],
|
||||
visibleStatuses: [],
|
||||
visibleStatusesObject: {},
|
||||
newStatusCount: 0,
|
||||
maxId: 0,
|
||||
minVisibleId: 0,
|
||||
loading: false
|
||||
loading: false,
|
||||
error: false
|
||||
},
|
||||
publicAndExternal: {
|
||||
statuses: [],
|
||||
statusesObject: {},
|
||||
faves: [],
|
||||
visibleStatuses: [],
|
||||
visibleStatusesObject: {},
|
||||
newStatusCount: 0,
|
||||
maxId: 0,
|
||||
minVisibleId: 0,
|
||||
loading: false
|
||||
loading: false,
|
||||
error: false
|
||||
},
|
||||
friends: {
|
||||
statuses: [],
|
||||
statusesObject: {},
|
||||
faves: [],
|
||||
visibleStatuses: [],
|
||||
visibleStatusesObject: {},
|
||||
newStatusCount: 0,
|
||||
maxId: 0,
|
||||
minVisibleId: 0,
|
||||
loading: false
|
||||
loading: false,
|
||||
error: false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -87,8 +100,9 @@ export const findMaxId = (...args) => {
|
|||
return (maxBy(flatten(args), 'id') || {}).id
|
||||
}
|
||||
|
||||
const mergeOrAdd = (arr, item) => {
|
||||
const oldItem = find(arr, {id: item.id})
|
||||
const mergeOrAdd = (arr, obj, item) => {
|
||||
const oldItem = obj[item.id]
|
||||
|
||||
if (oldItem) {
|
||||
// We already have this, so only merge the new info.
|
||||
merge(oldItem, item)
|
||||
|
|
@ -99,6 +113,7 @@ const mergeOrAdd = (arr, item) => {
|
|||
// This is a new item, prepare it
|
||||
prepareStatus(item)
|
||||
arr.push(item)
|
||||
obj[item.id] = item
|
||||
return {item, new: true}
|
||||
}
|
||||
}
|
||||
|
|
@ -118,6 +133,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
|
|||
}
|
||||
|
||||
const allStatuses = state.allStatuses
|
||||
const allStatusesObject = state.allStatusesObject
|
||||
const timelineObject = state.timelines[timeline]
|
||||
|
||||
// Set the maxId to the new id if it's larger.
|
||||
|
|
@ -127,7 +143,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
|
|||
}
|
||||
|
||||
const addStatus = (status, showImmediately, addToTimeline = true) => {
|
||||
const result = mergeOrAdd(allStatuses, status)
|
||||
const result = mergeOrAdd(allStatuses, allStatusesObject, status)
|
||||
status = result.item
|
||||
|
||||
if (result.new) {
|
||||
|
|
@ -143,7 +159,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
|
|||
|
||||
// Add the mention to the mentions timeline
|
||||
if (timelineObject !== mentions) {
|
||||
mergeOrAdd(mentions.statuses, status)
|
||||
mergeOrAdd(mentions.statuses, mentions.statusesObject, status)
|
||||
mentions.newStatusCount += 1
|
||||
|
||||
sortTimeline(mentions)
|
||||
|
|
@ -157,13 +173,13 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us
|
|||
let resultForCurrentTimeline
|
||||
// Some statuses should only be added to the global status repository.
|
||||
if (timeline && addToTimeline) {
|
||||
resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, status)
|
||||
resultForCurrentTimeline = mergeOrAdd(timelineObject.statuses, timelineObject.statusesObject, status)
|
||||
}
|
||||
|
||||
if (timeline && showImmediately) {
|
||||
// Add it directly to the visibleStatuses, don't change
|
||||
// newStatusCount
|
||||
mergeOrAdd(timelineObject.visibleStatuses, status)
|
||||
mergeOrAdd(timelineObject.visibleStatuses, timelineObject.visibleStatusesObject, status)
|
||||
} else if (timeline && addToTimeline && resultForCurrentTimeline.new) {
|
||||
// Just change newStatuscount
|
||||
timelineObject.newStatusCount += 1
|
||||
|
|
@ -260,26 +276,31 @@ export const mutations = {
|
|||
|
||||
oldTimeline.newStatusCount = 0
|
||||
oldTimeline.visibleStatuses = slice(oldTimeline.statuses, 0, 50)
|
||||
oldTimeline.visibleStatusesObject = {}
|
||||
each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status })
|
||||
},
|
||||
setFavorited (state, { status, value }) {
|
||||
const newStatus = find(state.allStatuses, status)
|
||||
const newStatus = state.allStatusesObject[status.id]
|
||||
newStatus.favorited = value
|
||||
},
|
||||
setRetweeted (state, { status, value }) {
|
||||
const newStatus = find(state.allStatuses, status)
|
||||
const newStatus = state.allStatusesObject[status.id]
|
||||
newStatus.repeated = value
|
||||
},
|
||||
setDeleted (state, { status }) {
|
||||
const newStatus = find(state.allStatuses, status)
|
||||
const newStatus = state.allStatusesObject[status.id]
|
||||
newStatus.deleted = true
|
||||
},
|
||||
setLoading (state, { timeline, value }) {
|
||||
state.timelines[timeline].loading = value
|
||||
},
|
||||
setNsfw (state, { id, nsfw }) {
|
||||
const newStatus = find(state.allStatuses, { id })
|
||||
const newStatus = state.allStatusesObject[id]
|
||||
newStatus.nsfw = nsfw
|
||||
},
|
||||
setError (state, { timeline, value }) {
|
||||
state.timelines[timeline].error = value
|
||||
},
|
||||
markNotificationsAsSeen (state, notifications) {
|
||||
each(notifications, (notification) => {
|
||||
notification.seen = true
|
||||
|
|
@ -293,6 +314,9 @@ const statuses = {
|
|||
addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false }) {
|
||||
commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser })
|
||||
},
|
||||
setError ({ rootState, commit }, { timeline, value }) {
|
||||
commit('setError', { timeline, value })
|
||||
},
|
||||
deleteStatus ({ rootState, commit }, status) {
|
||||
commit('setDeleted', { status })
|
||||
apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
||||
import { compact, map, each, find, merge } from 'lodash'
|
||||
import { compact, map, each, merge } from 'lodash'
|
||||
import { set } from 'vue'
|
||||
|
||||
// TODO: Unify with mergeOrAdd in statuses.js
|
||||
export const mergeOrAdd = (arr, item) => {
|
||||
export const mergeOrAdd = (arr, obj, item) => {
|
||||
if (!item) { return false }
|
||||
const oldItem = find(arr, {id: item.id})
|
||||
const oldItem = obj[item.id]
|
||||
if (oldItem) {
|
||||
// We already have this, so only merge the new info.
|
||||
merge(oldItem, item)
|
||||
|
|
@ -13,13 +13,14 @@ export const mergeOrAdd = (arr, item) => {
|
|||
} else {
|
||||
// This is a new item, prepare it
|
||||
arr.push(item)
|
||||
obj[item.id] = item
|
||||
return {item, new: true}
|
||||
}
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
setMuted (state, { user: {id}, muted }) {
|
||||
const user = find(state.users, {id})
|
||||
const user = state.usersObject[id]
|
||||
set(user, 'muted', muted)
|
||||
},
|
||||
setCurrentUser (state, user) {
|
||||
|
|
@ -32,17 +33,18 @@ export const mutations = {
|
|||
state.loggingIn = false
|
||||
},
|
||||
addNewUsers (state, users) {
|
||||
each(users, (user) => mergeOrAdd(state.users, user))
|
||||
each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
|
||||
},
|
||||
setUserForStatus (state, status) {
|
||||
status.user = find(state.users, status.user)
|
||||
status.user = state.usersObject[status.user.id]
|
||||
}
|
||||
}
|
||||
|
||||
export const defaultState = {
|
||||
currentUser: false,
|
||||
loggingIn: false,
|
||||
users: []
|
||||
users: [],
|
||||
usersObject: {}
|
||||
}
|
||||
|
||||
const users = {
|
||||
|
|
@ -65,40 +67,52 @@ const users = {
|
|||
})
|
||||
},
|
||||
loginUser (store, userCredentials) {
|
||||
const commit = store.commit
|
||||
commit('beginLogin')
|
||||
store.rootState.api.backendInteractor.verifyCredentials(userCredentials)
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
response.json()
|
||||
.then((user) => {
|
||||
user.credentials = userCredentials
|
||||
commit('setCurrentUser', user)
|
||||
commit('addNewUsers', [user])
|
||||
return new Promise((resolve, reject) => {
|
||||
const commit = store.commit
|
||||
commit('beginLogin')
|
||||
store.rootState.api.backendInteractor.verifyCredentials(userCredentials)
|
||||
.then((response) => {
|
||||
if (response.ok) {
|
||||
response.json()
|
||||
.then((user) => {
|
||||
user.credentials = userCredentials
|
||||
commit('setCurrentUser', user)
|
||||
commit('addNewUsers', [user])
|
||||
|
||||
// Set our new backend interactor
|
||||
commit('setBackendInteractor', backendInteractorService(userCredentials))
|
||||
// Set our new backend interactor
|
||||
commit('setBackendInteractor', backendInteractorService(userCredentials))
|
||||
|
||||
// Start getting fresh tweets.
|
||||
store.dispatch('startFetching', 'friends')
|
||||
// Start getting fresh tweets.
|
||||
store.dispatch('startFetching', 'friends')
|
||||
|
||||
// Get user mutes and follower info
|
||||
store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => {
|
||||
each(mutedUsers, (user) => { user.muted = true })
|
||||
store.commit('addNewUsers', mutedUsers)
|
||||
// Get user mutes and follower info
|
||||
store.rootState.api.backendInteractor.fetchMutes().then((mutedUsers) => {
|
||||
each(mutedUsers, (user) => { user.muted = true })
|
||||
store.commit('addNewUsers', mutedUsers)
|
||||
})
|
||||
|
||||
// Fetch our friends
|
||||
store.rootState.api.backendInteractor.fetchFriends()
|
||||
.then((friends) => commit('addNewUsers', friends))
|
||||
})
|
||||
|
||||
// Fetch our friends
|
||||
store.rootState.api.backendInteractor.fetchFriends()
|
||||
.then((friends) => commit('addNewUsers', friends))
|
||||
})
|
||||
}
|
||||
commit('endLogin')
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
commit('endLogin')
|
||||
})
|
||||
} else {
|
||||
// Authentication failed
|
||||
commit('endLogin')
|
||||
if (response.status === 401) {
|
||||
reject('Wrong username or password')
|
||||
} else {
|
||||
reject('An error occurred, please try again')
|
||||
}
|
||||
}
|
||||
commit('endLogin')
|
||||
resolve()
|
||||
})
|
||||
.catch((error) => {
|
||||
console.log(error)
|
||||
commit('endLogin')
|
||||
reject('Failed to connect to server, try again')
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,6 +5,8 @@ import apiService from '../api/api.service.js'
|
|||
const update = ({store, statuses, timeline, showImmediately}) => {
|
||||
const ccTimeline = camelCase(timeline)
|
||||
|
||||
setError({store, timeline, value: false})
|
||||
|
||||
store.dispatch('addNewStatuses', {
|
||||
timeline: ccTimeline,
|
||||
statuses,
|
||||
|
|
@ -12,6 +14,15 @@ const update = ({store, statuses, timeline, showImmediately}) => {
|
|||
})
|
||||
}
|
||||
|
||||
const setError = ({store, timeline, value}) => {
|
||||
const ccTimeline = camelCase(timeline)
|
||||
|
||||
store.dispatch('setError', {
|
||||
timeline: ccTimeline,
|
||||
value
|
||||
})
|
||||
}
|
||||
|
||||
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
|
||||
const args = { timeline, credentials }
|
||||
const rootState = store.rootState || store.state
|
||||
|
|
@ -24,7 +35,8 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
|
|||
}
|
||||
|
||||
return apiService.fetchTimeline(args)
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}))
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}),
|
||||
() => setError({store, timeline, value: true}))
|
||||
}
|
||||
|
||||
const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue