hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge remote-tracking branch 'upstream/develop' into shigusegubu

Browse source 
* upstream/develop: (38 commits)
  Feature/bigger icons for mobile / #211
  Fix oauth url
  clean up the unused stuff
  Make user profile page cleaner
  missing string and unification with counters (order)
  collateral fix for tab display
  collateral fixes for user-card: use still-image, styles for custom emoji
  Refactor follower/friends out of statuses/timeline into user_profile where it belongs. Changed display of profile to single panel with tabs.
  Redirect to /main/all
  Move userProfile link to methods
  Fix user profile test
  Add temporary redirects
  Add local profile test
  Fix style
  Add a way to get new captcha on click
  Fix style
  Separate captcha into the backendInteractor
  more visual fixes
  changed bottom-shadow hiding method to be more compatible with overflow
  small fix for overflowing tab-switcher
  ...
This commit is contained in:
Henry Jameson 2018-12-19 01:26:20 +03:00
commit 43857d7b13
50 changed files with 2047 additions and 919 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
package.json
View file

@ -36,6 +36,8 @@
"whatwg-fetch": "^2.0.3"
},
"devDependencies": {
"@babel/polyfill": "^7.0.0",
"@vue/test-utils": "^1.0.0-beta.26",
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
"babel-eslint": "^7.0.0",

58
src/App.scss
View file

@ -237,13 +237,11 @@ i[class*=icon-] {
flex-wrap: wrap;
.nav-icon {
font-size: 1.1em;
margin-left: 0.4em;
}
&.right {
justify-content: flex-end;
padding-right: 20px;
}
}
@ -251,7 +249,8 @@ i[class*=icon-] {
flex: 1
}
nav {
.nav-bar {
padding: 0;
width: 100%;
align-items: center;
position: fixed;
@ -295,10 +294,13 @@ nav {
}
.inner-nav {
margin: auto;
box-sizing: border-box;
padding-left: 10px;
padding-right: 10px;
display: flex;
align-items: center;
flex-basis: 970px;
margin: auto;
height: 50px;
a, a i {
@ -466,7 +468,7 @@ nav {
&.hidden {
opacity: 0;
max-width: 20px;
max-width: 5px;
}
}
}
@ -606,22 +608,8 @@ nav {
}
}
@media all and (max-width: 959px) {
.mobile-hidden {
display: none;
}
.panel-switcher {
display: flex;
}
.container {
padding: 0 0 0 0;
}
.panel {
margin: 0.5em 0 0.5em 0;
}
.item.right {
text-align: right;
}
.visibility-tray {
@ -650,3 +638,31 @@ nav {
border-radius: $fallback--inputRadius;
border-radius: var(--inputRadius, $fallback--inputRadius);
}
@media all and (max-width: 959px) {
.mobile-hidden {
display: none;
}
.panel-switcher {
display: flex;
}
.container {
padding: 0;
}
.panel {
margin: 0.5em 0 0.5em 0;
}
.button-icon {
font-size: 1.2em;
}
.status .status-actions {
div {
max-width: 4em;
}
}
}

8
src/App.vue
View file

@ -1,6 +1,6 @@
<template>
<div id="app" v-bind:style="style">
<nav class='container' @click="scrollToTop()" id="nav">
<nav class='nav-bar container' @click="scrollToTop()" id="nav">
<div class='logo' :style='logoBgStyle'>
<div class='mask' :style='logoMaskStyle'></div>
<img :src='logo' :style='logoStyle'>
@ -13,9 +13,9 @@
<router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link>
</div>
<div class='item right'>
<user-finder class="nav-icon" @toggled="onFinderToggled"></user-finder>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
<a href="#" v-if="currentUser" @click.prevent="logout"><i class="icon-logout nav-icon" :title="$t('login.logout')"></i></a>
<user-finder class="button-icon nav-icon" @toggled="onFinderToggled"></user-finder>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link>
<a href="#" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a>
</div>
</div>
</nav>

57
src/boot/after_store.js
View file

@ -1,21 +1,8 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from './routes'
import App from '../App.vue'
import PublicTimeline from '../components/public_timeline/public_timeline.vue'
import PublicAndExternalTimeline from '../components/public_and_external_timeline/public_and_external_timeline.vue'
import FriendsTimeline from '../components/friends_timeline/friends_timeline.vue'
import TagTimeline from '../components/tag_timeline/tag_timeline.vue'
import ConversationPage from '../components/conversation-page/conversation-page.vue'
import Mentions from '../components/mentions/mentions.vue'
import DMs from '../components/dm_timeline/dm_timeline.vue'
import UserProfile from '../components/user_profile/user_profile.vue'
import Settings from '../components/settings/settings.vue'
import Registration from '../components/registration/registration.vue'
import UserSettings from '../components/user_settings/user_settings.vue'
import FollowRequests from '../components/follow_requests/follow_requests.vue'
import OAuthCallback from '../components/oauth_callback/oauth_callback.vue'
import UserSearch from '../components/user_search/user_search.vue'
const afterStoreSetup = ({ store, i18n }) => {
window.fetch('/api/statusnet/config.json')
@ -26,12 +13,17 @@ const afterStoreSetup = ({ store, i18n }) => {
store.dispatch('setInstanceOption', { name: 'name', value: name })
store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') })
store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) })
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
store.dispatch('setInstanceOption', { name: 'server', value: server })
// TODO: default values for this stuff, added if to not make it break on
// my dev config out of the box.
if (uploadlimit) {
store.dispatch('setInstanceOption', { name: 'uploadlimit', value: parseInt(uploadlimit.uploadlimit) })
store.dispatch('setInstanceOption', { name: 'avatarlimit', value: parseInt(uploadlimit.avatarlimit) })
store.dispatch('setInstanceOption', { name: 'backgroundlimit', value: parseInt(uploadlimit.backgroundlimit) })
store.dispatch('setInstanceOption', { name: 'bannerlimit', value: parseInt(uploadlimit.bannerlimit) })
}
if (data.nsfwCensorImage) {
store.dispatch('setInstanceOption', { name: 'nsfwCensorImage', value: data.nsfwCensorImage })
}
@ -102,35 +94,10 @@ const afterStoreSetup = ({ store, i18n }) => {
store.dispatch('disableChat')
}
const routes = [
{ name: 'root',
path: '/',
redirect: to => {
return (store.state.users.currentUser
? store.state.instance.redirectRootLogin
: store.state.instance.redirectRootNoLogin) || '/main/all'
}},
{ path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline },
{ path: '/tag/:tag', component: TagTimeline },
{ 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: 'dms', path: '/:username/dms', component: DMs },
{ name: 'settings', path: '/settings', component: Settings },
{ name: 'registration', path: '/registration', component: Registration },
{ name: 'registration', path: '/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/friend-requests', component: FollowRequests },
{ name: 'user-settings', path: '/user-settings', component: UserSettings },
{ name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
{ name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
]
const router = new VueRouter({
mode: 'history',
routes,
scrollBehavior: (to, from, savedPosition) => {
routes: routes(store),
scrollBehavior: (to, _from, savedPosition) => {
if (to.matched.some(m => m.meta.dontScroll)) {
return false
}

67
src/boot/routes.js Normal file
View file

@ -0,0 +1,67 @@
import PublicTimeline from 'components/public_timeline/public_timeline.vue'
import PublicAndExternalTimeline from 'components/public_and_external_timeline/public_and_external_timeline.vue'
import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue'
import TagTimeline from 'components/tag_timeline/tag_timeline.vue'
import ConversationPage from 'components/conversation-page/conversation-page.vue'
import Mentions from 'components/mentions/mentions.vue'
import DMs from 'components/dm_timeline/dm_timeline.vue'
import UserProfile from 'components/user_profile/user_profile.vue'
import Settings from 'components/settings/settings.vue'
import Registration from 'components/registration/registration.vue'
import UserSettings from 'components/user_settings/user_settings.vue'
import FollowRequests from 'components/follow_requests/follow_requests.vue'
import OAuthCallback from 'components/oauth_callback/oauth_callback.vue'
import UserSearch from 'components/user_search/user_search.vue'
export default (store) => {
return [
{ name: 'root',
path: '/',
redirect: _to => {
return (store.state.users.currentUser
? store.state.instance.redirectRootLogin
: store.state.instance.redirectRootNoLogin) || '/~/main/all'
}
},
{ name: 'public-external-timeline', path: '/~/main/all', component: PublicAndExternalTimeline },
{ name: 'public-timeline', path: '/~/main/public', component: PublicTimeline },
{ name: 'friends', path: '/~/main/friends', component: FriendsTimeline },
// Beginning of temporary redirects
{ path: '/main/:route',
redirect: to => {
const { params } = to
const route = params.route ? params.route : 'all'
return { path: `/~/main/${route}` }
}
},
{ path: '/tag/:tag',
redirect: to => {
const { params } = to
return { path: `/~/tag/${params.tag}` }
}
},
{ path: '/notice/:id',
redirect: to => {
const { params } = to
return { path: `/~/notice/${params.id}` }
}
},
// End of temporary redirects
{ name: 'tag-timeline', path: '/~/tag/:tag', component: TagTimeline },
{ name: 'conversation', path: '/~/notice/:id', component: ConversationPage, meta: { dontScroll: true } },
{ name: 'user-profile', path: '/:name', component: UserProfile },
{ name: 'external-user-profile', path: '/~/users/:id', component: UserProfile },
{ name: 'mentions', path: '/:username/mentions', component: Mentions },
{ name: 'dms', path: '/:username/dms', component: DMs },
{ name: 'settings', path: '/~/settings', component: Settings },
{ name: 'registration', path: '/~/registration', component: Registration },
{ name: 'registration', path: '/~/registration/:token', component: Registration },
{ name: 'friend-requests', path: '/~/friend-requests', component: FollowRequests },
{ name: 'user-settings', path: '/~/user-settings', component: UserSettings },
{ name: 'oauth-callback', path: '/~/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) },
{ name: 'user-search', path: '/~/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }
]
}

5
src/components/chat_panel/chat_panel.js
View file

@ -1,3 +1,5 @@
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
const chatPanel = {
data () {
return {
@ -18,6 +20,9 @@ const chatPanel = {
},
togglePanel () {
this.collapsed = !this.collapsed
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name)
}
}
}

9
src/components/chat_panel/chat_panel.vue
View file

@ -13,8 +13,10 @@
<img :src="message.author.avatar" />
</span>
<div class="chat-content">
<router-link class="chat-name" :to="{ name: 'user-profile', params: { id: message.author.id } }">
{{message.author.username}}
<router-link
class="chat-name"
:to="userProfileLink(message.author)">
{{message.author.username}}
</router-link>
<br>
<span class="chat-text">
@ -67,9 +69,6 @@
overflow-x: hidden;
}
.chat-name {
}
.chat-message {
display: flex;
padding: 0.2em 0.5em

2
src/components/delete_button/delete_button.vue
View file

@ -1,7 +1,7 @@
<template>
<div v-if="canDelete">
<a href="#" v-on:click.prevent="deleteStatus()">
<i class='icon-cancel delete-status'></i>
<i class='button-icon icon-cancel delete-status'></i>
</a>
</div>
</template>

4
src/components/favorite_button/favorite_button.vue
View file

@ -1,10 +1,10 @@
<template>
<div v-if="loggedIn">
<i :class='classes' class='favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
<i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/>
<span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
</div>
<div v-else>
<i :class='classes' class='favorite-button' :title="$t('tool_tip.favorite')"/>
<i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/>
<span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span>
</div>
</template>

2
src/components/login_form/login_form.js
View file

@ -32,7 +32,7 @@ const LoginForm = {
.then((result) => {
this.$store.commit('setToken', result.access_token)
this.$store.dispatch('loginUser', result.access_token)
this.$router.push('/main/friends')
this.$router.push('/~/main/friends')
})
})
}

8
src/components/nav_panel/nav_panel.vue
View file

@ -3,7 +3,7 @@
<div class="panel panel-default">
<ul>
<li v-if='currentUser'>
<router-link @click.native="activatePanel('timeline')" to='/main/friends'>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'friends' }">
{{ $t("nav.timeline") }}
</router-link>
</li>
@ -18,17 +18,17 @@
</router-link>
</li>
<li v-if='currentUser && currentUser.locked'>
<router-link @click.native="activatePanel('timeline')" to='/friend-requests'>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'friend-requests' }">
{{ $t("nav.friend_requests") }}
</router-link>
</li>
<li>
<router-link @click.native="activatePanel('timeline')" to='/main/public'>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-timeline' }">
{{ $t("nav.public_tl") }}
</router-link>
</li>
<li>
<router-link @click.native="activatePanel('timeline')" to='/main/all'>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'public-external-timeline' }">
{{ $t("nav.twkn") }}
</router-link>
</li>

4
src/components/notification/notification.js
View file

@ -2,6 +2,7 @@ import Status from '../status/status.vue'
import StillImage from '../still-image/still-image.vue'
import UserCardContent from '../user_card_content/user_card_content.vue'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
const Notification = {
data () {
@ -20,6 +21,9 @@ const Notification = {
methods: {
toggleUserExpanded () {
this.userExpanded = !this.userExpanded
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name)
}
},
computed: {

4
src/components/notification/notification.vue
View file

@ -28,7 +28,9 @@
<small class="timeago"><router-link @click.native="activatePanel('timeline')" v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
</span>
<div class="follow-text" v-if="notification.type === 'follow'">
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: notification.action.user.id } }">@{{notification.action.user.screen_name}}</router-link>
<router-link @click.native="activatePanel('timeline')" :to="userProfileLink(notification.action.user)">
@{{notification.action.user.screen_name}}
</router-link>
</div>
<template v-else>
<status :activatePanel="activatePanel" v-if="notification.status" class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status>

2
src/components/oauth_callback/oauth_callback.js
View file

@ -11,7 +11,7 @@ const oac = {
}).then((result) => {
this.$store.commit('setToken', result.access_token)
this.$store.dispatch('loginUser', result.access_token)
this.$router.push('/main/friends')
this.$router.push('/~/main/friends')
})
}
}

6
src/components/post_status_form/post_status_form.vue
View file

@ -7,7 +7,7 @@
path="post_status.account_not_locked_warning"
tag="p"
class="visibility-notice">
<router-link to="/user-settings">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
<router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
</i18n>
<p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p>
<input
@ -75,11 +75,11 @@
</div>
<div class='alert error' v-if="error">
Error: {{ error }}
<i class="icon-cancel" @click="clearError"></i>
<i class="button-icon icon-cancel" @click="clearError"></i>
</div>
<div class="attachments">
<div class="media-upload-wrapper" v-for="file in newStatus.files">
<i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
<i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i>
<div class="media-upload-container attachment">
<img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img>
<video v-if="type(file) === 'video'" :src="file.image" controls></video>

16
src/components/registration/registration.js
View file

@ -11,7 +11,8 @@ const registration = {
username: '',
password: '',
confirm: ''
}
},
captcha: {}
}),
validations: {
user: {
@ -27,8 +28,10 @@ const registration = {
},
created () {
if ((!this.registrationOpen && !this.token) || this.signedIn) {
this.$router.push('/main/all')
this.$router.push('/~/main/all')
}
this.setCaptcha()
},
computed: {
token () { return this.$route.params.token },
@ -41,21 +44,26 @@ const registration = {
})
},
methods: {
...mapActions(['signUp']),
...mapActions(['signUp', 'getCaptcha']),
async submit () {
this.user.nickname = this.user.username
this.user.token = this.token
this.user.captcha_solution = this.captcha.solution
this.user.captcha_token = this.captcha.token
this.$v.$touch()
if (!this.$v.$invalid) {
try {
await this.signUp(this.user)
this.$router.push('/main/friends')
this.$router.push('/~/main/friends')
} catch (error) {
console.warn('Registration failed: ' + error)
}
}
},
setCaptcha () {
this.getCaptcha().then(cpt => { this.captcha = cpt })
}
}
}

13
src/components/registration/registration.vue
View file

@ -75,6 +75,19 @@
</ul>
</div>
<div class="form-group" id="captcha-group" v-if="captcha.type != 'none'">
<template v-if="captcha.type == 'kocaptcha'">
<img v-bind:src="captcha.url" v-on:click="setCaptcha">
<sub>Click the image to get a new captcha</sub>
<label class='form--label' for='captcha-label'>CAPTCHA</label>
<input :disabled="isPending"
v-model='captcha.solution'
class='form-control' id='captcha-answer' type='text'>
</template>
</div>
<div class='form-group' v-if='token' >
<label for='token'>{{$t('registration.token')}}</label>
<input disabled='true' v-model='token' class='form-control' id='token' type='text'>

6
src/components/retweet_button/retweet_button.vue
View file

@ -1,15 +1,15 @@
<template>
<div v-if="loggedIn">
<template v-if="visibility !== 'private' && visibility !== 'direct'">
<i :class='classes' class='retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
<i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i>
<span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
</template>
<template v-else>
<i :class='classes' class='icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
<i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i>
</template>
</div>
<div v-else-if="!loggedIn">
<i :class='classes' class='icon-retweet' :title="$t('tool_tip.repeat')"></i>
<i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i>
<span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span>
</div>
</template>

4
src/components/status/status.js
View file

@ -7,6 +7,7 @@ import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue'
import { filter, find } from 'lodash'
import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
const Status = {
name: 'Status',
@ -286,6 +287,9 @@ const Status = {
},
replyLeave () {
this.showPreview = false
},
userProfileLink (id, name) {
return generateProfileLink(id, name)
}
},
watch: {

28
src/components/status/status.vue
View file

@ -2,9 +2,13 @@
<div class="status-el" v-if="!hideReply && !deleted" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]">
<template v-if="muted && !noReplyLinks">
<div class="media status container muted">
<small><router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
<small>
<router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.user.id, status.user.screen_name)">
{{status.user.screen_name}}
</router-link>
</small>
<small class="muteWords">{{muteWordHits.join(', ')}}</small>
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="icon-eye-off"></i></a>
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a>
</div>
</template>
<template v-else>
@ -34,15 +38,17 @@
<h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4>
<h4 class="user-name" v-else>{{status.user.name}}</h4>
<span class="links">
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link>
<router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.user.id, status.user.screen_name)">
{{status.user.screen_name}}
</router-link>
<span v-if="status.in_reply_to_screen_name" class="faint reply-info">
<i class="icon-right-open"></i>
<router-link @click.native="activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: status.in_reply_to_user_id } }">
<router-link @click.native="activatePanel('timeline')" :to="userProfileLink(status.in_reply_to_user_id, status.in_reply_to_screen_name)">
{{status.in_reply_to_screen_name}}
</router-link>
</span>
<a v-if="isReply && !noReplyLinks" href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" :title="$t('tool_tip.reply')">
<i class="icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
<i class="button-icon icon-reply" @mouseenter="replyEnter(status.in_reply_to_status_id, $event)" @mouseout="replyLeave()"></i>
</a>
</span>
</div>
@ -57,18 +63,18 @@
<router-link class="timeago" @click.native="activatePanel('timeline')" :to="{ name: 'conversation', params: { id: status.id } }">
<timeago :since="status.created_at" :auto-update="60"></timeago>
</router-link>
<div class="visibility-icon" v-if="status.visibility">
<div class="button-icon visibility-icon" v-if="status.visibility">
<i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i>
</div>
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url" title="Source">
<i class="icon-link-ext-alt"></i>
<i class="button-icon icon-link-ext-alt"></i>
</a>
<template v-if="expandable">
<a href="#" @click.prevent="toggleExpanded" title="Expand">
<i class="icon-plus-squared"></i>
<i class="button-icon icon-plus-squared"></i>
</a>
</template>
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="icon-eye-off"></i></a>
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a>
</div>
</div>
@ -95,7 +101,7 @@
<div v-if="!noHeading && !noReplyLinks" class='status-actions media-body'>
<div v-if="loggedIn">
<a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')">
<i class="icon-reply" :class="{'icon-reply-active': replying}"></i>
<i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i>
</a>
</div>
<retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button>
@ -474,7 +480,7 @@
}
}
.avatar {
.avatar.still-image {
width: 48px;
height: 48px;
box-shadow: var(--avatarStatusShadow);

8
src/components/style_switcher/preview.vue
View file

@ -37,10 +37,10 @@
</i18n>
<div class="icons">
<i style="color: var(--cBlue)" class="icon-reply"/>
<i style="color: var(--cGreen)" class="icon-retweet"/>
<i style="color: var(--cOrange)" class="icon-star"/>
<i style="color: var(--cRed)" class="icon-cancel"/>
<i style="color: var(--cBlue)" class="button-icon icon-reply"/>
<i style="color: var(--cGreen)" class="button-icon icon-retweet"/>
<i style="color: var(--cOrange)" class="button-icon icon-star"/>
<i style="color: var(--cRed)" class="button-icon icon-cancel"/>
</div>
</div>
</div>

12
src/components/tab_switcher/tab_switcher.jsx
View file

@ -18,12 +18,18 @@ export default Vue.component('tab-switcher', {
const tabs = this.$slots.default
.filter(slot => slot.data)
.map((slot, index) => {
const classes = ['tab']
const classesTab = ['tab']
const classesWrapper = ['tab-wrapper']
if (index === this.active) {
classes.push('active')
classesTab.push('active')
classesWrapper.push('active')
}
return (<button onClick={this.activateTab(index)} class={ classes.join(' ') }>{slot.data.attrs.label}</button>)
return (
<div class={ classesWrapper.join(' ')}>
<button onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button>
</div>
)
});
const contents = this.$slots.default.filter(_=>_.data).map(( slot, index ) => {
const active = index === this.active

51
src/components/tab_switcher/tab_switcher.scss
View file

@ -9,57 +9,66 @@
.tabs {
display: flex;
position: relative;
justify-content: center;
width: 100%;
overflow-y: hidden;
overflow-x: auto;
padding-top: 5px;
height: 32px;
box-sizing: border-box;
&::after, &::before {
display: block;
content: '';
flex: 1 1 auto;
}
.tab, &::after, &::before {
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
.tab {
.tab-wrapper {
height: 28px;
position: relative;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 5px 1em 99px;
white-space: nowrap;
display: flex;
flex: 0 0 auto;
&:not(.active) {
z-index: 4;
.tab {
width: 100%;
min-width: 1px;
position: relative;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
padding: 6px 1em;
padding-bottom: 99px;
margin-bottom: 6px - 99px;
white-space: nowrap;
&:hover {
z-index: 6;
&:not(.active) {
z-index: 4;
&:hover {
z-index: 6;
}
}
&.active {
background: transparent;
z-index: 5;
}
}
&:not(.active) {
&::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: 26px;
bottom: 0;
z-index: 7;
border-bottom: 1px solid;
border-bottom-color: $fallback--border;
border-bottom-color: var(--border, $fallback--border);
}
}
&.active {
background: transparent;
border-bottom: none;
z-index: 5;
}
}
}
}

36
src/components/timeline/timeline.js
View file

@ -10,7 +10,8 @@ const Timeline = {
'timelineName',
'title',
'userId',
'tag'
'tag',
'embedded'
],
data () {
return {
@ -20,15 +21,6 @@ const Timeline = {
},
computed: {
timelineError () { return this.$store.state.statuses.error },
followers () {
return this.timeline.followers
},
friends () {
return this.timeline.friends
},
viewing () {
return this.timeline.viewing
},
newStatusCount () {
return this.timeline.newStatusCount
},
@ -38,6 +30,14 @@ const Timeline = {
} else {
return ` (${this.newStatusCount})`
}
},
classes () {
return {
root: ['timeline'].concat(!this.embedded ? ['panel', 'panel-default'] : []),
header: ['timeline-heading'].concat(!this.embedded ? ['panel-heading'] : []),
body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []),
footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : [])
}
}
},
components: {
@ -60,12 +60,6 @@ const Timeline = {
userId: this.userId,
tag: this.tag
})
// don't fetch followers for public, friend, twkn
if (this.timelineName === 'user') {
this.fetchFriends()
this.fetchFollowers()
}
},
mounted () {
if (typeof document.hidden !== 'undefined') {
@ -103,16 +97,6 @@ const Timeline = {
tag: this.tag
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
}, 1000, this),
fetchFollowers () {
const id = this.userId
this.$store.state.api.backendInteractor.fetchFollowers({ id })
.then((followers) => this.$store.dispatch('addFollowers', { followers }))
},
fetchFriends () {
const id = this.userId
this.$store.state.api.backendInteractor.fetchFriends({ id })
.then((friends) => this.$store.dispatch('addFriends', { friends }))
},
scrollLoad (e) {
const bodyBRect = document.body.getBoundingClientRect()
const height = Math.max(bodyBRect.height, -(bodyBRect.y))

33
src/components/timeline/timeline.vue
View file

@ -1,6 +1,6 @@
<template>
<div class="timeline panel panel-default" v-if="viewing == 'statuses'">
<div class="panel-heading timeline-heading">
<div :class="classes.root">
<div :class="classes.header">
<div class="title">
{{title}}
</div>
@ -14,43 +14,20 @@
{{$t('timeline.up_to_date')}}
</div>
</div>
<div class="panel-body">
<div :class="classes.body">
<div class="timeline">
<status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation>
</div>
</div>
<div class="panel-footer">
<div :class="classes.footer">
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div>
</a>
<div class="new-status-notification text-center panel-footer" v-else>...</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'followers'">
<div class="panel-heading timeline-heading">
<div class="title">
{{$t('user_card.followers')}}
</div>
</div>
<div class="panel-body">
<div class="timeline">
<user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
</div>
</div>
</div>
<div class="timeline panel panel-default" v-else-if="viewing == 'friends'">
<div class="panel-heading timeline-heading">
<div class="title">
{{$t('user_card.followees')}}
</div>
</div>
<div class="panel-body">
<div class="timeline">
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
</div>
</div>
</div>
</template>
<script src="./timeline.js"></script>
<style lang="scss">

8
src/components/user_card/user_card.js
View file

@ -1,4 +1,6 @@
import UserCardContent from '../user_card_content/user_card_content.vue'
import StillImage from '../still-image/still-image.vue'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
const UserCard = {
props: [
@ -12,7 +14,8 @@ const UserCard = {
}
},
components: {
UserCardContent
UserCardContent,
StillImage
},
computed: {
currentUser () { return this.$store.state.users.currentUser }
@ -28,6 +31,9 @@ const UserCard = {
denyUser () {
this.$store.state.api.backendInteractor.denyUser(this.user.id)
this.$store.dispatch('removeFollowRequest', this.user)
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name)
}
}
}

13
src/components/user_card/user_card.vue
View file

@ -1,7 +1,7 @@
<template>
<div class="card">
<a href="#">
<img @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url">
<StillImage @click.prevent="toggleUserExpanded" class="avatar" :src="user.profile_image_url"/>
</a>
<div class="usercard" v-if="userExpanded">
<user-card-content :user="user" :switcher="false"></user-card-content>
@ -19,7 +19,8 @@
{{ currentUser.id == user.id ? $t('user_card.its_you') : $t('user_card.follows_you') }}
</span>
</div>
<router-link class='user-screen-name' :to="{ name: 'user-profile', params: { id: user.id } }">
<router-link class='user-screen-name' :to="userProfileLink(user)">
@{{user.screen_name}}
</router-link>
</div>
@ -40,6 +41,14 @@
margin-top:0.0em;
text-align: left;
width: 100%;
.user-name {
img {
object-fit: contain;
height: 16px;
width: 16px;
vertical-align: middle;
}
}
}
.follows-you {

4
src/components/user_card_content/user_card_content.js
View file

@ -1,5 +1,6 @@
import StillImage from '../still-image/still-image.vue'
import { hex2rgb } from '../../services/color_convert/color_convert.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
export default {
props: [ 'user', 'switcher', 'selected', 'hideBio', 'activatePanel' ],
@ -177,6 +178,9 @@ export default {
if (target.tagName === 'A') {
window.open(target.href, '_blank')
}
},
userProfileLink (user) {
return generateProfileLink(user.id, user.screen_name)
}
}
}

40
src/components/user_card_content/user_card_content.vue
View file

@ -2,20 +2,20 @@
<div id="heading" class="profile-panel-background" :style="headingStyle">
<div class="panel-heading text-center">
<div class='user-info'>
<router-link @click.native="activatePanel && activatePanel('timeline')" to='/user-settings' style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-settings' }" style="float: right; margin-top:16px;" v-if="!isOtherUser">
<i class="button-icon icon-cog usersettings" :title="$t('tool_tip.user_settings')"></i>
</router-link>
<a :href="user.statusnet_profile_url" target="_blank" class="floater" v-if="isOtherUser">
<i class="icon-link-ext usersettings"></i>
</a>
<div class='container'>
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="{ name: 'user-profile', params: { id: user.id } }">
<router-link @click.native="activatePanel && activatePanel('timeline')" :to="userProfileLink(user)">
<StillImage class="avatar" :class='{ "better-shadow": betterShadow }' :src="user.profile_image_url_original"/>
</router-link>
<div class="name-and-screen-name">
<div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div>
<div :title="user.name" class='user-name' v-else>{{user.name}}</div>
<router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name':to="{ name: 'user-profile', params: { id: user.id } }">
<router-link @click.native="activatePanel && activatePanel('timeline')" class='user-screen-name' :to="userProfileLink(user)">
<span>@{{user.screen_name}}</span><span v-if="user.locked"><i class="icon icon-lock"></i></span>
<span v-if="!hideUserStatsLocal" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span>
</router-link>
@ -25,7 +25,7 @@
<div v-if="user.follows_you && loggedIn && isOtherUser" class="following">
{{ $t('user_card.follows_you') }}
</div>
<div class="floater" v-if="switcher || isOtherUser">
<div class="floater" v-if="isOtherUser && (loggedIn || !switcher)">
<!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to -->
<input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
<input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/>
@ -67,7 +67,7 @@
</button>
</span>
</div>
<div class='mute' v-if='isOtherUser'>
<div class='mute' v-if='isOtherUser && loggedIn'>
<span v-if='user.muted'>
<button @click="toggleMute" class="pressed">
{{ $t('user_card.muted') }}
@ -104,16 +104,16 @@
</div>
</div>
<div class="panel-body profile-panel-body" v-if="!hideBio">
<div v-if="!hideUserStatsLocal || switcher" class="user-counts" :class="{clickable: switcher}">
<div class="user-count" v-on:click.prevent="setProfileView('statuses')" :class="{selected: selected === 'statuses'}">
<div v-if="!hideUserStatsLocal || switcher" class="user-counts">
<div class="user-count" v-on:click.prevent="setProfileView('statuses')">
<h5>{{ $t('user_card.statuses') }}</h5>
<span v-if="!hideUserStatsLocal">{{user.statuses_count}} <br></span>
</div>
<div class="user-count" v-on:click.prevent="setProfileView('friends')" :class="{selected: selected === 'friends'}">
<div class="user-count" v-on:click.prevent="setProfileView('friends')">
<h5>{{ $t('user_card.followees') }}</h5>
<span v-if="!hideUserStatsLocal">{{user.friends_count}}</span>
</div>
<div class="user-count" v-on:click.prevent="setProfileView('followers')" :class="{selected: selected === 'followers'}">
<div class="user-count" v-on:click.prevent="setProfileView('followers')">
<h5>{{ $t('user_card.followers') }}</h5>
<span v-if="!hideUserStatsLocal">{{user.followers_count}}</span>
</div>
@ -304,18 +304,6 @@
justify-content: space-between;
color: $fallback--lightText;
color: var(--lightText, $fallback--lightText);
&.clickable {
.user-count {
cursor: pointer;
&:hover:not(.selected) {
transition: border-bottom 100ms;
border-bottom: 3px solid $fallback--link;
border-bottom: 3px solid var(--link, $fallback--link);
}
}
}
}
.user-count {
@ -323,14 +311,6 @@
padding: .5em 0 .5em 0;
margin: 0 .5em;
&.selected {
transition: none;
border-bottom: 5px solid $fallback--link;
border-bottom: 5px solid var(--link, $fallback--link);
border-radius: $fallback--btnRadius;
border-radius: var(--btnRadius, $fallback--btnRadius);
}
h5 {
font-size:1em;
font-weight: bolder;

5
src/components/user_finder/user_finder.vue
View file

@ -7,7 +7,7 @@
<button class="btn search-button" @click="findUser(username)">
<i class="icon-search"/>
</button>
<i class="icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
<i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/>
</template>
</div>
</template>
@ -29,7 +29,8 @@
height: 29px;
}
.user-finder-input {
max-width: 80%;
// TODO: do this properly without a rough guesstimate of 2 icons + paddings
max-width: calc(100% - 30px - 30px - 20px);
}
.search-button {

53
src/components/user_profile/user_profile.js
View file

@ -1,39 +1,82 @@
import UserCardContent from '../user_card_content/user_card_content.vue'
import UserCard from '../user_card/user_card.vue'
import Timeline from '../timeline/timeline.vue'
const UserProfile = {
created () {
debugger
this.$store.commit('clearTimeline', { timeline: 'user' })
this.$store.dispatch('startFetching', ['user', this.userId])
if (!this.$store.state.users.usersObject[this.userId]) {
this.$store.dispatch('fetchUser', this.userId)
this.$store.dispatch('startFetching', ['user', this.fetchBy])
if (!this.user) {
this.$store.dispatch('fetchUser', this.fetchBy)
}
},
destroyed () {
this.$store.dispatch('stopFetching', 'user')
},
computed: {
timeline () { return this.$store.state.statuses.timelines.user },
timeline () {
return this.$store.state.statuses.timelines.user
},
userId () {
return this.$route.params.id
},
userName () {
return this.$route.params.name
},
user () {
if (this.timeline.statuses[0]) {
return this.timeline.statuses[0].user
} else {
return this.$store.state.users.usersObject[this.userId] || false
return Object.values(this.$store.state.users.usersObject).filter(user => {
return (this.isExternal ? user.id === this.userId : user.screen_name === this.userName)
})[0] || false
}
},
fetchBy () {
return this.isExternal ? this.userId : this.userName
},
isExternal () {
return this.$route.name === 'external-user-profile'
}
},
methods: {
fetchFollowers () {
const id = this.userId
this.$store.dispatch('addFollowers', { id })
},
fetchFriends () {
const id = this.userId
this.$store.dispatch('addFriends', { id })
}
},
watch: {
userName () {
if (this.isExternal) {
return
}
this.$store.dispatch('stopFetching', 'user')
this.$store.commit('clearTimeline', { timeline: 'user' })
this.$store.dispatch('startFetching', ['user', this.userName])
},
userId () {
if (!this.isExternal) {
return
}
this.$store.dispatch('stopFetching', 'user')
this.$store.commit('clearTimeline', { timeline: 'user' })
this.$store.dispatch('startFetching', ['user', this.userId])
},
user () {
if (!this.user.followers) {
this.fetchFollowers()
this.fetchFriends()
}
}
},
components: {
UserCardContent,
UserCard,
Timeline
}
}

66
src/components/user_profile/user_profile.vue
View file

@ -1,20 +1,38 @@
<template>
<div>
<div v-if="user" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
</div>
<div v-else class="panel user-profile-placeholder">
<div class="panel-heading">
<div class="title">
{{ $t('settings.profile_tab') }}
<div>
<div v-if="user" class="user-profile panel panel-default">
<user-card-content :user="user" :switcher="true" :selected="timeline.viewing"></user-card-content>
<tab-switcher>
<Timeline :label="$t('user_card.statuses')" :embedded="true" :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
<div :label="$t('user_card.followees')">
<div v-if="friends">
<user-card v-for="friend in friends" :key="friend.id" :user="friend" :showFollows="true"></user-card>
</div>
<div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
<div class="panel-body">
<i class="icon-spin3 animate-spin"></i>
<div :label="$t('user_card.followers')">
<div v-if="followers">
<user-card v-for="follower in followers" :key="follower.id" :user="follower" :showFollows="false"></user-card>
</div>
<div class="userlist-placeholder" v-else>
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
</tab-switcher>
</div>
<div v-else class="panel user-profile-placeholder">
<div class="panel-heading">
<div class="title">
{{ $t('settings.profile_tab') }}
</div>
</div>
<Timeline :title="$t('user_profile.timeline_title')" :timeline="timeline" :timeline-name="'user'" :user-id="userId"/>
<div class="panel-body">
<i class="icon-spin3 animate-spin"></i>
</div>
</div>
</div>
</template>
<script src="./user_profile.js"></script>
@ -24,12 +42,36 @@
.user-profile {
flex: 2;
flex-basis: 500px;
padding-bottom: 10px;
.panel-heading {
background: transparent;
flex-direction: column;
align-items: stretch;
}
.userlist-placeholder {
display: flex;
justify-content: center;
align-items: middle;
padding: 2em;
}
.timeline-heading {
display: flex;
justify-content: center;
.loadmore-button, .alert {
flex: 1;
}
.loadmore-button {
height: 28px;
margin: 10px .6em;
}
.title, .loadmore-text {
display: none
}
}
}
.user-profile-placeholder {
.panel-body {

2
src/components/user_settings/user_settings.js
View file

@ -257,7 +257,7 @@ const UserSettings = {
.then((res) => {
if (res.status === 'success') {
this.$store.dispatch('logout')
this.$router.push('/main/all')
this.$router.push('/~/main/all')
} else {
this.deleteAccountError = res.error
}

6
src/components/user_settings/user_settings.vue
View file

@ -49,7 +49,7 @@
<button class="btn btn-default" v-else-if="avatarPreview" @click="submitAvatar">{{$t('general.submit')}}</button>
<div class='alert error' v-if="avatarUploadError">
Error: {{ avatarUploadError }}
<i class="icon-cancel" @click="clearUploadError('avatar')"></i>
<i class="button-icon icon-cancel" @click="clearUploadError('avatar')"></i>
</div>
</div>
<div class="setting-item">
@ -66,7 +66,7 @@
<button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button>
<div class='alert error' v-if="bannerUploadError">
Error: {{ bannerUploadError }}
<i class="icon-cancel" @click="clearUploadError('banner')"></i>
<i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i>
</div>
</div>
<div class="setting-item">
@ -81,7 +81,7 @@
<button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button>
<div class='alert error' v-if="backgroundUploadError">
Error: {{ backgroundUploadError }}
<i class="icon-cancel" @click="clearUploadError('background')"></i>
<i class="button-icon icon-cancel" @click="clearUploadError('background')"></i>
</div>
</div>
</div>

6
src/components/who_to_follow_panel/who_to_follow_panel.js
View file

@ -1,4 +1,5 @@
import apiService from '../../services/api/api.service.js'
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
function showWhoToFollow (panel, reply) {
var users = reply
@ -93,6 +94,11 @@ const WhoToFollowPanel = {
return this.$store.state.instance.suggestionsEnabled
}
},
methods: {
userProfileLink (id, name) {
return generateProfileLink(id, name)
}
},
watch: {
user: function (user, oldUser) {
if (this.suggestionsEnabled) {

6
src/components/who_to_follow_panel/who_to_follow_panel.vue
View file

@ -8,9 +8,9 @@
</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="img1"/> <router-link :to="userProfileLink(id1, name1)">{{ name1 }}</router-link><br>
<img v-bind:src="img2"/> <router-link :to="userProfileLink(id2, name2)">{{ name2 }}</router-link><br>
<img v-bind:src="img3"/> <router-link :to="userProfileLink(id3, name3)">{{ name3 }}</router-link><br>
<img v-bind:src="$store.state.instance.logo"> <a v-bind:href="moreUrl" target="_blank">{{$t('who_to_follow.more')}}</a>
</p>
</div>

4
src/modules/instance.js
View file

@ -12,8 +12,8 @@ const defaultState = {
logo: '/static/logo.png',
logoMask: true,
logoMargin: '.2em',
redirectRootNoLogin: '/main/all',
redirectRootLogin: '/main/friends',
redirectRootNoLogin: '/~/main/all',
redirectRootLogin: '/~/main/friends',
showInstanceSpecificPanel: false,
scopeOptionsEnabled: true,
formattingOptionsEnabled: false,

17
src/modules/statuses.js
View file

@ -14,7 +14,6 @@ const emptyTl = () => ({
loading: false,
followers: [],
friends: [],
viewing: 'statuses',
userId: 0,
flushMarker: 0
})
@ -399,16 +398,6 @@ export const mutations = {
setNotificationsSilence (state, { value }) {
state.notifications.desktopNotificationSilence = value
},
setProfileView (state, { v }) {
// load followers / friends only when needed
state.timelines['user'].viewing = v
},
addFriends (state, { friends }) {
state.timelines['user'].friends = friends
},
addFollowers (state, { followers }) {
state.timelines['user'].followers = followers
},
markNotificationsAsSeen (state) {
each(state.notifications.data, (notification) => {
notification.seen = true
@ -437,12 +426,6 @@ const statuses = {
setNotificationsSilence ({ rootState, commit }, { value }) {
commit('setNotificationsSilence', { value })
},
addFriends ({ rootState, commit }, { friends }) {
commit('addFriends', { friends })
},
addFollowers ({ rootState, commit }, { followers }) {
commit('addFollowers', { followers })
},
deleteStatus ({ rootState, commit }, status) {
commit('setDeleted', { status })
apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials })

21
src/modules/users.js
View file

@ -51,6 +51,15 @@ export const mutations = {
endLogin (state) {
state.loggingIn = false
},
// TODO Clean after ourselves?
addFriends (state, { id, friends }) {
const user = state.usersObject[id]
user.friends = friends
},
addFollowers (state, { id, followers }) {
const user = state.usersObject[id]
user.followers = followers
},
addNewUsers (state, users) {
each(users, (user) => mergeOrAdd(state.users, state.usersObject, user))
},
@ -92,6 +101,14 @@ const users = {
store.rootState.api.backendInteractor.fetchUser({ id })
.then((user) => store.commit('addNewUsers', [user]))
},
addFriends ({ rootState, commit }, { id }) {
rootState.api.backendInteractor.fetchFriends({ id })
.then((friends) => commit('addFriends', { id, friends }))
},
addFollowers ({ rootState, commit }, { id }) {
rootState.api.backendInteractor.fetchFollowers({ id })
.then((followers) => commit('addFollowers', { id, followers }))
},
registerPushNotifications (store) {
const token = store.state.currentUser.credentials
const vapidPublicKey = store.rootState.instance.vapidPublicKey
@ -142,6 +159,10 @@ const users = {
throw Error(errors)
}
},
async getCaptcha (store) {
return await store.rootState.api.backendInteractor.getCaptcha()
},
logout (store) {
store.commit('clearCurrentUser')
store.commit('setToken', false)

3
src/services/api/api.service.js
View file

@ -167,6 +167,8 @@ const register = (params) => {
})
}
const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json())
const authHeaders = (accessToken) => {
if (accessToken) {
return { 'Authorization': `Bearer ${accessToken}` }
@ -495,6 +497,7 @@ const apiService = {
setUserMute,
fetchMutes,
register,
getCaptcha,
updateAvatar,
updateBg,
updateProfile,

2
src/services/backend_interactor_service/backend_interactor_service.js
View file

@ -71,6 +71,7 @@ const backendInteractorService = (credentials) => {
const fetchMutes = () => apiService.fetchMutes({credentials})
const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials})
const getCaptcha = () => apiService.getCaptcha()
const register = (params) => apiService.register(params)
const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params})
const updateBg = ({params}) => apiService.updateBg({credentials, params})
@ -100,6 +101,7 @@ const backendInteractorService = (credentials) => {
setUserMute,
fetchMutes,
register,
getCaptcha,
updateAvatar,
updateBg,
updateBanner,

4
src/services/new_api/oauth.js
View file

@ -5,7 +5,7 @@ const getOrCreateApp = ({oauth, instance}) => {
const form = new window.FormData()
form.append('client_name', `PleromaFE_${Math.random()}`)
form.append('redirect_uris', `${window.location.origin}/oauth-callback`)
form.append('redirect_uris', `${window.location.origin}/~/oauth-callback`)
form.append('scopes', 'read write follow')
return window.fetch(url, {
@ -64,7 +64,7 @@ const getToken = ({app, instance, code}) => {
form.append('client_secret', app.client_secret)
form.append('grant_type', 'authorization_code')
form.append('code', code)
form.append('redirect_uri', `${window.location.origin}/oauth-callback`)
form.append('redirect_uri', `${window.location.origin}/~/oauth-callback`)
return window.fetch(url, {
method: 'POST',

10
src/services/user_profile_link_generator/user_profile_link_generator.js Normal file
View file

@ -0,0 +1,10 @@
const generateProfileLink = (id, screenName) => {
return {
name: (isExternal(screenName) ? 'external-user-profile' : 'user-profile'),
params: (isExternal(screenName) ? { id } : { name: screenName })
}
}
const isExternal = screenName => screenName.includes('@')
export default generateProfileLink

4
static/config.json
View file

@ -5,8 +5,8 @@
"logo": "/static/logo.svg",
"logoMask": true,
"logoMargin": ".1em",
"redirectRootNoLogin": "/main/all",
"redirectRootLogin": "/main/friends",
"redirectRootNoLogin": "/~/main/all",
"redirectRootLogin": "/~/main/friends",
"chatDisabled": false,
"showInstanceSpecificPanel": false,
"scopeOptionsEnabled": false,

5
test/unit/karma.conf.js
View file

@ -56,7 +56,10 @@ module.exports = function (config) {
browsers: ['PhantomJS'],
frameworks: ['mocha', 'sinon-chai'],
reporters: ['mocha'],
files: ['./index.js'],
files: [
'../../node_modules/@babel/polyfill/dist/polyfill.js',
'./index.js'
],
preprocessors: {
'./index.js': ['webpack', 'sourcemap']
},

13
test/unit/specs/Hello.spec.js
View file

@ -1,13 +0,0 @@
// import Vue from 'vue'
// import Hello from 'src/components/Hello'
// describe('Hello.vue', () => {
// xit('should render correct contents', () => {
// const vm = new Vue({
// el: document.createElement('div'),
// render: (h) => h(Hello)
// })
// expect(vm.$el.querySelector('.hello h1').textContent)
// .to.equal('Welcome to Your Vue.js App')
// })
// })

29
test/unit/specs/boot/routes.spec.js Normal file
View file

@ -0,0 +1,29 @@
import routes from 'src/boot/routes'
import { createLocalVue } from '@vue/test-utils'
import VueRouter from 'vue-router'
const localVue = createLocalVue()
localVue.use(VueRouter)
describe('routes', () => {
const router = new VueRouter({
mode: 'abstract',
routes: routes({})
})
it('root path', () => {
router.push('/~/main/all')
const matchedComponents = router.getMatchedComponents()
expect(matchedComponents[0].components.hasOwnProperty('Timeline')).to.eql(true)
})
it('user\'s profile', () => {
router.push('/fake-user-name')
const matchedComponents = router.getMatchedComponents()
expect(matchedComponents[0].components.hasOwnProperty('UserCardContent')).to.eql(true)
})
})

231
test/unit/specs/components/user_profile.spec.js Normal file
View file

@ -0,0 +1,231 @@
import { mount, createLocalVue } from '@vue/test-utils'
import Vuex from 'vuex'
import UserProfile from 'src/components/user_profile/user_profile.vue'
import backendInteractorService from 'src/services/backend_interactor_service/backend_interactor_service.js'
const localVue = createLocalVue()
localVue.use(Vuex)
const mutations = {
clearTimeline: () => {}
}
const externalProfileStore = new Vuex.Store({
mutations,
state: {
api: {
backendInteractor: backendInteractorService('')
},
interface: {
browserSupport: ''
},
config: {
colors: '',
highlight: {},
customTheme: {
colors: []
}
},
instance: {
hideUserStats: true
},
statuses: {
timelines: {
user: {
statuses: [],
statusesObject: {},
faves: [],
visibleStatuses: [],
visibleStatusesObject: {},
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false,
followers: [],
friends: [],
viewing: 'statuses',
userId: 701,
flushMarker: 0
}
}
},
users: {
currentUser: {
credentials: ''
},
usersObject: [
{
background_image: null,
cover_photo: 'https://playvicious.social/system/accounts/headers/000/000/001/original/7dae4fc0e8330e83.jpg?1507329206',
created_at: 'Mon Dec 18 16:01:35 +0000 2017',
default_scope: 'public',
description: "Your favorite person's favorite person.",
description_html: "<p>Your favorite person's favorite person.</p>",
favourites_count: 0,
fields: [
{
name: '✌🏾',
value: '<a href="https://thetwelfth.house" rel="me nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">thetwelfth.house</span><span class="invisible"></span></a>'
},
{
name: '🚧',
value: '<a href="https://code.playvicio.us" rel="me nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">code.playvicio.us</span><span class="invisible"></span></a>'
},
{
name: '❤️',
value: '<a href="https://www.patreon.com/Are0h" rel="me nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="">patreon.com/Are0h</span><span class="invisible"></span></a>'
}
],
followers_count: 2,
following: false,
follows_you: false,
friends_count: 0,
id: 701,
is_local: false,
locked: false,
name: 'Are0h',
name_html: 'Are0h',
no_rich_text: false,
profile_image_url: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
profile_image_url_https: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
profile_image_url_original: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
profile_image_url_profile_size: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
rights: {
delete_others_notice: false
},
screen_name: 'Are0h@playvicious.social',
statuses_count: 6727,
statusnet_blocking: false,
statusnet_profile_url: 'https://playvicious.social/users/Are0h'
}
]
}
}
})
const localProfileStore = new Vuex.Store({
mutations,
state: {
api: {
backendInteractor: backendInteractorService('')
},
interface: {
browserSupport: ''
},
config: {
colors: '',
highlight: {},
customTheme: {
colors: []
}
},
instance: {
hideUserStats: true
},
statuses: {
timelines: {
user: {
statuses: [],
statusesObject: {},
faves: [],
visibleStatuses: [],
visibleStatusesObject: {},
newStatusCount: 0,
maxId: 0,
minVisibleId: 0,
loading: false,
followers: [],
friends: [],
viewing: 'statuses',
userId: 701,
flushMarker: 0
}
}
},
users: {
currentUser: {
credentials: ''
},
usersObject: [
{
background_image: null,
cover_photo: 'https://playvicious.social/system/accounts/headers/000/000/001/original/7dae4fc0e8330e83.jpg?1507329206',
created_at: 'Mon Dec 18 16:01:35 +0000 2017',
default_scope: 'public',
description: "Your favorite person's favorite person.",
description_html: "<p>Your favorite person's favorite person.</p>",
favourites_count: 0,
fields: [
{
name: '✌🏾',
value: '<a href="https://thetwelfth.house" rel="me nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">thetwelfth.house</span><span class="invisible"></span></a>'
},
{
name: '🚧',
value: '<a href="https://code.playvicio.us" rel="me nofollow noopener" target="_blank"><span class="invisible">https://</span><span class="">code.playvicio.us</span><span class="invisible"></span></a>'
},
{
name: '❤️',
value: '<a href="https://www.patreon.com/Are0h" rel="me nofollow noopener" target="_blank"><span class="invisible">https://www.</span><span class="">patreon.com/Are0h</span><span class="invisible"></span></a>'
}
],
followers_count: 2,
following: false,
follows_you: false,
friends_count: 0,
id: 701,
is_local: false,
locked: false,
name: 'Are0h',
name_html: 'Are0h',
no_rich_text: false,
profile_image_url: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
profile_image_url_https: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
profile_image_url_original: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
profile_image_url_profile_size: 'https://playvicious.social/system/accounts/avatars/000/000/001/original/33e9983bc2d96aeb.png?1520872572',
rights: {
delete_others_notice: false
},
screen_name: 'Are0h',
statuses_count: 6727,
statusnet_blocking: false,
statusnet_profile_url: 'https://playvicious.social/users/Are0h'
}
]
}
}
})
describe('UserProfile', () => {
it('renders external profile', () => {
const wrapper = mount(UserProfile, {
localVue,
store: externalProfileStore,
mocks: {
$route: {
params: { id: 701 },
name: 'external-user-profile'
},
$t: (msg) => msg
}
})
expect(wrapper.find('.user-screen-name').text()).to.eql('@Are0h@playvicious.social')
})
it('renders local profile', () => {
const wrapper = mount(UserProfile, {
localVue,
store: localProfileStore,
mocks: {
$route: {
params: { name: 'Are0h' },
name: 'user-profile'
},
$t: (msg) => msg
}
})
expect(wrapper.find('.user-screen-name').text()).to.eql('@Are0h')
})
})

15
test/unit/specs/services/user_profile_link_generator/user_profile_link_generator.spec.js Normal file
View file

@ -0,0 +1,15 @@
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
describe('generateProfileLink', () => {
it('returns obj for local user', () => {
expect(generateProfileLink(1, 'jack')).to.eql({
name: 'user-profile', params: { name: 'jack' }
})
})
it('returns obj for external user', () => {
expect(generateProfileLink(1, 'john@domain')).to.eql({
name: 'external-user-profile', params: { id: 1 }
})
})
})

1954
yarn.lock
View file

File diff suppressed because it is too large Load diff