Merge pull request #1713 from syuilo/without-vue-material

Without vue material
This commit is contained in:
syuilo 2018-06-15 07:58:58 +09:00 committed by GitHub
commit 39b1978ff3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
23 changed files with 1383 additions and 519 deletions

View file

@ -211,7 +211,6 @@
"vue-js-modal": "1.3.13", "vue-js-modal": "1.3.13",
"vue-json-tree-view": "2.1.4", "vue-json-tree-view": "2.1.4",
"vue-loader": "15.2.1", "vue-loader": "15.2.1",
"vue-material": "^1.0.0-beta-10.2",
"vue-router": "3.0.1", "vue-router": "3.0.1",
"vue-template-compiler": "2.5.16", "vue-template-compiler": "2.5.16",
"vuedraggable": "2.16.0", "vuedraggable": "2.16.0",

View file

@ -7,11 +7,6 @@ html
cursor progress !important cursor progress !important
body body
// for md
font-size 16px !important
line-height initial !important
letter-spacing initial !important
overflow-wrap break-word overflow-wrap break-word
#error #error

View file

@ -29,6 +29,14 @@ import fileTypeIcon from './file-type-icon.vue';
import Switch from './switch.vue'; import Switch from './switch.vue';
import Othello from './othello.vue'; import Othello from './othello.vue';
import welcomeTimeline from './welcome-timeline.vue'; import welcomeTimeline from './welcome-timeline.vue';
import uiInput from './ui/input.vue';
import uiButton from './ui/button.vue';
import uiCard from './ui/card.vue';
import uiForm from './ui/form.vue';
import uiTextarea from './ui/textarea.vue';
import uiSwitch from './ui/switch.vue';
import uiRadio from './ui/radio.vue';
import uiSelect from './ui/select.vue';
Vue.component('mk-analog-clock', analogClock); Vue.component('mk-analog-clock', analogClock);
Vue.component('mk-menu', menu); Vue.component('mk-menu', menu);
@ -59,3 +67,11 @@ Vue.component('mk-file-type-icon', fileTypeIcon);
Vue.component('mk-switch', Switch); Vue.component('mk-switch', Switch);
Vue.component('mk-othello', Othello); Vue.component('mk-othello', Othello);
Vue.component('mk-welcome-timeline', welcomeTimeline); Vue.component('mk-welcome-timeline', welcomeTimeline);
Vue.component('ui-input', uiInput);
Vue.component('ui-button', uiButton);
Vue.component('ui-card', uiCard);
Vue.component('ui-form', uiForm);
Vue.component('ui-textarea', uiTextarea);
Vue.component('ui-switch', uiSwitch);
Vue.component('ui-radio', uiRadio);
Vue.component('ui-select', uiSelect);

View file

