Use more clear explanation in the scope notice, make sure the hide button doesn't overlap with text in notice.

This commit is contained in:
eugenijm 2019-05-07 22:32:47 +03:00
parent 4af343374a
commit a89010843d
7 changed files with 30 additions and 18 deletions

View file

@ -648,6 +648,19 @@ nav {
border-radius: var(--inputRadius, $fallback--inputRadius); border-radius: var(--inputRadius, $fallback--inputRadius);
} }
.notice-dismissible {
padding-right: 4rem;
position: relative;
.dismiss {
position: absolute;
top: 0;
right: 0;
padding: .5em;
color: inherit;
}
}
@keyframes modal-background-fadein { @keyframes modal-background-fadein {
from { from {
background-color: rgba(0, 0, 0, 0); background-color: rgba(0, 0, 0, 0);

View file

@ -12,8 +12,7 @@ const MobilePostStatusModal = {
scrollingDown: false, scrollingDown: false,
inputActive: false, inputActive: false,
oldScrollPos: 0, oldScrollPos: 0,
amountScrolled: 0, amountScrolled: 0
visibility: this.$store.state.users.currentUser.default_scope
} }
}, },
created () { created () {
@ -33,9 +32,6 @@ const MobilePostStatusModal = {
} }
}, },
methods: { methods: {
onScopeChange (visibility) {
this.visibility = visibility
},
openPostForm () { openPostForm () {
this.postFormOpen = true this.postFormOpen = true
this.hidden = true this.hidden = true

View file

@ -7,7 +7,7 @@
> >
<div class="post-form-modal-panel panel" @click.stop=""> <div class="post-form-modal-panel panel" @click.stop="">
<div class="panel-heading">{{$t('post_status.new_status')}}</div> <div class="panel-heading">{{$t('post_status.new_status')}}</div>
<PostStatusForm class="panel-body" @posted="closePostForm" @onScopeChange="onScopeChange" /> <PostStatusForm class="panel-body" @posted="closePostForm" />
</div> </div>
</div> </div>
<button <button

View file

@ -341,7 +341,6 @@ const PostStatusForm = {
}, },
changeVis (visibility) { changeVis (visibility) {
this.newStatus.visibility = visibility this.newStatus.visibility = visibility
this.$emit('onScopeChange', visibility)
}, },
dismissScopeNotice () { dismissScopeNotice () {
this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true }) this.$store.dispatch('setOption', { name: 'hideScopeNotice', value: true })

View file

@ -9,21 +9,21 @@
class="visibility-notice"> class="visibility-notice">
<router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link> <router-link :to="{ name: 'user-settings' }">{{ $t('post_status.account_not_locked_warning_link') }}</router-link>
</i18n> </i18n>
<p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice"> <p v-if="!hideScopeNotice && newStatus.visibility === 'public'" class="visibility-notice notice-dismissible">
<span>{{ $t('post_status.scope_notice.public') }}</span> <span>{{ $t('post_status.scope_notice.public') }}</span>
<a v-on:click.prevent="dismissScopeNotice()" style="float: right" class="button-icon"> <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
<i class='icon-cancel'></i> <i class='icon-cancel'></i>
</a> </a>
</p> </p>
<p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice"> <p v-else-if="!hideScopeNotice && newStatus.visibility === 'unlisted'" class="visibility-notice notice-dismissible">
<span>{{ $t('post_status.scope_notice.unlisted') }}</span> <span>{{ $t('post_status.scope_notice.unlisted') }}</span>
<a v-on:click.prevent="dismissScopeNotice()" style="float: right" class="button-icon"> <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
<i class='icon-cancel'></i> <i class='icon-cancel'></i>
</a> </a>
</p> </p>
<p v-else-if="!hideScopeNotice && newStatus.visibility === 'private'" class="visibility-notice"> <p v-else-if="!hideScopeNotice && newStatus.visibility === 'private' && $store.state.users.currentUser.locked" class="visibility-notice notice-dismissible">
<span>{{ $t('post_status.scope_notice.private') }}</span> <span>{{ $t('post_status.scope_notice.private') }}</span>
<a v-on:click.prevent="dismissScopeNotice()" style="float: right" class="button-icon"> <a v-on:click.prevent="dismissScopeNotice()" class="button-icon dismiss">
<i class='icon-cancel'></i> <i class='icon-cancel'></i>
</a> </a>
</p> </p>

View file

@ -95,10 +95,9 @@
"direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.", "direct_warning_to_first_only": "This post will only be visible to the mentioned users at the beginning of the message.",
"posting": "Posting", "posting": "Posting",
"scope_notice": { "scope_notice": {
"public": "Post to public timelines", "public": "This post will be visible to everyone",
"private": "Post to followers only", "private": "This post will be visible to your followers only",
"unlisted": "Do not post to public timelines", "unlisted": "This post will not be visible in Public Timeline and The Whole Known Network"
"direct": "Post to mentioned users only"
}, },
"scope": { "scope": {
"direct": "Direct - Post to mentioned users only", "direct": "Direct - Post to mentioned users only",

View file

@ -42,8 +42,13 @@
"attachments_sensitive": "Вложения содержат чувствительный контент", "attachments_sensitive": "Вложения содержат чувствительный контент",
"content_warning": "Тема (не обязательно)", "content_warning": "Тема (не обязательно)",
"default": "Что нового?", "default": "Что нового?",
"direct_warning": "Этот пост будет видет только упомянутым пользователям", "direct_warning": "Этот пост будет виден только упомянутым пользователям",
"posting": "Отправляется", "posting": "Отправляется",
"scope_notice": {
"public": "Этот пост будет виден всем",
"private": "Этот пост будет виден только вашим подписчикам",
"unlisted": "Этот пост не будет виден в публичной и федеративной ленте"
},
"scope": { "scope": {
"direct": "Личное - этот пост видят только те кто в нём упомянут", "direct": "Личное - этот пост видят только те кто в нём упомянут",
"private": "Для подписчиков - этот пост видят только подписчики", "private": "Для подписчиков - этот пост видят только подписчики",