diff options
Diffstat (limited to 'src')
247 files changed, 18773 insertions, 4363 deletions
@@ -1,15 +1,18 @@ import UserPanel from './components/user_panel/user_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue' import Notifications from './components/notifications/notifications.vue' -import UserFinder from './components/user_finder/user_finder.vue' +import SearchBar from './components/search_bar/search_bar.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import FeaturesPanel from './components/features_panel/features_panel.vue' import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue' 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 MobilePostStatusModal from './components/mobile_post_status_modal/mobile_post_status_modal.vue' -import { unseenNotificationsFromStore } from './services/notification_utils/notification_utils' +import MobilePostStatusButton from './components/mobile_post_status_button/mobile_post_status_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' +import { windowWidth } from './services/window_utils/window_utils' export default { name: 'app', @@ -17,18 +20,21 @@ export default { UserPanel, NavPanel, Notifications, - UserFinder, + SearchBar, InstanceSpecificPanel, FeaturesPanel, WhoToFollowPanel, ChatPanel, MediaModal, SideDrawer, - MobilePostStatusModal + MobilePostStatusButton, + MobileNav, + UserReportingModal, + PostStatusModal }, data: () => ({ mobileActivePanel: 'timeline', - finderHidden: true, + searchBarHidden: true, supportsMask: window.CSS && window.CSS.supports && ( window.CSS.supports('mask-size', 'contain') || window.CSS.supports('-webkit-mask-size', 'contain') || @@ -40,6 +46,10 @@ export default { created () { // Load the locale from the storage this.$i18n.locale = this.$store.state.config.interfaceLanguage + window.addEventListener('resize', this.updateMobileState) + }, + destroyed () { + window.removeEventListener('resize', this.updateMobileState) }, computed: { currentUser () { return this.$store.state.users.currentUser }, @@ -62,7 +72,7 @@ export default { logoBgStyle () { return Object.assign({ 'margin': `${this.$store.state.instance.logoMargin} 0`, - opacity: this.finderHidden ? 1 : 0 + opacity: this.searchBarHidden ? 1 : 0 }, this.enableMask ? {} : { 'background-color': this.enableMask ? '' : 'transparent' }) @@ -81,14 +91,13 @@ export default { sitename () { return this.$store.state.instance.name }, chat () { return this.$store.state.chat.channel.state === 'joined' }, suggestionsEnabled () { return this.$store.state.instance.suggestionsEnabled }, - showInstanceSpecificPanel () { return this.$store.state.instance.showInstanceSpecificPanel }, - unseenNotifications () { - return unseenNotificationsFromStore(this.$store) - }, - unseenNotificationsCount () { - return this.unseenNotifications.length + showInstanceSpecificPanel () { + return this.$store.state.instance.showInstanceSpecificPanel && + !this.$store.state.config.hideISP && + this.$store.state.instance.instanceSpecificPanelContent }, - showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel } + showFeaturesPanel () { return this.$store.state.instance.showFeaturesPanel }, + isMobileLayout () { return this.$store.state.interface.mobileLayout } }, methods: { scrollToTop () { @@ -98,11 +107,15 @@ export default { this.$router.replace('/main/public') this.$store.dispatch('logout') }, - onFinderToggled (hidden) { - this.finderHidden = hidden + onSearchBarToggled (hidden) { + this.searchBarHidden = hidden }, - toggleMobileSidebar () { - this.$refs.sideDrawer.toggleDrawer() + updateMobileState () { + const mobileLayout = windowWidth() <= 800 + const changed = mobileLayout !== this.isMobileLayout + if (changed) { + this.$store.dispatch('setMobileLayout', mobileLayout) + } } } } diff --git a/src/App.scss b/src/App.scss index 598735d9..2190f91a 100644 --- a/src/App.scss +++ b/src/App.scss @@ -10,13 +10,14 @@ position: fixed; z-index: -1; height: 100%; - width: 100%; + left: 0; + right: -20px; background-size: cover; background-repeat: no-repeat; background-position: 0 50%; } -i { +i[class^='icon-'] { user-select: none; } @@ -47,6 +48,12 @@ body { color: var(--text, $fallback--text); max-width: 100vw; overflow-x: hidden; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; + + &.hidden { + display: none; + } } a { @@ -101,6 +108,14 @@ button { background-color: $fallback--bg; background-color: var(--bg, $fallback--bg) } + + &.danger { + // TODO: add better color variable + color: $fallback--text; + color: var(--alertErrorPanelText, $fallback--text); + background-color: $fallback--alertError; + background-color: var(--alertError, $fallback--alertError); + } } label.select { @@ -121,6 +136,7 @@ input, textarea, .select { font-family: sans-serif; font-family: var(--inputFont, sans-serif); font-size: 14px; + margin: 0; padding: 8px .5em; box-sizing: border-box; display: inline-block; @@ -154,7 +170,7 @@ input, textarea, .select { background: transparent; border: none; color: $fallback--text; - color: var(--text, $fallback--text); + color: var(--inputText, --text, $fallback--text); margin: 0; padding: 0 2em 0 .2em; font-family: sans-serif; @@ -174,7 +190,44 @@ input, textarea, .select { flex: 1; } - &[type=radio], + &[type=radio] { + display: none; + &:checked + label::before { + box-shadow: 0px 0px 2px black inset, 0px 0px 0px 4px $fallback--fg inset; + box-shadow: var(--inputShadow), 0px 0px 0px 4px var(--fg, $fallback--fg) inset; + background-color: var(--link, $fallback--link); + } + &:disabled { + &, + & + label, + & + label::before { + opacity: .5; + } + } + + label::before { + flex-shrink: 0; + display: inline-block; + content: ''; + transition: box-shadow 200ms; + width: 1.1em; + height: 1.1em; + border-radius: 100%; // Radio buttons should always be circle + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + margin-right: .5em; + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + vertical-align: top; + text-align: center; + line-height: 1.1em; + font-size: 1.1em; + box-sizing: border-box; + color: transparent; + overflow: hidden; + box-sizing: border-box; + } + } + &[type=checkbox] { display: none; &:checked + label::before { @@ -189,6 +242,7 @@ input, textarea, .select { } } + label::before { + flex-shrink: 0; display: inline-block; content: '✔'; transition: color 200ms; @@ -220,11 +274,45 @@ option { background-color: var(--bg, $fallback--bg); } +.hide-number-spinner { + -moz-appearance: textfield; + &[type=number]::-webkit-inner-spin-button, + &[type=number]::-webkit-outer-spin-button { + opacity: 0; + display: none; + } +} + i[class*=icon-] { color: $fallback--icon; color: var(--icon, $fallback--icon) } +.btn-block { + display: block; + width: 100%; +} + +.btn-group { + position: relative; + display: inline-flex; + vertical-align: middle; + + button { + position: relative; + flex: 1 1 auto; + + &:not(:last-child) { + border-top-right-radius: 0; + border-bottom-right-radius: 0; + } + + &:not(:first-child) { + border-top-left-radius: 0; + border-bottom-left-radius: 0; + } + } +} .container { display: flex; @@ -260,6 +348,7 @@ i[class*=icon-] { align-items: center; position: fixed; height: 50px; + box-sizing: border-box; .logo { display: flex; @@ -299,6 +388,7 @@ i[class*=icon-] { } .inner-nav { + position: relative; margin: auto; box-sizing: border-box; padding-left: 10px; @@ -371,6 +461,7 @@ main-router { .panel-heading { display: flex; + flex: none; border-radius: $fallback--panelRadius $fallback--panelRadius 0 0; border-radius: var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius) 0 0; background-size: cover; @@ -465,41 +556,6 @@ nav { color: var(--faint, $fallback--faint); box-shadow: 0px 0px 4px rgba(0,0,0,.6); box-shadow: var(--topBarShadow); - - .back-button { - display: block; - max-width: 99px; - transition-property: opacity, max-width; - transition-duration: 300ms; - transition-timing-function: ease-out; - - i { - margin: 0 1em; - } - - &.hidden { - opacity: 0; - max-width: 5px; - } - } -} - -.menu-button { - display: none; - position: relative; -} - -.alert-dot { - border-radius: 100%; - height: 8px; - width: 8px; - position: absolute; - left: calc(50% - 4px); - top: calc(50% - 4px); - margin-left: 6px; - margin-top: -6px; - background-color: $fallback--cRed; - background-color: var(--badgeNotification, $fallback--cRed); } .fade-enter-active, .fade-leave-active { @@ -530,31 +586,11 @@ nav { display: none; } -.panel-switcher { - display: none; - width: 100%; - height: 46px; - - button { - display: block; - flex: 1; - max-height: 32px; - margin: 0.5em; - padding: 0.5em; - } -} - @media all and (min-width: 800px) { body { overflow-y: scroll; } - nav { - .back-button { - display: none; - } - } - .sidebar-bounds { overflow: hidden; max-height: 100vh; @@ -648,21 +684,6 @@ nav { text-align: right; } -.visibility-tray { - font-size: 1.2em; - padding: 3px; - cursor: pointer; - - .selected { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } - - div { - padding-top: 5px; - } -} - .visibility-notice { padding: .5em; border: 1px solid $fallback--faint; @@ -671,6 +692,19 @@ nav { border-radius: var(--inputRadius, $fallback--inputRadius); } +.notice-dismissible { + padding-right: 4rem; + position: relative; + + .dismiss { + position: absolute; + top: 0; + right: 0; + padding: .5em; + color: inherit; + } +} + @keyframes modal-background-fadein { from { background-color: rgba(0, 0, 0, 0); @@ -750,6 +784,70 @@ nav { } } +.setting-item { + border-bottom: 2px solid var(--fg, $fallback--fg); + margin: 1em 1em 1.4em; + padding-bottom: 1.4em; + + > div { + margin-bottom: .5em; + &:last-child { + margin-bottom: 0; + } + } + + &:last-child { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 1em; + } + + select { + min-width: 10em; + } + + + textarea { + width: 100%; + max-width: 100%; + height: 100px; + } + + .unavailable, + .unavailable i { + color: var(--cRed, $fallback--cRed); + color: $fallback--cRed; + } + + .btn { + min-height: 28px; + min-width: 10em; + padding: 0 2em; + } + + .number-input { + max-width: 6em; + } +} +.select-multiple { + display: flex; + .option-list { + margin: 0; + padding-left: .5em; + } +} +.setting-list, +.option-list{ + list-style-type: none; + padding-left: 2em; + li { + margin-bottom: 0.5em; + } + .suboptions { + margin-top: 0.3em + } +} + .login-hint { text-align: center; diff --git a/src/App.vue b/src/App.vue index 4fff3d1d..dbe842ec 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,56 +1,126 @@ <template> - <div id="app" v-bind:style="bgAppStyle"> - <div class="app-bg-wrapper" v-bind:style="bgStyle"></div> - <nav class='nav-bar container' @click="scrollToTop()" id="nav"> - <div class='logo' :style='logoBgStyle'> - <div class='mask' :style='logoMaskStyle'></div> - <img :src='logo' :style='logoStyle'> - </div> - <div class='inner-nav'> - <div class='item'> - <a href="#" class="menu-button" @click.stop.prevent="toggleMobileSidebar()"> - <i class="button-icon icon-menu"></i> - <div class="alert-dot" v-if="unseenNotificationsCount"></div> - </a> - <router-link class="site-name" :to="{ name: 'root' }" active-class="home">{{sitename}}</router-link> + <div + id="app" + :style="bgAppStyle" + > + <div + id="app_bg_wrapper" + class="app-bg-wrapper" + :style="bgStyle" + /> + <MobileNav v-if="isMobileLayout" /> + <nav + v-else + id="nav" + class="nav-bar container" + @click="scrollToTop()" + > + <div class="inner-nav"> + <div + class="logo" + :style="logoBgStyle" + > + <div + class="mask" + :style="logoMaskStyle" + /> + <img + :src="logo" + :style="logoStyle" + > + </div> + <div class="item"> + <router-link + class="site-name" + :to="{ name: 'root' }" + active-class="home" + > + {{ sitename }} + </router-link> </div> - <div class='item right'> - <user-finder class="button-icon nav-icon mobile-hidden" @toggled="onFinderToggled"></user-finder> - <router-link class="mobile-hidden" :to="{ name: 'settings'}"><i class="button-icon icon-cog nav-icon" :title="$t('nav.preferences')"></i></router-link> - <a href="#" class="mobile-hidden" v-if="currentUser" @click.prevent="logout"><i class="button-icon icon-logout nav-icon" :title="$t('login.logout')"></i></a> + <div class="item right"> + <search-bar + class="nav-icon mobile-hidden" + @toggled="onSearchBarToggled" + @click.stop.native + /> + <router-link + class="mobile-hidden" + :to="{ name: 'settings'}" + > + <i + class="button-icon icon-cog nav-icon" + :title="$t('nav.preferences')" + /> + </router-link> + <a + v-if="currentUser && currentUser.role === 'admin'" + href="/pleroma/admin/#/login-pleroma" + class="mobile-hidden" + target="_blank" + ><i + class="button-icon icon-gauge nav-icon" + :title="$t('nav.administration')" + /></a> + <a + v-if="currentUser" + href="#" + class="mobile-hidden" + @click.prevent="logout" + ><i + class="button-icon icon-logout nav-icon" + :title="$t('login.logout')" + /></a> </div> </div> </nav> - <div v-if="" class="container" id="content"> - <side-drawer ref="sideDrawer" :logout="logout"></side-drawer> + <div + id="content" + class="container" + > <div class="sidebar-flexer mobile-hidden"> <div class="sidebar-bounds"> <div class="sidebar-scroller"> <div class="sidebar"> - <user-panel></user-panel> - <nav-panel></nav-panel> - <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel> - <features-panel v-if="!currentUser && showFeaturesPanel"></features-panel> - <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel> - <notifications v-if="currentUser"></notifications> + <user-panel /> + <div v-if="!isMobileLayout"> + <nav-panel /> + <instance-specific-panel v-if="showInstanceSpecificPanel" /> + <features-panel v-if="!currentUser && showFeaturesPanel" /> + <who-to-follow-panel v-if="currentUser && suggestionsEnabled" /> + <notifications v-if="currentUser" /> + </div> </div> </div> </div> </div> <div class="main"> - <div v-if="!currentUser" class="login-hint panel panel-default"> - <router-link :to="{ name: 'login' }" class="panel-body"> + <div + v-if="!currentUser" + class="login-hint panel panel-default" + > + <router-link + :to="{ name: 'login' }" + class="panel-body" + > {{ $t("login.hint") }} </router-link> </div> <transition name="fade"> - <router-view></router-view> + <router-view /> </transition> </div> - <media-modal></media-modal> + <media-modal /> </div> - <chat-panel :floating="true" v-if="currentUser && chat" class="floating-chat mobile-hidden"></chat-panel> - <MobilePostStatusModal /> + <chat-panel + v-if="currentUser && chat" + :floating="true" + class="floating-chat mobile-hidden" + /> + <MobilePostStatusButton /> + <UserReportingModal /> + <PostStatusModal /> + <portal-target name="modal" /> </div> </template> diff --git a/src/boot/after_store.js b/src/boot/after_store.js index cd88c188..490ac4d0 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -1,19 +1,23 @@ import Vue from 'vue' import VueRouter from 'vue-router' import routes from './routes' - import App from '../App.vue' +import { windowWidth } from '../services/window_utils/window_utils' +import { getOrCreateApp, getClientToken } from '../services/new_api/oauth.js' +import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' -const afterStoreSetup = ({ store, i18n }) => { - window.fetch('/api/statusnet/config.json') - .then((res) => res.json()) - .then((data) => { - const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey } = data.site +const getStatusnetConfig = async ({ store }) => { + try { + const res = await window.fetch('/api/statusnet/config.json') + if (res.ok) { + const data = await res.json() + const { name, closed: registrationClosed, textlimit, uploadlimit, server, vapidPublicKey, safeDMMentionsEnabled } = data.site store.dispatch('setInstanceOption', { name: 'name', value: name }) store.dispatch('setInstanceOption', { name: 'registrationOpen', value: (registrationClosed === '0') }) store.dispatch('setInstanceOption', { name: 'textlimit', value: parseInt(textlimit) }) store.dispatch('setInstanceOption', { name: 'server', value: server }) + store.dispatch('setInstanceOption', { name: 'safeDM', value: safeDMMentionsEnabled !== '0' }) // TODO: default values for this stuff, added if to not make it break on // my dev config out of the box. @@ -28,153 +32,313 @@ const afterStoreSetup = ({ store, i18n }) => { store.dispatch('setInstanceOption', { name: 'vapidPublicKey', value: vapidPublicKey }) } - var apiConfig = data.site.pleromafe + return data.site.pleromafe + } else { + throw (res) + } + } catch (error) { + console.error('Could not load statusnet config, potentially fatal') + console.error(error) + } +} - window.fetch('/static/config.json') - .then((res) => res.json()) - .catch((err) => { - console.warn('Failed to load static/config.json, continuing without it.') - console.warn(err) - return {} - }) - .then((staticConfig) => { - const overrides = window.___pleromafe_dev_overrides || {} - const env = window.___pleromafe_mode.NODE_ENV - - // This takes static config and overrides properties that are present in apiConfig - let config = {} - if (overrides.staticConfigPreference && env === 'development') { - console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG') - config = Object.assign({}, apiConfig, staticConfig) - } else { - config = Object.assign({}, staticConfig, apiConfig) - } +const getStaticConfig = async () => { + try { + const res = await window.fetch('/static/config.json') + if (res.ok) { + return res.json() + } else { + throw (res) + } + } catch (error) { + console.warn('Failed to load static/config.json, continuing without it.') + console.warn(error) + return {} + } +} - const copyInstanceOption = (name) => { - store.dispatch('setInstanceOption', {name, value: config[name]}) - } +const setSettings = async ({ apiConfig, staticConfig, store }) => { + const overrides = window.___pleromafe_dev_overrides || {} + const env = window.___pleromafe_mode.NODE_ENV - copyInstanceOption('nsfwCensorImage') - copyInstanceOption('background') - copyInstanceOption('hidePostStats') - copyInstanceOption('hideUserStats') - copyInstanceOption('hideFilteredStatuses') - copyInstanceOption('logo') - - store.dispatch('setInstanceOption', { - name: 'logoMask', - value: typeof config.logoMask === 'undefined' - ? true - : config.logoMask - }) - - store.dispatch('setInstanceOption', { - name: 'logoMargin', - value: typeof config.logoMargin === 'undefined' - ? 0 - : config.logoMargin - }) - - copyInstanceOption('redirectRootNoLogin') - copyInstanceOption('redirectRootLogin') - copyInstanceOption('showInstanceSpecificPanel') - copyInstanceOption('scopeOptionsEnabled') - copyInstanceOption('formattingOptionsEnabled') - copyInstanceOption('collapseMessageWithSubject') - copyInstanceOption('loginMethod') - copyInstanceOption('scopeCopy') - copyInstanceOption('subjectLineBehavior') - copyInstanceOption('postContentType') - copyInstanceOption('alwaysShowSubjectInput') - copyInstanceOption('noAttachmentLinks') - copyInstanceOption('showFeaturesPanel') - - if (config.chatDisabled) { - store.dispatch('disableChat') - } + // This takes static config and overrides properties that are present in apiConfig + let config = {} + if (overrides.staticConfigPreference && env === 'development') { + console.warn('OVERRIDING API CONFIG WITH STATIC CONFIG') + config = Object.assign({}, apiConfig, staticConfig) + } else { + config = Object.assign({}, staticConfig, apiConfig) + } - return store.dispatch('setTheme', config['theme']) - }) - .then(() => { - const router = new VueRouter({ - mode: 'history', - routes: routes(store), - 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) - }) - }) - }) + const copyInstanceOption = (name) => { + store.dispatch('setInstanceOption', { name, value: config[name] }) + } + + copyInstanceOption('nsfwCensorImage') + copyInstanceOption('background') + copyInstanceOption('hidePostStats') + copyInstanceOption('hideUserStats') + copyInstanceOption('hideFilteredStatuses') + copyInstanceOption('logo') + + store.dispatch('setInstanceOption', { + name: 'logoMask', + value: typeof config.logoMask === 'undefined' + ? true + : config.logoMask + }) + + store.dispatch('setInstanceOption', { + name: 'logoMargin', + value: typeof config.logoMargin === 'undefined' + ? 0 + : config.logoMargin + }) + store.commit('authFlow/setInitialStrategy', config.loginMethod) - window.fetch('/static/terms-of-service.html') - .then((res) => res.text()) - .then((html) => { + copyInstanceOption('redirectRootNoLogin') + copyInstanceOption('redirectRootLogin') + copyInstanceOption('showInstanceSpecificPanel') + copyInstanceOption('minimalScopesMode') + copyInstanceOption('hideMutedPosts') + copyInstanceOption('collapseMessageWithSubject') + copyInstanceOption('scopeCopy') + copyInstanceOption('subjectLineBehavior') + copyInstanceOption('postContentType') + copyInstanceOption('alwaysShowSubjectInput') + copyInstanceOption('noAttachmentLinks') + copyInstanceOption('showFeaturesPanel') + + return store.dispatch('setTheme', config['theme']) +} + +const getTOS = async ({ store }) => { + try { + const res = await window.fetch('/static/terms-of-service.html') + if (res.ok) { + const html = await res.text() store.dispatch('setInstanceOption', { name: 'tos', value: html }) - }) + } else { + throw (res) + } + } catch (e) { + console.warn("Can't load TOS") + console.warn(e) + } +} - 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('setInstanceOption', { name: 'customEmoji', value: emoji }) - store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true }) - }, - (failure) => { - store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false }) +const getInstancePanel = async ({ store }) => { + try { + const res = await window.fetch('/instance/panel.html') + if (res.ok) { + const html = await res.text() + store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html }) + } else { + throw (res) + } + } catch (e) { + console.warn("Can't load instance panel") + console.warn(e) + } +} + +const getStickers = async ({ store }) => { + try { + const res = await window.fetch('/static/stickers.json') + if (res.ok) { + const values = await res.json() + const stickers = (await Promise.all( + Object.entries(values).map(async ([name, path]) => { + const resPack = await window.fetch(path + 'pack.json') + var meta = {} + if (resPack.ok) { + meta = await resPack.json() + } + return { + pack: name, + path, + meta } - ), - (error) => console.log(error) - ) + }) + )).sort((a, b) => { + return a.meta.title.localeCompare(b.meta.title) + }) + store.dispatch('setInstanceOption', { name: 'stickers', value: stickers }) + } else { + throw (res) + } + } catch (e) { + console.warn("Can't load stickers") + console.warn(e) + } +} - window.fetch('/static/emoji.json') - .then((res) => res.json()) - .then((values) => { +const getStaticEmoji = async ({ store }) => { + try { + const res = await window.fetch('/static/emoji.json') + if (res.ok) { + const values = await res.json() const emoji = Object.keys(values).map((key) => { - return { shortcode: key, image_url: false, 'utf': values[key] } - }) + return { + displayText: key, + imageUrl: false, + replacement: values[key] + } + }).sort((a, b) => a.displayText - b.displayText) store.dispatch('setInstanceOption', { name: 'emoji', value: emoji }) - }) + } else { + throw (res) + } + } catch (e) { + console.warn("Can't load static emoji") + console.warn(e) + } +} - window.fetch('/instance/panel.html') - .then((res) => res.text()) - .then((html) => { - store.dispatch('setInstanceOption', { name: 'instanceSpecificPanelContent', value: html }) +// This is also used to indicate if we have a 'pleroma backend' or not. +// Somewhat weird, should probably be somewhere else. +const getCustomEmoji = async ({ store }) => { + try { + const res = await window.fetch('/api/pleroma/emoji.json') + if (res.ok) { + const result = await res.json() + const values = Array.isArray(result) ? Object.assign({}, ...result) : result + const emoji = Object.entries(values).map(([key, value]) => { + const imageUrl = value.image_url + return { + displayText: key, + imageUrl: imageUrl ? store.state.instance.server + imageUrl : value, + tags: imageUrl ? value.tags.sort((a, b) => a > b ? 1 : 0) : ['utf'], + replacement: `:${key}: ` + } + // Technically could use tags but those are kinda useless right now, should have been "pack" field, that would be more useful + }).sort((a, b) => a.displayText.toLowerCase() > b.displayText.toLowerCase() ? 1 : 0) + store.dispatch('setInstanceOption', { name: 'customEmoji', value: emoji }) + store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: true }) + } else { + throw (res) + } + } catch (e) { + store.dispatch('setInstanceOption', { name: 'pleromaBackend', value: false }) + console.warn("Can't load custom emojis, maybe not a Pleroma instance?") + console.warn(e) + } +} + +const getAppSecret = async ({ store }) => { + const { state, commit } = store + const { oauth, instance } = state + return getOrCreateApp({ ...oauth, instance: instance.server, commit }) + .then((app) => getClientToken({ ...app, instance: instance.server })) + .then((token) => { + commit('setAppToken', token.access_token) + commit('setBackendInteractor', backendInteractorService(store.getters.getToken())) }) +} - window.fetch('/nodeinfo/2.0.json') - .then((res) => res.json()) - .then((data) => { +const getNodeInfo = async ({ store }) => { + try { + const res = await window.fetch('/nodeinfo/2.0.json') + if (res.ok) { + const data = await res.json() const metadata = data.metadata - const features = metadata.features store.dispatch('setInstanceOption', { name: 'mediaProxyAvailable', value: features.includes('media_proxy') }) store.dispatch('setInstanceOption', { name: 'chatAvailable', value: features.includes('chat') }) store.dispatch('setInstanceOption', { name: 'gopherAvailable', value: features.includes('gopher') }) - - store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats }) + store.dispatch('setInstanceOption', { name: 'pollsAvailable', value: features.includes('polls') }) + store.dispatch('setInstanceOption', { name: 'pollLimits', value: metadata.pollLimits }) + store.dispatch('setInstanceOption', { name: 'mailerEnabled', value: metadata.mailerEnabled }) store.dispatch('setInstanceOption', { name: 'restrictedNicknames', value: metadata.restrictedNicknames }) + store.dispatch('setInstanceOption', { name: 'postFormats', value: metadata.postFormats }) const suggestions = metadata.suggestions store.dispatch('setInstanceOption', { name: 'suggestionsEnabled', value: suggestions.enabled }) store.dispatch('setInstanceOption', { name: 'suggestionsWeb', value: suggestions.web }) + + const software = data.software + store.dispatch('setInstanceOption', { name: 'backendVersion', value: software.version }) + + 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') }) + } else { + throw (res) + } + } catch (e) { + console.warn('Could not load nodeinfo') + console.warn(e) + } +} + +const setConfig = async ({ store }) => { + // apiConfig, staticConfig + const configInfos = await Promise.all([getStatusnetConfig({ store }), getStaticConfig()]) + const apiConfig = configInfos[0] + const staticConfig = configInfos[1] + + await setSettings({ store, apiConfig, staticConfig }).then(getAppSecret({ store })) +} + +const checkOAuthToken = async ({ store }) => { + return new Promise(async (resolve, reject) => { + if (store.getters.getUserToken()) { + try { + await store.dispatch('loginUser', store.getters.getUserToken()) + } catch (e) { + console.log(e) + } + } + resolve() + }) +} + +const afterStoreSetup = async ({ store, i18n }) => { + if (store.state.config.customTheme) { + // This is a hack to deal with async loading of config.json and themes + // See: style_setter.js, setPreset() + window.themeLoaded = true + store.dispatch('setOption', { + name: 'customTheme', + value: store.state.config.customTheme }) + } + + const width = windowWidth() + store.dispatch('setMobileLayout', width <= 800) + + // Now we can try getting the server settings and logging in + await Promise.all([ + checkOAuthToken({ store }), + setConfig({ store }), + getTOS({ store }), + getInstancePanel({ store }), + getStickers({ store }), + getStaticEmoji({ store }), + getCustomEmoji({ store }), + getNodeInfo({ store }) + ]) + + const router = new VueRouter({ + mode: 'history', + routes: routes(store), + scrollBehavior: (to, _from, savedPosition) => { + if (to.matched.some(m => m.meta.dontScroll)) { + return false + } + return savedPosition || { x: 0, y: 0 } + } + }) + + /* eslint-disable no-new */ + return new Vue({ + router, + store, + i18n, + el: '#app', + render: h => h(App) + }) } export default afterStoreSetup diff --git a/src/boot/routes.js b/src/boot/routes.js index 7e54a98b..cd02711c 100644 --- a/src/boot/routes.js +++ b/src/boot/routes.js @@ -3,50 +3,60 @@ import PublicAndExternalTimeline from 'components/public_and_external_timeline/p import FriendsTimeline from 'components/friends_timeline/friends_timeline.vue' import TagTimeline from 'components/tag_timeline/tag_timeline.vue' import ConversationPage from 'components/conversation-page/conversation-page.vue' -import Mentions from 'components/mentions/mentions.vue' +import Interactions from 'components/interactions/interactions.vue' import DMs from 'components/dm_timeline/dm_timeline.vue' import UserProfile from 'components/user_profile/user_profile.vue' +import Search from 'components/search/search.vue' import Settings from 'components/settings/settings.vue' import Registration from 'components/registration/registration.vue' +import PasswordReset from 'components/password_reset/password_reset.vue' import UserSettings from 'components/user_settings/user_settings.vue' import FollowRequests from 'components/follow_requests/follow_requests.vue' import OAuthCallback from 'components/oauth_callback/oauth_callback.vue' -import UserSearch from 'components/user_search/user_search.vue' import Notifications from 'components/notifications/notifications.vue' -import LoginForm from 'components/login_form/login_form.vue' +import AuthForm from 'components/auth_form/auth_form.js' import ChatPanel from 'components/chat_panel/chat_panel.vue' import WhoToFollow from 'components/who_to_follow/who_to_follow.vue' import About from 'components/about/about.vue' export default (store) => { + const validateAuthenticatedRoute = (to, from, next) => { + if (store.state.users.currentUser) { + next() + } else { + next(store.state.instance.redirectRootNoLogin || '/main/all') + } + } + return [ { name: 'root', path: '/', redirect: _to => { return (store.state.users.currentUser - ? store.state.instance.redirectRootLogin - : store.state.instance.redirectRootNoLogin) || '/main/all' + ? store.state.instance.redirectRootLogin + : store.state.instance.redirectRootNoLogin) || '/main/all' } }, { name: 'public-external-timeline', path: '/main/all', component: PublicAndExternalTimeline }, { name: 'public-timeline', path: '/main/public', component: PublicTimeline }, - { name: 'friends', path: '/main/friends', component: FriendsTimeline }, + { name: 'friends', path: '/main/friends', component: FriendsTimeline, beforeEnter: validateAuthenticatedRoute }, { name: 'tag-timeline', path: '/tag/:tag', component: TagTimeline }, { name: 'conversation', path: '/notice/:id', component: ConversationPage, meta: { dontScroll: true } }, { name: 'external-user-profile', path: '/users/:id', component: UserProfile }, - { name: 'mentions', path: '/users/:username/mentions', component: Mentions }, - { name: 'dms', path: '/users/:username/dms', component: DMs }, + { name: 'interactions', path: '/users/:username/interactions', component: Interactions, beforeEnter: validateAuthenticatedRoute }, + { name: 'dms', path: '/users/:username/dms', component: DMs, beforeEnter: validateAuthenticatedRoute }, { name: 'settings', path: '/settings', component: Settings }, { name: 'registration', path: '/registration', component: Registration }, + { name: 'password-reset', path: '/password-reset', component: PasswordReset }, { name: 'registration-token', path: '/registration/:token', component: Registration }, - { name: 'friend-requests', path: '/friend-requests', component: FollowRequests }, - { name: 'user-settings', path: '/user-settings', component: UserSettings }, - { name: 'notifications', path: '/:username/notifications', component: Notifications }, - { name: 'login', path: '/login', component: LoginForm }, + { name: 'friend-requests', path: '/friend-requests', component: FollowRequests, beforeEnter: validateAuthenticatedRoute }, + { name: 'user-settings', path: '/user-settings', component: UserSettings, beforeEnter: validateAuthenticatedRoute }, + { name: 'notifications', path: '/:username/notifications', component: Notifications, beforeEnter: validateAuthenticatedRoute }, + { name: 'login', path: '/login', component: AuthForm }, { name: 'chat', path: '/chat', component: ChatPanel, props: () => ({ floating: false }) }, { name: 'oauth-callback', path: '/oauth-callback', component: OAuthCallback, props: (route) => ({ code: route.query.code }) }, - { name: 'user-search', path: '/user-search', component: UserSearch, props: (route) => ({ query: route.query.query }) }, - { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow }, + { name: 'search', path: '/search', component: Search, props: (route) => ({ query: route.query.query }) }, + { name: 'who-to-follow', path: '/who-to-follow', component: WhoToFollow, beforeEnter: validateAuthenticatedRoute }, { name: 'about', path: '/about', component: About }, { name: 'user-profile', path: '/(users/)?:name', component: UserProfile } ] diff --git a/src/components/about/about.vue b/src/components/about/about.vue index 13dec87c..62ae16ea 100644 --- a/src/components/about/about.vue +++ b/src/components/about/about.vue @@ -1,8 +1,8 @@ <template> <div class="sidebar"> - <instance-specific-panel></instance-specific-panel> - <features-panel v-if="showFeaturesPanel"></features-panel> - <terms-of-service-panel></terms-of-service-panel> + <instance-specific-panel /> + <features-panel v-if="showFeaturesPanel" /> + <terms-of-service-panel /> </div> </template> diff --git a/src/components/attachment/attachment.js b/src/components/attachment/attachment.js index 3b7f08dc..e93921fe 100644 --- a/src/components/attachment/attachment.js +++ b/src/components/attachment/attachment.js @@ -51,7 +51,7 @@ const Attachment = { } }, methods: { - linkClicked ({target}) { + linkClicked ({ target }) { if (target.tagName === 'A') { window.open(target.href, '_blank') } diff --git a/src/components/attachment/attachment.vue b/src/components/attachment/attachment.vue index c58bebd3..af16e302 100644 --- a/src/components/attachment/attachment.vue +++ b/src/components/attachment/attachment.vue @@ -1,54 +1,106 @@ <template> - <div v-if="usePlaceHolder" @click="openModal"> - <a class="placeholder" + <div + v-if="usePlaceHolder" + @click="openModal" + > + <a v-if="type !== 'html'" - target="_blank" :href="attachment.url" + class="placeholder" + target="_blank" + :href="attachment.url" > - [{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}] + [{{ nsfw ? "NSFW/" : "" }}{{ type.toUpperCase() }}] </a> </div> <div - v-else class="attachment" - :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" + v-else v-show="!isEmpty" + class="attachment" + :class="{[type]: true, loading, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" > - <a class="image-attachment" v-if="hidden" :href="attachment.url" @click.prevent="toggleHidden"> - <img class="nsfw" :key="nsfwImage" :src="nsfwImage" :class="{'small': isSmall}"/> - <i v-if="type === 'video'" class="play-icon icon-play-circled"></i> + <a + v-if="hidden" + class="image-attachment" + :href="attachment.url" + @click.prevent="toggleHidden" + > + <img + :key="nsfwImage" + class="nsfw" + :src="nsfwImage" + :class="{'small': isSmall}" + > + <i + v-if="type === 'video'" + class="play-icon icon-play-circled" + /> </a> - <div class="hider" v-if="nsfw && hideNsfwLocal && !hidden"> - <a href="#" @click.prevent="toggleHidden">Hide</a> + <div + v-if="nsfw && hideNsfwLocal && !hidden" + class="hider" + > + <a + href="#" + @click.prevent="toggleHidden" + >Hide</a> </div> - <a v-if="type === 'image' && (!hidden || preloadImage)" - @click="openModal" + <a + v-if="type === 'image' && (!hidden || preloadImage)" class="image-attachment" :class="{'hidden': hidden && preloadImage }" - :href="attachment.url" target="_blank" + :href="attachment.url" + target="_blank" :title="attachment.description" + @click="openModal" > - <StillImage :referrerpolicy="referrerpolicy" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/> + <StillImage + :referrerpolicy="referrerpolicy" + :mimetype="attachment.mimetype" + :src="attachment.large_thumb_url || attachment.url" + /> </a> - <a class="video-container" - @click="openModal" + <a v-if="type === 'video' && !hidden" + class="video-container" :class="{'small': isSmall}" :href="allowPlay ? undefined : attachment.url" + @click="openModal" > - <VideoAttachment class="video" :attachment="attachment" :controls="allowPlay" /> - <i v-if="!allowPlay" class="play-icon icon-play-circled"></i> + <VideoAttachment + class="video" + :attachment="attachment" + :controls="allowPlay" + /> + <i + v-if="!allowPlay" + class="play-icon icon-play-circled" + /> </a> - <audio v-if="type === 'audio'" :src="attachment.url" controls></audio> + <audio + v-if="type === 'audio'" + :src="attachment.url" + controls + /> - <div @click.prevent="linkClicked" v-if="type === 'html' && attachment.oembed" class="oembed"> - <div v-if="attachment.thumb_url" class="image"> - <img :src="attachment.thumb_url"/> + <div + v-if="type === 'html' && attachment.oembed" + class="oembed" + @click.prevent="linkClicked" + > + <div + v-if="attachment.thumb_url" + class="image" + > + <img :src="attachment.thumb_url"> </div> <div class="text"> - <h1><a :href="attachment.url">{{attachment.oembed.title}}</a></h1> - <div v-html="attachment.oembed.oembedHTML"></div> + <!-- eslint-disable vue/no-v-html --> + <h1><a :href="attachment.url">{{ attachment.oembed.title }}</a></h1> + <div v-html="attachment.oembed.oembedHTML" /> + <!-- eslint-enable vue/no-v-html --> </div> </div> </div> @@ -68,6 +120,7 @@ max-height: 200px; max-width: 100%; display: flex; + align-items: center; video { max-width: 100%; } @@ -137,6 +190,7 @@ .video { width: 100%; + height: 100%; } .play-icon { @@ -233,7 +287,7 @@ } img { - image-orientation: from-image; + image-orientation: from-image; // NOTE: only FF supports this } } } diff --git a/src/components/auth_form/auth_form.js b/src/components/auth_form/auth_form.js new file mode 100644 index 00000000..e9a6e2d5 --- /dev/null +++ b/src/components/auth_form/auth_form.js @@ -0,0 +1,26 @@ +import LoginForm from '../login_form/login_form.vue' +import MFARecoveryForm from '../mfa_form/recovery_form.vue' +import MFATOTPForm from '../mfa_form/totp_form.vue' +import { mapGetters } from 'vuex' + +const AuthForm = { + name: 'AuthForm', + render (createElement) { + return createElement('component', { is: this.authForm }) + }, + computed: { + authForm () { + if (this.requiredTOTP) { return 'MFATOTPForm' } + if (this.requiredRecovery) { return 'MFARecoveryForm' } + return 'LoginForm' + }, + ...mapGetters('authFlow', ['requiredTOTP', 'requiredRecovery']) + }, + components: { + MFARecoveryForm, + MFATOTPForm, + LoginForm + } +} + +export default AuthForm diff --git a/src/components/autosuggest/autosuggest.js b/src/components/autosuggest/autosuggest.js new file mode 100644 index 00000000..f58f17bb --- /dev/null +++ b/src/components/autosuggest/autosuggest.js @@ -0,0 +1,52 @@ +const debounceMilliseconds = 500 + +export default { + props: { + query: { // function to query results and return a promise + type: Function, + required: true + }, + filter: { // function to filter results in real time + type: Function + }, + placeholder: { + type: String, + default: 'Search...' + } + }, + data () { + return { + term: '', + timeout: null, + results: [], + resultsVisible: false + } + }, + computed: { + filtered () { + return this.filter ? this.filter(this.results) : this.results + } + }, + watch: { + term (val) { + this.fetchResults(val) + } + }, + methods: { + fetchResults (term) { + clearTimeout(this.timeout) + this.timeout = setTimeout(() => { + this.results = [] + if (term) { + this.query(term).then((results) => { this.results = results }) + } + }, debounceMilliseconds) + }, + onInputClick () { + this.resultsVisible = true + }, + onClickOutside () { + this.resultsVisible = false + } + } +} diff --git a/src/components/autosuggest/autosuggest.vue b/src/components/autosuggest/autosuggest.vue new file mode 100644 index 00000000..1f86e996 --- /dev/null +++ b/src/components/autosuggest/autosuggest.vue @@ -0,0 +1,59 @@ +<template> + <div + v-click-outside="onClickOutside" + class="autosuggest" + > + <input + v-model="term" + :placeholder="placeholder" + class="autosuggest-input" + @click="onInputClick" + > + <div + v-if="resultsVisible && filtered.length > 0" + class="autosuggest-results" + > + <slot + v-for="item in filtered" + :item="item" + /> + </div> + </div> +</template> + +<script src="./autosuggest.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.autosuggest { + position: relative; + + &-input { + display: block; + width: 100%; + } + + &-results { + position: absolute; + left: 0; + top: 100%; + right: 0; + max-height: 400px; + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + border-style: solid; + border-width: 1px; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + border-radius: $fallback--inputRadius; + border-radius: var(--inputRadius, $fallback--inputRadius); + border-top-left-radius: 0; + border-top-right-radius: 0; + box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.6); + box-shadow: var(--panelShadow); + overflow-y: auto; + z-index: 1; + } +} +</style> diff --git a/src/components/avatar_list/avatar_list.js b/src/components/avatar_list/avatar_list.js new file mode 100644 index 00000000..9b6301b2 --- /dev/null +++ b/src/components/avatar_list/avatar_list.js @@ -0,0 +1,21 @@ +import UserAvatar from '../user_avatar/user_avatar.vue' +import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' + +const AvatarList = { + props: ['users'], + computed: { + slicedUsers () { + return this.users ? this.users.slice(0, 15) : [] + } + }, + components: { + UserAvatar + }, + methods: { + userProfileLink (user) { + return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + } + } +} + +export default AvatarList diff --git a/src/components/avatar_list/avatar_list.vue b/src/components/avatar_list/avatar_list.vue new file mode 100644 index 00000000..e1b6e971 --- /dev/null +++ b/src/components/avatar_list/avatar_list.vue @@ -0,0 +1,46 @@ +<template> + <div class="avatars"> + <router-link + v-for="user in slicedUsers" + :key="user.id" + :to="userProfileLink(user)" + class="avatars-item" + > + <UserAvatar + :user="user" + class="avatar-small" + /> + </router-link> + </div> +</template> + +<script src="./avatar_list.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.avatars { + display: flex; + margin: 0; + padding: 0; + + // For hiding overflowing elements + flex-wrap: wrap; + height: 24px; + + .avatars-item { + margin: 0 0 5px 5px; + + &:first-child { + padding-left: 5px; + } + + .avatar-small { + border-radius: $fallback--avatarAltRadius; + border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius); + height: 24px; + width: 24px; + } + } +} +</style> diff --git a/src/components/basic_user_card/basic_user_card.vue b/src/components/basic_user_card/basic_user_card.vue index 9b80c72b..8a02174e 100644 --- a/src/components/basic_user_card/basic_user_card.vue +++ b/src/components/basic_user_card/basic_user_card.vue @@ -1,22 +1,51 @@ <template> <div class="basic-user-card"> <router-link :to="userProfileLink(user)"> - <UserAvatar class="avatar" @click.prevent.native="toggleUserExpanded" :src="user.profile_image_url"/> + <UserAvatar + class="avatar" + :user="user" + @click.prevent.native="toggleUserExpanded" + /> </router-link> - <div class="basic-user-card-expanded-content" v-if="userExpanded"> - <UserCard :user="user" :rounded="true" :bordered="true"/> + <div + v-if="userExpanded" + class="basic-user-card-expanded-content" + > + <UserCard + :user="user" + :rounded="true" + :bordered="true" + /> </div> - <div class="basic-user-card-collapsed-content" v-else> - <div :title="user.name" class="basic-user-card-user-name"> - <span v-if="user.name_html" v-html="user.name_html"></span> - <span v-else>{{ user.name }}</span> + <div + v-else + class="basic-user-card-collapsed-content" + > + <div + :title="user.name" + class="basic-user-card-user-name" + > + <!-- eslint-disable vue/no-v-html --> + <span + v-if="user.name_html" + class="basic-user-card-user-name-value" + v-html="user.name_html" + /> + <!-- eslint-enable vue/no-v-html --> + <span + v-else + class="basic-user-card-user-name-value" + >{{ user.name }}</span> </div> <div> - <router-link class="basic-user-card-screen-name" :to="userProfileLink(user)"> - @{{user.screen_name}} + <router-link + class="basic-user-card-screen-name" + :to="userProfileLink(user)" + > + @{{ user.screen_name }} </router-link> </div> - <slot></slot> + <slot /> </div> </div> </template> @@ -24,19 +53,11 @@ <script src="./basic_user_card.js"></script> <style lang="scss"> -@import '../../_variables.scss'; - .basic-user-card { display: flex; flex: 1 0; margin: 0; - padding-top: 0.6em; - padding-right: 1em; - padding-bottom: 0.6em; - padding-left: 1em; - border-bottom: 1px solid; - border-bottom-color: $fallback--border; - border-bottom-color: var(--border, $fallback--border); + padding: 0.6em 1em; &-collapsed-content { margin-left: 0.7em; @@ -54,9 +75,19 @@ } } + &-user-name-value, + &-screen-name { + display: inline-block; + max-width: 100%; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + } + &-expanded-content { flex: 1; margin-left: 0.7em; + min-width: 0; } } </style> diff --git a/src/components/block_card/block_card.js b/src/components/block_card/block_card.js index 11fa27b4..c459ff1b 100644 --- a/src/components/block_card/block_card.js +++ b/src/components/block_card/block_card.js @@ -9,7 +9,7 @@ const BlockCard = { }, computed: { user () { - return this.$store.getters.userById(this.userId) + return this.$store.getters.findUser(this.userId) }, blocked () { return this.user.statusnet_blocking diff --git a/src/components/block_card/block_card.vue b/src/components/block_card/block_card.vue index 8eb56e25..5b00b738 100644 --- a/src/components/block_card/block_card.vue +++ b/src/components/block_card/block_card.vue @@ -1,7 +1,12 @@ <template> <basic-user-card :user="user"> <div class="block-card-content-container"> - <button class="btn btn-default" @click="unblockUser" :disabled="progress" v-if="blocked"> + <button + v-if="blocked" + class="btn btn-default" + :disabled="progress" + @click="unblockUser" + > <template v-if="progress"> {{ $t('user_card.unblock_progress') }} </template> @@ -9,7 +14,12 @@ {{ $t('user_card.unblock') }} </template> </button> - <button class="btn btn-default" @click="blockUser" :disabled="progress" v-else> + <button + v-else + class="btn btn-default" + :disabled="progress" + @click="blockUser" + > <template v-if="progress"> {{ $t('user_card.block_progress') }} </template> diff --git a/src/components/chat_panel/chat_panel.js b/src/components/chat_panel/chat_panel.js index bbc9b49f..f2e3adf0 100644 --- a/src/components/chat_panel/chat_panel.js +++ b/src/components/chat_panel/chat_panel.js @@ -16,7 +16,7 @@ const chatPanel = { }, methods: { submit (message) { - this.$store.state.chat.channel.push('new_msg', {text: message}, 10000) + this.$store.state.chat.channel.push('new_msg', { text: message }, 10000) this.currentMessage = '' }, togglePanel () { diff --git a/src/components/chat_panel/chat_panel.vue b/src/components/chat_panel/chat_panel.vue index b37469ac..3677722f 100644 --- a/src/components/chat_panel/chat_panel.vue +++ b/src/components/chat_panel/chat_panel.vue @@ -1,41 +1,70 @@ <template> - <div class="chat-panel" v-if="!this.collapsed || !this.floating"> + <div + v-if="!collapsed || !floating" + class="chat-panel" + > <div class="panel panel-default"> - <div class="panel-heading timeline-heading" :class="{ 'chat-heading': floating }" @click.stop.prevent="togglePanel"> + <div + class="panel-heading timeline-heading" + :class="{ 'chat-heading': floating }" + @click.stop.prevent="togglePanel" + > <div class="title"> - <span>{{$t('chat.title')}}</span> - <i class="icon-cancel" v-if="floating"></i> + <span>{{ $t('chat.title') }}</span> + <i + v-if="floating" + class="icon-cancel" + /> </div> </div> - <div class="chat-window" v-chat-scroll> - <div class="chat-message" v-for="message in messages" :key="message.id"> + <div + v-chat-scroll + class="chat-window" + > + <div + v-for="message in messages" + :key="message.id" + class="chat-message" + > <span class="chat-avatar"> - <img :src="message.author.avatar" /> + <img :src="message.author.avatar"> </span> <div class="chat-content"> <router-link class="chat-name" - :to="userProfileLink(message.author)"> - {{message.author.username}} + :to="userProfileLink(message.author)" + > + {{ message.author.username }} </router-link> <br> <span class="chat-text"> - {{message.text}} + {{ message.text }} </span> </div> </div> </div> <div class="chat-input"> - <textarea @keyup.enter="submit(currentMessage)" v-model="currentMessage" class="chat-input-textarea" rows="1"></textarea> + <textarea + v-model="currentMessage" + class="chat-input-textarea" + rows="1" + @keyup.enter="submit(currentMessage)" + /> </div> </div> </div> - <div v-else class="chat-panel"> + <div + v-else + class="chat-panel" + > <div class="panel panel-default"> - <div class="panel-heading stub timeline-heading chat-heading" @click.stop.prevent="togglePanel"> + <div + class="panel-heading stub timeline-heading chat-heading" + @click.stop.prevent="togglePanel" + > <div class="title"> - <i class="icon-comment-empty"></i> - {{$t('chat.title')}} + <i class="icon-comment-empty" /> + {{ $t('chat.title') }} </div> </div> </div> diff --git a/src/components/checkbox/checkbox.vue b/src/components/checkbox/checkbox.vue new file mode 100644 index 00000000..2b822ec3 --- /dev/null +++ b/src/components/checkbox/checkbox.vue @@ -0,0 +1,80 @@ +<template> + <label class="checkbox"> + <input + type="checkbox" + :checked="checked" + :indeterminate.prop="indeterminate" + @change="$emit('change', $event.target.checked)" + > + <i class="checkbox-indicator" /> + <span v-if="!!$slots.default"><slot /></span> + </label> +</template> + +<script> +export default { + model: { + prop: 'checked', + event: 'change' + }, + props: ['checked', 'indeterminate'] +} +</script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.checkbox { + position: relative; + display: inline-block; + padding-left: 1.2em; + min-height: 1.2em; + + &-indicator::before { + position: absolute; + left: 0; + top: 0; + display: block; + content: '✔'; + transition: color 200ms; + width: 1.1em; + height: 1.1em; + border-radius: $fallback--checkboxRadius; + border-radius: var(--checkboxRadius, $fallback--checkboxRadius); + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + vertical-align: top; + text-align: center; + line-height: 1.1em; + font-size: 1.1em; + color: transparent; + overflow: hidden; + box-sizing: border-box; + } + + input[type=checkbox] { + display: none; + + &:checked + .checkbox-indicator::before { + color: $fallback--text; + color: var(--text, $fallback--text); + } + + &:indeterminate + .checkbox-indicator::before { + content: '–'; + color: $fallback--text; + color: var(--text, $fallback--text); + } + + &:disabled + .checkbox-indicator::before { + opacity: .5; + } + } + + & > span { + margin-left: .5em; + } +} +</style> diff --git a/src/components/color_input/color_input.vue b/src/components/color_input/color_input.vue index 34eec248..9db62e81 100644 --- a/src/components/color_input/color_input.vue +++ b/src/components/color_input/color_input.vue @@ -1,33 +1,44 @@ <template> -<div class="color-control style-control" :class="{ disabled: !present || disabled }"> - <label :for="name" class="label"> - {{label}} - </label> - <input - v-if="typeof fallback !== 'undefined'" - class="opt exlcude-disabled" - :id="name + '-o'" - type="checkbox" - :checked="present" - @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"> - <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> - <input - :id="name" - class="color-input" - type="color" - :value="value || fallback" - :disabled="!present || disabled" - @input="$emit('input', $event.target.value)" + <div + class="color-control style-control" + :class="{ disabled: !present || disabled }" + > + <label + :for="name" + class="label" > - <input - :id="name + '-t'" - class="text-input" - type="text" - :value="value || fallback" - :disabled="!present || disabled" - @input="$emit('input', $event.target.value)" + {{ label }} + </label> + <input + v-if="typeof fallback !== 'undefined'" + :id="name + '-o'" + class="opt exlcude-disabled" + type="checkbox" + :checked="present" + @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" > -</div> + <label + v-if="typeof fallback !== 'undefined'" + class="opt-l" + :for="name + '-o'" + /> + <input + :id="name" + class="color-input" + type="color" + :value="value || fallback" + :disabled="!present || disabled" + @input="$emit('input', $event.target.value)" + > + <input + :id="name + '-t'" + class="text-input" + type="text" + :value="value || fallback" + :disabled="!present || disabled" + @input="$emit('input', $event.target.value)" + > + </div> </template> <script> diff --git a/src/components/contrast_ratio/contrast_ratio.vue b/src/components/contrast_ratio/contrast_ratio.vue index bd971d00..15a450a2 100644 --- a/src/components/contrast_ratio/contrast_ratio.vue +++ b/src/components/contrast_ratio/contrast_ratio.vue @@ -1,28 +1,38 @@ <template> -<span v-if="contrast" class="contrast-ratio"> - <span :title="hint" class="rating"> - <span v-if="contrast.aaa"> - <i class="icon-thumbs-up-alt"/> + <span + v-if="contrast" + class="contrast-ratio" + > + <span + :title="hint" + class="rating" + > + <span v-if="contrast.aaa"> + <i class="icon-thumbs-up-alt" /> + </span> + <span v-if="!contrast.aaa && contrast.aa"> + <i class="icon-adjust" /> + </span> + <span v-if="!contrast.aaa && !contrast.aa"> + <i class="icon-attention" /> + </span> </span> - <span v-if="!contrast.aaa && contrast.aa"> - <i class="icon-adjust"/> - </span> - <span v-if="!contrast.aaa && !contrast.aa"> - <i class="icon-attention"/> - </span> - </span> - <span class="rating" v-if="contrast && large" :title="hint_18pt"> - <span v-if="contrast.laaa"> - <i class="icon-thumbs-up-alt"/> - </span> - <span v-if="!contrast.laaa && contrast.laa"> - <i class="icon-adjust"/> - </span> - <span v-if="!contrast.laaa && !contrast.laa"> - <i class="icon-attention"/> + <span + v-if="contrast && large" + class="rating" + :title="hint_18pt" + > + <span v-if="contrast.laaa"> + <i class="icon-thumbs-up-alt" /> + </span> + <span v-if="!contrast.laaa && contrast.laa"> + <i class="icon-adjust" /> + </span> + <span v-if="!contrast.laaa && !contrast.laa"> + <i class="icon-attention" /> + </span> </span> </span> -</span> </template> <script> diff --git a/src/components/conversation-page/conversation-page.js b/src/components/conversation-page/conversation-page.js index 8f1ac3d9..8f996be1 100644 --- a/src/components/conversation-page/conversation-page.js +++ b/src/components/conversation-page/conversation-page.js @@ -1,17 +1,12 @@ import Conversation from '../conversation/conversation.vue' -import { find } from 'lodash' const conversationPage = { components: { Conversation }, computed: { - statusoid () { - const id = this.$route.params.id - const statuses = this.$store.state.statuses.allStatuses - const status = find(statuses, {id}) - - return status + statusId () { + return this.$route.params.id } } } diff --git a/src/components/conversation-page/conversation-page.vue b/src/components/conversation-page/conversation-page.vue index b03eea28..8cc0a55f 100644 --- a/src/components/conversation-page/conversation-page.vue +++ b/src/components/conversation-page/conversation-page.vue @@ -1,5 +1,9 @@ <template> - <conversation :collapsable="false" :statusoid="statusoid"></conversation> + <conversation + :collapsable="false" + is-page="true" + :status-id="statusId" + /> </template> <script src="./conversation-page.js"></script> diff --git a/src/components/conversation/conversation.js b/src/components/conversation/conversation.js index 48b8aaaa..72ee9c39 100644 --- a/src/components/conversation/conversation.js +++ b/src/components/conversation/conversation.js @@ -1,9 +1,11 @@ -import { reduce, filter } from 'lodash' +import { reduce, filter, findIndex, clone, get } from 'lodash' import Status from '../status/status.vue' const sortById = (a, b) => { - const seqA = Number(a.id) - const seqB = Number(b.id) + const idA = a.type === 'retweet' ? a.retweeted_status.id : a.id + const idB = b.type === 'retweet' ? b.retweeted_status.id : b.id + const seqA = Number(idA) + const seqB = Number(idB) const isSeqA = !Number.isNaN(seqA) const isSeqB = !Number.isNaN(seqB) if (isSeqA && isSeqB) { @@ -13,49 +15,76 @@ const sortById = (a, b) => { } else if (!isSeqA && isSeqB) { return 1 } else { - return a.id < b.id ? -1 : 1 + return idA < idB ? -1 : 1 } } -const sortAndFilterConversation = (conversation) => { - conversation = filter(conversation, (status) => status.type !== 'retweet') +const sortAndFilterConversation = (conversation, statusoid) => { + if (statusoid.type === 'retweet') { + conversation = filter( + conversation, + (status) => (status.type === 'retweet' || status.id !== statusoid.retweeted_status.id) + ) + } else { + conversation = filter(conversation, (status) => status.type !== 'retweet') + } return conversation.filter(_ => _).sort(sortById) } const conversation = { data () { return { - highlight: null + highlight: null, + expanded: false } }, props: [ - 'statusoid', - 'collapsable' + 'statusId', + 'collapsable', + 'isPage', + 'pinnedStatusIdsObject', + 'inProfile' ], + created () { + if (this.isPage) { + this.fetchConversation() + } + }, computed: { status () { - return this.statusoid + return this.$store.state.statuses.allStatusesObject[this.statusId] }, - statusId () { - if (this.statusoid.retweeted_status) { - return this.statusoid.retweeted_status.id + originalStatusId () { + if (this.status.retweeted_status) { + return this.status.retweeted_status.id } else { - return this.statusoid.id + return this.statusId } }, + conversationId () { + return this.getConversationId(this.statusId) + }, conversation () { if (!this.status) { return [] } - const conversationId = this.status.statusnet_conversation_id - const statuses = this.$store.state.statuses.allStatuses - const conversation = filter(statuses, { statusnet_conversation_id: conversationId }) - return sortAndFilterConversation(conversation) + if (!this.isExpanded) { + return [this.status] + } + + const conversation = clone(this.$store.state.statuses.conversationsObject[this.conversationId]) + const statusIndex = findIndex(conversation, { id: this.originalStatusId }) + if (statusIndex !== -1) { + conversation[statusIndex] = this.status + } + + return sortAndFilterConversation(conversation, this.status) }, replies () { let i = 1 - return reduce(this.conversation, (result, {id, in_reply_to_status_id}) => { + // eslint-disable-next-line camelcase + return reduce(this.conversation, (result, { id, in_reply_to_status_id }) => { /* eslint-disable camelcase */ const irid = in_reply_to_status_id /* eslint-enable camelcase */ @@ -69,39 +98,67 @@ const conversation = { i++ return result }, {}) + }, + isExpanded () { + return this.expanded || this.isPage } }, components: { Status }, - created () { - this.fetchConversation() - }, watch: { - '$route': 'fetchConversation' + statusId (newVal, oldVal) { + const newConversationId = this.getConversationId(newVal) + const oldConversationId = this.getConversationId(oldVal) + if (newConversationId && oldConversationId && newConversationId === oldConversationId) { + this.setHighlight(this.originalStatusId) + } else { + this.fetchConversation() + } + }, + expanded (value) { + if (value) { + this.fetchConversation() + } + } }, methods: { fetchConversation () { if (this.status) { - const conversationId = this.status.statusnet_conversation_id - this.$store.state.api.backendInteractor.fetchConversation({id: conversationId}) - .then((statuses) => this.$store.dispatch('addNewStatuses', { statuses })) - .then(() => this.setHighlight(this.statusId)) + this.$store.state.api.backendInteractor.fetchConversation({ id: this.statusId }) + .then(({ ancestors, descendants }) => { + this.$store.dispatch('addNewStatuses', { statuses: ancestors }) + this.$store.dispatch('addNewStatuses', { statuses: descendants }) + this.setHighlight(this.originalStatusId) + }) } else { - const id = this.$route.params.id - this.$store.state.api.backendInteractor.fetchStatus({id}) - .then((status) => this.$store.dispatch('addNewStatuses', { statuses: [status] })) - .then(() => this.fetchConversation()) + this.$store.state.api.backendInteractor.fetchStatus({ id: this.statusId }) + .then((status) => { + this.$store.dispatch('addNewStatuses', { statuses: [status] }) + this.fetchConversation() + }) } }, getReplies (id) { return this.replies[id] || [] }, focused (id) { - return id === this.statusId + return (this.isExpanded) && id === this.statusId }, setHighlight (id) { + if (!id) return this.highlight = id + this.$store.dispatch('fetchFavsAndRepeats', id) + }, + getHighlight () { + return this.isExpanded ? this.highlight : null + }, + toggleExpanded () { + this.expanded = !this.expanded + }, + getConversationId (statusId) { + const status = this.$store.state.statuses.allStatusesObject[statusId] + return get(status, 'retweeted_status.statusnet_conversation_id', get(status, 'statusnet_conversation_id')) } } } diff --git a/src/components/conversation/conversation.vue b/src/components/conversation/conversation.vue index 5528fef6..0f1de55f 100644 --- a/src/components/conversation/conversation.vue +++ b/src/components/conversation/conversation.vue @@ -1,26 +1,53 @@ <template> - <div class="timeline panel panel-default"> - <div class="panel-heading conversation-heading"> + <div + class="timeline panel-default" + :class="[isExpanded ? 'panel' : 'panel-disabled']" + > + <div + v-if="isExpanded" + class="panel-heading conversation-heading" + > <span class="title"> {{ $t('timeline.conversation') }} </span> <span v-if="collapsable"> - <a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a> + <a + href="#" + @click.prevent="toggleExpanded" + >{{ $t('timeline.collapse') }}</a> </span> </div> - <div class="panel-body"> - <div class="timeline"> - <status - v-for="status in conversation" - @goto="setHighlight" :key="status.id" - :inlineExpanded="collapsable" :statusoid="status" - :expandable='false' :focused="focused(status.id)" - :inConversation='true' - :highlight="highlight" - :replies="getReplies(status.id)" - class="status-fadein"> - </status> - </div> - </div> + <status + v-for="status in conversation" + :key="status.id" + :inline-expanded="collapsable && isExpanded" + :statusoid="status" + :expandable="!isExpanded" + :show-pinned="pinnedStatusIdsObject && pinnedStatusIdsObject[status.id]" + :focused="focused(status.id)" + :in-conversation="isExpanded" + :highlight="getHighlight()" + :replies="getReplies(status.id)" + :in-profile="inProfile" + class="status-fadein panel-body" + @goto="setHighlight" + @toggleExpanded="toggleExpanded" + /> </div> </template> <script src="./conversation.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.timeline { + .panel-disabled { + .status-el { + border-left: none; + border-bottom-width: 1px; + border-bottom-style: solid; + border-color: var(--border, $fallback--border); + border-radius: 0; + } + } +} +</style> diff --git a/src/components/delete_button/delete_button.js b/src/components/delete_button/delete_button.js deleted file mode 100644 index f2920666..00000000 --- a/src/components/delete_button/delete_button.js +++ /dev/null @@ -1,17 +0,0 @@ -const DeleteButton = { - props: [ 'status' ], - methods: { - deleteStatus () { - const confirmed = window.confirm('Do you really want to delete this status?') - if (confirmed) { - this.$store.dispatch('deleteStatus', { id: this.status.id }) - } - } - }, - computed: { - currentUser () { return this.$store.state.users.currentUser }, - canDelete () { return this.currentUser && this.currentUser.rights.delete_others_notice || this.status.user.id === this.currentUser.id } - } -} - -export default DeleteButton diff --git a/src/components/delete_button/delete_button.vue b/src/components/delete_button/delete_button.vue deleted file mode 100644 index f4c91cfd..00000000 --- a/src/components/delete_button/delete_button.vue +++ /dev/null @@ -1,21 +0,0 @@ -<template> - <div v-if="canDelete"> - <a href="#" v-on:click.prevent="deleteStatus()"> - <i class='button-icon icon-cancel delete-status'></i> - </a> - </div> -</template> - -<script src="./delete_button.js" ></script> - -<style lang="scss"> -@import '../../_variables.scss'; - -.icon-cancel,.delete-status { - cursor: pointer; - &:hover { - color: $fallback--cRed; - color: var(--cRed, $fallback--cRed); - } -} -</style> diff --git a/src/components/dialog_modal/dialog_modal.js b/src/components/dialog_modal/dialog_modal.js new file mode 100644 index 00000000..f14e3fe9 --- /dev/null +++ b/src/components/dialog_modal/dialog_modal.js @@ -0,0 +1,14 @@ +const DialogModal = { + props: { + darkOverlay: { + default: true, + type: Boolean + }, + onCancel: { + default: () => {}, + type: Function + } + } +} + +export default DialogModal diff --git a/src/components/dialog_modal/dialog_modal.vue b/src/components/dialog_modal/dialog_modal.vue new file mode 100644 index 00000000..55d7a7d2 --- /dev/null +++ b/src/components/dialog_modal/dialog_modal.vue @@ -0,0 +1,100 @@ +<template> + <span + :class="{ 'dark-overlay': darkOverlay }" + @click.self.stop="onCancel()" + > + <div + class="dialog-modal panel panel-default" + @click.stop="" + > + <div class="panel-heading dialog-modal-heading"> + <div class="title"> + <slot name="header" /> + </div> + </div> + <div class="dialog-modal-content"> + <slot name="default" /> + </div> + <div class="dialog-modal-footer user-interactions panel-footer"> + <slot name="footer" /> + </div> + </div> + </span> +</template> + +<script src="./dialog_modal.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +// TODO: unify with other modals. +.dark-overlay { + &::before { + bottom: 0; + content: " "; + display: block; + cursor: default; + left: 0; + position: fixed; + right: 0; + top: 0; + background: rgba(27,31,35,.5); + z-index: 99; + } +} + +.dialog-modal.panel { + top: 0; + left: 50%; + max-height: 80vh; + max-width: 90vw; + margin: 15vh auto; + position: fixed; + transform: translateX(-50%); + z-index: 999; + cursor: default; + display: block; + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + + .dialog-modal-heading { + padding: .5em .5em; + margin-right: auto; + margin-bottom: 0; + white-space: nowrap; + color: var(--panelText); + background-color: $fallback--fg; + background-color: var(--panel, $fallback--fg); + + .title { + margin-bottom: 0; + text-align: center; + } + } + + .dialog-modal-content { + margin: 0; + padding: 1rem 1rem; + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + white-space: normal; + } + + .dialog-modal-footer { + margin: 0; + padding: .5em .5em; + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + border-top: 1px solid $fallback--bg; + border-top: 1px solid var(--bg, $fallback--bg); + display: flex; + justify-content: flex-end; + + button { + width: auto; + margin-left: .5rem; + } + } +} + +</style> diff --git a/src/components/dm_timeline/dm_timeline.vue b/src/components/dm_timeline/dm_timeline.vue index f03da4d3..c4e4d070 100644 --- a/src/components/dm_timeline/dm_timeline.vue +++ b/src/components/dm_timeline/dm_timeline.vue @@ -1,5 +1,9 @@ <template> - <Timeline :title="$t('nav.dms')" v-bind:timeline="timeline" v-bind:timeline-name="'dms'"/> + <Timeline + :title="$t('nav.dms')" + :timeline="timeline" + :timeline-name="'dms'" + /> </template> <script src="./dm_timeline.js"></script> diff --git a/src/components/emoji_input/emoji_input.js b/src/components/emoji_input/emoji_input.js new file mode 100644 index 00000000..a586b819 --- /dev/null +++ b/src/components/emoji_input/emoji_input.js @@ -0,0 +1,431 @@ +import Completion from '../../services/completion/completion.js' +import EmojiPicker from '../emoji_picker/emoji_picker.vue' +import { take } from 'lodash' +import { findOffset } from '../../services/offset_finder/offset_finder.service.js' + +/** + * EmojiInput - augmented inputs for emoji and autocomplete support in inputs + * without having to give up the comfort of <input/> and <textarea/> elements + * + * Intended usage is: + * <EmojiInput v-model="something"> + * <input v-model="something"/> + * </EmojiInput> + * + * Works only with <input> and <textarea>. Intended to use with only one nested + * input. It will find first input or textarea and work with that, multiple + * nested children not tested. You HAVE TO duplicate v-model for both + * <emoji-input> and <input>/<textarea> otherwise it will not work. + * + * Be prepared for CSS troubles though because it still wraps component in a div + * while TRYING to make it look like nothing happened, but it could break stuff. + */ + +const EmojiInput = { + props: { + suggest: { + /** + * suggest: function (input: String) => Suggestion[] + * + * Function that takes input string which takes string (textAtCaret) + * and returns an array of Suggestions + * + * Suggestion is an object containing following properties: + * displayText: string. Main display text, what actual suggestion + * represents (user's screen name/emoji shortcode) + * replacement: string. Text that should replace the textAtCaret + * detailText: string, optional. Subtitle text, providing additional info + * if present (user's nickname) + * imageUrl: string, optional. Image to display alongside with suggestion, + * currently if no image is provided, replacement will be used (for + * unicode emojis) + * + * TODO: make it asynchronous when adding proper server-provided user + * suggestions + * + * For commonly used suggestors (emoji, users, both) use suggestor.js + */ + required: true, + type: Function + }, + value: { + /** + * Used for v-model + */ + required: true, + type: String + }, + enableEmojiPicker: { + /** + * Enables emoji picker support, this implies that custom emoji are supported + */ + required: false, + type: Boolean, + default: false + }, + hideEmojiButton: { + /** + * intended to use with external picker trigger, i.e. you have a button outside + * input that will open up the picker, see triggerShowPicker() + */ + required: false, + type: Boolean, + default: false + }, + enableStickerPicker: { + /** + * Enables sticker picker support, only makes sense when enableEmojiPicker=true + */ + required: false, + type: Boolean, + default: false + } + }, + data () { + return { + input: undefined, + highlighted: 0, + caret: 0, + focused: false, + blurTimeout: null, + showPicker: false, + temporarilyHideSuggestions: false, + keepOpen: false, + disableClickOutside: false + } + }, + components: { + EmojiPicker + }, + computed: { + padEmoji () { + return this.$store.state.config.padEmoji + }, + suggestions () { + const firstchar = this.textAtCaret.charAt(0) + if (this.textAtCaret === firstchar) { return [] } + const matchedSuggestions = this.suggest(this.textAtCaret) + if (matchedSuggestions.length <= 0) { + return [] + } + return take(matchedSuggestions, 5) + .map(({ imageUrl, ...rest }, index) => ({ + ...rest, + // eslint-disable-next-line camelcase + img: imageUrl || '', + highlighted: index === this.highlighted + })) + }, + showSuggestions () { + return this.focused && + this.suggestions && + this.suggestions.length > 0 && + !this.showPicker && + !this.temporarilyHideSuggestions + }, + textAtCaret () { + return (this.wordAtCaret || {}).word || '' + }, + wordAtCaret () { + if (this.value && this.caret) { + const word = Completion.wordAtPosition(this.value, this.caret - 1) || {} + return word + } + } + }, + mounted () { + const slots = this.$slots.default + if (!slots || slots.length === 0) return + const input = slots.find(slot => ['input', 'textarea'].includes(slot.tag)) + if (!input) return + this.input = input + this.resize() + input.elm.addEventListener('blur', this.onBlur) + input.elm.addEventListener('focus', this.onFocus) + input.elm.addEventListener('paste', this.onPaste) + input.elm.addEventListener('keyup', this.onKeyUp) + input.elm.addEventListener('keydown', this.onKeyDown) + input.elm.addEventListener('click', this.onClickInput) + input.elm.addEventListener('transitionend', this.onTransition) + input.elm.addEventListener('compositionupdate', this.onCompositionUpdate) + }, + unmounted () { + const { input } = this + if (input) { + input.elm.removeEventListener('blur', this.onBlur) + input.elm.removeEventListener('focus', this.onFocus) + input.elm.removeEventListener('paste', this.onPaste) + input.elm.removeEventListener('keyup', this.onKeyUp) + input.elm.removeEventListener('keydown', this.onKeyDown) + input.elm.removeEventListener('click', this.onClickInput) + input.elm.removeEventListener('transitionend', this.onTransition) + input.elm.removeEventListener('compositionupdate', this.onCompositionUpdate) + } + }, + methods: { + triggerShowPicker () { + this.showPicker = true + this.$nextTick(() => { + this.scrollIntoView() + }) + // This temporarily disables "click outside" handler + // since external trigger also means click originates + // from outside, thus preventing picker from opening + this.disableClickOutside = true + setTimeout(() => { + this.disableClickOutside = false + }, 0) + }, + togglePicker () { + this.input.elm.focus() + this.showPicker = !this.showPicker + if (this.showPicker) { + this.scrollIntoView() + } + }, + replace (replacement) { + const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) + this.$emit('input', newValue) + this.caret = 0 + }, + insert ({ insertion, keepOpen }) { + const before = this.value.substring(0, this.caret) || '' + const after = this.value.substring(this.caret) || '' + + /* Using a bit more smart approach to padding emojis with spaces: + * - put a space before cursor if there isn't one already, unless we + * are at the beginning of post or in spam mode + * - put a space after emoji if there isn't one already unless we are + * in spam mode + * + * The idea is that when you put a cursor somewhere in between sentence + * inserting just ' :emoji: ' will add more spaces to post which might + * break the flow/spacing, as well as the case where user ends sentence + * with a space before adding emoji. + * + * Spam mode is intended for creating multi-part emojis and overall spamming + * them, masto seem to be rendering :emoji::emoji: correctly now so why not + */ + const isSpaceRegex = /\s/ + const spaceBefore = !isSpaceRegex.exec(before.slice(-1)) && before.length && this.padEmoji > 0 ? ' ' : '' + const spaceAfter = !isSpaceRegex.exec(after[0]) && this.padEmoji ? ' ' : '' + + const newValue = [ + before, + spaceBefore, + insertion, + spaceAfter, + after + ].join('') + this.keepOpen = keepOpen + this.$emit('input', newValue) + const position = this.caret + (insertion + spaceAfter + spaceBefore).length + if (!keepOpen) { + this.input.elm.focus() + } + + this.$nextTick(function () { + // Re-focus inputbox after clicking suggestion + // Set selection right after the replacement instead of the very end + this.input.elm.setSelectionRange(position, position) + this.caret = position + }) + }, + replaceText (e, suggestion) { + const len = this.suggestions.length || 0 + if (this.textAtCaret.length === 1) { return } + if (len > 0 || suggestion) { + const chosenSuggestion = suggestion || this.suggestions[this.highlighted] + const replacement = chosenSuggestion.replacement + const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) + this.$emit('input', newValue) + this.highlighted = 0 + const position = this.wordAtCaret.start + replacement.length + + this.$nextTick(function () { + // Re-focus inputbox after clicking suggestion + this.input.elm.focus() + // Set selection right after the replacement instead of the very end + this.input.elm.setSelectionRange(position, position) + this.caret = position + }) + e.preventDefault() + } + }, + cycleBackward (e) { + const len = this.suggestions.length || 0 + if (len > 1) { + this.highlighted -= 1 + if (this.highlighted < 0) { + this.highlighted = this.suggestions.length - 1 + } + e.preventDefault() + } else { + this.highlighted = 0 + } + }, + cycleForward (e) { + const len = this.suggestions.length || 0 + if (len > 1) { + this.highlighted += 1 + if (this.highlighted >= len) { + this.highlighted = 0 + } + e.preventDefault() + } else { + this.highlighted = 0 + } + }, + scrollIntoView () { + const rootRef = this.$refs['picker'].$el + /* Scroller is either `window` (replies in TL), sidebar (main post form, + * replies in notifs) or mobile post form. Note that getting and setting + * scroll is different for `Window` and `Element`s + */ + const scrollerRef = this.$el.closest('.sidebar-scroller') || + this.$el.closest('.post-form-modal-view') || + window + const currentScroll = scrollerRef === window + ? scrollerRef.scrollY + : scrollerRef.scrollTop + const scrollerHeight = scrollerRef === window + ? scrollerRef.innerHeight + : scrollerRef.offsetHeight + + const scrollerBottomBorder = currentScroll + scrollerHeight + // We check where the bottom border of root element is, this uses findOffset + // to find offset relative to scrollable container (scroller) + const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top + + const bottomDelta = Math.max(0, rootBottomBorder - scrollerBottomBorder) + // could also check top delta but there's no case for it + const targetScroll = currentScroll + bottomDelta + + if (scrollerRef === window) { + scrollerRef.scroll(0, targetScroll) + } else { + scrollerRef.scrollTop = targetScroll + } + }, + onTransition (e) { + this.resize() + }, + onBlur (e) { + // Clicking on any suggestion removes focus from autocomplete, + // preventing click handler ever executing. + this.blurTimeout = setTimeout(() => { + this.focused = false + this.setCaret(e) + this.resize() + }, 200) + }, + onClick (e, suggestion) { + this.replaceText(e, suggestion) + }, + onFocus (e) { + if (this.blurTimeout) { + clearTimeout(this.blurTimeout) + this.blurTimeout = null + } + + if (!this.keepOpen) { + this.showPicker = false + } + this.focused = true + this.setCaret(e) + this.resize() + this.temporarilyHideSuggestions = false + }, + onKeyUp (e) { + const { key } = e + this.setCaret(e) + this.resize() + + // Setting hider in keyUp to prevent suggestions from blinking + // when moving away from suggested spot + if (key === 'Escape') { + this.temporarilyHideSuggestions = true + } else { + this.temporarilyHideSuggestions = false + } + }, + onPaste (e) { + this.setCaret(e) + this.resize() + }, + onKeyDown (e) { + const { ctrlKey, shiftKey, key } = e + // Disable suggestions hotkeys if suggestions are hidden + if (!this.temporarilyHideSuggestions) { + if (key === 'Tab') { + if (shiftKey) { + this.cycleBackward(e) + } else { + this.cycleForward(e) + } + } + if (key === 'ArrowUp') { + this.cycleBackward(e) + } else if (key === 'ArrowDown') { + this.cycleForward(e) + } + if (key === 'Enter') { + if (!ctrlKey) { + this.replaceText(e) + } + } + } + // Probably add optional keyboard controls for emoji picker? + + // Escape hides suggestions, if suggestions are hidden it + // de-focuses the element (i.e. default browser behavior) + if (key === 'Escape') { + if (!this.temporarilyHideSuggestions) { + this.input.elm.focus() + } + } + + this.showPicker = false + this.resize() + }, + onInput (e) { + this.showPicker = false + this.setCaret(e) + this.resize() + this.$emit('input', e.target.value) + }, + onCompositionUpdate (e) { + this.showPicker = false + this.setCaret(e) + this.resize() + this.$emit('input', e.target.value) + }, + onClickInput (e) { + this.showPicker = false + }, + onClickOutside (e) { + if (this.disableClickOutside) return + this.showPicker = false + }, + onStickerUploaded (e) { + this.showPicker = false + this.$emit('sticker-uploaded', e) + }, + onStickerUploadFailed (e) { + this.showPicker = false + this.$emit('sticker-upload-Failed', e) + }, + setCaret ({ target: { selectionStart } }) { + this.caret = selectionStart + }, + resize () { + const { panel } = this.$refs + if (!panel) return + const { offsetHeight, offsetTop } = this.input.elm + this.$refs.panel.style.top = (offsetTop + offsetHeight) + 'px' + this.$refs.picker.$el.style.top = (offsetTop + offsetHeight) + 'px' + } + } +} + +export default EmojiInput diff --git a/src/components/emoji_input/emoji_input.vue b/src/components/emoji_input/emoji_input.vue new file mode 100644 index 00000000..13530e8b --- /dev/null +++ b/src/components/emoji_input/emoji_input.vue @@ -0,0 +1,164 @@ +<template> + <div + v-click-outside="onClickOutside" + class="emoji-input" + > + <slot /> + <template v-if="enableEmojiPicker"> + <div + v-if="!hideEmojiButton" + class="emoji-picker-icon" + @click.prevent="togglePicker" + > + <i class="icon-smile" /> + </div> + <EmojiPicker + v-if="enableEmojiPicker" + ref="picker" + :class="{ hide: !showPicker }" + :enable-sticker-picker="enableStickerPicker" + class="emoji-picker-panel" + @emoji="insert" + @sticker-uploaded="onStickerUploaded" + @sticker-upload-failed="onStickerUploadFailed" + /> + </template> + <div + ref="panel" + class="autocomplete-panel" + :class="{ hide: !showSuggestions }" + > + <div class="autocomplete-panel-body"> + <div + v-for="(suggestion, index) in suggestions" + :key="index" + class="autocomplete-item" + :class="{ highlighted: suggestion.highlighted }" + @click.stop.prevent="onClick($event, suggestion)" + > + <span class="image"> + <img + v-if="suggestion.img" + :src="suggestion.img" + > + <span v-else>{{ suggestion.replacement }}</span> + </span> + <div class="label"> + <span class="displayText">{{ suggestion.displayText }}</span> + <span class="detailText">{{ suggestion.detailText }}</span> + </div> + </div> + </div> + </div> + </div> +</template> + +<script src="./emoji_input.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.emoji-input { + display: flex; + flex-direction: column; + position: relative; + + .emoji-picker-icon { + position: absolute; + top: 0; + right: 0; + margin: .2em .25em; + font-size: 16px; + cursor: pointer; + line-height: 24px; + + &:hover i { + color: $fallback--text; + color: var(--text, $fallback--text); + } + } + .emoji-picker-panel { + position: absolute; + z-index: 20; + margin-top: 2px; + + &.hide { + display: none + } + } + + .autocomplete { + &-panel { + position: absolute; + z-index: 20; + margin-top: 2px; + + &.hide { + display: none + } + + &-body { + margin: 0 0.5em 0 0.5em; + border-radius: $fallback--tooltipRadius; + border-radius: var(--tooltipRadius, $fallback--tooltipRadius); + box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); + box-shadow: var(--popupShadow); + min-width: 75%; + background: $fallback--bg; + background: var(--bg, $fallback--bg); + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + + &-item { + display: flex; + cursor: pointer; + padding: 0.2em 0.4em; + border-bottom: 1px solid rgba(0, 0, 0, 0.4); + height: 32px; + + .image { + width: 32px; + height: 32px; + line-height: 32px; + text-align: center; + font-size: 32px; + + margin-right: 4px; + + img { + width: 32px; + height: 32px; + object-fit: contain; + } + } + + .label { + display: flex; + flex-direction: column; + justify-content: center; + margin: 0 0.1em 0 0.2em; + + .displayText { + line-height: 1.5; + } + + .detailText { + font-size: 9px; + line-height: 9px; + } + } + + &.highlighted { + background-color: $fallback--fg; + background-color: var(--lightBg, $fallback--fg); + } + } + } + + input, textarea { + flex: 1 0 auto; + } +} +</style> diff --git a/src/components/emoji_input/suggestor.js b/src/components/emoji_input/suggestor.js new file mode 100644 index 00000000..aec5c39d --- /dev/null +++ b/src/components/emoji_input/suggestor.js @@ -0,0 +1,94 @@ +import { debounce } from 'lodash' +/** + * suggest - generates a suggestor function to be used by emoji-input + * data: object providing source information for specific types of suggestions: + * data.emoji - optional, an array of all emoji available i.e. + * (state.instance.emoji + state.instance.customEmoji) + * data.users - optional, an array of all known users + * updateUsersList - optional, a function to search and append to users + * + * Depending on data present one or both (or none) can be present, so if field + * doesn't support user linking you can just provide only emoji. + */ + +const debounceUserSearch = debounce((data, input) => { + data.updateUsersList(input) +}, 500, { leading: true, trailing: false }) + +export default data => input => { + const firstChar = input[0] + if (firstChar === ':' && data.emoji) { + return suggestEmoji(data.emoji)(input) + } + if (firstChar === '@' && data.users) { + return suggestUsers(data)(input) + } + return [] +} + +export const suggestEmoji = emojis => input => { + const noPrefix = input.toLowerCase().substr(1) + return emojis + .filter(({ displayText }) => displayText.toLowerCase().startsWith(noPrefix)) + .sort((a, b) => { + let aScore = 0 + let bScore = 0 + + // Make custom emojis a priority + aScore += a.imageUrl ? 10 : 0 + bScore += b.imageUrl ? 10 : 0 + + // Sort alphabetically + const alphabetically = a.displayText > b.displayText ? 1 : -1 + + return bScore - aScore + alphabetically + }) +} + +export const suggestUsers = data => input => { + const noPrefix = input.toLowerCase().substr(1) + const users = data.users + + const newUsers = users.filter( + user => + user.screen_name.toLowerCase().startsWith(noPrefix) || + user.name.toLowerCase().startsWith(noPrefix) + + /* taking only 20 results so that sorting is a bit cheaper, we display + * only 5 anyway. could be inaccurate, but we ideally we should query + * backend anyway + */ + ).slice(0, 20).sort((a, b) => { + let aScore = 0 + let bScore = 0 + + // Matches on screen name (i.e. user@instance) makes a priority + aScore += a.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0 + bScore += b.screen_name.toLowerCase().startsWith(noPrefix) ? 2 : 0 + + // Matches on name takes second priority + aScore += a.name.toLowerCase().startsWith(noPrefix) ? 1 : 0 + bScore += b.name.toLowerCase().startsWith(noPrefix) ? 1 : 0 + + const diff = (bScore - aScore) * 10 + + // Then sort alphabetically + const nameAlphabetically = a.name > b.name ? 1 : -1 + const screenNameAlphabetically = a.screen_name > b.screen_name ? 1 : -1 + + return diff + nameAlphabetically + screenNameAlphabetically + /* eslint-disable camelcase */ + }).map(({ screen_name, name, profile_image_url_original }) => ({ + displayText: screen_name, + detailText: name, + imageUrl: profile_image_url_original, + replacement: '@' + screen_name + ' ' + })) + + // BE search users if there are no matches + if (newUsers.length === 0 && data.updateUsersList) { + debounceUserSearch(data, noPrefix) + } + return newUsers + /* eslint-enable camelcase */ +} diff --git a/src/components/emoji_picker/emoji_picker.js b/src/components/emoji_picker/emoji_picker.js new file mode 100644 index 00000000..824412dd --- /dev/null +++ b/src/components/emoji_picker/emoji_picker.js @@ -0,0 +1,115 @@ + +const filterByKeyword = (list, keyword = '') => { + return list.filter(x => x.displayText.includes(keyword)) +} + +const EmojiPicker = { + props: { + enableStickerPicker: { + required: false, + type: Boolean, + default: false + } + }, + data () { + return { + labelKey: String(Math.random() * 100000), + keyword: '', + activeGroup: 'custom', + showingStickers: false, + groupsScrolledClass: 'scrolled-top', + keepOpen: false + } + }, + components: { + StickerPicker: () => import('../sticker_picker/sticker_picker.vue') + }, + methods: { + onEmoji (emoji) { + const value = emoji.imageUrl ? `:${emoji.displayText}:` : emoji.replacement + this.$emit('emoji', { insertion: value, keepOpen: this.keepOpen }) + }, + highlight (key) { + const ref = this.$refs['group-' + key] + const top = ref[0].offsetTop + this.setShowStickers(false) + this.activeGroup = key + this.$nextTick(() => { + this.$refs['emoji-groups'].scrollTop = top + 1 + }) + }, + scrolledGroup (e) { + const target = (e && e.target) || this.$refs['emoji-groups'] + const top = target.scrollTop + 5 + if (target.scrollTop <= 5) { + this.groupsScrolledClass = 'scrolled-top' + } else if (target.scrollTop >= target.scrollTopMax - 5) { + this.groupsScrolledClass = 'scrolled-bottom' + } else { + this.groupsScrolledClass = 'scrolled-middle' + } + this.$nextTick(() => { + this.emojisView.forEach(group => { + const ref = this.$refs['group-' + group.id] + if (ref[0].offsetTop <= top) { + this.activeGroup = group.id + } + }) + }) + }, + toggleStickers () { + this.showingStickers = !this.showingStickers + }, + setShowStickers (value) { + this.showingStickers = value + }, + onStickerUploaded (e) { + this.$emit('sticker-uploaded', e) + }, + onStickerUploadFailed (e) { + this.$emit('sticker-upload-failed', e) + } + }, + watch: { + keyword () { + this.scrolledGroup() + } + }, + computed: { + activeGroupView () { + return this.showingStickers ? '' : this.activeGroup + }, + stickersAvailable () { + if (this.$store.state.instance.stickers) { + return this.$store.state.instance.stickers.length > 0 + } + return 0 + }, + emojis () { + const standardEmojis = this.$store.state.instance.emoji || [] + const customEmojis = this.$store.state.instance.customEmoji || [] + return [ + { + id: 'custom', + text: this.$t('emoji.custom'), + icon: 'icon-smile', + emojis: filterByKeyword(customEmojis, this.keyword) + }, + { + id: 'standard', + text: this.$t('emoji.unicode'), + icon: 'icon-picture', + emojis: filterByKeyword(standardEmojis, this.keyword) + } + ] + }, + emojisView () { + return this.emojis.filter(value => value.emojis.length > 0) + }, + stickerPickerEnabled () { + return (this.$store.state.instance.stickers || []).length !== 0 + } + } +} + +export default EmojiPicker diff --git a/src/components/emoji_picker/emoji_picker.scss b/src/components/emoji_picker/emoji_picker.scss new file mode 100644 index 00000000..b0ed00e9 --- /dev/null +++ b/src/components/emoji_picker/emoji_picker.scss @@ -0,0 +1,165 @@ +@import '../../_variables.scss'; + +.emoji-picker { + display: flex; + flex-direction: column; + position: absolute; + right: 0; + left: 0; + height: 320px; + margin: 0 !important; + z-index: 1; + + .keep-open { + padding: 7px; + line-height: normal; + } + .keep-open-label { + padding: 0 7px; + display: flex; + } + + .heading { + display: flex; + height: 32px; + padding: 10px 7px 5px; + } + + .content { + display: flex; + flex-direction: column; + flex: 1 1 0; + min-height: 0px; + } + + .emoji-tabs { + flex-grow: 1; + } + + .additional-tabs { + border-left: 1px solid; + border-left-color: $fallback--icon; + border-left-color: var(--icon, $fallback--icon); + padding-left: 7px; + flex: 0 0 0; + } + + .additional-tabs, + .emoji-tabs { + display: block; + min-width: 0; + flex-basis: auto; + flex-shrink: 1; + + &-item { + padding: 0 7px; + cursor: pointer; + font-size: 24px; + + &.disabled { + opacity: 0.5; + pointer-events: none; + } + &.active { + border-bottom: 4px solid; + + i { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + } + } + + .sticker-picker { + flex: 1 1 0 + } + + .stickers, + .emoji { + &-content { + display: flex; + flex-direction: column; + flex: 1 1 0; + min-height: 0; + + &.hidden { + opacity: 0; + pointer-events: none; + position: absolute; + } + } + } + + .emoji { + &-search { + padding: 5px; + flex: 0 0 0; + + input { + width: 100%; + } + } + + &-groups { + flex: 1 1 1px; + position: relative; + overflow: auto; + user-select: none; + mask: linear-gradient(to top, white 0, transparent 100%) bottom no-repeat, + linear-gradient(to bottom, white 0, transparent 100%) top no-repeat, + linear-gradient(to top, white, white); + transition: mask-size 150ms; + mask-size: 100% 20px, 100% 20px, auto; + // Autoprefixed seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + &.scrolled { + &-top { + mask-size: 100% 20px, 100% 0, auto; + } + &-bottom { + mask-size: 100% 0, 100% 20px, auto; + } + } + } + + &-group { + display: flex; + align-items: center; + flex-wrap: wrap; + padding-left: 5px; + justify-content: left; + + &-title { + font-size: 12px; + width: 100%; + margin: 0; + &.disabled { + display: none; + } + } + } + + &-item { + width: 32px; + height: 32px; + box-sizing: border-box; + display: flex; + font-size: 32px; + align-items: center; + justify-content: center; + margin: 4px; + + cursor: pointer; + + img { + object-fit: contain; + max-width: 100%; + max-height: 100%; + } + } + + } + +} diff --git a/src/components/emoji_picker/emoji_picker.vue b/src/components/emoji_picker/emoji_picker.vue new file mode 100644 index 00000000..42f20130 --- /dev/null +++ b/src/components/emoji_picker/emoji_picker.vue @@ -0,0 +1,110 @@ +<template> + <div class="emoji-picker panel panel-default panel-body"> + <div class="heading"> + <span class="emoji-tabs"> + <span + v-for="group in emojis" + :key="group.id" + class="emoji-tabs-item" + :class="{ + active: activeGroupView === group.id, + disabled: group.emojis.length === 0 + }" + :title="group.text" + @click.prevent="highlight(group.id)" + > + <i :class="group.icon" /> + </span> + </span> + <span + v-if="stickerPickerEnabled" + class="additional-tabs" + > + <span + class="stickers-tab-icon additional-tabs-item" + :class="{active: showingStickers}" + :title="$t('emoji.stickers')" + @click.prevent="toggleStickers" + > + <i class="icon-star" /> + </span> + </span> + </div> + <div class="content"> + <div + class="emoji-content" + :class="{hidden: showingStickers}" + > + <div class="emoji-search"> + <input + v-model="keyword" + type="text" + class="form-control" + :placeholder="$t('emoji.search_emoji')" + > + </div> + <div + ref="emoji-groups" + class="emoji-groups" + :class="groupsScrolledClass" + @scroll="scrolledGroup" + > + <div + v-for="group in emojisView" + :key="group.id" + class="emoji-group" + > + <h6 + :ref="'group-' + group.id" + class="emoji-group-title" + > + {{ group.text }} + </h6> + <span + v-for="emoji in group.emojis" + :key="group.id + emoji.displayText" + :title="emoji.displayText" + class="emoji-item" + @click.stop.prevent="onEmoji(emoji)" + > + <span v-if="!emoji.imageUrl">{{ emoji.replacement }}</span> + <img + v-else + :src="emoji.imageUrl" + > + </span> + </div> + </div> + <div + class="keep-open" + > + <input + :id="labelKey + 'keep-open'" + v-model="keepOpen" + type="checkbox" + > + <label + class="keep-open-label" + :for="labelKey + 'keep-open'" + > + <div class="keep-open-label-text"> + {{ $t('emoji.keep_open') }} + </div> + </label> + </div> + </div> + <div + v-if="showingStickers" + class="stickers-content" + > + <sticker-picker + @uploaded="onStickerUploaded" + @upload-failed="onStickerUploadFailed" + /> + </div> + </div> + </div> +</template> + +<script src="./emoji_picker.js"></script> +<style lang="scss" src="./emoji_picker.scss"></style> diff --git a/src/components/export_import/export_import.vue b/src/components/export_import/export_import.vue index 451a2668..20c6f569 100644 --- a/src/components/export_import/export_import.vue +++ b/src/components/export_import/export_import.vue @@ -1,12 +1,27 @@ <template> -<div class="import-export-container"> - <slot name="before"/> - <button class="btn" @click="exportData">{{ exportLabel }}</button> - <button class="btn" @click="importData">{{ importLabel }}</button> - <slot name="afterButtons"/> - <p v-if="importFailed" class="alert error">{{ importFailedText }}</p> - <slot name="afterError"/> -</div> + <div class="import-export-container"> + <slot name="before" /> + <button + class="btn" + @click="exportData" + > + {{ exportLabel }} + </button> + <button + class="btn" + @click="importData" + > + {{ importLabel }} + </button> + <slot name="afterButtons" /> + <p + v-if="importFailed" + class="alert error" + > + {{ importFailedText }} + </p> + <slot name="afterError" /> + </div> </template> <script> @@ -49,7 +64,7 @@ export default { if (event.target.files[0]) { // eslint-disable-next-line no-undef const reader = new FileReader() - reader.onload = ({target}) => { + reader.onload = ({ target }) => { try { const parsed = JSON.parse(target.result) const valid = this.validator(parsed) diff --git a/src/components/exporter/exporter.js b/src/components/exporter/exporter.js new file mode 100644 index 00000000..8f507416 --- /dev/null +++ b/src/components/exporter/exporter.js @@ -0,0 +1,48 @@ +const Exporter = { + props: { + getContent: { + type: Function, + required: true + }, + filename: { + type: String, + default: 'export.csv' + }, + exportButtonLabel: { + type: String, + default () { + return this.$t('exporter.export') + } + }, + processingMessage: { + type: String, + default () { + return this.$t('exporter.processing') + } + } + }, + data () { + return { + processing: false + } + }, + methods: { + process () { + this.processing = true + this.getContent() + .then((content) => { + const fileToDownload = document.createElement('a') + fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content)) + fileToDownload.setAttribute('download', this.filename) + fileToDownload.style.display = 'none' + document.body.appendChild(fileToDownload) + fileToDownload.click() + document.body.removeChild(fileToDownload) + // Add delay before hiding processing state since browser takes some time to handle file download + setTimeout(() => { this.processing = false }, 2000) + }) + } + } +} + +export default Exporter diff --git a/src/components/exporter/exporter.vue b/src/components/exporter/exporter.vue new file mode 100644 index 00000000..f5126dc1 --- /dev/null +++ b/src/components/exporter/exporter.vue @@ -0,0 +1,26 @@ +<template> + <div class="exporter"> + <div v-if="processing"> + <i class="icon-spin4 animate-spin exporter-processing" /> + <span>{{ processingMessage }}</span> + </div> + <button + v-else + class="btn btn-default" + @click="process" + > + {{ exportButtonLabel }} + </button> + </div> +</template> + +<script src="./exporter.js"></script> + +<style lang="scss"> +.exporter { + &-processing { + font-size: 1.5em; + margin: 0.25em; + } +} +</style> diff --git a/src/components/extra_buttons/extra_buttons.js b/src/components/extra_buttons/extra_buttons.js new file mode 100644 index 00000000..5ac73e97 --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.js @@ -0,0 +1,50 @@ +const ExtraButtons = { + props: [ 'status' ], + methods: { + deleteStatus () { + const confirmed = window.confirm(this.$t('status.delete_confirm')) + if (confirmed) { + this.$store.dispatch('deleteStatus', { id: this.status.id }) + } + }, + pinStatus () { + this.$store.dispatch('pinStatus', this.status.id) + .then(() => this.$emit('onSuccess')) + .catch(err => this.$emit('onError', err.error.error)) + }, + unpinStatus () { + this.$store.dispatch('unpinStatus', this.status.id) + .then(() => this.$emit('onSuccess')) + .catch(err => this.$emit('onError', err.error.error)) + }, + muteConversation () { + this.$store.dispatch('muteConversation', this.status.id) + .then(() => this.$emit('onSuccess')) + .catch(err => this.$emit('onError', err.error.error)) + }, + unmuteConversation () { + this.$store.dispatch('unmuteConversation', this.status.id) + .then(() => this.$emit('onSuccess')) + .catch(err => this.$emit('onError', err.error.error)) + } + }, + computed: { + currentUser () { return this.$store.state.users.currentUser }, + canDelete () { + if (!this.currentUser) { return } + const superuser = this.currentUser.rights.moderator || this.currentUser.rights.admin + return superuser || this.status.user.id === this.currentUser.id + }, + ownStatus () { + return this.status.user.id === this.currentUser.id + }, + canPin () { + return this.ownStatus && (this.status.visibility === 'public' || this.status.visibility === 'unlisted') + }, + canMute () { + return !!this.currentUser + } + } +} + +export default ExtraButtons diff --git a/src/components/extra_buttons/extra_buttons.vue b/src/components/extra_buttons/extra_buttons.vue new file mode 100644 index 00000000..6781a4f8 --- /dev/null +++ b/src/components/extra_buttons/extra_buttons.vue @@ -0,0 +1,73 @@ +<template> + <v-popover + v-if="canDelete || canMute || canPin" + trigger="click" + placement="top" + class="extra-button-popover" + :offset="5" + :container="false" + > + <div slot="popover"> + <div class="dropdown-menu"> + <button + v-if="canMute && !status.thread_muted" + class="dropdown-item dropdown-item-icon" + @click.prevent="muteConversation" + > + <i class="icon-eye-off" /><span>{{ $t("status.mute_conversation") }}</span> + </button> + <button + v-if="canMute && status.thread_muted" + class="dropdown-item dropdown-item-icon" + @click.prevent="unmuteConversation" + > + <i class="icon-eye-off" /><span>{{ $t("status.unmute_conversation") }}</span> + </button> + <button + v-if="!status.pinned && canPin" + v-close-popover + class="dropdown-item dropdown-item-icon" + @click.prevent="pinStatus" + > + <i class="icon-pin" /><span>{{ $t("status.pin") }}</span> + </button> + <button + v-if="status.pinned && canPin" + v-close-popover + class="dropdown-item dropdown-item-icon" + @click.prevent="unpinStatus" + > + <i class="icon-pin" /><span>{{ $t("status.unpin") }}</span> + </button> + <button + v-if="canDelete" + v-close-popover + class="dropdown-item dropdown-item-icon" + @click.prevent="deleteStatus" + > + <i class="icon-cancel" /><span>{{ $t("status.delete") }}</span> + </button> + </div> + </div> + <div class="button-icon"> + <i class="icon-ellipsis" /> + </div> + </v-popover> +</template> + +<script src="./extra_buttons.js" ></script> + +<style lang="scss"> +@import '../../_variables.scss'; +@import '../popper/popper.scss'; + +.icon-ellipsis { + cursor: pointer; + + &:hover, + .extra-button-popover.open & { + color: $fallback--text; + color: var(--text, $fallback--text); + } +} +</style> diff --git a/src/components/favorite_button/favorite_button.js b/src/components/favorite_button/favorite_button.js index a2b4cb65..a24eacbf 100644 --- a/src/components/favorite_button/favorite_button.js +++ b/src/components/favorite_button/favorite_button.js @@ -11,9 +11,9 @@ const FavoriteButton = { methods: { favorite () { if (!this.status.favorited) { - this.$store.dispatch('favorite', {id: this.status.id}) + this.$store.dispatch('favorite', { id: this.status.id }) } else { - this.$store.dispatch('unfavorite', {id: this.status.id}) + this.$store.dispatch('unfavorite', { id: this.status.id }) } this.animated = true setTimeout(() => { diff --git a/src/components/favorite_button/favorite_button.vue b/src/components/favorite_button/favorite_button.vue index 05ce6bd0..06ce9983 100644 --- a/src/components/favorite_button/favorite_button.vue +++ b/src/components/favorite_button/favorite_button.vue @@ -1,11 +1,20 @@ <template> <div v-if="loggedIn"> - <i :class='classes' class='button-icon favorite-button fav-active' @click.prevent='favorite()' :title="$t('tool_tip.favorite')"/> - <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span> + <i + :class="classes" + class="button-icon favorite-button fav-active" + :title="$t('tool_tip.favorite')" + @click.prevent="favorite()" + /> + <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span> </div> <div v-else> - <i :class='classes' class='button-icon favorite-button' :title="$t('tool_tip.favorite')"/> - <span v-if='!hidePostStatsLocal && status.fave_num > 0'>{{status.fave_num}}</span> + <i + :class="classes" + class="button-icon favorite-button" + :title="$t('tool_tip.favorite')" + /> + <span v-if="!hidePostStatsLocal && status.fave_num > 0">{{ status.fave_num }}</span> </div> </template> diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js index e0b7a118..5f80a079 100644 --- a/src/components/features_panel/features_panel.js +++ b/src/components/features_panel/features_panel.js @@ -1,12 +1,10 @@ const FeaturesPanel = { computed: { - chat: function () { - return this.$store.state.instance.chatAvailable && (!this.$store.state.chatDisabled) - }, + chat: function () { return this.$store.state.instance.chatAvailable }, gopher: function () { return this.$store.state.instance.gopherAvailable }, whoToFollow: function () { return this.$store.state.instance.suggestionsEnabled }, mediaProxy: function () { return this.$store.state.instance.mediaProxyAvailable }, - scopeOptions: function () { return this.$store.state.instance.scopeOptionsEnabled }, + minimalScopesMode: function () { return this.$store.state.instance.minimalScopesMode }, textlimit: function () { return this.$store.state.instance.textlimit } } } diff --git a/src/components/features_panel/features_panel.vue b/src/components/features_panel/features_panel.vue index 445143e9..3e5939a6 100644 --- a/src/components/features_panel/features_panel.vue +++ b/src/components/features_panel/features_panel.vue @@ -3,17 +3,25 @@ <div class="panel panel-default base01-background"> <div class="panel-heading timeline-heading base02-background base04"> <div class="title"> - {{$t('features_panel.title')}} + {{ $t('features_panel.title') }} </div> </div> <div class="panel-body features-panel"> <ul> - <li v-if="chat">{{$t('features_panel.chat')}}</li> - <li v-if="gopher">{{$t('features_panel.gopher')}}</li> - <li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li> - <li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li> - <li v-if="scopeOptions">{{$t('features_panel.scope_options')}}</li> - <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li> + <li v-if="chat"> + {{ $t('features_panel.chat') }} + </li> + <li v-if="gopher"> + {{ $t('features_panel.gopher') }} + </li> + <li v-if="whoToFollow"> + {{ $t('features_panel.who_to_follow') }} + </li> + <li v-if="mediaProxy"> + {{ $t('features_panel.media_proxy') }} + </li> + <li>{{ $t('features_panel.scope_options') }}</li> + <li>{{ $t('features_panel.text_limit') }} = {{ textlimit }}</li> </ul> </div> </div> diff --git a/src/components/follow_card/follow_card.js b/src/components/follow_card/follow_card.js index 425c9c3e..118d0c7c 100644 --- a/src/components/follow_card/follow_card.js +++ b/src/components/follow_card/follow_card.js @@ -1,4 +1,5 @@ import BasicUserCard from '../basic_user_card/basic_user_card.vue' +import RemoteFollow from '../remote_follow/remote_follow.vue' import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' const FollowCard = { @@ -8,35 +9,32 @@ const FollowCard = { ], data () { return { - inProgress: false, - requestSent: false, - updated: false + inProgress: false } }, components: { - BasicUserCard + BasicUserCard, + RemoteFollow }, computed: { - isMe () { return this.$store.state.users.currentUser.id === this.user.id }, - following () { return this.updated ? this.updated.following : this.user.following }, - showFollow () { - return !this.following || this.updated && !this.updated.following + isMe () { + return this.$store.state.users.currentUser.id === this.user.id + }, + loggedIn () { + return this.$store.state.users.currentUser } }, methods: { followUser () { this.inProgress = true - requestFollow(this.user, this.$store).then(({ sent, updated }) => { + requestFollow(this.user, this.$store).then(() => { this.inProgress = false - this.requestSent = sent - this.updated = updated }) }, unfollowUser () { this.inProgress = true - requestUnfollow(this.user, this.$store).then(({ updated }) => { + requestUnfollow(this.user, this.$store).then(() => { this.inProgress = false - this.updated = updated }) } } diff --git a/src/components/follow_card/follow_card.vue b/src/components/follow_card/follow_card.vue index 6cb064eb..a9d237bb 100644 --- a/src/components/follow_card/follow_card.vue +++ b/src/components/follow_card/follow_card.vue @@ -1,34 +1,52 @@ <template> <basic-user-card :user="user"> <div class="follow-card-content-container"> - <span class="faint" v-if="!noFollowsYou && user.follows_you"> + <span + v-if="!noFollowsYou && user.follows_you" + class="faint" + > {{ isMe ? $t('user_card.its_you') : $t('user_card.follows_you') }} </span> - <button - v-if="showFollow" - class="btn btn-default" - @click="followUser" - :disabled="inProgress" - :title="requestSent ? $t('user_card.follow_again') : ''" - > - <template v-if="inProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else-if="requestSent"> - {{ $t('user_card.follow_sent') }} - </template> - <template v-else> - {{ $t('user_card.follow') }} - </template> - </button> - <button v-if="following" class="btn btn-default pressed" @click="unfollowUser" :disabled="inProgress"> - <template v-if="inProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else> - {{ $t('user_card.follow_unfollow') }} - </template> - </button> + <template v-if="!loggedIn"> + <div + v-if="!user.following" + class="follow-card-follow-button" + > + <RemoteFollow :user="user" /> + </div> + </template> + <template v-else> + <button + v-if="!user.following" + class="btn btn-default follow-card-follow-button" + :disabled="inProgress" + :title="user.requested ? $t('user_card.follow_again') : ''" + @click="followUser" + > + <template v-if="inProgress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else-if="user.requested"> + {{ $t('user_card.follow_sent') }} + </template> + <template v-else> + {{ $t('user_card.follow') }} + </template> + </button> + <button + v-else + class="btn btn-default follow-card-follow-button pressed" + :disabled="inProgress" + @click="unfollowUser" + > + <template v-if="inProgress"> + {{ $t('user_card.follow_progress') }} + </template> + <template v-else> + {{ $t('user_card.follow_unfollow') }} + </template> + </button> + </template> </div> </basic-user-card> </template> @@ -36,15 +54,17 @@ <script src="./follow_card.js"></script> <style lang="scss"> -.follow-card-content-container { - flex-shrink: 0; - display: flex; - flex-direction: row; - justify-content: space-between; - flex-wrap: wrap; - line-height: 1.5em; +.follow-card { + &-content-container { + flex-shrink: 0; + display: flex; + flex-direction: row; + justify-content: space-between; + flex-wrap: wrap; + line-height: 1.5em; + } - .btn { + &-follow-button { margin-top: 0.5em; margin-left: auto; width: 10em; diff --git a/src/components/follow_request_card/follow_request_card.vue b/src/components/follow_request_card/follow_request_card.vue index 4a3bbba4..b217b8ed 100644 --- a/src/components/follow_request_card/follow_request_card.vue +++ b/src/components/follow_request_card/follow_request_card.vue @@ -1,8 +1,18 @@ <template> <basic-user-card :user="user"> <div class="follow-request-card-content-container"> - <button class="btn btn-default" @click="approveUser">{{ $t('user_card.approve') }}</button> - <button class="btn btn-default" @click="denyUser">{{ $t('user_card.deny') }}</button> + <button + class="btn btn-default" + @click="approveUser" + > + {{ $t('user_card.approve') }} + </button> + <button + class="btn btn-default" + @click="denyUser" + > + {{ $t('user_card.deny') }} + </button> </div> </basic-user-card> </template> diff --git a/src/components/follow_requests/follow_requests.vue b/src/components/follow_requests/follow_requests.vue index b83c2d68..5fa4cf39 100644 --- a/src/components/follow_requests/follow_requests.vue +++ b/src/components/follow_requests/follow_requests.vue @@ -1,10 +1,15 @@ <template> <div class="settings panel panel-default"> <div class="panel-heading"> - {{$t('nav.friend_requests')}} + {{ $t('nav.friend_requests') }} </div> <div class="panel-body"> - <FollowRequestCard v-for="request in requests" :key="request.id" :user="request"/> + <FollowRequestCard + v-for="request in requests" + :key="request.id" + :user="request" + class="list-item" + /> </div> </div> </template> diff --git a/src/components/font_control/font_control.vue b/src/components/font_control/font_control.vue index ed36b280..61f0384b 100644 --- a/src/components/font_control/font_control.vue +++ b/src/components/font_control/font_control.vue @@ -1,35 +1,56 @@ <template> -<div class="font-control style-control" :class="{ custom: isCustom }"> - <label :for="preset === 'custom' ? name : name + '-font-switcher'" class="label"> - {{label}} - </label> - <input - v-if="typeof fallback !== 'undefined'" - class="opt exlcude-disabled" - type="checkbox" - :id="name + '-o'" - :checked="present" - @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)"> - <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> - <label :for="name + '-font-switcher'" class="select" :disabled="!present"> - <select + <div + class="font-control style-control" + :class="{ custom: isCustom }" + > + <label + :for="preset === 'custom' ? name : name + '-font-switcher'" + class="label" + > + {{ label }} + </label> + <input + v-if="typeof fallback !== 'undefined'" + :id="name + '-o'" + class="opt exlcude-disabled" + type="checkbox" + :checked="present" + @input="$emit('input', typeof value === 'undefined' ? fallback : undefined)" + > + <label + v-if="typeof fallback !== 'undefined'" + class="opt-l" + :for="name + '-o'" + /> + <label + :for="name + '-font-switcher'" + class="select" :disabled="!present" - v-model="preset" - class="font-switcher" - :id="name + '-font-switcher'"> - <option v-for="option in availableOptions" :value="option"> - {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} - </option> - </select> - <i class="icon-down-open"/> - </label> - <input - v-if="isCustom" - class="custom-font" - type="text" - :id="name" - v-model="family"> -</div> + > + <select + :id="name + '-font-switcher'" + v-model="preset" + :disabled="!present" + class="font-switcher" + > + <option + v-for="option in availableOptions" + :key="option" + :value="option" + > + {{ option === 'custom' ? $t('settings.style.fonts.custom') : option }} + </option> + </select> + <i class="icon-down-open" /> + </label> + <input + v-if="isCustom" + :id="name" + v-model="family" + class="custom-font" + type="text" + > + </div> </template> <script src="./font_control.js" ></script> diff --git a/src/components/friends_timeline/friends_timeline.vue b/src/components/friends_timeline/friends_timeline.vue index 66c0c058..01a56812 100644 --- a/src/components/friends_timeline/friends_timeline.vue +++ b/src/components/friends_timeline/friends_timeline.vue @@ -1,5 +1,9 @@ <template> - <Timeline :title="$t('nav.timeline')" v-bind:timeline="timeline" v-bind:timeline-name="'friends'"/> + <Timeline + :title="$t('nav.timeline')" + :timeline="timeline" + :timeline-name="'friends'" + /> </template> <script src="./friends_timeline.js"></script> diff --git a/src/components/gallery/gallery.vue b/src/components/gallery/gallery.vue index ea525c95..6169d294 100644 --- a/src/components/gallery/gallery.vue +++ b/src/components/gallery/gallery.vue @@ -1,13 +1,22 @@ <template> - <div ref="galleryContainer" style="width: 100%;"> - <div class="gallery-row" v-for="row in rows" :style="rowHeight(row.length)" :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }"> + <div + ref="galleryContainer" + style="width: 100%;" + > + <div + v-for="(row, index) in rows" + :key="index" + class="gallery-row" + :style="rowHeight(row.length)" + :class="{ 'contain-fit': useContainFit, 'cover-fit': !useContainFit }" + > <attachment v-for="attachment in row" - :setMedia="setMedia" + :key="attachment.id" + :set-media="setMedia" :nsfw="nsfw" :attachment="attachment" - :allowPlay="false" - :key="attachment.id" + :allow-play="false" /> </div> </div> @@ -28,7 +37,9 @@ flex-grow: 1; margin-top: 0.5em; - .attachments, .attachment { + // FIXME: specificity problem with this and .attachments.attachment + // we shouldn't have the need for .image here + .attachment.image { margin: 0 0.5em 0 0; flex-grow: 1; height: 100%; @@ -50,13 +61,17 @@ } &.contain-fit { - img, video { + img, + video, + canvas { object-fit: contain; } } &.cover-fit { - img, video { + img, + video, + canvas { object-fit: cover; } } diff --git a/src/components/image_cropper/image_cropper.js b/src/components/image_cropper/image_cropper.js index 49d51846..01361e25 100644 --- a/src/components/image_cropper/image_cropper.js +++ b/src/components/image_cropper/image_cropper.js @@ -31,6 +31,9 @@ const ImageCropper = { saveButtonLabel: { type: String }, + saveWithoutCroppingButtonlabel: { + type: String + }, cancelButtonLabel: { type: String } @@ -48,6 +51,9 @@ const ImageCropper = { saveText () { return this.saveButtonLabel || this.$t('image_cropper.save') }, + saveWithoutCroppingText () { + return this.saveWithoutCroppingButtonlabel || this.$t('image_cropper.save_without_cropping') + }, cancelText () { return this.cancelButtonLabel || this.$t('image_cropper.cancel') }, @@ -64,10 +70,10 @@ const ImageCropper = { this.dataUrl = undefined this.$emit('close') }, - submit () { + submit (cropping = true) { this.submitting = true this.avatarUploadError = null - this.submitHandler(this.cropper, this.file) + this.submitHandler(cropping && this.cropper, this.file) .then(() => this.destroy()) .catch((err) => { this.submitError = err diff --git a/src/components/image_cropper/image_cropper.vue b/src/components/image_cropper/image_cropper.vue index 24a6f3bd..4e1b5927 100644 --- a/src/components/image_cropper/image_cropper.vue +++ b/src/components/image_cropper/image_cropper.vue @@ -2,19 +2,57 @@ <div class="image-cropper"> <div v-if="dataUrl"> <div class="image-cropper-image-container"> - <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" /> + <img + ref="img" + :src="dataUrl" + alt="" + @load.stop="createCropper" + > </div> <div class="image-cropper-buttons-wrapper"> - <button class="btn" type="button" :disabled="submitting" @click="submit" v-text="saveText"></button> - <button class="btn" type="button" :disabled="submitting" @click="destroy" v-text="cancelText"></button> - <i class="icon-spin4 animate-spin" v-if="submitting"></i> + <button + class="btn" + type="button" + :disabled="submitting" + @click="submit()" + v-text="saveText" + /> + <button + class="btn" + type="button" + :disabled="submitting" + @click="destroy" + v-text="cancelText" + /> + <button + class="btn" + type="button" + :disabled="submitting" + @click="submit(false)" + v-text="saveWithoutCroppingText" + /> + <i + v-if="submitting" + class="icon-spin4 animate-spin" + /> </div> - <div class="alert error" v-if="submitError"> - {{submitErrorMsg}} - <i class="button-icon icon-cancel" @click="clearError"></i> + <div + v-if="submitError" + class="alert error" + > + {{ submitErrorMsg }} + <i + class="button-icon icon-cancel" + @click="clearError" + /> </div> </div> - <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes"> + <input + ref="input" + type="file" + class="image-cropper-img-input" + :accept="mimes" + > </div> </template> @@ -36,7 +74,11 @@ } &-buttons-wrapper { - margin-top: 15px; + margin-top: 10px; + + button { + margin-top: 5px; + } } } </style> diff --git a/src/components/importer/importer.js b/src/components/importer/importer.js new file mode 100644 index 00000000..c5f9e4d2 --- /dev/null +++ b/src/components/importer/importer.js @@ -0,0 +1,53 @@ +const Importer = { + props: { + submitHandler: { + type: Function, + required: true + }, + submitButtonLabel: { + type: String, + default () { + return this.$t('importer.submit') + } + }, + successMessage: { + type: String, + default () { + return this.$t('importer.success') + } + }, + errorMessage: { + type: String, + default () { + return this.$t('importer.error') + } + } + }, + data () { + return { + file: null, + error: false, + success: false, + submitting: false + } + }, + methods: { + change () { + this.file = this.$refs.input.files[0] + }, + submit () { + this.dismiss() + this.submitting = true + this.submitHandler(this.file) + .then(() => { this.success = true }) + .catch(() => { this.error = true }) + .finally(() => { this.submitting = false }) + }, + dismiss () { + this.success = false + this.error = false + } + } +} + +export default Importer diff --git a/src/components/importer/importer.vue b/src/components/importer/importer.vue new file mode 100644 index 00000000..ed923d59 --- /dev/null +++ b/src/components/importer/importer.vue @@ -0,0 +1,47 @@ +<template> + <div class="importer"> + <form> + <input + ref="input" + type="file" + @change="change" + > + </form> + <i + v-if="submitting" + class="icon-spin4 animate-spin importer-uploading" + /> + <button + v-else + class="btn btn-default" + @click="submit" + > + {{ submitButtonLabel }} + </button> + <div v-if="success"> + <i + class="icon-cross" + @click="dismiss" + /> + <p>{{ successMessage }}</p> + </div> + <div v-else-if="error"> + <i + class="icon-cross" + @click="dismiss" + /> + <p>{{ errorMessage }}</p> + </div> + </div> +</template> + +<script src="./importer.js"></script> + +<style lang="scss"> +.importer { + &-uploading { + font-size: 1.5em; + margin: 0.25em; + } +} +</style> diff --git a/src/components/instance_specific_panel/instance_specific_panel.js b/src/components/instance_specific_panel/instance_specific_panel.js index 9bb5e945..09e3d055 100644 --- a/src/components/instance_specific_panel/instance_specific_panel.js +++ b/src/components/instance_specific_panel/instance_specific_panel.js @@ -2,9 +2,6 @@ const InstanceSpecificPanel = { computed: { instanceSpecificPanelContent () { return this.$store.state.instance.instanceSpecificPanelContent - }, - show () { - return !this.$store.state.config.hideISP } } } diff --git a/src/components/instance_specific_panel/instance_specific_panel.vue b/src/components/instance_specific_panel/instance_specific_panel.vue index a7b74667..7448ca06 100644 --- a/src/components/instance_specific_panel/instance_specific_panel.vue +++ b/src/components/instance_specific_panel/instance_specific_panel.vue @@ -1,15 +1,13 @@ <template> - <div v-if="show" class="instance-specific-panel"> + <div class="instance-specific-panel"> <div class="panel panel-default"> <div class="panel-body"> - <div v-html="instanceSpecificPanelContent"> - </div> + <!-- eslint-disable vue/no-v-html --> + <div v-html="instanceSpecificPanelContent" /> + <!-- eslint-enable vue/no-v-html --> </div> </div> </div> </template> <script src="./instance_specific_panel.js" ></script> - -<style lang="scss"> -</style> diff --git a/src/components/interactions/interactions.js b/src/components/interactions/interactions.js new file mode 100644 index 00000000..1f8a9de9 --- /dev/null +++ b/src/components/interactions/interactions.js @@ -0,0 +1,25 @@ +import Notifications from '../notifications/notifications.vue' + +const tabModeDict = { + mentions: ['mention'], + 'likes+repeats': ['repeat', 'like'], + follows: ['follow'] +} + +const Interactions = { + data () { + return { + filterMode: tabModeDict['mentions'] + } + }, + methods: { + onModeSwitch (key) { + this.filterMode = tabModeDict[key] + } + }, + components: { + Notifications + } +} + +export default Interactions diff --git a/src/components/interactions/interactions.vue b/src/components/interactions/interactions.vue new file mode 100644 index 00000000..08cee343 --- /dev/null +++ b/src/components/interactions/interactions.vue @@ -0,0 +1,34 @@ +<template> + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="title"> + {{ $t("nav.interactions") }} + </div> + </div> + <tab-switcher + ref="tabSwitcher" + :on-switch="onModeSwitch" + > + <span + key="mentions" + :label="$t('nav.mentions')" + /> + <span + key="likes+repeats" + :label="$t('interactions.favs_repeats')" + /> + <span + key="follows" + :label="$t('interactions.follows')" + /> + </tab-switcher> + <Notifications + ref="notifications" + :no-heading="true" + :minimal-mode="true" + :filter-mode="filterMode" + /> + </div> +</template> + +<script src="./interactions.js"></script> diff --git a/src/components/interface_language_switcher/interface_language_switcher.vue b/src/components/interface_language_switcher/interface_language_switcher.vue index 3f58af2c..83df9a0b 100644 --- a/src/components/interface_language_switcher/interface_language_switcher.vue +++ b/src/components/interface_language_switcher/interface_language_switcher.vue @@ -3,39 +3,60 @@ <label for="interface-language-switcher"> {{ $t('settings.interfaceLanguage') }} </label> - <label for="interface-language-switcher" class='select'> - <select id="interface-language-switcher" v-model="language"> - <option v-for="(langCode, i) in languageCodes" :value="langCode"> + <label + for="interface-language-switcher" + class="select" + > + <select + id="interface-language-switcher" + v-model="language" + > + <option + v-for="(langCode, i) in languageCodes" + :key="langCode" + :value="langCode" + > {{ languageNames[i] }} </option> </select> - <i class="icon-down-open"/> + <i class="icon-down-open" /> </label> </div> </template> <script> - import languagesObject from '../../i18n/messages' - import ISO6391 from 'iso-639-1' - import _ from 'lodash' +import languagesObject from '../../i18n/messages' +import ISO6391 from 'iso-639-1' +import _ from 'lodash' - export default { - computed: { - languageCodes () { - return Object.keys(languagesObject) - }, +export default { + computed: { + languageCodes () { + return Object.keys(languagesObject) + }, - languageNames () { - return _.map(this.languageCodes, ISO6391.getName) - }, + languageNames () { + return _.map(this.languageCodes, this.getLanguageName) + }, - language: { - get: function () { return this.$store.state.config.interfaceLanguage }, - set: function (val) { - this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) - this.$i18n.locale = val - } + language: { + get: function () { return this.$store.state.config.interfaceLanguage }, + set: function (val) { + this.$store.dispatch('setOption', { name: 'interfaceLanguage', value: val }) + this.$i18n.locale = val } } + }, + + methods: { + getLanguageName (code) { + const specialLanguageNames = { + 'ja': 'Japanese (やさしいにほんご)', + 'ja_pedantic': 'Japanese (日本語)', + 'zh': 'Chinese (简体中文)' + } + return specialLanguageNames[code] || ISO6391.getName(code) + } } +} </script> diff --git a/src/components/link-preview/link-preview.js b/src/components/link-preview/link-preview.js index 2f6da55e..444aafbe 100644 --- a/src/components/link-preview/link-preview.js +++ b/src/components/link-preview/link-preview.js @@ -5,6 +5,11 @@ const LinkPreview = { 'size', 'nsfw' ], + data () { + return { + imageLoaded: false + } + }, computed: { useImage () { // Currently BE shoudn't give cards if tagged NSFW, this is a bit paranoid @@ -15,6 +20,15 @@ const LinkPreview = { useDescription () { return this.card.description && /\S/.test(this.card.description) } + }, + created () { + if (this.useImage) { + const newImg = new Image() + newImg.onload = () => { + this.imageLoaded = true + } + newImg.src = this.card.image + } } } diff --git a/src/components/link-preview/link-preview.vue b/src/components/link-preview/link-preview.vue index 64b1a58b..69171977 100644 --- a/src/components/link-preview/link-preview.vue +++ b/src/components/link-preview/link-preview.vue @@ -1,13 +1,25 @@ <template> <div> - <a class="link-preview-card" :href="card.url" target="_blank" rel="noopener"> - <div class="card-image" :class="{ 'small-image': size === 'small' }" v-if="useImage"> - <img :src="card.image"></img> + <a + class="link-preview-card" + :href="card.url" + target="_blank" + rel="noopener" + > + <div + v-if="useImage && imageLoaded" + class="card-image" + :class="{ 'small-image': size === 'small' }" + > + <img :src="card.image"> </div> <div class="card-content"> <span class="card-host faint">{{ card.provider_name }}</span> <h4 class="card-title">{{ card.title }}</h4> - <p class="card-description" v-if="useDescription">{{ card.description }}</p> + <p + v-if="useDescription" + class="card-description" + >{{ card.description }}</p> </div> </a> </div> diff --git a/src/components/list/list.vue b/src/components/list/list.vue new file mode 100644 index 00000000..a6223cce --- /dev/null +++ b/src/components/list/list.vue @@ -0,0 +1,52 @@ +<template> + <div class="list"> + <div + v-for="item in items" + :key="getKey(item)" + class="list-item" + > + <slot + name="item" + :item="item" + /> + </div> + <div + v-if="items.length === 0 && !!$slots.empty" + class="list-empty-content faint" + > + <slot name="empty" /> + </div> + </div> +</template> + +<script> +export default { + props: { + items: { + type: Array, + default: () => [] + }, + getKey: { + type: Function, + default: item => item.id + } + } +} +</script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.list { + &-item:not(:last-child) { + border-bottom: 1px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + } + + &-empty-content { + text-align: center; + padding: 10px; + } +} +</style> diff --git a/src/components/login_form/login_form.js b/src/components/login_form/login_form.js index fb6dc651..10f52fe2 100644 --- a/src/components/login_form/login_form.js +++ b/src/components/login_form/login_form.js @@ -1,50 +1,81 @@ +import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' import oauthApi from '../../services/new_api/oauth.js' + const LoginForm = { data: () => ({ user: {}, - authError: false + error: false }), computed: { - loginMethod () { return this.$store.state.instance.loginMethod }, - loggingIn () { return this.$store.state.users.loggingIn }, - registrationOpen () { return this.$store.state.instance.registrationOpen } + isPasswordAuth () { return this.requiredPassword }, + isTokenAuth () { return this.requiredToken }, + ...mapState({ + registrationOpen: state => state.instance.registrationOpen, + instance: state => state.instance, + loggingIn: state => state.users.loggingIn, + oauth: state => state.oauth + }), + ...mapGetters( + 'authFlow', ['requiredPassword', 'requiredToken', 'requiredMFA'] + ) }, methods: { - oAuthLogin () { - oauthApi.login({ - oauth: this.$store.state.oauth, - instance: this.$store.state.instance.server, + ...mapMutations('authFlow', ['requireMFA']), + ...mapActions({ login: 'authFlow/login' }), + submit () { + this.isTokenAuth ? this.submitToken() : this.submitPassword() + }, + submitToken () { + const { clientId, clientSecret } = this.oauth + const data = { + clientId, + clientSecret, + instance: this.instance.server, commit: this.$store.commit - }) + } + + oauthApi.getOrCreateApp(data) + .then((app) => { oauthApi.login({ ...app, ...data }) }) }, - submit () { + submitPassword () { + const { clientId } = this.oauth const data = { - oauth: this.$store.state.oauth, - instance: this.$store.state.instance.server + clientId, + oauth: this.oauth, + instance: this.instance.server, + commit: this.$store.commit } - this.clearError() + this.error = false + oauthApi.getOrCreateApp(data).then((app) => { oauthApi.getTokenWithCredentials( { - app, + ...app, instance: data.instance, username: this.user.username, password: this.user.password } ).then((result) => { if (result.error) { - this.authError = result.error - this.user.password = '' + if (result.error === 'mfa_required') { + this.requireMFA({ app: app, settings: result }) + } else { + this.error = result.error + this.focusOnPasswordInput() + } return } - this.$store.commit('setToken', result.access_token) - this.$store.dispatch('loginUser', result.access_token) - this.$router.push({name: 'friends'}) + this.login(result).then(() => { + this.$router.push({ name: 'friends' }) + }) }) }) }, - clearError () { - this.authError = false + clearError () { this.error = false }, + focusOnPasswordInput () { + let passwordInput = this.$refs.passwordInput + passwordInput.focus() + passwordInput.setSelectionRange(0, passwordInput.value.length) } } } diff --git a/src/components/login_form/login_form.vue b/src/components/login_form/login_form.vue index 27a8e48a..b4fdcefb 100644 --- a/src/components/login_form/login_form.vue +++ b/src/components/login_form/login_form.vue @@ -1,44 +1,85 @@ <template> <div class="login panel panel-default"> <!-- Default panel contents --> + <div class="panel-heading"> - {{$t('login.login')}} + {{ $t('login.login') }} </div> + <div class="panel-body"> - <form v-if="loginMethod == 'password'" v-on:submit.prevent='submit(user)' class='login-form'> - <div class='form-group'> - <label for='username'>{{$t('login.username')}}</label> - <input :disabled="loggingIn" v-model='user.username' class='form-control' id='username' v-bind:placeholder="$t('login.placeholder')"> - </div> - <div class='form-group'> - <label for='password'>{{$t('login.password')}}</label> - <input :disabled="loggingIn" v-model='user.password' class='form-control' id='password' type='password'> - </div> - <div class='form-group'> - <div class='login-bottom'> - <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div> - <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button> + <form + class="login-form" + @submit.prevent="submit" + > + <template v-if="isPasswordAuth"> + <div class="form-group"> + <label for="username">{{ $t('login.username') }}</label> + <input + id="username" + v-model="user.username" + :disabled="loggingIn" + class="form-control" + :placeholder="$t('login.placeholder')" + > + </div> + <div class="form-group"> + <label for="password">{{ $t('login.password') }}</label> + <input + id="password" + ref="passwordInput" + v-model="user.password" + :disabled="loggingIn" + class="form-control" + type="password" + > + </div> + <div class="form-group"> + <router-link :to="{name: 'password-reset'}"> + {{ $t('password_reset.forgot_password') }} + </router-link> </div> + </template> + + <div + v-if="isTokenAuth" + class="form-group" + > + <p>{{ $t('login.description') }}</p> </div> - </form> - <form v-if="loginMethod == 'token'" v-on:submit.prevent='oAuthLogin' class="login-form"> <div class="form-group"> - <p>{{$t('login.description')}}</p> - </div> - <div class='form-group'> - <div class='login-bottom'> - <div><router-link :to="{name: 'registration'}" v-if='registrationOpen' class='register'>{{$t('login.register')}}</router-link></div> - <button :disabled="loggingIn" type='submit' class='btn btn-default'>{{$t('login.login')}}</button> + <div class="login-bottom"> + <div> + <router-link + v-if="registrationOpen" + :to="{name: 'registration'}" + class="register" + > + {{ $t('login.register') }} + </router-link> + </div> + <button + :disabled="loggingIn" + type="submit" + class="btn btn-default" + > + {{ $t('login.login') }} + </button> </div> </div> </form> - - <div v-if="authError" class='form-group'> - <div class='alert error'> - {{authError}} - <i class="button-icon icon-cancel" @click="clearError"></i> - </div> + </div> + + <div + v-if="error" + class="form-group" + > + <div class="alert error"> + {{ error }} + <i + class="button-icon icon-cancel" + @click="clearError" + /> </div> </div> </div> @@ -50,6 +91,10 @@ @import '../../_variables.scss'; .login-form { + display: flex; + flex-direction: column; + padding: 0.6em; + .btn { min-height: 28px; width: 10em; @@ -66,9 +111,30 @@ align-items: center; justify-content: space-between; } -} -.login { + .form-group { + display: flex; + flex-direction: column; + padding: 0.3em 0.5em 0.6em; + line-height:24px; + } + + .form-bottom { + display: flex; + padding: 0.5em; + height: 32px; + + button { + width: 10em; + } + + p { + margin: 0.35em; + padding: 0.35em; + display: flex; + } + } + .error { text-align: center; diff --git a/src/components/media_modal/media_modal.vue b/src/components/media_modal/media_modal.vue index 7f666603..06ced5a1 100644 --- a/src/components/media_modal/media_modal.vue +++ b/src/components/media_modal/media_modal.vue @@ -1,25 +1,34 @@ <template> - <div class="modal-view media-modal-view" v-if="showing" @click.prevent="hide"> - <img class="modal-image" v-if="type === 'image'" :src="currentMedia.url"></img> - <VideoAttachment + <div + v-if="showing" + v-body-scroll-lock="showing" + class="modal-view media-modal-view" + @click.prevent="hide" + > + <img + v-if="type === 'image'" class="modal-image" + :src="currentMedia.url" + > + <VideoAttachment v-if="type === 'video'" + class="modal-image" :attachment="currentMedia" :controls="true" - @click.stop.native=""> - </VideoAttachment> + @click.stop.native="" + /> <button + v-if="canNavigate" :title="$t('media_modal.previous')" class="modal-view-button-arrow modal-view-button-arrow--prev" - v-if="canNavigate" @click.stop.prevent="goPrev" > <i class="icon-left-open arrow-icon" /> </button> <button + v-if="canNavigate" :title="$t('media_modal.next')" class="modal-view-button-arrow modal-view-button-arrow--next" - v-if="canNavigate" @click.stop.prevent="goNext" > <i class="icon-right-open arrow-icon" /> @@ -33,6 +42,12 @@ @import '../../_variables.scss'; .media-modal-view { + z-index: 1001; + + body:not(.scroll-locked) & { + display: none; + } + &:hover { .modal-view-button-arrow { opacity: 0.75; @@ -53,6 +68,7 @@ max-width: 90%; max-height: 90%; box-shadow: 0px 5px 15px 0 rgba(0, 0, 0, 0.5); + image-orientation: from-image; // NOTE: only FF supports this } .modal-view-button-arrow { diff --git a/src/components/media_upload/media_upload.js b/src/components/media_upload/media_upload.js index 1c874faa..f457d022 100644 --- a/src/components/media_upload/media_upload.js +++ b/src/components/media_upload/media_upload.js @@ -16,11 +16,11 @@ const mediaUpload = { if (file.size > store.state.instance.uploadlimit) { const filesize = fileSizeFormatService.fileSizeFormat(file.size) const allowedsize = fileSizeFormatService.fileSizeFormat(store.state.instance.uploadlimit) - self.$emit('upload-failed', 'file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}) + self.$emit('upload-failed', 'file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit }) return } const formData = new FormData() - formData.append('media', file) + formData.append('file', file) self.$emit('uploading') self.uploading = true @@ -36,7 +36,7 @@ const mediaUpload = { }, fileDrop (e) { if (e.dataTransfer.files.length > 0) { - e.preventDefault() // allow dropping text like before + e.preventDefault() // allow dropping text like before this.uploadFile(e.dataTransfer.files[0]) } }, @@ -54,7 +54,7 @@ const mediaUpload = { this.uploadReady = true }) }, - change ({target}) { + change ({ target }) { for (var i = 0; i < target.files.length; i++) { let file = target.files[i] this.uploadFile(file) diff --git a/src/components/media_upload/media_upload.vue b/src/components/media_upload/media_upload.vue index fcdc3471..1dda7bc1 100644 --- a/src/components/media_upload/media_upload.vue +++ b/src/components/media_upload/media_upload.vue @@ -1,9 +1,29 @@ <template> - <div class="media-upload" @drop.prevent @dragover.prevent="fileDrag" @drop="fileDrop"> - <label class="btn btn-default" :title="$t('tool_tip.media_upload')"> - <i class="icon-spin4 animate-spin" v-if="uploading"></i> - <i class="icon-upload" v-if="!uploading"></i> - <input type="file" v-if="uploadReady" @change="change" style="position: fixed; top: -100em" multiple="true"></input> + <div + class="media-upload" + @drop.prevent + @dragover.prevent="fileDrag" + @drop="fileDrop" + > + <label + class="btn btn-default" + :title="$t('tool_tip.media_upload')" + > + <i + v-if="uploading" + class="icon-spin4 animate-spin" + /> + <i + v-if="!uploading" + class="icon-upload" + /> + <input + v-if="uploadReady" + type="file" + style="position: fixed; top: -100em" + multiple="true" + @change="change" + > </label> </div> </template> @@ -11,12 +31,14 @@ <script src="./media_upload.js" ></script> <style> - .media-upload { - font-size: 26px; - flex: 1; - } +.media-upload { + .icon-upload { + cursor: pointer; + } - .icon-upload { - cursor: pointer; - } + label { + display: block; + width: 100%; + } +} </style> diff --git a/src/components/mentions/mentions.vue b/src/components/mentions/mentions.vue index bba06da6..70f60baf 100644 --- a/src/components/mentions/mentions.vue +++ b/src/components/mentions/mentions.vue @@ -1,5 +1,9 @@ <template> - <Timeline :title="$t('nav.mentions')" v-bind:timeline="timeline" v-bind:timeline-name="'mentions'"/> + <Timeline + :title="$t('nav.interactions')" + :timeline="timeline" + :timeline-name="'mentions'" + /> </template> <script src="./mentions.js"></script> diff --git a/src/components/mfa_form/recovery_form.js b/src/components/mfa_form/recovery_form.js new file mode 100644 index 00000000..7a3cc22d --- /dev/null +++ b/src/components/mfa_form/recovery_form.js @@ -0,0 +1,41 @@ +import mfaApi from '../../services/new_api/mfa.js' +import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' + +export default { + data: () => ({ + code: null, + error: false + }), + computed: { + ...mapGetters({ + authApp: 'authFlow/app', + authSettings: 'authFlow/settings' + }), + ...mapState({ instance: 'instance' }) + }, + methods: { + ...mapMutations('authFlow', ['requireTOTP', 'abortMFA']), + ...mapActions({ login: 'authFlow/login' }), + clearError () { this.error = false }, + submit () { + const data = { + app: this.authApp, + instance: this.instance.server, + mfaToken: this.authSettings.mfa_token, + code: this.code + } + + mfaApi.verifyRecoveryCode(data).then((result) => { + if (result.error) { + this.error = result.error + this.code = null + return + } + + this.login(result).then(() => { + this.$router.push({ name: 'friends' }) + }) + }) + } + } +} diff --git a/src/components/mfa_form/recovery_form.vue b/src/components/mfa_form/recovery_form.vue new file mode 100644 index 00000000..57294630 --- /dev/null +++ b/src/components/mfa_form/recovery_form.vue @@ -0,0 +1,65 @@ +<template> + <div class="login panel panel-default"> + <!-- Default panel contents --> + + <div class="panel-heading"> + {{ $t('login.heading.recovery') }} + </div> + + <div class="panel-body"> + <form + class="login-form" + @submit.prevent="submit" + > + <div class="form-group"> + <label for="code">{{ $t('login.recovery_code') }}</label> + <input + id="code" + v-model="code" + class="form-control" + > + </div> + + <div class="form-group"> + <div class="login-bottom"> + <div> + <a + href="#" + @click.prevent="requireTOTP" + > + {{ $t('login.enter_two_factor_code') }} + </a> + <br> + <a + href="#" + @click.prevent="abortMFA" + > + {{ $t('general.cancel') }} + </a> + </div> + <button + type="submit" + class="btn btn-default" + > + {{ $t('general.verify') }} + </button> + </div> + </div> + </form> + </div> + + <div + v-if="error" + class="form-group" + > + <div class="alert error"> + {{ error }} + <i + class="button-icon icon-cancel" + @click="clearError" + /> + </div> + </div> + </div> +</template> +<script src="./recovery_form.js" ></script> diff --git a/src/components/mfa_form/totp_form.js b/src/components/mfa_form/totp_form.js new file mode 100644 index 00000000..778bf8dc --- /dev/null +++ b/src/components/mfa_form/totp_form.js @@ -0,0 +1,40 @@ +import mfaApi from '../../services/new_api/mfa.js' +import { mapState, mapGetters, mapActions, mapMutations } from 'vuex' +export default { + data: () => ({ + code: null, + error: false + }), + computed: { + ...mapGetters({ + authApp: 'authFlow/app', + authSettings: 'authFlow/settings' + }), + ...mapState({ instance: 'instance' }) + }, + methods: { + ...mapMutations('authFlow', ['requireRecovery', 'abortMFA']), + ...mapActions({ login: 'authFlow/login' }), + clearError () { this.error = false }, + submit () { + const data = { + app: this.authApp, + instance: this.instance.server, + mfaToken: this.authSettings.mfa_token, + code: this.code + } + + mfaApi.verifyOTPCode(data).then((result) => { + if (result.error) { + this.error = result.error + this.code = null + return + } + + this.login(result).then(() => { + this.$router.push({ name: 'friends' }) + }) + }) + } + } +} diff --git a/src/components/mfa_form/totp_form.vue b/src/components/mfa_form/totp_form.vue new file mode 100644 index 00000000..a344b395 --- /dev/null +++ b/src/components/mfa_form/totp_form.vue @@ -0,0 +1,67 @@ +<template> + <div class="login panel panel-default"> + <!-- Default panel contents --> + + <div class="panel-heading"> + {{ $t('login.heading.totp') }} + </div> + + <div class="panel-body"> + <form + class="login-form" + @submit.prevent="submit" + > + <div class="form-group"> + <label for="code"> + {{ $t('login.authentication_code') }} + </label> + <input + id="code" + v-model="code" + class="form-control" + > + </div> + + <div class="form-group"> + <div class="login-bottom"> + <div> + <a + href="#" + @click.prevent="requireRecovery" + > + {{ $t('login.enter_recovery_code') }} + </a> + <br> + <a + href="#" + @click.prevent="abortMFA" + > + {{ $t('general.cancel') }} + </a> + </div> + <button + type="submit" + class="btn btn-default" + > + {{ $t('general.verify') }} + </button> + </div> + </div> + </form> + </div> + + <div + v-if="error" + class="form-group" + > + <div class="alert error"> + {{ error }} + <i + class="button-icon icon-cancel" + @click="clearError" + /> + </div> + </div> + </div> +</template> +<script src="./totp_form.js"></script> diff --git a/src/components/mobile_nav/mobile_nav.js b/src/components/mobile_nav/mobile_nav.js new file mode 100644 index 00000000..c2bb76ee --- /dev/null +++ b/src/components/mobile_nav/mobile_nav.js @@ -0,0 +1,80 @@ +import SideDrawer from '../side_drawer/side_drawer.vue' +import Notifications from '../notifications/notifications.vue' +import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' +import GestureService from '../../services/gesture_service/gesture_service' + +const MobileNav = { + components: { + SideDrawer, + Notifications + }, + data: () => ({ + notificationsCloseGesture: undefined, + notificationsOpen: false + }), + created () { + this.notificationsCloseGesture = GestureService.swipeGesture( + GestureService.DIRECTION_RIGHT, + this.closeMobileNotifications, + 50 + ) + }, + computed: { + currentUser () { + return this.$store.state.users.currentUser + }, + unseenNotifications () { + return unseenNotificationsFromStore(this.$store) + }, + unseenNotificationsCount () { + return this.unseenNotifications.length + }, + sitename () { return this.$store.state.instance.name } + }, + methods: { + toggleMobileSidebar () { + this.$refs.sideDrawer.toggleDrawer() + }, + openMobileNotifications () { + this.notificationsOpen = true + }, + closeMobileNotifications () { + if (this.notificationsOpen) { + // make sure to mark notifs seen only when the notifs were open and not + // from close-calls. + this.notificationsOpen = false + this.markNotificationsAsSeen() + } + }, + notificationsTouchStart (e) { + GestureService.beginSwipe(e, this.notificationsCloseGesture) + }, + notificationsTouchMove (e) { + GestureService.updateSwipe(e, this.notificationsCloseGesture) + }, + scrollToTop () { + window.scrollTo(0, 0) + }, + logout () { + this.$router.replace('/main/public') + this.$store.dispatch('logout') + }, + markNotificationsAsSeen () { + this.$refs.notifications.markAsSeen() + }, + onScroll ({ target: { scrollTop, clientHeight, scrollHeight } }) { + if (this.$store.state.config.autoLoad && scrollTop + clientHeight >= scrollHeight) { + this.$refs.notifications.fetchOlderNotifications() + } + } + }, + watch: { + $route () { + // handles closing notificaitons when you press any router-link on the + // notifications. + this.closeMobileNotifications() + } + } +} + +export default MobileNav diff --git a/src/components/mobile_nav/mobile_nav.vue b/src/components/mobile_nav/mobile_nav.vue new file mode 100644 index 00000000..d1c24e56 --- /dev/null +++ b/src/components/mobile_nav/mobile_nav.vue @@ -0,0 +1,180 @@ +<template> + <div> + <nav + id="nav" + class="nav-bar container" + > + <div + class="mobile-inner-nav" + @click="scrollToTop()" + > + <div class="item"> + <a + href="#" + class="mobile-nav-button" + @click.stop.prevent="toggleMobileSidebar()" + > + <i class="button-icon icon-menu" /> + </a> + <router-link + class="site-name" + :to="{ name: 'root' }" + active-class="home" + > + {{ sitename }} + </router-link> + </div> + <div class="item right"> + <a + v-if="currentUser" + class="mobile-nav-button" + href="#" + @click.stop.prevent="openMobileNotifications()" + > + <i class="button-icon icon-bell-alt" /> + <div + v-if="unseenNotificationsCount" + class="alert-dot" + /> + </a> + </div> + </div> + </nav> + <div + v-if="currentUser" + class="mobile-notifications-drawer" + :class="{ 'closed': !notificationsOpen }" + @touchstart.stop="notificationsTouchStart" + @touchmove.stop="notificationsTouchMove" + > + <div class="mobile-notifications-header"> + <span class="title">{{ $t('notifications.notifications') }}</span> + <a + class="mobile-nav-button" + @click.stop.prevent="closeMobileNotifications()" + > + <i class="button-icon icon-cancel" /> + </a> + </div> + <div + class="mobile-notifications" + @scroll="onScroll" + > + <Notifications + ref="notifications" + :no-heading="true" + /> + </div> + </div> + <SideDrawer + ref="sideDrawer" + :logout="logout" + /> + </div> +</template> + +<script src="./mobile_nav.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.mobile-inner-nav { + width: 100%; + display: flex; + align-items: center; +} + +.mobile-nav-button { + display: flex; + justify-content: center; + width: 50px; + position: relative; + cursor: pointer; +} + +.alert-dot { + border-radius: 100%; + height: 8px; + width: 8px; + position: absolute; + left: calc(50% - 4px); + top: calc(50% - 4px); + margin-left: 6px; + margin-top: -6px; + background-color: $fallback--cRed; + background-color: var(--badgeNotification, $fallback--cRed); +} + +.mobile-notifications-drawer { + width: 100%; + height: 100vh; + overflow-x: hidden; + position: fixed; + top: 0; + left: 0; + box-shadow: 1px 1px 4px rgba(0,0,0,.6); + box-shadow: var(--panelShadow); + transition-property: transform; + transition-duration: 0.25s; + transform: translateX(0); + z-index: 1001; + -webkit-overflow-scrolling: touch; + + &.closed { + transform: translateX(100%); + } +} + +.mobile-notifications-header { + display: flex; + align-items: center; + justify-content: space-between; + z-index: 1; + width: 100%; + height: 50px; + line-height: 50px; + position: absolute; + color: var(--topBarText); + background-color: $fallback--fg; + background-color: var(--topBar, $fallback--fg); + box-shadow: 0px 0px 4px rgba(0,0,0,.6); + box-shadow: var(--topBarShadow); + + .title { + font-size: 1.3em; + margin-left: 0.6em; + } +} + +.mobile-notifications { + margin-top: 50px; + width: 100vw; + height: calc(100vh - 50px); + overflow-x: hidden; + overflow-y: scroll; + + color: $fallback--text; + color: var(--text, $fallback--text); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + + .notifications { + padding: 0; + border-radius: 0; + box-shadow: none; + .panel { + border-radius: 0; + margin: 0; + box-shadow: none; + } + .panel:after { + border-radius: 0; + } + .panel .panel-heading { + border-radius: 0; + box-shadow: none; + } + } +} + +</style> diff --git a/src/components/mobile_post_status_button/mobile_post_status_button.js b/src/components/mobile_post_status_button/mobile_post_status_button.js new file mode 100644 index 00000000..3e77148a --- /dev/null +++ b/src/components/mobile_post_status_button/mobile_post_status_button.js @@ -0,0 +1,93 @@ +import { debounce } from 'lodash' + +const MobilePostStatusButton = { + data () { + return { + hidden: false, + scrollingDown: false, + inputActive: false, + oldScrollPos: 0, + amountScrolled: 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) + }, + autohideFloatingPostButton () { + return !!this.$store.state.config.autohideFloatingPostButton + } + }, + watch: { + autohideFloatingPostButton: function (isEnabled) { + if (isEnabled) { + this.activateFloatingPostButtonAutohide() + } else { + this.deactivateFloatingPostButtonAutohide() + } + } + }, + methods: { + activateFloatingPostButtonAutohide () { + window.addEventListener('scroll', this.handleScrollStart) + window.addEventListener('scroll', this.handleScrollEnd) + }, + deactivateFloatingPostButtonAutohide () { + window.removeEventListener('scroll', this.handleScrollStart) + window.removeEventListener('scroll', this.handleScrollEnd) + }, + openPostForm () { + this.$store.dispatch('openPostStatusModal') + }, + handleOSK () { + // This is a big hack: we're guessing from changed window sizes if the + // on-screen keyboard is active or not. This is only really important + // for phones in portrait mode and it's more important to show the button + // in normal scenarios on all phones, than it is to hide it when the + // keyboard is active. + // Guesswork based on https://www.mydevice.io/#compare-devices + + // for example, iphone 4 and android phones from the same time period + const smallPhone = window.innerWidth < 350 + const smallPhoneKbOpen = smallPhone && window.innerHeight < 345 + + const biggerPhone = !smallPhone && window.innerWidth < 450 + const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560 + if (smallPhoneKbOpen || biggerPhoneKbOpen) { + this.inputActive = true + } else { + this.inputActive = false + } + }, + handleScrollStart: debounce(function () { + if (window.scrollY > this.oldScrollPos) { + this.hidden = true + } else { + this.hidden = false + } + this.oldScrollPos = window.scrollY + }, 100, { leading: true, trailing: false }), + + handleScrollEnd: debounce(function () { + this.hidden = false + this.oldScrollPos = window.scrollY + }, 100, { leading: false, trailing: true }) + } +} + +export default MobilePostStatusButton diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue b/src/components/mobile_post_status_button/mobile_post_status_button.vue index 0a451c28..9cf45de3 100644 --- a/src/components/mobile_post_status_modal/mobile_post_status_modal.vue +++ b/src/components/mobile_post_status_button/mobile_post_status_button.vue @@ -1,41 +1,20 @@ <template> -<div v-if="currentUser"> - <div - class="post-form-modal-view modal-view" - v-show="postFormOpen" - @click="closePostForm" - > - <div class="post-form-modal-panel panel" @click.stop=""> - <div class="panel-heading">{{$t('post_status.new_status')}}</div> - <PostStatusForm class="panel-body" @posted="closePostForm"/> - </div> + <div v-if="isLoggedIn"> + <button + class="new-status-button" + :class="{ 'hidden': isHidden }" + @click="openPostForm" + > + <i class="icon-edit" /> + </button> </div> - <button - class="new-status-button" - :class="{ 'hidden': isHidden }" - @click="openPostForm" - > - <i class="icon-edit" /> - </button> -</div> </template> -<script src="./mobile_post_status_modal.js"></script> +<script src="./mobile_post_status_button.js"></script> <style lang="scss"> @import '../../_variables.scss'; -.post-form-modal-view { - max-height: 100%; - display: block; -} - -.post-form-modal-panel { - flex-shrink: 0; - margin: 25% 0 4em 0; - width: 100%; -} - .new-status-button { width: 5em; height: 5em; diff --git a/src/components/mobile_post_status_modal/mobile_post_status_modal.js b/src/components/mobile_post_status_modal/mobile_post_status_modal.js deleted file mode 100644 index 2f24dd08..00000000 --- a/src/components/mobile_post_status_modal/mobile_post_status_modal.js +++ /dev/null @@ -1,91 +0,0 @@ -import PostStatusForm from '../post_status_form/post_status_form.vue' -import { throttle } from 'lodash' - -const MobilePostStatusModal = { - components: { - PostStatusForm - }, - data () { - return { - hidden: false, - postFormOpen: false, - scrollingDown: false, - inputActive: false, - oldScrollPos: 0, - amountScrolled: 0 - } - }, - created () { - window.addEventListener('scroll', this.handleScroll) - window.addEventListener('resize', this.handleOSK) - }, - destroyed () { - window.removeEventListener('scroll', this.handleScroll) - window.removeEventListener('resize', this.handleOSK) - }, - computed: { - currentUser () { - return this.$store.state.users.currentUser - }, - isHidden () { - return this.hidden || this.inputActive - } - }, - methods: { - openPostForm () { - this.postFormOpen = true - this.hidden = true - - const el = this.$el.querySelector('textarea') - this.$nextTick(function () { - el.focus() - }) - }, - closePostForm () { - this.postFormOpen = false - this.hidden = false - }, - handleOSK () { - // This is a big hack: we're guessing from changed window sizes if the - // on-screen keyboard is active or not. This is only really important - // for phones in portrait mode and it's more important to show the button - // in normal scenarios on all phones, than it is to hide it when the - // keyboard is active. - // Guesswork based on https://www.mydevice.io/#compare-devices - - // for example, iphone 4 and android phones from the same time period - const smallPhone = window.innerWidth < 350 - const smallPhoneKbOpen = smallPhone && window.innerHeight < 345 - - const biggerPhone = !smallPhone && window.innerWidth < 450 - const biggerPhoneKbOpen = biggerPhone && window.innerHeight < 560 - if (smallPhoneKbOpen || biggerPhoneKbOpen) { - this.inputActive = true - } else { - this.inputActive = false - } - }, - handleScroll: throttle(function () { - const scrollAmount = window.scrollY - this.oldScrollPos - const scrollingDown = scrollAmount > 0 - - if (scrollingDown !== this.scrollingDown) { - this.amountScrolled = 0 - this.scrollingDown = scrollingDown - if (!scrollingDown) { - this.hidden = false - } - } else if (scrollingDown) { - this.amountScrolled += scrollAmount - if (this.amountScrolled > 100 && !this.hidden) { - this.hidden = true - } - } - - this.oldScrollPos = window.scrollY - this.scrollingDown = scrollingDown - }, 100) - } -} - -export default MobilePostStatusModal diff --git a/src/components/moderation_tools/moderation_tools.js b/src/components/moderation_tools/moderation_tools.js new file mode 100644 index 00000000..8aadc8c5 --- /dev/null +++ b/src/components/moderation_tools/moderation_tools.js @@ -0,0 +1,101 @@ +import DialogModal from '../dialog_modal/dialog_modal.vue' + +const FORCE_NSFW = 'mrf_tag:media-force-nsfw' +const STRIP_MEDIA = 'mrf_tag:media-strip' +const FORCE_UNLISTED = 'mrf_tag:force-unlisted' +const DISABLE_REMOTE_SUBSCRIPTION = 'mrf_tag:disable-remote-subscription' +const DISABLE_ANY_SUBSCRIPTION = 'mrf_tag:disable-any-subscription' +const SANDBOX = 'mrf_tag:sandbox' +const QUARANTINE = 'mrf_tag:quarantine' + +const ModerationTools = { + props: [ + 'user' + ], + data () { + return { + showDropDown: false, + tags: { + FORCE_NSFW, + STRIP_MEDIA, + FORCE_UNLISTED, + DISABLE_REMOTE_SUBSCRIPTION, + DISABLE_ANY_SUBSCRIPTION, + SANDBOX, + QUARANTINE + }, + showDeleteUserDialog: false + } + }, + components: { + DialogModal + }, + computed: { + tagsSet () { + return new Set(this.user.tags) + }, + hasTagPolicy () { + return this.$store.state.instance.tagPolicyAvailable + } + }, + methods: { + hasTag (tagName) { + return this.tagsSet.has(tagName) + }, + toggleTag (tag) { + const store = this.$store + if (this.tagsSet.has(tag)) { + store.state.api.backendInteractor.untagUser(this.user, tag).then(response => { + if (!response.ok) { return } + store.commit('untagUser', { user: this.user, tag }) + }) + } else { + store.state.api.backendInteractor.tagUser(this.user, tag).then(response => { + if (!response.ok) { return } + store.commit('tagUser', { user: this.user, tag }) + }) + } + }, + toggleRight (right) { + const store = this.$store + if (this.user.rights[right]) { + store.state.api.backendInteractor.deleteRight(this.user, right).then(response => { + if (!response.ok) { return } + store.commit('updateRight', { user: this.user, right: right, value: false }) + }) + } else { + store.state.api.backendInteractor.addRight(this.user, right).then(response => { + if (!response.ok) { return } + store.commit('updateRight', { user: this.user, right: right, value: true }) + }) + } + }, + toggleActivationStatus () { + const store = this.$store + const status = !!this.user.deactivated + store.state.api.backendInteractor.setActivationStatus(this.user, status).then(response => { + if (!response.ok) { return } + store.commit('updateActivationStatus', { user: this.user, status: status }) + }) + }, + deleteUserDialog (show) { + this.showDeleteUserDialog = show + }, + deleteUser () { + const store = this.$store + const user = this.user + const { id, name } = user + store.state.api.backendInteractor.deleteUser(user) + .then(e => { + this.$store.dispatch('markStatusesAsDeleted', status => user.id === status.user.id) + const isProfile = this.$route.name === 'external-user-profile' || this.$route.name === 'user-profile' + const isTargetUser = this.$route.params.name === name || this.$route.params.id === id + if (isProfile && isTargetUser) { + window.history.back() + } + }) + } + } +} + +export default ModerationTools diff --git a/src/components/moderation_tools/moderation_tools.vue b/src/components/moderation_tools/moderation_tools.vue new file mode 100644 index 00000000..d97ca3aa --- /dev/null +++ b/src/components/moderation_tools/moderation_tools.vue @@ -0,0 +1,193 @@ +<template> + <div> + <v-popover + trigger="click" + class="moderation-tools-popover" + :container="false" + placement="bottom-end" + :offset="5" + @show="showDropDown = true" + @hide="showDropDown = false" + > + <div slot="popover"> + <div class="dropdown-menu"> + <span v-if="user.is_local"> + <button + class="dropdown-item" + @click="toggleRight("admin")" + > + {{ $t(!!user.rights.admin ? 'user_card.admin_menu.revoke_admin' : 'user_card.admin_menu.grant_admin') }} + </button> + <button + class="dropdown-item" + @click="toggleRight("moderator")" + > + {{ $t(!!user.rights.moderator ? 'user_card.admin_menu.revoke_moderator' : 'user_card.admin_menu.grant_moderator') }} + </button> + <div + role="separator" + class="dropdown-divider" + /> + </span> + <button + class="dropdown-item" + @click="toggleActivationStatus()" + > + {{ $t(!!user.deactivated ? 'user_card.admin_menu.activate_account' : 'user_card.admin_menu.deactivate_account') }} + </button> + <button + class="dropdown-item" + @click="deleteUserDialog(true)" + > + {{ $t('user_card.admin_menu.delete_account') }} + </button> + <div + v-if="hasTagPolicy" + role="separator" + class="dropdown-divider" + /> + <span v-if="hasTagPolicy"> + <button + class="dropdown-item" + @click="toggleTag(tags.FORCE_NSFW)" + > + {{ $t('user_card.admin_menu.force_nsfw') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_NSFW) }" + /> + </button> + <button + class="dropdown-item" + @click="toggleTag(tags.STRIP_MEDIA)" + > + {{ $t('user_card.admin_menu.strip_media') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.STRIP_MEDIA) }" + /> + </button> + <button + class="dropdown-item" + @click="toggleTag(tags.FORCE_UNLISTED)" + > + {{ $t('user_card.admin_menu.force_unlisted') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.FORCE_UNLISTED) }" + /> + </button> + <button + class="dropdown-item" + @click="toggleTag(tags.SANDBOX)" + > + {{ $t('user_card.admin_menu.sandbox') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.SANDBOX) }" + /> + </button> + <button + v-if="user.is_local" + class="dropdown-item" + @click="toggleTag(tags.DISABLE_REMOTE_SUBSCRIPTION)" + > + {{ $t('user_card.admin_menu.disable_remote_subscription') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_REMOTE_SUBSCRIPTION) }" + /> + </button> + <button + v-if="user.is_local" + class="dropdown-item" + @click="toggleTag(tags.DISABLE_ANY_SUBSCRIPTION)" + > + {{ $t('user_card.admin_menu.disable_any_subscription') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.DISABLE_ANY_SUBSCRIPTION) }" + /> + </button> + <button + v-if="user.is_local" + class="dropdown-item" + @click="toggleTag(tags.QUARANTINE)" + > + {{ $t('user_card.admin_menu.quarantine') }} + <span + class="menu-checkbox" + :class="{ 'menu-checkbox-checked': hasTag(tags.QUARANTINE) }" + /> + </button> + </span> + </div> + </div> + <button + class="btn btn-default btn-block" + :class="{ pressed: showDropDown }" + > + {{ $t('user_card.admin_menu.moderation') }} + </button> + </v-popover> + <portal to="modal"> + <DialogModal + v-if="showDeleteUserDialog" + :on-cancel="deleteUserDialog.bind(this, false)" + > + <template slot="header"> + {{ $t('user_card.admin_menu.delete_user') }} + </template> + <p>{{ $t('user_card.admin_menu.delete_user_confirmation') }}</p> + <template slot="footer"> + <button + class="btn btn-default" + @click="deleteUserDialog(false)" + > + {{ $t('general.cancel') }} + </button> + <button + class="btn btn-default danger" + @click="deleteUser()" + > + {{ $t('user_card.admin_menu.delete_user') }} + </button> + </template> + </DialogModal> + </portal> + </div> +</template> + +<script src="./moderation_tools.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; +@import '../popper/popper.scss'; + +.menu-checkbox { + float: right; + min-width: 22px; + max-width: 22px; + min-height: 22px; + max-height: 22px; + line-height: 22px; + text-align: center; + border-radius: 0px; + background-color: $fallback--fg; + background-color: var(--input, $fallback--fg); + box-shadow: 0px 0px 2px black inset; + box-shadow: var(--inputShadow); + + &.menu-checkbox-checked::after { + content: '✔'; + } +} + +.moderation-tools-popover { + height: 100%; + .trigger { + display: flex !important; + height: 100%; + } +} +</style> diff --git a/src/components/mute_card/mute_card.js b/src/components/mute_card/mute_card.js index 5dd0a9e5..65c9cfb5 100644 --- a/src/components/mute_card/mute_card.js +++ b/src/components/mute_card/mute_card.js @@ -9,7 +9,7 @@ const MuteCard = { }, computed: { user () { - return this.$store.getters.userById(this.userId) + return this.$store.getters.findUser(this.userId) }, muted () { return this.user.muted diff --git a/src/components/mute_card/mute_card.vue b/src/components/mute_card/mute_card.vue index e1bfe20b..9611fb82 100644 --- a/src/components/mute_card/mute_card.vue +++ b/src/components/mute_card/mute_card.vue @@ -1,7 +1,12 @@ <template> <basic-user-card :user="user"> - <template slot="secondary-area"> - <button class="btn btn-default" @click="unmuteUser" :disabled="progress" v-if="muted"> + <div class="mute-card-content-container"> + <button + v-if="muted" + class="btn btn-default" + :disabled="progress" + @click="unmuteUser" + > <template v-if="progress"> {{ $t('user_card.unmute_progress') }} </template> @@ -9,7 +14,12 @@ {{ $t('user_card.unmute') }} </template> </button> - <button class="btn btn-default" @click="muteUser" :disabled="progress" v-else> + <button + v-else + class="btn btn-default" + :disabled="progress" + @click="muteUser" + > <template v-if="progress"> {{ $t('user_card.mute_progress') }} </template> @@ -17,8 +27,18 @@ {{ $t('user_card.mute') }} </template> </button> - </template> + </div> </basic-user-card> </template> -<script src="./mute_card.js"></script>
\ No newline at end of file +<script src="./mute_card.js"></script> + +<style lang="scss"> +.mute-card-content-container { + margin-top: 0.5em; + text-align: right; + button { + width: 10em; + } +} +</style> diff --git a/src/components/nav_panel/nav_panel.vue b/src/components/nav_panel/nav_panel.vue index 7a7212fb..614fadf4 100644 --- a/src/components/nav_panel/nav_panel.vue +++ b/src/components/nav_panel/nav_panel.vue @@ -2,26 +2,29 @@ <div class="nav-panel"> <div class="panel panel-default"> <ul> - <li v-if='currentUser'> + <li v-if="currentUser"> <router-link :to="{ name: 'friends' }"> {{ $t("nav.timeline") }} </router-link> </li> - <li v-if='currentUser'> - <router-link :to="{ name: 'mentions', params: { username: currentUser.screen_name } }"> - {{ $t("nav.mentions") }} + <li v-if="currentUser"> + <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> + {{ $t("nav.interactions") }} </router-link> </li> - <li v-if='currentUser'> + <li v-if="currentUser"> <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> {{ $t("nav.dms") }} </router-link> </li> - <li v-if='currentUser && currentUser.locked'> + <li v-if="currentUser && currentUser.locked"> <router-link :to="{ name: 'friend-requests' }"> - {{ $t("nav.friend_requests")}} - <span v-if='followRequestCount > 0' class="badge follow-request-count"> - {{followRequestCount}} + {{ $t("nav.friend_requests") }} + <span + v-if="followRequestCount > 0" + class="badge follow-request-count" + > + {{ followRequestCount }} </span> </router-link> </li> diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index fe5b7018..8e817f3b 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -1,6 +1,7 @@ import Status from '../status/status.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import UserCard from '../user_card/user_card.vue' +import Timeago from '../timeago/timeago.vue' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' @@ -8,29 +9,54 @@ const Notification = { data () { return { userExpanded: false, - betterShadow: this.$store.state.interface.browserSupport.cssFilter + betterShadow: this.$store.state.interface.browserSupport.cssFilter, + unmuted: false } }, props: [ 'notification' ], components: { - Status, UserAvatar, UserCard + Status, + UserAvatar, + UserCard, + Timeago }, methods: { toggleUserExpanded () { this.userExpanded = !this.userExpanded }, - userProfileLink (user) { + generateUserProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + }, + getUser (notification) { + return this.$store.state.users.usersObject[notification.from_profile.id] + }, + toggleMute () { + this.unmuted = !this.unmuted } }, computed: { userClass () { - return highlightClass(this.notification.action.user) + return highlightClass(this.notification.from_profile) }, userStyle () { const highlight = this.$store.state.config.highlight - const user = this.notification.action.user + const user = this.notification.from_profile return highlightStyle(highlight[user.screen_name]) + }, + userInStore () { + return this.$store.getters.findUser(this.notification.from_profile.id) + }, + user () { + if (this.userInStore) { + return this.userInStore + } + return this.notification.from_profile + }, + userProfileLink () { + return this.generateUserProfileLink(this.user) + }, + needMute () { + return this.user.muted } } } diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 5e9cef97..1f192c77 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -1,42 +1,129 @@ <template> - <status v-if="notification.type === 'mention'" :compact="true" :statusoid="notification.status"></status> - <div class="non-mention" :class="[userClass, { highlighted: userStyle }]" :style="[ userStyle ]"v-else> - <a class='avatar-container' :href="notification.action.user.statusnet_profile_url" @click.stop.prevent.capture="toggleUserExpanded"> - <UserAvatar :compact="true" :betterShadow="betterShadow" :src="notification.action.user.profile_image_url_original"/> - </a> - <div class='notification-right'> - <UserCard :user="notification.action.user" :rounded="true" :bordered="true" v-if="userExpanded"/> - <span class="notification-details"> - <div class="name-and-action"> - <span class="username" v-if="!!notification.action.user.name_html" :title="'@'+notification.action.user.screen_name" v-html="notification.action.user.name_html"></span> - <span class="username" v-else :title="'@'+notification.action.user.screen_name">{{ notification.action.user.name }}</span> - <span v-if="notification.type === 'like'"> - <i class="fa icon-star lit"></i> - <small>{{$t('notifications.favorited_you')}}</small> - </span> - <span v-if="notification.type === 'repeat'"> - <i class="fa icon-retweet lit" :title="$t('tool_tip.repeat')"></i> - <small>{{$t('notifications.repeated_you')}}</small> - </span> - <span v-if="notification.type === 'follow'"> - <i class="fa icon-user-plus lit"></i> - <small>{{$t('notifications.followed_you')}}</small> - </span> - </div> - <div class="timeago"> - <router-link v-if="notification.status" :to="{ name: 'conversation', params: { id: notification.status.id } }" class="faint-link"> - <timeago :since="notification.action.created_at" :auto-update="240"></timeago> + <status + v-if="notification.type === 'mention'" + :compact="true" + :statusoid="notification.status" + /> + <div v-else> + <div + v-if="needMute && !unmuted" + class="container muted" + > + <small> + <router-link :to="userProfileLink"> + {{ notification.from_profile.screen_name }} + </router-link> + </small> + <a + href="#" + class="unmute" + @click.prevent="toggleMute" + ><i class="button-icon icon-eye-off" /></a> + </div> + <div + v-else + class="non-mention" + :class="[userClass, { highlighted: userStyle }]" + :style="[ userStyle ]" + > + <a + class="avatar-container" + :href="notification.from_profile.statusnet_profile_url" + @click.stop.prevent.capture="toggleUserExpanded" + > + <UserAvatar + :compact="true" + :better-shadow="betterShadow" + :user="notification.from_profile" + /> + </a> + <div class="notification-right"> + <UserCard + v-if="userExpanded" + :user="getUser(notification)" + :rounded="true" + :bordered="true" + /> + <span class="notification-details"> + <div class="name-and-action"> + <!-- eslint-disable vue/no-v-html --> + <span + v-if="!!notification.from_profile.name_html" + class="username" + :title="'@'+notification.from_profile.screen_name" + v-html="notification.from_profile.name_html" + /> + <!-- eslint-enable vue/no-v-html --> + <span + v-else + class="username" + :title="'@'+notification.from_profile.screen_name" + >{{ notification.from_profile.name }}</span> + <span v-if="notification.type === 'like'"> + <i class="fa icon-star lit" /> + <small>{{ $t('notifications.favorited_you') }}</small> + </span> + <span v-if="notification.type === 'repeat'"> + <i + class="fa icon-retweet lit" + :title="$t('tool_tip.repeat')" + /> + <small>{{ $t('notifications.repeated_you') }}</small> + </span> + <span v-if="notification.type === 'follow'"> + <i class="fa icon-user-plus lit" /> + <small>{{ $t('notifications.followed_you') }}</small> + </span> + </div> + <div + v-if="notification.type === 'follow'" + class="timeago" + > + <span class="faint"> + <Timeago + :time="notification.created_at" + :auto-update="240" + /> + </span> + </div> + <div + v-else + class="timeago" + > + <router-link + v-if="notification.status" + :to="{ name: 'conversation', params: { id: notification.status.id } }" + class="faint-link" + > + <Timeago + :time="notification.created_at" + :auto-update="240" + /> + </router-link> + </div> + <a + v-if="needMute" + href="#" + @click.prevent="toggleMute" + ><i class="button-icon icon-eye-off" /></a> + </span> + <div + v-if="notification.type === 'follow'" + class="follow-text" + > + <router-link :to="userProfileLink"> + @{{ notification.from_profile.screen_name }} </router-link> </div> - </span> - <div class="follow-text" v-if="notification.type === 'follow'"> - <router-link :to="userProfileLink(notification.action.user)"> - @{{notification.action.user.screen_name}} - </router-link> + <template v-else> + <status + class="faint" + :compact="true" + :statusoid="notification.action" + :no-heading="true" + /> + </template> </div> - <template v-else> - <status class="faint" :compact="true" :statusoid="notification.status" :noHeading="true"></status> - </template> </div> </div> </template> diff --git a/src/components/notifications/notifications.js b/src/components/notifications/notifications.js index 9fc5e38a..6c4054fd 100644 --- a/src/components/notifications/notifications.js +++ b/src/components/notifications/notifications.js @@ -7,12 +7,14 @@ import { } from '../../services/notification_utils/notification_utils.js' const Notifications = { - created () { - const store = this.$store - const credentials = store.state.users.currentUser.credentials - - const fetcherId = notificationsFetcher.startFetching({ store, credentials }) - this.$store.commit('setNotificationFetcher', { fetcherId }) + props: { + // Disables display of panel header + noHeading: Boolean, + // Disables panel styles, unread mark, potentially other notification-related actions + // meant for "Interactions" timeline + minimalMode: Boolean, + // Custom filter mode, an array of strings, possible values 'mention', 'repeat', 'like', 'follow', used to override global filter for use in "Interactions" timeline + filterMode: Array }, data () { return { @@ -20,6 +22,9 @@ const Notifications = { } }, computed: { + mainClass () { + return this.minimalMode ? '' : 'panel panel-default' + }, notifications () { return notificationsFromStore(this.$store) }, @@ -30,7 +35,7 @@ const Notifications = { return unseenNotificationsFromStore(this.$store) }, visibleNotifications () { - return visibleNotificationsFromStore(this.$store) + return visibleNotificationsFromStore(this.$store, this.filterMode) }, unseenCount () { return this.unseenNotifications.length @@ -53,9 +58,13 @@ const Notifications = { }, methods: { markAsSeen () { - this.$store.dispatch('markNotificationsAsSeen', this.visibleNotifications) + this.$store.dispatch('markNotificationsAsSeen') }, fetchOlderNotifications () { + if (this.loading) { + return + } + const store = this.$store const credentials = store.state.users.currentUser.credentials store.commit('setNotificationsLoading', { value: true }) diff --git a/src/components/notifications/notifications.scss b/src/components/notifications/notifications.scss index c0b458cc..71876b14 100644 --- a/src/components/notifications/notifications.scss +++ b/src/components/notifications/notifications.scss @@ -1,8 +1,10 @@ @import '../../_variables.scss'; .notifications { - // a bit of a hack to allow scrolling below notifications - padding-bottom: 15em; + &:not(.minimal) { + // a bit of a hack to allow scrolling below notifications + padding-bottom: 15em; + } .loadmore-error { color: $fallback--text; @@ -31,7 +33,6 @@ .notification { box-sizing: border-box; - display: flex; border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); @@ -45,6 +46,10 @@ } } + .muted { + padding: .25em .6em; + } + .non-mention { display: flex; flex: 1; diff --git a/src/components/notifications/notifications.vue b/src/components/notifications/notifications.vue index 6f162b62..c42c35e6 100644 --- a/src/components/notifications/notifications.vue +++ b/src/components/notifications/notifications.vue @@ -1,31 +1,67 @@ <template> - <div class="notifications"> - <div class="panel panel-default"> - <div class="panel-heading"> + <div + :class="{ minimal: minimalMode }" + class="notifications" + > + <div :class="mainClass"> + <div + v-if="!noHeading" + class="panel-heading" + > <div class="title"> - {{$t('notifications.notifications')}} - <span class="badge badge-notification unseen-count" v-if="unseenCount">{{unseenCount}}</span> + {{ $t('notifications.notifications') }} + <span + v-if="unseenCount" + class="badge badge-notification unseen-count" + >{{ unseenCount }}</span> </div> - <div @click.prevent class="loadmore-error alert error" v-if="error"> - {{$t('timeline.error_fetching')}} + <div + v-if="error" + class="loadmore-error alert error" + @click.prevent + > + {{ $t('timeline.error_fetching') }} </div> - <button v-if="unseenCount" @click.prevent="markAsSeen" class="read-button">{{$t('notifications.read')}}</button> + <button + v-if="unseenCount" + class="read-button" + @click.prevent="markAsSeen" + > + {{ $t('notifications.read') }} + </button> </div> <div class="panel-body"> - <div v-for="notification in visibleNotifications" :key="notification.action.id" class="notification" :class='{"unseen": !notification.seen}'> - <div class="notification-overlay"></div> - <notification :notification="notification"></notification> + <div + v-for="notification in visibleNotifications" + :key="notification.id" + class="notification" + :class="{"unseen": !minimalMode && !notification.seen}" + > + <div class="notification-overlay" /> + <notification :notification="notification" /> </div> </div> <div class="panel-footer"> - <div v-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> - {{$t('notifications.no_more_notifications')}} + <div + v-if="bottomedOut" + class="new-status-notification text-center panel-footer faint" + > + {{ $t('notifications.no_more_notifications') }} </div> - <a v-else-if="!loading" href="#" v-on:click.prevent="fetchOlderNotifications()"> - <div class="new-status-notification text-center panel-footer">{{$t('notifications.load_older')}}</div> + <a + v-else-if="!loading" + href="#" + @click.prevent="fetchOlderNotifications()" + > + <div class="new-status-notification text-center panel-footer"> + {{ minimalMode ? $t('interactions.load_older') : $t('notifications.load_older') }} + </div> </a> - <div v-else class="new-status-notification text-center panel-footer"> - <i class="icon-spin3 animate-spin"/> + <div + v-else + class="new-status-notification text-center panel-footer" + > + <i class="icon-spin3 animate-spin" /> </div> </div> </div> diff --git a/src/components/oauth_callback/oauth_callback.js b/src/components/oauth_callback/oauth_callback.js index e3d45ee1..a3c7b7f9 100644 --- a/src/components/oauth_callback/oauth_callback.js +++ b/src/components/oauth_callback/oauth_callback.js @@ -4,14 +4,17 @@ const oac = { props: ['code'], mounted () { if (this.code) { + const { clientId, clientSecret } = this.$store.state.oauth + oauth.getToken({ - app: this.$store.state.oauth, + clientId, + clientSecret, instance: this.$store.state.instance.server, code: this.code }).then((result) => { this.$store.commit('setToken', result.access_token) this.$store.dispatch('loginUser', result.access_token) - this.$router.push({name: 'friends'}) + this.$router.push({ name: 'friends' }) }) } } diff --git a/src/components/opacity_input/opacity_input.vue b/src/components/opacity_input/opacity_input.vue index 3926915b..c677f18c 100644 --- a/src/components/opacity_input/opacity_input.vue +++ b/src/components/opacity_input/opacity_input.vue @@ -1,27 +1,39 @@ <template> -<div class="opacity-control style-control" :class="{ disabled: !present || disabled }"> - <label :for="name" class="label"> - {{$t('settings.style.common.opacity')}} - </label> - <input - v-if="typeof fallback !== 'undefined'" - class="opt exclude-disabled" - :id="name + '-o'" - type="checkbox" - :checked="present" - @input="$emit('input', !present ? fallback : undefined)"> - <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> - <input - :id="name" - class="input-number" - type="number" - :value="value || fallback" - :disabled="!present || disabled" - @input="$emit('input', $event.target.value)" - max="1" - min="0" - step=".05"> -</div> + <div + class="opacity-control style-control" + :class="{ disabled: !present || disabled }" + > + <label + :for="name" + class="label" + > + {{ $t('settings.style.common.opacity') }} + </label> + <input + v-if="typeof fallback !== 'undefined'" + :id="name + '-o'" + class="opt exclude-disabled" + type="checkbox" + :checked="present" + @input="$emit('input', !present ? fallback : undefined)" + > + <label + v-if="typeof fallback !== 'undefined'" + class="opt-l" + :for="name + '-o'" + /> + <input + :id="name" + class="input-number" + type="number" + :value="value || fallback" + :disabled="!present || disabled" + max="1" + min="0" + step=".05" + @input="$emit('input', $event.target.value)" + > + </div> </template> <script> diff --git a/src/components/password_reset/password_reset.js b/src/components/password_reset/password_reset.js new file mode 100644 index 00000000..fa71e07a --- /dev/null +++ b/src/components/password_reset/password_reset.js @@ -0,0 +1,62 @@ +import { mapState } from 'vuex' +import passwordResetApi from '../../services/new_api/password_reset.js' + +const passwordReset = { + data: () => ({ + user: { + email: '' + }, + isPending: false, + success: false, + throttled: false, + error: null + }), + computed: { + ...mapState({ + signedIn: (state) => !!state.users.currentUser, + instance: state => state.instance + }), + mailerEnabled () { + return this.instance.mailerEnabled + } + }, + created () { + if (this.signedIn) { + this.$router.push({ name: 'root' }) + } + }, + methods: { + dismissError () { + this.error = null + }, + submit () { + this.isPending = true + const email = this.user.email + const instance = this.instance.server + + passwordResetApi({ instance, email }).then(({ status }) => { + this.isPending = false + this.user.email = '' + + if (status === 204) { + this.success = true + this.error = null + } else if (status === 404 || status === 400) { + this.error = this.$t('password_reset.not_found') + this.$nextTick(() => { + this.$refs.email.focus() + }) + } else if (status === 429) { + this.throttled = true + this.error = this.$t('password_reset.too_many_requests') + } + }).catch(() => { + this.isPending = false + this.user.email = '' + this.error = this.$t('general.generic_error') + }) + } + } +} + +export default passwordReset diff --git a/src/components/password_reset/password_reset.vue b/src/components/password_reset/password_reset.vue new file mode 100644 index 00000000..00474e95 --- /dev/null +++ b/src/components/password_reset/password_reset.vue @@ -0,0 +1,116 @@ +<template> + <div class="settings panel panel-default"> + <div class="panel-heading"> + {{ $t('password_reset.password_reset') }} + </div> + <div class="panel-body"> + <form + class="password-reset-form" + @submit.prevent="submit" + > + <div class="container"> + <div v-if="!mailerEnabled"> + <p> + {{ $t('password_reset.password_reset_disabled') }} + </p> + </div> + <div v-else-if="success || throttled"> + <p v-if="success"> + {{ $t('password_reset.check_email') }} + </p> + <div class="form-group text-center"> + <router-link :to="{name: 'root'}"> + {{ $t('password_reset.return_home') }} + </router-link> + </div> + </div> + <div v-else> + <p> + {{ $t('password_reset.instruction') }} + </p> + <div class="form-group"> + <input + ref="email" + v-model="user.email" + :disabled="isPending" + :placeholder="$t('password_reset.placeholder')" + class="form-control" + type="input" + > + </div> + <div class="form-group"> + <button + :disabled="isPending" + type="submit" + class="btn btn-default btn-block" + > + {{ $t('general.submit') }} + </button> + </div> + </div> + <p + v-if="error" + class="alert error notice-dismissible" + > + <span>{{ error }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissError()" + > + <i class="icon-cancel" /> + </a> + </p> + </div> + </form> + </div> + </div> +</template> + +<script src="./password_reset.js"></script> +<style lang="scss"> +@import '../../_variables.scss'; + +.password-reset-form { + display: flex; + flex-direction: column; + align-items: center; + margin: 0.6em; + + .container { + display: flex; + flex: 1 0; + flex-direction: column; + margin-top: 0.6em; + max-width: 18rem; + } + + .form-group { + display: flex; + flex-direction: column; + margin-bottom: 1em; + padding: 0.3em 0.0em 0.3em; + line-height: 24px; + } + + .error { + text-align: center; + animation-name: shakeError; + animation-duration: 0.4s; + animation-timing-function: ease-in-out; + } + + .alert { + padding: 0.5em; + margin: 0.3em 0.0em 1em; + } + + .notice-dismissible { + padding-right: 2rem; + } + + .icon-cancel { + cursor: pointer; + } +} + +</style> diff --git a/src/components/poll/poll.js b/src/components/poll/poll.js new file mode 100644 index 00000000..98db5582 --- /dev/null +++ b/src/components/poll/poll.js @@ -0,0 +1,112 @@ +import Timeago from '../timeago/timeago.vue' +import { forEach, map } from 'lodash' + +export default { + name: 'Poll', + props: ['basePoll'], + components: { Timeago }, + data () { + return { + loading: false, + choices: [] + } + }, + created () { + if (!this.$store.state.polls.pollsObject[this.pollId]) { + this.$store.dispatch('mergeOrAddPoll', this.basePoll) + } + this.$store.dispatch('trackPoll', this.pollId) + }, + destroyed () { + this.$store.dispatch('untrackPoll', this.pollId) + }, + computed: { + pollId () { + return this.basePoll.id + }, + poll () { + const storePoll = this.$store.state.polls.pollsObject[this.pollId] + return storePoll || {} + }, + options () { + return (this.poll && this.poll.options) || [] + }, + expiresAt () { + return (this.poll && this.poll.expires_at) || 0 + }, + expired () { + return (this.poll && this.poll.expired) || false + }, + loggedIn () { + return this.$store.state.users.currentUser + }, + showResults () { + return this.poll.voted || this.expired || !this.loggedIn + }, + totalVotesCount () { + return this.poll.votes_count + }, + containerClass () { + return { + loading: this.loading + } + }, + choiceIndices () { + // Convert array of booleans into an array of indices of the + // items that were 'true', so [true, false, false, true] becomes + // [0, 3]. + return this.choices + .map((entry, index) => entry && index) + .filter(value => typeof value === 'number') + }, + isDisabled () { + const noChoice = this.choiceIndices.length === 0 + return this.loading || noChoice + } + }, + methods: { + percentageForOption (count) { + return this.totalVotesCount === 0 ? 0 : Math.round(count / this.totalVotesCount * 100) + }, + resultTitle (option) { + return `${option.votes_count}/${this.totalVotesCount} ${this.$t('polls.votes')}` + }, + fetchPoll () { + this.$store.dispatch('refreshPoll', { id: this.statusId, pollId: this.poll.id }) + }, + activateOption (index) { + // forgive me father: doing checking the radio/checkboxes + // in code because of customized input elements need either + // a) an extra element for the actual graphic, or b) use a + // pseudo element for the label. We use b) which mandates + // using "for" and "id" matching which isn't nice when the + // same poll appears multiple times on the site (notifs and + // timeline for example). With code we can make sure it just + // works without altering the pseudo element implementation. + const allElements = this.$el.querySelectorAll('input') + const clickedElement = this.$el.querySelector(`input[value="${index}"]`) + if (this.poll.multiple) { + // Checkboxes, toggle only the clicked one + clickedElement.checked = !clickedElement.checked + } else { + // Radio button, uncheck everything and check the clicked one + forEach(allElements, element => { element.checked = false }) + clickedElement.checked = true + } + this.choices = map(allElements, e => e.checked) + }, + optionId (index) { + return `poll${this.poll.id}-${index}` + }, + vote () { + if (this.choiceIndices.length === 0) return + this.loading = true + this.$store.dispatch( + 'votePoll', + { id: this.statusId, pollId: this.poll.id, choices: this.choiceIndices } + ).then(poll => { + this.loading = false + }) + } + } +} diff --git a/src/components/poll/poll.vue b/src/components/poll/poll.vue new file mode 100644 index 00000000..db8e33b3 --- /dev/null +++ b/src/components/poll/poll.vue @@ -0,0 +1,134 @@ +<template> + <div + class="poll" + :class="containerClass" + > + <div + v-for="(option, index) in options" + :key="index" + class="poll-option" + > + <div + v-if="showResults" + :title="resultTitle(option)" + class="option-result" + > + <div class="option-result-label"> + <span class="result-percentage"> + {{ percentageForOption(option.votes_count) }}% + </span> + <span>{{ option.title }}</span> + </div> + <div + class="result-fill" + :style="{ 'width': `${percentageForOption(option.votes_count)}%` }" + /> + </div> + <div + v-else + @click="activateOption(index)" + > + <input + v-if="poll.multiple" + type="checkbox" + :disabled="loading" + :value="index" + > + <input + v-else + type="radio" + :disabled="loading" + :value="index" + > + <label class="option-vote"> + <div>{{ option.title }}</div> + </label> + </div> + </div> + <div class="footer faint"> + <button + v-if="!showResults" + class="btn btn-default poll-vote-button" + type="button" + :disabled="isDisabled" + @click="vote" + > + {{ $t('polls.vote') }} + </button> + <div class="total"> + {{ totalVotesCount }} {{ $t("polls.votes") }} · + </div> + <i18n :path="expired ? 'polls.expired' : 'polls.expires_in'"> + <Timeago + :time="expiresAt" + :auto-update="60" + :now-threshold="0" + /> + </i18n> + </div> + </div> +</template> + +<script src="./poll.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.poll { + .votes { + display: flex; + flex-direction: column; + margin: 0 0 0.5em; + } + .poll-option { + margin: 0.75em 0.5em; + } + .option-result { + height: 100%; + display: flex; + flex-direction: row; + position: relative; + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + .option-result-label { + display: flex; + align-items: center; + padding: 0.1em 0.25em; + z-index: 1; + } + .result-percentage { + width: 3.5em; + flex-shrink: 0; + } + .result-fill { + height: 100%; + position: absolute; + background-color: $fallback--lightBg; + background-color: var(--linkBg, $fallback--lightBg); + border-radius: $fallback--panelRadius; + border-radius: var(--panelRadius, $fallback--panelRadius); + top: 0; + left: 0; + transition: width 0.5s; + } + .option-vote { + display: flex; + align-items: center; + } + input { + width: 3.5em; + } + .footer { + display: flex; + align-items: center; + } + &.loading * { + cursor: progress; + } + .poll-vote-button { + padding: 0 0.5em; + margin-right: 0.5em; + } +} +</style> diff --git a/src/components/poll/poll_form.js b/src/components/poll/poll_form.js new file mode 100644 index 00000000..c0c1ccf7 --- /dev/null +++ b/src/components/poll/poll_form.js @@ -0,0 +1,121 @@ +import * as DateUtils from 'src/services/date_utils/date_utils.js' +import { uniq } from 'lodash' + +export default { + name: 'PollForm', + props: ['visible'], + data: () => ({ + pollType: 'single', + options: ['', ''], + expiryAmount: 10, + expiryUnit: 'minutes' + }), + computed: { + pollLimits () { + return this.$store.state.instance.pollLimits + }, + maxOptions () { + return this.pollLimits.max_options + }, + maxLength () { + return this.pollLimits.max_option_chars + }, + expiryUnits () { + const allUnits = ['minutes', 'hours', 'days'] + const expiry = this.convertExpiryFromUnit + return allUnits.filter( + unit => this.pollLimits.max_expiration >= expiry(unit, 1) + ) + }, + minExpirationInCurrentUnit () { + return Math.ceil( + this.convertExpiryToUnit( + this.expiryUnit, + this.pollLimits.min_expiration + ) + ) + }, + maxExpirationInCurrentUnit () { + return Math.floor( + this.convertExpiryToUnit( + this.expiryUnit, + this.pollLimits.max_expiration + ) + ) + } + }, + methods: { + clear () { + this.pollType = 'single' + this.options = ['', ''] + this.expiryAmount = 10 + this.expiryUnit = 'minutes' + }, + nextOption (index) { + const element = this.$el.querySelector(`#poll-${index + 1}`) + if (element) { + element.focus() + } else { + // Try adding an option and try focusing on it + const addedOption = this.addOption() + if (addedOption) { + this.$nextTick(function () { + this.nextOption(index) + }) + } + } + }, + addOption () { + if (this.options.length < this.maxOptions) { + this.options.push('') + return true + } + return false + }, + deleteOption (index, event) { + if (this.options.length > 2) { + this.options.splice(index, 1) + } + }, + convertExpiryToUnit (unit, amount) { + // Note: we want seconds and not milliseconds + switch (unit) { + case 'minutes': return (1000 * amount) / DateUtils.MINUTE + case 'hours': return (1000 * amount) / DateUtils.HOUR + case 'days': return (1000 * amount) / DateUtils.DAY + } + }, + convertExpiryFromUnit (unit, amount) { + // Note: we want seconds and not milliseconds + switch (unit) { + case 'minutes': return 0.001 * amount * DateUtils.MINUTE + case 'hours': return 0.001 * amount * DateUtils.HOUR + case 'days': return 0.001 * amount * DateUtils.DAY + } + }, + expiryAmountChange () { + this.expiryAmount = + Math.max(this.minExpirationInCurrentUnit, this.expiryAmount) + this.expiryAmount = + Math.min(this.maxExpirationInCurrentUnit, this.expiryAmount) + this.updatePollToParent() + }, + updatePollToParent () { + const expiresIn = this.convertExpiryFromUnit( + this.expiryUnit, + this.expiryAmount + ) + + const options = uniq(this.options.filter(option => option !== '')) + if (options.length < 2) { + this.$emit('update-poll', { error: this.$t('polls.not_enough_options') }) + return + } + this.$emit('update-poll', { + options, + multiple: this.pollType === 'multiple', + expiresIn + }) + } + } +} diff --git a/src/components/poll/poll_form.vue b/src/components/poll/poll_form.vue new file mode 100644 index 00000000..d53f3837 --- /dev/null +++ b/src/components/poll/poll_form.vue @@ -0,0 +1,163 @@ +<template> + <div + v-if="visible" + class="poll-form" + > + <div + v-for="(option, index) in options" + :key="index" + class="poll-option" + > + <div class="input-container"> + <input + :id="`poll-${index}`" + v-model="options[index]" + class="poll-option-input" + type="text" + :placeholder="$t('polls.option')" + :maxlength="maxLength" + @change="updatePollToParent" + @keydown.enter.stop.prevent="nextOption(index)" + > + </div> + <div + v-if="options.length > 2" + class="icon-container" + > + <i + class="icon-cancel" + @click="deleteOption(index)" + /> + </div> + </div> + <a + v-if="options.length < maxOptions" + class="add-option faint" + @click="addOption" + > + <i class="icon-plus" /> + {{ $t("polls.add_option") }} + </a> + <div class="poll-type-expiry"> + <div + class="poll-type" + :title="$t('polls.type')" + > + <label + for="poll-type-selector" + class="select" + > + <select + v-model="pollType" + class="select" + @change="updatePollToParent" + > + <option value="single">{{ $t('polls.single_choice') }}</option> + <option value="multiple">{{ $t('polls.multiple_choices') }}</option> + </select> + <i class="icon-down-open" /> + </label> + </div> + <div + class="poll-expiry" + :title="$t('polls.expiry')" + > + <input + v-model="expiryAmount" + type="number" + class="expiry-amount hide-number-spinner" + :min="minExpirationInCurrentUnit" + :max="maxExpirationInCurrentUnit" + @change="expiryAmountChange" + > + <label class="expiry-unit select"> + <select + v-model="expiryUnit" + @change="expiryAmountChange" + > + <option + v-for="unit in expiryUnits" + :key="unit" + :value="unit" + > + {{ $t(`time.${unit}_short`, ['']) }} + </option> + </select> + <i class="icon-down-open" /> + </label> + </div> + </div> + </div> +</template> + +<script src="./poll_form.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.poll-form { + display: flex; + flex-direction: column; + padding: 0 0.5em 0.5em; + + .add-option { + align-self: flex-start; + padding-top: 0.25em; + cursor: pointer; + } + + .poll-option { + display: flex; + align-items: baseline; + justify-content: space-between; + margin-bottom: 0.25em; + } + + .input-container { + width: 100%; + input { + // Hack: dodge the floating X icon + padding-right: 2.5em; + width: 100%; + } + } + + .icon-container { + // Hack: Move the icon over the input box + width: 2em; + margin-left: -2em; + z-index: 1; + } + + .poll-type-expiry { + margin-top: 0.5em; + display: flex; + width: 100%; + } + + .poll-type { + margin-right: 0.75em; + flex: 1 1 60%; + .select { + border: none; + box-shadow: none; + background-color: transparent; + } + } + + .poll-expiry { + display: flex; + + .expiry-amount { + width: 3em; + text-align: right; + } + + .expiry-unit { + border: none; + box-shadow: none; + background-color: transparent; + } + } +} +</style> diff --git a/src/components/popper/popper.scss b/src/components/popper/popper.scss new file mode 100644 index 00000000..279b01be --- /dev/null +++ b/src/components/popper/popper.scss @@ -0,0 +1,148 @@ +@import '../../_variables.scss'; + +.tooltip.popover { + z-index: 8; + + .popover-inner { + box-shadow: 1px 1px 4px rgba(0,0,0,.6); + box-shadow: var(--panelShadow); + border-radius: $fallback--btnRadius; + border-radius: var(--btnRadius, $fallback--btnRadius); + background-color: $fallback--bg; + background-color: var(--bg, $fallback--bg); + } + + .popover-arrow { + width: 0; + height: 0; + border-style: solid; + position: absolute; + margin: 5px; + border-color: $fallback--bg; + border-color: var(--bg, $fallback--bg); + z-index: 1; + } + + &[x-placement^="top"] { + margin-bottom: 5px; + + .popover-arrow { + border-width: 5px 5px 0 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + bottom: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="bottom"] { + margin-top: 5px; + + .popover-arrow { + border-width: 0 5px 5px 5px; + border-left-color: transparent !important; + border-right-color: transparent !important; + border-top-color: transparent !important; + top: -5px; + left: calc(50% - 5px); + margin-top: 0; + margin-bottom: 0; + } + } + + &[x-placement^="right"] { + margin-left: 5px; + + .popover-arrow { + border-width: 5px 5px 5px 0; + border-left-color: transparent !important; + border-top-color: transparent !important; + border-bottom-color: transparent !important; + left: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[x-placement^="left"] { + margin-right: 5px; + + .popover-arrow { + border-width: 5px 0 5px 5px; + border-top-color: transparent !important; + border-right-color: transparent !important; + border-bottom-color: transparent !important; + right: -5px; + top: calc(50% - 5px); + margin-left: 0; + margin-right: 0; + } + } + + &[aria-hidden='true'] { + visibility: hidden; + opacity: 0; + transition: opacity .15s, visibility .15s; + } + + &[aria-hidden='false'] { + visibility: visible; + opacity: 1; + transition: opacity .15s; + } +} + +.dropdown-menu { + display: block; + padding: .5rem 0; + font-size: 1rem; + text-align: left; + list-style: none; + max-width: 100vw; + z-index: 10; + + .dropdown-divider { + height: 0; + margin: .5rem 0; + overflow: hidden; + border-top: 1px solid $fallback--border; + border-top: 1px solid var(--border, $fallback--border); + } + + .dropdown-item { + line-height: 21px; + margin-right: 5px; + overflow: auto; + display: block; + padding: .25rem 1.0rem .25rem 1.5rem; + clear: both; + font-weight: 400; + text-align: inherit; + white-space: normal; + border: none; + border-radius: 0px; + background-color: transparent; + box-shadow: none; + width: 100%; + height: 100%; + + &-icon { + padding-left: 0.5rem; + + i { + margin-right: 0.25rem; + } + } + + &:hover { + // TODO: improve the look on breeze themes + background-color: $fallback--fg; + background-color: var(--btn, $fallback--fg); + box-shadow: none; + } + } +} diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index 1f0df35a..9b2a9c90 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -1,16 +1,20 @@ import statusPoster from '../../services/status_poster/status_poster.service.js' import MediaUpload from '../media_upload/media_upload.vue' +import ScopeSelector from '../scope_selector/scope_selector.vue' +import EmojiInput from '../emoji_input/emoji_input.vue' +import PollForm from '../poll/poll_form.vue' import fileTypeService from '../../services/file_type/file_type.service.js' -import Completion from '../../services/completion/completion.js' -import { take, filter, reject, map, uniqBy } from 'lodash' +import { findOffset } from '../../services/offset_finder/offset_finder.service.js' +import { reject, map, uniqBy } from 'lodash' +import suggestor from '../emoji_input/suggestor.js' -const buildMentionsString = ({user, attentions}, currentUser) => { +const buildMentionsString = ({ user, attentions = [] }, currentUser) => { let allAttentions = [...attentions] allAttentions.unshift(user) allAttentions = uniqBy(allAttentions, 'id') - allAttentions = reject(allAttentions, {id: currentUser.id}) + allAttentions = reject(allAttentions, { id: currentUser.id }) let mentions = map(allAttentions, (attention) => { return `@${attention.screen_name}` @@ -28,7 +32,10 @@ const PostStatusForm = { 'subject' ], components: { - MediaUpload + MediaUpload, + EmojiInput, + PollForm, + ScopeSelector }, mounted () { this.resize(this.$refs.textarea) @@ -44,17 +51,17 @@ const PostStatusForm = { let statusText = preset || '' const scopeCopy = typeof this.$store.state.config.scopeCopy === 'undefined' - ? this.$store.state.instance.scopeCopy - : this.$store.state.config.scopeCopy + ? this.$store.state.instance.scopeCopy + : this.$store.state.config.scopeCopy if (this.replyTo) { const currentUser = this.$store.state.users.currentUser statusText = buildMentionsString({ user: this.repliedUser, attentions: this.attentions }, currentUser) } - const scope = (this.copyMessageScope && scopeCopy || this.copyMessageScope === 'direct') - ? this.copyMessageScope - : this.$store.state.users.currentUser.default_scope + const scope = ((this.copyMessageScope && scopeCopy) || this.copyMessageScope === 'direct') + ? this.copyMessageScope + : this.$store.state.users.currentUser.default_scope const contentType = typeof this.$store.state.config.postContentType === 'undefined' ? this.$store.state.instance.postContentType @@ -71,68 +78,45 @@ const PostStatusForm = { status: statusText, nsfw: false, files: [], + poll: {}, visibility: scope, contentType }, - caret: 0 + caret: 0, + pollFormVisible: false } }, computed: { - vis () { - return { - public: { selected: this.newStatus.visibility === 'public' }, - unlisted: { selected: this.newStatus.visibility === 'unlisted' }, - private: { selected: this.newStatus.visibility === 'private' }, - direct: { selected: this.newStatus.visibility === 'direct' } - } - }, - candidates () { - const firstchar = this.textAtCaret.charAt(0) - if (firstchar === '@') { - const query = this.textAtCaret.slice(1).toUpperCase() - const matchedUsers = filter(this.users, (user) => { - return user.screen_name.toUpperCase().startsWith(query) || - user.name && user.name.toUpperCase().startsWith(query) - }) - if (matchedUsers.length <= 0) { - return false - } - // eslint-disable-next-line camelcase - return map(take(matchedUsers, 5), ({screen_name, name, profile_image_url_original}, index) => ({ - // eslint-disable-next-line camelcase - screen_name: `@${screen_name}`, - name: name, - img: profile_image_url_original, - highlighted: index === this.highlighted - })) - } else if (firstchar === ':') { - if (this.textAtCaret === ':') { return } - const matchedEmoji = filter(this.emoji.concat(this.customEmoji), (emoji) => emoji.shortcode.startsWith(this.textAtCaret.slice(1))) - if (matchedEmoji.length <= 0) { - return false - } - return map(take(matchedEmoji, 5), ({shortcode, image_url, utf}, index) => ({ - screen_name: `:${shortcode}:`, - name: '', - utf: utf || '', - // eslint-disable-next-line camelcase - img: utf ? '' : this.$store.state.instance.server + image_url, - highlighted: index === this.highlighted - })) - } else { - return false - } - }, - textAtCaret () { - return (this.wordAtCaret || {}).word || '' - }, - wordAtCaret () { - const word = Completion.wordAtPosition(this.newStatus.status, this.caret - 1) || {} - return word - }, users () { return this.$store.state.users.users }, + userDefaultScope () { + return this.$store.state.users.currentUser.default_scope + }, + showAllScopes () { + const minimalScopesMode = typeof this.$store.state.config.minimalScopesMode === 'undefined' + ? this.$store.state.instance.minimalScopesMode + : this.$store.state.config.minimalScopesMode + return !minimalScopesMode + }, + emojiUserSuggestor () { + return suggestor({ + emoji: [ + ...this.$store.state.instance.emoji, + ...this.$store.state.instance.customEmoji + ], + users: this.$store.state.users.users, + updateUsersList: (input) => this.$store.dispatch('searchUsers', input) + }) + }, + emojiSuggestor () { + return suggestor({ + emoji: [ + ...this.$store.state.instance.emoji, + ...this.$store.state.instance.customEmoji + ] + }) + }, emoji () { return this.$store.state.instance.emoji || [] }, @@ -157,8 +141,8 @@ const PostStatusForm = { isOverLengthLimit () { return this.hasStatusLengthLimit && (this.charactersLeft < 0) }, - scopeOptionsEnabled () { - return this.$store.state.instance.scopeOptionsEnabled + minimalScopesMode () { + return this.$store.state.instance.minimalScopesMode }, alwaysShowSubject () { if (typeof this.$store.state.config.alwaysShowSubjectInput !== 'undefined') { @@ -166,68 +150,29 @@ const PostStatusForm = { } else if (typeof this.$store.state.instance.alwaysShowSubjectInput !== 'undefined') { return this.$store.state.instance.alwaysShowSubjectInput } else { - return this.$store.state.instance.scopeOptionsEnabled + return true } }, - formattingOptionsEnabled () { - return this.$store.state.instance.formattingOptionsEnabled - }, postFormats () { return this.$store.state.instance.postFormats || [] - } - }, - methods: { - replace (replacement) { - this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement) - const el = this.$el.querySelector('textarea') - el.focus() - this.caret = 0 - }, - replaceCandidate (e) { - const len = this.candidates.length || 0 - if (this.textAtCaret === ':' || e.ctrlKey) { return } - if (len > 0) { - e.preventDefault() - const candidate = this.candidates[this.highlighted] - const replacement = candidate.utf || (candidate.screen_name + ' ') - this.newStatus.status = Completion.replaceWord(this.newStatus.status, this.wordAtCaret, replacement) - const el = this.$el.querySelector('textarea') - el.focus() - this.caret = 0 - this.highlighted = 0 - } - }, - cycleBackward (e) { - const len = this.candidates.length || 0 - if (len > 0) { - e.preventDefault() - this.highlighted -= 1 - if (this.highlighted < 0) { - this.highlighted = this.candidates.length - 1 - } - } else { - this.highlighted = 0 - } }, - cycleForward (e) { - const len = this.candidates.length || 0 - if (len > 0) { - if (e.shiftKey) { return } - e.preventDefault() - this.highlighted += 1 - if (this.highlighted >= len) { - this.highlighted = 0 - } - } else { - this.highlighted = 0 - } + safeDMEnabled () { + return this.$store.state.instance.safeDM }, - onKeydown (e) { - e.stopPropagation() + pollsAvailable () { + return this.$store.state.instance.pollsAvailable && + this.$store.state.instance.pollLimits.max_options >= 2 }, - setCaret ({target: {selectionStart}}) { - this.caret = selectionStart + hideScopeNotice () { + return this.$store.state.config.hideScopeNotice }, + pollContentError () { + return this.pollFormVisible && + this.newStatus.poll && + this.newStatus.poll.error + } + }, + methods: { postStatus (newStatus) { if (this.posting) { return } if (this.submitDisabled) { return } @@ -241,6 +186,12 @@ const PostStatusForm = { } } + const poll = this.pollFormVisible ? this.newStatus.poll : {} + if (this.pollContentError) { + this.error = this.pollContentError + return + } + this.posting = true statusPoster.postStatus({ status: newStatus.status, @@ -250,7 +201,8 @@ const PostStatusForm = { media: newStatus.files, store: this.$store, inReplyToStatusId: this.replyTo, - contentType: newStatus.contentType + contentType: newStatus.contentType, + poll }).then((data) => { if (!data.error) { this.newStatus = { @@ -258,9 +210,12 @@ const PostStatusForm = { spoilerText: '', files: [], visibility: newStatus.visibility, - contentType: newStatus.contentType + contentType: newStatus.contentType, + poll: {} } + this.pollFormVisible = false this.$refs.mediaUpload.clearFile() + this.clearPollForm() this.$emit('posted') let el = this.$el.querySelector('textarea') el.style.height = 'auto' @@ -295,7 +250,10 @@ const PostStatusForm = { return fileTypeService.fileType(fileInfo.mimetype) }, paste (e) { + this.resize(e) if (e.clipboardData.files.length > 0) { + // prevent pasting of file as text + e.preventDefault() // 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. @@ -304,30 +262,123 @@ const PostStatusForm = { }, fileDrop (e) { if (e.dataTransfer.files.length > 0) { - e.preventDefault() // allow dropping text like before + e.preventDefault() // allow dropping text like before this.dropFiles = e.dataTransfer.files } }, fileDrag (e) { e.dataTransfer.dropEffect = 'copy' }, + onEmojiInputInput (e) { + this.$nextTick(() => { + this.resize(this.$refs['textarea']) + }) + }, resize (e) { const target = e.target || e if (!(target instanceof window.Element)) { return } - const vertPadding = Number(window.getComputedStyle(target)['padding-top'].substr(0, 1)) + - Number(window.getComputedStyle(target)['padding-bottom'].substr(0, 1)) - // Auto is needed to make textbox shrink when removing lines - target.style.height = 'auto' - target.style.height = `${target.scrollHeight - vertPadding}px` + + // Reset to default height for empty form, nothing else to do here. if (target.value === '') { target.style.height = null + this.$refs['emoji-input'].resize() + return } + + const rootRef = this.$refs['root'] + /* Scroller is either `window` (replies in TL), sidebar (main post form, + * replies in notifs) or mobile post form. Note that getting and setting + * scroll is different for `Window` and `Element`s + */ + const scrollerRef = this.$el.closest('.sidebar-scroller') || + this.$el.closest('.post-form-modal-view') || + window + + // Getting info about padding we have to account for, removing 'px' part + const topPaddingStr = window.getComputedStyle(target)['padding-top'] + const bottomPaddingStr = window.getComputedStyle(target)['padding-bottom'] + const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2)) + const bottomPadding = Number(bottomPaddingStr.substring(0, bottomPaddingStr.length - 2)) + const vertPadding = topPadding + bottomPadding + + const oldHeightStr = target.style.height || '' + const oldHeight = Number(oldHeightStr.substring(0, oldHeightStr.length - 2)) + + /* Explanation: + * + * https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight + * scrollHeight returns element's scrollable content height, i.e. visible + * element + overscrolled parts of it. We use it to determine when text + * inside the textarea exceeded its height, so we can set height to prevent + * overscroll, i.e. make textarea grow with the text. HOWEVER, since we + * explicitly set new height, scrollHeight won't go below that, so we can't + * SHRINK the textarea when there's extra space. To workaround that we set + * height to 'auto' which makes textarea tiny again, so that scrollHeight + * will match text height again. HOWEVER, shrinking textarea can screw with + * the scroll since there might be not enough padding around root to even + * warrant a scroll, so it will jump to 0 and refuse to move anywhere, + * so we check current scroll position before shrinking and then restore it + * with needed delta. + */ + + // this part has to be BEFORE the content size update + const currentScroll = scrollerRef === window + ? scrollerRef.scrollY + : scrollerRef.scrollTop + const scrollerHeight = scrollerRef === window + ? scrollerRef.innerHeight + : scrollerRef.offsetHeight + const scrollerBottomBorder = currentScroll + scrollerHeight + + // BEGIN content size update + target.style.height = 'auto' + const newHeight = target.scrollHeight - vertPadding + target.style.height = `${newHeight}px` + // END content size update + + // We check where the bottom border of root element is, this uses findOffset + // to find offset relative to scrollable container (scroller) + const rootBottomBorder = rootRef.offsetHeight + findOffset(rootRef, scrollerRef).top + + const textareaSizeChangeDelta = newHeight - oldHeight || 0 + const isBottomObstructed = scrollerBottomBorder < rootBottomBorder + const rootChangeDelta = rootBottomBorder - scrollerBottomBorder + const totalDelta = textareaSizeChangeDelta + + (isBottomObstructed ? rootChangeDelta : 0) + + const targetScroll = currentScroll + totalDelta + + if (scrollerRef === window) { + scrollerRef.scroll(0, targetScroll) + } else { + scrollerRef.scrollTop = targetScroll + } + + this.$refs['emoji-input'].resize() + }, + showEmojiPicker () { + this.$refs['textarea'].focus() + this.$refs['emoji-input'].triggerShowPicker() }, clearError () { this.error = null }, changeVis (visibility) { this.newStatus.visibility = visibility + }, + togglePollForm () { + this.pollFormVisible = !this.pollFormVisible + }, + setPoll (poll) { + this.newStatus.poll = poll + }, + clearPollForm () { + if (this.$refs.pollForm) { + this.$refs.pollForm.clear() + } + }, + dismissScopeNotice () { + this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true }) } } } diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 3d1df91b..4916d988 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -1,99 +1,272 @@ <template> -<div class="post-status-form"> - <form @submit.prevent="postStatus(newStatus)"> - <div class="form-group" > - <i18n - v-if="!this.$store.state.users.currentUser.locked && this.newStatus.visibility == 'private'" - path="post_status.account_not_locked_warning" - tag="p" - class="visibility-notice"> - <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link> - </i18n> - <p v-if="this.newStatus.visibility == 'direct'" class="visibility-notice">{{ $t('post_status.direct_warning') }}</p> - <input - v-if="newStatus.spoilerText || alwaysShowSubject" - type="text" - :placeholder="$t('post_status.content_warning')" - v-model="newStatus.spoilerText" - class="form-cw"> - <textarea - ref="textarea" - @click="setCaret" - @keyup="setCaret" v-model="newStatus.status" :placeholder="$t('post_status.default')" rows="1" class="form-control" - @keydown="onKeydown" - @keydown.down="cycleForward" - @keydown.up="cycleBackward" - @keydown.shift.tab="cycleBackward" - @keydown.tab="cycleForward" - @keydown.enter="replaceCandidate" - @keydown.meta.enter="postStatus(newStatus)" - @keyup.ctrl.enter="postStatus(newStatus)" - @drop="fileDrop" - @dragover.prevent="fileDrag" - @input="resize" - @paste="paste" - :disabled="posting" - > - </textarea> - <div class="visibility-tray"> - <span class="text-format" v-if="formattingOptionsEnabled"> - <label for="post-content-type" class="select"> - <select id="post-content-type" v-model="newStatus.contentType" class="form-control"> - <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat"> - {{$t(`post_status.content_type["${postFormat}"]`)}} - </option> - </select> - <i class="icon-down-open"></i> - </label> - </span> - - <div v-if="scopeOptionsEnabled"> - <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i> - <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i> - <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i> - <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i> + <div + ref="root" + class="post-status-form" + > + <form + autocomplete="off" + @submit.prevent="postStatus(newStatus)" + > + <div class="form-group"> + <i18n + v-if="!$store.state.users.currentUser.locked && newStatus.visibility == 'private'" + path="post_status.account_not_locked_warning" + tag="p" + class="visibility-notice" + > + <router-link :to="{ name: 'user-settings' }"> + {{ $t('post_status.account_not_locked_warning_link') }} + </router-link> + </i18n> + <p + v-if="!hideScopeNotice && newStatus.visibility === 'public'" + class="visibility-notice notice-dismissible" + > + <span>{{ $t('post_status.scope_notice.public') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> + <p + v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" + class="visibility-notice notice-dismissible" + > + <span>{{ $t('post_status.scope_notice.unlisted') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> + <p + v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" + class="visibility-notice notice-dismissible" + > + <span>{{ $t('post_status.scope_notice.private') }}</span> + <a + class="button-icon dismiss" + @click.prevent="dismissScopeNotice()" + > + <i class="icon-cancel" /> + </a> + </p> + <p + v-else-if="newStatus.visibility === 'direct'" + class="visibility-notice" + > + <span v-if="safeDMEnabled">{{ $t('post_status.direct_warning_to_first_only') }}</span> + <span v-else>{{ $t('post_status.direct_warning_to_all') }}</span> + </p> + <EmojiInput + v-if="newStatus.spoilerText || alwaysShowSubject" + v-model="newStatus.spoilerText" + enable-emoji-picker + :suggest="emojiSuggestor" + class="form-control" + > + <input + + v-model="newStatus.spoilerText" + type="text" + :placeholder="$t('post_status.content_warning')" + class="form-post-subject" + > + </EmojiInput> + <EmojiInput + ref="emoji-input" + v-model="newStatus.status" + :suggest="emojiUserSuggestor" + class="form-control main-input" + enable-emoji-picker + hide-emoji-button + enable-sticker-picker + @input="onEmojiInputInput" + @sticker-uploaded="addMediaFile" + @sticker-upload-failed="uploadFailed" + > + <textarea + ref="textarea" + v-model="newStatus.status" + :placeholder="$t('post_status.default')" + rows="1" + :disabled="posting" + class="form-post-body" + @keydown.meta.enter="postStatus(newStatus)" + @keyup.ctrl.enter="postStatus(newStatus)" + @drop="fileDrop" + @dragover.prevent="fileDrag" + @input="resize" + @compositionupdate="resize" + @paste="paste" + /> + <p + v-if="hasStatusLengthLimit" + class="character-counter faint" + :class="{ error: isOverLengthLimit }" + > + {{ charactersLeft }} + </p> + </EmojiInput> + <div class="visibility-tray"> + <scope-selector + :show-all="showAllScopes" + :user-default="userDefaultScope" + :original-scope="copyMessageScope" + :initial-scope="newStatus.visibility" + :on-scope-change="changeVis" + /> + + <div + v-if="postFormats.length > 1" + class="text-format" + > + <label + for="post-content-type" + class="select" + > + <select + id="post-content-type" + v-model="newStatus.contentType" + class="form-control" + > + <option + v-for="postFormat in postFormats" + :key="postFormat" + :value="postFormat" + > + {{ $t(`post_status.content_type["${postFormat}"]`) }} + </option> + </select> + <i class="icon-down-open" /> + </label> + </div> + <div + v-if="postFormats.length === 1 && postFormats[0] !== 'text/plain'" + class="text-format" + > + <span class="only-format"> + {{ $t(`post_status.content_type["${postFormats[0]}"]`) }} + </span> + </div> </div> </div> - </div> - <div style="position:relative;" v-if="candidates"> - <div class="autocomplete-panel"> - <div v-for="candidate in candidates" @click="replace(candidate.utf || (candidate.screen_name + ' '))"> - <div class="autocomplete" :class="{ highlighted: candidate.highlighted }"> - <span v-if="candidate.img"><img :src="candidate.img"></img></span> - <span v-else>{{candidate.utf}}</span> - <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span> - </div> + <poll-form + v-if="pollsAvailable" + ref="pollForm" + :visible="pollFormVisible" + @update-poll="setPoll" + /> + <div class="form-bottom"> + <div class="form-bottom-left"> + <media-upload + ref="mediaUpload" + class="media-upload-icon" + :drop-files="dropFiles" + @uploading="disableSubmit" + @uploaded="addMediaFile" + @upload-failed="uploadFailed" + /> + <div + class="emoji-icon" + > + <i + :title="$t('emoji.add_emoji')" + class="icon-smile btn btn-default" + @click="showEmojiPicker" + /> + </div> + <div + v-if="pollsAvailable" + class="poll-icon" + :class="{ selected: pollFormVisible }" + > + <i + :title="$t('polls.add_poll')" + class="icon-chart-bar btn btn-default" + @click="togglePollForm" + /> </div> </div> + <button + v-if="posting" + disabled + class="btn btn-default" + > + {{ $t('post_status.posting') }} + </button> + <button + v-else-if="isOverLengthLimit" + disabled + class="btn btn-default" + > + {{ $t('general.submit') }} + </button> + <button + v-else + :disabled="submitDisabled" + type="submit" + class="btn btn-default" + > + {{ $t('general.submit') }} + </button> </div> - <div class='form-bottom'> - <media-upload ref="mediaUpload" @uploading="disableSubmit" @uploaded="addMediaFile" @upload-failed="uploadFailed" :drop-files="dropFiles"></media-upload> - - <p v-if="isOverLengthLimit" class="error">{{ charactersLeft }}</p> - <p class="faint" v-else-if="hasStatusLengthLimit">{{ charactersLeft }}</p> - - <button v-if="posting" disabled class="btn btn-default">{{$t('post_status.posting')}}</button> - <button v-else-if="isOverLengthLimit" disabled class="btn btn-default">{{$t('general.submit')}}</button> - <button v-else :disabled="submitDisabled" type="submit" class="btn btn-default">{{$t('general.submit')}}</button> - </div> - <div class='alert error' v-if="error"> + <div + v-if="error" + class="alert error" + > Error: {{ error }} - <i class="button-icon icon-cancel" @click="clearError"></i> + <i + class="button-icon icon-cancel" + @click="clearError" + /> </div> <div class="attachments"> - <div class="media-upload-wrapper" v-for="file in newStatus.files"> - <i class="fa button-icon icon-cancel" @click="removeMediaFile(file)"></i> + <div + v-for="file in newStatus.files" + :key="file.url" + class="media-upload-wrapper" + > + <i + class="fa button-icon icon-cancel" + @click="removeMediaFile(file)" + /> <div class="media-upload-container attachment"> - <img class="thumbnail media-upload" :src="file.image" v-if="type(file) === 'image'"></img> - <video v-if="type(file) === 'video'" :src="file.image" controls></video> - <audio v-if="type(file) === 'audio'" :src="file.image" controls></audio> - <a v-if="type(file) === 'unknown'" :href="file.image">{{file.url}}</a> + <img + v-if="type(file) === 'image'" + class="thumbnail media-upload" + :src="file.url" + > + <video + v-if="type(file) === 'video'" + :src="file.url" + controls + /> + <audio + v-if="type(file) === 'audio'" + :src="file.url" + controls + /> + <a + v-if="type(file) === 'unknown'" + :href="file.url" + >{{ file.url }}</a> </div> </div> </div> - <div class="upload_settings" v-if="newStatus.files.length > 0"> - <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw"> - <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label> + <div + v-if="newStatus.files.length > 0" + class="upload_settings" + > + <input + id="filesSensitive" + v-model="newStatus.nsfw" + type="checkbox" + > + <label for="filesSensitive">{{ $t('post_status.attachments_sensitive') }}</label> </div> </form> </div> @@ -125,13 +298,14 @@ .visibility-tray { display: flex; justify-content: space-between; - flex-direction: row-reverse; + padding-top: 5px; } } -.post-status-form, .login { +.post-status-form { .form-bottom { display: flex; + justify-content: space-between; padding: 0.5em; height: 32px; @@ -146,6 +320,59 @@ } } + .form-bottom-left { + display: flex; + flex: 1; + padding-right: 7px; + margin-right: 7px; + max-width: 10em; + } + + .text-format { + .only-format { + color: $fallback--faint; + color: var(--faint, $fallback--faint); + } + } + + .media-upload-icon, .poll-icon, .emoji-icon { + font-size: 26px; + flex: 1; + + i { + display: block; + width: 100%; + } + + &.selected, &:hover { + // needs to be specific to override icon default color + i, label { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } + } + + // Order is not necessary but a good indicator + .media-upload-icon { + order: 1; + text-align: left; + } + + .emoji-icon { + order: 2; + text-align: center; + } + + .poll-icon { + order: 3; + text-align: right; + } + + .icon-chart-bar { + cursor: pointer; + } + .error { text-align: center; } @@ -171,6 +398,13 @@ } } + .status-input-wrapper { + display: flex; + position: relative; + width: 100%; + flex-direction: column; + } + .attachments { padding: 0 0.5em; @@ -206,7 +440,6 @@ } } - .btn { cursor: pointer; } @@ -224,7 +457,7 @@ .form-group { display: flex; flex-direction: column; - padding: 0.3em 0.5em 0.6em; + padding: 0.25em 0.5em 0.5em; line-height:24px; } @@ -236,17 +469,32 @@ min-height: 1px; } - form textarea.form-control { - line-height:16px; + .form-post-body { + height: 16px; // Only affects the empty-height + line-height: 16px; resize: none; overflow: hidden; transition: min-height 200ms 100ms; + padding-bottom: 1.75em; min-height: 1px; box-sizing: content-box; } - form textarea.form-control:focus { - min-height: 48px; + .main-input { + position: relative; + } + + .character-counter { + position: absolute; + bottom: 0; + right: 0; + padding: 0; + margin: 0 0.5em; + + &.error { + color: $fallback--cRed; + color: var(--cRed, $fallback--cRed); + } } .btn { @@ -261,52 +509,5 @@ cursor: pointer; z-index: 4; } - - .autocomplete-panel { - margin: 0 0.5em 0 0.5em; - border-radius: $fallback--tooltipRadius; - border-radius: var(--tooltipRadius, $fallback--tooltipRadius); - position: absolute; - z-index: 1; - box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5); - // this doesn't match original but i don't care, making it uniform. - box-shadow: var(--popupShadow); - min-width: 75%; - background: $fallback--bg; - background: var(--bg, $fallback--bg); - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - } - - .autocomplete { - cursor: pointer; - padding: 0.2em 0.4em 0.2em 0.4em; - border-bottom: 1px solid rgba(0, 0, 0, 0.4); - display: flex; - - img { - width: 24px; - height: 24px; - border-radius: $fallback--avatarRadius; - border-radius: var(--avatarRadius, $fallback--avatarRadius); - object-fit: contain; - } - - span { - line-height: 24px; - margin: 0 0.1em 0 0.2em; - } - - small { - margin-left: .5em; - color: $fallback--faint; - color: var(--faint, $fallback--faint); - } - - &.highlighted { - background-color: $fallback--fg; - background-color: var(--lightBg, $fallback--fg); - } - } } </style> diff --git a/src/components/post_status_modal/post_status_modal.js b/src/components/post_status_modal/post_status_modal.js new file mode 100644 index 00000000..38258296 --- /dev/null +++ b/src/components/post_status_modal/post_status_modal.js @@ -0,0 +1,49 @@ +import PostStatusForm from '../post_status_form/post_status_form.vue' +import get from 'lodash/get' + +const PostStatusModal = { + components: { + PostStatusForm + }, + data () { + return { + resettingForm: false + } + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + modalActivated () { + return this.$store.state.postStatus.modalActivated + }, + isFormVisible () { + return this.isLoggedIn && !this.resettingForm && this.modalActivated + }, + params () { + return this.$store.state.postStatus.params || {} + } + }, + watch: { + params (newVal, oldVal) { + if (get(newVal, 'repliedUser.id') !== get(oldVal, 'repliedUser.id')) { + this.resettingForm = true + this.$nextTick(() => { + this.resettingForm = false + }) + } + }, + isFormVisible (val) { + if (val) { + this.$nextTick(() => this.$el && this.$el.querySelector('textarea').focus()) + } + } + }, + methods: { + closeModal () { + this.$store.dispatch('closePostStatusModal') + } + } +} + +export default PostStatusModal diff --git a/src/components/post_status_modal/post_status_modal.vue b/src/components/post_status_modal/post_status_modal.vue new file mode 100644 index 00000000..d3a82389 --- /dev/null +++ b/src/components/post_status_modal/post_status_modal.vue @@ -0,0 +1,44 @@ +<template> + <div + v-if="isLoggedIn && !resettingForm" + v-show="modalActivated" + class="post-form-modal-view modal-view" + @click="closeModal" + > + <div + class="post-form-modal-panel panel" + @click.stop="" + > + <div class="panel-heading"> + {{ $t('post_status.new_status') }} + </div> + <PostStatusForm + class="panel-body" + v-bind="params" + @posted="closeModal" + /> + </div> + </div> +</template> + +<script src="./post_status_modal.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.post-form-modal-view { + align-items: flex-start; +} + +.post-form-modal-panel { + flex-shrink: 0; + margin-top: 25%; + margin-bottom: 2em; + width: 100%; + max-width: 700px; + + @media (orientation: landscape) { + margin-top: 8%; + } +} +</style> diff --git a/src/components/progress_button/progress_button.vue b/src/components/progress_button/progress_button.vue new file mode 100644 index 00000000..283a51af --- /dev/null +++ b/src/components/progress_button/progress_button.vue @@ -0,0 +1,38 @@ +<template> + <button + :disabled="progress || disabled" + @click="onClick" + > + <template v-if="progress && $slots.progress"> + <slot name="progress" /> + </template> + <template v-else> + <slot /> + </template> + </button> +</template> + +<script> +export default { + props: { + disabled: { + type: Boolean + }, + click: { // click event handler. Must return a promise + type: Function, + default: () => Promise.resolve() + } + }, + data () { + return { + progress: false + } + }, + methods: { + onClick () { + this.progress = true + this.click().then(() => { this.progress = false }) + } + } +} +</script> diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.js b/src/components/public_and_external_timeline/public_and_external_timeline.js index d45677e0..f614c13b 100644 --- a/src/components/public_and_external_timeline/public_and_external_timeline.js +++ b/src/components/public_and_external_timeline/public_and_external_timeline.js @@ -7,7 +7,7 @@ const PublicAndExternalTimeline = { timeline () { return this.$store.state.statuses.timelines.publicAndExternal } }, created () { - this.$store.dispatch('startFetching', { timeline: 'publicAndExternal' }) + this.$store.dispatch('startFetchingTimeline', { timeline: 'publicAndExternal' }) }, destroyed () { this.$store.dispatch('stopFetching', 'publicAndExternal') diff --git a/src/components/public_and_external_timeline/public_and_external_timeline.vue b/src/components/public_and_external_timeline/public_and_external_timeline.vue index 6be9f955..fcd915ac 100644 --- a/src/components/public_and_external_timeline/public_and_external_timeline.vue +++ b/src/components/public_and_external_timeline/public_and_external_timeline.vue @@ -1,5 +1,9 @@ <template> - <Timeline :title="$t('nav.twkn')" v-bind:timeline="timeline" v-bind:timeline-name="'publicAndExternal'"/> + <Timeline + :title="$t('nav.twkn')" + :timeline="timeline" + :timeline-name="'publicAndExternal'" + /> </template> <script src="./public_and_external_timeline.js"></script> diff --git a/src/components/public_timeline/public_timeline.js b/src/components/public_timeline/public_timeline.js index 64c951ac..8976a99c 100644 --- a/src/components/public_timeline/public_timeline.js +++ b/src/components/public_timeline/public_timeline.js @@ -7,7 +7,7 @@ const PublicTimeline = { timeline () { return this.$store.state.statuses.timelines.public } }, created () { - this.$store.dispatch('startFetching', { timeline: 'public' }) + this.$store.dispatch('startFetchingTimeline', { timeline: 'public' }) }, destroyed () { this.$store.dispatch('stopFetching', 'public') diff --git a/src/components/public_timeline/public_timeline.vue b/src/components/public_timeline/public_timeline.vue index 85d42cca..5720068d 100644 --- a/src/components/public_timeline/public_timeline.vue +++ b/src/components/public_timeline/public_timeline.vue @@ -1,5 +1,9 @@ <template> - <Timeline :title="$t('nav.public_tl')" v-bind:timeline="timeline" v-bind:timeline-name="'public'"/> + <Timeline + :title="$t('nav.public_tl')" + :timeline="timeline" + :timeline-name="'public'" + /> </template> <script src="./public_timeline.js"></script> diff --git a/src/components/range_input/range_input.vue b/src/components/range_input/range_input.vue index 3e50664b..aaa2ed26 100644 --- a/src/components/range_input/range_input.vue +++ b/src/components/range_input/range_input.vue @@ -1,37 +1,50 @@ <template> -<div class="range-control style-control" :class="{ disabled: !present || disabled }"> - <label :for="name" class="label"> - {{label}} - </label> - <input - v-if="typeof fallback !== 'undefined'" - class="opt exclude-disabled" - :id="name + '-o'" - type="checkbox" - :checked="present" - @input="$emit('input', !present ? fallback : undefined)"> - <label v-if="typeof fallback !== 'undefined'" class="opt-l" :for="name + '-o'"></label> - <input - :id="name" - class="input-number" - type="range" - :value="value || fallback" - :disabled="!present || disabled" - @input="$emit('input', $event.target.value)" - :max="max || hardMax || 100" - :min="min || hardMin || 0" - :step="step || 1"> - <input - :id="name" - class="input-number" - type="number" - :value="value || fallback" - :disabled="!present || disabled" - @input="$emit('input', $event.target.value)" - :max="hardMax" - :min="hardMin" - :step="step || 1"> -</div> + <div + class="range-control style-control" + :class="{ disabled: !present || disabled }" + > + <label + :for="name" + class="label" + > + {{ label }} + </label> + <input + v-if="typeof fallback !== 'undefined'" + :id="name + '-o'" + class="opt exclude-disabled" + type="checkbox" + :checked="present" + @input="$emit('input', !present ? fallback : undefined)" + > + <label + v-if="typeof fallback !== 'undefined'" + class="opt-l" + :for="name + '-o'" + /> + <input + :id="name" + class="input-number" + type="range" + :value="value || fallback" + :disabled="!present || disabled" + :max="max || hardMax || 100" + :min="min || hardMin || 0" + :step="step || 1" + @input="$emit('input', $event.target.value)" + > + <input + :id="name" + class="input-number" + type="number" + :value="value || fallback" + :disabled="!present || disabled" + :max="hardMax" + :min="hardMin" + :step="step || 1" + @input="$emit('input', $event.target.value)" + > + </div> </template> <script> diff --git a/src/components/registration/registration.js b/src/components/registration/registration.js index ab6cd64d..57f3caf0 100644 --- a/src/components/registration/registration.js +++ b/src/components/registration/registration.js @@ -28,13 +28,16 @@ const registration = { }, created () { if ((!this.registrationOpen && !this.token) || this.signedIn) { - this.$router.push({name: 'root'}) + this.$router.push({ name: 'root' }) } this.setCaptcha() }, computed: { token () { return this.$route.params.token }, + bioPlaceholder () { + return this.$t('registration.bio_placeholder').replace(/\s*\n\s*/g, ' \n') + }, ...mapState({ registrationOpen: (state) => state.instance.registrationOpen, signedIn: (state) => !!state.users.currentUser, @@ -58,7 +61,7 @@ const registration = { if (!this.$v.$invalid) { try { await this.signUp(this.user) - this.$router.push({name: 'friends'}) + this.$router.push({ name: 'friends' }) } catch (error) { console.warn('Registration failed: ' + error) } diff --git a/src/components/registration/registration.vue b/src/components/registration/registration.vue index e22b308d..5bb06a4f 100644 --- a/src/components/registration/registration.vue +++ b/src/components/registration/registration.vue @@ -1,109 +1,236 @@ <template> <div class="settings panel panel-default"> <div class="panel-heading"> - {{$t('registration.registration')}} + {{ $t('registration.registration') }} </div> <div class="panel-body"> - <form v-on:submit.prevent='submit(user)' class='registration-form'> - <div class='container'> - <div class='text-fields'> - <div class='form-group' :class="{ 'form-group--error': $v.user.username.$error }"> - <label class='form--label' for='sign-up-username'>{{$t('login.username')}}</label> - <input :disabled="isPending" v-model.trim='$v.user.username.$model' class='form-control' id='sign-up-username' :placeholder="$t('registration.username_placeholder')"> + <form + class="registration-form" + @submit.prevent="submit(user)" + > + <div class="container"> + <div class="text-fields"> + <div + class="form-group" + :class="{ 'form-group--error': $v.user.username.$error }" + > + <label + class="form--label" + for="sign-up-username" + >{{ $t('login.username') }}</label> + <input + id="sign-up-username" + v-model.trim="$v.user.username.$model" + :disabled="isPending" + class="form-control" + :placeholder="$t('registration.username_placeholder')" + > </div> - <div class="form-error" v-if="$v.user.username.$dirty"> + <div + v-if="$v.user.username.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.username.required"> - <span>{{$t('registration.validations.username_required')}}</span> + <span>{{ $t('registration.validations.username_required') }}</span> </li> </ul> </div> - <div class='form-group' :class="{ 'form-group--error': $v.user.fullname.$error }"> - <label class='form--label' for='sign-up-fullname'>{{$t('registration.fullname')}}</label> - <input :disabled="isPending" v-model.trim='$v.user.fullname.$model' class='form-control' id='sign-up-fullname' :placeholder="$t('registration.fullname_placeholder')"> + <div + class="form-group" + :class="{ 'form-group--error': $v.user.fullname.$error }" + > + <label + class="form--label" + for="sign-up-fullname" + >{{ $t('registration.fullname') }}</label> + <input + id="sign-up-fullname" + v-model.trim="$v.user.fullname.$model" + :disabled="isPending" + class="form-control" + :placeholder="$t('registration.fullname_placeholder')" + > </div> - <div class="form-error" v-if="$v.user.fullname.$dirty"> + <div + v-if="$v.user.fullname.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.fullname.required"> - <span>{{$t('registration.validations.fullname_required')}}</span> + <span>{{ $t('registration.validations.fullname_required') }}</span> </li> </ul> </div> - <div class='form-group' :class="{ 'form-group--error': $v.user.email.$error }"> - <label class='form--label' for='email'>{{$t('registration.email')}}</label> - <input :disabled="isPending" v-model='$v.user.email.$model' class='form-control' id='email' type="email"> + <div + class="form-group" + :class="{ 'form-group--error': $v.user.email.$error }" + > + <label + class="form--label" + for="email" + >{{ $t('registration.email') }}</label> + <input + id="email" + v-model="$v.user.email.$model" + :disabled="isPending" + class="form-control" + type="email" + > </div> - <div class="form-error" v-if="$v.user.email.$dirty"> + <div + v-if="$v.user.email.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.email.required"> - <span>{{$t('registration.validations.email_required')}}</span> + <span>{{ $t('registration.validations.email_required') }}</span> </li> </ul> </div> - <div class='form-group'> - <label class='form--label' for='bio'>{{$t('registration.bio')}} ({{$t('general.optional')}})</label> - <textarea :disabled="isPending" v-model='user.bio' class='form-control' id='bio' :placeholder="$t('registration.bio_placeholder')"></textarea> + <div class="form-group"> + <label + class="form--label" + for="bio" + >{{ $t('registration.bio') }} ({{ $t('general.optional') }})</label> + <textarea + id="bio" + v-model="user.bio" + :disabled="isPending" + class="form-control" + :placeholder="bioPlaceholder" + /> </div> - <div class='form-group' :class="{ 'form-group--error': $v.user.password.$error }"> - <label class='form--label' for='sign-up-password'>{{$t('login.password')}}</label> - <input :disabled="isPending" v-model='user.password' class='form-control' id='sign-up-password' type='password'> + <div + class="form-group" + :class="{ 'form-group--error': $v.user.password.$error }" + > + <label + class="form--label" + for="sign-up-password" + >{{ $t('login.password') }}</label> + <input + id="sign-up-password" + v-model="user.password" + :disabled="isPending" + class="form-control" + type="password" + > </div> - <div class="form-error" v-if="$v.user.password.$dirty"> + <div + v-if="$v.user.password.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.password.required"> - <span>{{$t('registration.validations.password_required')}}</span> + <span>{{ $t('registration.validations.password_required') }}</span> </li> </ul> </div> - <div class='form-group' :class="{ 'form-group--error': $v.user.confirm.$error }"> - <label class='form--label' for='sign-up-password-confirmation'>{{$t('registration.password_confirm')}}</label> - <input :disabled="isPending" v-model='user.confirm' class='form-control' id='sign-up-password-confirmation' type='password'> + <div + class="form-group" + :class="{ 'form-group--error': $v.user.confirm.$error }" + > + <label + class="form--label" + for="sign-up-password-confirmation" + >{{ $t('registration.password_confirm') }}</label> + <input + id="sign-up-password-confirmation" + v-model="user.confirm" + :disabled="isPending" + class="form-control" + type="password" + > </div> - <div class="form-error" v-if="$v.user.confirm.$dirty"> + <div + v-if="$v.user.confirm.$dirty" + class="form-error" + > <ul> <li v-if="!$v.user.confirm.required"> - <span>{{$t('registration.validations.password_confirmation_required')}}</span> + <span>{{ $t('registration.validations.password_confirmation_required') }}</span> </li> <li v-if="!$v.user.confirm.sameAsPassword"> - <span>{{$t('registration.validations.password_confirmation_match')}}</span> + <span>{{ $t('registration.validations.password_confirmation_match') }}</span> </li> </ul> </div> - <div class="form-group" id="captcha-group" v-if="captcha.type != 'none'"> - <label class='form--label' for='captcha-label'>{{$t('captcha')}}</label> + <div + v-if="captcha.type != 'none'" + id="captcha-group" + class="form-group" + > + <label + class="form--label" + for="captcha-label" + >{{ $t('captcha') }}</label> <template v-if="captcha.type == 'kocaptcha'"> - <img v-bind:src="captcha.url" v-on:click="setCaptcha"> + <img + :src="captcha.url" + @click="setCaptcha" + > - <sub>{{$t('registration.new_captcha')}}</sub> + <sub>{{ $t('registration.new_captcha') }}</sub> - <input :disabled="isPending" - v-model='captcha.solution' - class='form-control' id='captcha-answer' type='text' autocomplete="off"> + <input + id="captcha-answer" + v-model="captcha.solution" + :disabled="isPending" + class="form-control" + type="text" + autocomplete="off" + > </template> </div> - <div class='form-group' v-if='token' > - <label for='token'>{{$t('registration.token')}}</label> - <input disabled='true' v-model='token' class='form-control' id='token' type='text'> + <div + v-if="token" + class="form-group" + > + <label for="token">{{ $t('registration.token') }}</label> + <input + id="token" + v-model="token" + disabled="true" + class="form-control" + type="text" + > </div> - <div class='form-group'> - <button :disabled="isPending" type='submit' class='btn btn-default'>{{$t('general.submit')}}</button> + <div class="form-group"> + <button + :disabled="isPending" + type="submit" + class="btn btn-default" + > + {{ $t('general.submit') }} + </button> </div> </div> - <div class='terms-of-service' v-html="termsOfService"> - </div> + <!-- eslint-disable vue/no-v-html --> + <div + class="terms-of-service" + v-html="termsOfService" + /> + <!-- eslint-enable vue/no-v-html --> </div> - <div v-if="serverValidationErrors.length" class='form-group'> - <div class='alert error'> - <span v-for="error in serverValidationErrors">{{error}}</span> + <div + v-if="serverValidationErrors.length" + class="form-group" + > + <div class="alert error"> + <span + v-for="error in serverValidationErrors" + :key="error" + >{{ error }}</span> </div> </div> </form> @@ -141,6 +268,7 @@ $validations-cRed: #f04124; textarea { min-height: 100px; + resize: vertical; } .form-group { diff --git a/src/components/remote_follow/remote_follow.js b/src/components/remote_follow/remote_follow.js new file mode 100644 index 00000000..461d58c9 --- /dev/null +++ b/src/components/remote_follow/remote_follow.js @@ -0,0 +1,10 @@ +export default { + props: [ 'user' ], + computed: { + subscribeUrl () { + // eslint-disable-next-line no-undef + const serverUrl = new URL(this.user.statusnet_profile_url) + return `${serverUrl.protocol}//${serverUrl.host}/main/ostatus` + } + } +} diff --git a/src/components/remote_follow/remote_follow.vue b/src/components/remote_follow/remote_follow.vue new file mode 100644 index 00000000..cb1c2a1b --- /dev/null +++ b/src/components/remote_follow/remote_follow.vue @@ -0,0 +1,38 @@ +<template> + <div class="remote-follow"> + <form + method="POST" + :action="subscribeUrl" + > + <input + type="hidden" + name="nickname" + :value="user.screen_name" + > + <input + type="hidden" + name="profile" + value="" + > + <button + click="submit" + class="remote-button" + > + {{ $t('user_card.remote_follow') }} + </button> + </form> + </div> +</template> + +<script src="./remote_follow.js"></script> + +<style lang="scss"> +.remote-follow { + max-width: 220px; + + .remote-button { + width: 100%; + min-height: 28px; + } +} +</style> diff --git a/src/components/retweet_button/retweet_button.js b/src/components/retweet_button/retweet_button.js index eb4e4b41..fb543a9c 100644 --- a/src/components/retweet_button/retweet_button.js +++ b/src/components/retweet_button/retweet_button.js @@ -11,9 +11,9 @@ const RetweetButton = { methods: { retweet () { if (!this.status.repeated) { - this.$store.dispatch('retweet', {id: this.status.id}) + this.$store.dispatch('retweet', { id: this.status.id }) } else { - this.$store.dispatch('unretweet', {id: this.status.id}) + this.$store.dispatch('unretweet', { id: this.status.id }) } this.animated = true setTimeout(() => { diff --git a/src/components/retweet_button/retweet_button.vue b/src/components/retweet_button/retweet_button.vue index 6370f9dc..d58a7f8c 100644 --- a/src/components/retweet_button/retweet_button.vue +++ b/src/components/retweet_button/retweet_button.vue @@ -1,16 +1,29 @@ <template> <div v-if="loggedIn"> <template v-if="visibility !== 'private' && visibility !== 'direct'"> - <i :class='classes' class='button-icon retweet-button icon-retweet rt-active' v-on:click.prevent='retweet()' :title="$t('tool_tip.repeat')"></i> - <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span> + <i + :class="classes" + class="button-icon retweet-button icon-retweet rt-active" + :title="$t('tool_tip.repeat')" + @click.prevent="retweet()" + /> + <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span> </template> <template v-else> - <i :class='classes' class='button-icon icon-lock' :title="$t('timeline.no_retweet_hint')"></i> + <i + :class="classes" + class="button-icon icon-lock" + :title="$t('timeline.no_retweet_hint')" + /> </template> </div> <div v-else-if="!loggedIn"> - <i :class='classes' class='button-icon icon-retweet' :title="$t('tool_tip.repeat')"></i> - <span v-if='!hidePostStatsLocal && status.repeat_num > 0'>{{status.repeat_num}}</span> + <i + :class="classes" + class="button-icon icon-retweet" + :title="$t('tool_tip.repeat')" + /> + <span v-if="!hidePostStatsLocal && status.repeat_num > 0">{{ status.repeat_num }}</span> </div> </template> diff --git a/src/components/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js new file mode 100644 index 00000000..e9ccdefc --- /dev/null +++ b/src/components/scope_selector/scope_selector.js @@ -0,0 +1,54 @@ +const ScopeSelector = { + props: [ + 'showAll', + 'userDefault', + 'originalScope', + 'initialScope', + 'onScopeChange' + ], + data () { + return { + currentScope: this.initialScope + } + }, + computed: { + showNothing () { + return !this.showPublic && !this.showUnlisted && !this.showPrivate && !this.showDirect + }, + showPublic () { + return this.originalScope !== 'direct' && this.shouldShow('public') + }, + showUnlisted () { + return this.originalScope !== 'direct' && this.shouldShow('unlisted') + }, + showPrivate () { + return this.originalScope !== 'direct' && this.shouldShow('private') + }, + showDirect () { + return this.shouldShow('direct') + }, + css () { + return { + public: { selected: this.currentScope === 'public' }, + unlisted: { selected: this.currentScope === 'unlisted' }, + private: { selected: this.currentScope === 'private' }, + direct: { selected: this.currentScope === 'direct' } + } + } + }, + methods: { + shouldShow (scope) { + return this.showAll || + this.currentScope === scope || + this.originalScope === scope || + this.userDefault === scope || + scope === 'direct' + }, + changeVis (scope) { + this.currentScope = scope + this.onScopeChange && this.onScopeChange(scope) + } + } +} + +export default ScopeSelector diff --git a/src/components/scope_selector/scope_selector.vue b/src/components/scope_selector/scope_selector.vue new file mode 100644 index 00000000..291236f2 --- /dev/null +++ b/src/components/scope_selector/scope_selector.vue @@ -0,0 +1,53 @@ +<template> + <div + v-if="!showNothing" + class="scope-selector" + > + <i + v-if="showDirect" + class="icon-mail-alt" + :class="css.direct" + :title="$t('post_status.scope.direct')" + @click="changeVis('direct')" + /> + <i + v-if="showPrivate" + class="icon-lock" + :class="css.private" + :title="$t('post_status.scope.private')" + @click="changeVis('private')" + /> + <i + v-if="showUnlisted" + class="icon-lock-open-alt" + :class="css.unlisted" + :title="$t('post_status.scope.unlisted')" + @click="changeVis('unlisted')" + /> + <i + v-if="showPublic" + class="icon-globe" + :class="css.public" + :title="$t('post_status.scope.public')" + @click="changeVis('public')" + /> + </div> +</template> + +<script src="./scope_selector.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.scope-selector { + i { + font-size: 1.2em; + cursor: pointer; + + &.selected { + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } + } +} +</style> diff --git a/src/components/search/search.js b/src/components/search/search.js new file mode 100644 index 00000000..8e903052 --- /dev/null +++ b/src/components/search/search.js @@ -0,0 +1,98 @@ +import FollowCard from '../follow_card/follow_card.vue' +import Conversation from '../conversation/conversation.vue' +import Status from '../status/status.vue' +import map from 'lodash/map' + +const Search = { + components: { + FollowCard, + Conversation, + Status + }, + props: [ + 'query' + ], + data () { + return { + loaded: false, + loading: false, + searchTerm: this.query || '', + userIds: [], + statuses: [], + hashtags: [], + currenResultTab: 'statuses' + } + }, + computed: { + users () { + return this.userIds.map(userId => this.$store.getters.findUser(userId)) + }, + visibleStatuses () { + const allStatusesObject = this.$store.state.statuses.allStatusesObject + + return this.statuses.filter(status => + allStatusesObject[status.id] && !allStatusesObject[status.id].deleted + ) + } + }, + mounted () { + this.search(this.query) + }, + watch: { + query (newValue) { + this.searchTerm = newValue + this.search(newValue) + } + }, + methods: { + newQuery (query) { + this.$router.push({ name: 'search', query: { query } }) + this.$refs.searchInput.focus() + }, + search (query) { + if (!query) { + this.loading = false + return + } + + this.loading = true + this.userIds = [] + this.statuses = [] + this.hashtags = [] + this.$refs.searchInput.blur() + + this.$store.dispatch('search', { q: query, resolve: true }) + .then(data => { + this.loading = false + this.userIds = map(data.accounts, 'id') + this.statuses = data.statuses + this.hashtags = data.hashtags + this.currenResultTab = this.getActiveTab() + this.loaded = true + }) + }, + resultCount (tabName) { + const length = this[tabName].length + return length === 0 ? '' : ` (${length})` + }, + onResultTabSwitch (key) { + this.currenResultTab = key + }, + getActiveTab () { + if (this.visibleStatuses.length > 0) { + return 'statuses' + } else if (this.users.length > 0) { + return 'people' + } else if (this.hashtags.length > 0) { + return 'hashtags' + } + + return 'statuses' + }, + lastHistoryRecord (hashtag) { + return hashtag.history && hashtag.history[0] + } + } +} + +export default Search diff --git a/src/components/search/search.vue b/src/components/search/search.vue new file mode 100644 index 00000000..746bbaa2 --- /dev/null +++ b/src/components/search/search.vue @@ -0,0 +1,208 @@ +<template> + <div class="panel panel-default"> + <div class="panel-heading"> + <div class="title"> + {{ $t('nav.search') }} + </div> + </div> + <div class="search-input-container"> + <input + ref="searchInput" + v-model="searchTerm" + class="search-input" + :placeholder="$t('nav.search')" + @keyup.enter="newQuery(searchTerm)" + > + <button + class="btn search-button" + @click="newQuery(searchTerm)" + > + <i class="icon-search" /> + </button> + </div> + <div + v-if="loading" + class="text-center loading-icon" + > + <i class="icon-spin3 animate-spin" /> + </div> + <div v-else-if="loaded"> + <div class="search-nav-heading"> + <tab-switcher + ref="tabSwitcher" + :on-switch="onResultTabSwitch" + :active-tab="currenResultTab" + > + <span + key="statuses" + :label="$t('user_card.statuses') + resultCount('visibleStatuses')" + /> + <span + key="people" + :label="$t('search.people') + resultCount('users')" + /> + <span + key="hashtags" + :label="$t('search.hashtags') + resultCount('hashtags')" + /> + </tab-switcher> + </div> + </div> + <div class="panel-body"> + <div v-if="currenResultTab === 'statuses'"> + <div + v-if="visibleStatuses.length === 0 && !loading && loaded" + class="search-result-heading" + > + <h4>{{ $t('search.no_results') }}</h4> + </div> + <Status + v-for="status in visibleStatuses" + :key="status.id" + :collapsable="false" + :expandable="false" + :compact="false" + class="search-result" + :statusoid="status" + :no-heading="false" + /> + </div> + <div v-else-if="currenResultTab === 'people'"> + <div + v-if="users.length === 0 && !loading && loaded" + class="search-result-heading" + > + <h4>{{ $t('search.no_results') }}</h4> + </div> + <FollowCard + v-for="user in users" + :key="user.id" + :user="user" + class="list-item search-result" + /> + </div> + <div v-else-if="currenResultTab === 'hashtags'"> + <div + v-if="hashtags.length === 0 && !loading && loaded" + class="search-result-heading" + > + <h4>{{ $t('search.no_results') }}</h4> + </div> + <div + v-for="hashtag in hashtags" + :key="hashtag.url" + class="status trend search-result" + > + <div class="hashtag"> + <router-link :to="{ name: 'tag-timeline', params: { tag: hashtag.name } }"> + #{{ hashtag.name }} + </router-link> + <div v-if="lastHistoryRecord(hashtag)"> + <span v-if="lastHistoryRecord(hashtag).accounts == 1"> + {{ $t('search.person_talking', { count: lastHistoryRecord(hashtag).accounts }) }} + </span> + <span v-else> + {{ $t('search.people_talking', { count: lastHistoryRecord(hashtag).accounts }) }} + </span> + </div> + </div> + <div + v-if="lastHistoryRecord(hashtag)" + class="count" + > + {{ lastHistoryRecord(hashtag).uses }} + </div> + </div> + </div> + </div> + <div class="search-result-footer text-center panel-footer faint" /> + </div> +</template> + +<script src="./search.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.search-result-heading { + color: $fallback--faint; + color: var(--faint, $fallback--faint); + padding: 0.75rem; + text-align: center; +} + +@media all and (max-width: 800px) { + .search-nav-heading { + .tab-switcher .tabs .tab-wrapper { + display: block; + justify-content: center; + flex: 1 1 auto; + text-align: center; + } + } +} + +.search-result { + box-sizing: border-box; + border-bottom: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); +} + +.search-result-footer { + border-width: 1px 0 0 0; + border-style: solid; + border-color: var(--border, $fallback--border); + padding: 10px; + background-color: $fallback--fg; + background-color: var(--panel, $fallback--fg); +} + +.search-input-container { + padding: 0.8rem; + display: flex; + justify-content: center; + + .search-input { + width: 100%; + line-height: 1.125rem; + font-size: 1rem; + padding: 0.5rem; + box-sizing: border-box; + } + + .search-button { + margin-left: 0.5em; + } +} + +.loading-icon { + padding: 1em; +} + +.trend { + display: flex; + align-items: center; + + .hashtag { + flex: 1 1 auto; + color: $fallback--text; + color: var(--text, $fallback--text); + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + .count { + flex: 0 0 auto; + width: 2rem; + font-size: 1.5rem; + line-height: 2.25rem; + font-weight: 500; + text-align: center; + color: $fallback--text; + color: var(--text, $fallback--text); + } +} + +</style> diff --git a/src/components/search_bar/search_bar.js b/src/components/search_bar/search_bar.js new file mode 100644 index 00000000..d7d85676 --- /dev/null +++ b/src/components/search_bar/search_bar.js @@ -0,0 +1,32 @@ +const SearchBar = { + data: () => ({ + searchTerm: undefined, + hidden: true, + error: false, + loading: false + }), + watch: { + '$route': function (route) { + if (route.name === 'search') { + this.searchTerm = route.query.query + } + } + }, + methods: { + find (searchTerm) { + this.$router.push({ name: 'search', query: { query: searchTerm } }) + this.$refs.searchInput.focus() + }, + toggleHidden () { + this.hidden = !this.hidden + this.$emit('toggled', this.hidden) + this.$nextTick(() => { + if (!this.hidden) { + this.$refs.searchInput.focus() + } + }) + } + } +} + +export default SearchBar diff --git a/src/components/search_bar/search_bar.vue b/src/components/search_bar/search_bar.vue new file mode 100644 index 00000000..4d5a1aec --- /dev/null +++ b/src/components/search_bar/search_bar.vue @@ -0,0 +1,73 @@ +<template> + <div> + <div class="search-bar-container"> + <i + v-if="loading" + class="icon-spin4 finder-icon animate-spin-slow" + /> + <a + v-if="hidden" + href="#" + :title="$t('nav.search')" + ><i + class="button-icon icon-search" + @click.prevent.stop="toggleHidden" + /></a> + <template v-else> + <input + id="search-bar-input" + ref="searchInput" + v-model="searchTerm" + class="search-bar-input" + :placeholder="$t('nav.search')" + type="text" + @keyup.enter="find(searchTerm)" + > + <button + class="btn search-button" + @click="find(searchTerm)" + > + <i class="icon-search" /> + </button> + <i + class="button-icon icon-cancel" + @click.prevent.stop="toggleHidden" + /> + </template> + </div> + </div> +</template> + +<script src="./search_bar.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.search-bar-container { + max-width: 100%; + display: inline-flex; + align-items: baseline; + vertical-align: baseline; + justify-content: flex-end; + + .search-bar-input, + .search-button { + height: 29px; + } + + .search-bar-input { + // TODO: do this properly without a rough guesstimate of 2 icons + paddings + max-width: calc(100% - 30px - 30px - 20px); + } + + .search-button { + margin-left: .5em; + margin-right: .5em; + } + + .icon-cancel { + cursor: pointer; + } +} + +</style> diff --git a/src/components/selectable_list/selectable_list.js b/src/components/selectable_list/selectable_list.js new file mode 100644 index 00000000..10980d46 --- /dev/null +++ b/src/components/selectable_list/selectable_list.js @@ -0,0 +1,66 @@ +import List from '../list/list.vue' +import Checkbox from '../checkbox/checkbox.vue' + +const SelectableList = { + components: { + List, + Checkbox + }, + props: { + items: { + type: Array, + default: () => [] + }, + getKey: { + type: Function, + default: item => item.id + } + }, + data () { + return { + selected: [] + } + }, + computed: { + allKeys () { + return this.items.map(this.getKey) + }, + filteredSelected () { + return this.allKeys.filter(key => this.selected.indexOf(key) !== -1) + }, + allSelected () { + return this.filteredSelected.length === this.items.length + }, + noneSelected () { + return this.filteredSelected.length === 0 + }, + someSelected () { + return !this.allSelected && !this.noneSelected + } + }, + methods: { + isSelected (item) { + return this.filteredSelected.indexOf(this.getKey(item)) !== -1 + }, + toggle (checked, item) { + const key = this.getKey(item) + const oldChecked = this.isSelected(key) + if (checked !== oldChecked) { + if (checked) { + this.selected.push(key) + } else { + this.selected.splice(this.selected.indexOf(key), 1) + } + } + }, + toggleAll (value) { + if (value) { + this.selected = this.allKeys.slice(0) + } else { + this.selected = [] + } + } + } +} + +export default SelectableList diff --git a/src/components/selectable_list/selectable_list.vue b/src/components/selectable_list/selectable_list.vue new file mode 100644 index 00000000..d9ec7ece --- /dev/null +++ b/src/components/selectable_list/selectable_list.vue @@ -0,0 +1,92 @@ +<template> + <div class="selectable-list"> + <div + v-if="items.length > 0" + class="selectable-list-header" + > + <div class="selectable-list-checkbox-wrapper"> + <Checkbox + :checked="allSelected" + :indeterminate="someSelected" + @change="toggleAll" + > + {{ $t('selectable_list.select_all') }} + </Checkbox> + </div> + <div class="selectable-list-header-actions"> + <slot + name="header" + :selected="filteredSelected" + /> + </div> + </div> + <List + :items="items" + :get-key="getKey" + > + <template + slot="item" + slot-scope="{item}" + > + <div + class="selectable-list-item-inner" + :class="{ 'selectable-list-item-selected-inner': isSelected(item) }" + > + <div class="selectable-list-checkbox-wrapper"> + <Checkbox + :checked="isSelected(item)" + @change="checked => toggle(checked, item)" + /> + </div> + <slot + name="item" + :item="item" + /> + </div> + </template> + <template slot="empty"> + <slot name="empty" /> + </template> + </List> + </div> +</template> + +<script src="./selectable_list.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.selectable-list { + &-item-inner { + display: flex; + align-items: center; + + > * { + min-width: 0; + } + } + + &-item-selected-inner { + background-color: $fallback--lightBg; + background-color: var(--lightBg, $fallback--lightBg); + } + + &-header { + display: flex; + align-items: center; + padding: 0.6em 0; + border-bottom: 2px solid; + border-bottom-color: $fallback--border; + border-bottom-color: var(--border, $fallback--border); + + &-actions { + flex: 1; + } + } + + &-checkbox-wrapper { + padding: 0 10px; + flex: none; + } +} +</style> diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 979457a5..b6540d7e 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -1,8 +1,13 @@ /* eslint-env browser */ +import { filter, trim } from 'lodash' + import TabSwitcher from '../tab_switcher/tab_switcher.js' import StyleSwitcher from '../style_switcher/style_switcher.vue' import InterfaceLanguageSwitcher from '../interface_language_switcher/interface_language_switcher.vue' -import { filter, trim } from 'lodash' +import { extractCommit } from '../../services/version/version.service' + +const pleromaFeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma-fe/commit/' +const pleromaBeCommitUrl = 'https://git.pleroma.social/pleroma/pleroma/commit/' const settings = { data () { @@ -11,6 +16,7 @@ const settings = { return { hideAttachmentsLocal: user.hideAttachments, + padEmojiLocal: user.padEmoji, hideAttachmentsInConvLocal: user.hideAttachmentsInConv, maxThumbnails: user.maxThumbnails, hideNsfwLocal: user.hideNsfw, @@ -41,6 +47,12 @@ const settings = { streamingLocal: user.streaming, pauseOnUnfocusedLocal: user.pauseOnUnfocused, hoverPreviewLocal: user.hoverPreview, + autohideFloatingPostButtonLocal: user.autohideFloatingPostButton, + + hideMutedPostsLocal: typeof user.hideMutedPosts === 'undefined' + ? instance.hideMutedPosts + : user.hideMutedPosts, + hideMutedPostsDefault: this.$t('settings.values.' + instance.hideMutedPosts), collapseMessageWithSubjectLocal: typeof user.collapseMessageWithSubject === 'undefined' ? instance.collapseMessageWithSubject @@ -60,13 +72,18 @@ const settings = { alwaysShowSubjectInputLocal: typeof user.alwaysShowSubjectInput === 'undefined' ? instance.alwaysShowSubjectInput : user.alwaysShowSubjectInput, - alwaysShowSubjectInputDefault: instance.alwaysShowSubjectInput, + alwaysShowSubjectInputDefault: this.$t('settings.values.' + instance.alwaysShowSubjectInput), scopeCopyLocal: typeof user.scopeCopy === 'undefined' ? instance.scopeCopy : user.scopeCopy, scopeCopyDefault: this.$t('settings.values.' + instance.scopeCopy), + minimalScopesModeLocal: typeof user.minimalScopesMode === 'undefined' + ? instance.minimalScopesMode + : user.minimalScopesMode, + minimalScopesModeDefault: this.$t('settings.values.' + instance.minimalScopesMode), + stopGifs: user.stopGifs, webPushNotificationsLocal: user.webPushNotifications, loopVideoSilentOnlyLocal: user.loopVideosSilentOnly, @@ -78,7 +95,10 @@ const settings = { // Future spec, still not supported in Nightly 63 as of 08/2018 Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks'), playVideosInModal: user.playVideosInModal, - useContainFit: user.useContainFit + useContainFit: user.useContainFit, + + backendVersion: instance.backendVersion, + frontendVersion: instance.frontendVersion } }, components: { @@ -96,12 +116,21 @@ const settings = { postFormats () { return this.$store.state.instance.postFormats || [] }, - instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel } + instanceSpecificPanelPresent () { return this.$store.state.instance.showInstanceSpecificPanel }, + frontendVersionLink () { + return pleromaFeCommitUrl + this.frontendVersion + }, + backendVersionLink () { + return pleromaBeCommitUrl + extractCommit(this.backendVersion) + } }, watch: { hideAttachmentsLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachments', value }) }, + padEmojiLocal (value) { + this.$store.dispatch('setOption', { name: 'padEmoji', value }) + }, hideAttachmentsInConvLocal (value) { this.$store.dispatch('setOption', { name: 'hideAttachmentsInConv', value }) }, @@ -159,10 +188,16 @@ const settings = { hoverPreviewLocal (value) { this.$store.dispatch('setOption', { name: 'hoverPreview', value }) }, + autohideFloatingPostButtonLocal (value) { + this.$store.dispatch('setOption', { name: 'autohideFloatingPostButton', value }) + }, muteWordsString (value) { value = filter(value.split('\n'), (word) => trim(word).length > 0) this.$store.dispatch('setOption', { name: 'muteWords', value }) }, + hideMutedPostsLocal (value) { + this.$store.dispatch('setOption', { name: 'hideMutedPosts', value }) + }, collapseMessageWithSubjectLocal (value) { this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value }) }, @@ -178,6 +213,9 @@ const settings = { postContentTypeLocal (value) { this.$store.dispatch('setOption', { name: 'postContentType', value }) }, + minimalScopesModeLocal (value) { + this.$store.dispatch('setOption', { name: 'minimalScopesMode', value }) + }, stopGifs (value) { this.$store.dispatch('setOption', { name: 'stopGifs', value }) }, diff --git a/src/components/settings/settings.vue b/src/components/settings/settings.vue index d2346747..6d87a060 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -1,338 +1,491 @@ <template> -<div class="settings panel panel-default"> - <div class="panel-heading"> - <div class="title"> - {{$t('settings.settings')}} - </div> + <div class="settings panel panel-default"> + <div class="panel-heading"> + <div class="title"> + {{ $t('settings.settings') }} + </div> - <transition name="fade"> - <template v-if="currentSaveStateNotice"> - <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error"> - {{ $t('settings.saving_err') }} - </div> + <transition name="fade"> + <template v-if="currentSaveStateNotice"> + <div + v-if="currentSaveStateNotice.error" + class="alert error" + @click.prevent + > + {{ $t('settings.saving_err') }} + </div> - <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error"> - {{ $t('settings.saving_ok') }} - </div> - </template> - </transition> - </div> - <div class="panel-body"> -<keep-alive> - <tab-switcher> - <div :label="$t('settings.general')" > - <div class="setting-item"> - <h2>{{ $t('settings.interface') }}</h2> - <ul class="setting-list"> - <li> - <interface-language-switcher /> - </li> - <li v-if="instanceSpecificPanelPresent"> - <input type="checkbox" id="hideISP" v-model="hideISPLocal"> - <label for="hideISP">{{$t('settings.hide_isp')}}</label> - </li> - </ul> - </div> - <div class="setting-item"> - <h2>{{$t('nav.timeline')}}</h2> - <ul class="setting-list"> - <li> - <input type="checkbox" id="collapseMessageWithSubject" v-model="collapseMessageWithSubjectLocal"> - <label for="collapseMessageWithSubject"> - {{$t('settings.collapse_subject')}} {{$t('settings.instance_default', { value: collapseMessageWithSubjectDefault })}} - </label> - </li> - <li> - <input type="checkbox" id="streaming" v-model="streamingLocal"> - <label for="streaming">{{$t('settings.streaming')}}</label> - <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]"> + <div + v-if="!currentSaveStateNotice.error" + class="alert transparent" + @click.prevent + > + {{ $t('settings.saving_ok') }} + </div> + </template> + </transition> + </div> + <div class="panel-body"> + <keep-alive> + <tab-switcher> + <div :label="$t('settings.general')"> + <div class="setting-item"> + <h2>{{ $t('settings.interface') }}</h2> + <ul class="setting-list"> <li> - <input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal"> - <label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</label> + <interface-language-switcher /> + </li> + <li v-if="instanceSpecificPanelPresent"> + <input + id="hideISP" + v-model="hideISPLocal" + type="checkbox" + > + <label for="hideISP">{{ $t('settings.hide_isp') }}</label> </li> </ul> - </li> - <li> - <input type="checkbox" id="autoload" v-model="autoLoadLocal"> - <label for="autoload">{{$t('settings.autoload')}}</label> - </li> - <li> - <input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal"> - <label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label> - </li> - </ul> - </div> - - <div class="setting-item"> - <h2>{{$t('settings.composing')}}</h2> - <ul class="setting-list"> - <li> - <input type="checkbox" id="scopeCopy" v-model="scopeCopyLocal"> - <label for="scopeCopy"> - {{$t('settings.scope_copy')}} {{$t('settings.instance_default', { value: scopeCopyDefault })}} - </label> - </li> - <li> - <input type="checkbox" id="subjectHide" v-model="alwaysShowSubjectInputLocal"> - <label for="subjectHide"> - {{$t('settings.subject_input_always_show')}} {{$t('settings.instance_default', { value: alwaysShowSubjectInputDefault })}} - </label> - </li> - <li> - <div> - {{$t('settings.subject_line_behavior')}} - <label for="subjectLineBehavior" class="select"> - <select id="subjectLineBehavior" v-model="subjectLineBehaviorLocal"> - <option value="email"> - {{$t('settings.subject_line_email')}} - {{subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : ''}} - </option> - <option value="masto"> - {{$t('settings.subject_line_mastodon')}} - {{subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : ''}} - </option> - <option value="noop"> - {{$t('settings.subject_line_noop')}} - {{subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : ''}} - </option> - </select> - <i class="icon-down-open"/> - </label> - </div> - </li> - <li> - <div> - {{$t('settings.post_status_content_type')}} - <label for="postContentType" class="select"> - <select id="postContentType" v-model="postContentTypeLocal"> - <option v-for="postFormat in postFormats" :key="postFormat" :value="postFormat"> - {{$t(`post_status.content_type["${postFormat}"]`)}} - {{postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : ''}} - </option> - </select> - <i class="icon-down-open"/> - </label> - </div> - </li> - </ul> - </div> + </div> + <div class="setting-item"> + <h2>{{ $t('nav.timeline') }}</h2> + <ul class="setting-list"> + <li> + <input + id="hideMutedPosts" + v-model="hideMutedPostsLocal" + type="checkbox" + > + <label for="hideMutedPosts">{{ $t('settings.hide_muted_posts') }} {{ $t('settings.instance_default', { value: hideMutedPostsDefault }) }}</label> + </li> + <li> + <input + id="collapseMessageWithSubject" + v-model="collapseMessageWithSubjectLocal" + type="checkbox" + > + <label for="collapseMessageWithSubject">{{ $t('settings.collapse_subject') }} {{ $t('settings.instance_default', { value: collapseMessageWithSubjectDefault }) }}</label> + </li> + <li> + <input + id="streaming" + v-model="streamingLocal" + type="checkbox" + > + <label for="streaming">{{ $t('settings.streaming') }}</label> + <ul + class="setting-list suboptions" + :class="[{disabled: !streamingLocal}]" + > + <li> + <input + id="pauseOnUnfocused" + v-model="pauseOnUnfocusedLocal" + :disabled="!streamingLocal" + type="checkbox" + > + <label for="pauseOnUnfocused">{{ $t('settings.pause_on_unfocused') }}</label> + </li> + </ul> + </li> + <li> + <input + id="autoload" + v-model="autoLoadLocal" + type="checkbox" + > + <label for="autoload">{{ $t('settings.autoload') }}</label> + </li> + <li> + <input + id="hoverPreview" + v-model="hoverPreviewLocal" + type="checkbox" + > + <label for="hoverPreview">{{ $t('settings.reply_link_preview') }}</label> + </li> + </ul> + </div> - <div class="setting-item"> - <h2>{{$t('settings.attachments')}}</h2> - <ul class="setting-list"> - <li> - <input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal"> - <label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label> - </li> - <li> - <input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal"> - <label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label> - </li> - <li> - <label for="maxThumbnails">{{$t('settings.max_thumbnails')}}</label> - <input class="number-input" type="number" id="maxThumbnails" v-model.number="maxThumbnails" min="0" step="1"> - </li> - <li> - <input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal"> - <label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label> - </li> - <ul class="setting-list suboptions" > - <li> - <input :disabled="!hideNsfwLocal" type="checkbox" id="preloadImage" v-model="preloadImage"> - <label for="preloadImage">{{$t('settings.preload_images')}}</label> - </li> - <li> - <input :disabled="!hideNsfwLocal" type="checkbox" id="useOneClickNsfw" v-model="useOneClickNsfw"> - <label for="useOneClickNsfw">{{$t('settings.use_one_click_nsfw')}}</label> - </li> - </ul> - <li> - <input type="checkbox" id="stopGifs" v-model="stopGifs"> - <label for="stopGifs">{{$t('settings.stop_gifs')}}</label> - </li> - <li> - <input type="checkbox" id="loopVideo" v-model="loopVideoLocal"> - <label for="loopVideo">{{$t('settings.loop_video')}}</label> - <ul class="setting-list suboptions" :class="[{disabled: !streamingLocal}]"> + <div class="setting-item"> + <h2>{{ $t('settings.composing') }}</h2> + <ul class="setting-list"> + <li> + <input + id="scopeCopy" + v-model="scopeCopyLocal" + type="checkbox" + > + <label for="scopeCopy"> + {{ $t('settings.scope_copy') }} {{ $t('settings.instance_default', { value: scopeCopyDefault }) }} + </label> + </li> + <li> + <input + id="subjectHide" + v-model="alwaysShowSubjectInputLocal" + type="checkbox" + > + <label for="subjectHide"> + {{ $t('settings.subject_input_always_show') }} {{ $t('settings.instance_default', { value: alwaysShowSubjectInputDefault }) }} + </label> + </li> <li> - <input :disabled="!loopVideoLocal || !loopSilentAvailable" type="checkbox" id="loopVideoSilentOnly" v-model="loopVideoSilentOnlyLocal"> - <label for="loopVideoSilentOnly">{{$t('settings.loop_video_silent_only')}}</label> - <div v-if="!loopSilentAvailable" class="unavailable"> - <i class="icon-globe"/>! {{$t('settings.limited_availability')}} + <div> + {{ $t('settings.subject_line_behavior') }} + <label + for="subjectLineBehavior" + class="select" + > + <select + id="subjectLineBehavior" + v-model="subjectLineBehaviorLocal" + > + <option value="email"> + {{ $t('settings.subject_line_email') }} + {{ subjectLineBehaviorDefault == 'email' ? $t('settings.instance_default_simple') : '' }} + </option> + <option value="masto"> + {{ $t('settings.subject_line_mastodon') }} + {{ subjectLineBehaviorDefault == 'mastodon' ? $t('settings.instance_default_simple') : '' }} + </option> + <option value="noop"> + {{ $t('settings.subject_line_noop') }} + {{ subjectLineBehaviorDefault == 'noop' ? $t('settings.instance_default_simple') : '' }} + </option> + </select> + <i class="icon-down-open" /> + </label> </div> </li> + <li v-if="postFormats.length > 0"> + <div> + {{ $t('settings.post_status_content_type') }} + <label + for="postContentType" + class="select" + > + <select + id="postContentType" + v-model="postContentTypeLocal" + > + <option + v-for="postFormat in postFormats" + :key="postFormat" + :value="postFormat" + > + {{ $t(`post_status.content_type["${postFormat}"]`) }} + {{ postContentTypeDefault === postFormat ? $t('settings.instance_default_simple') : '' }} + </option> + </select> + <i class="icon-down-open" /> + </label> + </div> + </li> + <li> + <input + id="minimalScopesMode" + v-model="minimalScopesModeLocal" + type="checkbox" + > + <label for="minimalScopesMode"> + {{ $t('settings.minimal_scopes_mode') }} {{ $t('settings.instance_default', { value: minimalScopesModeDefault }) }} + </label> + </li> + <li> + <input + id="autohideFloatingPostButton" + v-model="autohideFloatingPostButtonLocal" + type="checkbox" + > + <label for="autohideFloatingPostButton">{{ $t('settings.autohide_floating_post_button') }}</label> + </li> + <li> + <input + id="padEmoji" + v-model="padEmojiLocal" + type="checkbox" + > + <label for="padEmoji">{{ $t('settings.pad_emoji') }}</label> + </li> </ul> - </li> - <li> - <input type="checkbox" id="playVideosInModal" v-model="playVideosInModal"> - <label for="playVideosInModal">{{$t('settings.play_videos_in_modal')}}</label> - </li> - <li> - <input type="checkbox" id="useContainFit" v-model="useContainFit"> - <label for="useContainFit">{{$t('settings.use_contain_fit')}}</label> - </li> - </ul> - </div> + </div> - <div class="setting-item"> - <h2>{{$t('settings.notifications')}}</h2> - <ul class="setting-list"> - <li> - <input type="checkbox" id="webPushNotifications" v-model="webPushNotificationsLocal"> - <label for="webPushNotifications"> - {{$t('settings.enable_web_push_notifications')}} - </label> - </li> - </ul> - </div> - </div> + <div class="setting-item"> + <h2>{{ $t('settings.attachments') }}</h2> + <ul class="setting-list"> + <li> + <input + id="hideAttachments" + v-model="hideAttachmentsLocal" + type="checkbox" + > + <label for="hideAttachments">{{ $t('settings.hide_attachments_in_tl') }}</label> + </li> + <li> + <input + id="hideAttachmentsInConv" + v-model="hideAttachmentsInConvLocal" + type="checkbox" + > + <label for="hideAttachmentsInConv">{{ $t('settings.hide_attachments_in_convo') }}</label> + </li> + <li> + <label for="maxThumbnails">{{ $t('settings.max_thumbnails') }}</label> + <input + id="maxThumbnails" + v-model.number="maxThumbnails" + class="number-input" + type="number" + min="0" + step="1" + > + </li> + <li> + <input + id="hideNsfw" + v-model="hideNsfwLocal" + type="checkbox" + > + <label for="hideNsfw">{{ $t('settings.nsfw_clickthrough') }}</label> + </li> + <ul class="setting-list suboptions"> + <li> + <input + id="preloadImage" + v-model="preloadImage" + :disabled="!hideNsfwLocal" + type="checkbox" + > + <label for="preloadImage">{{ $t('settings.preload_images') }}</label> + </li> + <li> + <input + id="useOneClickNsfw" + v-model="useOneClickNsfw" + :disabled="!hideNsfwLocal" + type="checkbox" + > + <label for="useOneClickNsfw">{{ $t('settings.use_one_click_nsfw') }}</label> + </li> + </ul> + <li> + <input + id="stopGifs" + v-model="stopGifs" + type="checkbox" + > + <label for="stopGifs">{{ $t('settings.stop_gifs') }}</label> + </li> + <li> + <input + id="loopVideo" + v-model="loopVideoLocal" + type="checkbox" + > + <label for="loopVideo">{{ $t('settings.loop_video') }}</label> + <ul + class="setting-list suboptions" + :class="[{disabled: !streamingLocal}]" + > + <li> + <input + id="loopVideoSilentOnly" + v-model="loopVideoSilentOnlyLocal" + :disabled="!loopVideoLocal || !loopSilentAvailable" + type="checkbox" + > + <label for="loopVideoSilentOnly">{{ $t('settings.loop_video_silent_only') }}</label> + <div + v-if="!loopSilentAvailable" + class="unavailable" + > + <i class="icon-globe" />! {{ $t('settings.limited_availability') }} + </div> + </li> + </ul> + </li> + <li> + <input + id="playVideosInModal" + v-model="playVideosInModal" + type="checkbox" + > + <label for="playVideosInModal">{{ $t('settings.play_videos_in_modal') }}</label> + </li> + <li> + <input + id="useContainFit" + v-model="useContainFit" + type="checkbox" + > + <label for="useContainFit">{{ $t('settings.use_contain_fit') }}</label> + </li> + </ul> + </div> - <div :label="$t('settings.theme')" > - <div class="setting-item"> - <style-switcher></style-switcher> - </div> - </div> + <div class="setting-item"> + <h2>{{ $t('settings.notifications') }}</h2> + <ul class="setting-list"> + <li> + <input + id="webPushNotifications" + v-model="webPushNotificationsLocal" + type="checkbox" + > + <label for="webPushNotifications"> + {{ $t('settings.enable_web_push_notifications') }} + </label> + </li> + </ul> + </div> + </div> + + <div :label="$t('settings.theme')"> + <div class="setting-item"> + <style-switcher /> + </div> + </div> - <div :label="$t('settings.filtering')" > - <div class="setting-item"> - <div class="select-multiple"> - <span class="label">{{$t('settings.notification_visibility')}}</span> - <ul class="option-list"> - <li> - <input type="checkbox" id="notification-visibility-likes" v-model="notificationVisibilityLocal.likes"> - <label for="notification-visibility-likes"> - {{$t('settings.notification_visibility_likes')}} + <div :label="$t('settings.filtering')"> + <div class="setting-item"> + <div class="select-multiple"> + <span class="label">{{ $t('settings.notification_visibility') }}</span> + <ul class="option-list"> + <li> + <input + id="notification-visibility-likes" + v-model="notificationVisibilityLocal.likes" + type="checkbox" + > + <label for="notification-visibility-likes"> + {{ $t('settings.notification_visibility_likes') }} + </label> + </li> + <li> + <input + id="notification-visibility-repeats" + v-model="notificationVisibilityLocal.repeats" + type="checkbox" + > + <label for="notification-visibility-repeats"> + {{ $t('settings.notification_visibility_repeats') }} + </label> + </li> + <li> + <input + id="notification-visibility-follows" + v-model="notificationVisibilityLocal.follows" + type="checkbox" + > + <label for="notification-visibility-follows"> + {{ $t('settings.notification_visibility_follows') }} + </label> + </li> + <li> + <input + id="notification-visibility-mentions" + v-model="notificationVisibilityLocal.mentions" + type="checkbox" + > + <label for="notification-visibility-mentions"> + {{ $t('settings.notification_visibility_mentions') }} + </label> + </li> + </ul> + </div> + <div> + {{ $t('settings.replies_in_timeline') }} + <label + for="replyVisibility" + class="select" + > + <select + id="replyVisibility" + v-model="replyVisibilityLocal" + > + <option + value="all" + selected + >{{ $t('settings.reply_visibility_all') }}</option> + <option value="following">{{ $t('settings.reply_visibility_following') }}</option> + <option value="self">{{ $t('settings.reply_visibility_self') }}</option> + </select> + <i class="icon-down-open" /> </label> - </li> - <li> - <input type="checkbox" id="notification-visibility-repeats" v-model="notificationVisibilityLocal.repeats"> - <label for="notification-visibility-repeats"> - {{$t('settings.notification_visibility_repeats')}} + </div> + <div> + <input + id="hidePostStats" + v-model="hidePostStatsLocal" + type="checkbox" + > + <label for="hidePostStats"> + {{ $t('settings.hide_post_stats') }} {{ $t('settings.instance_default', { value: hidePostStatsDefault }) }} </label> - </li> - <li> - <input type="checkbox" id="notification-visibility-follows" v-model="notificationVisibilityLocal.follows"> - <label for="notification-visibility-follows"> - {{$t('settings.notification_visibility_follows')}} + </div> + <div> + <input + id="hideUserStats" + v-model="hideUserStatsLocal" + type="checkbox" + > + <label for="hideUserStats"> + {{ $t('settings.hide_user_stats') }} {{ $t('settings.instance_default', { value: hideUserStatsDefault }) }} </label> - </li> - <li> - <input type="checkbox" id="notification-visibility-mentions" v-model="notificationVisibilityLocal.mentions"> - <label for="notification-visibility-mentions"> - {{$t('settings.notification_visibility_mentions')}} + </div> + </div> + <div class="setting-item"> + <div> + <p>{{ $t('settings.filtering_explanation') }}</p> + <textarea + id="muteWords" + v-model="muteWordsString" + /> + </div> + <div> + <input + id="hideFilteredStatuses" + v-model="hideFilteredStatusesLocal" + type="checkbox" + > + <label for="hideFilteredStatuses"> + {{ $t('settings.hide_filtered_statuses') }} {{ $t('settings.instance_default', { value: hideFilteredStatusesDefault }) }} </label> - </li> - </ul> - </div> - <div> - {{$t('settings.replies_in_timeline')}} - <label for="replyVisibility" class="select"> - <select id="replyVisibility" v-model="replyVisibilityLocal"> - <option value="all" selected>{{$t('settings.reply_visibility_all')}}</option> - <option value="following">{{$t('settings.reply_visibility_following')}}</option> - <option value="self">{{$t('settings.reply_visibility_self')}}</option> - </select> - <i class="icon-down-open"/> - </label> - </div> - <div> - <input type="checkbox" id="hidePostStats" v-model="hidePostStatsLocal"> - <label for="hidePostStats"> - {{$t('settings.hide_post_stats')}} {{$t('settings.instance_default', { value: hidePostStatsDefault })}} - </label> - </div> - <div> - <input type="checkbox" id="hideUserStats" v-model="hideUserStatsLocal"> - <label for="hideUserStats"> - {{$t('settings.hide_user_stats')}} {{$t('settings.instance_default', { value: hideUserStatsDefault })}} - </label> - </div> - </div> - <div class="setting-item"> - <div> - <p>{{$t('settings.filtering_explanation')}}</p> - <textarea id="muteWords" v-model="muteWordsString"></textarea> + </div> + </div> </div> - <div> - <input type="checkbox" id="hideFilteredStatuses" v-model="hideFilteredStatusesLocal"> - <label for="hideFilteredStatuses"> - {{$t('settings.hide_filtered_statuses')}} {{$t('settings.instance_default', { value: hideFilteredStatusesDefault })}} - </label> + <div :label="$t('settings.version.title')"> + <div class="setting-item"> + <ul class="setting-list"> + <li> + <p>{{ $t('settings.version.backend_version') }}</p> + <ul class="option-list"> + <li> + <a + :href="backendVersionLink" + target="_blank" + >{{ backendVersion }}</a> + </li> + </ul> + </li> + <li> + <p>{{ $t('settings.version.frontend_version') }}</p> + <ul class="option-list"> + <li> + <a + :href="frontendVersionLink" + target="_blank" + >{{ frontendVersion }}</a> + </li> + </ul> + </li> + </ul> + </div> </div> - </div> - </div> - </tab-switcher> -</keep-alive> + </tab-switcher> + </keep-alive> + </div> </div> -</div> </template> <script src="./settings.js"> </script> - -<style lang="scss"> -@import '../../_variables.scss'; - -.setting-item { - border-bottom: 2px solid var(--fg, $fallback--fg); - margin: 1em 1em 1.4em; - padding-bottom: 1.4em; - - > div { - margin-bottom: .5em; - &:last-child { - margin-bottom: 0; - } - } - - &:last-child { - border-bottom: none; - padding-bottom: 0; - margin-bottom: 1em; - } - - select { - min-width: 10em; - } - - - textarea { - width: 100%; - height: 100px; - } - - .unavailable, - .unavailable i { - color: var(--cRed, $fallback--cRed); - color: $fallback--cRed; - } - - .btn { - min-height: 28px; - min-width: 10em; - padding: 0 2em; - } - - .number-input { - max-width: 6em; - } -} -.select-multiple { - display: flex; - .option-list { - margin: 0; - padding-left: .5em; - } -} -.setting-list, -.option-list{ - list-style-type: none; - padding-left: 2em; - li { - margin-bottom: 0.5em; - } - .suboptions { - margin-top: 0.3em - } -} -</style> diff --git a/src/components/shadow_control/shadow_control.vue b/src/components/shadow_control/shadow_control.vue index 744925d4..de8a42d1 100644 --- a/src/components/shadow_control/shadow_control.vue +++ b/src/components/shadow_control/shadow_control.vue @@ -1,134 +1,207 @@ <template> -<div class="shadow-control" :class="{ disabled: !present }"> - <div class="shadow-preview-container"> - <div :disabled="!present" class="y-shift-control"> - <input - v-model="selected.y" + <div + class="shadow-control" + :class="{ disabled: !present }" + > + <div class="shadow-preview-container"> + <div :disabled="!present" - class="input-number" - type="number"> - <div class="wrap"> + class="y-shift-control" + > <input v-model="selected.y" :disabled="!present" - class="input-range" - type="range" - max="20" - min="-20"> + class="input-number" + type="number" + > + <div class="wrap"> + <input + v-model="selected.y" + :disabled="!present" + class="input-range" + type="range" + max="20" + min="-20" + > + </div> </div> - </div> - <div class="preview-window"> - <div class="preview-block" :style="style"></div> - </div> - <div :disabled="!present" class="x-shift-control"> - <input - v-model="selected.x" + <div class="preview-window"> + <div + class="preview-block" + :style="style" + /> + </div> + <div :disabled="!present" - class="input-number" - type="number"> - <div class="wrap"> + class="x-shift-control" + > <input v-model="selected.x" :disabled="!present" - class="input-range" - type="range" - max="20" - min="-20"> + class="input-number" + type="number" + > + <div class="wrap"> + <input + v-model="selected.x" + :disabled="!present" + class="input-range" + type="range" + max="20" + min="-20" + > + </div> </div> </div> - </div> - <div class="shadow-tweak"> - <div :disabled="usingFallback" class="id-control style-control"> - <label for="shadow-switcher" class="select" :disabled="!ready || usingFallback"> - <select - v-model="selectedId" class="shadow-switcher" + <div class="shadow-tweak"> + <div + :disabled="usingFallback" + class="id-control style-control" + > + <label + for="shadow-switcher" + class="select" :disabled="!ready || usingFallback" - id="shadow-switcher"> - <option v-for="(shadow, index) in cValue" :value="index"> - {{$t('settings.style.shadows.shadow_id', { value: index })}} - </option> - </select> - <i class="icon-down-open"/> - </label> - <button class="btn btn-default" :disabled="!ready || !present" @click="del"> - <i class="icon-cancel"/> - </button> - <button class="btn btn-default" :disabled="!moveUpValid" @click="moveUp"> - <i class="icon-up-open"/> - </button> - <button class="btn btn-default" :disabled="!moveDnValid" @click="moveDn"> - <i class="icon-down-open"/> - </button> - <button class="btn btn-default" :disabled="usingFallback" @click="add"> - <i class="icon-plus"/> - </button> - </div> - <div :disabled="!present" class="inset-control style-control"> - <label for="inset" class="label"> - {{$t('settings.style.shadows.inset')}} - </label> - <input - v-model="selected.inset" + > + <select + id="shadow-switcher" + v-model="selectedId" + class="shadow-switcher" + :disabled="!ready || usingFallback" + > + <option + v-for="(shadow, index) in cValue" + :key="index" + :value="index" + > + {{ $t('settings.style.shadows.shadow_id', { value: index }) }} + </option> + </select> + <i class="icon-down-open" /> + </label> + <button + class="btn btn-default" + :disabled="!ready || !present" + @click="del" + > + <i class="icon-cancel" /> + </button> + <button + class="btn btn-default" + :disabled="!moveUpValid" + @click="moveUp" + > + <i class="icon-up-open" /> + </button> + <button + class="btn btn-default" + :disabled="!moveDnValid" + @click="moveDn" + > + <i class="icon-down-open" /> + </button> + <button + class="btn btn-default" + :disabled="usingFallback" + @click="add" + > + <i class="icon-plus" /> + </button> + </div> + <div :disabled="!present" - name="inset" - id="inset" - class="input-inset" - type="checkbox"> - <label class="checkbox-label" for="inset"></label> - </div> - <div :disabled="!present" class="blur-control style-control"> - <label for="spread" class="label"> - {{$t('settings.style.shadows.blur')}} - </label> - <input - v-model="selected.blur" + class="inset-control style-control" + > + <label + for="inset" + class="label" + > + {{ $t('settings.style.shadows.inset') }} + </label> + <input + id="inset" + v-model="selected.inset" + :disabled="!present" + name="inset" + class="input-inset" + type="checkbox" + > + <label + class="checkbox-label" + for="inset" + /> + </div> + <div :disabled="!present" - name="blur" - id="blur" - class="input-range" - type="range" - max="20" - min="0"> - <input - v-model="selected.blur" + class="blur-control style-control" + > + <label + for="spread" + class="label" + > + {{ $t('settings.style.shadows.blur') }} + </label> + <input + id="blur" + v-model="selected.blur" + :disabled="!present" + name="blur" + class="input-range" + type="range" + max="20" + min="0" + > + <input + v-model="selected.blur" + :disabled="!present" + class="input-number" + type="number" + min="0" + > + </div> + <div :disabled="!present" - class="input-number" - type="number" - min="0"> - </div> - <div :disabled="!present" class="spread-control style-control"> - <label for="spread" class="label"> - {{$t('settings.style.shadows.spread')}} - </label> - <input - v-model="selected.spread" + class="spread-control style-control" + > + <label + for="spread" + class="label" + > + {{ $t('settings.style.shadows.spread') }} + </label> + <input + id="spread" + v-model="selected.spread" + :disabled="!present" + name="spread" + class="input-range" + type="range" + max="20" + min="-20" + > + <input + v-model="selected.spread" + :disabled="!present" + class="input-number" + type="number" + > + </div> + <ColorInput + v-model="selected.color" :disabled="!present" - name="spread" - id="spread" - class="input-range" - type="range" - max="20" - min="-20"> - <input - v-model="selected.spread" + :label="$t('settings.style.common.color')" + name="shadow" + /> + <OpacityInput + v-model="selected.alpha" :disabled="!present" - class="input-number" - type="number"> + /> + <p> + {{ $t('settings.style.shadows.hint') }} + </p> </div> - <ColorInput - v-model="selected.color" - :disabled="!present" - :label="$t('settings.style.common.color')" - name="shadow"/> - <OpacityInput - v-model="selected.alpha" - :disabled="!present"/> - <p> - {{$t('settings.style.shadows.hint')}} - </p> </div> -</div> </template> <script src="./shadow_control.js" ></script> diff --git a/src/components/side_drawer/side_drawer.js b/src/components/side_drawer/side_drawer.js index ad3738d1..567d2e5e 100644 --- a/src/components/side_drawer/side_drawer.js +++ b/src/components/side_drawer/side_drawer.js @@ -1,17 +1,16 @@ import UserCard from '../user_card/user_card.vue' import { unseenNotificationsFromStore } from '../../services/notification_utils/notification_utils' - -// TODO: separate touch gesture stuff into their own utils if more components want them -const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] - -const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) +import GestureService from '../../services/gesture_service/gesture_service' const SideDrawer = { props: [ 'logout' ], data: () => ({ closed: true, - touchCoord: [0, 0] + closeGesture: undefined }), + created () { + this.closeGesture = GestureService.swipeGesture(GestureService.DIRECTION_LEFT, this.toggleDrawer) + }, components: { UserCard }, computed: { currentUser () { @@ -46,13 +45,10 @@ const SideDrawer = { this.toggleDrawer() }, touchStart (e) { - this.touchCoord = touchEventCoord(e) + GestureService.beginSwipe(e, this.closeGesture) }, touchMove (e) { - const delta = deltaCoord(this.touchCoord, touchEventCoord(e)) - if (delta[0] < -30 && Math.abs(delta[1]) < Math.abs(delta[0]) && !this.closed) { - this.toggleDrawer() - } + GestureService.updateSwipe(e, this.closeGesture) } } } diff --git a/src/components/side_drawer/side_drawer.vue b/src/components/side_drawer/side_drawer.vue index 95ee21b4..214b8e0c 100644 --- a/src/components/side_drawer/side_drawer.vue +++ b/src/components/side_drawer/side_drawer.vue @@ -1,62 +1,98 @@ <template> - <div class="side-drawer-container" + <div + class="side-drawer-container" :class="{ 'side-drawer-container-closed': closed, 'side-drawer-container-open': !closed }" > - <div class="side-drawer" + <div + class="side-drawer-darken" + :class="{ 'side-drawer-darken-closed': closed}" + /> + <div + class="side-drawer" :class="{'side-drawer-closed': closed}" @touchstart="touchStart" @touchmove="touchMove" > - <div class="side-drawer-heading" @click="toggleDrawer"> - <UserCard :user="currentUser" :hideBio="true" v-if="currentUser"/> - <div class="side-drawer-logo-wrapper" v-else> - <img :src="logo"/> - <span>{{sitename}}</span> + <div + class="side-drawer-heading" + @click="toggleDrawer" + > + <UserCard + v-if="currentUser" + :user="currentUser" + :hide-bio="true" + /> + <div + v-else + class="side-drawer-logo-wrapper" + > + <img :src="logo"> + <span>{{ sitename }}</span> </div> </div> <ul> - <li v-if="!currentUser" @click="toggleDrawer"> + <li + v-if="!currentUser" + @click="toggleDrawer" + > <router-link :to="{ name: 'login' }"> {{ $t("login.login") }} </router-link> </li> - <li v-if="currentUser" @click="toggleDrawer"> - <router-link :to="{ name: 'notifications', params: { username: currentUser.screen_name } }"> - {{ $t("notifications.notifications") }} {{ unseenNotificationsCount > 0 ? `(${unseenNotificationsCount})` : '' }} - </router-link> - </li> - <li v-if="currentUser" @click="toggleDrawer"> + <li + v-if="currentUser" + @click="toggleDrawer" + > <router-link :to="{ name: 'dms', params: { username: currentUser.screen_name } }"> {{ $t("nav.dms") }} </router-link> </li> + <li + v-if="currentUser" + @click="toggleDrawer" + > + <router-link :to="{ name: 'interactions', params: { username: currentUser.screen_name } }"> + {{ $t("nav.interactions") }} + </router-link> + </li> </ul> <ul> - <li v-if="currentUser" @click="toggleDrawer"> + <li + v-if="currentUser" + @click="toggleDrawer" + > <router-link :to="{ name: 'friends' }"> {{ $t("nav.timeline") }} </router-link> </li> - <li v-if="currentUser && currentUser.locked" @click="toggleDrawer"> - <router-link to='/friend-requests'> + <li + v-if="currentUser && currentUser.locked" + @click="toggleDrawer" + > + <router-link to="/friend-requests"> {{ $t("nav.friend_requests") }} - <span v-if='followRequestCount > 0' class="badge follow-request-count"> - {{followRequestCount}} + <span + v-if="followRequestCount > 0" + class="badge follow-request-count" + > + {{ followRequestCount }} </span> - </router-link> </li> <li @click="toggleDrawer"> - <router-link to='/main/public'> + <router-link to="/main/public"> {{ $t("nav.public_tl") }} </router-link> </li> <li @click="toggleDrawer"> - <router-link to='/main/all'> + <router-link to="/main/all"> {{ $t("nav.twkn") }} </router-link> </li> - <li v-if="currentUser && chat" @click="toggleDrawer"> + <li + v-if="currentUser && chat" + @click="toggleDrawer" + > <router-link :to="{ name: 'chat' }"> {{ $t("nav.chat") }} </router-link> @@ -64,11 +100,14 @@ </ul> <ul> <li @click="toggleDrawer"> - <router-link :to="{ name: 'user-search' }"> - {{ $t("nav.user_search") }} + <router-link :to="{ name: 'search' }"> + {{ $t("nav.search") }} </router-link> </li> - <li v-if="currentUser && suggestionsEnabled" @click="toggleDrawer"> + <li + v-if="currentUser && suggestionsEnabled" + @click="toggleDrawer" + > <router-link :to="{ name: 'who-to-follow' }"> {{ $t("nav.who_to_follow") }} </router-link> @@ -83,17 +122,35 @@ {{ $t("nav.about") }} </router-link> </li> - <li v-if="currentUser" @click="toggleDrawer"> - <a @click="doLogout" href="#"> + <li + v-if="currentUser && currentUser.role === 'admin'" + @click="toggleDrawer" + > + <a + href="/pleroma/admin/#/login-pleroma" + target="_blank" + > + {{ $t("nav.administration") }} + </a> + </li> + <li + v-if="currentUser" + @click="toggleDrawer" + > + <a + href="#" + @click="doLogout" + > {{ $t("login.logout") }} </a> </li> </ul> </div> - <div class="side-drawer-click-outside" - @click.stop.prevent="toggleDrawer" + <div + class="side-drawer-click-outside" :class="{'side-drawer-click-outside-closed': closed}" - ></div> + @click.stop.prevent="toggleDrawer" + /> </div> </template> @@ -111,16 +168,32 @@ height: 100%; display: flex; align-items: stretch; + transition-duration: 0s; + transition-property: transform; } .side-drawer-container-open { + transform: translate(0%); +} + +.side-drawer-container-closed { + transition-delay: 0.35s; + transform: translate(-100%); +} + +.side-drawer-darken { + top: 0; + left: 0; + width: 100vw; + height: 100vh; + position: fixed; + z-index: -1; transition: 0.35s; transition-property: background-color; background-color: rgba(0, 0, 0, 0.5); } -.side-drawer-container-closed { - left: -100%; +.side-drawer-darken-closed { background-color: rgba(0, 0, 0, 0); } @@ -130,8 +203,9 @@ .side-drawer { overflow-x: hidden; - transition: 0.35s; transition-timing-function: cubic-bezier(0, 1, 0.5, 1); + transition: 0.35s; + transition-property: transform; margin: 0 0 0 -100px; padding: 0 0 1em 100px; width: 80%; diff --git a/src/components/status/status.js b/src/components/status/status.js index 9e18fe15..d17ba318 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -1,17 +1,20 @@ import Attachment from '../attachment/attachment.vue' import FavoriteButton from '../favorite_button/favorite_button.vue' import RetweetButton from '../retweet_button/retweet_button.vue' -import DeleteButton from '../delete_button/delete_button.vue' +import Poll from '../poll/poll.vue' +import ExtraButtons from '../extra_buttons/extra_buttons.vue' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCard from '../user_card/user_card.vue' import UserAvatar from '../user_avatar/user_avatar.vue' import Gallery from '../gallery/gallery.vue' import LinkPreview from '../link-preview/link-preview.vue' +import AvatarList from '../avatar_list/avatar_list.vue' +import Timeago from '../timeago/timeago.vue' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' import fileType from 'src/services/file_type/file_type.service' import { highlightClass, highlightStyle } from '../../services/user_highlighter/user_highlighter.js' import { mentionMatchesUrl, extractTagFromUrl } from 'src/services/matcher/matcher.service.js' -import { filter, find, unescape } from 'lodash' +import { filter, find, unescape, uniqBy } from 'lodash' const Status = { name: 'Status', @@ -25,18 +28,20 @@ const Status = { 'replies', 'isPreview', 'noHeading', - 'inlineExpanded' + 'inlineExpanded', + 'showPinned', + 'inProfile' ], data () { return { replying: false, - expanded: false, unmuted: false, userExpanded: false, preview: null, showPreview: false, showingTall: this.inConversation && this.focused, showingLongSubject: false, + error: null, expandingSubject: typeof this.$store.state.config.collapseMessageWithSubject === 'undefined' ? !this.$store.state.instance.collapseMessageWithSubject : !this.$store.state.config.collapseMessageWithSubject, @@ -97,18 +102,23 @@ const Status = { return this.statusoid } }, + statusFromGlobalRepository () { + // NOTE: Consider to replace status with statusFromGlobalRepository + return this.$store.state.statuses.allStatusesObject[this.status.id] + }, loggedIn () { return !!this.$store.state.users.currentUser }, muteWordHits () { const statusText = this.status.text.toLowerCase() + const statusSummary = this.status.summary.toLowerCase() const hits = filter(this.muteWords, (muteWord) => { - return statusText.includes(muteWord.toLowerCase()) + return statusText.includes(muteWord.toLowerCase()) || statusSummary.includes(muteWord.toLowerCase()) }) return hits }, - muted () { return !this.unmuted && (this.status.user.muted || this.muteWordHits.length > 0) }, + muted () { return !this.unmuted && ((!this.inProfile && this.status.user.muted) || (!this.inConversation && this.status.thread_muted) || this.muteWordHits.length > 0) }, hideFilteredStatuses () { return typeof this.$store.state.config.hideFilteredStatuses === 'undefined' ? this.$store.state.instance.hideFilteredStatuses @@ -145,18 +155,18 @@ const Status = { return !!(this.status.in_reply_to_status_id && this.status.in_reply_to_user_id) }, replyToName () { - const user = this.$store.state.users.usersObject[this.status.in_reply_to_user_id] - if (user) { - return user.screen_name - } else { + if (this.status.in_reply_to_screen_name) { return this.status.in_reply_to_screen_name + } else { + const user = this.$store.getters.findUser(this.status.in_reply_to_user_id) + return user && user.screen_name } }, hideReply () { if (this.$store.state.config.replyVisibility === 'all') { return false } - if (this.inlineExpanded || this.expanded || this.inConversation || !this.isReply) { + if (this.inConversation || !this.isReply) { return false } if (this.status.user.id === this.$store.state.users.currentUser.id) { @@ -165,12 +175,13 @@ const Status = { if (this.status.type === 'retweet') { return false } - var checkFollowing = this.$store.state.config.replyVisibility === 'following' + const checkFollowing = this.$store.state.config.replyVisibility === 'following' for (var i = 0; i < this.status.attentions.length; ++i) { if (this.status.user.id === this.status.attentions[i].id) { continue } - if (checkFollowing && this.status.attentions[i].following) { + const taggedUser = this.$store.getters.findUser(this.status.attentions[i].id) + if (checkFollowing && taggedUser && taggedUser.following) { return false } if (this.status.attentions[i].id === this.$store.state.users.currentUser.id) { @@ -210,10 +221,10 @@ const Status = { if (!this.status.summary) return '' const decodedSummary = unescape(this.status.summary) const behavior = typeof this.$store.state.config.subjectLineBehavior === 'undefined' - ? this.$store.state.instance.subjectLineBehavior - : this.$store.state.config.subjectLineBehavior + ? this.$store.state.instance.subjectLineBehavior + : this.$store.state.config.subjectLineBehavior const startsWithRe = decodedSummary.match(/^re[: ]/i) - if (behavior !== 'noop' && startsWithRe || behavior === 'masto') { + if ((behavior !== 'noop' && startsWithRe) || behavior === 'masto') { return decodedSummary } else if (behavior === 'email') { return 're: '.concat(decodedSummary) @@ -251,18 +262,46 @@ const Status = { }, maxThumbnails () { return this.$store.state.config.maxThumbnails + }, + contentHtml () { + if (!this.status.summary_html) { + return this.status.statusnet_html + } + return this.status.summary_html + '<br />' + this.status.statusnet_html + }, + combinedFavsAndRepeatsUsers () { + // Use the status from the global status repository since favs and repeats are saved in it + const combinedUsers = [].concat( + this.statusFromGlobalRepository.favoritedBy, + this.statusFromGlobalRepository.rebloggedBy + ) + return uniqBy(combinedUsers, 'id') + }, + ownStatus () { + return this.status.user.id === this.$store.state.users.currentUser.id + }, + tags () { + return this.status.tags.filter(tagObj => tagObj.hasOwnProperty('name')).map(tagObj => tagObj.name).join(' ') + }, + hidePostStats () { + return typeof this.$store.state.config.hidePostStats === 'undefined' + ? this.$store.state.instance.hidePostStats + : this.$store.state.config.hidePostStats } }, components: { Attachment, FavoriteButton, RetweetButton, - DeleteButton, + ExtraButtons, PostStatusForm, + Poll, UserCard, UserAvatar, Gallery, - LinkPreview + LinkPreview, + AvatarList, + Timeago }, methods: { visibilityIcon (visibility) { @@ -277,12 +316,15 @@ const Status = { return 'icon-globe' } }, + showError (error) { + this.error = error + }, + clearError () { + this.error = undefined + }, linkClicked (event) { - let { target } = event - if (target.tagName === 'SPAN') { - target = target.parentNode - } - if (target.tagName === 'A') { + const target = event.target.closest('.status-content a') + if (target) { if (target.className.match(/mention/)) { const href = target.href const attn = this.status.attentions.find(attn => mentionMatchesUrl(attn, href)) @@ -294,7 +336,7 @@ const Status = { return } } - if (target.className.match(/hashtag/)) { + if (target.rel.match(/(?:^|\s)tag(?:$|\s)/) || target.className.match(/hashtag/)) { // Extract tag name from link url const tag = extractTagFromUrl(target.href) if (tag) { @@ -310,7 +352,6 @@ const Status = { this.replying = !this.replying }, gotoOriginal (id) { - // only handled by conversation, not status_or_conversation if (this.inConversation) { this.$emit('goto', id) } @@ -345,7 +386,7 @@ const Status = { this.preview = find(statuses, { 'id': targetId }) // or if we have to fetch it if (!this.preview) { - this.$store.state.api.backendInteractor.fetchStatus({id}).then((status) => { + this.$store.state.api.backendInteractor.fetchStatus({ id }).then((status) => { this.preview = status }) } @@ -382,6 +423,18 @@ const Status = { window.scrollBy(0, rect.bottom - window.innerHeight + 50) } } + }, + 'status.repeat_num': function (num) { + // refetch repeats when repeat_num is changed in any way + if (this.isFocused && this.statusFromGlobalRepository.rebloggedBy && this.statusFromGlobalRepository.rebloggedBy.length !== num) { + this.$store.dispatch('fetchRepeats', this.status.id) + } + }, + 'status.fave_num': function (num) { + // refetch favs when fave_num is changed in any way + if (this.isFocused && this.statusFromGlobalRepository.favoritedBy && this.statusFromGlobalRepository.favoritedBy.length !== num) { + this.$store.dispatch('fetchFavs', this.status.id) + } } }, filters: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1f6d0325..93f37a49 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -1,156 +1,431 @@ <template> - <div class="status-el" v-if="!hideStatus" :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]"> + <!-- eslint-disable vue/no-v-html --> + <div + v-if="!hideStatus" + class="status-el" + :class="[{ 'status-el_focused': isFocused }, { 'status-conversation': inlineExpanded }]" + > + <div + v-if="error" + class="alert error" + > + {{ error }} + <i + class="button-icon icon-cancel" + @click="clearError" + /> + </div> <template v-if="muted && !isPreview"> <div class="media status container muted"> <small> <router-link :to="userProfileLink"> - {{status.user.screen_name}} + {{ status.user.screen_name }} </router-link> </small> - <small class="muteWords">{{muteWordHits.join(', ')}}</small> - <a href="#" class="unmute" @click.prevent="toggleMute"><i class="button-icon icon-eye-off"></i></a> + <small class="muteWords">{{ muteWordHits.join(', ') }}</small> + <a + href="#" + class="unmute" + @click.prevent="toggleMute" + ><i class="button-icon icon-eye-off" /></a> </div> </template> <template v-else> - <div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info"> - <UserAvatar class="media-left" v-if="retweet" :betterShadow="betterShadow" :src="statusoid.user.profile_image_url_original"/> + <div + v-if="showPinned" + class="status-pin" + > + <i class="fa icon-pin faint" /> + <span class="faint">{{ $t('status.pinned') }}</span> + </div> + <div + v-if="retweet && !noHeading && !inConversation" + :class="[repeaterClass, { highlighted: repeaterStyle }]" + :style="[repeaterStyle]" + class="media container retweet-info" + > + <UserAvatar + v-if="retweet" + class="media-left" + :better-shadow="betterShadow" + :user="statusoid.user" + /> <div class="media-body faint"> <span class="user-name"> - <router-link v-if="retweeterHtml" :to="retweeterProfileLink" v-html="retweeterHtml"/> - <router-link v-else :to="retweeterProfileLink">{{retweeter}}</router-link> + <router-link + v-if="retweeterHtml" + :to="retweeterProfileLink" + v-html="retweeterHtml" + /> + <router-link + v-else + :to="retweeterProfileLink" + >{{ retweeter }}</router-link> </span> - <i class='fa icon-retweet retweeted' :title="$t('tool_tip.repeat')"></i> - {{$t('timeline.repeated')}} + <i + class="fa icon-retweet retweeted" + :title="$t('tool_tip.repeat')" + /> + {{ $t('timeline.repeated') }} </div> </div> - <div :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet }]" :style="[ userStyle ]" class="media status"> - <div v-if="!noHeading" class="media-left"> - <router-link :to="userProfileLink" @click.stop.prevent.capture.native="toggleUserExpanded"> - <UserAvatar :compact="compact" :betterShadow="betterShadow" :src="status.user.profile_image_url_original"/> + <div + :class="[userClass, { highlighted: userStyle, 'is-retweet': retweet && !inConversation }]" + :style="[ userStyle ]" + class="media status" + :data-tags="tags" + > + <div + v-if="!noHeading" + class="media-left" + > + <router-link + :to="userProfileLink" + @click.stop.prevent.capture.native="toggleUserExpanded" + > + <UserAvatar + :compact="compact" + :better-shadow="betterShadow" + :user="status.user" + /> </router-link> </div> <div class="status-body"> - <UserCard :user="status.user" :rounded="true" :bordered="true" class="status-usercard" v-if="userExpanded"/> - <div v-if="!noHeading" class="media-heading"> + <UserCard + v-if="userExpanded" + :user="status.user" + :rounded="true" + :bordered="true" + class="status-usercard" + /> + <div + v-if="!noHeading" + class="media-heading" + > <div class="heading-name-row"> <div class="name-and-account-name"> - <h4 class="user-name" v-if="status.user.name_html" v-html="status.user.name_html"></h4> - <h4 class="user-name" v-else>{{status.user.name}}</h4> - <router-link class="account-name" :to="userProfileLink"> - {{status.user.screen_name}} + <h4 + v-if="status.user.name_html" + class="user-name" + v-html="status.user.name_html" + /> + <h4 + v-else + class="user-name" + > + {{ status.user.name }} + </h4> + <router-link + class="account-name" + :to="userProfileLink" + > + {{ status.user.screen_name }} </router-link> </div> <span class="heading-right"> - <router-link class="timeago faint-link" :to="{ name: 'conversation', params: { id: status.id } }"> - <timeago :since="status.created_at" :auto-update="60"></timeago> + <router-link + class="timeago faint-link" + :to="{ name: 'conversation', params: { id: status.id } }" + > + <Timeago + :time="status.created_at" + :auto-update="60" + /> </router-link> - <div class="button-icon visibility-icon" v-if="status.visibility"> - <i :class="visibilityIcon(status.visibility)" :title="status.visibility | capitalize"></i> + <div + v-if="status.visibility" + class="button-icon visibility-icon" + > + <i + :class="visibilityIcon(status.visibility)" + :title="status.visibility | capitalize" + /> </div> - <a :href="status.external_url" target="_blank" v-if="!status.is_local && !isPreview" class="source_url" title="Source"> - <i class="button-icon icon-link-ext-alt"></i> + <a + v-if="!status.is_local && !isPreview" + :href="status.external_url" + target="_blank" + class="source_url" + title="Source" + > + <i class="button-icon icon-link-ext-alt" /> </a> <template v-if="expandable && !isPreview"> - <a href="#" @click.prevent="toggleExpanded" title="Expand"> - <i class="button-icon icon-plus-squared"></i> + <a + href="#" + title="Expand" + @click.prevent="toggleExpanded" + > + <i class="button-icon icon-plus-squared" /> </a> </template> - <a href="#" @click.prevent="toggleMute" v-if="unmuted"><i class="button-icon icon-eye-off"></i></a> + <a + v-if="unmuted" + href="#" + @click.prevent="toggleMute" + ><i class="button-icon icon-eye-off" /></a> </span> </div> <div class="heading-reply-row"> - <div v-if="isReply" class="reply-to-and-accountname"> - <a class="reply-to" - href="#" @click.prevent="gotoOriginal(status.in_reply_to_status_id)" + <div + v-if="isReply" + class="reply-to-and-accountname" + > + <a + class="reply-to" + href="#" :aria-label="$t('tool_tip.reply')" + @click.prevent="gotoOriginal(status.in_reply_to_status_id)" @mouseenter.prevent.stop="replyEnter(status.in_reply_to_status_id, $event)" @mouseleave.prevent.stop="replyLeave()" > - <i class="button-icon icon-reply" v-if="!isPreview"></i> - <span class="faint-link reply-to-text">{{$t('status.reply_to')}}</span> + <i + v-if="!isPreview" + class="button-icon icon-reply" + /> + <span class="faint-link reply-to-text">{{ $t('status.reply_to') }}</span> </a> <router-link :to="replyProfileLink"> - {{replyToName}} + {{ replyToName }} </router-link> - <span class="faint replies-separator" v-if="replies && replies.length"> + <span + v-if="replies && replies.length" + class="faint replies-separator" + > - </span> </div> - <div class="replies" v-if="inConversation && !isPreview"> - <span class="faint" v-if="replies && replies.length">{{$t('status.replies_list')}}</span> - <span class="reply-link faint" v-if="replies" v-for="reply in replies"> - <a href="#" @click.prevent="gotoOriginal(reply.id)" @mouseenter="replyEnter(reply.id, $event)" @mouseout="replyLeave()">{{reply.name}}</a> - </span> + <div + v-if="inConversation && !isPreview" + class="replies" + > + <span + v-if="replies && replies.length" + class="faint" + >{{ $t('status.replies_list') }}</span> + <template v-if="replies"> + <span + v-for="reply in replies" + :key="reply.id" + class="reply-link faint" + > + <a + href="#" + @click.prevent="gotoOriginal(reply.id)" + @mouseenter="replyEnter(reply.id, $event)" + @mouseout="replyLeave()" + >{{ reply.name }}</a> + </span> + </template> </div> </div> - - </div> - <div v-if="showPreview" class="status-preview-container"> - <status class="status-preview" v-if="preview" :isPreview="true" :statusoid="preview" :compact=true></status> - <div class="status-preview status-preview-loading" v-else> - <i class="icon-spin4 animate-spin"></i> + <div + v-if="showPreview" + class="status-preview-container" + > + <status + v-if="preview" + class="status-preview" + :is-preview="true" + :statusoid="preview" + :compact="true" + /> + <div + v-else + class="status-preview status-preview-loading" + > + <i class="icon-spin4 animate-spin" /> </div> </div> - <div class="status-content-wrapper" :class="{ 'tall-status': !showingLongSubject }" v-if="longSubject"> - <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">Show more</a> - <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div> - <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">Show less</a> + <div + v-if="longSubject" + class="status-content-wrapper" + :class="{ 'tall-status': !showingLongSubject }" + > + <a + v-if="!showingLongSubject" + class="tall-status-hider" + :class="{ 'tall-status-hider_focused': isFocused }" + href="#" + @click.prevent="showingLongSubject=true" + >{{ $t("general.show_more") }}</a> + <div + class="status-content media-body" + @click.prevent="linkClicked" + v-html="contentHtml" + /> + <a + v-if="showingLongSubject" + href="#" + class="status-unhider" + @click.prevent="showingLongSubject=false" + >{{ $t("general.show_less") }}</a> + </div> + <div + v-else + :class="{'tall-status': hideTallStatus}" + class="status-content-wrapper" + > + <a + v-if="hideTallStatus" + class="tall-status-hider" + :class="{ 'tall-status-hider_focused': isFocused }" + href="#" + @click.prevent="toggleShowMore" + >{{ $t("general.show_more") }}</a> + <div + v-if="!hideSubjectStatus" + class="status-content media-body" + @click.prevent="linkClicked" + v-html="contentHtml" + /> + <div + v-else + class="status-content media-body" + @click.prevent="linkClicked" + v-html="status.summary_html" + /> + <a + v-if="hideSubjectStatus" + href="#" + class="cw-status-hider" + @click.prevent="toggleShowMore" + >{{ $t("general.show_more") }}</a> + <a + v-if="showingMore" + href="#" + class="status-unhider" + @click.prevent="toggleShowMore" + >{{ $t("general.show_less") }}</a> </div> - <div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper" v-else> - <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">Show more</a> - <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html" v-if="!hideSubjectStatus"></div> - <div @click.prevent="linkClicked" class="status-content media-body" v-html="status.summary_html" v-else></div> - <a v-if="hideSubjectStatus" href="#" class="cw-status-hider" @click.prevent="toggleShowMore">Show more</a> - <a v-if="showingMore" href="#" class="status-unhider" @click.prevent="toggleShowMore">Show less</a> + + <div v-if="status.poll && status.poll.options"> + <poll :base-poll="status.poll" /> </div> - <div v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body"> + <div + v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" + class="attachments media-body" + > <attachment - class="non-gallery" v-for="attachment in nonGalleryAttachments" + :key="attachment.id" + class="non-gallery" :size="attachmentSize" :nsfw="nsfwClickthrough" :attachment="attachment" - :allowPlay="true" - :setMedia="setMedia()" - :key="attachment.id" + :allow-play="true" + :set-media="setMedia()" /> <gallery v-if="galleryAttachments.length > 0" :nsfw="nsfwClickthrough" :attachments="galleryAttachments" - :setMedia="setMedia()" + :set-media="setMedia()" /> </div> - <div v-if="status.card && !hideSubjectStatus && !noHeading" class="link-preview media-body"> - <link-preview :card="status.card" :size="attachmentSize" :nsfw="nsfwClickthrough" /> + <div + v-if="status.card && !hideSubjectStatus && !noHeading" + class="link-preview media-body" + > + <link-preview + :card="status.card" + :size="attachmentSize" + :nsfw="nsfwClickthrough" + /> </div> - <div v-if="!noHeading && !isPreview" class='status-actions media-body'> - <div v-if="loggedIn"> - <a href="#" v-on:click.prevent="toggleReplying" :title="$t('tool_tip.reply')"> - <i class="button-icon icon-reply" :class="{'icon-reply-active': replying}"></i> - </a> + <transition name="fade"> + <div + v-if="!hidePostStats && isFocused && combinedFavsAndRepeatsUsers.length > 0" + class="favs-repeated-users" + > + <div class="stats"> + <div + v-if="statusFromGlobalRepository.rebloggedBy && statusFromGlobalRepository.rebloggedBy.length > 0" + class="stat-count" + > + <a class="stat-title">{{ $t('status.repeats') }}</a> + <div class="stat-number"> + {{ statusFromGlobalRepository.rebloggedBy.length }} + </div> + </div> + <div + v-if="statusFromGlobalRepository.favoritedBy && statusFromGlobalRepository.favoritedBy.length > 0" + class="stat-count" + > + <a class="stat-title">{{ $t('status.favorites') }}</a> + <div class="stat-number"> + {{ statusFromGlobalRepository.favoritedBy.length }} + </div> + </div> + <div class="avatar-row"> + <AvatarList :users="combinedFavsAndRepeatsUsers" /> + </div> + </div> </div> - <retweet-button :visibility='status.visibility' :loggedIn='loggedIn' :status='status'></retweet-button> - <favorite-button :loggedIn='loggedIn' :status='status'></favorite-button> - <delete-button :status='status'></delete-button> + </transition> + + <div + v-if="!noHeading && !isPreview" + class="status-actions media-body" + > + <div> + <i + v-if="loggedIn" + class="button-icon icon-reply" + :title="$t('tool_tip.reply')" + :class="{'button-icon-active': replying}" + @click.prevent="toggleReplying" + /> + <i + v-else + class="button-icon button-icon-disabled icon-reply" + :title="$t('tool_tip.reply')" + /> + <span v-if="status.replies_count > 0">{{ status.replies_count }}</span> + </div> + <retweet-button + :visibility="status.visibility" + :logged-in="loggedIn" + :status="status" + /> + <favorite-button + :logged-in="loggedIn" + :status="status" + /> + <extra-buttons + :status="status" + @onError="showError" + @onSuccess="clearError" + /> </div> </div> </div> - <div class="container" v-if="replying"> - <div class="reply-left"/> - <post-status-form class="reply-body" :reply-to="status.id" :attentions="status.attentions" :repliedUser="status.user" :copy-message-scope="status.visibility" :subject="replySubject" v-on:posted="toggleReplying"/> + <div + v-if="replying" + class="container" + > + <PostStatusForm + class="reply-body" + :reply-to="status.id" + :attentions="status.attentions" + :replied-user="status.user" + :copy-message-scope="status.visibility" + :subject="replySubject" + @posted="toggleReplying" + /> </div> </template> </div> +<!-- eslint-enable vue/no-v-html --> </template> <script src="./status.js" ></script> @@ -176,6 +451,13 @@ $status-margin: 0.75em; max-width: 100%; } +.status-pin { + padding: $status-margin $status-margin 0; + display: flex; + align-items: center; + justify-content: flex-end; +} + .status-preview { position: absolute; max-width: 95%; @@ -219,7 +501,6 @@ $status-margin: 0.75em; } .status-el { - hyphens: auto; overflow-wrap: break-word; word-wrap: break-word; word-break: break-word; @@ -384,6 +665,15 @@ $status-margin: 0.75em; height: 220px; overflow-x: hidden; overflow-y: hidden; + z-index: 1; + .status-content { + height: 100%; + mask: linear-gradient(to top, white, transparent) bottom/100% 70px no-repeat, + linear-gradient(to top, white, white); + // Autoprefixed seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + } } .tall-status-hider { @@ -395,12 +685,7 @@ $status-margin: 0.75em; width: 100%; text-align: center; line-height: 110px; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); - &_focused { - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--lightBg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--lightBg, $fallback--lightBg) 80%); - } + z-index: 2; } .status-unhider, .cw-status-hider { @@ -413,6 +698,7 @@ $status-margin: 0.75em; .status-content { font-family: var(--postFont, sans-serif); line-height: 1.4em; + white-space: pre-wrap; img, video { max-width: 100%; @@ -538,24 +824,24 @@ $status-margin: 0.75em; } .status-actions { + position: relative; width: 100%; display: flex; margin-top: $status-margin; - div, favorite-button { + > * { max-width: 4em; flex: 1; } } -.icon-reply:hover { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); -} - -.icon-reply.icon-reply-active { - color: $fallback--cBlue; - color: var(--cBlue, $fallback--cBlue); +.button-icon.icon-reply { + &:not(.button-icon-disabled):hover, + &.button-icon-active { + color: $fallback--cBlue; + color: var(--cBlue, $fallback--cBlue); + cursor: pointer; + } } .status:hover .animated.avatar { @@ -595,16 +881,11 @@ a.unmute { margin-left: auto; } -.reply-left { - flex: 0; - min-width: 48px; -} - .reply-body { flex: 1; } -.timeline > { +.timeline :not(.panel-disabled) > { .status-el:last-child { border-radius: 0 0 $fallback--panelRadius $fallback--panelRadius; border-radius: 0 0 var(--panelRadius, $fallback--panelRadius) var(--panelRadius, $fallback--panelRadius); @@ -612,6 +893,50 @@ a.unmute { } } +.favs-repeated-users { + margin-top: $status-margin; + + .stats { + width: 100%; + display: flex; + line-height: 1em; + + .stat-count { + margin-right: $status-margin; + + .stat-title { + color: var(--faint, $fallback--faint); + font-size: 12px; + text-transform: uppercase; + position: relative; + } + + .stat-number { + font-weight: bolder; + font-size: 16px; + line-height: 1em; + } + } + + .avatar-row { + flex: 1; + overflow: hidden; + position: relative; + display: flex; + align-items: center; + + &::before { + content: ''; + position: absolute; + height: 100%; + width: 1px; + left: 0; + background-color: var(--faint, $fallback--faint); + } + } + } +} + @media all and (max-width: 800px) { .status-el { .retweet-info { diff --git a/src/components/status_or_conversation/status_or_conversation.js b/src/components/status_or_conversation/status_or_conversation.js deleted file mode 100644 index 441552ca..00000000 --- a/src/components/status_or_conversation/status_or_conversation.js +++ /dev/null @@ -1,22 +0,0 @@ -import Status from '../status/status.vue' -import Conversation from '../conversation/conversation.vue' - -const statusOrConversation = { - props: ['statusoid'], - data () { - return { - expanded: false - } - }, - components: { - Status, - Conversation - }, - methods: { - toggleExpanded () { - this.expanded = !this.expanded - } - } -} - -export default statusOrConversation diff --git a/src/components/status_or_conversation/status_or_conversation.vue b/src/components/status_or_conversation/status_or_conversation.vue deleted file mode 100644 index 9647d5eb..00000000 --- a/src/components/status_or_conversation/status_or_conversation.vue +++ /dev/null @@ -1,14 +0,0 @@ -<template> - <div> - <conversation v-if="expanded" @toggleExpanded="toggleExpanded" :collapsable="true" :statusoid="statusoid"></conversation> - <status v-if="!expanded" @toggleExpanded="toggleExpanded" :expandable="true" :inConversation="false" :focused="false" :statusoid="statusoid"></status> - </div> -</template> - -<script src="./status_or_conversation.js"></script> - -<style lang="scss"> - .spacer { - height: 1em - } -</style> diff --git a/src/components/sticker_picker/sticker_picker.js b/src/components/sticker_picker/sticker_picker.js new file mode 100644 index 00000000..8daf3f07 --- /dev/null +++ b/src/components/sticker_picker/sticker_picker.js @@ -0,0 +1,52 @@ +/* eslint-env browser */ +import statusPosterService from '../../services/status_poster/status_poster.service.js' +import TabSwitcher from '../tab_switcher/tab_switcher.js' + +const StickerPicker = { + components: { + TabSwitcher + }, + data () { + return { + meta: { + stickers: [] + }, + path: '' + } + }, + computed: { + pack () { + return this.$store.state.instance.stickers || [] + } + }, + methods: { + clear () { + this.meta = { + stickers: [] + } + }, + pick (sticker, name) { + const store = this.$store + // TODO remove this workaround by finding a way to bypass reuploads + fetch(sticker) + .then((res) => { + res.blob().then((blob) => { + var file = new File([blob], name, { mimetype: 'image/png' }) + var formData = new FormData() + formData.append('file', file) + statusPosterService.uploadMedia({ store, formData }) + .then((fileData) => { + this.$emit('uploaded', fileData) + this.clear() + }, (error) => { + console.warn("Can't attach sticker") + console.warn(error) + this.$emit('upload-failed', 'default') + }) + }) + }) + } + } +} + +export default StickerPicker diff --git a/src/components/sticker_picker/sticker_picker.vue b/src/components/sticker_picker/sticker_picker.vue new file mode 100644 index 00000000..323855b9 --- /dev/null +++ b/src/components/sticker_picker/sticker_picker.vue @@ -0,0 +1,62 @@ +<template> + <div + class="sticker-picker" + > + <tab-switcher + class="tab-switcher" + :render-only-focused="true" + scrollable-tabs + > + <div + v-for="stickerpack in pack" + :key="stickerpack.path" + :image-tooltip="stickerpack.meta.title" + :image="stickerpack.path + stickerpack.meta.tabIcon" + class="sticker-picker-content" + > + <div + v-for="sticker in stickerpack.meta.stickers" + :key="sticker" + class="sticker" + @click.stop.prevent="pick(stickerpack.path + sticker, stickerpack.meta.title)" + > + <img + :src="stickerpack.path + sticker" + > + </div> + </div> + </tab-switcher> + </div> +</template> + +<script src="./sticker_picker.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.sticker-picker { + width: 100%; + position: relative; + .tab-switcher { + position: absolute; + top: 0; + bottom: 0; + left: 0; + right: 0; + } + .sticker-picker-content { + .sticker { + display: inline-block; + width: 20%; + height: 20%; + img { + width: 100%; + &:hover { + filter: drop-shadow(0 0 5px var(--link, $fallback--link)); + } + } + } + } +} + +</style> diff --git a/src/components/still-image/still-image.vue b/src/components/still-image/still-image.vue index af824fa2..4137bd59 100644 --- a/src/components/still-image/still-image.vue +++ b/src/components/still-image/still-image.vue @@ -1,7 +1,21 @@ <template> - <div class='still-image' :class='{ animated: animated }' > - <canvas ref="canvas" v-if="animated"></canvas> - <img ref="src" :src="src" :referrerpolicy="referrerpolicy" v-on:load="onLoad" @error="onError"/> + <div + class="still-image" + :class="{ animated: animated }" + > + <canvas + v-if="animated" + ref="canvas" + /> + <!-- NOTE: key is required to force to re-render img tag when src is changed --> + <img + ref="src" + :key="src" + :src="src" + :referrerpolicy="referrerpolicy" + @load="onLoad" + @error="onError" + > </div> </template> diff --git a/src/components/style_switcher/preview.vue b/src/components/style_switcher/preview.vue index 634f5b35..101a32bd 100644 --- a/src/components/style_switcher/preview.vue +++ b/src/components/style_switcher/preview.vue @@ -1,78 +1,101 @@ <template> -<div class="panel dummy"> - <div class="panel-heading"> - <div class="title"> - {{$t('settings.style.preview.header')}} - <span class="badge badge-notification"> - 99 + <div class="panel dummy"> + <div class="panel-heading"> + <div class="title"> + {{ $t('settings.style.preview.header') }} + <span class="badge badge-notification"> + 99 + </span> + </div> + <span class="faint"> + {{ $t('settings.style.preview.header_faint') }} + </span> + <span class="alert error"> + {{ $t('settings.style.preview.error') }} </span> + <button class="btn"> + {{ $t('settings.style.preview.button') }} + </button> </div> - <span class="faint"> - {{$t('settings.style.preview.header_faint')}} - </span> - <span class="alert error"> - {{$t('settings.style.preview.error')}} - </span> - <button class="btn"> - {{$t('settings.style.preview.button')}} - </button> - </div> - <div class="panel-body theme-preview-content"> - <div class="post"> - <div class="avatar"> - ( ͡° ͜ʖ ͡°) - </div> - <div class="content"> - <h4> - {{$t('settings.style.preview.content')}} - </h4> + <div class="panel-body theme-preview-content"> + <div class="post"> + <div class="avatar"> + ( ͡° ͜ʖ ͡°) + </div> + <div class="content"> + <h4> + {{ $t('settings.style.preview.content') }} + </h4> - <i18n path="settings.style.preview.text"> - <code style="font-family: var(--postCodeFont)"> - {{$t('settings.style.preview.mono')}} - </code> - <a style="color: var(--link)"> - {{$t('settings.style.preview.link')}} - </a> - </i18n> + <i18n path="settings.style.preview.text"> + <code style="font-family: var(--postCodeFont)"> + {{ $t('settings.style.preview.mono') }} + </code> + <a style="color: var(--link)"> + {{ $t('settings.style.preview.link') }} + </a> + </i18n> - <div class="icons"> - <i style="color: var(--cBlue)" class="button-icon icon-reply"/> - <i style="color: var(--cGreen)" class="button-icon icon-retweet"/> - <i style="color: var(--cOrange)" class="button-icon icon-star"/> - <i style="color: var(--cRed)" class="button-icon icon-cancel"/> + <div class="icons"> + <i + style="color: var(--cBlue)" + class="button-icon icon-reply" + /> + <i + style="color: var(--cGreen)" + class="button-icon icon-retweet" + /> + <i + style="color: var(--cOrange)" + class="button-icon icon-star" + /> + <i + style="color: var(--cRed)" + class="button-icon icon-cancel" + /> + </div> </div> </div> - </div> - <div class="after-post"> - <div class="avatar-alt"> - :^) - </div> - <div class="content"> - <i18n path="settings.style.preview.fine_print" tag="span" class="faint"> - <a style="color: var(--faintLink)"> - {{$t('settings.style.preview.faint_link')}} - </a> - </i18n> + <div class="after-post"> + <div class="avatar-alt"> + :^) + </div> + <div class="content"> + <i18n + path="settings.style.preview.fine_print" + tag="span" + class="faint" + > + <a style="color: var(--faintLink)"> + {{ $t('settings.style.preview.faint_link') }} + </a> + </i18n> + </div> </div> - </div> - <div class="separator"></div> - - <span class="alert error"> - {{$t('settings.style.preview.error')}} - </span> - <input :value="$t('settings.style.preview.input')" type="text"> + <div class="separator" /> - <div class="actions"> - <span class="checkbox"> - <input checked="very yes" type="checkbox" id="preview_checkbox"> - <label for="preview_checkbox">{{$t('settings.style.preview.checkbox')}}</label> + <span class="alert error"> + {{ $t('settings.style.preview.error') }} </span> - <button class="btn"> - {{$t('settings.style.preview.button')}} - </button> + <input + :value="$t('settings.style.preview.input')" + type="text" + > + + <div class="actions"> + <span class="checkbox"> + <input + id="preview_checkbox" + checked="very yes" + type="checkbox" + > + <label for="preview_checkbox">{{ $t('settings.style.preview.checkbox') }}</label> + </span> + <button class="btn"> + {{ $t('settings.style.preview.button') }} + </button> + </div> </div> </div> -</div> </template> diff --git a/src/components/style_switcher/style_switcher.vue b/src/components/style_switcher/style_switcher.vue index 84963c81..d24394a4 100644 --- a/src/components/style_switcher/style_switcher.vue +++ b/src/components/style_switcher/style_switcher.vue @@ -1,274 +1,593 @@ <template> -<div class="style-switcher"> - <div class="presets-container"> - <div class="save-load"> - <export-import - :exportObject='exportedTheme' - :exportLabel='$t("settings.export_theme")' - :importLabel='$t("settings.import_theme")' - :importFailedText='$t("settings.invalid_theme_imported")' - :onImport='onImport' - :validator='importValidator'> - <template slot="before"> - <div class="presets"> - {{$t('settings.presets')}} - <label for="preset-switcher" class='select'> - <select id="preset-switcher" v-model="selected" class="preset-switcher"> - <option v-for="style in availableStyles" - :value="style" - :style="{ - backgroundColor: style[1] || style.theme.colors.bg, - color: style[3] || style.theme.colors.text - }"> - {{style[0] || style.name}} - </option> - </select> - <i class="icon-down-open"/> - </label> - </div> - </template> - </export-import> - </div> - <div class="save-load-options"> - <span class="keep-option"> - <input - id="keep-color" - type="checkbox" - v-model="keepColor"> - <label for="keep-color">{{$t('settings.style.switcher.keep_color')}}</label> - </span> - <span class="keep-option"> - <input - id="keep-shadows" - type="checkbox" - v-model="keepShadows"> - <label for="keep-shadows">{{$t('settings.style.switcher.keep_shadows')}}</label> - </span> - <span class="keep-option"> - <input - id="keep-opacity" - type="checkbox" - v-model="keepOpacity"> - <label for="keep-opacity">{{$t('settings.style.switcher.keep_opacity')}}</label> - </span> - <span class="keep-option"> - <input - id="keep-roundness" - type="checkbox" - v-model="keepRoundness"> - <label for="keep-roundness">{{$t('settings.style.switcher.keep_roundness')}}</label> - </span> - <span class="keep-option"> - <input - id="keep-fonts" - type="checkbox" - v-model="keepFonts"> - <label for="keep-fonts">{{$t('settings.style.switcher.keep_fonts')}}</label> - </span> - <p>{{$t('settings.style.switcher.save_load_hint')}}</p> + <div class="style-switcher"> + <div class="presets-container"> + <div class="save-load"> + <export-import + :export-object="exportedTheme" + :export-label="$t("settings.export_theme")" + :import-label="$t("settings.import_theme")" + :import-failed-text="$t("settings.invalid_theme_imported")" + :on-import="onImport" + :validator="importValidator" + > + <template slot="before"> + <div class="presets"> + {{ $t('settings.presets') }} + <label + for="preset-switcher" + class="select" + > + <select + id="preset-switcher" + v-model="selected" + class="preset-switcher" + > + <option + v-for="style in availableStyles" + :key="style.name" + :value="style" + :style="{ + backgroundColor: style[1] || style.theme.colors.bg, + color: style[3] || style.theme.colors.text + }" + > + {{ style[0] || style.name }} + </option> + </select> + <i class="icon-down-open" /> + </label> + </div> + </template> + </export-import> + </div> + <div class="save-load-options"> + <span class="keep-option"> + <input + id="keep-color" + v-model="keepColor" + type="checkbox" + > + <label for="keep-color">{{ $t('settings.style.switcher.keep_color') }}</label> + </span> + <span class="keep-option"> + <input + id="keep-shadows" + v-model="keepShadows" + type="checkbox" + > + <label for="keep-shadows">{{ $t('settings.style.switcher.keep_shadows') }}</label> + </span> + <span class="keep-option"> + <input + id="keep-opacity" + v-model="keepOpacity" + type="checkbox" + > + <label for="keep-opacity">{{ $t('settings.style.switcher.keep_opacity') }}</label> + </span> + <span class="keep-option"> + <input + id="keep-roundness" + v-model="keepRoundness" + type="checkbox" + > + <label for="keep-roundness">{{ $t('settings.style.switcher.keep_roundness') }}</label> + </span> + <span class="keep-option"> + <input + id="keep-fonts" + v-model="keepFonts" + type="checkbox" + > + <label for="keep-fonts">{{ $t('settings.style.switcher.keep_fonts') }}</label> + </span> + <p>{{ $t('settings.style.switcher.save_load_hint') }}</p> + </div> </div> - </div> - <div class="preview-container"> - <preview :style="previewRules"/> - </div> + <div class="preview-container"> + <preview :style="previewRules" /> + </div> - <keep-alive> - <tab-switcher key="style-tweak"> - <div :label="$t('settings.style.common_colors._tab_label')" class="color-container"> - <div class="tab-header"> - <p>{{$t('settings.theme_help')}}</p> - <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button> - <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button> - </div> - <p>{{$t('settings.theme_help_v2_1')}}</p> - <h4>{{ $t('settings.style.common_colors.main') }}</h4> - <div class="color-item"> - <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/> - <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/> - <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/> - <ContrastRatio :contrast="previewContrast.bgText"/> - <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/> - <ContrastRatio :contrast="previewContrast.bgLink"/> - </div> - <div class="color-item"> - <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/> - <ColorInput name="fgTextColor" v-model="fgTextColorLocal" :label="$t('settings.text')" :fallback="previewTheme.colors.fgText"/> - <ColorInput name="fgLinkColor" v-model="fgLinkColorLocal" :label="$t('settings.links')" :fallback="previewTheme.colors.fgLink"/> - <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p> - </div> - <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4> - <div class="color-item"> - <ColorInput name="cRedColor" v-model="cRedColorLocal" :label="$t('settings.cRed')"/> - <ContrastRatio :contrast="previewContrast.bgRed"/> - <ColorInput name="cBlueColor" v-model="cBlueColorLocal" :label="$t('settings.cBlue')"/> - <ContrastRatio :contrast="previewContrast.bgBlue"/> - </div> - <div class="color-item"> - <ColorInput name="cGreenColor" v-model="cGreenColorLocal" :label="$t('settings.cGreen')"/> - <ContrastRatio :contrast="previewContrast.bgGreen"/> - <ColorInput name="cOrangeColor" v-model="cOrangeColorLocal" :label="$t('settings.cOrange')"/> - <ContrastRatio :contrast="previewContrast.bgOrange"/> + <keep-alive> + <tab-switcher key="style-tweak"> + <div + :label="$t('settings.style.common_colors._tab_label')" + class="color-container" + > + <div class="tab-header"> + <p>{{ $t('settings.theme_help') }}</p> + <button + class="btn" + @click="clearOpacity" + > + {{ $t('settings.style.switcher.clear_opacity') }} + </button> + <button + class="btn" + @click="clearV1" + > + {{ $t('settings.style.switcher.clear_all') }} + </button> + </div> + <p>{{ $t('settings.theme_help_v2_1') }}</p> + <h4>{{ $t('settings.style.common_colors.main') }}</h4> + <div class="color-item"> + <ColorInput + v-model="bgColorLocal" + name="bgColor" + :label="$t('settings.background')" + /> + <OpacityInput + v-model="bgOpacityLocal" + name="bgOpacity" + :fallback="previewTheme.opacity.bg || 1" + /> + <ColorInput + v-model="textColorLocal" + name="textColor" + :label="$t('settings.text')" + /> + <ContrastRatio :contrast="previewContrast.bgText" /> + <ColorInput + v-model="linkColorLocal" + name="linkColor" + :label="$t('settings.links')" + /> + <ContrastRatio :contrast="previewContrast.bgLink" /> + </div> + <div class="color-item"> + <ColorInput + v-model="fgColorLocal" + name="fgColor" + :label="$t('settings.foreground')" + /> + <ColorInput + v-model="fgTextColorLocal" + name="fgTextColor" + :label="$t('settings.text')" + :fallback="previewTheme.colors.fgText" + /> + <ColorInput + v-model="fgLinkColorLocal" + name="fgLinkColor" + :label="$t('settings.links')" + :fallback="previewTheme.colors.fgLink" + /> + <p>{{ $t('settings.style.common_colors.foreground_hint') }}</p> + </div> + <h4>{{ $t('settings.style.common_colors.rgbo') }}</h4> + <div class="color-item"> + <ColorInput + v-model="cRedColorLocal" + name="cRedColor" + :label="$t('settings.cRed')" + /> + <ContrastRatio :contrast="previewContrast.bgRed" /> + <ColorInput + v-model="cBlueColorLocal" + name="cBlueColor" + :label="$t('settings.cBlue')" + /> + <ContrastRatio :contrast="previewContrast.bgBlue" /> + </div> + <div class="color-item"> + <ColorInput + v-model="cGreenColorLocal" + name="cGreenColor" + :label="$t('settings.cGreen')" + /> + <ContrastRatio :contrast="previewContrast.bgGreen" /> + <ColorInput + v-model="cOrangeColorLocal" + name="cOrangeColor" + :label="$t('settings.cOrange')" + /> + <ContrastRatio :contrast="previewContrast.bgOrange" /> + </div> + <p>{{ $t('settings.theme_help_v2_2') }}</p> </div> - <p>{{$t('settings.theme_help_v2_2')}}</p> - </div> - <div :label="$t('settings.style.advanced_colors._tab_label')" class="color-container"> - <div class="tab-header"> - <p>{{$t('settings.theme_help')}}</p> - <button class="btn" @click="clearOpacity">{{$t('settings.style.switcher.clear_opacity')}}</button> - <button class="btn" @click="clearV1">{{$t('settings.style.switcher.clear_all')}}</button> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> - <ColorInput name="alertError" v-model="alertErrorColorLocal" :label="$t('settings.style.advanced_colors.alert_error')" :fallback="previewTheme.colors.alertError"/> - <ContrastRatio :contrast="previewContrast.alertError"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> - <ColorInput name="badgeNotification" v-model="badgeNotificationColorLocal" :label="$t('settings.style.advanced_colors.badge_notification')" :fallback="previewTheme.colors.badgeNotification"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4> - <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> - <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/> - <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.text')"/> - <ContrastRatio :contrast="previewContrast.panelText" large="1"/> - <ColorInput name="panelLinkColor" v-model="panelLinkColorLocal" :fallback="previewTheme.colors.panelLink" :label="$t('settings.links')"/> - <ContrastRatio :contrast="previewContrast.panelLink" large="1"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4> - <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> - <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/> - <ContrastRatio :contrast="previewContrast.topBarText"/> - <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/> - <ContrastRatio :contrast="previewContrast.topBarLink"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4> - <ColorInput name="inputColor" v-model="inputColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> - <OpacityInput name="inputOpacity" v-model="inputOpacityLocal" :fallback="previewTheme.opacity.input || 1"/> - <ColorInput name="inputTextColor" v-model="inputTextColorLocal" :fallback="previewTheme.colors.inputText" :label="$t('settings.text')"/> - <ContrastRatio :contrast="previewContrast.inputText"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4> - <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/> - <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/> - <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/> - <ContrastRatio :contrast="previewContrast.btnText"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> - <ColorInput name="borderColor" v-model="borderColorLocal" :fallback="previewTheme.colors.border" :label="$t('settings.style.common.color')"/> - <OpacityInput name="borderOpacity" v-model="borderOpacityLocal" :fallback="previewTheme.opacity.border || 1"/> - </div> - <div class="color-item"> - <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4> - <ColorInput name="faintColor" v-model="faintColorLocal" :fallback="previewTheme.colors.faint || 1" :label="$t('settings.text')"/> - <ColorInput name="faintLinkColor" v-model="faintLinkColorLocal" :fallback="previewTheme.colors.faintLink" :label="$t('settings.links')"/> - <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.style.advanced_colors.panel_header')"/> - <OpacityInput name="faintOpacity" v-model="faintOpacityLocal" :fallback="previewTheme.opacity.faint || 0.5"/> + <div + :label="$t('settings.style.advanced_colors._tab_label')" + class="color-container" + > + <div class="tab-header"> + <p>{{ $t('settings.theme_help') }}</p> + <button + class="btn" + @click="clearOpacity" + > + {{ $t('settings.style.switcher.clear_opacity') }} + </button> + <button + class="btn" + @click="clearV1" + > + {{ $t('settings.style.switcher.clear_all') }} + </button> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.alert') }}</h4> + <ColorInput + v-model="alertErrorColorLocal" + name="alertError" + :label="$t('settings.style.advanced_colors.alert_error')" + :fallback="previewTheme.colors.alertError" + /> + <ContrastRatio :contrast="previewContrast.alertError" /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.badge') }}</h4> + <ColorInput + v-model="badgeNotificationColorLocal" + name="badgeNotification" + :label="$t('settings.style.advanced_colors.badge_notification')" + :fallback="previewTheme.colors.badgeNotification" + /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.panel_header') }}</h4> + <ColorInput + v-model="panelColorLocal" + name="panelColor" + :fallback="fgColorLocal" + :label="$t('settings.background')" + /> + <OpacityInput + v-model="panelOpacityLocal" + name="panelOpacity" + :fallback="previewTheme.opacity.panel || 1" + /> + <ColorInput + v-model="panelTextColorLocal" + name="panelTextColor" + :fallback="previewTheme.colors.panelText" + :label="$t('settings.text')" + /> + <ContrastRatio + :contrast="previewContrast.panelText" + large="1" + /> + <ColorInput + v-model="panelLinkColorLocal" + name="panelLinkColor" + :fallback="previewTheme.colors.panelLink" + :label="$t('settings.links')" + /> + <ContrastRatio + :contrast="previewContrast.panelLink" + large="1" + /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.top_bar') }}</h4> + <ColorInput + v-model="topBarColorLocal" + name="topBarColor" + :fallback="fgColorLocal" + :label="$t('settings.background')" + /> + <ColorInput + v-model="topBarTextColorLocal" + name="topBarTextColor" + :fallback="previewTheme.colors.topBarText" + :label="$t('settings.text')" + /> + <ContrastRatio :contrast="previewContrast.topBarText" /> + <ColorInput + v-model="topBarLinkColorLocal" + name="topBarLinkColor" + :fallback="previewTheme.colors.topBarLink" + :label="$t('settings.links')" + /> + <ContrastRatio :contrast="previewContrast.topBarLink" /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.inputs') }}</h4> + <ColorInput + v-model="inputColorLocal" + name="inputColor" + :fallback="fgColorLocal" + :label="$t('settings.background')" + /> + <OpacityInput + v-model="inputOpacityLocal" + name="inputOpacity" + :fallback="previewTheme.opacity.input || 1" + /> + <ColorInput + v-model="inputTextColorLocal" + name="inputTextColor" + :fallback="previewTheme.colors.inputText" + :label="$t('settings.text')" + /> + <ContrastRatio :contrast="previewContrast.inputText" /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.buttons') }}</h4> + <ColorInput + v-model="btnColorLocal" + name="btnColor" + :fallback="fgColorLocal" + :label="$t('settings.background')" + /> + <OpacityInput + v-model="btnOpacityLocal" + name="btnOpacity" + :fallback="previewTheme.opacity.btn || 1" + /> + <ColorInput + v-model="btnTextColorLocal" + name="btnTextColor" + :fallback="previewTheme.colors.btnText" + :label="$t('settings.text')" + /> + <ContrastRatio :contrast="previewContrast.btnText" /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.borders') }}</h4> + <ColorInput + v-model="borderColorLocal" + name="borderColor" + :fallback="previewTheme.colors.border" + :label="$t('settings.style.common.color')" + /> + <OpacityInput + v-model="borderOpacityLocal" + name="borderOpacity" + :fallback="previewTheme.opacity.border || 1" + /> + </div> + <div class="color-item"> + <h4>{{ $t('settings.style.advanced_colors.faint_text') }}</h4> + <ColorInput + v-model="faintColorLocal" + name="faintColor" + :fallback="previewTheme.colors.faint || 1" + :label="$t('settings.text')" + /> + <ColorInput + v-model="faintLinkColorLocal" + name="faintLinkColor" + :fallback="previewTheme.colors.faintLink" + :label="$t('settings.links')" + /> + <ColorInput + v-model="panelFaintColorLocal" + name="panelFaintColor" + :fallback="previewTheme.colors.panelFaint" + :label="$t('settings.style.advanced_colors.panel_header')" + /> + <OpacityInput + v-model="faintOpacityLocal" + name="faintOpacity" + :fallback="previewTheme.opacity.faint || 0.5" + /> + </div> </div> - </div> - <div :label="$t('settings.style.radii._tab_label')" class="radius-container"> - <div class="tab-header"> - <p>{{$t('settings.radii_help')}}</p> - <button class="btn" @click="clearRoundness">{{$t('settings.style.switcher.clear_all')}}</button> + <div + :label="$t('settings.style.radii._tab_label')" + class="radius-container" + > + <div class="tab-header"> + <p>{{ $t('settings.radii_help') }}</p> + <button + class="btn" + @click="clearRoundness" + > + {{ $t('settings.style.switcher.clear_all') }} + </button> + </div> + <RangeInput + v-model="btnRadiusLocal" + name="btnRadius" + :label="$t('settings.btnRadius')" + :fallback="previewTheme.radii.btn" + max="16" + hard-min="0" + /> + <RangeInput + v-model="inputRadiusLocal" + name="inputRadius" + :label="$t('settings.inputRadius')" + :fallback="previewTheme.radii.input" + max="9" + hard-min="0" + /> + <RangeInput + v-model="checkboxRadiusLocal" + name="checkboxRadius" + :label="$t('settings.checkboxRadius')" + :fallback="previewTheme.radii.checkbox" + max="16" + hard-min="0" + /> + <RangeInput + v-model="panelRadiusLocal" + name="panelRadius" + :label="$t('settings.panelRadius')" + :fallback="previewTheme.radii.panel" + max="50" + hard-min="0" + /> + <RangeInput + v-model="avatarRadiusLocal" + name="avatarRadius" + :label="$t('settings.avatarRadius')" + :fallback="previewTheme.radii.avatar" + max="28" + hard-min="0" + /> + <RangeInput + v-model="avatarAltRadiusLocal" + name="avatarAltRadius" + :label="$t('settings.avatarAltRadius')" + :fallback="previewTheme.radii.avatarAlt" + max="28" + hard-min="0" + /> + <RangeInput + v-model="attachmentRadiusLocal" + name="attachmentRadius" + :label="$t('settings.attachmentRadius')" + :fallback="previewTheme.radii.attachment" + max="50" + hard-min="0" + /> + <RangeInput + v-model="tooltipRadiusLocal" + name="tooltipRadius" + :label="$t('settings.tooltipRadius')" + :fallback="previewTheme.radii.tooltip" + max="50" + hard-min="0" + /> </div> - <RangeInput name="btnRadius" :label="$t('settings.btnRadius')" v-model="btnRadiusLocal" :fallback="previewTheme.radii.btn" max="16" hardMin="0"/> - <RangeInput name="inputRadius" :label="$t('settings.inputRadius')" v-model="inputRadiusLocal" :fallback="previewTheme.radii.input" max="9" hardMin="0"/> - <RangeInput name="checkboxRadius" :label="$t('settings.checkboxRadius')" v-model="checkboxRadiusLocal" :fallback="previewTheme.radii.checkbox" max="16" hardMin="0"/> - <RangeInput name="panelRadius" :label="$t('settings.panelRadius')" v-model="panelRadiusLocal" :fallback="previewTheme.radii.panel" max="50" hardMin="0"/> - <RangeInput name="avatarRadius" :label="$t('settings.avatarRadius')" v-model="avatarRadiusLocal" :fallback="previewTheme.radii.avatar" max="28" hardMin="0"/> - <RangeInput name="avatarAltRadius" :label="$t('settings.avatarAltRadius')" v-model="avatarAltRadiusLocal" :fallback="previewTheme.radii.avatarAlt" max="28" hardMin="0"/> - <RangeInput name="attachmentRadius" :label="$t('settings.attachmentRadius')" v-model="attachmentRadiusLocal" :fallback="previewTheme.radii.attachment" max="50" hardMin="0"/> - <RangeInput name="tooltipRadius" :label="$t('settings.tooltipRadius')" v-model="tooltipRadiusLocal" :fallback="previewTheme.radii.tooltip" max="50" hardMin="0"/> - </div> - <div :label="$t('settings.style.shadows._tab_label')" class="shadow-container"> - <div class="tab-header shadow-selector"> - <div class="select-container"> - {{$t('settings.style.shadows.component')}} - <label for="shadow-switcher" class="select"> - <select id="shadow-switcher" v-model="shadowSelected" class="shadow-switcher"> - <option v-for="shadow in shadowsAvailable" - :value="shadow"> - {{$t('settings.style.shadows.components.' + shadow)}} - </option> - </select> - <i class="icon-down-open"/> - </label> + <div + :label="$t('settings.style.shadows._tab_label')" + class="shadow-container" + > + <div class="tab-header shadow-selector"> + <div class="select-container"> + {{ $t('settings.style.shadows.component') }} + <label + for="shadow-switcher" + class="select" + > + <select + id="shadow-switcher" + v-model="shadowSelected" + class="shadow-switcher" + > + <option + v-for="shadow in shadowsAvailable" + :key="shadow" + :value="shadow" + > + {{ $t('settings.style.shadows.components.' + shadow) }} + </option> + </select> + <i class="icon-down-open" /> + </label> + </div> + <div class="override"> + <label + for="override" + class="label" + > + {{ $t('settings.style.shadows.override') }} + </label> + <input + id="override" + v-model="currentShadowOverriden" + name="override" + class="input-override" + type="checkbox" + > + <label + class="checkbox-label" + for="override" + /> + </div> + <button + class="btn" + @click="clearShadows" + > + {{ $t('settings.style.switcher.clear_all') }} + </button> </div> - <div class="override"> - <label for="override" class="label"> - {{$t('settings.style.shadows.override')}} - </label> - <input - v-model="currentShadowOverriden" - name="override" - id="override" - class="input-override" - type="checkbox"> - <label class="checkbox-label" for="override"></label> + <shadow-control + v-model="currentShadow" + :ready="!!currentShadowFallback" + :fallback="currentShadowFallback" + /> + <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"> + <i18n + path="settings.style.shadows.filter_hint.always_drop_shadow" + tag="p" + > + <code>filter: drop-shadow()</code> + </i18n> + <p>{{ $t('settings.style.shadows.filter_hint.avatar_inset') }}</p> + <i18n + path="settings.style.shadows.filter_hint.drop_shadow_syntax" + tag="p" + > + <code>drop-shadow</code> + <code>spread-radius</code> + <code>inset</code> + </i18n> + <i18n + path="settings.style.shadows.filter_hint.inset_classic" + tag="p" + > + <code>box-shadow</code> + </i18n> + <p>{{ $t('settings.style.shadows.filter_hint.spread_zero') }}</p> </div> - <button class="btn" @click="clearShadows">{{$t('settings.style.switcher.clear_all')}}</button> </div> - <shadow-control :ready="!!currentShadowFallback" :fallback="currentShadowFallback" v-model="currentShadow"/> - <div v-if="shadowSelected === 'avatar' || shadowSelected === 'avatarStatus'"> - <i18n path="settings.style.shadows.filter_hint.always_drop_shadow" tag="p"> - <code>filter: drop-shadow()</code> - </i18n> - <p>{{$t('settings.style.shadows.filter_hint.avatar_inset')}}</p> - <i18n path="settings.style.shadows.filter_hint.drop_shadow_syntax" tag="p"> - <code>drop-shadow</code> - <code>spread-radius</code> - <code>inset</code> - </i18n> - <i18n path="settings.style.shadows.filter_hint.inset_classic" tag="p"> - <code>box-shadow</code> - </i18n> - <p>{{$t('settings.style.shadows.filter_hint.spread_zero')}}</p> - </div> - </div> - <div :label="$t('settings.style.fonts._tab_label')" class="fonts-container"> - <div class="tab-header"> - <p>{{$t('settings.style.fonts.help')}}</p> - <button class="btn" @click="clearFonts">{{$t('settings.style.switcher.clear_all')}}</button> + <div + :label="$t('settings.style.fonts._tab_label')" + class="fonts-container" + > + <div class="tab-header"> + <p>{{ $t('settings.style.fonts.help') }}</p> + <button + class="btn" + @click="clearFonts" + > + {{ $t('settings.style.switcher.clear_all') }} + </button> + </div> + <FontControl + v-model="fontsLocal.interface" + name="ui" + :label="$t('settings.style.fonts.components.interface')" + :fallback="previewTheme.fonts.interface" + no-inherit="1" + /> + <FontControl + v-model="fontsLocal.input" + name="input" + :label="$t('settings.style.fonts.components.input')" + :fallback="previewTheme.fonts.input" + /> + <FontControl + v-model="fontsLocal.post" + name="post" + :label="$t('settings.style.fonts.components.post')" + :fallback="previewTheme.fonts.post" + /> + <FontControl + v-model="fontsLocal.postCode" + name="postCode" + :label="$t('settings.style.fonts.components.postCode')" + :fallback="previewTheme.fonts.postCode" + /> </div> - <FontControl - name="ui" - v-model="fontsLocal.interface" - :label="$t('settings.style.fonts.components.interface')" - :fallback="previewTheme.fonts.interface" - no-inherit="1"/> - <FontControl - name="input" - v-model="fontsLocal.input" - :label="$t('settings.style.fonts.components.input')" - :fallback="previewTheme.fonts.input"/> - <FontControl - name="post" - v-model="fontsLocal.post" - :label="$t('settings.style.fonts.components.post')" - :fallback="previewTheme.fonts.post"/> - <FontControl - name="postCode" - v-model="fontsLocal.postCode" - :label="$t('settings.style.fonts.components.postCode')" - :fallback="previewTheme.fonts.postCode"/> - </div> - </tab-switcher> - </keep-alive> + </tab-switcher> + </keep-alive> - <div class="apply-container"> - <button class="btn submit" :disabled="!themeValid" @click="setCustomTheme">{{$t('general.apply')}}</button> - <button class="btn" @click="clearAll">{{$t('settings.style.switcher.reset')}}</button> + <div class="apply-container"> + <button + class="btn submit" + :disabled="!themeValid" + @click="setCustomTheme" + > + {{ $t('general.apply') }} + </button> + <button + class="btn" + @click="clearAll" + > + {{ $t('settings.style.switcher.reset') }} + </button> + </div> </div> -</div> </template> <script src="./style_switcher.js"></script> diff --git a/src/components/tab_switcher/tab_switcher.js b/src/components/tab_switcher/tab_switcher.js index 423df258..3ca316b9 100644 --- a/src/components/tab_switcher/tab_switcher.js +++ b/src/components/tab_switcher/tab_switcher.js @@ -4,16 +4,38 @@ import './tab_switcher.scss' export default Vue.component('tab-switcher', { name: 'TabSwitcher', - props: ['renderOnlyFocused'], + props: { + renderOnlyFocused: { + required: false, + type: Boolean, + default: false + }, + onSwitch: { + required: false, + type: Function + }, + activeTab: { + required: false, + type: String + }, + scrollableTabs: { + required: false, + type: Boolean, + default: false + } + }, data () { return { active: this.$slots.default.findIndex(_ => _.tag) } }, - methods: { - activateTab (index) { - return () => { - this.active = index + computed: { + activeIndex () { + // In case of controlled component + if (this.activeTab) { + return this.$slots.default.findIndex(slot => this.activeTab === slot.key) + } else { + return this.active } } }, @@ -23,28 +45,55 @@ export default Vue.component('tab-switcher', { this.active = this.$slots.default.findIndex(_ => _.tag) } }, + methods: { + activateTab (index) { + return (e) => { + e.preventDefault() + if (typeof this.onSwitch === 'function') { + this.onSwitch.call(null, this.$slots.default[index].key) + } + this.active = index + } + } + }, render (h) { const tabs = this.$slots.default - .map((slot, index) => { - if (!slot.tag) return - const classesTab = ['tab'] - const classesWrapper = ['tab-wrapper'] - - if (index === this.active) { - classesTab.push('active') - classesWrapper.push('active') - } + .map((slot, index) => { + if (!slot.tag) return + const classesTab = ['tab'] + const classesWrapper = ['tab-wrapper'] - return ( - <div class={ classesWrapper.join(' ')}> - <button disabled={slot.data.attrs.disabled} onClick={this.activateTab(index)} class={ classesTab.join(' ') }>{slot.data.attrs.label}</button> - </div> - ) - }) + if (this.activeIndex === index) { + classesTab.push('active') + classesWrapper.push('active') + } + if (slot.data.attrs.image) { + return ( + <div class={classesWrapper.join(' ')}> + <button + disabled={slot.data.attrs.disabled} + onClick={this.activateTab(index)} + class={classesTab.join(' ')}> + <img src={slot.data.attrs.image} title={slot.data.attrs['image-tooltip']}/> + {slot.data.attrs.label ? '' : slot.data.attrs.label} + </button> + </div> + ) + } + return ( + <div class={classesWrapper.join(' ')}> + <button + disabled={slot.data.attrs.disabled} + onClick={this.activateTab(index)} + class={classesTab.join(' ')}> + {slot.data.attrs.label}</button> + </div> + ) + }) const contents = this.$slots.default.map((slot, index) => { if (!slot.tag) return - const active = index === this.active + const active = this.activeIndex === index if (this.renderOnlyFocused) { return active ? <div class="active">{slot}</div> @@ -58,7 +107,7 @@ export default Vue.component('tab-switcher', { <div class="tabs"> {tabs} </div> - <div class="contents"> + <div class={'contents' + (this.scrollableTabs ? ' scrollable-tabs' : '')}> {contents} </div> </div> diff --git a/src/components/tab_switcher/tab_switcher.scss b/src/components/tab_switcher/tab_switcher.scss index f7449439..3e5eacd5 100644 --- a/src/components/tab_switcher/tab_switcher.scss +++ b/src/components/tab_switcher/tab_switcher.scss @@ -1,10 +1,21 @@ @import '../../_variables.scss'; .tab-switcher { + display: flex; + flex-direction: column; + .contents { + flex: 1 0 auto; + min-height: 0px; + .hidden { display: none; } + + &.scrollable-tabs { + flex-basis: 0; + overflow-y: auto; + } } .tabs { display: flex; @@ -53,6 +64,12 @@ background: transparent; z-index: 5; } + + img { + max-height: 26px; + vertical-align: top; + margin-top: -5px; + } } &:not(.active) { diff --git a/src/components/tag_timeline/tag_timeline.js b/src/components/tag_timeline/tag_timeline.js index 41b09706..458eb1c5 100644 --- a/src/components/tag_timeline/tag_timeline.js +++ b/src/components/tag_timeline/tag_timeline.js @@ -3,7 +3,7 @@ import Timeline from '../timeline/timeline.vue' const TagTimeline = { created () { this.$store.commit('clearTimeline', { timeline: 'tag' }) - this.$store.dispatch('startFetching', { timeline: 'tag', tag: this.tag }) + this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag }) }, components: { Timeline @@ -15,7 +15,7 @@ const TagTimeline = { watch: { tag () { this.$store.commit('clearTimeline', { timeline: 'tag' }) - this.$store.dispatch('startFetching', { timeline: 'tag', tag: this.tag }) + this.$store.dispatch('startFetchingTimeline', { timeline: 'tag', tag: this.tag }) } }, destroyed () { diff --git a/src/components/tag_timeline/tag_timeline.vue b/src/components/tag_timeline/tag_timeline.vue index 62bb579a..ace96c3f 100644 --- a/src/components/tag_timeline/tag_timeline.vue +++ b/src/components/tag_timeline/tag_timeline.vue @@ -1,5 +1,10 @@ <template> - <Timeline :title="tag" :timeline="timeline" :timeline-name="'tag'" :tag="tag" /> + <Timeline + :title="tag" + :timeline="timeline" + :timeline-name="'tag'" + :tag="tag" + /> </template> -<script src='./tag_timeline.js'></script>
\ No newline at end of file +<script src='./tag_timeline.js'></script> diff --git a/src/components/terms_of_service_panel/terms_of_service_panel.vue b/src/components/terms_of_service_panel/terms_of_service_panel.vue index eb0f2527..63dc58b8 100644 --- a/src/components/terms_of_service_panel/terms_of_service_panel.vue +++ b/src/components/terms_of_service_panel/terms_of_service_panel.vue @@ -2,8 +2,12 @@ <div> <div class="panel panel-default"> <div class="panel-body"> - <div v-html="content" class="tos-content"> - </div> + <!-- eslint-disable vue/no-v-html --> + <div + class="tos-content" + v-html="content" + /> + <!-- eslint-enable vue/no-v-html --> </div> </div> </div> diff --git a/src/components/timeago/timeago.vue b/src/components/timeago/timeago.vue new file mode 100644 index 00000000..6df0524d --- /dev/null +++ b/src/components/timeago/timeago.vue @@ -0,0 +1,51 @@ +<template> + <time + :datetime="time" + :title="localeDateString" + > + {{ $t(relativeTime.key, [relativeTime.num]) }} + </time> +</template> + +<script> +import * as DateUtils from 'src/services/date_utils/date_utils.js' + +export default { + name: 'Timeago', + props: ['time', 'autoUpdate', 'longFormat', 'nowThreshold'], + data () { + return { + relativeTime: { key: 'time.now', num: 0 }, + interval: null + } + }, + computed: { + localeDateString () { + return typeof this.time === 'string' + ? new Date(Date.parse(this.time)).toLocaleString() + : this.time.toLocaleString() + } + }, + created () { + this.refreshRelativeTimeObject() + }, + destroyed () { + clearTimeout(this.interval) + }, + methods: { + refreshRelativeTimeObject () { + const nowThreshold = typeof this.nowThreshold === 'number' ? this.nowThreshold : 1 + this.relativeTime = this.longFormat + ? DateUtils.relativeTime(this.time, nowThreshold) + : DateUtils.relativeTimeShort(this.time, nowThreshold) + + if (this.autoUpdate) { + this.interval = setTimeout( + this.refreshRelativeTimeObject, + 1000 * this.autoUpdate + ) + } + } + } +} +</script> diff --git a/src/components/timeline/timeline.js b/src/components/timeline/timeline.js index c45f8947..0594576c 100644 --- a/src/components/timeline/timeline.js +++ b/src/components/timeline/timeline.js @@ -1,7 +1,20 @@ import Status from '../status/status.vue' import timelineFetcher from '../../services/timeline_fetcher/timeline_fetcher.service.js' -import StatusOrConversation from '../status_or_conversation/status_or_conversation.vue' -import { throttle } from 'lodash' +import Conversation from '../conversation/conversation.vue' +import { throttle, keyBy } from 'lodash' + +export const getExcludedStatusIdsByPinning = (statuses, pinnedStatusIds) => { + const ids = [] + if (pinnedStatusIds && pinnedStatusIds.length > 0) { + for (let status of statuses) { + if (!pinnedStatusIds.includes(status.id)) { + break + } + ids.push(status.id) + } + } + return ids +} const Timeline = { props: [ @@ -11,7 +24,9 @@ const Timeline = { 'userId', 'tag', 'embedded', - 'count' + 'count', + 'pinnedStatusIds', + 'inProfile' ], data () { return { @@ -39,11 +54,20 @@ const Timeline = { body: ['timeline-body'].concat(!this.embedded ? ['panel-body'] : []), footer: ['timeline-footer'].concat(!this.embedded ? ['panel-footer'] : []) } + }, + // id map of statuses which need to be hidden in the main list due to pinning logic + excludedStatusIdsObject () { + const ids = getExcludedStatusIdsByPinning(this.timeline.visibleStatuses, this.pinnedStatusIds) + // Convert id array to object + return keyBy(ids) + }, + pinnedStatusIdsObject () { + return keyBy(this.pinnedStatusIds) } }, components: { Status, - StatusOrConversation + Conversation }, created () { const store = this.$store @@ -52,7 +76,7 @@ const Timeline = { window.addEventListener('scroll', this.scrollLoad) - if (this.timelineName === 'friends' && !credentials) { return false } + if (store.state.api.fetchers[this.timelineName]) { return false } timelineFetcher.fetchAndUpdate({ store, @@ -78,13 +102,15 @@ const Timeline = { }, methods: { handleShortKey (e) { + // Ignore when input fields are focused + if (['textarea', 'input'].includes(e.target.tagName.toLowerCase())) return if (e.key === '.') this.showNewStatuses() }, showNewStatuses () { if (this.newStatusCount === 0) return if (this.timeline.flushMarker !== 0) { - this.$store.commit('clearTimeline', { timeline: this.timelineName }) + this.$store.commit('clearTimeline', { timeline: this.timelineName, excludeUserId: true }) this.$store.commit('queueFlush', { timeline: this.timelineName, id: 0 }) this.fetchOlderStatuses() } else { @@ -137,7 +163,7 @@ const Timeline = { if (top < 15 && !this.paused && !(this.unfocused && this.$store.state.config.pauseOnUnfocused) - ) { + ) { this.showNewStatuses() } else { this.paused = true diff --git a/src/components/timeline/timeline.vue b/src/components/timeline/timeline.vue index 8f28d65c..f1d3903a 100644 --- a/src/components/timeline/timeline.vue +++ b/src/components/timeline/timeline.vue @@ -2,35 +2,80 @@ <div :class="classes.root"> <div :class="classes.header"> <div class="title"> - {{title}} + {{ title }} </div> - <div @click.prevent class="loadmore-error alert error" v-if="timelineError"> - {{$t('timeline.error_fetching')}} + <div + v-if="timelineError" + class="loadmore-error alert error" + @click.prevent + > + {{ $t('timeline.error_fetching') }} </div> - <button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError"> - {{$t('timeline.show_new')}}{{newStatusCountStr}} + <button + v-if="timeline.newStatusCount > 0 && !timelineError" + class="loadmore-button" + @click.prevent="showNewStatuses" + > + {{ $t('timeline.show_new') }}{{ newStatusCountStr }} </button> - <div @click.prevent class="loadmore-text faint" v-if="!timeline.newStatusCount > 0 && !timelineError"> - {{$t('timeline.up_to_date')}} + <div + v-if="!timeline.newStatusCount > 0 && !timelineError" + class="loadmore-text faint" + @click.prevent + > + {{ $t('timeline.up_to_date') }} </div> </div> <div :class="classes.body"> <div class="timeline"> - <status-or-conversation v-for="status in timeline.visibleStatuses" :key="status.id" v-bind:statusoid="status" class="status-fadein"></status-or-conversation> + <template v-for="statusId in pinnedStatusIds"> + <conversation + v-if="timeline.statusesObject[statusId]" + :key="statusId + '-pinned'" + class="status-fadein" + :status-id="statusId" + :collapsable="true" + :pinned-status-ids-object="pinnedStatusIdsObject" + :in-profile="inProfile" + /> + </template> + <template v-for="status in timeline.visibleStatuses"> + <conversation + v-if="!excludedStatusIdsObject[status.id]" + :key="status.id" + class="status-fadein" + :status-id="status.id" + :collapsable="true" + :in-profile="inProfile" + /> + </template> </div> </div> <div :class="classes.footer"> - <div v-if="count===0" class="new-status-notification text-center panel-footer faint"> - {{$t('timeline.no_statuses')}} + <div + v-if="count===0" + class="new-status-notification text-center panel-footer faint" + > + {{ $t('timeline.no_statuses') }} </div> - <div v-else-if="bottomedOut" class="new-status-notification text-center panel-footer faint"> - {{$t('timeline.no_more_statuses')}} + <div + v-else-if="bottomedOut" + class="new-status-notification text-center panel-footer faint" + > + {{ $t('timeline.no_more_statuses') }} </div> - <a v-else-if="!timeline.loading" href="#" v-on:click.prevent='fetchOlderStatuses()'> - <div class="new-status-notification text-center panel-footer">{{$t('timeline.load_older')}}</div> + <a + v-else-if="!timeline.loading" + href="#" + @click.prevent="fetchOlderStatuses()" + > + <div class="new-status-notification text-center panel-footer">{{ $t('timeline.load_older') }}</div> </a> - <div v-else class="new-status-notification text-center panel-footer"> - <i class="icon-spin3 animate-spin"/> + <div + v-else + class="new-status-notification text-center panel-footer" + > + <i class="icon-spin3 animate-spin" /> </div> </div> </div> diff --git a/src/components/user_avatar/user_avatar.js b/src/components/user_avatar/user_avatar.js index e513b993..4adf8211 100644 --- a/src/components/user_avatar/user_avatar.js +++ b/src/components/user_avatar/user_avatar.js @@ -2,7 +2,7 @@ import StillImage from '../still-image/still-image.vue' const UserAvatar = { props: [ - 'src', + 'user', 'betterShadow', 'compact' ], @@ -16,13 +16,18 @@ const UserAvatar = { }, computed: { imgSrc () { - return this.showPlaceholder ? '/images/avi.png' : this.src + return this.showPlaceholder ? '/images/avi.png' : this.user.profile_image_url_original } }, methods: { imageLoadError () { this.showPlaceholder = true } + }, + watch: { + src () { + this.showPlaceholder = false + } } } diff --git a/src/components/user_avatar/user_avatar.vue b/src/components/user_avatar/user_avatar.vue index 6bf7123d..9ffb28d8 100644 --- a/src/components/user_avatar/user_avatar.vue +++ b/src/components/user_avatar/user_avatar.vue @@ -1,9 +1,11 @@ <template> <StillImage class="avatar" - :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" + :alt="user.screen_name" + :title="user.screen_name" :src="imgSrc" - :imageLoadError="imageLoadError" + :class="{ 'avatar-compact': compact, 'better-shadow': betterShadow }" + :image-load-error="imageLoadError" /> </template> diff --git a/src/components/user_card/user_card.js b/src/components/user_card/user_card.js index 80d15a27..9c931c01 100644 --- a/src/components/user_card/user_card.js +++ b/src/components/user_card/user_card.js @@ -1,50 +1,46 @@ import UserAvatar from '../user_avatar/user_avatar.vue' +import RemoteFollow from '../remote_follow/remote_follow.vue' +import ProgressButton from '../progress_button/progress_button.vue' +import ModerationTools from '../moderation_tools/moderation_tools.vue' import { hex2rgb } from '../../services/color_convert/color_convert.js' import { requestFollow, requestUnfollow } from '../../services/follow_manipulate/follow_manipulate' import generateProfileLink from 'src/services/user_profile_link_generator/user_profile_link_generator' export default { - props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered' ], + props: [ 'user', 'switcher', 'selected', 'hideBio', 'rounded', 'bordered', 'allowZoomingAvatar' ], data () { return { followRequestInProgress: false, - followRequestSent: false, hideUserStatsLocal: typeof this.$store.state.config.hideUserStats === 'undefined' ? this.$store.state.instance.hideUserStats : this.$store.state.config.hideUserStats, betterShadow: this.$store.state.interface.browserSupport.cssFilter } }, + created () { + this.$store.dispatch('fetchUserRelationship', this.user.id) + }, computed: { classes () { return [{ - 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius - 'user-card-rounded': this.rounded === true, // set border-radius for all sides - 'user-card-bordered': this.bordered === true // set border for all sides + 'user-card-rounded-t': this.rounded === 'top', // set border-top-left-radius and border-top-right-radius + 'user-card-rounded': this.rounded === true, // set border-radius for all sides + 'user-card-bordered': this.bordered === true // set border for all sides }] }, style () { const color = this.$store.state.config.customTheme.colors - ? this.$store.state.config.customTheme.colors.bg // v2 - : this.$store.state.config.colors.bg // v1 + ? this.$store.state.config.customTheme.colors.bg // v2 + : this.$store.state.config.colors.bg // v1 if (color) { const rgb = (typeof color === 'string') ? hex2rgb(color) : color const tintColor = `rgba(${Math.floor(rgb.r)}, ${Math.floor(rgb.g)}, ${Math.floor(rgb.b)}, .5)` - const gradient = [ - [tintColor, this.hideBio ? '60%' : ''], - this.hideBio ? [ - color, '100%' - ] : [ - tintColor, '' - ] - ].map(_ => _.join(' ')).join(', ') - return { backgroundColor: `rgb(${Math.floor(rgb.r * 0.53)}, ${Math.floor(rgb.g * 0.56)}, ${Math.floor(rgb.b * 0.59)})`, backgroundImage: [ - `linear-gradient(to bottom, ${gradient})`, + `linear-gradient(to bottom, ${tintColor}, ${tintColor})`, `url(${this.user.cover_photo})` ].join(', ') } @@ -68,12 +64,12 @@ export default { userHighlightType: { get () { const data = this.$store.state.config.highlight[this.user.screen_name] - return data && data.type || 'disabled' + return (data && data.type) || 'disabled' }, set (type) { const data = this.$store.state.config.highlight[this.user.screen_name] if (type !== 'disabled') { - this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: data && data.color || '#FFFFFF', type }) + this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: (data && data.color) || '#FFFFFF', type }) } else { this.$store.dispatch('setHighlight', { user: this.user.screen_name, color: undefined }) } @@ -89,22 +85,25 @@ export default { } }, visibleRole () { - const validRole = (this.user.role === 'admin' || this.user.role === 'moderator') - const showRole = this.isOtherUser || this.user.show_role - - return validRole && showRole && this.user.role + const rights = this.user.rights + if (!rights) { return } + const validRole = rights.admin || rights.moderator + const roleTitle = rights.admin ? 'admin' : 'moderator' + return validRole && roleTitle } }, components: { - UserAvatar + UserAvatar, + RemoteFollow, + ModerationTools, + ProgressButton }, methods: { followUser () { const store = this.$store this.followRequestInProgress = true - requestFollow(this.user, store).then(({sent}) => { + requestFollow(this.user, store).then(() => { this.followRequestInProgress = false - this.followRequestSent = sent }) }, unfollowUser () { @@ -116,24 +115,22 @@ export default { }) }, blockUser () { - const store = this.$store - store.state.api.backendInteractor.blockUser(this.user.id) - .then((blockedUser) => { - store.commit('addNewUsers', [blockedUser]) - store.commit('removeStatus', { timeline: 'friends', userId: this.user.id }) - store.commit('removeStatus', { timeline: 'public', userId: this.user.id }) - store.commit('removeStatus', { timeline: 'publicAndExternal', userId: this.user.id }) - }) + this.$store.dispatch('blockUser', this.user.id) }, unblockUser () { - const store = this.$store - store.state.api.backendInteractor.unblockUser(this.user.id) - .then((unblockedUser) => store.commit('addNewUsers', [unblockedUser])) + this.$store.dispatch('unblockUser', this.user.id) }, - toggleMute () { - const store = this.$store - store.commit('setMuted', {user: this.user, muted: !this.user.muted}) - store.state.api.backendInteractor.setUserMute(this.user) + muteUser () { + this.$store.dispatch('muteUser', this.user.id) + }, + unmuteUser () { + this.$store.dispatch('unmuteUser', this.user.id) + }, + subscribeUser () { + return this.$store.dispatch('subscribeUser', this.user.id) + }, + unsubscribeUser () { + return this.$store.dispatch('unsubscribeUser', this.user.id) }, setProfileView (v) { if (this.switcher) { @@ -141,7 +138,7 @@ export default { store.commit('setProfileView', { v }) } }, - linkClicked ({target}) { + linkClicked ({ target }) { if (target.tagName === 'SPAN') { target = target.parentNode } @@ -151,6 +148,20 @@ export default { }, userProfileLink (user) { return generateProfileLink(user.id, user.screen_name, this.$store.state.instance.restrictedNicknames) + }, + reportUser () { + this.$store.dispatch('openUserReportingModal', this.user.id) + }, + zoomAvatar () { + const attachment = { + url: this.user.profile_image_url_original, + mimetype: 'image' + } + this.$store.dispatch('setMedia', [attachment]) + this.$store.dispatch('setCurrent', attachment) + }, + mentionUser () { + this.$store.dispatch('openPostStatusModal', { replyTo: true, repliedUser: this.user }) } } } diff --git a/src/components/user_card/user_card.vue b/src/components/user_card/user_card.vue index 690e1bde..5b6f66e7 100644 --- a/src/components/user_card/user_card.vue +++ b/src/components/user_card/user_card.vue @@ -1,132 +1,308 @@ <template> -<div class="user-card" :class="classes" :style="style"> - <div class="panel-heading"> - <div class='user-info'> - <div class='container'> - <router-link :to="userProfileLink(user)"> - <UserAvatar :betterShadow="betterShadow" :src="user.profile_image_url_original"/> - </router-link> - <div class="name-and-screen-name"> - <div class="top-line"> - <div :title="user.name" class='user-name' v-if="user.name_html" v-html="user.name_html"></div> - <div :title="user.name" class='user-name' v-else>{{user.name}}</div> - <router-link :to="{ name: 'user-settings' }" v-if="!isOtherUser"> - <i class="button-icon icon-pencil usersettings" :title="$t('tool_tip.user_settings')"></i> - </router-link> - <a :href="user.statusnet_profile_url" target="_blank" v-if="isOtherUser && !user.is_local"> - <i class="icon-link-ext usersettings"></i> - </a> - </div> - - <router-link class='user-screen-name' :to="userProfileLink(user)"> - <span class="handle">@{{user.screen_name}} - <span class="alert staff" v-if="!hideBio && !!visibleRole">{{visibleRole}}</span> - </span><span v-if="user.locked"><i class="icon icon-lock"></i></span> - <span v-if="!hideUserStatsLocal && !hideBio" class="dailyAvg">{{dailyAvg}} {{ $t('user_card.per_day') }}</span> + <div + class="user-card" + :class="classes" + > + <div + :class="{ 'hide-bio': hideBio }" + :style="style" + class="background-image" + /> + <div class="panel-heading"> + <div class="user-info"> + <div class="container"> + <a + v-if="allowZoomingAvatar" + class="user-info-avatar-link" + @click="zoomAvatar" + > + <UserAvatar + :better-shadow="betterShadow" + :user="user" + /> + <div class="user-info-avatar-link-overlay"> + <i class="button-icon icon-zoom-in" /> + </div> + </a> + <router-link + v-else + :to="userProfileLink(user)" + > + <UserAvatar + :better-shadow="betterShadow" + :user="user" + /> </router-link> + <div class="user-summary"> + <div class="top-line"> + <!-- eslint-disable vue/no-v-html --> + <div + v-if="user.name_html" + :title="user.name" + class="user-name" + v-html="user.name_html" + /> + <!-- eslint-enable vue/no-v-html --> + <div + v-else + :title="user.name" + class="user-name" + > + {{ user.name }} + </div> + <router-link + v-if="!isOtherUser" + :to="{ name: 'user-settings' }" + > + <i + class="button-icon icon-wrench usersettings" + :title="$t('tool_tip.user_settings')" + /> + </router-link> + <a + v-if="isOtherUser && !user.is_local" + :href="user.statusnet_profile_url" + target="_blank" + > + <i class="icon-link-ext usersettings" /> + </a> + </div> + + <div class="bottom-line"> + <router-link + class="user-screen-name" + :to="userProfileLink(user)" + > + @{{ user.screen_name }} + </router-link> + <span + v-if="!hideBio && !!visibleRole" + class="alert staff" + >{{ visibleRole }}</span> + <span v-if="user.locked"><i class="icon icon-lock" /></span> + <span + v-if="!hideUserStatsLocal && !hideBio" + class="dailyAvg" + >{{ dailyAvg }} {{ $t('user_card.per_day') }}</span> + </div> + </div> </div> - </div> - <div class="user-meta"> - <div v-if="user.follows_you && loggedIn && isOtherUser" class="following"> - {{ $t('user_card.follows_you') }} - </div> - <div class="highlighter" v-if="isOtherUser && (loggedIn || !switcher)"> - <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> - <input class="userHighlightText" type="text" :id="'userHighlightColorTx'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> - <input class="userHighlightCl" type="color" :id="'userHighlightColor'+user.id" v-if="userHighlightType !== 'disabled'" v-model="userHighlightColor"/> - <label for="style-switcher" class='userHighlightSel select'> - <select class="userHighlightSel" :id="'userHighlightSel'+user.id" v-model="userHighlightType"> - <option value="disabled">No highlight</option> - <option value="solid">Solid bg</option> - <option value="striped">Striped bg</option> - <option value="side">Side stripe</option> - </select> - <i class="icon-down-open"/> - </label> + <div class="user-meta"> + <div + v-if="user.follows_you && loggedIn && isOtherUser" + class="following" + > + {{ $t('user_card.follows_you') }} + </div> + <div + v-if="isOtherUser && (loggedIn || !switcher)" + class="highlighter" + > + <!-- id's need to be unique, otherwise vue confuses which user-card checkbox belongs to --> + <input + v-if="userHighlightType !== 'disabled'" + :id="'userHighlightColorTx'+user.id" + v-model="userHighlightColor" + class="userHighlightText" + type="text" + > + <input + v-if="userHighlightType !== 'disabled'" + :id="'userHighlightColor'+user.id" + v-model="userHighlightColor" + class="userHighlightCl" + type="color" + > + <label + for="style-switcher" + class="userHighlightSel select" + > + <select + :id="'userHighlightSel'+user.id" + v-model="userHighlightType" + class="userHighlightSel" + > + <option value="disabled">No highlight</option> + <option value="solid">Solid bg</option> + <option value="striped">Striped bg</option> + <option value="side">Side stripe</option> + </select> + <i class="icon-down-open" /> + </label> + </div> </div> - </div> - <div v-if="isOtherUser" class="user-interactions"> - <div class="follow" v-if="loggedIn"> - <span v-if="user.following"> - <!--Following them!--> - <button @click="unfollowUser" class="pressed" :disabled="followRequestInProgress" :title="$t('user_card.follow_unfollow')"> - <template v-if="followRequestInProgress"> - {{ $t('user_card.follow_progress') }} - </template> - <template v-else> - {{ $t('user_card.following') }} - </template> - </button> - </span> - <span v-if="!user.following"> - <button @click="followUser" :disabled="followRequestInProgress" :title="followRequestSent ? $t('user_card.follow_again') : ''"> + <div + v-if="loggedIn && isOtherUser" + class="user-interactions" + > + <div v-if="!user.following"> + <button + class="btn btn-default btn-block" + :disabled="followRequestInProgress" + :title="user.requested ? $t('user_card.follow_again') : ''" + @click="followUser" + > <template v-if="followRequestInProgress"> {{ $t('user_card.follow_progress') }} </template> - <template v-else-if="followRequestSent"> + <template v-else-if="user.requested"> {{ $t('user_card.follow_sent') }} </template> <template v-else> {{ $t('user_card.follow') }} </template> </button> - </span> - </div> - <div class='mute' v-if='isOtherUser && loggedIn'> - <span v-if='user.muted'> - <button @click="toggleMute" class="pressed"> + </div> + <div v-else-if="followRequestInProgress"> + <button + class="btn btn-default btn-block pressed" + disabled + :title="$t('user_card.follow_unfollow')" + @click="unfollowUser" + > + {{ $t('user_card.follow_progress') }} + </button> + </div> + <div + v-else + class="btn-group" + > + <button + class="btn btn-default pressed" + :title="$t('user_card.follow_unfollow')" + @click="unfollowUser" + > + {{ $t('user_card.following') }} + </button> + <ProgressButton + v-if="!user.subscribed" + class="btn btn-default" + :click="subscribeUser" + :title="$t('user_card.subscribe')" + > + <i class="icon-bell-alt" /> + </ProgressButton> + <ProgressButton + v-else + class="btn btn-default pressed" + :click="unsubscribeUser" + :title="$t('user_card.unsubscribe')" + > + <i class="icon-bell-ringing-o" /> + </ProgressButton> + </div> + + <div> + <button + class="btn btn-default btn-block" + @click="mentionUser" + > + {{ $t('user_card.mention') }} + </button> + </div> + + <div> + <button + v-if="user.muted" + class="btn btn-default btn-block pressed" + @click="unmuteUser" + > {{ $t('user_card.muted') }} </button> - </span> - <span v-if='!user.muted'> - <button @click="toggleMute"> + <button + v-else + class="btn btn-default btn-block" + @click="muteUser" + > {{ $t('user_card.mute') }} </button> - </span> - </div> - <div class="remote-follow" v-if='!loggedIn && user.is_local'> - <form method="POST" :action='subscribeUrl'> - <input type="hidden" name="nickname" :value="user.screen_name"> - <input type="hidden" name="profile" value=""> - <button click="submit" class="remote-button"> - {{ $t('user_card.remote_follow') }} - </button> - </form> - </div> - <div class='block' v-if='isOtherUser && loggedIn'> - <span v-if='user.statusnet_blocking'> - <button @click="unblockUser" class="pressed"> + </div> + + <div> + <button + v-if="user.statusnet_blocking" + class="btn btn-default btn-block pressed" + @click="unblockUser" + > {{ $t('user_card.blocked') }} </button> - </span> - <span v-if='!user.statusnet_blocking'> - <button @click="blockUser"> + <button + v-else + class="btn btn-default btn-block" + @click="blockUser" + > {{ $t('user_card.block') }} </button> - </span> + </div> + + <div> + <button + class="btn btn-default btn-block" + @click="reportUser" + > + {{ $t('user_card.report') }} + </button> + </div> + + <ModerationTools + v-if="loggedIn.role === "admin"" + :user="user" + /> + </div> + <div + v-if="!loggedIn && user.is_local" + class="user-interactions" + > + <RemoteFollow :user="user" /> </div> </div> </div> - </div> - <div class="panel-body" v-if="!hideBio"> - <div v-if="!hideUserStatsLocal && switcher" class="user-counts"> - <div class="user-count" v-on:click.prevent="setProfileView('statuses')"> - <h5>{{ $t('user_card.statuses') }}</h5> - <span>{{user.statuses_count}} <br></span> - </div> - <div class="user-count" v-on:click.prevent="setProfileView('friends')"> - <h5>{{ $t('user_card.followees') }}</h5> - <span>{{user.friends_count}}</span> - </div> - <div class="user-count" v-on:click.prevent="setProfileView('followers')"> - <h5>{{ $t('user_card.followers') }}</h5> - <span>{{user.followers_count}}</span> + <div + v-if="!hideBio" + class="panel-body" + > + <div + v-if="!hideUserStatsLocal && switcher" + class="user-counts" + > + <div + class="user-count" + @click.prevent="setProfileView('statuses')" + > + <h5>{{ $t('user_card.statuses') }}</h5> + <span>{{ user.statuses_count }} <br></span> + </div> + <div + class="user-count" + @click.prevent="setProfileView('friends')" + > + <h5>{{ $t('user_card.followees') }}</h5> + <span>{{ user.friends_count }}</span> + </div> + <div + class="user-count" + @click.prevent="setProfileView('followers')" + > + <h5>{{ $t('user_card.followers') }}</h5> + <span>{{ user.followers_count }}</span> + </div> </div> + <!-- eslint-disable vue/no-v-html --> + <p + v-if="!hideBio && user.description_html" + class="user-card-bio" + @click.prevent="linkClicked" + v-html="user.description_html" + /> + <!-- eslint-enable vue/no-v-html --> + <p + v-else-if="!hideBio" + class="user-card-bio" + > + {{ user.description }} + </p> </div> - <p @click.prevent="linkClicked" v-if="!hideBio && user.description_html" class="user-card-bio" v-html="user.description_html"></p> - <p v-else-if="!hideBio" class="user-card-bio">{{ user.description }}</p> </div> -</div> </template> <script src="./user_card.js"></script> @@ -135,8 +311,7 @@ @import '../../_variables.scss'; .user-card { - background-size: cover; - overflow: hidden; + position: relative; .panel-heading { padding: .5em 0; @@ -145,12 +320,35 @@ background: transparent; flex-direction: column; align-items: stretch; + // create new stacking context + position: relative; } .panel-body { word-wrap: break-word; - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), $fallback--bg 80%); - background: linear-gradient(to bottom, rgba(0, 0, 0, 0), var(--bg, $fallback--bg) 80%); + border-bottom-right-radius: inherit; + border-bottom-left-radius: inherit; + // create new stacking context + position: relative; + } + + .background-image { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + mask: linear-gradient(to top, white, transparent) bottom no-repeat, + linear-gradient(to top, white, white); + // Autoprefixed seem to ignore this one, and also syntax is different + -webkit-mask-composite: xor; + mask-composite: exclude; + background-size: cover; + mask-size: 100% 60%; + + &.hide-bio { + mask-size: 100% 40px; + } } p { @@ -166,7 +364,7 @@ max-width: 100%; max-height: 400px; - .emoji { + &.emoji { width: 32px; height: 32px; } @@ -203,6 +401,7 @@ .container { padding: 16px 0 6px; display: flex; + align-items: flex-start; max-height: 56px; .avatar { @@ -224,13 +423,42 @@ } } + &-avatar-link { + position: relative; + cursor: pointer; + + &-overlay { + position: absolute; + left: 0; + top: 0; + right: 0; + bottom: 0; + background-color: rgba(0, 0, 0, 0.3); + display: flex; + justify-content: center; + align-items: center; + border-radius: $fallback--avatarRadius; + border-radius: var(--avatarRadius, $fallback--avatarRadius); + opacity: 0; + transition: opacity .2s ease; + + i { + color: #FFF; + } + } + + &:hover &-overlay { + opacity: 1; + } + } + .usersettings { color: $fallback--lightText; color: var(--lightText, $fallback--lightText); opacity: .8; } - .name-and-screen-name { + .user-summary { display: block; margin-left: 0.6em; text-align: left; @@ -247,6 +475,7 @@ vertical-align: middle; object-fit: contain } + .top-line { display: flex; } @@ -267,15 +496,19 @@ } } - .user-screen-name { - color: $fallback--lightText; - color: var(--lightText, $fallback--lightText); - display: inline-block; + .bottom-line { + display: flex; font-weight: light; font-size: 15px; - padding-right: 0.1em; - width: 100%; - display: flex; + + .user-screen-name { + min-width: 1px; + flex: 0 1 auto; + text-overflow: ellipsis; + overflow: hidden; + color: $fallback--lightText; + color: var(--lightText, $fallback--lightText); + } .dailyAvg { min-width: 1px; @@ -286,15 +519,9 @@ color: var(--text, $fallback--text); } - .handle { - min-width: 1px; - flex: 0 1 auto; - text-overflow: ellipsis; - overflow: hidden; - } - // TODO use proper colors .staff { + flex: none; text-transform: capitalize; color: $fallback--text; color: var(--btnText, $fallback--text); @@ -357,48 +584,26 @@ } } .user-interactions { + position: relative; display: flex; flex-flow: row wrap; justify-content: space-between; - margin-right: -.75em; - div { + > * { flex: 1 0 0; - margin-right: .75em; - margin-bottom: .6em; + margin: 0 .75em .6em 0; white-space: nowrap; } - .mute { - max-width: 220px; - min-height: 28px; - } - - .remote-follow { - max-width: 220px; - min-height: 28px; - } - - .follow { - max-width: 220px; - min-height: 28px; - } - button { - width: 100%; - height: 100%; margin: 0; - } - - .remote-button { - height: 28px !important; - width: 92%; - } - .pressed { - border-bottom-color: rgba(255, 255, 255, 0.2); - border-top-color: rgba(0, 0, 0, 0.2); + &.pressed { + // TODO: This should be themed. + border-bottom-color: rgba(255, 255, 255, 0.2); + border-top-color: rgba(0, 0, 0, 0.2); + } } } } diff --git a/src/components/user_finder/user_finder.js b/src/components/user_finder/user_finder.js deleted file mode 100644 index 27153f45..00000000 --- a/src/components/user_finder/user_finder.js +++ /dev/null @@ -1,20 +0,0 @@ -const UserFinder = { - data: () => ({ - username: undefined, - hidden: true, - error: false, - loading: false - }), - methods: { - findUser (username) { - this.$router.push({ name: 'user-search', query: { query: username } }) - this.$refs.userSearchInput.focus() - }, - toggleHidden () { - this.hidden = !this.hidden - this.$emit('toggled', this.hidden) - } - } -} - -export default UserFinder diff --git a/src/components/user_finder/user_finder.vue b/src/components/user_finder/user_finder.vue deleted file mode 100644 index a118ffe2..00000000 --- a/src/components/user_finder/user_finder.vue +++ /dev/null @@ -1,44 +0,0 @@ -<template> - <div> - <div class="user-finder-container"> - <i class="icon-spin4 user-finder-icon animate-spin-slow" v-if="loading" /> - <a href="#" v-if="hidden" :title="$t('finder.find_user')"><i class="icon-user-plus user-finder-icon" @click.prevent.stop="toggleHidden" /></a> - <template v-else> - <input class="user-finder-input" ref="userSearchInput" @keyup.enter="findUser(username)" v-model="username" :placeholder="$t('finder.find_user')" id="user-finder-input" type="text"/> - <button class="btn search-button" @click="findUser(username)"> - <i class="icon-search"/> - </button> - <i class="button-icon icon-cancel user-finder-icon" @click.prevent.stop="toggleHidden"/> - </template> - </div> - </div> -</template> - -<script src="./user_finder.js"></script> - -<style lang="scss"> -@import '../../_variables.scss'; - -.user-finder-container { - max-width: 100%; - display: inline-flex; - align-items: baseline; - vertical-align: baseline; - - - .user-finder-input, - .search-button { - height: 29px; - } - .user-finder-input { - // TODO: do this properly without a rough guesstimate of 2 icons + paddings - max-width: calc(100% - 30px - 30px - 20px); - } - - .search-button { - margin-left: .5em; - margin-right: .5em; - } -} - -</style> diff --git a/src/components/user_panel/user_panel.js b/src/components/user_panel/user_panel.js index d4478290..c2f51eb6 100644 --- a/src/components/user_panel/user_panel.js +++ b/src/components/user_panel/user_panel.js @@ -1,13 +1,15 @@ -import LoginForm from '../login_form/login_form.vue' +import AuthForm from '../auth_form/auth_form.js' import PostStatusForm from '../post_status_form/post_status_form.vue' import UserCard from '../user_card/user_card.vue' +import { mapState } from 'vuex' const UserPanel = { computed: { - user () { return this.$store.state.users.currentUser } + signedIn () { return this.user }, + ...mapState({ user: state => state.users.currentUser }) }, components: { - LoginForm, + AuthForm, PostStatusForm, UserCard } diff --git a/src/components/user_panel/user_panel.vue b/src/components/user_panel/user_panel.vue index 8310f30e..e9f08015 100644 --- a/src/components/user_panel/user_panel.vue +++ b/src/components/user_panel/user_panel.vue @@ -1,13 +1,30 @@ <template> <div class="user-panel"> - <div v-if='user' class="panel panel-default" style="overflow: visible;"> - <UserCard :user="user" :hideBio="true" rounded="top"/> + <div + v-if="signedIn" + key="user-panel" + class="panel panel-default signed-in" + > + <UserCard + :user="user" + :hide-bio="true" + rounded="top" + /> <div class="panel-footer"> - <post-status-form v-if='user'></post-status-form> + <PostStatusForm /> </div> </div> - <login-form v-if='!user'></login-form> + <auth-form + v-else + key="user-panel" + /> </div> </template> <script src="./user_panel.js"></script> + +<style lang="scss"> +.user-panel .signed-in { + overflow: visible; +} +</style> diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 54126514..00055707 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -1,62 +1,44 @@ -import { compose } from 'vue-compose' import get from 'lodash/get' import UserCard from '../user_card/user_card.vue' import FollowCard from '../follow_card/follow_card.vue' import Timeline from '../timeline/timeline.vue' +import Conversation from '../conversation/conversation.vue' +import List from '../list/list.vue' import withLoadMore from '../../hocs/with_load_more/with_load_more' -import withList from '../../hocs/with_list/with_list' -const FollowerList = compose( - withLoadMore({ - fetch: (props, $store) => $store.dispatch('addFollowers', props.userId), - select: (props, $store) => get($store.getters.userById(props.userId), 'followers', []), - destory: (props, $store) => $store.dispatch('clearFollowers', props.userId), - childPropName: 'entries', - additionalPropNames: ['userId'] - }), - withList({ getEntryProps: user => ({ user }) }) -)(FollowCard) +const FollowerList = withLoadMore({ + fetch: (props, $store) => $store.dispatch('fetchFollowers', props.userId), + select: (props, $store) => get($store.getters.findUser(props.userId), 'followerIds', []).map(id => $store.getters.findUser(id)), + destroy: (props, $store) => $store.dispatch('clearFollowers', props.userId), + childPropName: 'items', + additionalPropNames: ['userId'] +})(List) -const FriendList = compose( - withLoadMore({ - fetch: (props, $store) => $store.dispatch('addFriends', props.userId), - select: (props, $store) => get($store.getters.userById(props.userId), 'friends', []), - destory: (props, $store) => $store.dispatch('clearFriends', props.userId), - childPropName: 'entries', - additionalPropNames: ['userId'] - }), - withList({ getEntryProps: user => ({ user }) }) -)(FollowCard) +const FriendList = withLoadMore({ + fetch: (props, $store) => $store.dispatch('fetchFriends', props.userId), + select: (props, $store) => get($store.getters.findUser(props.userId), 'friendIds', []).map(id => $store.getters.findUser(id)), + destroy: (props, $store) => $store.dispatch('clearFriends', props.userId), + childPropName: 'items', + additionalPropNames: ['userId'] +})(List) + +const defaultTabKey = 'statuses' const UserProfile = { data () { return { - error: false + error: false, + userId: null, + tab: defaultTabKey } }, created () { - this.$store.commit('clearTimeline', { timeline: 'user' }) - this.$store.commit('clearTimeline', { timeline: 'favorites' }) - this.$store.commit('clearTimeline', { timeline: 'media' }) - this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy }) - this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy }) - this.startFetchFavorites() - if (!this.user.id) { - this.$store.dispatch('fetchUser', this.fetchBy) - .catch((reason) => { - const errorMessage = get(reason, 'error.error') - if (errorMessage === 'No user with such user_id') { // Known error - this.error = this.$t('user_profile.profile_does_not_exist') - } else if (errorMessage) { - this.error = errorMessage - } else { - this.error = this.$t('user_profile.profile_loading_error') - } - }) - } + const routeParams = this.$route.params + this.load(routeParams.name || routeParams.id) + this.tab = get(this.$route, 'query.tab', defaultTabKey) }, destroyed () { - this.cleanUp() + this.stopFetching() }, computed: { timeline () { @@ -68,33 +50,12 @@ const UserProfile = { media () { return this.$store.state.statuses.timelines.media }, - userId () { - return this.$route.params.id || this.user.id - }, - userName () { - return this.$route.params.name || this.user.screen_name - }, isUs () { return this.userId && this.$store.state.users.currentUser.id && this.userId === this.$store.state.users.currentUser.id }, - userInStore () { - if (this.isExternal) { - return this.$store.getters.userById(this.userId) - } - return this.$store.getters.userByName(this.userName) - }, user () { - if (this.timeline.statuses[0]) { - return this.timeline.statuses[0].user - } - if (this.userInStore) { - return this.userInStore - } - return {} - }, - fetchBy () { - return this.isExternal ? this.userId : this.userName + return this.$store.getters.findUser(this.userId) }, isExternal () { return this.$route.name === 'external-user-profile' @@ -107,50 +68,85 @@ const UserProfile = { } }, methods: { - startFetchFavorites () { - if (this.isUs) { - this.$store.dispatch('startFetching', { timeline: 'favorites', userId: this.fetchBy }) + load (userNameOrId) { + const startFetchingTimeline = (timeline, userId) => { + // Clear timeline only if load another user's profile + if (userId !== this.$store.state.statuses.timelines[timeline].userId) { + this.$store.commit('clearTimeline', { timeline }) + } + this.$store.dispatch('startFetchingTimeline', { timeline, userId }) + } + + const loadById = (userId) => { + this.userId = userId + startFetchingTimeline('user', userId) + startFetchingTimeline('media', userId) + if (this.isUs) { + startFetchingTimeline('favorites', userId) + } + // Fetch all pinned statuses immediately + this.$store.dispatch('fetchPinnedStatuses', userId) } - }, - startUp () { - this.$store.dispatch('startFetching', { timeline: 'user', userId: this.fetchBy }) - this.$store.dispatch('startFetching', { timeline: 'media', userId: this.fetchBy }) - this.startFetchFavorites() + // Reset view + this.userId = null + this.error = false + + // Check if user data is already loaded in store + const user = this.$store.getters.findUser(userNameOrId) + if (user) { + loadById(user.id) + } else { + this.$store.dispatch('fetchUser', userNameOrId) + .then(({ id }) => loadById(id)) + .catch((reason) => { + const errorMessage = get(reason, 'error.error') + if (errorMessage === 'No user with such user_id') { // Known error + this.error = this.$t('user_profile.profile_does_not_exist') + } else if (errorMessage) { + this.error = errorMessage + } else { + this.error = this.$t('user_profile.profile_loading_error') + } + }) + } }, - cleanUp () { + stopFetching () { this.$store.dispatch('stopFetching', 'user') this.$store.dispatch('stopFetching', 'favorites') this.$store.dispatch('stopFetching', 'media') - this.$store.commit('clearTimeline', { timeline: 'user' }) - this.$store.commit('clearTimeline', { timeline: 'favorites' }) - this.$store.commit('clearTimeline', { timeline: 'media' }) + }, + switchUser (userNameOrId) { + this.stopFetching() + this.load(userNameOrId) + }, + onTabSwitch (tab) { + this.tab = tab + this.$router.replace({ query: { tab } }) } }, watch: { - userName () { - if (this.isExternal) { - return + '$route.params.id': function (newVal) { + if (newVal) { + this.switchUser(newVal) } - this.cleanUp() - this.startUp() }, - userId () { - if (!this.isExternal) { - return + '$route.params.name': function (newVal) { + if (newVal) { + this.switchUser(newVal) } - this.cleanUp() - this.startUp() }, - $route () { - this.$refs.tabSwitcher.activateTab(0)() + '$route.query': function (newVal) { + this.tab = newVal.tab || defaultTabKey } }, components: { UserCard, Timeline, FollowerList, - FriendList + FriendList, + FollowCard, + Conversation } } diff --git a/src/components/user_profile/user_profile.vue b/src/components/user_profile/user_profile.vue index 7d4a8b1f..14082e83 100644 --- a/src/components/user_profile/user_profile.vue +++ b/src/components/user_profile/user_profile.vue @@ -1,55 +1,108 @@ <template> -<div> - <div v-if="user.id" class="user-profile panel panel-default"> - <UserCard :user="user" :switcher="true" :selected="timeline.viewing" rounded="top"/> - <tab-switcher :renderOnlyFocused="true" ref="tabSwitcher"> - <Timeline - :label="$t('user_card.statuses')" - :disabled="!user.statuses_count" - :count="user.statuses_count" - :embedded="true" - :title="$t('user_profile.timeline_title')" - :timeline="timeline" - :timeline-name="'user'" - :user-id="fetchBy" + <div> + <div + v-if="user" + class="user-profile panel panel-default" + > + <UserCard + :user="user" + :switcher="true" + :selected="timeline.viewing" + :allow-zooming-avatar="true" + rounded="top" /> - <div :label="$t('user_card.followees')" v-if="followsTabVisible" :disabled="!user.friends_count"> - <FriendList :userId="userId" /> - </div> - <div :label="$t('user_card.followers')" v-if="followersTabVisible" :disabled="!user.followers_count"> - <FollowerList :userId="userId" :entryProps="{noFollowsYou: isUs}" /> + <tab-switcher + :active-tab="tab" + :render-only-focused="true" + :on-switch="onTabSwitch" + > + <Timeline + key="statuses" + :label="$t('user_card.statuses')" + :count="user.statuses_count" + :embedded="true" + :title="$t('user_profile.timeline_title')" + :timeline="timeline" + timeline-name="user" + :user-id="userId" + :pinned-status-ids="user.pinnedStatusIds" + :in-profile="true" + /> + <div + v-if="followsTabVisible" + key="followees" + :label="$t('user_card.followees')" + :disabled="!user.friends_count" + > + <FriendList :user-id="userId"> + <template + slot="item" + slot-scope="{item}" + > + <FollowCard :user="item" /> + </template> + </FriendList> + </div> + <div + v-if="followersTabVisible" + key="followers" + :label="$t('user_card.followers')" + :disabled="!user.followers_count" + > + <FollowerList :user-id="userId"> + <template + slot="item" + slot-scope="{item}" + > + <FollowCard + :user="item" + :no-follows-you="isUs" + /> + </template> + </FollowerList> + </div> + <Timeline + key="media" + :label="$t('user_card.media')" + :disabled="!media.visibleStatuses.length" + :embedded="true" + :title="$t('user_card.media')" + timeline-name="media" + :timeline="media" + :user-id="userId" + :in-profile="true" + /> + <Timeline + v-if="isUs" + key="favorites" + :label="$t('user_card.favorites')" + :disabled="!favorites.visibleStatuses.length" + :embedded="true" + :title="$t('user_card.favorites')" + timeline-name="favorites" + :timeline="favorites" + :in-profile="true" + /> + </tab-switcher> + </div> + <div + v-else + class="panel user-profile-placeholder" + > + <div class="panel-heading"> + <div class="title"> + {{ $t('settings.profile_tab') }} + </div> </div> - <Timeline - :label="$t('user_card.media')" - :disabled="!media.visibleStatuses.length" - :embedded="true" :title="$t('user_card.media')" - timeline-name="media" - :timeline="media" - :user-id="fetchBy" - /> - <Timeline - v-if="isUs" - :label="$t('user_card.favorites')" - :disabled="!favorites.visibleStatuses.length" - :embedded="true" - :title="$t('user_card.favorites')" - timeline-name="favorites" - :timeline="favorites" - /> - </tab-switcher> - </div> - <div v-else class="panel user-profile-placeholder"> - <div class="panel-heading"> - <div class="title"> - {{ $t('settings.profile_tab') }} + <div class="panel-body"> + <span v-if="error">{{ error }}</span> + <i + v-else + class="icon-spin3 animate-spin" + /> </div> </div> - <div class="panel-body"> - <span v-if="error">{{ error }}</span> - <i class="icon-spin3 animate-spin" v-else></i> - </div> </div> -</div> </template> <script src="./user_profile.js"></script> diff --git a/src/components/user_reporting_modal/user_reporting_modal.js b/src/components/user_reporting_modal/user_reporting_modal.js new file mode 100644 index 00000000..7c6ea409 --- /dev/null +++ b/src/components/user_reporting_modal/user_reporting_modal.js @@ -0,0 +1,106 @@ + +import Status from '../status/status.vue' +import List from '../list/list.vue' +import Checkbox from '../checkbox/checkbox.vue' + +const UserReportingModal = { + components: { + Status, + List, + Checkbox + }, + data () { + return { + comment: '', + forward: false, + statusIdsToReport: [], + processing: false, + error: false + } + }, + computed: { + isLoggedIn () { + return !!this.$store.state.users.currentUser + }, + isOpen () { + return this.isLoggedIn && this.$store.state.reports.modalActivated + }, + userId () { + return this.$store.state.reports.userId + }, + user () { + return this.$store.getters.findUser(this.userId) + }, + remoteInstance () { + return !this.user.is_local && this.user.screen_name.substr(this.user.screen_name.indexOf('@') + 1) + }, + statuses () { + return this.$store.state.reports.statuses + } + }, + watch: { + userId: 'resetState' + }, + methods: { + resetState () { + // Reset state + this.comment = '' + this.forward = false + this.statusIdsToReport = [] + this.processing = false + this.error = false + }, + closeModal () { + this.$store.dispatch('closeUserReportingModal') + }, + reportUser () { + this.processing = true + this.error = false + const params = { + userId: this.userId, + comment: this.comment, + forward: this.forward, + statusIds: this.statusIdsToReport + } + this.$store.state.api.backendInteractor.reportUser(params) + .then(() => { + this.processing = false + this.resetState() + this.closeModal() + }) + .catch(() => { + this.processing = false + this.error = true + }) + }, + clearError () { + this.error = false + }, + isChecked (statusId) { + return this.statusIdsToReport.indexOf(statusId) !== -1 + }, + toggleStatus (checked, statusId) { + if (checked === this.isChecked(statusId)) { + return + } + + if (checked) { + this.statusIdsToReport.push(statusId) + } else { + this.statusIdsToReport.splice(this.statusIdsToReport.indexOf(statusId), 1) + } + }, + resize (e) { + const target = e.target || e + if (!(target instanceof window.Element)) { return } + // Auto is needed to make textbox shrink when removing lines + target.style.height = 'auto' + target.style.height = `${target.scrollHeight}px` + if (target.value === '') { + target.style.height = null + } + } + } +} + +export default UserReportingModal diff --git a/src/components/user_reporting_modal/user_reporting_modal.vue b/src/components/user_reporting_modal/user_reporting_modal.vue new file mode 100644 index 00000000..c79a3707 --- /dev/null +++ b/src/components/user_reporting_modal/user_reporting_modal.vue @@ -0,0 +1,187 @@ +<template> + <div + v-if="isOpen" + class="modal-view" + @click="closeModal" + > + <div + class="user-reporting-panel panel" + @click.stop="" + > + <div class="panel-heading"> + <div class="title"> + {{ $t('user_reporting.title', [user.screen_name]) }} + </div> + </div> + <div class="panel-body"> + <div class="user-reporting-panel-left"> + <div> + <p>{{ $t('user_reporting.add_comment_description') }}</p> + <textarea + v-model="comment" + class="form-control" + :placeholder="$t('user_reporting.additional_comments')" + rows="1" + @input="resize" + /> + </div> + <div v-if="!user.is_local"> + <p>{{ $t('user_reporting.forward_description') }}</p> + <Checkbox v-model="forward"> + {{ $t('user_reporting.forward_to', [remoteInstance]) }} + </Checkbox> + </div> + <div> + <button + class="btn btn-default" + :disabled="processing" + @click="reportUser" + > + {{ $t('user_reporting.submit') }} + </button> + <div + v-if="error" + class="alert error" + > + {{ $t('user_reporting.generic_error') }} + </div> + </div> + </div> + <div class="user-reporting-panel-right"> + <List :items="statuses"> + <template + slot="item" + slot-scope="{item}" + > + <div class="status-fadein user-reporting-panel-sitem"> + <Status + :in-conversation="false" + :focused="false" + :statusoid="item" + /> + <Checkbox + :checked="isChecked(item.id)" + @change="checked => toggleStatus(checked, item.id)" + /> + </div> + </template> + </List> + </div> + </div> + </div> + </div> +</template> + +<script src="./user_reporting_modal.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.user-reporting-panel { + width: 90vw; + max-width: 700px; + min-height: 20vh; + max-height: 80vh; + + .panel-heading { + .title { + text-align: center; + // TODO: Consider making these as default of panel + flex: 1; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + } + + .panel-body { + display: flex; + flex-direction: column-reverse; + border-top: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + overflow: hidden; + } + + &-left { + padding: 1.1em 0.7em 0.7em; + line-height: 1.4em; + box-sizing: border-box; + + > div { + margin-bottom: 1em; + + &:last-child { + margin-bottom: 0; + } + } + + p { + margin-top: 0; + } + + textarea.form-control { + line-height: 16px; + resize: none; + overflow: hidden; + transition: min-height 200ms 100ms; + min-height: 44px; + width: 100%; + } + + .btn { + min-width: 10em; + padding: 0 2em; + } + + .alert { + margin: 1em 0 0 0; + line-height: 1.3em; + } + } + + &-right { + display: flex; + flex-direction: column; + overflow-y: auto; + } + + &-sitem { + display: flex; + justify-content: space-between; + + > .status-el { + flex: 1; + } + + > .checkbox { + margin: 0.75em; + } + } + + @media all and (min-width: 801px) { + .panel-body { + flex-direction: row; + } + + &-left { + width: 50%; + max-width: 320px; + border-right: 1px solid; + border-color: $fallback--border; + border-color: var(--border, $fallback--border); + padding: 1.1em; + + > div { + margin-bottom: 2em; + } + } + + &-right { + width: 50%; + flex: 1 1 auto; + margin-bottom: 12px; + } + } +} +</style> diff --git a/src/components/user_search/user_search.js b/src/components/user_search/user_search.js deleted file mode 100644 index 55040826..00000000 --- a/src/components/user_search/user_search.js +++ /dev/null @@ -1,45 +0,0 @@ -import FollowCard from '../follow_card/follow_card.vue' -import userSearchApi from '../../services/new_api/user_search.js' -const userSearch = { - components: { - FollowCard - }, - props: [ - 'query' - ], - data () { - return { - username: '', - users: [], - loading: false - } - }, - mounted () { - this.search(this.query) - }, - watch: { - query (newV) { - this.search(newV) - } - }, - methods: { - newQuery (query) { - this.$router.push({ name: 'user-search', query: { query } }) - this.$refs.userSearchInput.focus() - }, - search (query) { - if (!query) { - this.users = [] - return - } - this.loading = true - userSearchApi.search({query, store: this.$store}) - .then((res) => { - this.loading = false - this.users = res - }) - } - } -} - -export default userSearch diff --git a/src/components/user_search/user_search.vue b/src/components/user_search/user_search.vue deleted file mode 100644 index 1269eea6..00000000 --- a/src/components/user_search/user_search.vue +++ /dev/null @@ -1,37 +0,0 @@ -<template> - <div class="user-search panel panel-default"> - <div class="panel-heading"> - {{$t('nav.user_search')}} - </div> - <div class="user-search-input-container"> - <input class="user-finder-input" ref="userSearchInput" @keyup.enter="newQuery(username)" v-model="username" :placeholder="$t('finder.find_user')"/> - <button class="btn search-button" @click="newQuery(username)"> - <i class="icon-search"/> - </button> - </div> - <div v-if="loading" class="text-center loading-icon"> - <i class="icon-spin3 animate-spin"/> - </div> - <div v-else class="panel-body"> - <FollowCard v-for="user in users" :key="user.id" :user="user"/> - </div> - </div> -</template> - -<script src="./user_search.js"></script> - -<style lang="scss"> -.user-search-input-container { - margin: 0.5em; - display: flex; - justify-content: center; - - .search-button { - margin-left: 0.5em; - } -} - -.loading-icon { - padding: 1em; -} -</style> diff --git a/src/components/user_settings/confirm.js b/src/components/user_settings/confirm.js new file mode 100644 index 00000000..0f4ddfc9 --- /dev/null +++ b/src/components/user_settings/confirm.js @@ -0,0 +1,9 @@ +const Confirm = { + props: ['disabled'], + data: () => ({}), + methods: { + confirm () { this.$emit('confirm') }, + cancel () { this.$emit('cancel') } + } +} +export default Confirm diff --git a/src/components/user_settings/confirm.vue b/src/components/user_settings/confirm.vue new file mode 100644 index 00000000..69b3811b --- /dev/null +++ b/src/components/user_settings/confirm.vue @@ -0,0 +1,22 @@ +<template> + <div> + <slot /> + <button + class="btn btn-default" + :disabled="disabled" + @click="confirm" + > + {{ $t('general.confirm') }} + </button> + <button + class="btn btn-default" + :disabled="disabled" + @click="cancel" + > + {{ $t('general.cancel') }} + </button> + </div> +</template> + +<script src="./confirm.js"> +</script> diff --git a/src/components/user_settings/mfa.js b/src/components/user_settings/mfa.js new file mode 100644 index 00000000..3090138a --- /dev/null +++ b/src/components/user_settings/mfa.js @@ -0,0 +1,155 @@ +import RecoveryCodes from './mfa_backup_codes.vue' +import TOTP from './mfa_totp.vue' +import Confirm from './confirm.vue' +import VueQrcode from '@chenfengyuan/vue-qrcode' +import { mapState } from 'vuex' + +const Mfa = { + data: () => ({ + settings: { // current settings of MFA + available: false, + enabled: false, + totp: false + }, + setupState: { // setup mfa + state: '', // state of setup. '' -> 'getBackupCodes' -> 'setupOTP' -> 'complete' + setupOTPState: '' // state of setup otp. '' -> 'prepare' -> 'confirm' -> 'complete' + }, + backupCodes: { + getNewCodes: false, + inProgress: false, // progress of fetch codes + codes: [] + }, + otpSettings: { // pre-setup setting of OTP. secret key, qrcode url. + provisioning_uri: '', + key: '' + }, + currentPassword: null, + otpConfirmToken: null, + error: null, + readyInit: false + }), + components: { + 'recovery-codes': RecoveryCodes, + 'totp-item': TOTP, + 'qrcode': VueQrcode, + 'confirm': Confirm + }, + computed: { + canSetupOTP () { + return ( + (this.setupInProgress && this.backupCodesPrepared) || + this.settings.enabled + ) && !this.settings.totp && !this.setupOTPInProgress + }, + setupInProgress () { + return this.setupState.state !== '' && this.setupState.state !== 'complete' + }, + setupOTPInProgress () { + return this.setupState.state === 'setupOTP' && !this.completedOTP + }, + prepareOTP () { + return this.setupState.setupOTPState === 'prepare' + }, + confirmOTP () { + return this.setupState.setupOTPState === 'confirm' + }, + completedOTP () { + return this.setupState.setupOTPState === 'completed' + }, + backupCodesPrepared () { + return !this.backupCodes.inProgress && this.backupCodes.codes.length > 0 + }, + confirmNewBackupCodes () { + return this.backupCodes.getNewCodes + }, + ...mapState({ + backendInteractor: (state) => state.api.backendInteractor + }) + }, + + methods: { + activateOTP () { + if (!this.settings.enabled) { + this.setupState.state = 'getBackupcodes' + this.fetchBackupCodes() + } + }, + fetchBackupCodes () { + this.backupCodes.inProgress = true + this.backupCodes.codes = [] + + return this.backendInteractor.generateMfaBackupCodes() + .then((res) => { + this.backupCodes.codes = res.codes + this.backupCodes.inProgress = false + }) + }, + getBackupCodes () { // get a new backup codes + this.backupCodes.getNewCodes = true + }, + confirmBackupCodes () { // confirm getting new backup codes + this.fetchBackupCodes().then((res) => { + this.backupCodes.getNewCodes = false + }) + }, + cancelBackupCodes () { // cancel confirm form of new backup codes + this.backupCodes.getNewCodes = false + }, + + // Setup OTP + setupOTP () { // prepare setup OTP + this.setupState.state = 'setupOTP' + this.setupState.setupOTPState = 'prepare' + this.backendInteractor.mfaSetupOTP() + .then((res) => { + this.otpSettings = res + this.setupState.setupOTPState = 'confirm' + }) + }, + doConfirmOTP () { // handler confirm enable OTP + this.error = null + this.backendInteractor.mfaConfirmOTP({ + token: this.otpConfirmToken, + password: this.currentPassword + }) + .then((res) => { + if (res.error) { + this.error = res.error + return + } + this.completeSetup() + }) + }, + + completeSetup () { + this.setupState.setupOTPState = 'complete' + this.setupState.state = 'complete' + this.currentPassword = null + this.error = null + this.fetchSettings() + }, + cancelSetup () { // cancel setup + this.setupState.setupOTPState = '' + this.setupState.state = '' + this.currentPassword = null + this.error = null + }, + // end Setup OTP + + // fetch settings from server + async fetchSettings () { + let result = await this.backendInteractor.fetchSettingsMFA() + if (result.error) return + this.settings = result.settings + this.settings.available = true + return result + } + }, + mounted () { + this.fetchSettings().then(() => { + this.readyInit = true + }) + } +} +export default Mfa diff --git a/src/components/user_settings/mfa.vue b/src/components/user_settings/mfa.vue new file mode 100644 index 00000000..14ea10a1 --- /dev/null +++ b/src/components/user_settings/mfa.vue @@ -0,0 +1,173 @@ +<template> + <div + v-if="readyInit && settings.available" + class="setting-item mfa-settings" + > + <div class="mfa-heading"> + <h2>{{ $t('settings.mfa.title') }}</h2> + </div> + + <div> + <div + v-if="!setupInProgress" + class="setting-item" + > + <!-- Enabled methods --> + <h3>{{ $t('settings.mfa.authentication_methods') }}</h3> + <totp-item + :settings="settings" + @deactivate="fetchSettings" + @activate="activateOTP" + /> + <br> + + <div v-if="settings.enabled"> + <!-- backup codes block--> + <recovery-codes + v-if="!confirmNewBackupCodes" + :backup-codes="backupCodes" + /> + <button + v-if="!confirmNewBackupCodes" + class="btn btn-default" + @click="getBackupCodes" + > + {{ $t('settings.mfa.generate_new_recovery_codes') }} + </button> + + <div v-if="confirmNewBackupCodes"> + <confirm + :disabled="backupCodes.inProgress" + @confirm="confirmBackupCodes" + @cancel="cancelBackupCodes" + > + <p class="warning"> + {{ $t('settings.mfa.warning_of_generate_new_codes') }} + </p> + </confirm> + </div> + </div> + </div> + + <div v-if="setupInProgress"> + <!-- setup block--> + + <h3>{{ $t('settings.mfa.setup_otp') }}</h3> + + <recovery-codes + v-if="!setupOTPInProgress" + :backup-codes="backupCodes" + /> + + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> + + <button + v-if="canSetupOTP" + class="btn btn-default" + @click="setupOTP" + > + {{ $t('settings.mfa.setup_otp') }} + </button> + + <template v-if="setupOTPInProgress"> + <i v-if="prepareOTP">{{ $t('settings.mfa.wait_pre_setup_otp') }}</i> + + <div v-if="confirmOTP"> + <div class="setup-otp"> + <div class="qr-code"> + <h4>{{ $t('settings.mfa.scan.title') }}</h4> + <p>{{ $t('settings.mfa.scan.desc') }}</p> + <qrcode + :value="otpSettings.provisioning_uri" + :options="{ width: 200 }" + /> + <p> + {{ $t('settings.mfa.scan.secret_code') }}: + {{ otpSettings.key }} + </p> + </div> + + <div class="verify"> + <h4>{{ $t('general.verify') }}</h4> + <p>{{ $t('settings.mfa.verify.desc') }}</p> + <input + v-model="otpConfirmToken" + type="text" + > + + <p>{{ $t('settings.enter_current_password_to_confirm') }}:</p> + <input + v-model="currentPassword" + type="password" + > + <div class="confirm-otp-actions"> + <button + class="btn btn-default" + @click="doConfirmOTP" + > + {{ $t('settings.mfa.confirm_and_enable') }} + </button> + <button + class="btn btn-default" + @click="cancelSetup" + > + {{ $t('general.cancel') }} + </button> + </div> + <div + v-if="error" + class="alert error" + > + {{ error }} + </div> + </div> + </div> + </div> + </template> + </div> + </div> + </div> +</template> + +<script src="./mfa.js"></script> +<style lang="scss"> +@import '../../_variables.scss'; +.warning { + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); +} +.mfa-settings { + .mfa-heading, .method-item { + overflow: hidden; + display: flex; + flex-wrap: wrap; + justify-content: space-between; + align-items: baseline; + } + + .setup-otp { + display: flex; + justify-content: center; + flex-wrap: wrap; + .qr-code { + flex: 1; + padding-right: 10px; + } + .verify { flex: 1; } + .error { margin: 4px 0 0 0; } + .confirm-otp-actions { + button { + width: 15em; + margin-top: 5px; + } + + } + } +} +</style> diff --git a/src/components/user_settings/mfa_backup_codes.js b/src/components/user_settings/mfa_backup_codes.js new file mode 100644 index 00000000..f0a984ec --- /dev/null +++ b/src/components/user_settings/mfa_backup_codes.js @@ -0,0 +1,17 @@ +export default { + props: { + backupCodes: { + type: Object, + default: () => ({ + inProgress: false, + codes: [] + }) + } + }, + data: () => ({}), + computed: { + inProgress () { return this.backupCodes.inProgress }, + ready () { return this.backupCodes.codes.length > 0 }, + displayTitle () { return this.inProgress || this.ready } + } +} diff --git a/src/components/user_settings/mfa_backup_codes.vue b/src/components/user_settings/mfa_backup_codes.vue new file mode 100644 index 00000000..e6c8ede2 --- /dev/null +++ b/src/components/user_settings/mfa_backup_codes.vue @@ -0,0 +1,33 @@ +<template> + <div> + <h4 v-if="displayTitle"> + {{ $t('settings.mfa.recovery_codes') }} + </h4> + <i v-if="inProgress">{{ $t('settings.mfa.waiting_a_recovery_codes') }}</i> + <template v-if="ready"> + <p class="alert warning"> + {{ $t('settings.mfa.recovery_codes_warning') }} + </p> + <ul class="backup-codes"> + <li + v-for="code in backupCodes.codes" + :key="code" + > + {{ code }} + </li> + </ul> + </template> + </div> +</template> +<script src="./mfa_backup_codes.js"></script> +<style lang="scss"> +@import '../../_variables.scss'; + +.warning { + color: $fallback--cOrange; + color: var(--cOrange, $fallback--cOrange); +} +.backup-codes { + font-family: var(--postCodeFont, monospace); +} +</style> diff --git a/src/components/user_settings/mfa_totp.js b/src/components/user_settings/mfa_totp.js new file mode 100644 index 00000000..8408d8e9 --- /dev/null +++ b/src/components/user_settings/mfa_totp.js @@ -0,0 +1,49 @@ +import Confirm from './confirm.vue' +import { mapState } from 'vuex' + +export default { + props: ['settings'], + data: () => ({ + error: false, + currentPassword: '', + deactivate: false, + inProgress: false // progress peform request to disable otp method + }), + components: { + 'confirm': Confirm + }, + computed: { + isActivated () { + return this.settings.totp + }, + ...mapState({ + backendInteractor: (state) => state.api.backendInteractor + }) + }, + methods: { + doActivate () { + this.$emit('activate') + }, + cancelDeactivate () { this.deactivate = false }, + doDeactivate () { + this.error = null + this.deactivate = true + }, + confirmDeactivate () { // confirm deactivate TOTP method + this.error = null + this.inProgress = true + this.backendInteractor.mfaDisableOTP({ + password: this.currentPassword + }) + .then((res) => { + this.inProgress = false + if (res.error) { + this.error = res.error + return + } + this.deactivate = false + this.$emit('deactivate') + }) + } + } +} diff --git a/src/components/user_settings/mfa_totp.vue b/src/components/user_settings/mfa_totp.vue new file mode 100644 index 00000000..c6f2cc7b --- /dev/null +++ b/src/components/user_settings/mfa_totp.vue @@ -0,0 +1,43 @@ +<template> + <div> + <div class="method-item"> + <strong>{{ $t('settings.mfa.otp') }}</strong> + <button + v-if="!isActivated" + class="btn btn-default" + @click="doActivate" + > + {{ $t('general.enable') }} + </button> + + <button + v-if="isActivated" + class="btn btn-default" + :disabled="deactivate" + @click="doDeactivate" + > + {{ $t('general.disable') }} + </button> + </div> + + <confirm + v-if="deactivate" + :disabled="inProgress" + @confirm="confirmDeactivate" + @cancel="cancelDeactivate" + > + {{ $t('settings.enter_current_password_to_confirm') }}: + <input + v-model="currentPassword" + type="password" + > + </confirm> + <div + v-if="error" + class="alert error" + > + {{ error }} + </div> + </div> +</template> +<script src="./mfa_totp.js"></script> diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index c0ab759c..f12cccae 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -1,32 +1,35 @@ -import { compose } from 'vue-compose' import unescape from 'lodash/unescape' import get from 'lodash/get' +import map from 'lodash/map' +import reject from 'lodash/reject' import TabSwitcher from '../tab_switcher/tab_switcher.js' import ImageCropper from '../image_cropper/image_cropper.vue' import StyleSwitcher from '../style_switcher/style_switcher.vue' +import ScopeSelector from '../scope_selector/scope_selector.vue' import fileSizeFormatService from '../../services/file_size_format/file_size_format.js' import BlockCard from '../block_card/block_card.vue' import MuteCard from '../mute_card/mute_card.vue' +import SelectableList from '../selectable_list/selectable_list.vue' +import ProgressButton from '../progress_button/progress_button.vue' +import EmojiInput from '../emoji_input/emoji_input.vue' +import suggestor from '../emoji_input/suggestor.js' +import Autosuggest from '../autosuggest/autosuggest.vue' +import Importer from '../importer/importer.vue' +import Exporter from '../exporter/exporter.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' -import withList from '../../hocs/with_list/with_list' +import Mfa from './mfa.vue' -const BlockList = compose( - withSubscription({ - fetch: (props, $store) => $store.dispatch('fetchBlocks'), - select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), - childPropName: 'entries' - }), - withList({ getEntryProps: userId => ({ userId }) }) -)(BlockCard) +const BlockList = withSubscription({ + fetch: (props, $store) => $store.dispatch('fetchBlocks'), + select: (props, $store) => get($store.state.users.currentUser, 'blockIds', []), + childPropName: 'items' +})(SelectableList) -const MuteList = compose( - withSubscription({ - fetch: (props, $store) => $store.dispatch('fetchMutes'), - select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), - childPropName: 'entries' - }), - withList({ getEntryProps: userId => ({ userId }) }) -)(MuteCard) +const MuteList = withSubscription({ + fetch: (props, $store) => $store.dispatch('fetchMutes'), + select: (props, $store) => get($store.state.users.currentUser, 'muteIds', []), + childPropName: 'items' +})(SelectableList) const UserSettings = { data () { @@ -38,17 +41,17 @@ const UserSettings = { newDefaultScope: this.$store.state.users.currentUser.default_scope, hideFollows: this.$store.state.users.currentUser.hide_follows, hideFollowers: this.$store.state.users.currentUser.hide_followers, + hideFollowsCount: this.$store.state.users.currentUser.hide_follows_count, + hideFollowersCount: this.$store.state.users.currentUser.hide_followers_count, showRole: this.$store.state.users.currentUser.show_role, role: this.$store.state.users.currentUser.role, - followList: null, - followImportError: false, - followsImported: false, - enableFollowsExport: true, + discoverable: this.$store.state.users.currentUser.discoverable, pickAvatarBtnVisible: true, bannerUploading: false, backgroundUploading: false, - followListUploading: false, + banner: null, bannerPreview: null, + background: null, backgroundPreview: null, bannerUploadError: null, backgroundUploadError: null, @@ -58,7 +61,8 @@ const UserSettings = { changePasswordInputs: [ '', '', '' ], changedPassword: false, changePasswordError: false, - activeTab: 'profile' + activeTab: 'profile', + notificationSettings: this.$store.state.users.currentUser.notification_settings } }, created () { @@ -66,20 +70,45 @@ const UserSettings = { }, components: { StyleSwitcher, + ScopeSelector, TabSwitcher, ImageCropper, BlockList, - MuteList + MuteList, + EmojiInput, + Autosuggest, + BlockCard, + MuteCard, + ProgressButton, + Importer, + Exporter, + Mfa }, computed: { user () { return this.$store.state.users.currentUser }, + emojiUserSuggestor () { + return suggestor({ + emoji: [ + ...this.$store.state.instance.emoji, + ...this.$store.state.instance.customEmoji + ], + users: this.$store.state.users.users, + updateUsersList: (input) => this.$store.dispatch('searchUsers', input) + }) + }, + emojiSuggestor () { + return suggestor({ emoji: [ + ...this.$store.state.instance.emoji, + ...this.$store.state.instance.customEmoji + ] }) + }, pleromaBackend () { return this.$store.state.instance.pleromaBackend }, - scopeOptionsEnabled () { - return this.$store.state.instance.scopeOptionsEnabled + minimalScopesMode () { + return this.$store.state.instance.minimalScopesMode }, vis () { return { @@ -104,38 +133,31 @@ const UserSettings = { }, methods: { updateProfile () { - const name = this.newName - const description = this.newBio - const locked = this.newLocked - // Backend notation. - /* eslint-disable camelcase */ - const default_scope = this.newDefaultScope - const no_rich_text = this.newNoRichText - const hide_follows = this.hideFollows - const hide_followers = this.hideFollowers - const show_role = this.showRole - - /* eslint-enable camelcase */ this.$store.state.api.backendInteractor .updateProfile({ params: { - name, - description, - locked, + note: this.newBio, + locked: this.newLocked, // Backend notation. /* eslint-disable camelcase */ - default_scope, - no_rich_text, - hide_follows, - hide_followers, - show_role + display_name: this.newName, + default_scope: this.newDefaultScope, + no_rich_text: this.newNoRichText, + hide_follows: this.hideFollows, + hide_followers: this.hideFollowers, + discoverable: this.discoverable, + hide_follows_count: this.hideFollowsCount, + hide_followers_count: this.hideFollowersCount, + show_role: this.showRole /* eslint-enable camelcase */ - }}).then((user) => { - if (!user.error) { - this.$store.commit('addNewUsers', [user]) - this.$store.commit('setCurrentUser', user) - } - }) + } }).then((user) => { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) + }) + }, + updateNotificationSettings () { + this.$store.state.api.backendInteractor + .updateNotificationSettings({ settings: this.notificationSettings }) }, changeVis (visibility) { this.newDefaultScope = visibility @@ -146,25 +168,37 @@ const UserSettings = { if (file.size > this.$store.state.instance[slot + 'limit']) { const filesize = fileSizeFormatService.fileSizeFormat(file.size) const allowedsize = fileSizeFormatService.fileSizeFormat(this.$store.state.instance[slot + 'limit']) - this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', {filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit}) + this[slot + 'UploadError'] = this.$t('upload.error.base') + ' ' + this.$t('upload.error.file_too_big', { filesize: filesize.num, filesizeunit: filesize.unit, allowedsize: allowedsize.num, allowedsizeunit: allowedsize.unit }) return } // eslint-disable-next-line no-undef const reader = new FileReader() - reader.onload = ({target}) => { + reader.onload = ({ target }) => { const img = target.result this[slot + 'Preview'] = img + this[slot] = file } reader.readAsDataURL(file) }, submitAvatar (cropper, file) { - const img = cropper.getCroppedCanvas().toDataURL(file.type) - return this.$store.state.api.backendInteractor.updateAvatar({ params: { img } }).then((user) => { - if (!user.error) { - this.$store.commit('addNewUsers', [user]) - this.$store.commit('setCurrentUser', user) + const that = this + return new Promise((resolve, reject) => { + function updateAvatar (avatar) { + that.$store.state.api.backendInteractor.updateAvatar({ avatar }) + .then((user) => { + that.$store.commit('addNewUsers', [user]) + that.$store.commit('setCurrentUser', user) + resolve() + }) + .catch((err) => { + reject(new Error(that.$t('upload.error.base') + ' ' + err.message)) + }) + } + + if (cropper) { + cropper.getCroppedCanvas().toBlob(updateAvatar, file.type) } else { - throw new Error(this.$t('upload.error.base') + user.error) + updateAvatar(file) } }) }, @@ -174,49 +208,26 @@ const UserSettings = { submitBanner () { if (!this.bannerPreview) { return } - let banner = this.bannerPreview - // eslint-disable-next-line no-undef - let imginfo = new Image() - /* eslint-disable camelcase */ - let offset_top, offset_left, width, height - imginfo.src = banner - width = imginfo.width - height = imginfo.height - offset_top = 0 - offset_left = 0 this.bannerUploading = true - this.$store.state.api.backendInteractor.updateBanner({params: {banner, offset_top, offset_left, width, height}}).then((data) => { - if (!data.error) { - let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) - clone.cover_photo = data.url - this.$store.commit('addNewUsers', [clone]) - this.$store.commit('setCurrentUser', clone) + this.$store.state.api.backendInteractor.updateBanner({ banner: this.banner }) + .then((user) => { + this.$store.commit('addNewUsers', [user]) + this.$store.commit('setCurrentUser', user) this.bannerPreview = null - } else { - this.bannerUploadError = this.$t('upload.error.base') + data.error - } - this.bannerUploading = false - }) - /* eslint-enable camelcase */ + }) + .catch((err) => { + this.bannerUploadError = this.$t('upload.error.base') + ' ' + err.message + }) + .then(() => { this.bannerUploading = false }) }, submitBg () { if (!this.backgroundPreview) { return } - let img = this.backgroundPreview - // eslint-disable-next-line no-undef - let imginfo = new Image() - let cropX, cropY, cropW, cropH - imginfo.src = img - cropX = 0 - cropY = 0 - cropW = imginfo.width - cropH = imginfo.width + let background = this.background this.backgroundUploading = true - this.$store.state.api.backendInteractor.updateBg({params: {img, cropX, cropY, cropW, cropH}}).then((data) => { + this.$store.state.api.backendInteractor.updateBg({ background }).then((data) => { if (!data.error) { - let clone = JSON.parse(JSON.stringify(this.$store.state.users.currentUser)) - clone.background_image = data.url - this.$store.commit('addNewUsers', [clone]) - this.$store.commit('setCurrentUser', clone) + this.$store.commit('addNewUsers', [data]) + this.$store.commit('setCurrentUser', data) this.backgroundPreview = null } else { this.backgroundUploadError = this.$t('upload.error.base') + data.error @@ -224,72 +235,51 @@ const UserSettings = { this.backgroundUploading = false }) }, - importFollows () { - this.followListUploading = true - const followList = this.followList - this.$store.state.api.backendInteractor.followImport({params: followList}) + importFollows (file) { + return this.$store.state.api.backendInteractor.importFollows(file) .then((status) => { - if (status) { - this.followsImported = true - } else { - this.followImportError = true + if (!status) { + throw new Error('failed') } - this.followListUploading = false }) }, - /* This function takes an Array of Users - * and outputs a file with all the addresses for the user to download - */ - exportPeople (users, filename) { - // Get all the friends addresses - var UserAddresses = users.map(function (user) { + importBlocks (file) { + return this.$store.state.api.backendInteractor.importBlocks(file) + .then((status) => { + if (!status) { + throw new Error('failed') + } + }) + }, + generateExportableUsersContent (users) { + // Get addresses + return users.map((user) => { // check is it's a local user if (user && user.is_local) { // append the instance address // eslint-disable-next-line no-undef - user.screen_name += '@' + location.hostname + return user.screen_name + '@' + location.hostname } return user.screen_name }).join('\n') - // Make the user download the file - var fileToDownload = document.createElement('a') - fileToDownload.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(UserAddresses)) - fileToDownload.setAttribute('download', filename) - fileToDownload.style.display = 'none' - document.body.appendChild(fileToDownload) - fileToDownload.click() - document.body.removeChild(fileToDownload) - }, - exportFollows () { - this.enableFollowsExport = false - this.$store.state.api.backendInteractor - .exportFriends({ - id: this.$store.state.users.currentUser.id - }) - .then((friendList) => { - this.exportPeople(friendList, 'friends.csv') - setTimeout(() => { this.enableFollowsExport = true }, 2000) - }) }, - followListChange () { - // eslint-disable-next-line no-undef - let formData = new FormData() - formData.append('list', this.$refs.followlist.files[0]) - this.followList = formData + getFollowsContent () { + return this.$store.state.api.backendInteractor.exportFriends({ id: this.$store.state.users.currentUser.id }) + .then(this.generateExportableUsersContent) }, - dismissImported () { - this.followsImported = false - this.followImportError = false + getBlocksContent () { + return this.$store.state.api.backendInteractor.fetchBlocks() + .then(this.generateExportableUsersContent) }, confirmDelete () { this.deletingAccount = true }, deleteAccount () { - this.$store.state.api.backendInteractor.deleteAccount({password: this.deleteAccountConfirmPasswordInput}) + this.$store.state.api.backendInteractor.deleteAccount({ password: this.deleteAccountConfirmPasswordInput }) .then((res) => { if (res.status === 'success') { this.$store.dispatch('logout') - this.$router.push({name: 'root'}) + this.$router.push({ name: 'root' }) } else { this.deleteAccountError = res.error } @@ -324,6 +314,37 @@ const UserSettings = { if (window.confirm(`${this.$i18n.t('settings.revoke_token')}?`)) { this.$store.dispatch('revokeToken', id) } + }, + filterUnblockedUsers (userIds) { + return reject(userIds, (userId) => { + const user = this.$store.getters.findUser(userId) + return !user || user.statusnet_blocking || user.id === this.$store.state.users.currentUser.id + }) + }, + filterUnMutedUsers (userIds) { + return reject(userIds, (userId) => { + const user = this.$store.getters.findUser(userId) + return !user || user.muted || user.id === this.$store.state.users.currentUser.id + }) + }, + queryUserIds (query) { + return this.$store.dispatch('searchUsers', query) + .then((users) => map(users, 'id')) + }, + blockUsers (ids) { + return this.$store.dispatch('blockUsers', ids) + }, + unblockUsers (ids) { + return this.$store.dispatch('unblockUsers', ids) + }, + muteUsers (ids) { + return this.$store.dispatch('muteUsers', ids) + }, + unmuteUsers (ids) { + return this.$store.dispatch('unmuteUsers', ids) + }, + identity (value) { + return value } } } diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index a1123638..ef75ac52 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -2,15 +2,23 @@ <div class="settings panel panel-default"> <div class="panel-heading"> <div class="title"> - {{$t('settings.user_settings')}} + {{ $t('settings.user_settings') }} </div> <transition name="fade"> <template v-if="currentSaveStateNotice"> - <div @click.prevent class="alert error" v-if="currentSaveStateNotice.error"> + <div + v-if="currentSaveStateNotice.error" + class="alert error" + @click.prevent + > {{ $t('settings.saving_err') }} </div> - <div @click.prevent class="alert transparent" v-if="!currentSaveStateNotice.error"> + <div + v-if="!currentSaveStateNotice.error" + class="alert transparent" + @click.prevent + > {{ $t('settings.saving_ok') }} </div> </template> @@ -19,178 +27,548 @@ <div class="panel-body profile-edit"> <tab-switcher> <div :label="$t('settings.profile_tab')"> - <div class="setting-item" > - <h2>{{$t('settings.name_bio')}}</h2> - <p>{{$t('settings.name')}}</p> - <input class='name-changer' id='username' v-model="newName"></input> - <p>{{$t('settings.bio')}}</p> - <textarea class="bio" v-model="newBio"></textarea> + <div class="setting-item"> + <h2>{{ $t('settings.name_bio') }}</h2> + <p>{{ $t('settings.name') }}</p> + <EmojiInput + v-model="newName" + enable-emoji-picker + :suggest="emojiSuggestor" + > + <input + id="username" + v-model="newName" + classname="name-changer" + > + </EmojiInput> + <p>{{ $t('settings.bio') }}</p> + <EmojiInput + v-model="newBio" + enable-emoji-picker + :suggest="emojiUserSuggestor" + > + <textarea + v-model="newBio" + classname="bio" + /> + </EmojiInput> <p> - <input type="checkbox" v-model="newLocked" id="account-locked"> - <label for="account-locked">{{$t('settings.lock_account_description')}}</label> + <input + id="account-locked" + v-model="newLocked" + type="checkbox" + > + <label for="account-locked">{{ $t('settings.lock_account_description') }}</label> </p> - <div v-if="scopeOptionsEnabled"> - <label for="default-vis">{{$t('settings.default_vis')}}</label> - <div id="default-vis" class="visibility-tray"> - <i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')" ></i> - <i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i> - <i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i> - <i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i> + <div> + <label for="default-vis">{{ $t('settings.default_vis') }}</label> + <div + id="default-vis" + class="visibility-tray" + > + <scope-selector + :show-all="true" + :user-default="newDefaultScope" + :initial-scope="newDefaultScope" + :on-scope-change="changeVis" + /> </div> </div> <p> - <input type="checkbox" v-model="newNoRichText" id="account-no-rich-text"> - <label for="account-no-rich-text">{{$t('settings.no_rich_text_description')}}</label> + <input + id="account-no-rich-text" + v-model="newNoRichText" + type="checkbox" + > + <label for="account-no-rich-text">{{ $t('settings.no_rich_text_description') }}</label> + </p> + <p> + <input + id="account-hide-follows" + v-model="hideFollows" + type="checkbox" + > + <label for="account-hide-follows">{{ $t('settings.hide_follows_description') }}</label> + </p> + <p class="setting-subitem"> + <input + id="account-hide-follows-count" + v-model="hideFollowsCount" + type="checkbox" + :disabled="!hideFollows" + > + <label for="account-hide-follows-count">{{ $t('settings.hide_follows_count_description') }}</label> </p> <p> - <input type="checkbox" v-model="hideFollows" id="account-hide-follows"> - <label for="account-hide-follows">{{$t('settings.hide_follows_description')}}</label> + <input + id="account-hide-followers" + v-model="hideFollowers" + type="checkbox" + > + <label for="account-hide-followers">{{ $t('settings.hide_followers_description') }}</label> + </p> + <p class="setting-subitem"> + <input + id="account-hide-followers-count" + v-model="hideFollowersCount" + type="checkbox" + :disabled="!hideFollowers" + > + <label for="account-hide-followers-count">{{ $t('settings.hide_followers_count_description') }}</label> </p> <p> - <input type="checkbox" v-model="hideFollowers" id="account-hide-followers"> - <label for="account-hide-followers">{{$t('settings.hide_followers_description')}}</label> + <input + id="account-show-role" + v-model="showRole" + type="checkbox" + > + <label + v-if="role === 'admin'" + for="account-show-role" + >{{ $t('settings.show_admin_badge') }}</label> + <label + v-if="role === 'moderator'" + for="account-show-role" + >{{ $t('settings.show_moderator_badge') }}</label> </p> <p> - <input type="checkbox" v-model="showRole" id="account-show-role"> - <label for="account-show-role" v-if="role === 'admin'">{{$t('settings.show_admin_badge')}}</label> - <label for="account-show-role" v-if="role === 'moderator'">{{$t('settings.show_moderator_badge')}}</label> + <input + id="discoverable" + v-model="discoverable" + type="checkbox" + > + <label for="discoverable">{{ $t('settings.discoverable') }}</label> </p> - <button :disabled='newName && newName.length === 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button> + <button + :disabled="newName && newName.length === 0" + class="btn btn-default" + @click="updateProfile" + > + {{ $t('general.submit') }} + </button> </div> <div class="setting-item"> - <h2>{{$t('settings.avatar')}}</h2> - <p class="visibility-notice">{{$t('settings.avatar_size_instruction')}}</p> - <p>{{$t('settings.current_avatar')}}</p> - <img :src="user.profile_image_url_original" class="current-avatar"></img> - <p>{{$t('settings.set_new_avatar')}}</p> - <button class="btn" type="button" id="pick-avatar" v-show="pickAvatarBtnVisible">{{$t('settings.upload_a_photo')}}</button> - <image-cropper trigger="#pick-avatar" :submitHandler="submitAvatar" @open="pickAvatarBtnVisible=false" @close="pickAvatarBtnVisible=true" /> + <h2>{{ $t('settings.avatar') }}</h2> + <p class="visibility-notice"> + {{ $t('settings.avatar_size_instruction') }} + </p> + <p>{{ $t('settings.current_avatar') }}</p> + <img + :src="user.profile_image_url_original" + class="current-avatar" + > + <p>{{ $t('settings.set_new_avatar') }}</p> + <button + v-show="pickAvatarBtnVisible" + id="pick-avatar" + class="btn" + type="button" + > + {{ $t('settings.upload_a_photo') }} + </button> + <image-cropper + trigger="#pick-avatar" + :submit-handler="submitAvatar" + @open="pickAvatarBtnVisible=false" + @close="pickAvatarBtnVisible=true" + /> </div> <div class="setting-item"> - <h2>{{$t('settings.profile_banner')}}</h2> - <p>{{$t('settings.current_profile_banner')}}</p> - <img :src="user.cover_photo" class="banner"></img> - <p>{{$t('settings.set_new_profile_banner')}}</p> - <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview"> - </img> + <h2>{{ $t('settings.profile_banner') }}</h2> + <p>{{ $t('settings.current_profile_banner') }}</p> + <img + :src="user.cover_photo" + class="banner" + > + <p>{{ $t('settings.set_new_profile_banner') }}</p> + <img + v-if="bannerPreview" + class="banner" + :src="bannerPreview" + > <div> - <input type="file" @change="uploadFile('banner', $event)" ></input> + <input + type="file" + @change="uploadFile('banner', $event)" + > </div> - <i class=" icon-spin4 animate-spin uploading" v-if="bannerUploading"></i> - <button class="btn btn-default" v-else-if="bannerPreview" @click="submitBanner">{{$t('general.submit')}}</button> - <div class='alert error' v-if="bannerUploadError"> + <i + v-if="bannerUploading" + class=" icon-spin4 animate-spin uploading" + /> + <button + v-else-if="bannerPreview" + class="btn btn-default" + @click="submitBanner" + > + {{ $t('general.submit') }} + </button> + <div + v-if="bannerUploadError" + class="alert error" + > Error: {{ bannerUploadError }} - <i class="button-icon icon-cancel" @click="clearUploadError('banner')"></i> + <i + class="button-icon icon-cancel" + @click="clearUploadError('banner')" + /> </div> </div> <div class="setting-item"> - <h2>{{$t('settings.profile_background')}}</h2> - <p>{{$t('settings.set_new_profile_background')}}</p> - <img class="bg" v-bind:src="backgroundPreview" v-if="backgroundPreview"> - </img> + <h2>{{ $t('settings.profile_background') }}</h2> + <p>{{ $t('settings.set_new_profile_background') }}</p> + <img + v-if="backgroundPreview" + class="bg" + :src="backgroundPreview" + > <div> - <input type="file" @change="uploadFile('background', $event)" ></input> + <input + type="file" + @change="uploadFile('background', $event)" + > </div> - <i class=" icon-spin4 animate-spin uploading" v-if="backgroundUploading"></i> - <button class="btn btn-default" v-else-if="backgroundPreview" @click="submitBg">{{$t('general.submit')}}</button> - <div class='alert error' v-if="backgroundUploadError"> + <i + v-if="backgroundUploading" + class=" icon-spin4 animate-spin uploading" + /> + <button + v-else-if="backgroundPreview" + class="btn btn-default" + @click="submitBg" + > + {{ $t('general.submit') }} + </button> + <div + v-if="backgroundUploadError" + class="alert error" + > Error: {{ backgroundUploadError }} - <i class="button-icon icon-cancel" @click="clearUploadError('background')"></i> + <i + class="button-icon icon-cancel" + @click="clearUploadError('background')" + /> </div> </div> </div> <div :label="$t('settings.security_tab')"> <div class="setting-item"> - <h2>{{$t('settings.change_password')}}</h2> + <h2>{{ $t('settings.change_password') }}</h2> <div> - <p>{{$t('settings.current_password')}}</p> - <input type="password" v-model="changePasswordInputs[0]"> + <p>{{ $t('settings.current_password') }}</p> + <input + v-model="changePasswordInputs[0]" + type="password" + > </div> <div> - <p>{{$t('settings.new_password')}}</p> - <input type="password" v-model="changePasswordInputs[1]"> + <p>{{ $t('settings.new_password') }}</p> + <input + v-model="changePasswordInputs[1]" + type="password" + > </div> <div> - <p>{{$t('settings.confirm_new_password')}}</p> - <input type="password" v-model="changePasswordInputs[2]"> + <p>{{ $t('settings.confirm_new_password') }}</p> + <input + v-model="changePasswordInputs[2]" + type="password" + > </div> - <button class="btn btn-default" @click="changePassword">{{$t('general.submit')}}</button> - <p v-if="changedPassword">{{$t('settings.changed_password')}}</p> - <p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p> - <p v-if="changePasswordError">{{changePasswordError}}</p> + <button + class="btn btn-default" + @click="changePassword" + > + {{ $t('general.submit') }} + </button> + <p v-if="changedPassword"> + {{ $t('settings.changed_password') }} + </p> + <p v-else-if="changePasswordError !== false"> + {{ $t('settings.change_password_error') }} + </p> + <p v-if="changePasswordError"> + {{ changePasswordError }} + </p> </div> <div class="setting-item"> - <h2>{{$t('settings.oauth_tokens')}}</h2> + <h2>{{ $t('settings.oauth_tokens') }}</h2> <table class="oauth-tokens"> <thead> <tr> - <th>{{$t('settings.app_name')}}</th> - <th>{{$t('settings.valid_until')}}</th> - <th></th> + <th>{{ $t('settings.app_name') }}</th> + <th>{{ $t('settings.valid_until') }}</th> + <th /> </tr> </thead> <tbody> - <tr v-for="oauthToken in oauthTokens" :key="oauthToken.id"> - <td>{{oauthToken.appName}}</td> - <td>{{oauthToken.validUntil}}</td> + <tr + v-for="oauthToken in oauthTokens" + :key="oauthToken.id" + > + <td>{{ oauthToken.appName }}</td> + <td>{{ oauthToken.validUntil }}</td> <td class="actions"> - <button class="btn btn-default" @click="revokeToken(oauthToken.id)"> - {{$t('settings.revoke_token')}} + <button + class="btn btn-default" + @click="revokeToken(oauthToken.id)" + > + {{ $t('settings.revoke_token') }} </button> </td> </tr> </tbody> </table> </div> - + <mfa /> <div class="setting-item"> - <h2>{{$t('settings.delete_account')}}</h2> - <p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p> + <h2>{{ $t('settings.delete_account') }}</h2> + <p v-if="!deletingAccount"> + {{ $t('settings.delete_account_description') }} + </p> <div v-if="deletingAccount"> - <p>{{$t('settings.delete_account_instructions')}}</p> - <p>{{$t('login.password')}}</p> - <input type="password" v-model="deleteAccountConfirmPasswordInput"> - <button class="btn btn-default" @click="deleteAccount">{{$t('settings.delete_account')}}</button> + <p>{{ $t('settings.delete_account_instructions') }}</p> + <p>{{ $t('login.password') }}</p> + <input + v-model="deleteAccountConfirmPasswordInput" + type="password" + > + <button + class="btn btn-default" + @click="deleteAccount" + > + {{ $t('settings.delete_account') }} + </button> </div> - <p v-if="deleteAccountError !== false">{{$t('settings.delete_account_error')}}</p> - <p v-if="deleteAccountError">{{deleteAccountError}}</p> - <button class="btn btn-default" v-if="!deletingAccount" @click="confirmDelete">{{$t('general.submit')}}</button> + <p v-if="deleteAccountError !== false"> + {{ $t('settings.delete_account_error') }} + </p> + <p v-if="deleteAccountError"> + {{ deleteAccountError }} + </p> + <button + v-if="!deletingAccount" + class="btn btn-default" + @click="confirmDelete" + > + {{ $t('general.submit') }} + </button> </div> </div> - <div :label="$t('settings.data_import_export_tab')" v-if="pleromaBackend"> + <div + v-if="pleromaBackend" + :label="$t('settings.notifications')" + > <div class="setting-item"> - <h2>{{$t('settings.follow_import')}}</h2> - <p>{{$t('settings.import_followers_from_a_csv_file')}}</p> - <form> - <input type="file" ref="followlist" v-on:change="followListChange"></input> - </form> - <i class=" icon-spin4 animate-spin uploading" v-if="followListUploading"></i> - <button class="btn btn-default" v-else @click="importFollows">{{$t('general.submit')}}</button> - <div v-if="followsImported"> - <i class="icon-cross" @click="dismissImported"></i> - <p>{{$t('settings.follows_imported')}}</p> - </div> - <div v-else-if="followImportError"> - <i class="icon-cross" @click="dismissImported"></i> - <p>{{$t('settings.follow_import_error')}}</p> + <div class="select-multiple"> + <span class="label">{{ $t('settings.notification_setting') }}</span> + <ul class="option-list"> + <li> + <input + id="notification-setting-follows" + v-model="notificationSettings.follows" + type="checkbox" + > + <label for="notification-setting-follows"> + {{ $t('settings.notification_setting_follows') }} + </label> + </li> + <li> + <input + id="notification-setting-followers" + v-model="notificationSettings.followers" + type="checkbox" + > + <label for="notification-setting-followers"> + {{ $t('settings.notification_setting_followers') }} + </label> + </li> + <li> + <input + id="notification-setting-non-follows" + v-model="notificationSettings.non_follows" + type="checkbox" + > + <label for="notification-setting-non-follows"> + {{ $t('settings.notification_setting_non_follows') }} + </label> + </li> + <li> + <input + id="notification-setting-non-followers" + v-model="notificationSettings.non_followers" + type="checkbox" + > + <label for="notification-setting-non-followers"> + {{ $t('settings.notification_setting_non_followers') }} + </label> + </li> + </ul> </div> + <p>{{ $t('settings.notification_mutes') }}</p> + <p>{{ $t('settings.notification_blocks') }}</p> + <button + class="btn btn-default" + @click="updateNotificationSettings" + > + {{ $t('general.submit') }} + </button> </div> - <div class="setting-item" v-if="enableFollowsExport"> - <h2>{{$t('settings.follow_export')}}</h2> - <button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button> + </div> + + <div + v-if="pleromaBackend" + :label="$t('settings.data_import_export_tab')" + > + <div class="setting-item"> + <h2>{{ $t('settings.follow_import') }}</h2> + <p>{{ $t('settings.import_followers_from_a_csv_file') }}</p> + <Importer + :submit-handler="importFollows" + :success-message="$t('settings.follows_imported')" + :error-message="$t('settings.follow_import_error')" + /> </div> - <div class="setting-item" v-else> - <h2>{{$t('settings.follow_export_processing')}}</h2> + <div class="setting-item"> + <h2>{{ $t('settings.follow_export') }}</h2> + <Exporter + :get-content="getFollowsContent" + filename="friends.csv" + :export-button-label="$t('settings.follow_export_button')" + /> + </div> + <div class="setting-item"> + <h2>{{ $t('settings.block_import') }}</h2> + <p>{{ $t('settings.import_blocks_from_a_csv_file') }}</p> + <Importer + :submit-handler="importBlocks" + :success-message="$t('settings.blocks_imported')" + :error-message="$t('settings.block_import_error')" + /> + </div> + <div class="setting-item"> + <h2>{{ $t('settings.block_export') }}</h2> + <Exporter + :get-content="getBlocksContent" + filename="blocks.csv" + :export-button-label="$t('settings.block_export_button')" + /> </div> </div> <div :label="$t('settings.blocks_tab')"> - <block-list :refresh="true"> - <template slot="empty">{{$t('settings.no_blocks')}}</template> - </block-list> + <div class="profile-edit-usersearch-wrapper"> + <Autosuggest + :filter="filterUnblockedUsers" + :query="queryUserIds" + :placeholder="$t('settings.search_user_to_block')" + > + <BlockCard + slot-scope="row" + :user-id="row.item" + /> + </Autosuggest> + </div> + <BlockList + :refresh="true" + :get-key="identity" + > + <template + slot="header" + slot-scope="{selected}" + > + <div class="profile-edit-bulk-actions"> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => blockUsers(selected)" + > + {{ $t('user_card.block') }} + <template slot="progress"> + {{ $t('user_card.block_progress') }} + </template> + </ProgressButton> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => unblockUsers(selected)" + > + {{ $t('user_card.unblock') }} + <template slot="progress"> + {{ $t('user_card.unblock_progress') }} + </template> + </ProgressButton> + </div> + </template> + <template + slot="item" + slot-scope="{item}" + > + <BlockCard :user-id="item" /> + </template> + <template slot="empty"> + {{ $t('settings.no_blocks') }} + </template> + </BlockList> + </div> + + <div :label="$t('settings.mutes_tab')"> + <div class="profile-edit-usersearch-wrapper"> + <Autosuggest + :filter="filterUnMutedUsers" + :query="queryUserIds" + :placeholder="$t('settings.search_user_to_mute')" + > + <MuteCard + slot-scope="row" + :user-id="row.item" + /> + </Autosuggest> + </div> + <MuteList + :refresh="true" + :get-key="identity" + > + <template + slot="header" + slot-scope="{selected}" + > + <div class="profile-edit-bulk-actions"> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => muteUsers(selected)" + > + {{ $t('user_card.mute') }} + <template slot="progress"> + {{ $t('user_card.mute_progress') }} + </template> + </ProgressButton> + <ProgressButton + v-if="selected.length > 0" + class="btn btn-default" + :click="() => unmuteUsers(selected)" + > + {{ $t('user_card.unmute') }} + <template slot="progress"> + {{ $t('user_card.unmute_progress') }} + </template> + </ProgressButton> + </div> + </template> + <template + slot="item" + slot-scope="{item}" + > + <MuteCard :user-id="item" /> + </template> + <template slot="empty"> + {{ $t('settings.no_mutes') }} + </template> + </MuteList> </div> </tab-switcher> </div> @@ -208,6 +586,10 @@ margin: 0; } + .visibility-tray { + padding-top: 5px; + } + input[type=file] { padding: 5px; height: auto; @@ -249,5 +631,23 @@ text-align: right; } } + + &-usersearch-wrapper { + padding: 1em; + } + + &-bulk-actions { + text-align: right; + padding: 0 1em; + min-height: 28px; + + button { + width: 10em; + } + } + + .setting-subitem { + margin-left: 1.75em; + } } </style> diff --git a/src/components/video_attachment/video_attachment.vue b/src/components/video_attachment/video_attachment.vue index 68de201e..97ddf1cd 100644 --- a/src/components/video_attachment/video_attachment.vue +++ b/src/components/video_attachment/video_attachment.vue @@ -1,10 +1,11 @@ <template> - <video class="video" - @loadeddata="onVideoDataLoad" + <video + class="video" :src="attachment.url" :loop="loopVideo" :controls="controls" playsinline + @loadeddata="onVideoDataLoad" /> </template> diff --git a/src/components/who_to_follow/who_to_follow.js b/src/components/who_to_follow/who_to_follow.js index be0b8827..ecd97dd7 100644 --- a/src/components/who_to_follow/who_to_follow.js +++ b/src/components/who_to_follow/who_to_follow.js @@ -16,19 +16,11 @@ const WhoToFollow = { methods: { showWhoToFollow (reply) { reply.forEach((i, index) => { - const user = { - id: 0, - name: i.display_name, - screen_name: i.acct, - profile_image_url: i.avatar || '/images/avi.png' - } - this.users.push(user) - - this.$store.state.api.backendInteractor.externalProfile(user.screen_name) + this.$store.state.api.backendInteractor.fetchUser({ id: i.acct }) .then((externalUser) => { if (!externalUser.error) { this.$store.commit('addNewUsers', [externalUser]) - user.id = externalUser.id + this.users.push(externalUser) } }) }) @@ -36,7 +28,7 @@ const WhoToFollow = { getWhoToFollow () { const credentials = this.$store.state.users.currentUser.credentials if (credentials) { - apiService.suggestions({credentials: credentials}) + apiService.suggestions({ credentials: credentials }) .then((reply) => { this.showWhoToFollow(reply) }) diff --git a/src/components/who_to_follow/who_to_follow.vue b/src/components/who_to_follow/who_to_follow.vue index 1630f5ac..3a17d0e2 100644 --- a/src/components/who_to_follow/who_to_follow.vue +++ b/src/components/who_to_follow/who_to_follow.vue @@ -1,10 +1,15 @@ <template> <div class="panel panel-default"> <div class="panel-heading"> - {{$t('who_to_follow.who_to_follow')}} + {{ $t('who_to_follow.who_to_follow') }} </div> <div class="panel-body"> - <FollowCard v-for="user in users" :key="user.id" :user="user"/> + <FollowCard + v-for="user in users" + :key="user.id" + :user="user" + class="list-item" + /> </div> </div> </template> diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.js b/src/components/who_to_follow_panel/who_to_follow_panel.js index a56a27ea..dcb56106 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.js +++ b/src/components/who_to_follow_panel/who_to_follow_panel.js @@ -13,7 +13,7 @@ function showWhoToFollow (panel, reply) { toFollow.img = img toFollow.name = name - panel.$store.state.api.backendInteractor.externalProfile(name) + panel.$store.state.api.backendInteractor.fetchUser({ id: name }) .then((externalUser) => { if (!externalUser.error) { panel.$store.commit('addNewUsers', [externalUser]) @@ -29,7 +29,7 @@ function getWhoToFollow (panel) { panel.usersToFollow.forEach(toFollow => { toFollow.name = 'Loading...' }) - apiService.suggestions({credentials: credentials}) + apiService.suggestions({ credentials: credentials }) .then((reply) => { showWhoToFollow(panel, reply) }) diff --git a/src/components/who_to_follow_panel/who_to_follow_panel.vue b/src/components/who_to_follow_panel/who_to_follow_panel.vue index 25e3a9f6..518acd97 100644 --- a/src/components/who_to_follow_panel/who_to_follow_panel.vue +++ b/src/components/who_to_follow_panel/who_to_follow_panel.vue @@ -3,17 +3,25 @@ <div class="panel panel-default base01-background"> <div class="panel-heading timeline-heading base02-background base04"> <div class="title"> - {{$t('who_to_follow.who_to_follow')}} + {{ $t('who_to_follow.who_to_follow') }} </div> </div> - <div class="panel-body who-to-follow"> - <span v-for="user in usersToFollow"> - <img v-bind:src="user.img" /> - <router-link v-bind:to="userProfileLink(user.id, user.name)"> - {{user.name}} - </router-link><br /> - </span> - <img v-bind:src="$store.state.instance.logo"> <router-link :to="{ name: 'who-to-follow' }">{{$t('who_to_follow.more')}}</router-link> + <div class="who-to-follow"> + <p + v-for="user in usersToFollow" + :key="user.id" + class="who-to-follow-items" + > + <img :src="user.img"> + <router-link :to="userProfileLink(user.id, user.name)"> + {{ user.name }} + </router-link><br> + </p> + <p class="who-to-follow-more"> + <router-link :to="{ name: 'who-to-follow' }"> + {{ $t('who_to_follow.more') }} + </router-link> + </p> </div> </div> </div> @@ -30,11 +38,19 @@ height: 32px; } .who-to-follow { - padding: 0.5em 1em 0.5em 1em; + padding: 0em 1em; margin: 0px; - line-height: 40px; + } + .who-to-follow-items { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; + padding: 0px; + margin: 1em 0em; + } + .who-to-follow-more { + padding: 0px; + margin: 1em 0em; + text-align: center; } </style> diff --git a/src/directives/body_scroll_lock.js b/src/directives/body_scroll_lock.js new file mode 100644 index 00000000..6ab20c3f --- /dev/null +++ b/src/directives/body_scroll_lock.js @@ -0,0 +1,69 @@ +import * as bodyScrollLock from 'body-scroll-lock' + +let previousNavPaddingRight +let previousAppBgWrapperRight + +const disableBodyScroll = (el) => { + const scrollBarGap = window.innerWidth - document.documentElement.clientWidth + bodyScrollLock.disableBodyScroll(el, { + reserveScrollBarGap: true + }) + setTimeout(() => { + // If previousNavPaddingRight is already set, don't set it again. + if (previousNavPaddingRight === undefined) { + const navEl = document.getElementById('nav') + previousNavPaddingRight = window.getComputedStyle(navEl).getPropertyValue('padding-right') + navEl.style.paddingRight = previousNavPaddingRight ? `calc(${previousNavPaddingRight} + ${scrollBarGap}px)` : `${scrollBarGap}px` + } + // If previousAppBgWrapeprRight is already set, don't set it again. + if (previousAppBgWrapperRight === undefined) { + const appBgWrapperEl = document.getElementById('app_bg_wrapper') + previousAppBgWrapperRight = window.getComputedStyle(appBgWrapperEl).getPropertyValue('right') + appBgWrapperEl.style.right = previousAppBgWrapperRight ? `calc(${previousAppBgWrapperRight} + ${scrollBarGap}px)` : `${scrollBarGap}px` + } + document.body.classList.add('scroll-locked') + }) +} + +const enableBodyScroll = (el) => { + setTimeout(() => { + if (previousNavPaddingRight !== undefined) { + document.getElementById('nav').style.paddingRight = previousNavPaddingRight + // Restore previousNavPaddingRight to undefined so disableBodyScroll knows it can be set again. + previousNavPaddingRight = undefined + } + if (previousAppBgWrapperRight !== undefined) { + document.getElementById('app_bg_wrapper').style.right = previousAppBgWrapperRight + // Restore previousAppBgWrapperRight to undefined so disableBodyScroll knows it can be set again. + previousAppBgWrapperRight = undefined + } + document.body.classList.remove('scroll-locked') + }) + bodyScrollLock.enableBodyScroll(el) +} + +const directive = { + inserted: (el, binding) => { + if (binding.value) { + disableBodyScroll(el) + } + }, + componentUpdated: (el, binding) => { + if (binding.oldValue === binding.value) { + return + } + + if (binding.value) { + disableBodyScroll(el) + } else { + enableBodyScroll(el) + } + }, + unbind: (el) => { + enableBodyScroll(el) + } +} + +export default (Vue) => { + Vue.directive('body-scroll-lock', directive) +} diff --git a/src/hocs/with_list/with_list.js b/src/hocs/with_list/with_list.js deleted file mode 100644 index 896f8fc8..00000000 --- a/src/hocs/with_list/with_list.js +++ /dev/null @@ -1,40 +0,0 @@ -import Vue from 'vue' -import map from 'lodash/map' -import isEmpty from 'lodash/isEmpty' -import './with_list.scss' - -const defaultEntryPropsGetter = entry => ({ entry }) -const defaultKeyGetter = entry => entry.id - -const withList = ({ - getEntryProps = defaultEntryPropsGetter, // function to accept entry and index values and return props to be passed into the item component - getKey = defaultKeyGetter // funciton to accept entry and index values and return key prop value -}) => (ItemComponent) => ( - Vue.component('withList', { - props: [ - 'entries', // array of entry - 'entryProps', // additional props to be passed into each entry - 'entryListeners' // additional event listeners to be passed into each entry - ], - render (createElement) { - return ( - <div class="with-list"> - {map(this.entries, (entry, index) => { - const props = { - key: getKey(entry, index), - props: { - ...this.$props.entryProps, - ...getEntryProps(entry, index) - }, - on: this.$props.entryListeners - } - return <ItemComponent {...props} /> - })} - {isEmpty(this.entries) && this.$slots.empty && <div class="with-list-empty-content faint">{this.$slots.empty}</div>} - </div> - ) - } - }) -) - -export default withList diff --git a/src/hocs/with_list/with_list.scss b/src/hocs/with_list/with_list.scss deleted file mode 100644 index c6e13d5b..00000000 --- a/src/hocs/with_list/with_list.scss +++ /dev/null @@ -1,6 +0,0 @@ -.with-list { - &-empty-content { - text-align: center; - padding: 10px; - } -}
\ No newline at end of file diff --git a/src/hocs/with_load_more/with_load_more.js b/src/hocs/with_load_more/with_load_more.js index 74979b87..1e1b2a74 100644 --- a/src/hocs/with_load_more/with_load_more.js +++ b/src/hocs/with_load_more/with_load_more.js @@ -4,39 +4,16 @@ import { getComponentProps } from '../../services/component_utils/component_util import './with_load_more.scss' const withLoadMore = ({ - fetch, // function to fetch entries and return a promise - select, // function to select data from store - destroy, // function called at "destroyed" lifecycle - childPropName = 'entries', // name of the prop to be passed into the wrapped component - additionalPropNames = [] // additional prop name list of the wrapper component + fetch, // function to fetch entries and return a promise + select, // function to select data from store + destroy, // function called at "destroyed" lifecycle + childPropName = 'entries', // name of the prop to be passed into the wrapped component + additionalPropNames = [] // additional prop name list of the wrapper component }) => (WrappedComponent) => { const originalProps = Object.keys(getComponentProps(WrappedComponent)) const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) return Vue.component('withLoadMore', { - render (createElement) { - const props = { - props: { - ...this.$props, - [childPropName]: this.entries - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots - } - const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value)) - return ( - <div class="with-load-more"> - <WrappedComponent {...props}> - {children} - </WrappedComponent> - <div class="with-load-more-footer"> - {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>} - {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>} - {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>} - </div> - </div> - ) - }, props, data () { return { @@ -87,6 +64,29 @@ const withLoadMore = ({ this.fetchEntries() } } + }, + render (createElement) { + const props = { + props: { + ...this.$props, + [childPropName]: this.entries + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value)) + return ( + <div class="with-load-more"> + <WrappedComponent {...props}> + {children} + </WrappedComponent> + <div class="with-load-more-footer"> + {this.error && <a onClick={this.fetchEntries} class="alert error">{this.$t('general.generic_error')}</a>} + {!this.error && this.loading && <i class="icon-spin3 animate-spin"/>} + {!this.error && !this.loading && !this.bottomedOut && <a onClick={this.fetchEntries}>{this.$t('general.more')}</a>} + </div> + </div> + ) } }) } diff --git a/src/hocs/with_load_more/with_load_more.scss b/src/hocs/with_load_more/with_load_more.scss index 1a0a9c40..4cefe2be 100644 --- a/src/hocs/with_load_more/with_load_more.scss +++ b/src/hocs/with_load_more/with_load_more.scss @@ -1,10 +1,16 @@ + +@import '../../_variables.scss'; + .with-load-more { &-footer { padding: 10px; text-align: center; + border-top: 1px solid; + border-top-color: $fallback--border; + border-top-color: var(--border, $fallback--border); .error { font-size: 14px; } } -}
\ No newline at end of file +} diff --git a/src/hocs/with_subscription/with_subscription.js b/src/hocs/with_subscription/with_subscription.js index 679409cf..91fc4cca 100644 --- a/src/hocs/with_subscription/with_subscription.js +++ b/src/hocs/with_subscription/with_subscription.js @@ -4,10 +4,10 @@ import { getComponentProps } from '../../services/component_utils/component_util import './with_subscription.scss' const withSubscription = ({ - fetch, // function to fetch entries and return a promise - select, // function to select data from store - childPropName = 'content', // name of the prop to be passed into the wrapped component - additionalPropNames = [] // additional prop name list of the wrapper component + fetch, // function to fetch entries and return a promise + select, // function to select data from store + childPropName = 'content', // name of the prop to be passed into the wrapped component + additionalPropNames = [] // additional prop name list of the wrapper component }) => (WrappedComponent) => { const originalProps = Object.keys(getComponentProps(WrappedComponent)) const props = originalProps.filter(v => v !== childPropName).concat(additionalPropNames) @@ -15,37 +15,8 @@ const withSubscription = ({ return Vue.component('withSubscription', { props: [ ...props, - 'refresh' // boolean saying to force-fetch data whenever created + 'refresh' // boolean saying to force-fetch data whenever created ], - render (createElement) { - if (!this.error && !this.loading) { - const props = { - props: { - ...this.$props, - [childPropName]: this.fetchedData - }, - on: this.$listeners, - scopedSlots: this.$scopedSlots - } - const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value)) - return ( - <div class="with-subscription"> - <WrappedComponent {...props}> - {children} - </WrappedComponent> - </div> - ) - } else { - return ( - <div class="with-subscription-loading"> - {this.error - ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a> - : <i class="icon-spin3 animate-spin"/> - } - </div> - ) - } - }, data () { return { loading: false, @@ -77,6 +48,35 @@ const withSubscription = ({ }) } } + }, + render (createElement) { + if (!this.error && !this.loading) { + const props = { + props: { + ...this.$props, + [childPropName]: this.fetchedData + }, + on: this.$listeners, + scopedSlots: this.$scopedSlots + } + const children = Object.entries(this.$slots).map(([key, value]) => createElement('template', { slot: key }, value)) + return ( + <div class="with-subscription"> + <WrappedComponent {...props}> + {children} + </WrappedComponent> + </div> + ) + } else { + return ( + <div class="with-subscription-loading"> + {this.error + ? <a onClick={this.fetchData} class="alert error">{this.$t('general.generic_error')}</a> + : <i class="icon-spin3 animate-spin"/> + } + </div> + ) + } } }) } diff --git a/src/i18n/ar.json b/src/i18n/ar.json index 242dab78..72e3010f 100644 --- a/src/i18n/ar.json +++ b/src/i18n/ar.json @@ -49,7 +49,7 @@ "account_not_locked_warning_link": "مقفل", "attachments_sensitive": "اعتبر المرفقات كلها كمحتوى حساس", "content_type": { - "plain_text": "نص صافٍ" + "text/plain": "نص صافٍ" }, "content_warning": "الموضوع (اختياري)", "default": "وصلت للتوّ إلى لوس أنجلس.", diff --git a/src/i18n/ca.json b/src/i18n/ca.json index d2f285df..42d7745c 100644 --- a/src/i18n/ca.json +++ b/src/i18n/ca.json @@ -49,7 +49,7 @@ "account_not_locked_warning_link": "bloquejat", "attachments_sensitive": "Marca l'adjunt com a delicat", "content_type": { - "plain_text": "Text pla" + "text/plain": "Text pla" }, "content_warning": "Assumpte (opcional)", "default": "Em sento…", @@ -168,6 +168,40 @@ "true": "sí" } }, + "time": { + "day": "{0} dia", + "days": "{0} dies", + "day_short": "{0} dia", + "days_short": "{0} dies", + "hour": "{0} hour", + "hours": "{0} hours", + "hour_short": "{0}h", + "hours_short": "{0}h", + "in_future": "in {0}", + "in_past": "fa {0}", + "minute": "{0} minute", + "minutes": "{0} minutes", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} mes", + "months": "{0} mesos", + "month_short": "{0} mes", + "months_short": "{0} mesos", + "now": "ara mateix", + "now_short": "ara mateix", + "second": "{0} second", + "seconds": "{0} seconds", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} setm.", + "weeks": "{0} setm.", + "week_short": "{0} setm.", + "weeks_short": "{0} setm.", + "year": "{0} any", + "years": "{0} anys", + "year_short": "{0} any", + "years_short": "{0} anys" + }, "timeline": { "collapse": "Replega", "conversation": "Conversa", diff --git a/src/i18n/compare.js b/src/i18n/compare index e9314376..4dc1e47d 100755 --- a/src/i18n/compare.js +++ b/src/i18n/compare @@ -19,7 +19,7 @@ if (typeof arg === 'undefined') { console.log('') console.log('There are no other arguments or options. Make an issue if you encounter a bug or want') console.log('some feature to be implemented. Merge requests are welcome as well.') - return + process.exit() } const english = require('./en.json') diff --git a/src/i18n/cs.json b/src/i18n/cs.json index 51e9d342..42e75567 100644 --- a/src/i18n/cs.json +++ b/src/i18n/cs.json @@ -71,9 +71,10 @@ "account_not_locked_warning_link": "uzamčen", "attachments_sensitive": "Označovat přílohy jako citlivé", "content_type": { - "plain_text": "Prostý text", + "text/plain": "Prostý text", "text/html": "HTML", - "text/markdown": "Markdown" + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "Předmět (volitelný)", "default": "Právě jsem přistál v L.A.", @@ -349,6 +350,40 @@ } } }, + "time": { + "day": "{0} day", + "days": "{0} days", + "day_short": "{0}d", + "days_short": "{0}d", + "hour": "{0} hour", + "hours": "{0} hours", + "hour_short": "{0}h", + "hours_short": "{0}h", + "in_future": "in {0}", + "in_past": "{0} ago", + "minute": "{0} minute", + "minutes": "{0} minutes", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} měs", + "months": "{0} měs", + "month_short": "{0} měs", + "months_short": "{0} měs", + "now": "teď", + "now_short": "teď", + "second": "{0} second", + "seconds": "{0} seconds", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} týd", + "weeks": "{0} týd", + "week_short": "{0} týd", + "weeks_short": "{0} týd", + "year": "{0} r", + "years": "{0} l", + "year_short": "{0}r", + "years_short": "{0}l" + }, "timeline": { "collapse": "Zabalit", "conversation": "Konverzace", diff --git a/src/i18n/de.json b/src/i18n/de.json index 07d44348..fa9db16c 100644 --- a/src/i18n/de.json +++ b/src/i18n/de.json @@ -55,7 +55,7 @@ "account_not_locked_warning_link": "gesperrt", "attachments_sensitive": "Anhänge als heikel markieren", "content_type": { - "plain_text": "Nur Text" + "text/plain": "Nur Text" }, "content_warning": "Betreff (optional)", "default": "Sitze gerade im Hofbräuhaus.", diff --git a/src/i18n/en.json b/src/i18n/en.json index 01fe2fba..32c25e3e 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -2,6 +2,10 @@ "chat": { "title": "Chat" }, + "exporter": { + "export": "Export", + "processing": "Processing, you'll soon be asked to download your file" + }, "features_panel": { "chat": "Chat", "gopher": "Gopher", @@ -20,13 +24,26 @@ "submit": "Submit", "more": "More", "generic_error": "An error occured", - "optional": "optional" + "optional": "optional", + "show_more": "Show more", + "show_less": "Show less", + "cancel": "Cancel", + "disable": "Disable", + "enable": "Enable", + "confirm": "Confirm", + "verify": "Verify" }, "image_cropper": { "crop_picture": "Crop picture", "save": "Save", + "save_without_cropping": "Save without cropping", "cancel": "Cancel" }, + "importer": { + "submit": "Submit", + "success": "Imported successfully.", + "error": "An error occured while importing this file." + }, "login": { "login": "Log in", "description": "Log in with OAuth", @@ -35,7 +52,15 @@ "placeholder": "e.g. lain", "register": "Register", "username": "Username", - "hint": "Log in to join the discussion" + "hint": "Log in to join the discussion", + "authentication_code": "Authentication code", + "enter_recovery_code": "Enter a recovery code", + "enter_two_factor_code": "Enter a two-factor code", + "recovery_code": "Recovery code", + "heading" : { + "totp" : "Two-factor authentication", + "recovery" : "Two-factor recovery" + } }, "media_modal": { "previous": "Previous", @@ -43,15 +68,18 @@ }, "nav": { "about": "About", + "administration": "Administration", "back": "Back", "chat": "Local Chat", "friend_requests": "Follow Requests", "mentions": "Mentions", + "interactions": "Interactions", "dms": "Direct Messages", "public_tl": "Public Timeline", "timeline": "Timeline", "twkn": "The Whole Known Network", "user_search": "User Search", + "search": "Search", "who_to_follow": "Who to follow", "preferences": "Preferences" }, @@ -65,6 +93,34 @@ "repeated_you": "repeated your status", "no_more_notifications": "No more notifications" }, + "polls": { + "add_poll": "Add Poll", + "add_option": "Add Option", + "option": "Option", + "votes": "votes", + "vote": "Vote", + "type": "Poll type", + "single_choice": "Single choice", + "multiple_choices": "Multiple choices", + "expiry": "Poll age", + "expires_in": "Poll ends in {0}", + "expired": "Poll ended {0} ago", + "not_enough_options": "Too few unique options in poll" + }, + "emoji": { + "stickers": "Stickers", + "emoji": "Emoji", + "keep_open": "Keep picker open", + "search_emoji": "Search for an emoji", + "add_emoji": "Insert emoji", + "custom": "Custom emoji", + "unicode": "Unicode emoji" + }, + "interactions": { + "favs_repeats": "Repeats and Favorites", + "follows": "New follows", + "load_older": "Load older interactions" + }, "post_status": { "new_status": "Post new status", "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.", @@ -73,12 +129,19 @@ "content_type": { "text/plain": "Plain text", "text/html": "HTML", - "text/markdown": "Markdown" + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "Subject (optional)", "default": "Just landed in L.A.", - "direct_warning": "This post will only be visible to all the mentioned users.", + "direct_warning_to_all": "This post will be visible to all the mentioned users.", + "direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.", "posting": "Posting", + "scope_notice": { + "public": "This post will be visible to everyone", + "private": "This post will be visible to your followers only", + "unlisted": "This post will not be visible in Public Timeline and The Whole Known Network" + }, "scope": { "direct": "Direct - Post to mentioned users only", "private": "Followers-only - Post to followers only", @@ -97,7 +160,7 @@ "new_captcha": "Click the image to get a new captcha", "username_placeholder": "e.g. lain", "fullname_placeholder": "e.g. Lain Iwakura", - "bio_placeholder": "e.g.\nHi, I'm Lain\nI’m an anime girl living in suburban Japan. You may know me from the Wired.", + "bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.", "validations": { "username_required": "cannot be left blank", "fullname_required": "cannot be left blank", @@ -107,8 +170,34 @@ "password_confirmation_match": "should be the same as password" } }, + "selectable_list": { + "select_all": "Select all" + }, "settings": { "app_name": "App name", + "security": "Security", + "enter_current_password_to_confirm": "Enter your current password to confirm your identity", + "mfa": { + "otp" : "OTP", + "setup_otp" : "Setup OTP", + "wait_pre_setup_otp" : "presetting OTP", + "confirm_and_enable" : "Confirm & enable OTP", + "title": "Two-factor Authentication", + "generate_new_recovery_codes" : "Generate new recovery codes", + "warning_of_generate_new_codes" : "When you generate new recovery codes, your old codes won’t work anymore.", + "recovery_codes" : "Recovery codes.", + "waiting_a_recovery_codes": "Receiving backup codes...", + "recovery_codes_warning" : "Write the codes down or save them somewhere secure - otherwise you won't see them again. If you lose access to your 2FA app and recovery codes you'll be locked out of your account.", + "authentication_methods" : "Authentication methods", + "scan": { + "title": "Scan", + "desc": "Using your two-factor app, scan this QR code or enter text key:", + "secret_code": "Key" + }, + "verify": { + "desc": "To enable two-factor authentication, enter the code from your two-factor app:" + } + }, "attachmentRadius": "Attachments", "attachments": "Attachments", "autoload": "Enable automatic loading when scrolled to the bottom", @@ -117,6 +206,11 @@ "avatarRadius": "Avatars", "background": "Background", "bio": "Bio", + "block_export": "Block export", + "block_export_button": "Export your blocks to a csv file", + "block_import": "Block import", + "block_import_error": "Error importing blocks", + "blocks_imported": "Blocks imported! Processing them will take a while.", "blocks_tab": "Blocks", "btnRadius": "Buttons", "cBlue": "Blue (Reply, follow)", @@ -138,13 +232,14 @@ "delete_account_description": "Permanently delete your account and all your messages.", "delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.", "delete_account_instructions": "Type your password in the input below to confirm account deletion.", + "discoverable": "Allow discovery of this account in search results and other services", "avatar_size_instruction": "The recommended minimum size for avatar images is 150x150 pixels.", + "pad_emoji": "Pad emoji with spaces when adding from picker", "export_theme": "Save preset", "filtering": "Filtering", "filtering_explanation": "All statuses containing these words will be muted, one per line", "follow_export": "Follow export", "follow_export_button": "Export your follows to a csv file", - "follow_export_processing": "Processing, you'll soon be asked to download your file", "follow_import": "Follow import", "follow_import_error": "Error importing followers", "follows_imported": "Follows imported! Processing them will take a while.", @@ -152,6 +247,7 @@ "general": "General", "hide_attachments_in_convo": "Hide attachments in conversations", "hide_attachments_in_tl": "Hide attachments in timeline", + "hide_muted_posts": "Hide posts of muted users", "max_thumbnails": "Maximum amount of thumbnails per post", "hide_isp": "Hide instance-specific panel", "preload_images": "Preload images", @@ -159,6 +255,7 @@ "hide_post_stats": "Hide post statistics (e.g. the number of favorites)", "hide_user_stats": "Hide user statistics (e.g. the number of followers)", "hide_filtered_statuses": "Hide filtered statuses", + "import_blocks_from_a_csv_file": "Import blocks from a csv file", "import_followers_from_a_csv_file": "Import follows from a csv file", "import_theme": "Load preset", "inputRadius": "Input fields", @@ -174,7 +271,7 @@ "loop_video": "Loop videos", "loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")", "mutes_tab": "Mutes", - "play_videos_in_modal": "Play videos directly in the media viewer", + "play_videos_in_modal": "Play videos in a popup frame", "use_contain_fit": "Don't crop the attachment in thumbnails", "name": "Name", "name_bio": "Name & Bio", @@ -189,6 +286,8 @@ "no_mutes": "No mutes", "hide_follows_description": "Don't show who I'm following", "hide_followers_description": "Don't show who's following me", + "hide_follows_count_description": "Don't show follow count", + "hide_followers_count_description": "Don't show follower count", "show_admin_badge": "Show Admin badge in my profile", "show_moderator_badge": "Show Moderator badge in my profile", "nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding", @@ -209,10 +308,14 @@ "reply_visibility_all": "Show all replies", "reply_visibility_following": "Only show replies directed at me or users I'm following", "reply_visibility_self": "Only show replies directed at me", + "autohide_floating_post_button": "Automatically hide New Post button (mobile)", "saving_err": "Error saving settings", "saving_ok": "Settings saved", + "search_user_to_block": "Search whom you want to block", + "search_user_to_mute": "Search whom you want to mute", "security_tab": "Security", "scope_copy": "Copy scope when replying (DMs are always copied)", + "minimal_scopes_mode": "Minimize post scope selection options", "set_new_avatar": "Set new avatar", "set_new_profile_background": "Set new profile background", "set_new_profile_banner": "Set new profile banner", @@ -238,6 +341,13 @@ "true": "yes" }, "notifications": "Notifications", + "notification_setting": "Receive notifications from:", + "notification_setting_follows": "Users you follow", + "notification_setting_non_follows": "Users you do not follow", + "notification_setting_followers": "Users who follow you", + "notification_setting_non_followers": "Users who do not follow you", + "notification_mutes": "To stop receiving notifications from a specific user, use a mute.", + "notification_blocks": "Blocking a user stops all notifications as well as unsubscribes them.", "enable_web_push_notifications": "Enable web push notifications", "style": { "switcher": { @@ -347,8 +457,47 @@ "checkbox": "I have skimmed over terms and conditions", "link": "a nice lil' link" } + }, + "version": { + "title": "Version", + "backend_version": "Backend Version", + "frontend_version": "Frontend Version" } }, + "time": { + "day": "{0} day", + "days": "{0} days", + "day_short": "{0}d", + "days_short": "{0}d", + "hour": "{0} hour", + "hours": "{0} hours", + "hour_short": "{0}h", + "hours_short": "{0}h", + "in_future": "in {0}", + "in_past": "{0} ago", + "minute": "{0} minute", + "minutes": "{0} minutes", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} month", + "months": "{0} months", + "month_short": "{0}mo", + "months_short": "{0}mo", + "now": "just now", + "now_short": "now", + "second": "{0} second", + "seconds": "{0} seconds", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} week", + "weeks": "{0} weeks", + "week_short": "{0}w", + "weeks_short": "{0}w", + "year": "{0} year", + "years": "{0} years", + "year_short": "{0}y", + "years_short": "{0}y" + }, "timeline": { "collapse": "Collapse", "conversation": "Conversation", @@ -362,8 +511,17 @@ "no_statuses": "No statuses" }, "status": { + "favorites": "Favorites", + "repeats": "Repeats", + "delete": "Delete status", + "pin": "Pin on profile", + "unpin": "Unpin from profile", + "pinned": "Pinned", + "delete_confirm": "Do you really want to delete this status?", "reply_to": "Reply to", - "replies_list": "Replies:" + "replies_list": "Replies:", + "mute_conversation": "Mute conversation", + "unmute_conversation": "Unmute conversation" }, "user_card": { "approve": "Approve", @@ -382,23 +540,55 @@ "follows_you": "Follows you!", "its_you": "It's you!", "media": "Media", + "mention": "Mention", "mute": "Mute", "muted": "Muted", "per_day": "per day", "remote_follow": "Remote follow", + "report": "Report", "statuses": "Statuses", + "subscribe": "Subscribe", + "unsubscribe": "Unsubscribe", "unblock": "Unblock", "unblock_progress": "Unblocking...", "block_progress": "Blocking...", "unmute": "Unmute", "unmute_progress": "Unmuting...", - "mute_progress": "Muting..." + "mute_progress": "Muting...", + "admin_menu": { + "moderation": "Moderation", + "grant_admin": "Grant Admin", + "revoke_admin": "Revoke Admin", + "grant_moderator": "Grant Moderator", + "revoke_moderator": "Revoke Moderator", + "activate_account": "Activate account", + "deactivate_account": "Deactivate account", + "delete_account": "Delete account", + "force_nsfw": "Mark all posts as NSFW", + "strip_media": "Remove media from posts", + "force_unlisted": "Force posts to be unlisted", + "sandbox": "Force posts to be followers-only", + "disable_remote_subscription": "Disallow following user from remote instances", + "disable_any_subscription": "Disallow following user at all", + "quarantine": "Disallow user posts from federating", + "delete_user": "Delete user", + "delete_user_confirmation": "Are you absolutely sure? This action cannot be undone." + } }, "user_profile": { "timeline_title": "User Timeline", "profile_does_not_exist": "Sorry, this profile does not exist.", "profile_loading_error": "Sorry, there was an error loading this profile." }, + "user_reporting": { + "title": "Reporting {0}", + "add_comment_description": "The report will be sent to your instance moderators. You can provide an explanation of why you are reporting this account below:", + "additional_comments": "Additional comments", + "forward_description": "The account is from another server. Send a copy of the report there as well?", + "forward_to": "Forward to {0}", + "submit": "Submit", + "generic_error": "An error occurred while processing your request." + }, "who_to_follow": { "more": "More", "who_to_follow": "Who to follow" @@ -423,5 +613,23 @@ "GiB": "GiB", "TiB": "TiB" } + }, + "search": { + "people": "People", + "hashtags": "Hashtags", + "person_talking": "{count} person talking", + "people_talking": "{count} people talking", + "no_results": "No results" + }, + "password_reset": { + "forgot_password": "Forgot password?", + "password_reset": "Password reset", + "instruction": "Enter your email address or username. We will send you a link to reset your password.", + "placeholder": "Your email or username", + "check_email": "Check your email for a link to reset your password.", + "return_home": "Return to the home page", + "not_found": "We couldn't find that email or username.", + "too_many_requests": "You have reached the limit of attempts, try again later.", + "password_reset_disabled": "Password reset is disabled. Please contact your instance administrator." } } diff --git a/src/i18n/eo.json b/src/i18n/eo.json index 34851a44..6c5b3a74 100644 --- a/src/i18n/eo.json +++ b/src/i18n/eo.json @@ -71,7 +71,7 @@ "account_not_locked_warning_link": "ŝlosita", "attachments_sensitive": "Marki kunsendaĵojn kiel konsternajn", "content_type": { - "plain_text": "Plata teksto" + "text/plain": "Plata teksto" }, "content_warning": "Temo (malnepra)", "default": "Ĵus alvenis al la Universala Kongreso!", diff --git a/src/i18n/es.json b/src/i18n/es.json index fe96dd08..53a3b9dd 100644 --- a/src/i18n/es.json +++ b/src/i18n/es.json @@ -2,12 +2,16 @@ "chat": { "title": "Chat" }, + "exporter": { + "export": "Exportar", + "processing": "Procesando. Pronto se te pedirá que descargues tu archivo" + }, "features_panel": { "chat": "Chat", "gopher": "Gopher", - "media_proxy": "Media proxy", + "media_proxy": "Proxy de medios", "scope_options": "Opciones del alcance de la visibilidad", - "text_limit": "Límite de carácteres", + "text_limit": "Límite de caracteres", "title": "Características", "who_to_follow": "A quién seguir" }, @@ -19,29 +23,63 @@ "apply": "Aplicar", "submit": "Enviar", "more": "Más", - "generic_error": "Ha ocurrido un error" + "generic_error": "Ha ocurrido un error", + "optional": "opcional", + "show_more": "Mostrar más", + "show_less": "Mostrar menos", + "cancel": "Cancelar", + "disable": "Inhabilitar", + "enable": "Habilitar", + "confirm": "Confirmar", + "verify": "Verificar" + }, + "image_cropper": { + "crop_picture": "Recortar la foto", + "save": "Guardar", + "save_without_cropping": "Guardar sin recortar", + "cancel": "Cancelar" + }, + "importer": { + "submit": "Enviar", + "success": "Importado con éxito", + "error": "Se ha producido un error al importar el archivo." }, "login": { "login": "Identificación", "description": "Identificación con OAuth", - "logout": "Salir", + "logout": "Cerrar sesión", "password": "Contraseña", "placeholder": "p.ej. lain", - "register": "Registrar", + "register": "Registrarse", "username": "Usuario", - "hint": "Inicia sesión para unirte a la discusión" + "hint": "Inicia sesión para unirte a la discusión", + "authentication_code": "Código de autenticación", + "enter_recovery_code": "Inserta el código de recuperación", + "enter_two_factor_code": "Inserta el código de dos factores", + "recovery_code": "Código de recuperación", + "heading" : { + "totp" : "Autenticación de dos factores", + "recovery" : "Recuperación de dos factores" + } + }, + "media_modal": { + "previous": "Anterior", + "next": "Siguiente" }, "nav": { - "about": "Sobre", + "about": "Acerca de", + "administration": "Administración", "back": "Volver", "chat": "Chat Local", - "friend_requests": "Solicitudes de amistad", + "friend_requests": "Solicitudes de seguimiento", "mentions": "Menciones", - "dms": "Mensajes Directo", + "interactions": "Interacciones", + "dms": "Mensajes Directos", "public_tl": "Línea Temporal Pública", "timeline": "Línea Temporal", "twkn": "Toda La Red Conocida", "user_search": "Búsqueda de Usuarios", + "search": "Buscar", "who_to_follow": "A quién seguir", "preferences": "Preferencias" }, @@ -52,37 +90,80 @@ "load_older": "Cargar notificaciones antiguas", "notifications": "Notificaciones", "read": "¡Leído!", - "repeated_you": "repite tu estado", + "repeated_you": "repitió tu estado", "no_more_notifications": "No hay más notificaciones" }, + "polls": { + "add_poll": "Añadir encuesta", + "add_option": "Añadir opción", + "option": "Opción", + "votes": "votos", + "vote": "Votar", + "type": "Tipo de encuesta", + "single_choice": "Elección única", + "multiple_choices": "Elección múltiple", + "expiry": "Tiempo de vida de la encuesta", + "expires_in": "La encuensta termina en {0}", + "expired": "La encuesta terminó hace {0}", + "not_enough_options": "Muy pocas opciones únicas en la encuesta" + }, + "emoji": { + "stickers": "Pegatinas", + "emoji": "Emoji", + "keep_open": "Mantener el selector abierto", + "search_emoji": "Buscar un emoji", + "add_emoji": "Insertar un emoji", + "custom": "Emojis personalizados", + "unicode": "Emojis unicode" + }, + "stickers": { + "add_sticker": "Añadir Pegatina" + }, + "interactions": { + "favs_repeats": "Favoritos y Repetidos", + "follows": "Nuevos seguidores", + "load_older": "Cargar interacciones más antiguas" + }, "post_status": { "new_status": "Publicar un nuevo estado", "account_not_locked_warning": "Tu cuenta no está {0}. Cualquiera puede seguirte y leer las entradas para Solo-Seguidores.", "account_not_locked_warning_link": "bloqueada", "attachments_sensitive": "Contenido sensible", "content_type": { - "plain_text": "Texto Plano" + "text/plain": "Texto Plano", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "Tema (opcional)", "default": "Acabo de aterrizar en L.A.", - "direct_warning": "Esta entrada solo será visible para los usuarios mencionados.", + "direct_warning_to_all": "Esta publicación será visible para todos los usarios mencionados.", + "direct_warning_to_first_only": "Esta publicación solo será visible para los usuarios mencionados al comienzo del mensaje.", "posting": "Publicando", + "scope_notice": { + "public": "Esta publicación será visible para todo el mundo", + "private": "Esta publicación solo será visible para tus seguidores.", + "unlisted": "Esta publicación no será visible en la Línea Temporal Pública ni en Toda La Red Conocida" + }, "scope": { "direct": "Directo - Solo para los usuarios mencionados.", - "private": "Solo-Seguidores - Solo tus seguidores leeran la entrada", + "private": "Solo-seguidores - Solo tus seguidores leerán la publicación", "public": "Público - Entradas visibles en las Líneas Temporales Públicas", - "unlisted": "Sin Listar - Entradas no visibles en las Líneas Temporales Públicas" + "unlisted": "Sin listar - Entradas no visibles en las Líneas Temporales Públicas" } }, "registration": { "bio": "Biografía", "email": "Correo electrónico", "fullname": "Nombre a mostrar", - "password_confirm": "Confirmación de contraseña", + "password_confirm": "Confirmar contraseña", "registration": "Registro", "token": "Token de invitación", "captcha": "CAPTCHA", - "new_captcha": "Click en la imagen para obtener un nuevo captca", + "new_captcha": "Haz click en la imagen para obtener un nuevo captcha", + "username_placeholder": "p.ej. lain", + "fullname_placeholder": "p.ej. Lain Iwakura", + "bio_placeholder": "e.g.\nHola, soy un ejemplo.\nAquí puedes poner algo representativo tuyo... o no.", "validations": { "username_required": "no puede estar vacío", "fullname_required": "no puede estar vacío", @@ -92,15 +173,48 @@ "password_confirmation_match": "la contraseña no coincide" } }, + "selectable_list": { + "select_all": "Seleccionar todo" + }, "settings": { + "app_name": "Nombre de la aplicación", + "security": "Seguridad", + "enter_current_password_to_confirm": "Introduce la contraseña actual para confirmar tu identidad", + "mfa": { + "otp" : "OTP", + "setup_otp" : "Configurar OTP", + "wait_pre_setup_otp" : "preconfiguración OTP", + "confirm_and_enable" : "Confirmar y habilitar OTP", + "title": "Autentificación de dos factores", + "generate_new_recovery_codes" : "Generar códigos de recuperación nuevos", + "warning_of_generate_new_codes" : "Cuando generas nuevos códigos de recuperación, los antiguos dejarán de funcionar.", + "recovery_codes" : "Códigos de recuperación.", + "waiting_a_recovery_codes": "Recibiendo códigos de respaldo", + "recovery_codes_warning" : "Anote los códigos o guárdelos en un lugar seguro, de lo contrario no los volverá a ver. Si pierde el acceso a su aplicación 2FA y los códigos de recuperación, su cuenta quedará bloqueada.", + "authentication_methods" : "Métodos de autentificación", + "scan": { + "title": "Escanear", + "desc": "Usando su aplicación de dos factores, escanee este código QR o ingrese la clave de texto:", + "secret_code": "Clave" + }, + "verify": { + "desc": "Para habilitar la autenticación de dos factores, ingrese el código de su aplicación 2FA:" + } + }, "attachmentRadius": "Adjuntos", "attachments": "Adjuntos", - "autoload": "Activar carga automática al llegar al final de la página", + "autoload": "Habilitar carga automática al llegar al final de la página", "avatar": "Avatar", "avatarAltRadius": "Avatares (Notificaciones)", "avatarRadius": "Avatares", "background": "Fondo", "bio": "Biografía", + "block_export": "Exportar usuarios bloqueados", + "block_export_button": "Exporta la lista de tus usarios bloqueados a un archivo csv", + "block_import": "Importar usuarios bloqueados", + "block_import_error": "Error importando la lista de usuarios bloqueados", + "blocks_imported": "¡Lista de usuarios bloqueados importada! El procesado puede tardar un poco.", + "blocks_tab": "Bloqueados", "btnRadius": "Botones", "cBlue": "Azul (Responder, seguir)", "cGreen": "Verde (Retweet)", @@ -118,29 +232,33 @@ "data_import_export_tab": "Importar / Exportar Datos", "default_vis": "Alcance de visibilidad por defecto", "delete_account": "Eliminar la cuenta", + "discoverable": "Permitir la aparición de esta cuenta en los resultados de búsqueda y otros servicios", "delete_account_description": "Eliminar para siempre la cuenta y todos los mensajes.", + "pad_emoji": "Rellenar con espacios al agregar emojis desde el selector", "delete_account_error": "Hubo un error al eliminar tu cuenta. Si el fallo persiste, ponte en contacto con el administrador de tu instancia.", "delete_account_instructions": "Escribe tu contraseña para confirmar la eliminación de tu cuenta.", "avatar_size_instruction": "El tamaño mínimo recomendado para el avatar es de 150X150 píxeles.", "export_theme": "Exportar tema", - "filtering": "Filtros", + "filtering": "Filtrado", "filtering_explanation": "Todos los estados que contengan estas palabras serán silenciados, una por línea", "follow_export": "Exportar personas que tú sigues", - "follow_export_button": "Exporta tus seguidores a un archivo csv", - "follow_export_processing": "Procesando, en breve se te preguntará para guardar el archivo", + "follow_export_button": "Exporta tus seguidores a un fichero csv", "follow_import": "Importar personas que tú sigues", - "follow_import_error": "Error al importal el archivo", + "follow_import_error": "Error al importar el fichero", "follows_imported": "¡Importado! Procesarlos llevará tiempo.", "foreground": "Primer plano", "general": "General", "hide_attachments_in_convo": "Ocultar adjuntos en las conversaciones", "hide_attachments_in_tl": "Ocultar adjuntos en la línea temporal", + "hide_muted_posts": "Ocultar las publicaciones de los usuarios silenciados", + "max_thumbnails": "Cantidad máxima de miniaturas por publicación", "hide_isp": "Ocultar el panel específico de la instancia", "preload_images": "Precargar las imágenes", "use_one_click_nsfw": "Abrir los adjuntos NSFW con un solo click.", "hide_post_stats": "Ocultar las estadísticas de las entradas (p.ej. el número de favoritos)", "hide_user_stats": "Ocultar las estadísticas del usuario (p.ej. el número de seguidores)", "hide_filtered_statuses": "Ocultar estados filtrados", + "import_blocks_from_a_csv_file": "Importar lista de usuarios bloqueados dese un archivo csv", "import_followers_from_a_csv_file": "Importar personas que tú sigues a partir de un archivo csv", "import_theme": "Importar tema", "inputRadius": "Campos de entrada", @@ -155,7 +273,8 @@ "lock_account_description": "Restringir el acceso a tu cuenta solo a seguidores admitidos", "loop_video": "Vídeos en bucle", "loop_video_silent_only": "Bucle solo en vídeos sin sonido (p.ej. \"gifs\" de Mastodon)", - "play_videos_in_modal": "Reproducir los vídeos directamente en el visor de medios", + "mutes_tab": "Silenciados", + "play_videos_in_modal": "Reproducir los vídeos en un marco emergente", "use_contain_fit": "No recortar los adjuntos en miniaturas", "name": "Nombre", "name_bio": "Nombre y Biografía", @@ -166,10 +285,14 @@ "notification_visibility_mentions": "Menciones", "notification_visibility_repeats": "Repeticiones (Repeats)", "no_rich_text_description": "Eliminar el formato de texto enriquecido de todas las entradas", + "no_blocks": "No hay usuarios bloqueados", + "no_mutes": "No hay usuarios sinlenciados", "hide_follows_description": "No mostrar a quién sigo", "hide_followers_description": "No mostrar quién me sigue", - "show_admin_badge": "Mostrar la placa de administrador en mi perfil", - "show_moderator_badge": "Mostrar la placa de moderador en mi perfil", + "hide_follows_count_description": "No mostrar el número de cuentas que sigo", + "hide_followers_count_description": "No mostrar el número de cuentas que me siguen", + "show_admin_badge": "Mostrar la insignia de Administrador en mi perfil", + "show_moderator_badge": "Mostrar la insignia de Moderador en mi perfil", "nsfw_clickthrough": "Activar el clic para ocultar los adjuntos NSFW", "oauth_tokens": "Tokens de OAuth", "token": "Token", @@ -182,40 +305,52 @@ "profile_background": "Fondo del Perfil", "profile_banner": "Cabecera del Perfil", "profile_tab": "Perfil", - "radii_help": "Estable el redondeo de las esquinas del interfaz (en píxeles)", + "radii_help": "Estable el redondeo de las esquinas de la interfaz (en píxeles)", "replies_in_timeline": "Réplicas en la línea temporal", - "reply_link_preview": "Activar la previsualización del enlace de responder al pasar el ratón por encim", + "reply_link_preview": "Activar la previsualización del enlace de responder al pasar el ratón por encima", "reply_visibility_all": "Mostrar todas las réplicas", "reply_visibility_following": "Solo mostrar réplicas para mí o usuarios a los que sigo", "reply_visibility_self": "Solo mostrar réplicas para mí", + "autohide_floating_post_button": "Ocultar automáticamente el botón 'Nueva Publicación' (para móviles)", "saving_err": "Error al guardar los ajustes", "saving_ok": "Ajustes guardados", + "search_user_to_block": "Buscar usuarios a bloquear", + "search_user_to_mute": "Buscar usuarios a silenciar", "security_tab": "Seguridad", - "scope_copy": "Copiar la visibilidad cuando contestamos (En los mensajes directos (MDs) siempre se copia)", + "scope_copy": "Copiar la visibilidad de la publicación cuando contestamos (En los mensajes directos (MDs) siempre se copia)", + "minimal_scopes_mode": "Minimizar las opciones de publicación", "set_new_avatar": "Cambiar avatar", - "set_new_profile_background": "Cambiar fondo del perfil", - "set_new_profile_banner": "Cambiar cabecera del perfil", + "set_new_profile_background": "Cambiar el fondo del perfil", + "set_new_profile_banner": "Cambiar la cabecera del perfil", "settings": "Ajustes", "subject_input_always_show": "Mostrar siempre el campo del tema", - "subject_line_behavior": "Copiar el tema en las contestaciones", - "subject_line_email": "Tipo email: \"re: tema\"", - "subject_line_mastodon": "Tipo mastodon: copiar como es", + "subject_line_behavior": "Copiar el tema en las respuestas", + "subject_line_email": "Como email: \"re: tema\"", + "subject_line_mastodon": "Como mastodon: copiar como es", "subject_line_noop": "No copiar", "post_status_content_type": "Formato de publicación", "stop_gifs": "Iniciar GIFs al pasar el ratón", - "streaming": "Habilite la transmisión automática de nuevas publicaciones cuando se desplaza hacia la parte superior", + "streaming": "Habilitar la transmisión automática de nuevas publicaciones cuando se desplaza hacia la parte superior", "text": "Texto", "theme": "Tema", "theme_help": "Use códigos de color hexadecimales (#rrggbb) para personalizar su tema de colores.", - "theme_help_v2_1": "También puede invalidar los colores y la opacidad de ciertos componentes si activa la casilla de verificación, use el botón \"Borrar todo\" para deshacer los cambios.", - "theme_help_v2_2": "Los iconos debajo de algunas entradas son indicadores de contraste de fondo/texto, desplace el ratón para obtener información detallada. Tenga en cuenta que cuando se utilizan indicadores de contraste de transparencia se muestra el peor caso posible.", + "theme_help_v2_1": "También puede invalidar los colores y la opacidad de ciertos componentes si activa la casilla de verificación. Use el botón \"Borrar todo\" para deshacer los cambios.", + "theme_help_v2_2": "Los iconos debajo de algunas entradas son indicadores de contraste de fondo/texto, desplace el ratón por encima para obtener información más detallada. Tenga en cuenta que cuando se utilizan indicadores de contraste de transparencia se muestra el peor caso posible.", "tooltipRadius": "Información/alertas", - "user_settings": "Ajustes de Usuario", + "upload_a_photo": "Subir una foto", + "user_settings": "Ajustes del Usuario", "values": { "false": "no", "true": "sí" }, "notifications": "Notificaciones", + "notification_setting": "Recibir notificaciones de:", + "notification_setting_follows": "Usuarios que sigues", + "notification_setting_non_follows": "Usuarios que no sigues", + "notification_setting_followers": "Usuarios que te siguen", + "notification_setting_non_followers": "Usuarios que no te siguen", + "notification_mutes": "Para dejar de recibir notificaciones de un usuario específico, siléncialo.", + "notification_blocks": "El bloqueo de un usuario detiene todas las notificaciones y también las cancela.", "enable_web_push_notifications": "Habilitar las notificiaciones en el navegador", "style": { "switcher": { @@ -274,14 +409,14 @@ "shadow_id": "Sombra #{value}", "blur": "Difuminar", "spread": "Cantidad", - "inset": "Insertada", + "inset": "Sombra interior", "hint": "Para las sombras, también puede usar --variable como un valor de color para usar las variables CSS3. Tenga en cuenta que establecer la opacidad no funcionará en este caso.", "filter_hint": { "always_drop_shadow": "Advertencia, esta sombra siempre usa {0} cuando el navegador lo soporta.", "drop_shadow_syntax": "{0} no soporta el parámetro {1} y la palabra clave {2}.", - "avatar_inset": "Tenga en cuenta que la combinación de sombras insertadas como no-insertadas en los avatares, puede dar resultados inesperados con los avatares transparentes.", + "avatar_inset": "Tenga en cuenta que la combinación de sombras interiores como no-interiores en los avatares, puede dar resultados inesperados con los avatares transparentes.", "spread_zero": "Sombras con una cantidad > 0 aparecerá como si estuviera puesto a cero", - "inset_classic": "Las sombras insertadas estarán usando {0}" + "inset_classic": "Las sombras interiores estarán usando {0}" }, "components": { "panel": "Panel", @@ -299,7 +434,7 @@ }, "fonts": { "_tab_label": "Fuentes", - "help": "Seleccione la fuente para utilizar para los elementos de la interfaz de usuario. Para \"personalizado\", debe ingresar el nombre exacto de la fuente tal como aparece en el sistema.", + "help": "Seleccione la fuente a utilizar para los elementos de la interfaz de usuario. Para \"personalizar\", debe ingresar el nombre exacto de la fuente tal como aparece en el sistema.", "components": { "interface": "Interfaz", "input": "Campos de entrada", @@ -325,8 +460,47 @@ "checkbox": "He revisado los términos y condiciones", "link": "un bonito enlace" } + }, + "version": { + "title": "Versión", + "backend_version": "Versión del Backend", + "frontend_version": "Versión del Frontend" } }, + "time": { + "day": "{0} día", + "days": "{0} días", + "day_short": "{0}d", + "days_short": "{0}d", + "hour": "{0} hora", + "hours": "{0} horas", + "hour_short": "{0}h", + "hours_short": "{0}h", + "in_future": "en {0}", + "in_past": "hace {0}", + "minute": "{0} minuto", + "minutes": "{0} minutos", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} mes", + "months": "{0} meses", + "month_short": "{0}m", + "months_short": "{0}m", + "now": "justo ahora", + "now_short": "ahora", + "second": "{0} segundo", + "seconds": "{0} segundos", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} semana", + "weeks": "{0} semanas", + "week_short": "{0}sem", + "weeks_short": "{0}sem", + "year": "{0} año", + "years": "{0} años", + "year_short": "{0}a", + "years_short": "{0}a" + }, "timeline": { "collapse": "Colapsar", "conversation": "Conversación", @@ -336,10 +510,24 @@ "repeated": "repetida", "show_new": "Mostrar lo nuevo", "up_to_date": "Actualizado", - "no_more_statuses": "No hay más estados" + "no_more_statuses": "No hay más estados", + "no_statuses": "Sin estados" + }, + "status": { + "favorites": "Favoritos", + "repeats": "Repetidos", + "delete": "Eliminar publicación", + "pin": "Fijar en tu perfil", + "unpin": "Desclavar de tu perfil", + "pinned": "Fijado", + "delete_confirm": "¿Realmente quieres borrar la publicación?", + "reply_to": "Respondiendo a", + "replies_list": "Respuestas:", + "mute_conversation": "Silenciar la conversación", + "unmute_conversation": "Mostrar la conversación" }, "user_card": { - "approve": "Aprovar", + "approve": "Aprobar", "block": "Bloquear", "blocked": "¡Bloqueado!", "deny": "Denegar", @@ -355,14 +543,54 @@ "follows_you": "¡Te sigue!", "its_you": "¡Eres tú!", "media": "Media", + "mention": "Mencionar", "mute": "Silenciar", "muted": "Silenciado", "per_day": "por día", "remote_follow": "Seguir", - "statuses": "Estados" + "report": "Reportar", + "statuses": "Estados", + "subscribe": "Suscribirse", + "unsubscribe": "Desuscribirse", + "unblock": "Desbloquear", + "unblock_progress": "Desbloqueando...", + "block_progress": "Bloqueando...", + "unmute": "Quitar silencio", + "unmute_progress": "Quitando silencio...", + "mute_progress": "Silenciando...", + "admin_menu": { + "moderation": "Moderación", + "grant_admin": "Conceder permisos de Administrador", + "revoke_admin": "Revocar permisos de Administrador", + "grant_moderator": "Conceder permisos de Moderador", + "revoke_moderator": "Revocar permisos de Moderador", + "activate_account": "Activar cuenta", + "deactivate_account": "Desactivar cuenta", + "delete_account": "Eliminar cuenta", + "force_nsfw": "Marcar todas las publicaciones como NSFW (no es seguro/apropiado para el trabajo)", + "strip_media": "Eliminar archivos multimedia de las publicaciones", + "force_unlisted": "Forzar que se publique en el modo -Sin Listar-", + "sandbox": "Forzar que se publique solo para tus seguidores", + "disable_remote_subscription": "No permitir que usuarios de instancias remotas te siga.", + "disable_any_subscription": "No permitir que ningún usuario te siga", + "quarantine": "No permitir publicaciones de usuarios de instancias remotas", + "delete_user": "Eliminar usuario", + "delete_user_confirmation": "¿Estás completamente seguro? Esta acción no se puede deshacer." + } }, "user_profile": { - "timeline_title": "Linea temporal del usuario" + "timeline_title": "Linea Temporal del Usuario", + "profile_does_not_exist": "Lo sentimos, este perfil no existe.", + "profile_loading_error": "Lo sentimos, hubo un error al cargar este perfil." + }, + "user_reporting": { + "title": "Reportando a {0}", + "add_comment_description": "El informe será enviado a los moderadores de su instancia. Puedes proporcionar una explicación de por qué estás reportando esta cuenta a continuación:", + "additional_comments": "Comentarios adicionales", + "forward_description": "La cuenta es de otro servidor. ¿Enviar una copia del informe allí también?", + "forward_to": "Reenviar a {0}", + "submit": "Enviar", + "generic_error": "Se produjo un error al procesar la solicitud." }, "who_to_follow": { "more": "Más", @@ -388,5 +616,23 @@ "GiB": "GiB", "TiB": "TiB" } + }, + "search": { + "people": "Personas", + "hashtags": "Etiquetas", + "person_talking": "{count} personas hablando", + "people_talking": "{count} gente hablando", + "no_results": "Sin resultados" + }, + "password_reset": { + "forgot_password": "¿Contraseña olvidada?", + "password_reset": "Restablecer la contraseña", + "instruction": "Ingrese su dirección de correo electrónico o nombre de usuario. Le enviaremos un enlace para restablecer su contraseña.", + "placeholder": "Su correo electrónico o nombre de usuario", + "check_email": "Revise su correo electrónico para obtener un enlace para restablecer su contraseña.", + "return_home": "Volver a la página de inicio", + "not_found": "No pudimos encontrar ese correo electrónico o nombre de usuario.", + "too_many_requests": "Has alcanzado el límite de intentos, vuelve a intentarlo más tarde.", + "password_reset_disabled": "El restablecimiento de contraseñas está deshabilitado. Póngase en contacto con el administrador de su instancia." } -} +}
\ No newline at end of file diff --git a/src/i18n/eu.json b/src/i18n/eu.json new file mode 100644 index 00000000..ad8f4c05 --- /dev/null +++ b/src/i18n/eu.json @@ -0,0 +1,623 @@ +{ + "chat": { + "title": "Txata" + }, + "exporter": { + "export": "Esportatu", + "processing": "Prozesatzen, zure fitxategia deskargatzeko eskatuko zaizu laster" + }, + "features_panel": { + "chat": "Txata", + "gopher": "Ghoper", + "media_proxy": "Media proxy", + "scope_options": "Ikusgaitasun aukerak", + "text_limit": "Testu limitea", + "title": "Ezaugarriak", + "who_to_follow": "Nori jarraitu" + }, + "finder": { + "error_fetching_user": "Errorea erabiltzailea eskuratzen", + "find_user": "Bilatu erabiltzailea" + }, + "general": { + "apply": "Aplikatu", + "submit": "Bidali", + "more": "Gehiago", + "generic_error": "Errore bat gertatu da", + "optional": "Hautazkoa", + "show_more": "Gehiago erakutsi", + "show_less": "Gutxiago erakutsi", + "cancel": "Ezeztatu", + "disable": "Ezgaitu", + "enable": "Gaitu", + "confirm": "Baieztatu", + "verify": "Egiaztatu" + }, + "image_cropper": { + "crop_picture": "Moztu argazkia", + "save": "Gorde", + "save_without_cropping": "Gorde moztu gabe", + "cancel": "Ezeztatu" + }, + "importer": { + "submit": "Bidali", + "success": "Ondo inportatu da.", + "error": "Errore bat gertatu da fitxategi hau inportatzerakoan." + }, + "login": { + "login": "Saioa hasi", + "description": "OAuth-ekin saioa hasi", + "logout": "Saioa itxi", + "password": "Pasahitza", + "placeholder": "adibidez Lain", + "register": "Erregistratu", + "username": "Erabiltzaile-izena", + "hint": "Hasi saioa eztabaidan parte-hartzeko", + "authentication_code": "Autentifikazio kodea", + "enter_recovery_code": "Sartu berreskuratze kodea", + "enter_two_factor_code": "Sartu bi-faktore kodea", + "recovery_code": "Berreskuratze kodea", + "heading": { + "totp": "Bi-faktore autentifikazioa", + "recovery": "Bi-faktore berreskuratzea" + } + }, + "media_modal": { + "previous": "Aurrekoa", + "next": "Hurrengoa" + }, + "nav": { + "about": "Honi buruz", + "back": "Atzera", + "chat": "Txat lokala", + "friend_requests": "Jarraitzeko eskaerak", + "mentions": "Aipamenak", + "interactions": "Interakzioak", + "dms": "Zuzeneko Mezuak", + "public_tl": "Denbora-lerro Publikoa", + "timeline": "Denbora-lerroa", + "twkn": "Ezagutzen den Sarea", + "user_search": "Erabiltzailea Bilatu", + "search": "Bilatu", + "who_to_follow": "Nori jarraitu", + "preferences": "Hobespenak" + }, + "notifications": { + "broken_favorite": "Egoera ezezaguna, bilatzen...", + "favorited_you": "zure mezua gogoko du", + "followed_you": "Zu jarraitzen zaitu", + "load_older": "Kargatu jakinarazpen zaharragoak", + "notifications": "Jakinarazpenak", + "read": "Irakurrita!", + "repeated_you": "zure mezua errepikatu du", + "no_more_notifications": "Ez dago jakinarazpen gehiago" + }, + "polls": { + "add_poll": "Inkesta gehitu", + "add_option": "Gehitu aukera", + "option": "Aukera", + "votes": "Bozkak", + "vote": "Bozka", + "type": "Inkesta mota", + "single_choice": "Aukera bakarra", + "multiple_choices": "Aukera anizkoitza", + "expiry": "Inkestaren iraupena", + "expires_in": "Inkesta {0} bukatzen da", + "expired": "Inkesta {0} bukatu zen", + "not_enough_options": "Aukera gutxiegi inkestan" + }, + "stickers": { + "add_sticker": "Pegatina gehitu" + }, + "interactions": { + "favs_repeats": "Errepikapen eta gogokoak", + "follows": "Jarraitzaile berriak", + "load_older": "Kargatu elkarrekintza zaharragoak" + }, + "post_status": { + "new_status": "Mezu berri bat idatzi", + "account_not_locked_warning": "Zure kontua ez dago {0}. Edozeinek jarraitzen hastearekin, zure mezuak irakur ditzake.", + "account_not_locked_warning_link": "Blokeatuta", + "attachments_sensitive": "Nabarmendu eranskinak hunkigarri gisa ", + "content_type": { + "text/plain": "Testu arrunta", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" + }, + "content_warning": "Gaia (hautazkoa)", + "default": "Iadanik Los Angeles-en", + "direct_warning_to_all": "Mezu hau aipatutako erabiltzaile guztientzat ikusgai egongo da.", + "direct_warning_to_first_only": "Mezu hau ikusgai egongo da bakarrik hasieran aipatzen diren erabiltzaileei.", + "posting": "Argitaratzen", + "scope_notice": { + "public": "Mezu hau guztiontzat ikusgai izango da", + "private": "Mezu hau zure jarraitzaileek soilik ikusiko dute", + "unlisted": "Mezu hau ez da argitaratuko Denbora-lerro Publikoan ezta Ezagutzen den Sarean" + }, + "scope": { + "direct": "Zuzena: Bidali aipatutako erabiltzaileei besterik ez", + "private": "Jarraitzaileentzako bakarrik: Bidali jarraitzaileentzat bakarrik", + "public": "Publikoa: Bistaratu denbora-lerro publikoetan", + "unlisted": "Zerrendatu gabea: ez bidali denbora-lerro publikoetara" + } + }, + "registration": { + "bio": "Biografia", + "email": "E-posta", + "fullname": "Erakutsi izena", + "password_confirm": "Pasahitza berretsi", + "registration": "Izena ematea", + "token": "Gonbidapen txartela", + "captcha": "CAPTCHA", + "new_captcha": "Klikatu irudia captcha berri bat lortzeko", + "username_placeholder": "Adibidez lain", + "fullname_placeholder": "Adibidez Lain Iwakura", + "bio_placeholder": "Adidibez.\nKaixo, Lain naiz.\nFedibertsoa gustokoa dut eta euskeraz hitzegiten dut.", + "validations": { + "username_required": "Ezin da hutsik utzi", + "fullname_required": "Ezin da hutsik utzi", + "email_required": "Ezin da hutsik utzi", + "password_required": "Ezin da hutsik utzi", + "password_confirmation_required": "Ezin da hutsik utzi", + "password_confirmation_match": "Pasahitzaren berdina izan behar du" + } + }, + "selectable_list": { + "select_all": "Hautatu denak" + }, + "settings": { + "app_name": "App izena", + "security": "Segurtasuna", + "enter_current_password_to_confirm": "Sar ezazu zure egungo pasahitza zure identitatea baieztatzeko", + "mfa": { + "otp": "OTP", + "setup_otp": "OTP konfiguratu", + "wait_pre_setup_otp": "OTP aurredoitzen", + "confirm_and_enable": "Baieztatu eta gaitu OTP", + "title": "Bi-faktore autentifikazioa", + "generate_new_recovery_codes": "Sortu berreskuratze kode berriak", + "warning_of_generate_new_codes": "Berreskuratze kode berriak sortzean, zure berreskuratze kode zaharrak ez dute balioko", + "recovery_codes": "Berreskuratze kodea", + "waiting_a_recovery_codes": "Babes-kopia kodeak jasotzen...", + "recovery_codes_warning": "Idatzi edo gorde kodeak leku seguruan - bestela ez dituzu berriro ikusiko. Zure 2FA aplikaziorako sarbidea eta berreskuratze kodeak galduz gero, zure kontutik blokeatuta egongo zara.", + "authentication_methods": "Autentifikazio metodoa", + "scan": { + "title": "Eskaneatu", + "desc": "Zure bi-faktore aplikazioa erabiliz, eskaneatu QR kode hau edo idatzi testu-gakoa:", + "secret_code": "Giltza" + }, + "verify": { + "desc": "Bi-faktore autentifikazioa gaitzeko, sar ezazu bi-faktore kodea zure app-tik" + } + }, + "attachmentRadius": "Eranskinak", + "attachments": "Eranskinak", + "autoload": "Gaitu karga automatikoa beheraino mugitzean", + "avatar": "Avatarra", + "avatarAltRadius": "Avatarra (Aipamenak)", + "avatarRadius": "Avatarrak", + "background": "Atzeko planoa", + "bio": "Biografia", + "block_export": "Bloke esportatzea", + "block_export_button": "Esportatu zure blokeak csv fitxategi batera", + "block_import": "Bloke inportazioa", + "block_import_error": "Errorea blokeak inportatzen", + "blocks_imported": "Blokeak inportaturik! Hauek prozesatzeak denbora hartuko du.", + "blocks_tab": "Blokeak", + "btnRadius": "Botoiak", + "cBlue": "Urdina (erantzun, jarraitu)", + "cGreen": "Berdea (Bertxiotu)", + "cOrange": "Laranja (Gogokoa)", + "cRed": "Gorria (ezeztatu)", + "change_password": "Pasahitza aldatu", + "change_password_error": "Arazao bat egon da zure pasahitza aldatzean", + "changed_password": "Pasahitza ondo aldatu da!", + "collapse_subject": "Bildu gaia daukaten mezuak", + "composing": "Idazten", + "confirm_new_password": "Baieztatu pasahitz berria", + "current_avatar": "Zure uneko avatarra", + "current_password": "Indarrean den pasahitza", + "current_profile_banner": "Zure profilaren banner-a", + "data_import_export_tab": "Datuak Inportatu / Esportatu", + "default_vis": "Lehenetsitako ikusgaitasunak", + "delete_account": "Ezabatu kontua", + "delete_account_description": "Betirako ezabatu zure kontua eta zure mezu guztiak", + "delete_account_error": "Arazo bat gertatu da zure kontua ezabatzerakoan. Arazoa jarraitu eskero, administratzailearekin harremanetan jarri.", + "delete_account_instructions": "Idatzi zure pasahitza kontua ezabatzeko.", + "avatar_size_instruction": "Avatar irudien gomendatutako gutxieneko tamaina 150x150 pixel dira.", + "export_theme": "Gorde aurre-ezarpena", + "filtering": "Iragazten", + "filtering_explanation": "Hitz hauek dituzten mezu guztiak isilduak izango dira. Lerro bakoitzeko bat", + "follow_export": "Jarraitzen dituzunak esportatu", + "follow_export_button": "Esportatu zure jarraitzaileak csv fitxategi batean", + "follow_import": "Jarraitzen dituzunak inportatu", + "follow_import_error": "Errorea jarraitzaileak inportatzerakoan", + "follows_imported": "Jarraitzaileak inportatuta! Prozesatzeak denbora pixka bat iraungo du.", + "foreground": "Aurreko planoa", + "general": "Orokorra", + "hide_attachments_in_convo": "Ezkutatu eranskinak elkarrizketatan ", + "hide_attachments_in_tl": "Ezkutatu eranskinak donbora-lerroan", + "hide_muted_posts": "Ezkutatu mutututako erabiltzaileen mezuak", + "max_thumbnails": "Mezu bakoitzeko argazki-miniatura kopuru maximoa", + "hide_isp": "Instantziari buruzko panela ezkutatu", + "preload_images": "Argazkiak aurrekargatu", + "use_one_click_nsfw": "Ireki eduki hunkigarria duten eranskinak klik batekin", + "hide_post_stats": "Ezkutatu mezuaren estatistikak (adibidez faborito kopurua)", + "hide_user_stats": "Ezkutatu erabiltzaile estatistikak (adibidez jarraitzaile kopurua)", + "hide_filtered_statuses": "Ezkutatu iragazitako mezuak", + "import_blocks_from_a_csv_file": "Blokeatutakoak inportatu CSV fitxategi batetik", + "import_followers_from_a_csv_file": "Inportatu jarraitzaileak csv fitxategi batetik", + "import_theme": "Kargatu aurre-ezarpena", + "inputRadius": "Sarrera eremuak", + "checkboxRadius": "Kuadrotxoak", + "instance_default": "(lehenetsia: {value})", + "instance_default_simple": "(lehenetsia)", + "interface": "Interfazea", + "interfaceLanguage": "Interfaze hizkuntza", + "invalid_theme_imported": "Hautatutako fitxategia ez da onartutako Pleroma gaia. Ez da zure gaian aldaketarik burutu.", + "limited_availability": "Ez dago erabilgarri zure nabigatzailean", + "links": "Estekak", + "lock_account_description": "Mugatu zure kontua soilik onartutako jarraitzaileei", + "loop_video": "Begizta bideoak", + "loop_video_silent_only": "Soinu gabeko bideoak begiztatu bakarrik (adibidez Mastodon-eko gif-ak)", + "mutes_tab": "Mututuak", + "play_videos_in_modal": "Erreproduzitu bideoak zuzenean multimedia erreproduzigailuan", + "use_contain_fit": "Eranskinak ez moztu miniaturetan", + "name": "Izena", + "name_bio": "Izena eta biografia", + "new_password": "Pasahitz berria", + "notification_visibility": "Erakusteko jakinarazpen motak", + "notification_visibility_follows": "Jarraitzaileak", + "notification_visibility_likes": "Gogokoak", + "notification_visibility_mentions": "Aipamenak", + "notification_visibility_repeats": "Errepikapenak", + "no_rich_text_description": "Kendu testu-formatu aberastuak mezu guztietatik", + "no_blocks": "Ez daude erabiltzaile blokeatutak", + "no_mutes": "Ez daude erabiltzaile mututuak", + "hide_follows_description": "Ez erakutsi nor jarraitzen ari naizen", + "hide_followers_description": "Ez erakutsi nor ari den ni jarraitzen", + "show_admin_badge": "Erakutsi Administratzaile etiketa nire profilan", + "show_moderator_badge": "Erakutsi Moderatzaile etiketa nire profilan", + "nsfw_clickthrough": "Gaitu klika hunkigarri eranskinak ezkutatzeko", + "oauth_tokens": "OAuth tokenak", + "token": "Tokena", + "refresh_token": "Berrgin Tokena", + "valid_until": "Baliozkoa Arte", + "revoke_token": "Ezeztatu", + "panelRadius": "Panelak", + "pause_on_unfocused": "Eguneraketa automatikoa gelditu fitxatik kanpo", + "presets": "Aurrezarpenak", + "profile_background": "Profilaren atzeko planoa", + "profile_banner": "Profilaren Banner-a", + "profile_tab": "Profila", + "radii_help": "Konfiguratu interfazearen ertzen biribiltzea (pixeletan)", + "replies_in_timeline": "Denbora-lerroko erantzunak", + "reply_link_preview": "Gaitu erantzun-estekaren aurrebista arratoiarekin", + "reply_visibility_all": "Erakutsi erantzun guztiak", + "reply_visibility_following": "Erakutsi bakarrik niri zuzendutako edo nik jarraitutako erabiltzaileen erantzunak", + "reply_visibility_self": "Erakutsi bakarrik niri zuzendutako erantzunak", + "autohide_floating_post_button": "Automatikoki ezkutatu Mezu Berriaren botoia (sakelako)", + "saving_err": "Errorea ezarpenak gordetzean", + "saving_ok": "Ezarpenak gordeta", + "search_user_to_block": "Bilatu zein blokeatu nahi duzun", + "search_user_to_mute": "Bilatu zein isilarazi nahi duzun", + "security_tab": "Segurtasuna", + "scope_copy": "Ikusgaitasun aukerak kopiatu mezua erantzuterakoan (Zuzeneko Mezuak beti kopiatzen dute)", + "minimal_scopes_mode": "Bildu ikusgaitasun aukerak", + "set_new_avatar": "Ezarri avatar berria", + "set_new_profile_background": "Ezarri atzeko plano berria", + "set_new_profile_banner": "Ezarri profil banner berria", + "settings": "Ezarpenak", + "subject_input_always_show": "Erakutsi beti gaiaren eremua", + "subject_line_behavior": "Gaia kopiatu erantzuterakoan", + "subject_line_email": "E-maila bezala: \"re: gaia\"", + "subject_line_mastodon": "Mastodon bezala: kopiatu den bezala", + "subject_line_noop": "Ez kopiatu", + "post_status_content_type": "Argitarapen formatua", + "stop_gifs": "GIF-a iniziatu arratoia gainean jarrita", + "streaming": "Gaitu mezu berrien karga goraino mugitzean", + "text": "Testua", + "theme": "Gaia", + "theme_help": "Erabili hex-kolore kodeak (#rrggbb) gaiaren koloreak pertsonalizatzeko.", + "theme_help_v2_1": "Zenbait osagaien koloreak eta opakutasuna ezeztatu ditzakezu kontrol-laukia aktibatuz, \"Garbitu dena\" botoia erabili aldaketak deusezteko.", + "theme_help_v2_2": "Sarreren batzuen azpian dauden ikonoak atzeko planoaren eta testuaren arteko kontrastearen adierazleak dira, kokatu arratoia gainean informazio zehatza eskuratzeko. Kontuan izan gardentasun kontrasteen adierazleek erabiltzen direnean, kasurik okerrena erakusten dutela.", + "tooltipRadius": "Argibideak/alertak", + "upload_a_photo": "Argazkia kargatu", + "user_settings": "Erabiltzaile Ezarpenak", + "values": { + "false": "ez", + "true": "bai" + }, + "notifications": "Jakinarazpenak", + "notification_setting": "Jaso pertsona honen jakinarazpenak:", + "notification_setting_follows": "Jarraitutako erabiltzaileak", + "notification_setting_non_follows": "Jarraitzen ez dituzun erabiltzaileak", + "notification_setting_followers": "Zu jarraitzen zaituzten erabiltzaileak", + "notification_setting_non_followers": "Zu jarraitzen ez zaituzten erabiltzaileak", + "notification_mutes": "Erabiltzaile jakin baten jakinarazpenak jasotzeari uzteko, isilarazi ezazu.", + "notification_blocks": "Erabiltzaile bat blokeatzeak jakinarazpen guztiak gelditzen ditu eta harpidetza ezeztatu.", + "enable_web_push_notifications": "Gaitu web jakinarazpenak", + "style": { + "switcher": { + "keep_color": "Mantendu koloreak", + "keep_shadows": "Mantendu itzalak", + "keep_opacity": "Mantendu opakotasuna", + "keep_roundness": "Mantendu biribiltasuna", + "keep_fonts": "Mantendu iturriak", + "save_load_hint": "\"Mantendu\" aukerak uneko konfiguratutako aukerak gordetzen ditu gaiak hautatzerakoan edo kargatzean, gai hauek esportatze garaian ere gordetzen ditu. Kontrol-lauki guztiak garbitzen direnean, esportazio-gaiak dena gordeko du.", + "reset": "Berrezarri", + "clear_all": "Garbitu dena", + "clear_opacity": "Garbitu opakotasuna" + }, + "common": { + "color": "Kolorea", + "opacity": "Opakotasuna", + "contrast": { + "hint": "Kontrastearen erlazioa {ratio} da, {level} {context}", + "level": { + "aa": "AA Mailako gidaliburua betetzen du (gutxienezkoa)", + "aaa": "AAA Mailako gidaliburua betetzen du (gomendatua)", + "bad": "ez ditu irisgarritasun arauak betetzen" + }, + "context": { + "18pt": "testu handientzat (+18pt)", + "text": "testuentzat" + } + } + }, + "common_colors": { + "_tab_label": "Ohikoa", + "main": "Ohiko koloreak", + "foreground_hint": "Ikusi \"Aurreratua\" fitxa kontrol zehatzagoa lortzeko", + "rgbo": "Ikono, azentu eta etiketak" + }, + "advanced_colors": { + "_tab_label": "Aurreratua", + "alert": "Alerten atzeko planoa", + "alert_error": "Errorea", + "badge": "Etiketen atzeko planoa", + "badge_notification": "Jakinarazpenak", + "panel_header": "Panelaren goiburua", + "top_bar": "Goiko barra", + "borders": "Ertzak", + "buttons": "Botoiak", + "inputs": "Sarrera eremuak", + "faint_text": "Testu itzalita" + }, + "radii": { + "_tab_label": "Biribiltasuna" + }, + "shadows": { + "_tab_label": "Itzal eta argiak", + "component": "Atala", + "override": "Berridatzi", + "shadow_id": "Itzala #{value}", + "blur": "Lausotu", + "spread": "Hedapena", + "inset": "Barrutik", + "hint": "Itzaletarako ere erabil dezakezu --aldagarri kolore balio gisa CSS3 aldagaiak erabiltzeko. Kontuan izan opakutasuna ezartzeak ez duela kasu honetan funtzionatuko.", + "filter_hint": { + "always_drop_shadow": "Kontuz, itzal honek beti erabiltzen du {0} nabigatzaileak onartzen duenean.", + "drop_shadow_syntax": "{0} ez du onartzen {1} parametroa eta {2} gako-hitza.", + "avatar_inset": "Kontuan izan behar da barruko eta kanpoko itzal konbinazioak, ez esparotako emaitzak ager daitezkeela atzeko plano gardena duten Avatarretan.", + "spread_zero": "Hedapena > 0 duten itzalak zero izango balitz bezala agertuko dira", + "inset_classic": "Barruko itzalak {0} erabiliko dute" + }, + "components": { + "panel": "Panela", + "panelHeader": "Panel goiburua", + "topBar": "Goiko barra", + "avatar": "Erabiltzailearen avatarra (profilan)", + "avatarStatus": "Erabiltzailearen avatarra (mezuetan)", + "popup": "Popup-ak eta argibideak", + "button": "Botoia", + "buttonHover": "Botoia (gainean)", + "buttonPressed": "Botoai (sakatuta)", + "buttonPressedHover": "Botoia (sakatuta+gainean)", + "input": "Sarrera eremuak" + } + }, + "fonts": { + "_tab_label": "Letra-tipoak", + "help": "Aukeratu letra-tipoak erabiltzailearen interfazean erabiltzeko. \"Pertsonalizatua\" letra-tipoan, sisteman agertzen den izen berdinarekin idatzi behar duzu.", + "components": { + "interface": "Interfazea", + "input": "Sarrera eremuak", + "post": "Mezuen testua", + "postCode": "Tarte-bakarreko testua mezuetan (testu-formatu aberastuak)" + }, + "family": "Letra-tipoaren izena", + "size": "Tamaina (px)", + "weight": "Pisua (lodiera)", + "custom": "Pertsonalizatua" + }, + "preview": { + "header": "Aurrebista", + "content": "Edukia", + "error": "Adibide errorea", + "button": "Botoia", + "text": "Hamaika {0} eta {1}", + "mono": "edukia", + "input": "Jadanik Los Angeles-en", + "faint_link": "laguntza", + "fine_print": "Irakurri gure {0} ezer erabilgarria ikasteko!", + "header_faint": "Ondo dago", + "checkbox": "Baldintzak berrikusi ditut", + "link": "esteka polita" + } + }, + "version": { + "title": "Bertsioa", + "backend_version": "Backend Bertsio", + "frontend_version": "Frontend Bertsioa" + } + }, + "time": { + "day": "{0} egun", + "days": "{0} egun", + "day_short": "{0}e", + "days_short": "{0}e", + "hour": "{0} ordu", + "hours": "{0} ordu", + "hour_short": "{0}o", + "hours_short": "{0}o", + "in_future": "{0} barru", + "in_past": "duela {0}", + "minute": "{0} minutu", + "minutes": "{0} minutu", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} hilabete", + "months": "{0} hilabete", + "month_short": "{0}h", + "months_short": "{0}h", + "now": "oraintxe bertan", + "now_short": "orain", + "second": "{0} segundu", + "seconds": "{0} segundu", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} aste", + "weeks": "{0} aste", + "week_short": "{0}a", + "weeks_short": "{0}a", + "year": "{0} urte", + "years": "{0} urte", + "year_short": "{0}u", + "years_short": "{0}u" + }, + "timeline": { + "collapse": "Bildu", + "conversation": "Elkarrizketa", + "error_fetching": "Errorea eguneraketak eskuratzen", + "load_older": "Kargatu mezu zaharragoak", + "no_retweet_hint": "Mezu hau jarraitzailentzako bakarrik markatuta dago eta ezin da errepikatu", + "repeated": "Errepikatuta", + "show_new": "Berriena erakutsi", + "up_to_date": "Eguneratuta", + "no_more_statuses": "Ez daude mezu gehiago", + "no_statuses": "Mezurik gabe" + }, + "status": { + "favorites": "Gogokoak", + "repeats": "Errepikapenak", + "delete": "Mezua ezabatu", + "pin": "Profilan ainguratu", + "unpin": "Aingura ezeztatu profilatik", + "pinned": "Ainguratuta", + "delete_confirm": "Mezu hau benetan ezabatu nahi duzu?", + "reply_to": "Erantzuten", + "replies_list": "Erantzunak:", + "mute_conversation": "Elkarrizketa isilarazi", + "unmute_conversation": "Elkarrizketa aktibatu" + }, + "user_card": { + "approve": "Onartu", + "block": "Blokeatu", + "blocked": "Blokeatuta!", + "deny": "Ukatu", + "favorites": "Gogokoak", + "follow": "Jarraitu", + "follow_sent": "Eskaera bidalita!", + "follow_progress": "Eskatzen...", + "follow_again": "Eskaera berriro bidali?", + "follow_unfollow": "Jarraitzeari utzi", + "followees": "Jarraitzen", + "followers": "Jarraitzaileak", + "following": "Jarraitzen!", + "follows_you": "Jarraitzen dizu!", + "its_you": "Zu zara!", + "media": "Multimedia", + "mute": "Isilarazi", + "muted": "Isilduta", + "per_day": "eguneko", + "remote_follow": "Jarraitu", + "report": "Berri eman", + "statuses": "Mezuak", + "subscribe": "Harpidetu", + "unsubscribe": "Harpidetza ezeztatu", + "unblock": "Blokeoa kendu", + "unblock_progress": "Blokeoa ezeztatzen...", + "block_progress": "Blokeatzen...", + "unmute": "Isiltasuna kendu", + "unmute_progress": "Isiltasuna kentzen...", + "mute_progress": "Isiltzen...", + "admin_menu": { + "moderation": "Moderazioa", + "grant_admin": "Administratzaile baimena", + "revoke_admin": "Ezeztatu administratzaile baimena", + "grant_moderator": "Moderatzaile baimena", + "revoke_moderator": "Ezeztatu moderatzaile baimena", + "activate_account": "Aktibatu kontua", + "deactivate_account": "Desaktibatu kontua", + "delete_account": "Ezabatu kontua", + "force_nsfw": "Markatu mezu guztiak hunkigarri gisa", + "strip_media": "Kendu multimedia mezuetatik", + "force_unlisted": "Behartu mezuak listatu gabekoak izatea", + "sandbox": "Behartu zure jarraitzaileentzako bakarrik argitaratzera", + "disable_remote_subscription": "Ez utzi istantzia kanpoko erabiltzaileak zuri jarraitzea", + "disable_any_subscription": "Ez utzi beste erabiltzaileak zuri jarraitzea", + "quarantine": "Ez onartu mezuak beste instantzietatik", + "delete_user": "Erabiltzailea ezabatu", + "delete_user_confirmation": "Erabat ziur zaude? Ekintza hau ezin da desegin." + } + }, + "user_profile": { + "timeline_title": "Erabiltzailearen denbora-lerroa", + "profile_does_not_exist": "Barkatu, profil hau ez da existitzen.", + "profile_loading_error": "Barkatu, errore bat gertatu da profila kargatzean." + }, + "user_reporting": { + "title": "{0}-ri buruz berri ematen", + "add_comment_description": "Zure kexa moderatzaileei bidaliko da. Nahi baduzu zure kexaren zergatia idatz dezakezu:", + "additional_comments": "Iruzkin gehiago", + "forward_description": "Kontu hau beste instantzia batekoa da. Nahi duzu txostenaren kopia bat bidali ere?", + "forward_to": "{0}-ri birbidali", + "submit": "Bidali", + "generic_error": "Errore bat gertatu da zure eskaera prozesatzerakoan." + }, + "who_to_follow": { + "more": "Gehiago", + "who_to_follow": "Nori jarraitu" + }, + "tool_tip": { + "media_upload": "Multimedia igo", + "repeat": "Errepikatu", + "reply": "Erantzun", + "favorite": "Gogokoa", + "user_settings": "Erabiltzaile ezarpenak" + }, + "upload": { + "error": { + "base": "Igoerak huts egin du.", + "file_too_big": "Artxiboa haundiegia [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "Saiatu berriro geroago" + }, + "file_size_units": { + "B": "B", + "KiB": "KiB", + "MiB": "MiB", + "GiB": "GiB", + "TiB": "TiB" + } + }, + "search": { + "people": "Erabiltzaileak", + "hashtags": "Traolak", + "person_talking": "{count} pertsona hitzegiten", + "people_talking": "{count} jende hitzegiten", + "no_results": "Emaitzarik ez" + }, + "password_reset": { + "forgot_password": "Pasahitza ahaztua?", + "password_reset": "Pasahitza berrezarri", + "instruction": "Idatzi zure helbide elektronikoa edo erabiltzaile izena. Pasahitza berrezartzeko esteka bidaliko dizugu.", + "placeholder": "Zure e-posta edo erabiltzaile izena", + "check_email": "Begiratu zure posta elektronikoa pasahitza berrezarri ahal izateko.", + "return_home": "Itzuli hasierara", + "not_found": "Ezin izan dugu helbide elektroniko edo erabiltzaile hori aurkitu.", + "too_many_requests": "Saiakera gehiegi burutu ditzu, saiatu berriro geroxeago.", + "password_reset_disabled": "Pasahitza berrezartzea debekatuta dago. Mesedez, jarri harremanetan instantzia administratzailearekin." + } +}
\ No newline at end of file diff --git a/src/i18n/fi.json b/src/i18n/fi.json index 4f0ffb4b..e7ed5408 100644 --- a/src/i18n/fi.json +++ b/src/i18n/fi.json @@ -36,6 +36,7 @@ "chat": "Paikallinen Chat", "friend_requests": "Seurauspyynnöt", "mentions": "Maininnat", + "interactions": "Interaktiot", "dms": "Yksityisviestit", "public_tl": "Julkinen Aikajana", "timeline": "Aikajana", @@ -54,13 +55,32 @@ "repeated_you": "toisti viestisi", "no_more_notifications": "Ei enempää ilmoituksia" }, + "polls": { + "add_poll": "Lisää äänestys", + "add_option": "Lisää vaihtoehto", + "option": "Vaihtoehto", + "votes": "ääntä", + "vote": "Äänestä", + "type": "Äänestyksen tyyppi", + "single_choice": "Yksi valinta", + "multiple_choices": "Monivalinta", + "expiry": "Äänestyksen kesto", + "expires_in": "Päättyy {0} päästä", + "expired": "Päättyi {0} sitten", + "not_enough_option": "Liian vähän uniikkeja vaihtoehtoja äänestyksessä" + }, + "interactions": { + "favs_repeats": "Toistot ja tykkäykset", + "follows": "Uudet seuraukset", + "load_older": "Lataa vanhempia interaktioita" + }, "post_status": { "new_status": "Uusi viesti", "account_not_locked_warning": "Tilisi ei ole {0}. Kuka vain voi seurata sinua nähdäksesi 'vain-seuraajille' -viestisi", "account_not_locked_warning_link": "lukittu", "attachments_sensitive": "Merkkaa liitteet arkaluonteisiksi", "content_type": { - "plain_text": "Tavallinen teksti" + "text/plain": "Tavallinen teksti" }, "content_warning": "Aihe (valinnainen)", "default": "Tulin juuri saunasta.", @@ -210,6 +230,40 @@ "true": "päällä" } }, + "time": { + "day": "{0} päivä", + "days": "{0} päivää", + "day_short": "{0}pv", + "days_short": "{0}pv", + "hour": "{0} tunti", + "hours": "{0} tuntia", + "hour_short": "{0}t", + "hours_short": "{0}t", + "in_future": "{0} tulevaisuudessa", + "in_past": "{0} sitten", + "minute": "{0} minuutti", + "minutes": "{0} minuuttia", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} kuukausi", + "months": "{0} kuukautta", + "month_short": "{0}kk", + "months_short": "{0}kk", + "now": "nyt", + "now_short": "juuri nyt", + "second": "{0} sekunti", + "seconds": "{0} sekuntia", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} viikko", + "weeks": "{0} viikkoa", + "week_short": "{0}vk", + "weeks_short": "{0}vk", + "year": "{0} vuosi", + "years": "{0} vuotta", + "year_short": "{0}v", + "years_short": "{0}v" + }, "timeline": { "collapse": "Sulje", "conversation": "Keskustelu", @@ -222,8 +276,17 @@ "no_more_statuses": "Ei enempää viestejä" }, "status": { + "favorites": "Tykkäykset", + "repeats": "Toistot", + "delete": "Poista", + "pin": "Kiinnitä profiiliisi", + "unpin": "Poista kiinnitys", + "pinned": "Kiinnitetty", + "delete_confirm": "Haluatko varmasti postaa viestin?", "reply_to": "Vastaus", - "replies_list": "Vastaukset:" + "replies_list": "Vastaukset:", + "mute_conversation": "Hiljennä keskustelu", + "unmute_conversation": "Poista hiljennys" }, "user_card": { "approve": "Hyväksy", @@ -262,9 +325,9 @@ }, "upload":{ "error": { - "base": "Lataus epäonnistui.", - "file_too_big": "Tiedosto liian suuri [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", - "default": "Yritä uudestaan myöhemmin" + "base": "Lataus epäonnistui.", + "file_too_big": "Tiedosto liian suuri [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "Yritä uudestaan myöhemmin" }, "file_size_units": { "B": "tavua", diff --git a/src/i18n/fr.json b/src/i18n/fr.json index 1209556a..5f0053d5 100644 --- a/src/i18n/fr.json +++ b/src/i18n/fr.json @@ -1,209 +1,549 @@ { - "chat": { - "title": "Chat" - }, - "features_panel": { - "chat": "Chat", - "gopher": "Gopher", - "media_proxy": "Proxy média", - "scope_options": "Options de visibilité", - "text_limit": "Limite du texte", - "title": "Caractéristiques", - "who_to_follow": "Qui s'abonner" - }, - "finder": { - "error_fetching_user": "Erreur lors de la recherche de l'utilisateur", - "find_user": "Chercher un utilisateur" - }, - "general": { - "apply": "Appliquer", - "submit": "Envoyer" - }, - "login": { - "login": "Connexion", - "description": "Connexion avec OAuth", - "logout": "Déconnexion", - "password": "Mot de passe", - "placeholder": "p.e. lain", - "register": "S'inscrire", - "username": "Identifiant" - }, - "nav": { - "chat": "Chat local", - "friend_requests": "Demandes d'ami", - "dms": "Messages adressés", - "mentions": "Notifications", - "public_tl": "Statuts locaux", - "timeline": "Journal", - "twkn": "Le réseau connu" - }, - "notifications": { - "broken_favorite": "Chargement d'un message inconnu ...", - "favorited_you": "a aimé votre statut", - "followed_you": "a commencé à vous suivre", - "load_older": "Charger les notifications précédentes", - "notifications": "Notifications", - "read": "Lu !", - "repeated_you": "a partagé votre statut" - }, - "post_status": { - "account_not_locked_warning": "Votre compte n'est pas {0}. N'importe qui peut vous suivre pour voir vos billets en Abonné·e·s uniquement.", - "account_not_locked_warning_link": "verrouillé", - "attachments_sensitive": "Marquer le média comme sensible", - "content_type": { - "plain_text": "Texte brut" - }, - "content_warning": "Sujet (optionnel)", - "default": "Écrivez ici votre prochain statut.", - "direct_warning": "Ce message sera visible à toutes les personnes mentionnées.", - "posting": "Envoi en cours", - "scope": { - "direct": "Direct - N'envoyer qu'aux personnes mentionnées", - "private": "Abonné·e·s uniquement - Seul·e·s vos abonné·e·s verront vos billets", - "public": "Publique - Afficher dans les fils publics", - "unlisted": "Non-Listé - Ne pas afficher dans les fils publics" - } - }, - "registration": { - "bio": "Biographie", - "email": "Adresse email", - "fullname": "Pseudonyme", - "password_confirm": "Confirmation du mot de passe", - "registration": "Inscription", - "token": "Jeton d'invitation" - }, - "settings": { - "attachmentRadius": "Pièces jointes", - "attachments": "Pièces jointes", - "autoload": "Charger la suite automatiquement une fois le bas de la page atteint", - "avatar": "Avatar", - "avatarAltRadius": "Avatars (Notifications)", - "avatarRadius": "Avatars", - "background": "Arrière-plan", - "bio": "Biographie", - "btnRadius": "Boutons", - "cBlue": "Bleu (Répondre, suivre)", - "cGreen": "Vert (Partager)", - "cOrange": "Orange (Aimer)", - "cRed": "Rouge (Annuler)", - "change_password": "Changez votre mot de passe", - "change_password_error": "Il y a eu un problème pour changer votre mot de passe.", - "changed_password": "Mot de passe modifié avec succès !", - "collapse_subject": "Réduire les messages avec des sujets", - "confirm_new_password": "Confirmation du nouveau mot de passe", - "current_avatar": "Avatar actuel", - "current_password": "Mot de passe actuel", - "current_profile_banner": "Bannière de profil actuelle", - "data_import_export_tab": "Import / Export des Données", - "default_vis": "Portée de visibilité par défaut", - "delete_account": "Supprimer le compte", - "delete_account_description": "Supprimer définitivement votre compte et tous vos statuts.", - "delete_account_error": "Il y a eu un problème lors de la tentative de suppression de votre compte. Si le problème persiste, contactez l'administrateur de cette instance.", - "delete_account_instructions": "Indiquez votre mot de passe ci-dessous pour confirmer la suppression de votre compte.", - "export_theme": "Enregistrer le thème", - "filtering": "Filtre", - "filtering_explanation": "Tous les statuts contenant ces mots seront masqués. Un mot par ligne", - "follow_export": "Exporter les abonnements", - "follow_export_button": "Exporter les abonnements en csv", - "follow_export_processing": "Exportation en cours…", - "follow_import": "Importer des abonnements", - "follow_import_error": "Erreur lors de l'importation des abonnements", - "follows_imported": "Abonnements importés ! Le traitement peut prendre un moment.", - "foreground": "Premier plan", - "general": "Général", - "hide_attachments_in_convo": "Masquer les pièces jointes dans les conversations", - "hide_attachments_in_tl": "Masquer les pièces jointes dans le journal", - "hide_post_stats": "Masquer les statistiques de publication (le nombre de favoris)", - "hide_user_stats": "Masquer les statistiques de profil (le nombre d'amis)", - "import_followers_from_a_csv_file": "Importer des abonnements depuis un fichier csv", - "import_theme": "Charger le thème", - "inputRadius": "Champs de texte", - "instance_default": "(default: {value})", - "instance_default_simple" : "(default)", - "interfaceLanguage": "Langue de l'interface", - "invalid_theme_imported": "Le fichier sélectionné n'est pas un thème Pleroma pris en charge. Aucun changement n'a été apporté à votre thème.", - "limited_availability": "Non disponible dans votre navigateur", - "links": "Liens", - "lock_account_description": "Limitez votre compte aux abonnés acceptés uniquement", - "loop_video": "Vidéos en boucle", - "loop_video_silent_only": "Boucle uniquement les vidéos sans le son (les «gifs» de Mastodon)", - "name": "Nom", - "name_bio": "Nom & Bio", - "new_password": "Nouveau mot de passe", - "no_rich_text_description": "Ne formatez pas le texte", - "notification_visibility": "Types de notifications à afficher", - "notification_visibility_follows": "Abonnements", - "notification_visibility_likes": "J’aime", - "notification_visibility_mentions": "Mentionnés", - "notification_visibility_repeats": "Partages", - "nsfw_clickthrough": "Masquer les images marquées comme contenu adulte ou sensible", - "oauth_tokens": "Jetons OAuth", - "token": "Jeton", - "refresh_token": "Refresh Token", - "valid_until": "Valable jusque", - "revoke_token": "Révoquer", - "panelRadius": "Fenêtres", - "pause_on_unfocused": "Suspendre le streaming lorsque l'onglet n'est pas centré", - "presets": "Thèmes prédéfinis", - "profile_background": "Image de fond", - "profile_banner": "Bannière de profil", - "profile_tab": "Profil", - "radii_help": "Vous pouvez ici choisir le niveau d'arrondi des angles de l'interface (en pixels)", - "replies_in_timeline": "Réponses au journal", - "reply_link_preview": "Afficher un aperçu lors du survol de liens vers une réponse", - "reply_visibility_all": "Montrer toutes les réponses", - "reply_visibility_following": "Afficher uniquement les réponses adressées à moi ou aux utilisateurs que je suis", - "reply_visibility_self": "Afficher uniquement les réponses adressées à moi", - "saving_err": "Erreur lors de l'enregistrement des paramètres", - "saving_ok": "Paramètres enregistrés", - "security_tab": "Sécurité", - "set_new_avatar": "Changer d'avatar", - "set_new_profile_background": "Changer d'image de fond", - "set_new_profile_banner": "Changer de bannière", - "settings": "Paramètres", - "stop_gifs": "N'animer les GIFS que lors du survol du curseur de la souris", - "streaming": "Charger automatiquement les nouveaux statuts lorsque vous êtes au haut de la page", - "text": "Texte", - "theme": "Thème", - "theme_help": "Spécifiez des codes couleur hexadécimaux (#rrvvbb) pour personnaliser les couleurs du thème.", - "tooltipRadius": "Info-bulles/alertes", - "user_settings": "Paramètres utilisateur", - "values": { - "false": "non", - "true": "oui" + "chat": { + "title": "Chat" + }, + "exporter": { + "export": "Exporter", + "processing": "En cours de traitement, vous pourrez bientôt télécharger votre fichier" + }, + "features_panel": { + "chat": "Chat", + "gopher": "Gopher", + "media_proxy": "Proxy média", + "scope_options": "Options de visibilité", + "text_limit": "Limite de texte", + "title": "Caractéristiques", + "who_to_follow": "Personnes à suivre" + }, + "finder": { + "error_fetching_user": "Erreur lors de la recherche de l'utilisateur·ice", + "find_user": "Chercher un-e utilisateur·ice" + }, + "general": { + "apply": "Appliquer", + "submit": "Envoyer", + "more": "Plus", + "generic_error": "Une erreur s'est produite", + "optional": "optionnel", + "show_more": "Montrer plus", + "show_less": "Montrer moins", + "cancel": "Annuler", + "disable": "Désactiver", + "enable": "Activer", + "confirm": "Confirmer", + "verify": "Vérifier" + }, + "image_cropper": { + "crop_picture": "Rogner l'image", + "save": "Sauvegarder", + "save_without_cropping": "Sauvegarder sans rogner", + "cancel": "Annuler" + }, + "importer": { + "submit": "Soumettre", + "success": "Importé avec succès.", + "error": "Une erreur est survenue pendant l'import de ce fichier." + }, + "login": { + "login": "Connexion", + "description": "Connexion avec OAuth", + "logout": "Déconnexion", + "password": "Mot de passe", + "placeholder": "p.e. lain", + "register": "S'inscrire", + "username": "Identifiant", + "hint": "Connectez-vous pour rejoindre la discussion", + "authentication_code": "Code d'authentification", + "enter_recovery_code": "Entrez un code de récupération", + "enter_two_factor_code": "Entrez un code à double authentification", + "recovery_code": "Code de récupération", + "heading": { + "totp": "Authentification à double authentification", + "recovery": "Récuperation de la double authentification" + } + }, + "media_modal": { + "previous": "Précédent", + "next": "Suivant" + }, + "nav": { + "about": "À propos", + "back": "Retour", + "chat": "Chat local", + "friend_requests": "Demandes de suivi", + "mentions": "Notifications", + "interactions": "Interactions", + "dms": "Messages directs", + "public_tl": "Fil d'actualité public", + "timeline": "Fil d'actualité", + "twkn": "Ensemble du réseau connu", + "user_search": "Recherche d'utilisateur·ice", + "who_to_follow": "Qui suivre", + "preferences": "Préférences" + }, + "notifications": { + "broken_favorite": "Chargement d'un message inconnu…", + "favorited_you": "a aimé votre statut", + "followed_you": "a commencé à vous suivre", + "load_older": "Charger les notifications précédentes", + "notifications": "Notifications", + "read": "Lu !", + "repeated_you": "a partagé votre statut", + "no_more_notifications": "Aucune notification supplémentaire" + }, + "interactions": { + "favs_repeats": "Partages et favoris", + "follows": "Nouveaux⋅elles abonné⋅e⋅s ?", + "load_older": "Chargez d'anciennes interactions" + }, + "post_status": { + "new_status": "Poster un nouveau statut", + "account_not_locked_warning": "Votre compte n'est pas {0}. N'importe qui peut vous suivre pour voir vos billets en Abonné·e·s uniquement.", + "account_not_locked_warning_link": "verrouillé", + "attachments_sensitive": "Marquer le média comme sensible", + "content_type": { + "text/plain": "Texte brut", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" + }, + "content_warning": "Sujet (optionnel)", + "default": "Écrivez ici votre prochain statut.", + "direct_warning_to_all": "Ce message sera visible pour toutes les personnes mentionnées.", + "direct_warning_to_first_only": "Ce message sera visible uniquement pour personnes mentionnées au début du message.", + "posting": "Envoi en cours", + "scope_notice": { + "public": "Ce statut sera visible par tout le monde", + "private": "Ce statut sera visible par seulement vos abonné⋅e⋅s", + "unlisted": "Ce statut ne sera pas visible dans le Fil d'actualité public et l'Ensemble du réseau connu" + }, + "scope": { + "direct": "Direct - N'envoyer qu'aux personnes mentionnées", + "private": "Abonné·e·s uniquement - Seul·e·s vos abonné·e·s verront vos billets", + "public": "Publique - Afficher dans les fils publics", + "unlisted": "Non-Listé - Ne pas afficher dans les fils publics" + } + }, + "registration": { + "bio": "Biographie", + "email": "Adresse mail", + "fullname": "Pseudonyme", + "password_confirm": "Confirmation du mot de passe", + "registration": "Inscription", + "token": "Jeton d'invitation", + "captcha": "CAPTCHA", + "new_captcha": "Cliquez sur l'image pour avoir un nouveau captcha", + "username_placeholder": "p.e. lain", + "fullname_placeholder": "p.e. Lain Iwakura", + "bio_placeholder": "p.e.\nSalut, je suis Lain\nJe suis une héroïne d'animé qui vit dans une banlieue japonaise. Vous me connaissez peut-être du Wired.", + "validations": { + "username_required": "ne peut pas être laissé vide", + "fullname_required": "ne peut pas être laissé vide", + "email_required": "ne peut pas être laissé vide", + "password_required": "ne peut pas être laissé vide", + "password_confirmation_required": "ne peut pas être laissé vide", + "password_confirmation_match": "doit être identique au mot de passe" + } + }, + "selectable_list": { + "select_all": "Tout selectionner" + }, + "settings": { + "app_name": "Nom de l'application", + "security": "Sécurité", + "enter_current_password_to_confirm": "Entrez votre mot de passe actuel pour confirmer votre identité", + "mfa": { + "otp": "OTP", + "setup_otp": "Configurer OTP", + "wait_pre_setup_otp": "préconfiguration OTP", + "confirm_and_enable": "Confirmer & activer OTP", + "title": "Double authentification", + "generate_new_recovery_codes": "Générer de nouveaux codes de récupération", + "warning_of_generate_new_codes": "Quand vous générez de nouveauc codes de récupération, vos anciens codes ne fonctionnerons plus.", + "recovery_codes": "Codes de récupération.", + "waiting_a_recovery_codes": "Récéption des codes de récupération…", + "recovery_codes_warning": "Écrivez les codes ou sauvez les quelquepart sécurisé - sinon vous ne les verrez plus jamais. Si vous perdez l'accès à votre application de double authentification et codes de récupération vous serez vérouillé en dehors de votre compte.", + "authentication_methods": "Methodes d'authentification", + "scan": { + "title": "Scanner", + "desc": "En utilisant votre application de double authentification, scannez ce QR code ou entrez la clé textuelle :", + "secret_code": "Clé" + }, + "verify": { + "desc": "Pour activer la double authentification, entrez le code depuis votre application:" + } + }, + "attachmentRadius": "Pièces jointes", + "attachments": "Pièces jointes", + "autoload": "Charger la suite automatiquement une fois le bas de la page atteint", + "avatar": "Avatar", + "avatarAltRadius": "Avatars (Notifications)", + "avatarRadius": "Avatars", + "background": "Arrière-plan", + "bio": "Biographie", + "block_export": "Export des comptes bloqués", + "block_export_button": "Export des comptes bloqués vers un fichier csv", + "block_import": "Import des comptes bloqués", + "block_import_error": "Erreur lors de l'import des comptes bloqués", + "blocks_imported": "Blocks importés! Le traitement va prendre un moment.", + "blocks_tab": "Bloqué·e·s", + "btnRadius": "Boutons", + "cBlue": "Bleu (répondre, suivre)", + "cGreen": "Vert (partager)", + "cOrange": "Orange (aimer)", + "cRed": "Rouge (annuler)", + "change_password": "Changez votre mot de passe", + "change_password_error": "Il y a eu un problème pour changer votre mot de passe.", + "changed_password": "Mot de passe modifié avec succès !", + "collapse_subject": "Réduire les messages avec des sujets", + "composing": "Composition", + "confirm_new_password": "Confirmation du nouveau mot de passe", + "current_avatar": "Avatar actuel", + "current_password": "Mot de passe actuel", + "current_profile_banner": "Bannière de profil actuelle", + "data_import_export_tab": "Import / Export des Données", + "default_vis": "Visibilité par défaut", + "delete_account": "Supprimer le compte", + "delete_account_description": "Supprimer définitivement votre compte et tous vos statuts.", + "delete_account_error": "Il y a eu un problème lors de la tentative de suppression de votre compte. Si le problème persiste, contactez l'administrateur⋅ice de cette instance.", + "delete_account_instructions": "Indiquez votre mot de passe ci-dessous pour confirmer la suppression de votre compte.", + "avatar_size_instruction": "La taille minimale recommandée pour l'image de l'avatar est de 150x150 pixels.", + "export_theme": "Enregistrer le thème", + "filtering": "Filtre", + "filtering_explanation": "Tous les statuts contenant ces mots seront masqués. Un mot par ligne", + "follow_export": "Exporter les abonnements", + "follow_export_button": "Exporter les abonnements en csv", + "follow_import": "Importer des abonnements", + "follow_import_error": "Erreur lors de l'importation des abonnements", + "follows_imported": "Abonnements importés ! Le traitement peut prendre un moment.", + "foreground": "Premier plan", + "general": "Général", + "hide_attachments_in_convo": "Masquer les pièces jointes dans les conversations", + "hide_attachments_in_tl": "Masquer les pièces jointes dans le journal", + "hide_muted_posts": "Masquer les statuts des utilisateurs masqués", + "max_thumbnails": "Nombre maximum de miniatures par statuts", + "hide_isp": "Masquer le panneau spécifique a l'instance", + "preload_images": "Précharger les images", + "use_one_click_nsfw": "Ouvrir les pièces-jointes NSFW avec un seul clic", + "hide_post_stats": "Masquer les statistiques de publication (le nombre de favoris)", + "hide_user_stats": "Masquer les statistiques de profil (le nombre d'amis)", + "hide_filtered_statuses": "Masquer les statuts filtrés", + "import_blocks_from_a_csv_file": "Importer les blocages depuis un fichier csv", + "import_followers_from_a_csv_file": "Importer des abonnements depuis un fichier csv", + "import_theme": "Charger le thème", + "inputRadius": "Champs de texte", + "checkboxRadius": "Cases à cocher", + "instance_default": "(default: {value})", + "instance_default_simple": "(default)", + "interface": "Interface", + "interfaceLanguage": "Langue de l'interface", + "invalid_theme_imported": "Le fichier sélectionné n'est pas un thème Pleroma pris en charge. Aucun changement n'a été apporté à votre thème.", + "limited_availability": "Non disponible dans votre navigateur", + "links": "Liens", + "lock_account_description": "Limitez votre compte aux abonnés acceptés uniquement", + "loop_video": "Vidéos en boucle", + "loop_video_silent_only": "Boucle uniquement les vidéos sans le son (les « gifs » de Mastodon)", + "mutes_tab": "Comptes silenciés", + "play_videos_in_modal": "Jouer les vidéos directement dans le visionneur de médias", + "use_contain_fit": "Ne pas rogner les miniatures des pièces-jointes", + "name": "Nom", + "name_bio": "Nom & Bio", + "new_password": "Nouveau mot de passe", + "notification_visibility": "Types de notifications à afficher", + "notification_visibility_follows": "Abonnements", + "notification_visibility_likes": "J'aime", + "notification_visibility_mentions": "Mentionnés", + "notification_visibility_repeats": "Partages", + "no_rich_text_description": "Ne formatez pas le texte", + "no_blocks": "Aucun bloqués", + "no_mutes": "Aucun masqués", + "hide_follows_description": "Ne pas afficher à qui je suis abonné", + "hide_followers_description": "Ne pas afficher qui est abonné à moi", + "show_admin_badge": "Afficher le badge d'Administrateur⋅ice sur mon profil", + "show_moderator_badge": "Afficher le badge de Modérateur⋅ice sur mon profil", + "nsfw_clickthrough": "Masquer les images marquées comme contenu adulte ou sensible", + "oauth_tokens": "Jetons OAuth", + "token": "Jeton", + "refresh_token": "Refresh Token", + "valid_until": "Valable jusque", + "revoke_token": "Révoquer", + "panelRadius": "Fenêtres", + "pause_on_unfocused": "Suspendre le streaming lorsque l'onglet n'est pas actif", + "presets": "Thèmes prédéfinis", + "profile_background": "Image de fond", + "profile_banner": "Bannière de profil", + "profile_tab": "Profil", + "radii_help": "Vous pouvez ici choisir le niveau d'arrondi des angles de l'interface (en pixels)", + "replies_in_timeline": "Réponses au journal", + "reply_link_preview": "Afficher un aperçu lors du survol de liens vers une réponse", + "reply_visibility_all": "Montrer toutes les réponses", + "reply_visibility_following": "Afficher uniquement les réponses adressées à moi ou aux personnes que je suis", + "reply_visibility_self": "Afficher uniquement les réponses adressées à moi", + "autohide_floating_post_button": "Automatiquement cacher le bouton de Nouveau Statut (sur mobile)", + "saving_err": "Erreur lors de l'enregistrement des paramètres", + "saving_ok": "Paramètres enregistrés", + "search_user_to_block": "Rechercher qui vous voulez bloquer", + "search_user_to_mute": "Rechercher qui vous voulez masquer", + "security_tab": "Sécurité", + "scope_copy": "Garder la même visibilité en répondant (les DMs restent toujours des DMs)", + "minimal_scopes_mode": "Rétrécir les options de séléction de la portée", + "set_new_avatar": "Changer d'avatar", + "set_new_profile_background": "Changer d'image de fond", + "set_new_profile_banner": "Changer de bannière", + "settings": "Paramètres", + "subject_input_always_show": "Toujours copier le champ de sujet", + "subject_line_behavior": "Copier le sujet en répondant", + "subject_line_email": "Comme les mails: « re: sujet »", + "subject_line_mastodon": "Comme mastodon: copier tel quel", + "subject_line_noop": "Ne pas copier", + "post_status_content_type": "Type de contenu du statuts", + "stop_gifs": "N'animer les GIFS que lors du survol du curseur de la souris", + "streaming": "Charger automatiquement les nouveaux statuts lorsque vous êtes au haut de la page", + "text": "Texte", + "theme": "Thème", + "theme_help": "Spécifiez des codes couleur hexadécimaux (#rrvvbb) pour personnaliser les couleurs du thème.", + "theme_help_v2_1": "Vous pouvez aussi surcharger certaines couleurs de composants et transparence via la case à cocher, utilisez le bouton « Vider tout » pour effacer toutes les surcharges.", + "theme_help_v2_2": "Les icônes sous certaines des entrées ont un indicateur de contraste du fond/texte, survolez les pour plus d'informations détailles. Veuillez garder a l'esprit que lors de l'utilisation de transparence l'indicateur de contraste indique le pire des cas.", + "tooltipRadius": "Info-bulles/alertes", + "upload_a_photo": "Envoyer une photo", + "user_settings": "Paramètres utilisateur", + "values": { + "false": "non", + "true": "oui" + }, + "notifications": "Notifications", + "notification_setting": "Reçevoir les notifications de:", + "notification_setting_follows": "Utilisateurs que vous suivez", + "notification_setting_non_follows": "Utilisateurs que vous ne suivez pas", + "notification_setting_followers": "Utilisateurs qui vous suivent", + "notification_setting_non_followers": "Utilisateurs qui ne vous suivent pas", + "notification_mutes": "Pour stopper la récéption de notifications d'un utilisateur particulier, utilisez un masquage.", + "notification_blocks": "Bloquer un utilisateur stoppe toute notification et se désabonne de lui.", + "enable_web_push_notifications": "Activer les notifications de push web", + "style": { + "switcher": { + "keep_color": "Garder les couleurs", + "keep_shadows": "Garder les ombres", + "keep_opacity": "Garder la transparence", + "keep_roundness": "Garder la rondeur", + "keep_fonts": "Garder les polices", + "save_load_hint": "L'option « Garder » préserve les options activés en cours lors de la séléction ou chargement des thèmes, il sauve aussi les dites options lors de l'export d'un thème. Quand toutes les cases sont décochés, exporter un thème sauvera tout.", + "reset": "Remise à zéro", + "clear_all": "Tout vider", + "clear_opacity": "Vider la transparence" + }, + "common": { + "color": "Couleur", + "opacity": "Transparence", + "contrast": { + "hint": "Le ratio de contraste est {ratio}, il {level} {context}", + "level": { + "aa": "répond aux directives de niveau AA (minimum)", + "aaa": "répond aux directives de niveau AAA (recommandé)", + "bad": "ne réponds à aucune directive d'accessibilité" + }, + "context": { + "18pt": "pour texte large (19pt+)", + "text": "pour texte" + } + } + }, + "common_colors": { + "_tab_label": "Commun", + "main": "Couleurs communes", + "foreground_hint": "Voir l'onglet « Avancé » pour plus de contrôle détaillé", + "rgbo": "Icônes, accents, badges" + }, + "advanced_colors": { + "_tab_label": "Avancé", + "alert": "Fond d'alerte", + "alert_error": "Erreur", + "badge": "Fond de badge", + "badge_notification": "Notification", + "panel_header": "Entête de panneau", + "top_bar": "Barre du haut", + "borders": "Bordures", + "buttons": "Boutons", + "inputs": "Champs de saisie", + "faint_text": "Texte en fondu" + }, + "radii": { + "_tab_label": "Rondeur" + }, + "shadows": { + "_tab_label": "Ombres et éclairage", + "component": "Composant", + "override": "Surcharger", + "shadow_id": "Ombre #{value}", + "blur": "Flou", + "spread": "Dispersion", + "inset": "Interne", + "hint": "Pour les ombres, vous pouvez aussi utiliser --variable comme valeur de couleur en CSS3. Veuillez noter que spécifier la transparence ne fonctionnera pas dans ce cas.", + "filter_hint": { + "always_drop_shadow": "Attention, cette ombre utilise toujours {0} quand le navigateur le supporte.", + "drop_shadow_syntax": "{0} ne supporte pas le paramètre {1} et mot-clé {2}.", + "avatar_inset": "Veuillez noter que combiner a la fois les ombres internes et non-internes sur les avatars peut fournir des résultats innatendus avec la transparence des avatars.", + "spread_zero": "Les ombres avec une dispersion > 0 apparaitrons comme si ils étaient à zéro", + "inset_classic": "L'ombre interne utilisera toujours {0}" + }, + "components": { + "panel": "Panneau", + "panelHeader": "En-tête de panneau", + "topBar": "Barre du haut", + "avatar": "Avatar utilisateur⋅ice (dans la vue de profil)", + "avatarStatus": "Avatar utilisateur⋅ice (dans la vue de statuts)", + "popup": "Popups et infobulles", + "button": "Bouton", + "buttonHover": "Bouton (survol)", + "buttonPressed": "Bouton (cliqué)", + "buttonPressedHover": "Bouton (cliqué+survol)", + "input": "Champ de saisie" + } + }, + "fonts": { + "_tab_label": "Polices", + "help": "Sélectionnez la police à utiliser pour les éléments de l'UI. Pour « personnalisé » vous avez à entrer le nom exact de la police comme il apparaît dans le système.", + "components": { + "interface": "Interface", + "input": "Champs de saisie", + "post": "Post text", + "postCode": "Texte à taille fixe dans un article (texte enrichi)" + }, + "family": "Nom de la police", + "size": "Taille (en px)", + "weight": "Poid (gras)", + "custom": "Personnalisé" + }, + "preview": { + "header": "Prévisualisation", + "content": "Contenu", + "error": "Exemple d'erreur", + "button": "Bouton", + "text": "Un certain nombre de {0} et {1}", + "mono": "contenu", + "input": "Je viens juste d’atterrir à L.A.", + "faint_link": "manuel utile", + "fine_print": "Lisez notre {0} pour n'apprendre rien d'utile !", + "header_faint": "Tout va bien", + "checkbox": "J'ai survolé les conditions d'utilisation", + "link": "un petit lien sympa" + } + }, + "version": { + "title": "Version", + "backend_version": "Version du Backend", + "frontend_version": "Version du Frontend" + } + }, + "timeline": { + "collapse": "Fermer", + "conversation": "Conversation", + "error_fetching": "Erreur en cherchant les mises à jour", + "load_older": "Afficher plus", + "no_retweet_hint": "Le message est marqué en abonnés-seulement ou direct et ne peut pas être partagé", + "repeated": "a partagé", + "show_new": "Afficher plus", + "up_to_date": "À jour", + "no_more_statuses": "Pas plus de statuts", + "no_statuses": "Aucun statuts" + }, + "status": { + "favorites": "Favoris", + "repeats": "Partages", + "delete": "Supprimer statuts", + "pin": "Agraffer sur le profil", + "unpin": "Dégraffer du profil", + "pinned": "Agraffé", + "delete_confirm": "Voulez-vous vraiment supprimer ce statuts ?", + "reply_to": "Réponse à", + "replies_list": "Réponses:" + }, + "user_card": { + "approve": "Accepter", + "block": "Bloquer", + "blocked": "Bloqué !", + "deny": "Rejeter", + "favorites": "Favoris", + "follow": "Suivre", + "follow_sent": "Demande envoyée !", + "follow_progress": "Demande en cours…", + "follow_again": "Renvoyer la demande ?", + "follow_unfollow": "Désabonner", + "followees": "Suivis", + "followers": "Vous suivent", + "following": "Suivi !", + "follows_you": "Vous suit !", + "its_you": "C'est vous !", + "media": "Media", + "mute": "Masquer", + "muted": "Masqué", + "per_day": "par jour", + "remote_follow": "Suivre d'une autre instance", + "report": "Signalement", + "statuses": "Statuts", + "unblock": "Débloquer", + "unblock_progress": "Déblocage…", + "block_progress": "Blocage…", + "unmute": "Démasquer", + "unmute_progress": "Démasquage…", + "mute_progress": "Masquage…", + "admin_menu": { + "moderation": "Moderation", + "grant_admin": "Promouvoir Administrateur⋅ice", + "revoke_admin": "Dégrader Administrateur⋅ice", + "grant_moderator": "Promouvoir Modérateur⋅ice", + "revoke_moderator": "Dégrader Modérateur⋅ice", + "activate_account": "Activer le compte", + "deactivate_account": "Désactiver le compte", + "delete_account": "Supprimer le compte", + "force_nsfw": "Marquer tous les statuts comme NSFW", + "strip_media": "Supprimer les medias des statuts", + "force_unlisted": "Forcer les statuts à être délistés", + "sandbox": "Forcer les statuts à être visibles seuleument pour les abonné⋅e⋅s", + "disable_remote_subscription": "Interdir de s'abonner a l'utilisateur depuis l'instance distante", + "disable_any_subscription": "Interdir de s'abonner à l'utilisateur tout court", + "quarantine": "Interdir les statuts de l'utilisateur à fédérer", + "delete_user": "Supprimer l'utilisateur", + "delete_user_confirmation": "Êtes-vous absolument-sûr⋅e ? Cette action ne peut être annulée." + } + }, + "user_profile": { + "timeline_title": "Journal de l'utilisateur⋅ice", + "profile_does_not_exist": "Désolé, ce profil n'existe pas.", + "profile_loading_error": "Désolé, il y a eu une erreur au chargement du profil." + }, + "user_reporting": { + "title": "Signaler {0}", + "add_comment_description": "Ce signalement sera envoyé aux modérateur⋅ice⋅s de votre instance. Vous pouvez fournir une explication de pourquoi vous signalez ce compte ci-dessous :", + "additional_comments": "Commentaires additionnels", + "forward_description": "Le compte vient d'un autre serveur. Envoyer une copie du signalement à celui-ci aussi ?", + "forward_to": "Transmettre à {0}", + "submit": "Envoyer", + "generic_error": "Une erreur est survenue lors du traitement de votre requête." + }, + "who_to_follow": { + "more": "Plus", + "who_to_follow": "À qui s'abonner" + }, + "tool_tip": { + "media_upload": "Envoyer un media", + "repeat": "Répéter", + "reply": "Répondre", + "favorite": "Favoriser", + "user_settings": "Paramètres utilisateur" + }, + "upload": { + "error": { + "base": "L'envoi a échoué.", + "file_too_big": "Fichier trop gros [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "Réessayez plus tard" + }, + "file_size_units": { + "B": "O", + "KiB": "KiO", + "MiB": "MiO", + "GiB": "GiO", + "TiB": "TiO" + } } - }, - "timeline": { - "collapse": "Fermer", - "conversation": "Conversation", - "error_fetching": "Erreur en cherchant les mises à jour", - "load_older": "Afficher plus", - "no_retweet_hint": "Le message est marqué en abonnés-seulement ou direct et ne peut pas être répété", - "repeated": "a partagé", - "show_new": "Afficher plus", - "up_to_date": "À jour" - }, - "user_card": { - "approve": "Accepter", - "block": "Bloquer", - "blocked": "Bloqué !", - "deny": "Rejeter", - "follow": "Suivre", - "followees": "Suivis", - "followers": "Vous suivent", - "following": "Suivi !", - "follows_you": "Vous suit !", - "mute": "Masquer", - "muted": "Masqué", - "per_day": "par jour", - "remote_follow": "Suivre d'une autre instance", - "statuses": "Statuts" - }, - "user_profile": { - "timeline_title": "Journal de l'utilisateur" - }, - "who_to_follow": { - "more": "Plus", - "who_to_follow": "Qui s'abonner" - } } diff --git a/src/i18n/ga.json b/src/i18n/ga.json index 5be9297a..7a10ba40 100644 --- a/src/i18n/ga.json +++ b/src/i18n/ga.json @@ -49,7 +49,7 @@ "account_not_locked_warning_link": "faoi glas", "attachments_sensitive": "Marcáil ceangaltán mar íogair", "content_type": { - "plain_text": "Gnáth-théacs" + "text/plain": "Gnáth-théacs" }, "content_warning": "Teideal (roghnach)", "default": "Lá iontach anseo i nGaillimh", @@ -170,6 +170,40 @@ "true": "tá" } }, + "time": { + "day": "{0} lá", + "days": "{0} lá", + "day_short": "{0}l", + "days_short": "{0}l", + "hour": "{0} uair", + "hours": "{0} uair", + "hour_short": "{0}u", + "hours_short": "{0}u", + "in_future": "in {0}", + "in_past": "{0} ago", + "minute": "{0} nóimeád", + "minutes": "{0} nóimeád", + "minute_short": "{0}n", + "minutes_short": "{0}n", + "month": "{0} mí", + "months": "{0} mí", + "month_short": "{0}m", + "months_short": "{0}m", + "now": "Anois", + "now_short": "Anois", + "second": "{0} s", + "seconds": "{0} s", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} seachtain", + "weeks": "{0} seachtaine", + "week_short": "{0}se", + "weeks_short": "{0}se", + "year": "{0} bliainta", + "years": "{0} bliainta", + "year_short": "{0}b", + "years_short": "{0}b" + }, "timeline": { "collapse": "Folaigh", "conversation": "Cómhra", diff --git a/src/i18n/he.json b/src/i18n/he.json index 213e6170..1c034960 100644 --- a/src/i18n/he.json +++ b/src/i18n/he.json @@ -2,6 +2,10 @@ "chat": { "title": "צ'אט" }, + "exporter": { + "export": "ייצוא", + "processing": "מעבד, בקרוב תופיע אפשרות להוריד את הקובץ" + }, "features_panel": { "chat": "צ'אט", "gopher": "גופר", @@ -17,23 +21,53 @@ }, "general": { "apply": "החל", - "submit": "שלח" + "submit": "שלח", + "more": "עוד", + "generic_error": "קרתה שגיאה", + "optional": "לבחירה", + "show_more": "הראה עוד", + "show_less": "הראה פחות", + "cancel": "בטל" + }, + "image_cropper": { + "crop_picture": "חתוך תמונה", + "save": "שמור", + "save_without_cropping": "שמור בלי לחתוך", + "cancel": "בטל" + }, + "importer": { + "submit": "שלח", + "success": "ייובא בהצלחה.", + "error": "אירעתה שגיאה בזמן ייבוא קובץ זה." }, "login": { "login": "התחבר", + "description": "היכנס עם OAuth", "logout": "התנתק", "password": "סיסמה", "placeholder": "למשל lain", "register": "הירשם", - "username": "שם המשתמש" + "username": "שם המשתמש", + "hint": "הירשם על מנת להצטרף לדיון" + }, + "media_modal": { + "previous": "הקודם", + "next": "הבא" }, "nav": { + "about": "על-אודות", + "back": "חזור", "chat": "צ'אט מקומי", "friend_requests": "בקשות עקיבה", "mentions": "אזכורים", + "interactions": "אינטרקציות", + "dms": "הודעות ישירות", "public_tl": "ציר הזמן הציבורי", "timeline": "ציר הזמן", - "twkn": "כל הרשת הידועה" + "twkn": "כל הרשת הידועה", + "user_search": "חיפוש משתמש", + "who_to_follow": "אחרי מי לעקוב", + "preferences": "העדפות" }, "notifications": { "broken_favorite": "סטאטוס לא ידוע, מחפש...", @@ -42,19 +76,35 @@ "load_older": "טען התראות ישנות", "notifications": "התראות", "read": "קרא!", - "repeated_you": "חזר על הסטטוס שלך" + "repeated_you": "חזר על הסטטוס שלך", + "no_more_notifications": "לא עוד התראות" + }, + "interactions": { + "favs_repeats": "חזרות ומועדפים", + "follows": "עוקבים חדשים", + "load_older": "טען אינטרקציות ישנות" }, "post_status": { + "new_status": "פרסם סטאטוס חדש", "account_not_locked_warning": "המשתמש שלך אינו {0}. כל אחד יכול לעקוב אחריך ולראות את ההודעות לעוקבים-בלבד שלך.", "account_not_locked_warning_link": "נעול", "attachments_sensitive": "סמן מסמכים מצורפים כלא בטוחים לצפייה", "content_type": { - "plain_text": "טקסט פשוט" + "text/plain": "טקסט פשוט", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "נושא (נתון לבחירה)", "default": "הרגע נחת ב-ל.א.", - "direct_warning": "הודעה זו תהיה זמינה רק לאנשים המוזכרים.", + "direct_warning_to_all": "הודעה זו תהיה נראית לכל המשתמשים המוזכרים.", + "direct_warning_to_first_only": "הודעה זו תהיה נראית לכל המשתמשים במוזכרים בתחילת ההודעה בלבד.", "posting": "מפרסם", + "scope_notice": { + "public": "הודעה זו תהיה נראית לכולם", + "private": "הודעה זו תהיה נראית לעוקבים שלך בלבד", + "unlisted": "הודעה זו לא תהיה נראית בציר זמן הציבורי או בכל הרשת הידועה" + }, "scope": { "direct": "ישיר - שלח לאנשים המוזכרים בלבד", "private": "עוקבים-בלבד - שלח לעוקבים בלבד", @@ -68,9 +118,26 @@ "fullname": "שם תצוגה", "password_confirm": "אישור סיסמה", "registration": "הרשמה", - "token": "טוקן הזמנה" + "token": "טוקן הזמנה", + "captcha": "אימות אנוש", + "new_captcha": "לחץ על התמונה על מנת לקבל אימות אנוש חדש", + "username_placeholder": "למשל lain", + "fullname_placeholder": "למשל Lain Iwakura", + "bio_placeholder": "למשל\nהיי, אני ליין.\nאני ילדת אנימה שגרה בפרוורי יפן. אולי אתם מכירים אותי מהWired.", + "validations": { + "username_required": "לא יכול להישאר ריק", + "fullname_required": "לא יכול להישאר ריק", + "email_required": "לא יכול להישאר ריק", + "password_required": "לא יכול להישאר ריק", + "password_confirmation_required": "לא יכול להישאר ריק", + "password_confirmation_match": "צריך להיות דומה לסיסמה" + } + }, + "selectable_list": { + "select_all": "בחר הכל" }, "settings": { + "app_name": "שם האפליקציה", "attachmentRadius": "צירופים", "attachments": "צירופים", "autoload": "החל טעינה אוטומטית בגלילה לתחתית הדף", @@ -79,6 +146,12 @@ "avatarRadius": "תמונות פרופיל", "background": "רקע", "bio": "אודות", + "block_export": "ייצוא חסימות", + "block_export_button": "ייצוא חסימות אל קובץ csv", + "block_import": "ייבוא חסימות", + "block_import_error": "שגיאה בייבוא החסימות", + "blocks_imported": "החסימות יובאו! ייקח מעט זמן לעבד אותן.", + "blocks_tab": "חסימות", "btnRadius": "כפתורים", "cBlue": "כחול (תגובה, עקיבה)", "cGreen": "ירוק (חזרה)", @@ -88,6 +161,7 @@ "change_password_error": "הייתה בעיה בשינוי סיסמתך.", "changed_password": "סיסמה שונתה בהצלחה!", "collapse_subject": "מזער הודעות עם נושאים", + "composing": "מרכיב", "confirm_new_password": "אשר סיסמה", "current_avatar": "תמונת הפרופיל הנוכחית שלך", "current_password": "סיסמה נוכחית", @@ -98,21 +172,35 @@ "delete_account_description": "מחק לצמיתות את המשתמש שלך ואת כל הודעותיך.", "delete_account_error": "הייתה בעיה במחיקת המשתמש. אם זה ממשיך, אנא עדכן את מנהל השרת שלך.", "delete_account_instructions": "הכנס את סיסמתך בקלט למטה על מנת לאשר מחיקת משתמש.", + "avatar_size_instruction": "הגודל המינימלי המומלץ לתמונות פרופיל הוא 150x150 פיקסלים.", "export_theme": "שמור ערכים", "filtering": "סינון", "filtering_explanation": "כל הסטטוסים הכוללים את המילים הללו יושתקו, אחד לשורה", "follow_export": "יצוא עקיבות", "follow_export_button": "ייצא את הנעקבים שלך לקובץ csv", - "follow_export_processing": "טוען. בקרוב תתבקש להוריד את הקובץ את הקובץ שלך", "follow_import": "יבוא עקיבות", "follow_import_error": "שגיאה בייבוא נעקבים.", "follows_imported": "נעקבים יובאו! ייקח זמן מה לעבד אותם.", "foreground": "חזית", + "general": "כללי", "hide_attachments_in_convo": "החבא צירופים בשיחות", "hide_attachments_in_tl": "החבא צירופים בציר הזמן", + "hide_muted_posts": "הסתר הודעות של משתמשים מושתקים", + "max_thumbnails": "מספר מירבי של תמונות ממוזערות להודעה", + "hide_isp": "הסתר פאנל-צד", + "preload_images": "טען תמונות מראש", + "use_one_click_nsfw": "פתח תמונות לא-בטוחות-לעבודה עם לחיצה אחת בלבד", + "hide_post_stats": "הסתר נתוני הודעה (למשל, מספר החזרות)", + "hide_user_stats": "הסתר נתוני משתמש (למשל, מספר העוקבים)", + "hide_filtered_statuses": "מסתר סטטוסים מסוננים", + "import_blocks_from_a_csv_file": "ייבא חסימות מקובץ csv", "import_followers_from_a_csv_file": "ייבא את הנעקבים שלך מקובץ csv", "import_theme": "טען ערכים", "inputRadius": "שדות קלט", + "checkboxRadius": "תיבות סימון", + "instance_default": "(default: {value})", + "instance_default_simple": "(default)", + "interface": "ממשק", "interfaceLanguage": "שפת הממשק", "invalid_theme_imported": "הקובץ הנבחר אינו תמה הנתמכת ע\"י פלרומה. שום שינויים לא נעשו לתמה שלך.", "limited_availability": "לא זמין בדפדפן שלך", @@ -120,6 +208,9 @@ "lock_account_description": "הגבל את המשתמש לעוקבים מאושרים בלבד", "loop_video": "נגן סרטונים ללא הפסקה", "loop_video_silent_only": "נגן רק סרטונים חסרי קול ללא הפסקה", + "mutes_tab": "השתקות", + "play_videos_in_modal": "נגן סרטונים ישירות בנגן המדיה", + "use_contain_fit": "אל תחתוך את הצירוף בתמונות הממוזערות", "name": "שם", "name_bio": "שם ואודות", "new_password": "סיסמה חדשה", @@ -128,6 +219,13 @@ "notification_visibility_likes": "לייקים", "notification_visibility_mentions": "אזכורים", "notification_visibility_repeats": "חזרות", + "no_rich_text_description": "הסר פורמט טקסט עשיר מכל ההודעות", + "no_blocks": "ללא חסימות", + "no_mutes": "ללא השתקות", + "hide_follows_description": "אל תראה אחרי מי אני עוקב", + "hide_followers_description": "אל תראה מי עוקב אחרי", + "show_admin_badge": "הראה סמל מנהל בפרופיל שלי", + "show_moderator_badge": "הראה סמל צוות בפרופיל שלי", "nsfw_clickthrough": "החל החבאת צירופים לא בטוחים לצפיה בעת עבודה בעזרת לחיצת עכבר", "oauth_tokens": "אסימוני OAuth", "token": "אסימון", @@ -146,18 +244,43 @@ "reply_visibility_all": "הראה את כל התגובות", "reply_visibility_following": "הראה תגובות שמופנות אליי או לעקובים שלי בלבד", "reply_visibility_self": "הראה תגובות שמופנות אליי בלבד", + "autohide_floating_post_button": "החבא אוטומטית את הכפתור הודעה חדשה (נייד)", + "saving_err": "שגיאה בשמירת הגדרות", + "saving_ok": "הגדרות נשמרו", + "search_user_to_block": "חפש משתמש לחסימה", + "search_user_to_mute": "חפש משתמש להשתקה", "security_tab": "ביטחון", + "scope_copy": "העתק תחום הודעה בתגובה להודעה (הודעות ישירות תמיד מועתקות)", + "minimal_scopes_mode": "צמצם אפשרויות בחירה לתחום הודעה", "set_new_avatar": "קבע תמונת פרופיל חדשה", "set_new_profile_background": "קבע רקע פרופיל חדש", "set_new_profile_banner": "קבע כרזת פרופיל חדשה", "settings": "הגדרות", + "subject_input_always_show": "תמיד הראה את שדה הנושא", + "subject_line_behavior": "העתק נושא בתגובה", + "subject_line_email": "כמו אימייל: \"re: נושא\"", + "subject_line_mastodon": "כמו מסטודון: העתק כפי שזה", + "subject_line_noop": "אל תעתיק", + "post_status_content_type": "שלח את סוג תוכן ההודעה", "stop_gifs": "נגן-בעת-ריחוף GIFs", "streaming": "החל זרימת הודעות אוטומטית בעת גלילה למעלה הדף", "text": "טקסט", "theme": "תמה", "theme_help": "השתמש בקודי צבע הקס (#אדום-אדום-ירוק-ירוק-כחול-כחול) על מנת להתאים אישית את תמת הצבע שלך.", "tooltipRadius": "טולטיפ \\ התראות", - "user_settings": "הגדרות משתמש" + "upload_a_photo": "העלה תמונה", + "user_settings": "הגדרות משתמש", + "values": { + "false": "לא", + "true": "כן" + }, + "notifications": "התראות", + "enable_web_push_notifications": "אפשר התראות web push", + "version": { + "title": "גרסה", + "backend_version": "גרסת קצה אחורי", + "frontend_version": "גרסת קצה קדמי" + } }, "timeline": { "collapse": "מוטט", @@ -167,29 +290,107 @@ "no_retweet_hint": "ההודעה מסומנת כ\"לעוקבים-בלבד\" ולא ניתן לחזור עליה", "repeated": "חזר", "show_new": "הראה חדש", - "up_to_date": "עדכני" + "up_to_date": "עדכני", + "no_more_statuses": "אין עוד סטטוסים", + "no_statuses": "אין סטטוסים" + }, + "status": { + "favorites": "מועדפים", + "repeats": "חזרות", + "delete": "מחק סטטוס", + "pin": "הצמד לפרופיל", + "unpin": "הסר הצמדה מהפרופיל", + "pinned": "מוצמד", + "delete_confirm": "האם באמת למחוק סטטוס זה?", + "reply_to": "הגב ל", + "replies_list": "תגובות:" }, "user_card": { "approve": "אשר", "block": "חסימה", "blocked": "חסום!", "deny": "דחה", + "favorites": "מועדפים", "follow": "עקוב", + "follow_sent": "בקשה נשלחה!", + "follow_progress": "מבקש...", + "follow_again": "שלח בקשה שוב?", + "follow_unfollow": "בטל עקיבה", "followees": "נעקבים", "followers": "עוקבים", "following": "עוקב!", "follows_you": "עוקב אחריך!", + "its_you": "זה אתה!", + "media": "מדיה", "mute": "השתק", "muted": "מושתק", "per_day": "ליום", "remote_follow": "עקיבה מרחוק", - "statuses": "סטטוסים" + "report": "דווח", + "statuses": "סטטוסים", + "unblock": "הסר חסימה", + "unblock_progress": "מסיר חסימה...", + "block_progress": "חוסם...", + "unmute": "הסר השתקה", + "unmute_progress": "מסיר השתקה...", + "mute_progress": "משתיק...", + "admin_menu": { + "moderation": "ניהול (צוות)", + "grant_admin": "הפוך למנהל", + "revoke_admin": "הסר מנהל", + "grant_moderator": "הפוך לצוות", + "revoke_moderator": "הסר צוות", + "activate_account": "הפעל משתמש", + "deactivate_account": "השבת משתמש", + "delete_account": "מחק משתמש", + "force_nsfw": "סמן את כל ההודעות בתור לא-מתאימות-לעבודה", + "strip_media": "הסר מדיה מההודעות", + "force_unlisted": "הפוך הודעות ללא רשומות", + "sandbox": "הפוך הודעות לנראות לעוקבים-בלבד", + "disable_remote_subscription": "אל תאפשר עקיבה של המשתמש מאינסטנס אחר", + "disable_any_subscription": "אל תאפשר עקיבה של המשתמש בכלל", + "quarantine": "אל תאפשר פדרציה של ההודעות של המשתמש", + "delete_user": "מחק משתמש", + "delete_user_confirmation": "בטוח? פעולה זו הינה בלתי הפיכה." + } }, "user_profile": { - "timeline_title": "ציר זמן המשתמש" + "timeline_title": "ציר זמן המשתמש", + "profile_does_not_exist": "סליחה, פרופיל זה אינו קיים.", + "profile_loading_error": "סליחה, הייתה שגיאה בטעינת הפרופיל." + }, + "user_reporting": { + "title": "מדווח על {0}", + "add_comment_description": "הדיווח ישלח לצוות האינסטנס. אפשר להסביר למה הנך מדווחים על משתמש זה למטה:", + "additional_comments": "תגובות נוספות", + "forward_description": "המשתמש משרת אחר. לשלוח לשם עותק של הדיווח?", + "forward_to": "העבר ל {0}", + "submit": "הגש", + "generic_error": "קרתה שגיאה בעת עיבוד הבקשה." }, "who_to_follow": { "more": "עוד", "who_to_follow": "אחרי מי לעקוב" + }, + "tool_tip": { + "media_upload": "העלה מדיה", + "repeat": "חזור", + "reply": "הגב", + "favorite": "מועדף", + "user_settings": "הגדרות משתמש" + }, + "upload":{ + "error": { + "base": "העלאה נכשלה.", + "file_too_big": "קובץ גדול מדי [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "נסה שוב אחר כך" + }, + "file_size_units": { + "B": "B", + "KiB": "KiB", + "MiB": "MiB", + "GiB": "GiB", + "TiB": "TiB" + } } } diff --git a/src/i18n/it.json b/src/i18n/it.json index 385d21aa..f441292e 100644 --- a/src/i18n/it.json +++ b/src/i18n/it.json @@ -175,7 +175,7 @@ "account_not_locked_warning_link": "bloccato", "attachments_sensitive": "Segna allegati come sensibili", "content_type": { - "plain_text": "Testo normale" + "text/plain": "Testo normale" }, "content_warning": "Oggetto (facoltativo)", "default": "Appena atterrato in L.A.", diff --git a/src/i18n/ja.json b/src/i18n/ja.json index f39a5a7c..592a7257 100644 --- a/src/i18n/ja.json +++ b/src/i18n/ja.json @@ -2,6 +2,10 @@ "chat": { "title": "チャット" }, + "exporter": { + "export": "エクスポート", + "processing": "おまちください。しばらくすると、あなたのファイルをダウンロードするように、メッセージがでます。" + }, "features_panel": { "chat": "チャット", "gopher": "Gopher", @@ -19,7 +23,26 @@ "apply": "てきよう", "submit": "そうしん", "more": "つづき", - "generic_error": "エラーになりました" + "generic_error": "エラーになりました", + "optional": "かかなくてもよい", + "show_more": "つづきをみる", + "show_less": "たたむ", + "cancel": "キャンセル", + "disable": "なし", + "enable": "あり", + "confirm": "たしかめる", + "verify": "たしかめる" + }, + "image_cropper": { + "crop_picture": "がぞうをきりぬく", + "save": "セーブ", + "save_without_cropping": "きりぬかずにセーブ", + "cancel": "キャンセル" + }, + "importer": { + "submit": "そうしん", + "success": "インポートできました。", + "error": "インポートがエラーになりました。" }, "login": { "login": "ログイン", @@ -29,7 +52,19 @@ "placeholder": "れい: lain", "register": "はじめる", "username": "ユーザーめい", - "hint": "はなしあいにくわわるには、ログインしてください" + "hint": "はなしあいにくわわるには、ログインしてください", + "authentication_code": "にんしょうコード", + "enter_recovery_code": "リカバリーコードをいれてください", + "enter_two_factor_code": "2-ファクターコードをいれてください", + "recovery_code": "リカバリーコード", + "heading" : { + "totp" : "2-ファクターにんしょう", + "recovery" : "2-ファクターリカバリー" + } + }, + "media_modal": { + "previous": "まえ", + "next": "つぎ" }, "nav": { "about": "これはなに？", @@ -37,11 +72,13 @@ "chat": "ローカルチャット", "friend_requests": "フォローリクエスト", "mentions": "メンション", + "interactions": "やりとり", "dms": "ダイレクトメッセージ", "public_tl": "パブリックタイムライン", "timeline": "タイムライン", "twkn": "つながっているすべてのネットワーク", "user_search": "ユーザーをさがす", + "search": "さがす", "who_to_follow": "おすすめユーザー", "preferences": "せってい" }, @@ -55,18 +92,59 @@ "repeated_you": "あなたのステータスがリピートされました", "no_more_notifications": "つうちはありません" }, + "polls": { + "add_poll": "いれふだをはじめる", + "add_option": "オプションをふやす", + "option": "オプション", + "votes": "いれふだ", + "vote": "ふだをいれる", + "type": "いれふだのかた", + "single_choice": "ひとつえらぶ", + "multiple_choices": "いくつでもえらべる", + "expiry": "いれふだのながさ", + "expires_in": "いれふだは {0} で、おわります", + "expired": "いれふだは {0} まえに、おわりました", + "not_enough_options": "ユニークなオプションが、たりません" + }, + "emoji": { + "stickers": "ステッカー", + "emoji": "えもじ", + "keep_open": "ピッカーをあけたままにする", + "search_emoji": "えもじをさがす", + "add_emoji": "えもじをうちこむ", + "custom": "カスタムえもじ", + "unicode": "ユニコードえもじ" + }, + "stickers": { + "add_sticker": "ステッカーをふやす" + }, + "interactions": { + "favs_repeats": "リピートとおきにいり", + "follows": "あたらしいフォロー", + "load_older": "ふるいやりとりをみる" + }, "post_status": { "new_status": "とうこうする", "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、だれでも、フォロワーげんていのステータスをよむことができます。", "account_not_locked_warning_link": "ロックされたアカウント", "attachments_sensitive": "ファイルをNSFWにする", "content_type": { - "plain_text": "プレーンテキスト" + "text/plain": "プレーンテキスト", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "せつめい (かかなくてもよい)", "default": "はねだくうこうに、つきました。", + "direct_warning_to_all": "このとうこうは、メンションされたすべてのユーザーが、みることができます。", + "direct_warning_to_first_only": "このとうこうは、メッセージのはじめでメンションされたユーザーだけが、みることができます。", "direct_warning": "このステータスは、メンションされたユーザーだけが、よむことができます。", "posting": "とうこう", + "scope_notice": { + "public": "このとうこうは、だれでもみることができます", + "private": "このとうこうは、あなたのフォロワーだけが、みることができます", + "unlisted": "このとうこうは、パブリックタイムラインと、つながっているすべてのネットワークでは、みることができません" + }, "scope": { "direct": "ダイレクト: メンションされたユーザーのみにとどきます。", "private": "フォロワーげんてい: フォロワーのみにとどきます。", @@ -83,6 +161,9 @@ "token": "しょうたいトークン", "captcha": "CAPTCHA", "new_captcha": "もじがよめないときは、がぞうをクリックすると、あたらしいがぞうになります", + "username_placeholder": "れい: lain", + "fullname_placeholder": "れい: いわくら れいん", + "bio_placeholder": "れい:\nごきげんよう。わたしはれいん。\nわたしはアニメのおんなのこで、にほんのベッドタウンにすんでいます。ワイヤードで、わたしにあったことが、あるかもしれませんね。", "validations": { "username_required": "なにかかいてください", "fullname_required": "なにかかいてください", @@ -92,7 +173,34 @@ "password_confirmation_match": "パスワードがちがいます" } }, + "selectable_list": { + "select_all": "すべてえらぶ" + }, "settings": { + "app_name": "アプリのなまえ", + "security": "セキュリティ", + "enter_current_password_to_confirm": "あなたのアイデンティティをたしかめるため、あなたのいまのパスワードをかいてください", + "mfa": { + "otp" : "OTP", + "setup_otp" : "OTPをつくる", + "wait_pre_setup_otp" : "OTPをよういしています", + "confirm_and_enable" : "OTPをたしかめて、ゆうこうにする", + "title": "2-ファクターにんしょう", + "generate_new_recovery_codes" : "あたらしいリカバリーコードをつくる", + "warning_of_generate_new_codes" : "あたらしいリカバリーコードをつくったら、ふるいコードはつかえなくなります。", + "recovery_codes" : "リカバリーコード。", + "waiting_a_recovery_codes": "バックアップコードをうけとっています...", + "recovery_codes_warning" : "コードをかきうつすか、ひとにみられないところにセーブしてください。そうでなければ、あなたはこのコードをふたたびみることはできません。もしあなたが、2FAアプリのアクセスをうしなって、なおかつ、リカバリーコードもおもいだせないならば、あなたはあなたのアカウントから、しめだされます。", + "authentication_methods" : "にんしょうメソッド", + "scan": { + "title": "スキャン", + "desc": "あなたの2-ファクターアプリをつかって、このQRコードをスキャンするか、テキストキーをうちこんでください:", + "secret_code": "キー" + }, + "verify": { + "desc": "2-ファクターにんしょうをつかうには、あなたの2-ファクターアプリのコードをいれてください:" + } + }, "attachmentRadius": "ファイル", "attachments": "ファイル", "autoload": "したにスクロールしたとき、じどうてきによみこむ。", @@ -101,6 +209,12 @@ "avatarRadius": "アバター", "background": "バックグラウンド", "bio": "プロフィール", + "block_export": "ブロックのエクスポート", + "block_export_button": "ブロックをCSVファイルにエクスポート", + "block_import": "ブロックのインポート", + "block_import_error": "ブロックのインポートがエラーになりました", + "blocks_imported": "ブロックをインポートしました！ じっさいにブロックするまでには、もうしばらくかかります。", + "blocks_tab": "ブロック", "btnRadius": "ボタン", "cBlue": "リプライとフォロー", "cGreen": "リピート", @@ -119,9 +233,11 @@ "default_vis": "デフォルトのこうかいはんい", "delete_account": "アカウントをけす", "delete_account_description": "あなたのアカウントとメッセージが、きえます。", - "delete_account_error": "アカウントをけすことが、できなかったかもしれません。インスタンスのかんりしゃに、れんらくしてください。", + "delete_account_error": "アカウントをけすことが、できなかったかもしれません。インスタンスのアドミニストレーターに、おといあわせください。", "delete_account_instructions": "ほんとうにアカウントをけしてもいいなら、パスワードをかいてください。", + "discoverable": "けんさくなどのサービスで、このアカウントをみつけてもよい", "avatar_size_instruction": "アバターのおおきさは、150×150ピクセルか、それよりもおおきくするといいです。", + "pad_emoji": "えもじをピッカーでえらんだとき、えもじのまわりにスペースをいれる", "export_theme": "セーブ", "filtering": "フィルタリング", "filtering_explanation": "これらのことばをふくむすべてのものがミュートされます。1ぎょうに1つのことばをかいてください。", @@ -135,12 +251,15 @@ "general": "ぜんぱん", "hide_attachments_in_convo": "スレッドのファイルをかくす", "hide_attachments_in_tl": "タイムラインのファイルをかくす", + "hide_muted_posts": "ミュートしたユーザーのとうこうをかくす", + "max_thumbnails": "ひとつのとうこうにいれられるサムネイルのかず", "hide_isp": "インスタンススペシフィックパネルをかくす", "preload_images": "がぞうをさきよみする", "use_one_click_nsfw": "NSFWなファイルを1クリックでひらく", "hide_post_stats": "とうこうのとうけいをかくす (れい: おきにいりのかず)", "hide_user_stats": "ユーザーのとうけいをかくす (れい: フォロワーのかず)", "hide_filtered_statuses": "フィルターされたとうこうをかくす", + "import_blocks_from_a_csv_file": "CSVファイルからブロックをインポートする", "import_followers_from_a_csv_file": "CSVファイルからフォローをインポートする", "import_theme": "ロード", "inputRadius": "インプットフィールド", @@ -155,6 +274,7 @@ "lock_account_description": "あなたがみとめたひとだけ、あなたのアカウントをフォローできる", "loop_video": "ビデオをくりかえす", "loop_video_silent_only": "おとのないビデオだけくりかえす", + "mutes_tab": "ミュート", "play_videos_in_modal": "ビデオをメディアビューアーでみる", "use_contain_fit": "がぞうのサムネイルを、きりぬかない", "name": "なまえ", @@ -166,16 +286,20 @@ "notification_visibility_mentions": "メンション", "notification_visibility_repeats": "リピート", "no_rich_text_description": "リッチテキストをつかわない", + "no_blocks": "ブロックしていません", + "no_mutes": "ミュートしていません", "hide_follows_description": "フォローしているひとをみせない", "hide_followers_description": "フォロワーをみせない", - "show_admin_badge": "アドミンのしるしをみる", - "show_moderator_badge": "モデレーターのしるしをみる", + "hide_follows_count_description": "フォローしているひとのかずをみせない", + "hide_followers_count_description": "フォロワーのかずをみせない", + "show_admin_badge": "アドミンのしるしをみせる", + "show_moderator_badge": "モデレーターのしるしをみせる", "nsfw_clickthrough": "NSFWなファイルをかくす", "oauth_tokens": "OAuthトークン", "token": "トークン", - "refresh_token": "トークンを更新", - "valid_until": "まで有効", - "revoke_token": "取り消す", + "refresh_token": "トークンをリフレッシュ", + "valid_until": "おわりのとき", + "revoke_token": "とりけす", "panelRadius": "パネル", "pause_on_unfocused": "タブにフォーカスがないときストリーミングをとめる", "presets": "プリセット", @@ -188,10 +312,14 @@ "reply_visibility_all": "すべてのリプライをみる", "reply_visibility_following": "わたしにあてられたリプライと、フォローしているひとからのリプライをみる", "reply_visibility_self": "わたしにあてられたリプライをみる", + "autohide_floating_post_button": "あたらしいとうこうのボタンを、じどうてきにかくす (モバイル)", "saving_err": "せっていをセーブできませんでした", "saving_ok": "せっていをセーブしました", + "search_user_to_block": "ブロックしたいひとを、ここでけんさくできます", + "search_user_to_mute": "ミュートしたいひとを、ここでけんさくできます", "security_tab": "セキュリティ", "scope_copy": "リプライするとき、こうかいはんいをコピーする (DMのこうかいはんいは、つねにコピーされます)", + "minimal_scopes_mode": "こうかいはんいせんたくオプションを、ちいさくする", "set_new_avatar": "あたらしいアバターをせっていする", "set_new_profile_background": "あたらしいプロフィールのバックグラウンドをせっていする", "set_new_profile_banner": "あたらしいプロフィールバナーを設定する", @@ -209,6 +337,7 @@ "theme_help": "カラーテーマをカスタマイズできます", "theme_help_v2_1": "チェックボックスをONにすると、コンポーネントごとに、いろと、とうめいどを、オーバーライドできます。「すべてクリア」ボタンをおすと、すべてのオーバーライドを、やめます。", "theme_help_v2_2": "バックグラウンドとテキストのコントラストをあらわすアイコンがあります。マウスをホバーすると、くわしいせつめいがでます。とうめいないろをつかっているときは、もっともわるいばあいのコントラストがしめされます。", + "upload_a_photo": "がぞうをアップロード", "tooltipRadius": "ツールチップとアラート", "user_settings": "ユーザーせってい", "values": { @@ -216,6 +345,13 @@ "true": "はい" }, "notifications": "つうち", + "notification_setting": "つうちをうけとる:", + "notification_setting_follows": "あなたがフォローしているひとから", + "notification_setting_non_follows": "あなたがフォローしていないひとから", + "notification_setting_followers": "あなたをフォローしているひとから", + "notification_setting_non_followers": "あなたをフォローしていないひとから", + "notification_mutes": "あるユーザーからのつうちをとめるには、ミュートしてください。", + "notification_blocks": "ブロックしているユーザーからのつうちは、すべてとまります。", "enable_web_push_notifications": "ウェブプッシュつうちをゆるす", "style": { "switcher": { @@ -325,8 +461,47 @@ "checkbox": "りようきやくを、よみました", "link": "ハイパーリンク" } + }, + "version": { + "title": "バージョン", + "backend_version": "バックエンドのバージョン", + "frontend_version": "フロントエンドのバージョン" } }, + "time": { + "day": "{0}日", + "days": "{0}日", + "day_short": "{0}日", + "days_short": "{0}日", + "hour": "{0}時間", + "hours": "{0}時間", + "hour_short": "{0}時間", + "hours_short": "{0}時間", + "in_future": "{0}で", + "in_past": "{0}前", + "minute": "{0}分", + "minutes": "{0}分", + "minute_short": "{0}分", + "minutes_short": "{0}分", + "month": "{0}ヶ月前", + "months": "{0}ヶ月前", + "month_short": "{0}ヶ月前", + "months_short": "{0}ヶ月前", + "now": "たった今", + "now_short": "たった今", + "second": "{0}秒", + "seconds": "{0}秒", + "second_short": "{0}秒", + "seconds_short": "{0}秒", + "week": "{0}週間", + "weeks": "{0}週間", + "week_short": "{0}週間", + "weeks_short": "{0}週間", + "year": "{0}年", + "years": "{0}年", + "year_short": "{0}年", + "years_short": "{0}年" + }, "timeline": { "collapse": "たたむ", "conversation": "スレッド", @@ -336,7 +511,21 @@ "repeated": "リピート", "show_new": "よみこみ", "up_to_date": "さいしん", - "no_more_statuses": "これでおわりです" + "no_more_statuses": "これでおわりです", + "no_statuses": "ありません" + }, + "status": { + "favorites": "おきにいり", + "repeats": "リピート", + "delete": "ステータスをけす", + "pin": "プロフィールにピンどめする", + "unpin": "プロフィールにピンどめするのをやめる", + "pinned": "ピンどめ", + "delete_confirm": "ほんとうに、このステータスを、けしてもいいですか？", + "reply_to": "へんしん:", + "replies_list": "へんしん:", + "mute_conversation": "スレッドをミュートする", + "unmute_conversation": "スレッドをミュートするのをやめる" }, "user_card": { "approve": "うけいれ", @@ -355,14 +544,54 @@ "follows_you": "フォローされました！", "its_you": "これはあなたです！", "media": "メディア", + "mention": "メンション", "mute": "ミュート", "muted": "ミュートしています！", "per_day": "/日", "remote_follow": "リモートフォロー", - "statuses": "ステータス" + "report": "つうほう", + "statuses": "ステータス", + "subscribe": "サブスクライブ", + "unsubscribe": "サブスクライブをやめる", + "unblock": "ブロックをやめる", + "unblock_progress": "ブロックをとりけしています...", + "block_progress": "ブロックしています...", + "unmute": "ミュートをやめる", + "unmute_progress": "ミュートをとりけしています...", + "mute_progress": "ミュートしています...", + "admin_menu": { + "moderation": "モデレーション", + "grant_admin": "アドミンにする", + "revoke_admin": "アドミンをやめさせる", + "grant_moderator": "モデレーターにする", + "revoke_moderator": "モデレーターをやめさせる", + "activate_account": "アカウントをアクティブにする", + "deactivate_account": "アカウントをアクティブでなくする", + "delete_account": "アカウントをけす", + "force_nsfw": "すべてのとうこうをNSFWにする", + "strip_media": "とうこうからメディアをなくす", + "force_unlisted": "とうこうをアンリステッドにする", + "sandbox": "とうこうをフォロワーのみにする", + "disable_remote_subscription": "ほかのインスタンスからフォローされないようにする", + "disable_any_subscription": "フォローされないようにする", + "quarantine": "ほかのインスタンスのユーザーのとうこうをとめる", + "delete_user": "ユーザーをけす", + "delete_user_confirmation": "あなたは、ほんとうに、きはたしかですか？ これは、とりけすことが、できません。" + } }, "user_profile": { - "timeline_title": "ユーザータイムライン" + "timeline_title": "ユーザータイムライン", + "profile_does_not_exist": "ごめんなさい。このプロフィールは、そんざいしません。", + "profile_loading_error": "ごめんなさい。プロフィールのロードがエラーになりました。" + }, + "user_reporting": { + "title": "つうほうする: {0}", + "add_comment_description": "このつうほうは、あなたのインスタンスのモデレーターに、おくられます。このアカウントを、つうほうするりゆうを、せつめいすることができます:", + "additional_comments": "ついかのコメント", + "forward_description": "このアカウントは、ほかのインスタンスのものです。そのインスタンスにも、このつうほうのコピーを、おくりますか？", + "forward_to": "コピーをおくる: {0}", + "submit": "そうしん", + "generic_error": "あなたのリクエストをうけつけようとしましたが、エラーになってしまいました。" }, "who_to_follow": { "more": "くわしく", @@ -388,5 +617,23 @@ "GiB": "GiB", "TiB": "TiB" } + }, + "search": { + "people": "ひとびと", + "hashtags": "ハッシュタグ", + "person_talking": "{count} にんが、はなしています", + "people_talking": "{count} にんが、はなしています", + "no_results": "みつかりませんでした" + }, + "password_reset": { + "forgot_password": "パスワードを、わすれましたか？", + "password_reset": "パスワードリセット", + "instruction": "あなたのメールアドレスかユーザーめいをいれてください。パスワードをリセットするためのリンクをおくります。", + "placeholder": "あなたのメールアドレスかユーザーめい", + "check_email": "パスワードをリセットするためのリンクがかかれたメールが、とどいているかどうか、みてください。", + "return_home": "ホームページにもどる", + "not_found": "そのメールアドレスまたはユーザーめいを、みつけることができませんでした。", + "too_many_requests": "パスワードリセットを、ためすことが、おおすぎます。しばらくしてから、ためしてください。", + "password_reset_disabled": "このインスタンスでは、パスワードリセットは、できません。インスタンスのアドミニストレーターに、おといあわせください。" } } diff --git a/src/i18n/ja_pedantic.json b/src/i18n/ja_pedantic.json new file mode 100644 index 00000000..2ca7dca8 --- /dev/null +++ b/src/i18n/ja_pedantic.json @@ -0,0 +1,639 @@ +{ + "chat": { + "title": "チャット" + }, + "exporter": { + "export": "エクスポート", + "processing": "処理中です。処理が完了すると、ファイルをダウンロードするよう指示があります。" + }, + "features_panel": { + "chat": "チャット", + "gopher": "Gopher", + "media_proxy": "メディアプロクシ", + "scope_options": "公開範囲選択", + "text_limit": "文字の数", + "title": "有効な機能", + "who_to_follow": "おすすめユーザー" + }, + "finder": { + "error_fetching_user": "ユーザー検索がエラーになりました。", + "find_user": "ユーザーを探す" + }, + "general": { + "apply": "適用", + "submit": "送信", + "more": "続き", + "generic_error": "エラーになりました", + "optional": "省略可", + "show_more": "もっと見る", + "show_less": "たたむ", + "cancel": "キャンセル", + "disable": "無効", + "enable": "有効", + "confirm": "確認", + "verify": "検査" + }, + "image_cropper": { + "crop_picture": "画像を切り抜く", + "save": "保存", + "save_without_cropping": "切り抜かずに保存", + "cancel": "キャンセル" + }, + "importer": { + "submit": "送信", + "success": "正常にインポートされました。", + "error": "このファイルをインポートするとき、エラーが発生しました。" + }, + "login": { + "login": "ログイン", + "description": "OAuthでログイン", + "logout": "ログアウト", + "password": "パスワード", + "placeholder": "例: lain", + "register": "登録", + "username": "ユーザー名", + "hint": "会話に加わるには、ログインしてください", + "authentication_code": "認証コード", + "enter_recovery_code": "リカバリーコードを入力してください", + "enter_two_factor_code": "2段階認証コードを入力してください", + "recovery_code": "リカバリーコード", + "heading" : { + "totp" : "2段階認証", + "recovery" : "2段階リカバリー" + } + }, + "media_modal": { + "previous": "前", + "next": "次" + }, + "nav": { + "about": "このインスタンスについて", + "back": "戻る", + "chat": "ローカルチャット", + "friend_requests": "フォローリクエスト", + "mentions": "通知", + "interactions": "インタラクション", + "dms": "ダイレクトメッセージ", + "public_tl": "パブリックタイムライン", + "timeline": "タイムライン", + "twkn": "接続しているすべてのネットワーク", + "user_search": "ユーザーを探す", + "search": "検索", + "who_to_follow": "おすすめユーザー", + "preferences": "設定" + }, + "notifications": { + "broken_favorite": "ステータスが見つかりません。探しています...", + "favorited_you": "あなたのステータスがお気に入りされました", + "followed_you": "フォローされました", + "load_older": "古い通知をみる", + "notifications": "通知", + "read": "読んだ！", + "repeated_you": "あなたのステータスがリピートされました", + "no_more_notifications": "通知はありません" + }, + "polls": { + "add_poll": "投票を追加", + "add_option": "選択肢を追加", + "option": "選択肢", + "votes": "票", + "vote": "投票", + "type": "投票の形式", + "single_choice": "択一式", + "multiple_choices": "複数選択式", + "expiry": "投票期間", + "expires_in": "投票は {0} で終了します", + "expired": "投票は {0} 前に終了しました", + "not_enough_options": "相異なる選択肢が不足しています" + }, + "emoji": { + "stickers": "ステッカー", + "emoji": "絵文字", + "keep_open": "ピッカーを開いたままにする", + "search_emoji": "絵文字を検索", + "add_emoji": "絵文字を挿入", + "custom": "カスタム絵文字", + "unicode": "Unicode絵文字" + }, + "stickers": { + "add_sticker": "ステッカーを追加" + }, + "interactions": { + "favs_repeats": "リピートとお気に入り", + "follows": "新しいフォロワー", + "load_older": "古いインタラクションを見る" + }, + "post_status": { + "new_status": "投稿する", + "account_not_locked_warning": "あなたのアカウントは {0} ではありません。あなたをフォローすれば、誰でも、フォロワー限定のステータスを読むことができます。", + "account_not_locked_warning_link": "ロックされたアカウント", + "attachments_sensitive": "ファイルをNSFWにする", + "content_type": { + "text/plain": "プレーンテキスト", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" + }, + "content_warning": "説明 (省略可)", + "default": "羽田空港に着きました。", + "direct_warning_to_all": "この投稿は、メンションされたすべてのユーザーが、見ることができます。", + "direct_warning_to_first_only": "この投稿は、メッセージの冒頭でメンションされたユーザーだけが、見ることができます。", + "direct_warning": "このステータスは、メンションされたユーザーだけが、読むことができます。", + "posting": "投稿", + "scope_notice": { + "public": "この投稿は、誰でも見ることができます", + "private": "この投稿は、あなたのフォロワーだけが、見ることができます。", + "unlisted": "この投稿は、パブリックタイムラインと、接続しているすべてのネットワークには、表示されません。" + }, + "scope": { + "direct": "ダイレクト: メンションされたユーザーのみに届きます。", + "private": "フォロワーげんてい: フォロワーのみに届きます。", + "public": "パブリック: パブリックタイムラインに届きます。", + "unlisted": "アンリステッド: パブリックタイムラインに届きません。" + } + }, + "registration": { + "bio": "プロフィール", + "email": "Eメール", + "fullname": "スクリーンネーム", + "password_confirm": "パスワードの確認", + "registration": "登録", + "token": "招待トークン", + "captcha": "CAPTCHA", + "new_captcha": "文字が読めないときは、画像をクリックすると、新しい画像になります", + "username_placeholder": "例: lain", + "fullname_placeholder": "例: 岩倉玲音", + "bio_placeholder": "例:\nこんにちは。私は玲音。\n私はアニメのキャラクターで、日本の郊外に住んでいます。私をWiredで見たことがあるかもしれません。", + "validations": { + "username_required": "必須", + "fullname_required": "必須", + "email_required": "必須", + "password_required": "必須", + "password_confirmation_required": "必須", + "password_confirmation_match": "パスワードが違います" + } + }, + "selectable_list": { + "select_all": "すべて選択" + }, + "settings": { + "app_name": "アプリの名称", + "security": "セキュリティ", + "enter_current_password_to_confirm": "あなたのアイデンティティを証明するため、現在のパスワードを入力してください", + "mfa": { + "otp" : "OTP", + "setup_otp" : "OTPのセットアップ", + "wait_pre_setup_otp" : "OTPのプリセット", + "confirm_and_enable" : "OTPの確認と有効化", + "title": "2段階認証", + "generate_new_recovery_codes" : "新しいリカバリーコードを生成", + "warning_of_generate_new_codes" : "新しいリカバリーコードを生成すると、古いコードは使用できなくなります。", + "recovery_codes" : "リカバリーコード。", + "waiting_a_recovery_codes": "バックアップコードを受信しています...", + "recovery_codes_warning" : "コードを紙に書くか、安全な場所に保存してください。そうでなければ、あなたはコードを再び見ることはできません。もし2段階認証アプリのアクセスを喪失し、なおかつ、リカバリーコードもないならば、あなたは自分のアカウントから閉め出されます。", + "authentication_methods" : "認証方法", + "scan": { + "title": "スキャン", + "desc": "あなたの2段階認証アプリを使って、このQRコードをスキャンするか、テキストキーを入力してください:", + "secret_code": "キー" + }, + "verify": { + "desc": "2段階認証を有効にするには、あなたの2段階認証アプリのコードを入力してください:" + } + }, + "attachmentRadius": "ファイル", + "attachments": "ファイル", + "autoload": "下にスクロールしたとき、自動的に読み込む。", + "avatar": "アバター", + "avatarAltRadius": "通知のアバター", + "avatarRadius": "アバター", + "background": "バックグラウンド", + "bio": "プロフィール", + "block_export": "ブロックのエクスポート", + "block_export_button": "ブロックをCSVファイルにエクスポートする", + "block_import": "ブロックのインポート", + "block_import_error": "ブロックのインポートに失敗しました", + "blocks_imported": "ブロックをインポートしました！ 実際に処理されるまでに、しばらく時間がかかります。", + "blocks_tab": "ブロック", + "btnRadius": "ボタン", + "cBlue": "返信とフォロー", + "cGreen": "リピート", + "cOrange": "お気に入り", + "cRed": "キャンセル", + "change_password": "パスワードを変える", + "change_password_error": "パスワードを変えることが、できなかったかもしれません。", + "changed_password": "パスワードが、変わりました！", + "collapse_subject": "説明のある投稿をたたむ", + "composing": "投稿", + "confirm_new_password": "新しいパスワードの確認", + "current_avatar": "現在のアバター", + "current_password": "現在のパスワード", + "current_profile_banner": "現在のプロフィールバナー", + "data_import_export_tab": "インポートとエクスポート", + "default_vis": "デフォルトの公開範囲", + "delete_account": "アカウントを消す", + "delete_account_description": "あなたのアカウントとメッセージが、消えます。", + "delete_account_error": "アカウントを消すことが、できなかったかもしれません。インスタンスの管理者に、連絡してください。", + "delete_account_instructions": "本当にアカウントを消してもいいなら、パスワードを入力してください。", + "discoverable": "検索などのサービスでこのアカウントを見つけることを許可する", + "avatar_size_instruction": "アバターの大きさは、150×150ピクセルか、それよりも大きくするといいです。", + "pad_emoji": "ピッカーから絵文字を挿入するとき、絵文字の両側にスペースを入れる", + "export_theme": "保存", + "filtering": "フィルタリング", + "filtering_explanation": "これらの言葉を含むすべてのものがミュートされます。1行に1つの言葉を書いてください。", + "follow_export": "フォローのエクスポート", + "follow_export_button": "エクスポート", + "follow_export_processing": "お待ちください。まもなくファイルをダウンロードできます。", + "follow_import": "フォローのインポート", + "follow_import_error": "フォローのインポートがエラーになりました。", + "follows_imported": "フォローがインポートされました！ 少し時間がかかるかもしれません。", + "foreground": "フォアグラウンド", + "general": "全般", + "hide_attachments_in_convo": "スレッドのファイルを隠す", + "hide_attachments_in_tl": "タイムラインのファイルを隠す", + "hide_muted_posts": "ミュートしているユーザーの投稿を隠す", + "max_thumbnails": "投稿に含まれるサムネイルの最大数", + "hide_isp": "インスタンス固有パネルを隠す", + "preload_images": "画像を先読みする", + "use_one_click_nsfw": "NSFWなファイルを1クリックで開く", + "hide_post_stats": "投稿の統計を隠す (例: お気に入りの数)", + "hide_user_stats": "ユーザーの統計を隠す (例: フォロワーの数)", + "hide_filtered_statuses": "フィルターされた投稿を隠す", + "import_blocks_from_a_csv_file": "CSVファイルからブロックをインポートする", + "import_followers_from_a_csv_file": "CSVファイルからフォローをインポートする", + "import_theme": "ロード", + "inputRadius": "インプットフィールド", + "checkboxRadius": "チェックボックス", + "instance_default": "(デフォルト: {value})", + "instance_default_simple": "(デフォルト)", + "interface": "インターフェース", + "interfaceLanguage": "インターフェースの言語", + "invalid_theme_imported": "このファイルはPleromaのテーマではありません。テーマは変更されませんでした。", + "limited_availability": "あなたのブラウザではできません", + "links": "リンク", + "lock_account_description": "あなたが認めた人だけ、あなたのアカウントをフォローできる", + "loop_video": "ビデオを繰り返す", + "loop_video_silent_only": "音のないビデオだけ繰り返す", + "mutes_tab": "ミュート", + "play_videos_in_modal": "ビデオをメディアビューアーで見る", + "use_contain_fit": "画像のサムネイルを、切り抜かない", + "name": "名前", + "name_bio": "名前とプロフィール", + "new_password": "新しいパスワード", + "notification_visibility": "表示する通知", + "notification_visibility_follows": "フォロー", + "notification_visibility_likes": "お気に入り", + "notification_visibility_mentions": "メンション", + "notification_visibility_repeats": "リピート", + "no_rich_text_description": "リッチテキストを使わない", + "no_blocks": "ブロックはありません", + "no_mutes": "ミュートはありません", + "hide_follows_description": "フォローしている人を見せない", + "hide_followers_description": "フォロワーを見せない", + "hide_follows_count_description": "フォローしている人の数を見せない", + "hide_followers_count_description": "フォロワーの数を見せない", + "show_admin_badge": "管理者のバッジを見せる", + "show_moderator_badge": "モデレーターのバッジを見せる", + "nsfw_clickthrough": "NSFWなファイルを隠す", + "oauth_tokens": "OAuthトークン", + "token": "トークン", + "refresh_token": "トークンを更新", + "valid_until": "まで有効", + "revoke_token": "取り消す", + "panelRadius": "パネル", + "pause_on_unfocused": "タブにフォーカスがないときストリーミングを止める", + "presets": "プリセット", + "profile_background": "プロフィールのバックグラウンド", + "profile_banner": "プロフィールバナー", + "profile_tab": "プロフィール", + "radii_help": "インターフェースの丸さを設定する。", + "replies_in_timeline": "タイムラインのリプライ", + "reply_link_preview": "カーソルを重ねたとき、リプライのプレビューを見る", + "reply_visibility_all": "すべてのリプライを見る", + "reply_visibility_following": "私に宛てられたリプライと、フォローしている人からのリプライを見る", + "reply_visibility_self": "私に宛てられたリプライを見る", + "autohide_floating_post_button": "新しい投稿ボタンを自動的に隠す (モバイル)", + "saving_err": "設定を保存できませんでした", + "saving_ok": "設定を保存しました", + "search_user_to_block": "ブロックしたいユーザーを検索", + "search_user_to_mute": "ミュートしたいユーザーを検索", + "security_tab": "セキュリティ", + "scope_copy": "返信するとき、公開範囲をコピーする (DMの公開範囲は、常にコピーされます)", + "minimal_scopes_mode": "公開範囲選択オプションを最小にする", + "set_new_avatar": "新しいアバターを設定する", + "set_new_profile_background": "新しいプロフィールのバックグラウンドを設定する", + "set_new_profile_banner": "新しいプロフィールバナーを設定する", + "settings": "設定", + "subject_input_always_show": "サブジェクトフィールドをいつでも表示する", + "subject_line_behavior": "返信するときサブジェクトをコピーする", + "subject_line_email": "メール風: \"re: サブジェクト\"", + "subject_line_mastodon": "マストドン風: そのままコピー", + "subject_line_noop": "コピーしない", + "post_status_content_type": "投稿のコンテントタイプ", + "stop_gifs": "カーソルを重ねたとき、GIFを動かす", + "streaming": "上までスクロールしたとき、自動的にストリーミングする", + "text": "文字", + "theme": "テーマ", + "theme_help": "カラーテーマをカスタマイズできます", + "theme_help_v2_1": "チェックボックスをONにすると、コンポーネントごとに、色と透明度をオーバーライドできます。「すべてクリア」ボタンを押すと、すべてのオーバーライドをやめます。", + "theme_help_v2_2": "バックグラウンドとテキストのコントラストを表すアイコンがあります。マウスをホバーすると、詳しい説明が出ます。透明な色を使っているときは、最悪の場合のコントラストが示されます。", + "tooltipRadius": "ツールチップとアラート", + "upload_a_photo": "画像をアップロード", + "user_settings": "ユーザー設定", + "values": { + "false": "いいえ", + "true": "はい" + }, + "notifications": "通知", + "notification_setting": "通知を受け取る:", + "notification_setting_follows": "あなたがフォローしているユーザーから", + "notification_setting_non_follows": "あなたがフォローしていないユーザーから", + "notification_setting_followers": "あなたをフォローしているユーザーから", + "notification_setting_non_followers": "あなたをフォローしていないユーザーから", + "notification_mutes": "特定のユーザーからの通知を止めるには、ミュートしてください。", + "notification_blocks": "ブロックしているユーザーからの通知は、すべて止まります。", + "enable_web_push_notifications": "ウェブプッシュ通知を許可する", + "style": { + "switcher": { + "keep_color": "色を残す", + "keep_shadows": "影を残す", + "keep_opacity": "透明度を残す", + "keep_roundness": "丸さを残す", + "keep_fonts": "フォントを残す", + "save_load_hint": "「残す」オプションをONにすると、テーマを選んだときとロードしたとき、現在の設定を残します。また、テーマをエクスポートするとき、これらのオプションを維持します。すべてのチェックボックスをOFFにすると、テーマをエクスポートしたとき、すべての設定を保存します。", + "reset": "リセット", + "clear_all": "すべてクリア", + "clear_opacity": "透明度をクリア" + }, + "common": { + "color": "色", + "opacity": "透明度", + "contrast": { + "hint": "コントラストは {ratio} です。{level}。({context})", + "level": { + "aa": "AAレベルガイドライン (ミニマル) を満たします", + "aaa": "AAAレベルガイドライン (レコメンデッド) を満たします。", + "bad": "ガイドラインを満たしません。" + }, + "context": { + "18pt": "大きい (18ポイント以上) テキスト", + "text": "テキスト" + } + } + }, + "common_colors": { + "_tab_label": "共通", + "main": "共通の色", + "foreground_hint": "「詳細」タブで、もっと細かく設定できます", + "rgbo": "アイコンとアクセントとバッジ" + }, + "advanced_colors": { + "_tab_label": "詳細", + "alert": "アラートのバックグラウンド", + "alert_error": "エラー", + "badge": "バッジのバックグラウンド", + "badge_notification": "通知", + "panel_header": "パネルヘッダー", + "top_bar": "トップバー", + "borders": "境界", + "buttons": "ボタン", + "inputs": "インプットフィールド", + "faint_text": "薄いテキスト" + }, + "radii": { + "_tab_label": "丸さ" + }, + "shadows": { + "_tab_label": "光と影", + "component": "コンポーネント", + "override": "オーバーライド", + "shadow_id": "影 #{value}", + "blur": "ぼかし", + "spread": "広がり", + "inset": "内側", + "hint": "影の設定では、色の値として --variable を使うことができます。これはCSS3変数です。ただし、透明度の設定は、効かなくなります。", + "filter_hint": { + "always_drop_shadow": "ブラウザーがサポートしていれば、常に {0} が使われます。", + "drop_shadow_syntax": "{0} は、{1} パラメーターと {2} キーワードをサポートしていません。", + "avatar_inset": "内側の影と外側の影を同時に使うと、透明なアバターの表示が乱れます。", + "spread_zero": "広がりが 0 よりも大きな影は、0 と同じです。", + "inset_classic": "内側の影は {0} を使います。" + }, + "components": { + "panel": "パネル", + "panelHeader": "パネルヘッダー", + "topBar": "トップバー", + "avatar": "ユーザーアバター (プロフィール)", + "avatarStatus": "ユーザーアバター (投稿)", + "popup": "ポップアップとツールチップ", + "button": "ボタン", + "buttonHover": "ボタン (ホバー)", + "buttonPressed": "ボタン (押されているとき)", + "buttonPressedHover": "ボタン (ホバー、かつ、押されているとき)", + "input": "インプットフィールド" + } + }, + "fonts": { + "_tab_label": "フォント", + "help": "「カスタム」を選んだときは、システムにあるフォントの名前を、正しく入力してください。", + "components": { + "interface": "インターフェース", + "input": "インプットフィールド", + "post": "投稿", + "postCode": "等幅 (投稿がリッチテキストであるとき)" + }, + "family": "フォント名", + "size": "大きさ (px)", + "weight": "太さ", + "custom": "カスタム" + }, + "preview": { + "header": "プレビュー", + "content": "本文", + "error": "エラーの例", + "button": "ボタン", + "text": "これは{0}と{1}の例です。", + "mono": "monospace", + "input": "羽田空港に着きました。", + "faint_link": "とても助けになるマニュアル", + "fine_print": "私たちの{0}を、読まないでください！", + "header_faint": "エラーではありません", + "checkbox": "利用規約を読みました", + "link": "ハイパーリンク" + } + }, + "version": { + "title": "バージョン", + "backend_version": "バックエンドのバージョン", + "frontend_version": "フロントエンドのバージョン" + } + }, + "time": { + "day": "{0}日", + "days": "{0}日", + "day_short": "{0}日", + "days_short": "{0}日", + "hour": "{0}時間", + "hours": "{0}時間", + "hour_short": "{0}時間", + "hours_short": "{0}時間", + "in_future": "{0}で", + "in_past": "{0}前", + "minute": "{0}分", + "minutes": "{0}分", + "minute_short": "{0}分", + "minutes_short": "{0}分", + "month": "{0}ヶ月前", + "months": "{0}ヶ月前", + "month_short": "{0}ヶ月前", + "months_short": "{0}ヶ月前", + "now": "たった今", + "now_short": "たった今", + "second": "{0}秒", + "seconds": "{0}秒", + "second_short": "{0}秒", + "seconds_short": "{0}秒", + "week": "{0}週間", + "weeks": "{0}週間", + "week_short": "{0}週間", + "weeks_short": "{0}週間", + "year": "{0}年", + "years": "{0}年", + "year_short": "{0}年", + "years_short": "{0}年" + }, + "timeline": { + "collapse": "たたむ", + "conversation": "スレッド", + "error_fetching": "読み込みがエラーになりました", + "load_older": "古いステータス", + "no_retweet_hint": "投稿を「フォロワーのみ」または「ダイレクト」にすると、リピートできなくなります", + "repeated": "リピート", + "show_new": "読み込み", + "up_to_date": "最新", + "no_more_statuses": "これで終わりです", + "no_statuses": "ステータスはありません" + }, + "status": { + "favorites": "お気に入り", + "repeats": "リピート", + "delete": "ステータスを削除", + "pin": "プロフィールにピン留め", + "unpin": "プロフィールのピン留めを外す", + "pinned": "ピン留め", + "delete_confirm": "本当にこのステータスを削除してもよろしいですか？", + "reply_to": "返信", + "replies_list": "返信:", + "mute_conversation": "スレッドをミュート", + "unmute_conversation": "スレッドのミュートを解除" + }, + "user_card": { + "approve": "受け入れ", + "block": "ブロック", + "blocked": "ブロックしています！", + "deny": "お断り", + "favorites": "お気に入り", + "follow": "フォロー", + "follow_sent": "リクエストを送りました！", + "follow_progress": "リクエストしています…", + "follow_again": "再びリクエストを送りますか？", + "follow_unfollow": "フォローをやめる", + "followees": "フォロー", + "followers": "フォロワー", + "following": "フォローしています！", + "follows_you": "フォローされました！", + "its_you": "これはあなたです！", + "media": "メディア", + "mention": "メンション", + "mute": "ミュート", + "muted": "ミュートしています！", + "per_day": "/日", + "remote_follow": "リモートフォロー", + "report": "通報", + "statuses": "ステータス", + "subscribe": "購読", + "unsubscribe": "購読を解除", + "unblock": "ブロック解除", + "unblock_progress": "ブロックを解除しています...", + "block_progress": "ブロックしています...", + "unmute": "ミュート解除", + "unmute_progress": "ミュートを解除しています...", + "mute_progress": "ミュートしています...", + "admin_menu": { + "moderation": "モデレーション", + "grant_admin": "管理者権限を付与", + "revoke_admin": "管理者権限を解除", + "grant_moderator": "モデレーター権限を付与", + "revoke_moderator": "モデレーター権限を解除", + "activate_account": "アカウントをアクティブにする", + "deactivate_account": "アカウントをアクティブでなくする", + "delete_account": "アカウントを削除", + "force_nsfw": "すべての投稿をNSFWにする", + "strip_media": "投稿からメディアを除去する", + "force_unlisted": "投稿を未収載にする", + "sandbox": "投稿をフォロワーのみにする", + "disable_remote_subscription": "他のインスタンスからフォローされないようにする", + "disable_any_subscription": "フォローされないようにする", + "quarantine": "他のインスタンスからの投稿を止める", + "delete_user": "ユーザーを削除", + "delete_user_confirmation": "あなたの精神状態に何か問題はございませんか？ この操作を取り消すことはできません。" + } + }, + "user_profile": { + "timeline_title": "ユーザータイムライン", + "profile_does_not_exist": "申し訳ない。このプロフィールは存在しません。", + "profile_loading_error": "申し訳ない。プロフィールの読み込みがエラーになりました。" + }, + "user_reporting": { + "title": "通報する: {0}", + "add_comment_description": "この通報は、あなたのインスタンスのモデレーターに送られます。このアカウントを通報する理由を説明することができます:", + "additional_comments": "追加のコメント", + "forward_description": "このアカウントは他のサーバーに置かれています。この通報のコピーをリモートのサーバーに送りますか？", + "forward_to": "転送する: {0}", + "submit": "送信", + "generic_error": "あなたのリクエストを処理しようとしましたが、エラーになりました。" + }, + "who_to_follow": { + "more": "詳細", + "who_to_follow": "おすすめユーザー" + }, + "tool_tip": { + "media_upload": "メディアをアップロード", + "repeat": "リピート", + "reply": "返信", + "favorite": "お気に入り", + "user_settings": "ユーザー設定" + }, + "upload":{ + "error": { + "base": "アップロードに失敗しました。", + "file_too_big": "ファイルが大きすぎます [{filesize} {filesizeunit} / {allowedsize} {allowedsizeunit}]", + "default": "しばらくしてから試してください" + }, + "file_size_units": { + "B": "B", + "KiB": "KiB", + "MiB": "MiB", + "GiB": "GiB", + "TiB": "TiB" + } + }, + "search": { + "people": "人々", + "hashtags": "ハッシュタグ", + "person_talking": "{count} 人が話しています", + "people_talking": "{count} 人が話しています", + "no_results": "見つかりませんでした" + }, + "password_reset": { + "forgot_password": "パスワードを忘れましたか？", + "password_reset": "パスワードリセット", + "instruction": "メールアドレスまたはユーザー名を入力してください。パスワードをリセットするためのリンクを送信します。", + "placeholder": "メールアドレスまたはユーザー名", + "check_email": "パスワードをリセットするためのリンクが記載されたメールが届いているか確認してください。", + "return_home": "ホームページに戻る", + "not_found": "メールアドレスまたはユーザー名が見つかりませんでした。", + "too_many_requests": "試行回数の制限に達しました。しばらく時間を置いてから再試行してください。", + "password_reset_disabled": "このインスタンスではパスワードリセットは無効になっています。インスタンスの管理者に連絡してください。" + } +} diff --git a/src/i18n/ko.json b/src/i18n/ko.json index 336e464f..402a354c 100644 --- a/src/i18n/ko.json +++ b/src/i18n/ko.json @@ -56,7 +56,7 @@ "account_not_locked_warning_link": "잠김", "attachments_sensitive": "첨부물을 민감함으로 설정", "content_type": { - "plain_text": "평문" + "text/plain": "평문" }, "content_warning": "주제 (필수 아님)", "default": "LA에 도착!", diff --git a/src/i18n/messages.js b/src/i18n/messages.js index ab697948..89c8a8c8 100644 --- a/src/i18n/messages.js +++ b/src/i18n/messages.js @@ -16,6 +16,7 @@ const messages = { eo: require('./eo.json'), es: require('./es.json'), et: require('./et.json'), + eu: require('./eu.json'), fi: require('./fi.json'), fr: require('./fr.json'), ga: require('./ga.json'), @@ -23,6 +24,7 @@ const messages = { hu: require('./hu.json'), it: require('./it.json'), ja: require('./ja.json'), + ja_pedantic: require('./ja_pedantic.json'), ko: require('./ko.json'), nb: require('./nb.json'), nl: require('./nl.json'), @@ -31,6 +33,7 @@ const messages = { pt: require('./pt.json'), ro: require('./ro.json'), ru: require('./ru.json'), + te: require('./te.json'), zh: require('./zh.json') } diff --git a/src/i18n/nb.json b/src/i18n/nb.json index 39e054f7..248b05bc 100644 --- a/src/i18n/nb.json +++ b/src/i18n/nb.json @@ -2,14 +2,18 @@ "chat": { "title": "Nettprat" }, + "exporter": { + "export": "Eksporter", + "processing": "Arbeider, du vil snart bli spurt om å laste ned filen din" + }, "features_panel": { "chat": "Nettprat", "gopher": "Gopher", "media_proxy": "Media proxy", "scope_options": "Velg mottakere", - "text_limit": "Tekst-grense", + "text_limit": "Tekstgrense", "title": "Egenskaper", - "who_to_follow": "Hvem å følge" + "who_to_follow": "Kontoer å følge" }, "finder": { "error_fetching_user": "Feil ved henting av bruker", @@ -17,23 +21,66 @@ }, "general": { "apply": "Bruk", - "submit": "Send" + "submit": "Send", + "more": "Mer", + "generic_error": "Det oppsto en feil", + "optional": "valgfritt", + "show_more": "Vis mer", + "show_less": "Vis mindre", + "cancel": "Avbryt", + "disable": "Slå av", + "enable": "Slå på", + "confirm": "Godta", + "verify": "Godkjenn" + }, + "image_cropper": { + "crop_picture": "Minsk bilde", + "save": "Lagre", + "save_without_cropping": "Lagre uten å minske bildet", + "cancel": "Avbryt" + }, + "importer": { + "submit": "Send", + "success": "Importering fullført", + "error": "Det oppsto en feil under importering av denne filen" }, "login": { "login": "Logg inn", + "description": "Log inn med OAuth", "logout": "Logg ut", "password": "Passord", "placeholder": "f. eks lain", "register": "Registrer", - "username": "Brukernavn" + "username": "Brukernavn", + "hint": "Logg inn for å delta i diskusjonen", + "authentication_code": "Verifikasjonskode", + "enter_recovery_code": "Skriv inn en gjenopprettingskode", + "enter_two_factor_code": "Skriv inn en to-faktors kode", + "recovery_code": "Gjenopprettingskode", + "heading" : { + "totp" : "To-faktors autentisering", + "recovery" : "To-faktors gjenoppretting" + } + }, + "media_modal": { + "previous": "Forrige", + "next": "Neste" }, "nav": { + "about": "Om", + "back": "Tilbake", "chat": "Lokal nettprat", "friend_requests": "Følgeforespørsler", "mentions": "Nevnt", + "interactions": "Interaksjooner", + "dms": "Direktemeldinger", "public_tl": "Offentlig Tidslinje", "timeline": "Tidslinje", - "twkn": "Det hele kjente nettverket" + "twkn": "Det hele kjente nettverket", + "user_search": "Søk etter brukere", + "search": "Søk", + "who_to_follow": "Kontoer å følge", + "preferences": "Innstillinger" }, "notifications": { "broken_favorite": "Ukjent status, leter etter den...", @@ -42,19 +89,52 @@ "load_older": "Last eldre varsler", "notifications": "Varslinger", "read": "Les!", - "repeated_you": "Gjentok din status" + "repeated_you": "Gjentok din status", + "no_more_notifications": "Ingen gjenstående varsler" + }, + "polls": { + "add_poll": "Legg til undersøkelse", + "add_option": "Legg til svaralternativ", + "option": "Svaralternativ", + "votes": "stemmer", + "vote": "Stem", + "type": "Undersøkelsestype", + "single_choice": "Enkeltvalg", + "multiple_choices": "Flervalg", + "expiry": "Undersøkelsestid", + "expires_in": "Undersøkelsen er over om {0}", + "expired": "Undersøkelsen ble ferdig {0} siden", + "not_enough_options": "For få unike svaralternativer i undersøkelsen" + }, + "stickers": { + "add_sticker": "Legg til klistremerke" + }, + "interactions": { + "favs_repeats": "Gjentakelser og favoritter", + "follows": "Nye følgere", + "load_older": "Last eldre interaksjoner" }, "post_status": { + "new_status": "Legg ut ny status", "account_not_locked_warning": "Kontoen din er ikke {0}. Hvem som helst kan følge deg for å se dine statuser til følgere", "account_not_locked_warning_link": "låst", "attachments_sensitive": "Merk vedlegg som sensitive", "content_type": { - "plain_text": "Klar tekst" + "text/plain": "Klar tekst", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "Tema (valgfritt)", "default": "Landet akkurat i L.A.", - "direct_warning": "Denne statusen vil kun bli sett av nevnte brukere", + "direct_warning_to_all": "Denne statusen vil være synlig av nevnte brukere", + "direct_warning_to_first_only": "Denne statusen vil være synlig for de brukerene som blir nevnt først i statusen.", "posting": "Publiserer", + "scope_notice": { + "public": "Denne statusen vil være synlig for alle", + "private": "Denne statusen vil være synlig for dine følgere", + "unlisted": "Denne statusen vil ikke være synlig i Offentlig Tidslinje eller Det Hele Kjente Nettverket" + }, "scope": { "direct": "Direkte, publiser bare til nevnte brukere", "private": "Bare følgere, publiser bare til brukere som følger deg", @@ -68,9 +148,49 @@ "fullname": "Visningsnavn", "password_confirm": "Bekreft passord", "registration": "Registrering", - "token": "Invitasjons-bevis" + "token": "Invitasjons-bevis", + "captcha": "CAPTCHA", + "new_captcha": "Trykk på bildet for å få en ny captcha", + "username_placeholder": "f.eks. Lain Iwakura", + "fullname_placeholder": "f.eks. Lain Iwakura", + "bio_placeholder": "e.g.\nHei, jeg er Lain.\nJeg er en animert jente som bor i forstaden i Japan. Du kjenner meg kanskje fra the Wired.", + "validations": { + "username_required": "kan ikke stå tomt", + "fullname_required": "kan ikke stå tomt", + "email_required": "kan ikke stå tomt", + "password_required": "kan ikke stå tomt", + "password_confirmation_required": "kan ikke stå tomt", + "password_confirmation_match": "skal være det samme som passord" + } + }, + "selectable_list": { + "select_all": "Velg alle" }, "settings": { + "app_name": "Applikasjonsnavn", + "security": "Sikkerhet", + "enter_current_password_to_confirm": "Skriv inn ditt nåverende passord for å bekrefte din identitet", + "mfa": { + "otp" : "OTP", + "setup_otp" : "Set opp OTP", + "wait_pre_setup_otp" : "forhåndsstiller OTP", + "confirm_and_enable" : "Bekreft og slå på OTP", + "title": "To-faktors autentisering", + "generate_new_recovery_codes" : "Generer nye gjenopprettingskoder", + "warning_of_generate_new_codes" : "Når du genererer nye gjenopprettingskoder, vil de gamle slutte å fungere.", + "recovery_codes" : "Gjenopprettingskoder.", + "waiting_a_recovery_codes": "Mottar gjenopprettingskoder...", + "recovery_codes_warning" : "Skriv disse kodene ned eller plasser dem ett sikkert sted - ellers så vil du ikke se dem igjen. Dersom du mister tilgang til din to-faktors app og dine gjenopprettingskoder, vil du bli stengt ute av kontoen din.", + "authentication_methods" : "Autentiseringsmetoder", + "scan": { + "title": "Skann", + "desc": "Ved hjelp av din to-faktors applikasjon, skann denne QR-koden eller skriv inn tekstnøkkelen", + "secret_code": "Nøkkel" + }, + "verify": { + "desc": "For å skru på to-faktors autentisering, skriv inn koden i fra din to-faktors app:" + } + }, "attachmentRadius": "Vedlegg", "attachments": "Vedlegg", "autoload": "Automatisk lasting når du blar ned til bunnen", @@ -79,6 +199,12 @@ "avatarRadius": "Profilbilde", "background": "Bakgrunn", "bio": "Biografi", + "block_export": "Eksporter blokkeringer", + "block_export_button": "Eksporter blokkeringer til en csv fil", + "block_import": "Import blokkeringer", + "block_import_error": "Det oppsto en feil under importering av blokkeringer", + "blocks_imported": "Blokkeringer importert, det vil ta litt å prossesere dem", + "blocks_tab": "Blokkeringer", "btnRadius": "Knapper", "cBlue": "Blå (Svar, følg)", "cGreen": "Grønn (Gjenta)", @@ -88,6 +214,7 @@ "change_password_error": "Feil ved endring av passord", "changed_password": "Passord endret", "collapse_subject": "Sammenfold statuser med tema", + "composing": "komponering", "confirm_new_password": "Bekreft nytt passord", "current_avatar": "Ditt nåværende profilbilde", "current_password": "Nåværende passord", @@ -95,15 +222,15 @@ "data_import_export_tab": "Data import / eksport", "default_vis": "Standard visnings-omfang", "delete_account": "Slett konto", - "delete_account_description": "Slett din konto og alle dine statuser", + "delete_account_description": "Fjern din konto og alle dine meldinger for alltid.", "delete_account_error": "Det oppsto et problem ved sletting av kontoen din, hvis dette problemet forblir kontakt din administrator", "delete_account_instructions": "Skriv inn ditt passord i feltet nedenfor for å bekrefte sletting av konto", + "avatar_size_instruction": "Den anbefalte minste-størrelsen for profilbilder er 150x150 piksler", "export_theme": "Lagre tema", "filtering": "Filtrering", "filtering_explanation": "Alle statuser som inneholder disse ordene vil bli dempet, en kombinasjon av tegn per linje", "follow_export": "Eksporter følginger", "follow_export_button": "Eksporter følgingene dine til en .csv fil", - "follow_export_processing": "Jobber, du vil snart bli spurt om å laste ned filen din.", "follow_import": "Importer følginger", "follow_import_error": "Feil ved importering av følginger.", "follows_imported": "Følginger importert! Behandling vil ta litt tid.", @@ -111,10 +238,22 @@ "general": "Generell", "hide_attachments_in_convo": "Gjem vedlegg i samtaler", "hide_attachments_in_tl": "Gjem vedlegg på tidslinje", + "hide_muted_posts": "Gjem statuser i fra gjemte brukere", + "max_thumbnails": "Maks antall forhåndsbilder per status", + "hide_isp": "Gjem instans-spesifikt panel", + "preload_images": "Forhåndslast bilder", + "use_one_click_nsfw": "Åpne sensitive vedlegg med ett klikk", + "hide_post_stats": "Gjem status statistikk (f.eks. antall likes", + "hide_user_stats": "Gjem bruker statistikk (f.eks. antall følgere)", + "hide_filtered_statuses": "Gjem filtrerte statuser", + "import_blocks_from_a_csv_file": "Importer blokkeringer fra en csv fil", "import_followers_from_a_csv_file": "Importer følginger fra en csv fil", "import_theme": "Last tema", - "inputRadius": "Input felt", + "inputRadius": "Tekst felt", + "checkboxRadius": "Sjekkbokser", "instance_default": "(standard: {value})", + "instance_default_simple": "(standard)", + "interface": "Grensesnitt", "interfaceLanguage": "Grensesnitt-språk", "invalid_theme_imported": "Den valgte filen er ikke ett støttet Pleroma-tema, ingen endringer til ditt tema ble gjort", "limited_availability": "Ikke tilgjengelig i din nettleser", @@ -122,6 +261,9 @@ "lock_account_description": "Begrens din konto til bare godkjente følgere", "loop_video": "Gjenta videoer", "loop_video_silent_only": "Gjenta bare videoer uten lyd, (for eksempel Mastodon sine \"gifs\")", + "mutes_tab": "Dempinger", + "play_videos_in_modal": "Spill videoer direkte i media-avspilleren", + "use_contain_fit": "Ikke minsk vedlegget i forhåndsvisninger", "name": "Navn", "name_bio": "Navn & Biografi", "new_password": "Nytt passord", @@ -131,10 +273,16 @@ "notification_visibility_mentions": "Nevnt", "notification_visibility_repeats": "Gjentakelser", "no_rich_text_description": "Fjern all formatering fra statuser", + "no_blocks": "Ingen blokkeringer", + "no_mutes": "Ingen dempinger", + "hide_follows_description": "Ikke hvis hvem jeg følger", + "hide_followers_description": "Ikke hvis hvem som følger meg", + "show_admin_badge": "Hvis ett administratormerke på min profil", + "show_moderator_badge": "Hvis ett moderatormerke på min profil", "nsfw_clickthrough": "Krev trykk for å vise statuser som kan være upassende", "oauth_tokens": "OAuth Tokens", "token": "Pollett", - "refresh_token": "Refresh Token", + "refresh_token": "Fornyingspolett", "valid_until": "Gyldig til", "revoke_token": "Tilbakekall", "panelRadius": "Panel", @@ -149,25 +297,196 @@ "reply_visibility_all": "Vis alle svar", "reply_visibility_following": "Vis bare svar som er til meg eller folk jeg følger", "reply_visibility_self": "Vis bare svar som er til meg", + "autohide_floating_post_button": "Skjul Ny Status knapp automatisk (mobil)", "saving_err": "Feil ved lagring av innstillinger", "saving_ok": "Innstillinger lagret", + "search_user_to_block": "Søk etter hvem du vil blokkere", + "search_user_to_mute": "Søk etter hvem du vil dempe", "security_tab": "Sikkerhet", + "scope_copy": "Kopier mottakere når du svarer noen (Direktemeldinger blir alltid kopiert", + "minimal_scopes_mode": "Minimaliser mottakervalg", "set_new_avatar": "Rediger profilbilde", "set_new_profile_background": "Rediger profil-bakgrunn", "set_new_profile_banner": "Sett ny profil-banner", "settings": "Innstillinger", + "subject_input_always_show": "Alltid hvis tema-felt", + "subject_line_behavior": "Kopier tema når du svarer", + "subject_line_email": "Som email: \"re: tema\"", + "subject_line_mastodon": "Som mastodon: kopier som den er", + "subject_line_noop": "Ikke koper", + "post_status_content_type": "Status innholdstype", "stop_gifs": "Spill av GIFs når du holder over dem", "streaming": "Automatisk strømming av nye statuser når du har bladd til toppen", "text": "Tekst", "theme": "Tema", "theme_help": "Bruk heksadesimale fargekoder (#rrggbb) til å endre farge-temaet ditt.", + "theme_help_v2_1": "Du kan også overskrive noen komponenter sine farger og opasitet ved å sjekke av sjekkboksen, bruk \"Nullstill alt\" knappen for å fjerne alle overskrivelser.", + "theme_help_v2_2": "Ikoner under noen av innstillingene er bakgrunn/tekst kontrast indikatorer, hold over dem for detaljert informasjon. Vennligst husk at disse indikatorene viser det verste utfallet.", "tooltipRadius": "Verktøytips/advarsler", + "upload_a_photo": "Last opp ett bilde", "user_settings": "Brukerinstillinger", "values": { "false": "nei", "true": "ja" + }, + "notifications": "Varsler", + "notification_setting": "Motta varsler i fra:", + "notification_setting_follows": "Brukere du følger", + "notification_setting_non_follows": "Brukere du ikke følger", + "notification_setting_followers": "Brukere som følger deg", + "notification_setting_non_followers": "Brukere som ikke følger deg", + "notification_mutes": "For å stoppe å motta varsler i fra en spesifikk bruker, kan du dempe dem.", + "notification_blocks": "Hvis du blokkerer en bruker vil det stoppe alle varsler og i tilleg få dem til å slutte å følge deg", + "enable_web_push_notifications": "Skru på pushnotifikasjoner i nettlesere", + "style": { + "switcher": { + "keep_color": "Behold farger", + "keep_shadows": "Behold skygger", + "keep_opacity": "Behold opasitet", + "keep_roundness": "Behold rundhet", + "keep_fonts": "Behold fonter", + "save_load_hint": "\"Behold\" alternativer beholder de instillingene som er satt når du velger eller laster inn temaer, det lagrer også disse alternativene når du eksporterer ett tema, Når alle sjekkboksene er tomme, vil alt bli lagret når du eksporterer ett tema.", + "reset": "Still in på nytt", + "clear_all": "Nullstill alt", + "clear_opacity": "Nullstill opasitet" + }, + "common": { + "color": "Farge", + "opacity": "Opasitet", + "contrast": { + "hint": "Kontrast forholdet er {ratio}, it {level} {context}", + "level": { + "aa": "møter Nivå AA retningslinje (minimal)", + "aaa": "møter Nivå AAA retningslinje (recommended)", + "bad": "møter ingen tilgjengeligshetsretningslinjer" + }, + "context": { + "18pt": "for stor (18pt+) tekst", + "text": "for tekst" + } + } + }, + "common_colors": { + "_tab_label": "Vanlig", + "main": "Vanlige farger", + "foreground_hint": "Se \"Avansert\" fanen for mer detaljert kontroll", + "rgbo": "Ikoner, aksenter, merker" + }, + "advanced_colors": { + "_tab_label": "Avansert", + "alert": "Varslingsbakgrunn", + "alert_error": "Feil", + "badge": "Merkebakgrunn", + "badge_notification": "Varsling", + "panel_header": "Panelhode", + "top_bar": "Topplinje", + "borders": "Kanter", + "buttons": "Knapper", + "inputs": "Tekstfelt", + "faint_text": "Svak tekst" + }, + "radii": { + "_tab_label": "Rundhet" + }, + "shadows": { + "_tab_label": "Skygger og belysning", + "component": "Komponent", + "override": "Overskriv", + "shadow_id": "Skygge #{value}", + "blur": "Uklarhet", + "spread": "Spredning", + "inset": "Insett", + "hint": "For skygger kan du sette --variable som en fargeveerdi for å bruke CSS3 variabler. Vær oppmerksom på at å sette opasitet da ikke vil fungere her.", + "filter_hint": { + "always_drop_shadow": "Advarsel, denne skyggen bruker alltid {0} når nettleseren støtter det.", + "drop_shadow_syntax": "{0} støtter ikke {1} parameter og {2} nøkkelord.", + "avatar_inset": "Vær oppmerksom på at å kombinere både insatte og uinsatte skygger på profilbilder kan gi uforventede resultater med gjennomsiktige profilbilder.", + "spread_zero": "Skygger med spredning > 0 vil fremstå som de var satt til 0", + "inset_classic": "Insette skygger vil bruke {0}" + }, + "components": { + "panel": "Panel", + "panelHeader": "Panelhode", + "topBar": "Topplinje", + "avatar": "Profilbilde (i profilvisning)", + "avatarStatus": "Profilbilde (i statusvisning)", + "popup": "Popups og tooltips", + "button": "Knapp", + "buttonHover": "Knapp (holdt)", + "buttonPressed": "Knapp (nedtrykt)", + "buttonPressedHover": "Knapp (nedtrykt+holdt)", + "input": "Tekstfelt" + } + }, + "fonts": { + "_tab_label": "Fonter", + "help": "Velg font til elementene i brukergrensesnittet. For \"egendefinert\" må du skrive inn det nøyaktige font-navnet som det fremstår på systemet", + "components": { + "interface": "Grensesnitt", + "input": "Tekstfelt", + "post": "Statustekst", + "postCode": "Monospaced tekst i en status (rik tekst)" + }, + "family": "Font naavn", + "size": "Størrelse (i piksler)", + "weight": "Vekt (dristighet)", + "custom": "Egendefinert" + }, + "preview": { + "header": "Forhåndsvisning", + "content": "Innhold", + "error": "Eksempel feil", + "button": "Knapp", + "text": "Mye mer {0} og {1}", + "mono": "innhold", + "input": "Landet akkurat i L.A.", + "faint_link": "hjelpfull brukerveiledning", + "fine_print": "Les vår {0} for å lære ingenting nyttig!", + "header_faint": "Dette er OK", + "checkbox": "Jeg har skumlest vilkår og betingelser", + "link": "en flott liten link" + } + }, + "version": { + "title": "Versjon", + "backend_version": "Backend Versjon", + "frontend_version": "Frontend Versjon" } }, + "time": { + "day": "{0} dag", + "days": "{0} dager", + "day_short": "{0}d", + "days_short": "{0}d", + "hour": "{0} time", + "hours": "{0} timer", + "hour_short": "{0}t", + "hours_short": "{0}t", + "in_future": "om {0}", + "in_past": "{0} siden", + "minute": "{0} minutt", + "minutes": "{0} minutter", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} måned", + "months": "{0} måneder", + "month_short": "{0}md.", + "months_short": "{0}md.", + "now": "akkurat nå", + "now_short": "nå", + "second": "{0} sekund", + "seconds": "{0} sekunder", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} uke", + "weeks": "{0} uker", + "week_short": "{0}u", + "weeks_short": "{0}u", + "year": "{0} år", + "years": "{0} år", + "year_short": "{0}år", + "years_short": "{0}år" + }, "timeline": { "collapse": "Sammenfold", "conversation": "Samtale", @@ -176,29 +495,116 @@ "no_retweet_hint": "Status er markert som bare til følgere eller direkte og kan ikke gjentas", "repeated": "gjentok", "show_new": "Vis nye", - "up_to_date": "Oppdatert" + "up_to_date": "Oppdatert", + "no_more_statuses": "Ingen flere statuser", + "no_statuses": "Ingen statuser" + }, + "status": { + "favorites": "Favoritter", + "repeats": "Gjentakelser", + "delete": "Slett status", + "pin": "Fremhev på profil", + "unpin": "Fjern fremhevelse", + "pinned": "Fremhevet", + "delete_confirm": "Har du virkelig lyst til å slette denne statusen?", + "reply_to": "Svar til", + "replies_list": "Svar:" }, "user_card": { "approve": "Godkjenn", "block": "Blokker", "blocked": "Blokkert!", "deny": "Avslå", + "favorites": "Favoritter", "follow": "Følg", + "follow_sent": "Forespørsel sendt!", + "follow_progress": "Forespør…", + "follow_again": "Gjenta forespørsel?", + "follow_unfollow": "Avfølg", "followees": "Følger", "followers": "Følgere", "following": "Følger!", "follows_you": "Følger deg!", + "its_you": "Det er deg!", + "media": "Media", "mute": "Demp", "muted": "Dempet", "per_day": "per dag", "remote_follow": "Følg eksternt", - "statuses": "Statuser" + "report": "Rapport", + "statuses": "Statuser", + "subscribe": "Abonner", + "unsubscribe": "Avabonner", + "unblock": "Fjern blokkering", + "unblock_progress": "Fjerner blokkering...", + "block_progress": "Blokkerer...", + "unmute": "Fjern demping", + "unmute_progress": "Fjerner demping...", + "mute_progress": "Demper...", + "admin_menu": { + "moderation": "Moderering", + "grant_admin": "Gi Administrator", + "revoke_admin": "Fjern Administrator", + "grant_moderator": "Gi Moderator", + "revoke_moderator": "Fjern Moderator", + "activate_account": "Aktiver konto", + "deactivate_account": "Deaktiver kontro", + "delete_account": "Slett konto", + "force_nsfw": "Merk alle statuser som sensitive", + "strip_media": "Fjern media i fra statuser", + "force_unlisted": "Tving statuser til å være uopplistet", + "sandbox": "Tving statuser til å bare vises til følgere", + "disable_remote_subscription": "Fjern mulighet til å følge brukeren fra andre instanser", + "disable_any_subscription": "Fjern mulighet til å følge brukeren", + "quarantine": "Gjør at statuser fra brukeren ikke kan sendes til andre instanser", + "delete_user": "Slett bruker", + "delete_user_confirmation": "Er du helt sikker? Denne handlingen kan ikke omgjøres." + } }, "user_profile": { - "timeline_title": "Bruker-tidslinje" + "timeline_title": "Bruker-tidslinje", + "profile_does_not_exist": "Beklager, denne profilen eksisterer ikke.", + "profile_loading_error": "Beklager, det oppsto en feil under lasting av denne profilen." + }, + "user_reporting": { + "title": "Rapporterer {0}", + "add_comment_description": "Rapporten blir sent til moderatorene av din instans. Du kan gi en forklaring på hvorfor du rapporterer denne kontoen under:", + "additional_comments": "Videre kommentarer", + "forward_description": "Denne kontoen er fra en annen server, vil du sende en kopi av rapporten til dem også?", + "forward_to": "Videresend til {0}", + "submit": "Send", + "generic_error": "Det oppsto en feil under behandling av din forespørsel." }, "who_to_follow": { "more": "Mer", - "who_to_follow": "Hvem å følge" + "who_to_follow": "Kontoer å følge" + }, + "tool_tip": { + "media_upload": "Last opp media", + "repeat": "Gjenta", + "reply": "Svar", + "favorite": "Lik", + "user_settings": "Brukerinnstillinger" + }, + "upload":{ + "error": { + "base": "Det oppsto en feil under opplastning.", + "file_too_big": "Fil for stor [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "Prøv igjen senere" + }, + "file_size_units": { + "B": "B", + "KiB": "KiB", + "MiB": "MiB", + "GiB": "GiB", + "TiB": "TiB" + } + }, + "search": { + "people": "Folk", + "hashtags": "Emneknagger", + "person_talking": "{count} person snakker om dette", + "people_talking": "{count} personer snakker om dette", + "no_results": "Ingen resultater" } } diff --git a/src/i18n/nl.json b/src/i18n/nl.json index 799e22b9..7e2f0604 100644 --- a/src/i18n/nl.json +++ b/src/i18n/nl.json @@ -57,7 +57,7 @@ "account_not_locked_warning_link": "gesloten", "attachments_sensitive": "Markeer bijlage als gevoelig", "content_type": { - "plain_text": "Gewone tekst" + "text/plain": "Gewone tekst" }, "content_warning": "Onderwerp (optioneel)", "default": "Tijd voor een pauze!", diff --git a/src/i18n/oc.json b/src/i18n/oc.json index fd5ccc97..680ad6dd 100644 --- a/src/i18n/oc.json +++ b/src/i18n/oc.json @@ -2,6 +2,10 @@ "chat": { "title": "Messatjariá" }, + "exporter": { + "export": "Exportar", + "processing": "Tractament, vos demandarem lèu de telecargar lo fichièr" + }, "features_panel": { "chat": "Chat", "gopher": "Gopher", @@ -20,12 +24,21 @@ "submit": "Mandar", "more": "Mai", "generic_error": "Una error s’es producha", - "optional": "opcional" + "optional": "opcional", + "show_more": "Mostrar mai", + "show_less": "Mostrar mens", + "cancel": "Anullar" }, "image_cropper": { - "crop_picture": "Talhar l’imatge", - "save": "Salvar", - "cancel": "Anullar" + "crop_picture": "Talhar l’imatge", + "save": "Salvar", + "save_without_cropping": "Salvar sens talhada", + "cancel": "Anullar" + }, + "importer": { + "submit": "Mandar", + "success": "Corrèctament importat.", + "error": "Una error s’es producha pendent l’importacion d’aqueste fichièr." }, "login": { "login": "Connexion", @@ -52,6 +65,7 @@ "timeline": "Flux d’actualitat", "twkn": "Lo malhum conegut", "user_search": "Cèrca d’utilizaires", + "search": "Cercar", "who_to_follow": "Qual seguir", "preferences": "Preferéncias" }, @@ -59,23 +73,49 @@ "broken_favorite": "Estatut desconegut, sèm a lo cercar...", "favorited_you": "a aimat vòstre estatut", "followed_you": "vos a seguit", - "load_older": "Cargar las notificaciones mai ancianas", + "load_older": "Cargar las notificacions mai ancianas", "notifications": "Notficacions", - "read": "Legit !", + "read": "Legit !", "repeated_you": "a repetit vòstre estatut", "no_more_notifications": "Pas mai de notificacions" }, + "polls": { + "add_poll": "Ajustar un sondatge", + "add_option": "Ajustar d’opcions", + "option": "Opcion", + "votes": "vòtes", + "vote": "Votar", + "type": "Tipe de sondatge", + "single_choice": "Causida unica", + "multiple_choices": "Causida multipla", + "expiry": "Durada del sondatge", + "expires_in": "Lo sondatge s’acabarà {0}", + "expired": "Sondatge acabat {0}", + "not_enough_options": "I a pas pro d’opcions" + }, + "stickers": { + "add_sticker": "Ajustar un pegasolet" + }, + "interactions": { + "favs_repeats": "Repeticions e favorits", + "follows": "Nòus seguidors", + "load_older": "Cargar d’interaccions anterioras" + }, "post_status": { "new_status": "Publicar d’estatuts novèls", - "account_not_locked_warning": "Vòstre compte es pas {0}. Qual que siá pòt vos seguir per veire vòstras publicacions destinadas pas qu'a vòstres seguidors.", + "account_not_locked_warning": "Vòstre compte es pas {0}. Qual que siá pòt vos seguir per veire vòstras publicacions destinadas pas qu’a vòstres seguidors.", "account_not_locked_warning_link": "clavat", "attachments_sensitive": "Marcar las pèças juntas coma sensiblas", "content_type": { - "plain_text": "Tèxte brut" + "text/plain": "Tèxte brut", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "Avís de contengut (opcional)", "default": "Escrivètz aquí vòstre estatut.", - "direct_warning": "Aquesta publicacion serà pas que visibla pels utilizaires mencionats.", + "direct_warning_to_all": "Aquesta publicacion serà pas que visibla pels utilizaires mencionats.", + "direct_warning_to_first_only": "Aquesta publicacion serà pas que visibla pels utilizaires mencionats a la debuta del messatge.", "posting": "Mandadís", "scope": { "direct": "Dirècte - Publicar pels utilizaires mencionats solament", @@ -105,6 +145,9 @@ "password_confirmation_match": "deu èsser lo meteis senhal" } }, + "selectable_list": { + "select_all": "O seleccionar tot" + }, "settings": { "app_name": "Nom de l’aplicacion", "attachmentRadius": "Pèças juntas", @@ -115,15 +158,20 @@ "avatarRadius": "Avatars", "background": "Rèire plan", "bio": "Biografia", + "block_export": "Exportar los blocatges", + "block_export_button": "Exportar los blocatges dins un fichièr csv", + "block_import": "Impòrt de blocatges", + "block_import_error": "Error en importar los blocatges", + "blocks_imported": "Blocatges importats ! Lo tractament tardarà un pauc.", "blocks_tab": "Blocatges", "btnRadius": "Botons", "cBlue": "Blau (Respondre, seguir)", - "cGreen": "Verd (Repartajar)", + "cGreen": "Verd (Repertir)", "cOrange": "Irange (Aimar)", "cRed": "Roge (Anullar)", "change_password": "Cambiar lo senhal", "change_password_error": "Una error s’es producha en cambiant lo senhal.", - "changed_password": "Senhal corrèctament cambiat !", + "changed_password": "Senhal corrèctament cambiat !", "collapse_subject": "Replegar las publicacions amb de subjèctes", "composing": "Escritura", "confirm_new_password": "Confirmatz lo nòu senhal", @@ -134,7 +182,7 @@ "default_vis": "Nivèl de visibilitat per defaut", "delete_account": "Suprimir lo compte", "delete_account_description": "Suprimir vòstre compte e los messatges per sempre.", - "delete_account_error": "Una error s’es producha en suprimir lo compte. S’aquò ten d’arribar mercés de contactar vòstre administrador d’instància.", + "delete_account_error": "Una error s’es producha en suprimir lo compte. S’aquò ten d’arribar mercés de contactar vòstre administrator d’instància.", "delete_account_instructions": "Picatz vòstre senhal dins lo camp tèxte çai-jos per confirmar la supression del compte.", "avatar_size_instruction": "La talha minimum recomandada pels imatges d’avatar es 150x150 pixèls.", "export_theme": "Enregistrar la preconfiguracion", @@ -142,7 +190,6 @@ "filtering_explanation": "Totes los estatuts amb aqueles mots seràn en silenci, un mot per linha", "follow_export": "Exportar los abonaments", "follow_export_button": "Exportar vòstres abonaments dins un fichièr csv", - "follow_export_processing": "Tractament, vos demandarem lèu de telecargar lo fichièr", "follow_import": "Importar los abonaments", "follow_import_error": "Error en important los seguidors", "follows_imported": "Seguidors importats. Lo tractament pòt trigar una estona.", @@ -150,18 +197,19 @@ "general": "General", "hide_attachments_in_convo": "Rescondre las pèças juntas dins las conversacions", "hide_attachments_in_tl": "Rescondre las pèças juntas", + "hide_muted_posts": "Rescondre las publicacions del monde rescondut", "max_thumbnails": "Nombre maximum de vinhetas per publicacion", "hide_isp": "Amagar lo panèl especial instància", "preload_images": "Precargar los imatges", "use_one_click_nsfw": "Dobrir las pèças juntas NSFW amb un clic", - "hide_post_stats": "Amagar los estatistics de publicacion (ex. lo ombre de favorits)", + "hide_post_stats": "Amagar las estatisticas de publicacion (ex. lo nombre de favorits)", "hide_user_stats": "Amagar las estatisticas de l’utilizaire (ex. lo nombre de seguidors)", "hide_filtered_statuses": "Amagar los estatuts filtrats", "import_followers_from_a_csv_file": "Importar los seguidors d’un fichièr csv", "import_theme": "Cargar un tèma", "inputRadius": "Camps tèxte", "checkboxRadius": "Casas de marcar", - "instance_default": "(defaut : {value})", + "instance_default": "(defaut : {value})", "instance_default_simple": "(defaut)", "interface": "Interfàcia", "interfaceLanguage": "Lenga de l’interfàcia", @@ -172,7 +220,8 @@ "loop_video": "Bocla vidèo", "loop_video_silent_only": "Legir en bocla solament las vidèos sens son (coma los « Gifs » de Mastodon)", "mutes_tab": "Agamats", - "play_videos_in_modal": "Legir las vidèoas dirèctament dins la visualizaira mèdia", + "interactions_tab": "Interaccions", + "play_videos_in_modal": "Legir las vidèos dirèctament dins la visualizaira mèdia", "use_contain_fit": "Talhar pas las pèças juntas per las vinhetas", "name": "Nom", "name_bio": "Nom & Bio", @@ -209,8 +258,11 @@ "reply_visibility_self": "Mostrar pas que las responsas que me son destinadas", "saving_err": "Error en enregistrant los paramètres", "saving_ok": "Paramètres enregistrats", - "scope_copy": "Copiar lo nivèl de confidencialitat per las responsas (Totjorn aissí pels Messatges Dirèctes)", + "search_user_to_block": "Cercatz qual volètz blocar", + "search_user_to_mute": "Cercatz qual volètz rescondre", "security_tab": "Seguretat", + "scope_copy": "Copiar lo nivèl de confidencialitat per las responsas (Totjorn aissí pels Messatges Dirèctes)", + "minimal_scopes_mode": "Minimizar lo nombre d’opcions per publicacion", "set_new_avatar": "Definir un nòu avatar", "set_new_profile_background": "Definir un nòu fons de perfil", "set_new_profile_banner": "Definir una nòva bandièra de perfil", @@ -220,12 +272,12 @@ "subject_line_email": "Coma los corrièls : \"re: subjècte\"", "subject_line_mastodon": "Coma mastodon : copiar tal coma es", "subject_line_noop": "Copiar pas", -"post_status_content_type": "Publicar lo tipe de contengut dels estatuts", + "post_status_content_type": "Publicar lo tipe de contengut dels estatuts", "stop_gifs": "Lançar los GIFs al subrevòl", "streaming": "Activar lo cargament automatic dels novèls estatus en anar amont", - "text": "Tèxt", + "text": "Tèxte", "theme": "Tèma", - "theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.", + "theme_help_v2_1": "Podètz tanben remplaçar la color d’unes compausants en clicant la case, utilizatz lo boton \"O escafar tot\" per escafar totes las subrecargadas.", "theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.", "theme_help": "Emplegatz los còdis de color hex (#rrggbb) per personalizar vòstre tèma de color.", "tooltipRadius": "Astúcias/alèrtas", @@ -234,26 +286,187 @@ "values": { "false": "non", "true": "òc" + }, + "notifications": "Notificacions", + "notification_setting": "Recebre las notificacions de :", + "notification_setting_follows": "Utilizaires que seguissètz", + "notification_setting_non_follows": "Utilizaires que seguissètz pas", + "notification_setting_followers": "Utilizaires que vos seguisson", + "notification_setting_non_followers": "Utilizaires que vos seguisson pas", + "notification_mutes": "Per recebre pas mai d’un utilizaire en particular, botatz-lo en silenci.", + "notification_blocks": "Blocar un utilizaire arrèsta totas las notificacions tan coma quitar de los seguir.", + "enable_web_push_notifications": "Activar las notificacions web push", + "style": { + "switcher": { + "keep_color": "Gardar las colors", + "keep_shadows": "Gardar las ombras", + "keep_opacity": "Gardar l’opacitat", + "keep_roundness": "Gardar la redondetat", + "keep_fonts": "Gardar las polissas", + "save_load_hint": "Las opcions « Gardar » permeton de servar las opcions configuradas actualament quand seleccionatz o cargatz un tèma, permeton tanben d’enregistrar aquelas opcions quand exportatz un tèma. Quand totas las casas son pas marcadas, l’exportacion de tèma o enregistrarà tot.", + "reset": "Restablir", + "clear_all": "O escafar tot", + "clear_opacity": "Escafar l’opacitat" + }, + "common": { + "color": "Color", + "opacity": "Opacitat", + "contrast": { + "hint": "Lo coeficient de contraste es de {ratio}. Dòna {level} {context}", + "level": { + "aa": "un nivèl AA minimum recomandat", + "aaa": "un nivèl AAA recomandat", + "bad": "pas un nivèl d’accessibilitat recomandat" + }, + "context": { + "18pt": "pel tèxte grand (18pt+)", + "text": "pel tèxte" + } + } + }, + "common_colors": { + "_tab_label": "Comun", + "main": "Colors comunas", + "foreground_hint": "Vejatz « Avançat » per mai de paramètres detalhats", + "rgbo": "Icònas, accents, badges" + }, + "advanced_colors": { + "_tab_label": "Avançat", + "alert": "Rèire plan d’alèrtas", + "alert_error": "Error", + "badge": "Rèire plan dels badges", + "badge_notification": "Notificacion", + "panel_header": "Bandièra del tablèu de bòrd", + "top_bar": "Barra amont", + "borders": "Caires", + "buttons": "Botons", + "inputs": "Camps tèxte", + "faint_text": "Tèxte descolorit" + }, + "radii": { + "_tab_label": "Redondetat" + }, + "shadows": { + "_tab_label": "Ombra e luminositat", + "component": "Compausant", + "override": "Subrecargar", + "shadow_id": "Ombra #{value}", + "blur": "Fosc", + "spread": "Espandiment", + "inset": "Incrustacion", + "hint": "Per las ombras podètz tanben utilizar --variable coma valor de color per emplegar una variable CSS3. Notatz que lo paramètre d’opacitat foncionarà pas dins aquel cas.", + "filter_hint": { + "always_drop_shadow": "Avertiment, aquel ombra utiliza totjorn {0} quand lo navigator es compatible.", + "drop_shadow_syntax": "{0} es pas compatible amb lo paramètre {1} e lo mot clau {2}.", + "avatar_inset": "Notatz que combinar d’ombras incrustadas e pas incrustadas pòt donar de resultats inesperats amb los avatars transparents.", + "spread_zero": "L’ombra amb un espandiment de > 0 apareisserà coma reglat a zèro", + "inset_classic": "L’ombra d’incrustacion utilizarà {0}" + }, + "components": { + "panel": "Tablèu", + "panelHeader": "Bandièra del tablèu", + "topBar": "Barra amont", + "avatar": "Utilizar l’avatar (vista perfil)", + "avatarStatus": "Avatar de l’utilizaire (afichatge publicacion)", + "popup": "Fenèstras sorgissentas e astúcias", + "button": "Boton", + "buttonHover": "Boton (en passar la mirga)", + "buttonPressed": "Boton (en quichar)", + "buttonPressedHover": "Boton (en quichar e passar)", + "input": "Camp tèxte" + } + }, + "fonts": { + "_tab_label": "Polissas", + "help": "Selecionatz la polissa d’utilizar pels elements de l’UI. Per « Personalizada » vos cal picar lo nom exacte tal coma apareis sul sistèma.", + "components": { + "interface": "Interfàcia", + "input": "Camps tèxte", + "post": "Tèxte de publicacion", + "postCode": "Tèxte Monospaced dins las publicacion (tèxte formatat)" + }, + "family": "Nom de la polissa", + "size": "Talha (en px)", + "weight": "Largor (gras)", + "custom": "Personalizada" + }, + "preview": { + "header": "Apercebut", + "content": "Contengut", + "error": "Error d’exemple", + "button": "Boton", + "text": "A tròç de mai de {0} e {1}", + "mono": "contengut", + "input": "arribada al país.", + "faint_link": "manual d’ajuda", + "fine_print": "Legissètz nòstre {0} per legir pas res d’util !", + "header_faint": "Va plan", + "checkbox": "Ai legit los tèrmes e condicions d’utilizacion", + "link": "un pichon ligam simpatic" + } + }, + "version": { + "title": "Version", + "backend_version": "Version Backend", + "frontend_version": "Version Frontend" } }, + "time": { + "day": "{0} jorn", + "days": "{0} jorns", + "day_short": "{0} jorn", + "days_short": "{0} jorns", + "hour": "{0} ora", + "hours": "{0} oras", + "hour_short": "{0}h", + "hours_short": "{0}h", + "in_future": "d’aquí {0}", + "in_past": "fa {0}", + "minute": "{0} minuta", + "minutes": "{0} minutas", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} mes", + "months": "{0} meses", + "month_short": "{0} mes", + "months_short": "{0} meses", + "now": "ara meteis", + "now_short": "ara meteis", + "second": "{0} segonda", + "seconds": "{0} segondas", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} setmana.", + "weeks": "{0} setmanas.", + "week_short": "{0} setm.", + "weeks_short": "{0} setm.", + "year": "{0} an", + "years": "{0} ans", + "year_short": "{0} an", + "years_short": "{0} ans" + }, "timeline": { "collapse": "Tampar", "conversation": "Conversacion", "error_fetching": "Error en cercant de mesas a jorn", "load_older": "Ne veire mai", + "no_retweet_hint": "Las publicacions marcadas pels seguidors solament o dirèctas se pòdon pas repetir", "repeated": "repetit", "show_new": "Ne veire mai", "up_to_date": "A jorn", - "no_retweet_hint": "La publicacion marcada coma pels seguidors solament o dirècte pòt pas èsser repetida" + "no_more_statuses": "Pas mai d’estatuts", + "no_statuses": "Cap d’estatuts" }, "status": { - "reply_to": "Respondre à", + "favorites": "Li a agradat", + "repeats": "A repetit", + "reply_to": "Respond a", "replies_list": "Responsas :" }, "user_card": { "approve": "Validar", "block": "Blocar", - "blocked": "Blocat !", + "blocked": "Blocat !", "deny": "Refusar", "favorites": "Favorits", "follow": "Seguir", @@ -263,8 +476,8 @@ "follow_unfollow": "Quitar de seguir", "followees": "Abonaments", "followers": "Seguidors", - "following": "Seguit !", - "follows_you": "Vos sèc !", + "following": "Seguit !", + "follows_you": "Vos sèc !", "its_you": "Sètz vos !", "media": "Mèdia", "mute": "Amagar", @@ -272,12 +485,33 @@ "per_day": "per jorn", "remote_follow": "Seguir a distància", "statuses": "Estatuts", + "subscribe": "S’abonar", + "unsubscribe": "Se desabonar", "unblock": "Desblocar", "unblock_progress": "Desblocatge...", "block_progress": "Blocatge...", "unmute": "Tornar mostrar", "unmute_progress": "Afichatge...", - "mute_progress": "A amagar..." + "mute_progress": "A amagar...", + "admin_menu": { + "moderation": "Moderacion", + "grant_admin": "Passar Admin", + "revoke_admin": "Revocar Admin", + "grant_moderator": "Passar Moderator", + "revoke_moderator": "Revocar Moderator", + "activate_account": "Activar lo compte", + "deactivate_account": "Desactivar lo compte", + "delete_account": "Suprimir lo compte", + "force_nsfw": "Marcar totas las publicacions coma sensiblas", + "strip_media": "Tirar los mèdias de las publicacions", + "force_unlisted": "Forçar las publicacions en pas-listadas", + "sandbox": "Forçar las publicacions en seguidors solament", + "disable_remote_subscription": "Desactivar lo seguiment d’utilizaire d’instàncias alonhadas", + "disable_any_subscription": "Desactivar tot seguiment", + "quarantine": "Defendre la federacion de las publicacions de l’utilizaire", + "delete_user": "Suprimir l’utilizaire", + "delete_user_confirmation": "Volètz vertadièrament far aquò ? Aquesta accion se pòt pas anullar." + } }, "user_profile": { "timeline_title": "Flux utilizaire", @@ -308,5 +542,12 @@ "GiB": "Gio", "TiB": "Tio" } + }, + "search": { + "people": "Gent", + "hashtags": "Etiquetas", + "person_talking": "{count} persona ne parla", + "people_talking": "{count} personas ne parlan", + "no_results": "Cap de resultats" } }
\ No newline at end of file diff --git a/src/i18n/pl.json b/src/i18n/pl.json index 2e1d7488..51cadfb6 100644 --- a/src/i18n/pl.json +++ b/src/i18n/pl.json @@ -2,48 +2,115 @@ "chat": { "title": "Czat" }, + "features_panel": { + "chat": "Czat", + "gopher": "Gopher", + "media_proxy": "Proxy mediów", + "scope_options": "Ustawienia zakresu", + "text_limit": "Limit tekstu", + "title": "Funkcje", + "who_to_follow": "Propozycje obserwacji" + }, "finder": { "error_fetching_user": "Błąd przy pobieraniu profilu", "find_user": "Znajdź użytkownika" }, "general": { "apply": "Zastosuj", - "submit": "Wyślij" + "submit": "Wyślij", + "more": "Więcej", + "generic_error": "Wystąpił błąd", + "optional": "nieobowiązkowe" + }, + "image_cropper": { + "crop_picture": "Przytnij obrazek", + "save": "Zapisz", + "save_without_cropping": "Zapisz bez przycinania", + "cancel": "Anuluj" }, "login": { "login": "Zaloguj", + "description": "Zaloguj używając OAuth", "logout": "Wyloguj", "password": "Hasło", "placeholder": "n.p. lain", "register": "Zarejestruj", - "username": "Użytkownik" + "username": "Użytkownik", + "hint": "Zaloguj się, aby dołączyć do dyskusji" + }, + "media_modal": { + "previous": "Poprzednie", + "next": "Następne" }, "nav": { + "about": "O nas", + "back": "Wróć", "chat": "Lokalny czat", + "friend_requests": "Prośby o możliwość obserwacji", "mentions": "Wzmianki", + "dms": "Wiadomości prywatne", "public_tl": "Publiczna oś czasu", "timeline": "Oś czasu", - "twkn": "Cała znana sieć" + "twkn": "Cała znana sieć", + "user_search": "Wyszukiwanie użytkowników", + "who_to_follow": "Sugestie obserwacji", + "preferences": "Preferencje" }, "notifications": { - "favorited_you": "dodał twój status do ulubionych", + "broken_favorite": "Nieznany status, szukam go…", + "favorited_you": "dodał(-a) twój status do ulubionych", "followed_you": "obserwuje cię", + "load_older": "Załaduj starsze powiadomienia", "notifications": "Powiadomienia", "read": "Przeczytane!", - "repeated_you": "powtórzył twój status" + "repeated_you": "powtórzył(-a) twój status", + "no_more_notifications": "Nie masz więcej powiadomień" }, "post_status": { + "new_status": "Dodaj nowy status", + "account_not_locked_warning": "Twoje konto nie jest {0}. Każdy może cię zaobserwować aby zobaczyć wpisy tylko dla obserwujących.", + "account_not_locked_warning_link": "zablokowane", + "attachments_sensitive": "Oznacz załączniki jako wrażliwe", + "content_type": { + "text/plain": "Czysty tekst", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" + }, + "content_warning": "Temat (nieobowiązkowy)", "default": "Właśnie wróciłem z kościoła", - "posting": "Wysyłanie" + "direct_warning": "Ten wpis zobaczą tylko osoby, o których wspomniałeś(-aś).", + "posting": "Wysyłanie", + "scope": { + "direct": "Bezpośredni – Tylko dla wspomnianych użytkowników", + "private": "Tylko dla obserwujących – Umieść dla osób, które cię obserwują", + "public": "Publiczny – Umieść na publicznych osiach czasu", + "unlisted": "Niewidoczny – Nie umieszczaj na publicznych osiach czasu" + } }, "registration": { "bio": "Bio", - "email": "Email", + "email": "E-mail", "fullname": "Wyświetlana nazwa profilu", "password_confirm": "Potwierdzenie hasła", - "registration": "Rejestracja" + "registration": "Rejestracja", + "token": "Token zaproszenia", + "captcha": "CAPTCHA", + "new_captcha": "Naciśnij na obrazek, aby dostać nowy kod captcha", + "username_placeholder": "np. lain", + "fullname_placeholder": "np. Lain Iwakura", + "bio_placeholder": "e.g.\nCześć, jestem Lain.\nJestem dziewczynką z anime żyjącą na peryferiach Japonii. Możesz znać mnie z Wired.", + "validations": { + "username_required": "nie może być pusta", + "fullname_required": "nie może być pusta", + "email_required": "nie może być pusty", + "password_required": "nie może być puste", + "password_confirmation_required": "nie może być puste", + "password_confirmation_match": "musi być takie jak hasło" + } }, "settings": { + "app_name": "Nazwa aplikacji", "attachmentRadius": "Załączniki", "attachments": "Załączniki", "autoload": "Włącz automatyczne ładowanie po przewinięciu do końca strony", @@ -52,6 +119,7 @@ "avatarRadius": "Awatary", "background": "Tło", "bio": "Bio", + "blocks_tab": "Bloki", "btnRadius": "Przyciski", "cBlue": "Niebieski (odpowiedz, obserwuj)", "cGreen": "Zielony (powtórzenia)", @@ -59,15 +127,21 @@ "cRed": "Czerwony (anuluj)", "change_password": "Zmień hasło", "change_password_error": "Podczas zmiany hasła wystąpił problem.", - "changed_password": "Hasło zmienione poprawnie!", + "changed_password": "Pomyślnie zmieniono hasło!", + "collapse_subject": "Zwijaj posty z tematami", + "composing": "Pisanie", "confirm_new_password": "Potwierdź nowe hasło", "current_avatar": "Twój obecny awatar", "current_password": "Obecne hasło", "current_profile_banner": "Twój obecny banner profilu", + "data_import_export_tab": "Import/eksport danych", + "default_vis": "Domyślny zakres widoczności", "delete_account": "Usuń konto", "delete_account_description": "Trwale usuń konto i wszystkie posty.", "delete_account_error": "Wystąpił problem z usuwaniem twojego konta. Jeżeli problem powtarza się, poinformuj administratora swojej instancji.", "delete_account_instructions": "Wprowadź swoje hasło w poniższe pole aby potwierdzić usunięcie konta.", + "avatar_size_instruction": "Zalecany minimalny rozmiar awatarów to 150x150 pikseli.", + "export_theme": "Zapisz motyw", "filtering": "Filtrowanie", "filtering_explanation": "Wszystkie statusy zawierające te słowa będą wyciszone. Jedno słowo na linijkę.", "follow_export": "Eksport obserwowanych", @@ -77,14 +151,49 @@ "follow_import_error": "Błąd przy importowaniu obserwowanych", "follows_imported": "Obserwowani zaimportowani! Przetwarzanie może trochę potrwać.", "foreground": "Pierwszy plan", - "hide_attachments_in_convo": "Ukryj załączniki w rozmowach", - "hide_attachments_in_tl": "Ukryj załączniki w osi czasu", + "general": "Ogólne", + "hide_attachments_in_convo": "Ukrywaj załączniki w rozmowach", + "hide_attachments_in_tl": "Ukrywaj załączniki w osi czasu", + "hide_muted_posts": "Ukrywaj wpisy wyciszonych użytkowników", + "max_thumbnails": "Maksymalna liczba miniatur w poście", + "hide_isp": "Ukryj panel informacji o instancji", + "preload_images": "Ładuj wstępnie obrazy", + "use_one_click_nsfw": "Otwieraj załączniki NSFW jednym kliknięciem", + "hide_post_stats": "Ukrywaj statysyki postów (np. liczbę polubień)", + "hide_user_stats": "Ukrywaj statysyki użytkowników (np. liczbę obserwujących)", + "hide_filtered_statuses": "Ukrywaj filtrowane statusy", "import_followers_from_a_csv_file": "Importuj obserwowanych z pliku CSV", + "import_theme": "Załaduj motyw", "inputRadius": "Pola tekstowe", + "checkboxRadius": "Pola wyboru", + "instance_default": "(domyślny: {value})", + "instance_default_simple": "(domyślny)", + "interface": "Interfejs", + "interfaceLanguage": "Język interfejsu", + "invalid_theme_imported": "Wybrany plik nie jest obsługiwanym motywem Pleromy. Nie dokonano zmian w twoim motywie.", + "limited_availability": "Niedostępne w twojej przeglądarce", "links": "Łącza", + "lock_account_description": "Ogranicz swoje konto dla zatwierdzonych obserwowanych", + "loop_video": "Zapętlaj filmy", + "loop_video_silent_only": "Zapętlaj tylko filmy bez dźwięku (np. mastodonowe „gify”)", + "mutes_tab": "Wyciszenia", + "play_videos_in_modal": "Odtwarzaj filmy bezpośrednio w przeglądarce mediów", + "use_contain_fit": "Nie przycinaj załączników na miniaturach", "name": "Imię", "name_bio": "Imię i bio", "new_password": "Nowe hasło", + "notification_visibility": "Rodzaje powiadomień do wyświetlania", + "notification_visibility_follows": "Obserwacje", + "notification_visibility_likes": "Ulubione", + "notification_visibility_mentions": "Wzmianki", + "notification_visibility_repeats": "Powtórzenia", + "no_rich_text_description": "Usuwaj formatowanie ze wszystkich postów", + "no_blocks": "Bez blokad", + "no_mutes": "Bez wyciszeń", + "hide_follows_description": "Nie pokazuj kogo obserwuję", + "hide_followers_description": "Nie pokazuj kto mnie obserwuje", + "show_admin_badge": "Pokazuj odznakę Administrator na moim profilu", + "show_moderator_badge": "Pokazuj odznakę Moderator na moim profilu", "nsfw_clickthrough": "Włącz domyślne ukrywanie załączników o treści nieprzyzwoitej (NSFW)", "oauth_tokens": "Tokeny OAuth", "token": "Token", @@ -92,47 +201,235 @@ "valid_until": "Ważne do", "revoke_token": "Odwołać", "panelRadius": "Panele", + "pause_on_unfocused": "Wstrzymuj strumieniowanie kiedy karta nie jest aktywna", "presets": "Gotowe motywy", "profile_background": "Tło profilu", "profile_banner": "Banner profilu", + "profile_tab": "Profil", "radii_help": "Ustaw zaokrąglenie krawędzi interfejsu (w pikselach)", + "replies_in_timeline": "Odpowiedzi na osi czasu", "reply_link_preview": "Włącz dymek z podglądem postu po najechaniu na znak odpowiedzi", + "reply_visibility_all": "Pokazuj wszystkie odpowiedzi", + "reply_visibility_following": "Pokazuj tylko odpowiedzi skierowane do mnie i osób które obserwuję", + "reply_visibility_self": "Pokazuj tylko odpowiedzi skierowane do mnie", + "saving_err": "Nie udało się zapisać ustawień", + "saving_ok": "Zapisano ustawienia", + "security_tab": "Bezpieczeństwo", + "scope_copy": "Kopiuj zakres podczas odpowiadania (DM-y zawsze są kopiowane)", "set_new_avatar": "Ustaw nowy awatar", "set_new_profile_background": "Ustaw nowe tło profilu", "set_new_profile_banner": "Ustaw nowy banner profilu", "settings": "Ustawienia", + "subject_input_always_show": "Zawsze pokazuj pole tematu", + "subject_line_behavior": "Kopiuj temat podczas odpowiedzi", + "subject_line_email": "Jak w mailach – „re: temat”", + "subject_line_mastodon": "Jak na Mastodonie – po prostu kopiuj", + "subject_line_noop": "Nie kopiuj", + "post_status_content_type": "Post status content type", "stop_gifs": "Odtwarzaj GIFy po najechaniu kursorem", - "streaming": "Włącz automatycznie strumieniowanie nowych postów gdy na początku strony", + "streaming": "Włącz automatycznie strumieniowanie nowych postów gdy jesteś na początku strony", "text": "Tekst", "theme": "Motyw", "theme_help": "Użyj kolorów w notacji szesnastkowej (#rrggbb), by stworzyć swój motyw.", + "theme_help_v2_1": "Możesz też zastąpić kolory i widoczność poszczególnych komponentów przełączając pola wyboru, użyj „Wyczyść wszystko” aby usunąć wszystkie zastąpienia.", + "theme_help_v2_2": "Ikony pod niektórych wpisami są wskaźnikami kontrastu pomiędzy tłem a tekstem, po najechaniu na nie otrzymasz szczegółowe informacje. Zapamiętaj, że jeżeli używasz przezroczystości, wskaźniki pokazują najgorszy możliwy przypadek.", "tooltipRadius": "Etykiety/alerty", - "user_settings": "Ustawienia użytkownika" + "upload_a_photo": "Wyślij zdjęcie", + "user_settings": "Ustawienia użytkownika", + "values": { + "false": "nie", + "true": "tak" + }, + "notifications": "Powiadomienia", + "enable_web_push_notifications": "Włącz powiadomienia push", + "style": { + "switcher": { + "keep_color": "Zachowaj kolory", + "keep_shadows": "Zachowaj cienie", + "keep_opacity": "Zachowaj widoczność", + "keep_roundness": "Zachowaj zaokrąglenie", + "keep_fonts": "Zachowaj czcionki", + "save_load_hint": "Opcje „zachowaj” pozwalają na pozostanie przy obecnych opcjach po wybraniu lub załadowaniu motywu, jak i przechowywanie ich podczas eksportowania motywu. Jeżeli wszystkie są odznaczone, eksportowanie motywu spowoduje zapisanie wszystkiego.", + "reset": "Wyzeruj", + "clear_all": "Wyczyść wszystko", + "clear_opacity": "Wyczyść widoczność" + }, + "common": { + "color": "Kolor", + "opacity": "Widoczność", + "contrast": { + "hint": "Współczynnik kontrastu wynosi {ratio}, {level} {context}", + "level": { + "aa": "spełnia wymogi poziomu AA (minimalne)", + "aaa": "spełnia wymogi poziomu AAA (zalecane)", + "bad": "nie spełnia żadnych wymogów dostępności" + }, + "context": { + "18pt": "dla dużego tekstu (18pt+)", + "text": "dla tekstu" + } + } + }, + "common_colors": { + "_tab_label": "Ogólne", + "main": "Ogólne kolory", + "foreground_hint": "Zajrzyj do karty „Zaawansowane”, aby uzyskać dokładniejszą kontrolę", + "rgbo": "Ikony, wyróżnienia, odznaki" + }, + "advanced_colors": { + "_tab_label": "Zaawansowane", + "alert": "Tło alertu", + "alert_error": "Błąd", + "badge": "Tło odznaki", + "badge_notification": "Powiadomienie", + "panel_header": "Nagłówek panelu", + "top_bar": "Górny pasek", + "borders": "Granice", + "buttons": "Przyciski", + "inputs": "Pola wejścia", + "faint_text": "Zanikający tekst" + }, + "radii": { + "_tab_label": "Zaokrąglenie" + }, + "shadows": { + "_tab_label": "Cień i podświetlenie", + "component": "Komponent", + "override": "Zastąp", + "shadow_id": "Cień #{value}", + "blur": "Rozmycie", + "spread": "Szerokość", + "inset": "Inset", + "hint": "Możesz też używać --zmiennych jako kolorów, aby wykorzystać zmienne CSS3. Pamiętaj, że ustawienie widoczności nie będzie wtedy działać.", + "filter_hint": { + "always_drop_shadow": "Ostrzeżenie, ten cień zawsze używa {0} jeżeli to obsługiwane przez przeglądarkę.", + "drop_shadow_syntax": "{0} nie obsługuje parametru {1} i słowa kluczowego {2}.", + "avatar_inset": "Pamiętaj że użycie jednocześnie cieni inset i nie inset na awatarach może daćnieoczekiwane wyniki z przezroczystymi awatarami.", + "spread_zero": "Cienie o ujemnej szerokości będą widoczne tak, jakby wynosiła ona zero", + "inset_classic": "Cienie inset będą używały {0}" + }, + "components": { + "panel": "Panel", + "panelHeader": "Nagłówek panelu", + "topBar": "Górny pasek", + "avatar": "Awatar użytkownika (w widoku profilu)", + "avatarStatus": "Awatar użytkownika (w widoku wpisu)", + "popup": "Wyskakujące okna i podpowiedzi", + "button": "Przycisk", + "buttonHover": "Przycisk (po najechaniu)", + "buttonPressed": "Przycisk (naciśnięty)", + "buttonPressedHover": "Przycisk(naciśnięty+najechany)", + "input": "Pole wejścia" + } + }, + "fonts": { + "_tab_label": "Czcionki", + "help": "Wybierz czcionkę używaną przez elementy UI. Jeżeli wybierzesz niestandardową, musisz wpisać dokładnie tę nazwę, pod którą pojawia się w systemie.", + "components": { + "interface": "Interfejs", + "input": "Pola wejścia", + "post": "Tekst postu", + "postCode": "Tekst o stałej szerokości znaków w sformatowanym poście" + }, + "family": "Nazwa czcionki", + "size": "Rozmiar (w pikselach)", + "weight": "Grubość", + "custom": "Niestandardowa" + }, + "preview": { + "header": "Podgląd", + "content": "Zawartość", + "error": "Przykładowy błąd", + "button": "Przycisk", + "text": "Trochę więcej {0} i {1}", + "mono": "treści", + "input": "Właśnie wróciłem z kościoła", + "faint_link": "pomocny podręcznik", + "fine_print": "Przeczytaj nasz {0}, aby nie nauczyć się niczego przydatnego!", + "header_faint": "W porządku", + "checkbox": "Przeleciałem przez zasady użytkowania", + "link": "i fajny mały odnośnik" + } + }, + "version": { + "title": "Wersja", + "backend_version": "Wersja back-endu", + "frontend_version": "Wersja front-endu" + } }, "timeline": { "collapse": "Zwiń", "conversation": "Rozmowa", "error_fetching": "Błąd pobierania", "load_older": "Załaduj starsze statusy", - "repeated": "powtórzono", + "no_retweet_hint": "Wpis oznaczony jako tylko dla obserwujących lub bezpośredni nie może zostać powtórzony", + "repeated": "powtórzył(-a)", "show_new": "Pokaż nowe", - "up_to_date": "Na bieżąco" + "up_to_date": "Na bieżąco", + "no_more_statuses": "Brak kolejnych statusów", + "no_statuses": "Brak statusów" + }, + "status": { + "reply_to": "Odpowiedź dla", + "replies_list": "Odpowiedzi:" }, "user_card": { + "approve": "Przyjmij", "block": "Zablokuj", "blocked": "Zablokowany!", + "deny": "Odrzuć", + "favorites": "Ulubione", "follow": "Obserwuj", + "follow_sent": "Wysłano prośbę!", + "follow_progress": "Wysyłam prośbę…", + "follow_again": "Wysłać prośbę ponownie?", + "follow_unfollow": "Przestań obserwować", "followees": "Obserwowani", "followers": "Obserwujący", "following": "Obserwowany!", "follows_you": "Obserwuje cię!", + "its_you": "To ty!", + "media": "Media", "mute": "Wycisz", - "muted": "Wyciszony", + "muted": "Wyciszony(-a)", "per_day": "dziennie", "remote_follow": "Zdalna obserwacja", - "statuses": "Statusy" + "statuses": "Statusy", + "unblock": "Odblokuj", + "unblock_progress": "Odblokowuję…", + "block_progress": "Blokuję…", + "unmute": "Cofnij wyciszenie", + "unmute_progress": "Cofam wyciszenie…", + "mute_progress": "Wyciszam…" }, "user_profile": { - "timeline_title": "Oś czasu użytkownika" + "timeline_title": "Oś czasu użytkownika", + "profile_does_not_exist": "Przepraszamy, ten profil nie istnieje.", + "profile_loading_error": "Przepraszamy, wystąpił błąd podczas ładowania tego profilu." + }, + "who_to_follow": { + "more": "Więcej", + "who_to_follow": "Propozycje obserwacji" + }, + "tool_tip": { + "media_upload": "Wyślij media", + "repeat": "Powtórz", + "reply": "Odpowiedz", + "favorite": "Dodaj do ulubionych", + "user_settings": "Ustawienia użytkownika" + }, + "upload":{ + "error": { + "base": "Wysyłanie nie powiodło się.", + "file_too_big": "Zbyt duży plik [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "Spróbuj ponownie później" + }, + "file_size_units": { + "B": "B", + "KiB": "KiB", + "MiB": "MiB", + "GiB": "GiB", + "TiB": "TiB" + } } } diff --git a/src/i18n/pt.json b/src/i18n/pt.json index cbc2c9a3..41a34483 100644 --- a/src/i18n/pt.json +++ b/src/i18n/pt.json @@ -51,7 +51,7 @@ "public_tl": "Linha do tempo pública", "timeline": "Linha do tempo", "twkn": "Toda a rede conhecida", - "user_search": "Busca de usuário", + "user_search": "Buscar usuários", "who_to_follow": "Quem seguir", "preferences": "Preferências" }, @@ -67,11 +67,11 @@ }, "post_status": { "new_status": "Postar novo status", - "account_not_locked_warning": "Sua conta não está {0}. Qualquer pessoa pode te seguir para ver seus posts restritos.", - "account_not_locked_warning_link": "fechada", + "account_not_locked_warning": "Sua conta não é {0}. Qualquer pessoa pode te seguir e ver seus posts privados (só para seguidores).", + "account_not_locked_warning_link": "restrita", "attachments_sensitive": "Marcar anexos como sensíveis", "content_type": { - "plain_text": "Texto puro" + "text/plain": "Texto puro" }, "content_warning": "Assunto (opcional)", "default": "Acabei de chegar no Rio!", @@ -115,7 +115,7 @@ "avatarRadius": "Avatares", "background": "Pano de Fundo", "bio": "Biografia", - "blocks_tab": "Blocos", + "blocks_tab": "Bloqueios", "btnRadius": "Botões", "cBlue": "Azul (Responder, seguir)", "cGreen": "Verde (Repetir)", @@ -125,7 +125,7 @@ "change_password_error": "Houve um erro ao modificar sua senha.", "changed_password": "Senha modificada com sucesso!", "collapse_subject": "Esconder posts com assunto", - "composing": "Escrevendo", + "composing": "Escrita", "confirm_new_password": "Confirmar nova senha", "current_avatar": "Seu avatar atual", "current_password": "Sua senha atual", @@ -139,7 +139,7 @@ "avatar_size_instruction": "O tamanho mínimo recomendado para imagens de avatar é 150x150 pixels.", "export_theme": "Salvar predefinições", "filtering": "Filtragem", - "filtering_explanation": "Todas as postagens contendo estas palavras serão silenciadas, uma por linha.", + "filtering_explanation": "Todas as postagens contendo estas palavras serão silenciadas; uma palavra por linha.", "follow_export": "Exportar quem você segue", "follow_export_button": "Exportar quem você segue para um arquivo CSV", "follow_export_processing": "Processando. Em breve você receberá a solicitação de download do arquivo", @@ -178,7 +178,7 @@ "name_bio": "Nome & Biografia", "new_password": "Nova senha", "notification_visibility": "Tipos de notificação para mostrar", - "notification_visibility_follows": "Seguidos", + "notification_visibility_follows": "Seguidas", "notification_visibility_likes": "Favoritos", "notification_visibility_mentions": "Menções", "notification_visibility_repeats": "Repetições", @@ -187,7 +187,7 @@ "no_mutes": "Sem silenciados", "hide_follows_description": "Não mostrar quem estou seguindo", "hide_followers_description": "Não mostrar quem me segue", - "show_admin_badge": "Mostrar distintivo de Administrador em meu perfil", + "show_admin_badge": "Mostrar título de Administrador em meu perfil", "show_moderator_badge": "Mostrar título de Moderador em meu perfil", "nsfw_clickthrough": "Habilitar clique para ocultar anexos sensíveis", "oauth_tokens": "Token OAuth", @@ -201,9 +201,9 @@ "profile_background": "Pano de fundo de perfil", "profile_banner": "Capa de perfil", "profile_tab": "Perfil", - "radii_help": "Arredondar arestas da interface (em píxeis)", + "radii_help": "Arredondar arestas da interface (em pixel)", "replies_in_timeline": "Respostas na linha do tempo", - "reply_link_preview": "Habilitar a pré-visualização de link de respostas ao passar o mouse.", + "reply_link_preview": "Habilitar a pré-visualização de de respostas ao passar o mouse.", "reply_visibility_all": "Mostrar todas as respostas", "reply_visibility_following": "Só mostrar respostas direcionadas a mim ou a usuários que sigo", "reply_visibility_self": "Só mostrar respostas direcionadas a mim", @@ -212,7 +212,7 @@ "security_tab": "Segurança", "scope_copy": "Copiar opções de privacidade ao responder (Mensagens diretas sempre copiam)", "set_new_avatar": "Alterar avatar", - "set_new_profile_background": "Alterar o plano de fundo de perfil", + "set_new_profile_background": "Alterar o pano de fundo de perfil", "set_new_profile_banner": "Alterar capa de perfil", "settings": "Configurações", "subject_input_always_show": "Sempre mostrar campo de assunto", @@ -220,9 +220,9 @@ "subject_line_email": "Como em email: \"re: assunto\"", "subject_line_mastodon": "Como o Mastodon: copiar como está", "subject_line_noop": "Não copiar", - "post_status_content_type": "Postar tipo de conteúdo do status", - "stop_gifs": "Reproduzir GIFs ao passar o cursor em cima", - "streaming": "Habilitar o fluxo automático de postagens quando ao topo da página", + "post_status_content_type": "Tipo de conteúdo do status", + "stop_gifs": "Reproduzir GIFs ao passar o cursor", + "streaming": "Habilitar o fluxo automático de postagens no topo da página", "text": "Texto", "theme": "Tema", "theme_help": "Use cores em código hexadecimal (#rrggbb) para personalizar seu esquema de cores.", @@ -235,7 +235,7 @@ "false": "não", "true": "sim" }, - "notifications": "Notifications", + "notifications": "Notificações", "enable_web_push_notifications": "Habilitar notificações web push", "style": { "switcher": { @@ -245,7 +245,7 @@ "keep_roundness": "Manter arredondado", "keep_fonts": "Manter fontes", "save_load_hint": "Manter as opções preserva as opções atuais ao selecionar ou carregar temas; também salva as opções ao exportar um tempo. Quanto todos os campos estiverem desmarcados, tudo será salvo ao exportar o tema.", - "reset": "Voltar ao padrão", + "reset": "Restaurar o padrão", "clear_all": "Limpar tudo", "clear_opacity": "Limpar opacidade" }, @@ -319,7 +319,7 @@ }, "fonts": { "_tab_label": "Fontes", - "help": "Selecionar fonte dos elementos da interface. Para fonte \"personalizada\" você deve entrar exatamente o nome da fonte no sistema.", + "help": "Selecione as fontes dos elementos da interface. Para fonte \"personalizada\" você deve inserir o mesmo nome da fonte no sistema.", "components": { "interface": "Interface", "input": "Campo de entrada", @@ -383,7 +383,7 @@ "mute": "Silenciar", "muted": "Silenciado", "per_day": "por dia", - "remote_follow": "Seguidor Remoto", + "remote_follow": "Seguir remotamente", "statuses": "Postagens", "unblock": "Desbloquear", "unblock_progress": "Desbloqueando...", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 6799cc96..16268425 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -8,7 +8,12 @@ }, "general": { "apply": "Применить", - "submit": "Отправить" + "submit": "Отправить", + "cancel": "Отмена", + "disable": "Оключить", + "enable": "Включить", + "confirm": "Подтвердить", + "verify": "Проверить" }, "login": { "login": "Войти", @@ -16,15 +21,25 @@ "password": "Пароль", "placeholder": "e.c. lain", "register": "Зарегистрироваться", - "username": "Имя пользователя" + "username": "Имя пользователя", + "authentication_code": "Код аутентификации", + "enter_recovery_code": "Ввести код восстановления", + "enter_two_factor_code": "Ввести код аутентификации", + "recovery_code": "Код восстановления", + "heading" : { + "TotpForm" : "Двухфакторная аутентификация", + "RecoveryForm" : "Two-factor recovery" + } }, "nav": { "back": "Назад", "chat": "Локальный чат", "mentions": "Упоминания", + "interactions": "Взаимодействия", "public_tl": "Публичная лента", "timeline": "Лента", - "twkn": "Федеративная лента" + "twkn": "Федеративная лента", + "search": "Поиск" }, "notifications": { "broken_favorite": "Неизвестный статус, ищем...", @@ -35,14 +50,24 @@ "read": "Прочесть", "repeated_you": "повторил(а) ваш статус" }, + "interactions": { + "favs_repeats": "Повторы и фавориты", + "follows": "Новые подписки", + "load_older": "Загрузить старые взаимодействия" + }, "post_status": { "account_not_locked_warning": "Ваш аккаунт не {0}. Кто угодно может зафоловить вас чтобы прочитать посты только для подписчиков", "account_not_locked_warning_link": "залочен", "attachments_sensitive": "Вложения содержат чувствительный контент", "content_warning": "Тема (не обязательно)", "default": "Что нового?", - "direct_warning": "Этот пост будет видет только упомянутым пользователям", + "direct_warning": "Этот пост будет виден только упомянутым пользователям", "posting": "Отправляется", + "scope_notice": { + "public": "Этот пост будет виден всем", + "private": "Этот пост будет виден только вашим подписчикам", + "unlisted": "Этот пост не будет виден в публичной и федеративной ленте" + }, "scope": { "direct": "Личное - этот пост видят только те кто в нём упомянут", "private": "Для подписчиков - этот пост видят только подписчики", @@ -67,6 +92,28 @@ } }, "settings": { + "enter_current_password_to_confirm": "Введите свой текущий пароль", + "mfa": { + "otp" : "OTP", + "setup_otp" : "Настройка OTP", + "wait_pre_setup_otp" : "предварительная настройка OTP", + "confirm_and_enable" : "Подтвердить и включить OTP", + "title": "Двухфакторная аутентификация", + "generate_new_recovery_codes" : "Получить новые коды востановления", + "warning_of_generate_new_codes" : "После получения новых кодов восстановления, старые больше не будут работать.", + "recovery_codes" : "Коды восстановления.", + "waiting_a_recovery_codes": "Получение кодов восстановления ...", + "recovery_codes_warning" : "Запишите эти коды и держите в безопасном месте - иначе вы их больше не увидите. Если вы потеряете доступ к OTP приложению - без резервных кодов вы больше не сможете залогиниться.", + "authentication_methods" : "Методы аутентификации", + "scan": { + "title": "Сканирование", + "desc": "Используйте приложение для двухэтапной аутентификации для сканирования этого QR-код или введите текстовый ключ:", + "secret_code": "Ключ" + }, + "verify": { + "desc": "Чтобы включить двухэтапную аутентификации, введите код из вашего приложение для двухэтапной аутентификации:" + } + }, "attachmentRadius": "Прикреплённые файлы", "attachments": "Вложения", "autoload": "Включить автоматическую загрузку при прокрутке вниз", @@ -111,6 +158,8 @@ "import_theme": "Загрузить Тему", "inputRadius": "Поля ввода", "checkboxRadius": "Чекбоксы", + "instance_default": "(по умолчанию: {value})", + "instance_default_simple": "(по умолчанию)", "interface": "Интерфейс", "interfaceLanguage": "Язык интерфейса", "limited_availability": "Не доступно в вашем браузере", @@ -129,6 +178,8 @@ "no_rich_text_description": "Убрать форматирование из всех постов", "hide_follows_description": "Не показывать кого я читаю", "hide_followers_description": "Не показывать кто читает меня", + "hide_follows_count_description": "Не показывать число читаемых пользователей", + "hide_followers_count_description": "Не показывать число моих подписчиков", "show_admin_badge": "Показывать значок администратора в моем профиле", "show_moderator_badge": "Показывать значок модератора в моем профиле", "nsfw_clickthrough": "Включить скрытие NSFW вложений", @@ -149,7 +200,12 @@ "reply_visibility_all": "Показывать все ответы", "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан", "reply_visibility_self": "Показывать только ответы мне", + "autohide_floating_post_button": "Автоматически скрывать кнопку постинга (в мобильной версии)", + "saving_err": "Не удалось сохранить настройки", + "saving_ok": "Сохранено", "security_tab": "Безопасность", + "scope_copy": "Копировать видимость поста при ответе (всегда включено для Личных Сообщений)", + "minimal_scopes_mode": "Минимизировать набор опций видимости поста", "set_new_avatar": "Загрузить новый аватар", "set_new_profile_background": "Загрузить новый фон профиля", "set_new_profile_banner": "Загрузить новый баннер профиля", @@ -164,6 +220,10 @@ "theme_help_v2_2": "Под некоторыми полями ввода это идикаторы контрастности, наведите на них мышью чтобы узнать больше. Приспользовании прозрачности контраст расчитывается для наихудшего варианта.", "tooltipRadius": "Всплывающие подсказки/уведомления", "user_settings": "Настройки пользователя", + "values": { + "false": "нет", + "true": "да" + }, "style": { "switcher": { "keep_color": "Оставить цвета", @@ -301,9 +361,46 @@ "muted": "Игнорирую", "per_day": "в день", "remote_follow": "Читать удалённо", - "statuses": "Статусы" + "statuses": "Статусы", + "admin_menu": { + "moderation": "Опции модератора", + "grant_admin": "Сделать администратором", + "revoke_admin": "Забрать права администратора", + "grant_moderator": "Сделать модератором", + "revoke_moderator": "Забрать права модератора", + "activate_account": "Активировать аккаунт", + "deactivate_account": "Деактивировать аккаунт", + "delete_account": "Удалить аккаунт", + "force_nsfw": "Отмечать посты пользователя как NSFW", + "strip_media": "Убирать вложения из постов пользователя", + "force_unlisted": "Не добавлять посты в публичные ленты", + "sandbox": "Посты доступны только для подписчиков", + "disable_remote_subscription": "Запретить подписываться с удаленных серверов", + "disable_any_subscription": "Запретить подписываться на пользователя", + "quarantine": "Не федерировать посты пользователя", + "delete_user": "Удалить пользователя", + "delete_user_confirmation": "Вы уверены? Это действие нельзя отменить." + } }, "user_profile": { "timeline_title": "Лента пользователя" + }, + "search": { + "people": "Люди", + "hashtags": "Хэштэги", + "person_talking": "Популярно у {count} человека", + "people_talking": "Популярно у {count} человек", + "no_results": "Ничего не найдено" + }, + "password_reset": { + "forgot_password": "Забыли пароль?", + "password_reset": "Сброс пароля", + "instruction": "Введите ваш email или имя пользователя, и мы отправим вам ссылку для сброса пароля.", + "placeholder": "Ваш email или имя пользователя", + "check_email": "Проверьте ваш email и перейдите по ссылке для сброса пароля.", + "return_home": "Вернуться на главную страницу", + "not_found": "Мы не смогли найти аккаунт с таким email-ом или именем пользователя.", + "too_many_requests": "Вы исчерпали допустимое количество попыток, попробуйте позже.", + "password_reset_disabled": "Сброс пароля отключен. Cвяжитесь с администратором вашего сервера." } } diff --git a/src/i18n/te.json b/src/i18n/te.json new file mode 100644 index 00000000..f0953d97 --- /dev/null +++ b/src/i18n/te.json @@ -0,0 +1,352 @@ +{ + "chat.title": "చాట్", + "features_panel.chat": "చాట్", + "features_panel.gopher": "గోఫర్", + "features_panel.media_proxy": "మీడియా ప్రాక్సీ", + "features_panel.scope_options": "స్కోప్ ఎంపికలు", + "features_panel.text_limit": "వచన పరిమితి", + "features_panel.title": "లక్షణాలు", + "features_panel.who_to_follow": "ఎవరిని అనుసరించాలి", + "finder.error_fetching_user": "వినియోగదారుని పొందడంలో లోపం", + "finder.find_user": "వినియోగదారుని కనుగొనండి", + "general.apply": "వర్తించు", + "general.submit": "సమర్పించు", + "general.more": "మరిన్ని", + "general.generic_error": "ఒక తప్పిదం సంభవించినది", + "general.optional": "ఐచ్చికం", + "image_cropper.crop_picture": "చిత్రాన్ని కత్తిరించండి", + "image_cropper.save": "దాచు", + "image_cropper.save_without_cropping": "కత్తిరించకుండా సేవ్ చేయి", + "image_cropper.cancel": "రద్దుచేయి", + "login.login": "లాగిన్", + "login.description": "OAuth తో లాగిన్ అవ్వండి", + "login.logout": "లాగౌట్", + "login.password": "సంకేతపదము", + "login.placeholder": "ఉదా. lain", + "login.register": "నమోదు చేసుకోండి", + "login.username": "వాడుకరి పేరు", + "login.hint": "చర్చలో చేరడానికి లాగిన్ అవ్వండి", + "media_modal.previous": "ముందరి పుట", + "media_modal.next": "తరువాత", + "nav.about": "గురించి", + "nav.back": "వెనక్కి", + "nav.chat": "స్థానిక చాట్", + "nav.friend_requests": "అనుసరించడానికి అభ్యర్థనలు", + "nav.mentions": "ప్రస్తావనలు", + "nav.dms": "నేరుగా పంపిన సందేశాలు", + "nav.public_tl": "ప్రజా కాలక్రమం", + "nav.timeline": "కాలక్రమం", + "nav.twkn": "మొత్తం తెలిసిన నెట్వర్క్", + "nav.user_search": "వాడుకరి శోధన", + "nav.who_to_follow": "ఎవరిని అనుసరించాలి", + "nav.preferences": "ప్రాధాన్యతలు", + "notifications.broken_favorite": "తెలియని స్థితి, దాని కోసం శోధిస్తోంది...", + "notifications.favorited_you": "మీ స్థితిని ఇష్టపడ్డారు", + "notifications.followed_you": "మిమ్మల్ని అనుసరించారు", + "notifications.load_older": "పాత నోటిఫికేషన్లను లోడ్ చేయండి", + "notifications.notifications": "ప్రకటనలు", + "notifications.read": "చదివాను!", + "notifications.repeated_you": "మీ స్థితిని పునరావృతం చేసారు", + "notifications.no_more_notifications": "ఇక నోటిఫికేషన్లు లేవు", + "post_status.new_status": "క్రొత్త స్థితిని పోస్ట్ చేయండి", + "post_status.account_not_locked_warning": "మీ ఖాతా {౦} కాదు. ఎవరైనా మిమ్మల్ని అనుసరించి అనుచరులకు మాత్రమే ఉద్దేశించిన పోస్టులను చూడవచ్చు.", + "post_status.account_not_locked_warning_link": "తాళం వేయబడినది", + "post_status.attachments_sensitive": "జోడింపులను సున్నితమైనవిగా గుర్తించండి", + "post_status.content_type.text/plain": "సాధారణ అక్షరాలు", + "post_status.content_type.text/html": "హెచ్టిఎమ్ఎల్", + "post_status.content_type.text/markdown": "మార్క్డౌన్", + "post_status.content_warning": "విషయం (ఐచ్ఛికం)", + "post_status.default": "ఇప్పుడే విజయవాడలో దిగాను.", + "post_status.direct_warning": "ఈ పోస్ట్ మాత్రమే పేర్కొన్న వినియోగదారులకు మాత్రమే కనిపిస్తుంది.", + "post_status.posting": "పోస్ట్ చేస్తున్నా", + "post_status.scope.direct": "ప్రత్యక్ష - పేర్కొన్న వినియోగదారులకు మాత్రమే పోస్ట్ చేయబడుతుంది", + "post_status.scope.private": "అనుచరులకు మాత్రమే - అనుచరులకు మాత్రమే పోస్ట్ చేయబడుతుంది", + "post_status.scope.public": "పబ్లిక్ - ప్రజా కాలక్రమాలకు పోస్ట్ చేయబడుతుంది", + "post_status.scope.unlisted": "జాబితా చేయబడనిది - ప్రజా కాలక్రమాలకు పోస్ట్ చేయవద్దు", + "registration.bio": "బయో", + "registration.email": "ఈ మెయిల్", + "registration.fullname": "ప్రదర్శన పేరు", + "registration.password_confirm": "పాస్వర్డ్ నిర్ధారణ", + "registration.registration": "నమోదు", + "registration.token": "ఆహ్వాన టోకెన్", + "registration.captcha": "కాప్చా", + "registration.new_captcha": "కొత్త కాప్చా పొందుటకు చిత్రం మీద క్లిక్ చేయండి", + "registration.username_placeholder": "ఉదా. lain", + "registration.fullname_placeholder": "ఉదా. Lain Iwakura", + "registration.bio_placeholder": "e.g.\nHi, I'm Lain.\nI’m an anime girl living in suburban Japan. You may know me from the Wired.", + "registration.validations.username_required": "ఖాళీగా విడిచిపెట్టరాదు", + "registration.validations.fullname_required": "ఖాళీగా విడిచిపెట్టరాదు", + "registration.validations.email_required": "ఖాళీగా విడిచిపెట్టరాదు", + "registration.validations.password_required": "ఖాళీగా విడిచిపెట్టరాదు", + "registration.validations.password_confirmation_required": "ఖాళీగా విడిచిపెట్టరాదు", + "registration.validations.password_confirmation_match": "సంకేతపదం వలె ఉండాలి", + "settings.app_name": "అనువర్తన పేరు", + "settings.attachmentRadius": "జోడింపులు", + "settings.attachments": "జోడింపులు", + "settings.autoload": "క్రిందికి స్క్రోల్ చేయబడినప్పుడు స్వయంచాలక లోడింగ్ని ప్రారంభించు", + "settings.avatar": "అవతారం", + "settings.avatarAltRadius": "అవతారాలు (ప్రకటనలు)", + "settings.avatarRadius": "అవతారాలు", + "settings.background": "బ్యాక్గ్రౌండు", + "settings.bio": "బయో", + "settings.blocks_tab": "బ్లాక్లు", + "settings.btnRadius": "బటన్లు", + "settings.cBlue": "నీలం (ప్రత్యుత్తరం, అనుసరించండి)", + "settings.cGreen": "Green (Retweet)", + "settings.cOrange": "ఆరెంజ్ (ఇష్టపడు)", + "settings.cRed": "Red (Cancel)", + "settings.change_password": "పాస్వర్డ్ మార్చండి", + "settings.change_password_error": "మీ పాస్వర్డ్ను మార్చడంలో సమస్య ఉంది.", + "settings.changed_password": "పాస్వర్డ్ విజయవంతంగా మార్చబడింది!", + "settings.collapse_subject": "Collapse posts with subjects", + "settings.composing": "Composing", + "settings.confirm_new_password": "కొత్త పాస్వర్డ్ను నిర్ధారించండి", + "settings.current_avatar": "మీ ప్రస్తుత అవతారం", + "settings.current_password": "ప్రస్తుత పాస్వర్డ్", + "settings.current_profile_banner": "మీ ప్రస్తుత ప్రొఫైల్ బ్యానర్", + "settings.data_import_export_tab": "Data Import / Export", + "settings.default_vis": "Default visibility scope", + "settings.delete_account": "Delete Account", + "settings.delete_account_description": "మీ ఖాతా మరియు మీ అన్ని సందేశాలను శాశ్వతంగా తొలగించండి.", + "settings.delete_account_error": "There was an issue deleting your account. If this persists please contact your instance administrator.", + "settings.delete_account_instructions": "ఖాతా తొలగింపును నిర్ధారించడానికి దిగువ ఇన్పుట్లో మీ పాస్వర్డ్ను టైప్ చేయండి.", + "settings.avatar_size_instruction": "అవతార్ చిత్రాలకు సిఫార్సు చేసిన కనీస పరిమాణం 150x150 పిక్సెల్స్.", + "settings.export_theme": "Save preset", + "settings.filtering": "వడపోత", + "settings.filtering_explanation": "All statuses containing these words will be muted, one per line", + "settings.follow_export": "Follow export", + "settings.follow_export_button": "Export your follows to a csv file", + "settings.follow_export_processing": "Processing, you'll soon be asked to download your file", + "settings.follow_import": "Follow import", + "settings.follow_import_error": "అనుచరులను దిగుమతి చేయడంలో లోపం", + "settings.follows_imported": "Follows imported! Processing them will take a while.", + "settings.foreground": "Foreground", + "settings.general": "General", + "settings.hide_attachments_in_convo": "సంభాషణలలో జోడింపులను దాచు", + "settings.hide_attachments_in_tl": "కాలక్రమంలో జోడింపులను దాచు", + "settings.hide_muted_posts": "మ్యూట్ చేసిన వినియోగదారుల యొక్క పోస్ట్లను దాచిపెట్టు", + "settings.max_thumbnails": "Maximum amount of thumbnails per post", + "settings.hide_isp": "Hide instance-specific panel", + "settings.preload_images": "Preload images", + "settings.use_one_click_nsfw": "కేవలం ఒక క్లిక్ తో NSFW జోడింపులను తెరవండి", + "settings.hide_post_stats": "Hide post statistics (e.g. the number of favorites)", + "settings.hide_user_stats": "Hide user statistics (e.g. the number of followers)", + "settings.hide_filtered_statuses": "Hide filtered statuses", + "settings.import_followers_from_a_csv_file": "Import follows from a csv file", + "settings.import_theme": "Load preset", + "settings.inputRadius": "Input fields", + "settings.checkboxRadius": "Checkboxes", + "settings.instance_default": "(default: {value})", + "settings.instance_default_simple": "(default)", + "settings.interface": "Interface", + "settings.interfaceLanguage": "Interface language", + "settings.invalid_theme_imported": "The selected file is not a supported Pleroma theme. No changes to your theme were made.", + "settings.limited_availability": "మీ బ్రౌజర్లో అందుబాటులో లేదు", + "settings.links": "Links", + "settings.lock_account_description": "మీ ఖాతాను ఆమోదించిన అనుచరులకు మాత్రమే పరిమితం చేయండి", + "settings.loop_video": "Loop videos", + "settings.loop_video_silent_only": "Loop only videos without sound (i.e. Mastodon's \"gifs\")", + "settings.mutes_tab": "మ్యూట్ చేయబడినవి", + "settings.play_videos_in_modal": "మీడియా వీక్షికలో నేరుగా వీడియోలను ప్లే చేయి", + "settings.use_contain_fit": "అటాచ్మెంట్ సూక్ష్మచిత్రాలను కత్తిరించవద్దు", + "settings.name": "Name", + "settings.name_bio": "పేరు & బయో", + "settings.new_password": "కొత్త సంకేతపదం", + "settings.notification_visibility": "చూపించవలసిన నోటిఫికేషన్ రకాలు", + "settings.notification_visibility_follows": "Follows", + "settings.notification_visibility_likes": "ఇష్టాలు", + "settings.notification_visibility_mentions": "ప్రస్తావనలు", + "settings.notification_visibility_repeats": "పునఃప్రసారాలు", + "settings.no_rich_text_description": "అన్ని పోస్ట్ల నుండి రిచ్ టెక్స్ట్ ఫార్మాటింగ్ను స్ట్రిప్ చేయండి", + "settings.no_blocks": "బ్లాక్స్ లేవు", + "settings.no_mutes": "మ్యూట్లు లేవు", + "settings.hide_follows_description": "నేను ఎవరిని అనుసరిస్తున్నానో చూపించవద్దు", + "settings.hide_followers_description": "నన్ను ఎవరు అనుసరిస్తున్నారో చూపవద్దు", + "settings.show_admin_badge": "నా ప్రొఫైల్ లో అడ్మిన్ బ్యాడ్జ్ చూపించు", + "settings.show_moderator_badge": "నా ప్రొఫైల్లో మోడరేటర్ బ్యాడ్జ్ని చూపించు", + "settings.nsfw_clickthrough": "Enable clickthrough NSFW attachment hiding", + "settings.oauth_tokens": "OAuth tokens", + "settings.token": "Token", + "settings.refresh_token": "Refresh Token", + "settings.valid_until": "Valid Until", + "settings.revoke_token": "Revoke", + "settings.panelRadius": "Panels", + "settings.pause_on_unfocused": "Pause streaming when tab is not focused", + "settings.presets": "Presets", + "settings.profile_background": "Profile Background", + "settings.profile_banner": "Profile Banner", + "settings.profile_tab": "Profile", + "settings.radii_help": "Set up interface edge rounding (in pixels)", + "settings.replies_in_timeline": "Replies in timeline", + "settings.reply_link_preview": "Enable reply-link preview on mouse hover", + "settings.reply_visibility_all": "Show all replies", + "settings.reply_visibility_following": "Only show replies directed at me or users I'm following", + "settings.reply_visibility_self": "Only show replies directed at me", + "settings.saving_err": "Error saving settings", + "settings.saving_ok": "Settings saved", + "settings.security_tab": "Security", + "settings.scope_copy": "Copy scope when replying (DMs are always copied)", + "settings.set_new_avatar": "Set new avatar", + "settings.set_new_profile_background": "Set new profile background", + "settings.set_new_profile_banner": "Set new profile banner", + "settings.settings": "Settings", + "settings.subject_input_always_show": "Always show subject field", + "settings.subject_line_behavior": "Copy subject when replying", + "settings.subject_line_email": "Like email: \"re: subject\"", + "settings.subject_line_mastodon": "Like mastodon: copy as is", + "settings.subject_line_noop": "Do not copy", + "settings.post_status_content_type": "Post status content type", + "settings.stop_gifs": "Play-on-hover GIFs", + "settings.streaming": "Enable automatic streaming of new posts when scrolled to the top", + "settings.text": "Text", + "settings.theme": "Theme", + "settings.theme_help": "Use hex color codes (#rrggbb) to customize your color theme.", + "settings.theme_help_v2_1": "You can also override certain component's colors and opacity by toggling the checkbox, use \"Clear all\" button to clear all overrides.", + "settings.theme_help_v2_2": "Icons underneath some entries are background/text contrast indicators, hover over for detailed info. Please keep in mind that when using transparency contrast indicators show the worst possible case.", + "settings.tooltipRadius": "Tooltips/alerts", + "settings.upload_a_photo": "Upload a photo", + "settings.user_settings": "User Settings", + "settings.values.false": "no", + "settings.values.true": "yes", + "settings.notifications": "Notifications", + "settings.enable_web_push_notifications": "Enable web push notifications", + "settings.style.switcher.keep_color": "Keep colors", + "settings.style.switcher.keep_shadows": "Keep shadows", + "settings.style.switcher.keep_opacity": "Keep opacity", + "settings.style.switcher.keep_roundness": "Keep roundness", + "settings.style.switcher.keep_fonts": "Keep fonts", + "settings.style.switcher.save_load_hint": "\"Keep\" options preserve currently set options when selecting or loading themes, it also stores said options when exporting a theme. When all checkboxes unset, exporting theme will save everything.", + "settings.style.switcher.reset": "Reset", + "settings.style.switcher.clear_all": "Clear all", + "settings.style.switcher.clear_opacity": "Clear opacity", + "settings.style.common.color": "Color", + "settings.style.common.opacity": "Opacity", + "settings.style.common.contrast.hint": "Contrast ratio is {ratio}, it {level} {context}", + "settings.style.common.contrast.level.aa": "meets Level AA guideline (minimal)", + "settings.style.common.contrast.level.aaa": "meets Level AAA guideline (recommended)", + "settings.style.common.contrast.level.bad": "doesn't meet any accessibility guidelines", + "settings.style.common.contrast.context.18pt": "for large (18pt+) text", + "settings.style.common.contrast.context.text": "for text", + "settings.style.common_colors._tab_label": "Common", + "settings.style.common_colors.main": "Common colors", + "settings.style.common_colors.foreground_hint": "See \"Advanced\" tab for more detailed control", + "settings.style.common_colors.rgbo": "Icons, accents, badges", + "settings.style.advanced_colors._tab_label": "Advanced", + "settings.style.advanced_colors.alert": "Alert background", + "settings.style.advanced_colors.alert_error": "Error", + "settings.style.advanced_colors.badge": "Badge background", + "settings.style.advanced_colors.badge_notification": "Notification", + "settings.style.advanced_colors.panel_header": "Panel header", + "settings.style.advanced_colors.top_bar": "Top bar", + "settings.style.advanced_colors.borders": "Borders", + "settings.style.advanced_colors.buttons": "Buttons", + "settings.style.advanced_colors.inputs": "Input fields", + "settings.style.advanced_colors.faint_text": "Faded text", + "settings.style.radii._tab_label": "Roundness", + "settings.style.shadows._tab_label": "Shadow and lighting", + "settings.style.shadows.component": "Component", + "settings.style.shadows.override": "Override", + "settings.style.shadows.shadow_id": "Shadow #{value}", + "settings.style.shadows.blur": "Blur", + "settings.style.shadows.spread": "Spread", + "settings.style.shadows.inset": "Inset", + "settings.style.shadows.hint": "For shadows you can also use --variable as a color value to use CSS3 variables. Please note that setting opacity won't work in this case.", + "settings.style.shadows.filter_hint.always_drop_shadow": "Warning, this shadow always uses {0} when browser supports it.", + "settings.style.shadows.filter_hint.drop_shadow_syntax": "{0} does not support {1} parameter and {2} keyword.", + "settings.style.shadows.filter_hint.avatar_inset": "Please note that combining both inset and non-inset shadows on avatars might give unexpected results with transparent avatars.", + "settings.style.shadows.filter_hint.spread_zero": "Shadows with spread > 0 will appear as if it was set to zero", + "settings.style.shadows.filter_hint.inset_classic": "Inset shadows will be using {0}", + "settings.style.shadows.components.panel": "Panel", + "settings.style.shadows.components.panelHeader": "Panel header", + "settings.style.shadows.components.topBar": "Top bar", + "settings.style.shadows.components.avatar": "User avatar (in profile view)", + "settings.style.shadows.components.avatarStatus": "User avatar (in post display)", + "settings.style.shadows.components.popup": "Popups and tooltips", + "settings.style.shadows.components.button": "Button", + "settings.style.shadows.components.buttonHover": "Button (hover)", + "settings.style.shadows.components.buttonPressed": "Button (pressed)", + "settings.style.shadows.components.buttonPressedHover": "Button (pressed+hover)", + "settings.style.shadows.components.input": "Input field", + "settings.style.fonts._tab_label": "Fonts", + "settings.style.fonts.help": "Select font to use for elements of UI. For \"custom\" you have to enter exact font name as it appears in system.", + "settings.style.fonts.components.interface": "Interface", + "settings.style.fonts.components.input": "Input fields", + "settings.style.fonts.components.post": "Post text", + "settings.style.fonts.components.postCode": "Monospaced text in a post (rich text)", + "settings.style.fonts.family": "Font name", + "settings.style.fonts.size": "Size (in px)", + "settings.style.fonts.weight": "Weight (boldness)", + "settings.style.fonts.custom": "Custom", + "settings.style.preview.header": "Preview", + "settings.style.preview.content": "Content", + "settings.style.preview.error": "Example error", + "settings.style.preview.button": "Button", + "settings.style.preview.text": "A bunch of more {0} and {1}", + "settings.style.preview.mono": "content", + "settings.style.preview.input": "Just landed in L.A.", + "settings.style.preview.faint_link": "helpful manual", + "settings.style.preview.fine_print": "Read our {0} to learn nothing useful!", + "settings.style.preview.header_faint": "This is fine", + "settings.style.preview.checkbox": "I have skimmed over terms and conditions", + "settings.style.preview.link": "a nice lil' link", + "settings.version.title": "Version", + "settings.version.backend_version": "Backend Version", + "settings.version.frontend_version": "Frontend Version", + "timeline.collapse": "Collapse", + "timeline.conversation": "Conversation", + "timeline.error_fetching": "Error fetching updates", + "timeline.load_older": "Load older statuses", + "timeline.no_retweet_hint": "Post is marked as followers-only or direct and cannot be repeated", + "timeline.repeated": "repeated", + "timeline.show_new": "Show new", + "timeline.up_to_date": "Up-to-date", + "timeline.no_more_statuses": "No more statuses", + "timeline.no_statuses": "No statuses", + "status.reply_to": "Reply to", + "status.replies_list": "Replies:", + "user_card.approve": "Approve", + "user_card.block": "Block", + "user_card.blocked": "Blocked!", + "user_card.deny": "Deny", + "user_card.favorites": "Favorites", + "user_card.follow": "Follow", + "user_card.follow_sent": "Request sent!", + "user_card.follow_progress": "Requesting…", + "user_card.follow_again": "Send request again?", + "user_card.follow_unfollow": "Unfollow", + "user_card.followees": "Following", + "user_card.followers": "Followers", + "user_card.following": "Following!", + "user_card.follows_you": "Follows you!", + "user_card.its_you": "It's you!", + "user_card.media": "Media", + "user_card.mute": "Mute", + "user_card.muted": "Muted", + "user_card.per_day": "per day", + "user_card.remote_follow": "Remote follow", + "user_card.statuses": "Statuses", + "user_card.unblock": "Unblock", + "user_card.unblock_progress": "Unblocking...", + "user_card.block_progress": "Blocking...", + "user_card.unmute": "Unmute", + "user_card.unmute_progress": "Unmuting...", + "user_card.mute_progress": "Muting...", + "user_profile.timeline_title": "User Timeline", + "user_profile.profile_does_not_exist": "Sorry, this profile does not exist.", + "user_profile.profile_loading_error": "Sorry, there was an error loading this profile.", + "who_to_follow.more": "More", + "who_to_follow.who_to_follow": "Who to follow", + "tool_tip.media_upload": "Upload Media", + "tool_tip.repeat": "Repeat", + "tool_tip.reply": "Reply", + "tool_tip.favorite": "Favorite", + "tool_tip.user_settings": "User Settings", + "upload.error.base": "Upload failed.", + "upload.error.file_too_big": "File too big [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "upload.error.default": "Try again later", + "upload.file_size_units.B": "B", + "upload.file_size_units.KiB": "KiB", + "upload.file_size_units.MiB": "MiB", + "upload.file_size_units.GiB": "GiB", + "upload.file_size_units.TiB": "TiB" +} diff --git a/src/i18n/zh.json b/src/i18n/zh.json index 089a98e2..80c4e0d8 100644 --- a/src/i18n/zh.json +++ b/src/i18n/zh.json @@ -2,6 +2,10 @@ "chat": { "title": "聊天" }, + "exporter": { + "export": "导出", + "processing": "正在处理，稍后会提示您下载文件" + }, "features_panel": { "chat": "聊天", "gopher": "Gopher", @@ -17,23 +21,66 @@ }, "general": { "apply": "应用", - "submit": "提交" + "submit": "提交", + "more": "更多", + "generic_error": "发生一个错误", + "optional": "可选项", + "show_more": "显示更多", + "show_less": "显示更少", + "cancel": "取消", + "disable": "禁用", + "enable": "启用", + "confirm": "确认", + "verify": "验证" + }, + "image_cropper": { + "crop_picture": "裁剪图片", + "save": "保存", + "save_without_cropping": "保存未经裁剪的图片", + "cancel": "取消" + }, + "importer": { + "submit": "提交", + "success": "导入成功。", + "error": "导入此文件时出现一个错误。" }, "login": { "login": "登录", + "description": "用 OAuth 登录", "logout": "登出", "password": "密码", "placeholder": "例如：lain", "register": "注册", - "username": "用户名" + "username": "用户名", + "hint": "登录后加入讨论", + "authentication_code": "验证码", + "enter_recovery_code": "输入一个恢复码", + "enter_two_factor_code": "输入一个双重因素验证码", + "recovery_code": "恢复码", + "heading" : { + "totp" : "双重因素验证", + "recovery" : "双重因素恢复" + } + }, + "media_modal": { + "previous": "往前", + "next": "往后" }, "nav": { + "about": "关于", + "back": "Back", "chat": "本地聊天", "friend_requests": "关注请求", "mentions": "提及", + "interactions": "互动", + "dms": "私信", "public_tl": "公共时间线", "timeline": "时间线", - "twkn": "所有已知网络" + "twkn": "所有已知网络", + "user_search": "用户搜索", + "search": "搜索", + "who_to_follow": "推荐关注", + "preferences": "偏好设置" }, "notifications": { "broken_favorite": "未知的状态，正在搜索中...", @@ -42,24 +89,57 @@ "load_older": "加载更早的通知", "notifications": "通知", "read": "阅读！", - "repeated_you": "转发了你的状态" + "repeated_you": "转发了你的状态", + "no_more_notifications": "没有更多的通知" + }, + "polls": { + "add_poll": "增加问卷调查", + "add_option": "增加选项", + "option": "选项", + "votes": "投票", + "vote": "投票", + "type": "问卷类型", + "single_choice": "单选项", + "multiple_choices": "多选项", + "expiry": "问卷的时间", + "expires_in": "投票于 {0} 内结束", + "expired": "投票 {0} 前已结束", + "not_enough_options": "投票的选项太少" + }, + "stickers": { + "add_sticker": "添加贴纸" + }, + "interactions": { + "favs_repeats": "转发和收藏", + "follows": "新的关注着", + "load_older": "加载更早的互动" }, "post_status": { + "new_status": "发布新状态", "account_not_locked_warning": "你的帐号没有 {0}。任何人都可以关注你并浏览你的上锁内容。", "account_not_locked_warning_link": "上锁", "attachments_sensitive": "标记附件为敏感内容", "content_type": { - "plain_text": "纯文本" + "text/plain": "纯文本", + "text/html": "HTML", + "text/markdown": "Markdown", + "text/bbcode": "BBCode" }, "content_warning": "主题（可选）", "default": "刚刚抵达上海", - "direct_warning": "本条内容只有被提及的用户能够看到。", + "direct_warning_to_all": "本条内容只有被提及的用户能够看到。", + "direct_warning_to_first_only": "本条内容只有被在消息开始处提及的用户能够看到。", "posting": "发送", + "scope_notice": { + "public": "本条内容可以被所有人看到", + "private": "关注你的人才能看到本条内容", + "unlisted": "本条内容既不在公共时间线，也不会在所有已知网络上可见" + }, "scope": { "direct": "私信 - 只发送给被提及的用户", "private": "仅关注者 - 只有关注了你的人能看到", "public": "公共 - 发送到公共时间轴", - "unlisted": "不公开 - 所有人可见，但不会发送到公共时间轴" + "unlisted": "不公开 - 不会发送到公共时间轴" } }, "registration": { @@ -68,9 +148,49 @@ "fullname": "全名", "password_confirm": "确认密码", "registration": "注册", - "token": "邀请码" + "token": "邀请码", + "captcha": "CAPTCHA", + "new_captcha": "点击图片获取新的验证码", + "username_placeholder": "例如： lain", + "fullname_placeholder": "例如： Lain Iwakura", + "bio_placeholder": "例如：\n你好， 我是 Lain.\n我是一个住在上海的宅男。你可能在某处见过我。", + "validations": { + "username_required": "不能留空", + "fullname_required": "不能留空", + "email_required": "不能留空", + "password_required": "不能留空", + "password_confirmation_required": "不能留空", + "password_confirmation_match": "密码不一致" + } + }, + "selectable_list": { + "select_all": "选择全部" }, "settings": { + "app_name": "App 名称", + "security": "安全", + "enter_current_password_to_confirm": "输入你当前密码来确认你的身份", + "mfa": { + "otp" : "OTP", + "setup_otp" : "设置 OTP", + "wait_pre_setup_otp" : "预设 OTP", + "confirm_and_enable" : "确认并启用 OTP", + "title": "双因素验证", + "generate_new_recovery_codes" : "生成新的恢复码", + "warning_of_generate_new_codes" : "当你生成新的恢复码时，你的就恢复码就失效了。", + "recovery_codes" : "恢复码。", + "waiting_a_recovery_codes": "接受备份码。。。", + "recovery_codes_warning" : "抄写这些号码，或者保存在安全的地方。这些号码不会再次显示。如果你无法访问你的 2FA app，也丢失了你的恢复码，你的账号就再也无法登录了。", + "authentication_methods" : "身份验证方法", + "scan": { + "title": "扫一下", + "desc": "使用你的双因素验证 app，扫描这个二维码，或者输入这些文字密钥：", + "secret_code": "密钥" + }, + "verify": { + "desc": "要启用双因素验证，请把你的双因素验证 app 里的数字输入：" + } + }, "attachmentRadius": "附件", "attachments": "附件", "autoload": "启用滚动到底部时的自动加载", @@ -79,6 +199,12 @@ "avatarRadius": "头像", "background": "背景", "bio": "简介", + "block_export": "拉黑名单导出", + "block_export_button": "导出你的拉黑名单到一个 csv 文件", + "block_import": "拉黑名单导入", + "block_import_error": "导入拉黑名单出错", + "blocks_imported": "拉黑名单导入成功！需要一点时间来处理。", + "blocks_tab": "块", "btnRadius": "按钮", "cBlue": "蓝色（回复，关注）", "cGreen": "绿色（转发）", @@ -88,6 +214,7 @@ "change_password_error": "修改密码的时候出了点问题。", "changed_password": "成功修改了密码！", "collapse_subject": "折叠带主题的内容", + "composing": "正在书写", "confirm_new_password": "确认新密码", "current_avatar": "当前头像", "current_password": "当前密码", @@ -98,12 +225,12 @@ "delete_account_description": "永久删除你的帐号和所有消息。", "delete_account_error": "删除账户时发生错误，如果一直删除不了，请联系实例管理员。", "delete_account_instructions": "在下面输入你的密码来确认删除账户", + "avatar_size_instruction": "推荐的头像图片最小的尺寸是 150x150 像素。", "export_theme": "导出预置主题", "filtering": "过滤器", "filtering_explanation": "所有包含以下词汇的内容都会被隐藏，一行一个", "follow_export": "导出关注", "follow_export_button": "将关注导出成 csv 文件", - "follow_export_processing": "正在处理，过一会儿就可以下载你的文件了", "follow_import": "导入关注", "follow_import_error": "导入关注时错误", "follows_imported": "关注已导入！尚需要一些时间来处理。", @@ -111,12 +238,22 @@ "general": "通用", "hide_attachments_in_convo": "在对话中隐藏附件", "hide_attachments_in_tl": "在时间线上隐藏附件", + "hide_muted_posts": "不显示被隐藏的用户的帖子", + "max_thumbnails": "最多再每个帖子所能显示的缩略图数量", + "hide_isp": "隐藏指定实例的面板H", + "preload_images": "预载图片", + "use_one_click_nsfw": "点击一次以打开工作场所不适宜的附件", "hide_post_stats": "隐藏推文相关的统计数据(例如：收藏的次数)", "hide_user_stats": "隐藏用户的统计数据（例如：关注者的数量）", + "hide_filtered_statuses": "隐藏过滤的状态", + "import_blocks_from_a_csv_file": "从 csv 文件中导入拉黑名单", "import_followers_from_a_csv_file": "从 csv 文件中导入关注", "import_theme": "导入预置主题", "inputRadius": "输入框", + "checkboxRadius": "复选框", "instance_default": "(默认：{value})", + "instance_default_simple": "(默认)", + "interface": "界面", "interfaceLanguage": "界面语言", "invalid_theme_imported": "您所选择的主题文件不被 Pleroma 支持，因此主题未被修改。", "limited_availability": "在您的浏览器中无法使用", @@ -124,6 +261,9 @@ "lock_account_description": "你需要手动审核关注请求", "loop_video": "循环视频", "loop_video_silent_only": "只循环没有声音的视频（例如：Mastodon 里的“GIF”）", + "mutes_tab": "隐藏", + "play_videos_in_modal": "在弹出框内播放视频", + "use_contain_fit": "生成缩略图时不要裁剪附件。", "name": "名字", "name_bio": "名字及简介", "new_password": "新密码", @@ -133,9 +273,15 @@ "notification_visibility_mentions": "提及", "notification_visibility_repeats": "转发", "no_rich_text_description": "不显示富文本格式", + "no_blocks": "没有拉黑的", + "no_mutes": "没有隐藏", + "hide_follows_description": "不要显示我所关注的人", + "hide_followers_description": "不要显示关注我的人", + "show_admin_badge": "显示管理徽章", + "show_moderator_badge": "显示版主徽章", "nsfw_clickthrough": "将不和谐附件隐藏，点击才能打开", "oauth_tokens": "OAuth令牌", - "token": "代币", + "token": "令牌", "refresh_token": "刷新令牌", "valid_until": "有效期至", "revoke_token": "撤消", @@ -151,25 +297,196 @@ "reply_visibility_all": "显示所有回复", "reply_visibility_following": "只显示发送给我的回复/发送给我关注的用户的回复", "reply_visibility_self": "只显示发送给我的回复", + "autohide_floating_post_button": "自动隐藏新帖子的按钮（移动设备）", "saving_err": "保存设置时发生错误", "saving_ok": "设置已保存", + "search_user_to_block": "搜索你想屏蔽的用户", + "search_user_to_mute": "搜索你想要隐藏的用户", "security_tab": "安全", + "scope_copy": "回复时的复制范围（私信是总是复制的）", + "minimal_scopes_mode": "最小发文范围", "set_new_avatar": "设置新头像", "set_new_profile_background": "设置新的个人资料背景", "set_new_profile_banner": "设置新的横幅图片", "settings": "设置", + "subject_input_always_show": "总是显示主题框", + "subject_line_behavior": "回复时复制主题", + "subject_line_email": "比如电邮： \"re: 主题\"", + "subject_line_mastodon": "比如 mastodon: copy as is", + "subject_line_noop": "不要复制", + "post_status_content_type": "发文状态内容类型", "stop_gifs": "鼠标悬停时播放GIF", "streaming": "开启滚动到顶部时的自动推送", "text": "文本", "theme": "主题", "theme_help": "使用十六进制代码（#rrggbb）来设置主题颜色。", + "theme_help_v2_1": "你也可以通过切换复选框来覆盖某些组件的颜色和透明。使用“清除所有”来清楚所有覆盖设置。", + "theme_help_v2_2": "某些条目下的图标是背景或文本对比指示器，鼠标悬停可以获取详细信息。请记住，使用透明度来显示最差的情况。", "tooltipRadius": "提醒", + "upload_a_photo": "上传照片", "user_settings": "用户设置", "values": { "false": "否", "true": "是" + }, + "notifications": "通知", + "notification_setting": "通知来源：", + "notification_setting_follows": "你所关注的用户", + "notification_setting_non_follows": "你没有关注的用户", + "notification_setting_followers": "关注你的用户", + "notification_setting_non_followers": "没有关注你的用户", + "notification_mutes": "要停止收到某个指定的用户的通知，请使用隐藏功能。", + "notification_blocks": "拉黑一个用户会停掉所有他的通知，等同于取消关注。", + "enable_web_push_notifications": "启用 web 推送通知", + "style": { + "switcher": { + "keep_color": "保留颜色", + "keep_shadows": "保留阴影", + "keep_opacity": "保留透明度", + "keep_roundness": "保留圆角", + "keep_fonts": "保留字体", + "save_load_hint": "\"保留\" 选项在选择或加载主题时保留当前设置的选项，在导出主题时还会存储上述选项。当所有复选框未设置时，导出主题将保存所有内容。", + "reset": "重置", + "clear_all": "清除全部", + "clear_opacity": "清除透明度" + }, + "common": { + "color": "颜色", + "opacity": "透明度", + "contrast": { + "hint": "对比度是 {ratio}， 它 {level} {context}", + "level": { + "aa": "符合 AA 等级准则（最低）", + "aaa": "符合 AAA 等级准则（推荐）", + "bad": "不符合任何辅助功能指南" + }, + "context": { + "18pt": "大字文本 (18pt+)", + "text": "文本" + } + } + }, + "common_colors": { + "_tab_label": "常规", + "main": "常用颜色", + "foreground_hint": "点击”高级“ 标签进行细致的控制", + "rgbo": "图标，口音，徽章" + }, + "advanced_colors": { + "_tab_label": "高级", + "alert": "提醒或警告背景色", + "alert_error": "错误", + "badge": "徽章背景", + "badge_notification": "通知", + "panel_header": "面板标题", + "top_bar": "顶栏", + "borders": "边框", + "buttons": "按钮", + "inputs": "输入框", + "faint_text": "灰度文字" + }, + "radii": { + "_tab_label": "圆角" + }, + "shadows": { + "_tab_label": "阴影和照明", + "component": "组件", + "override": "覆盖", + "shadow_id": "阴影 #{value}", + "blur": "模糊", + "spread": "扩散", + "inset": "插入内部", + "hint": "对于阴影你还可以使用 --variable 作为颜色值来使用 CSS3 变量。请注意，这种情况下，透明设置将不起作用。", + "filter_hint": { + "always_drop_shadow": "警告，此阴影设置会总是使用 {0} ，如果浏览器支持的话。", + "drop_shadow_syntax": "{0} 不支持参数 {1} 和关键词 {2} 。", + "avatar_inset": "请注意组合两个内部和非内部的阴影到头像上，在透明头像上可能会有意料之外的效果。", + "spread_zero": "阴影的扩散 > 0 会同设置成零一样", + "inset_classic": "插入内部的阴影会使用 {0}" + }, + "components": { + "panel": "面板", + "panelHeader": "面板标题", + "topBar": "顶栏", + "avatar": "用户头像（在个人资料栏）", + "avatarStatus": "用户头像（在帖子显示栏）", + "popup": "弹窗和工具提示", + "button": "按钮", + "buttonHover": "按钮（悬停）", + "buttonPressed": "按钮（按下）", + "buttonPressedHover": "按钮（按下和悬停）", + "input": "输入框" + } + }, + "fonts": { + "_tab_label": "字体", + "help": "给用户界面的元素选择字体。选择 “自选”的你必须输入确切的字体名称。", + "components": { + "interface": "界面", + "input": "输入框", + "post": "发帖文字", + "postCode": "帖子中使用等间距文字（富文本）" + }, + "family": "字体名称", + "size": "大小 (in px)", + "weight": "字重 （粗体）)", + "custom": "自选" + }, + "preview": { + "header": "预览", + "content": "内容", + "error": "例子错误", + "button": "按钮", + "text": "有堆 {0} 和 {1}", + "mono": "内容", + "input": "刚刚抵达上海", + "faint_link": "帮助菜单", + "fine_print": "阅读我们的 {0} 学不到什么东东！", + "header_faint": "这很正常", + "checkbox": "我已经浏览了 TOC", + "link": "一个很棒的摇滚链接" + } + }, + "version": { + "title": "版本", + "backend_version": "后端版本", + "frontend_version": "前端版本" } }, + "time": { + "day": "{0} 天", + "days": "{0} 天", + "day_short": "{0}d", + "days_short": "{0}d", + "hour": "{0} 小时", + "hours": "{0} 小时", + "hour_short": "{0}h", + "hours_short": "{0}h", + "in_future": "还有 {0}", + "in_past": "{0} 之前", + "minute": "{0} 分钟", + "minutes": "{0} 分钟", + "minute_short": "{0}min", + "minutes_short": "{0}min", + "month": "{0} 月", + "months": "{0} 月", + "month_short": "{0}mo", + "months_short": "{0}mo", + "now": "刚刚", + "now_short": "刚刚", + "second": "{0} 秒", + "seconds": "{0} 秒", + "second_short": "{0}s", + "seconds_short": "{0}s", + "week": "{0} 周", + "weeks": "{0} 周", + "week_short": "{0}w", + "weeks_short": "{0}w", + "year": "{0} 年", + "years": "{0} 年", + "year_short": "{0}y", + "years_short": "{0}y" + }, "timeline": { "collapse": "折叠", "conversation": "对话", @@ -178,29 +495,129 @@ "no_retweet_hint": "这条内容仅关注者可见，或者是私信，因此不能转发。", "repeated": "已转发", "show_new": "显示新内容", - "up_to_date": "已是最新" + "up_to_date": "已是最新", + "no_more_statuses": "没有更多的状态", + "no_statuses": "没有状态更新" + }, + "status": { + "favorites": "收藏", + "repeats": "转发", + "delete": "删除状态", + "pin": "在个人资料置顶", + "unpin": "取消在个人资料置顶", + "pinned": "置顶", + "delete_confirm": "你真的想要删除这条状态吗？", + "reply_to": "回复", + "replies_list": "回复：", + "mute_conversation": "隐藏对话", + "unmute_conversation": "对话取消隐藏" }, "user_card": { "approve": "允许", "block": "屏蔽", "blocked": "已屏蔽！", "deny": "拒绝", + "favorites": "收藏", "follow": "关注", + "follow_sent": "请求已发送！", + "follow_progress": "请求中", + "follow_again": "再次发送请求？", + "follow_unfollow": "取消关注", "followees": "正在关注", "followers": "关注者", "following": "正在关注！", "follows_you": "关注了你！", + "its_you": "就是你！!", + "media": "媒体", "mute": "隐藏", "muted": "已隐藏", "per_day": "每天", "remote_follow": "跨站关注", - "statuses": "状态" + "report": "报告", + "statuses": "状态", + "subscribe": "订阅", + "unsubscribe": "退订", + "unblock": "取消拉黑", + "unblock_progress": "取消拉黑中...", + "block_progress": "拉黑中...", + "unmute": "取消隐藏", + "unmute_progress": "取消隐藏中...", + "mute_progress": "隐藏中...", + "admin_menu": { + "moderation": "权限", + "grant_admin": "赋予管理权限", + "revoke_admin": "撤销管理权限", + "grant_moderator": "赋予版主权限", + "revoke_moderator": "撤销版主权限", + "activate_account": "激活账号", + "deactivate_account": "关闭账号", + "delete_account": "删除账号", + "force_nsfw": "标记所有的帖子都是 - 工作场合不适", + "strip_media": "从帖子里删除媒体文件", + "force_unlisted": "强制帖子为不公开", + "sandbox": "强制帖子为只有关注者可看", + "disable_remote_subscription": "禁止从远程实例关注用户", + "disable_any_subscription": "完全禁止关注用户", + "quarantine": "从联合实例中禁止用户帖子", + "delete_user": "删除用户", + "delete_user_confirmation": "你确认吗？此操作无法撤销。" + } }, "user_profile": { - "timeline_title": "用户时间线" + "timeline_title": "用户时间线", + "profile_does_not_exist": "抱歉，此个人资料不存在。", + "profile_loading_error": "抱歉，载入个人资料时出错。" + }, + "user_reporting": { + "title": "报告 {0}", + "add_comment_description": "此报告会发送给你的实例管理员。你可以在下面提供更多详细信息解释报告的缘由：", + "additional_comments": "其它信息", + "forward_description": "这个账号是从另外一个服务器。同时发送一个副本到那里？", + "forward_to": "转发 {0}", + "submit": "提交", + "generic_error": "当处理你的请求时，发生了一个错误。" }, "who_to_follow": { "more": "更多", "who_to_follow": "推荐关注" + }, + "tool_tip": { + "media_upload": "上传多媒体", + "repeat": "转发", + "reply": "回复", + "favorite": "收藏", + "user_settings": "用户设置" + }, + "upload":{ + "error": { + "base": "上传不成功。", + "file_too_big": "文件太大了 [{filesize}{filesizeunit} / {allowedsize}{allowedsizeunit}]", + "default": "迟些再试" + }, + "file_size_units": { + "B": "B", + "KiB": "KiB", + "MiB": "MiB", + "GiB": "GiB", + "TiB": "TiB" + } + }, + "search": { + "people": "人", + "hashtags": "Hashtags", + "person_talking": "{count} 人谈论", + "people_talking": "{count} 人谈论", + "no_results": "没有搜索结果" + }, + "password_reset": { + "forgot_password": "忘记密码了？", + "password_reset": "重置密码", + "instruction": "输入你的电邮地址或者用户名，我们将发送一个链接到你的邮箱，用于重置密码。", + "placeholder": "你的电邮地址或者用户名", + "check_email": "检查你的邮箱，会有一个链接用于重置密码。", + "return_home": "回到首页", + "not_found": "我们无法找到匹配的邮箱地址或者用户名。", + "too_many_requests": "你触发了尝试的限制，请稍后再试。", + "password_reset_disabled": "密码重置已经被禁用。请联系你的实例管理员。" } } diff --git a/src/lib/persisted_state.js b/src/lib/persisted_state.js index e828a74b..cad7ea25 100644 --- a/src/lib/persisted_state.js +++ b/src/lib/persisted_state.js @@ -19,7 +19,8 @@ const saveImmedeatelyActions = [ 'setHighlight', 'setOption', 'setClientData', - 'setToken' + 'setToken', + 'clearToken' ] const defaultStorage = (() => { @@ -60,18 +61,6 @@ export default function createPersistedState ({ merge({}, store.state, savedState) ) } - if (store.state.config.customTheme) { - // This is a hack to deal with async loading of config.json and themes - // See: style_setter.js, setPreset() - window.themeLoaded = true - store.dispatch('setOption', { - name: 'customTheme', - value: store.state.config.customTheme - }) - } - if (store.state.oauth.token) { - store.dispatch('loginUser', store.state.oauth.token) - } loaded = true } catch (e) { console.log("Couldn't load state") diff --git a/src/main.js b/src/main.js index a3265e3a..7923ffe8 100644 --- a/src/main.js +++ b/src/main.js @@ -10,10 +10,13 @@ import apiModule from './modules/api.js' import configModule from './modules/config.js' import chatModule from './modules/chat.js' import oauthModule from './modules/oauth.js' +import authFlowModule from './modules/auth_flow.js' import mediaViewerModule from './modules/media_viewer.js' import oauthTokensModule from './modules/oauth_tokens.js' +import reportsModule from './modules/reports.js' +import pollsModule from './modules/polls.js' +import postStatusModule from './modules/postStatus.js' -import VueTimeago from 'vue-timeago' import VueI18n from 'vue-i18n' import createPersistedState from './lib/persisted_state.js' @@ -22,6 +25,10 @@ import pushNotifications from './lib/push_notifications_plugin.js' import messages from './i18n/messages.js' import VueChatScroll from 'vue-chat-scroll' +import VueClickOutside from 'v-click-outside' +import PortalVue from 'portal-vue' +import VBodyScrollLock from './directives/body_scroll_lock' +import VTooltip from 'v-tooltip' import afterStoreSetup from './boot/after_store.js' @@ -29,16 +36,12 @@ const currentLocale = (window.navigator.language || 'en').split('-')[0] Vue.use(Vuex) Vue.use(VueRouter) -Vue.use(VueTimeago, { - locale: currentLocale === 'cs' ? 'cs' : currentLocale === 'ja' ? 'ja' : 'en', - locales: { - 'cs': require('../static/timeago-cs.json'), - 'en': require('../static/timeago-en.json'), - 'ja': require('../static/timeago-ja.json') - } -}) Vue.use(VueI18n) Vue.use(VueChatScroll) +Vue.use(VueClickOutside) +Vue.use(PortalVue) +Vue.use(VBodyScrollLock) +Vue.use(VTooltip) const i18n = new VueI18n({ // By default, use the browser locale, we will update it if neccessary @@ -53,11 +56,17 @@ const persistedStateOptions = { 'users.lastLoginName', 'oauth' ] -} +}; -createPersistedState(persistedStateOptions).then((persistedState) => { +(async () => { + const persistedState = await createPersistedState(persistedStateOptions) const store = new Vuex.Store({ modules: { + i18n: { + getters: { + i18n: () => i18n + } + }, interface: interfaceModule, instance: instanceModule, statuses: statusesModule, @@ -66,8 +75,12 @@ createPersistedState(persistedStateOptions).then((persistedState) => { config: configModule, chat: chatModule, oauth: oauthModule, + authFlow: authFlowModule, mediaViewer: mediaViewerModule, - oauthTokens: oauthTokensModule + oauthTokens: oauthTokensModule, + reports: reportsModule, + polls: pollsModule, + postStatus: postStatusModule }, plugins: [persistedState, pushNotifications], strict: false // Socket modifies itself, let's ignore this for now. @@ -75,7 +88,7 @@ createPersistedState(persistedStateOptions).then((persistedState) => { }) afterStoreSetup({ store, i18n }) -}) +})() // These are inlined by webpack's DefinePlugin /* eslint-disable */ diff --git a/src/modules/api.js b/src/modules/api.js index 31cb55c6..eb6a7980 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -6,18 +6,17 @@ const api = { backendInteractor: backendInteractorService(), fetchers: {}, socket: null, - chatDisabled: false, followRequests: [] }, mutations: { setBackendInteractor (state, backendInteractor) { state.backendInteractor = backendInteractor }, - addFetcher (state, {timeline, fetcher}) { - state.fetchers[timeline] = fetcher + addFetcher (state, { fetcherName, fetcher }) { + state.fetchers[fetcherName] = fetcher }, - removeFetcher (state, {timeline}) { - delete state.fetchers[timeline] + removeFetcher (state, { fetcherName }) { + delete state.fetchers[fetcherName] }, setWsToken (state, token) { state.wsToken = token @@ -25,40 +24,47 @@ const api = { setSocket (state, socket) { state.socket = socket }, - setChatDisabled (state, value) { - state.chatDisabled = value - }, setFollowRequests (state, value) { state.followRequests = value } }, actions: { - startFetching (store, {timeline = 'friends', tag = false, userId = false}) { + startFetchingTimeline (store, { timeline = 'friends', tag = false, userId = false }) { // Don't start fetching if we already are. if (store.state.fetchers[timeline]) return - const fetcher = store.state.backendInteractor.startFetching({ timeline, store, userId, tag }) - store.commit('addFetcher', { timeline, fetcher }) + const fetcher = store.state.backendInteractor.startFetchingTimeline({ timeline, store, userId, tag }) + store.commit('addFetcher', { fetcherName: timeline, fetcher }) }, - stopFetching (store, timeline) { - const fetcher = store.state.fetchers[timeline] + startFetchingNotifications (store) { + // Don't start fetching if we already are. + if (store.state.fetchers['notifications']) return + + const fetcher = store.state.backendInteractor.startFetchingNotifications({ store }) + store.commit('addFetcher', { fetcherName: 'notifications', fetcher }) + }, + stopFetching (store, fetcherName) { + const fetcher = store.state.fetchers[fetcherName] window.clearInterval(fetcher) - store.commit('removeFetcher', {timeline}) + store.commit('removeFetcher', { fetcherName }) }, setWsToken (store, token) { store.commit('setWsToken', token) }, - initializeSocket (store) { + initializeSocket ({ dispatch, commit, state, rootState }) { // Set up websocket connection - if (!store.state.chatDisabled) { - const token = store.state.wsToken - const socket = new Socket('/socket', {params: {token}}) + const token = state.wsToken + if (rootState.instance.chatAvailable && typeof token !== 'undefined' && state.socket === null) { + const socket = new Socket('/socket', { params: { token } }) socket.connect() - store.dispatch('initializeChat', socket) + + commit('setSocket', socket) + dispatch('initializeChat', socket) } }, - disableChat (store) { - store.commit('setChatDisabled', true) + disconnectFromSocket ({ commit, state }) { + state.socket && state.socket.disconnect() + commit('setSocket', null) }, removeFollowRequest (store, request) { let requests = store.state.followRequests.filter((it) => it !== request) diff --git a/src/modules/auth_flow.js b/src/modules/auth_flow.js new file mode 100644 index 00000000..d0a90feb --- /dev/null +++ b/src/modules/auth_flow.js @@ -0,0 +1,90 @@ +const PASSWORD_STRATEGY = 'password' +const TOKEN_STRATEGY = 'token' + +// MFA strategies +const TOTP_STRATEGY = 'totp' +const RECOVERY_STRATEGY = 'recovery' + +// initial state +const state = { + app: null, + settings: {}, + strategy: PASSWORD_STRATEGY, + initStrategy: PASSWORD_STRATEGY // default strategy from config +} + +const resetState = (state) => { + state.strategy = state.initStrategy + state.settings = {} + state.app = null +} + +// getters +const getters = { + app: (state, getters) => { + return state.app + }, + settings: (state, getters) => { + return state.settings + }, + requiredPassword: (state, getters, rootState) => { + return state.strategy === PASSWORD_STRATEGY + }, + requiredToken: (state, getters, rootState) => { + return state.strategy === TOKEN_STRATEGY + }, + requiredTOTP: (state, getters, rootState) => { + return state.strategy === TOTP_STRATEGY + }, + requiredRecovery: (state, getters, rootState) => { + return state.strategy === RECOVERY_STRATEGY + } +} + +// mutations +const mutations = { + setInitialStrategy (state, strategy) { + if (strategy) { + state.initStrategy = strategy + state.strategy = strategy + } + }, + requirePassword (state) { + state.strategy = PASSWORD_STRATEGY + }, + requireToken (state) { + state.strategy = TOKEN_STRATEGY + }, + requireMFA (state, { app, settings }) { + state.settings = settings + state.app = app + state.strategy = TOTP_STRATEGY // default strategy of MFA + }, + requireRecovery (state) { + state.strategy = RECOVERY_STRATEGY + }, + requireTOTP (state) { + state.strategy = TOTP_STRATEGY + }, + abortMFA (state) { + resetState(state) + } +} + +// actions +const actions = { + // eslint-disable-next-line camelcase + async login ({ state, dispatch, commit }, { access_token }) { + commit('setToken', access_token, { root: true }) + await dispatch('loginUser', access_token, { root: true }) + resetState(state) + } +} + +export default { + namespaced: true, + state, + getters, + mutations, + actions +} diff --git a/src/modules/chat.js b/src/modules/chat.js index 2804e577..c798549d 100644 --- a/src/modules/chat.js +++ b/src/modules/chat.js @@ -1,16 +1,12 @@ const chat = { state: { messages: [], - channel: {state: ''}, - socket: null + channel: { state: '' } }, mutations: { setChannel (state, channel) { state.channel = channel }, - setSocket (state, socket) { - state.socket = socket - }, addMessage (state, message) { state.messages.push(message) state.messages = state.messages.slice(-19, 20) @@ -20,16 +16,12 @@ const chat = { } }, actions: { - disconnectFromChat (store) { - store.state.socket.disconnect() - }, initializeChat (store, socket) { const channel = socket.channel('chat:public') - store.commit('setSocket', socket) channel.on('new_msg', (msg) => { store.commit('addMessage', msg) }) - channel.on('messages', ({messages}) => { + channel.on('messages', ({ messages }) => { store.commit('setMessages', messages) }) channel.join() diff --git a/src/modules/config.js b/src/modules/config.js index 1c30c203..cf04d14f 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -5,7 +5,9 @@ const browserLocale = (window.navigator.language || 'en').split('-')[0] const defaultState = { colors: {}, + hideMutedPosts: undefined, // instance default collapseMessageWithSubject: undefined, // instance default + padEmoji: true, hideAttachments: false, hideAttachmentsInConv: false, maxThumbnails: 16, @@ -16,6 +18,7 @@ const defaultState = { autoLoad: true, streaming: false, hoverPreview: true, + autohideFloatingPostButton: false, pauseOnUnfocused: true, stopGifs: false, replyVisibility: 'all', @@ -29,10 +32,12 @@ const defaultState = { muteWords: [], highlight: {}, interfaceLanguage: browserLocale, + hideScopeNotice: false, scopeCopy: undefined, // instance default subjectLineBehavior: undefined, // instance default alwaysShowSubjectInput: undefined, // instance default - postContentType: undefined // instance default + postContentType: undefined, // instance default + minimalScopesMode: undefined // instance default } const config = { @@ -52,10 +57,10 @@ const config = { }, actions: { setHighlight ({ commit, dispatch }, { user, color, type }) { - commit('setHighlight', {user, color, type}) + commit('setHighlight', { user, color, type }) }, setOption ({ commit, dispatch }, { name, value }) { - commit('setOption', {name, value}) + commit('setOption', { name, value }) switch (name) { case 'theme': setPreset(value, commit) diff --git a/src/modules/errors.js b/src/modules/errors.js index c809e1b5..ca89dc0f 100644 --- a/src/modules/errors.js +++ b/src/modules/errors.js @@ -9,4 +9,3 @@ export function humanizeErrors (errors) { return [...errs, message] }, []) } - diff --git a/src/modules/instance.js b/src/modules/instance.js index 24c52f9c..7d602aa1 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -5,6 +5,7 @@ const defaultState = { // Stuff from static/config.json and apiConfig name: 'Pleroma FE', registrationOpen: true, + safeDM: true, textlimit: 5000, server: 'http://localhost:4040/', theme: 'pleroma-dark', @@ -15,9 +16,8 @@ const defaultState = { redirectRootNoLogin: '/main/all', redirectRootLogin: '/main/friends', showInstanceSpecificPanel: false, - scopeOptionsEnabled: true, - formattingOptionsEnabled: false, alwaysShowSubjectInput: true, + hideMutedPosts: false, collapseMessageWithSubject: false, hidePostStats: false, hideUserStats: false, @@ -26,11 +26,11 @@ const defaultState = { scopeCopy: true, subjectLineBehavior: 'email', postContentType: 'text/plain', - loginMethod: 'password', nsfwCensorImage: undefined, vapidPublicKey: undefined, noAttachmentLinks: false, showFeaturesPanel: true, + minimalScopesMode: false, // Nasty stuff pleromaBackend: true, @@ -48,7 +48,19 @@ const defaultState = { // Html stuff instanceSpecificPanelContent: '', - tos: '' + tos: '', + + // Version Information + backendVersion: '', + frontendVersion: '', + + pollsAvailable: false, + pollLimits: { + max_options: 4, + max_option_chars: 255, + min_expiration: 60, + max_expiration: 60 * 60 * 24 + } } const instance = { @@ -62,11 +74,16 @@ const instance = { }, actions: { setInstanceOption ({ commit, dispatch }, { name, value }) { - commit('setInstanceOption', {name, value}) + commit('setInstanceOption', { name, value }) switch (name) { case 'name': dispatch('setPageTitle') break + case 'chatAvailable': + if (value) { + dispatch('initializeSocket') + } + break } }, setTheme ({ commit }, themeName) { diff --git a/src/modules/interface.js b/src/modules/interface.js index 956c9cb3..5b2762e5 100644 --- a/src/modules/interface.js +++ b/src/modules/interface.js @@ -11,7 +11,8 @@ const defaultState = { window.CSS.supports('filter', 'drop-shadow(0 0)') || window.CSS.supports('-webkit-filter', 'drop-shadow(0 0)') ) - } + }, + mobileLayout: false } const interfaceMod = { @@ -31,6 +32,9 @@ const interfaceMod = { }, setNotificationPermission (state, permission) { state.notificationPermission = permission + }, + setMobileLayout (state, value) { + state.mobileLayout = value } }, actions: { @@ -42,6 +46,9 @@ const interfaceMod = { }, setNotificationPermission ({ commit }, permission) { commit('setNotificationPermission', permission) + }, + setMobileLayout ({ commit }, value) { + commit('setMobileLayout', value) } } } diff --git a/src/modules/oauth.js b/src/modules/oauth.js index 144ff830..a2a83450 100644 --- a/src/modules/oauth.js +++ b/src/modules/oauth.js @@ -1,16 +1,47 @@ +import { delete as del } from 'vue' + const oauth = { state: { - client_id: false, - client_secret: false, - token: false + clientId: false, + clientSecret: false, + /* App token is authentication for app without any user, used mostly for + * MastoAPI's registration of new users, stored so that we can fall back to + * it on logout + */ + appToken: false, + /* User token is authentication for app with user, this is for every calls + * that need authorized user to be successful (i.e. posting, liking etc) + */ + userToken: false }, mutations: { - setClientData (state, data) { - state.client_id = data.client_id - state.client_secret = data.client_secret + setClientData (state, { clientId, clientSecret }) { + state.clientId = clientId + state.clientSecret = clientSecret + }, + setAppToken (state, token) { + state.appToken = token }, setToken (state, token) { - state.token = token + state.userToken = token + }, + clearToken (state) { + state.userToken = false + // state.token is userToken with older name, coming from persistent state + // let's clear it as well, since it is being used as a fallback of state.userToken + del(state, 'token') + } + }, + getters: { + getToken: state => () => { + // state.token is userToken with older name, coming from persistent state + // added here for smoother transition, otherwise user will be logged out + return state.userToken || state.token || state.appToken + }, + getUserToken: state => () => { + // state.token is userToken with older name, coming from persistent state + // added here for smoother transition, otherwise user will be logged out + return state.userToken || state.token } } } diff --git a/src/modules/oauth_tokens.js b/src/modules/oauth_tokens.js index 00ac1431..0159a3f1 100644 --- a/src/modules/oauth_tokens.js +++ b/src/modules/oauth_tokens.js @@ -3,12 +3,12 @@ const oauthTokens = { tokens: [] }, actions: { - fetchTokens ({rootState, commit}) { + fetchTokens ({ rootState, commit }) { rootState.api.backendInteractor.fetchOAuthTokens().then((tokens) => { commit('swapTokens', tokens) }) }, - revokeToken ({rootState, commit, state}, id) { + revokeToken ({ rootState, commit, state }, id) { rootState.api.backendInteractor.revokeOAuthToken(id).then((response) => { if (response.status === 201) { commit('swapTokens', state.tokens.filter(token => token.id !== id)) diff --git a/src/modules/polls.js b/src/modules/polls.js new file mode 100644 index 00000000..e6158b63 --- /dev/null +++ b/src/modules/polls.js @@ -0,0 +1,70 @@ +import { merge } from 'lodash' +import { set } from 'vue' + +const polls = { + state: { + // Contains key = id, value = number of trackers for this poll + trackedPolls: {}, + pollsObject: {} + }, + mutations: { + mergeOrAddPoll (state, poll) { + const existingPoll = state.pollsObject[poll.id] + // Make expired-state change trigger re-renders properly + poll.expired = Date.now() > Date.parse(poll.expires_at) + if (existingPoll) { + set(state.pollsObject, poll.id, merge(existingPoll, poll)) + } else { + set(state.pollsObject, poll.id, poll) + } + }, + trackPoll (state, pollId) { + const currentValue = state.trackedPolls[pollId] + if (currentValue) { + set(state.trackedPolls, pollId, currentValue + 1) + } else { + set(state.trackedPolls, pollId, 1) + } + }, + untrackPoll (state, pollId) { + const currentValue = state.trackedPolls[pollId] + if (currentValue) { + set(state.trackedPolls, pollId, currentValue - 1) + } else { + set(state.trackedPolls, pollId, 0) + } + } + }, + actions: { + mergeOrAddPoll ({ commit }, poll) { + commit('mergeOrAddPoll', poll) + }, + updateTrackedPoll ({ rootState, dispatch, commit }, pollId) { + rootState.api.backendInteractor.fetchPoll(pollId).then(poll => { + setTimeout(() => { + if (rootState.polls.trackedPolls[pollId]) { + dispatch('updateTrackedPoll', pollId) + } + }, 30 * 1000) + commit('mergeOrAddPoll', poll) + }) + }, + trackPoll ({ rootState, commit, dispatch }, pollId) { + if (!rootState.polls.trackedPolls[pollId]) { + setTimeout(() => dispatch('updateTrackedPoll', pollId), 30 * 1000) + } + commit('trackPoll', pollId) + }, + untrackPoll ({ commit }, pollId) { + commit('untrackPoll', pollId) + }, + votePoll ({ rootState, commit }, { id, pollId, choices }) { + return rootState.api.backendInteractor.vote(pollId, choices).then(poll => { + commit('mergeOrAddPoll', poll) + return poll + }) + } + } +} + +export default polls diff --git a/src/modules/postStatus.js b/src/modules/postStatus.js new file mode 100644 index 00000000..638c1fb2 --- /dev/null +++ b/src/modules/postStatus.js @@ -0,0 +1,25 @@ +const postStatus = { + state: { + params: null, + modalActivated: false + }, + mutations: { + openPostStatusModal (state, params) { + state.params = params + state.modalActivated = true + }, + closePostStatusModal (state) { + state.modalActivated = false + } + }, + actions: { + openPostStatusModal ({ commit }, params) { + commit('openPostStatusModal', params) + }, + closePostStatusModal ({ commit }) { + commit('closePostStatusModal') + } + } +} + +export default postStatus diff --git a/src/modules/reports.js b/src/modules/reports.js new file mode 100644 index 00000000..904022f1 --- /dev/null +++ b/src/modules/reports.js @@ -0,0 +1,30 @@ +import filter from 'lodash/filter' + +const reports = { + state: { + userId: null, + statuses: [], + modalActivated: false + }, + mutations: { + openUserReportingModal (state, { userId, statuses }) { + state.userId = userId + state.statuses = statuses + state.modalActivated = true + }, + closeUserReportingModal (state) { + state.modalActivated = false + } + }, + actions: { + openUserReportingModal ({ rootState, commit }, userId) { + const statuses = filter(rootState.statuses.allStatuses, status => status.user.id === userId) + commit('openUserReportingModal', { userId, statuses }) + }, + closeUserReportingModal ({ commit }) { + commit('closeUserReportingModal') + } + } +} + +export default reports diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 6b512fa3..918065d2 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -1,4 +1,5 @@ -import { remove, slice, each, find, maxBy, minBy, merge, first, last, isArray } from 'lodash' +import { remove, slice, each, findIndex, find, maxBy, minBy, merge, first, last, isArray, omitBy } from 'lodash' +import { set } from 'vue' import apiService from '../services/api/api.service.js' // import parse from '../services/status_parser/status_parser.js' @@ -19,20 +20,22 @@ const emptyTl = (userId = 0) => ({ flushMarker: 0 }) +const emptyNotifications = () => ({ + desktopNotificationSilence: true, + maxId: 0, + minId: Number.POSITIVE_INFINITY, + data: [], + idStore: {}, + loading: false, + error: false +}) + export const defaultState = () => ({ allStatuses: [], allStatusesObject: {}, + conversationsObject: {}, maxId: 0, - notifications: { - desktopNotificationSilence: true, - maxId: 0, - minId: Number.POSITIVE_INFINITY, - data: [], - idStore: {}, - loading: false, - error: false, - fetcherId: null - }, + notifications: emptyNotifications(), favorites: new Set(), error: false, timelines: { @@ -72,16 +75,18 @@ const mergeOrAdd = (arr, obj, item) => { if (oldItem) { // We already have this, so only merge the new info. - merge(oldItem, item) + // We ignore null values to avoid overwriting existing properties with missing data + // we also skip 'user' because that is handled by users module + merge(oldItem, omitBy(item, (v, k) => v === null || k === 'user')) // Reactivity fix. oldItem.attachments.splice(oldItem.attachments.length) - return {item: oldItem, new: false} + return { item: oldItem, new: false } } else { // This is a new item, prepare it prepareStatus(item) arr.push(item) - obj[item.id] = item - return {item, new: true} + set(obj, item.id, item) + return { item, new: true } } } @@ -108,19 +113,52 @@ const sortTimeline = (timeline) => { return timeline } -const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, noIdUpdate = false, userId }) => { +// Add status to the global storages (arrays and objects maintaining statuses) except timelines +const addStatusToGlobalStorage = (state, data) => { + const result = mergeOrAdd(state.allStatuses, state.allStatusesObject, data) + if (result.new) { + // Add to conversation + const status = result.item + const conversationsObject = state.conversationsObject + const conversationId = status.statusnet_conversation_id + if (conversationsObject[conversationId]) { + conversationsObject[conversationId].push(status) + } else { + set(conversationsObject, conversationId, [status]) + } + } + return result +} + +// Remove status from the global storages (arrays and objects maintaining statuses) except timelines +const removeStatusFromGlobalStorage = (state, status) => { + remove(state.allStatuses, { id: status.id }) + + // TODO: Need to remove from allStatusesObject? + + // Remove possible notification + remove(state.notifications.data, ({ action: { id } }) => id === status.id) + + // Remove from conversation + const conversationId = status.statusnet_conversation_id + if (state.conversationsObject[conversationId]) { + remove(state.conversationsObject[conversationId], { id: status.id }) + } +} + +const addNewStatuses = (state, { statuses, showImmediately = false, timeline, user = {}, + noIdUpdate = false, userId }) => { // Sanity check if (!isArray(statuses)) { return false } const allStatuses = state.allStatuses - const allStatusesObject = state.allStatusesObject const timelineObject = state.timelines[timeline] const maxNew = statuses.length > 0 ? maxBy(statuses, 'id').id : 0 const minNew = statuses.length > 0 ? minBy(statuses, 'id').id : 0 - const newer = timeline && maxNew > timelineObject.maxId && statuses.length > 0 + const newer = timeline && (maxNew > timelineObject.maxId || timelineObject.maxId === 0) && statuses.length > 0 const older = timeline && (minNew < timelineObject.minId || timelineObject.minId === 0) && statuses.length > 0 if (!noIdUpdate && newer) { @@ -138,7 +176,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } const addStatus = (data, showImmediately, addToTimeline = true) => { - const result = mergeOrAdd(allStatuses, allStatusesObject, data) + const result = addStatusToGlobalStorage(state, data) const status = result.item if (result.new) { @@ -232,16 +270,13 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us }, 'deletion': (deletion) => { const uri = deletion.uri - - // Remove possible notification - const status = find(allStatuses, {uri}) + const status = find(allStatuses, { uri }) if (!status) { return } - remove(state.notifications.data, ({action: {id}}) => id === status.id) + removeStatusFromGlobalStorage(state, status) - remove(allStatuses, { uri }) if (timeline) { remove(timelineObject.statuses, { uri }) remove(timelineObject.visibleStatuses, { uri }) @@ -268,12 +303,12 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us } } -const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes }) => { - const allStatuses = state.allStatuses - const allStatusesObject = state.allStatusesObject +const addNewNotifications = (state, { dispatch, notifications, older, visibleNotificationTypes, rootGetters }) => { each(notifications, (notification) => { - notification.action = mergeOrAdd(allStatuses, allStatusesObject, notification.action).item - notification.status = notification.status && mergeOrAdd(allStatuses, allStatusesObject, notification.status).item + if (notification.type !== 'follow') { + notification.action = addStatusToGlobalStorage(state, notification.action).item + notification.status = notification.status && addStatusToGlobalStorage(state, notification.status).item + } // Only add a new notification if we don't have one for the same action if (!state.notifications.idStore.hasOwnProperty(notification.id)) { @@ -289,15 +324,32 @@ const addNewNotifications = (state, { dispatch, notifications, older, visibleNot if ('Notification' in window && window.Notification.permission === 'granted') { const notifObj = {} - const action = notification.action - const title = action.user.name - notifObj.icon = action.user.profile_image_url - notifObj.body = action.text // there's a problem that it doesn't put a space before links tho + const status = notification.status + const title = notification.from_profile.name + notifObj.icon = notification.from_profile.profile_image_url + let i18nString + switch (notification.type) { + case 'like': + i18nString = 'favorited_you' + break + case 'repeat': + i18nString = 'repeated_you' + break + case 'follow': + i18nString = 'followed_you' + break + } + + if (i18nString) { + notifObj.body = rootGetters.i18n.t('notifications.' + i18nString) + } else { + notifObj.body = notification.status.text + } // Shows first attached non-nsfw image, if any. Should add configuration for this somehow... - if (action.attachments && action.attachments.length > 0 && !action.nsfw && - action.attachments[0].mimetype.startsWith('image/')) { - notifObj.image = action.attachments[0].url + if (status && status.attachments && status.attachments.length > 0 && !status.nsfw && + status.attachments[0].mimetype.startsWith('image/')) { + notifObj.image = status.attachments[0].url } if (!notification.seen && !state.notifications.desktopNotificationSilence && visibleNotificationTypes.includes(notification.type)) { @@ -337,35 +389,86 @@ export const mutations = { oldTimeline.visibleStatusesObject = {} each(oldTimeline.visibleStatuses, (status) => { oldTimeline.visibleStatusesObject[status.id] = status }) }, - setNotificationFetcher (state, { fetcherId }) { - state.notifications.fetcherId = fetcherId - }, resetStatuses (state) { const emptyState = defaultState() Object.entries(emptyState).forEach(([key, value]) => { state[key] = value }) }, - clearTimeline (state, { timeline }) { - state.timelines[timeline] = emptyTl(state.timelines[timeline].userId) + clearTimeline (state, { timeline, excludeUserId = false }) { + const userId = excludeUserId ? state.timelines[timeline].userId : undefined + state.timelines[timeline] = emptyTl(userId) + }, + clearNotifications (state) { + state.notifications = emptyNotifications() }, setFavorited (state, { status, value }) { const newStatus = state.allStatusesObject[status.id] + + if (newStatus.favorited !== value) { + if (value) { + newStatus.fave_num++ + } else { + newStatus.fave_num-- + } + } + newStatus.favorited = value }, - setFavoritedConfirm (state, { status }) { + setFavoritedConfirm (state, { status, user }) { const newStatus = state.allStatusesObject[status.id] newStatus.favorited = status.favorited newStatus.fave_num = status.fave_num + const index = findIndex(newStatus.favoritedBy, { id: user.id }) + if (index !== -1 && !newStatus.favorited) { + newStatus.favoritedBy.splice(index, 1) + } else if (index === -1 && newStatus.favorited) { + newStatus.favoritedBy.push(user) + } + }, + setMutedStatus (state, status) { + const newStatus = state.allStatusesObject[status.id] + newStatus.thread_muted = status.thread_muted + + if (newStatus.thread_muted !== undefined) { + state.conversationsObject[newStatus.statusnet_conversation_id].forEach(status => { status.thread_muted = newStatus.thread_muted }) + } }, setRetweeted (state, { status, value }) { const newStatus = state.allStatusesObject[status.id] + + if (newStatus.repeated !== value) { + if (value) { + newStatus.repeat_num++ + } else { + newStatus.repeat_num-- + } + } + newStatus.repeated = value }, + setRetweetedConfirm (state, { status, user }) { + const newStatus = state.allStatusesObject[status.id] + newStatus.repeated = status.repeated + newStatus.repeat_num = status.repeat_num + const index = findIndex(newStatus.rebloggedBy, { id: user.id }) + if (index !== -1 && !newStatus.repeated) { + newStatus.rebloggedBy.splice(index, 1) + } else if (index === -1 && newStatus.repeated) { + newStatus.rebloggedBy.push(user) + } + }, setDeleted (state, { status }) { const newStatus = state.allStatusesObject[status.id] newStatus.deleted = true }, + setManyDeleted (state, condition) { + Object.values(state.allStatusesObject).forEach(status => { + if (condition(status)) { + status.deleted = true + } + }) + }, setLoading (state, { timeline, value }) { state.timelines[timeline].loading = value }, @@ -392,6 +495,24 @@ export const mutations = { }, queueFlush (state, { timeline, id }) { state.timelines[timeline].flushMarker = id + }, + addRepeats (state, { id, rebloggedByUsers, currentUser }) { + const newStatus = state.allStatusesObject[id] + newStatus.rebloggedBy = rebloggedByUsers.filter(_ => _) + // repeats stats can be incorrect based on polling condition, let's update them using the most recent data + newStatus.repeat_num = newStatus.rebloggedBy.length + newStatus.repeated = !!newStatus.rebloggedBy.find(({ id }) => currentUser.id === id) + }, + addFavs (state, { id, favoritedByUsers, currentUser }) { + const newStatus = state.allStatusesObject[id] + newStatus.favoritedBy = favoritedByUsers.filter(_ => _) + // favorites stats can be incorrect based on polling condition, let's update them using the most recent data + newStatus.fave_num = newStatus.favoritedBy.length + newStatus.favorited = !!newStatus.favoritedBy.find(({ id }) => currentUser.id === id) + }, + updateStatusWithPoll (state, { id, poll }) { + const status = state.allStatusesObject[id] + status.poll = poll } } @@ -401,8 +522,8 @@ const statuses = { addNewStatuses ({ rootState, commit }, { statuses, showImmediately = false, timeline = false, noIdUpdate = false, userId }) { commit('addNewStatuses', { statuses, showImmediately, timeline, noIdUpdate, user: rootState.users.currentUser, userId }) }, - addNewNotifications ({ rootState, commit, dispatch }, { notifications, older }) { - commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older }) + addNewNotifications ({ rootState, commit, dispatch, rootGetters }, { notifications, older }) { + commit('addNewNotifications', { visibleNotificationTypes: visibleNotificationTypes(rootState), dispatch, notifications, older, rootGetters }) }, setError ({ rootState, commit }, { value }) { commit('setError', { value }) @@ -416,54 +537,56 @@ const statuses = { setNotificationsSilence ({ rootState, commit }, { value }) { commit('setNotificationsSilence', { value }) }, - stopFetchingNotifications ({ rootState, commit }) { - if (rootState.statuses.notifications.fetcherId) { - window.clearInterval(rootState.statuses.notifications.fetcherId) - } - commit('setNotificationFetcher', { fetcherId: null }) - }, deleteStatus ({ rootState, commit }, status) { commit('setDeleted', { status }) apiService.deleteStatus({ id: status.id, credentials: rootState.users.currentUser.credentials }) }, + markStatusesAsDeleted ({ commit }, condition) { + commit('setManyDeleted', condition) + }, favorite ({ rootState, commit }, status) { // Optimistic favoriting... commit('setFavorited', { status, value: true }) - apiService.favorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) - .then(response => { - if (response.ok) { - return response.json() - } else { - return {} - } - }) - .then(status => { - commit('setFavoritedConfirm', { status }) - }) + rootState.api.backendInteractor.favorite(status.id) + .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser })) }, unfavorite ({ rootState, commit }, status) { - // Optimistic favoriting... + // Optimistic unfavoriting... commit('setFavorited', { status, value: false }) - apiService.unfavorite({ id: status.id, credentials: rootState.users.currentUser.credentials }) - .then(response => { - if (response.ok) { - return response.json() - } else { - return {} - } - }) - .then(status => { - commit('setFavoritedConfirm', { status }) - }) + rootState.api.backendInteractor.unfavorite(status.id) + .then(status => commit('setFavoritedConfirm', { status, user: rootState.users.currentUser })) + }, + fetchPinnedStatuses ({ rootState, dispatch }, userId) { + rootState.api.backendInteractor.fetchPinnedStatuses(userId) + .then(statuses => dispatch('addNewStatuses', { statuses, timeline: 'user', userId, showImmediately: true, noIdUpdate: true })) + }, + pinStatus ({ rootState, dispatch }, statusId) { + return rootState.api.backendInteractor.pinOwnStatus(statusId) + .then((status) => dispatch('addNewStatuses', { statuses: [status] })) + }, + unpinStatus ({ rootState, dispatch }, statusId) { + rootState.api.backendInteractor.unpinOwnStatus(statusId) + .then((status) => dispatch('addNewStatuses', { statuses: [status] })) + }, + muteConversation ({ rootState, commit }, statusId) { + return rootState.api.backendInteractor.muteConversation(statusId) + .then((status) => commit('setMutedStatus', status)) + }, + unmuteConversation ({ rootState, commit }, statusId) { + return rootState.api.backendInteractor.unmuteConversation(statusId) + .then((status) => commit('setMutedStatus', status)) }, retweet ({ rootState, commit }, status) { // Optimistic retweeting... commit('setRetweeted', { status, value: true }) - apiService.retweet({ id: status.id, credentials: rootState.users.currentUser.credentials }) + rootState.api.backendInteractor.retweet(status.id) + .then(status => commit('setRetweetedConfirm', { status: status.retweeted_status, user: rootState.users.currentUser })) }, unretweet ({ rootState, commit }, status) { + // Optimistic unretweeting... commit('setRetweeted', { status, value: false }) - apiService.unretweet({ id: status.id, credentials: rootState.users.currentUser.credentials }) + rootState.api.backendInteractor.unretweet(status.id) + .then(status => commit('setRetweetedConfirm', { status, user: rootState.users.currentUser })) }, queueFlush ({ rootState, commit }, { timeline, id }) { commit('queueFlush', { timeline, id }) @@ -474,6 +597,31 @@ const statuses = { id: rootState.statuses.notifications.maxId, credentials: rootState.users.currentUser.credentials }) + }, + fetchFavsAndRepeats ({ rootState, commit }, id) { + Promise.all([ + rootState.api.backendInteractor.fetchFavoritedByUsers(id), + rootState.api.backendInteractor.fetchRebloggedByUsers(id) + ]).then(([favoritedByUsers, rebloggedByUsers]) => { + commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser }) + commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser }) + }) + }, + fetchFavs ({ rootState, commit }, id) { + rootState.api.backendInteractor.fetchFavoritedByUsers(id) + .then(favoritedByUsers => commit('addFavs', { id, favoritedByUsers, currentUser: rootState.users.currentUser })) + }, + fetchRepeats ({ rootState, commit }, id) { + rootState.api.backendInteractor.fetchRebloggedByUsers(id) + .then(rebloggedByUsers => commit('addRepeats', { id, rebloggedByUsers, currentUser: rootState.users.currentUser })) + }, + search (store, { q, resolve, limit, offset, following }) { + return store.rootState.api.backendInteractor.search2({ q, resolve, limit, offset, following }) + .then((data) => { + store.commit('addNewUsers', data.accounts) + store.commit('addNewStatuses', { statuses: data.statuses }) + return data + }) } }, mutations diff --git a/src/modules/users.js b/src/modules/users.js index 26884750..4d02f8d7 100644 --- a/src/modules/users.js +++ b/src/modules/users.js @@ -1,9 +1,8 @@ import backendInteractorService from '../services/backend_interactor_service/backend_interactor_service.js' -import { compact, map, each, merge, find } from 'lodash' +import oauthApi from '../services/new_api/oauth.js' +import { compact, map, each, merge, last, concat, uniq } from 'lodash' import { set } from 'vue' import { registerPushNotifications, unregisterPushNotifications } from '../services/push/push.js' -import oauthApi from '../services/new_api/oauth' -import { humanizeErrors } from './errors' // TODO: Unify with mergeOrAdd in statuses.js export const mergeOrAdd = (arr, obj, item) => { @@ -16,9 +15,9 @@ export const mergeOrAdd = (arr, obj, item) => { } else { // This is a new item, prepare it arr.push(item) - obj[item.id] = item + set(obj, item.id, item) if (item.screen_name && !item.screen_name.includes('@')) { - obj[item.screen_name] = item + set(obj, item.screen_name.toLowerCase(), item) } return { item, new: true } } @@ -32,11 +31,62 @@ const getNotificationPermission = () => { return Promise.resolve(Notification.permission) } +const blockUser = (store, id) => { + return store.rootState.api.backendInteractor.blockUser(id) + .then((relationship) => { + store.commit('updateUserRelationship', [relationship]) + store.commit('addBlockId', id) + store.commit('removeStatus', { timeline: 'friends', userId: id }) + store.commit('removeStatus', { timeline: 'public', userId: id }) + store.commit('removeStatus', { timeline: 'publicAndExternal', userId: id }) + }) +} + +const unblockUser = (store, id) => { + return store.rootState.api.backendInteractor.unblockUser(id) + .then((relationship) => store.commit('updateUserRelationship', [relationship])) +} + +const muteUser = (store, id) => { + return store.rootState.api.backendInteractor.muteUser(id) + .then((relationship) => { + store.commit('updateUserRelationship', [relationship]) + store.commit('addMuteId', id) + }) +} + +const unmuteUser = (store, id) => { + return store.rootState.api.backendInteractor.unmuteUser(id) + .then((relationship) => store.commit('updateUserRelationship', [relationship])) +} + export const mutations = { setMuted (state, { user: { id }, muted }) { const user = state.usersObject[id] set(user, 'muted', muted) }, + tagUser (state, { user: { id }, tag }) { + const user = state.usersObject[id] + const tags = user.tags || [] + const newTags = tags.concat([tag]) + set(user, 'tags', newTags) + }, + untagUser (state, { user: { id }, tag }) { + const user = state.usersObject[id] + const tags = user.tags || [] + const newTags = tags.filter(t => t !== tag) + set(user, 'tags', newTags) + }, + updateRight (state, { user: { id }, right, value }) { + const user = state.usersObject[id] + let newRights = user.rights + newRights[right] = value + set(user, 'rights', newRights) + }, + updateActivationStatus (state, { user: { id }, status }) { + const user = state.usersObject[id] + set(user, 'deactivated', !status) + }, setCurrentUser (state, user) { state.lastLoginName = user.screen_name state.currentUser = merge(state.currentUser || {}, user) @@ -51,58 +101,86 @@ export const mutations = { endLogin (state) { state.loggingIn = false }, - // TODO Clean after ourselves? - addFriends (state, { id, friends, page }) { + saveFriendIds (state, { id, friendIds }) { const user = state.usersObject[id] - each(friends, friend => { - if (!find(user.friends, { id: friend.id })) { - user.friends.push(friend) - } - }) - user.friendsPage = page + 1 + user.friendIds = uniq(concat(user.friendIds, friendIds)) }, - addFollowers (state, { id, followers, page }) { + saveFollowerIds (state, { id, followerIds }) { const user = state.usersObject[id] - each(followers, follower => { - if (!find(user.followers, { id: follower.id })) { - user.followers.push(follower) - } - }) - user.followersPage = page + 1 + user.followerIds = uniq(concat(user.followerIds, followerIds)) }, // Because frontend doesn't have a reason to keep these stuff in memory // outside of viewing someones user profile. clearFriends (state, userId) { const user = state.usersObject[userId] - if (!user) { - return + if (user) { + set(user, 'friendIds', []) } - user.friends = [] - user.friendsPage = 0 }, clearFollowers (state, userId) { const user = state.usersObject[userId] - if (!user) { - return + if (user) { + set(user, 'followerIds', []) } - user.followers = [] - user.followersPage = 0 }, addNewUsers (state, users) { each(users, (user) => mergeOrAdd(state.users, state.usersObject, user)) }, - saveBlocks (state, blockIds) { + updateUserRelationship (state, relationships) { + relationships.forEach((relationship) => { + const user = state.usersObject[relationship.id] + if (user) { + user.follows_you = relationship.followed_by + user.following = relationship.following + user.muted = relationship.muting + user.statusnet_blocking = relationship.blocking + user.subscribed = relationship.subscribing + } + }) + }, + updateBlocks (state, blockedUsers) { + // Reset statusnet_blocking of all fetched users + each(state.users, (user) => { user.statusnet_blocking = false }) + each(blockedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user)) + }, + saveBlockIds (state, blockIds) { state.currentUser.blockIds = blockIds }, - saveMutes (state, muteIds) { + addBlockId (state, blockId) { + if (state.currentUser.blockIds.indexOf(blockId) === -1) { + state.currentUser.blockIds.push(blockId) + } + }, + updateMutes (state, mutedUsers) { + // Reset muted of all fetched users + each(state.users, (user) => { user.muted = false }) + each(mutedUsers, (user) => mergeOrAdd(state.users, state.usersObject, user)) + }, + saveMuteIds (state, muteIds) { state.currentUser.muteIds = muteIds }, + addMuteId (state, muteId) { + if (state.currentUser.muteIds.indexOf(muteId) === -1) { + state.currentUser.muteIds.push(muteId) + } + }, + setPinnedToUser (state, status) { + const user = state.usersObject[status.user.id] + const index = user.pinnedStatusIds.indexOf(status.id) + if (status.pinned && index === -1) { + user.pinnedStatusIds.push(status.id) + } else if (!status.pinned && index !== -1) { + user.pinnedStatusIds.splice(index, 1) + } + }, setUserForStatus (state, status) { status.user = state.usersObject[status.user.id] }, setUserForNotification (state, notification) { - notification.action.user = state.usersObject[notification.action.user.id] - notification.from_profile = state.usersObject[notification.action.user.id] + if (notification.type !== 'follow') { + notification.action.user = state.usersObject[notification.action.user.id] + } + notification.from_profile = state.usersObject[notification.from_profile.id] }, setColor (state, { user: { id }, highlighted }) { const user = state.usersObject[id] @@ -122,12 +200,14 @@ export const mutations = { } export const getters = { - userById: state => id => - state.users.find(user => user.id === id), - userByName: state => name => - state.users.find(user => user.screen_name && - (user.screen_name.toLowerCase() === name.toLowerCase()) - ) + findUser: state => query => { + const result = state.usersObject[query] + // In case it's a screen_name, we can try searching case-insensitive + if (!result && typeof query === 'string') { + return state.usersObject[query.toLowerCase()] + } + return result + } } export const defaultState = { @@ -147,59 +227,74 @@ const users = { actions: { fetchUser (store, id) { return store.rootState.api.backendInteractor.fetchUser({ id }) - .then((user) => store.commit('addNewUsers', [user])) + .then((user) => { + store.commit('addNewUsers', [user]) + return user + }) + }, + fetchUserRelationship (store, id) { + if (store.state.currentUser) { + store.rootState.api.backendInteractor.fetchUserRelationship({ id }) + .then((relationships) => store.commit('updateUserRelationship', relationships)) + } }, fetchBlocks (store) { return store.rootState.api.backendInteractor.fetchBlocks() .then((blocks) => { - store.commit('saveBlocks', map(blocks, 'id')) - store.commit('addNewUsers', blocks) + store.commit('saveBlockIds', map(blocks, 'id')) + store.commit('updateBlocks', blocks) return blocks }) }, blockUser (store, id) { - return store.rootState.api.backendInteractor.blockUser(id) - .then((user) => store.commit('addNewUsers', [user])) + return blockUser(store, id) }, unblockUser (store, id) { - return store.rootState.api.backendInteractor.unblockUser(id) - .then((user) => store.commit('addNewUsers', [user])) + return unblockUser(store, id) + }, + blockUsers (store, ids = []) { + return Promise.all(ids.map(id => blockUser(store, id))) + }, + unblockUsers (store, ids = []) { + return Promise.all(ids.map(id => unblockUser(store, id))) }, fetchMutes (store) { return store.rootState.api.backendInteractor.fetchMutes() - .then((mutedUsers) => { - each(mutedUsers, (user) => { user.muted = true }) - store.commit('addNewUsers', mutedUsers) - store.commit('saveMutes', map(mutedUsers, 'id')) + .then((mutes) => { + store.commit('updateMutes', mutes) + store.commit('saveMuteIds', map(mutes, 'id')) + return mutes }) }, muteUser (store, id) { - return store.state.api.backendInteractor.setUserMute({ id, muted: true }) - .then((user) => store.commit('addNewUsers', [user])) + return muteUser(store, id) }, unmuteUser (store, id) { - return store.state.api.backendInteractor.setUserMute({ id, muted: false }) - .then((user) => store.commit('addNewUsers', [user])) + return unmuteUser(store, id) }, - addFriends ({ rootState, commit }, fetchBy) { - return new Promise((resolve, reject) => { - const user = rootState.users.usersObject[fetchBy] - const page = user.friendsPage || 1 - rootState.api.backendInteractor.fetchFriends({ id: user.id, page }) - .then((friends) => { - commit('addFriends', { id: user.id, friends, page }) - resolve(friends) - }).catch(() => { - reject() - }) - }) + muteUsers (store, ids = []) { + return Promise.all(ids.map(id => muteUser(store, id))) }, - addFollowers ({ rootState, commit }, fetchBy) { - const user = rootState.users.usersObject[fetchBy] - const page = user.followersPage || 1 - return rootState.api.backendInteractor.fetchFollowers({ id: user.id, page }) + unmuteUsers (store, ids = []) { + return Promise.all(ids.map(id => unmuteUser(store, id))) + }, + fetchFriends ({ rootState, commit }, id) { + const user = rootState.users.usersObject[id] + const maxId = last(user.friendIds) + return rootState.api.backendInteractor.fetchFriends({ id, maxId }) + .then((friends) => { + commit('addNewUsers', friends) + commit('saveFriendIds', { id, friendIds: map(friends, 'id') }) + return friends + }) + }, + fetchFollowers ({ rootState, commit }, id) { + const user = rootState.users.usersObject[id] + const maxId = last(user.followerIds) + return rootState.api.backendInteractor.fetchFollowers({ id, maxId }) .then((followers) => { - commit('addFollowers', { id: user.id, followers, page }) + commit('addNewUsers', followers) + commit('saveFollowerIds', { id, followerIds: map(followers, 'id') }) return followers }) }, @@ -209,6 +304,14 @@ const users = { clearFollowers ({ commit }, userId) { commit('clearFollowers', userId) }, + subscribeUser ({ rootState, commit }, id) { + return rootState.api.backendInteractor.subscribeUser(id) + .then((relationship) => commit('updateUserRelationship', [relationship])) + }, + unsubscribeUser ({ rootState, commit }, id) { + return rootState.api.backendInteractor.unsubscribeUser(id) + .then((relationship) => commit('updateUserRelationship', [relationship])) + }, registerPushNotifications (store) { const token = store.state.currentUser.credentials const vapidPublicKey = store.rootState.instance.vapidPublicKey @@ -222,19 +325,26 @@ const users = { unregisterPushNotifications(token) }, + addNewUsers ({ commit }, users) { + commit('addNewUsers', users) + }, addNewStatuses (store, { statuses }) { const users = map(statuses, 'user') const retweetedUsers = compact(map(statuses, 'retweeted_status.user')) store.commit('addNewUsers', users) store.commit('addNewUsers', retweetedUsers) - // Reconnect users to statuses each(statuses, (status) => { + // Reconnect users to statuses store.commit('setUserForStatus', status) + // Set pinned statuses to user + store.commit('setPinnedToUser', status) }) - // Reconnect users to retweets each(compact(map(statuses, 'retweeted_status')), (status) => { + // Reconnect users to retweets store.commit('setUserForStatus', status) + // Set pinned retweets to user + store.commit('setPinnedToUser', status) }) }, addNewNotifications (store, { notifications }) { @@ -244,60 +354,70 @@ const users = { const notificationsObject = store.rootState.statuses.notifications.idStore const relevantNotifications = Object.entries(notificationsObject) - .filter(([k, val]) => notificationIds.includes(k)) - .map(([k, val]) => val) + .filter(([k, val]) => notificationIds.includes(k)) + .map(([k, val]) => val) // Reconnect users to notifications each(relevantNotifications, (notification) => { store.commit('setUserForNotification', notification) }) }, + searchUsers (store, query) { + return store.rootState.api.backendInteractor.searchUsers(query) + .then((users) => { + store.commit('addNewUsers', users) + return users + }) + }, async signUp (store, userInfo) { store.commit('signUpPending') let rootState = store.rootState - let response = await rootState.api.backendInteractor.register(userInfo) - if (response.ok) { - const data = { - oauth: rootState.oauth, - instance: rootState.instance.server - } - let app = await oauthApi.getOrCreateApp(data) - let result = await oauthApi.getTokenWithCredentials({ - app, - instance: data.instance, - username: userInfo.username, - password: userInfo.password - }) + try { + let data = await rootState.api.backendInteractor.register(userInfo) store.commit('signUpSuccess') - store.commit('setToken', result.access_token) - store.dispatch('loginUser', result.access_token) - } else { - const data = await response.json() - let errors = JSON.parse(data.error) - // replace ap_id with username - if (errors.ap_id) { - errors.username = errors.ap_id - delete errors.ap_id - } - errors = humanizeErrors(errors) + store.commit('setToken', data.access_token) + store.dispatch('loginUser', data.access_token) + } catch (e) { + let errors = e.message store.commit('signUpFailure', errors) - throw Error(errors) + throw e } }, async getCaptcha (store) { - return await store.rootState.api.backendInteractor.getCaptcha() + return store.rootState.api.backendInteractor.getCaptcha() }, logout (store) { - store.commit('clearCurrentUser') - store.dispatch('disconnectFromChat') - store.commit('setToken', false) - store.dispatch('stopFetching', 'friends') - store.commit('setBackendInteractor', backendInteractorService()) - store.dispatch('stopFetchingNotifications') - store.commit('resetStatuses') + const { oauth, instance } = store.rootState + + const data = { + ...oauth, + commit: store.commit, + instance: instance.server + } + + return oauthApi.getOrCreateApp(data) + .then((app) => { + const params = { + app, + instance: data.instance, + token: oauth.userToken + } + + return oauthApi.revokeToken(params) + }) + .then(() => { + store.commit('clearCurrentUser') + store.dispatch('disconnectFromSocket') + store.commit('clearToken') + store.dispatch('stopFetching', 'friends') + store.commit('setBackendInteractor', backendInteractorService(store.getters.getToken())) + store.dispatch('stopFetching', 'notifications') + store.commit('clearNotifications') + store.commit('resetStatuses') + }) }, loginUser (store, accessToken) { return new Promise((resolve, reject) => { @@ -328,7 +448,10 @@ const users = { } // Start getting fresh posts. - store.dispatch('startFetching', { timeline: 'friends' }) + store.dispatch('startFetchingTimeline', { timeline: 'friends' }) + + // Start fetching notifications + store.dispatch('startFetchingNotifications') // Get user mutes store.dispatch('fetchMutes') @@ -341,19 +464,19 @@ const users = { // Authentication failed commit('endLogin') if (response.status === 401) { - reject('Wrong username or password') + reject(new Error('Wrong username or password')) } else { - reject('An error occurred, please try again') + reject(new Error('An error occurred, please try again')) } } commit('endLogin') resolve() }) - .catch((error) => { - console.log(error) - commit('endLogin') - reject('Failed to connect to server, try again') - }) + .catch((error) => { + console.log(error) + commit('endLogin') + reject(new Error('Failed to connect to server, try again')) + }) }) } } diff --git a/src/services/api/api.service.js b/src/services/api/api.service.js index 2de87026..887d7d7a 100644 --- a/src/services/api/api.service.js +++ b/src/services/api/api.service.js @@ -1,53 +1,75 @@ +import { each, map, concat, last } from 'lodash' +import { parseStatus, parseUser, parseNotification, parseAttachment } from '../entity_normalizer/entity_normalizer.service.js' +import 'whatwg-fetch' +import { RegistrationError, StatusCodeError } from '../errors/errors' + /* eslint-env browser */ -const LOGIN_URL = '/api/account/verify_credentials.json' -const FRIENDS_TIMELINE_URL = '/api/statuses/friends_timeline.json' -const ALL_FOLLOWING_URL = '/api/qvitter/allfollowing' -const PUBLIC_TIMELINE_URL = '/api/statuses/public_timeline.json' -const PUBLIC_AND_EXTERNAL_TIMELINE_URL = '/api/statuses/public_and_external_timeline.json' -const TAG_TIMELINE_URL = '/api/statusnet/tags/timeline' -const FAVORITE_URL = '/api/favorites/create' -const UNFAVORITE_URL = '/api/favorites/destroy' -const RETWEET_URL = '/api/statuses/retweet' -const UNRETWEET_URL = '/api/statuses/unretweet' -const STATUS_UPDATE_URL = '/api/statuses/update.json' -const STATUS_DELETE_URL = '/api/statuses/destroy' -const STATUS_URL = '/api/statuses/show' -const MEDIA_UPLOAD_URL = '/api/statusnet/media/upload' -const CONVERSATION_URL = '/api/statusnet/conversation' -const MENTIONS_URL = '/api/statuses/mentions.json' -const DM_TIMELINE_URL = '/api/statuses/dm_timeline.json' -const FOLLOWERS_URL = '/api/statuses/followers.json' -const FRIENDS_URL = '/api/statuses/friends.json' -const BLOCKS_URL = '/api/statuses/blocks.json' -const FOLLOWING_URL = '/api/friendships/create.json' -const UNFOLLOWING_URL = '/api/friendships/destroy.json' -const QVITTER_USER_PREF_URL = '/api/qvitter/set_profile_pref.json' -const REGISTRATION_URL = '/api/account/register.json' -const AVATAR_UPDATE_URL = '/api/qvitter/update_avatar.json' -const BG_UPDATE_URL = '/api/qvitter/update_background_image.json' -const BANNER_UPDATE_URL = '/api/account/update_profile_banner.json' -const PROFILE_UPDATE_URL = '/api/account/update_profile.json' -const EXTERNAL_PROFILE_URL = '/api/externalprofile/show.json' -const QVITTER_USER_TIMELINE_URL = '/api/qvitter/statuses/user_timeline.json' -const QVITTER_USER_NOTIFICATIONS_URL = '/api/qvitter/statuses/notifications.json' const QVITTER_USER_NOTIFICATIONS_READ_URL = '/api/qvitter/statuses/notifications/read.json' -const BLOCKING_URL = '/api/blocks/create.json' -const UNBLOCKING_URL = '/api/blocks/destroy.json' -const USER_URL = '/api/users/show.json' +const BLOCKS_IMPORT_URL = '/api/pleroma/blocks_import' const FOLLOW_IMPORT_URL = '/api/pleroma/follow_import' const DELETE_ACCOUNT_URL = '/api/pleroma/delete_account' const CHANGE_PASSWORD_URL = '/api/pleroma/change_password' -const FOLLOW_REQUESTS_URL = '/api/pleroma/friend_requests' -const APPROVE_USER_URL = '/api/pleroma/friendships/approve' -const DENY_USER_URL = '/api/pleroma/friendships/deny' +const TAG_USER_URL = '/api/pleroma/admin/users/tag' +const PERMISSION_GROUP_URL = (screenName, right) => `/api/pleroma/admin/users/${screenName}/permission_group/${right}` +const ACTIVATION_STATUS_URL = screenName => `/api/pleroma/admin/users/${screenName}/activation_status` +const ADMIN_USERS_URL = '/api/pleroma/admin/users' const SUGGESTIONS_URL = '/api/v1/suggestions' +const NOTIFICATION_SETTINGS_URL = '/api/pleroma/notification_settings' -const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites' +const MFA_SETTINGS_URL = '/api/pleroma/profile/mfa' +const MFA_BACKUP_CODES_URL = '/api/pleroma/profile/mfa/backup_codes' -import { each, map } from 'lodash' -import { parseStatus, parseUser, parseNotification } from '../entity_normalizer/entity_normalizer.service.js' -import 'whatwg-fetch' -import { StatusCodeError } from '../errors/errors' +const MFA_SETUP_OTP_URL = '/api/pleroma/profile/mfa/setup/totp' +const MFA_CONFIRM_OTP_URL = '/api/pleroma/profile/mfa/confirm/totp' +const MFA_DISABLE_OTP_URL = '/api/pleroma/profile/mfa/totp' + +const MASTODON_LOGIN_URL = '/api/v1/accounts/verify_credentials' +const MASTODON_REGISTRATION_URL = '/api/v1/accounts' +const MASTODON_USER_FAVORITES_TIMELINE_URL = '/api/v1/favourites' +const MASTODON_USER_NOTIFICATIONS_URL = '/api/v1/notifications' +const MASTODON_FAVORITE_URL = id => `/api/v1/statuses/${id}/favourite` +const MASTODON_UNFAVORITE_URL = id => `/api/v1/statuses/${id}/unfavourite` +const MASTODON_RETWEET_URL = id => `/api/v1/statuses/${id}/reblog` +const MASTODON_UNRETWEET_URL = id => `/api/v1/statuses/${id}/unreblog` +const MASTODON_DELETE_URL = id => `/api/v1/statuses/${id}` +const MASTODON_FOLLOW_URL = id => `/api/v1/accounts/${id}/follow` +const MASTODON_UNFOLLOW_URL = id => `/api/v1/accounts/${id}/unfollow` +const MASTODON_FOLLOWING_URL = id => `/api/v1/accounts/${id}/following` +const MASTODON_FOLLOWERS_URL = id => `/api/v1/accounts/${id}/followers` +const MASTODON_FOLLOW_REQUESTS_URL = '/api/v1/follow_requests' +const MASTODON_APPROVE_USER_URL = id => `/api/v1/follow_requests/${id}/authorize` +const MASTODON_DENY_USER_URL = id => `/api/v1/follow_requests/${id}/reject` +const MASTODON_DIRECT_MESSAGES_TIMELINE_URL = '/api/v1/timelines/direct' +const MASTODON_PUBLIC_TIMELINE = '/api/v1/timelines/public' +const MASTODON_USER_HOME_TIMELINE_URL = '/api/v1/timelines/home' +const MASTODON_STATUS_URL = id => `/api/v1/statuses/${id}` +const MASTODON_STATUS_CONTEXT_URL = id => `/api/v1/statuses/${id}/context` +const MASTODON_USER_URL = '/api/v1/accounts' +const MASTODON_USER_RELATIONSHIPS_URL = '/api/v1/accounts/relationships' +const MASTODON_USER_TIMELINE_URL = id => `/api/v1/accounts/${id}/statuses` +const MASTODON_TAG_TIMELINE_URL = tag => `/api/v1/timelines/tag/${tag}` +const MASTODON_USER_BLOCKS_URL = '/api/v1/blocks/' +const MASTODON_USER_MUTES_URL = '/api/v1/mutes/' +const MASTODON_BLOCK_USER_URL = id => `/api/v1/accounts/${id}/block` +const MASTODON_UNBLOCK_USER_URL = id => `/api/v1/accounts/${id}/unblock` +const MASTODON_MUTE_USER_URL = id => `/api/v1/accounts/${id}/mute` +const MASTODON_UNMUTE_USER_URL = id => `/api/v1/accounts/${id}/unmute` +const MASTODON_SUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/subscribe` +const MASTODON_UNSUBSCRIBE_USER = id => `/api/v1/pleroma/accounts/${id}/unsubscribe` +const MASTODON_POST_STATUS_URL = '/api/v1/statuses' +const MASTODON_MEDIA_UPLOAD_URL = '/api/v1/media' +const MASTODON_VOTE_URL = id => `/api/v1/polls/${id}/votes` +const MASTODON_POLL_URL = id => `/api/v1/polls/${id}` +const MASTODON_STATUS_FAVORITEDBY_URL = id => `/api/v1/statuses/${id}/favourited_by` +const MASTODON_STATUS_REBLOGGEDBY_URL = id => `/api/v1/statuses/${id}/reblogged_by` +const MASTODON_PROFILE_UPDATE_URL = '/api/v1/accounts/update_credentials' +const MASTODON_REPORT_USER_URL = '/api/v1/reports' +const MASTODON_PIN_OWN_STATUS = id => `/api/v1/statuses/${id}/pin` +const MASTODON_UNPIN_OWN_STATUS = id => `/api/v1/statuses/${id}/unpin` +const MASTODON_MUTE_CONVERSATION = id => `/api/v1/statuses/${id}/mute` +const MASTODON_UNMUTE_CONVERSATION = id => `/api/v1/statuses/${id}/unmute` +const MASTODON_SEARCH_2 = `/api/v2/search` +const MASTODON_USER_SEARCH_URL = '/api/v1/accounts/search' const oldfetch = window.fetch @@ -59,94 +81,96 @@ let fetch = (url, options) => { return oldfetch(fullUrl, options) } -// Params -// cropH -// cropW -// cropX -// cropY -// img (base 64 encodend data url) -const updateAvatar = ({credentials, params}) => { - let url = AVATAR_UPDATE_URL +const promisedRequest = ({ method, url, params, payload, credentials, headers = {} }) => { + const options = { + method, + headers: { + 'Accept': 'application/json', + 'Content-Type': 'application/json', + ...headers + } + } + if (params) { + url += '?' + Object.entries(params) + .map(([key, value]) => encodeURIComponent(key) + '=' + encodeURIComponent(value)) + .join('&') + } + if (payload) { + options.body = JSON.stringify(payload) + } + if (credentials) { + options.headers = { + ...options.headers, + ...authHeaders(credentials) + } + } + return fetch(url, options) + .then((response) => { + return new Promise((resolve, reject) => response.json() + .then((json) => { + if (!response.ok) { + return reject(new StatusCodeError(response.status, json, { url, options }, response)) + } + return resolve(json) + })) + }) +} +const updateNotificationSettings = ({ credentials, settings }) => { const form = new FormData() - each(params, (value, key) => { - if (value) { - form.append(key, value) - } + each(settings, (value, key) => { + form.append(key, value) }) - return fetch(url, { + return fetch(NOTIFICATION_SETTINGS_URL, { headers: authHeaders(credentials), - method: 'POST', + method: 'PUT', body: form }).then((data) => data.json()) } -const updateBg = ({credentials, params}) => { - let url = BG_UPDATE_URL - +const updateAvatar = ({ credentials, avatar }) => { const form = new FormData() - - each(params, (value, key) => { - if (value) { - form.append(key, value) - } - }) - - return fetch(url, { + form.append('avatar', avatar) + return fetch(MASTODON_PROFILE_UPDATE_URL, { headers: authHeaders(credentials), - method: 'POST', + method: 'PATCH', body: form }).then((data) => data.json()) + .then((data) => parseUser(data)) } -// Params -// height -// width -// offset_left -// offset_top -// banner (base 64 encodend data url) -const updateBanner = ({credentials, params}) => { - let url = BANNER_UPDATE_URL - +const updateBg = ({ credentials, background }) => { const form = new FormData() - - each(params, (value, key) => { - if (value) { - form.append(key, value) - } - }) - - return fetch(url, { + form.append('pleroma_background_image', background) + return fetch(MASTODON_PROFILE_UPDATE_URL, { headers: authHeaders(credentials), - method: 'POST', + method: 'PATCH', body: form - }).then((data) => data.json()) + }) + .then((data) => data.json()) + .then((data) => parseUser(data)) } -// Params -// name -// url -// location -// description -const updateProfile = ({credentials, params}) => { - // Always include these fields, because they might be empty or false - const fields = ['description', 'locked', 'no_rich_text', 'hide_follows', 'hide_followers', 'show_role'] - let url = PROFILE_UPDATE_URL - +const updateBanner = ({ credentials, banner }) => { const form = new FormData() - - each(params, (value, key) => { - if (fields.includes(key) || value) { - form.append(key, value) - } - }) - return fetch(url, { + form.append('header', banner) + return fetch(MASTODON_PROFILE_UPDATE_URL, { headers: authHeaders(credentials), - method: 'POST', + method: 'PATCH', body: form }).then((data) => data.json()) + .then((data) => parseUser(data)) +} + +const updateProfile = ({ credentials, params }) => { + return promisedRequest({ + url: MASTODON_PROFILE_UPDATE_URL, + method: 'PATCH', + payload: params, + credentials + }).then((data) => parseUser(data)) } // Params needed: @@ -161,19 +185,28 @@ const updateProfile = ({credentials, params}) => { // homepage // location // token -const register = (params) => { - const form = new FormData() - - each(params, (value, key) => { - if (value) { - form.append(key, value) - } - }) - - return fetch(REGISTRATION_URL, { +const register = ({ params, credentials }) => { + const { nickname, ...rest } = params + return fetch(MASTODON_REGISTRATION_URL, { method: 'POST', - body: form + headers: { + ...authHeaders(credentials), + 'Content-Type': 'application/json' + }, + body: JSON.stringify({ + nickname, + locale: 'en_US', + agreement: true, + ...rest + }) }) + .then((response) => { + if (response.ok) { + return response.json() + } else { + return response.json().then((error) => { throw new RegistrationError(error) }) + } + }) } const getCaptcha = () => fetch('/api/pleroma/captcha').then(resp => resp.json()) @@ -186,64 +219,80 @@ const authHeaders = (accessToken) => { } } -const externalProfile = ({profileUrl, credentials}) => { - let url = `${EXTERNAL_PROFILE_URL}?profileurl=${profileUrl}` +const followUser = ({ id, credentials }) => { + let url = MASTODON_FOLLOW_URL(id) return fetch(url, { headers: authHeaders(credentials), - method: 'GET' + method: 'POST' }).then((data) => data.json()) } -const followUser = ({id, credentials}) => { - let url = `${FOLLOWING_URL}?user_id=${id}` +const unfollowUser = ({ id, credentials }) => { + let url = MASTODON_UNFOLLOW_URL(id) return fetch(url, { headers: authHeaders(credentials), method: 'POST' }).then((data) => data.json()) } -const unfollowUser = ({id, credentials}) => { - let url = `${UNFOLLOWING_URL}?user_id=${id}` - return fetch(url, { - headers: authHeaders(credentials), - method: 'POST' - }).then((data) => data.json()) +const pinOwnStatus = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_PIN_OWN_STATUS(id), credentials, method: 'POST' }) + .then((data) => parseStatus(data)) } -const blockUser = ({id, credentials}) => { - let url = `${BLOCKING_URL}?user_id=${id}` - return fetch(url, { +const unpinOwnStatus = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_UNPIN_OWN_STATUS(id), credentials, method: 'POST' }) + .then((data) => parseStatus(data)) +} + +const muteConversation = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_MUTE_CONVERSATION(id), credentials, method: 'POST' }) + .then((data) => parseStatus(data)) +} + +const unmuteConversation = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_UNMUTE_CONVERSATION(id), credentials, method: 'POST' }) + .then((data) => parseStatus(data)) +} + +const blockUser = ({ id, credentials }) => { + return fetch(MASTODON_BLOCK_USER_URL(id), { headers: authHeaders(credentials), method: 'POST' }).then((data) => data.json()) } -const unblockUser = ({id, credentials}) => { - let url = `${UNBLOCKING_URL}?user_id=${id}` - return fetch(url, { +const unblockUser = ({ id, credentials }) => { + return fetch(MASTODON_UNBLOCK_USER_URL(id), { headers: authHeaders(credentials), method: 'POST' }).then((data) => data.json()) } -const approveUser = ({id, credentials}) => { - let url = `${APPROVE_USER_URL}?user_id=${id}` +const approveUser = ({ id, credentials }) => { + let url = MASTODON_APPROVE_USER_URL(id) return fetch(url, { headers: authHeaders(credentials), method: 'POST' }).then((data) => data.json()) } -const denyUser = ({id, credentials}) => { - let url = `${DENY_USER_URL}?user_id=${id}` +const denyUser = ({ id, credentials }) => { + let url = MASTODON_DENY_USER_URL(id) return fetch(url, { headers: authHeaders(credentials), method: 'POST' }).then((data) => data.json()) } -const fetchUser = ({id, credentials}) => { - let url = `${USER_URL}?user_id=${id}` +const fetchUser = ({ id, credentials }) => { + let url = `${MASTODON_USER_URL}/${id}` + return promisedRequest({ url, credentials }) + .then((data) => parseUser(data)) +} + +const fetchUserRelationship = ({ id, credentials }) => { + let url = `${MASTODON_USER_RELATIONSHIPS_URL}/?id=${id}` return fetch(url, { headers: authHeaders(credentials) }) .then((response) => { return new Promise((resolve, reject) => response.json() @@ -254,52 +303,66 @@ const fetchUser = ({id, credentials}) => { return resolve(json) })) }) - .then((data) => parseUser(data)) } -const fetchFriends = ({id, page, credentials}) => { - let url = `${FRIENDS_URL}?user_id=${id}` - if (page) { - url = url + `&page=${page}` - } - return fetch(url, { headers: authHeaders(credentials) }) - .then((data) => data.json()) - .then((data) => data.map(parseUser)) -} +const fetchFriends = ({ id, maxId, sinceId, limit = 20, credentials }) => { + let url = MASTODON_FOLLOWING_URL(id) + const args = [ + maxId && `max_id=${maxId}`, + sinceId && `since_id=${sinceId}`, + limit && `limit=${limit}` + ].filter(_ => _).join('&') -const exportFriends = ({id, credentials}) => { - let url = `${FRIENDS_URL}?user_id=${id}&all=true` + url = url + (args ? '?' + args : '') return fetch(url, { headers: authHeaders(credentials) }) .then((data) => data.json()) .then((data) => data.map(parseUser)) } -const fetchFollowers = ({id, page, credentials}) => { - let url = `${FOLLOWERS_URL}?user_id=${id}` - if (page) { - url = url + `&page=${page}` - } - return fetch(url, { headers: authHeaders(credentials) }) - .then((data) => data.json()) - .then((data) => data.map(parseUser)) +const exportFriends = ({ id, credentials }) => { + return new Promise(async (resolve, reject) => { + try { + let friends = [] + let more = true + while (more) { + const maxId = friends.length > 0 ? last(friends).id : undefined + const users = await fetchFriends({ id, maxId, credentials }) + friends = concat(friends, users) + if (users.length === 0) { + more = false + } + } + resolve(friends) + } catch (err) { + reject(err) + } + }) } -const fetchAllFollowing = ({username, credentials}) => { - const url = `${ALL_FOLLOWING_URL}/${username}.json` +const fetchFollowers = ({ id, maxId, sinceId, limit = 20, credentials }) => { + let url = MASTODON_FOLLOWERS_URL(id) + const args = [ + maxId && `max_id=${maxId}`, + sinceId && `since_id=${sinceId}`, + limit && `limit=${limit}` + ].filter(_ => _).join('&') + + url += args ? '?' + args : '' return fetch(url, { headers: authHeaders(credentials) }) .then((data) => data.json()) .then((data) => data.map(parseUser)) } -const fetchFollowRequests = ({credentials}) => { - const url = FOLLOW_REQUESTS_URL +const fetchFollowRequests = ({ credentials }) => { + const url = MASTODON_FOLLOW_REQUESTS_URL return fetch(url, { headers: authHeaders(credentials) }) .then((data) => data.json()) + .then((data) => data.map(parseUser)) } -const fetchConversation = ({id, credentials}) => { - let url = `${CONVERSATION_URL}/${id}.json?count=100` - return fetch(url, { headers: authHeaders(credentials) }) +const fetchConversation = ({ id, credentials }) => { + let urlContext = MASTODON_STATUS_CONTEXT_URL(id) + return fetch(urlContext, { headers: authHeaders(credentials) }) .then((data) => { if (data.ok) { return data @@ -307,11 +370,14 @@ const fetchConversation = ({id, credentials}) => { throw new Error('Error fetching timeline', data) }) .then((data) => data.json()) - .then((data) => data.map(parseStatus)) + .then(({ ancestors, descendants }) => ({ + ancestors: ancestors.map(parseStatus), + descendants: descendants.map(parseStatus) + })) } -const fetchStatus = ({id, credentials}) => { - let url = `${STATUS_URL}/${id}.json` +const fetchStatus = ({ id, credentials }) => { + let url = MASTODON_STATUS_URL(id) return fetch(url, { headers: authHeaders(credentials) }) .then((data) => { if (data.ok) { @@ -323,57 +389,136 @@ const fetchStatus = ({id, credentials}) => { .then((data) => parseStatus(data)) } -const setUserMute = ({id, credentials, muted = true}) => { - const form = new FormData() +const tagUser = ({ tag, credentials, ...options }) => { + const screenName = options.screen_name + const form = { + nicknames: [screenName], + tags: [tag] + } - const muteInteger = muted ? 1 : 0 + const headers = authHeaders(credentials) + headers['Content-Type'] = 'application/json' - form.append('namespace', 'qvitter') - form.append('data', muteInteger) - form.append('topic', `mute:${id}`) + return fetch(TAG_USER_URL, { + method: 'PUT', + headers: headers, + body: JSON.stringify(form) + }) +} + +const untagUser = ({ tag, credentials, ...options }) => { + const screenName = options.screen_name + const body = { + nicknames: [screenName], + tags: [tag] + } - return fetch(QVITTER_USER_PREF_URL, { + const headers = authHeaders(credentials) + headers['Content-Type'] = 'application/json' + + return fetch(TAG_USER_URL, { + method: 'DELETE', + headers: headers, + body: JSON.stringify(body) + }) +} + +const addRight = ({ right, credentials, ...user }) => { + const screenName = user.screen_name + + return fetch(PERMISSION_GROUP_URL(screenName, right), { method: 'POST', headers: authHeaders(credentials), - body: form + body: {} }) } -const fetchTimeline = ({timeline, credentials, since = false, until = false, userId = false, tag = false}) => { +const deleteRight = ({ right, credentials, ...user }) => { + const screenName = user.screen_name + + return fetch(PERMISSION_GROUP_URL(screenName, right), { + method: 'DELETE', + headers: authHeaders(credentials), + body: {} + }) +} + +const setActivationStatus = ({ status, credentials, ...user }) => { + const screenName = user.screen_name + const body = { + status: status + } + + const headers = authHeaders(credentials) + headers['Content-Type'] = 'application/json' + + return fetch(ACTIVATION_STATUS_URL(screenName), { + method: 'PUT', + headers: headers, + body: JSON.stringify(body) + }) +} + +const deleteUser = ({ credentials, ...user }) => { + const screenName = user.screen_name + const headers = authHeaders(credentials) + + return fetch(`${ADMIN_USERS_URL}?nickname=${screenName}`, { + method: 'DELETE', + headers: headers + }) +} + +const fetchTimeline = ({ + timeline, + credentials, + since = false, + until = false, + userId = false, + tag = false, + withMuted = false +}) => { const timelineUrls = { - public: PUBLIC_TIMELINE_URL, - friends: FRIENDS_TIMELINE_URL, - mentions: MENTIONS_URL, - dms: DM_TIMELINE_URL, - notifications: QVITTER_USER_NOTIFICATIONS_URL, - 'publicAndExternal': PUBLIC_AND_EXTERNAL_TIMELINE_URL, - user: QVITTER_USER_TIMELINE_URL, - media: QVITTER_USER_TIMELINE_URL, + public: MASTODON_PUBLIC_TIMELINE, + friends: MASTODON_USER_HOME_TIMELINE_URL, + dms: MASTODON_DIRECT_MESSAGES_TIMELINE_URL, + notifications: MASTODON_USER_NOTIFICATIONS_URL, + 'publicAndExternal': MASTODON_PUBLIC_TIMELINE, + user: MASTODON_USER_TIMELINE_URL, + media: MASTODON_USER_TIMELINE_URL, favorites: MASTODON_USER_FAVORITES_TIMELINE_URL, - tag: TAG_TIMELINE_URL + tag: MASTODON_TAG_TIMELINE_URL } const isNotifications = timeline === 'notifications' const params = [] let url = timelineUrls[timeline] + if (timeline === 'user' || timeline === 'media') { + url = url(userId) + } + if (since) { params.push(['since_id', since]) } if (until) { params.push(['max_id', until]) } - if (userId) { - params.push(['user_id', userId]) - } if (tag) { - url += `/${tag}.json` + url = url(tag) } if (timeline === 'media') { params.push(['only_media', 1]) } + if (timeline === 'public') { + params.push(['local', true]) + } + if (timeline === 'public' || timeline === 'publicAndExternal') { + params.push(['only_media', false]) + } params.push(['count', 20]) + params.push(['with_muted', withMuted]) const queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') url += `?${queryString}` @@ -389,9 +534,14 @@ const fetchTimeline = ({timeline, credentials, since = false, until = false, use .then((data) => data.map(isNotifications ? parseNotification : parseStatus)) } +const fetchPinnedStatuses = ({ id, credentials }) => { + const url = MASTODON_USER_TIMELINE_URL(id) + '?pinned=true' + return promisedRequest({ url, credentials }) + .then((data) => data.map(parseStatus)) +} + const verifyCredentials = (user) => { - return fetch(LOGIN_URL, { - method: 'POST', + return fetch(MASTODON_LOGIN_URL, { headers: authHeaders(user) }) .then((response) => { @@ -407,50 +557,66 @@ const verifyCredentials = (user) => { } const favorite = ({ id, credentials }) => { - return fetch(`${FAVORITE_URL}/${id}.json`, { - headers: authHeaders(credentials), - method: 'POST' - }) + return promisedRequest({ url: MASTODON_FAVORITE_URL(id), method: 'POST', credentials }) + .then((data) => parseStatus(data)) } const unfavorite = ({ id, credentials }) => { - return fetch(`${UNFAVORITE_URL}/${id}.json`, { - headers: authHeaders(credentials), - method: 'POST' - }) + return promisedRequest({ url: MASTODON_UNFAVORITE_URL(id), method: 'POST', credentials }) + .then((data) => parseStatus(data)) } const retweet = ({ id, credentials }) => { - return fetch(`${RETWEET_URL}/${id}.json`, { - headers: authHeaders(credentials), - method: 'POST' - }) + return promisedRequest({ url: MASTODON_RETWEET_URL(id), method: 'POST', credentials }) + .then((data) => parseStatus(data)) } const unretweet = ({ id, credentials }) => { - return fetch(`${UNRETWEET_URL}/${id}.json`, { - headers: authHeaders(credentials), - method: 'POST' - }) + return promisedRequest({ url: MASTODON_UNRETWEET_URL(id), method: 'POST', credentials }) + .then((data) => parseStatus(data)) } -const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks}) => { - const idsText = mediaIds.join(',') +const postStatus = ({ + credentials, + status, + spoilerText, + visibility, + sensitive, + poll, + mediaIds = [], + inReplyToStatusId, + contentType +}) => { const form = new FormData() + const pollOptions = poll.options || [] form.append('status', status) form.append('source', 'Pleroma FE') - if (noAttachmentLinks) form.append('no_attachment_links', noAttachmentLinks) if (spoilerText) form.append('spoiler_text', spoilerText) if (visibility) form.append('visibility', visibility) if (sensitive) form.append('sensitive', sensitive) if (contentType) form.append('content_type', contentType) - form.append('media_ids', idsText) + mediaIds.forEach(val => { + form.append('media_ids[]', val) + }) + if (pollOptions.some(option => option !== '')) { + const normalizedPoll = { + expires_in: poll.expiresIn, + multiple: poll.multiple + } + Object.keys(normalizedPoll).forEach(key => { + form.append(`poll[${key}]`, normalizedPoll[key]) + }) + + pollOptions.forEach(option => { + form.append('poll[options][]', option) + }) + } if (inReplyToStatusId) { - form.append('in_reply_to_status_id', inReplyToStatusId) + form.append('in_reply_to_id', inReplyToStatusId) } - return fetch(STATUS_UPDATE_URL, { + return fetch(MASTODON_POST_STATUS_URL, { body: form, method: 'POST', headers: authHeaders(credentials) @@ -468,32 +634,45 @@ const postStatus = ({credentials, status, spoilerText, visibility, sensitive, me } const deleteStatus = ({ id, credentials }) => { - return fetch(`${STATUS_DELETE_URL}/${id}.json`, { + return fetch(MASTODON_DELETE_URL(id), { headers: authHeaders(credentials), - method: 'POST' + method: 'DELETE' + }) +} + +const uploadMedia = ({ formData, credentials }) => { + return fetch(MASTODON_MEDIA_UPLOAD_URL, { + body: formData, + method: 'POST', + headers: authHeaders(credentials) }) + .then((data) => data.json()) + .then((data) => parseAttachment(data)) } -const uploadMedia = ({formData, credentials}) => { - return fetch(MEDIA_UPLOAD_URL, { +const importBlocks = ({ file, credentials }) => { + const formData = new FormData() + formData.append('list', file) + return fetch(BLOCKS_IMPORT_URL, { body: formData, method: 'POST', headers: authHeaders(credentials) }) - .then((response) => response.text()) - .then((text) => (new DOMParser()).parseFromString(text, 'application/xml')) + .then((response) => response.ok) } -const followImport = ({params, credentials}) => { +const importFollows = ({ file, credentials }) => { + const formData = new FormData() + formData.append('list', file) return fetch(FOLLOW_IMPORT_URL, { - body: params, + body: formData, method: 'POST', headers: authHeaders(credentials) }) .then((response) => response.ok) } -const deleteAccount = ({credentials, password}) => { +const deleteAccount = ({ credentials, password }) => { const form = new FormData() form.append('password', password) @@ -506,7 +685,7 @@ const deleteAccount = ({credentials, password}) => { .then((response) => response.json()) } -const changePassword = ({credentials, password, newPassword, newPasswordConfirmation}) => { +const changePassword = ({ credentials, password, newPassword, newPasswordConfirmation }) => { const form = new FormData() form.append('password', password) @@ -521,34 +700,91 @@ const changePassword = ({credentials, password, newPassword, newPasswordConfirma .then((response) => response.json()) } -const fetchMutes = ({credentials}) => { - const url = '/api/qvitter/mutes.json' - - return fetch(url, { - headers: authHeaders(credentials) +const settingsMFA = ({ credentials }) => { + return fetch(MFA_SETTINGS_URL, { + headers: authHeaders(credentials), + method: 'GET' }).then((data) => data.json()) } -const fetchBlocks = ({page, credentials}) => { - return fetch(BLOCKS_URL, { +const mfaDisableOTP = ({ credentials, password }) => { + const form = new FormData() + + form.append('password', password) + + return fetch(MFA_DISABLE_OTP_URL, { + body: form, + method: 'DELETE', headers: authHeaders(credentials) - }).then((data) => { - if (data.ok) { - return data.json() - } - throw new Error('Error fetching blocks', data) }) + .then((response) => response.json()) } -const fetchOAuthTokens = ({credentials}) => { +const mfaConfirmOTP = ({ credentials, password, token }) => { + const form = new FormData() + + form.append('password', password) + form.append('code', token) + + return fetch(MFA_CONFIRM_OTP_URL, { + body: form, + headers: authHeaders(credentials), + method: 'POST' + }).then((data) => data.json()) +} +const mfaSetupOTP = ({ credentials }) => { + return fetch(MFA_SETUP_OTP_URL, { + headers: authHeaders(credentials), + method: 'GET' + }).then((data) => data.json()) +} +const generateMfaBackupCodes = ({ credentials }) => { + return fetch(MFA_BACKUP_CODES_URL, { + headers: authHeaders(credentials), + method: 'GET' + }).then((data) => data.json()) +} + +const fetchMutes = ({ credentials }) => { + return promisedRequest({ url: MASTODON_USER_MUTES_URL, credentials }) + .then((users) => users.map(parseUser)) +} + +const muteUser = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_MUTE_USER_URL(id), credentials, method: 'POST' }) +} + +const unmuteUser = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_UNMUTE_USER_URL(id), credentials, method: 'POST' }) +} + +const subscribeUser = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_SUBSCRIBE_USER(id), credentials, method: 'POST' }) +} + +const unsubscribeUser = ({ id, credentials }) => { + return promisedRequest({ url: MASTODON_UNSUBSCRIBE_USER(id), credentials, method: 'POST' }) +} + +const fetchBlocks = ({ credentials }) => { + return promisedRequest({ url: MASTODON_USER_BLOCKS_URL, credentials }) + .then((users) => users.map(parseUser)) +} + +const fetchOAuthTokens = ({ credentials }) => { const url = '/api/oauth_tokens.json' return fetch(url, { headers: authHeaders(credentials) - }).then((data) => data.json()) + }).then((data) => { + if (data.ok) { + return data.json() + } + throw new Error('Error fetching auth tokens', data) + }) } -const revokeOAuthToken = ({id, credentials}) => { +const revokeOAuthToken = ({ id, credentials }) => { const url = `/api/oauth_tokens/${id}` return fetch(url, { @@ -557,13 +793,13 @@ const revokeOAuthToken = ({id, credentials}) => { }) } -const suggestions = ({credentials}) => { +const suggestions = ({ credentials }) => { return fetch(SUGGESTIONS_URL, { headers: authHeaders(credentials) }).then((data) => data.json()) } -const markNotificationsAsSeen = ({id, credentials}) => { +const markNotificationsAsSeen = ({ id, credentials }) => { const body = new FormData() body.append('latest_id', id) @@ -575,9 +811,110 @@ const markNotificationsAsSeen = ({id, credentials}) => { }).then((data) => data.json()) } +const vote = ({ pollId, choices, credentials }) => { + const form = new FormData() + form.append('choices', choices) + + return promisedRequest({ + url: MASTODON_VOTE_URL(encodeURIComponent(pollId)), + method: 'POST', + credentials, + payload: { + choices: choices + } + }) +} + +const fetchPoll = ({ pollId, credentials }) => { + return promisedRequest( + { + url: MASTODON_POLL_URL(encodeURIComponent(pollId)), + method: 'GET', + credentials + } + ) +} + +const fetchFavoritedByUsers = ({ id }) => { + return promisedRequest({ url: MASTODON_STATUS_FAVORITEDBY_URL(id) }).then((users) => users.map(parseUser)) +} + +const fetchRebloggedByUsers = ({ id }) => { + return promisedRequest({ url: MASTODON_STATUS_REBLOGGEDBY_URL(id) }).then((users) => users.map(parseUser)) +} + +const reportUser = ({ credentials, userId, statusIds, comment, forward }) => { + return promisedRequest({ + url: MASTODON_REPORT_USER_URL, + method: 'POST', + payload: { + 'account_id': userId, + 'status_ids': statusIds, + comment, + forward + }, + credentials + }) +} + +const searchUsers = ({ credentials, query }) => { + return promisedRequest({ + url: MASTODON_USER_SEARCH_URL, + params: { + q: query, + resolve: true + }, + credentials + }) + .then((data) => data.map(parseUser)) +} + +const search2 = ({ credentials, q, resolve, limit, offset, following }) => { + let url = MASTODON_SEARCH_2 + let params = [] + + if (q) { + params.push(['q', encodeURIComponent(q)]) + } + + if (resolve) { + params.push(['resolve', resolve]) + } + + if (limit) { + params.push(['limit', limit]) + } + + if (offset) { + params.push(['offset', offset]) + } + + if (following) { + params.push(['following', true]) + } + + let queryString = map(params, (param) => `${param[0]}=${param[1]}`).join('&') + url += `?${queryString}` + + return fetch(url, { headers: authHeaders(credentials) }) + .then((data) => { + if (data.ok) { + return data + } + throw new Error('Error fetching search result', data) + }) + .then((data) => { return data.json() }) + .then((data) => { + data.accounts = data.accounts.slice(0, limit).map(u => parseUser(u)) + data.statuses = data.statuses.slice(0, limit).map(s => parseStatus(s)) + return data + }) +} + const apiService = { verifyCredentials, fetchTimeline, + fetchPinnedStatuses, fetchConversation, fetchStatus, fetchFriends, @@ -585,9 +922,14 @@ const apiService = { fetchFollowers, followUser, unfollowUser, + pinOwnStatus, + unpinOwnStatus, + muteConversation, + unmuteConversation, blockUser, unblockUser, fetchUser, + fetchUserRelationship, favorite, unfavorite, retweet, @@ -595,27 +937,48 @@ const apiService = { postStatus, deleteStatus, uploadMedia, - fetchAllFollowing, - setUserMute, fetchMutes, + muteUser, + unmuteUser, + subscribeUser, + unsubscribeUser, fetchBlocks, fetchOAuthTokens, revokeOAuthToken, + tagUser, + untagUser, + deleteUser, + addRight, + deleteRight, + setActivationStatus, register, getCaptcha, updateAvatar, updateBg, updateProfile, updateBanner, - externalProfile, - followImport, + importBlocks, + importFollows, deleteAccount, changePassword, + settingsMFA, + mfaDisableOTP, + generateMfaBackupCodes, + mfaSetupOTP, + mfaConfirmOTP, fetchFollowRequests, approveUser, denyUser, suggestions, - markNotificationsAsSeen + markNotificationsAsSeen, + vote, + fetchPoll, + fetchFavoritedByUsers, + fetchRebloggedByUsers, + reportUser, + updateNotificationSettings, + search2, + searchUsers } export default apiService diff --git a/src/services/backend_interactor_service/backend_interactor_service.js b/src/services/backend_interactor_service/backend_interactor_service.js index 7e972d7b..3c44a10c 100644 --- a/src/services/backend_interactor_service/backend_interactor_service.js +++ b/src/services/backend_interactor_service/backend_interactor_service.js @@ -1,85 +1,156 @@ import apiService from '../api/api.service.js' import timelineFetcherService from '../timeline_fetcher/timeline_fetcher.service.js' +import notificationsFetcher from '../notifications_fetcher/notifications_fetcher.service.js' -const backendInteractorService = (credentials) => { - const fetchStatus = ({id}) => { - return apiService.fetchStatus({id, credentials}) +const backendInteractorService = credentials => { + const fetchStatus = ({ id }) => { + return apiService.fetchStatus({ id, credentials }) } - const fetchConversation = ({id}) => { - return apiService.fetchConversation({id, credentials}) + const fetchConversation = ({ id }) => { + return apiService.fetchConversation({ id, credentials }) } - const fetchFriends = ({id, page}) => { - return apiService.fetchFriends({id, page, credentials}) + const fetchFriends = ({ id, maxId, sinceId, limit }) => { + return apiService.fetchFriends({ id, maxId, sinceId, limit, credentials }) } - const exportFriends = ({id}) => { - return apiService.exportFriends({id, credentials}) + const exportFriends = ({ id }) => { + return apiService.exportFriends({ id, credentials }) } - const fetchFollowers = ({id, page}) => { - return apiService.fetchFollowers({id, page, credentials}) + const fetchFollowers = ({ id, maxId, sinceId, limit }) => { + return apiService.fetchFollowers({ id, maxId, sinceId, limit, credentials }) } - const fetchAllFollowing = ({username}) => { - return apiService.fetchAllFollowing({username, credentials}) + const fetchUser = ({ id }) => { + return apiService.fetchUser({ id, credentials }) } - const fetchUser = ({id}) => { - return apiService.fetchUser({id, credentials}) + const fetchUserRelationship = ({ id }) => { + return apiService.fetchUserRelationship({ id, credentials }) } const followUser = (id) => { - return apiService.followUser({credentials, id}) + return apiService.followUser({ credentials, id }) } const unfollowUser = (id) => { - return apiService.unfollowUser({credentials, id}) + return apiService.unfollowUser({ credentials, id }) } const blockUser = (id) => { - return apiService.blockUser({credentials, id}) + return apiService.blockUser({ credentials, id }) } const unblockUser = (id) => { - return apiService.unblockUser({credentials, id}) + return apiService.unblockUser({ credentials, id }) } const approveUser = (id) => { - return apiService.approveUser({credentials, id}) + return apiService.approveUser({ credentials, id }) } const denyUser = (id) => { - return apiService.denyUser({credentials, id}) + return apiService.denyUser({ credentials, id }) } - const startFetching = ({timeline, store, userId = false, tag}) => { - return timelineFetcherService.startFetching({timeline, store, credentials, userId, tag}) + const startFetchingTimeline = ({ timeline, store, userId = false, tag }) => { + return timelineFetcherService.startFetching({ timeline, store, credentials, userId, tag }) } - const setUserMute = ({id, muted = true}) => { - return apiService.setUserMute({id, muted, credentials}) + const startFetchingNotifications = ({ store }) => { + return notificationsFetcher.startFetching({ store, credentials }) } - const fetchMutes = () => apiService.fetchMutes({credentials}) - const fetchBlocks = (params) => apiService.fetchBlocks({credentials, ...params}) - const fetchFollowRequests = () => apiService.fetchFollowRequests({credentials}) - const fetchOAuthTokens = () => apiService.fetchOAuthTokens({credentials}) - const revokeOAuthToken = (id) => apiService.revokeOAuthToken({id, credentials}) + // eslint-disable-next-line camelcase + const tagUser = ({ screen_name }, tag) => { + return apiService.tagUser({ screen_name, tag, credentials }) + } - const getCaptcha = () => apiService.getCaptcha() - const register = (params) => apiService.register(params) - const updateAvatar = ({params}) => apiService.updateAvatar({credentials, params}) - const updateBg = ({params}) => apiService.updateBg({credentials, params}) - const updateBanner = ({params}) => apiService.updateBanner({credentials, params}) - const updateProfile = ({params}) => apiService.updateProfile({credentials, params}) + // eslint-disable-next-line camelcase + const untagUser = ({ screen_name }, tag) => { + return apiService.untagUser({ screen_name, tag, credentials }) + } + + // eslint-disable-next-line camelcase + const addRight = ({ screen_name }, right) => { + return apiService.addRight({ screen_name, right, credentials }) + } + + // eslint-disable-next-line camelcase + const deleteRight = ({ screen_name }, right) => { + return apiService.deleteRight({ screen_name, right, credentials }) + } + + // eslint-disable-next-line camelcase + const setActivationStatus = ({ screen_name }, status) => { + return apiService.setActivationStatus({ screen_name, status, credentials }) + } - const externalProfile = (profileUrl) => apiService.externalProfile({profileUrl, credentials}) - const followImport = ({params}) => apiService.followImport({params, credentials}) + // eslint-disable-next-line camelcase + const deleteUser = ({ screen_name }) => { + return apiService.deleteUser({ screen_name, credentials }) + } + + const vote = (pollId, choices) => { + return apiService.vote({ credentials, pollId, choices }) + } + + const fetchPoll = (pollId) => { + return apiService.fetchPoll({ credentials, pollId }) + } - const deleteAccount = ({password}) => apiService.deleteAccount({credentials, password}) - const changePassword = ({password, newPassword, newPasswordConfirmation}) => apiService.changePassword({credentials, password, newPassword, newPasswordConfirmation}) + const updateNotificationSettings = ({ settings }) => { + return apiService.updateNotificationSettings({ credentials, settings }) + } + + const fetchMutes = () => apiService.fetchMutes({ credentials }) + const muteUser = (id) => apiService.muteUser({ credentials, id }) + const unmuteUser = (id) => apiService.unmuteUser({ credentials, id }) + const subscribeUser = (id) => apiService.subscribeUser({ credentials, id }) + const unsubscribeUser = (id) => apiService.unsubscribeUser({ credentials, id }) + const fetchBlocks = () => apiService.fetchBlocks({ credentials }) + const fetchFollowRequests = () => apiService.fetchFollowRequests({ credentials }) + const fetchOAuthTokens = () => apiService.fetchOAuthTokens({ credentials }) + const revokeOAuthToken = (id) => apiService.revokeOAuthToken({ id, credentials }) + const fetchPinnedStatuses = (id) => apiService.fetchPinnedStatuses({ credentials, id }) + const pinOwnStatus = (id) => apiService.pinOwnStatus({ credentials, id }) + const unpinOwnStatus = (id) => apiService.unpinOwnStatus({ credentials, id }) + const muteConversation = (id) => apiService.muteConversation({ credentials, id }) + const unmuteConversation = (id) => apiService.unmuteConversation({ credentials, id }) + + const getCaptcha = () => apiService.getCaptcha() + const register = (params) => apiService.register({ credentials, params }) + const updateAvatar = ({ avatar }) => apiService.updateAvatar({ credentials, avatar }) + const updateBg = ({ background }) => apiService.updateBg({ credentials, background }) + const updateBanner = ({ banner }) => apiService.updateBanner({ credentials, banner }) + const updateProfile = ({ params }) => apiService.updateProfile({ credentials, params }) + + const importBlocks = (file) => apiService.importBlocks({ file, credentials }) + const importFollows = (file) => apiService.importFollows({ file, credentials }) + + const deleteAccount = ({ password }) => apiService.deleteAccount({ credentials, password }) + const changePassword = ({ password, newPassword, newPasswordConfirmation }) => + apiService.changePassword({ credentials, password, newPassword, newPasswordConfirmation }) + + const fetchSettingsMFA = () => apiService.settingsMFA({ credentials }) + const generateMfaBackupCodes = () => apiService.generateMfaBackupCodes({ credentials }) + const mfaSetupOTP = () => apiService.mfaSetupOTP({ credentials }) + const mfaConfirmOTP = ({ password, token }) => apiService.mfaConfirmOTP({ credentials, password, token }) + const mfaDisableOTP = ({ password }) => apiService.mfaDisableOTP({ credentials, password }) + + const fetchFavoritedByUsers = (id) => apiService.fetchFavoritedByUsers({ id }) + const fetchRebloggedByUsers = (id) => apiService.fetchRebloggedByUsers({ id }) + const reportUser = (params) => apiService.reportUser({ credentials, ...params }) + + const favorite = (id) => apiService.favorite({ id, credentials }) + const unfavorite = (id) => apiService.unfavorite({ id, credentials }) + const retweet = (id) => apiService.retweet({ id, credentials }) + const unretweet = (id) => apiService.unretweet({ id, credentials }) + const search2 = ({ q, resolve, limit, offset, following }) => + apiService.search2({ credentials, q, resolve, limit, offset, following }) + const searchUsers = (query) => apiService.searchUsers({ query, credentials }) const backendInteractorServiceInstance = { fetchStatus, @@ -92,27 +163,59 @@ const backendInteractorService = (credentials) => { blockUser, unblockUser, fetchUser, - fetchAllFollowing, + fetchUserRelationship, verifyCredentials: apiService.verifyCredentials, - startFetching, - setUserMute, + startFetchingTimeline, + startFetchingNotifications, fetchMutes, + muteUser, + unmuteUser, + subscribeUser, + unsubscribeUser, fetchBlocks, fetchOAuthTokens, revokeOAuthToken, + fetchPinnedStatuses, + pinOwnStatus, + unpinOwnStatus, + muteConversation, + unmuteConversation, + tagUser, + untagUser, + addRight, + deleteRight, + deleteUser, + setActivationStatus, register, getCaptcha, updateAvatar, updateBg, updateBanner, updateProfile, - externalProfile, - followImport, + importBlocks, + importFollows, deleteAccount, changePassword, + fetchSettingsMFA, + generateMfaBackupCodes, + mfaSetupOTP, + mfaConfirmOTP, + mfaDisableOTP, fetchFollowRequests, approveUser, - denyUser + denyUser, + vote, + fetchPoll, + fetchFavoritedByUsers, + fetchRebloggedByUsers, + reportUser, + favorite, + unfavorite, + retweet, + unretweet, + updateNotificationSettings, + search2, + searchUsers } return backendInteractorServiceInstance diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 7576c518..d1b17c61 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -59,7 +59,7 @@ const srgbToLinear = (srgb) => { * @returns {Number} relative luminance */ const relativeLuminance = (srgb) => { - const {r, g, b} = srgbToLinear(srgb) + const { r, g, b } = srgbToLinear(srgb) return 0.2126 * r + 0.7152 * g + 0.0722 * b } diff --git a/src/services/completion/completion.js b/src/services/completion/completion.js index 11c45867..df83d03d 100644 --- a/src/services/completion/completion.js +++ b/src/services/completion/completion.js @@ -8,7 +8,7 @@ export const wordAtPosition = (str, pos) => { const words = splitIntoWords(str) const wordsWithPosition = addPositionToWords(words) - return find(wordsWithPosition, ({start, end}) => start <= pos && end > pos) + return find(wordsWithPosition, ({ start, end }) => start <= pos && end > pos) } export const addPositionToWords = (words) => { diff --git a/src/services/date_utils/date_utils.js b/src/services/date_utils/date_utils.js new file mode 100644 index 00000000..32e13bca --- /dev/null +++ b/src/services/date_utils/date_utils.js @@ -0,0 +1,45 @@ +export const SECOND = 1000 +export const MINUTE = 60 * SECOND +export const HOUR = 60 * MINUTE +export const DAY = 24 * HOUR +export const WEEK = 7 * DAY +export const MONTH = 30 * DAY +export const YEAR = 365.25 * DAY + +export const relativeTime = (date, nowThreshold = 1) => { + if (typeof date === 'string') date = Date.parse(date) + const round = Date.now() > date ? Math.floor : Math.ceil + const d = Math.abs(Date.now() - date) + let r = { num: round(d / YEAR), key: 'time.years' } + if (d < nowThreshold * SECOND) { + r.num = 0 + r.key = 'time.now' + } else if (d < MINUTE) { + r.num = round(d / SECOND) + r.key = 'time.seconds' + } else if (d < HOUR) { + r.num = round(d / MINUTE) + r.key = 'time.minutes' + } else if (d < DAY) { + r.num = round(d / HOUR) + r.key = 'time.hours' + } else if (d < WEEK) { + r.num = round(d / DAY) + r.key = 'time.days' + } else if (d < MONTH) { + r.num = round(d / WEEK) + r.key = 'time.weeks' + } else if (d < YEAR) { + r.num = round(d / MONTH) + r.key = 'time.months' + } + // Remove plural form when singular + if (r.num === 1) r.key = r.key.slice(0, -1) + return r +} + +export const relativeTimeShort = (date, nowThreshold = 1) => { + const r = relativeTime(date, nowThreshold) + r.key += '_short' + return r +} diff --git a/src/services/entity_normalizer/entity_normalizer.service.js b/src/services/entity_normalizer/entity_normalizer.service.js index d20ce77f..67664af8 100644 --- a/src/services/entity_normalizer/entity_normalizer.service.js +++ b/src/services/entity_normalizer/entity_normalizer.service.js @@ -33,17 +33,18 @@ export const parseUser = (data) => { if (masto) { output.screen_name = data.acct + output.statusnet_profile_url = data.url // There's nothing else to get if (mastoShort) { return output } - output.name = null // missing - output.name_html = data.display_name + output.name = data.display_name + output.name_html = addEmojis(data.display_name, data.emojis) - output.description = null // missing - output.description_html = data.note + output.description = data.note + output.description_html = addEmojis(data.note, data.emojis) // Utilize avatar_static for gif avatars? output.profile_image_url = data.avatar @@ -56,16 +57,51 @@ export const parseUser = (data) => { output.bot = data.bot - output.statusnet_profile_url = data.url - if (data.pleroma) { - const pleroma = data.pleroma - output.follows_you = pleroma.follows_you - output.statusnet_blocking = pleroma.statusnet_blocking - output.muted = pleroma.muted + const relationship = data.pleroma.relationship + + output.background_image = data.pleroma.background_image + output.token = data.pleroma.chat_token + + if (relationship) { + output.follows_you = relationship.followed_by + output.requested = relationship.requested + output.following = relationship.following + output.statusnet_blocking = relationship.blocking + output.muted = relationship.muting + output.subscribed = relationship.subscribing + } + + output.hide_follows = data.pleroma.hide_follows + output.hide_followers = data.pleroma.hide_followers + output.hide_follows_count = data.pleroma.hide_follows_count + output.hide_followers_count = data.pleroma.hide_followers_count + + output.rights = { + moderator: data.pleroma.is_moderator, + admin: data.pleroma.is_admin + } + // TODO: Clean up in UI? This is duplication from what BE does for qvitterapi + if (output.rights.admin) { + output.role = 'admin' + } else if (output.rights.moderator) { + output.role = 'moderator' + } else { + output.role = 'member' + } + } + + if (data.source) { + output.description = data.source.note + output.default_scope = data.source.privacy + if (data.source.pleroma) { + output.no_rich_text = data.source.pleroma.no_rich_text + output.show_role = data.source.pleroma.show_role + output.discoverable = data.source.pleroma.discoverable + } } - // Missing, trying to recover + // TODO: handle is_local output.is_local = !output.screen_name.includes('@') } else { output.screen_name = data.screen_name @@ -83,7 +119,7 @@ export const parseUser = (data) => { output.friends_count = data.friends_count - output.bot = null // missing + // output.bot = ??? missing output.statusnet_profile_url = data.statusnet_profile_url @@ -97,13 +133,18 @@ export const parseUser = (data) => { output.muted = data.muted - // QVITTER ONLY FOR NOW - // Really only applies to logged in user, really.. I THINK - output.rights = data.rights + if (data.rights) { + output.rights = { + moderator: data.rights.delete_others_notice, + admin: data.rights.admin + } + } output.no_rich_text = data.no_rich_text output.default_scope = data.default_scope output.hide_follows = data.hide_follows output.hide_followers = data.hide_followers + output.hide_follows_count = data.hide_follows_count + output.hide_followers_count = data.hide_followers_count output.background_image = data.background_image // on mastoapi this info is contained in a "relationship" output.following = data.following @@ -115,26 +156,38 @@ export const parseUser = (data) => { output.locked = data.locked output.followers_count = data.followers_count output.statuses_count = data.statuses_count - output.friends = [] - output.followers = [] + output.friendIds = [] + output.followerIds = [] + output.pinnedStatusIds = [] + if (data.pleroma) { output.follow_request_count = data.pleroma.follow_request_count + + output.tags = data.pleroma.tags + output.deactivated = data.pleroma.deactivated + + output.notification_settings = data.pleroma.notification_settings } + output.tags = output.tags || [] + output.rights = output.rights || {} + output.notification_settings = output.notification_settings || {} + return output } -const parseAttachment = (data) => { +export const parseAttachment = (data) => { const output = {} const masto = !data.hasOwnProperty('oembed') if (masto) { // Not exactly same... - output.mimetype = data.type + output.mimetype = data.pleroma ? data.pleroma.mime_type : data.type output.meta = data.meta // not present in BE yet + output.id = data.id } else { output.mimetype = data.mimetype - output.meta = null // missing + // output.meta = ??? missing } output.url = data.url @@ -142,6 +195,16 @@ const parseAttachment = (data) => { return output } +export const addEmojis = (string, emojis) => { + const matchOperatorsRegex = /[|\\{}()[\]^$+*?.-]/g + return emojis.reduce((acc, emoji) => { + const regexSafeShortCode = emoji.shortcode.replace(matchOperatorsRegex, '\\$&') + return acc.replace( + new RegExp(`:${regexSafeShortCode}:`, 'g'), + `<img src='${emoji.url}' alt='${emoji.shortcode}' title='${emoji.shortcode}' class='emoji' />` + ) + }, string) +} export const parseStatus = (data) => { const output = {} @@ -157,30 +220,36 @@ export const parseStatus = (data) => { output.type = data.reblog ? 'retweet' : 'status' output.nsfw = data.sensitive - output.statusnet_html = data.content + output.statusnet_html = addEmojis(data.content, data.emojis) - // Not exactly the same but works? - output.text = data.content + output.tags = data.tags + + if (data.pleroma) { + const { pleroma } = data + output.text = pleroma.content ? data.pleroma.content['text/plain'] : data.content + output.summary = pleroma.spoiler_text ? data.pleroma.spoiler_text['text/plain'] : data.spoiler_text + output.statusnet_conversation_id = data.pleroma.conversation_id + output.is_local = pleroma.local + output.in_reply_to_screen_name = data.pleroma.in_reply_to_account_acct + output.thread_muted = pleroma.thread_muted + } else { + output.text = data.content + output.summary = data.spoiler_text + } output.in_reply_to_status_id = data.in_reply_to_id output.in_reply_to_user_id = data.in_reply_to_account_id - - // Missing!! fix in UI? - output.in_reply_to_screen_name = null - - // Not exactly the same but works - output.statusnet_conversation_id = data.id + output.replies_count = data.replies_count if (output.type === 'retweet') { output.retweeted_status = parseStatus(data.reblog) } - output.summary = data.spoiler_text - output.summary_html = data.spoiler_text + output.summary_html = addEmojis(data.spoiler_text, data.emojis) output.external_url = data.url - - // FIXME missing!! - output.is_local = false + output.poll = data.poll + output.pinned = data.pinned + output.muted = data.muted } else { output.favorited = data.favorited output.fave_num = data.fave_num @@ -208,7 +277,6 @@ export const parseStatus = (data) => { output.in_reply_to_status_id = data.in_reply_to_status_id output.in_reply_to_user_id = data.in_reply_to_user_id output.in_reply_to_screen_name = data.in_reply_to_screen_name - output.statusnet_conversation_id = data.statusnet_conversation_id if (output.type === 'retweet') { @@ -246,6 +314,9 @@ export const parseStatus = (data) => { output.retweeted_status = parseStatus(retweetedStatus) } + output.favoritedBy = [] + output.rebloggedBy = [] + return output } @@ -259,9 +330,11 @@ export const parseNotification = (data) => { if (masto) { output.type = mastoDict[data.type] || data.type - output.seen = null // missing - output.status = parseStatus(data.status) - output.action = output.status // not sure + output.seen = data.pleroma.is_seen + output.status = output.type === 'follow' + ? null + : parseStatus(data.status) + output.action = output.status // TODO: Refactor, this is unneeded output.from_profile = parseUser(data.account) } else { const parsedNotice = parseStatus(data.notice) @@ -275,12 +348,12 @@ export const parseNotification = (data) => { } output.created_at = new Date(data.created_at) - output.id = data.id + output.id = parseInt(data.id) return output } const isNsfw = (status) => { const nsfwRegex = /#nsfw/i - return (status.tags || []).includes('nsfw') || !!status.text.match(nsfwRegex) + return (status.tags || []).includes('nsfw') || !!(status.text || '').match(nsfwRegex) } diff --git a/src/services/errors/errors.js b/src/services/errors/errors.js index 548f3c68..590552da 100644 --- a/src/services/errors/errors.js +++ b/src/services/errors/errors.js @@ -1,3 +1,5 @@ +import { humanizeErrors } from '../../modules/errors' + export function StatusCodeError (statusCode, body, options, response) { this.name = 'StatusCodeError' this.statusCode = statusCode @@ -12,3 +14,36 @@ export function StatusCodeError (statusCode, body, options, response) { } StatusCodeError.prototype = Object.create(Error.prototype) StatusCodeError.prototype.constructor = StatusCodeError + +export class RegistrationError extends Error { + constructor (error) { + super() + if (Error.captureStackTrace) { + Error.captureStackTrace(this) + } + + try { + // the error is probably a JSON object with a single key, "errors", whose value is another JSON object containing the real errors + if (typeof error === 'string') { + error = JSON.parse(error) + if (error.hasOwnProperty('error')) { + error = JSON.parse(error.error) + } + } + + if (typeof error === 'object') { + // replace ap_id with username + if (error.ap_id) { + error.username = error.ap_id + delete error.ap_id + } + this.message = humanizeErrors(error) + } else { + this.message = error + } + } catch (e) { + // can't parse it, so just treat it like a string + this.message = error + } + } +} diff --git a/src/services/file_size_format/file_size_format.js b/src/services/file_size_format/file_size_format.js index add56ee0..7e6cd4d7 100644 --- a/src/services/file_size_format/file_size_format.js +++ b/src/services/file_size_format/file_size_format.js @@ -9,7 +9,7 @@ const fileSizeFormat = (num) => { exponent = Math.min(Math.floor(Math.log(num) / Math.log(1024)), units.length - 1) num = (num / Math.pow(1024, exponent)).toFixed(2) * 1 unit = units[exponent] - return {num: num, unit: unit} + return { num: num, unit: unit } } const fileSizeFormatService = { fileSizeFormat diff --git a/src/services/follow_manipulate/follow_manipulate.js b/src/services/follow_manipulate/follow_manipulate.js index 1e9bd679..d82ce593 100644 --- a/src/services/follow_manipulate/follow_manipulate.js +++ b/src/services/follow_manipulate/follow_manipulate.js @@ -2,39 +2,26 @@ const fetchUser = (attempt, user, store) => new Promise((resolve, reject) => { setTimeout(() => { store.state.api.backendInteractor.fetchUser({ id: user.id }) .then((user) => store.commit('addNewUsers', [user])) - .then(() => resolve([user.following, attempt])) + .then(() => resolve([user.following, user.requested, user.locked, attempt])) .catch((e) => reject(e)) }, 500) -}).then(([following, attempt]) => { - if (!following && attempt <= 3) { +}).then(([following, sent, locked, attempt]) => { + if (!following && !(locked && sent) && attempt <= 3) { // If we BE reports that we still not following that user - retry, // increment attempts by one - return fetchUser(++attempt, user, store) - } else { - // If we run out of attempts, just return whatever status is. - return following + fetchUser(++attempt, user, store) } }) export const requestFollow = (user, store) => new Promise((resolve, reject) => { store.state.api.backendInteractor.followUser(user.id) .then((updated) => { - store.commit('addNewUsers', [updated]) + store.commit('updateUserRelationship', [updated]) - // For locked users we just mark it that we sent the follow request - if (updated.locked) { - resolve({ - sent: true, - updated - }) - } - - if (updated.following) { - // If we get result immediately, just stop. - resolve({ - sent: false, - updated - }) + if (updated.following || (user.locked && user.requested)) { + // If we get result immediately or the account is locked, just stop. + resolve() + return } // But usually we don't get result immediately, so we ask server @@ -45,20 +32,8 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => { // Recursive Promise, it will call itself up to 3 times. return fetchUser(1, user, store) - .then((following) => { - if (following) { - // We confirmed and everything's good. - resolve({ - sent: false, - updated - }) - } else { - // If after all the tries, just treat it as if user is locked - resolve({ - sent: false, - updated - }) - } + .then(() => { + resolve() }) }) }) @@ -66,7 +41,7 @@ export const requestFollow = (user, store) => new Promise((resolve, reject) => { export const requestUnfollow = (user, store) => new Promise((resolve, reject) => { store.state.api.backendInteractor.unfollowUser(user.id) .then((updated) => { - store.commit('addNewUsers', [updated]) + store.commit('updateUserRelationship', [updated]) resolve({ updated }) diff --git a/src/services/follow_request_fetcher/follow_request_fetcher.service.js b/src/services/follow_request_fetcher/follow_request_fetcher.service.js index 125ff3e1..786740b7 100644 --- a/src/services/follow_request_fetcher/follow_request_fetcher.service.js +++ b/src/services/follow_request_fetcher/follow_request_fetcher.service.js @@ -8,7 +8,7 @@ const fetchAndUpdate = ({ store, credentials }) => { .catch(() => {}) } -const startFetching = ({credentials, store}) => { +const startFetching = ({ credentials, store }) => { fetchAndUpdate({ credentials, store }) const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) return setInterval(boundFetchAndUpdate, 10000) diff --git a/src/services/gesture_service/gesture_service.js b/src/services/gesture_service/gesture_service.js new file mode 100644 index 00000000..88a328f3 --- /dev/null +++ b/src/services/gesture_service/gesture_service.js @@ -0,0 +1,74 @@ + +const DIRECTION_LEFT = [-1, 0] +const DIRECTION_RIGHT = [1, 0] +const DIRECTION_UP = [0, -1] +const DIRECTION_DOWN = [0, 1] + +const deltaCoord = (oldCoord, newCoord) => [newCoord[0] - oldCoord[0], newCoord[1] - oldCoord[1]] + +const touchEventCoord = e => ([e.touches[0].screenX, e.touches[0].screenY]) + +const vectorLength = v => Math.sqrt(v[0] * v[0] + v[1] * v[1]) + +const perpendicular = v => [v[1], -v[0]] + +const dotProduct = (v1, v2) => v1[0] * v2[0] + v1[1] * v2[1] + +const project = (v1, v2) => { + const scalar = (dotProduct(v1, v2) / dotProduct(v2, v2)) + return [scalar * v2[0], scalar * v2[1]] +} + +// direction: either use the constants above or an arbitrary 2d vector. +// threshold: how many Px to move from touch origin before checking if the +// callback should be called. +// divergentTolerance: a scalar for much of divergent direction we tolerate when +// above threshold. for example, with 1.0 we only call the callback if +// divergent component of delta is < 1.0 * direction component of delta. +const swipeGesture = (direction, onSwipe, threshold = 30, perpendicularTolerance = 1.0) => { + return { + direction, + onSwipe, + threshold, + perpendicularTolerance, + _startPos: [0, 0], + _swiping: false + } +} + +const beginSwipe = (event, gesture) => { + gesture._startPos = touchEventCoord(event) + gesture._swiping = true +} + +const updateSwipe = (event, gesture) => { + if (!gesture._swiping) return + // movement too small + const delta = deltaCoord(gesture._startPos, touchEventCoord(event)) + if (vectorLength(delta) < gesture.threshold) return + // movement is opposite from direction + if (dotProduct(delta, gesture.direction) < 0) return + // movement perpendicular to direction is too much + const towardsDir = project(delta, gesture.direction) + const perpendicularDir = perpendicular(gesture.direction) + const towardsPerpendicular = project(delta, perpendicularDir) + if ( + vectorLength(towardsDir) * gesture.perpendicularTolerance < + vectorLength(towardsPerpendicular) + ) return + + gesture.onSwipe() + gesture._swiping = false +} + +const GestureService = { + DIRECTION_LEFT, + DIRECTION_RIGHT, + DIRECTION_UP, + DIRECTION_DOWN, + swipeGesture, + beginSwipe, + updateSwipe +} + +export default GestureService diff --git a/src/services/new_api/mfa.js b/src/services/new_api/mfa.js new file mode 100644 index 00000000..cbba06d5 --- /dev/null +++ b/src/services/new_api/mfa.js @@ -0,0 +1,38 @@ +const verifyOTPCode = ({ app, instance, mfaToken, code }) => { + const url = `${instance}/oauth/mfa/challenge` + const form = new window.FormData() + + form.append('client_id', app.client_id) + form.append('client_secret', app.client_secret) + form.append('mfa_token', mfaToken) + form.append('code', code) + form.append('challenge_type', 'totp') + + return window.fetch(url, { + method: 'POST', + body: form + }).then((data) => data.json()) +} + +const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => { + const url = `${instance}/oauth/mfa/challenge` + const form = new window.FormData() + + form.append('client_id', app.client_id) + form.append('client_secret', app.client_secret) + form.append('mfa_token', mfaToken) + form.append('code', code) + form.append('challenge_type', 'recovery') + + return window.fetch(url, { + method: 'POST', + body: form + }).then((data) => data.json()) +} + +const mfa = { + verifyOTPCode, + verifyRecoveryCode +} + +export default mfa diff --git a/src/services/new_api/oauth.js b/src/services/new_api/oauth.js index 9e656507..d0d18c03 100644 --- a/src/services/new_api/oauth.js +++ b/src/services/new_api/oauth.js @@ -1,51 +1,57 @@ -import {reduce} from 'lodash' +import { reduce } from 'lodash' + +const REDIRECT_URI = `${window.location.origin}/oauth-callback` + +export const getOrCreateApp = ({ clientId, clientSecret, instance, commit }) => { + if (clientId && clientSecret) { + return Promise.resolve({ clientId, clientSecret }) + } -const getOrCreateApp = ({oauth, instance}) => { const url = `${instance}/api/v1/apps` const form = new window.FormData() - form.append('client_name', `PleromaFE_${Math.random()}`) - form.append('redirect_uris', `${window.location.origin}/oauth-callback`) + form.append('client_name', `PleromaFE_${window.___pleromafe_commit_hash}_${(new Date()).toISOString()}`) + form.append('redirect_uris', REDIRECT_URI) form.append('scopes', 'read write follow') return window.fetch(url, { method: 'POST', body: form - }).then((data) => data.json()) + }) + .then((data) => data.json()) + .then((app) => ({ clientId: app.client_id, clientSecret: app.client_secret })) + .then((app) => commit('setClientData', app) || app) } -const login = (args) => { - getOrCreateApp(args).then((app) => { - args.commit('setClientData', app) - - const data = { - response_type: 'code', - client_id: app.client_id, - redirect_uri: app.redirect_uri, - scope: 'read write follow' - } - const dataString = reduce(data, (acc, v, k) => { - const encoded = `${k}=${encodeURIComponent(v)}` - if (!acc) { - return encoded - } else { - return `${acc}&${encoded}` - } - }, false) +const login = ({ instance, clientId }) => { + const data = { + response_type: 'code', + client_id: clientId, + redirect_uri: REDIRECT_URI, + scope: 'read write follow' + } - // Do the redirect... - const url = `${args.instance}/oauth/authorize?${dataString}` + const dataString = reduce(data, (acc, v, k) => { + const encoded = `${k}=${encodeURIComponent(v)}` + if (!acc) { + return encoded + } else { + return `${acc}&${encoded}` + } + }, false) - window.location.href = url - }) + // Do the redirect... + const url = `${instance}/oauth/authorize?${dataString}` + + window.location.href = url } -const getTokenWithCredentials = ({app, instance, username, password}) => { +const getTokenWithCredentials = ({ clientId, clientSecret, instance, username, password }) => { const url = `${instance}/oauth/token` const form = new window.FormData() - form.append('client_id', app.client_id) - form.append('client_secret', app.client_secret) + form.append('client_id', clientId) + form.append('client_secret', clientSecret) form.append('grant_type', 'password') form.append('username', username) form.append('password', password) @@ -56,12 +62,12 @@ const getTokenWithCredentials = ({app, instance, username, password}) => { }).then((data) => data.json()) } -const getToken = ({app, instance, code}) => { +const getToken = ({ clientId, clientSecret, instance, code }) => { const url = `${instance}/oauth/token` const form = new window.FormData() - form.append('client_id', app.client_id) - form.append('client_secret', app.client_secret) + form.append('client_id', clientId) + form.append('client_secret', clientSecret) form.append('grant_type', 'authorization_code') form.append('code', code) form.append('redirect_uri', `${window.location.origin}/oauth-callback`) @@ -69,6 +75,67 @@ const getToken = ({app, instance, code}) => { return window.fetch(url, { method: 'POST', body: form + }) + .then((data) => data.json()) +} + +export const getClientToken = ({ clientId, clientSecret, instance }) => { + const url = `${instance}/oauth/token` + const form = new window.FormData() + + form.append('client_id', clientId) + form.append('client_secret', clientSecret) + form.append('grant_type', 'client_credentials') + form.append('redirect_uri', `${window.location.origin}/oauth-callback`) + + return window.fetch(url, { + method: 'POST', + body: form + }).then((data) => data.json()) +} +const verifyOTPCode = ({ app, instance, mfaToken, code }) => { + const url = `${instance}/oauth/mfa/challenge` + const form = new window.FormData() + + form.append('client_id', app.client_id) + form.append('client_secret', app.client_secret) + form.append('mfa_token', mfaToken) + form.append('code', code) + form.append('challenge_type', 'totp') + + return window.fetch(url, { + method: 'POST', + body: form + }).then((data) => data.json()) +} + +const verifyRecoveryCode = ({ app, instance, mfaToken, code }) => { + const url = `${instance}/oauth/mfa/challenge` + const form = new window.FormData() + + form.append('client_id', app.client_id) + form.append('client_secret', app.client_secret) + form.append('mfa_token', mfaToken) + form.append('code', code) + form.append('challenge_type', 'recovery') + + return window.fetch(url, { + method: 'POST', + body: form + }).then((data) => data.json()) +} + +const revokeToken = ({ app, instance, token }) => { + const url = `${instance}/oauth/revoke` + const form = new window.FormData() + + form.append('client_id', app.clientId) + form.append('client_secret', app.clientSecret) + form.append('token', token) + + return window.fetch(url, { + method: 'POST', + body: form }).then((data) => data.json()) } @@ -76,7 +143,10 @@ const oauth = { login, getToken, getTokenWithCredentials, - getOrCreateApp + getOrCreateApp, + verifyOTPCode, + verifyRecoveryCode, + revokeToken } export default oauth diff --git a/src/services/new_api/password_reset.js b/src/services/new_api/password_reset.js new file mode 100644 index 00000000..43199625 --- /dev/null +++ b/src/services/new_api/password_reset.js @@ -0,0 +1,18 @@ +import { reduce } from 'lodash' + +const MASTODON_PASSWORD_RESET_URL = `/auth/password` + +const resetPassword = ({ instance, email }) => { + const params = { email } + const query = reduce(params, (acc, v, k) => { + const encoded = `${k}=${encodeURIComponent(v)}` + return `${acc}&${encoded}` + }, '') + const url = `${instance}${MASTODON_PASSWORD_RESET_URL}?${query}` + + return window.fetch(url, { + method: 'POST' + }) +} + +export default resetPassword diff --git a/src/services/new_api/user_search.js b/src/services/new_api/user_search.js deleted file mode 100644 index ce7da88e..00000000 --- a/src/services/new_api/user_search.js +++ /dev/null @@ -1,16 +0,0 @@ -import utils from './utils.js' - -const search = ({query, store}) => { - return utils.request({ - store, - url: '/api/pleroma/search_user', - params: { - query - } - }).then((data) => data.json()) -} -const UserSearch = { - search -} - -export default UserSearch diff --git a/src/services/new_api/utils.js b/src/services/new_api/utils.js deleted file mode 100644 index 078f392f..00000000 --- a/src/services/new_api/utils.js +++ /dev/null @@ -1,36 +0,0 @@ -const queryParams = (params) => { - return Object.keys(params) - .map(k => encodeURIComponent(k) + '=' + encodeURIComponent(params[k])) - .join('&') -} - -const headers = (store) => { - const accessToken = store.state.oauth.token - if (accessToken) { - return {'Authorization': `Bearer ${accessToken}`} - } else { - return {} - } -} - -const request = ({method = 'GET', url, params, store}) => { - const instance = store.state.instance.server - let fullUrl = `${instance}${url}` - - if (method === 'GET' && params) { - fullUrl = fullUrl + `?${queryParams(params)}` - } - - return window.fetch(fullUrl, { - method, - headers: headers(store), - credentials: 'same-origin' - }) -} - -const utils = { - queryParams, - request -} - -export default utils diff --git a/src/services/notification_utils/notification_utils.js b/src/services/notification_utils/notification_utils.js index cd8f3f9e..7021adbd 100644 --- a/src/services/notification_utils/notification_utils.js +++ b/src/services/notification_utils/notification_utils.js @@ -10,8 +10,8 @@ export const visibleTypes = store => ([ ].filter(_ => _)) const sortById = (a, b) => { - const seqA = Number(a.action.id) - const seqB = Number(b.action.id) + const seqA = Number(a.id) + const seqB = Number(b.id) const isSeqA = !Number.isNaN(seqA) const isSeqB = !Number.isNaN(seqB) if (isSeqA && isSeqB) { @@ -21,16 +21,18 @@ const sortById = (a, b) => { } else if (!isSeqA && isSeqB) { return -1 } else { - return a.action.id > b.action.id ? -1 : 1 + return a.id > b.id ? -1 : 1 } } -export const visibleNotificationsFromStore = store => { +export const visibleNotificationsFromStore = (store, types) => { // map is just to clone the array since sort mutates it and it causes some issues let sortedNotifications = notificationsFromStore(store).map(_ => _).sort(sortById) sortedNotifications = sortBy(sortedNotifications, 'seen') - return sortedNotifications.filter((notification) => visibleTypes(store).includes(notification.type)) + return sortedNotifications.filter( + (notification) => (types || visibleTypes(store)).includes(notification.type) + ) } export const unseenNotificationsFromStore = store => - filter(visibleNotificationsFromStore(store), ({seen}) => !seen) + filter(visibleNotificationsFromStore(store), ({ seen }) => !seen) diff --git a/src/services/notifications_fetcher/notifications_fetcher.service.js b/src/services/notifications_fetcher/notifications_fetcher.service.js index 3ecdae6a..b6c4cf80 100644 --- a/src/services/notifications_fetcher/notifications_fetcher.service.js +++ b/src/services/notifications_fetcher/notifications_fetcher.service.js @@ -1,45 +1,56 @@ import apiService from '../api/api.service.js' -const update = ({store, notifications, older}) => { +const update = ({ store, notifications, older }) => { store.dispatch('setNotificationsError', { value: false }) store.dispatch('addNewNotifications', { notifications, older }) } -const fetchAndUpdate = ({store, credentials, older = false}) => { +const fetchAndUpdate = ({ store, credentials, older = false }) => { const args = { credentials } const rootState = store.rootState || store.state const timelineData = rootState.statuses.notifications + const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined' + ? rootState.instance.hideMutedPosts + : rootState.config.hideMutedPosts + args['withMuted'] = !hideMutedPosts + + args['timeline'] = 'notifications' if (older) { if (timelineData.minId !== Number.POSITIVE_INFINITY) { args['until'] = timelineData.minId } + return fetchNotifications({ store, args, older }) } else { - // load unread notifications repeadedly to provide consistency between browser tabs + // fetch new notifications + if (timelineData.maxId !== Number.POSITIVE_INFINITY) { + args['since'] = timelineData.maxId + } + const result = fetchNotifications({ store, args, older }) + + // load unread notifications repeatedly to provide consistency between browser tabs const notifications = timelineData.data const unread = notifications.filter(n => !n.seen).map(n => n.id) - if (!unread.length) { - args['since'] = timelineData.maxId - } else { - args['since'] = Math.min(...unread) - 1 - if (timelineData.maxId !== Math.max(...unread)) { - args['until'] = Math.max(...unread, args['since'] + 20) - } + if (unread.length) { + args['since'] = Math.min(...unread) + fetchNotifications({ store, args, older }) } - } - args['timeline'] = 'notifications' + return result + } +} +const fetchNotifications = ({ store, args, older }) => { return apiService.fetchTimeline(args) .then((notifications) => { - update({store, notifications, older}) + update({ store, notifications, older }) return notifications }, () => store.dispatch('setNotificationsError', { value: true })) .catch(() => store.dispatch('setNotificationsError', { value: true })) } -const startFetching = ({credentials, store}) => { +const startFetching = ({ credentials, store }) => { fetchAndUpdate({ credentials, store }) const boundFetchAndUpdate = () => fetchAndUpdate({ credentials, store }) // Initially there's set flag to silence all desktop notifications so diff --git a/src/services/offset_finder/offset_finder.service.js b/src/services/offset_finder/offset_finder.service.js new file mode 100644 index 00000000..9034f8c8 --- /dev/null +++ b/src/services/offset_finder/offset_finder.service.js @@ -0,0 +1,31 @@ +export const findOffset = (child, parent, { top = 0, left = 0 } = {}, ignorePadding = true) => { + const result = { + top: top + child.offsetTop, + left: left + child.offsetLeft + } + if (!ignorePadding && child !== window) { + const { topPadding, leftPadding } = findPadding(child) + result.top += ignorePadding ? 0 : topPadding + result.left += ignorePadding ? 0 : leftPadding + } + + if (child.offsetParent && (parent === window || parent.contains(child.offsetParent) || parent === child.offsetParent)) { + return findOffset(child.offsetParent, parent, result, false) + } else { + if (parent !== window) { + const { topPadding, leftPadding } = findPadding(parent) + result.top += topPadding + result.left += leftPadding + } + return result + } +} + +const findPadding = (el) => { + const topPaddingStr = window.getComputedStyle(el)['padding-top'] + const topPadding = Number(topPaddingStr.substring(0, topPaddingStr.length - 2)) + const leftPaddingStr = window.getComputedStyle(el)['padding-left'] + const leftPadding = Number(leftPaddingStr.substring(0, leftPaddingStr.length - 2)) + + return { topPadding, leftPadding } +} diff --git a/src/services/status_poster/status_poster.service.js b/src/services/status_poster/status_poster.service.js index f1932bb6..9e904d3a 100644 --- a/src/services/status_poster/status_poster.service.js +++ b/src/services/status_poster/status_poster.service.js @@ -1,10 +1,19 @@ import { map } from 'lodash' import apiService from '../api/api.service.js' -const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => { +const postStatus = ({ store, status, spoilerText, visibility, sensitive, poll, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => { const mediaIds = map(media, 'id') - return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType, noAttachmentLinks: store.state.instance.noAttachmentLinks}) + return apiService.postStatus({ + credentials: store.state.users.currentUser.credentials, + status, + spoilerText, + visibility, + sensitive, + mediaIds, + inReplyToStatusId, + contentType, + poll }) .then((data) => { if (!data.error) { store.dispatch('addNewStatuses', { @@ -26,25 +35,7 @@ const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = const uploadMedia = ({ store, formData }) => { const credentials = store.state.users.currentUser.credentials - return apiService.uploadMedia({ credentials, formData }).then((xml) => { - // Firefox and Chrome treat method differently... - let link = xml.getElementsByTagName('link') - - if (link.length === 0) { - link = xml.getElementsByTagName('atom:link') - } - - link = link[0] - - const mediaData = { - id: xml.getElementsByTagName('media_id')[0].textContent, - url: xml.getElementsByTagName('media_url')[0].textContent, - image: link.getAttribute('href'), - mimetype: link.getAttribute('type') - } - - return mediaData - }) + return apiService.uploadMedia({ credentials, formData }) } const statusPosterService = { diff --git a/src/services/style_setter/style_setter.js b/src/services/style_setter/style_setter.js index d0b6ccbf..1cf7edc3 100644 --- a/src/services/style_setter/style_setter.js +++ b/src/services/style_setter/style_setter.js @@ -22,7 +22,7 @@ const setStyle = (href, commit) => { ***/ const head = document.head const body = document.body - body.style.display = 'none' + body.classList.add('hidden') const cssEl = document.createElement('link') cssEl.setAttribute('rel', 'stylesheet') cssEl.setAttribute('href', href) @@ -46,7 +46,7 @@ const setStyle = (href, commit) => { head.appendChild(styleEl) // const styleSheet = styleEl.sheet - body.style.display = 'initial' + body.classList.remove('hidden') } cssEl.addEventListener('load', setDynamic) @@ -75,7 +75,7 @@ const applyTheme = (input, commit) => { const { rules, theme } = generatePreset(input) const head = document.head const body = document.body - body.style.display = 'none' + body.classList.add('hidden') const styleEl = document.createElement('style') head.appendChild(styleEl) @@ -86,7 +86,7 @@ const applyTheme = (input, commit) => { styleSheet.insertRule(`body { ${rules.colors} }`, 'index-max') styleSheet.insertRule(`body { ${rules.shadows} }`, 'index-max') styleSheet.insertRule(`body { ${rules.fonts} }`, 'index-max') - body.style.display = 'initial' + body.classList.remove('hidden') // commit('setOption', { name: 'colors', value: htmlColors }) // commit('setOption', { name: 'radii', value: radii }) @@ -202,6 +202,7 @@ const generateColors = (input) => { colors.topBarLink = col.topBarLink || getTextColor(colors.topBar, colors.fgLink) colors.faintLink = col.faintLink || Object.assign({}, col.link) + colors.linkBg = alphaBlend(colors.link, 0.4, colors.bg) colors.icon = mixrgb(colors.bg, colors.text) @@ -238,12 +239,12 @@ const generateColors = (input) => { }) const htmlColors = Object.entries(colors) - .reduce((acc, [k, v]) => { - if (!v) return acc - acc.solid[k] = rgb2hex(v) - acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v) - return acc - }, { complete: {}, solid: {} }) + .reduce((acc, [k, v]) => { + if (!v) return acc + acc.solid[k] = rgb2hex(v) + acc.complete[k] = typeof v.a === 'undefined' ? rgb2hex(v) : rgb2rgba(v) + return acc + }, { complete: {}, solid: {} }) return { rules: { colors: Object.entries(htmlColors.complete) diff --git a/src/services/timeline_fetcher/timeline_fetcher.service.js b/src/services/timeline_fetcher/timeline_fetcher.service.js index 6f99616f..f72688f8 100644 --- a/src/services/timeline_fetcher/timeline_fetcher.service.js +++ b/src/services/timeline_fetcher/timeline_fetcher.service.js @@ -2,7 +2,7 @@ import { camelCase } from 'lodash' import apiService from '../api/api.service.js' -const update = ({store, statuses, timeline, showImmediately, userId}) => { +const update = ({ store, statuses, timeline, showImmediately, userId }) => { const ccTimeline = camelCase(timeline) store.dispatch('setError', { value: false }) @@ -15,10 +15,13 @@ const update = ({store, statuses, timeline, showImmediately, userId}) => { }) } -const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until}) => { +const fetchAndUpdate = ({ store, credentials, timeline = 'friends', older = false, showImmediately = false, userId = false, tag = false, until }) => { const args = { timeline, credentials } const rootState = store.rootState || store.state const timelineData = rootState.statuses.timelines[camelCase(timeline)] + const hideMutedPosts = typeof rootState.config.hideMutedPosts === 'undefined' + ? rootState.instance.hideMutedPosts + : rootState.config.hideMutedPosts if (older) { args['until'] = until || timelineData.minId @@ -28,6 +31,7 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false args['userId'] = userId args['tag'] = tag + args['withMuted'] = !hideMutedPosts const numStatusesBeforeFetch = timelineData.statuses.length @@ -36,17 +40,17 @@ const fetchAndUpdate = ({store, credentials, timeline = 'friends', older = false if (!older && statuses.length >= 20 && !timelineData.loading && numStatusesBeforeFetch > 0) { store.dispatch('queueFlush', { timeline: timeline, id: timelineData.maxId }) } - update({store, statuses, timeline, showImmediately, userId}) + update({ store, statuses, timeline, showImmediately, userId }) return statuses }, () => store.dispatch('setError', { value: true })) } -const startFetching = ({timeline = 'friends', credentials, store, userId = false, tag = false}) => { +const startFetching = ({ timeline = 'friends', credentials, store, userId = false, tag = false }) => { const rootState = store.rootState || store.state const timelineData = rootState.statuses.timelines[camelCase(timeline)] const showImmediately = timelineData.visibleStatuses.length === 0 timelineData.userId = userId - fetchAndUpdate({timeline, credentials, store, showImmediately, userId, tag}) + fetchAndUpdate({ timeline, credentials, store, showImmediately, userId, tag }) const boundFetchAndUpdate = () => fetchAndUpdate({ timeline, credentials, store, userId, tag }) return setInterval(boundFetchAndUpdate, 10000) } diff --git a/src/services/user_highlighter/user_highlighter.js b/src/services/user_highlighter/user_highlighter.js index f6ddfb9c..b91c0f78 100644 --- a/src/services/user_highlighter/user_highlighter.js +++ b/src/services/user_highlighter/user_highlighter.js @@ -1,7 +1,7 @@ import { hex2rgb } from '../color_convert/color_convert.js' const highlightStyle = (prefs) => { if (prefs === undefined) return - const {color, type} = prefs + const { color, type } = prefs if (typeof color !== 'string') return const rgb = hex2rgb(color) if (rgb == null) return diff --git a/src/services/user_profile_link_generator/user_profile_link_generator.js b/src/services/user_profile_link_generator/user_profile_link_generator.js index a214ca48..16f1531d 100644 --- a/src/services/user_profile_link_generator/user_profile_link_generator.js +++ b/src/services/user_profile_link_generator/user_profile_link_generator.js @@ -1,7 +1,7 @@ import { includes } from 'lodash' const generateProfileLink = (id, screenName, restrictedNicknames) => { - const complicated = (isExternal(screenName) || includes(restrictedNicknames, screenName)) + const complicated = !screenName || (isExternal(screenName) || includes(restrictedNicknames, screenName)) return { name: (complicated ? 'external-user-profile' : 'user-profile'), params: (complicated ? { id } : { name: screenName }) diff --git a/src/services/version/version.service.js b/src/services/version/version.service.js new file mode 100644 index 00000000..2e11bf3a --- /dev/null +++ b/src/services/version/version.service.js @@ -0,0 +1,6 @@ + +export const extractCommit = versionString => { + const regex = /-g(\w+)/i + const matches = versionString.match(regex) + return matches ? matches[1] : '' +} diff --git a/src/services/window_utils/window_utils.js b/src/services/window_utils/window_utils.js new file mode 100644 index 00000000..faff6cb9 --- /dev/null +++ b/src/services/window_utils/window_utils.js @@ -0,0 +1,5 @@ + +export const windowWidth = () => + window.innerWidth || + document.documentElement.clientWidth || + document.body.clientWidth |