Skip to content

Commit

Permalink
ノートからデスクトップへの移行
Browse files Browse the repository at this point in the history
  • Loading branch information
ryoha000 committed Apr 5, 2020
1 parent 16263d7 commit 8fe93b2
Show file tree
Hide file tree
Showing 3 changed files with 84 additions and 16 deletions.
Original file line number Diff line number Diff line change
@@ -1,11 +1,7 @@
<template>
<div :class="$style.container" :style="styles.container">
<div v-for="child in state.children" :key="child.id">
<span :class="$style.childHash" :style="styles.childHash">#</span>
<router-link :to="buildChannelLink(child)" :style="styles.child">
{{ child.name }}
</router-link>
</div>
<span :class="$style.channelHash" :style="styles.channelHash">#</span>
<span :style="styles.channel">{{ state.channel }}</span>
</div>
</template>

Expand Down Expand Up @@ -34,13 +30,18 @@ export default defineComponent({
props: { channelId: String },
setup(props: Props) {
const state = reactive({
children: computed(() => {
const { channelIdToChildrenSimpleChannel } = useChannelPath()
return channelIdToChildrenSimpleChannel(props.channelId)
channel: computed(() => {
const { channelIdToPath } = useChannelPath()
const channelArray: string[] = channelIdToPath(props.channelId)
console.log(channelArray)
if (channelArray.length === 0) {
return ""
}
return channelArray[channelArray.length - 1]
})
})
const buildChannelLink = (channel: ChannelTreeNode) =>
`${location.pathname}/${channel.name}`
const buildChannelLink = (channel: string) =>
`${location.pathname}/${channel}`
const styles = useStyles()
return { props, state, styles, buildChannelLink }
}
Expand All @@ -49,16 +50,17 @@ export default defineComponent({

<style lang="scss" module>
$childChannelSize: 1.5rem;
$channelSize: 1.5rem;
.container {
height: 100%;
}
.child {
font-size: $childChannelSize;
.channel {
font-size: $channelSize;
margin: 0 0.125rem;
}
.childHash {
font-size: $childChannelSize;
.channelHash {
font-size: $channelSize;
margin-right: 0.125rem;
margin-left: 27px;
user-select: none;
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,66 @@
<template>
<div :class="$style.container" :style="styles.container">
<span :class="$style.channelHash" :style="styles.channelHash">#</span>
<span :style="styles.channel">{{ state.channel }}</span>
</div>
</template>

<script lang="ts">
import { defineComponent, computed, reactive } from '@vue/composition-api'
import { ChannelId } from '@/types/entity-ids'
import store from '@/store'
import { makeStyles } from '@/lib/styles'
import useChannelPath from '@/use/channelPath'
type Props = {
channelId: ChannelId
}
const useStyles = () =>
reactive({
container: makeStyles(theme => ({
color: theme.ui.primary
}))
})
export default defineComponent({
name: 'ChannelSideBarHeaderName',
props: { channelId: String },
setup(props: Props) {
const state = reactive({
channel: computed(() => {
const { channelIdToPath } = useChannelPath()
const channelArray: string[] = channelIdToPath(props.channelId)
console.log(channelArray)
if (channelArray.length === 0) {
return ""
}
return channelArray[channelArray.length - 1]
})
})
const buildChannelLink = (channel: string) =>
`${location.pathname}/${channel}`
const styles = useStyles()
return { props, state, styles, buildChannelLink }
}
})
</script>

<style lang="scss" module>
$childChannelSize: 1.5rem;
$channelSize: 1.5rem;
.container {
height: 100%;
}
.channel {
font-size: $channelSize;
margin: 0 0.125rem;
}
.channelHash {
font-size: $channelSize;
margin-right: 0.125rem;
margin-left: 27px;
user-select: none;
}
</style>
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,7 @@ export default defineComponent({
<style lang="scss" module>
.container {
display: flex;
widows: 250px;
width: 250px;
height: 60px;
flex-direction: row-reverse;
justify-content: flex-end;
Expand Down

0 comments on commit 8fe93b2

Please sign in to comment.