From 0d6ccd489dce89c2920bc806216b9c2585fe1a88 Mon Sep 17 00:00:00 2001
From: syuilo <syuilotan@yahoo.co.jp>
Date: Sun, 27 May 2018 22:39:20 +0900
Subject: :v:

---
 src/client/app/common/views/widgets/index.ts     |   2 +
 src/client/app/common/views/widgets/memo.vue     | 110 +++++++++++++++++++++++
 src/client/app/desktop/views/components/home.vue |  39 ++++----
 src/client/app/mobile/views/pages/widgets.vue    |  23 ++---
 src/client/app/store.ts                          |   3 +-
 5 files changed, 146 insertions(+), 31 deletions(-)
 create mode 100644 src/client/app/common/views/widgets/memo.vue

(limited to 'src')

diff --git a/src/client/app/common/views/widgets/index.ts b/src/client/app/common/views/widgets/index.ts
index 9107d90ce7..7ef4e02092 100644
--- a/src/client/app/common/views/widgets/index.ts
+++ b/src/client/app/common/views/widgets/index.ts
@@ -3,6 +3,7 @@ import Vue from 'vue';
 import wVersion from './version.vue';
 import wRss from './rss.vue';
 import wServer from './server.vue';
+import wMemo from './memo.vue';
 import wBroadcast from './broadcast.vue';
 import wCalendar from './calendar.vue';
 import wPhotoStream from './photo-stream.vue';
@@ -19,5 +20,6 @@ Vue.component('mkw-tips', wTips);
 Vue.component('mkw-donation', wDonation);
 Vue.component('mkw-broadcast', wBroadcast);
 Vue.component('mkw-server', wServer);
+Vue.component('mkw-memo', wMemo);
 Vue.component('mkw-rss', wRss);
 Vue.component('mkw-version', wVersion);
diff --git a/src/client/app/common/views/widgets/memo.vue b/src/client/app/common/views/widgets/memo.vue
new file mode 100644
index 0000000000..3f599c82a0
--- /dev/null
+++ b/src/client/app/common/views/widgets/memo.vue
@@ -0,0 +1,110 @@
+<template>
+<div class="mkw-memo">
+	<mk-widget-container :show-header="!props.compact">
+		<template slot="header">%fa:R sticky-note%%i18n:@title%</template>
+
+		<div class="mkw-memo--body">
+			<textarea v-model="text" placeholder="%i18n:@memo%" @input="onChange"></textarea>
+			<button @click="saveMemo" :disabled="!changed">%i18n:@save%</button>
+		</div>
+	</mk-widget-container>
+</div>
+</template>
+
+<script lang="ts">
+import define from '../../define-widget';
+
+export default define({
+	name: 'memo',
+	props: () => ({
+		compact: false
+	})
+}).extend({
+	data() {
+		return {
+			text: null,
+			changed: false
+		};
+	},
+
+	created() {
+		this.text = this.$store.state.settings.memo;
+
+		this.$watch('$store.state.settings.memo', text => {
+			this.text = text;
+		});
+	},
+
+	methods: {
+		func() {
+			this.props.compact = !this.props.compact;
+			this.save();
+		},
+
+		onChange() {
+			this.changed = true;
+		},
+
+		saveMemo() {
+			this.$store.dispatch('settings/set', {
+				key: 'memo',
+				value: this.text
+			});
+			this.changed = false;
+		}
+	}
+});
+</script>
+
+<style lang="stylus" scoped>
+@import '~const.styl'
+
+root(isDark)
+	.mkw-memo--body
+		padding-bottom 28px + 16px
+
+		> textarea
+			display block
+			width 100%
+			max-width 100%
+			min-width 100%
+			padding 16px
+			color isDark ? #fff : #222
+			background isDark ? #282c37 : #fff
+			border none
+			border-bottom solid 1px isDark ? #1c2023 : #eee
+
+		> button
+			display block
+			position absolute
+			bottom 8px
+			right 8px
+			margin 0
+			padding 0 10px
+			height 28px
+			color $theme-color-foreground
+			background $theme-color !important
+			outline none
+			border none
+			border-radius 4px
+			transition background 0.1s ease
+			cursor pointer
+
+			&:hover
+				background lighten($theme-color, 10%) !important
+
+			&:active
+				background darken($theme-color, 10%) !important
+				transition background 0s ease
+
+			&:disabled
+				opacity 0.7
+				cursor default
+
+.mkw-memo[data-darkmode]
+	root(true)
+
+.mkw-memo:not([data-darkmode])
+	root(false)
+
+</style>
diff --git a/src/client/app/desktop/views/components/home.vue b/src/client/app/desktop/views/components/home.vue
index 9d34575e55..f51fed7454 100644
--- a/src/client/app/desktop/views/components/home.vue
+++ b/src/client/app/desktop/views/components/home.vue
@@ -6,25 +6,26 @@
 			<div class="adder">
 				<p>%i18n:@add-widget%</p>
 				<select v-model="widgetAdderSelected">
