wip
This commit is contained in:
syuilo
parent
161a91a69f
commit
dfa98a038c
@ -1,100 +0,0 @@
|
|||||||
<mk-settings-page>
|
|
||||||
<mk-ui ref="ui">
|
|
||||||
<mk-settings />
|
|
||||||
</mk-ui>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import ui from '../../scripts/ui-event';
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
|
|
||||||
ui.trigger('title', '%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%');
|
|
||||||
document.documentElement.style.background = '#313a42';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-settings-page>
|
|
||||||
|
|
||||||
<mk-settings>
|
|
||||||
<p><mk-raw content={ '%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + I.name + '</b>') }/></p>
|
|
||||||
<ul>
|
|
||||||
<li><a href="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
|
|
||||||
<li><a href="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</a></li>
|
|
||||||
<li><a href="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</a></li>
|
|
||||||
<li><a href="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</a></li>
|
|
||||||
</ul>
|
|
||||||
<ul>
|
|
||||||
<li><a @click="signout">%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
|
|
||||||
</ul>
|
|
||||||
<p><small>ver { _VERSION_ } (葵 aoi)</small></p>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 24px
|
|
||||||
text-align center
|
|
||||||
color #cad2da
|
|
||||||
|
|
||||||
> ul
|
|
||||||
$radius = 8px
|
|
||||||
|
|
||||||
display block
|
|
||||||
margin 16px auto
|
|
||||||
padding 0
|
|
||||||
max-width 500px
|
|
||||||
width calc(100% - 32px)
|
|
||||||
list-style none
|
|
||||||
background #fff
|
|
||||||
border solid 1px rgba(0, 0, 0, 0.2)
|
|
||||||
border-radius $radius
|
|
||||||
|
|
||||||
> li
|
|
||||||
display block
|
|
||||||
border-bottom solid 1px #ddd
|
|
||||||
|
|
||||||
&:hover
|
|
||||||
background rgba(0, 0, 0, 0.1)
|
|
||||||
|
|
||||||
&:first-child
|
|
||||||
border-top-left-radius $radius
|
|
||||||
border-top-right-radius $radius
|
|
||||||
|
|
||||||
&:last-child
|
|
||||||
border-bottom-left-radius $radius
|
|
||||||
border-bottom-right-radius $radius
|
|
||||||
border-bottom none
|
|
||||||
|
|
||||||
> a
|
|
||||||
$height = 48px
|
|
||||||
|
|
||||||
display block
|
|
||||||
position relative
|
|
||||||
padding 0 16px
|
|
||||||
line-height $height
|
|
||||||
color #4d635e
|
|
||||||
|
|
||||||
> [data-fa]:nth-of-type(1)
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
> [data-fa]:nth-of-type(2)
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
top 0
|
|
||||||
right 8px
|
|
||||||
z-index 1
|
|
||||||
padding 0 20px
|
|
||||||
font-size 1.2em
|
|
||||||
line-height $height
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import signout from '../../../common/scripts/signout';
|
|
||||||
this.signout = signout;
|
|
||||||
|
|
||||||
this.mixin('i');
|
|
||||||
</script>
|
|
||||||
</mk-settings>
|
|
||||||
@ -1,247 +0,0 @@
|
|||||||
<mk-profile-setting-page>
|
|
||||||
<mk-ui ref="ui">
|
|
||||||
<mk-profile-setting/>
|
|
||||||
</mk-ui>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
import ui from '../../../scripts/ui-event';
|
|
||||||
|
|
||||||
this.on('mount', () => {
|
|
||||||
document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
|
|
||||||
ui.trigger('title', '%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%');
|
|
||||||
document.documentElement.style.background = '#313a42';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
</mk-profile-setting-page>
|
|
||||||
|
|
||||||
<mk-profile-setting>
|
|
||||||
<div>
|
|
||||||
<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
|
|
||||||
<div class="form">
|
|
||||||
<div style={ I.banner_url ? 'background-image: url(' + I.banner_url + '?thumbnail&size=1024)' : '' } @click="clickBanner">
|
|
||||||
<img src={ I.avatar_url + '?thumbnail&size=200' } alt="avatar" @click="clickAvatar"/>
|
|
||||||
</div>
|
|
||||||
<label>
|
|
||||||
<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
|
|
||||||
<input ref="name" type="text" value={ I.name }/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
|
|
||||||
<input ref="location" type="text" value={ I.profile.location }/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
|
|
||||||
<textarea ref="description">{ I.description }</textarea>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
|
|
||||||
<input ref="birthday" type="date" value={ I.profile.birthday }/>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
|
|
||||||
<button @click="setAvatar" disabled={ avatarSaving }>%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
|
|
||||||
<button @click="setBanner" disabled={ bannerSaving }>%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
<button class="save" @click="save" disabled={ saving }>%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
|
|
||||||
</div>
|
|
||||||
<style lang="stylus" scoped>
|
|
||||||
:scope
|
|
||||||
display block
|
|
||||||
|
|
||||||
> div
|
|
||||||
margin 8px auto
|
|
||||||
max-width 500px
|
|
||||||
width calc(100% - 16px)
|
|
||||||
|
|
||||||
@media (min-width 500px)
|
|
||||||
margin 16px auto
|
|
||||||
width calc(100% - 32px)
|
|
||||||
|
|
||||||
> p
|
|
||||||
display block
|
|
||||||
margin 0 0 8px 0
|
|
||||||
padding 12px 16px
|
|
||||||
font-size 14px
|
|
||||||
color #79d4e6
|
|
||||||
border solid 1px #71afbb
|
|
||||||
//color #276f86
|
|
||||||
//background #f8ffff
|
|
||||||
//border solid 1px #a9d5de
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
> [data-fa]
|
|
||||||
margin-right 6px
|
|
||||||
|
|
||||||
> .form
|
|
||||||
position relative
|
|
||||||
background #fff
|
|
||||||
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
&:before
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom -20px
|
|
||||||
left calc(50% - 10px)
|
|
||||||
border-top solid 10px rgba(0, 0, 0, 0.2)
|
|
||||||
border-right solid 10px transparent
|
|
||||||
border-bottom solid 10px transparent
|
|
||||||
border-left solid 10px transparent
|
|
||||||
|
|
||||||
&:after
|
|
||||||
content ""
|
|
||||||
display block
|
|
||||||
position absolute
|
|
||||||
bottom -16px
|
|
||||||
left calc(50% - 8px)
|
|
||||||
border-top solid 8px #fff
|
|
||||||
border-right solid 8px transparent
|
|
||||||
border-bottom solid 8px transparent
|
|
||||||
border-left solid 8px transparent
|
|
||||||
|
|
||||||
> div
|
|
||||||
height 128px
|
|
||||||
background-color #e4e4e4
|
|
||||||
background-size cover
|
|
||||||
background-position center
|
|
||||||
border-radius 8px 8px 0 0
|
|
||||||
|
|
||||||
> img
|
|
||||||
position absolute
|
|
||||||
top 25px
|
|
||||||
left calc(50% - 40px)
|
|
||||||
width 80px
|
|
||||||
height 80px
|
|
||||||
border solid 2px #fff
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
> label
|
|
||||||
display block
|
|
||||||
margin 0
|
|
||||||
padding 16px
|
|
||||||
border-bottom solid 1px #eee
|
|
||||||
|
|
||||||
&:last-of-type
|
|
||||||
border none
|
|
||||||
|
|
||||||
> p:first-child
|
|
||||||
display block
|
|
||||||
margin 0
|
|
||||||
padding 0 0 4px 0
|
|
||||||
font-weight bold
|
|
||||||
color #2f3c42
|
|
||||||
|
|
||||||
> input[type="text"]
|
|
||||||
> textarea
|
|
||||||
display block
|
|
||||||
width 100%
|
|
||||||
padding 12px
|
|
||||||
font-size 16px
|
|
||||||
color #192427
|
|
||||||
border solid 2px #ddd
|
|
||||||
border-radius 4px
|
|
||||||
|
|
||||||
> textarea
|
|
||||||
min-height 80px
|
|
||||||
|
|
||||||
> .save
|
|
||||||
display block
|
|
||||||
margin 8px 0 0 0
|
|
||||||
padding 16px
|
|
||||||
width 100%
|
|
||||||
font-size 16px
|
|
||||||
color $theme-color-foreground
|
|
||||||
background $theme-color
|
|
||||||
border-radius 8px
|
|
||||||
|
|
||||||
&:disabled
|
|
||||||
opacity 0.7
|
|
||||||
|
|
||||||
> [data-fa]
|
|
||||||
margin-right 4px
|
|
||||||
|
|
||||||
</style>
|
|
||||||
<script lang="typescript">
|
|
||||||
this.mixin('i');
|
|
||||||
this.mixin('api');
|
|
||||||
|
|
||||||
this.setAvatar = () => {
|
|
||||||
const i = riot.mount(document.body.appendChild(document.createElement('mk-drive-selector')), {
|
|
||||||
multiple: false
|
|
||||||
})[0];
|
|
||||||
i.one('selected', file => {
|
|
||||||
this.update({
|
|
||||||
avatarSaving: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this.$root.$data.os.api('i/update', {
|
|
||||||
avatar_id: file.id
|
|
||||||
}).then(() => {
|
|
||||||
this.update({
|
|
||||||
avatarSaving: false
|
|
||||||
});
|
|
||||||
|
|
||||||
alert('%i18n:mobile.tags.mk-profile-setting.avatar-saved%');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.setBanner = () => {
|
|
||||||
const i = riot.mount(document.body.appendChild(document.createElement('mk-drive-selector')), {
|
|
||||||
multiple: false
|
|
||||||
})[0];
|
|
||||||
i.one('selected', file => {
|
|
||||||
this.update({
|
|
||||||
bannerSaving: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this.$root.$data.os.api('i/update', {
|
|
||||||
banner_id: file.id
|
|
||||||
}).then(() => {
|
|
||||||
this.update({
|
|
||||||
bannerSaving: false
|
|
||||||
});
|
|
||||||
|
|
||||||
alert('%i18n:mobile.tags.mk-profile-setting.banner-saved%');
|
|
||||||
});
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
this.clickAvatar = e => {
|
|
||||||
this.setAvatar();
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.clickBanner = e => {
|
|
||||||
this.setBanner();
|
|
||||||
return false;
|
|
||||||
};
|
|
||||||
|
|
||||||
this.save = () => {
|
|
||||||
this.update({
|
|
||||||
saving: true
|
|
||||||
});
|
|
||||||
|
|
||||||
this.$root.$data.os.api('i/update', {
|
|
||||||
name: this.$refs.name.value,
|
|
||||||
location: this.$refs.location.value || null,
|
|
||||||
description: this.$refs.description.value || null,
|
|
||||||
birthday: this.$refs.birthday.value || null
|
|
||||||
}).then(() => {
|
|
||||||
this.update({
|
|
||||||
saving: false
|
|
||||||
});
|
|
||||||
|
|
||||||
alert('%i18n:mobile.tags.mk-profile-setting.saved%');
|
|
||||||
});
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
</mk-profile-setting>
|
|
||||||
218
src/web/app/mobile/views/pages/profile-setting.vue
Normal file
218
src/web/app/mobile/views/pages/profile-setting.vue
Normal file
@ -0,0 +1,218 @@
|
|||||||
|
<template>
|
||||||
|
<mk-ui>
|
||||||
|
<span slot="header">%fa:user%%i18n:mobile.tags.mk-profile-setting-page.title%</span>
|
||||||
|
<div class="$style.content">
|
||||||
|
<p>%fa:info-circle%%i18n:mobile.tags.mk-profile-setting.will-be-published%</p>
|
||||||
|
<div class="$style.form">
|
||||||
|
<div :style="os.i.banner_url ? `background-image: url(${os.i.banner_url}?thumbnail&size=1024)` : ''" @click="setBanner">
|
||||||
|
<img :src="`${os.i.avatar_url}?thumbnail&size=200`" alt="avatar" @click="setAvatar"/>
|
||||||
|
</div>
|
||||||
|
<label>
|
||||||
|
<p>%i18n:mobile.tags.mk-profile-setting.name%</p>
|
||||||
|
<input v-model="name" type="text"/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>%i18n:mobile.tags.mk-profile-setting.location%</p>
|
||||||
|
<input v-model="location" type="text"/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>%i18n:mobile.tags.mk-profile-setting.description%</p>
|
||||||
|
<textarea v-model="description"></textarea>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>%i18n:mobile.tags.mk-profile-setting.birthday%</p>
|
||||||
|
<input v-model="birthday" type="date"/>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>%i18n:mobile.tags.mk-profile-setting.avatar%</p>
|
||||||
|
<button @click="setAvatar" :disabled="avatarSaving">%i18n:mobile.tags.mk-profile-setting.set-avatar%</button>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
<p>%i18n:mobile.tags.mk-profile-setting.banner%</p>
|
||||||
|
<button @click="setBanner" :disabled="bannerSaving">%i18n:mobile.tags.mk-profile-setting.set-banner%</button>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<button class="$style.save" @click="save" :disabled="saving">%fa:check%%i18n:mobile.tags.mk-profile-setting.save%</button>
|
||||||
|
</div>
|
||||||
|
</mk-ui>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
export default Vue.extend({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
name: (this as any).os.i.name,
|
||||||
|
location: (this as any).os.i.profile.location,
|
||||||
|
description: (this as any).os.i.description,
|
||||||
|
birthday: (this as any).os.i.profile.birthday,
|
||||||
|
avatarSaving: false,
|
||||||
|
bannerSaving: false,
|
||||||
|
saving: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
document.title = 'Misskey | %i18n:mobile.tags.mk-profile-setting-page.title%';
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
setAvatar() {
|
||||||
|
(this as any).apis.chooseDriveFile({
|
||||||
|
multiple: false
|
||||||
|
}).then(file => {
|
||||||
|
this.avatarSaving = true;
|
||||||
|
|
||||||
|
(this as any).api('i/update', {
|
||||||
|
avatar_id: file.id
|
||||||
|
}).then(() => {
|
||||||
|
this.avatarSaving = false;
|
||||||
|
alert('%i18n:mobile.tags.mk-profile-setting.avatar-saved%');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
setBanner() {
|
||||||
|
(this as any).apis.chooseDriveFile({
|
||||||
|
multiple: false
|
||||||
|
}).then(file => {
|
||||||
|
this.bannerSaving = true;
|
||||||
|
|
||||||
|
(this as any).api('i/update', {
|
||||||
|
banner_id: file.id
|
||||||
|
}).then(() => {
|
||||||
|
this.bannerSaving = false;
|
||||||
|
alert('%i18n:mobile.tags.mk-profile-setting.banner-saved%');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
save() {
|
||||||
|
this.saving = true;
|
||||||
|
|
||||||
|
(this as any).api('i/update', {
|
||||||
|
name: this.name,
|
||||||
|
location: this.location || null,
|
||||||
|
description: this.description || null,
|
||||||
|
birthday: this.birthday || null
|
||||||
|
}).then(() => {
|
||||||
|
this.saving = false;
|
||||||
|
alert('%i18n:mobile.tags.mk-profile-setting.saved%');
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" scoped>
|
||||||
|
.content
|
||||||
|
margin 8px auto
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 16px)
|
||||||
|
|
||||||
|
@media (min-width 500px)
|
||||||
|
margin 16px auto
|
||||||
|
width calc(100% - 32px)
|
||||||
|
|
||||||
|
> p
|
||||||
|
display block
|
||||||
|
margin 0 0 8px 0
|
||||||
|
padding 12px 16px
|
||||||
|
font-size 14px
|
||||||
|
color #79d4e6
|
||||||
|
border solid 1px #71afbb
|
||||||
|
//color #276f86
|
||||||
|
//background #f8ffff
|
||||||
|
//border solid 1px #a9d5de
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
|
> [data-fa]
|
||||||
|
margin-right 6px
|
||||||
|
|
||||||
|
.form
|
||||||
|
position relative
|
||||||
|
background #fff
|
||||||
|
box-shadow 0 0 0 1px rgba(0, 0, 0, 0.2)
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
|
&:before
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
bottom -20px
|
||||||
|
left calc(50% - 10px)
|
||||||
|
border-top solid 10px rgba(0, 0, 0, 0.2)
|
||||||
|
border-right solid 10px transparent
|
||||||
|
border-bottom solid 10px transparent
|
||||||
|
border-left solid 10px transparent
|
||||||
|
|
||||||
|
&:after
|
||||||
|
content ""
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
bottom -16px
|
||||||
|
left calc(50% - 8px)
|
||||||
|
border-top solid 8px #fff
|
||||||
|
border-right solid 8px transparent
|
||||||
|
border-bottom solid 8px transparent
|
||||||
|
border-left solid 8px transparent
|
||||||
|
|
||||||
|
> div
|
||||||
|
height 128px
|
||||||
|
background-color #e4e4e4
|
||||||
|
background-size cover
|
||||||
|
background-position center
|
||||||
|
border-radius 8px 8px 0 0
|
||||||
|
|
||||||
|
> img
|
||||||
|
position absolute
|
||||||
|
top 25px
|
||||||
|
left calc(50% - 40px)
|
||||||
|
width 80px
|
||||||
|
height 80px
|
||||||
|
border solid 2px #fff
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
|
> label
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 16px
|
||||||
|
border-bottom solid 1px #eee
|
||||||
|
|
||||||
|
&:last-of-type
|
||||||
|
border none
|
||||||
|
|
||||||
|
> p:first-child
|
||||||
|
display block
|
||||||
|
margin 0
|
||||||
|
padding 0 0 4px 0
|
||||||
|
font-weight bold
|
||||||
|
color #2f3c42
|
||||||
|
|
||||||
|
> input[type="text"]
|
||||||
|
> textarea
|
||||||
|
display block
|
||||||
|
width 100%
|
||||||
|
padding 12px
|
||||||
|
font-size 16px
|
||||||
|
color #192427
|
||||||
|
border solid 2px #ddd
|
||||||
|
border-radius 4px
|
||||||
|
|
||||||
|
> textarea
|
||||||
|
min-height 80px
|
||||||
|
|
||||||
|
.save
|
||||||
|
display block
|
||||||
|
margin 8px 0 0 0
|
||||||
|
padding 16px
|
||||||
|
width 100%
|
||||||
|
font-size 16px
|
||||||
|
color $theme-color-foreground
|
||||||
|
background $theme-color
|
||||||
|
border-radius 8px
|
||||||
|
|
||||||
|
&:disabled
|
||||||
|
opacity 0.7
|
||||||
|
|
||||||
|
> [data-fa]
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
</style>
|
||||||
102
src/web/app/mobile/views/pages/settings.vue
Normal file
102
src/web/app/mobile/views/pages/settings.vue
Normal file
@ -0,0 +1,102 @@
|
|||||||
|
<template>
|
||||||
|
<mk-ui>
|
||||||
|
<span slot="header">%fa:cog%%i18n:mobile.tags.mk-settings-page.settings%</span>
|
||||||
|
<div class="$style.content">
|
||||||
|
<p v-html="'%i18n:mobile.tags.mk-settings.signed-in-as%'.replace('{}', '<b>' + os.i.name + '</b>')"></p>
|
||||||
|
<ul>
|
||||||
|
<li><router-link to="./settings/profile">%fa:user%%i18n:mobile.tags.mk-settings-page.profile%%fa:angle-right%</a></li>
|
||||||
|
<li><router-link to="./settings/authorized-apps">%fa:puzzle-piece%%i18n:mobile.tags.mk-settings-page.applications%%fa:angle-right%</router-link></li>
|
||||||
|
<li><router-link to="./settings/twitter">%fa:B twitter%%i18n:mobile.tags.mk-settings-page.twitter-integration%%fa:angle-right%</router-link></li>
|
||||||
|
<li><router-link to="./settings/signin-history">%fa:sign-in-alt%%i18n:mobile.tags.mk-settings-page.signin-history%%fa:angle-right%</router-link></li>
|
||||||
|
</ul>
|
||||||
|
<ul>
|
||||||
|
<li><a @click="signout">%fa:power-off%%i18n:mobile.tags.mk-settings-page.signout%</a></li>
|
||||||
|
</ul>
|
||||||
|
<p><small>ver {{ v }} (葵 aoi)</small></p>
|
||||||
|
</div>
|
||||||
|
</mk-ui>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import Vue from 'vue';
|
||||||
|
import { version } from '../../../../config';
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
v: version
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
document.title = 'Misskey | %i18n:mobile.tags.mk-settings-page.settings%';
|
||||||
|
document.documentElement.style.background = '#313a42';
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
signout() {
|
||||||
|
(this as any).os.signout();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="stylus" module>
|
||||||
|
.content
|
||||||
|
|
||||||
|
> p
|
||||||
|
display block
|
||||||
|
margin 24px
|
||||||
|
text-align center
|
||||||
|
color #cad2da
|
||||||
|
|
||||||
|
> ul
|
||||||
|
$radius = 8px
|
||||||
|
|
||||||
|
display block
|
||||||
|
margin 16px auto
|
||||||
|
padding 0
|
||||||
|
max-width 500px
|
||||||
|
width calc(100% - 32px)
|
||||||
|
list-style none
|
||||||
|
background #fff
|
||||||
|
border solid 1px rgba(0, 0, 0, 0.2)
|
||||||
|
border-radius $radius
|
||||||
|
|
||||||
|
> li
|
||||||
|
display block
|
||||||
|
border-bottom solid 1px #ddd
|
||||||
|
|
||||||
|
&:hover
|
||||||
|
background rgba(0, 0, 0, 0.1)
|
||||||
|
|
||||||
|
&:first-child
|
||||||
|
border-top-left-radius $radius
|
||||||
|
border-top-right-radius $radius
|
||||||
|
|
||||||
|
&:last-child
|
||||||
|
border-bottom-left-radius $radius
|
||||||
|
border-bottom-right-radius $radius
|
||||||
|
border-bottom none
|
||||||
|
|
||||||
|
> a
|
||||||
|
$height = 48px
|
||||||
|
|
||||||
|
display block
|
||||||
|
position relative
|
||||||
|
padding 0 16px
|
||||||
|
line-height $height
|
||||||
|
color #4d635e
|
||||||
|
|
||||||
|
> [data-fa]:nth-of-type(1)
|
||||||
|
margin-right 4px
|
||||||
|
|
||||||
|
> [data-fa]:nth-of-type(2)
|
||||||
|
display block
|
||||||
|
position absolute
|
||||||
|
top 0
|
||||||
|
right 8px
|
||||||
|
z-index 1
|
||||||
|
padding 0 20px
|
||||||
|
font-size 1.2em
|
||||||
|
line-height $height
|
||||||
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user