sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Exploreページを実装

Browse Source
This commit is contained in:
syuilo
2019-02-16 06:50:58 +09:00
parent 8c8f165a6e
commit c2b1bbeec5
20 changed files with 462 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

106
src/client/app/desktop/views/components/ui-container.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="kedshtep" :class="{ naked }">
<div class="kedshtep" :class="{ naked, inDeck }">
<header v-if="showHeader">
<div class="title"><slot name="header"></slot></div>
<slot name="func"></slot>
@@ -31,6 +31,11 @@ export default Vue.extend({
default: false
},
},
inject: {
inDeck: {
default: false
}
},
data() {
return {
showBody: true
@@ -41,49 +46,72 @@ export default Vue.extend({
<style lang="stylus" scoped>
.kedshtep
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
overflow hidden
&.naked
background transparent !important
box-shadow none !important
&:not(.inDeck)
background var(--face)
box-shadow var(--shadow)
border-radius var(--round)
> header
background var(--faceHeader)
& + .kedshtep
margin-top 16px
> .title
z-index 1
&.naked
background transparent !important
box-shadow none !important
> header
background var(--faceHeader)
> .title
z-index 1
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color var(--faceHeaderText)
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
> [data-icon]
margin-right 6px
&:empty
display none
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color var(--faceTextButton)
&:hover
color var(--faceTextButtonHover)
&:active
color var(--faceTextButtonActive)
&.inDeck
background var(--face)
> header
margin 0
padding 0 16px
line-height 42px
font-size 0.9em
font-weight bold
color var(--faceHeaderText)
box-shadow 0 var(--lineWidth) rgba(#000, 0.07)
padding 8px 16px
font-size 12px
color var(--text)
background var(--deckColumnBg)
> [data-icon]
margin-right 6px
&:empty
display none
> button
position absolute
z-index 2
top 0
right 0
padding 0
width 42px
font-size 0.9em
line-height 42px
color var(--faceTextButton)
&:hover
color var(--faceTextButtonHover)
&:active
color var(--faceTextButtonActive)
> button
position absolute
top 0
right 8px
padding 8px 6px
font-size 14px
color var(--text)
</style>

17
src/client/app/desktop/views/components/ui.header.account.vue
View File

@@ -60,6 +60,13 @@
</li>
</ul>
<ul>
<li @click="toggleDeckMode">
<p>
<span>{{ $t('@.deck') }}</span>
<template v-if="$store.state.device.deckMode"><i><fa :icon="faHome"/></i></template>
<template v-else><i><fa :icon="faColumns"/></i></template>
</p>
</li>
<li @click="dark">
<p>
<span>{{ $t('dark') }}</span>
@@ -90,12 +97,14 @@ import MkFollowRequestsWindow from './received-follow-requests-window.vue';
import MkSettingsWindow from './settings-window.vue';
import MkDriveWindow from './drive-window.vue';
import contains from '../../../common/scripts/contains';
import { faHome, faColumns } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
i18n: i18n('desktop/views/components/ui.header.account.vue'),
data() {
return {
isOpen: false
isOpen: false,
faHome, faColumns
};
},
computed: {
@@ -154,7 +163,11 @@ export default Vue.extend({
key: 'darkmode',
value: !this.$store.state.device.darkmode
});
}
},
toggleDeckMode() {
this.$store.commit('device/set', { key: 'deckMode', value: !this.$store.state.device.deckMode });
location.reload();
},
}
});
</script>

68
src/client/app/desktop/views/components/ui.header.messaging.vue Normal file
View File

@@ -0,0 +1,68 @@
<template>
<div class="toltmoik">
<button @click="open()" :title="$t('@.messaging')">
<i class="bell"><fa :icon="faComments"/></i>
<i class="circle" v-if="hasUnreadMessagingMessage"><fa icon="circle"/></i>
</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import MkMessagingWindow from './messaging-window.vue';
import { faComments } from '@fortawesome/free-regular-svg-icons';
export default Vue.extend({
i18n: i18n(),
data() {
return {
faComments
};
},
computed: {
hasUnreadMessagingMessage(): boolean {
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
}
},
methods: {
open() {
this.$root.new(MkMessagingWindow);
},
}
});
</script>
<style lang="stylus" scoped>
.toltmoik
> button
display block
margin 0
padding 0
width 32px
color var(--desktopHeaderFg)
border none
background transparent
cursor pointer
*
pointer-events none
&:hover
&[data-active='true']
color var(--desktopHeaderHoverFg)
> i.bell
font-size 1.2em
line-height 48px
> i.circle
margin-left -5px
vertical-align super
font-size 10px
color var(--notificationIndicator)
</style>

50
src/client/app/desktop/views/components/ui.header.nav.vue
View File

@@ -1,34 +1,15 @@
<template>
<div class="nav">
<ul>
<template v-if="$store.getters.isSignedIn">
<template v-if="$store.state.device.deckMode">
<li class="deck active" @click="goToTop">
<router-link to="/"><fa icon="columns"/><p>{{ $t('deck') }}</p></router-link>
</li>
<li class="home">
<a @click="toggleDeckMode(false)"><fa icon="home"/><p>{{ $t('home') }}</p></a>
</li>
</template>
<template v-else>
<li class="home active" @click="goToTop">
<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
</li>
<li class="deck">
<a @click="toggleDeckMode(true)"><fa icon="columns"/><p>{{ $t('deck') }}</p></a>
</li>
</template>
<li class="messaging">
<a @click="messaging">
<fa icon="comments"/>
<p>{{ $t('@.messaging') }}</p>
<template v-if="hasUnreadMessagingMessage"><fa icon="circle"/></template>
</a>
</li>
</template>
<li class="home active" @click="goToTop">
<router-link to="/"><fa icon="home"/><p>{{ $t('home') }}</p></router-link>
</li>
<li class="featured">
<router-link to="/featured"><fa :icon="faNewspaper"/><p>{{ $t('@.featured-notes') }}</p></router-link>
</li>
<li class="explore">
<router-link to="/explore"><fa :icon="faHashtag"/><p>{{ $t('@.explore') }}</p></router-link>
</li>
<li class="game">
<a @click="game">
<fa icon="gamepad"/>
@@ -43,9 +24,8 @@
<script lang="ts">
import Vue from 'vue';
import i18n from '../../../i18n';
import MkMessagingWindow from './messaging-window.vue';
import MkGameWindow from './game-window.vue';
import { faNewspaper } from '@fortawesome/free-solid-svg-icons';
import { faNewspaper, faHashtag } from '@fortawesome/free-solid-svg-icons';
export default Vue.extend({
i18n: i18n('desktop/views/components/ui.header.nav.vue'),
@@ -53,14 +33,9 @@ export default Vue.extend({
return {
hasGameInvitations: false,
connection: null,
faNewspaper
faNewspaper, faHashtag
};
},
computed: {
hasUnreadMessagingMessage(): boolean {
return this.$store.getters.isSignedIn && this.$store.state.i.hasUnreadMessagingMessage;
}
},
mounted() {
if (this.$store.getters.isSignedIn) {
this.connection = this.$root.stream.useSharedConnection('main');
@@ -75,11 +50,6 @@ export default Vue.extend({
}
},
methods: {
toggleDeckMode(deck) {
this.$store.commit('device/set', { key: 'deckMode', value: deck });
location.reload();
},
onReversiInvited() {
this.hasGameInvitations = true;
},
@@ -88,10 +58,6 @@ export default Vue.extend({
this.hasGameInvitations = false;
},
messaging() {
this.$root.new(MkMessagingWindow);
},
game() {
this.$root.new(MkGameWindow);
},

3
src/client/app/desktop/views/components/ui.header.vue
View File

@@ -16,6 +16,7 @@
<div class="right">
<x-search/>
<x-account v-if="$store.getters.isSignedIn"/>
<x-messaging v-if="$store.getters.isSignedIn"/>
<x-notifications v-if="$store.getters.isSignedIn"/>
<x-post v-if="$store.getters.isSignedIn"/>
<x-clock v-if="$store.state.settings.showClockOnHeader" class="clock"/>
@@ -37,6 +38,7 @@ import XAccount from './ui.header.account.vue';
import XNotifications from './ui.header.notifications.vue';
import XPost from './ui.header.post.vue';
import XClock from './ui.header.clock.vue';
import XMessaging from './ui.header.messaging.vue';
export default Vue.extend({
i18n: i18n(),
@@ -45,6 +47,7 @@ export default Vue.extend({
XSearch,
XAccount,
XNotifications,
XMessaging,
XPost,
XClock
},

4
src/client/app/desktop/views/components/user-card.vue
View File

@@ -41,7 +41,6 @@ export default Vue.extend({
height 280px
overflow hidden
font-size 13px
text-align center
background $bg
box-shadow 0 2px 4px rgba(0, 0, 0, 0.1)
color var(--faceText)
@@ -54,7 +53,7 @@ export default Vue.extend({
> .avatar
display block
margin -40px auto 0 auto
margin -40px 0 0 16px
width 80px
height 80px
border-radius 100%
@@ -67,6 +66,7 @@ export default Vue.extend({
> .body
padding 0px 24px
margin-top -40px
> .name
font-size 120%