mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-10-30 06:41:46 +09:00
Add analog clock widget
This commit is contained in:
parent
3d231c3456
commit
ae9bfd69b0
@ -54,6 +54,7 @@ common:
|
||||
my-token-regenerated: "あなたのトークンが更新されたのでサインアウトします。"
|
||||
|
||||
widgets:
|
||||
analog-clock: "アナログ時計"
|
||||
profile: "プロフィール"
|
||||
calendar: "カレンダー"
|
||||
timemachine: "カレンダー(タイムマシン)"
|
||||
|
@ -37,6 +37,12 @@ import Vue from 'vue';
|
||||
import { themeColor } from '../../../config';
|
||||
|
||||
export default Vue.extend({
|
||||
props: {
|
||||
dark: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
now: new Date(),
|
||||
@ -54,16 +60,17 @@ export default Vue.extend({
|
||||
},
|
||||
computed: {
|
||||
longGraduationColor(): string {
|
||||
return 'rgba(255, 255, 255, 0.3)';
|
||||
return this.dark ? 'rgba(255, 255, 255, 0.3)' : 'rgba(0, 0, 0, 0.3)';
|
||||
},
|
||||
shortGraduationColor(): string {
|
||||
return 'rgba(255, 255, 255, 0.2)';
|
||||
return this.dark ? 'rgba(255, 255, 255, 0.2)' : 'rgba(0, 0, 0, 0.2)';
|
||||
},
|
||||
|
||||
sHandColor(): string {
|
||||
return 'rgba(255, 255, 255, 0.5)';
|
||||
return this.dark ? 'rgba(255, 255, 255, 0.5)' : 'rgba(0, 0, 0, 0.3)';
|
||||
},
|
||||
mHandColor(): string {
|
||||
return '#fff';
|
||||
return this.dark ? '#fff' : '#777';
|
||||
},
|
||||
hHandColor(): string {
|
||||
return themeColor;
|
||||
@ -78,6 +85,7 @@ export default Vue.extend({
|
||||
h(): number {
|
||||
return this.now.getHours();
|
||||
},
|
||||
|
||||
hAngle(): number {
|
||||
return Math.PI * (this.h % 12 + this.m / 60) / 6;
|
||||
},
|
||||
@ -115,6 +123,4 @@ export default Vue.extend({
|
||||
<style lang="stylus" scoped>
|
||||
.mk-analog-clock
|
||||
display block
|
||||
width 256px
|
||||
height 256px
|
||||
</style>
|
@ -1,5 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import analogClock from './analog-clock.vue';
|
||||
import signin from './signin.vue';
|
||||
import signup from './signup.vue';
|
||||
import forkit from './forkit.vue';
|
||||
@ -27,6 +28,7 @@ import Switch from './switch.vue';
|
||||
import Othello from './othello.vue';
|
||||
import welcomeTimeline from './welcome-timeline.vue';
|
||||
|
||||
Vue.component('mk-analog-clock', analogClock);
|
||||
Vue.component('mk-signin', signin);
|
||||
Vue.component('mk-signup', signup);
|
||||
Vue.component('mk-forkit', forkit);
|
||||
|
41
src/client/app/common/views/widgets/analog-clock.vue
Normal file
41
src/client/app/common/views/widgets/analog-clock.vue
Normal file
@ -0,0 +1,41 @@
|
||||
<template>
|
||||
<div class="mkw-analog-clock">
|
||||
<mk-widget-container :naked="props.naked" :show-header="false">
|
||||
<div class="mkw-analog-clock--body">
|
||||
<mk-analog-clock :dark="$store.state.device.darkmode"/>
|
||||
</div>
|
||||
</mk-widget-container>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import define from '../../../common/define-widget';
|
||||
export default define({
|
||||
name: 'analog-clock',
|
||||
props: () => ({
|
||||
naked: false
|
||||
})
|
||||
}).extend({
|
||||
methods: {
|
||||
func() {
|
||||
this.props.naked = !this.props.naked;
|
||||
this.save();
|
||||
}
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="stylus" scoped>
|
||||
@import '~const.styl'
|
||||
|
||||
root(isDark)
|
||||
.mkw-analog-clock--body
|
||||
padding 8px
|
||||
|
||||
.mkw-analog-clock[data-darkmode]
|
||||
root(true)
|
||||
|
||||
.mkw-analog-clock:not([data-darkmode])
|
||||
root(false)
|
||||
|
||||
</style>
|
@ -1,5 +1,6 @@
|
||||
import Vue from 'vue';
|
||||
|
||||
import wAnalogClock from './analog-clock.vue';
|
||||
import wVersion from './version.vue';
|
||||
import wRss from './rss.vue';
|
||||
import wServer from './server.vue';
|
||||
@ -12,6 +13,7 @@ import wTips from './tips.vue';
|
||||
import wDonation from './donation.vue';
|
||||
import wNav from './nav.vue';
|
||||
|
||||
Vue.component('mkw-analog-clock', wAnalogClock);
|
||||
Vue.component('mkw-nav', wNav);
|
||||
Vue.component('mkw-calendar', wCalendar);
|
||||
Vue.component('mkw-photo-stream', wPhotoStream);
|
||||
|
@ -7,6 +7,7 @@
|
||||
<p>%i18n:@add-widget%</p>
|
||||
<select v-model="widgetAdderSelected">
|
||||
<option value="profile">%i18n:common.widgets.profile%</option>
|
||||
<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
|
||||
<option value="calendar">%i18n:common.widgets.calendar%</option>
|
||||
<option value="timemachine">%i18n:common.widgets.timemachine%</option>
|
||||
<option value="activity">%i18n:common.widgets.activity%</option>
|
||||
|
@ -9,7 +9,6 @@ import subNoteContent from './sub-note-content.vue';
|
||||
import window from './window.vue';
|
||||
import noteFormWindow from './post-form-window.vue';
|
||||
import renoteFormWindow from './renote-form-window.vue';
|
||||
import analogClock from './analog-clock.vue';
|
||||
import ellipsisIcon from './ellipsis-icon.vue';
|
||||
import mediaImage from './media-image.vue';
|
||||
import mediaImageDialog from './media-image-dialog.vue';
|
||||
@ -40,7 +39,6 @@ Vue.component('mk-sub-note-content', subNoteContent);
|
||||
Vue.component('mk-window', window);
|
||||
Vue.component('mk-post-form-window', noteFormWindow);
|
||||
Vue.component('mk-renote-form-window', renoteFormWindow);
|
||||
Vue.component('mk-analog-clock', analogClock);
|
||||
Vue.component('mk-ellipsis-icon', ellipsisIcon);
|
||||
Vue.component('mk-media-image', mediaImage);
|
||||
Vue.component('mk-media-image-dialog', mediaImageDialog);
|
||||
|
@ -8,7 +8,7 @@
|
||||
</time>
|
||||
</div>
|
||||
<div class="content">
|
||||
<mk-analog-clock/>
|
||||
<mk-analog-clock :dark="true"/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -9,6 +9,7 @@
|
||||
<header>
|
||||
<select v-model="widgetAdderSelected">
|
||||
<option value="profile">%i18n:common.widgets.profile%</option>
|
||||
<option value="analog-clock">%i18n:common.widgets.analog-clock%</option>
|
||||
<option value="calendar">%i18n:common.widgets.calendar%</option>
|
||||
<option value="activity">%i18n:common.widgets.activity%</option>
|
||||
<option value="rss">%i18n:common.widgets.rss%</option>
|
||||
|
Loading…
Reference in New Issue
Block a user