forked from AkkomaGang/akkoma-fe
Merge branch 'develop' into feature/normal-emoji-completion
This commit is contained in:
eal
commit
b67c506062
36 changed files with 457 additions and 196 deletions
|
|
@ -23,9 +23,15 @@ module.exports = {
|
|||
assetsPublicPath: '/',
|
||||
proxyTable: {
|
||||
'/api': {
|
||||
target: 'https://social.heldscal.la/',
|
||||
target: 'htts://localhost:4000/',
|
||||
changeOrigin: true,
|
||||
cookieDomainRewrite: 'localhost'
|
||||
},
|
||||
'/socket': {
|
||||
target: 'htts://localhost:4000/',
|
||||
changeOrigin: true,
|
||||
cookieDomainRewrite: 'localhost',
|
||||
ws: true
|
||||
}
|
||||
},
|
||||
// CSS Sourcemaps off by default because relative paths are "buggy"
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
"localforage": "^1.5.0",
|
||||
"node-sass": "^3.10.1",
|
||||
"object-path": "^0.11.3",
|
||||
"phoenix": "^1.3.0",
|
||||
"sanitize-html": "^1.13.0",
|
||||
"sass-loader": "^4.0.2",
|
||||
"vue": "^2.3.4",
|
||||
|
|
|
|||
20
src/App.scss
20
src/App.scss
|
|
@ -16,7 +16,13 @@ h4 {
|
|||
}
|
||||
|
||||
#content {
|
||||
padding-top: 60px;
|
||||
box-sizing: border-box;
|
||||
padding-top: 60px;
|
||||
margin: auto;
|
||||
min-height: 100vh;
|
||||
max-width: 980px;
|
||||
background-color: rgba(0,0,0,0.15);
|
||||
align-content: flex-start;
|
||||
}
|
||||
|
||||
.text-center {
|
||||
|
|
@ -157,15 +163,6 @@ main-router {
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
#content {
|
||||
margin: auto;
|
||||
min-height: 100vh;
|
||||
max-width: 980px;
|
||||
padding-bottom: 1em;
|
||||
background-color: rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
.container > * {
|
||||
min-width: 0px;
|
||||
}
|
||||
|
|
@ -210,10 +207,11 @@ nav {
|
|||
.panel-switcher {
|
||||
display: none;
|
||||
width: 100%;
|
||||
|
||||
height: 46px;
|
||||
button {
|
||||
display: block;
|
||||
flex: 1;
|
||||
max-height: 32px;
|
||||
margin: 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -34,6 +34,13 @@
|
|||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.7em;
|
||||
|
||||
.attachment.media-upload-container {
|
||||
flex: 0 0 auto;
|
||||
max-height: 300px;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.attachment {
|
||||
flex: 1 0 30%;
|
||||
margin: 0.5em 0.7em 0.6em 0.0em;
|
||||
|
|
@ -82,9 +89,7 @@
|
|||
img.media-upload {
|
||||
margin-bottom: -2px;
|
||||
max-height: 300px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
flex: 1;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.oembed {
|
||||
|
|
@ -126,6 +131,7 @@
|
|||
width: 100%;
|
||||
height: 100%; /* If this isn't here, chrome will stretch the images */
|
||||
max-height: 500px;
|
||||
image-orientation: from-image;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
21
src/components/chat/chat.js
Normal file
21
src/components/chat/chat.js
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
const chat = {
|
||||
data () {
|
||||
return {
|
||||
currentMessage: '',
|
||||
channel: null
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
messages () {
|
||||
return this.$store.state.chat.messages
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
submit (message) {
|
||||
this.$store.state.chat.channel.push('new_msg', {text: message}, 10000)
|
||||
this.currentMessage = ''
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default chat
|
||||
59
src/components/chat/chat.vue
Normal file
59
src/components/chat/chat.vue
Normal file
|
|
@ -0,0 +1,59 @@
|
|||
<template>
|
||||
<div class="chat-panel panel panel-default">
|
||||
<div class="panel-heading timeline-heading base02-background base04">
|
||||
<div class="title">
|
||||
{{$t('chat.title')}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-body base01-background">
|
||||
<div class="chat-window">
|
||||
<div class="chat-message" v-for="message in messages" :key="message.id">
|
||||
<span class="chat-avatar">
|
||||
<img :src="message.author.avatar" />
|
||||
{{message.author.username}}:
|
||||
</span>
|
||||
<span class="chat-text">
|
||||
{{message.text}}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chat-input">
|
||||
<form @submit.prevent="submit(currentMessage)">
|
||||
<input v-model="currentMessage" type="text" >
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./chat.js"></script>
|
||||
|
||||
|
||||
<style lang="scss">
|
||||
.chat-window {
|
||||
max-height: 80vh;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.chat-message {
|
||||
padding: 0.2em 0.5em
|
||||
}
|
||||
.chat-avatar {
|
||||
img {
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 5px;
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
.chat-input {
|
||||
display: flex;
|
||||
form {
|
||||
flex: auto;
|
||||
input {
|
||||
margin: 0.5em;
|
||||
width: fill-available;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div v-if="canDelete">
|
||||
<a href="#" v-on:click.prevent="deleteStatus()">
|
||||
<i class='fa icon-cancel delete-status'></i>
|
||||
<i class='base09 icon-cancel delete-status'></i>
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<i :class='classes' class='favorite-button fa' @click.prevent='favorite()'/>
|
||||
<i :class='classes' class='favorite-button base09' @click.prevent='favorite()'/>
|
||||
<span v-if='status.fave_num > 0'>{{status.fave_num}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -15,7 +15,7 @@
|
|||
color: orange;
|
||||
}
|
||||
}
|
||||
.icon-star {
|
||||
.favorite-button.icon-star {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop">
|
||||
<label class="btn btn-default">
|
||||
<i class="fa icon-spin4 animate-spin" v-if="uploading"></i>
|
||||
<i class="fa icon-upload" v-if="!uploading"></i>
|
||||
<i class="base09 icon-spin4 animate-spin" v-if="uploading"></i>
|
||||
<i class="base09 icon-upload" v-if="!uploading"></i>
|
||||
<input type=file style="position: fixed; top: -100em"></input>
|
||||
</label>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2,6 +2,9 @@ const NavPanel = {
|
|||
computed: {
|
||||
currentUser () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
chat () {
|
||||
return this.$store.state.chat.channel
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,11 @@
|
|||
{{ $t("nav.timeline") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if='chat && currentUser'>
|
||||
<router-link class="base00-background" to='/chat'>
|
||||
{{ $t("nav.chat") }}
|
||||
</router-link>
|
||||
</li>
|
||||
<li v-if='currentUser'>
|
||||
<router-link class="base00-background" :to="{ name: 'mentions', params: { username: currentUser.screen_name } }">
|
||||
{{ $t("nav.mentions") }}
|
||||
|
|
|
|||
|
|
@ -59,6 +59,10 @@
|
|||
color: $blue;
|
||||
}
|
||||
|
||||
.icon-star.lit {
|
||||
color: orange;
|
||||
}
|
||||
|
||||
.status-content {
|
||||
margin: 0;
|
||||
max-height: 300px;
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@
|
|||
<div class="panel-heading base02-background base04">
|
||||
<span class="unseen-count" v-if="unseenCount">{{unseenCount}}</span>
|
||||
{{$t('notifications.notifications')}}
|
||||
<button @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
|
||||
<button v-if="unseenCount" @click.prevent="markAsSeen" class="base04 base02-background read-button">{{$t('notifications.read')}}</button>
|
||||
</div>
|
||||
<div class="panel-body base03-border">
|
||||
<div v-for="notification in visibleNotifications" :key="notification" class="notification" :class='{"unseen": !notification.seen}'>
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
<div v-if="notification.type === 'favorite'">
|
||||
<h1>
|
||||
<span :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span>
|
||||
<i class="fa icon-star"></i>
|
||||
<i class="fa icon-star lit"></i>
|
||||
<small><router-link :to="{ name: 'conversation', params: { id: notification.status.id } }"><timeago :since="notification.action.created_at" :auto-update="240"></timeago></router-link></small>
|
||||
</h1>
|
||||
<div class="notification-gradient" :style="hiderStyle"></div>
|
||||
|
|
|
|||
|
|
@ -157,6 +157,14 @@ const PostStatusForm = {
|
|||
type (fileInfo) {
|
||||
return fileTypeService.fileType(fileInfo.mimetype)
|
||||
},
|
||||
paste (e) {
|
||||
if (e.clipboardData.files.length > 0) {
|
||||
// Strangely, files property gets emptied after event propagation
|
||||
// Trying to wrap it in array doesn't work. Plus I doubt it's possible
|
||||
// to hold more than one file in clipboard.
|
||||
this.dropFiles = [e.clipboardData.files[0]]
|
||||
}
|
||||
},
|
||||
fileDrop (e) {
|
||||
if (e.dataTransfer.files.length > 0) {
|
||||
e.preventDefault() // allow dropping text like before
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="post-status-form">
|
||||
<form @submit.prevent="postStatus(newStatus)">
|
||||
<div class="form-group base03-border" >
|
||||
<textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize"></textarea>
|
||||
<textarea @click="setCaret" @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" @keydown.meta.enter="postStatus(newStatus)" @keyup.ctrl.enter="postStatus(newStatus)" @drop="fileDrop" @dragover.prevent="fileDrag" @input="resize" @paste="paste"></textarea>
|
||||
</div>
|
||||
<div style="position:relative;" v-if="candidates">
|
||||
<div class="autocomplete-panel base05-background">
|
||||
|
|
@ -26,7 +26,7 @@
|
|||
<i class="icon-cancel" @click="clearError"></i>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<div class="attachment base03-border" v-for="file in newStatus.files">
|
||||
<div class="media-upload-container attachment base03-border" v-for="file in newStatus.files">
|
||||
<i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
|
||||
<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>
|
||||
|
|
@ -41,6 +41,7 @@
|
|||
<script src="./post_status_form.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
.tribute-container {
|
||||
ul {
|
||||
padding: 0px;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div>
|
||||
<i :class='classes' class='icon-retweet fa' v-on:click.prevent='retweet()'></i>
|
||||
<i :class='classes' class='icon-retweet base09' v-on:click.prevent='retweet()'></i>
|
||||
<span v-if='status.repeat_num > 0'>{{status.repeat_num}}</span>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -16,7 +16,7 @@
|
|||
color: $green;
|
||||
}
|
||||
}
|
||||
.retweeted {
|
||||
.icon-retweet.retweeted {
|
||||
color: $green;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<div class='status-actions'>
|
||||
<div>
|
||||
<a href="#" v-on:click.prevent="toggleReplying">
|
||||
<i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
|
||||
<i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<retweet-button :status=status></retweet-button>
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
<div class="media status container muted">
|
||||
<small><router-link :to="{ name: 'user-profile', params: { id: status.user.id } }">{{status.user.screen_name}}</router-link></small>
|
||||
<small class="muteWords">{{muteWordHits.join(', ')}}</small>
|
||||
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="fa icon-eye-off"></i></a>
|
||||
<a href="#" class="unmute" @click.prevent="toggleMute"><i class="base09 icon-eye-off"></i></a>
|
||||
</div>
|
||||
</template>
|
||||
<template v-if="!muted">
|
||||
|
|
@ -75,10 +75,10 @@
|
|||
</h4>
|
||||
</div>
|
||||
<div class="heading-icons">
|
||||
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="fa icon-eye-off"></i></a>
|
||||
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="fa icon-binoculars"></i></a>
|
||||
<a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="base09 icon-eye-off"></i></a>
|
||||
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="base09 icon-binoculars"></i></a>
|
||||
<template v-if="expandable">
|
||||
<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="fa icon-plus-squared"></i></a>
|
||||
<a href="#" @click.prevent="toggleExpanded" class="expand"><i class="base09 icon-plus-squared"></i></a>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,7 +94,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="status-preview status-preview-loading base00-background base03-border" v-else-if="showPreview">
|
||||
<i class="fa icon-spin4 animate-spin"></i>
|
||||
<i class="base09 icon-spin4 animate-spin"></i>
|
||||
</div>
|
||||
|
||||
<div @click.prevent="linkClicked" class="status-content" v-html="status.statusnet_html"></div>
|
||||
|
|
@ -109,7 +109,7 @@
|
|||
<div class='status-actions'>
|
||||
<div>
|
||||
<a href="#" v-on:click.prevent="toggleReplying">
|
||||
<i class="fa icon-reply" :class="{'icon-reply-active': replying}"></i>
|
||||
<i class="base09 icon-reply" :class="{'icon-reply-active': replying}"></i>
|
||||
</a>
|
||||
</div>
|
||||
<retweet-button :status=status></retweet-button>
|
||||
|
|
@ -324,7 +324,7 @@
|
|||
color: $blue;
|
||||
}
|
||||
|
||||
.icon-reply-active {
|
||||
.icon-reply.icon-reply-active {
|
||||
color: $blue;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
import { rgbstr2hex } from '../../services/color_convert/color_convert.js'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
|
|
@ -19,13 +21,6 @@ export default {
|
|||
})
|
||||
},
|
||||
mounted () {
|
||||
const rgbstr2hex = (rgb) => {
|
||||
if (rgb[0] === '#') {
|
||||
return rgb
|
||||
}
|
||||
rgb = rgb.match(/\d+/g)
|
||||
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
|
||||
}
|
||||
this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors['base00'])
|
||||
this.fgColorLocal = rgbstr2hex(this.$store.state.config.colors['base02'])
|
||||
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors['base05'])
|
||||
|
|
|
|||
|
|
@ -29,6 +29,13 @@ const Timeline = {
|
|||
},
|
||||
newStatusCount () {
|
||||
return this.timeline.newStatusCount
|
||||
},
|
||||
newStatusCountStr () {
|
||||
if (this.timeline.flushMarker !== 0) {
|
||||
return ''
|
||||
} else {
|
||||
return ` (${this.newStatusCount})`
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -64,8 +71,14 @@ const Timeline = {
|
|||
},
|
||||
methods: {
|
||||
showNewStatuses () {
|
||||
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
|
||||
this.paused = false
|
||||
if (this.timeline.flushMarker !== 0) {
|
||||
this.$store.commit('clearTimeline', { timeline: this.timelineName })
|
||||
this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 })
|
||||
this.fetchOlderStatuses()
|
||||
} else {
|
||||
this.$store.commit('showNewStatuses', { timeline: this.timelineName })
|
||||
this.paused = false
|
||||
}
|
||||
},
|
||||
fetchOlderStatuses () {
|
||||
const store = this.$store
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
{{title}}
|
||||
</div>
|
||||
<button @click.prevent="showNewStatuses" class="base05 base02-background loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
|
||||
{{$t('timeline.show_new')}} ({{timeline.newStatusCount}})
|
||||
{{$t('timeline.show_new')}}{{newStatusCountStr}}
|
||||
</button>
|
||||
<div @click.prevent class="base06 error loadmore-text" v-if="timelineError">
|
||||
{{$t('timeline.error_fetching')}}
|
||||
|
|
|
|||
|
|
@ -59,13 +59,16 @@
|
|||
}
|
||||
|
||||
.usercard {
|
||||
width: -webkit-fill-available;
|
||||
width: -moz-webkit-fill-available;
|
||||
stretch: fill;
|
||||
width: fill-available;
|
||||
margin: 0.2em 0 0.7em 0;
|
||||
border-radius: 5px;
|
||||
border-radius: 10px;
|
||||
border-style: solid;
|
||||
border-color: inherit;
|
||||
border-width: 1px;
|
||||
overflow: hidden;
|
||||
|
||||
p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
64
src/components/user_card_content/user_card_content.js
Normal file
64
src/components/user_card_content/user_card_content.js
Normal file
|
|
@ -0,0 +1,64 @@
|
|||
import { hex2rgb } from '../../services/color_convert/color_convert.js'
|
||||
|
||||
export default {
|
||||
props: [ 'user', 'switcher' ],
|
||||
computed: {
|
||||
headingStyle () {
|
||||
const color = this.$store.state.config.colors['base00']
|
||||
if (color) {
|
||||
const rgb = hex2rgb(color)
|
||||
console.log(rgb)
|
||||
return {
|
||||
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
|
||||
backgroundImage: `url(${this.user.cover_photo})`
|
||||
}
|
||||
}
|
||||
},
|
||||
bodyStyle () {
|
||||
return {
|
||||
background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
|
||||
}
|
||||
},
|
||||
isOtherUser () {
|
||||
return this.user.id !== this.$store.state.users.currentUser.id
|
||||
},
|
||||
loggedIn () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
dailyAvg () {
|
||||
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
|
||||
return Math.round(this.user.statuses_count / days)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
followUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.followUser(this.user.id)
|
||||
.then((followedUser) => store.commit('addNewUsers', [followedUser]))
|
||||
},
|
||||
unfollowUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.unfollowUser(this.user.id)
|
||||
.then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
|
||||
},
|
||||
blockUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.blockUser(this.user.id)
|
||||
.then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
|
||||
},
|
||||
unblockUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.unblockUser(this.user.id)
|
||||
.then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
|
||||
},
|
||||
toggleMute () {
|
||||
const store = this.$store
|
||||
store.commit('setMuted', {user: this.user, muted: !this.user.muted})
|
||||
store.state.api.backendInteractor.setUserMute(this.user)
|
||||
},
|
||||
setProfileView (v) {
|
||||
const store = this.$store
|
||||
store.commit('setProfileView', { v })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -84,69 +84,7 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: [ 'user', 'switcher' ],
|
||||
computed: {
|
||||
headingStyle () {
|
||||
let color = this.$store.state.config.colors['base00']
|
||||
if (color) {
|
||||
let rgb = this.$store.state.config.colors['base00'].match(/\d+/g)
|
||||
return {
|
||||
backgroundColor: `rgb(${Math.floor(rgb[0] * 0.53)}, ${Math.floor(rgb[1] * 0.56)}, ${Math.floor(rgb[2] * 0.59)})`,
|
||||
backgroundImage: `url(${this.user.cover_photo})`
|
||||
}
|
||||
}
|
||||
},
|
||||
bodyStyle () {
|
||||
return {
|
||||
background: `linear-gradient(to bottom, rgba(0, 0, 0, 0), ${this.$store.state.config.colors['base00']} 80%)`
|
||||
}
|
||||
},
|
||||
isOtherUser () {
|
||||
return this.user.id !== this.$store.state.users.currentUser.id
|
||||
},
|
||||
loggedIn () {
|
||||
return this.$store.state.users.currentUser
|
||||
},
|
||||
dailyAvg () {
|
||||
const days = Math.ceil((new Date() - new Date(this.user.created_at)) / (60 * 60 * 24 * 1000))
|
||||
return Math.round(this.user.statuses_count / days)
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
followUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.followUser(this.user.id)
|
||||
.then((followedUser) => store.commit('addNewUsers', [followedUser]))
|
||||
},
|
||||
unfollowUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.unfollowUser(this.user.id)
|
||||
.then((unfollowedUser) => store.commit('addNewUsers', [unfollowedUser]))
|
||||
},
|
||||
blockUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.blockUser(this.user.id)
|
||||
.then((blockedUser) => store.commit('addNewUsers', [blockedUser]))
|
||||
},
|
||||
unblockUser () {
|
||||
const store = this.$store
|
||||
store.state.api.backendInteractor.unblockUser(this.user.id)
|
||||
.then((unblockedUser) => store.commit('addNewUsers', [unblockedUser]))
|
||||
},
|
||||
toggleMute () {
|
||||
const store = this.$store
|
||||
store.commit('setMuted', {user: this.user, muted: !this.user.muted})
|
||||
store.state.api.backendInteractor.setUserMute(this.user)
|
||||
},
|
||||
setProfileView (v) {
|
||||
const store = this.$store
|
||||
store.commit('setProfileView', { v })
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="./user_card_content.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
|
@ -164,7 +102,6 @@
|
|||
.profile-panel-body {
|
||||
top: -0em;
|
||||
padding-top: 4em;
|
||||
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,7 +22,7 @@
|
|||
<div>
|
||||
<input type="file" @change="uploadFile(0, $event)" ></input>
|
||||
</div>
|
||||
<i class="fa icon-spin4 animate-spin" v-if="uploading[0]"></i>
|
||||
<i class="base09 icon-spin4 animate-spin" v-if="uploading[0]"></i>
|
||||
<button class="btn btn-default base05 base02-background" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
<div>
|
||||
<input type="file" @change="uploadFile(1, $event)" ></input>
|
||||
</div>
|
||||
<i class="fa icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
|
||||
<i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
|
||||
<button class="btn btn-default base05 base02-background" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
|
|
@ -46,7 +46,7 @@
|
|||
<div>
|
||||
<input type="file" @change="uploadFile(2, $event)" ></input>
|
||||
</div>
|
||||
<i class="fa icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
|
||||
<i class="base09 icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
|
||||
<button class="btn btn-default base05 base02-background" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,9 @@
|
|||
const de = {
|
||||
chat: {
|
||||
title: 'Chat'
|
||||
},
|
||||
nav: {
|
||||
chat: 'Lokaler Chat',
|
||||
timeline: 'Zeitleiste',
|
||||
mentions: 'Erwähnungen',
|
||||
public_tl: 'Lokale Zeitleiste',
|
||||
|
|
@ -179,7 +183,11 @@ const fi = {
|
|||
}
|
||||
|
||||
const en = {
|
||||
chat: {
|
||||
title: 'Chat'
|
||||
},
|
||||
nav: {
|
||||
chat: 'Local Chat',
|
||||
timeline: 'Timeline',
|
||||
mentions: 'Mentions',
|
||||
public_tl: 'Public Timeline',
|
||||
|
|
|
|||
103
src/main.js
103
src/main.js
|
|
@ -12,11 +12,13 @@ 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 Chat from './components/chat/chat.vue'
|
||||
|
||||
import statusesModule from './modules/statuses.js'
|
||||
import usersModule from './modules/users.js'
|
||||
import apiModule from './modules/api.js'
|
||||
import configModule from './modules/config.js'
|
||||
import chatModule from './modules/chat.js'
|
||||
|
||||
import VueTimeago from 'vue-timeago'
|
||||
import VueI18n from 'vue-i18n'
|
||||
|
|
@ -57,35 +59,12 @@ const store = new Vuex.Store({
|
|||
statuses: statusesModule,
|
||||
users: usersModule,
|
||||
api: apiModule,
|
||||
config: configModule
|
||||
config: configModule,
|
||||
chat: chatModule
|
||||
},
|
||||
plugins: [createPersistedState(persistedStateOptions)],
|
||||
strict: process.env.NODE_ENV !== 'production'
|
||||
})
|
||||
|
||||
const routes = [
|
||||
{ name: 'root', path: '/', redirect: '/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: 'settings', path: '/settings', component: Settings },
|
||||
{ name: 'registration', path: '/registration', component: Registration },
|
||||
{ name: 'user-settings', path: '/user-settings', component: UserSettings }
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes,
|
||||
scrollBehavior: (to, from, savedPosition) => {
|
||||
if (to.matched.some(m => m.meta.dontScroll)) {
|
||||
return false
|
||||
}
|
||||
return savedPosition || { x: 0, y: 0 }
|
||||
}
|
||||
strict: false // Socket modifies itself, let's ignore this for now.
|
||||
// strict: process.env.NODE_ENV !== 'production'
|
||||
})
|
||||
|
||||
const i18n = new VueI18n({
|
||||
|
|
@ -94,23 +73,53 @@ const i18n = new VueI18n({
|
|||
messages
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
|
||||
window.fetch('/static/config.json')
|
||||
.then((res) => res.json())
|
||||
.then(({name, theme, background, logo, registrationOpen}) => {
|
||||
.then((data) => {
|
||||
const {name, theme, background, logo, registrationOpen} = data
|
||||
store.dispatch('setOption', { name: 'name', value: name })
|
||||
store.dispatch('setOption', { name: 'theme', value: theme })
|
||||
store.dispatch('setOption', { name: 'background', value: background })
|
||||
store.dispatch('setOption', { name: 'logo', value: logo })
|
||||
store.dispatch('setOption', { name: 'registrationOpen', value: registrationOpen })
|
||||
if (data['chatDisabled']) {
|
||||
store.dispatch('disableChat')
|
||||
}
|
||||
|
||||
const routes = [
|
||||
{ name: 'root', path: '/', redirect: data['defaultPath'] || '/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: 'settings', path: '/settings', component: Settings },
|
||||
{ name: 'registration', path: '/registration', component: Registration },
|
||||
{ name: 'user-settings', path: '/user-settings', component: UserSettings },
|
||||
{ name: 'chat', path: '/chat', component: Chat }
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
routes,
|
||||
scrollBehavior: (to, from, savedPosition) => {
|
||||
if (to.matched.some(m => m.meta.dontScroll)) {
|
||||
return false
|
||||
}
|
||||
return savedPosition || { x: 0, y: 0 }
|
||||
}
|
||||
})
|
||||
|
||||
/* eslint-disable no-new */
|
||||
new Vue({
|
||||
router,
|
||||
store,
|
||||
i18n,
|
||||
el: '#app',
|
||||
render: h => h(App)
|
||||
})
|
||||
})
|
||||
|
||||
window.fetch('/static/terms-of-service.html')
|
||||
|
|
@ -120,13 +129,19 @@ window.fetch('/static/terms-of-service.html')
|
|||
})
|
||||
|
||||
window.fetch('/api/pleroma/emoji.json')
|
||||
.then((res) => res.json())
|
||||
.then((values) => {
|
||||
const emoji = Object.keys(values).map((key) => {
|
||||
return { shortcode: key, image_url: values[key] }
|
||||
})
|
||||
store.dispatch('setOption', { name: 'customEmoji', value: emoji })
|
||||
})
|
||||
.then(
|
||||
(res) => res.json()
|
||||
.then(
|
||||
(values) => {
|
||||
const emoji = Object.keys(values).map((key) => {
|
||||
return { shortcode: key, image_url: values[key] }
|
||||
})
|
||||
store.dispatch('setOption', { name: 'emoji', value: emoji })
|
||||
},
|
||||
(failure) => {}
|
||||
),
|
||||
(error) => console.log(error)
|
||||
)
|
||||
|
||||
window.fetch('/static/emoji.json')
|
||||
.then((res) => res.json())
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js'
|
||||
import {isArray} from 'lodash'
|
||||
import { Socket } from 'phoenix'
|
||||
|
||||
const api = {
|
||||
state: {
|
||||
backendInteractor: backendInteractorService(),
|
||||
fetchers: {}
|
||||
fetchers: {},
|
||||
socket: null,
|
||||
chatDisabled: false
|
||||
},
|
||||
mutations: {
|
||||
setBackendInteractor (state, backendInteractor) {
|
||||
|
|
@ -15,6 +18,12 @@ const api = {
|
|||
},
|
||||
removeFetcher (state, {timeline}) {
|
||||
delete state.fetchers[timeline]
|
||||
},
|
||||
setSocket (state, socket) {
|
||||
state.socket = socket
|
||||
},
|
||||
setChatDisabled (state, value) {
|
||||
state.chatDisabled = value
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
|
|
@ -37,6 +46,17 @@ const api = {
|
|||
const fetcher = store.state.fetchers[timeline]
|
||||
window.clearInterval(fetcher)
|
||||
store.commit('removeFetcher', {timeline})
|
||||
},
|
||||
initializeSocket (store, token) {
|
||||
// Set up websocket connection
|
||||
if (!store.state.chatDisabled) {
|
||||
let socket = new Socket('/socket', {params: {token: token}})
|
||||
socket.connect()
|
||||
store.dispatch('initializeChat', socket)
|
||||
}
|
||||
},
|
||||
disableChat (store) {
|
||||
store.commit('setChatDisabled', true)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
33
src/modules/chat.js
Normal file
33
src/modules/chat.js
Normal file
|
|
@ -0,0 +1,33 @@
|
|||
const chat = {
|
||||
state: {
|
||||
messages: [],
|
||||
channel: null
|
||||
},
|
||||
mutations: {
|
||||
setChannel (state, channel) {
|
||||
state.channel = channel
|
||||
},
|
||||
addMessage (state, message) {
|
||||
state.messages.push(message)
|
||||
state.messages = state.messages.slice(-19, 20)
|
||||
},
|
||||
setMessages (state, messages) {
|
||||
state.messages = messages.slice(-19, 20)
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
initializeChat (store, socket) {
|
||||
const channel = socket.channel('chat:public')
|
||||
channel.on('new_msg', (msg) => {
|
||||
store.commit('addMessage', msg)
|
||||
})
|
||||
channel.on('messages', ({messages}) => {
|
||||
store.commit('setMessages', messages)
|
||||
})
|
||||
channel.join()
|
||||
store.commit('setChannel', channel)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default chat
|
||||
|
|
@ -22,7 +22,8 @@ export const defaultState = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
},
|
||||
public: {
|
||||
statuses: [],
|
||||
|
|
@ -36,7 +37,8 @@ export const defaultState = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
},
|
||||
user: {
|
||||
statuses: [],
|
||||
|
|
@ -50,7 +52,8 @@ export const defaultState = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
},
|
||||
publicAndExternal: {
|
||||
statuses: [],
|
||||
|
|
@ -64,7 +67,8 @@ export const defaultState = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
},
|
||||
friends: {
|
||||
statuses: [],
|
||||
|
|
@ -78,7 +82,8 @@ export const defaultState = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
},
|
||||
tag: {
|
||||
statuses: [],
|
||||
|
|
@ -92,7 +97,8 @@ export const defaultState = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -381,7 +387,8 @@ export const mutations = {
|
|||
loading: false,
|
||||
followers: [],
|
||||
friends: [],
|
||||
viewing: 'statuses'
|
||||
viewing: 'statuses',
|
||||
flushMarker: 0
|
||||
}
|
||||
|
||||
state.timelines[timeline] = emptyTimeline
|
||||
|
|
@ -422,6 +429,9 @@ export const mutations = {
|
|||
each(notifications, (notification) => {
|
||||
notification.seen = true
|
||||
})
|
||||
},
|
||||
queueFlush (state, { timeline, id }) {
|
||||
state.timelines[timeline].flushMarker = id
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -458,6 +468,9 @@ const statuses = {
|
|||
// Optimistic retweeting...
|
||||
commit('setRetweeted', { status, value: true })
|
||||
apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials })
|
||||
},
|
||||
queueFlush ({ rootState, commit }, { timeline, id }) {
|
||||
commit('queueFlush', { timeline, id })
|
||||
}
|
||||
},
|
||||
mutations
|
||||
|
|
|
|||
|
|
@ -97,6 +97,10 @@ const users = {
|
|||
// Set our new backend interactor
|
||||
commit('setBackendInteractor', backendInteractorService(userCredentials))
|
||||
|
||||
if (user.token) {
|
||||
store.dispatch('initializeSocket', user.token)
|
||||
}
|
||||
|
||||
// Start getting fresh tweets.
|
||||
store.dispatch('startFetching', 'friends')
|
||||
|
||||
|
|
|
|||
|
|
@ -43,6 +43,16 @@ let fetch = (url, options) => {
|
|||
return oldfetch(fullUrl, options)
|
||||
}
|
||||
|
||||
// from https://developer.mozilla.org/en-US/docs/Web/API/WindowBase64/Base64_encoding_and_decoding
|
||||
let utoa = (str) => {
|
||||
// first we use encodeURIComponent to get percent-encoded UTF-8,
|
||||
// then we convert the percent encodings into raw bytes which
|
||||
// can be fed into btoa.
|
||||
return btoa(encodeURIComponent(str)
|
||||
.replace(/%([0-9A-F]{2})/g,
|
||||
(match, p1) => { return String.fromCharCode('0x' + p1) }))
|
||||
}
|
||||
|
||||
// Params
|
||||
// cropH
|
||||
// cropW
|
||||
|
|
@ -156,7 +166,7 @@ const register = (params) => {
|
|||
|
||||
const authHeaders = (user) => {
|
||||
if (user && user.username && user.password) {
|
||||
return { 'Authorization': `Basic ${btoa(`${user.username}:${user.password}`)}` }
|
||||
return { 'Authorization': `Basic ${utoa(`${user.username}:${user.password}`)}` }
|
||||
} else {
|
||||
return { }
|
||||
}
|
||||
|
|
@ -281,6 +291,8 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use
|
|||
url += `/${tag}.json`
|
||||
}
|
||||
|
||||
params.push(['count', 20])
|
||||
|
||||
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
|
||||
url += `?${queryString}`
|
||||
|
||||
|
|
|
|||
34
src/services/color_convert/color_convert.js
Normal file
34
src/services/color_convert/color_convert.js
Normal file
|
|
@ -0,0 +1,34 @@
|
|||
import { map } from 'lodash'
|
||||
|
||||
const rgb2hex = (r, g, b) => {
|
||||
[r, g, b] = map([r, g, b], (val) => {
|
||||
val = Math.ceil(val)
|
||||
val = val < 0 ? 0 : val
|
||||
val = val > 255 ? 255 : val
|
||||
return val
|
||||
})
|
||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
|
||||
}
|
||||
|
||||
const hex2rgb = (hex) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null
|
||||
}
|
||||
|
||||
const rgbstr2hex = (rgb) => {
|
||||
if (rgb[0] === '#') {
|
||||
return rgb
|
||||
}
|
||||
rgb = rgb.match(/\d+/g)
|
||||
return `#${((Number(rgb[0]) << 16) + (Number(rgb[1]) << 8) + Number(rgb[2])).toString(16)}`
|
||||
}
|
||||
|
||||
export {
|
||||
rgb2hex,
|
||||
hex2rgb,
|
||||
rgbstr2hex
|
||||
}
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
import { times, map } from 'lodash'
|
||||
import { times } from 'lodash'
|
||||
import { rgb2hex, hex2rgb } from '../color_convert/color_convert.js'
|
||||
|
||||
// While this is not used anymore right now, I left it in if we want to do custom
|
||||
// styles that aren't just colors, so user can pick from a few different distinct
|
||||
|
|
@ -56,16 +57,6 @@ const setStyle = (href, commit) => {
|
|||
cssEl.addEventListener('load', setDynamic)
|
||||
}
|
||||
|
||||
const rgb2hex = (r, g, b) => {
|
||||
[r, g, b] = map([r, g, b], (val) => {
|
||||
val = Math.ceil(val)
|
||||
val = val < 0 ? 0 : val
|
||||
val = val > 255 ? 255 : val
|
||||
return val
|
||||
})
|
||||
return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
|
||||
}
|
||||
|
||||
const setColors = (col, commit) => {
|
||||
const head = document.head
|
||||
const body = document.body
|
||||
|
|
@ -82,6 +73,7 @@ const setColors = (col, commit) => {
|
|||
if (isDark) {
|
||||
mod = mod * -1
|
||||
}
|
||||
|
||||
colors['base00'] = rgb2hex(col.bg.r, col.bg.g, col.bg.b) // background
|
||||
colors['base01'] = rgb2hex((col.bg.r + col.fg.r) / 2, (col.bg.g + col.fg.g) / 2, (col.bg.b + col.fg.b) / 2) // hilighted bg
|
||||
colors['base02'] = rgb2hex(col.fg.r, col.fg.g, col.fg.b) // panels & buttons
|
||||
|
|
@ -91,11 +83,13 @@ const setColors = (col, commit) => {
|
|||
colors['base06'] = rgb2hex(col.text.r - mod, col.text.g - mod, col.text.b - mod) // strong text
|
||||
colors['base07'] = rgb2hex(col.text.r - mod * 2, col.text.g - mod * 2, col.text.b - mod * 2)
|
||||
colors['base08'] = rgb2hex(col.link.r, col.link.g, col.link.b) // links
|
||||
colors['base09'] = rgb2hex((col.bg.r + col.text.r) / 2, (col.bg.g + col.text.g) / 2, (col.bg.b + col.text.b) / 2) // icons
|
||||
|
||||
times(9, (n) => {
|
||||
const color = colors[`base0${8 - n}`]
|
||||
styleSheet.insertRule(`.base0${8 - n} { color: ${color}`, 'index-max')
|
||||
styleSheet.insertRule(`.base0${8 - n}-background { background-color: ${color}`, 'index-max')
|
||||
const num = 10
|
||||
times(num, (n) => {
|
||||
const color = colors[`base0${num - 1 - n}`]
|
||||
styleSheet.insertRule(`.base0${num - 1 - n} { color: ${color}`, 'index-max')
|
||||
styleSheet.insertRule(`.base0${num - 1 - n}-background { background-color: ${color}`, 'index-max')
|
||||
})
|
||||
|
||||
styleSheet.insertRule(`a { color: ${colors['base08']}`, 'index-max')
|
||||
|
|
@ -108,15 +102,6 @@ const setColors = (col, commit) => {
|
|||
commit('setOption', { name: 'customTheme', value: col })
|
||||
}
|
||||
|
||||
const hex2rgb = (hex) => {
|
||||
const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
|
||||
return result ? {
|
||||
r: parseInt(result[1], 16),
|
||||
g: parseInt(result[2], 16),
|
||||
b: parseInt(result[3], 16)
|
||||
} : null
|
||||
}
|
||||
|
||||
const setPreset = (val, commit) => {
|
||||
window.fetch('/static/styles.json')
|
||||
.then((data) => data.json())
|
||||
|
|
|
|||
|
|
@ -29,12 +29,19 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false
|
|||
args['tag'] = tag
|
||||
|
||||
return apiService.fetchTimeline(args)
|
||||
.then((statuses) => update({store, statuses, timeline, showImmediately}),
|
||||
() => store.dispatch('setError', { value: true }))
|
||||
.then((statuses) => {
|
||||
if (!older && statuses.length >= 20) {
|
||||
store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
|
||||
}
|
||||
update({store, statuses, timeline, showImmediately})
|
||||
}, () => store.dispatch('setError', { value: true }))
|
||||
}
|
||||
|
||||
const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => {
|
||||
fetchAndUpdate({timeline, credentials, store, showImmediately: true, userId, tag})
|
||||
const rootState = store.rootState || store.state
|
||||
const timelineData = rootState.statuses.timelines[camelCase(timeline)]
|
||||
const showImmediately = timelineData.visibleStatuses.length === 0
|
||||
fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag})
|
||||
const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag })
|
||||
return setInterval(boundFetchAndUpdate, 10000)
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,5 +3,7 @@
|
|||
"theme": "pleroma-dark",
|
||||
"background": "/static/bg.jpg",
|
||||
"logo": "/static/logo.png",
|
||||
"registrationOpen": false
|
||||
"registrationOpen": false,
|
||||
"defaultPath": "/main/all",
|
||||
"chatDisabled": false
|
||||
}
|
||||
|
|
|
|||
|
|
@ -4226,6 +4226,10 @@ phantomjs-prebuilt@^2.1.3, phantomjs-prebuilt@^2.1.7:
|
|||
request-progress "~2.0.1"
|
||||
which "~1.2.10"
|
||||
|
||||
phoenix@^1.3.0:
|
||||
version "1.3.0"
|
||||
resolved "https://registry.yarnpkg.com/phoenix/-/phoenix-1.3.0.tgz#1df2c27f986ee295e37c9983ec28ebac1d7f4a3e"
|
||||
|
||||
pify@^2.0.0:
|
||||
version "2.3.0"
|
||||
resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
|
||||
|
|
|
|||
Loading…
Reference in a new issue