...
 
Commits (40)
......@@ -99,3 +99,6 @@ Setting this will change the warning text that is displayed for direct messages.
ATTENTION: If you actually want the behavior to change. You will need to set the appropriate option at the backend. See the backend documentation for information about that.
DO NOT activate this without checking the backend configuration first!
### Private Mode
If the `private` instance setting is enabled in the backend, features that are not accessible without authentication, such as the timelines and search will be disabled for unauthenticated users.
......@@ -8,7 +8,7 @@ import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_pan
import ChatPanel from './components/chat_panel/chat_panel.vue'
import MediaModal from './components/media_modal/media_modal.vue'
import SideDrawer from './components/side_drawer/side_drawer.vue'
import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_button.vue'
import FloatingPostButton from './components/floating_post_button/floating_post_button.vue'
import MobileNav from './components/mobile_nav/mobile_nav.vue'
import UserReportingModal from './components/user_reporting_modal/user_reporting_modal.vue'
import PostStatusModal from './components/post_status_modal/post_status_modal.vue'
......@@ -27,7 +27,7 @@ export default {
ChatPanel,
MediaModal,
SideDrawer,
MobilePostStatusButton,
FloatingPostButton,
MobileNav,
UserReportingModal,
PostStatusModal
......@@ -98,7 +98,8 @@ export default {
this.$store.state.instance.instanceSpecificPanelContent
},
showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel },
isMobileLayout () { return this.$store.state.interface.mobileLayout }
isMobileLayout () { return this.$store.state.interface.mobileLayout },
privateMode () { return this.$store.state.instance.private }
},
methods: {
scrollToTop () {
......
......@@ -41,6 +41,7 @@
</div>
<div class="item right">
<search-bar
v-if="currentUser || !privateMode"
class="nav-icon mobile-hidden"
@toggled="onSearchBarToggled"
@click.stop.native
......@@ -118,7 +119,7 @@
:floating="true"
class="floating-chat mobile-hidden"
/>
<MobilePostStatusButton />
<FloatingPostButton v-if="currentUser && isMobileLayout" />
<UserReportingModal />
<PostStatusModal />
<portal-target name="modal" />
......
......@@ -219,12 +219,21 @@ const getNodeInfo = async ({ store }) => {
store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version })
store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: software.name === 'pleroma' })
const priv = metadata.private
store.dispatch('setInstanceOption', { name: 'private', value: priv })
const frontendVersion = window.___pleromafe_commit_hash
store.dispatch('setInstanceOption', { name: 'frontendVersion', value: frontendVersion })
store.dispatch('setInstanceOption', { name: 'tagPolicyAvailable', value: metadata.federation.mrf_policies.includes('TagPolicy') })
const federation = metadata.federation
store.dispatch('setInstanceOption', { name: 'federationPolicy', value: federation })
store.dispatch('setInstanceOption', {
name: 'federating',
value: typeof federation.enabled === 'undefined'
? true
: federation.enabled
})
const accounts = metadata.staffAccounts
await resolveStaffAccounts({ store, accounts })
......
import { debounce } from 'lodash'
import 'javascript-detect-element-resize'
const MobilePostStatusButton = {
// NOTE: We use the hard-coded boundingClientRect obj of the button at the moment
// since the button moves vertically and it makes difficult to determine the boundingClientRect
const buttonRect = {
bottom: -21, // Can get the actual bottom value by adding window.innerHeight
right: -21, // Can get the actual right value by adding window.innerWidth
height: 70,
width: 70
}
const FloatingPostButton = {
data () {
return {
hidden: false,
scrollingDown: false,
inputActive: false,
oldScrollPos: 0,
amountScrolled: 0
hoverInlineReply: false,
oldScrollPos: 0
}
},
created () {
if (this.autohideFloatingPostButton) {
this.activateFloatingPostButtonAutohide()
}
window.addEventListener('resize', this.handleOSK)
},
destroyed () {
if (this.autohideFloatingPostButton) {
this.deactivateFloatingPostButtonAutohide()
}
window.removeEventListener('resize', this.handleOSK)
},
computed: {
isLoggedIn () {
return !!this.$store.state.users.currentUser
},
isHidden () {
return this.autohideFloatingPostButton && (this.hidden || this.inputActive)
return this.autohideFloatingPostButton && (this.scrollingDown || this.inputActive || this.hoverInlineReply)
},
autohideFloatingPostButton () {
return !!this.$store.getters.mergedConfig.autohideFloatingPostButton
},
postStatusForms () {
return this.$store.state.interface.postStatusForms
}
},
watch: {
......@@ -46,10 +53,14 @@ const MobilePostStatusButton = {
activateFloatingPostButtonAutohide () {
window.addEventListener('scroll', this.handleScrollStart)
window.addEventListener('scroll', this.handleScrollEnd)
window.addEventListener('resize', this.handleResize)
window.addResizeListener(document.body, this.checkHoverInlineReply)
},
deactivateFloatingPostButtonAutohide () {
window.removeEventListener('scroll', this.handleScrollStart)
window.removeEventListener('scroll', this.handleScrollEnd)
window.removeEventListener('resize', this.handleResize)
window.removeResizeListener(document.body, this.checkHoverInlineReply)
},
openPostForm () {
this.$store.dispatch('openPostStatusModal')
......@@ -74,20 +85,36 @@ const MobilePostStatusButton = {
this.inputActive = false
}
},
checkHoverInlineReply () {
this.hoverInlineReply = this.postStatusForms.some(form => {
const rect = form.getBoundingClientRect()
return rect.bottom > window.innerHeight + buttonRect.bottom - buttonRect.height &&
rect.right > window.innerWidth + buttonRect.right - buttonRect.width &&
rect.bottom - rect.height < window.innerHeight + buttonRect.bottom &&
rect.right - rect.width < window.innerWidth + buttonRect.right
})
},
handleScrollStart: debounce(function () {
if (window.scrollY > this.oldScrollPos) {
this.hidden = true
this.scrollingDown = true
} else {
this.hidden = false
this.scrollingDown = false
}
this.oldScrollPos = window.scrollY
}, 100, { leading: true, trailing: false }),
handleScrollEnd: debounce(function () {
this.hidden = false
this.scrollingDown = false
this.oldScrollPos = window.scrollY
}, 100, { leading: false, trailing: true })
this.checkHoverInlineReply()
}, 100, { leading: false, trailing: true }),
handleResize: debounce(function () {
this.handleOSK()
this.checkHoverInlineReply()
}, 100)
}
}
export default MobilePostStatusButton
export default FloatingPostButton
<template>
<div v-if="isLoggedIn">
<button
class="new-status-button"
:class="{ 'hidden': isHidden }"
@click="openPostForm"
>
<i class="icon-edit" />
</button>
</div>
<button
class="floating-post-button"
:class="{ 'hidden': isHidden }"
@click="openPostForm"
>
<i class="icon-edit" />
</button>
</template>
<script src="./mobile_post_status_button.js"></script>
<script src="./floating_post_button.js"></script>
<style lang="scss">
@import '../../_variables.scss';
.new-status-button {
.floating-post-button {
width: 5em;
height: 5em;
border-radius: 100%;
......@@ -46,10 +44,4 @@
}
}
@media all and (min-width: 801px) {
.new-status-button {
display: none;
}
}
</style>
import { mapState } from 'vuex'
const NavPanel = {
created () {
if (this.currentUser && this.currentUser.locked) {
this.$store.dispatch('startFetchingFollowRequest')
}
},
computed: {
currentUser () {
return this.$store.state.users.currentUser
},
chat () {
return this.$store.state.chat.channel
},
followRequestCount () {
return this.$store.state.api.followRequests.length
}
}
computed: mapState({
currentUser: state => state.users.currentUser,
chat: state => state.chat.channel,
followRequestCount: state => state.api.followRequests.length,
privateMode: state => state.instance.private,
federating: state => state.instance.federating
})
}
export default NavPanel
......@@ -28,12 +28,12 @@
</span>
</router-link>
</li>
<li>
<li v-if="currentUser || !privateMode">
<router-link :to="{ name: 'public-timeline' }">
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
</router-link>
</li>
<li>
<li v-if="federating && !privateMode">
<router-link :to="{ name: 'public-external-timeline' }">
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
</router-link>
......
......@@ -48,6 +48,11 @@ const PostStatusForm = {
if (this.replyTo) {
this.$refs.textarea.focus()
}
this.$store.dispatch('addNewPostStatusForm', this)
},
beforeDestroy () {
this.$store.dispatch('removePostStatusForm', this)
},
data () {
const preset = this.$route.query.message
......@@ -374,6 +379,9 @@ const PostStatusForm = {
},
dismissScopeNotice () {
this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })
},
getBoundingClientRect () {
return this.$refs.root.getBoundingClientRect()
}
}
}
......
......@@ -41,6 +41,12 @@ const SideDrawer = {
},
followRequestCount () {
return this.$store.state.api.followRequests.length
},
privateMode () {
return this.$store.state.instance.private
},
federating () {
return this.$store.state.instance.federating
}
},
methods: {
......
......@@ -79,12 +79,18 @@
</span>
</router-link>
</li>
<li @click="toggleDrawer">
<li
v-if="currentUser || !privateMode"
@click="toggleDrawer"
>
<router-link to="/main/public">
<i class="button-icon icon-users" /> {{ $t("nav.public_tl") }}
</router-link>
</li>
<li @click="toggleDrawer">
<li
v-if="federating && !privateMode"
@click="toggleDrawer"
>
<router-link to="/main/all">
<i class="button-icon icon-globe" /> {{ $t("nav.twkn") }}
</router-link>
......@@ -99,7 +105,10 @@
</li>
</ul>
<ul>
<li @click="toggleDrawer">
<li
v-if="currentUser || !privateMode"
@click="toggleDrawer"
>
<router-link :to="{ name: 'search' }">
<i class="button-icon icon-search" /> {{ $t("nav.search") }}
</router-link>
......
......@@ -36,7 +36,12 @@ const Timeline = {
}
},
computed: {
timelineError () { return this.$store.state.statuses.error },
timelineError () {
return this.$store.state.statuses.error
},
errorData () {
return this.$store.state.statuses.errorData
},
newStatusCount () {
return this.timeline.newStatusCount
},
......
......@@ -11,15 +11,22 @@
>
{{ $t('timeline.error_fetching') }}
</div>
<div
v-else-if="errorData"
class="loadmore-error alert error"
@click.prevent
>
{{ errorData.statusText }}
</div>
<button
v-if="timeline.newStatusCount > 0 && !timelineError"
v-if="timeline.newStatusCount > 0 && !timelineError && !errorData"
class="loadmore-button"
@click.prevent="showNewStatuses"
>
{{ $t('timeline.show_new') }}{{ newStatusCountStr }}
</button>
<div
v-if="!timeline.newStatusCount > 0 && !timelineError"
v-if="!timeline.newStatusCount > 0 && !timelineError && !errorData"
class="loadmore-text faint"
@click.prevent
>
......@@ -67,12 +74,18 @@
{{ $t('timeline.no_more_statuses') }}
</div>
<a
v-else-if="!timeline.loading"
v-else-if="!timeline.loading && !errorData"
href="#"
@click.prevent="fetchOlderStatuses()"
>
<div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div>
</a>
<a
v-else-if="errorData"
href="#"
>
<div class="new-status-notification text-center panel-footer">{{ errorData.error }}</div>
</a>
<div
v-else
class="new-status-notification text-center panel-footer"
......
{
"about": {
"staff": "スタッフ",
"federation": "フェデレーション",
"mrf_policies": "ゆうこうなMRFポリシー",
"mrf_policies_desc": "MRFポリシーは、このインスタンスのフェデレーションのふるまいを、いじります。これらのMRFポリシーがゆうこうになっています:",
"mrf_policy_simple": "インスタンスのポリシー",
"mrf_policy_simple_accept": "うけいれ",
"mrf_policy_simple_accept_desc": "このインスンスは、これらのインスタンスからのメッセージのみをうけいれます:",
"mrf_policy_simple_reject": "おことわり",
"mrf_policy_simple_reject_desc": "このインスタンスは、これらのインスタンスからのメッセージをうけいれません:",
"mrf_policy_simple_quarantine": "けんえき",
"mrf_policy_simple_quarantine_desc": "このインスタンスは、これらのインスタンスに、パブリックなとうこうのみを、おくります:",
"mrf_policy_simple_ftl_removal": "「つながっているすべてのネットワーク」タイムラインからのぞく",
"mrf_policy_simple_ftl_removal_desc": "このインスタンスは、つながっているすべてのネットワーク」タイムラインから、これらのインスタンスを、とりのぞきます:",
"mrf_policy_simple_media_removal": "メディアをのぞく",
"mrf_policy_simple_media_removal_desc": "このインスタンスは、これらのインスタンスからおくられてきたメディアを、とりのぞきます:",
"mrf_policy_simple_media_nsfw": "メディアをすべてセンシティブにする",
"mrf_policy_simple_media_nsfw_desc": "このインスタンスは、これらのインスタンスからおくられてきたメディアを、すべて、センシティブにマークします:"
},
"chat": {
"title": "チャット"
},
......@@ -68,6 +87,7 @@
},
"nav": {
"about": "これはなに?",
"administration": "アドミニストレーション",
"back": "もどる",
"chat": "ローカルチャット",
"friend_requests": "フォローリクエスト",
......@@ -113,7 +133,9 @@
"search_emoji": "えもじをさがす",
"add_emoji": "えもじをうちこむ",
"custom": "カスタムえもじ",
"unicode": "ユニコードえもじ"
"unicode": "ユニコードえもじ",
"load_all_hint": "はじめの {saneAmount} このえもじだけがロードされています。すべてのえもじをロードすると、パフォーマンスがわるくなるかもしれません。",
"load_all": "すべてのえもじをロード ({emojiAmount} こあります)"
},
"stickers": {
"add_sticker": "ステッカーをふやす"
......@@ -173,6 +195,11 @@
"password_confirmation_match": "パスワードがちがいます"
}
},
"remote_user_resolver": {
"remote_user_resolver": "リモートユーザーリゾルバー",
"searching_for": "さがしています:",
"error": "みつかりませんでした。"
},
"selectable_list": {
"select_all": "すべてえらぶ"
},
......@@ -220,6 +247,9 @@
"cGreen": "リピート",
"cOrange": "おきにいり",
"cRed": "キャンセル",
"change_email": "メールアドレスをかえる",
"change_email_error": "メールアドレスをかえようとしましたが、なにかがおかしいです。",
"changed_email": "メールアドレスをかえることができました!",
"change_password": "パスワードをかえる",
"change_password_error": "パスワードをかえることが、できなかったかもしれません。",
"changed_password": "パスワードが、かわりました!",
......@@ -279,6 +309,7 @@
"use_contain_fit": "がぞうのサムネイルを、きりぬかない",
"name": "なまえ",
"name_bio": "なまえとプロフィール",
"new_email": "あたらしいメールアドレス",
"new_password": "あたらしいパスワード",
"notification_visibility": "ひょうじするつうち",
"notification_visibility_follows": "フォロー",
......@@ -344,6 +375,8 @@
"false": "いいえ",
"true": "はい"
},
"fun": "おたのしみ",
"greentext": "ミームやじるし",
"notifications": "つうち",
"notification_setting": "つうちをうけとる:",
"notification_setting_follows": "あなたがフォローしているひとから",
......@@ -391,6 +424,7 @@
"_tab_label": "くわしく",
"alert": "アラートのバックグラウンド",
"alert_error": "エラー",
"alert_warning": "けいこく",
"badge": "バッジのバックグラウンド",
"badge_notification": "つうち",
"panel_header": "パネルヘッダー",
......@@ -542,6 +576,7 @@
"followers": "フォロワー",
"following": "フォローしています!",
"follows_you": "フォローされました!",
"hidden": "かくされています",
"its_you": "これはあなたです!",
"media": "メディア",
"mention": "メンション",
......@@ -559,6 +594,8 @@
"unmute": "ミュートをやめる",
"unmute_progress": "ミュートをとりけしています...",
"mute_progress": "ミュートしています...",
"hide_repeats": "リピートをかくす",
"show_repeats": "リピートをみる",
"admin_menu": {
"moderation": "モデレーション",
"grant_admin": "アドミンにする",
......@@ -634,6 +671,8 @@
"return_home": "ホームページにもどる",
"not_found": "そのメールアドレスまたはユーザーめいを、みつけることができませんでした。",
"too_many_requests": "パスワードリセットを、ためすことが、おおすぎます。しばらくしてから、ためしてください。",
"password_reset_disabled": "このインスタンスでは、パスワードリセットは、できません。インスタンスのアドミニストレーターに、おといあわせください。"
"password_reset_disabled": "このインスタンスでは、パスワードリセットは、できません。インスタンスのアドミニストレーターに、おといあわせください。",
"password_reset_required": "ログインするには、パスワードをリセットしてください。",
"password_reset_required_but_mailer_is_disabled": "あなたはパスワードのリセットがひつようです。しかし、まずいことに、このインスタンスでは、パスワードのリセットができなくなっています。このインスタンスのアドミニストレーターに、おといあわせください。"
}
}
......@@ -12,7 +12,8 @@ const defaultState = {
window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)')
)
},
mobileLayout: false
mobileLayout: false,
postStatusForms: []
}
const interfaceMod = {
......@@ -35,6 +36,12 @@ const interfaceMod = {
},
setMobileLayout (state, value) {
state.mobileLayout = value
},
addNewPostStatusForm (state, instance) {
state.postStatusForms.push(instance)
},
removePostStatusForm (state, instance) {
del(state.postStatusForms, state.postStatusForms.indexOf(instance))
}
},
actions: {
......@@ -49,6 +56,12 @@ const interfaceMod = {
},
setMobileLayout ({ commit }, value) {
commit('setMobileLayout', value)
},
addNewPostStatusForm ({ commit }, instance) {
commit('addNewPostStatusForm', instance)
},
removePostStatusForm ({ commit }, instance) {
commit('removePostStatusForm', instance)
}
}
}
......
......@@ -38,6 +38,7 @@ export const defaultState = () => ({
notifications: emptyNotifications(),
favorites: new Set(),
error: false,
errorData: null,
timelines: {
mentions: emptyTl(),
public: emptyTl(),
......@@ -479,6 +480,9 @@ export const mutations = {
setError (state, { value }) {
state.error = value
},
setErrorData (state, { value }) {
state.errorData = value
},
setNotificationsLoading (state, { value }) {
state.notifications.loading = value
},
......@@ -528,6 +532,9 @@ const statuses = {
setError ({ rootState, commit }, { value }) {
commit('setError', { value })
},
setErrorData ({ rootState, commit }, { value }) {
commit('setErrorData', { value })
},
setNotificationsLoading ({ rootState, commit }, { value }) {
commit('setNotificationsLoading', { value })
},
......
......@@ -529,16 +529,24 @@ const fetchTimeline = ({
const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&')
url += `?${queryString}`
let status = ''
let statusText = ''
return fetch(url, { headers: authHeaders(credentials) })
.then((data) => {
if (data.ok) {
status = data.status
statusText = data.statusText
return data
})
.then((data) => data.json())
.then((data) => {
if (!data.error) {
return data.map(isNotifications ? parseNotification : parseStatus)
} else {
data.status = status
data.statusText = statusText
return data
}
throw new Error('Error fetching timeline', data)
})
.then((data) => data.json())
.then((data) => data.map(isNotifications ? parseNotification : parseStatus))
}
const fetchPinnedStatuses = ({ id, credentials }) => {
......
......@@ -12,7 +12,7 @@ export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) =>
form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`)
form.append('redirect_uris', REDIRECT_URI)
form.append('scopes', 'read write follow')
form.append('scopes', 'read write follow push admin')
return window.fetch(url, {
method: 'POST',
......@@ -28,7 +28,7 @@ const login = ({ instance, clientId }) => {
response_type: 'code',
client_id: clientId,
redirect_uri: REDIRECT_URI,
scope: 'read write follow'
scope: 'read write follow push admin'
}
const dataString = reduce(data, (acc, v, k) => {
......
......@@ -6,6 +6,7 @@ const update = ({ store, statuses, timeline, showImmediately, userId }) => {
const ccTimeline = camelCase(timeline)
store.dispatch('setError', { value: false })
store.dispatch('setErrorData', { value: null })
store.dispatch('addNewStatuses', {
timeline: ccTimeline,
......@@ -45,6 +46,10 @@ const fetchAndUpdate = ({
return apiService.fetchTimeline(args)
.then((statuses) => {
if (statuses.error) {
store.dispatch('setErrorData', { value: statuses })
return
}
if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) {
store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId })
}
......
......@@ -4330,6 +4330,11 @@ istanbul@0.4.5, istanbul@^0.4.0:
which "^1.1.1"
wordwrap "^1.0.0"
javascript-detect-element-resize@^0.5.3:
version "0.5.3"
resolved "https://registry.yarnpkg.com/javascript-detect-element-resize/-/javascript-detect-element-resize-0.5.3.tgz#1a71cd51dfe565907f299012fe73a294104025de"
integrity sha1-GnHNUd/lZZB/KZAS/nOilBBAJd4=
js-base64@^2.1.9:
version "2.5.0"
resolved "https://registry.yarnpkg.com/js-base64/-/js-base64-2.5.0.tgz#42255ba183ab67ce59a0dee640afdc00ab5ae93e"
......