Merge remote-tracking branch 'upstream/develop' into translations-separation

* upstream/develop: (21 commits)
  use prime number step for Who to follow panel
  fix
  Revert "Update messages.js"
  Update messages.js Update the Occitan language - Fixed Linting
  remove formatting options
  Remove outdated settings
  features panel i18n
  features panes supports chat & gopher
  fix collapse link being too small
  small fix for non-square gif avatars
  Fixed collapseMessageWithSubjectLocal always using instance-provided config.
  Fix last place with usercard having wrong width
  Fixed non-masked image looking weird in chrome.
  Kinda went back to using align-items: stretch. Fixed error message floating.
  Simplified image sensitivity label
  show features panel only if not login
  update
  debug
  update
  debug
  ...
This commit is contained in:
Henry Jameson 2018-09-09 15:55:43 +03:00
commit 0656e0ef32
16 changed files with 133 additions and 56 deletions

View file

@ -2,8 +2,9 @@ import UserPanel from './components/user_panel/user_panel.vue'
import NavPanel from './components/nav_panel/nav_panel.vue' import NavPanel from './components/nav_panel/nav_panel.vue'
import Notifications from './components/notifications/notifications.vue' import Notifications from './components/notifications/notifications.vue'
import UserFinder from './components/user_finder/user_finder.vue' import UserFinder from './components/user_finder/user_finder.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue' import InstanceSpecificPanel from './components/instance_specific_panel/instance_specific_panel.vue'
import FeaturesPanel from './components/features_panel/features_panel.vue'
import WhoToFollowPanel from './components/who_to_follow_panel/who_to_follow_panel.vue'
import ChatPanel from './components/chat_panel/chat_panel.vue' import ChatPanel from './components/chat_panel/chat_panel.vue'
export default { export default {
@ -13,8 +14,9 @@ export default {
NavPanel, NavPanel,
Notifications, Notifications,
UserFinder, UserFinder,
WhoToFollowPanel,
InstanceSpecificPanel, InstanceSpecificPanel,
FeaturesPanel,
WhoToFollowPanel,
ChatPanel ChatPanel
}, },
data: () => ({ data: () => ({

View file

@ -248,6 +248,7 @@ nav {
justify-content: center; justify-content: center;
flex: 0 0 auto; flex: 0 0 auto;
z-index: -1; z-index: -1;
.mask { .mask {
mask-repeat: no-repeat; mask-repeat: no-repeat;
mask-position: center; mask-position: center;
@ -260,7 +261,10 @@ nav {
left: 0; left: 0;
right: 0; right: 0;
} }
img { img {
height: 100%;
object-fit: contain;
display: block; display: block;
flex: 0; flex: 0;
} }
@ -325,18 +329,35 @@ main-router {
background-size: cover; background-size: cover;
padding: .6em .6em; padding: .6em .6em;
text-align: left; text-align: left;
font-size: 1.3em; line-height: 28px;
line-height: 24px;
background-color: $fallback--btn; background-color: $fallback--btn;
background-color: var(--btn, $fallback--btn); background-color: var(--btn, $fallback--btn);
align-items: baseline; align-items: baseline;
.title { .title {
flex: 1 0 auto; flex: 1 0 auto;
font-size: 1.3em;
}
.alert {
white-space: nowrap;
text-overflow: ellipsis;
overflow-x: hidden;
} }
button { button {
height: 100%; flex-shrink: 0;
}
button, .alert {
// height: 100%;
line-height: 21px;
min-height: 0;
box-sizing: border-box;
margin: 0;
margin-left: .25em;
min-width: 1px;
align-self: stretch;
} }
} }

View file

@ -28,6 +28,7 @@
<user-panel></user-panel> <user-panel></user-panel>
<nav-panel></nav-panel> <nav-panel></nav-panel>
<instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel> <instance-specific-panel v-if="showInstanceSpecificPanel"></instance-specific-panel>
<features-panel v-if="!currentUser"></features-panel>
<who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel> <who-to-follow-panel v-if="currentUser && suggestionsEnabled"></who-to-follow-panel>
<notifications v-if="currentUser"></notifications> <notifications v-if="currentUser"></notifications>
</div> </div>

View file

@ -3,7 +3,7 @@
<div class="panel-heading conversation-heading"> <div class="panel-heading conversation-heading">
<span class="title"> {{ $t('timeline.conversation') }} </span> <span class="title"> {{ $t('timeline.conversation') }} </span>
<span v-if="collapsable"> <span v-if="collapsable">
<small><a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a></small> <a href="#" @click.prevent="$emit('toggleExpanded')">{{ $t('timeline.collapse') }}</a>
</span> </span>
</div> </div>
<div class="panel-body"> <div class="panel-body">

View file

@ -0,0 +1,14 @@
const FeaturesPanel = {
computed: {
chat: function () {
return this.$store.state.config.chatAvailable && (!this.$store.state.chatDisabled)
},
gopher: function () { return this.$store.state.config.gopherAvailable },
whoToFollow: function () { return this.$store.state.config.suggestionsEnabled },
mediaProxy: function () { return this.$store.state.config.mediaProxyAvailable },
scopeOptions: function () { return this.$store.state.config.scopeOptionsEnabled },
textlimit: function () { return this.$store.state.config.textlimit }
}
}
export default FeaturesPanel

View file

@ -0,0 +1,29 @@
<template>
<div class="features-panel">
<div class="panel panel-default base01-background">
<div class="panel-heading timeline-heading base02-background base04">
<div class="title">
{{$t('features_panel.title')}}
</div>
</div>
<div class="panel-body features-panel">
<ul>
<li v-if="chat">{{$t('features_panel.chat')}}</li>
<li v-if="gopher">{{$t('features_panel.gopher')}}</li>
<li v-if="whoToFollow">{{$t('features_panel.who_to_follow')}}</li>
<li v-if="mediaProxy">{{$t('features_panel.media_proxy')}}</li>
<li v-if="scopeOptions">{{$t('features_panel.scope_options')}}</li>
<li>{{$t('features_panel.text_limit')}} = {{textlimit}}</li>
</ul>
</div>
</div>
</div>
</template>
<script src="./features_panel.js" ></script>
<style lang="scss">
.features-panel li {
line-height: 24px;
}
</style>

View file

@ -22,10 +22,6 @@
} }
.loadmore-error { .loadmore-error {
min-width: 6em;
text-align: center;
padding: 0 0.25em 0 0.25em;
margin: 0;
color: $fallback--fg; color: $fallback--fg;
color: var(--fg, $fallback--fg); color: var(--fg, $fallback--fg);
} }

View file

@ -90,8 +90,7 @@
</div> </div>
<div class="upload_settings" v-if="newStatus.files.length > 0"> <div class="upload_settings" v-if="newStatus.files.length > 0">
<input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw"> <input type="checkbox" id="filesSensitive" v-model="newStatus.nsfw">
<label for="filesSensitive" v-if="newStatus.nsfw">{{$t('post_status.attachments_sensitive')}}</label> <label for="filesSensitive">{{$t('post_status.attachments_sensitive')}}</label>
<label for="filesSensitive" v-else v-html="$t('post_status.attachments_not_sensitive')"></label>
</div> </div>
</form> </form>
</div> </div>

View file

@ -6,21 +6,25 @@ import { filter, trim } from 'lodash'
const settings = { const settings = {
data () { data () {
const config = this.$store.state.config
return { return {
hideAttachmentsLocal: this.$store.state.config.hideAttachments, hideAttachmentsLocal: config.hideAttachments,
hideAttachmentsInConvLocal: this.$store.state.config.hideAttachmentsInConv, hideAttachmentsInConvLocal: config.hideAttachmentsInConv,
hideNsfwLocal: this.$store.state.config.hideNsfw, hideNsfwLocal: config.hideNsfw,
notificationVisibilityLocal: this.$store.state.config.notificationVisibility, notificationVisibilityLocal: config.notificationVisibility,
replyVisibilityLocal: this.$store.state.config.replyVisibility, replyVisibilityLocal: config.replyVisibility,
loopVideoLocal: this.$store.state.config.loopVideo, loopVideoLocal: config.loopVideo,
loopVideoSilentOnlyLocal: this.$store.state.config.loopVideoSilentOnly, loopVideoSilentOnlyLocal: config.loopVideoSilentOnly,
muteWordsString: this.$store.state.config.muteWords.join('\n'), muteWordsString: config.muteWords.join('\n'),
autoLoadLocal: this.$store.state.config.autoLoad, autoLoadLocal: config.autoLoad,
streamingLocal: this.$store.state.config.streaming, streamingLocal: config.streaming,
pauseOnUnfocusedLocal: this.$store.state.config.pauseOnUnfocused, pauseOnUnfocusedLocal: config.pauseOnUnfocused,
hoverPreviewLocal: this.$store.state.config.hoverPreview, hoverPreviewLocal: config.hoverPreview,
collapseMessageWithSubjectLocal: this.$store.state.config.collapseMessageWithSubject, collapseMessageWithSubjectLocal: typeof config.collapseMessageWithSubject === 'undefined'
stopGifs: this.$store.state.config.stopGifs, ? config.defaultCollapseMessageWithSubject
: config.collapseMessageWithSubject,
stopGifs: config.stopGifs,
loopSilentAvailable: loopSilentAvailable:
// Firefox // Firefox
Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') || Object.getOwnPropertyDescriptor(HTMLVideoElement.prototype, 'mozHasAudio') ||

View file

@ -23,6 +23,7 @@
img { img {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: contain;
} }
&.animated { &.animated {

View file

@ -4,12 +4,12 @@
<div class="title"> <div class="title">
{{title}} {{title}}
</div> </div>
<button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.show_new')}}{{newStatusCountStr}}
</button>
<div @click.prevent class="loadmore-error alert error" v-if="timelineError"> <div @click.prevent class="loadmore-error alert error" v-if="timelineError">
{{$t('timeline.error_fetching')}} {{$t('timeline.error_fetching')}}
</div> </div>
<button @click.prevent="showNewStatuses" class="loadmore-button" v-if="timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.show_new')}}{{newStatusCountStr}}
</button>
<div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError"> <div @click.prevent class="loadmore-text" v-if="!timeline.newStatusCount > 0 && !timelineError">
{{$t('timeline.up_to_date')}} {{$t('timeline.up_to_date')}}
</div> </div>
@ -58,7 +58,6 @@
.timeline { .timeline {
.loadmore-text { .loadmore-text {
font-size: 14px;
opacity: 0.8; opacity: 0.8;
background-color: transparent; background-color: transparent;
color: $fallback--faint; color: $fallback--faint;
@ -66,11 +65,6 @@
} }
.loadmore-error { .loadmore-error {
font-size: 14px;
min-width: 6em;
text-align: center;
padding: 0 0.25em 0 0.25em;
margin: 0;
color: $fallback--fg; color: $fallback--fg;
color: var(--fg, $fallback--fg); color: var(--fg, $fallback--fg);
} }

View file

@ -14,8 +14,10 @@
<style lang="scss"> <style lang="scss">
.user-panel { .user-panel {
.profile-panel-background .panel-heading { .profile-panel-background .panel-heading {
background: transparent; background: transparent;
} flex-direction: column;
align-items: stretch;
}
} }
</style> </style>

View file

@ -3,9 +3,10 @@ import apiService from '../../services/api/api.service.js'
function showWhoToFollow (panel, reply) { function showWhoToFollow (panel, reply) {
var users = reply var users = reply
var cn var cn
var index = 0 var index
var random = Math.floor(Math.random() * 10) var step = 7
for (cn = random; cn < users.length; cn = cn + 10) { cn = Math.floor(Math.random() * step)
for (index = 0; index < 3; index++) {
var user var user
user = users[cn] user = users[cn]
var img var img
@ -46,11 +47,8 @@ function showWhoToFollow (panel, reply) {
} }
}) })
} }
index = index + 1
if (index > 2) {
break
}
} }
cn = (cn + step) % users.length
} }
function getWhoToFollow (panel) { function getWhoToFollow (panel) {

View file

@ -2,6 +2,15 @@
"chat": { "chat": {
"title": "Chat" "title": "Chat"
}, },
"features_panel": {
"chat": "Chat",
"gopher": "Gopher",
"media_proxy": "Media proxy",
"scope_options": "Scope options",
"text_limit": "Text limit",
"title": "Features",
"who_to_follow": "Who to follow"
},
"finder": { "finder": {
"error_fetching_user": "Error fetching user", "error_fetching_user": "Error fetching user",
"find_user": "Find user" "find_user": "Find user"
@ -38,8 +47,7 @@
"post_status": { "post_status": {
"account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.", "account_not_locked_warning": "Your account is not {0}. Anyone can follow you to view your follower-only posts.",
"account_not_locked_warning_link": "locked", "account_not_locked_warning_link": "locked",
"attachments_not_sensitive": "Attachments <strong>not</strong> marked sensitive", "attachments_sensitive": "Mark attachments as sensitive",
"attachments_sensitive": "Attachments marked sensitive",
"content_type": { "content_type": {
"plain_text": "Plain text" "plain_text": "Plain text"
}, },

View file

@ -2,6 +2,15 @@
"chat": { "chat": {
"title": "チャット" "title": "チャット"
}, },
"features_panel": {
"chat": "チャット",
"gopher": "Gopher",
"media_proxy": "メディアプロクシ",
"scope_options": "こうかいはんい",
"text_limit": "もじのかず",
"title": "ゆうこうなきのう",
"who_to_follow": "おすすめユーザー"
},
"finder": { "finder": {
"error_fetching_user": "ユーザーけんさくがエラーになりました。", "error_fetching_user": "ユーザーけんさくがエラーになりました。",
"find_user": "ユーザーをさがす" "find_user": "ユーザーをさがす"

View file

@ -114,26 +114,20 @@ window.fetch('/api/statusnet/config.json')
var redirectRootNoLogin = (config.redirectRootNoLogin) var redirectRootNoLogin = (config.redirectRootNoLogin)
var redirectRootLogin = (config.redirectRootLogin) var redirectRootLogin = (config.redirectRootLogin)
var chatDisabled = (config.chatDisabled) var chatDisabled = (config.chatDisabled)
var showWhoToFollowPanel = (config.showWhoToFollowPanel)
var whoToFollowProvider = (config.whoToFollowProvider)
var whoToFollowLink = (config.whoToFollowLink)
var showInstanceSpecificPanel = (config.showInstanceSpecificPanel) var showInstanceSpecificPanel = (config.showInstanceSpecificPanel)
var scopeOptionsEnabled = (config.scopeOptionsEnabled) var scopeOptionsEnabled = (config.scopeOptionsEnabled)
var formattingOptionsEnabled = (config.formattingOptionsEnabled) var formattingOptionsEnabled = (config.formattingOptionsEnabled)
var collapseMessageWithSubject = (config.collapseMessageWithSubject) var defaultCollapseMessageWithSubject = (config.collapseMessageWithSubject)
store.dispatch('setOption', { name: 'theme', value: theme }) store.dispatch('setOption', { name: 'theme', value: theme })
store.dispatch('setOption', { name: 'background', value: background }) store.dispatch('setOption', { name: 'background', value: background })
store.dispatch('setOption', { name: 'logo', value: logo }) store.dispatch('setOption', { name: 'logo', value: logo })
store.dispatch('setOption', { name: 'logoMask', value: logoMask }) store.dispatch('setOption', { name: 'logoMask', value: logoMask })
store.dispatch('setOption', { name: 'logoMargin', value: logoMargin }) store.dispatch('setOption', { name: 'logoMargin', value: logoMargin })
store.dispatch('setOption', { name: 'showWhoToFollowPanel', value: showWhoToFollowPanel })
store.dispatch('setOption', { name: 'whoToFollowProvider', value: whoToFollowProvider })
store.dispatch('setOption', { name: 'whoToFollowLink', value: whoToFollowLink })
store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel }) store.dispatch('setOption', { name: 'showInstanceSpecificPanel', value: showInstanceSpecificPanel })
store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled }) store.dispatch('setOption', { name: 'scopeOptionsEnabled', value: scopeOptionsEnabled })
store.dispatch('setOption', { name: 'formattingOptionsEnabled', value: formattingOptionsEnabled }) store.dispatch('setOption', { name: 'formattingOptionsEnabled', value: formattingOptionsEnabled })
store.dispatch('setOption', { name: 'collapseMessageWithSubject', value: collapseMessageWithSubject }) store.dispatch('setOption', { name: 'defaultCollapseMessageWithSubject', value: defaultCollapseMessageWithSubject })
if (chatDisabled) { if (chatDisabled) {
store.dispatch('disableChat') store.dispatch('disableChat')
} }
@ -222,7 +216,12 @@ window.fetch('/instance/panel.html')
window.fetch('/nodeinfo/2.0.json') window.fetch('/nodeinfo/2.0.json')
.then((res) => res.json()) .then((res) => res.json())
.then((data) => { .then((data) => {
const suggestions = data.metadata.suggestions const metadata = data.metadata
store.dispatch('setOption', { name: 'mediaProxyAvailable', value: data.metadata.mediaProxy })
store.dispatch('setOption', { name: 'chatAvailable', value: data.metadata.chat })
store.dispatch('setOption', { name: 'gopherAvailable', value: data.metadata.gopher })
const suggestions = metadata.suggestions
store.dispatch('setOption', { name: 'suggestionsEnabled', value: suggestions.enabled }) store.dispatch('setOption', { name: 'suggestionsEnabled', value: suggestions.enabled })
store.dispatch('setOption', { name: 'suggestionsWeb', value: suggestions.web }) store.dispatch('setOption', { name: 'suggestionsWeb', value: suggestions.web })
}) })