wip
This commit is contained in:
syuilo
parent
d90f75425f
commit
0ac9120064
14 changed files with 80 additions and 77 deletions
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off">
|
||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" autocomplete="off" required @input="onChangeUsername">
|
||||
<form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
|
||||
<ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" required @input="onChangeUsername">
|
||||
<span>%i18n:@username%</span>
|
||||
<span slot="prefix">@</span>
|
||||
<span slot="suffix">@{{ host }}</span>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
<p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p>
|
||||
<p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
|
||||
</ui-input>
|
||||
<ui-input v-model="password" type="password" autocomplete="off" required @input="onChangePassword" :with-password-meter="true">
|
||||
<ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true">
|
||||
<span>%i18n:@password%</span>
|
||||
<span slot="prefix">%fa:lock%</span>
|
||||
<div slot="text">
|
||||
|
|
@ -21,7 +21,7 @@
|
|||
<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
|
||||
</div>
|
||||
</ui-input>
|
||||
<ui-input v-model="retypedPassword" type="password" autocomplete="off" required @input="onChangePasswordRetype">
|
||||
<ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
|
||||
<span>%i18n:@password% (%i18n:@retype%)</span>
|
||||
<span slot="prefix">%fa:lock%</span>
|
||||
<div slot="text">
|
||||
|
|
@ -31,7 +31,7 @@
|
|||
</ui-input>
|
||||
<div class="g-recaptcha" :data-sitekey="recaptchaSitekey" style="margin: 16px 0;"></div>
|
||||
<label class="agree-tou" style="display: block; margin: 16px 0;">
|
||||
<input name="agree-tou" type="checkbox" autocomplete="off" required/>
|
||||
<input name="agree-tou" type="checkbox" required/>
|
||||
<p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p>
|
||||
</label>
|
||||
<ui-button type="submit">%i18n:@create%</ui-button>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<template>
|
||||
<div class="ui-button">
|
||||
<button :type="type">
|
||||
<div class="ui-button" :class="[styl]">
|
||||
<button :type="type" @click="$emit('click')">
|
||||
<slot></slot>
|
||||
</button>
|
||||
</div>
|
||||
|
|
@ -20,7 +20,9 @@ export default Vue.extend({
|
|||
styl: 'fill'
|
||||
};
|
||||
},
|
||||
inject: ['isCardChild'],
|
||||
inject: {
|
||||
isCardChild: { default: false }
|
||||
},
|
||||
created() {
|
||||
if (this.isCardChild) {
|
||||
this.styl = 'line';
|
||||
|
|
|
|||
|
|
@ -25,9 +25,13 @@ export default Vue.extend({
|
|||
root(isDark)
|
||||
margin 16px
|
||||
padding 16px
|
||||
color isDark ? #fff : #000
|
||||
background isDark ? #282C37 : #fff
|
||||
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
||||
|
||||
@media (min-width 500px)
|
||||
padding 32px
|
||||
|
||||
> header
|
||||
font-weight normal
|
||||
font-size 24px
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@ import Vue from 'vue';
|
|||
export default Vue.extend({
|
||||
props: {
|
||||
disabled: {
|
||||
type: String,
|
||||
type: Boolean,
|
||||
required: false
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<div class="ui-input" :class="[{ focused, filled }, styl]">
|
||||
<div class="icon" ref="icon"><slot name="icon"></slot></div>
|
||||
<div class="input" @click="focus">
|
||||
<div class="input" @click="focus" @mousedown="focus">
|
||||
<div class="password-meter" v-if="withPasswordMeter" v-show="passwordStrength != ''" :data-strength="passwordStrength">
|
||||
<div class="value" ref="passwordMetar"></div>
|
||||
</div>
|
||||
|
|
@ -62,7 +62,6 @@ export default Vue.extend({
|
|||
required: false
|
||||
},
|
||||
autocomplete: {
|
||||
type: String,
|
||||
required: false
|
||||
},
|
||||
withPasswordMeter: {
|
||||
|
|
@ -113,7 +112,9 @@ export default Vue.extend({
|
|||
}
|
||||
}
|
||||
},
|
||||
inject: ['isCardChild'],
|
||||
inject: {
|
||||
isCardChild: { default: false }
|
||||
},
|
||||
created() {
|
||||
if (this.isCardChild) {
|
||||
this.styl = 'line';
|
||||
|
|
@ -160,6 +161,7 @@ root(isDark, fill)
|
|||
|
||||
> .input
|
||||
display flex
|
||||
cursor text
|
||||
|
||||
if fill
|
||||
padding 6px 12px
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ root(isDark)
|
|||
width 20px
|
||||
height 20px
|
||||
background none
|
||||
border solid 2px rgba(#000, 0.54)
|
||||
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
|
||||
border-radius 100%
|
||||
transition inherit
|
||||
|
||||
|
|
|
|||
|
|
@ -48,7 +48,9 @@ export default Vue.extend({
|
|||
this.v = v;
|
||||
}
|
||||
},
|
||||
inject: ['isCardChild'],
|
||||
inject: {
|
||||
isCardChild: { default: false }
|
||||
},
|
||||
created() {
|
||||
if (this.isCardChild) {
|
||||
this.styl = 'line';
|
||||
|
|
@ -101,7 +103,7 @@ root(isDark, fill)
|
|||
left 0
|
||||
right 0
|
||||
height 1px
|
||||
background rgba(#000, 0.42)
|
||||
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
|
||||
|
||||
&:after
|
||||
content ''
|
||||
|
|
@ -141,14 +143,15 @@ root(isDark, fill)
|
|||
font-weight fill ? bold : normal
|
||||
font-size 16px
|
||||
height 32px
|
||||
color isDark ? #fff : #000
|
||||
background transparent
|
||||
border none
|
||||
border-radius 0
|
||||
outline none
|
||||
box-shadow none
|
||||
|
||||
&[type='file']
|
||||
display none
|
||||
*
|
||||
color #000
|
||||
|
||||
> .prefix
|
||||
> .suffix
|
||||
|
|
|
|||
|
|
@ -92,7 +92,7 @@ root(isDark)
|
|||
margin 3px 0 0 0
|
||||
width 34px
|
||||
height 14px
|
||||
background isDark ? rgba(#fff, 0.1) : rgba(#000, 0.25)
|
||||
background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
|
||||
outline none
|
||||
border-radius 14px
|
||||
transition inherit
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
declare const _HOST_: string;
|
||||
declare const _HOSTNAME_: string;
|
||||
declare const _URL_: string;
|
||||
declare const _NAME_: string;
|
||||
declare const _DESCRIPTION_: string;
|
||||
declare const _API_URL_: string;
|
||||
declare const _WS_URL_: string;
|
||||
declare const _DOCS_URL_: string;
|
||||
|
|
@ -21,6 +23,8 @@ declare const _GOOGLE_MAPS_API_KEY_: string;
|
|||
export const host = _HOST_;
|
||||
export const hostname = _HOSTNAME_;
|
||||
export const url = _URL_;
|
||||
export const name = _NAME_;
|
||||
export const description = _DESCRIPTION_;
|
||||
export const apiUrl = _API_URL_;
|
||||
export const wsUrl = _WS_URL_;
|
||||
export const docsUrl = _DOCS_URL_;
|
||||
|
|
|
|||
|
|
@ -1,41 +1,27 @@
|
|||
<template>
|
||||
<mk-ui>
|
||||
<span slot="header">%fa:cog%%i18n:@settings%</span>
|
||||
<main>
|
||||
<p v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p>
|
||||
<main :data-darkmode="$store.state.device.darkmode">
|
||||
<div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
|
||||
|
||||
<div>
|
||||
<x-profile/>
|
||||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:palette% %i18n:@design%</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="md-body-2">%i18n:@timeline%</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="md-body-2">%i18n:@post-style%</div>
|
||||
|
||||
<ui-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</ui-radio>
|
||||
<ui-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</ui-radio>
|
||||
</div>
|
||||
|
|
@ -43,26 +29,11 @@
|
|||
|
||||
<ui-card>
|
||||
<div slot="title">%fa:cog% %i18n:@behavior%</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
|
||||
</div>
|
||||
</ui-card>
|
||||
|
||||
<ui-card>
|
||||
|
|
@ -98,13 +69,16 @@
|
|||
<template v-if="latestVersion !== undefined">
|
||||
<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
|
||||
</template>
|
||||
<md-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
|
||||
<ui-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate">
|
||||
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
|
||||
<template v-else>%i18n:@check-for-updates%</template>
|
||||
</md-button>
|
||||
</ui-button>
|
||||
</ui-card>
|
||||
</div>
|
||||
<p><small>ver {{ version }} ({{ codename }})</small></p>
|
||||
|
||||
<footer>
|
||||
<small>ver {{ version }} ({{ codename }})</small>
|
||||
</footer>
|
||||
</main>
|
||||
</mk-ui>
|
||||
</template>
|
||||
|
|
@ -249,13 +223,18 @@ root(isDark)
|
|||
max-width 500px
|
||||
width 100%
|
||||
|
||||
> p
|
||||
display block
|
||||
margin 16px 0
|
||||
> .signin-as
|
||||
margin 16px
|
||||
padding 16px
|
||||
text-align center
|
||||
color isDark ? #cad2da : #2c662d
|
||||
background #fcfff5
|
||||
color isDark ? #49ab63 : #2c662d
|
||||
background isDark ? #273c34 : #fcfff5
|
||||
box-shadow 0 3px 1px -2px rgba(#000, 0.2), 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12)
|
||||
|
||||
> footer
|
||||
margin 16px
|
||||
text-align center
|
||||
color isDark ? #c9d2e0 : #888
|
||||
|
||||
main[data-darkmode]
|
||||
root(true)
|
||||
|
|
|
|||
|
|
@ -30,11 +30,13 @@
|
|||
<ui-input type="file" @change="onAvatarChange">
|
||||
<span>%i18n:@avatar%</span>
|
||||
<span slot="icon">%fa:image%</span>
|
||||
<span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
|
||||
</ui-input>
|
||||
|
||||
<ui-input type="file" @change="onBannerChange">
|
||||
<span>%i18n:@banner%</span>
|
||||
<span slot="icon">%fa:image%</span>
|
||||
<span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
|
||||
</ui-input>
|
||||
|
||||
<ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
|
||||
|
|
@ -62,7 +64,8 @@ export default Vue.extend({
|
|||
isBot: false,
|
||||
isCat: false,
|
||||
saving: false,
|
||||
uploading: false
|
||||
avatarUploading: false,
|
||||
bannerUploading: false
|
||||
};
|
||||
},
|
||||
|
||||
|
|
@ -80,7 +83,7 @@ export default Vue.extend({
|
|||
|
||||
methods: {
|
||||
onAvatarChange([file]) {
|
||||
this.uploading = true;
|
||||
this.avatarUploading = true;
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
|
|
@ -93,16 +96,16 @@ export default Vue.extend({
|
|||
.then(response => response.json())
|
||||
.then(f => {
|
||||
this.avatarId = f.id;
|
||||
this.uploading = false;
|
||||
this.avatarUploading = false;
|
||||
})
|
||||
.catch(e => {
|
||||
this.uploading = false;
|
||||
this.avatarUploading = false;
|
||||
alert('%18n:!@upload-failed%');
|
||||
});
|
||||
},
|
||||
|
||||
onBannerChange([file]) {
|
||||
this.uploading = true;
|
||||
this.bannerUploading = true;
|
||||
|
||||
const data = new FormData();
|
||||
data.append('file', file);
|
||||
|
|
@ -115,10 +118,10 @@ export default Vue.extend({
|
|||
.then(response => response.json())
|
||||
.then(f => {
|
||||
this.bannerId = f.id;
|
||||
this.uploading = false;
|
||||
this.bannerUploading = false;
|
||||
})
|
||||
.catch(e => {
|
||||
this.uploading = false;
|
||||
this.bannerUploading = false;
|
||||
alert('%18n:!@upload-failed%');
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -35,7 +35,7 @@
|
|||
|
||||
<script lang="ts">
|
||||
import Vue from 'vue';
|
||||
import { apiUrl, copyright, host } from '../../../config';
|
||||
import { apiUrl, copyright, host, name, description } from '../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
data() {
|
||||
|
|
@ -48,7 +48,9 @@ export default Vue.extend({
|
|||
apiUrl,
|
||||
copyright,
|
||||
users: [],
|
||||
host
|
||||
host,
|
||||
name,
|
||||
description
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
|
|
|
|||
|
|
@ -15,6 +15,8 @@ export type Source = {
|
|||
*/
|
||||
url: string;
|
||||
};
|
||||
name?: string;
|
||||
description?: string;
|
||||
url: string;
|
||||
port: number;
|
||||
https?: { [x: string]: string };
|
||||
|
|
|
|||
|
|
@ -79,6 +79,8 @@ const consts = {
|
|||
_DEV_URL_: config.dev_url,
|
||||
_LANG_: '%lang%',
|
||||
_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
|
||||
_NAME_: config.name,
|
||||
_DESCRIPTION_: config.description,
|
||||
_HOST_: config.host,
|
||||
_HOSTNAME_: config.hostname,
|
||||
_URL_: config.url,
|
||||
|
|
|
|||
Loading…
Reference in a new issue