graphite/Sharkey
1
0
Fork 0
mirror of https://git.joinsharkey.org/Sharkey/Sharkey.git synced 2024-12-24 01:23:07 +02:00
Code Issues Projects Releases Packages Wiki Activity

wip

Browse source
This commit is contained in:
syuilo 2018-02-20 13:02:53 +09:00
parent 161a91a69f
commit dfa98a038c
4 changed files with 320 additions and 347 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
src/web/app/mobile/tags/page/settings.tag
View file

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

247
src/web/app/mobile/tags/page/settings/profile.tag
View file

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