mirror/cherrypick
1
1
Fork 0
mirror of https://github.com/kokonect-link/cherrypick synced 2024-10-31 07:11:47 +09:00
Code

wip

Browse Source
This commit is contained in:
syuilo 2021-02-16 22:49:37 +09:00
parent 911dedf3d7
commit 9c1e42cc9b
2 changed files with 45 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/client/ui/chat/index.vue
View File

@ -121,8 +121,8 @@
</footer> </footer>
</main> </main>
<XSide class="side" ref="side"/> <XSide class="side" ref="side" @open="sideViewOpening = true" @close="sideViewOpening = false"/>
<div class="side"> <div class="side widgets" :class="{ sideViewOpening }">
<XWidgets/> <XWidgets/>
</div> </div>
@ -193,6 +193,7 @@ export default defineComponent({
featuredChannels: null, featuredChannels: null,
currentChannel: null, currentChannel: null,
menuDef: sidebarDef, menuDef: sidebarDef,
sideViewOpening: false,
instanceName, instanceName,
faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope, faLayerGroup, faBars, faBell, faHome, faCircle, faPencilAlt, faShareAlt, faSatelliteDish, faListUl, faSatellite, faCog, faSearch, faPlus, faStar, farStar, faAt, faLink, faEllipsisH, faGlobe, faComments, faEnvelope,
}; };
@ -564,6 +565,12 @@ export default defineComponent({
> .side { > .side {
width: 350px; width: 350px;
border-left: solid 1px var(--divider); border-left: solid 1px var(--divider);
&.widgets.sideViewOpening {
@media (max-width: 1400px) {
display: none;
}
}
} }
} }
</style> </style>

74
src/client/ui/chat/side.vue
View File

@ -1,13 +1,11 @@
<template> <template>
<div class="qvzfzxam _narrow_" v-if="component"> <div class="mrajymqm _narrow_" v-if="component">
<div class="container"> <header class="header" @contextmenu.prevent.stop="onContextmenu">
<header class="header" @contextmenu.prevent.stop="onContextmenu"> <button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button>
<button class="_button" @click="back()" v-if="history.length > 0"><Fa :icon="faChevronLeft"/></button> <XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/>
<XHeader class="title" :info="pageInfo" :with-back="false" :center="false"/> <button class="_button" @click="close()"><Fa :icon="faTimes"/></button>
<button class="_button" @click="close()"><Fa :icon="faTimes"/></button> </header>
</header> <component :is="component" v-bind="props" :ref="changePage"/>
<component :is="component" v-bind="props" :ref="changePage"/>
</div>
</div> </div>
</template> </template>
@ -64,6 +62,7 @@ export default defineComponent({
const { component, props } = resolve(path); const { component, props } = resolve(path);
this.component = component; this.component = component;
this.props = props; this.props = props;
this.$emit('open');
}, },
back() { back() {
@ -74,6 +73,7 @@ export default defineComponent({
this.path = null; this.path = null;
this.component = null; this.component = null;
this.props = {}; this.props = {};
this.$emit('close');
}, },
onContextmenu(e) { onContextmenu(e) {
@ -114,46 +114,44 @@ export default defineComponent({
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.qvzfzxam { .mrajymqm {
$header-height: 54px; // TODO: どこかに集約したい $header-height: 54px; // TODO: どこかに集約したい
--section-padding: 16px; --section-padding: 16px;
--margin: var(--marginHalf); --margin: var(--marginHalf);
> .container { height: 100%;
height: 100%; overflow: auto;
overflow: auto; box-sizing: border-box;
> .header {
display: flex;
position: sticky;
z-index: 1000;
top: 0;
height: $header-height;
width: 100%;
line-height: $header-height;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
border-bottom: solid 1px var(--divider);
box-sizing: border-box; box-sizing: border-box;
> .header { > ._button {
display: flex;
position: sticky;
z-index: 1000;
top: 0;
height: $header-height; height: $header-height;
width: 100%; width: $header-height;
line-height: $header-height;
font-weight: bold;
//background-color: var(--panel);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
background-color: var(--header);
border-bottom: solid 1px var(--divider);
box-sizing: border-box;
> ._button { &:hover {
height: $header-height; color: var(--fgHighlighted);
width: $header-height;
&:hover {
color: var(--fgHighlighted);
}
} }
}
> .title { > .title {
flex: 1; flex: 1;
position: relative; position: relative;
}
} }
} }
} }