forked from AkkomaGang/akkoma-fe
Merge branch 'develop' of ssh.gitgud.io:lambadalambda/pleroma-fe into feature/notification-improvements
This commit is contained in:
commit
1b79ae09e0
7 changed files with 68 additions and 5 deletions
|
@ -1,13 +1,15 @@
|
||||||
import UserPanel from './components/user_panel/user_panel.vue'
|
import UserPanel from './components/user_panel/user_panel.vue'
|
||||||
import NavPanel from './components/nav_panel/nav_panel.vue'
|
import NavPanel from './components/nav_panel/nav_panel.vue'
|
||||||
import Notifications from './components/notifications/notifications.vue'
|
import Notifications from './components/notifications/notifications.vue'
|
||||||
|
import UserFinder from './components/user_finder/user_finder.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'app',
|
name: 'app',
|
||||||
components: {
|
components: {
|
||||||
UserPanel,
|
UserPanel,
|
||||||
NavPanel,
|
NavPanel,
|
||||||
Notifications
|
Notifications,
|
||||||
|
UserFinder
|
||||||
},
|
},
|
||||||
data: () => ({
|
data: () => ({
|
||||||
mobileActivePanel: 'timeline'
|
mobileActivePanel: 'timeline'
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
<div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
|
<div class="sidebar" :class="{ 'mobile-hidden': mobileActivePanel != 'sidebar' }">
|
||||||
<div class="sidebar-container">
|
<div class="sidebar-container">
|
||||||
<user-panel></user-panel>
|
<user-panel></user-panel>
|
||||||
|
<user-finder></user-finder>
|
||||||
<nav-panel></nav-panel>
|
<nav-panel></nav-panel>
|
||||||
<notifications v-if="currentUser"></notifications>
|
<notifications v-if="currentUser"></notifications>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -34,7 +34,8 @@
|
||||||
<div class="media status container">
|
<div class="media status container">
|
||||||
<div class="media-left">
|
<div class="media-left">
|
||||||
<a :href="status.user.statusnet_profile_url">
|
<a :href="status.user.statusnet_profile_url">
|
||||||
<img @click.prevent="toggleUserExpanded" class='avatar' :src="status.user.profile_image_url_original">
|
<img @click.prevent="toggleUserExpanded" :class="{retweeted: retweet}" class='avatar' :src="status.user.profile_image_url_original">
|
||||||
|
<img v-if="retweet" class='avatar-retweeter' :src="statusoid.user.profile_image_url_original"></img>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
<div class="media-body">
|
<div class="media-body">
|
||||||
|
@ -163,6 +164,22 @@
|
||||||
|
|
||||||
.status .avatar {
|
.status .avatar {
|
||||||
width: 48px;
|
width: 48px;
|
||||||
|
height: 48px;
|
||||||
|
|
||||||
|
&.retweeted {
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
margin-right: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.status img.avatar-retweeter {
|
||||||
|
width: 24px;
|
||||||
|
height: 24px;
|
||||||
|
position: absolute;
|
||||||
|
margin-left: 24px;
|
||||||
|
margin-top: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.status.compact .avatar {
|
.status.compact .avatar {
|
||||||
|
|
18
src/components/user_finder/user_finder.js
Normal file
18
src/components/user_finder/user_finder.js
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
const UserFinder = {
|
||||||
|
data: () => ({
|
||||||
|
username: undefined
|
||||||
|
}),
|
||||||
|
methods: {
|
||||||
|
findUser (username) {
|
||||||
|
this.$store.state.api.backendInteractor.externalProfile(username)
|
||||||
|
.then((user) => {
|
||||||
|
if (!user.error) {
|
||||||
|
this.$store.commit('addNewUsers', [user])
|
||||||
|
this.$router.push({name: 'user-profile', params: {id: user.id}})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default UserFinder
|
13
src/components/user_finder/user_finder.vue
Normal file
13
src/components/user_finder/user_finder.vue
Normal file
|
@ -0,0 +1,13 @@
|
||||||
|
<template>
|
||||||
|
<div class="user-finder-panel panel panel-default base00-background">
|
||||||
|
<input @keyup.enter="findUser(username)" v-model="username" placeholder="Find user" id="user-finder-input" type="text" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script src="./user_finder.js"></script>
|
||||||
|
|
||||||
|
<style lang="scss">
|
||||||
|
.user-finder-panel {
|
||||||
|
padding: 10px;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -17,6 +17,7 @@ const FRIENDS_URL = '/api/statuses/friends.json'
|
||||||
const FOLLOWING_URL = '/api/friendships/create.json'
|
const FOLLOWING_URL = '/api/friendships/create.json'
|
||||||
const UNFOLLOWING_URL = '/api/friendships/destroy.json'
|
const UNFOLLOWING_URL = '/api/friendships/destroy.json'
|
||||||
const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
|
const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json'
|
||||||
|
const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json'
|
||||||
// const USER_URL = '/api/users/show.json'
|
// const USER_URL = '/api/users/show.json'
|
||||||
|
|
||||||
const oldfetch = window.fetch
|
const oldfetch = window.fetch
|
||||||
|
@ -35,6 +36,13 @@ const authHeaders = (user) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const externalProfile = (profileUrl) => {
|
||||||
|
let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}`
|
||||||
|
return fetch(url, {
|
||||||
|
method: 'GET'
|
||||||
|
}).then((data) => data.json())
|
||||||
|
}
|
||||||
|
|
||||||
const followUser = ({id, credentials}) => {
|
const followUser = ({id, credentials}) => {
|
||||||
let url = `${FOLLOWING_URL}?user_id=${id}`
|
let url = `${FOLLOWING_URL}?user_id=${id}`
|
||||||
return fetch(url, {
|
return fetch(url, {
|
||||||
|
@ -198,7 +206,8 @@ const apiService = {
|
||||||
uploadMedia,
|
uploadMedia,
|
||||||
fetchAllFollowing,
|
fetchAllFollowing,
|
||||||
setUserMute,
|
setUserMute,
|
||||||
fetchMutes
|
fetchMutes,
|
||||||
|
externalProfile
|
||||||
}
|
}
|
||||||
|
|
||||||
export default apiService
|
export default apiService
|
||||||
|
|
|
@ -36,6 +36,8 @@ const backendInteractorService = (credentials) => {
|
||||||
|
|
||||||
const fetchMutes = () => apiService.fetchMutes({credentials})
|
const fetchMutes = () => apiService.fetchMutes({credentials})
|
||||||
|
|
||||||
|
const externalProfile = (profileUrl) => apiService.externalProfile(profileUrl)
|
||||||
|
|
||||||
const backendInteractorServiceInstance = {
|
const backendInteractorServiceInstance = {
|
||||||
fetchStatus,
|
fetchStatus,
|
||||||
fetchConversation,
|
fetchConversation,
|
||||||
|
@ -46,7 +48,8 @@ const backendInteractorService = (credentials) => {
|
||||||
verifyCredentials: apiService.verifyCredentials,
|
verifyCredentials: apiService.verifyCredentials,
|
||||||
startFetching,
|
startFetching,
|
||||||
setUserMute,
|
setUserMute,
|
||||||
fetchMutes
|
fetchMutes,
|
||||||
|
externalProfile
|
||||||
}
|
}
|
||||||
|
|
||||||
return backendInteractorServiceInstance
|
return backendInteractorServiceInstance
|
||||||
|
|
Loading…
Reference in a new issue