Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

🎨

Browse source
This commit is contained in:
syuilo 2018-12-30 01:32:58 +09:00
parent 7947036af9
commit f11ebafe47
No known key found for this signature in database
GPG key ID: BDC4C49D06AB9D69
11 changed files with 46 additions and 111 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/client/app/common/scripts/note-mixin.ts
View file

@ -129,9 +129,7 @@ export default (opts: Opts = {}) => ({
source: this.$refs.reactButton, source: this.$refs.reactButton,
note: this.appearNote, note: this.appearNote,
showFocus: viaKeyboard, showFocus: viaKeyboard,
animation: !viaKeyboard, animation: !viaKeyboard
compact: opts.mobile,
big: opts.mobile
}).$once('closed', this.focus); }).$once('closed', this.focus);
}, },
@ -171,8 +169,7 @@ export default (opts: Opts = {}) => ({
this.$root.new(MkNoteMenu, { this.$root.new(MkNoteMenu, {
source: this.$refs.menuButton, source: this.$refs.menuButton,
note: this.appearNote, note: this.appearNote,
animation: !viaKeyboard, animation: !viaKeyboard
compact: opts.mobile,
}).$once('closed', this.focus); }).$once('closed', this.focus);
}, },

21
src/client/app/common/views/components/menu.vue
View file

