wip
This commit is contained in:
syuilo
parent
985a105930
commit
47ce59d555
5 changed files with 244 additions and 20 deletions
213
src/client/app/common/views/components/visibility-chooser.vue
Normal file
213
src/client/app/common/views/components/visibility-chooser.vue
Normal file
|
|
@ -0,0 +1,213 @@
|
|||
<template>
|
||||
<div class="mk-visibility-chooser">
|
||||
<div class="backdrop" ref="backdrop" @click="close"></div>
|
||||
<div class="popover" :class="{ compact }" ref="popover">
|
||||
<div @click="choose('public')" :class="{ active: v == 'public' }">
|
||||
<div>%fa:globe%</div>
|
||||
<div>
|
||||
<span>公開</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="choose('home')" :class="{ active: v == 'home' }">
|
||||
<div>%fa:home%</div>
|
||||
<div>
|
||||
<span>ホーム</span>
|
||||
<span>ホームタイムラインにのみ公開</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="choose('followers')" :class="{ active: v == 'followers' }">
|
||||
<div>%fa:unlock%</div>
|
||||
<div>
|
||||
<span>フォロワー</span>
|
||||
<span>自分のフォロワーのみに公開</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="choose('mentioned')" :class="{ active: v == 'mentioned' }">
|
||||
<div>%fa:envelope%</div>
|
||||
<div>
|
||||
<span>メンション</span>
|
||||
<span>言及したユーザーのみに公開</span>
|
||||
</div>
|
||||
</div>
|
||||
<div @click="choose('private')" :class="{ active: v == 'private' }">
|
||||
<div>%fa:lock%</div>
|
||||
<div>
|
||||
<span>非公開</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import * as anime from 'animejs';
|
||||
|
||||
export default Vue.extend({
|
||||
props: ['source', 'compact', 'v'],
|
||||
mounted() {
|
||||
this.$nextTick(() => {
|
||||
const popover = this.$refs.popover as any;
|
||||
|
||||
const rect = this.source.getBoundingClientRect();
|
||||
const width = popover.offsetWidth;
|
||||
const height = popover.offsetHeight;
|
||||
|
||||
if (this.compact) {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||
popover.style.left = (x - (width / 2)) + 'px';
|
||||
popover.style.top = (y - (height / 2)) + 'px';
|
||||
} else {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + this.source.offsetHeight;
|
||||
popover.style.left = (x - (width / 2)) + 'px';
|
||||
popover.style.top = y + 'px';
|
||||
}
|
||||
|
||||
anime({
|
||||
targets: this.$refs.backdrop,
|
||||
opacity: 1,
|
||||
duration: 100,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
anime({
|
||||
targets: this.$refs.popover,
|
||||
opacity: 1,
|
||||
scale: [0.5, 1],
|
||||
duration: 500
|
||||
});
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
choose(visibility) {
|
||||
this.$emit('chosen', visibility);
|
||||
this.$destroy();
|
||||
},
|
||||
close() {
|
||||
(this.$refs.backdrop as any).style.pointerEvents = 'none';
|
||||
anime({
|
||||
targets: this.$refs.backdrop,
|
||||
opacity: 0,
|
||||
duration: 200,
|
||||
easing: 'linear'
|
||||
});
|
||||
|
||||
(this.$refs.popover as any).style.pointerEvents = 'none';
|
||||
anime({
|
||||
targets: this.$refs.popover,
|
||||
opacity: 0,
|
||||
scale: 0.5,
|
||||
duration: 200,
|
||||
easing: 'easeInBack',
|
||||
complete: () => this.$destroy()
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
root(isDark)
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
position fixed
|
||||
top 0
|
||||
left 0
|
||||
z-index 10000
|
||||
width 100%
|
||||
height 100%
|
||||
background isDark ? rgba(#000, 0.4) : rgba(#000, 0.1)
|
||||
opacity 0
|
||||
|
||||
> .popover
|
||||
$bgcolor = isDark ? #2c303c : #fff
|
||||
position absolute
|
||||
z-index 10001
|
||||
width 240px
|
||||
padding 8px 0
|
||||
background $bgcolor
|
||||
border 1px solid $border-color
|
||||
border-radius 4px
|
||||
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
||||
transform scale(0.5)
|
||||
opacity 0
|
||||
|
||||
$balloon-size = 10px
|
||||
|
||||
&:not(.compact)
|
||||
margin-top $balloon-size
|
||||
transform-origin center -($balloon-size)
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2)
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size $border-color
|
||||
|
||||
&:after
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($balloon-size * 2) + 1.5px
|
||||
left s('calc(50% - %s)', $balloon-size)
|
||||
border-top solid $balloon-size transparent
|
||||
border-left solid $balloon-size transparent
|
||||
border-right solid $balloon-size transparent
|
||||
border-bottom solid $balloon-size $bgcolor
|
||||
|
||||
> div
|
||||
display flex
|
||||
padding 8px 14px
|
||||
font-size 12px
|
||||
color isDark ? #fff : #666
|
||||
cursor pointer
|
||||
|
||||
&:hover
|
||||
background isDark ? #252731 : #eee
|
||||
|
||||
&:active
|
||||
background isDark ? #21242b : #ddd
|
||||
|
||||
&.active
|
||||
cursor $theme-color-foreground
|
||||
background $theme-color
|
||||
|
||||
> *
|
||||
user-select none
|
||||
pointer-events none
|
||||
|
||||
> *:first-child
|
||||
display flex
|
||||
justify-content center
|
||||
align-items center
|
||||
margin-right 10px
|
||||
|
||||
> *:last-child
|
||||
flex 1 1 auto
|
||||
|
||||
> span:first-child
|
||||
display block
|
||||
font-weight bold
|
||||
|
||||
> span:last-child:not(:first-child)
|
||||
opacity 0.6
|
||||
|
||||
.mk-visibility-chooser[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mk-visibility-chooser:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
<button class="poll" title="%i18n:@create-poll%" @click="poll = true">%fa:chart-pie%</button>
|
||||
<button class="poll" title="内容を隠す" @click="useCw = !useCw">%fa:eye-slash%</button>
|
||||
<button class="geo" title="位置情報を添付する" @click="geo ? removeGeo() : setGeo()">%fa:map-marker-alt%</button>
|
||||
<p class="text-count" :class="{ over: text.length > 1000 }">{{ '%i18n:!@text-remain%'.replace('{}', 1000 - text.length) }}</p>
|
||||
<button class="visibility" title="公開範囲" @click="setVisibility" ref="visibilityButton">%fa:lock%</button>
|
||||
<button :class="{ posting }" class="submit" :disabled="!canPost" @click="post">
|
||||
{{ posting ? '%i18n:!@posting%' : submitText }}<mk-ellipsis v-if="posting"/>
|
||||
</button>
|
||||
|
|
@ -43,10 +43,12 @@
|
|||
import Vue from 'vue';
|
||||
import * as XDraggable from 'vuedraggable';
|
||||
import getKao from '../../../common/scripts/get-kao';
|
||||
import MkVisibilityChooser from '../../../common/views/components/visibility-chooser.vue';
|
||||
|
||||
export default Vue.extend({
|
||||
components: {
|
||||
XDraggable
|
||||
XDraggable,
|
||||
MkVisibilityChooser
|
||||
},
|
||||
|
||||
props: ['reply', 'renote'],
|
||||
|
|
@ -61,6 +63,7 @@ export default Vue.extend({
|
|||
useCw: false,
|
||||
cw: null,
|
||||
geo: null,
|
||||
visibility: 'public',
|
||||
autocomplete: null,
|
||||
draghover: false
|
||||
};
|
||||
|
|
@ -246,6 +249,16 @@ export default Vue.extend({
|
|||
this.$emit('geo-dettached');
|
||||
},
|
||||
|
||||
setVisibility() {
|
||||
const w = (this as any).os.new(MkVisibilityChooser, {
|
||||
source: this.$refs.visibilityButton,
|
||||
v: this.visibility
|
||||
});
|
||||
w.$once('chosen', v => {
|
||||
this.visibility = v;
|
||||
});
|
||||
},
|
||||
|
||||
post() {
|
||||
this.posting = true;
|
||||
|
||||
|
|
@ -256,6 +269,7 @@ export default Vue.extend({
|
|||
renoteId: this.renote ? this.renote.id : undefined,
|
||||
poll: this.poll ? (this.$refs.poll as any).get() : undefined,
|
||||
cw: this.useCw ? this.cw || '' : undefined,
|
||||
visibility: this.visibility,
|
||||
geo: this.geo ? {
|
||||
coordinates: [this.geo.longitude, this.geo.latitude],
|
||||
altitude: this.geo.altitude,
|
||||
|
|
@ -450,19 +464,6 @@ root(isDark)
|
|||
input[type='file']
|
||||
display none
|
||||
|
||||
.text-count
|
||||
pointer-events none
|
||||
display block
|
||||
position absolute
|
||||
bottom 16px
|
||||
right 138px
|
||||
margin 0
|
||||
line-height 40px
|
||||
color rgba($theme-color, 0.5)
|
||||
|
||||
&.over
|
||||
color #ec3828
|
||||
|
||||
.submit
|
||||
display block
|
||||
position absolute
|
||||
|
|
@ -532,6 +533,7 @@ root(isDark)
|
|||
> .kao
|
||||
> .poll
|
||||
> .geo
|
||||
> .visibility
|
||||
display inline-block
|
||||
cursor pointer
|
||||
padding 0
|
||||
|
|
|
|||
|
|
@ -46,7 +46,16 @@ export type INote = {
|
|||
repliesCount: number;
|
||||
reactionCounts: any;
|
||||
mentions: mongo.ObjectID[];
|
||||
visibility: 'public' | 'unlisted' | 'private' | 'direct';
|
||||
|
||||
/**
|
||||
* public ... 公開
|
||||
* home ... ホームタイムライン(ユーザーページのタイムライン含む)のみに流す
|
||||
* followers ... フォロワーのみ
|
||||
* mentioned ... 言及したユーザーのみ
|
||||
* private ... 自分のみ
|
||||
*/
|
||||
visibility: 'public' | 'home' | 'followers' | 'mentioned' | 'private';
|
||||
|
||||
geo: {
|
||||
coordinates: number[];
|
||||
altitude: number;
|
||||
|
|
|
|||
|
|
@ -30,8 +30,8 @@ export default async function(resolver: Resolver, actor: IRemoteUser, activity:
|
|||
|
||||
//#region Visibility
|
||||
let visibility = 'public';
|
||||
if (!activity.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'unlisted';
|
||||
if (activity.cc.length == 0) visibility = 'private';
|
||||
if (!activity.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'home';
|
||||
if (activity.cc.length == 0) visibility = 'followers';
|
||||
// TODO
|
||||
if (visibility != 'public') throw new Error('unspported visibility');
|
||||
//#endergion
|
||||
|
|
|
|||
|
|
@ -65,8 +65,8 @@ export async function createNote(value: any, resolver?: Resolver, silent = false
|
|||
|
||||
//#region Visibility
|
||||
let visibility = 'public';
|
||||
if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'unlisted';
|
||||
if (note.cc.length == 0) visibility = 'private';
|
||||
if (!note.to.includes('https://www.w3.org/ns/activitystreams#Public')) visibility = 'home';
|
||||
if (note.cc.length == 0) visibility = 'followers';
|
||||
// TODO
|
||||
if (visibility != 'public') return null;
|
||||
//#endergion
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue