natty
/
calckey
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

wip

This commit is contained in:
syuilo 2018-06-15 07:56:56 +09:00
parent d90f75425f
commit 0ac9120064
14 changed files with 80 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/client/app/common/views/components/signup.vue
View File

@ -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>

8
src/client/app/common/views/components/ui/button.vue
View File

@ -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';

4
src/client/app/common/views/components/ui/card.vue
View File

@ -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

2
src/client/app/common/views/components/ui/form.vue
View File

@ -11,7 +11,7 @@ import Vue from 'vue';
export default Vue.extend({
props: {
disabled: {
type: String,
type: Boolean,
required: false
}
}

8
src/client/app/common/views/components/ui/input.vue
View File

@ -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

2
src/client/app/common/views/components/ui/radio.vue
View File

@ -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

11
src/client/app/common/views/components/ui/select.vue
View File

@ -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

2
src/client/app/common/views/components/ui/switch.vue
View File

@ -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

4
src/client/app/config.ts
View File

@ -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_;

79
src/client/app/mobile/views/pages/settings.vue
View File

@ -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>
<ui-switch v-model="darkmode">%i18n:@dark-mode%</ui-switch>
<ui-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</ui-switch>
<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>
<ui-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</ui-switch>
<ui-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</ui-switch>
<ui-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</ui-switch>
</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-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</ui-switch>
<ui-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</ui-switch>
<ui-switch v-model="loadRawImages">%i18n:@load-raw-images%</ui-switch>
<ui-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</ui-switch>
<ui-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</ui-switch>
</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)

17
src/client/app/mobile/views/pages/settings/settings.profile.vue
View File

@ -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%');
});
},

6
src/client/app/mobile/views/pages/welcome.vue
View File

@ -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() {

2
src/config/types.ts
View File

@ -15,6 +15,8 @@ export type Source = {
*/
url: string;
};
name?: string;
description?: string;
url: string;
port: number;
https?: { [x: string]: string };

2
webpack.config.ts
View File

@ -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,