diff --git a/src/api/endpoints.ts b/src/api/endpoints.ts index e846381578..ff214c3004 100644 --- a/src/api/endpoints.ts +++ b/src/api/endpoints.ts @@ -194,6 +194,11 @@ const endpoints: Endpoint[] = [ withCredential: true, secure: true }, + { + name: 'i/update_client_setting', + withCredential: true, + secure: true + }, { name: 'i/pin', kind: 'account-write' diff --git a/src/api/endpoints/i/update.ts b/src/api/endpoints/i/update.ts index 7bbbf95900..43c5245044 100644 --- a/src/api/endpoints/i/update.ts +++ b/src/api/endpoints/i/update.ts @@ -46,19 +46,13 @@ module.exports = async (params, user, _, isSecure) => new Promise(async (res, re if (bannerIdErr) return rej('invalid banner_id param'); if (bannerId) user.banner_id = bannerId; - // Get 'show_donation' parameter - const [showDonation, showDonationErr] = $(params.show_donation).optional.boolean().$; - if (showDonationErr) return rej('invalid show_donation param'); - if (showDonation) user.client_settings.show_donation = showDonation; - await User.update(user._id, { $set: { name: user.name, description: user.description, avatar_id: user.avatar_id, banner_id: user.banner_id, - profile: user.profile, - 'client_settings.show_donation': user.client_settings.show_donation + profile: user.profile } }); diff --git a/src/api/endpoints/i/update_client_setting.ts b/src/api/endpoints/i/update_client_setting.ts new file mode 100644 index 0000000000..b817ff354c --- /dev/null +++ b/src/api/endpoints/i/update_client_setting.ts @@ -0,0 +1,43 @@ +/** + * Module dependencies + */ +import $ from 'cafy'; +import User, { pack } from '../../models/user'; +import event from '../../event'; + +/** + * Update myself + * + * @param {any} params + * @param {any} user + * @return {Promise<any>} + */ +module.exports = async (params, user) => new Promise(async (res, rej) => { + // Get 'name' parameter + const [name, nameErr] = $(params.name).string().$; + if (nameErr) return rej('invalid name param'); + + // Get 'value' parameter + const [value, valueErr] = $(params.value).nullable.any().$; + if (valueErr) return rej('invalid value param'); + + const x = {}; + x[`client_settings.${name}`] = value; + + await User.update(user._id, { + $set: x + }); + + // Serialize + user.client_settings[name] = value; + const iObj = await pack(user, user, { + detail: true, + includeSecrets: true + }); + + // Send response + res(iObj); + + // Publish i updated event + event(user._id, 'i_updated', iObj); +}); diff --git a/src/web/app/common/views/components/post-html.ts b/src/web/app/common/views/components/post-html.ts index afd95f8e38..16d670e851 100644 --- a/src/web/app/common/views/components/post-html.ts +++ b/src/web/app/common/views/components/post-html.ts @@ -33,7 +33,11 @@ export default Vue.component('mk-post-html', { .replace(/(\r\n|\n|\r)/g, '\n'); if ((this as any).shouldBreak) { - return text.split('\n').map(t => [createElement('span', t), createElement('br')]); + if (text.indexOf('\n') != -1) { + return text.split('\n').map(t => [createElement('span', t), createElement('br')]); + } else { + return createElement('span', text); + } } else { return createElement('span', text.replace(/\n/g, ' ')); } diff --git a/src/web/app/desktop/views/components/home.vue b/src/web/app/desktop/views/components/home.vue index eabcc485dd..8a61c378ed 100644 --- a/src/web/app/desktop/views/components/home.vue +++ b/src/web/app/desktop/views/components/home.vue @@ -1,7 +1,7 @@ <template> <div class="mk-home" :data-customize="customize"> <div class="customize" v-if="customize"> - <a href="/">%fa:check%完了</a> + <router-link to="/">%fa:check%完了</router-link> <div> <div class="adder"> <p>ウィジェットを追加:</p> @@ -51,7 +51,11 @@ </div> </x-draggable> <div class="main"> - <mk-timeline ref="tl" @loaded="onTlLoaded"/> + <a @click="hint">カスタマイズのヒント</a> + <div> + <mk-post-form v-if="os.i.client_settings.showPostFormOnTopOfTl"/> + <mk-timeline ref="tl" @loaded="onTlLoaded"/> + </div> </div> </template> <template v-else> @@ -59,6 +63,7 @@ <component v-for="widget in widgets[place]" :is="`mkw-${widget.name}`" :key="widget.id" :widget="widget" @chosen="warp"/> </div> <div class="main"> + <mk-post-form v-if="os.i.client_settings.showPostFormOnTopOfTl"/> <mk-timeline ref="tl" @loaded="onTlLoaded" v-if="mode == 'timeline'"/> <mk-mentions @loaded="onTlLoaded" v-if="mode == 'mentions'"/> </div> @@ -126,23 +131,19 @@ export default Vue.extend({ deep: true }); }, - mounted() { - this.$nextTick(() => { - if (this.customize) { - (this as any).apis.dialog({ - title: '%fa:info-circle%カスタマイズのヒント', - text: '<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' + - '<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' + - '<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' + - '<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>', - actions: [{ - text: 'Got it!' - }] - }); - } - }); - }, methods: { + hint() { + (this as any).apis.dialog({ + title: '%fa:info-circle%カスタマイズのヒント', + text: '<p>ホームのカスタマイズでは、ウィジェットを追加/削除したり、ドラッグ&ドロップして並べ替えたりすることができます。</p>' + + '<p>一部のウィジェットは、<strong><strong>右</strong>クリック</strong>することで表示を変更することができます。</p>' + + '<p>ウィジェットを削除するには、ヘッダーの<strong>「ゴミ箱」</strong>と書かれたエリアにウィジェットをドラッグ&ドロップします。</p>' + + '<p>カスタマイズを終了するには、右上の「完了」をクリックします。</p>', + actions: [{ + text: 'Got it!' + }] + }); + }, onTlLoaded() { this.$emit('loaded'); }, @@ -193,10 +194,16 @@ export default Vue.extend({ background-image url('/assets/desktop/grid.svg') > .main > .main - cursor not-allowed !important + > a + display block + margin-bottom 8px + text-align center - > * - pointer-events none + > div + cursor not-allowed !important + + > * + pointer-events none &:not([data-customize]) > .main > *:empty @@ -287,6 +294,11 @@ export default Vue.extend({ width calc(100% - 275px * 2) order 2 + .mk-post-form + margin-bottom 16px + border solid 1px #e5e5e5 + border-radius 4px + > *:not(.main) width 275px padding 16px 0 16px 0 diff --git a/src/web/app/desktop/views/components/settings-window.vue b/src/web/app/desktop/views/components/settings-window.vue index c4e1d6a0af..d5be177dcc 100644 --- a/src/web/app/desktop/views/components/settings-window.vue +++ b/src/web/app/desktop/views/components/settings-window.vue @@ -1,13 +1,19 @@ <template> -<mk-window is-modal width='700px' height='550px' @closed="$destroy"> +<mk-window ref="window" is-modal width="700px" height="550px" @closed="$destroy"> <span slot="header" :class="$style.header">%fa:cog%設定</span> - <mk-settings/> + <mk-settings @done="close"/> </mk-window> </template> <script lang="ts"> import Vue from 'vue'; -export default Vue.extend({}); +export default Vue.extend({ + methods: { + close() { + (this as any).$refs.window.close(); + } + } +}); </script> <style lang="stylus" module> diff --git a/src/web/app/desktop/views/components/settings.vue b/src/web/app/desktop/views/components/settings.vue index 767ec3f962..c210997c38 100644 --- a/src/web/app/desktop/views/components/settings.vue +++ b/src/web/app/desktop/views/components/settings.vue @@ -20,7 +20,13 @@ <section class="web" v-show="page == 'web'"> <h1>デザイン</h1> - <a href="/i/customize-home" class="ui button">ホームをカスタマイズ</a> + <div> + <button class="ui button" @click="customizeHome">ホームをカスタマイズ</button> + </div> + <label> + <input type="checkbox" v-model="showPostFormOnTopOfTl" @change="onChangeShowPostFormOnTopOfTl"> + <span>タイムライン上部に投稿フォームを表示する</span> + </label> </section> <section class="drive" v-show="page == 'drive'"> @@ -89,8 +95,25 @@ export default Vue.extend({ }, data() { return { - page: 'profile' + page: 'profile', + + showPostFormOnTopOfTl: false }; + }, + created() { + this.showPostFormOnTopOfTl = (this as any).os.i.client_settings.showPostFormOnTopOfTl; + }, + methods: { + customizeHome() { + this.$router.push('/i/customize-home'); + this.$emit('done'); + }, + onChangeShowPostFormOnTopOfTl() { + (this as any).api('i/update_client_setting', { + name: 'showPostFormOnTopOfTl', + value: this.showPostFormOnTopOfTl + }); + } } }); </script> @@ -146,4 +169,10 @@ export default Vue.extend({ color #555 border-bottom solid 1px #eee + > .web + > div + border-bottom solid 1px #eee + padding 0 0 16px 0 + margin 0 0 16px 0 + </style>