@ -24,16 +24,11 @@ export default Vue.extend({
items: { items: {
type: Array, type: Array,
required: true required: true
},
compact: {
type: Boolean,
required: false,
default: false
} }
}, },
data() { data() {
return { return {
hukidasi: !this.compact hukidasi: !this.$root.isMobile
}; };
}, },
mounted() { mounted() {
@ -47,7 +42,7 @@ export default Vue.extend({
let left; let left;
let top; let top;
if (this.compact) { if (this.$root.isMobile) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
left = (x - (width / 2)); left = (x - (width / 2));
@ -121,14 +116,11 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.onchrpzrvnoruiaenfcqvccjfuupzzwv .onchrpzrvnoruiaenfcqvccjfuupzzwv
$bg-color = var(--popupBg) $bg-color = var(--popupBg)
$border-color = rgba(27, 31, 35, 0.15)
position initial position initial
&.isMobile &.isMobile
> .popover > .popover
border none
> button > button
font-size 15px font-size 15px
@ -147,7 +139,6 @@ export default Vue.extend({
z-index 10001 z-index 10001
padding 8px 0 padding 8px 0
background $bg-color background $bg-color
border 1px solid $border-color
border-radius 4px border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15) box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
transform scale(0.5) transform scale(0.5)
@ -172,14 +163,6 @@ export default Vue.extend({
border-top solid $balloon-size transparent border-top solid $balloon-size transparent
border-left solid $balloon-size transparent border-left solid $balloon-size transparent
border-right 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 border-bottom solid $balloon-size $bg-color
> button > button

4
src/client/app/common/views/components/note-menu.vue
View file

@ -1,6 +1,6 @@
<template> <template>
<div style="position:initial"> <div style="position:initial">
<mk-menu :source="source" :compact="compact" :items="items" @closed="closed"/> <mk-menu :source="source" :items="items" @closed="closed"/>
</div> </div>
</template> </template>
@ -13,7 +13,7 @@ import { concat, intersperse } from '../../../../../prelude/array';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('common/views/components/note-menu.vue'), i18n: i18n('common/views/components/note-menu.vue'),
props: ['note', 'source', 'compact'], props: ['note', 'source'],
computed: { computed: {
items(): any[] { items(): any[] {
return concat(intersperse([null], [ return concat(intersperse([null], [

72
src/client/app/common/views/components/reaction-picker.vue
View file

@ -1,8 +1,8 @@
<template> <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="backdrop" ref="backdrop" @click="close"></div>
<div class="popover" :class="{ compact, big }" ref="popover"> <div class="popover" :class="{ isMobile: $root.isMobile }" ref="popover">
<p v-if="!compact">{{ title }}</p> <p v-if="!$root.isMobile">{{ title }}</p>
<div ref="buttons" :class="{ showFocus }"> <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('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> <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 required: true
}, },
compact: {
type: Boolean,
required: false,
default: false
},
cb: { cb: {
required: false required: false
}, },
big: {
type: Boolean,
required: false,
default: false
},
showFocus: { showFocus: {
type: Boolean, type: Boolean,
required: false, required: false,
@ -115,7 +103,7 @@ export default Vue.extend({
const width = popover.offsetWidth; const width = popover.offsetWidth;
const height = popover.offsetHeight; const height = popover.offsetHeight;
if (this.compact) { if (this.$root.isMobile) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
popover.style.left = (x - (width / 2)) + 'px'; popover.style.left = (x - (width / 2)) + 'px';
@ -210,9 +198,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
$border-color = rgba(27, 31, 35, 0.15) .rdfaahpb
.mk-reaction-picker
position initial position initial
> .backdrop > .backdrop
@ -230,41 +216,12 @@ $border-color = rgba(27, 31, 35, 0.15)
position absolute position absolute
z-index 10001 z-index 10001
background $bgcolor background $bgcolor
border 1px solid $border-color
border-radius 4px border-radius 4px
box-shadow 0 3px 12px rgba(27, 31, 35, 0.15) box-shadow 0 3px 12px rgba(27, 31, 35, 0.15)
transform scale(0.5) transform scale(0.5)
opacity 0 opacity 0
$balloon-size = 16px &.isMobile
&: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
> div > div
width 280px width 280px
@ -274,6 +231,23 @@ $border-color = rgba(27, 31, 35, 0.15)
font-size 28px font-size 28px
border-radius 4px 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 > p
display block display block
margin 0 margin 0

44
src/client/app/common/views/components/visibility-chooser.vue
View file

@ -1,7 +1,7 @@
<template> <template>
<div class="mk-visibility-chooser"> <div class="gqyayizv">
<div class="backdrop" ref="backdrop" @click="close"></div> <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 @click="choose('public')" :class="{ active: v == 'public' }">
<div><fa icon="globe"/></div> <div><fa icon="globe"/></div>
<div> <div>
@ -59,7 +59,7 @@ import * as anime from 'animejs';
export default Vue.extend({ export default Vue.extend({
i18n: i18n('common/views/components/visibility-chooser.vue'), i18n: i18n('common/views/components/visibility-chooser.vue'),
props: ['source', 'compact'], props: ['source'],
data() { data() {
return { return {
v: this.$store.state.settings.rememberNoteVisibility ? (this.$store.state.device.visibility || this.$store.state.settings.defaultNoteVisibility) : this.$store.state.settings.defaultNoteVisibility 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 left;
let top; let top;
if (this.compact) { if (this.$root.isMobile) {
const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2); const x = rect.left + window.pageXOffset + (this.source.offsetWidth / 2);
const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2); const y = rect.top + window.pageYOffset + (this.source.offsetHeight / 2);
left = (x - (width / 2)); left = (x - (width / 2));
@ -142,9 +142,7 @@ export default Vue.extend({
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
$border-color = rgba(27, 31, 35, 0.15) .gqyayizv
.mk-visibility-chooser
position initial position initial
> .backdrop > .backdrop
@ -170,33 +168,22 @@ $border-color = rgba(27, 31, 35, 0.15)
transform scale(0.5) transform scale(0.5)
opacity 0 opacity 0
$balloon-size = 10px &:not(.isMobile)
$arrow-size = 10px
&:not(.compact) margin-top $arrow-size
margin-top $balloon-size transform-origin center -($arrow-size)
transform-origin center -($balloon-size)
&:before &:before
content "" content ""
display block display block
position absolute position absolute
top -($balloon-size * 2) top -($arrow-size * 2)
left s('calc(50% - %s)', $balloon-size) left s('calc(50% - %s)', $arrow-size)
border-top solid $balloon-size transparent border-top solid $arrow-size transparent
border-left solid $balloon-size transparent border-left solid $arrow-size transparent
border-right solid $balloon-size transparent border-right solid $arrow-size transparent
border-bottom solid $balloon-size $border-color border-bottom solid $arrow-size $bgcolor
&: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 > div
display flex display flex
@ -235,4 +222,5 @@ $border-color = rgba(27, 31, 35, 0.15)
> span:last-child:not(:first-child) > span:last-child:not(:first-child)
opacity 0.6 opacity 0.6
</style> </style>

2
src/client/app/desktop/views/components/timeline.vue
View file

@ -139,7 +139,6 @@ export default Vue.extend({
this.$root.new(Menu, { this.$root.new(Menu, {
source: this.$refs.listButton, source: this.$refs.listButton,
compact: false,
items: menu items: menu
}); });
}, },
@ -170,7 +169,6 @@ export default Vue.extend({
this.$root.new(Menu, { this.$root.new(Menu, {
source: this.$refs.tagButton, source: this.$refs.tagButton,
compact: false,
items: menu items: menu
}); });
} }

1
src/client/app/desktop/views/pages/deck/deck.column.vue
View file

@ -240,7 +240,6 @@ export default Vue.extend({
showMenu() { showMenu() {
this.$root.new(Menu, { this.$root.new(Menu, {
source: this.$refs.menu, source: this.$refs.menu,
compact: false,
items: this.getMenu() items: this.getMenu()
}); });
}, },

1
src/client/app/desktop/views/pages/deck/deck.user-column.vue
View file

@ -336,7 +336,6 @@ export default Vue.extend({
this.$root.new(Menu, { this.$root.new(Menu, {
source: this.$refs.menu, source: this.$refs.menu,
compact: false,
items: menu items: menu
}); });
}, },

1
src/client/app/desktop/views/pages/deck/deck.vue
View file

@ -179,7 +179,6 @@ export default Vue.extend({
add() { add() {
this.$root.new(Menu, { this.$root.new(Menu, {
source: this.$refs.add, source: this.$refs.add,
compact: true,
items: [{ items: [{
icon: 'home', icon: 'home',
text: this.$t('@deck.home'), text: this.$t('@deck.home'),

3
src/client/app/mobile/views/components/post-form.vue
View file

@ -300,8 +300,7 @@ export default Vue.extend({
setVisibility() { setVisibility() {
const w = this.$root.new(MkVisibilityChooser, { const w = this.$root.new(MkVisibilityChooser, {
source: this.$refs.visibilityButton, source: this.$refs.visibilityButton
compact: true
}); });
w.$once('chosen', v => { w.$once('chosen', v => {
this.applyVisibility(v); this.applyVisibility(v);

1
src/client/app/mobile/views/pages/user.vue
View file

@ -208,7 +208,6 @@ export default Vue.extend({
this.$root.new(Menu, { this.$root.new(Menu, {
source: this.$refs.menu, source: this.$refs.menu,
compact: true,
items: menu items: menu
}); });
}, },