@ -1,60 +1,58 @@
<template> <template>
<form class="mk-signup" @submit.prevent="onSubmit" autocomplete="off"> <form class="mk-signup" @submit.prevent="onSubmit" :autocomplete="Math.random()">
<label class="username"> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" :autocomplete="Math.random()" required @input="onChangeUsername">
<p class="caption">%fa:at%%i18n:@username%</p> <span>%i18n:@username%</span>
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]{1,20}$" placeholder="a~z、A~Z、0~9、-" autocomplete="off" required @input="onChangeUsername"/> <span slot="prefix">@</span>
<p class="profile-page-url-preview" v-if="shouldShowProfileUrl">{{ `${url}/@${username}` }}</p> <span slot="suffix">@{{ host }}</span>
<p class="info" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw%%i18n:@checking%</p> <p slot="text" v-if="usernameState == 'wait'" style="color:#999">%fa:spinner .pulse .fw% %i18n:@checking%</p>
<p class="info" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw%%i18n:@available%</p> <p slot="text" v-if="usernameState == 'ok'" style="color:#3CB7B5">%fa:check .fw% %i18n:@available%</p>
<p class="info" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@unavailable%</p> <p slot="text" v-if="usernameState == 'unavailable'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@unavailable%</p>
<p class="info" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@error%</p> <p slot="text" v-if="usernameState == 'error'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@error%</p>
<p class="info" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@invalid-format%</p> <p slot="text" v-if="usernameState == 'invalid-format'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@invalid-format%</p>
<p class="info" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-short%</p> <p slot="text" v-if="usernameState == 'min-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-short%</p>
<p class="info" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@too-long%</p> <p slot="text" v-if="usernameState == 'max-range'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@too-long%</p>
</label> </ui-input>
<label class="password"> <ui-input v-model="password" type="password" :autocomplete="Math.random()" required @input="onChangePassword" :with-password-meter="true">
<p class="caption">%fa:lock%%i18n:@password%</p> <span>%i18n:@password%</span>
<input v-model="password" type="password" placeholder="%i18n:@password-placeholder%" autocomplete="off" required @input="onChangePassword"/> <span slot="prefix">%fa:lock%</span>
<div class="meter" v-show="passwordStrength != ''" :data-strength="passwordStrength"> <div slot="text">
<div class="value" ref="passwordMetar"></div> <p slot="text" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@weak-password%</p>
<p slot="text" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw% %i18n:@normal-password%</p>
<p slot="text" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw% %i18n:@strong-password%</p>
</div> </div>
<p class="info" v-if="passwordStrength == 'low'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@weak-password%</p> </ui-input>
<p class="info" v-if="passwordStrength == 'medium'" style="color:#3CB7B5">%fa:check .fw%%i18n:@normal-password%</p> <ui-input v-model="retypedPassword" type="password" :autocomplete="Math.random()" required @input="onChangePasswordRetype">
<p class="info" v-if="passwordStrength == 'high'" style="color:#3CB7B5">%fa:check .fw%%i18n:@strong-password%</p> <span>%i18n:@password% (%i18n:@retype%)</span>
</label> <span slot="prefix">%fa:lock%</span>
<label class="retype-password"> <div slot="text">
<p class="caption">%fa:lock%%i18n:@password%(%i18n:@retype%)</p> <p slot="text" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw% %i18n:@password-matched%</p>
<input v-model="retypedPassword" type="password" placeholder="%i18n:@retype-placeholder%" autocomplete="off" required @input="onChangePasswordRetype"/> <p slot="text" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw% %i18n:@password-not-matched%</p>
<p class="info" v-if="passwordRetypeState == 'match'" style="color:#3CB7B5">%fa:check .fw%%i18n:@password-matched%</p> </div>
<p class="info" v-if="passwordRetypeState == 'not-match'" style="color:#FF1161">%fa:exclamation-triangle .fw%%i18n:@password-not-matched%</p> </ui-input>
</label> <div class="g-recaptcha" :data-sitekey="recaptchaSitekey" style="margin: 16px 0;"></div>
<label class="recaptcha"> <label class="agree-tou" style="display: block; margin: 16px 0;">
<p class="caption"><template v-if="recaptchaed">%fa:toggle-on%</template><template v-if="!recaptchaed">%fa:toggle-off%</template>%i18n:@recaptcha%</p> <input name="agree-tou" type="checkbox" required/>
<div class="g-recaptcha" data-callback="onRecaptchaed" data-expired-callback="onRecaptchaExpired" :data-sitekey="recaptchaSitekey"></div>
</label>
<label class="agree-tou">
<input name="agree-tou" type="checkbox" autocomplete="off" required/>
<p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p> <p><a :href="touUrl" target="_blank">利用規約</a>に同意する</p>
</label> </label>
<button type="submit">%i18n:@create%</button> <ui-button type="submit">%i18n:@create%</ui-button>
</form> </form>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
const getPasswordStrength = require('syuilo-password-strength'); const getPasswordStrength = require('syuilo-password-strength');
import { url, docsUrl, lang, recaptchaSitekey } from '../../../config'; import { host, url, docsUrl, lang, recaptchaSitekey } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
host,
username: '', username: '',
password: '', password: '',
retypedPassword: '', retypedPassword: '',
url, url,
touUrl: `${docsUrl}/${lang}/tou`, touUrl: `${docsUrl}/${lang}/tou`,
recaptchaSitekey, recaptchaSitekey,
recaptchaed: false,
usernameState: null, usernameState: null,
passwordStrength: '', passwordStrength: '',
passwordRetypeState: null passwordRetypeState: null
@ -104,7 +102,6 @@ export default Vue.extend({
const strength = getPasswordStrength(this.password); const strength = getPasswordStrength(this.password);
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low'; this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
}, },
onChangePasswordRetype() { onChangePasswordRetype() {
if (this.retypedPassword == '') { if (this.retypedPassword == '') {
@ -130,19 +127,9 @@ export default Vue.extend({
alert('%i18n:@some-error%'); alert('%i18n:@some-error%');
(window as any).grecaptcha.reset(); (window as any).grecaptcha.reset();
this.recaptchaed = false;
}); });
} }
}, },
created() {
(window as any).onRecaptchaed = () => {
this.recaptchaed = true;
};
(window as any).onRecaptchaExpired = () => {
this.recaptchaed = false;
};
},
mounted() { mounted() {
const head = document.getElementsByTagName('head')[0]; const head = document.getElementsByTagName('head')[0];
const script = document.createElement('script'); const script = document.createElement('script');
@ -158,100 +145,6 @@ export default Vue.extend({
.mk-signup .mk-signup
min-width 302px min-width 302px
label
display block
margin 0 0 16px 0
> .caption
margin 0 0 4px 0
color #828888
font-size 0.95em
> [data-fa]
margin-right 0.25em
color #96adac
> .info
display block
margin 4px 0
font-size 0.8em
> [data-fa]
margin-right 0.3em
&.username
.profile-page-url-preview
display block
margin 4px 8px 0 4px
font-size 0.8em
color #888
&:empty
display none
&:not(:empty) + .info
margin-top 0
&.password
.meter
display block
margin-top 8px
width 100%
height 8px
&[data-strength='']
display none
&[data-strength='low']
> .value
background #d73612
&[data-strength='medium']
> .value
background #d7ca12
&[data-strength='high']
> .value
background #61bb22
> .value
display block
width 0%
height 100%
background transparent
border-radius 4px
transition all 0.1s ease
[type=text], [type=password]
user-select text
display inline-block
cursor auto
padding 0 12px
margin 0
width 100%
line-height 44px
font-size 1em
color #333 !important
background #fff !important
outline none
border solid 1px rgba(#000, 0.1)
border-radius 4px
box-shadow 0 0 0 114514px #fff inset
transition all .3s ease
&:hover
border-color rgba(#000, 0.2)
transition all .1s ease
&:focus
color $theme-color !important
border-color $theme-color
box-shadow 0 0 0 1024px #fff inset, 0 0 0 4px rgba($theme-color, 10%)
transition all 0s ease
&:disabled
opacity 0.5
.agree-tou .agree-tou
padding 4px padding 4px
border-radius 4px border-radius 4px
@ -269,19 +162,4 @@ export default Vue.extend({
display inline display inline
color #555 color #555
button
margin 0
padding 16px
width 100%
font-size 1em
color #fff
background $theme-color
border-radius 3px
&:hover
background lighten($theme-color, 5%)
&:active
background darken($theme-color, 5%)
</style> </style>

View file

@ -0,0 +1,82 @@
<template>
<div class="ui-button" :class="[styl]">
<button :type="type" @click="$emit('click')">
<slot></slot>
</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
type: {
type: String,
required: false
}
},
data() {
return {
styl: 'fill'
};
},
inject: {
isCardChild: { default: false }
},
created() {
if (this.isCardChild) {
this.styl = 'line';
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
> button
display block
width 100%
margin 0
padding 0
font-weight bold
font-size 16px
line-height 44px
border none
border-radius 6px
outline none
box-shadow none
if fill
color $theme-color-foreground
background $theme-color
&:hover
background lighten($theme-color, 5%)
&:active
background darken($theme-color, 5%)
else
color $theme-color
background none
&:hover
color darken($theme-color, 5%)
&:active
background rgba($theme-color, 0.3)
.ui-button[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-button:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style>

View file

@ -0,0 +1,46 @@
<template>
<div class="ui-card">
<header>
<slot name="title"></slot>
</header>
<slot></slot>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
provide() {
return {
isCardChild: true
};
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
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
color isDark ? #fff : #444
.ui-card[data-darkmode]
root(true)
.ui-card:not([data-darkmode])
root(false)
</style>

View file

@ -0,0 +1,30 @@
<template>
<div class="ui-form">
<fieldset :disabled="disabled">
<slot></slot>
</fieldset>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
disabled: {
type: Boolean,
required: false
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
.ui-form
> fieldset
margin 0
padding 0
border none
</style>

View file

@ -0,0 +1,321 @@
<template>
<div class="ui-input" :class="[{ focused, filled }, styl]">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<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>
<span class="label" ref="label"><slot></slot></span>
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<template v-if="type != 'file'">
<input ref="input"
:type="type"
:value="v"
:required="required"
:readonly="readonly"
:pattern="pattern"
:autocomplete="autocomplete"
@input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false">
</template>
<template v-else>
<input ref="input"
type="text"
:value="placeholder"
readonly
@click="chooseFile">
<input ref="file"
type="file"
:value="value"
@change="onChangeFile">
</template>
<div class="suffix"><slot name="suffix"></slot></div>
</div>
<div class="text"><slot name="text"></slot></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
const getPasswordStrength = require('syuilo-password-strength');
export default Vue.extend({
props: {
value: {
required: false
},
type: {
type: String,
required: false
},
required: {
type: Boolean,
required: false
},
readonly: {
type: Boolean,
required: false
},
pattern: {
type: String,
required: false
},
autocomplete: {
required: false
},
withPasswordMeter: {
type: Boolean,
required: false,
default: false
}
},
data() {
return {
v: this.value,
focused: false,
passwordStrength: '',
styl: 'fill'
};
},
computed: {
filled(): boolean {
return this.v != '' && this.v != null;
},
placeholder(): string {
if (this.type != 'file') return null;
if (this.v == null) return null;
if (typeof this.v == 'string') return this.v;
if (Array.isArray(this.v)) {
return this.v.map(file => file.name).join(', ');
} else {
return this.v.name;
}
}
},
watch: {
value(v) {
this.v = v;
},
v(v) {
if (this.withPasswordMeter) {
if (v == '') {
this.passwordStrength = '';
return;
}
const strength = getPasswordStrength(v);
this.passwordStrength = strength > 0.7 ? 'high' : strength > 0.3 ? 'medium' : 'low';
(this.$refs.passwordMetar as any).style.width = `${strength * 100}%`;
}
}
},
inject: {
isCardChild: { default: false }
},
created() {
if (this.isCardChild) {
this.styl = 'line';
}
},
mounted() {
if (this.$refs.prefix) {
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
}
},
methods: {
focus() {
this.$refs.input.focus();
},
chooseFile() {
this.$refs.file.click();
},
onChangeFile() {
this.v = Array.from((this.$refs.file as any).files);
this.$emit('input', this.v);
this.$emit('change', this.v);
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
> .icon
position absolute
top 0
left 0
width 24px
text-align center
line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
&:not(:empty) + .input
margin-left 28px
> .input
display flex
cursor text
if fill
padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
else
&:before
content ''
display block
position absolute
bottom 0
left 0
right 0
height 1px
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
&:after
content ''
display block
position absolute
bottom 0
left 0
right 0
height 2px
background $theme-color
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
will-change border opacity transform
> .password-meter
position absolute
top 0
left 0
width 100%
height 100%
border-radius 6px
overflow hidden
opacity 0.3
&[data-strength='']
display none
&[data-strength='low']
> .value
background #d73612
&[data-strength='medium']
> .value
background #d7ca12
&[data-strength='high']
> .value
background #61bb22
> .value
display block
width 0%
height 100%
background transparent
border-radius 6px
transition all 0.1s ease
> .label
position absolute
top fill ? 6px : 0
left 0
pointer-events none
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
transition-duration 0.3s
font-size 16px
line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
//will-change transform
transform-origin top left
transform scale(1)
> input
display block
flex 1
width 100%
padding 0
font inherit
font-weight fill ? bold : normal
font-size 16px
line-height 32px
color isDark ? #fff : #000
background transparent
border none
border-radius 0
outline none
box-shadow none
&[type='file']
display none
> .prefix
> .suffix
display block
align-self center
justify-self center
font-size 16px
line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
> *
display block
min-width 16px
> .prefix
padding-right 4px
> .suffix
padding-left 4px
> .text
margin 6px 0
font-size 13px
*
margin 0
&.focused
> .input
if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
transform scaleX(1)
> .label
color $theme-color
&.focused
&.filled
> .input
> .label
top fill ? -24px : -17px
left 0 !important
transform scale(0.75)
.ui-input[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-input:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style>

View file

@ -0,0 +1,120 @@
<template>
<div
class="ui-radio"
:class="{ disabled, checked }"
:aria-checked="checked"
:aria-disabled="disabled"
@click="toggle"
>
<input type="radio"
:disabled="disabled"
>
<span class="button">
<span></span>
</span>
<span class="label"><slot></slot></span>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
model: {
prop: 'model',
event: 'change'
},
props: {
model: {
type: String,
required: false
},
value: {
type: String,
required: false
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
checked(): boolean {
return this.model === this.value;
}
},
methods: {
toggle() {
this.$emit('change', this.value);
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display inline-block
margin 32px 32px 32px 0
cursor pointer
transition all 0.3s
> *
user-select none
&.disabled
opacity 0.6
cursor not-allowed
&.checked
> .button
border-color $theme-color
&:after
background-color $theme-color
transform scale(1)
opacity 1
> input
position absolute
width 0
height 0
opacity 0
margin 0
> .button
position absolute
width 20px
height 20px
background none
border solid 2px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
border-radius 100%
transition inherit
&:after
content ''
display block
position absolute
top 3px
right 3px
bottom 3px
left 3px
border-radius 100%
opacity 0
transform scale(0)
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
> .label
margin-left 28px
display block
font-size 16px
line-height 20px
cursor pointer
.ui-radio[data-darkmode]
root(true)
.ui-radio:not([data-darkmode])
root(false)
</style>

View file

@ -0,0 +1,215 @@
<template>
<div class="ui-select" :class="[{ focused, filled }, styl]">
<div class="icon" ref="icon"><slot name="icon"></slot></div>
<div class="input" @click="focus">
<span class="label" ref="label"><slot name="label"></slot></span>
<div class="prefix" ref="prefix"><slot name="prefix"></slot></div>
<select ref="input"
:value="v"
:required="required"
@input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false">
<slot></slot>
</select>
<div class="suffix"><slot name="suffix"></slot></div>
</div>
<div class="text"><slot name="text"></slot></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
props: {
value: {
required: false
},
required: {
type: Boolean,
required: false
}
},
data() {
return {
v: this.value,
focused: false,
styl: 'fill'
};
},
computed: {
filled(): boolean {
return this.v != '' && this.v != null;
}
},
watch: {
value(v) {
this.v = v;
}
},
inject: {
isCardChild: { default: false }
},
created() {
if (this.isCardChild) {
this.styl = 'line';
}
},
mounted() {
if (this.$refs.prefix) {
this.$refs.label.style.left = (this.$refs.prefix.offsetLeft + this.$refs.prefix.offsetWidth) + 'px';
}
},
methods: {
focus() {
this.$refs.input.focus();
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
> .icon
position absolute
top 0
left 0
width 24px
text-align center
line-height 32px
color rgba(#000, 0.54)
&:not(:empty) + .input
margin-left 28px
> .input
display flex
if fill
padding 6px 12px
background rgba(#000, 0.035)
border-radius 6px
else
&:before
content ''
display block
position absolute
bottom 0
left 0
right 0
height 1px
background isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
&:after
content ''
display block
position absolute
bottom 0
left 0
right 0
height 2px
background $theme-color
opacity 0
transform scaleX(0.12)
transition border 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1), transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)
will-change border opacity transform
> .label
position absolute
top fill ? 6px : 0
left 0
pointer-events none
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
transition-duration 0.3s
font-size 16px
line-height 32px
color rgba(#000, 0.54)
pointer-events none
//will-change transform
transform-origin top left
transform scale(1)
> select
display block
flex 1
width 100%
padding 0
font inherit
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
*
color #000
> .prefix
> .suffix
display block
align-self center
justify-self center
font-size 16px
line-height 32px
color rgba(#000, 0.54)
pointer-events none
> *
display block
min-width 16px
> .prefix
padding-right 4px
> .suffix
padding-left 4px
> .text
margin 6px 0
font-size 13px
*
margin 0
&.focused
> .input
if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
transform scaleX(1)
> .label
color $theme-color
&.focused
&.filled
> .input
> .label
top fill ? -24px : -17px
left 0 !important
transform scale(0.75)
.ui-select[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-select:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style>

View file

@ -0,0 +1,135 @@
<template>
<div
class="ui-switch"
:class="{ disabled, checked }"
role="switch"
:aria-checked="checked"
:aria-disabled="disabled"
@click="toggle"
>
<input
type="checkbox"
ref="input"
:disabled="disabled"
@keydown.enter="toggle"
>
<span class="button">
<span></span>
</span>
<span class="label">
<span :aria-hidden="!checked"><slot></slot></span>
<p :aria-hidden="!checked">
<slot name="text"></slot>
</p>
</span>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
export default Vue.extend({
model: {
prop: 'value',
event: 'change'
},
props: {
value: {
type: Boolean,
default: false
},
disabled: {
type: Boolean,
default: false
}
},
computed: {
checked(): boolean {
return this.value;
}
},
methods: {
toggle() {
this.$emit('change', !this.checked);
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark)
display flex
margin 32px 0
cursor pointer
transition all 0.3s
> *
user-select none
&.disabled
opacity 0.6
cursor not-allowed
&.checked
> .button
background-color rgba($theme-color, 0.4)
border-color rgba($theme-color, 0.4)
> *
background-color $theme-color
transform translateX(14px)
> input
position absolute
width 0
height 0
opacity 0
margin 0
> .button
display inline-block
margin 3px 0 0 0
width 34px
height 14px
background isDark ? rgba(#fff, 0.15) : rgba(#000, 0.25)
outline none
border-radius 14px
transition inherit
> *
position absolute
top -3px
left 0
border-radius 100%
transition background-color 0.3s, transform 0.3s
width 20px
height 20px
background-color #fff
box-shadow 0 2px 1px -1px rgba(#000, 0.2), 0 1px 1px 0 rgba(#000, 0.14), 0 1px 3px 0 rgba(#000, 0.12)
> .label
margin-left 8px
display block
font-size 16px
cursor pointer
transition inherit
> span
display block
line-height 20px
color isDark ? #c4ccd2 : rgba(#000, 0.75)
transition inherit
> p
margin 0
//font-size 90%
color isDark ? #78858e : #9daab3
.ui-switch[data-darkmode]
root(true)
.ui-switch:not([data-darkmode])
root(false)
</style>

View file

@ -0,0 +1,174 @@
<template>
<div class="ui-textarea" :class="{ focused, filled }">
<div class="input">
<span class="label" ref="label"><slot></slot></span>
<textarea ref="input"
:value="value"
:required="required"
:readonly="readonly"
:pattern="pattern"
:autocomplete="autocomplete"
@input="$emit('input', $event.target.value)"
@focus="focused = true"
@blur="focused = false">
</textarea>
</div>
<div class="text"><slot name="text"></slot></div>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
const getPasswordStrength = require('syuilo-password-strength');
export default Vue.extend({
props: {
value: {
required: false
},
required: {
type: Boolean,
required: false
},
readonly: {
type: Boolean,
required: false
},
pattern: {
type: String,
required: false
},
autocomplete: {
type: String,
required: false
}
},
data() {
return {
focused: false,
passwordStrength: ''
}
},
computed: {
filled(): boolean {
return this.value != '' && this.value != null;
}
},
methods: {
focus() {
this.$refs.input.focus();
}
}
});
</script>
<style lang="stylus" scoped>
@import '~const.styl'
root(isDark, fill)
margin 32px 0
> .input
padding 12px
if fill
background rgba(#000, 0.035)
border-radius 6px
else
&:before
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
border solid 1px isDark ? rgba(#fff, 0.7) : rgba(#000, 0.42)
border-radius 3px
pointer-events none
&:after
content ''
display block
position absolute
top 0
bottom 0
left 0
right 0
background none
border solid 2px $theme-color
border-radius 3px
opacity 0
transition opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1)
pointer-events none
> .label
position absolute
top 6px
left 12px
pointer-events none
transition 0.4s cubic-bezier(0.25, 0.8, 0.25, 1)
transition-duration 0.3s
font-size 16px
line-height 32px
color isDark ? rgba(#fff, 0.7) : rgba(#000, 0.54)
pointer-events none
//will-change transform
transform-origin top left
transform scale(1)
> textarea
display block
width 100%
min-height 100px
padding 0
font inherit
font-weight fill ? bold : normal
font-size 16px
color isDark ? #fff : #000
background transparent
border none
border-radius 0
outline none
box-shadow none
> .text
margin 6px 0
font-size 13px
*
margin 0
&.focused
> .input
if fill
background rgba(#000, 0.05)
else
&:after
opacity 1
> .label
color $theme-color
&.focused
&.filled
> .input
> .label
top -24px
left 0 !important
transform scale(0.75)
.ui-textarea[data-darkmode]
&.fill
root(true, true)
&:not(.fill)
root(true, false)
.ui-textarea:not([data-darkmode])
&.fill
root(false, true)
&:not(.fill)
root(false, false)
</style>

View file

@ -1,6 +1,8 @@
declare const _HOST_: string; declare const _HOST_: string;
declare const _HOSTNAME_: string; declare const _HOSTNAME_: string;
declare const _URL_: string; declare const _URL_: string;
declare const _NAME_: string;
declare const _DESCRIPTION_: string;
declare const _API_URL_: string; declare const _API_URL_: string;
declare const _WS_URL_: string; declare const _WS_URL_: string;
declare const _DOCS_URL_: string; declare const _DOCS_URL_: string;
@ -21,6 +23,8 @@ declare const _GOOGLE_MAPS_API_KEY_: string;
export const host = _HOST_; export const host = _HOST_;
export const hostname = _HOSTNAME_; export const hostname = _HOSTNAME_;
export const url = _URL_; export const url = _URL_;
export const name = _NAME_;
export const description = _DESCRIPTION_;
export const apiUrl = _API_URL_; export const apiUrl = _API_URL_;
export const wsUrl = _WS_URL_; export const wsUrl = _WS_URL_;
export const docsUrl = _DOCS_URL_; export const docsUrl = _DOCS_URL_;

View file

@ -2,17 +2,11 @@
* Mobile Client * Mobile Client
*/ */
import Vue from 'vue';
import VueRouter from 'vue-router'; import VueRouter from 'vue-router';
import { MdCard, MdButton, MdField, MdMenu, MdList, MdSwitch, MdSubheader, MdDialog, MdDialogAlert, MdRadio } from 'vue-material/dist/components';
import 'vue-material/dist/vue-material.min.css';
import 'vue-material/dist/theme/default.css';
// Style // Style
import './style.styl'; import './style.styl';
import '../../element.scss'; import '../../element.scss';
import '../../md.scss';
import init from '../init'; import init from '../init';
@ -44,17 +38,6 @@ import MkSettings from './views/pages/settings.vue';
import MkOthello from './views/pages/othello.vue'; import MkOthello from './views/pages/othello.vue';
import MkTag from './views/pages/tag.vue'; import MkTag from './views/pages/tag.vue';
Vue.use(MdCard);
Vue.use(MdButton);
Vue.use(MdField);
Vue.use(MdMenu);
Vue.use(MdList);
Vue.use(MdSwitch);
Vue.use(MdSubheader);
Vue.use(MdDialog);
Vue.use(MdDialogAlert);
Vue.use(MdRadio);
/** /**
* init * init
*/ */

View file

@ -10,9 +10,6 @@ html
height 100% height 100%
background #ececed !important background #ececed !important
// for md
transition none !important
&[data-darkmode] &[data-darkmode]
background #191B22 !important background #191B22 !important

View file

@ -1,132 +1,84 @@
<template> <template>
<mk-ui> <mk-ui>
<span slot="header">%fa:cog%%i18n:@settings%</span> <span slot="header">%fa:cog%%i18n:@settings%</span>
<main> <main :data-darkmode="$store.state.device.darkmode">
<p v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></p> <div class="signin-as" v-html="'%i18n:@signed-in-as%'.replace('{}', '<b>' + name + '</b>')"></div>
<div> <div>
<x-profile/> <x-profile/>
<md-card> <ui-card>
<md-card-header> <div slot="title">%fa:palette% %i18n:@design%</div>
<div class="md-title">%fa:palette% %i18n:@design%</div>
</md-card-header> <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>
<md-card-content>
<div> <div>
<md-switch v-model="darkmode">%i18n:@dark-mode%</md-switch> <div>%i18n:@timeline%</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> <div>
<md-switch v-model="$store.state.settings.circleIcons" @change="onChangeCircleIcons">%i18n:@circle-icons%</md-switch> <div>%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> </div>
</ui-card>
<div> <ui-card>
<div class="md-body-2">%i18n:@timeline%</div> <div slot="title">%fa:cog% %i18n:@behavior%</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>
<div> <ui-card>
<md-switch v-model="$store.state.settings.showReplyTarget" @change="onChangeShowReplyTarget">%i18n:@show-reply-target%</md-switch> <div slot="title">%fa:language% %i18n:@lang%</div>
</div>
<div> <ui-select v-model="lang" placeholder="%i18n:@auto%">
<md-switch v-model="$store.state.settings.showMyRenotes" @change="onChangeShowMyRenotes">%i18n:@show-my-renotes%</md-switch> <optgroup label="%i18n:@recommended%">
</div> <option value="">%i18n:@auto%</option>
</optgroup>
<div> <optgroup label="%i18n:@specify-language%">
<md-switch v-model="$store.state.settings.showRenotedMyNotes" @change="onChangeShowRenotedMyNotes">%i18n:@show-renoted-my-notes%</md-switch> <option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</option>
</div> </optgroup>
</div> </ui-select>
<span>%fa:info-circle% %i18n:@lang-tip%</span>
</ui-card>
<div> <ui-card>
<div class="md-body-2">%i18n:@post-style%</div> <div slot="title">%fa:B twitter% %i18n:@twitter%</div>
<md-radio v-model="postStyle" value="standard">%i18n:@post-style-standard%</md-radio>
<md-radio v-model="postStyle" value="smart">%i18n:@post-style-smart%</md-radio>
</div>
</md-card-content>
</md-card>
<md-card>
<md-card-header>
<div class="md-title">%fa:cog% %i18n:@behavior%</div>
</md-card-header>
<md-card-content>
<div>
<md-switch v-model="$store.state.settings.fetchOnScroll" @change="onChangeFetchOnScroll">%i18n:@fetch-on-scroll%</md-switch>
</div>
<div>
<md-switch v-model="$store.state.settings.disableViaMobile" @change="onChangeDisableViaMobile">%i18n:@disable-via-mobile%</md-switch>
</div>
<div>
<md-switch v-model="loadRawImages">%i18n:@load-raw-images%</md-switch>
</div>
<div>
<md-switch v-model="$store.state.settings.loadRemoteMedia" @change="onChangeLoadRemoteMedia">%i18n:@load-remote-media%</md-switch>
</div>
<div>
<md-switch v-model="lightmode">%i18n:@i-am-under-limited-internet%</md-switch>
</div>
</md-card-content>
</md-card>
<md-card>
<md-card-header>
<div class="md-title">%fa:language% %i18n:@lang%</div>
</md-card-header>
<md-card-content>
<md-field>
<md-select v-model="lang" placeholder="%i18n:@auto%">
<md-optgroup label="%i18n:@recommended%">
<md-option value="">%i18n:@auto%</md-option>
</md-optgroup>
<md-optgroup label="%i18n:@specify-language%">
<md-option v-for="x in langs" :value="x[0]" :key="x[0]">{{ x[1] }}</md-option>
</md-optgroup>
</md-select>
</md-field>
<span class="md-helper-text">%fa:info-circle% %i18n:@lang-tip%</span>
</md-card-content>
</md-card>
<md-card>
<md-card-header>
<div class="md-title">%fa:B twitter% %i18n:@twitter%</div>
</md-card-header>
<md-card-content>
<p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p> <p class="account" v-if="$store.state.i.twitter"><a :href="`https://twitter.com/${$store.state.i.twitter.screenName}`" target="_blank">@{{ $store.state.i.twitter.screenName }}</a></p>
<p> <p>
<a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a> <a :href="`${apiUrl}/connect/twitter`" target="_blank">{{ $store.state.i.twitter ? '%i18n:@twitter-reconnect%' : '%i18n:@twitter-connect%' }}</a>
<span v-if="$store.state.i.twitter"> or </span> <span v-if="$store.state.i.twitter"> or </span>
<a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a> <a :href="`${apiUrl}/disconnect/twitter`" target="_blank" v-if="$store.state.i.twitter">%i18n:@twitter-disconnect%</a>
</p> </p>
</md-card-content> </ui-card>
</md-card>
<md-card> <ui-card>
<md-card-header> <div slot="title">%fa:sync-alt% %i18n:@update%</div>
<div class="md-title">%fa:sync-alt% %i18n:@update%</div>
</md-card-header>
<md-card-content>
<div>%i18n:@version% <i>{{ version }}</i></div> <div>%i18n:@version% <i>{{ version }}</i></div>
<template v-if="latestVersion !== undefined"> <template v-if="latestVersion !== undefined">
<div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div> <div>%i18n:@latest-version% <i>{{ latestVersion ? latestVersion : version }}</i></div>
</template> </template>
<md-button class="md-raised md-primary" @click="checkForUpdate" :disabled="checkingForUpdate"> <ui-button @click="checkForUpdate" :disabled="checkingForUpdate">
<template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template> <template v-if="checkingForUpdate">%i18n:@update-checking%<mk-ellipsis/></template>
<template v-else>%i18n:@check-for-updates%</template> <template v-else>%i18n:@check-for-updates%</template>
</md-button> </ui-button>
</md-card-content> </ui-card>
</md-card>
</div> </div>
<p><small>ver {{ version }} ({{ codename }})</small></p>
<footer>
<small>ver {{ version }} ({{ codename }})</small>
</footer>
</main> </main>
</mk-ui> </mk-ui>
</template> </template>
@ -267,20 +219,22 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
root(isDark) root(isDark)
padding 0 16px
margin 0 auto margin 0 auto
max-width 500px max-width 500px
width 100% width 100%
> div > .signin-as
> * margin 16px
margin-bottom 16px padding 16px
> p
display block
margin 24px
text-align center text-align center
color isDark ? #cad2da : #a2a9b1 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] main[data-darkmode]
root(true) root(true)

View file

@ -1,62 +1,49 @@
<template> <template>
<md-card> <ui-card>
<md-card-header> <div slot="title">%fa:user% %i18n:@title%</div>
<div class="md-title">%fa:pencil-alt% %i18n:@title%</div>
</md-card-header>
<md-card-content> <ui-form :disabled="saving">
<md-field> <ui-input v-model="name" :max="30">
<label>%i18n:@name%</label> <span>%i18n:@name%</span>
<md-input v-model="name" :disabled="saving" md-counter="30"/> </ui-input>
</md-field>
<md-field> <ui-input v-model="username" readonly>
<label>%i18n:@account%</label> <span>%i18n:@account%</span>
<span class="md-prefix">@</span> <span slot="prefix">@</span>
<md-input v-model="username" readonly></md-input> <span slot="suffix">@{{ host }}</span>
<span class="md-suffix">@{{ host }}</span> </ui-input>
</md-field>
<md-field> <ui-input v-model="location">
<md-icon>%fa:map-marker-alt%</md-icon> <span>%i18n:@location%</span>
<label>%i18n:@location%</label> <span slot="prefix">%fa:map-marker-alt%</span>
<md-input v-model="location" :disabled="saving"/> </ui-input>
</md-field>
<md-field> <ui-input v-model="birthday" type="date">
<md-icon>%fa:birthday-cake%</md-icon> <span>%i18n:@birthday%</span>
<label>%i18n:@birthday%</label> <span slot="prefix">%fa:birthday-cake%</span>
<md-input type="date" v-model="birthday" :disabled="saving"/> </ui-input>
</md-field>
<md-field> <ui-textarea v-model="description" :max="500">
<label>%i18n:@description%</label> <span>%i18n:@description%</span>
<md-textarea v-model="description" :disabled="saving" md-counter="500"/> </ui-textarea>
</md-field>
<md-field> <ui-input type="file" @change="onAvatarChange">
<label>%i18n:@avatar%</label> <span>%i18n:@avatar%</span>
<md-file @md-change="onAvatarChange"/> <span slot="icon">%fa:image%</span>
</md-field> <span slot="text" v-if="avatarUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input>
<md-field> <ui-input type="file" @change="onBannerChange">
<label>%i18n:@banner%</label> <span>%i18n:@banner%</span>
<md-file @md-change="onBannerChange"/> <span slot="icon">%fa:image%</span>
</md-field> <span slot="text" v-if="bannerUploading">%i18n:@uploading%<mk-ellipsis/></span>
</ui-input>
<md-dialog-alert <ui-switch v-model="isCat">%i18n:@is-cat%</ui-switch>
:md-active.sync="uploading"
md-content="%18n:!@uploading%"/>
<div> <ui-button @click="save">%i18n:@save%</ui-button>
<md-switch v-model="isCat">%i18n:@is-cat%</md-switch> </ui-form>
</div> </ui-card>
</md-card-content>
<md-card-actions>
<md-button class="md-primary" :disabled="saving" @click="save">%i18n:@save%</md-button>
</md-card-actions>
</md-card>
</template> </template>
<script lang="ts"> <script lang="ts">
@ -77,7 +64,8 @@ export default Vue.extend({
isBot: false, isBot: false,
isCat: false, isCat: false,
saving: false, saving: false,
uploading: false avatarUploading: false,
bannerUploading: false
}; };
}, },
@ -95,7 +83,7 @@ export default Vue.extend({
methods: { methods: {
onAvatarChange([file]) { onAvatarChange([file]) {
this.uploading = true; this.avatarUploading = true;
const data = new FormData(); const data = new FormData();
data.append('file', file); data.append('file', file);
@ -108,16 +96,16 @@ export default Vue.extend({
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
this.avatarId = f.id; this.avatarId = f.id;
this.uploading = false; this.avatarUploading = false;
}) })
.catch(e => { .catch(e => {
this.uploading = false; this.avatarUploading = false;
alert('%18n:!@upload-failed%'); alert('%18n:!@upload-failed%');
}); });
}, },
onBannerChange([file]) { onBannerChange([file]) {
this.uploading = true; this.bannerUploading = true;
const data = new FormData(); const data = new FormData();
data.append('file', file); data.append('file', file);
@ -130,10 +118,10 @@ export default Vue.extend({
.then(response => response.json()) .then(response => response.json())
.then(f => { .then(f => {
this.bannerId = f.id; this.bannerId = f.id;
this.uploading = false; this.bannerUploading = false;
}) })
.catch(e => { .catch(e => {
this.uploading = false; this.bannerUploading = false;
alert('%18n:!@upload-failed%'); alert('%18n:!@upload-failed%');
}); });
}, },

View file

@ -1,57 +1,26 @@
<template> <template>
<div class="signup"> <div class="signup">
<h1>Misskeyをはじめる</h1> <h1>Misskeyをはじめる</h1>
<p>いつでもどこからでもMisskeyを利用できますもちろん無料です</p>
<div class="form">
<p>新規登録</p>
<div>
<mk-signup/> <mk-signup/>
</div> </div>
</div>
</div>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
export default Vue.extend({ export default Vue.extend({});
mounted() {
document.documentElement.style.background = '#293946';
}
});
</script> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
.signup .signup
padding 16px padding 32px
margin 0 auto margin 0 auto
max-width 500px max-width 500px
h1 h1
margin 0 margin 0
padding 8px padding 8px 0 0 0
font-size 1.5em font-size 1.5em
font-weight normal font-weight bold
color #c3c6ca color #444
& + p
margin 0 0 16px 0
padding 0 8px 0 8px
color #949fa9
.form
background #fff
border solid 1px rgba(#000, 0.2)
border-radius 8px
overflow hidden
> p
margin 0
padding 12px 20px
color #555
background #f5f5f5
border-bottom solid 1px #ddd
> div
padding 16px
</style> </style>

View file

@ -1,29 +1,31 @@
<template> <template>
<div class="welcome"> <div class="welcome">
<div> <div>
<h1><b>Misskey</b>へようこそ</h1> <img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey">
<p>Twitter風ミニブログSNSMisskeyへようこそ共有したいことを投稿したりタイムラインでみんなの投稿を読むこともできます<br><a href="/signup">アカウントを作成する</a></p> <p class="host">{{ host }}</p>
<div class="form"> <div class="about">
<p>%fa:lock% ログイン</p> <h2>{{ name || 'unidentified' }}</h2>
<div> <p v-html="description || '%i18n:common.about%'"></p>
<router-link class="signup" to="/signup">新規登録</router-link>
</div>
<div class="login">
<form @submit.prevent="onSubmit"> <form @submit.prevent="onSubmit">
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="ユーザー名" autofocus required @change="onUsernameChange"/> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
<input v-model="password" type="password" placeholder="パスワード" required/> <span>ユーザー名</span>
<input v-if="user && user.twoFactorEnabled" v-model="token" type="number" placeholder="トークン" required/> <span slot="prefix">@</span>
<button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</button> <span slot="suffix">@{{ host }}</span>
</ui-input>
<ui-input v-model="password" type="password" required>
<span>パスワード</span>
<span slot="prefix">%fa:lock%</span>
</ui-input>
<ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
<ui-button type="submit" :disabled="signing">{{ signing ? 'ログインしています' : 'ログイン' }}</ui-button>
</form> </form>
<div> <div>
<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a> <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a>
</div> </div>
</div> </div>
</div>
<div class="tl">
<p>%fa:comments R% タイムラインを見てみる</p>
<mk-welcome-timeline/>
</div>
<div class="users">
<mk-avatar class="avatar" v-for="user in users" :key="user.id" :user="user"/>
</div>
<footer> <footer>
<small>{{ copyright }}</small> <small>{{ copyright }}</small>
</footer> </footer>
@ -33,7 +35,7 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { apiUrl, copyright } from '../../../config'; import { apiUrl, copyright, host, name, description } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
@ -45,7 +47,10 @@ export default Vue.extend({
token: '', token: '',
apiUrl, apiUrl,
copyright, copyright,
users: [] users: [],
host,
name,
description
}; };
}, },
mounted() { mounted() {
@ -84,56 +89,49 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
.welcome .welcome
background linear-gradient(to bottom, #1e1d65, #bd6659) text-align center
//background #fff
> div > div
padding 16px padding 32px
margin 0 auto margin 0 auto
max-width 500px max-width 500px
h1 > img
margin 0 display block
padding 8px max-width 200px
font-size 1.5em margin 0 auto
font-weight normal
color #cacac3
& + p > .host
margin 0 0 16px 0 display block
padding 0 8px 0 8px text-align center
color #949fa9 padding 6px 12px
line-height 32px
font-weight bold
color #333
background rgba(#000, 0.035)
border-radius 6px
.form > .about
margin-bottom 16px margin-top 16px
padding 16px
color #555
background #fff background #fff
border solid 1px rgba(#000, 0.2) border-radius 6px
border-radius 8px
overflow hidden > h2
margin 0
> p > p
margin 0 margin 8px
padding 12px 20px
color #555
background #f5f5f5
border-bottom solid 1px #ddd
> div > .signup
font-weight bold
> .login
margin 16px 0
> form > form
padding 16px
border-bottom solid 1px #ddd
input
display block
padding 12px
margin 0 0 16px 0
width 100%
font-size 1em
color rgba(#000, 0.7)
background #fff
outline none
border solid 1px #ddd
border-radius 4px
button button
display block display block
@ -156,40 +154,9 @@ export default Vue.extend({
border-color #444 border-color #444
box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2) box-shadow 0 1px 3px rgba(#000, 0.075), inset 0 0 5px rgba(#000, 0.2)
> div
padding 16px
text-align center
> .tl
background #fff
border solid 1px rgba(#000, 0.2)
border-radius 8px
overflow hidden
> p
margin 0
padding 12px 20px
color #555
background #f5f5f5
border-bottom solid 1px #ddd
> .mk-welcome-timeline
max-height 300px
overflow auto
> .users
margin 12px 0 0 0
> *
display inline-block
margin 4px
width 38px
height 38px
border-radius 6px
> footer > footer
text-align center text-align center
color #fff color #444
> small > small
display block display block

View file

@ -56,7 +56,7 @@ export default define({
left 92px left 92px
margin 0 margin 0
line-height 100px line-height 100px
color #fff !important // !important is for md color #fff
font-weight bold font-weight bold
text-shadow 0 0 8px rgba(#000, 0.5) text-shadow 0 0 8px rgba(#000, 0.5)

View file

@ -1,13 +0,0 @@
/* SEE: https://vuematerial.io/themes/configuration */
@import '../const.json';
@import "~vue-material/dist/theme/engine";
@include md-register-theme("default", (
primary: $themeColor,
accent: $themeColor
));
@import "~vue-material/dist/components/MdButton/theme";
@import "~vue-material/dist/components/MdField/theme";

View file

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

View file

@ -79,6 +79,8 @@ const consts = {
_DEV_URL_: config.dev_url, _DEV_URL_: config.dev_url,
_LANG_: '%lang%', _LANG_: '%lang%',
_LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]), _LANGS_: Object.keys(locales).map(l => [l, locales[l].meta.lang]),
_NAME_: config.name,
_DESCRIPTION_: config.description,
_HOST_: config.host, _HOST_: config.host,
_HOSTNAME_: config.hostname, _HOSTNAME_: config.hostname,
_URL_: config.url, _URL_: config.url,