From 9c0521316deaad6c37b43ac776ef50f976786224 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Wed, 21 Feb 2018 04:52:52 +0900
Subject: [PATCH] wip

---
 package.json                                  |   1 +
 src/web/app/desktop/-tags/crop-window.tag     | 196 ------------------
 .../desktop/views/components/crop-window.vue  | 169 +++++++++++++++
 .../desktop/views/pages/user/user.header.vue  |   6 +-
 4 files changed, 173 insertions(+), 199 deletions(-)
 delete mode 100644 src/web/app/desktop/-tags/crop-window.tag
 create mode 100644 src/web/app/desktop/views/components/crop-window.vue

diff --git a/package.json b/package.json
index 727c4af716..033f76c30a 100644
--- a/package.json
+++ b/package.json
@@ -182,6 +182,7 @@
 		"uuid": "3.2.1",
 		"vhost": "3.0.2",
 		"vue": "^2.5.13",
+		"vue-cropperjs": "^2.2.0",
 		"vue-js-modal": "^1.3.9",
 		"vue-loader": "^14.1.1",
 		"vue-router": "^3.0.1",
diff --git a/src/web/app/desktop/-tags/crop-window.tag b/src/web/app/desktop/-tags/crop-window.tag
deleted file mode 100644
index c26f74b121..0000000000
--- a/src/web/app/desktop/-tags/crop-window.tag
+++ /dev/null
@@ -1,196 +0,0 @@
-<mk-crop-window>
-	<mk-window ref="window" is-modal={ true } width={ '800px' }>
-		<yield to="header">%fa:crop%{ parent.title }</yield>
-		<yield to="content">
-			<div class="body"><img ref="img" src={ parent.image.url + '?thumbnail&quality=80' } alt=""/></div>
-			<div class="action">
-				<button class="skip" @click="parent.skip">クロップをスキップ</button>
-				<button class="cancel" @click="parent.cancel">キャンセル</button>
-				<button class="ok" @click="parent.ok">決定</button>
-			</div>
-		</yield>
-	</mk-window>
-	<style lang="stylus" scoped>
-		:scope
-			display block
-
-			> mk-window
-				[data-yield='header']
-					> [data-fa]
-						margin-right 4px
-
-				[data-yield='content']
-
-					> .body
-						> img
-							width 100%
-							max-height 400px
-
-					.cropper-modal {
-						opacity: 0.8;
-					}
-
-					.cropper-view-box {
-						outline-color: $theme-color;
-					}
-
-					.cropper-line, .cropper-point {
-						background-color: $theme-color;
-					}
-
-					.cropper-bg {
-						animation: cropper-bg 0.5s linear infinite;
-					}
-
-					@-webkit-keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					@-moz-keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					@-ms-keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					@keyframes cropper-bg {
-						0% {
-							background-position: 0 0;
-						}
-
-						100% {
-							background-position: -8px -8px;
-						}
-					}
-
-					> .action
-						height 72px
-						background lighten($theme-color, 95%)
-
-						.ok
-						.cancel
-						.skip
-							display block
-							position absolute
-							bottom 16px
-							cursor pointer
-							padding 0
-							margin 0
-							height 40px
-							font-size 1em
-							outline none
-							border-radius 4px
-
-							&:focus
-								&:after
-									content ""
-									pointer-events none
-									position absolute
-									top -5px
-									right -5px
-									bottom -5px
-									left -5px
-									border 2px solid rgba($theme-color, 0.3)
-									border-radius 8px
-
-							&:disabled
-								opacity 0.7
-								cursor default
-
-						.ok
-						.cancel
-							width 120px
-
-						.ok
-							right 16px
-							color $theme-color-foreground
-							background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
-							border solid 1px lighten($theme-color, 15%)
-
-							&:not(:disabled)
-								font-weight bold
-
-							&:hover:not(:disabled)
-								background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
-								border-color $theme-color
-
-							&:active:not(:disabled)
-								background $theme-color
-								border-color $theme-color
-
-						.cancel
-						.skip
-							color #888
-							background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
-							border solid 1px #e2e2e2
-
-							&:hover
-								background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
-								border-color #dcdcdc
-
-							&:active
-								background #ececec
-								border-color #dcdcdc
-
-						.cancel
-							right 148px
-
-						.skip
-							left 16px
-							width 150px
-
-	</style>
-	<script lang="typescript">
-		const Cropper = require('cropperjs');
-
-		this.image = this.opts.file;
-		this.title = this.opts.title;
-		this.aspectRatio = this.opts.aspectRatio;
-		this.cropper = null;
-
-		this.on('mount', () => {
-			this.img = this.$refs.window.refs.img;
-			this.cropper = new Cropper(this.img, {
-				aspectRatio: this.aspectRatio,
-				highlight: false,
-				viewMode: 1
-			});
-		});
-
-		this.ok = () => {
-			this.cropper.getCroppedCanvas().toBlob(blob => {
-				this.$emit('cropped', blob);
-				this.$refs.window.close();
-			});
-		};
-
-		this.skip = () => {
-			this.$emit('skipped');
-			this.$refs.window.close();
-		};
-
-		this.cancel = () => {
-			this.$emit('canceled');
-			this.$refs.window.close();
-		};
-	</script>
-</mk-crop-window>
diff --git a/src/web/app/desktop/views/components/crop-window.vue b/src/web/app/desktop/views/components/crop-window.vue
new file mode 100644
index 0000000000..2ba62a3a68
--- /dev/null
+++ b/src/web/app/desktop/views/components/crop-window.vue
@@ -0,0 +1,169 @@
+<template>
+	<mk-window ref="window" is-modal width="800px">
+		<span slot="header">%fa:crop%{{ title }}</span>
+		<div class="body">
+			<vue-cropper
+				:src="image.url"
+				:view-mode="1"
+			/>
+		</div>
+		<div :class="$style.actions">
+			<button :class="$style.skip" @click="skip">クロップをスキップ</button>
+			<button :class="$style.cancel" @click="cancel">キャンセル</button>
+			<button :class="$style.ok" @click="ok">決定</button>
+		</div>
+	</mk-window>
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+export default Vue.extend({
+	props: {
+		image: {
+			type: Object,
+			required: true
+		},
+		title: {
+			type: String,
+			required: true
+		},
+		aspectRatio: {
+			type: Number,
+			required: true
+		}
+	},
+	methods: {
+		ok() {
+			(this.$refs.cropper as any).getCroppedCanvas().toBlob(blob => {
+				this.$emit('cropped', blob);
+				(this.$refs.window as any).close();
+			});
+		},
+
+		skip() {
+			this.$emit('skipped');
+			(this.$refs.window as any).close();
+		},
+
+		cancel() {
+			this.$emit('canceled');
+			(this.$refs.window as any).close();
+		}
+	}
+});
+</script>
+
+<style lang="stylus" module>
+.header
+	> [data-fa]
+		margin-right 4px
+
+.img
+	width 100%
+	max-height 400px
+
+.actions
+	height 72px
+	background lighten($theme-color, 95%)
+
+.ok
+.cancel
+.skip
+	display block
+	position absolute
+	bottom 16px
+	cursor pointer
+	padding 0
+	margin 0
+	height 40px
+	font-size 1em
+	outline none
+	border-radius 4px
+
+	&:focus
+		&:after
+			content ""
+			pointer-events none
+			position absolute
+			top -5px
+			right -5px
+			bottom -5px
+			left -5px
+			border 2px solid rgba($theme-color, 0.3)
+			border-radius 8px
+
+	&:disabled
+		opacity 0.7
+		cursor default
+
+.ok
+.cancel
+	width 120px
+
+.ok
+	right 16px
+	color $theme-color-foreground
+	background linear-gradient(to bottom, lighten($theme-color, 25%) 0%, lighten($theme-color, 10%) 100%)
+	border solid 1px lighten($theme-color, 15%)
+
+	&:not(:disabled)
+		font-weight bold
+
+	&:hover:not(:disabled)
+		background linear-gradient(to bottom, lighten($theme-color, 8%) 0%, darken($theme-color, 8%) 100%)
+		border-color $theme-color
+
+	&:active:not(:disabled)
+		background $theme-color
+		border-color $theme-color
+
+.cancel
+.skip
+	color #888
+	background linear-gradient(to bottom, #ffffff 0%, #f5f5f5 100%)
+	border solid 1px #e2e2e2
+
+	&:hover
+		background linear-gradient(to bottom, #f9f9f9 0%, #ececec 100%)
+		border-color #dcdcdc
+
+	&:active
+		background #ececec
+		border-color #dcdcdc
+
+.cancel
+	right 148px
+
+.skip
+	left 16px
+	width 150px
+
+</style>
+
+<style lang="stylus">
+.cropper-modal {
+	opacity: 0.8;
+}
+
+.cropper-view-box {
+	outline-color: $theme-color;
+}
+
+.cropper-line, .cropper-point {
+	background-color: $theme-color;
+}
+
+.cropper-bg {
+	animation: cropper-bg 0.5s linear infinite;
+}
+
+@keyframes cropper-bg {
+	0% {
+		background-position: 0 0;
+	}
+
+	100% {
+		background-position: -8px -8px;
+	}
+}
+</style>
diff --git a/src/web/app/desktop/views/pages/user/user.header.vue b/src/web/app/desktop/views/pages/user/user.header.vue
index 67d110f2f3..6c8375f163 100644
--- a/src/web/app/desktop/views/pages/user/user.header.vue
+++ b/src/web/app/desktop/views/pages/user/user.header.vue
@@ -12,9 +12,9 @@
 			<p class="location" v-if="user.profile.location">%fa:map-marker%{{ user.profile.location }}</p>
 		</div>
 		<footer>
-			<a :href="`/${user.username}`" :data-active="$parent.page == 'home'">%fa:home%概要</a>
-			<a :href="`/${user.username}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</a>
-			<a :href="`/${user.username}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</a>
+			<router-link :to="`/${user.username}`" :data-active="$parent.page == 'home'">%fa:home%概要</router-link>
+			<router-link :to="`/${user.username}/media`" :data-active="$parent.page == 'media'">%fa:image%メディア</router-link>
+			<router-link :to="`/${user.username}/graphs`" :data-active="$parent.page == 'graphs'">%fa:chart-bar%グラフ</router-link>
 		</footer>
 	</div>
 </div>