Merge branch 'master' of ssh.gitgud.io:lambadalambda/pleroma-fe

This commit is contained in:
Roger Braun 2016-11-07 11:56:14 +01:00
commit cf972e968c
36 changed files with 273 additions and 80 deletions

View file

@ -26,11 +26,6 @@ module.exports = {
target: 'https://social.heldscal.la/',
changeOrigin: true,
cookieDomainRewrite: 'localhost'
},
'/main': {
target: 'https://social.heldscal.la/',
changeOrigin: true,
cookieDomainRewrite: 'localhost'
}
},
// CSS Sourcemaps off by default because relative paths are "buggy"

View file

@ -3,7 +3,7 @@
<head>
<meta charset="utf-8">
<title>Pleroma</title>
<link rel="stylesheet" href="static/font/css/fontello.css">
<link rel="stylesheet" href="/static/font/css/fontello.css">
</head>
<body>
<div id="app"></div>

View file

@ -1,9 +1,11 @@
import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue'
export default {
name: 'app',
components: {
UserPanel
UserPanel,
NavPanel
},
computed: {
user () { return this.$store.state.users.currentUser || {} },

View file

@ -2,12 +2,13 @@ $main-color: #f58d2c;
$main-background: white;
$darkened-background: whitesmoke;
body {
#app {
background-color: $main-color;
background-size: cover;
background-attachment: fixed;
background-repeat: no-repeat;
background-position: 0 50px;
min-height: 100vh;
}
h4 {
@ -197,27 +198,6 @@ status.ng-enter.ng-enter-active {
cursor: pointer;
}
nav-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
nav-panel li {
border-bottom: 1px solid silver;
padding: 0.5em;
padding-left: 1em;
}
nav-panel li:last-child {
border: none;
}
nav-panel a {
display: block;
width: 100%;
}
.status-el p {
margin: 0;
margin-top: 0.2em;
@ -279,11 +259,6 @@ attention {
display: flex;
padding: 0.5em;
media-upload {
font-size: 26px;
flex: 1;
}
button {
flex: 2;
}

View file

@ -19,8 +19,8 @@ const Attachment = {
type = 'image';
}
if(this.attachment.mimetype.match(/video\/webm/)) {
type = 'webm';
if(this.attachment.mimetype.match(/video\/(webm|mp4)/)) {
type = 'video';
};
return type

View file

@ -6,7 +6,7 @@
<a class="image-attachment" v-if="type === 'image' && !nsfw" :href="attachment.url" target="_blank"><img :src="attachment.url"></img></a>
<video v-if="type === 'webm' && !nsfw" :src="attachment.url" controls></video>
<video v-if="type === 'video' && !nsfw" :src="attachment.url" controls></video>
<span v-if="type === 'unknown'">Don't know how to display this...</span>

View file

@ -0,0 +1,22 @@
/* eslint-env browser */
import statusPosterService from '../../services/status_poster/status_poster.service.js'
const mediaUpload = {
mounted () {
const store = this.$store
const input = this.$el.querySelector('input')
const self = this
input.addEventListener('change', ({target}) => {
const file = target.files[0];
const formData = new FormData();
formData.append('media', file);
statusPosterService.uploadMedia({ store, formData })
.then((fileData) => {
self.$emit('uploaded', fileData)
})
})
}
}
export default mediaUpload

View file

@ -0,0 +1,17 @@
<template>
<div class="media-upload">
<label class="btn btn-default">
<i class="fa icon-upload"></i>
<input type=file style="position: fixed; top: -100em"></input>
</label>
</div>
</template>
<script src="./media_upload.js" ></script>
<style>
.media-upload {
font-size: 26px;
flex: 1;
}
</style>

View file

@ -0,0 +1,4 @@
const NavPanel = {
}
export default NavPanel

View file

@ -0,0 +1,54 @@
<template>
<div class="nav-panel">
<div class="panel panel-default">
<ul>
<li ng-if='currentUser'>
<router-link to='/main/friends'>
Timeline
</router-link>
</li>
<li>
<router-link to='/main/public'>
Public Timeline
</router-link>
</li>
<li>
<router-link to='/main/all'>
The Whole Known Network
</router-link>
</li>
</ul>
</div>
</div>
</template>
<script src="./nav_panel.js" ></script>
<style lang="scss">
.nav-panel ul {
list-style: none;
margin: 0;
padding: 0;
}
.nav-panel li {
border-bottom: 1px solid silver;
padding: 0.5em;
padding-left: 1em;
}
.nav-panel li:last-child {
border: none;
}
.nav-panel a {
display: block;
width: 100%;
&.router-link-active {
font-weight: bold
}
}
</style>

View file

@ -1,4 +1,6 @@
import statusPoster from '../../services/status_poster/status_poster.service.js'
import MediaUpload from '../media_upload/media_upload.vue'
import { reject, map, uniqBy } from 'lodash';
const buildMentionsString = ({user, attentions}, currentUser) => {
@ -23,6 +25,9 @@ const PostStatusForm = {
'repliedUser',
'attentions'
],
components: {
MediaUpload
},
data () {
let statusText = ''
@ -33,7 +38,8 @@ const PostStatusForm = {
return {
newStatus: {
status: statusText
status: statusText,
files: []
}
}
},
@ -41,11 +47,18 @@ const PostStatusForm = {
postStatus (newStatus) {
statusPoster.postStatus({
status: newStatus.status,
media: newStatus.files,
store: this.$store,
inReplyToStatusId: this.replyTo
})
this.newStatus = { }
this.newStatus = {
status: '',
files: []
}
this.$emit('posted')
},
addMediaFile (fileInfo) {
this.newStatus.files.push(fileInfo)
}
}
}

View file

@ -10,7 +10,7 @@
</div>
</div>
<div class='form-bottom'>
<media-upload files="newStatus.files"></media-upload>
<media-upload v-on:uploaded="addMediaFile"></media-upload>
<button type="submit" class="btn btn-default" >Submit</button>
</div>
</form>

View file

@ -0,0 +1,11 @@
import Timeline from '../timeline/timeline.vue'
const PublicAndExternalTimeline = {
components: {
Timeline
},
computed: {
timeline () { return this.$store.state.statuses.timelines.publicAndExternal }
}
}
export default PublicAndExternalTimeline

View file

@ -0,0 +1,10 @@
<template>
<div class="timeline panel panel-default">
<div class="panel-heading">THE WHOLE KNOWN NETWORK</div>
<div class="panel-body">
<Timeline v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/>
</div>
</div>
</template>
<script src="./public_and_external_timeline.js"></script>

View file

@ -16,6 +16,9 @@ const Status = {
} else {
return this.statusoid
}
},
loggedIn () {
return !!this.$store.state.users.currentUser
}
},
components: {

View file

@ -32,7 +32,7 @@
</attachment>
</div>
<div>
<div v-if="loggedIn">
<div class='status-actions'>
<div>
<a href="#" v-on:click.prevent="toggleReplying">

View file

@ -1,4 +1,5 @@
import Status from '../status/status.vue'
import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js'
const Timeline = {
props: [
@ -8,9 +9,32 @@ const Timeline = {
components: {
Status
},
created () {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
timelineFetcher.fetchAndUpdate({
store,
credentials,
timeline: this.timelineName,
showImmediately: true
})
},
methods: {
showNewStatuses () {
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
},
fetchOlderStatuses () {
const store = this.$store
const credentials = store.state.users.currentUser.credentials
store.commit('setLoading', { timeline: this.timelineName, value: true });
timelineFetcher.fetchAndUpdate({
store,
credentials,
timeline: this.timelineName,
older: true,
showImmediately: true
}).then(() => store.commit('setLoading', { timeline: this.timelineName, value: false }))
}
}
}

View file

@ -8,6 +8,13 @@
</div>
</a>
<status v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status"></status>
<a href="#" v-on:click.prevent='fetchOlderStatuses()' v-if="!timeline.loading">
<div class="new-status-notification">
<p class="text-center" >
Load older statuses.
</p>
</div>
</a>
</div>
</template>
<script src="./timeline.js"></script>

View file

@ -3,6 +3,7 @@ import VueRouter from 'vue-router'
import Vuex from 'vuex'
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 statusesModule from './modules/statuses.js'
@ -19,12 +20,16 @@ const store = new Vuex.Store({
})
const routes = [
{ path: '/', redirect: '/main/public' },
{ path: '/', redirect: '/main/all' },
{ path: '/main/all', component: PublicAndExternalTimeline },
{ path: '/main/public', component: PublicTimeline },
{ path: '/main/friends', component: FriendsTimeline }
]
const router = new VueRouter({routes})
const router = new VueRouter({
mode: 'history',
routes
})
/* eslint-disable no-new */
new Vue({
@ -34,9 +39,3 @@ new Vue({
template: '<App/>',
components: { App }
})
const statusesEx = require('../test/fixtures/statuses.json')
setTimeout(() => {
store.commit('addNewStatuses', { statuses: statusesEx, timeline: 'public', showImmediately: false })
}, 3000)

View file

@ -12,7 +12,8 @@ const defaultState = {
visibleStatuses: [],
newStatusCount: 0,
maxId: 0,
minVisibleId: 0
minVisibleId: 0,
loading: false
},
publicAndExternal: {
statuses: [],
@ -20,7 +21,8 @@ const defaultState = {
visibleStatuses: [],
newStatusCount: 0,
maxId: 0,
minVisibleId: 0
minVisibleId: 0,
loading: false
},
friends: {
statuses: [],
@ -28,7 +30,8 @@ const defaultState = {
visibleStatuses: [],
newStatusCount: 0,
maxId: 0,
minVisibleId: 0
minVisibleId: 0,
loading: false
}
}
}
@ -37,7 +40,7 @@ const statusType = (status) => {
return !status.is_post_verb && status.uri.match(/fave/) ? 'fave' : 'status'
}
const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves }) => {
const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visibleStatuses, newStatusCount, faves, loading }) => {
const statusesAndFaves = groupBy(addedStatuses, statusType)
const addedFaves = statusesAndFaves['fave'] || []
const unseenFaves = differenceBy(addedFaves, faves, 'id')
@ -55,6 +58,9 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
// Add some html and nsfw to the statuses.
each(addedStatuses, (status) => {
const statusoid = status.retweeted_status || status
statusoid.created_at_parsed = statusoid.created_at
if (statusoid.parsedText === undefined) {
// statusoid.parsedText = statusParserService.parse(statusoid)
statusoid.parsedText = statusoid.text
@ -89,7 +95,8 @@ const addStatusesToTimeline = (addedStatuses, showImmediately, { statuses, visib
newStatusCount: newNewStatusCount,
maxId: newStatuses[0].id,
minVisibleId: (last(newVisibleStatuses) || { id: undefined }).id,
faves: unionBy(faves, addedFaves, 'id')
faves: unionBy(faves, addedFaves, 'id'),
loading
}
}
@ -135,6 +142,9 @@ const statuses = {
const newStatus = find(state.allStatuses, status)
newStatus.favorited = value
},
setLoading (state, { timeline, value }) {
state.timelines[timeline].loading = value
},
setNsfw (state, { id, nsfw }) {
// For now, walk through all the statuses because the stuff might be in the replied_to_status
// TODO: Save the replied_tos as references.

View file

@ -6,21 +6,27 @@ const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_time
const FAVORITE_URL = '/api/favorites/create'
const UNFAVORITE_URL = '/api/favorites/destroy'
const STATUS_UPDATE_URL = '/api/statuses/update.json'
const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload'
// const CONVERSATION_URL = '/api/statusnet/conversation/';
// const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload';
// const FORM_CONTENT_TYPE = {'Content-Type': 'application/x-www-form-urlencoded'};
// import { param, ajax } from 'jquery';
// import { merge } from 'lodash';
const authHeaders = (user) => ({ 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` })
const authHeaders = (user) => {
if (user) {
return { 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }
} else {
return { }
}
}
const fetchTimeline = ({timeline, credentials, since = false, until = false}) => {
const timelineUrls = {
public: PUBLIC_TIMELINE_URL,
friends: FRIENDS_TIMELINE_URL,
'public-and-external': PUBLIC_AND_EXTERNAL_TIMELINE_URL
'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL
}
let url = timelineUrls[timeline]
@ -75,12 +81,23 @@ const postStatus = ({credentials, status, mediaIds, inReplyToStatusId}) => {
})
}
const uploadMedia = ({formData, credentials}) => {
return fetch(MEDIA_UPLOAD_URL, {
body: formData,
method: 'POST',
headers: authHeaders(credentials)
})
.then((response) => response.text())
.then((text) => (new DOMParser()).parseFromString(text, 'application/xml'))
}
const apiService = {
verifyCredentials,
fetchTimeline,
favorite,
unfavorite,
postStatus
postStatus,
uploadMedia
}
export default apiService

View file

@ -12,8 +12,21 @@ const postStatus = ({ store, status, media = [], inReplyToStatusId = undefined }
})
}
const uploadMedia = ({ store, formData }) => {
const credentials = store.state.users.currentUser.credentials
return apiService.uploadMedia({ credentials, formData }).then((xml) => {
return {
id: xml.getElementsByTagName('media_id')[0].textContent,
url: xml.getElementsByTagName('media_url')[0].textContent,
image: xml.getElementsByTagName('atom:link')[0].getAttribute('href')
}
})
}
const statusPosterService = {
postStatus
postStatus,
uploadMedia
}
export default statusPosterService

View file

@ -1 +0,0 @@
roger@yuuyuu.18961

View file

@ -16,7 +16,8 @@ const update = ({store, statuses, timeline, showImmediately}) => {
const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false}) => {
const args = { timeline, credentials }
const timelineData = store.rootState.statuses.timelines[camelCase(timeline)]
const rootState = store.rootState || store.state
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
if (older) {
args['until'] = timelineData.minVisibleId
@ -24,7 +25,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
args['since'] = timelineData.maxId
}
apiService.fetchTimeline(args)
return apiService.fetchTimeline(args)
.then((statuses) => update({store, statuses, timeline, showImmediately}))
}
@ -35,6 +36,7 @@ const startFetching = ({ timeline = 'friends', credentials, store }) => {
setInterval(boundFetchAndUpdate, 10000)
}
const timelineFetcher = {
fetchAndUpdate,
startFetching
}

View file

@ -29,6 +29,12 @@
"css": "star-empty",
"code": 59394,
"src": "fontawesome"
},
{
"uid": "eeec3208c90b7b48e804919d0d2d4a41",
"css": "upload",
"code": 59395,
"src": "fontawesome"
}
]
}

View file

@ -2,4 +2,5 @@
.icon-retweet:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */
.icon-star-empty:before { content: '\e802'; } /* '' */
.icon-upload:before { content: '\e803'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */

File diff suppressed because one or more lines are too long

View file

@ -2,4 +2,5 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

View file

@ -13,4 +13,5 @@
.icon-retweet { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe800;&nbsp;'); }
.icon-star { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe801;&nbsp;'); }
.icon-star-empty { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe802;&nbsp;'); }
.icon-upload { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xe803;&nbsp;'); }
.icon-reply { *zoom: expression( this.runtimeStyle['zoom'] = '1', this.innerHTML = '&#xf112;&nbsp;'); }

View file

@ -1,11 +1,11 @@
@font-face {
font-family: 'fontello';
src: url('../font/fontello.eot?1876128');
src: url('../font/fontello.eot?1876128#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?1876128') format('woff2'),
url('../font/fontello.woff?1876128') format('woff'),
url('../font/fontello.ttf?1876128') format('truetype'),
url('../font/fontello.svg?1876128#fontello') format('svg');
src: url('../font/fontello.eot?70483588');
src: url('../font/fontello.eot?70483588#iefix') format('embedded-opentype'),
url('../font/fontello.woff2?70483588') format('woff2'),
url('../font/fontello.woff?70483588') format('woff'),
url('../font/fontello.ttf?70483588') format('truetype'),
url('../font/fontello.svg?70483588#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -15,7 +15,7 @@
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: 'fontello';
src: url('../font/fontello.svg?1876128#fontello') format('svg');
src: url('../font/fontello.svg?70483588#fontello') format('svg');
}
}
*/
@ -58,4 +58,5 @@
.icon-retweet:before { content: '\e800'; } /* '' */
.icon-star:before { content: '\e801'; } /* '' */
.icon-star-empty:before { content: '\e802'; } /* '' */
.icon-upload:before { content: '\e803'; } /* '' */
.icon-reply:before { content: '\f112'; } /* '' */

View file

@ -229,11 +229,11 @@ body {
}
@font-face {
font-family: 'fontello';
src: url('./font/fontello.eot?51751583');
src: url('./font/fontello.eot?51751583#iefix') format('embedded-opentype'),
url('./font/fontello.woff?51751583') format('woff'),
url('./font/fontello.ttf?51751583') format('truetype'),
url('./font/fontello.svg?51751583#fontello') format('svg');
src: url('./font/fontello.eot?93026246');
src: url('./font/fontello.eot?93026246#iefix') format('embedded-opentype'),
url('./font/fontello.woff?93026246') format('woff'),
url('./font/fontello.ttf?93026246') format('truetype'),
url('./font/fontello.svg?93026246#fontello') format('svg');
font-weight: normal;
font-style: normal;
}
@ -304,6 +304,9 @@ body {
<div title="Code: 0xe800" class="the-icons span3"><i class="demo-icon icon-retweet">&#xe800;</i> <span class="i-name">icon-retweet</span><span class="i-code">0xe800</span></div>
<div title="Code: 0xe801" class="the-icons span3"><i class="demo-icon icon-star">&#xe801;</i> <span class="i-name">icon-star</span><span class="i-code">0xe801</span></div>
<div title="Code: 0xe802" class="the-icons span3"><i class="demo-icon icon-star-empty">&#xe802;</i> <span class="i-name">icon-star-empty</span><span class="i-code">0xe802</span></div>
<div title="Code: 0xe803" class="the-icons span3"><i class="demo-icon icon-upload">&#xe803;</i> <span class="i-name">icon-upload</span><span class="i-code">0xe803</span></div>
</div>
<div class="row">
<div title="Code: 0xf112" class="the-icons span3"><i class="demo-icon icon-reply">&#xf112;</i> <span class="i-name">icon-reply</span><span class="i-code">0xf112</span></div>
</div>
</div>

Binary file not shown.

View file

@ -12,6 +12,8 @@
<glyph glyph-name="star-empty" unicode="&#xe802;" d="M635 290l170 166-235 34-106 213-105-213-236-34 171-166-41-235 211 111 211-111z m294 199q0-12-15-27l-202-197 48-279q0-4 0-12 0-28-23-28-10 0-22 7l-251 132-250-132q-12-7-23-7-11 0-17 9t-6 19q0 4 1 12l48 279-203 197q-14 15-14 27 0 21 31 26l280 40 126 254q11 23 27 23t28-23l125-254 280-40q32-5 32-26z" horiz-adv-x="928.6" />
<glyph glyph-name="upload" unicode="&#xe803;" d="M714 29q0 14-10 25t-25 10-25-10-11-25 11-25 25-11 25 11 10 25z m143 0q0 14-10 25t-26 10-25-10-10-25 10-25 25-11 26 11 10 25z m72 125v-179q0-22-16-38t-38-16h-821q-23 0-38 16t-16 38v179q0 22 16 38t38 15h238q12-31 39-51t62-20h143q34 0 61 20t40 51h238q22 0 38-15t16-38z m-182 361q-9-22-33-22h-143v-250q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v250h-143q-23 0-33 22-9 22 8 39l250 250q10 10 25 10t25-10l250-250q18-17 8-39z" horiz-adv-x="928.6" />
<glyph glyph-name="reply" unicode="&#xf112;" d="M1000 225q0-93-71-252-1-4-6-13t-7-17-7-12q-7-10-16-10-8 0-13 6t-5 14q0 5 1 15t2 13q3 38 3 69 0 56-10 101t-27 77-45 56-59 39-74 24-86 12-98 3h-125v-143q0-14-10-25t-26-11-25 11l-285 286q-11 10-11 25t11 25l285 286q11 10 25 10t26-10 10-25v-143h125q398 0 488-225 30-75 30-186z" horiz-adv-x="1000" />
</font>
</defs>

Before

Width:  |  Height:  |  Size: 1.9 KiB

After

Width:  |  Height:  |  Size: 2.4 KiB

Binary file not shown.

Binary file not shown.

Binary file not shown.