devsam/core
3
6
Fork 1
Code Issues 60 Pull Requests Releases 1 Wiki Activity

feat: MessagePanel, MessagePlate 색상 css 설정(wip)

Browse Source
This commit is contained in:
Hide_D
2023-03-09 02:20:22 +09:00
parent 7121f86a9c
commit 2467930afb
2 changed files with 212 additions and 71 deletions
Download Patch File Download Diff File Expand all files Collapse all files
hwe/ts/components/MessagePanel.vue
+106 -66
View File
@@ -1,64 +1,74 @@
<template>
<div class="MessageInputForm">메시지 입력</div>
<div class="PublicTalk">
<div>전체 메시지</div>
<template v-if="messagePublic.length == 0">
<div>메시지가 없습니다.</div>
</template>
<MessagePlate
v-for="msg of messagePublic"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</div>
<div class="NationalTalk">
<div>국가 메시지</div>
<template v-if="messageNational.length == 0">
<div>메시지가 없습니다.</div>
</template>
<MessagePlate
v-for="msg of messageNational"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</div>
<div class="PrivateTalk">
<div>개인 메시지</div>
<template v-if="messagePrivate.length == 0">
<div>메시지가 없습니다.</div>
</template>
<MessagePlate
v-for="msg of messagePrivate"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</div>
<div class="DiplomacyTalk">
<div>외교 메시지</div>
<template v-if="messageDiplomacy.length == 0">
<div>메시지가 없습니다.</div>
</template>
<MessagePlate
v-for="msg of messageDiplomacy"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
<div class="MessagePanel">
<div class="MessageInputForm">메시지 입력</div>
<div class="PublicTalk">
<div class="BoardHeader bg0">전체 메시지</div>
<template v-if="messagePublic.length == 0">
<div>메시지가 없습니다.</div>
</template>
<template v-else>
<MessagePlate
v-for="msg of messagePublic"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</template>
</div>
<div class="NationalTalk">
<div class="BoardHeader bg0">국가 메시지</div>
<template v-if="messageNational.length == 0">
<div>메시지가 없습니다.</div>
</template>
<template v-else>
<MessagePlate
v-for="msg of messageNational"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</template>
</div>
<div class="PrivateTalk">
<div class="BoardHeader bg0">개인 메시지</div>
<template v-if="messagePrivate.length == 0">
<div>메시지가 없습니다.</div>
</template>
<template v-else>
<MessagePlate
v-for="msg of messagePrivate"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</template>
</div>
<div class="DiplomacyTalk">
<div class="BoardHeader bg0">외교 메시지</div>
<template v-if="messageDiplomacy.length == 0">
<div>메시지가 없습니다.</div>
</template>
<template v-else>
<MessagePlate
v-for="msg of messageDiplomacy"
:key="msg.id"
:modelValue="msg"
:generalID="generalID"
:generalName="generalName"
:nationID="nationID"
:permissionLevel="permissionLevel"
></MessagePlate>
</template>
</div>
</div>
</template>
@@ -90,11 +100,6 @@ const generalName = toRef(props, "generalName");
const nationID = toRef(props, "nationID");
const permissionLevel = toRef(props, "permissionLevel");
onMounted(() => {
console.log("MessagePanel mounted");
console.log(props);
});
const lastSequence = ref(-1);
const initRefreshLimit = 20;
@@ -236,7 +241,7 @@ async function tryRefresh() {
} catch (e) {
if (isString(e)) {
toasts.warning({
title: '갱신 실패',
title: "갱신 실패",
body: e,
});
}
@@ -274,3 +279,38 @@ onMounted(async () => {
await tryRefresh();
});
</script>
<style lang="scss" scoped>
@import "@scss/common/break_500px.scss";
.BoardHeader {
color: white;
outline-style: solid;
outline-width: 1px;
outline-color: gray;
}
.PublicTalk {
}
@include media-1000px {
.MessagePanel{
display: grid;
grid-template-columns: 1fr 1fr;
}
.MessageInputForm{
grid-column: 1 / 3;
}
.PublicTalk{
border-right: 1px solid gray;
}
.PrivateTalk{
border-right: 1px solid gray;
}
}
</style>