Skip to content
Snippets Groups Projects
Commit 363cd2a6 authored by syuilo's avatar syuilo
Browse files

wip

parent 62152bfa
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/web/app/desktop/views/components/index.ts
+ 2
− 0
View file @ 363cd2a6
......@@ -40,6 +40,7 @@ import wSlideshow from './widgets/slideshow.vue';
import wTips from './widgets/tips.vue';
import wDonation from './widgets/donation.vue';
import wNotifications from './widgets/notifications.vue';
import wBroadcast from './widgets/broadcast.vue';
Vue.component('mk-ui', ui);
Vue.component('mk-ui-header', uiHeader);
......@@ -81,3 +82,4 @@ Vue.component('mkw-slideshoe', wSlideshow);
Vue.component('mkw-tips', wTips);
Vue.component('mkw-donation', wDonation);
Vue.component('mkw-notifications', wNotifications);
Vue.component('mkw-broadcast', wBroadcast);
src/web/app/desktop/-tags/home-widgets/broadcast.tag → src/web/app/desktop/views/components/widgets/broadcast.vue
+ 153
− 0
View file @ 363cd2a6
<mk-broadcast-home-widget data-found={ broadcasts.length != 0 } data-melt={ data.design == 1 }>
<template>
<div class="mkw-broadcast" :data-found="broadcasts.length != 0" :data-melt="props.design == 1">
<div class="icon">
<svg height="32" version="1.1" viewBox="0 0 32 32" width="32">
<path class="tower" d="M16.04,11.24c1.79,0,3.239-1.45,3.239-3.24S17.83,4.76,16.04,4.76c-1.79,0-3.24,1.45-3.24,3.24 C12.78,9.78,14.24,11.24,16.04,11.24z M16.04,13.84c-0.82,0-1.66-0.2-2.4-0.6L7.34,29.98h2.98l1.72-2h8l1.681,2H24.7L18.42,13.24 C17.66,13.64,16.859,13.84,16.04,13.84z M16.02,14.8l2.02,7.2h-4L16.02,14.8z M12.04,25.98l2-2h4l2,2H12.04z"></path>
......@@ -9,135 +10,144 @@
</svg>
</div>
<p class="fetching" v-if="fetching">%i18n:desktop.tags.mk-broadcast-home-widget.fetching%<mk-ellipsis/></p>
<h1 v-if="!fetching">{
broadcasts.length == 0 ? '%i18n:desktop.tags.mk-broadcast-home-widget.no-broadcasts%' : broadcasts[i].title
}</h1>
<p v-if="!fetching"><mk-raw v-if="broadcasts.length != 0" content={ broadcasts[i].text }/><template v-if="broadcasts.length == 0">%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</template></p>
<h1 v-if="!fetching">{{ broadcasts.length == 0 ? '%i18n:desktop.tags.mk-broadcast-home-widget.no-broadcasts%' : broadcasts[i].title }}</h1>
<p v-if="!fetching">
<span v-if="broadcasts.length != 0" :v-html="broadcasts[i].text"></span>
<template v-if="broadcasts.length == 0">%i18n:desktop.tags.mk-broadcast-home-widget.have-a-nice-day%</template>
</p>
<a v-if="broadcasts.length > 1" @click="next">%i18n:desktop.tags.mk-broadcast-home-widget.next% &gt;&gt;</a>
<style lang="stylus" scoped>
:scope
display block
padding 10px
border solid 1px #4078c0
border-radius 6px
</div>
</template>
<script lang="ts">
import define from '../../../../common/define-widget';
import { lang } from '../../../../config';
export default define({
name: 'broadcast',
props: {
design: 0
}
}).extend({
data() {
return {
i: 0,
fetching: true,
broadcasts: []
};
},
mounted() {
(this as any).os.getMeta().then(meta => {
let broadcasts = [];
if (meta.broadcasts) {
meta.broadcasts.forEach(broadcast => {
if (broadcast[lang]) {
broadcasts.push(broadcast[lang]);
}
});
}
this.fetching = false;
this.broadcasts = broadcasts;
});
},
methods: {
next() {
if (this.i == this.broadcasts.length - 1) {
this.i = 0;
} else {
this.i++;
}
},
func() {
if (this.props.design == 1) {
this.props.design = 0;
} else {
this.props.design++;
}
}
}
});
</script>
&[data-melt]
border none
<style lang="stylus" scoped>
.mkw-broadcast
padding 10px
border solid 1px #4078c0
border-radius 6px
&[data-found]
padding-left 50px
&[data-melt]
border none
> .icon
display block
&[data-found]
padding-left 50px
&:after
content ""
display block
clear both
> .icon
display block
> .icon
display none
float left
margin-left -40px
&:after
content ""
display block
clear both
> .icon
display none
float left
margin-left -40px
> svg
fill currentColor
color #4078c0
> .wave
opacity 1
&.a
animation wave 20s ease-in-out 2.1s infinite
&.b
animation wave 20s ease-in-out 2s infinite
&.c
animation wave 20s ease-in-out 2s infinite
&.d
animation wave 20s ease-in-out 2.1s infinite
@keyframes wave
0%
opacity 1
1.5%
opacity 0
3.5%
opacity 0
5%
opacity 1
6.5%
opacity 0
8.5%
opacity 0
10%
opacity 1
> svg
fill currentColor
color #4078c0
> h1
margin 0
font-size 0.95em
font-weight normal
color #4078c0
> .wave
opacity 1
> p
display block
z-index 1
margin 0
font-size 0.7em
color #555
&.a
animation wave 20s ease-in-out 2.1s infinite
&.b
animation wave 20s ease-in-out 2s infinite
&.c
animation wave 20s ease-in-out 2s infinite
&.d
animation wave 20s ease-in-out 2.1s infinite
@keyframes wave
0%
opacity 1
1.5%
opacity 0
3.5%
opacity 0
5%
opacity 1
6.5%
opacity 0
8.5%
opacity 0
10%
opacity 1
> h1
margin 0
font-size 0.95em
font-weight normal
color #4078c0
> p
display block
z-index 1
margin 0
font-size 0.7em
color #555
&.fetching
text-align center
a
color #555
text-decoration underline
> a
display block
font-size 0.7em
</style>
<script lang="typescript">
this.data = {
design: 0
};
&.fetching
text-align center
this.mixin('widget');
this.mixin('os');
this.i = 0;
this.fetching = true;
this.broadcasts = [];
this.on('mount', () => {
this.mios.getMeta().then(meta => {
let broadcasts = [];
if (meta.broadcasts) {
meta.broadcasts.forEach(broadcast => {
if (broadcast[_LANG_]) {
broadcasts.push(broadcast[_LANG_]);
}
});
}
this.update({
fetching: false,
broadcasts: broadcasts
});
});
});
a
color #555
text-decoration underline
this.next = () => {
if (this.i == this.broadcasts.length - 1) {
this.i = 0;
} else {
this.i++;
}
this.update();
};
> a
display block
font-size 0.7em
this.func = () => {
if (++this.data.design == 2) this.data.design = 0;
this.save();
};
</script>
</mk-broadcast-home-widget>
</style>
src/web/app/desktop/views/components/widgets/donation.vue
+ 1
− 1
View file @ 363cd2a6
......@@ -4,7 +4,7 @@
<h1>%fa:heart%%i18n:desktop.tags.mk-donation-home-widget.title%</h1>
<p>
{{ '%i18n:desktop.tags.mk-donation-home-widget.text%'.substr(0, '%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('{')) }}
<a href="/syuilo" v-user-preview="@syuilo">@syuilo</a>
<a href="https://syuilo.com">@syuilo</a>
{{ '%i18n:desktop.tags.mk-donation-home-widget.text%'.substr('%i18n:desktop.tags.mk-donation-home-widget.text%'.indexOf('}') + 1) }}
</p>
</article>
......
src/web/app/desktop/views/components/widgets/nav.vue
+ 1
− 1
View file @ 363cd2a6
<template>
<div class="mkw-nav">
<mk-nav-links/>
<mk-nav/>
</div>
</template>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment