diff options
Diffstat (limited to 'src/client/app/common')
| -rw-r--r-- | src/client/app/common/scripts/can-hide-text.ts | 16 | ||||
| -rw-r--r-- | src/client/app/common/scripts/streaming/home.ts | 11 | ||||
| -rw-r--r-- | src/client/app/common/views/components/acct.vue | 19 | ||||
| -rw-r--r-- | src/client/app/common/views/components/avatar.vue | 2 | ||||
| -rw-r--r-- | src/client/app/common/views/components/index.ts | 2 | ||||
| -rw-r--r-- | src/client/app/common/views/components/url-preview.vue | 17 | ||||
| -rw-r--r-- | src/client/app/common/views/widgets/calendar.vue | 185 | ||||
| -rw-r--r-- | src/client/app/common/views/widgets/rss.vue | 10 |
8 files changed, 153 insertions, 109 deletions
diff --git a/src/client/app/common/scripts/can-hide-text.ts b/src/client/app/common/scripts/can-hide-text.ts new file mode 100644 index 0000000000..4a4be8d9d0 --- /dev/null +++ b/src/client/app/common/scripts/can-hide-text.ts @@ -0,0 +1,16 @@ +export default function(note) { + if (note.text == null) return true; + + let txt = note.text; + + if (note.media) { + note.media.forEach(file => { + txt = txt.replace(file.url, ''); + if (file.src) txt = txt.replace(file.src, ''); + }); + + if (txt == '') return true; + } + + return false; +} diff --git a/src/client/app/common/scripts/streaming/home.ts b/src/client/app/common/scripts/streaming/home.ts index 32685f3c2c..09d830bece 100644 --- a/src/client/app/common/scripts/streaming/home.ts +++ b/src/client/app/common/scripts/streaming/home.ts @@ -48,6 +48,17 @@ export class HomeStream extends Stream { } }); + this.on('mobile_home_updated', x => { + if (x.home) { + os.store.commit('settings/setMobileHome', x.home); + } else { + os.store.commit('settings/setMobileHomeWidget', { + id: x.id, + data: x.data + }); + } + }); + // トークンが再生成されたとき // このままではMisskeyが利用できないので強制的にサインアウトさせる this.on('my_token_regenerated', () => { diff --git a/src/client/app/common/views/components/acct.vue b/src/client/app/common/views/components/acct.vue new file mode 100644 index 0000000000..1ad222afdd --- /dev/null +++ b/src/client/app/common/views/components/acct.vue @@ -0,0 +1,19 @@ +<template> +<span class="mk-acct"> + <span class="name">@{{ user.username }}</span> + <span class="host" v-if="user.host">@{{ user.host }}</span> +</span> +</template> + +<script lang="ts"> +import Vue from 'vue'; +export default Vue.extend({ + props: ['user'] +}); +</script> + +<style lang="stylus" scoped> +.mk-acct + > .host + opacity 0.5 +</style> diff --git a/src/client/app/common/views/components/avatar.vue b/src/client/app/common/views/components/avatar.vue index a4648c272e..8ec359e83c 100644 --- a/src/client/app/common/views/components/avatar.vue +++ b/src/client/app/common/views/components/avatar.vue @@ -23,7 +23,7 @@ export default Vue.extend({ computed: { style(): any { return { - backgroundColor: this.user.avatarColor ? `rgb(${ this.user.avatarColor.join(',') })` : null, + backgroundColor: this.user.avatarColor && this.user.avatarColor.length == 3 ? `rgb(${ this.user.avatarColor.join(',') })` : null, backgroundImage: `url(${ this.user.avatarUrl }?thumbnail)`, borderRadius: (this as any).clientSettings.circleIcons ? '100%' : null }; diff --git a/src/client/app/common/views/components/index.ts b/src/client/app/common/views/components/index.ts index 69fed00c74..c1a7bc61d7 100644 --- a/src/client/app/common/views/components/index.ts +++ b/src/client/app/common/views/components/index.ts @@ -3,6 +3,7 @@ import Vue from 'vue'; import signin from './signin.vue'; import signup from './signup.vue'; import forkit from './forkit.vue'; +import acct from './acct.vue'; import avatar from './avatar.vue'; import nav from './nav.vue'; import noteHtml from './note-html'; @@ -29,6 +30,7 @@ import welcomeTimeline from './welcome-timeline.vue'; Vue.component('mk-signin', signin); Vue.component('mk-signup', signup); Vue.component('mk-forkit', forkit); +Vue.component('mk-acct', acct); Vue.component('mk-avatar', avatar); Vue.component('mk-nav', nav); Vue.component('mk-note-html', noteHtml); diff --git a/src/client/app/common/views/components/url-preview.vue b/src/client/app/common/views/components/url-preview.vue index 3bae6e5078..028b911e24 100644 --- a/src/client/app/common/views/components/url-preview.vue +++ b/src/client/app/common/views/components/url-preview.vue @@ -126,16 +126,21 @@ root(isDark) line-height 16px vertical-align top + @media (max-width 700px) + > .thumbnail + position relative + width 100% + height 100px + + & + article + left 0 + width 100% + @media (max-width 500px) font-size 8px - border none > .thumbnail - width 70px - - & + article - left 70px - width calc(100% - 70px) + height 70px > article padding 8px diff --git a/src/client/app/common/views/widgets/calendar.vue b/src/client/app/common/views/widgets/calendar.vue index 41e9253784..0e9714960a 100644 --- a/src/client/app/common/views/widgets/calendar.vue +++ b/src/client/app/common/views/widgets/calendar.vue @@ -1,37 +1,37 @@ <template> -<div class="mkw-calendar" - :data-melt="props.design == 1" - :data-special="special" - :data-mobile="isMobile" -> - <div class="calendar" :data-is-holiday="isHoliday"> - <p class="month-and-year"> - <span class="year">{{ year }}年</span> - <span class="month">{{ month }}月</span> - </p> - <p class="day">{{ day }}日</p> - <p class="week-day">{{ weekDay }}曜日</p> - </div> - <div class="info"> - <div> - <p>今日:<b>{{ dayP.toFixed(1) }}%</b></p> - <div class="meter"> - <div class="val" :style="{ width: `${dayP}%` }"></div> +<div class="mkw-calendar" :data-special="special" :data-mobile="isMobile"> + <mk-widget-container :naked="props.design == 1" :show-header="false"> + <div class="mkw-calendar--body"> + <div class="calendar" :data-is-holiday="isHoliday"> + <p class="month-and-year"> + <span class="year">{{ year }}年</span> + <span class="month">{{ month }}月</span> + </p> + <p class="day">{{ day }}日</p> + <p class="week-day">{{ weekDay }}曜日</p> </div> - </div> - <div> - <p>今月:<b>{{ monthP.toFixed(1) }}%</b></p> - <div class="meter"> - <div class="val" :style="{ width: `${monthP}%` }"></div> - </div> - </div> - <div> - <p>今年:<b>{{ yearP.toFixed(1) }}%</b></p> - <div class="meter"> - <div class="val" :style="{ width: `${yearP}%` }"></div> + <div class="info"> + <div> + <p>今日:<b>{{ dayP.toFixed(1) }}%</b></p> + <div class="meter"> + <div class="val" :style="{ width: `${dayP}%` }"></div> + </div> + </div> + <div> + <p>今月:<b>{{ monthP.toFixed(1) }}%</b></p> + <div class="meter"> + <div class="val" :style="{ width: `${monthP}%` }"></div> + </div> + </div> + <div> + <p>今年:<b>{{ yearP.toFixed(1) }}%</b></p> + <div class="meter"> + <div class="val" :style="{ width: `${yearP}%` }"></div> + </div> + </div> </div> </div> - </div> + </mk-widget-container> </div> </template> @@ -111,93 +111,82 @@ export default define({ @import '~const.styl' root(isDark) - padding 16px 0 - color isDark ? #c5ced6 :#777 - background isDark ? #282C37 : #fff - border solid 1px rgba(#000, 0.075) - border-radius 6px - &[data-special='on-new-years-day'] border-color #ef95a0 - &[data-melt] - background transparent - border none - - &[data-mobile] - border none - border-radius 8px - box-shadow 0 0 0 1px rgba(#000, 0.2) + .mkw-calendar--body + padding 16px 0 + color isDark ? #c5ced6 : #777 - &:after - content "" - display block - clear both + &:after + content "" + display block + clear both - > .calendar - float left - width 60% - text-align center + > .calendar + float left + width 60% + text-align center - &[data-is-holiday] - > .day - color #ef95a0 + &[data-is-holiday] + > .day + color #ef95a0 - > p - margin 0 - line-height 18px - font-size 14px + > p + margin 0 + line-height 18px + font-size 14px - > span - margin 0 4px + > span + margin 0 4px - > .day - margin 10px 0 - line-height 32px - font-size 28px + > .day + margin 10px 0 + line-height 32px + font-size 28px - > .info - display block - float left - width 40% - padding 0 16px 0 0 + > .info + display block + float left + width 40% + padding 0 16px 0 0 - > div - margin-bottom 8px + > div + margin-bottom 8px - &:last-child - margin-bottom 4px + &:last-child + margin-bottom 4px - > p - margin 0 0 2px 0 - font-size 12px - line-height 18px - color isDark ? #7a8692 : #888 + > p + margin 0 0 2px 0 + font-size 12px + line-height 18px + color isDark ? #7a8692 : #888 - > b - margin-left 2px + > b + margin-left 2px - > .meter - width 100% - overflow hidden - background isDark ? #1c1f25 : #eee - border-radius 8px + > .meter + width 100% + overflow hidden + background isDark ? #1c1f25 : #eee + border-radius 8px - > .val - height 4px - background $theme-color + > .val + height 4px + background $theme-color - &:nth-child(1) - > .meter > .val - background #f7796c + &:nth-child(1) + > .meter > .val + background #f7796c - &:nth-child(2) - > .meter > .val - background #a1de41 + &:nth-child(2) + > .meter > .val + background #a1de41 - &:nth-child(3) - > .meter > .val - background #41ddde + &:nth-child(3) + > .meter > .val + background #41ddde .mkw-calendar[data-darkmode] root(true) diff --git a/src/client/app/common/views/widgets/rss.vue b/src/client/app/common/views/widgets/rss.vue index b5339add0b..9e2c6b6490 100644 --- a/src/client/app/common/views/widgets/rss.vue +++ b/src/client/app/common/views/widgets/rss.vue @@ -1,10 +1,10 @@ <template> -<div class="mkw-rss" :data-mobile="isMobile"> +<div class="mkw-rss"> <mk-widget-container :show-header="!props.compact"> <template slot="header">%fa:rss-square%RSS</template> <button slot="func" title="設定" @click="setting">%fa:cog%</button> - <div class="mkw-rss--body"> + <div class="mkw-rss--body" :data-mobile="isMobile"> <p class="fetching" v-if="fetching">%fa:spinner .pulse .fw%%i18n:common.loading%<mk-ellipsis/></p> <div class="feed" v-else> <a v-for="item in items" :href="item.link" target="_blank">{{ item.title }}</a> @@ -85,15 +85,17 @@ root(isDark) margin-right 4px &[data-mobile] + background isDark ? #21242f : #f3f3f3 + .feed padding 0 - font-size 1em > a padding 8px 16px + border-bottom none &:nth-child(even) - background rgba(#000, 0.05) + background isDark ? rgba(#000, 0.05) : rgba(#fff, 0.7) .mkw-rss[data-darkmode] root(true) |