-					<option value="profile">%i18n:@profile%</option>
-					<option value="calendar">%i18n:@calendar%</option>
-					<option value="timemachine">%i18n:@timemachine%</option>
-					<option value="activity">%i18n:@activity%</option>
-					<option value="rss">%i18n:@rss%</option>
-					<option value="trends">%i18n:@trends%</option>
-					<option value="photo-stream">%i18n:@photo-stream%</option>
-					<option value="slideshow">%i18n:@slideshow%</option>
-					<option value="version">%i18n:@version%</option>
-					<option value="broadcast">%i18n:@broadcast%</option>
-					<option value="notifications">%i18n:@notifications%</option>
-					<option value="users">%i18n:@users%</option>
-					<option value="polls">%i18n:@polls%</option>
-					<option value="post-form">%i18n:@post-form%</option>
-					<option value="messaging">%i18n:@messaging%</option>
-					<option value="server">%i18n:@server%</option>
-					<option value="donation">%i18n:@donation%</option>
-					<option value="nav">%i18n:@nav%</option>
-					<option value="tips">%i18n:@tips%</option>
+					<option value="profile">%i18n:common.widgets.profile%</option>
+					<option value="calendar">%i18n:common.widgets.calendar%</option>
+					<option value="timemachine">%i18n:common.widgets.timemachine%</option>
+					<option value="activity">%i18n:common.widgets.activity%</option>
+					<option value="rss">%i18n:common.widgets.rss%</option>
+					<option value="trends">%i18n:common.widgets.trends%</option>
+					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
+					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+					<option value="version">%i18n:common.widgets.version%</option>
+					<option value="broadcast">%i18n:common.widgets.broadcast%</option>
+					<option value="notifications">%i18n:common.widgets.notifications%</option>
+					<option value="users">%i18n:common.widgets.users%</option>
+					<option value="polls">%i18n:common.widgets.polls%</option>
+					<option value="post-form">%i18n:common.widgets.post-form%</option>
+					<option value="messaging">%i18n:common.widgets.messaging%</option>
+					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="server">%i18n:common.widgets.server%</option>
+					<option value="donation">%i18n:common.widgets.donation%</option>
+					<option value="nav">%i18n:common.widgets.nav%</option>
+					<option value="tips">%i18n:common.widgets.tips%</option>
 				</select>
 				<button @click="addWidget">%i18n:@add%</button>
 			</div>
diff --git a/src/client/app/mobile/views/pages/widgets.vue b/src/client/app/mobile/views/pages/widgets.vue
index 03abcabe8f..9d047fa635 100644
--- a/src/client/app/mobile/views/pages/widgets.vue
+++ b/src/client/app/mobile/views/pages/widgets.vue
@@ -8,17 +8,18 @@
 		<template v-if="customizing">
 			<header>
 				<select v-model="widgetAdderSelected">
-					<option value="profile">プロフィール</option>
-					<option value="calendar">カレンダー</option>
-					<option value="activity">アクティビティ</option>
-					<option value="rss">RSSリーダー</option>
-					<option value="photo-stream">フォトストリーム</option>
-					<option value="slideshow">スライドショー</option>
-					<option value="version">バージョン</option>
-					<option value="server">サーバー情報</option>
-					<option value="donation">寄付のお願い</option>
-					<option value="nav">ナビゲーション</option>
-					<option value="tips">ヒント</option>
+					<option value="profile">%i18n:common.widgets.profile%</option>
+					<option value="calendar">%i18n:common.widgets.calendar%</option>
+					<option value="activity">%i18n:common.widgets.activity%</option>
+					<option value="rss">%i18n:common.widgets.rss%</option>
+					<option value="photo-stream">%i18n:common.widgets.photo-stream%</option>
+					<option value="slideshow">%i18n:common.widgets.slideshow%</option>
+					<option value="version">%i18n:common.widgets.version%</option>
+					<option value="server">%i18n:common.widgets.server%</option>
+					<option value="memo">%i18n:common.widgets.memo%</option>
+					<option value="donation">%i18n:common.widgets.donation%</option>
+					<option value="nav">%i18n:common.widgets.nav%</option>
+					<option value="tips">%i18n:common.widgets.tips%</option>
 				</select>
 				<button @click="addWidget">追加</button>
 				<p><a @click="hint">カスタマイズのヒント</a></p>
diff --git a/src/client/app/store.ts b/src/client/app/store.ts
index c27ff0dfcf..905ec0501c 100644
--- a/src/client/app/store.ts
+++ b/src/client/app/store.ts
@@ -16,7 +16,8 @@ const defaultSettings = {
 	showMyRenotes: true,
 	showRenotedMyNotes: true,
 	loadRemoteMedia: true,
-	disableViaMobile: false
+	disableViaMobile: false,
+	memo: null
 };
 
 const defaultDeviceSettings = {
-- 
cgit v1.2.3-freya