This commit is contained in:
syuilo
parent
7947036af9
commit
f11ebafe47
|
|
@ -129,9 +129,7 @@ export default (opts: Opts = {}) => ({
|
|||
source: this.$refs.reactButton,
|
||||
note: this.appearNote,
|
||||
showFocus: viaKeyboard,
|
||||
animation: !viaKeyboard,
|
||||
compact: opts.mobile,
|
||||
big: opts.mobile
|
||||
animation: !viaKeyboard
|
||||
}).$once('closed', this.focus);
|
||||
},
|
||||
|
||||
|
|
@ -171,8 +169,7 @@ export default (opts: Opts = {}) => ({
|
|||
this.$root.new(MkNoteMenu, {
|
||||
source: this.$refs.menuButton,
|
||||
note: this.appearNote,
|
||||
animation: !viaKeyboard,
|
||||
compact: opts.mobile,
|
||||
animation: !viaKeyboard
|
||||
}).$once('closed', this.focus);
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -24,16 +24,11 @@ export default Vue.extend({
|
|||
items: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
hukidasi: !this.compact
|
||||
hukidasi: !this.$root.isMobile
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
@ -47,7 +42,7 @@ export default Vue.extend({
|
|||
let left;
|
||||
let top;
|
||||
|
||||
if (this.compact) {
|
||||
if (this.$root.isMobile) {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||
left = (x - (width / 2));
|
||||
|
|
@ -121,14 +116,11 @@ export default Vue.extend({
|
|||
<style lang="stylus" scoped>
|
||||
.onchrpzrvnoruiaenfcqvccjfuupzzwv
|
||||
$bg-color = var(--popupBg)
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
position initial
|
||||
|
||||
&.isMobile
|
||||
> .popover
|
||||
border none
|
||||
|
||||
> button
|
||||
font-size 15px
|
||||
|
||||
|
|
@ -147,7 +139,6 @@ export default Vue.extend({
|
|||
z-index 10001
|
||||
padding 8px 0
|
||||
background $bg-color
|
||||
border 1px solid $border-color
|
||||
border-radius 4px
|
||||
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
|
||||
transform scale(0.5)
|
||||
|
|
@ -172,14 +163,6 @@ export default Vue.extend({
|
|||
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
|
||||
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 $bg-color
|
||||
|
||||
> button
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div style="position:initial">
|
||||
<mk-menu :source="source" :compact="compact" :items="items" @closed="closed"/>
|
||||
<mk-menu :source="source" :items="items" @closed="closed"/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -13,7 +13,7 @@ import { concat, intersperse } from '../../../../../prelude/array';
|
|||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('common/views/components/note-menu.vue'),
|
||||
props: ['note', 'source', 'compact'],
|
||||
props: ['note', 'source'],
|
||||
computed: {
|
||||
items(): any[] {
|
||||
return concat(intersperse([null], [
|
||||
|
|
|
|||
|
|
@ -1,8 +1,8 @@
|
|||
<template>
|
||||
<div class="mk-reaction-picker" v-hotkey.global="keymap">
|
||||
<div class="rdfaahpb" v-hotkey.global="keymap">
|
||||
<div class="backdrop" ref="backdrop" @click="close"></div>
|
||||
<div class="popover" :class="{ compact, big }" ref="popover">
|
||||
<p v-if="!compact">{{ title }}</p>
|
||||
<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
|
||||
<p v-if="!$root.isMobile">{{ title }}</p>
|
||||
<div ref="buttons" :class="{ showFocus }">
|
||||
<button @click="react('like')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="1" :title="$t('@.reactions.like')" v-particle><mk-reaction-icon reaction="like"/></button>
|
||||
<button @click="react('love')" @mouseover="onMouseover" @mouseout="onMouseout" tabindex="2" :title="$t('@.reactions.love')" v-particle><mk-reaction-icon reaction="love"/></button>
|
||||
|
|
@ -36,22 +36,10 @@ export default Vue.extend({
|
|||
required: true
|
||||
},
|
||||
|
||||
compact: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
cb: {
|
||||
required: false
|
||||
},
|
||||
|
||||
big: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
},
|
||||
|
||||
showFocus: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
|
|
@ -115,7 +103,7 @@ export default Vue.extend({
|
|||
const width = popover.offsetWidth;
|
||||
const height = popover.offsetHeight;
|
||||
|
||||
if (this.compact) {
|
||||
if (this.$root.isMobile) {
|
||||
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';
|
||||
|
|
@ -210,9 +198,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
.mk-reaction-picker
|
||||
.rdfaahpb
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
|
|
@ -230,41 +216,12 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
position absolute
|
||||
z-index 10001
|
||||
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 = 16px
|
||||
|
||||
&: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
|
||||
|
||||
&.big
|
||||
&.isMobile
|
||||
> div
|
||||
width 280px
|
||||
|
||||
|
|
@ -274,6 +231,23 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
font-size 28px
|
||||
border-radius 4px
|
||||
|
||||
&:not(.isMobile)
|
||||
$arrow-size = 16px
|
||||
|
||||
margin-top $arrow-size
|
||||
transform-origin center -($arrow-size)
|
||||
|
||||
&:before
|
||||
content ""
|
||||
display block
|
||||
position absolute
|
||||
top -($arrow-size * 2)
|
||||
left s('calc(50% - %s)', $arrow-size)
|
||||
border-top solid $arrow-size transparent
|
||||
border-left solid $arrow-size transparent
|
||||
border-right solid $arrow-size transparent
|
||||
border-bottom solid $arrow-size $bgcolor
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 0
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="mk-visibility-chooser">
|
||||
<div class="gqyayizv">
|
||||
<div class="backdrop" ref="backdrop" @click="close"></div>
|
||||
<div class="popover" :class="{ compact }" ref="popover">
|
||||
<div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
|
||||
<div @click="choose('public')" :class="{ active: v == 'public' }">
|
||||
<div><fa icon="globe"/></div>
|
||||
<div>
|
||||
|
|
@ -59,7 +59,7 @@ import * as anime from 'animejs';
|
|||
|
||||
export default Vue.extend({
|
||||
i18n: i18n('common/views/components/visibility-chooser.vue'),
|
||||
props: ['source', 'compact'],
|
||||
props: ['source'],
|
||||
data() {
|
||||
return {
|
||||
v: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility
|
||||
|
|
@ -76,7 +76,7 @@ export default Vue.extend({
|
|||
let left;
|
||||
let top;
|
||||
|
||||
if (this.compact) {
|
||||
if (this.$root.isMobile) {
|
||||
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
|
||||
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
|
||||
left = (x - (width / 2));
|
||||
|
|
@ -142,9 +142,7 @@ export default Vue.extend({
|
|||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
$border-color = rgba(27, 31, 35, 0.15)
|
||||
|
||||
.mk-visibility-chooser
|
||||
.gqyayizv
|
||||
position initial
|
||||
|
||||
> .backdrop
|
||||
|
|
@ -170,33 +168,22 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
transform scale(0.5)
|
||||
opacity 0
|
||||
|
||||
$balloon-size = 10px
|
||||
&:not(.isMobile)
|
||||
$arrow-size = 10px
|
||||
|
||||
&:not(.compact)
|
||||
margin-top $balloon-size
|
||||
transform-origin center -($balloon-size)
|
||||
margin-top $arrow-size
|
||||
transform-origin center -($arrow-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
|
||||
top -($arrow-size * 2)
|
||||
left s('calc(50% - %s)', $arrow-size)
|
||||
border-top solid $arrow-size transparent
|
||||
border-left solid $arrow-size transparent
|
||||
border-right solid $arrow-size transparent
|
||||
border-bottom solid $arrow-size $bgcolor
|
||||
|
||||
> div
|
||||
display flex
|
||||
|
|
@ -235,4 +222,5 @@ $border-color = rgba(27, 31, 35, 0.15)
|
|||
|
||||
> span:last-child:not(:first-child)
|
||||
opacity 0.6
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -139,7 +139,6 @@ export default Vue.extend({
|
|||
|
||||
this.$root.new(Menu, {
|
||||
source: this.$refs.listButton,
|
||||
compact: false,
|
||||
items: menu
|
||||
});
|
||||
},
|
||||
|
|
@ -170,7 +169,6 @@ export default Vue.extend({
|
|||
|
||||
this.$root.new(Menu, {
|
||||
source: this.$refs.tagButton,
|
||||
compact: false,
|
||||
items: menu
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -240,7 +240,6 @@ export default Vue.extend({
|
|||
showMenu() {
|
||||
this.$root.new(Menu, {
|
||||
source: this.$refs.menu,
|
||||
compact: false,
|
||||
items: this.getMenu()
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -336,7 +336,6 @@ export default Vue.extend({
|
|||
|
||||
this.$root.new(Menu, {
|
||||
source: this.$refs.menu,
|
||||
compact: false,
|
||||
items: menu
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -179,7 +179,6 @@ export default Vue.extend({
|
|||
add() {
|
||||
this.$root.new(Menu, {
|
||||
source: this.$refs.add,
|
||||
compact: true,
|
||||
items: [{
|
||||
icon: 'home',
|
||||
text: this.$t('@deck.home'),
|
||||
|
|
|
|||
|
|
@ -300,8 +300,7 @@ export default Vue.extend({
|
|||
|
||||
setVisibility() {
|
||||
const w = this.$root.new(MkVisibilityChooser, {
|
||||
source: this.$refs.visibilityButton,
|
||||
compact: true
|
||||
source: this.$refs.visibilityButton
|
||||
});
|
||||
w.$once('chosen', v => {
|
||||
this.applyVisibility(v);
|
||||
|
|
|
|||
|
|
@ -208,7 +208,6 @@ export default Vue.extend({
|
|||
|
||||
this.$root.new(Menu, {
|
||||
source: this.$refs.menu,
|
||||
compact: true,
|
||||
items: menu
|
||||
});
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue