# Conflicts: # src/components/settings_modal/tabs/general_tab.vueremove-mods-files
commit
272b748f26
@ -0,0 +1,17 @@
|
||||
@mixin unfocused-style {
|
||||
@content;
|
||||
|
||||
&:focus:not(:focus-visible):not(:hover) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin focused-style {
|
||||
&:hover, &:focus {
|
||||
@content;
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
@content;
|
||||
}
|
||||
}
|
After Width: | Height: | Size: 396 KiB |
After Width: | Height: | Size: 521 KiB |
@ -0,0 +1,32 @@
|
||||
import ListsCard from '../lists_card/lists_card.vue'
|
||||
import ListsNew from '../lists_new/lists_new.vue'
|
||||
|
||||
const Lists = {
|
||||
data () {
|
||||
return {
|
||||
isNew: false
|
||||
}
|
||||
},
|
||||
components: {
|
||||
ListsCard,
|
||||
ListsNew
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('startFetchingLists')
|
||||
},
|
||||
computed: {
|
||||
lists () {
|
||||
return this.$store.state.lists.allLists
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelNewList () {
|
||||
this.isNew = false
|
||||
},
|
||||
newList () {
|
||||
this.isNew = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Lists
|
@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<div v-if="isNew">
|
||||
<ListsNew @cancel="cancelNewList" />
|
||||
</div>
|
||||
<div
|
||||
v-else
|
||||
class="settings panel panel-default"
|
||||
>
|
||||
<div class="panel-heading">
|
||||
<div class="title">
|
||||
{{ $t('lists.lists') }}
|
||||
</div>
|
||||
<button
|
||||
class="button-default"
|
||||
@click="newList"
|
||||
>
|
||||
{{ $t("lists.new") }}
|
||||
</button>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<ListsCard
|
||||
v-for="list in lists.slice().reverse()"
|
||||
:key="list"
|
||||
:list="list"
|
||||
class="list-item"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists.js"></script>
|
@ -0,0 +1,16 @@
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faEllipsisH
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faEllipsisH
|
||||
)
|
||||
|
||||
const ListsCard = {
|
||||
props: [
|
||||
'list'
|
||||
]
|
||||
}
|
||||
|
||||
export default ListsCard
|
@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<div class="list-card">
|
||||
<router-link
|
||||
:to="{ name: 'lists-timeline', params: { id: list.id } }"
|
||||
class="list-name"
|
||||
>
|
||||
{{ list.title }}
|
||||
</router-link>
|
||||
<router-link
|
||||
:to="{ name: 'lists-edit', params: { id: list.id } }"
|
||||
class="button-list-edit"
|
||||
>
|
||||
<FAIcon
|
||||
class="fa-scale-110 fa-old-padding"
|
||||
icon="ellipsis-h"
|
||||
/>
|
||||
</router-link>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_card.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list-card {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.list-name,
|
||||
.button-list-edit {
|
||||
margin: 0;
|
||||
padding: 1em;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
|
||||
&:hover {
|
||||
background-color: $fallback--lightBg;
|
||||
background-color: var(--selectedMenu, $fallback--lightBg);
|
||||
color: $fallback--link;
|
||||
color: var(--selectedMenuText, $fallback--link);
|
||||
--faint: var(--selectedMenuFaintText, $fallback--faint);
|
||||
--faintLink: var(--selectedMenuFaintLink, $fallback--faint);
|
||||
--lightText: var(--selectedMenuLightText, $fallback--lightText);
|
||||
}
|
||||
}
|
||||
|
||||
.list-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,91 @@
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const ListsNew = {
|
||||
components: {
|
||||
BasicUserCard,
|
||||
UserAvatar,
|
||||
ListsUserSearch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '',
|
||||
userIds: [],
|
||||
selectedUserIds: []
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.$store.dispatch('fetchList', { id: this.id })
|
||||
.then(() => { this.title = this.findListTitle(this.id) })
|
||||
this.$store.dispatch('fetchListAccounts', { id: this.id })
|
||||
.then(() => {
|
||||
this.selectedUserIds = this.findListAccounts(this.id)
|
||||
this.selectedUserIds.forEach(userId => {
|
||||
this.$store.dispatch('fetchUserIfMissing', userId)
|
||||
})
|
||||
})
|
||||
},
|
||||
computed: {
|
||||
id () {
|
||||
return this.$route.params.id
|
||||
},
|
||||
users () {
|
||||
return this.userIds.map(userId => this.findUser(userId))
|
||||
},
|
||||
selectedUsers () {
|
||||
return this.selectedUserIds.map(userId => this.findUser(userId)).filter(user => user)
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser
|
||||
}),
|
||||
...mapGetters(['findUser', 'findListTitle', 'findListAccounts'])
|
||||
},
|
||||
methods: {
|
||||
onInput () {
|
||||
this.search(this.query)
|
||||
},
|
||||
selectUser (user) {
|
||||
if (this.selectedUserIds.includes(user.id)) {
|
||||
this.removeUser(user.id)
|
||||
} else {
|
||||
this.addUser(user)
|
||||
}
|
||||
},
|
||||
isSelected (user) {
|
||||
return this.selectedUserIds.includes(user.id)
|
||||
},
|
||||
addUser (user) {
|
||||
this.selectedUserIds.push(user.id)
|
||||
},
|
||||
removeUser (userId) {
|
||||
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
|
||||
},
|
||||
onResults (results) {
|
||||
this.userIds = results
|
||||
},
|
||||
updateList () {
|
||||
this.$store.dispatch('setList', { id: this.id, title: this.title })
|
||||
this.$store.dispatch('setListAccounts', { id: this.id, accountIds: this.selectedUserIds })
|
||||
|
||||
this.$router.push({ name: 'lists-timeline', params: { id: this.id } })
|
||||
},
|
||||
deleteList () {
|
||||
this.$store.dispatch('deleteList', { id: this.id })
|
||||
this.$router.push({ name: 'lists' })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsNew
|
@ -0,0 +1,108 @@
|
||||
<template>
|
||||
<div class="panel-default panel list-edit">
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="$router.back"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
ref="title"
|
||||
v-model="title"
|
||||
:placeholder="$t('lists.title')"
|
||||
>
|
||||
</div>
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in selectedUsers"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ListsUserSearch @results="onResults" />
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
:disabled="title && title.length === 0"
|
||||
class="btn button-default"
|
||||
@click="updateList"
|
||||
>
|
||||
{{ $t('lists.save') }}
|
||||
</button>
|
||||
<button
|
||||
class="btn button-default"
|
||||
@click="deleteList"
|
||||
>
|
||||
{{ $t('lists.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_edit.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list-edit {
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
margin: 0.7em 0.5em 0.7em 0.5em;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.basic-user-card:hover,
|
||||
.basic-user-card.selected {
|
||||
cursor: pointer;
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,33 @@
|
||||
import { mapState } from 'vuex'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faUsers,
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faUsers,
|
||||
faGlobe,
|
||||
faBookmark,
|
||||
faEnvelope,
|
||||
faHome
|
||||
)
|
||||
|
||||
const ListsMenuContent = {
|
||||
created () {
|
||||
this.$store.dispatch('startFetchingLists')
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
lists: state => state.lists.allLists,
|
||||
currentUser: state => state.users.currentUser,
|
||||
privateMode: state => state.instance.private,
|
||||
federating: state => state.instance.federating
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsMenuContent
|
@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<ul>
|
||||
<li
|
||||
v-for="list in lists.slice().reverse()"
|
||||
:key="list.id"
|
||||
>
|
||||
<router-link
|
||||
class="menu-item"
|
||||
:to="{ name: 'lists-timeline', params: { id: list.id } }"
|
||||
>
|
||||
{{ list.title }}
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<script src="./lists_menu_content.js"></script>
|
@ -0,0 +1,79 @@
|
||||
import { mapState, mapGetters } from 'vuex'
|
||||
import BasicUserCard from '../basic_user_card/basic_user_card.vue'
|
||||
import UserAvatar from '../user_avatar/user_avatar.vue'
|
||||
import ListsUserSearch from '../lists_user_search/lists_user_search.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const ListsNew = {
|
||||
components: {
|
||||
BasicUserCard,
|
||||
UserAvatar,
|
||||
ListsUserSearch
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
title: '',
|
||||
userIds: [],
|
||||
selectedUserIds: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
users () {
|
||||
return this.userIds.map(userId => this.findUser(userId))
|
||||
},
|
||||
selectedUsers () {
|
||||
return this.selectedUserIds.map(userId => this.findUser(userId))
|
||||
},
|
||||
...mapState({
|
||||
currentUser: state => state.users.currentUser
|
||||
}),
|
||||
...mapGetters(['findUser'])
|
||||
},
|
||||
methods: {
|
||||
goBack () {
|
||||
this.$emit('cancel')
|
||||
},
|
||||
onInput () {
|
||||
this.search(this.query)
|
||||
},
|
||||
selectUser (user) {
|
||||
if (this.selectedUserIds.includes(user.id)) {
|
||||
this.removeUser(user.id)
|
||||
} else {
|
||||
this.addUser(user)
|
||||
}
|
||||
},
|
||||
isSelected (user) {
|
||||
return this.selectedUserIds.includes(user.id)
|
||||
},
|
||||
addUser (user) {
|
||||
this.selectedUserIds.push(user.id)
|
||||
},
|
||||
removeUser (userId) {
|
||||
this.selectedUserIds = this.selectedUserIds.filter(id => id !== userId)
|
||||
},
|
||||
onResults (results) {
|
||||
this.userIds = results
|
||||
},
|
||||
createList () {
|
||||
// the API has two different endpoints for "creating a list with a name"
|
||||
// and "updating the accounts on the list".
|
||||
this.$store.dispatch('createList', { title: this.title })
|
||||
.then((list) => {
|
||||
this.$store.dispatch('setListAccounts', { id: list.id, accountIds: this.selectedUserIds })
|
||||
this.$router.push({ name: 'lists-timeline', params: { id: list.id } })
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsNew
|
@ -0,0 +1,95 @@
|
||||
<template>
|
||||
<div class="panel-default panel list-new">
|
||||
<div
|
||||
ref="header"
|
||||
class="panel-heading"
|
||||
>
|
||||
<button
|
||||
class="button-unstyled go-back-button"
|
||||
@click="goBack"
|
||||
>
|
||||
<FAIcon
|
||||
size="lg"
|
||||
icon="chevron-left"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<input
|
||||
ref="title"
|
||||
v-model="title"
|
||||
:placeholder="$t('lists.title')"
|
||||
>
|
||||
</div>
|
||||
|
||||
<div class="member-list">
|
||||
<div
|
||||
v-for="user in selectedUsers"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<ListsUserSearch
|
||||
@results="onResults"
|
||||
/>
|
||||
<div
|
||||
v-for="user in users"
|
||||
:key="user.id"
|
||||
class="member"
|
||||
>
|
||||
<BasicUserCard
|
||||
:user="user"
|
||||
:class="isSelected(user) ? 'selected' : ''"
|
||||
@click.capture.prevent="selectUser(user)"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button
|
||||
:disabled="title && title.length === 0"
|
||||
class="btn button-default"
|
||||
@click="createList"
|
||||
>
|
||||
{{ $t('lists.create') }}
|
||||
</button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_new.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.list-new {
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.member-list {
|
||||
padding-bottom: 0.7rem;
|
||||
}
|
||||
|
||||
.basic-user-card:hover,
|
||||
.basic-user-card.selected {
|
||||
cursor: pointer;
|
||||
background-color: var(--selectedPost, $fallback--lightBg);
|
||||
}
|
||||
|
||||
.go-back-button {
|
||||
text-align: center;
|
||||
line-height: 1;
|
||||
height: 100%;
|
||||
align-self: start;
|
||||
width: var(--__panel-heading-height-inner);
|
||||
}
|
||||
|
||||
.btn {
|
||||
margin: 0.5em;
|
||||
}
|
||||
}
|
||||
</style>
|
@ -0,0 +1,36 @@
|
||||
import Timeline from '../timeline/timeline.vue'
|
||||
const ListsTimeline = {
|
||||
data () {
|
||||
return {
|
||||
listId: null
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Timeline
|
||||
},
|
||||
computed: {
|
||||
timeline () { return this.$store.state.statuses.timelines.list }
|
||||
},
|
||||
watch: {
|
||||
$route: function (route) {
|
||||
if (route.name === 'lists-timeline' && route.params.id !== this.listId) {
|
||||
this.listId = route.params.id
|
||||
this.$store.dispatch('stopFetchingTimeline', 'list')
|
||||
this.$store.commit('clearTimeline', { timeline: 'list' })
|
||||
this.$store.dispatch('fetchList', { id: this.listId })
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
|
||||
}
|
||||
}
|
||||
},
|
||||
created () {
|
||||
this.listId = this.$route.params.id
|
||||
this.$store.dispatch('fetchList', { id: this.listId })
|
||||
this.$store.dispatch('startFetchingTimeline', { timeline: 'list', listId: this.listId })
|
||||
},
|
||||
unmounted () {
|
||||
this.$store.dispatch('stopFetchingTimeline', 'list')
|
||||
this.$store.commit('clearTimeline', { timeline: 'list' })
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsTimeline
|
@ -0,0 +1,10 @@
|
||||
<template>
|
||||
<Timeline
|
||||
title="list.name"
|
||||
:timeline="timeline"
|
||||
:list-id="listId"
|
||||
timeline-name="list"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script src="./lists_timeline.js"></script>
|
@ -0,0 +1,46 @@
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import {
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
import { debounce } from 'lodash'
|
||||
import Checkbox from '../checkbox/checkbox.vue'
|
||||
|
||||
library.add(
|
||||
faSearch,
|
||||
faChevronLeft
|
||||
)
|
||||
|
||||
const ListsUserSearch = {
|
||||
components: {
|
||||
Checkbox
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
loading: false,
|
||||
query: '',
|
||||
followingOnly: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInput: debounce(function () {
|
||||
this.search(this.query)
|
||||
}, 2000),
|
||||
search (query) {
|
||||
if (!query) {
|
||||
this.loading = false
|
||||
return
|
||||
}
|
||||
|
||||
this.loading = true
|
||||
this.userIds = []
|
||||
this.$store.dispatch('search', { q: query, resolve: true, type: 'accounts', following: this.followingOnly })
|
||||
.then(data => {
|
||||
this.loading = false
|
||||
this.$emit('results', data.accounts.map(a => a.id))
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default ListsUserSearch
|
@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="input-wrap">
|
||||
<div class="input-search">
|
||||
<FAIcon
|
||||
class="search-icon fa-scale-110 fa-old-padding"
|
||||
icon="search"
|
||||
/>
|
||||
</div>
|
||||
<input
|
||||
ref="search"
|
||||
v-model="query"
|
||||
:placeholder="$t('lists.search')"
|
||||
@input="onInput"
|
||||
>
|
||||
</div>
|
||||
<div class="input-wrap">
|
||||
<Checkbox
|
||||
v-model="followingOnly"
|
||||
@change="onInput"
|
||||
>
|
||||
{{ $t('lists.following_only') }}
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./lists_user_search.js"></script>
|
||||
<style lang="scss">
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.input-wrap {
|
||||
display: flex;
|
||||
margin: 0.7em 0.5em 0.7em 0.5em;
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.search-icon {
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
</style>
|
@ -0,0 +1,34 @@
|
||||
import Select from '../select/select.vue'
|
||||
import StatusContent from '../status_content/status_content.vue'
|
||||
import Timeago from '../timeago/timeago.vue'
|
||||
import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator'
|
||||
|
||||
const Report = {
|
||||
props: [
|
||||
'reportId'
|
||||
],
|
||||
components: {
|
||||
Select,
|
||||
StatusContent,
|
||||
Timeago
|
||||
},
|
||||
computed: {
|
||||
report () {
|
||||
return this.$store.state.reports.reports[this.reportId] || {}
|
||||
},
|
||||
state: {
|
||||
get: function () { return this.report.state },
|
||||
set: function (val) { this.setReportState(val) }
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
generateUserProfileLink (user) {
|
||||
return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames)
|
||||
},
|
||||
setReportState (state) {
|
||||
return this.$store.dispatch('setReportState', { id: this.report.id, state })
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Report
|
@ -0,0 +1,43 @@
|
||||
@import '../../_variables.scss';
|
||||
|
||||
.Report {
|
||||
.report-content {
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
.report-state {
|
||||
margin: 0.5em 0 1em;
|
||||
}
|
||||
|
||||
.reported-status {
|
||||
border: 1px solid $fallback--faint;
|
||||
border-color: var(--faint, $fallback--faint);
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
color: $fallback--text;
|
||||
color: var(--text, $fallback--text);
|
||||
display: block;
|
||||
padding: 0.5em;
|
||||
margin: 0.5em 0;
|
||||
|
||||
.status-content {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.reported-status-heading {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 0.2em;
|
||||
}
|
||||
|
||||
.reported-status-name {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.note {
|
||||
width: 100%;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
@ -0,0 +1,74 @@
|
||||
<template>
|
||||
<div class="Report">
|
||||
<div class="reported-user">
|
||||
<span>{{ $t('report.reported_user') }}</span>
|
||||
<router-link :to="generateUserProfileLink(report.acct)">
|
||||
@{{ report.acct.screen_name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="reporter">
|
||||
<span>{{ $t('report.reporter') }}</span>
|
||||
<router-link :to="generateUserProfileLink(report.actor)">
|
||||
@{{ report.actor.screen_name }}
|
||||
</router-link>
|
||||
</div>
|
||||
<div class="report-state">
|
||||
<span>{{ $t('report.state') }}</span>
|
||||
<Select
|
||||
:id="report-state"
|
||||
v-model="state"
|
||||
class="form-control"
|
||||
>
|
||||
<option
|
||||
v-for="state in ['open', 'closed', 'resolved']"
|
||||
:key="state"
|
||||
:value="state"
|
||||
>
|
||||
{{ $t('report.state_' + state) }}
|
||||
</option>
|
||||
</Select>
|
||||
</div>
|
||||
<RichContent
|
||||
class="report-content"
|
||||
:html="report.content"
|
||||
:emoji="[]"
|
||||
/>
|
||||
<div v-if="report.statuses.length">
|
||||
<small>{{ $t('report.reported_statuses') }}</small>
|
||||
<router-link
|
||||
v-for="status in report.statuses"
|
||||
:key="status.id"
|
||||
:to="{ name: 'conversation', params: { id: status.id } }"
|
||||
class="reported-status"
|
||||
>
|
||||
<div class="reported-status-heading">
|
||||
<span class="reported-status-name">{{ status.user.name }}</span>
|
||||
<Timeago
|
||||
:time="status.created_at"
|
||||
:auto-update="240"
|
||||
class="faint"
|
||||
/>
|
||||
</div>
|
||||
<status-content :status="status" />
|
||||
</router-link>
|
||||
</div>
|
||||
<div v-if="report.notes.length">
|
||||
<small>{{ $t('report.notes') }}</small>
|
||||
<div
|
||||
v-for="note in report.notes"
|
||||
:key="note.id"
|
||||
class="note"
|
||||
>
|
||||
<span>{{ note.content }}</span>
|
||||
<Timeago
|
||||
:time="note.created_at"
|
||||
:auto-update="240"
|
||||
class="faint"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./report.js"></script>
|
||||
<style src="./report.scss" lang="scss"></style>
|
@ -0,0 +1,67 @@
|
||||
import { get, set } from 'lodash'
|
||||
import ModifiedIndicator from './modified_indicator.vue'
|
||||
import Select from 'src/components/select/select.vue'
|
||||
|
||||
export const allCssUnits = ['cm', 'mm', 'in', 'px', 'pt', 'pc', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%']
|
||||
export const defaultHorizontalUnits = ['px', 'rem', 'vw']
|
||||
export const defaultVerticalUnits = ['px', 'rem', 'vh']
|
||||
|
||||
export default {
|
||||
components: {
|
||||
ModifiedIndicator,
|
||||
Select
|
||||
},
|
||||
props: {
|
||||
path: String,
|
||||
disabled: Boolean,
|
||||
min: Number,
|
||||
units: {
|
||||
type: [String],
|
||||
default: () => allCssUnits
|
||||
},
|
||||
expert: [Number, String]
|
||||
},
|
||||
computed: {
|
||||
pathDefault () {
|
||||
const [firstSegment, ...rest] = this.path.split('.')
|
||||
return [firstSegment + 'DefaultValue', ...rest].join('.')
|
||||
},
|
||||
stateUnit () {
|
||||
return (this.state || '').replace(/\d+/, '')
|
||||
},
|
||||
stateValue () {
|
||||
return (this.state || '').replace(/\D+/, '')
|
||||
},
|
||||
state () {
|
||||
const value = get(this.$parent, this.path)
|
||||
if (value === undefined) {
|
||||
return this.defaultState
|
||||
} else {
|
||||
return value
|
||||
}
|
||||
},
|
||||
defaultState () {
|
||||
return get(this.$parent, this.pathDefault)
|
||||
},
|
||||
isChanged () {
|
||||
return this.state !== this.defaultState
|
||||
},
|
||||
matchesExpertLevel () {
|
||||
return (this.expert || 0) <= this.$parent.expertLevel
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
update (e) {
|
||||
set(this.$parent, this.path, e)
|
||||
},
|
||||
reset () {
|
||||
set(this.$parent, this.path, this.defaultState)
|
||||
},
|
||||
updateValue (e) {
|
||||
set(this.$parent, this.path, parseInt(e.target.value) + this.stateUnit)
|
||||
},
|
||||
updateUnit (e) {
|
||||
set(this.$parent, this.path, this.stateValue + e.target.value)
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<span
|
||||
v-if="matchesExpertLevel"
|
||||
class="SizeSetting"
|
||||
>
|
||||
<label
|
||||
:for="path"
|
||||
class="size-label"
|
||||
>
|
||||
<slot />
|
||||
</label>
|
||||
<input
|
||||
:id="path"
|
||||
class="number-input"
|
||||
type="number"
|
||||
step="1"
|
||||
:disabled="disabled"
|
||||
:min="min || 0"
|
||||
:value="stateValue"
|
||||
@change="updateValue"
|
||||
>
|
||||
<Select
|
||||
:id="path"
|
||||
:model-value="stateUnit"
|
||||
:disabled="disabled"
|
||||
class="css-unit-input"
|
||||
@change="updateUnit"
|
||||
>
|
||||
<option
|
||||
v-for="option in units"
|
||||
:key="option"
|
||||
:value="option"
|
||||
>
|
||||
{{ option }}
|
||||
</option>
|
||||
</Select>
|
||||
{{ ' ' }}
|
||||
<ModifiedIndicator
|
||||
:changed="isChanged"
|
||||
:onclick="reset"
|
||||
/>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script src="./size_setting.js"></script>
|
||||
|
||||
<style lang="scss">
|
||||
.css-unit-input, .css-unit-input select {
|
||||
margin-left: 0.5em;
|
||||
width: 4em !important;
|
||||
max-width: 4em !important;
|
||||
min-width: 4em !important;
|
||||
}
|
||||
</style>
|
@ -0,0 +1,66 @@
|
||||
import Modal from 'src/components/modal/modal.vue'
|
||||
import { library } from '@fortawesome/fontawesome-svg-core'
|
||||
import pleromaTan from 'src/assets/pleromatan_apology.png'
|
||||
import pleromaTanFox from 'src/assets/pleromatan_apology_fox.png'
|
||||
|
||||
import {
|
||||
faTimes
|
||||
} from '@fortawesome/free-solid-svg-icons'
|
||||
library.add(
|
||||
faTimes
|
||||
)
|
||||
|
||||
export const CURRENT_UPDATE_COUNTER = 1
|
||||
|
||||
const UpdateNotification = {
|
||||
data () {
|
||||
return {
|
||||
pleromaTanVariant: Math.random() > 0.5 ? pleromaTan : pleromaTanFox,
|
||||
showingMore: false,
|
||||
contentHeight: 0
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Modal
|
||||
},
|
||||
computed: {
|
||||
pleromaTanStyles () {
|
||||
return {
|
||||
'shape-outside': 'url(' + this.pleromaTanVariant + ')'
|
||||
}
|
||||
},
|
||||
dynamicStyles () {
|
||||
return {
|
||||
'--____extraInfoGroupHeight': this.contentHeight + 'px'
|
||||
}
|
||||
},
|
||||
shouldShow () {
|
||||
return !this.$store.state.instance.disableUpdateNotification &&
|
||||
this.$store.state.users.currentUser &&
|
||||
this.$store.state.serverSideStorage.flagStorage.updateCounter < CURRENT_UPDATE_COUNTER &&
|
||||
!this.$store.state.serverSideStorage.flagStorage.dontShowUpdateNotifs
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleShow () {
|
||||
this.showingMore = !this.showingMore
|
||||
},
|
||||
neverShowAgain () {
|
||||
this.toggleShow()
|
||||
this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
|
||||
this.$store.commit('setFlag', { flag: 'dontShowUpdateNotifs', value: 1 })
|
||||
this.$store.dispatch('pushServerSideStorage')
|
||||
},
|
||||
dismiss () {
|
||||
this.$store.commit('setFlag', { flag: 'updateCounter', value: CURRENT_UPDATE_COUNTER })
|
||||
this.$store.dispatch('pushServerSideStorage')
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
setTimeout(() => {
|
||||
this.contentHeight = this.$refs.animatedText.scrollHeight
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
|
||||
export default UpdateNotification
|
@ -0,0 +1,107 @@
|
||||
@import 'src/_variables.scss';
|
||||
.UpdateNotification {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.UpdateNotificationModal {
|
||||
--__top-fringe: 15em; // how much pleroma-tan should stick her head above
|
||||
--__bottom-fringe: 80em; // just reserving as much as we can, number is mostly irrelevant
|
||||
--__right-fringe: 8em;
|
||||
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
transition: transform;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 500ms;
|
||||
|
||||
.text {
|
||||
max-width: 40em;
|
||||
padding-left: 1em;
|
||||
}
|
||||
|
||||
@media all and (max-width: 800px) {
|
||||
/* For mobile, the modal takes 100% of the available screen.
|
||||
This ensures the minimized modal is always 50px above the browser bottom bar regardless of whether or not it is visible.
|
||||
*/
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
@media all and (max-height: 600px) {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.content {
|
||||
overflow: hidden;
|
||||
margin-top: calc(-1 * var(--__top-fringe));
|
||||
margin-bottom: calc(-1 * var(--__bottom-fringe));
|
||||
margin-right: calc(-1 * var(--__right-fringe));
|
||||
}
|
||||
|
||||
.panel-body {
|
||||
border-width: 0 0 1px 0;
|
||||
border-style: solid;
|
||||
border-color: var(--border, $fallback--border);
|
||||
}
|
||||
|
||||
.panel-footer {
|
||||
z-index: 22;
|
||||
position: relative;
|
||||
border-width: 0;
|
||||
grid-template-columns: auto;
|
||||
}
|
||||
|
||||
.pleroma-tan {
|
||||
object-fit: cover;
|
||||
object-position: top;
|
||||
transition: position, left, right, top, bottom, max-width, max-height;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 500ms;
|
||||
width: 25em;
|
||||
float: right;
|
||||
z-index: 20;
|
||||
position: relative;
|
||||
shape-margin: 0.5em;
|
||||
filter: drop-shadow(5px 5px 10px rgba(0,0,0,0.5));
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.spacer-top {
|
||||
min-height: var(--__top-fringe);
|
||||
}
|
||||
|
||||
.spacer-bottom {
|
||||
min-height: var(--__bottom-fringe);
|
||||
}
|
||||
|
||||
.extra-info-group {
|
||||
transition: max-height, padding, height;
|
||||
transition-timing-function: ease-in-out;
|
||||
transition-duration: 500ms;
|
||||
max-height: calc(var(--____extraInfoGroupHeight) + 1em); // include bottom padding
|
||||
mask:
|
||||
linear-gradient(to top, white, transparent) bottom/100% 2px no-repeat,
|
||||
linear-gradient(to top, white, white);
|
||||
}
|
||||
|
||||
.art-credit {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
&.-peek {
|
||||
/* Explanation:
|
||||
* 100vh - 100% = Distance between modal's top+bottom boundaries and screen
|
||||
* (100vh - 100%) / 2 = Distance between bottom (or top) boundary and screen
|
||||
*/
|
||||
transform: translateY(calc(((100vh - 100%) / 2)));
|
||||
|
||||
.pleroma-tan {
|
||||
float: right;
|
||||
z-index: 10;
|
||||
shape-image-threshold: 0.7;
|
||||
}
|
||||
|
||||
.extra-info-group {
|
||||
max-height: 0;
|
||||
}
|
||||
}
|
||||
}
|
@ -0,0 +1,100 @@
|
||||
<template>
|
||||
<Modal
|
||||
:is-open="!!shouldShow"
|
||||
class="UpdateNotification"
|
||||
:no-background="true"
|
||||
>
|
||||
<div
|
||||
class="UpdateNotificationModal panel"
|
||||
:class="{ '-peek': !showingMore }"
|
||||
:style="dynamicStyles"
|
||||
>
|
||||
<div class="panel-heading">
|
||||
<span class="title">
|
||||
{{ $t('update.big_update_title') }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="content">
|
||||
<img
|
||||
class="pleroma-tan"
|
||||
:src="pleromaTanVariant"
|
||||
:style="pleromaTanStyles"
|
||||
>
|
||||
<div class="spacer-top" />
|
||||
<div class="text">
|
||||
<p>
|
||||
{{ $t('update.big_update_content') }}
|
||||
</p>
|
||||
<div
|
||||
ref="animatedText"
|
||||
class="extra-info-group"
|
||||
>
|
||||
<i18n-t
|
||||
keypath="update.update_bugs"
|
||||
tag="p"
|
||||
>
|
||||
<template #pleromaGitlab>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://git.pleroma.social/"
|
||||
>{{ $t('update.update_bugs_gitlab') }}</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<i18n-t
|
||||
keypath="update.update_changelog"
|
||||
tag="p"
|
||||
>
|
||||
<template #theFullChangelog>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://pleroma.social/announcements/"
|
||||
>{{ $t('update.update_changelog_here') }}</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
<p class="art-credit">
|
||||
<i18n-t
|
||||
keypath="update.art_by"
|
||||
tag="small"
|
||||
>
|
||||
<template #linkToArtist>
|
||||
<a
|
||||
target="_blank"
|
||||
href="https://post.ebin.club/pipivovott"
|
||||
>pipivovott</a>
|
||||
</template>
|
||||
</i18n-t>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spacer-bottom" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="panel-footer">
|
||||
<button
|
||||
class="button-default"
|
||||
@click.prevent="neverShowAgain"
|
||||
>
|
||||
{{ $t("general.never_show_again") }}
|
||||
</button>
|
||||
<button
|
||||
v-if="!showingMore"
|
||||
class="button-default"
|
||||
@click.prevent="toggleShow"
|
||||
>
|
||||
{{ $t("general.show_more") }}
|
||||
</button>
|
||||
<button
|
||||
class="button-default"
|
||||
@click.prevent="dismiss"
|
||||
>
|
||||
{{ $t("general.dismiss") }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</Modal>
|
||||
</template>
|
||||
|
||||
<script src="./update_notification.js"></script>
|
||||
|
||||
<style src="./update_notification.scss" lang="scss"></style>
|
@ -0,0 +1,94 @@
|
||||
import { remove, find } from 'lodash'
|
||||
|
||||
export const defaultState = {
|
||||
allLists: [],
|
||||
allListsObject: {}
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
setLists (state, value) {
|
||||
state.allLists = value
|
||||
},
|
||||
setList (state, { id, title }) {
|
||||
if (!state.allListsObject[id]) {
|
||||
state.allListsObject[id] = {}
|
||||
}
|
||||
state.allListsObject[id].title = title
|
||||
|
||||
if (!find(state.allLists, { id })) {
|
||||
state.allLists.push({ id, title })
|
||||
} else {
|
||||
find(state.allLists, { id }).title = title
|
||||
}
|
||||
},
|
||||
setListAccounts (state, { id, accountIds }) {
|
||||
if (!state.allListsObject[id]) {
|
||||
state.allListsObject[id] = {}
|
||||
}
|
||||
state.allListsObject[id].accountIds = accountIds
|
||||
},
|
||||
deleteList (state, { id }) {
|
||||
delete state.allListsObject[id]
|
||||
remove(state.allLists, list => list.id === id)
|
||||
}
|
||||
}
|
||||
|
||||
const actions = {
|
||||
setLists ({ commit }, value) {
|
||||
commit('setLists', value)
|
||||
},
|
||||
createList ({ rootState, commit }, { title }) {
|
||||
return rootState.api.backendInteractor.createList({ title })
|
||||
.then((list) => {
|
||||
commit('setList', { id: list.id, title })
|
||||
return list
|
||||
})
|
||||
},
|
||||
fetchList ({ rootState, commit }, { id }) {
|
||||
return rootState.api.backendInteractor.getList({ id })
|
||||
.then((list) => commit('setList', { id: list.id, title: list.title }))
|
||||
},
|
||||
fetchListAccounts ({ rootState, commit }, { id }) {
|
||||
return rootState.api.backendInteractor.getListAccounts({ id })
|
||||
.then((accountIds) => commit('setListAccounts', { id, accountIds }))
|
||||
},
|
||||
setList ({ rootState, commit }, { id, title }) {
|
||||
rootState.api.backendInteractor.updateList({ id, title })
|
||||
commit('setList', { id, title })
|
||||
},
|
||||
setListAccounts ({ rootState, commit }, { id, accountIds }) {
|
||||
const saved = rootState.lists.allListsObject[id].accountIds || []
|
||||
const added = accountIds.filter(id => !saved.includes(id))
|
||||
const removed = saved.filter(id => !accountIds.includes(id))
|
||||
commit('setListAccounts', { id, accountIds })
|
||||
if (added.length > 0) {
|
||||
rootState.api.backendInteractor.addAccountsToList({ id, accountIds: added })
|
||||
}
|
||||
if (removed.length > 0) {
|
||||
rootState.api.backendInteractor.removeAccountsFromList({ id, accountIds: removed })
|
||||
}
|
||||
},
|
||||
deleteList ({ rootState, commit }, { id }) {
|
||||
rootState.api.backendInteractor.deleteList({ id })
|
||||
commit('deleteList', { id })
|
||||
}
|
||||
}
|
||||
|
||||
export const getters = {
|
||||
findListTitle: state => id => {
|
||||
if (!state.allListsObject[id]) return
|
||||
return state.allListsObject[id].title
|
||||
},
|
||||
findListAccounts: state => id => {
|
||||
return [...state.allListsObject[id].accountIds]
|
||||
}
|
||||
}
|
||||
|
||||
const lists = {
|
||||
state: defaultState,
|
||||
mutations,
|
||||
actions,
|
||||
getters
|
||||
}
|
||||
|
||||
export default lists
|
@ -0,0 +1,230 @@
|
||||
import { toRaw } from 'vue'
|
||||
import { isEqual, cloneDeep } from 'lodash'
|
||||
import { CURRENT_UPDATE_COUNTER } from 'src/components/update_notification/update_notification.js'
|
||||
|
||||
export const VERSION = 1
|
||||
export const NEW_USER_DATE = new Date('2022-08-04') // date of writing this, basically
|
||||
|
||||
export const COMMAND_TRIM_FLAGS = 1000
|
||||
export const COMMAND_TRIM_FLAGS_AND_RESET = 1001
|
||||
|
||||
export const defaultState = {
|
||||
// do we need to update data on server?
|
||||
dirty: false,
|
||||
// storage of flags - stuff that can only be set and incremented
|
||||
flagStorage: {
|
||||
updateCounter: 0, // Counter for most recent update notification seen
|
||||
// TODO move to prefsStorage when that becomes a thing since only way
|
||||
// this can be reset is by complete reset of all flags
|
||||
dontShowUpdateNotifs: 0, // if user chose to not show update notifications ever again
|
||||
reset: 0 // special flag that can be used to force-reset all flags, debug purposes only
|
||||
// special reset codes:
|
||||
// 1000: trim keys to those known by currently running FE
|
||||
// 1001: same as above + reset everything to 0
|
||||
},
|
||||
// raw data
|
||||
raw: null,
|
||||
// local cache
|
||||
cache: null
|
||||
}
|
||||
|
||||
export const newUserFlags = {
|
||||
...defaultState.flagStorage,
|
||||
updateCounter: CURRENT_UPDATE_COUNTER // new users don't need to see update notification
|
||||
}
|
||||
|
||||
const _wrapData = (data) => ({
|
||||
...data,
|
||||
_timestamp: Date.now(),
|
||||
_version: VERSION
|
||||
})
|
||||
|
||||
const _checkValidity = (data) => data._timestamp > 0 && data._version > 0
|
||||
|
||||
export const _getRecentData = (cache, live) => {
|
||||
const result = { recent: null, stale: null, needUpload: false }
|
||||
const cacheValid = _checkValidity(cache || {})
|
||||
const liveValid = _checkValidity(live || {})
|
||||
if (!liveValid && cacheValid) {
|
||||
result.needUpload = true
|
||||
console.debug('Nothing valid stored on server, assuming cache to be source of truth')
|
||||
result.recent = cache
|
||||
result.stale = live
|
||||
} else if (!cacheValid && liveValid) {
|
||||
console.debug('Valid storage on server found, no local cache found, using live as source of truth')
|
||||
result.recent = live
|
||||
result.stale = cache
|
||||
} else if (cacheValid && liveValid) {
|
||||
console.debug('Both sources have valid data, figuring things out...')
|
||||
if (live._timestamp === cache._timestamp && live._version === cache._version) {
|
||||
console.debug('Same version/timestamp on both source, source of truth irrelevant')
|
||||
result.recent = cache
|
||||
result.stale = live
|
||||
} else {
|
||||
console.debug('Different timestamp, figuring out which one is more recent')
|
||||
if (live._timestamp < cache._timestamp) {
|
||||
result.recent = cache
|
||||
result.stale = live
|
||||
} else {
|
||||
result.recent = live
|
||||
result.stale = cache
|
||||
}
|
||||
}
|
||||
} else {
|
||||
console.debug('Both sources are invalid, start from scratch')
|
||||
result.needUpload = true
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
export const _getAllFlags = (recent, stale) => {
|
||||
return Array.from(new Set([
|
||||
...Object.keys(toRaw((recent || {}).flagStorage || {})),
|
||||
...Object.keys(toRaw((stale || {}).flagStorage || {}))
|
||||
]))
|
||||
}
|
||||
|
||||
export const _mergeFlags = (recent, stale, allFlagKeys) => {
|
||||
return Object.fromEntries(allFlagKeys.map(flag => {
|
||||
const recentFlag = recent.flagStorage[flag]
|
||||
const staleFlag = stale.flagStorage[flag]
|
||||
// use flag that is of higher value
|
||||
return [flag, Number((recentFlag > staleFlag ? recentFlag : staleFlag) || 0)]
|
||||
}))
|
||||
}
|
||||
|
||||
export const _resetFlags = (totalFlags, knownKeys = defaultState.flagStorage) => {
|
||||
let result = { ...totalFlags }
|
||||
const allFlagKeys = Object.keys(totalFlags)
|
||||
// flag reset functionality
|
||||
if (totalFlags.reset >= COMMAND_TRIM_FLAGS && totalFlags.reset <= COMMAND_TRIM_FLAGS_AND_RESET) {
|
||||
console.debug('Received command to trim the flags')
|
||||
const knownKeysSet = new Set(Object.keys(knownKeys))
|
||||
|
||||
// Trim
|
||||
result = {}
|
||||
allFlagKeys.forEach(flag => {
|
||||
if (knownKeysSet.has(flag)) {
|
||||
result[flag] = totalFlags[flag]
|
||||
}
|
||||
})
|
||||
|
||||
// Reset
|
||||
if (totalFlags.reset === COMMAND_TRIM_FLAGS_AND_RESET) {
|
||||
// 1001 - and reset everything to 0
|
||||
console.debug('Received command to reset the flags')
|
||||
Object.keys(knownKeys).forEach(flag => { result[flag] = 0 })
|
||||
}
|
||||
} else if (totalFlags.reset > 0 && totalFlags.reset < 9000) {
|
||||
console.debug('Received command to reset the flags')
|
||||
allFlagKeys.forEach(flag => { result[flag] = 0 })
|
||||
}
|
||||
result.reset = 0
|
||||
return result
|
||||
}
|
||||
|
||||
export const _doMigrations = (cache) => {
|
||||
if (!cache) return cache
|
||||
|
||||
if (cache._version < VERSION) {
|
||||
console.debug('Local cached data has older version, seeing if there any migrations that can be applied')
|
||||
|
||||
// no migrations right now since we only have one version
|
||||
console.debug('No migrations found')
|
||||
}
|
||||
|
||||
if (cache._version > VERSION) {
|
||||
console.debug('Local cached data has newer version, seeing if there any reverse migrations that can be applied')
|
||||
|
||||
// no reverse migrations right now but we leave a possibility of loading a hotpatch if need be
|
||||
if (window._PLEROMA_HOTPATCH) {
|
||||
if (window._PLEROMA_HOTPATCH.reverseMigrations) {
|
||||
console.debug('Found hotpatch migration, applying')
|
||||
return window._PLEROMA_HOTPATCH.reverseMigrations.call({}, 'serverSideStorage', { from: cache._version, to: VERSION }, cache)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return cache
|
||||
}
|
||||
|
||||
export const mutations = {
|
||||
setServerSideStorage (state, userData) {
|
||||
const live = userData.storage
|
||||
state.raw = live
|
||||
let cache = state.cache
|
||||
|
||||
cache = _doMigrations(cache)
|
||||
|
||||
let { recent, stale, needsUpload } = _getRecentData(cache, live)
|
||||
|
||||
const userNew = userData.created_at > NEW_USER_DATE
|
||||
const flagsTemplate = userNew ? newUserFlags : defaultState.flagStorage
|
||||
let dirty = false
|
||||
|
||||
if (recent === null) {
|
||||
console.debug(`Data is empty, initializing for ${userNew ? 'new' : 'existing'} user`)
|
||||
recent = _wrapData({
|
||||
flagStorage: { ...flagsTemplate }
|
||||
})
|
||||
}
|
||||
|
||||
if (!needsUpload && recent && stale) {
|
||||
console.debug('Checking if data needs merging...')
|
||||
// discarding timestamps and versions
|
||||
const { _timestamp: _0, _version: _1, ...recentData } = recent
|
||||
const { _timestamp: _2, _version: _3, ...staleData } = stale
|
||||
dirty = !isEqual(recentData, staleData)
|
||||
console.debug(`Data ${dirty ? 'needs' : 'doesn\'t need'} merging`)
|
||||
}
|
||||
|
||||
const allFlagKeys = _getAllFlags(recent, stale)
|
||||
let totalFlags
|
||||
if (dirty) {
|
||||
// Merge the flags
|
||||
console.debug('Merging the flags...')
|
||||
totalFlags = _mergeFlags(recent, stale, allFlagKeys)
|
||||
} else {
|
||||
totalFlags = recent.flagStorage
|
||||
}
|
||||
|
||||
totalFlags = _resetFlags(totalFlags)
|
||||
|
||||
recent.flagStorage = totalFlags
|
||||
|
||||
state.dirty = dirty || needsUpload
|
||||
state.cache = recent
|
||||
// set local timestamp to smaller one if we don't have any changes
|
||||
if (stale && recent && !state.dirty) {
|
||||
state.cache._timestamp = Math.min(stale._timestamp, recent._timestamp)
|
||||
}
|
||||
state.flagStorage = state.cache.flagStorage
|
||||
},
|
||||
setFlag (state, { flag, value }) {
|
||||
state.flagStorage[flag] = value
|
||||
state.dirty = true
|
||||
}
|
||||
}
|
||||
|
||||
const serverSideStorage = {
|
||||
state: {
|
||||
...cloneDeep(defaultState)
|
||||
},
|
||||
mutations,
|
||||
actions: {
|
||||
pushServerSideStorage ({ state, rootState, commit }, { force = false } = {}) {
|
||||
const needPush = state.dirty || force
|
||||
if (!needPush) return
|
||||
state.cache = _wrapData({
|
||||
flagStorage: toRaw(state.flagStorage)
|
||||
})
|
||||
const params = { pleroma_settings_store: { 'pleroma-fe': state.cache } }
|
||||
rootState.api.backendInteractor
|
||||
.updateProfile({ params })
|
||||
.then((user) => commit('setServerSideStorage', user))
|
||||
state.dirty = false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default serverSideStorage
|
@ -0,0 +1,22 @@
|
||||
import apiService from '../api/api.service.js'
|
||||
import { promiseInterval } from '../promise_interval/promise_interval.js'
|
||||
|
||||
const fetchAndUpdate = ({ store, credentials }) => {
|
||||
return apiService.fetchLists({ credentials })
|
||||
.then(lists => {
|
||||
store.commit('setLists', lists)
|
||||
}, () => {})
|
||||
.catch(() => {})
|
||||
}
|
||||
|
||||
const startFetching = ({ credentials, store }) => {
|
||||
const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store })
|
||||
boundFetchAndUpdate()
|
||||
return promiseInterval(boundFetchAndUpdate, 240000)
|
||||
}
|
||||
|
||||
const listsFetcher = {
|
||||
startFetching
|
||||
}
|
||||
|
||||
export default listsFetcher
|
@ -0,0 +1,83 @@
|
||||
import { cloneDeep } from 'lodash'
|
||||
import { defaultState, mutations, getters } from '../../../../src/modules/lists.js'
|
||||
|
||||
describe('The lists module', () => {
|
||||
describe('mutations', () => {
|
||||
it('updates array of all lists', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
const list = { id: '1', title: 'testList' }
|
||||
|
||||
mutations.setLists(state, [list])
|
||||
expect(state.allLists).to.have.length(1)
|
||||
expect(state.allLists).to.eql([list])
|
||||
})
|
||||
|
||||
it('adds a new list with a title, updating the title for existing lists', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
const list = { id: '1', title: 'testList' }
|
||||
const modList = { id: '1', title: 'anotherTestTitle' }
|
||||
|
||||
mutations.setList(state, list)
|
||||
expect(state.allListsObject[list.id]).to.eql({ title: list.title })
|
||||
expect(state.allLists).to.have.length(1)
|
||||
expect(state.allLists[0]).to.eql(list)
|
||||
|
||||
mutations.setList(state, modList)
|
||||
expect(state.allListsObject[modList.id]).to.eql({ title: modList.title })
|
||||
expect(state.allLists).to.have.length(1)
|
||||
expect(state.allLists[0]).to.eql(modList)
|
||||
})
|
||||
|
||||
it('adds a new list with an array of IDs, updating the IDs for existing lists', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
const list = { id: '1', accountIds: ['1', '2', '3'] }
|
||||
const modList = { id: '1', accountIds: ['3', '4', '5'] }
|
||||
|
||||
mutations.setListAccounts(state, list)
|
||||
expect(state.allListsObject[list.id]).to.eql({ accountIds: list.accountIds })
|
||||
|
||||
mutations.setListAccounts(state, modList)
|
||||
expect(state.allListsObject[modList.id]).to.eql({ accountIds: modList.accountIds })
|
||||
})
|
||||
|
||||
it('deletes a list', () => {
|
||||
const state = {
|
||||
allLists: [{ id: '1', title: 'testList' }],
|
||||
allListsObject: {
|
||||
1: { title: 'testList', accountIds: ['1', '2', '3'] }
|
||||
}
|
||||
}
|
||||
const id = '1'
|
||||
|
||||
mutations.deleteList(state, { id })
|
||||
expect(state.allLists).to.have.length(0)
|
||||
expect(state.allListsObject).to.eql({})
|
||||
})
|
||||
})
|
||||
|
||||
describe('getters', () => {
|
||||
it('returns list title', () => {
|
||||
const state = {
|
||||
allLists: [{ id: '1', title: 'testList' }],
|
||||
allListsObject: {
|
||||
1: { title: 'testList', accountIds: ['1', '2', '3'] }
|
||||
}
|
||||
}
|
||||
const id = '1'
|
||||
|
||||
expect(getters.findListTitle(state)(id)).to.eql('testList')
|
||||
})
|
||||
|
||||
it('returns list accounts', () => {
|
||||
const state = {
|
||||
allLists: [{ id: '1', title: 'testList' }],
|
||||
allListsObject: {
|
||||
1: { title: 'testList', accountIds: ['1', '2', '3'] }
|
||||
}
|
||||
}
|
||||
const id = '1'
|
||||
|
||||
expect(getters.findListAccounts(state)(id)).to.eql(['1', '2', '3'])
|
||||
})
|
||||
})
|
||||
})
|
@ -0,0 +1,178 @@
|
||||
import { cloneDeep } from 'lodash'
|
||||
|
||||
import {
|
||||
VERSION,
|
||||
COMMAND_TRIM_FLAGS,
|
||||
COMMAND_TRIM_FLAGS_AND_RESET,
|
||||
_getRecentData,
|
||||
_getAllFlags,
|
||||
_mergeFlags,
|
||||
_resetFlags,
|
||||
mutations,
|
||||
defaultState,
|
||||
newUserFlags
|
||||
} from 'src/modules/serverSideStorage.js'
|
||||
|
||||
describe('The serverSideStorage module', () => {
|
||||
describe('mutations', () => {
|
||||
describe('setServerSideStorage', () => {
|
||||
const { setServerSideStorage } = mutations
|
||||
const user = {
|
||||
created_at: new Date('1999-02-09'),
|
||||
storage: {}
|
||||
}
|
||||
|
||||
it('should initialize storage if none present', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
setServerSideStorage(state, user)
|
||||
expect(state.cache._version).to.eql(VERSION)
|
||||
expect(state.cache._timestamp).to.be.a('number')
|
||||
expect(state.cache.flagStorage).to.eql(defaultState.flagStorage)
|
||||
})
|
||||
|
||||
it('should initialize storage with proper flags for new users if none present', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
setServerSideStorage(state, { ...user, created_at: new Date() })
|
||||
expect(state.cache._version).to.eql(VERSION)
|
||||
expect(state.cache._timestamp).to.be.a('number')
|
||||
expect(state.cache.flagStorage).to.eql(newUserFlags)
|
||||
})
|
||||
|
||||
it('should merge flags even if remote timestamp is older', () => {
|
||||
const state = {
|
||||
...cloneDeep(defaultState),
|
||||
cache: {
|
||||
_timestamp: Date.now(),
|
||||
_version: VERSION,
|
||||
...cloneDeep(defaultState)
|
||||
}
|
||||
}
|
||||
setServerSideStorage(
|
||||
state,
|
||||
{
|
||||
...user,
|
||||
storage: {
|
||||
_timestamp: 123,
|
||||
_version: VERSION,
|
||||
flagStorage: {
|
||||
...defaultState.flagStorage,
|
||||
updateCounter: 1
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
expect(state.cache.flagStorage).to.eql({
|
||||
...defaultState.flagStorage,
|
||||
updateCounter: 1
|
||||
})
|
||||
})
|
||||
|
||||
it('should reset local timestamp to remote if contents are the same', () => {
|
||||
const state = {
|
||||
...cloneDeep(defaultState),
|
||||
cache: null
|
||||
}
|
||||
setServerSideStorage(
|
||||
state,
|
||||
{
|
||||
...user,
|
||||
storage: {
|
||||
_timestamp: 123,
|
||||
_version: VERSION,
|
||||
flagStorage: {
|
||||
...defaultState.flagStorage,
|
||||
updateCounter: 999
|
||||
}
|
||||
}
|
||||
}
|
||||
)
|
||||
expect(state.cache._timestamp).to.eql(123)
|
||||
expect(state.flagStorage.updateCounter).to.eql(999)
|
||||
expect(state.cache.flagStorage.updateCounter).to.eql(999)
|
||||
})
|
||||
|
||||
it('should remote version if local missing', () => {
|
||||
const state = cloneDeep(defaultState)
|
||||
setServerSideStorage(state, user)
|
||||
expect(state.cache._version).to.eql(VERSION)
|
||||
expect(state.cache._timestamp).to.be.a('number')
|
||||
expect(state.cache.flagStorage).to.eql(defaultState.flagStorage)
|
||||
})
|
||||
})
|
||||
})
|
||||
|
||||
describe('helper functions', () => {
|
||||
describe('_getRecentData', () => {
|
||||
it('should handle nulls correctly', () => {
|
||||
expect(_getRecentData(null, null)).to.eql({ recent: null, stale: null, needUpload: true })
|
||||
})
|
||||
|
||||
it('doesn\'t choke on invalid data', () => {
|
||||
expect(_getRecentData({ a: 1 }, { b: 2 })).to.eql({ recent: null, stale: null, needUpload: true })
|
||||
})
|
||||
|
||||
it('should prefer the valid non-null correctly, needUpload works properly', () => {
|
||||
const nonNull = { _version: VERSION, _timestamp: 1 }
|
||||
expect(_getRecentData(nonNull, null)).to.eql({ recent: nonNull, stale: null, needUpload: true })
|
||||
expect(_getRecentData(null, nonNull)).to.eql({ recent: nonNull, stale: null, needUpload: false })
|
||||
})
|
||||
|
||||
it('should prefer the one with higher timestamp', () => {
|
||||
const a = { _version: VERSION, _timestamp: 1 }
|
||||
const b = { _version: VERSION, _timestamp: 2 }
|
||||
|
||||
expect(_getRecentData(a, b)).to.eql({ recent: b, stale: a, needUpload: false })
|
||||
expect(_getRecentData(b, a)).to.eql({ recent: b, stale: a, needUpload: false })
|
||||
})
|
||||
|
||||
it('case where both are same', () => {
|
||||
const a = { _version: VERSION, _timestamp: 3 }
|
||||
const b = { _version: VERSION, _timestamp: 3 }
|
||||
|
||||
expect(_getRecentData(a, b)).to.eql({ recent: b, stale: a, needUpload: false })
|
||||
expect(_getRecentData(b, a)).to.eql({ recent: b, stale: a, needUpload: false })
|
||||
})
|
||||
})
|
||||
|
||||
describe('_getAllFlags', () => {
|
||||
it('should handle nulls properly', () => {
|
||||
expect(_getAllFlags(null, null)).to.eql([])
|
||||
})
|
||||
it('should output list of keys if passed single object', () => {
|
||||
expect(_getAllFlags({ flagStorage: { a: 1, b: 1, c: 1 } }, null)).to.eql(['a', 'b', 'c'])
|
||||
})
|
||||
it('should union keys of both objects', () => {
|
||||
expect(_getAllFlags({ flagStorage: { a: 1, b: 1, c: 1 } }, { flagStorage: { c: 1, d: 1 } })).to.eql(['a', 'b', 'c', 'd'])
|
||||
})
|
||||
})
|
||||
|
||||
describe('_mergeFlags', () => {
|
||||
it('should handle merge two flag sets correctly picking higher numbers', () => {
|
||||
expect(
|
||||
_mergeFlags(
|
||||
{ flagStorage: { a: 0, b: 3 } },
|
||||
{ flagStorage: { b: 1, c: 4, d: 9 } },
|
||||
['a', 'b', 'c', 'd'])
|
||||
).to.eql({ a: 0, b: 3, c: 4, d: 9 })
|
||||
})
|
||||
})
|
||||
|
||||
describe('_resetFlags', () => {
|
||||
it('should reset all known flags to 0 when reset flag is set to > 0 and < 9000', () => {
|
||||
const totalFlags = { a: 0, b: 3, reset: 1 }
|
||||
|
||||
expect(_resetFlags(totalFlags)).to.eql({ a: 0, b: 0, reset: 0 })
|
||||
})
|
||||
it('should trim all flags to known when reset is set to 1000', () => {
|
||||
const totalFlags = { a: 0, b: 3, c: 33, reset: COMMAND_TRIM_FLAGS }
|
||||
|
||||
expect(_resetFlags(totalFlags, { a: 0, b: 0, reset: 0 })).to.eql({ a: 0, b: 3, reset: 0 })
|
||||
})
|
||||
it('should trim all flags to known and reset when reset is set to 1001', () => {
|
||||
const totalFlags = { a: 0, b: 3, c: 33, reset: COMMAND_TRIM_FLAGS_AND_RESET }
|
||||
|
||||
expect(_resetFlags(totalFlags, { a: 0, b: 0, reset: 0 })).to.eql({ a: 0, b: 0, reset: 0 })
|
||||
})
|
||||
})
|
||||
})
|
||||
})
|
Loading…
Reference in new issue