Creato componente contenitore messaggio, impostata bozza della visualizzazione di una chat TODO Routing e Keyboard

master
reddigriz 2 years ago
parent f5d6da421a
commit 90b37f7297

@ -2,7 +2,7 @@
"name": "geografia_vue",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"dev": "vite --host",
"build": "vite build",
"preview": "vite preview --port 4173",
"test:unit": "vitest --environment jsdom",

@ -1,19 +1,12 @@
<template>
<div id="ChatHistory">
{v-for key="messages" message in history.messages
<ChatMsg />
}
<div id="WriteMsg" border-radius="100%" color="white" background="blue">
+
</div>
{v-if (WriteMsg)} <Keyboard />
</div>
</template>
<script>
import Keyboard from "./Keyboard.vue";
export default {
components: { Keyboard },
components: { },
setup() {},
};
</script>

@ -1,18 +1,23 @@
<script setup>
import ChatPreview from "@/components/ChatPreview.vue";
import ChatMsg from "@/components/ChatMsg.vue";
</script>
<template>
<div id="background">
<li :key="chat.id" v-for="chat in history">
<ChatPreview
:chatName=chat.name
:chatLastMsg=chat.last_msg
:chatSeen=chat.seen
:chatDate=chat.date
:chatNewMessages=chat.new_messages
<ChatPreview
:chat-name="chat.name"
:chat-last-msg="chat.last_msg"
:chat-seen="chat.seen"
:chat-date="chat.date"
:chat-new-messages="chat.new_messages"
/>
</li>
<ChatMsg
:msg-text="history.chats.last_msg"
:is-user="history.chats.is_user"
/>
</div>
</template>
@ -25,10 +30,11 @@ export default {
chats: {
id: 1,
name: "test-name",
last_msg: "test-msg",
last_msg: "🐱⛸️➡️?",
seen: false,
date: "25/08/22",
new_messages: 1,
is_user: false,
},
},
};

@ -1,15 +1,65 @@
<template>
<div class="chat-msg">
{{v-if MsgSender != "user"}}
$MsgType = "Receiver"
<div class="$MsgType">Sent text here</div>
<div
v-bind:class="[isUser ? 'mainUserMsg' : 'secondaryUserMsg']"
class="bubble bubble-bottom-left"
>
<p>{{ msgText }}</p>
</div>
</template>
<script>
export default {
setup() {},
props: {
msgText: String,
isUser: Boolean,
},
};
</script>
<style scoped></style>
<style scoped>
.mainUserMsg {
--chat-bg-color: #368dda;
--msg-position: absolute;
--msg-right: 0;
--msg-border-right: 24px solid var(--chat-bg-color);
--msg-border-left: 12px solid transparent;
--msg-border-position-left: 70%;
}
.secondaryUserMsg {
--chat-bg-color: green;
--msg-position: relative;
--msg-right: none;
--msg-border-right: 12px solid transparent;
--msg-border-left: 24px solid var(--chat-bg-color);
--msg-border-position-left: 12%;
}
.bubble {
position: var(--msg-position);
right: var(--msg-right);
font-family: sans-serif;
font-size: 18px;
line-height: 24px;
width: 200px;
background: var(--chat-bg-color);
border-radius: 40px;
padding: 20px;
text-align: center;
color: black;
}
.bubble-bottom-left:before {
content: "";
width: 0px;
height: 0px;
position: absolute;
border-right: var(--msg-border-right);
border-left: var(--msg-border-left);
border-top: 12px solid var(--chat-bg-color) fff;
border-bottom: 25px solid transparent;
left: var(--msg-border-position-left);
right: var(--msg-border-position-right);
bottom: -24px;
}
</style>

@ -41,16 +41,6 @@ export default {
chatDate: String,
chatNewMessages: Number,
},
methods: {
fetchCats(){
var url = "https://api.thecatapi.com/v1/images/search?api_key=live_wErMWjgaxvhV4nsfoyHxwyvscBbfBW606hsQB6iWeG4oLY0IleWSKrs2XgQaQIYB"
fetch(url).then((response) => {
return response.json()
}).then((data)=>{
return data.url
})
},
}
};
</script>

@ -0,0 +1,19 @@
<script setup>
import Keyboard from "./Keyboard.vue";
import ChatHistory from "./ChatHistory.vue";
</script>
<template>
<div>
<ChatHistory />
<v-if="writeMessage" Keyboard />
</div>
</template>
<script>
export default {
setup() {},
};
</script>
<style scoped></style>
Loading…
Cancel
Save