summaryrefslogtreecommitdiff
path: root/src
diff options
context:
space:
mode:
Diffstat (limited to 'src')
-rw-r--r--src/web/app/common/tags/time.vue (renamed from src/web/app/common/tags/time.tag)59
-rw-r--r--src/web/app/common/tags/url-preview.tag117
-rw-r--r--src/web/app/common/tags/url-preview.vue124
3 files changed, 154 insertions, 146 deletions
diff --git a/src/web/app/common/tags/time.tag b/src/web/app/common/tags/time.vue
index b0d7d24533..14f38eb2db 100644
--- a/src/web/app/common/tags/time.tag
+++ b/src/web/app/common/tags/time.vue
@@ -1,36 +1,38 @@
-<mk-time>
- <time datetime={ opts.time }>
- <span if={ mode == 'relative' }>{ relative }</span>
- <span if={ mode == 'absolute' }>{ absolute }</span>
- <span if={ mode == 'detail' }>{ absolute } ({ relative })</span>
+<template>
+ <time>
+ <span v-if=" mode == 'relative' ">{{ relative }}</span>
+ <span v-if=" mode == 'absolute' ">{{ absolute }}</span>
+ <span v-if=" mode == 'detail' ">{{ absolute }} ({{ relative }})</span>
</time>
- <script>
- this.time = new Date(this.opts.time);
- this.mode = this.opts.mode || 'relative';
- this.tickid = null;
+</template>
- this.absolute =
- this.time.getFullYear() + '年' +
- (this.time.getMonth() + 1) + '月' +
- this.time.getDate() + '日' +
- ' ' +
- this.time.getHours() + '時' +
- this.time.getMinutes() + '分';
+<script>
+ export default {
+ props: ['time', 'mode'],
+ data: {
+ mode: 'relative',
+ tickId: null,
+ },
+ created: function() {
+ this.absolute =
+ this.time.getFullYear() + '年' +
+ (this.time.getMonth() + 1) + '月' +
+ this.time.getDate() + '日' +
+ ' ' +
+ this.time.getHours() + '時' +
+ this.time.getMinutes() + '分';
- this.on('mount', () => {
if (this.mode == 'relative' || this.mode == 'detail') {
this.tick();
- this.tickid = setInterval(this.tick, 1000);
+ this.tickId = setInterval(this.tick, 1000);
}
- });
-
- this.on('unmount', () => {
+ },
+ destroyed: function() {
if (this.mode === 'relative' || this.mode === 'detail') {
- clearInterval(this.tickid);
+ clearInterval(this.tickId);
}
- });
-
- this.tick = () => {
+ },
+ tick: function() {
const now = new Date();
const ago = (now - this.time) / 1000/*ms*/;
this.relative =
@@ -44,7 +46,6 @@
ago >= 0 ? '%i18n:common.time.just_now%' :
ago < 0 ? '%i18n:common.time.future%' :
'%i18n:common.time.unknown%';
- this.update();
- };
- </script>
-</mk-time>
+ }
+ };
+</script>
diff --git a/src/web/app/common/tags/url-preview.tag b/src/web/app/common/tags/url-preview.tag
deleted file mode 100644
index 7dbdd8fea2..0000000000
--- a/src/web/app/common/tags/url-preview.tag
+++ /dev/null
@@ -1,117 +0,0 @@
-<mk-url-preview>
- <a href={ url } target="_blank" title={ url } if={ !loading }>
- <div class="thumbnail" if={ thumbnail } style={ 'background-image: url(' + thumbnail + ')' }></div>
- <article>
- <header>
- <h1>{ title }</h1>
- </header>
- <p>{ description }</p>
- <footer>
- <img class="icon" if={ icon } src={ icon }/>
- <p>{ sitename }</p>
- </footer>
- </article>
- </a>
- <style>
- :scope
- display block
- font-size 16px
-
- > a
- display block
- border solid 1px #eee
- border-radius 4px
- overflow hidden
-
- &:hover
- text-decoration none
- border-color #ddd
-
- > article > header > h1
- text-decoration underline
-
- > .thumbnail
- position absolute
- width 100px
- height 100%
- background-position center
- background-size cover
-
- & + article
- left 100px
- width calc(100% - 100px)
-
- > article
- padding 16px
-
- > header
- margin-bottom 8px
-
- > h1
- margin 0
- font-size 1em
- color #555
-
- > p
- margin 0
- color #777
- font-size 0.8em
-
- > footer
- margin-top 8px
- height 16px
-
- > img
- display inline-block
- width 16px
- height 16px
- margin-right 4px
- vertical-align top
-
- > p
- display inline-block
- margin 0
- color #666
- font-size 0.8em
- line-height 16px
- vertical-align top
-
- @media (max-width 500px)
- font-size 8px
-
- > a
- border none
-
- > .thumbnail
- width 70px
-
- & + article
- left 70px
- width calc(100% - 70px)
-
- > article
- padding 8px
-
- </style>
- <script>
- this.mixin('api');
-
- this.url = this.opts.url;
- this.loading = true;
-
- this.on('mount', () => {
- fetch('/api:url?url=' + this.url).then(res => {
- res.json().then(info => {
- this.title = info.title;
- this.description = info.description;
- this.thumbnail = info.thumbnail;
- this.icon = info.icon;
- this.sitename = info.sitename;
-
- this.loading = false;
- this.update();
- });
- });
- });
- </script>
-</mk-url-preview>
diff --git a/src/web/app/common/tags/url-preview.vue b/src/web/app/common/tags/url-preview.vue
new file mode 100644
index 0000000000..45a718d3ec
--- /dev/null
+++ b/src/web/app/common/tags/url-preview.vue
@@ -0,0 +1,124 @@
+<template>
+ <a :href="url" target="_blank" :title="url" v-if="!fetching">
+ <div class="thumbnail" v-if="thumbnail" :style="`background-image: url(${thumbnail})`"></div>
+ <article>
+ <header>
+ <h1>{{ title }}</h1>
+ </header>
+ <p>{{ description }}</p>
+ <footer>
+ <img class="icon" v-if="icon" :src="icon"/>
+ <p>{{ sitename }}</p>
+ </footer>
+ </article>
+ </a>
+</template>
+
+<script lang="typescript">
+ export default {
+ props: ['url'],
+ created: function() {
+ fetch('/api:url?url=' + this.url).then(res => {
+ res.json().then(info => {
+ this.title = info.title;
+ this.description = info.description;
+ this.thumbnail = info.thumbnail;
+ this.icon = info.icon;
+ this.sitename = info.sitename;
+
+ this.fetching = false;
+ });
+ });
+ },
+ data: {
+ fetching: true,
+ title: null,
+ description: null,
+ thumbnail: null,
+ icon: null,
+ sitename: null
+ }
+ };
+</script>
+
+<style lang="stylus" scoped>
+ :scope
+ display block
+ font-size 16px
+
+ > a
+ display block
+ border solid 1px #eee
+ border-radius 4px
+ overflow hidden
+
+ &:hover
+ text-decoration none
+ border-color #ddd
+
+ > article > header > h1
+ text-decoration underline
+
+ > .thumbnail
+ position absolute
+ width 100px
+ height 100%
+ background-position center
+ background-size cover
+
+ & + article
+ left 100px
+ width calc(100% - 100px)
+
+ > article
+ padding 16px
+
+ > header
+ margin-bottom 8px
+
+ > h1
+ margin 0
+ font-size 1em
+ color #555
+
+ > p
+ margin 0
+ color #777
+ font-size 0.8em
+
+ > footer
+ margin-top 8px
+ height 16px
+
+ > img
+ display inline-block
+ width 16px
+ height 16px
+ margin-right 4px
+ vertical-align top
+
+ > p
+ display inline-block
+ margin 0
+ color #666
+ font-size 0.8em
+ line-height 16px
+ vertical-align top
+
+ @media (max-width 500px)
+ font-size 8px
+
+ > a
+ border none
+
+ > .thumbnail
+ width 70px
+
+ & + article
+ left 70px
+ width calc(100% - 70px)
+
+ > article
+ padding 8px
+
+</style>
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-04-21 12:27:10 +0000