Merge branch 'feature/who-to-follow-panel-configurable' into 'develop'

Who to follow panel (configurable)

See merge request pleroma/pleroma-fe!254
This commit is contained in:
lambda 2018-05-09 14:12:59 +00:00
commit 622e8cd94f
6 changed files with 175 additions and 3 deletions

View file

@ -2,6 +2,7 @@ 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' import UserFinder from './components/user_finder/user_finder.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
import ChatPanel from './components/chat_panel/chat_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue'
@ -12,8 +13,9 @@ export default {
NavPanel, NavPanel,
Notifications, Notifications,
UserFinder, UserFinder,
ChatPanel, WhoToFollowPanel,
InstanceSpecificPanel InstanceSpecificPanel,
ChatPanel
}, },
data: () => ({ data: () => ({
mobileActivePanel: 'timeline' mobileActivePanel: 'timeline'
@ -27,6 +29,7 @@ export default {
style () { return { 'background-image': `url(${this.background})` } }, style () { return { 'background-image': `url(${this.background})` } },
sitename () { return this.$store.state.config.name }, sitename () { return this.$store.state.config.name },
chat () { return this.$store.state.chat.channel.state === 'joined' }, chat () { return this.$store.state.chat.channel.state === 'joined' },
showWhoToFollowPanel () { return this.$store.state.config.showWhoToFollowPanel },
showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel } showInstanceSpecificPanel () { return this.$store.state.config.showInstanceSpecificPanel }
}, },
methods: { methods: {

View file

@ -24,6 +24,7 @@
<user-panel></user-panel> <user-panel></user-panel>
<nav-panel></nav-panel> <nav-panel></nav-panel>
<instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel> <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
<who-to-follow-panel v-if="currentUser && showWhoToFollowPanel"></who-to-follow-panel>
<notifications v-if="currentUser"></notifications> <notifications v-if="currentUser"></notifications>
</div> </div>
</div> </div>

View file

@ -0,0 +1,123 @@
function showWhoToFollow (panel, reply, aHost, aUser) {
var users = reply.ids
var cn
var index = 0
var random = Math.floor(Math.random() * 10)
for (cn = random; cn < users.length; cn = cn + 10) {
var user
user = users[cn]
var img
if (user.icon) {
img = user.icon
} else {
img = '/images/avi.png'
}
var name = user.to_id
if (index === 0) {
panel.img1 = img
panel.name1 = name
panel.$store.state.api.backendInteractor.externalProfile(name)
.then((externalUser) => {
if (!externalUser.error) {
panel.$store.commit('addNewUsers', [externalUser])
panel.id1 = externalUser.id
}
})
} else if (index === 1) {
panel.img2 = img
panel.name2 = name
panel.$store.state.api.backendInteractor.externalProfile(name)
.then((externalUser) => {
if (!externalUser.error) {
panel.$store.commit('addNewUsers', [externalUser])
panel.id2 = externalUser.id
}
})
} else if (index === 2) {
panel.img3 = img
panel.name3 = name
panel.$store.state.api.backendInteractor.externalProfile(name)
.then((externalUser) => {
if (!externalUser.error) {
panel.$store.commit('addNewUsers', [externalUser])
panel.id3 = externalUser.id
}
})
}
index = index + 1
if (index > 2) {
break
}
}
}
function getWhoToFollow (panel) {
var user = panel.$store.state.users.currentUser.screen_name
if (user) {
panel.name1 = 'Loading...'
panel.name2 = 'Loading...'
panel.name3 = 'Loading...'
var host = window.location.hostname
var whoToFollowProvider = panel.$store.state.config.whoToFollowProvider
var url
url = whoToFollowProvider.replace(/{{host}}/g, encodeURIComponent(host))
url = url.replace(/{{user}}/g, encodeURIComponent(user))
window.fetch(url, {mode: 'cors'}).then(function (response) {
if (response.ok) {
return response.json()
} else {
panel.name1 = ''
panel.name2 = ''
panel.name3 = ''
}
}).then(function (reply) {
showWhoToFollow(panel, reply, host, user)
})
}
}
const WhoToFollowPanel = {
data: () => ({
img1: '/images/avi.png',
name1: '',
id1: 0,
img2: '/images/avi.png',
name2: '',
id2: 0,
img3: '/images/avi.png',
name3: '',
id3: 0
}),
computed: {
user: function () {
return this.$store.state.users.currentUser.screen_name
},
moreUrl: function () {
var host = window.location.hostname
var user = this.user
var whoToFollowLink = this.$store.state.config.whoToFollowLink
var url
url = whoToFollowLink.replace(/{{host}}/g, encodeURIComponent(host))
url = url.replace(/{{user}}/g, encodeURIComponent(user))
return url
},
showWhoToFollowPanel () {
return this.$store.state.config.showWhoToFollowPanel
}
},
watch: {
user: function (user, oldUser) {
if (this.showWhoToFollowPanel) {
getWhoToFollow(this)
}
}
},
mounted:
function () {
if (this.showWhoToFollowPanel) {
getWhoToFollow(this)
}
}
}
export default WhoToFollowPanel

View file

@ -0,0 +1,37 @@
<template>
<div class="who-to-follow-panel">
<div class="panel panel-default base01-background">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
Who to follow
</div>
</div>
<div class="panel-body who-to-follow">
<p>
<img v-bind:src="img1"/> <router-link :to="{ name: 'user-profile', params: { id: id1 } }">{{ name1 }}</router-link><br>
<img v-bind:src="img2"/> <router-link :to="{ name: 'user-profile', params: { id: id2 } }">{{ name2 }}</router-link><br>
<img v-bind:src="img3"/> <router-link :to="{ name: 'user-profile', params: { id: id3 } }">{{ name3 }}</router-link><br>
<img v-bind:src="$store.state.config.logo"> <a v-bind:href="moreUrl" target="_blank">More</a>
</p>
</div>
</div>
</div>
</template>
<script src="./who_to_follow_panel.js" ></script>
<style lang="scss">
.who-to-follow * {
vertical-align: middle;
}
.who-to-follow img {
width: 32px;
height: 32px;
}
.who-to-follow p {
line-height: 40px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>

View file

@ -88,10 +88,13 @@ window.fetch('/api/statusnet/config.json')
window.fetch('/static/config.json') window.fetch('/static/config.json')
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
const {theme, background, logo, showInstanceSpecificPanel} = data const {theme, background, logo, showWhoToFollowPanel, whoToFollowProvider, whoToFollowLink, showInstanceSpecificPanel} = data
store.dispatch('setOption', { name: 'theme', value: theme }) store.dispatch('setOption', { name: 'theme', value: theme })
store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'background', value: background })
store.dispatch('setOption', { name: 'logo', value: logo }) store.dispatch('setOption', { name: 'logo', value: logo })
store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider })
store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel }) store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
if (data['chatDisabled']) { if (data['chatDisabled']) {
store.dispatch('disableChat') store.dispatch('disableChat')

View file

@ -5,5 +5,10 @@
"redirectRootNoLogin": "/main/all", "redirectRootNoLogin": "/main/all",
"redirectRootLogin": "/main/friends", "redirectRootLogin": "/main/friends",
"chatDisabled": false, "chatDisabled": false,
"showWhoToFollowPanel": false,
"whoToFollowProvider": "https://vinayaka.distsn.org/cgi-bin/vinayaka-user-match-osa-api.cgi?{{host}}+{{user}}",
"whoToFollowProviderDummy2": "https://followlink.osa-p.net/api/get_recommend.json?acct=@{{user}}@{{host}}",
"whoToFollowLink": "https://vinayaka.distsn.org/?{{host}}+{{user}}",
"whoToFollowLinkDummy2": "https://followlink.osa-p.net/recommend.html",
"showInstanceSpecificPanel": false "showInstanceSpecificPanel": false
} }