aboutsummaryrefslogtreecommitdiff
path: root/src/components
diff options
context:
space:
mode:
Diffstat (limited to 'src/components')
-rw-r--r--src/components/emoji-input/emoji-input.js107
-rw-r--r--src/components/emoji-input/emoji-input.vue64
-rw-r--r--src/components/features_panel/features_panel.js2
-rw-r--r--src/components/features_panel/features_panel.vue2
-rw-r--r--src/components/notification/notification.js9
-rw-r--r--src/components/notification/notification.vue4
-rw-r--r--src/components/post_status_form/post_status_form.js29
-rw-r--r--src/components/post_status_form/post_status_form.vue82
-rw-r--r--src/components/scope_selector/scope_selector.js54
-rw-r--r--src/components/scope_selector/scope_selector.vue30
-rw-r--r--src/components/settings/settings.js10
-rw-r--r--src/components/settings/settings.vue6
-rw-r--r--src/components/status/status.js6
-rw-r--r--src/components/status/status.vue14
-rw-r--r--src/components/user_profile/user_profile.js3
-rw-r--r--src/components/user_settings/user_settings.js10
-rw-r--r--src/components/user_settings/user_settings.vue39
17 files changed, 364 insertions, 107 deletions
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>
generated by cgit v1.2.3-70-g09d2 (git 2.49.0) at 2025-11-11 15:56:48 +0000