diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md new file mode 100644 index 00000000..924c38da --- /dev/null +++ b/BREAKING_CHANGES.md @@ -0,0 +1,10 @@ +# v1.0 +## Removed features/radically changed behavior +### minimalScopesMode +As of !633, `scopeOptions` is no longer available and instead is changed for `minimalScopesMode` (default: `false`) + +Reasoning is that scopeOptions option originally existed mostly as a backwards-compatibility with GNU Social which only had `public` scope available and using scope selector would''t work. Since at some point we dropped GNU Social support, this option was mostly a nuisance (being default `false`'), however some people think scopes are an annoyance to a certain degree and want as less of that feature as possible. + +Solution - to only show minimal set among: *Direct*, *User default* and *Scope of post replying to*. This also makes it impossible to reply to a DM with a non-DM post from UI. + +*This setting is admin-default, user-configurable. Admin can choose different default for their instance but user can override it.* diff --git a/README.md b/README.md index 80938c45..889f0837 100644 --- a/README.md +++ b/README.md @@ -41,7 +41,7 @@ FE Build process also leaves current commit hash in global variable `___pleromaf # Configuration -Edit config.json for configuration. scopeOptionsEnabled gives you input fields for CWs and the scope settings. +Edit config.json for configuration. ## Options diff --git a/src/App.scss b/src/App.scss index dcc913d6..5fc0dd27 100644 --- a/src/App.scss +++ b/src/App.scss @@ -735,3 +735,54 @@ nav { .btn.btn-default { min-height: 28px; } + +.autocomplete { + &-panel { + position: relative; + + &-body { + 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); + } + } + + &-item { + 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; + 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); + } + } +} \ No newline at end of file diff --git a/src/boot/after_store.js b/src/boot/after_store.js index e03b7f27..66169546 100644 --- a/src/boot/after_store.js +++ b/src/boot/after_store.js @@ -95,7 +95,7 @@ const setSettings = async ({ apiConfig, staticConfig, store }) => { copyInstanceOption('redirectRootNoLogin') copyInstanceOption('redirectRootLogin') copyInstanceOption('showInstanceSpecificPanel') - copyInstanceOption('scopeOptionsEnabled') + copyInstanceOption('minimalScopesMode') copyInstanceOption('formattingOptionsEnabled') copyInstanceOption('hideMutedPosts') copyInstanceOption('collapseMessageWithSubject') diff --git a/src/components/emoji-input/emoji-input.js b/src/components/emoji-input/emoji-input.js new file mode 100644 index 00000000..a5bb6eaf --- /dev/null +++ b/src/components/emoji-input/emoji-input.js @@ -0,0 +1,107 @@ +import Completion from '../../services/completion/completion.js' +import { take, filter, map } from 'lodash' + +const EmojiInput = { + props: [ + 'value', + 'placeholder', + 'type', + 'classname' + ], + data () { + return { + highlighted: 0, + caret: 0 + } + }, + computed: { + suggestions () { + const firstchar = this.textAtCaret.charAt(0) + 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) => ({ + shortcode: `:${shortcode}:`, + 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.value, this.caret - 1) || {} + return word + }, + emoji () { + return this.$store.state.instance.emoji || [] + }, + customEmoji () { + return this.$store.state.instance.customEmoji || [] + } + }, + methods: { + replace (replacement) { + const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) + this.$emit('input', newValue) + this.caret = 0 + }, + replaceEmoji (e) { + const len = this.suggestions.length || 0 + if (this.textAtCaret === ':' || e.ctrlKey) { return } + if (len > 0) { + e.preventDefault() + const emoji = this.suggestions[this.highlighted] + const replacement = emoji.utf || (emoji.shortcode + ' ') + const newValue = Completion.replaceWord(this.value, this.wordAtCaret, replacement) + this.$emit('input', newValue) + this.caret = 0 + this.highlighted = 0 + } + }, + cycleBackward (e) { + const len = this.suggestions.length || 0 + if (len > 0) { + e.preventDefault() + this.highlighted -= 1 + if (this.highlighted < 0) { + this.highlighted = this.suggestions.length - 1 + } + } else { + this.highlighted = 0 + } + }, + cycleForward (e) { + const len = this.suggestions.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 + } + }, + onKeydown (e) { + e.stopPropagation() + }, + onInput (e) { + this.$emit('input', e.target.value) + }, + setCaret ({target: {selectionStart}}) { + this.caret = selectionStart + } + } +} + +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..338b77cd --- /dev/null +++ b/src/components/emoji-input/emoji-input.vue @@ -0,0 +1,64 @@ +<template> + <div class="emoji-input"> + <input + v-if="type !== 'textarea'" + :class="classname" + :type="type" + :value="value" + :placeholder="placeholder" + @input="onInput" + @click="setCaret" + @keyup="setCaret" + @keydown="onKeydown" + @keydown.down="cycleForward" + @keydown.up="cycleBackward" + @keydown.shift.tab="cycleBackward" + @keydown.tab="cycleForward" + @keydown.enter="replaceEmoji" + /> + <textarea + v-else + :class="classname" + :value="value" + :placeholder="placeholder" + @input="onInput" + @click="setCaret" + @keyup="setCaret" + @keydown="onKeydown" + @keydown.down="cycleForward" + @keydown.up="cycleBackward" + @keydown.shift.tab="cycleBackward" + @keydown.tab="cycleForward" + @keydown.enter="replaceEmoji" + ></textarea> + <div class="autocomplete-panel" v-if="suggestions"> + <div class="autocomplete-panel-body"> + <div + v-for="(emoji, index) in suggestions" + :key="index" + @click="replace(emoji.utf || (emoji.shortcode + ' '))" + class="autocomplete-item" + :class="{ highlighted: emoji.highlighted }" + > + <span v-if="emoji.img"> + <img :src="emoji.img" /> + </span> + <span v-else>{{emoji.utf}}</span> + <span>{{emoji.shortcode}}</span> + </div> + </div> + </div> + </div> +</template> + +<script src="./emoji-input.js"></script> + +<style lang="scss"> +@import '../../_variables.scss'; + +.emoji-input { + .form-control { + width: 100%; + } +} +</style> diff --git a/src/components/features_panel/features_panel.js b/src/components/features_panel/features_panel.js index e0b7a118..5f0b7b25 100644 --- a/src/components/features_panel/features_panel.js +++ b/src/components/features_panel/features_panel.js @@ -6,7 +6,7 @@ const FeaturesPanel = { 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..7a263e01 100644 --- a/src/components/features_panel/features_panel.vue +++ b/src/components/features_panel/features_panel.vue @@ -12,7 +12,7 @@ <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.scope_options')}}</li> <li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li> </ul> </div> diff --git a/src/components/notification/notification.js b/src/components/notification/notification.js index fe5b7018..42a48f3f 100644 --- a/src/components/notification/notification.js +++ b/src/components/notification/notification.js @@ -31,6 +31,15 @@ const Notification = { const highlight = this.$store.state.config.highlight const user = this.notification.action.user return highlightStyle(highlight[user.screen_name]) + }, + userInStore () { + return this.$store.getters.findUser(this.notification.action.user.id) + }, + user () { + if (this.userInStore) { + return this.userInStore + } + return {} } } } diff --git a/src/components/notification/notification.vue b/src/components/notification/notification.vue index 5e9cef97..8f532747 100644 --- a/src/components/notification/notification.vue +++ b/src/components/notification/notification.vue @@ -1,11 +1,11 @@ <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> + <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"/> + <UserCard :user="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> diff --git a/src/components/post_status_form/post_status_form.js b/src/components/post_status_form/post_status_form.js index c5f30ca6..40e2610e 100644 --- a/src/components/post_status_form/post_status_form.js +++ b/src/components/post_status_form/post_status_form.js @@ -1,5 +1,7 @@ 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 fileTypeService from '../../services/file_type/file_type.service.js' import Completion from '../../services/completion/completion.js' import { take, filter, reject, map, uniqBy } from 'lodash' @@ -28,7 +30,9 @@ const PostStatusForm = { 'subject' ], components: { - MediaUpload + MediaUpload, + ScopeSelector, + EmojiInput }, mounted () { this.resize(this.$refs.textarea) @@ -78,14 +82,6 @@ const PostStatusForm = { } }, 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 === '@') { @@ -133,6 +129,15 @@ const PostStatusForm = { 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 + }, emoji () { return this.$store.state.instance.emoji || [] }, @@ -157,8 +162,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,7 +171,7 @@ 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 () { diff --git a/src/components/post_status_form/post_status_form.vue b/src/components/post_status_form/post_status_form.vue index 612f87c1..3d3a1082 100644 --- a/src/components/post_status_form/post_status_form.vue +++ b/src/components/post_status_form/post_status_form.vue @@ -10,12 +10,13 @@ <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 + <EmojiInput v-if="newStatus.spoilerText || alwaysShowSubject" type="text" :placeholder="$t('post_status.content_warning')" v-model="newStatus.spoilerText" - class="form-cw"> + classname="form-control" + /> <textarea ref="textarea" @click="setCaret" @@ -47,22 +48,26 @@ </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> + <scope-selector + :showAll="showAllScopes" + :userDefault="userDefaultScope" + :originalScope="copyMessageScope" + :initialScope="newStatus.visibility" + :onScopeChange="changeVis"/> </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> + <div class="autocomplete-panel" v-if="candidates"> + <div class="autocomplete-panel-body"> + <div + v-for="(candidate, index) in candidates" + :key="index" + @click="replace(candidate.utf || (candidate.screen_name + ' '))" + class="autocomplete-item" + :class="{ highlighted: candidate.highlighted }" + > + <span v-if="candidate.img"><img :src="candidate.img" /></span> + <span v-else>{{candidate.utf}}</span> + <span>{{candidate.screen_name}}<small>{{candidate.name}}</small></span> </div> </div> </div> @@ -261,50 +266,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; - 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/scope_selector/scope_selector.js b/src/components/scope_selector/scope_selector.js new file mode 100644 index 00000000..8a42ee7b --- /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..33ea488f --- /dev/null +++ b/src/components/scope_selector/scope_selector.vue @@ -0,0 +1,30 @@ +<template> +<div v-if="!showNothing"> + <i class="icon-mail-alt" + :class="css.direct" + :title="$t('post_status.scope.direct')" + v-if="showDirect" + @click="changeVis('direct')"> + </i> + <i class="icon-lock" + :class="css.private" + :title="$t('post_status.scope.private')" + v-if="showPrivate" + v-on:click="changeVis('private')"> + </i> + <i class="icon-lock-open-alt" + :class="css.unlisted" + :title="$t('post_status.scope.unlisted')" + v-if="showUnlisted" + @click="changeVis('unlisted')"> + </i> + <i class="icon-globe" + :class="css.public" + :title="$t('post_status.scope.public')" + v-if="showPublic" + @click="changeVis('public')"> + </i> +</div> +</template> + +<script src="./scope_selector.js"></script> diff --git a/src/components/settings/settings.js b/src/components/settings/settings.js index 1d5f75ed..a85ab674 100644 --- a/src/components/settings/settings.js +++ b/src/components/settings/settings.js @@ -70,13 +70,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, @@ -200,6 +205,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 33dad549..6ee103c7 100644 --- a/src/components/settings/settings.vue +++ b/src/components/settings/settings.vue @@ -118,6 +118,12 @@ </label> </div> </li> + <li> + <input type="checkbox" id="minimalScopesMode" v-model="minimalScopesModeLocal"> + <label for="minimalScopesMode"> + {{$t('settings.minimal_scopes_mode')}} {{$t('settings.instance_default', { value: minimalScopesModeDefault })}} + </label> + </li> </ul> </div> diff --git a/src/components/status/status.js b/src/components/status/status.js index 550fe76f..0295cd04 100644 --- a/src/components/status/status.js +++ b/src/components/status/status.js @@ -251,6 +251,12 @@ 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 } }, components: { diff --git a/src/components/status/status.vue b/src/components/status/status.vue index 1f415534..690e8318 100644 --- a/src/components/status/status.vue +++ b/src/components/status/status.vue @@ -98,16 +98,16 @@ </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> + <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="!showingLongSubject" href="#" @click.prevent="showingLongSubject=true">{{$t("general.show_more")}}</a> + <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml"></div> + <a v-if="showingLongSubject" href="#" class="status-unhider" @click.prevent="showingLongSubject=false">{{$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> + <a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowMore">{{$t("general.show_more")}}</a> + <div @click.prevent="linkClicked" class="status-content media-body" v-html="contentHtml" 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> + <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 v-if="status.attachments && (!hideSubjectStatus || showingLongSubject)" class="attachments media-body"> diff --git a/src/components/user_profile/user_profile.js b/src/components/user_profile/user_profile.js index 82df4510..1df06fe6 100644 --- a/src/components/user_profile/user_profile.js +++ b/src/components/user_profile/user_profile.js @@ -72,9 +72,6 @@ const UserProfile = { return this.$store.getters.findUser(this.fetchedUserId || routeParams.name || routeParams.id) }, user () { - if (this.timeline.statuses[0]) { - return this.timeline.statuses[0].user - } if (this.userInStore) { return this.userInStore } diff --git a/src/components/user_settings/user_settings.js b/src/components/user_settings/user_settings.js index 72e7bb53..b6a0479d 100644 --- a/src/components/user_settings/user_settings.js +++ b/src/components/user_settings/user_settings.js @@ -4,9 +4,11 @@ import get from 'lodash/get' 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 EmojiInput from '../emoji-input/emoji-input.vue' import withSubscription from '../../hocs/with_subscription/with_subscription' import withList from '../../hocs/with_list/with_list' @@ -66,10 +68,12 @@ const UserSettings = { }, components: { StyleSwitcher, + ScopeSelector, TabSwitcher, ImageCropper, BlockList, - MuteList + MuteList, + EmojiInput }, computed: { user () { @@ -78,8 +82,8 @@ const UserSettings = { pleromaBackend () { return this.$store.state.instance.pleromaBackend }, - scopeOptionsEnabled () { - return this.$store.state.instance.scopeOptionsEnabled + minimalScopesMode () { + return this.$store.state.instance.minimalScopesMode }, vis () { return { diff --git a/src/components/user_settings/user_settings.vue b/src/components/user_settings/user_settings.vue index c9e68808..c08698dc 100644 --- a/src/components/user_settings/user_settings.vue +++ b/src/components/user_settings/user_settings.vue @@ -22,20 +22,29 @@ <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> + <EmojiInput + type="text" + v-model="newName" + id="username" + classname="name-changer" + /> <p>{{$t('settings.bio')}}</p> - <textarea class="bio" v-model="newBio"></textarea> + <EmojiInput + type="textarea" + v-model="newBio" + classname="bio" + /> <p> <input type="checkbox" v-model="newLocked" id="account-locked"> <label for="account-locked">{{$t('settings.lock_account_description')}}</label> </p> - <div v-if="scopeOptionsEnabled"> + <div> <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> + <scope-selector + :showAll="true" + :userDefault="newDefaultScope" + :onScopeChange="changeVis"/> </div> </div> <p> @@ -61,7 +70,7 @@ <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> + <img :src="user.profile_image_url_original" class="current-avatar" /> <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" /> @@ -69,12 +78,11 @@ <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> + <img :src="user.cover_photo" class="banner" /> <p>{{$t('settings.set_new_profile_banner')}}</p> - <img class="banner" v-bind:src="bannerPreview" v-if="bannerPreview"> - </img> + <img class="banner" v-bind:src="bannerPreview" v-if="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> @@ -86,10 +94,9 @@ <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> + <img class="bg" v-bind:src="backgroundPreview" v-if="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> @@ -165,7 +172,7 @@ <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> + <input type="file" ref="followlist" v-on:change="followListChange" /> </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> diff --git a/src/i18n/en.json b/src/i18n/en.json index c501c6a7..026546cc 100644 --- a/src/i18n/en.json +++ b/src/i18n/en.json @@ -20,7 +20,9 @@ "submit": "Submit", "more": "More", "generic_error": "An error occured", - "optional": "optional" + "optional": "optional", + "show_more": "Show more", + "show_less": "Show less" }, "image_cropper": { "crop_picture": "Crop picture", @@ -215,6 +217,7 @@ "saving_ok": "Settings saved", "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", diff --git a/src/i18n/ru.json b/src/i18n/ru.json index 6799cc96..89aa43f4 100644 --- a/src/i18n/ru.json +++ b/src/i18n/ru.json @@ -111,6 +111,8 @@ "import_theme": "Загрузить Тему", "inputRadius": "Поля ввода", "checkboxRadius": "Чекбоксы", + "instance_default": "(по умолчанию: {value})", + "instance_default_simple": "(по умолчанию)", "interface": "Интерфейс", "interfaceLanguage": "Язык интерфейса", "limited_availability": "Не доступно в вашем браузере", @@ -149,7 +151,11 @@ "reply_visibility_all": "Показывать все ответы", "reply_visibility_following": "Показывать только ответы мне и тех на кого я подписан", "reply_visibility_self": "Показывать только ответы мне", + "saving_err": "Не удалось сохранить настройки", + "saving_ok": "Сохранено", "security_tab": "Безопасность", + "scope_copy": "Копировать видимость поста при ответе (всегда включено для Личных Сообщений)", + "minimal_scopes_mode": "Минимизировать набор опций видимости поста", "set_new_avatar": "Загрузить новый аватар", "set_new_profile_background": "Загрузить новый фон профиля", "set_new_profile_banner": "Загрузить новый баннер профиля", @@ -164,6 +170,10 @@ "theme_help_v2_2": "Под некоторыми полями ввода это идикаторы контрастности, наведите на них мышью чтобы узнать больше. Приспользовании прозрачности контраст расчитывается для наихудшего варианта.", "tooltipRadius": "Всплывающие подсказки/уведомления", "user_settings": "Настройки пользователя", + "values": { + "false": "нет", + "true": "да" + }, "style": { "switcher": { "keep_color": "Оставить цвета", diff --git a/src/modules/config.js b/src/modules/config.js index c5491c01..1666a2c5 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -33,7 +33,8 @@ const defaultState = { 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 = { diff --git a/src/modules/instance.js b/src/modules/instance.js index f778ac4d..3a559ba0 100644 --- a/src/modules/instance.js +++ b/src/modules/instance.js @@ -15,7 +15,6 @@ const defaultState = { redirectRootNoLogin: '/main/all', redirectRootLogin: '/main/friends', showInstanceSpecificPanel: false, - scopeOptionsEnabled: true, formattingOptionsEnabled: false, alwaysShowSubjectInput: true, hideMutedPosts: false, @@ -32,6 +31,7 @@ const defaultState = { vapidPublicKey: undefined, noAttachmentLinks: false, showFeaturesPanel: true, + minimalScopesMode: false, // Nasty stuff pleromaBackend: true, diff --git a/src/modules/statuses.js b/src/modules/statuses.js index 944b45c1..8e0203e3 100644 --- a/src/modules/statuses.js +++ b/src/modules/statuses.js @@ -123,7 +123,7 @@ const addNewStatuses = (state, { statuses, showImmediately = false, timeline, us 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) { @@ -363,6 +363,15 @@ export const mutations = { }, 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 }, setDeleted (state, { status }) { 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/static/config.json b/static/config.json index 533a5b08..04cbb97b 100644 --- a/static/config.json +++ b/static/config.json @@ -8,7 +8,6 @@ "redirectRootLogin": "/main/friends", "chatDisabled": false, "showInstanceSpecificPanel": false, - "scopeOptionsEnabled": false, "formattingOptionsEnabled": false, "collapseMessageWithSubject": false, "scopeCopy": true, @@ -21,5 +20,6 @@ "webPushNotifications": false, "noAttachmentLinks": false, "nsfwCensorImage": "", - "showFeaturesPanel": true + "showFeaturesPanel": true, + "minimalScopesMode": false }