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

🎨

This commit is contained in:
syuilo 2018-06-15 19:56:18 +09:00
parent a44387f250
commit e6f33e997f
9 changed files with 169 additions and 166 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
locales/ja.yml
View File

@ -3,7 +3,7 @@ meta:
divider: "" divider: ""
common: common:
misskey: "A planet of fediverse" misskey: "A ⭐ of fediverse"
about-title: "A ⭐ of fediverse." about-title: "A ⭐ of fediverse."
about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。" about: "Misskeyを見つけていただき、ありがとうございます。Misskeyは、地球で生まれた<b>分散マイクロブログSNS</b>です。Fediverse(様々なSNSで構成される宇宙)の中に存在するため、他のSNSと相互に繋がっています。暫し都会の喧騒から離れて、新しいインターネットにダイブしてみませんか。"

3
src/client/app/common/views/components/forkit.vue
View File

@ -13,9 +13,6 @@
.a .a
display block display block
position fixed
top 0
right 0
> svg > svg
display block display block

26
src/client/app/common/views/components/signin.vue
View File

@ -1,22 +1,23 @@
<template> <template>
<form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit"> <form class="mk-signin" :class="{ signing }" @submit.prevent="onSubmit">
<label class="user-name"> <ui-input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" autofocus required @change="onUsernameChange">
<input v-model="username" type="text" pattern="^[a-zA-Z0-9_]+$" placeholder="%i18n:@username%" autofocus required @change="onUsernameChange"/>%fa:at% <span>%i18n:@username%</span>
</label> <span slot="prefix">@</span>
<label class="password"> <span slot="suffix">@{{ host }}</span>
<input v-model="password" type="password" placeholder="%i18n:@password%" required/>%fa:lock% </ui-input>
</label> <ui-input v-model="password" type="password" required>
<label class="token" v-if="user && user.twoFactorEnabled"> <span>%i18n:@password%</span>
<input v-model="token" type="number" placeholder="%i18n:@token%" required/>%fa:lock% <span slot="prefix">%fa:lock%</span>
</label> </ui-input>
<button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</button> <ui-input v-if="user && user.twoFactorEnabled" v-model="token" type="number" required/>
もしくは <a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a> <ui-button type="submit" :disabled="signing">{{ signing ? '%i18n:@signing-in%' : '%i18n:@signin%' }}</ui-button>
<p style="margin: 8px 0;">または<a :href="`${apiUrl}/signin/twitter`">Twitterでログイン</a></p>
</form> </form>
</template> </template>
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { apiUrl } from '../../../config'; import { apiUrl, host } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
@ -27,6 +28,7 @@ export default Vue.extend({
password: '', password: '',
token: '', token: '',
apiUrl, apiUrl,
host
}; };
}, },
methods: { methods: {

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

@ -10,13 +10,12 @@
<template v-if="type != 'file'"> <template v-if="type != 'file'">
<input ref="input" <input ref="input"
:type="type" :type="type"
:value="v" v-model="v"
:required="required" :required="required"
:readonly="readonly" :readonly="readonly"
:pattern="pattern" :pattern="pattern"
:autocomplete="autocomplete" :autocomplete="autocomplete"
:spellcheck="spellcheck" :spellcheck="spellcheck"
@input="$emit('input', $event.target.value)"
@focus="focused = true" @focus="focused = true"
@blur="focused = false"> @blur="focused = false">
</template> </template>
@ -104,6 +103,8 @@ export default Vue.extend({
this.v = v; this.v = v;
}, },
v(v) { v(v) {
this.$emit('input', v);
if (this.withPasswordMeter) { if (this.withPasswordMeter) {
if (v == '') { if (v == '') {
this.passwordStrength = ''; this.passwordStrength = '';

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

@ -19,6 +19,7 @@ declare const _VERSION_: string;
declare const _CODENAME_: string; declare const _CODENAME_: string;
declare const _LICENSE_: string; declare const _LICENSE_: string;
declare const _GOOGLE_MAPS_API_KEY_: string; declare const _GOOGLE_MAPS_API_KEY_: string;
declare const _WELCOME_BG_URL_: string;
export const host = _HOST_; export const host = _HOST_;
export const hostname = _HOSTNAME_; export const hostname = _HOSTNAME_;
@ -41,3 +42,4 @@ export const version = _VERSION_;
export const codename = _CODENAME_; export const codename = _CODENAME_;
export const license = _LICENSE_; export const license = _LICENSE_;
export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_; export const googleMapsApiKey = _GOOGLE_MAPS_API_KEY_;
export const welcomeBgUrl = _WELCOME_BG_URL_;

293
src/client/app/desktop/views/pages/welcome.vue
View File

@ -1,36 +1,39 @@
<template> <template>
<div class="mk-welcome"> <div class="mk-welcome">
<img ref="pointer" class="pointer" src="/assets/pointer.png" alt="">
<button @click="dark"> <button @click="dark">
<template v-if="$store.state.device.darkmode">%fa:moon%</template> <template v-if="$store.state.device.darkmode">%fa:moon%</template>
<template v-else>%fa:R moon%</template> <template v-else>%fa:R moon%</template>
</button> </button>
<main v-if="about" class="about"> <div class="body" :style="{ backgroundImage: `url('${ welcomeBgUrl }')` }">
<article> <div class="container">
<h1>%i18n:common.about-title%</h1> <div class="info">
<p v-html="'%i18n:common.about%'"></p> <span>%i18n:common.misskey% <b>{{ host }}</b></span>
<span class="gotit" @click="about = false">%i18n:@gotit%</span> <span class="stats" v-if="stats">
</article> <span>%fa:user% {{ stats.originalUsersCount | number }}</span>
<span>%fa:pencil-alt% {{ stats.originalNotesCount | number }}</span>
</span>
</div>
<main>
<div class="about">
<h1 v-if="name">{{ name }}</h1>
<h1 v-else><img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"></h1>
<p class="powerd-by" v-if="name">powerd by <b>Misskey</b></p>
<p class="desc" v-html="description || '%i18n:common.about%'"></p>
<a ref="signup" @click="signup">%i18n:@signup%</a>
</div>
<div class="login">
<mk-signin/>
</div>
</main> </main>
<main v-else class="index"> <mk-nav class="nav"/>
<img :src="$store.state.device.darkmode ? 'assets/title.dark.svg' : 'assets/title.light.svg'" alt="Misskey"> </div>
<p class="desc"><b>%i18n:common.misskey%</b> - <span @click="about = true">%i18n:@about%</span></p> <mk-forkit class="forkit"/>
<p class="account"> <img src="assets/title.dark.svg" alt="Misskey">
<button class="signup" @click="signup">%i18n:@signup-button%</button> </div>
<button class="signin" @click="signin">%i18n:@signin-button%</button>
</p>
<div class="tl"> <div class="tl">
<header>%fa:comments R% %i18n:@timeline%<div><span></span><span></span><span></span></div></header>
<mk-welcome-timeline/> <mk-welcome-timeline/>
</div> </div>
</main>
<mk-forkit/>
<footer>
<div>
<mk-nav :class="$style.nav"/>
<p class="c">{{ copyright }}</p>
</div>
</footer>
<modal name="signup" width="500px" height="auto" scrollable> <modal name="signup" width="500px" height="auto" scrollable>
<header :class="$style.signupFormHeader">%i18n:@signup%</header> <header :class="$style.signupFormHeader">%i18n:@signup%</header>
<mk-signup :class="$style.signupForm"/> <mk-signup :class="$style.signupForm"/>
@ -44,15 +47,27 @@
<script lang="ts"> <script lang="ts">
import Vue from 'vue'; import Vue from 'vue';
import { copyright } from '../../../config'; import { host, copyright, welcomeBgUrl } from '../../../config';
export default Vue.extend({ export default Vue.extend({
data() { data() {
return { return {
about: false, stats: null,
copyright copyright,
welcomeBgUrl,
host
}; };
}, },
created() {
(this as any).api('stats').then(stats => {
this.stats = stats;
});
},
mounted() {
const x = this.$refs.signup.getBoundingClientRect();
this.$refs.pointer.style.top = x.top + x.height + 'px';
this.$refs.pointer.style.left = x.left + 'px';
},
methods: { methods: {
signup() { signup() {
this.$modal.show('signup'); this.$modal.show('signup');
@ -80,13 +95,20 @@ export default Vue.extend({
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~const.styl' @import '~const.styl'
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
root(isDark) root(isDark)
display flex
min-height 100vh min-height 100vh
background-image isDark ? url('/assets/welcome-bg.dark.svg') : url('/assets/welcome-bg.light.svg')
background-size cover > .pointer
background-position center display block
position absolute
z-index 1
top 0
right 0
width 180px
margin 0 0 0 -180px
transform rotateY(180deg) translateX(-10px) translateY(-25px)
pointer-events none
> button > button
position fixed position fixed
@ -95,141 +117,118 @@ root(isDark)
left 0 left 0
padding 16px padding 16px
font-size 18px font-size 18px
color isDark ? #fff : #555 color #fff
> main display none // TODO
> .body
flex 1 flex 1
padding 64px 0 0 0 padding 64px 0 0 0
text-align center text-align center
background #578394
background-position center
background-size cover
&.about &:before
font-family 'Noto Sans JP' content ''
color isDark ? #fff : #627574 display block
position absolute
top 0
left 0
right 0
bottom 0
background rgba(#000, 0.5)
> article > .forkit
max-width 700px
margin 42px auto 0 auto
padding 64px 82px
background isDark ? #282C37 : #fff
box-shadow 0 8px 32px rgba(#000, 0.15)
> h1
margin 0
font-weight 900
> p
margin 20px 0
line-height 2em
> .gotit
color $theme-color
cursor pointer
&:hover
text-decoration underline
&.index
color isDark ? #9aa4b3 : #555
> img
width 350px
> .desc
margin -12px 0 24px 0
color isDark ? #fff : #555
> span
color $theme-color
cursor pointer
&:hover
text-decoration underline
> .account
margin 8px 0
line-height 2em
button
padding 8px 16px
font-size inherit
.signup
color $theme-color
border solid 2px $theme-color
border-radius 4px
&:focus
box-shadow 0 0 0 3px rgba($theme-color, 0.2)
&:hover
color $theme-color-foreground
background $theme-color
&:active
color $theme-color-foreground
background darken($theme-color, 10%)
border-color darken($theme-color, 10%)
.signin
&:hover
color isDark ? #fff : #000
> .tl
margin 32px auto 0 auto
width 410px
text-align left
background isDark ? #313543 : #fff
border-radius 8px
box-shadow 0 8px 32px rgba(#000, 0.15)
overflow hidden
> header
z-index 1
padding 12px 16px
color isDark ? #e3e5e8 : #888d94
box-shadow 0 1px 0px rgba(#000, 0.1)
> div
position absolute position absolute
top 0 top 0
right 0 right 0
padding inherit
> span > img
display inline-block position absolute
height 11px bottom 16px
width 11px right 16px
margin-left 6px width 150px
border-radius 100%
vertical-align middle
&:nth-child(1) > .container
background #5BCC8B $aboutWidth = 380px
$loginWidth = 340px
$width = $aboutWidth + $loginWidth
&:nth-child(2) > .info
background #E6BB46 margin 0 auto 16px auto
padding 12px
width $width
font-size 14px
color #fff
background rgba(#000, 0.2)
border-radius 8px
&:nth-child(3) > .stats
background #DF7065 margin-left 16px
padding-left 16px
border-left solid 1px #fff
> .mk-welcome-timeline > *
max-height 350px margin-right 16px
overflow auto
> footer > main
font-size 12px display flex
color isDark ? #949ea5 : #737c82 margin auto
width $width
border-radius 8px
overflow hidden
box-shadow 0 2px 8px rgba(#000, 0.3)
> div > .about
margin 0 auto width $aboutWidth
padding 64px color #444
text-align center background #fff
> .c > h1
margin 16px 0 0 0 margin 0 0 16px 0
font-size 10px padding 32px 32px 0 32px
color #444
> img
width 170px
vertical-align bottom
> .powerd-by
margin 16px
opacity 0.7 opacity 0.7
> .desc
margin 0
padding 0 32px 16px 32px
> a
display inline-block
margin 0 0 32px 0
font-weight bold
> .login
width $loginWidth
padding 16px 32px 32px 32px
background #f5f5f5
> .nav
display block
margin 16px 0
font-size 14px
color #fff
> .tl
margin 0
width 410px
height 100vh
text-align left
background isDark ? #313543 : #fff
> *
max-height 100%
overflow auto
.mk-welcome[data-darkmode] .mk-welcome[data-darkmode]
root(true) root(true)

BIN
src/client/assets/pointer.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 247 KiB

1
src/config/types.ts
View File

@ -17,6 +17,7 @@ export type Source = {
}; };
name?: string; name?: string;
description?: string; description?: string;
welcome_bg_url?: string;
url: string; url: string;
port: number; port: number;
https?: { [x: string]: string }; https?: { [x: string]: string };

3
webpack.config.ts
View File

@ -85,7 +85,8 @@ const consts = {
_HOSTNAME_: config.hostname, _HOSTNAME_: config.hostname,
_URL_: config.url, _URL_: config.url,
_LICENSE_: licenseHtml, _LICENSE_: licenseHtml,
_GOOGLE_MAPS_API_KEY_: config.google_maps_api_key _GOOGLE_MAPS_API_KEY_: config.google_maps_api_key,
_WELCOME_BG_URL_: config.welcome_bg_url
}; };
const _consts = {}; const _consts = {};