From f11ebafe4769506b2404a7957ca14b62a3257444 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 30 Dec 2018 01:32:58 +0900
Subject: [PATCH] :art:

---
 src/client/app/common/scripts/note-mixin.ts   |  7 +-
 .../app/common/views/components/menu.vue      | 21 +-----
 .../app/common/views/components/note-menu.vue |  4 +-
 .../views/components/reaction-picker.vue      | 72 ++++++-------------
 .../views/components/visibility-chooser.vue   | 44 +++++-------
 .../app/desktop/views/components/timeline.vue |  2 -
 .../desktop/views/pages/deck/deck.column.vue  |  1 -
 .../views/pages/deck/deck.user-column.vue     |  1 -
 .../app/desktop/views/pages/deck/deck.vue     |  1 -
 .../app/mobile/views/components/post-form.vue |  3 +-
 src/client/app/mobile/views/pages/user.vue    |  1 -
 11 files changed, 46 insertions(+), 111 deletions(-)

diff --git a/src/client/app/common/scripts/note-mixin.ts b/src/client/app/common/scripts/note-mixin.ts
index 76059fbb0c..0dc18a763b 100644
--- a/src/client/app/common/scripts/note-mixin.ts
+++ b/src/client/app/common/scripts/note-mixin.ts
@@ -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);
 		},
 
diff --git a/src/client/app/common/views/components/menu.vue b/src/client/app/common/views/components/menu.vue
index fb1b66a925..447e42e42b 100644
--- a/src/client/app/common/views/components/menu.vue
+++ b/src/client/app/common/views/components/menu.vue
@@ -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
diff --git a/src/client/app/common/views/components/note-menu.vue b/src/client/app/common/views/components/note-menu.vue
index df52df26cb..3f2ca50702 100644
--- a/src/client/app/common/views/components/note-menu.vue
+++ b/src/client/app/common/views/components/note-menu.vue
@@ -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], [
diff --git a/src/client/app/common/views/components/reaction-picker.vue b/src/client/app/common/views/components/reaction-picker.vue
index 15ff002917..50835eedc5 100644
--- a/src/client/app/common/views/components/reaction-picker.vue
+++ b/src/client/app/common/views/components/reaction-picker.vue
@@ -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
diff --git a/src/client/app/common/views/components/visibility-chooser.vue b/src/client/app/common/views/components/visibility-chooser.vue
index 66d617befc..dca5abd956 100644
--- a/src/client/app/common/views/components/visibility-chooser.vue
+++ b/src/client/app/common/views/components/visibility-chooser.vue
@@ -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>
diff --git a/src/client/app/desktop/views/components/timeline.vue b/src/client/app/desktop/views/components/timeline.vue
index b3405fa371..f6d272c06f 100644
--- a/src/client/app/desktop/views/components/timeline.vue
+++ b/src/client/app/desktop/views/components/timeline.vue
@@ -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
 			});
 		}
diff --git a/src/client/app/desktop/views/pages/deck/deck.column.vue b/src/client/app/desktop/views/pages/deck/deck.column.vue
index a84dbdcdc1..6678a3c886 100644
--- a/src/client/app/desktop/views/pages/deck/deck.column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.column.vue
@@ -240,7 +240,6 @@ export default Vue.extend({
 		showMenu() {
 			this.$root.new(Menu, {
 				source: this.$refs.menu,
-				compact: false,
 				items: this.getMenu()
 			});
 		},
diff --git a/src/client/app/desktop/views/pages/deck/deck.user-column.vue b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
index f87b828cf0..31e58264c8 100644
--- a/src/client/app/desktop/views/pages/deck/deck.user-column.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.user-column.vue
@@ -336,7 +336,6 @@ export default Vue.extend({
 
 			this.$root.new(Menu, {
 				source: this.$refs.menu,
-				compact: false,
 				items: menu
 			});
 		},
diff --git a/src/client/app/desktop/views/pages/deck/deck.vue b/src/client/app/desktop/views/pages/deck/deck.vue
index 56c6dd0516..30b985e7e4 100644
--- a/src/client/app/desktop/views/pages/deck/deck.vue
+++ b/src/client/app/desktop/views/pages/deck/deck.vue
@@ -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'),
diff --git a/src/client/app/mobile/views/components/post-form.vue b/src/client/app/mobile/views/components/post-form.vue
index 599547858d..26850cabb4 100644
--- a/src/client/app/mobile/views/components/post-form.vue
+++ b/src/client/app/mobile/views/components/post-form.vue
@@ -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);
diff --git a/src/client/app/mobile/views/pages/user.vue b/src/client/app/mobile/views/pages/user.vue
index fdfe4ce52f..f6ab06df69 100644
--- a/src/client/app/mobile/views/pages/user.vue
+++ b/src/client/app/mobile/views/pages/user.vue
@@ -208,7 +208,6 @@ export default Vue.extend({
 
 			this.$root.new(Menu, {
 				source: this.$refs.menu,
-				compact: true,
 				items: menu
 			});
 		},