mirror of
https://git.pleroma.social/sjw/pleroma-fe.git
synced 2024-12-25 06:05:25 +01:00
Merged with changes in develop & fixed conflicts.
This commit is contained in:
commit
d99b9bdac1
@ -28,10 +28,17 @@ before_script:
|
||||
# - node_modules/
|
||||
|
||||
stages:
|
||||
- lint
|
||||
- build
|
||||
- test
|
||||
- deploy
|
||||
|
||||
lint:
|
||||
stage: lint
|
||||
script:
|
||||
- yarn
|
||||
- npm run lint
|
||||
|
||||
test:
|
||||
stage: test
|
||||
script:
|
||||
|
@ -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,10 +38,15 @@ const Attachment = {
|
||||
}
|
||||
},
|
||||
toggleHidden () {
|
||||
let img = document.createElement('img')
|
||||
img.src = this.attachment.url
|
||||
img.onload = () => {
|
||||
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;
|
||||
|
@ -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,13 +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)
|
||||
this.$store.dispatch('loginUser', this.user).then(
|
||||
() => {},
|
||||
(error) => {
|
||||
this.authError = error
|
||||
this.user.username = ''
|
||||
this.user.password = ''
|
||||
}
|
||||
)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -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,24 +1,24 @@
|
||||
<template>
|
||||
<div class="nav-panel">
|
||||
<div class="panel panel-default base01-background">
|
||||
<div class="panel panel-default base02-background">
|
||||
<ul class="base03-border">
|
||||
<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;
|
||||
@ -40,7 +39,15 @@
|
||||
.nav-panel li {
|
||||
border-bottom: 1px solid;
|
||||
border-color: inherit;
|
||||
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 {
|
||||
@ -49,10 +56,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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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>
|
||||
|
@ -67,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,
|
||||
@ -33,9 +35,8 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
|
||||
}
|
||||
|
||||
return apiService.fetchTimeline(args)
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}))
|
||||
.then(() => setError({store, timeline, value: false}))
|
||||
.catch(() => setError({store, timeline, value: true}))
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}),
|
||||
() => setError({store, timeline, value: true}))
|
||||
}
|
||||
|
||||
const startFetching = ({ timeline = 'friends', credentials, store }) => {
|
||||
|
Loading…
Reference in New Issue
Block a user