hj/pleroma-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge branch 'polish' into shigusegubu

Browse source 
* polish:
  added option for logo in navbar to follow color scheme of the rest of the site also fixed potential mess-up between api/static configs
  i18n: make "plain text" translatable
  add the ability to select a post's content type
This commit is contained in:
Henry Jameson 2018-08-31 04:21:46 +03:00
commit c2a4ae3654
10 changed files with 115 additions and 28 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/App.js
View file

@ -18,7 +18,14 @@ export default {
ChatPanel
},
data: () => ({
mobileActivePanel: 'timeline'
mobileActivePanel: 'timeline',
supportsMask: window.CSS && window.CSS.supports && (
window.CSS.supports('mask-size', 'contain') ||
window.CSS.supports('-webkit-mask-size', 'contain') ||
window.CSS.supports('-moz-mask-size', 'contain') ||
window.CSS.supports('-ms-mask-size', 'contain') ||
window.CSS.supports('-o-mask-size', 'contain')
)
}),
created () {
// Load the locale from the storage
@ -29,7 +36,27 @@ export default {
background () {
return this.currentUser.background_image || this.$store.state.config.background
},
logoStyle () { return { 'background-image': `url(${this.$store.state.config.logo})` } },
enableMask () { return this.supportsMask && this.$store.state.config.logoMask },
logoStyle () {
return {
'visibility': this.enableMask ? 'hidden' : 'visible'
}
},
logoMaskStyle () {
return this.enableMask ? {
'mask-image': `url(${this.$store.state.config.logo})`
} : {
'background-color': this.enableMask ? '' : 'transparent'
}
},
logoBgStyle () {
return Object.assign({
'margin': `${this.$store.state.config.logoMargin} 0`
}, this.enableMask ? {} : {
'background-color': this.enableMask ? '' : 'transparent'
})
},
logo () { return this.$store.state.config.logo },
style () { return { 'background-image': `url(${this.background})` } },
sitename () { return this.$store.state.config.name },
chat () { return this.$store.state.chat.channel.state === 'joined' },

37
src/App.scss
View file

@ -236,6 +236,36 @@ nav {
position: fixed;
height: 50px;
.logo {
display: flex;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
align-items: stretch;
justify-content: center;
flex: 0 0 auto;
z-index: -1;
.mask {
mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
background-color: $fallback--fg;
background-color: var(--fg, $fallback--fg);
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
img {
display: block;
flex: 0;
}
}
.inner-nav {
padding-left: 20px;
padding-right: 20px;
@ -244,9 +274,6 @@ nav {
flex-basis: 970px;
margin: auto;
height: 50px;
background-repeat: no-repeat;
background-position: center;
background-size: auto 80%;
a i {
color: $fallback--link;
@ -471,6 +498,10 @@ nav {
color: $fallback--lightFg;
color: var(--lightFg, $fallback--lightFg);
}
.text-format {
float: right;
}
}
.visibility-notice {

6
src/App.vue
View file

@ -1,7 +1,11 @@
<template>
<div id="app" v-bind:style="style">
<nav class='container' @click="scrollToTop()" id="nav">
<div class='inner-nav' :style="logoStyle">
<div class='logo' :style='logoBgStyle'>
<div class='mask' :style='logoMaskStyle'></div>
<img :src='logo' :style='logoStyle'>
</div>
<div class='inner-nav'>
<div class='item'>
<router-link :to="{ name: 'root'}">{{sitename}}</router-link>
</div>

7
src/components/post_status_form/post_status_form.js
View file

@ -55,6 +55,7 @@ const PostStatusForm = {
newStatus: {
spoilerText: this.subject,
status: statusText,
contentType: 'text/plain',
nsfw: false,
files: [],
visibility: this.messageScope || this.$store.state.users.currentUser.default_scope
@ -210,13 +211,15 @@ const PostStatusForm = {
sensitive: newStatus.nsfw,
media: newStatus.files,
store: this.$store,
inReplyToStatusId: this.replyTo
inReplyToStatusId: this.replyTo,
contentType: newStatus.contentType
}).then((data) => {
if (!data.error) {
this.newStatus = {
status: '',
files: [],
visibility: newStatus.visibility
visibility: newStatus.visibility,
contentType: newStatus.contentType
}
this.$emit('posted')
let el = this.$el.querySelector('textarea')

20
src/components/post_status_form/post_status_form.vue
View file

@ -32,11 +32,21 @@
@input="resize"
@paste="paste">
</textarea>
<div v-if="scopeOptionsEnabled" class="visibility-tray">
<i v-on:click="changeVis('direct')" class="icon-mail-alt" :class="vis.direct" :title="$t('post_status.scope.direct')"></i>
<i v-on:click="changeVis('private')" class="icon-lock" :class="vis.private" :title="$t('post_status.scope.private')"></i>
<i v-on:click="changeVis('unlisted')" class="icon-lock-open-alt" :class="vis.unlisted" :title="$t('post_status.scope.unlisted')"></i>
<i v-on:click="changeVis('public')" class="icon-globe" :class="vis.public" :title="$t('post_status.scope.public')"></i>
<div class="visibility-tray">
<span class="text-format">
<select v-model="newStatus.contentType" class="form-control">
<option value="text/plain">{{$t('post_status.content_type.plain_text')}}</option>
<option value="text/html">HTML</option>
<option value="text/markdown">Markdown</option>
</select>
</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>
</div>
</div>
<div style="position:relative;" v-if="candidates">

3
src/i18n/messages.js
View file

@ -399,6 +399,9 @@ const en = {
unlisted: 'Unlisted - Do not post to public timelines',
private: 'Followers-only - Post to followers only',
direct: 'Direct - Post to mentioned users only'
},
content_type: {
plain_text: 'Plain text'
}
},
finder: {

30
src/main.js
View file

@ -103,23 +103,29 @@ window.fetch('/api/statusnet/config.json')
.then((res) => res.json())
.then((data) => {
var staticConfig = data
// This takes static config and overrides properties that are present in apiConfig
var config = Object.assign({}, staticConfig, apiConfig)
var theme = (apiConfig.theme || staticConfig.theme)
var background = (apiConfig.background || staticConfig.background)
var logo = (apiConfig.logo || staticConfig.logo)
var redirectRootNoLogin = (apiConfig.redirectRootNoLogin || staticConfig.redirectRootNoLogin)
var redirectRootLogin = (apiConfig.redirectRootLogin || staticConfig.redirectRootLogin)
var chatDisabled = (apiConfig.chatDisabled || staticConfig.chatDisabled)
var showWhoToFollowPanel = (apiConfig.showWhoToFollowPanel || staticConfig.showWhoToFollowPanel)
var whoToFollowProvider = (apiConfig.whoToFollowProvider || staticConfig.whoToFollowProvider)
var whoToFollowLink = (apiConfig.whoToFollowLink || staticConfig.whoToFollowLink)
var showInstanceSpecificPanel = (apiConfig.showInstanceSpecificPanel || staticConfig.showInstanceSpecificPanel)
var scopeOptionsEnabled = (apiConfig.scopeOptionsEnabled || staticConfig.scopeOptionsEnabled)
var collapseMessageWithSubject = (apiConfig.collapseMessageWithSubject || staticConfig.collapseMessageWithSubject)
var theme = (config.theme)
var background = (config.background)
var logo = (config.logo)
var logoMask = (typeof config.logoMask === 'undefined' ? true : config.logoMask)
var logoMargin = (typeof config.logoMargin === 'undefined' ? 0 : config.logoMargin)
var redirectRootNoLogin = (config.redirectRootNoLogin)
var redirectRootLogin = (config.redirectRootLogin)
var chatDisabled = (config.chatDisabled)
var showWhoToFollowPanel = (config.showWhoToFollowPanel)
var whoToFollowProvider = (config.whoToFollowProvider)
var whoToFollowLink = (config.whoToFollowLink)
var showInstanceSpecificPanel = (config.showInstanceSpecificPanel)
var scopeOptionsEnabled = (config.scopeOptionsEnabled)
var collapseMessageWithSubject = (config.collapseMessageWithSubject)
store.dispatch('setOption', { name: 'theme', value: theme })
store.dispatch('setOption', { name: 'background', value: background })
store.dispatch('setOption', { name: 'logo', value: logo })
store.dispatch('setOption', { name: 'logoMask', value: logoMask })
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 })

3
src/services/api/api.service.js
View file

@ -373,7 +373,7 @@ const unretweet = ({ id, credentials }) => {
})
}
const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId}) => {
const postStatus = ({credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType}) => {
const idsText = mediaIds.join(',')
const form = new FormData()
@ -382,6 +382,7 @@ const postStatus = ({credentials, status, spoilerText, visibility, sensitive, me
if (spoilerText) form.append('spoiler_text', spoilerText)
if (visibility) form.append('visibility', visibility)
if (sensitive) form.append('sensitive', sensitive)
if (contentType) form.append('content_type', contentType)
form.append('media_ids', idsText)
if (inReplyToStatusId) {
form.append('in_reply_to_status_id', inReplyToStatusId)

4
src/services/status_poster/status_poster.service.js
View file

@ -1,10 +1,10 @@
import { map } from 'lodash'
import apiService from '../api/api.service.js'
const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined }) => {
const postStatus = ({ store, status, spoilerText, visibility, sensitive, media = [], inReplyToStatusId = undefined, contentType = 'text/plain' }) => {
const mediaIds = map(media, 'id')
return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId})
return apiService.postStatus({credentials: store.state.users.currentUser.credentials, status, spoilerText, visibility, sensitive, mediaIds, inReplyToStatusId, contentType})
.then((data) => data.json())
.then((data) => {
if (!data.error) {

2
static/config.json
View file

@ -3,6 +3,8 @@
"theme": "sigsegv",
"background": "/static/sigsegv_s.png",
"logo": "/static/logo.svg",
"logoMask": true,
"logoMargin": ".1em",
"redirectRootNoLogin": "/main/all",
"redirectRootLogin": "/main/friends",
"chatDisabled": true,