Merge remote-tracking branch 'upstream/develop' into notifications
* upstream/develop: (23 commits) Rename expandCW to collapseMessageWithSubject. fix indent Add support for configurable CW clickthrough. Merge upstream fix lint issues allow default visibility scope to be configured Revert "storing entire config instead of each separate thing of it, so that future" fixes hella ton of annoyances with file upload display using custom ascend value as suggested here: https://github.com/fontello/fontello/issues/513#issuecomment-237551101 helped. disable hinting because it breaks alignment on some icons (namely - locks) fix for timeago being ass when post has replies. added hover colors for clickable icons on the right side. Reverted line-height to its original value Configurable video looping, option to not to loop silent videos. Updated localization strings. added pointer cursor for nsfw placeholder. fixed nsfw videos requiring double-click Made pausing TL updating configurable. Added styles for disabled checkboxes. Shuffled settings a bit b/c all the settings are in "Attachments" section depsite the fact not all of them are attachments-related. storing entire config instead of each separate thing of it, so that future options won't be lost during reloads because developer forgot to update that list of settings to be persisted fix potential stretched spurdo fixed custom emoji in nickname. changed icons on right side to be more streamlined. adjusted CSS so that all text in header of post is on same baseline and all icons/images are middle-aligned. Add validation of the imported theme and the corresponding warning message Unify button styles and use min-width Add German localization for theme import/export ...
This commit is contained in:
commit
35b912bce4
31 changed files with 555 additions and 208 deletions
|
@ -13,9 +13,10 @@ const Attachment = {
|
|||
return {
|
||||
nsfwImage,
|
||||
hideNsfwLocal: this.$store.state.config.hideNsfw,
|
||||
loopVideo: this.$store.state.config.loopVideo,
|
||||
showHidden: false,
|
||||
loading: false,
|
||||
img: document.createElement('img')
|
||||
img: this.type === 'image' && document.createElement('img')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -45,14 +46,35 @@ const Attachment = {
|
|||
}
|
||||
},
|
||||
toggleHidden () {
|
||||
if (this.img.onload) {
|
||||
this.img.onload()
|
||||
if (this.img) {
|
||||
if (this.img.onload) {
|
||||
this.img.onload()
|
||||
} else {
|
||||
this.loading = true
|
||||
this.img.src = this.attachment.url
|
||||
this.img.onload = () => {
|
||||
this.loading = false
|
||||
this.showHidden = !this.showHidden
|
||||
}
|
||||
}
|
||||
} else {
|
||||
this.loading = true
|
||||
this.img.src = this.attachment.url
|
||||
this.img.onload = () => {
|
||||
this.loading = false
|
||||
this.showHidden = !this.showHidden
|
||||
this.showHidden = !this.showHidden
|
||||
}
|
||||
},
|
||||
onVideoDataLoad (e) {
|
||||
if (typeof e.srcElement.webkitAudioDecodedByteCount !== 'undefined') {
|
||||
// non-zero if video has audio track
|
||||
if (e.srcElement.webkitAudioDecodedByteCount > 0) {
|
||||
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
|
||||
}
|
||||
} else if (typeof e.srcElement.mozHasAudio !== 'undefined') {
|
||||
// true if video has audio track
|
||||
if (e.srcElement.mozHasAudio) {
|
||||
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
|
||||
}
|
||||
} else if (typeof e.srcElement.audioTracks !== 'undefined') {
|
||||
if (e.srcElement.audioTracks.length > 0) {
|
||||
this.loopVideo = this.loopVideo && !this.$store.state.config.loopVideoSilentOnly
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
<div v-if="size==='hide'">
|
||||
<a class="placeholder" v-if="type !== 'html'" target="_blank" :href="attachment.url">[{{nsfw ? "NSFW/" : ""}}{{type.toUpperCase()}}]</a>
|
||||
</div>
|
||||
<div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth}" v-show="!isEmpty">
|
||||
<div v-else class="attachment" :class="{[type]: true, loading, 'small-attachment': isSmall, 'fullwidth': fullwidth, 'nsfw-placeholder': hidden}" v-show="!isEmpty">
|
||||
<a class="image-attachment" v-if="hidden" @click.prevent="toggleHidden()">
|
||||
<img :key="nsfwImage" :src="nsfwImage"/>
|
||||
</a>
|
||||
|
@ -14,7 +14,7 @@
|
|||
<StillImage :class="{'small': isSmall}" referrerpolicy="no-referrer" :mimetype="attachment.mimetype" :src="attachment.large_thumb_url || attachment.url"/>
|
||||
</a>
|
||||
|
||||
<video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" :src="attachment.url" controls loop></video>
|
||||
<video :class="{'small': isSmall}" v-if="type === 'video' && !hidden" @loadeddata="onVideoDataLoad" :src="attachment.url" controls :loop="loopVideo"></video>
|
||||
|
||||
<audio v-if="type === 'audio'" :src="attachment.url" controls></audio>
|
||||
|
||||
|
@ -38,7 +38,6 @@
|
|||
.attachments {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin-right: -0.7em;
|
||||
|
||||
.attachment.media-upload-container {
|
||||
flex: 0 0 auto;
|
||||
|
@ -50,6 +49,10 @@
|
|||
margin-right: 0.5em;
|
||||
}
|
||||
|
||||
.nsfw-placeholder {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.small-attachment {
|
||||
&.image, &.video {
|
||||
max-width: 35%;
|
||||
|
|
|
@ -34,11 +34,6 @@
|
|||
@import '../../_variables.scss';
|
||||
|
||||
.login-form {
|
||||
.btn {
|
||||
min-height: 28px;
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
.error {
|
||||
text-align: center;
|
||||
}
|
||||
|
|
|
@ -54,7 +54,7 @@ const PostStatusForm = {
|
|||
newStatus: {
|
||||
status: statusText,
|
||||
files: [],
|
||||
visibility: this.messageScope || 'public'
|
||||
visibility: this.messageScope || this.$store.state.users.currentUser.default_scope
|
||||
},
|
||||
caret: 0
|
||||
}
|
||||
|
|
|
@ -65,12 +65,14 @@
|
|||
<i class="icon-cancel" @click="clearError"></i>
|
||||
</div>
|
||||
<div class="attachments">
|
||||
<div class="media-upload-container attachment" v-for="file in newStatus.files">
|
||||
<div class="media-upload-wrapper" v-for="file in newStatus.files">
|
||||
<i class="fa icon-cancel" @click="removeMediaFile(file)"></i>
|
||||
<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>
|
||||
<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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
@ -99,35 +101,12 @@
|
|||
}
|
||||
}
|
||||
|
||||
.post-status-form .visibility-tray {
|
||||
font-size: 1.2em;
|
||||
padding: 3px;
|
||||
cursor: pointer;
|
||||
|
||||
.selected {
|
||||
color: $fallback--lightFg;
|
||||
color: var(--lightFg, $fallback--lightFg);
|
||||
}
|
||||
}
|
||||
|
||||
.visibility-notice {
|
||||
padding: .5em;
|
||||
border: 1px solid $fallback--faint;
|
||||
border: 1px solid var(--faint, $fallback--faint);
|
||||
border-radius: $fallback--inputRadius;
|
||||
border-radius: var(--inputRadius, $fallback--inputRadius);
|
||||
}
|
||||
|
||||
.post-status-form, .login {
|
||||
.form-bottom {
|
||||
display: flex;
|
||||
padding: 0.5em;
|
||||
height: 32px;
|
||||
|
||||
button {
|
||||
width: 10em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0.35em;
|
||||
padding: 0.35em;
|
||||
|
@ -139,14 +118,49 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
.media-upload-wrapper {
|
||||
flex: 0 0 auto;
|
||||
max-width: 100%;
|
||||
min-width: 50px;
|
||||
margin-right: .2em;
|
||||
margin-bottom: .5em;
|
||||
|
||||
.icon-cancel {
|
||||
display: inline-block;
|
||||
position: static;
|
||||
margin: 0;
|
||||
padding-bottom: 0;
|
||||
margin-left: $fallback--attachmentRadius;
|
||||
margin-left: var(--attachmentRadius, $fallback--attachmentRadius);
|
||||
background-color: $fallback--btn;
|
||||
background-color: var(--btn, $fallback--btn);
|
||||
border-bottom-left-radius: 0;
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.attachments {
|
||||
padding: 0 0.5em;
|
||||
|
||||
.attachment {
|
||||
margin: 0;
|
||||
position: relative;
|
||||
flex: 0 0 auto;
|
||||
border: 1px solid $fallback--border;
|
||||
border: 1px solid var(--border, $fallback--border);
|
||||
margin: 0.5em 0.8em 0.2em 0;
|
||||
text-align: center;
|
||||
|
||||
audio {
|
||||
min-width: 300px;
|
||||
flex: 1 0 auto;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-align: left;
|
||||
line-height: 1.2;
|
||||
padding: .5em;
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
|
|
|
@ -1,3 +1,4 @@
|
|||
/* eslint-env browser */
|
||||
import StyleSwitcher from '../style_switcher/style_switcher.vue'
|
||||
import { filter, trim } from 'lodash'
|
||||
|
||||
|
@ -7,11 +8,22 @@ const settings = {
|
|||
hideAttachmentsLocal: this.$store.state.config.hideAttachments,
|
||||
hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv,
|
||||
hideNsfwLocal: this.$store.state.config.hideNsfw,
|
||||
loopVideoLocal: this.$store.state.config.loopVideo,
|
||||
loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly,
|
||||
muteWordsString: this.$store.state.config.muteWords.join('\n'),
|
||||
autoLoadLocal: this.$store.state.config.autoLoad,
|
||||
streamingLocal: this.$store.state.config.streaming,
|
||||
pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused,
|
||||
hoverPreviewLocal: this.$store.state.config.hoverPreview,
|
||||
stopGifs: this.$store.state.config.stopGifs
|
||||
collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject,
|
||||
stopGifs: this.$store.state.config.stopGifs,
|
||||
loopSilentAvailable:
|
||||
// Firefox
|
||||
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||
|
||||
// Chrome-likes
|
||||
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'webkitAudioDecodedByteCount') ||
|
||||
// Future spec, still not supported in Nightly 63 as of 08/2018
|
||||
Object.getOwnPropertyDescriptor(HTMLMediaElement.prototype, 'audioTracks')
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -32,12 +44,21 @@ const settings = {
|
|||
hideNsfwLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'hideNsfw', value })
|
||||
},
|
||||
loopVideoLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'loopVideo', value })
|
||||
},
|
||||
loopVideoSilentOnlyLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'loopVideoSilentOnly', value })
|
||||
},
|
||||
autoLoadLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'autoLoad', value })
|
||||
},
|
||||
streamingLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'streaming', value })
|
||||
},
|
||||
pauseOnUnfocusedLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'pauseOnUnfocused', value })
|
||||
},
|
||||
hoverPreviewLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'hoverPreview', value })
|
||||
},
|
||||
|
@ -45,6 +66,9 @@ const settings = {
|
|||
value = filter(value.split('\n'), (word) => trim(word).length > 0)
|
||||
this.$store.dispatch('setOption', { name: 'muteWords', value })
|
||||
},
|
||||
collapseMessageWithSubjectLocal (value) {
|
||||
this.$store.dispatch('setOption', { name: 'collapseMessageWithSubject', value })
|
||||
},
|
||||
stopGifs (value) {
|
||||
this.$store.dispatch('setOption', { name: 'stopGifs', value })
|
||||
}
|
||||
|
|
|
@ -1,53 +1,81 @@
|
|||
<template>
|
||||
<div class="settings panel panel-default">
|
||||
<div class="panel-heading">
|
||||
{{$t('settings.settings')}}
|
||||
<div class="settings panel panel-default">
|
||||
<div class="panel-heading">
|
||||
{{$t('settings.settings')}}
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.theme')}}</h2>
|
||||
<style-switcher></style-switcher>
|
||||
</div>
|
||||
<div class="panel-body">
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.theme')}}</h2>
|
||||
<style-switcher></style-switcher>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.filtering')}}</h2>
|
||||
<p>{{$t('settings.filtering_explanation')}}</p>
|
||||
<textarea id="muteWords" v-model="muteWordsString"></textarea>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.attachments')}}</h2>
|
||||
<ul class="setting-list">
|
||||
<div class="setting-item">
|
||||
<h2>{{$t('settings.filtering')}}</h2>
|
||||
<p>{{$t('settings.filtering_explanation')}}</p>
|
||||
<textarea id="muteWords" v-model="muteWordsString"></textarea>
|
||||
</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')}}</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}]">
|
||||
<li>
|
||||
<input type="checkbox" id="hideAttachments" v-model="hideAttachmentsLocal">
|
||||
<label for="hideAttachments">{{$t('settings.hide_attachments_in_tl')}}</label>
|
||||
<input :disabled="!streamingLocal" type="checkbox" id="pauseOnUnfocused" v-model="pauseOnUnfocusedLocal">
|
||||
<label for="pauseOnUnfocused">{{$t('settings.pause_on_unfocused')}}</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.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>
|
||||
<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
|
||||
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
|
||||
</li>
|
||||
<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}]">
|
||||
<li>
|
||||
<input type="checkbox" id="hideAttachmentsInConv" v-model="hideAttachmentsInConvLocal">
|
||||
<label for="hideAttachmentsInConv">{{$t('settings.hide_attachments_in_convo')}}</label>
|
||||
<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>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hideNsfw" v-model="hideNsfwLocal">
|
||||
<label for="hideNsfw">{{$t('settings.nsfw_clickthrough')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="autoload" v-model="autoLoadLocal">
|
||||
<label for="autoload">{{$t('settings.autoload')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="streaming" v-model="streamingLocal">
|
||||
<label for="streaming">{{$t('settings.streaming')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="hoverPreview" v-model="hoverPreviewLocal">
|
||||
<label for="hoverPreview">{{$t('settings.reply_link_preview')}}</label>
|
||||
</li>
|
||||
<li>
|
||||
<input type="checkbox" id="stopGifs" v-model="stopGifs">
|
||||
<label for="stopGifs">{{$t('settings.stop_gifs')}}</label>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</ul>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script src="./settings.js">
|
||||
|
@ -67,6 +95,12 @@
|
|||
height: 100px;
|
||||
}
|
||||
|
||||
.unavailable,
|
||||
.unavailable i {
|
||||
color: var(--cRed, $fallback--cRed);
|
||||
color: $fallback--cRed;
|
||||
}
|
||||
|
||||
.old-avatar {
|
||||
width: 128px;
|
||||
border-radius: $fallback--avatarRadius;
|
||||
|
@ -83,14 +117,16 @@
|
|||
|
||||
.btn {
|
||||
margin-top: 1em;
|
||||
min-height: 28px;
|
||||
width: 10em;
|
||||
}
|
||||
}
|
||||
.setting-list {
|
||||
list-style-type: none;
|
||||
padding-left: 2em;
|
||||
li {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
.suboptions {
|
||||
margin-top: 0.3em
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -22,15 +22,18 @@ const Status = {
|
|||
'noHeading',
|
||||
'inlineExpanded'
|
||||
],
|
||||
data: () => ({
|
||||
replying: false,
|
||||
expanded: false,
|
||||
unmuted: false,
|
||||
userExpanded: false,
|
||||
preview: null,
|
||||
showPreview: false,
|
||||
showingTall: false
|
||||
}),
|
||||
data () {
|
||||
return {
|
||||
replying: false,
|
||||
expanded: false,
|
||||
unmuted: false,
|
||||
userExpanded: false,
|
||||
preview: null,
|
||||
showPreview: false,
|
||||
showingTall: false,
|
||||
expandingSubject: !this.$store.state.config.collapseMessageWithSubject
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
muteWords () {
|
||||
return this.$store.state.config.muteWords
|
||||
|
@ -98,12 +101,27 @@ const Status = {
|
|||
//
|
||||
// Using max-height + overflow: auto for status components resulted in false positives
|
||||
// very often with japanese characters, and it was very annoying.
|
||||
tallStatus () {
|
||||
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
|
||||
return lengthScore > 20
|
||||
},
|
||||
hideSubjectStatus () {
|
||||
if (this.tallStatus && !this.$store.state.config.collapseMessageWithSubject) {
|
||||
return false
|
||||
}
|
||||
return !this.expandingSubject && this.status.summary
|
||||
},
|
||||
hideTallStatus () {
|
||||
if (this.status.summary && this.$store.state.config.collapseMessageWithSubject) {
|
||||
return false
|
||||
}
|
||||
if (this.showingTall) {
|
||||
return false
|
||||
}
|
||||
const lengthScore = this.status.statusnet_html.split(/<p|<br/).length + this.status.text.length / 80
|
||||
return lengthScore > 20
|
||||
return this.tallStatus
|
||||
},
|
||||
showingMore () {
|
||||
return this.showingTall || (this.status.summary && this.expandingSubject)
|
||||
},
|
||||
attachmentSize () {
|
||||
if ((this.$store.state.config.hideAttachments && !this.inConversation) ||
|
||||
|
@ -163,8 +181,16 @@ const Status = {
|
|||
toggleUserExpanded () {
|
||||
this.userExpanded = !this.userExpanded
|
||||
},
|
||||
toggleShowTall () {
|
||||
this.showingTall = !this.showingTall
|
||||
toggleShowMore () {
|
||||
if (this.showingTall) {
|
||||
this.showingTall = false
|
||||
} else if (this.expandingSubject) {
|
||||
this.expandingSubject = false
|
||||
} else if (this.hideTallStatus) {
|
||||
this.showingTall = true
|
||||
} else if (this.hideSubjectStatus) {
|
||||
this.expandingSubject = true
|
||||
}
|
||||
},
|
||||
replyEnter (id, event) {
|
||||
this.showPreview = true
|
||||
|
|
|
@ -11,8 +11,8 @@
|
|||
<div v-if="retweet && !noHeading" :class="[repeaterClass, { highlighted: repeaterStyle }]" :style="[repeaterStyle]" class="media container retweet-info">
|
||||
<StillImage v-if="retweet" class='avatar' :src="statusoid.user.profile_image_url_original"/>
|
||||
<div class="media-body faint">
|
||||
<a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
|
||||
<a v-else :href="statusoid.user.statusnet_profile_url" style="font-weight: bold;" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
|
||||
<a v-if="retweeterHtml" :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name" v-html="retweeterHtml"></a>
|
||||
<a v-else :href="statusoid.user.statusnet_profile_url" class="user-name" :title="'@'+statusoid.user.screen_name">{{retweeter}}</a>
|
||||
<i class='fa icon-retweet retweeted'></i>
|
||||
{{$t('timeline.repeated')}}
|
||||
</div>
|
||||
|
@ -57,8 +57,10 @@
|
|||
<router-link class="timeago" :to="{ name: 'conversation', params: { id: status.id } }">
|
||||
<timeago :since="status.created_at" :auto-update="60"></timeago>
|
||||
</router-link>
|
||||
<span v-if="status.visibility"><i :class="visibilityIcon(status.visibility)"></i> </span>
|
||||
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext"></i></a>
|
||||
<div class="visibility-icon" v-if="status.visibility">
|
||||
<i :class="visibilityIcon(status.visibility)"></i>
|
||||
</div>
|
||||
<a :href="status.external_url" target="_blank" v-if="!status.is_local" class="source_url"><i class="icon-link-ext-alt"></i></a>
|
||||
<template v-if="expandable">
|
||||
<a href="#" @click.prevent="toggleExpanded"><i class="icon-plus-squared"></i></a>
|
||||
</template>
|
||||
|
@ -74,9 +76,11 @@
|
|||
</div>
|
||||
|
||||
<div :class="{'tall-status': hideTallStatus}" class="status-content-wrapper">
|
||||
<a class="tall-status-hider" :class="{ 'tall-status-hider_focused': isFocused }" v-if="hideTallStatus" href="#" @click.prevent="toggleShowTall">Show more</a>
|
||||
<div @click.prevent="linkClicked" class="status-content media-body" v-html="status.statusnet_html"></div>
|
||||
<a v-if="showingTall" href="#" class="tall-status-unhider" @click.prevent="toggleShowTall">Show less</a>
|
||||
<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" 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>
|
||||
|
||||
<div v-if='status.attachments' class='attachments media-body'>
|
||||
|
@ -141,6 +145,7 @@
|
|||
margin-top: 0.25em;
|
||||
margin-left: 0.5em;
|
||||
z-index: 50;
|
||||
|
||||
.status {
|
||||
flex: 1;
|
||||
border: 0;
|
||||
|
@ -155,6 +160,7 @@
|
|||
text-align: center;
|
||||
border-width: 1px;
|
||||
border-style: solid;
|
||||
|
||||
i {
|
||||
font-size: 2em;
|
||||
}
|
||||
|
@ -196,6 +202,7 @@
|
|||
|
||||
.media-heading {
|
||||
flex-wrap: nowrap;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
.media-heading-left {
|
||||
|
@ -218,12 +225,22 @@
|
|||
flex: 1 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-content: center;
|
||||
align-items: baseline;
|
||||
|
||||
.user-name {
|
||||
margin-right: .45em;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.links {
|
||||
display: flex;
|
||||
padding-top: 1px;
|
||||
margin-left: 0.2em;
|
||||
font-size: 12px;
|
||||
color: $fallback--link;
|
||||
color: var(--link, $fallback--link);
|
||||
|
@ -247,19 +264,25 @@
|
|||
}
|
||||
|
||||
.media-heading-right {
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
max-height: 1.5em;
|
||||
margin-left: 0.25em;
|
||||
margin-left: .25em;
|
||||
align-self: baseline;
|
||||
|
||||
.timeago {
|
||||
margin-right: 0.2em;
|
||||
font-size: 12px;
|
||||
padding-top: 1px;
|
||||
align-self: last baseline;
|
||||
}
|
||||
i {
|
||||
|
||||
> * {
|
||||
margin-left: 0.2em;
|
||||
}
|
||||
a:hover i {
|
||||
color: $fallback--fg;
|
||||
color: var(--fg, $fallback--fg);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
|
@ -289,7 +312,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
.tall-status-unhider {
|
||||
.status-unhider, .cw-status-hider {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
@ -318,6 +341,7 @@
|
|||
.retweet-info {
|
||||
padding: 0.4em 0.6em 0 0.6em;
|
||||
margin: 0;
|
||||
|
||||
.avatar {
|
||||
border-radius: $fallback--avatarAltRadius;
|
||||
border-radius: var(--avatarAltRadius, $fallback--avatarAltRadius);
|
||||
|
@ -333,9 +357,22 @@
|
|||
display: flex;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
|
||||
.user-name {
|
||||
font-weight: bold;
|
||||
|
||||
img {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
vertical-align: middle;
|
||||
object-fit: contain
|
||||
}
|
||||
}
|
||||
|
||||
i {
|
||||
padding: 0 0.2em;
|
||||
}
|
||||
|
||||
a {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
|
|
|
@ -5,6 +5,7 @@ export default {
|
|||
return {
|
||||
availableStyles: [],
|
||||
selected: this.$store.state.config.theme,
|
||||
invalidThemeImported: false,
|
||||
bgColorLocal: '',
|
||||
btnColorLocal: '',
|
||||
textColorLocal: '',
|
||||
|
@ -32,25 +33,61 @@ export default {
|
|||
})
|
||||
},
|
||||
mounted () {
|
||||
this.bgColorLocal = rgbstr2hex(this.$store.state.config.colors.bg)
|
||||
this.btnColorLocal = rgbstr2hex(this.$store.state.config.colors.btn)
|
||||
this.textColorLocal = rgbstr2hex(this.$store.state.config.colors.fg)
|
||||
this.linkColorLocal = rgbstr2hex(this.$store.state.config.colors.link)
|
||||
|
||||
this.redColorLocal = rgbstr2hex(this.$store.state.config.colors.cRed)
|
||||
this.blueColorLocal = rgbstr2hex(this.$store.state.config.colors.cBlue)
|
||||
this.greenColorLocal = rgbstr2hex(this.$store.state.config.colors.cGreen)
|
||||
this.orangeColorLocal = rgbstr2hex(this.$store.state.config.colors.cOrange)
|
||||
|
||||
this.btnRadiusLocal = this.$store.state.config.radii.btnRadius || 4
|
||||
this.inputRadiusLocal = this.$store.state.config.radii.inputRadius || 4
|
||||
this.panelRadiusLocal = this.$store.state.config.radii.panelRadius || 10
|
||||
this.avatarRadiusLocal = this.$store.state.config.radii.avatarRadius || 5
|
||||
this.avatarAltRadiusLocal = this.$store.state.config.radii.avatarAltRadius || 50
|
||||
this.tooltipRadiusLocal = this.$store.state.config.radii.tooltipRadius || 2
|
||||
this.attachmentRadiusLocal = this.$store.state.config.radii.attachmentRadius || 5
|
||||
this.normalizeLocalState(this.$store.state.config.colors, this.$store.state.config.radii)
|
||||
},
|
||||
methods: {
|
||||
exportCurrentTheme () {
|
||||
const stringified = JSON.stringify({
|
||||
// To separate from other random JSON files and possible future theme formats
|
||||
_pleroma_theme_version: 1,
|
||||
colors: this.$store.state.config.colors,
|
||||
radii: this.$store.state.config.radii
|
||||
}, null, 2) // Pretty-print and indent with 2 spaces
|
||||
|
||||
// Create an invisible link with a data url and simulate a click
|
||||
const e = document.createElement('a')
|
||||
e.setAttribute('download', 'pleroma_theme.json')
|
||||
e.setAttribute('href', 'data:application/json;base64,' + window.btoa(stringified))
|
||||
e.style.display = 'none'
|
||||
|
||||
document.body.appendChild(e)
|
||||
e.click()
|
||||
document.body.removeChild(e)
|
||||
},
|
||||
|
||||
importTheme () {
|
||||
this.invalidThemeImported = false
|
||||
const filePicker = document.createElement('input')
|
||||
filePicker.setAttribute('type', 'file')
|
||||
filePicker.setAttribute('accept', '.json')
|
||||
|
||||
filePicker.addEventListener('change', event => {
|
||||
if (event.target.files[0]) {
|
||||
// eslint-disable-next-line no-undef
|
||||
const reader = new FileReader()
|
||||
reader.onload = ({target}) => {
|
||||
try {
|
||||
const parsed = JSON.parse(target.result)
|
||||
if (parsed._pleroma_theme_version === 1) {
|
||||
this.normalizeLocalState(parsed.colors, parsed.radii)
|
||||
} else {
|
||||
// A theme from the future, spooky
|
||||
this.invalidThemeImported = true
|
||||
}
|
||||
} catch (e) {
|
||||
// This will happen both if there is a JSON syntax error or the theme is missing components
|
||||
this.invalidThemeImported = true
|
||||
}
|
||||
}
|
||||
reader.readAsText(event.target.files[0])
|
||||
}
|
||||
})
|
||||
|
||||
document.body.appendChild(filePicker)
|
||||
filePicker.click()
|
||||
document.body.removeChild(filePicker)
|
||||
},
|
||||
|
||||
setCustomTheme () {
|
||||
if (!this.bgColorLocal && !this.btnColorLocal && !this.linkColorLocal) {
|
||||
// reset to picked themes
|
||||
|
@ -95,6 +132,26 @@ export default {
|
|||
attachmentRadius: this.attachmentRadiusLocal
|
||||
}})
|
||||
}
|
||||
},
|
||||
|
||||
normalizeLocalState (colors, radii) {
|
||||
this.bgColorLocal = rgbstr2hex(colors.bg)
|
||||
this.btnColorLocal = rgbstr2hex(colors.btn)
|
||||
this.textColorLocal = rgbstr2hex(colors.fg)
|
||||
this.linkColorLocal = rgbstr2hex(colors.link)
|
||||
|
||||
this.redColorLocal = rgbstr2hex(colors.cRed)
|
||||
this.blueColorLocal = rgbstr2hex(colors.cBlue)
|
||||
this.greenColorLocal = rgbstr2hex(colors.cGreen)
|
||||
this.orangeColorLocal = rgbstr2hex(colors.cOrange)
|
||||
|
||||
this.btnRadiusLocal = radii.btnRadius || 4
|
||||
this.inputRadiusLocal = radii.inputRadius || 4
|
||||
this.panelRadiusLocal = radii.panelRadius || 10
|
||||
this.avatarRadiusLocal = radii.avatarRadius || 5
|
||||
this.avatarAltRadiusLocal = radii.avatarAltRadius || 50
|
||||
this.tooltipRadiusLocal = radii.tooltipRadius || 2
|
||||
this.attachmentRadiusLocal = radii.attachmentRadius || 5
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
|
|
|
@ -11,6 +11,11 @@
|
|||
<i class="icon-down-open"/>
|
||||
</label>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn" @click="exportCurrentTheme">{{ $t('settings.export_theme') }}</button>
|
||||
<button class="btn" @click="importTheme">{{ $t('settings.import_theme') }}</button>
|
||||
<p v-if="invalidThemeImported" class="import-warning">{{ $t('settings.invalid_theme_imported') }}</p>
|
||||
</div>
|
||||
<div class="color-container">
|
||||
<p>{{$t('settings.theme_help')}}</p>
|
||||
<div class="color-item">
|
||||
|
@ -134,6 +139,11 @@
|
|||
margin-right: 1em;
|
||||
}
|
||||
|
||||
.import-warning {
|
||||
color: $fallback--cRed;
|
||||
color: var(--cRed, $fallback--cRed);
|
||||
}
|
||||
|
||||
.radius-container,
|
||||
.color-container {
|
||||
display: flex;
|
||||
|
|
|
@ -133,7 +133,10 @@ const Timeline = {
|
|||
}
|
||||
if (count > 0) {
|
||||
// only 'stream' them when you're scrolled to the top
|
||||
if (window.pageYOffset < 15 && !this.paused && !this.unfocused) {
|
||||
if (window.pageYOffset < 15 &&
|
||||
!this.paused &&
|
||||
!(this.unfocused && this.$store.state.config.pauseOnUnfocused)
|
||||
) {
|
||||
this.showNewStatuses()
|
||||
} else {
|
||||
this.paused = true
|
||||
|
|
|
@ -6,6 +6,7 @@ const UserSettings = {
|
|||
newname: this.$store.state.users.currentUser.name,
|
||||
newbio: this.$store.state.users.currentUser.description,
|
||||
newlocked: this.$store.state.users.currentUser.locked,
|
||||
newdefaultScope: this.$store.state.users.currentUser.default_scope,
|
||||
followList: null,
|
||||
followImportError: false,
|
||||
followsImported: false,
|
||||
|
@ -17,7 +18,8 @@ const UserSettings = {
|
|||
deleteAccountError: false,
|
||||
changePasswordInputs: [ '', '', '' ],
|
||||
changedPassword: false,
|
||||
changePasswordError: false
|
||||
changePasswordError: false,
|
||||
activeTab: 'profile'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
@ -29,6 +31,17 @@ const UserSettings = {
|
|||
},
|
||||
pleromaBackend () {
|
||||
return this.$store.state.config.pleromaBackend
|
||||
},
|
||||
scopeOptionsEnabled () {
|
||||
return this.$store.state.config.scopeOptionsEnabled
|
||||
},
|
||||
vis () {
|
||||
return {
|
||||
public: { selected: this.newdefaultScope === 'public' },
|
||||
unlisted: { selected: this.newdefaultScope === 'unlisted' },
|
||||
private: { selected: this.newdefaultScope === 'private' },
|
||||
direct: { selected: this.newdefaultScope === 'direct' }
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
@ -36,12 +49,18 @@ const UserSettings = {
|
|||
const name = this.newname
|
||||
const description = this.newbio
|
||||
const locked = this.newlocked
|
||||
this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked}}).then((user) => {
|
||||
/* eslint-disable camelcase */
|
||||
const default_scope = this.newdefaultScope
|
||||
this.$store.state.api.backendInteractor.updateProfile({params: {name, description, locked, default_scope}}).then((user) => {
|
||||
if (!user.error) {
|
||||
this.$store.commit('addNewUsers', [user])
|
||||
this.$store.commit('setCurrentUser', user)
|
||||
}
|
||||
})
|
||||
/* eslint-enable camelcase */
|
||||
},
|
||||
changeVis (visibility) {
|
||||
this.newdefaultScope = visibility
|
||||
},
|
||||
uploadFile (slot, e) {
|
||||
const file = e.target.files[0]
|
||||
|
@ -217,6 +236,9 @@ const UserSettings = {
|
|||
this.changePasswordError = res.error
|
||||
}
|
||||
})
|
||||
},
|
||||
activateTab (tabName) {
|
||||
this.activeTab = tabName
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -4,19 +4,33 @@
|
|||
{{$t('settings.user_settings')}}
|
||||
</div>
|
||||
<div class="panel-body profile-edit">
|
||||
<div class="setting-item">
|
||||
<div class="tab-switcher">
|
||||
<button class="btn btn-default" @click="activateTab('profile')">{{$t('settings.profile_tab')}}</button>
|
||||
<button class="btn btn-default" @click="activateTab('security')">{{$t('settings.security_tab')}}</button>
|
||||
<button class="btn btn-default" @click="activateTab('data_import_export')" v-if="pleromaBackend">{{$t('settings.data_import_export_tab')}}</button>
|
||||
</div>
|
||||
<div class="setting-item" v-if="activeTab == 'profile'">
|
||||
<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">
|
||||
<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">
|
||||
<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"></i>
|
||||
<i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private"></i>
|
||||
<i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted"></i>
|
||||
<i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public"></i>
|
||||
</div>
|
||||
</div>
|
||||
<button :disabled='newname.length <= 0' class="btn btn-default" @click="updateProfile">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item" v-if="activeTab == 'profile'">
|
||||
<h2>{{$t('settings.avatar')}}</h2>
|
||||
<p>{{$t('settings.current_avatar')}}</p>
|
||||
<img :src="user.profile_image_url_original" class="old-avatar"></img>
|
||||
|
@ -29,7 +43,7 @@
|
|||
<i class="icon-spin4 animate-spin" v-if="uploading[0]"></i>
|
||||
<button class="btn btn-default" v-else-if="previews[0]" @click="submitAvatar">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item" v-if="activeTab == 'profile'">
|
||||
<h2>{{$t('settings.profile_banner')}}</h2>
|
||||
<p>{{$t('settings.current_profile_banner')}}</p>
|
||||
<img :src="user.cover_photo" class="banner"></img>
|
||||
|
@ -42,7 +56,7 @@
|
|||
<i class=" icon-spin4 animate-spin uploading" v-if="uploading[1]"></i>
|
||||
<button class="btn btn-default" v-else-if="previews[1]" @click="submitBanner">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item" v-if="activeTab == 'profile'">
|
||||
<h2>{{$t('settings.profile_background')}}</h2>
|
||||
<p>{{$t('settings.set_new_profile_background')}}</p>
|
||||
<img class="bg" v-bind:src="previews[2]" v-if="previews[2]">
|
||||
|
@ -53,7 +67,7 @@
|
|||
<i class=" icon-spin4 animate-spin uploading" v-if="uploading[2]"></i>
|
||||
<button class="btn btn-default" v-else-if="previews[2]" @click="submitBg">{{$t('general.submit')}}</button>
|
||||
</div>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item" v-if="activeTab == 'security'">
|
||||
<h2>{{$t('settings.change_password')}}</h2>
|
||||
<div>
|
||||
<p>{{$t('settings.current_password')}}</p>
|
||||
|
@ -72,7 +86,7 @@
|
|||
<p v-else-if="changePasswordError !== false">{{$t('settings.change_password_error')}}</p>
|
||||
<p v-if="changePasswordError">{{changePasswordError}}</p>
|
||||
</div>
|
||||
<div class="setting-item" v-if="pleromaBackend">
|
||||
<div class="setting-item" v-if="pleromaBackend && activeTab == 'data_import_export'">
|
||||
<h2>{{$t('settings.follow_import')}}</h2>
|
||||
<p>{{$t('settings.import_followers_from_a_csv_file')}}</p>
|
||||
<form v-model="followImportForm">
|
||||
|
@ -89,15 +103,15 @@
|
|||
<p>{{$t('settings.follow_import_error')}}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="setting-item" v-if="enableFollowsExport">
|
||||
<div class="setting-item" v-if="enableFollowsExport && activeTab == 'data_import_export'">
|
||||
<h2>{{$t('settings.follow_export')}}</h2>
|
||||
<button class="btn btn-default" @click="exportFollows">{{$t('settings.follow_export_button')}}</button>
|
||||
</div>
|
||||
<div class="setting-item" v-else>
|
||||
<div class="setting-item" v-else-if="activeTab == 'data_import_export'">
|
||||
<h2>{{$t('settings.follow_export_processing')}}</h2>
|
||||
</div>
|
||||
<hr>
|
||||
<div class="setting-item">
|
||||
<div class="setting-item" v-if="activeTab == 'security'">
|
||||
<h2>{{$t('settings.delete_account')}}</h2>
|
||||
<p v-if="!deletingAccount">{{$t('settings.delete_account_description')}}</p>
|
||||
<div v-if="deletingAccount">
|
||||
|
@ -137,4 +151,13 @@
|
|||
margin: 0.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.tab-switcher {
|
||||
margin: 7px 7px;
|
||||
display: inline-block;
|
||||
|
||||
button {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue