me/mime-chat
Watch
1
0
Fork
You've already forked mime-chat
 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

refactor messageItem functionality + update design

Browse source 
add dynamic title bar

updat Message object type
This commit is contained in:
riqo 2020-12-03 16:32:08 -06:00
commit f0f19687b0
9 changed files with 245 additions and 177 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/components/AI/index.vue
View file

@ -48,7 +48,7 @@ export default defineComponent({
let gradient;
const radius = ref(0);
const think = ref(false);
const aiOffset = ref(1.0);
const aiOffset = ref(0.7);
const anime = inject("animejs");
let thinkAnimation;
@ -100,24 +100,24 @@ export default defineComponent({
}
});
watch(think, async (think, prevThink) => {
if (think) {
anime({
targets: gradient,
cy: "0.7",
});
thinkAnimation.play();
} else {
thinkAnimation.pause();
// thinkAnimation.reset();
anime({
targets: gradient,
cy: "1",
});
// thinkAnimation.reset();
}
});
// watch(think, async (think, prevThink) => {
// if (think) {
// anime({
// targets: gradient,
// cy: "0.7",
// });
// thinkAnimation.play();
// } else {
// thinkAnimation.pause();
// // thinkAnimation.reset();
// anime({
// targets: gradient,
// cy: "1",
// });
//
// // thinkAnimation.reset();
// }
// });
return {
radius,
aiOffset,

19
src/components/UI/UIDetails/messageItem.vue
View file

@ -1,21 +1,26 @@
<template>
<g :id="item.id" :class="item.modifier" :transform="startingOffset">
<rect ref="messageRect" x="30" y="10" width="196" height="63" rx="20" :fill="bubbleFill" />
<rect ref="messageRect" x="30" y="10" width="196" height="63" rx="10" :fill="bubbleFill" />
<text font-size="14" font-family="SF Pro" ref="messageText" :fill="textFill">
<tspan dy="16" x="0" v-for="(item, index) in textArr" :key="index">{{ item }}</tspan>
</text>
<g :transform="signatureTranslate">
<image xlink:href="profile.png" width="29" height="29" fill="#b5b5b5" clip-path="url(#clip)" />
<text
transform="translate(36, 17)"
fill="#888"
transform="translate(0, 5)"
fill="#000"
font-size="10"
font-family="SFCompactDisplay-Bold, SF Compact Display"
font-weight="700"
>
<tspan v-if="item.outgoing">You to</tspan>
<tspan v-else>From</tspan>
<tspan xml:space="preserve" fill="#000">{{ item.signature }}</tspan>
<tspan xml:space="preserve">{{ item.context }}</tspan>
</text>
<text
transform="translate(0, 20)"
fill="#6f6f6f"
font-size="9"
font-family="SFCompactDisplay, SF Compact Display"
>
<tspan v-if="item.subContext">{{item.subContext}}</tspan>
</text>
</g>
</g>

174
src/components/UI/UIDetails/messages.ts
View file

@ -4,156 +4,156 @@ const Messages: Message[] = [
{
content:
"I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
signature: "Tommy McConville",
outgoing: true,
context: "You to Josie Wright",
subContext: "josie@gmail.com",
modifier: "sf",
imgURL: "../assets/logo.png",
id: "1"
id: "1",
time: ""
},
{
content: "Sounds good, see you Thursday.",
signature: "Josie Wright",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "2"
context: "Message from Josie Wright",
subContext: "Subject: Chick File",
modifier: "ai",
id: "2",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "3"
context: "Mesage from Tommy McConville",
subContext: "New Conversation",
modifier: "ai",
id: "3",
time: ""
},
{
content: "Yes posting it online soon.",
signature: "Tommy McConville",
outgoing: true,
modifier: "sf",
imgURL: "../../assets/logo.png",
id: "4"
context: "You to Tommy McConville",
subContext: "",
modifier: "ai",
id: "4",
time: ""
},
{
content: "Sweet, thanks!",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "../../assets/logo.png",
id: "5"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "5",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
signature: "Crimata AI",
outgoing: false,
context: "Message from Crimata AI",
subContext: "",
modifier: "ai",
imgURL: "../../assets/logo.png",
id: "6"
id: "6",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
signature: "Crimata AI",
outgoing: false,
context: "Message from Crimata",
subContext: "",
modifier: "ai",
imgURL: "../../assets/logo.png",
id: "7"
id: "7",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
signature: "Crimata AI",
outgoing: false,
context: "Message from Crimata",
subContext: "",
modifier: "ai",
imgURL: "../../assets/logo.png",
id: "8"
id: "8",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "9"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "9",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "10"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "10",
time: ""
},
{
content: "Yes posting it online soon.",
signature: "Tommy McConville",
outgoing: true,
context: "Message from Tommy McConville",
subContext: "",
modifier: "sf",
imgURL: "../../assets/logo.png",
id: "11"
id: "11",
time: ""
},
{
content:
"I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
signature: "Tommy McConville",
outgoing: true,
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
imgURL: "../assets/logo.png",
id: "12"
id: "12",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "13"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "13",
time: ""
},
{
content: "Hey Anna, did you get the paper done?",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "@/assets/logo.png",
id: "14"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "14",
time: ""
},
{
content: "Yes posting it online soon.",
signature: "Tommy McConville",
outgoing: true,
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
imgURL: "../../assets/logo.png",
id: "15"
id: "15",
time: ""
},
{
content: "Sweet, thanks!",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "../../assets/logo.png",
id: "16"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "16",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
signature: "Crimata AI",
outgoing: false,
context: "Message from Crimata AI",
subContext: "",
modifier: "ai",
imgURL: "../../assets/logo.png",
id: "17"
id: "17",
time: ""
},
{
content: "Yes posting it online soon.",
signature: "Tommy McConville",
outgoing: true,
context: "You to Tommy McConville",
subContext: "",
modifier: "sf",
imgURL: "../../assets/logo.png",
id: "18"
id: "18",
time: ""
},
{
content: "Sweet, thanks!",
signature: "Tommy McConville",
outgoing: false,
modifier: "fr",
imgURL: "../../assets/logo.png",
id: "19"
context: "Message from Tommy McConville",
subContext: "",
modifier: "ai",
id: "19",
time: ""
},
];
export default Messages;
export default Messages;

4
src/components/UI/index.vue
View file

@ -6,7 +6,7 @@
xmlns:xlink="http://www.w3.org/1999/xlink"
@click="emittMessage"
>
<AI />
<!-- <AI /> -->
<MessageRenderer />
<InputItem />
<!-- <TitleBar /> -->
@ -23,7 +23,7 @@ import { Mitt } from "@/types/mitt/index";
import { defineComponent, ref, inject } from "vue";
export default defineComponent({
name: "UI",
components: { AI, MessageRenderer, InputItem, TitleBar },
components: { MessageRenderer, InputItem },
setup() {
const messages = Messages;
const count = ref(0);