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

stream path animation v4

Browse source 
update input items styling

add ipc event handler for message

add send-message ipc handler

add audio to send-message ipc

remove extra JSON stringify statement for audio message

add render bug fix for add contacts
This commit is contained in:
Enrique Hernandez 2020-12-17 11:50:03 -06:00 • committed by riqo
commit 1627e07964
23 changed files with 450 additions and 295 deletions
Download patch file Download diff file Expand all files Collapse all files

15
src/components/UI/UIDetails/messageRenderer.vue
View file

@ -12,7 +12,6 @@
class="messageList"
transform="translate(0, 25)"
preserverAspectRatio="none"
>
<transition
appear
@ -28,13 +27,9 @@
</template>
<script lang="ts">
import useRenderView from '@/core/messenger/renderView/useRenderView';
import useMessageView from "@/core/messenger/messageView/useMessageView";
import useScrollView from "@/core/UI/scrollView/useScrollView";
import {
defineComponent,
reactive,
inject,
} from "vue";
import { defineComponent, reactive, inject } from "vue";
import MessageItem from "./messageItem.vue";
import { Message } from "@/types/message/index";
import { Mitt } from "@/types/mitt/index";
@ -54,9 +49,9 @@ export default defineComponent({
});
}
const { beforeEnter, enter, afterEnter } = useRenderView();
const { scrollView } = useScrollView({
targetId: "messageRenderer"
const { beforeEnter, enter, afterEnter } = useMessageView();
const { scrollView } = useScrollView({
targetId: "messageRenderer",
});
return {

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

@ -2,35 +2,35 @@ import { Message } from "@/types/message/index";
const Messages: Message[] = [
{
content: "Sounds good, see you Thursday.",
context: "Message from Josie Wright",
subContext: "Subject: Chick File",
content: "Welcome",
context: "ai",
subContext: "",
modifier: "ai",
id: "2",
time: ""
},
{
content:
"I can be there at 5 pm tomorrow to greet you at a Chick file with my almond and chive salad.",
context: "You to Josie Wright",
subContext: "josie@gmail.com",
"add friend",
context: "launch",
subContext: "",
modifier: "sf",
id: "1",
time: ""
},
{
content: "Sweet, thanks!",
context: "Message from Tommy McConville",
content: "Did you mean to addcontact?",
context: "addcontact",
subContext: "",
modifier: "ai",
id: "5",
time: ""
},
{
content: "Hey do you know Enrique Hernandez?",
context: "Message from Crimata AI",
content: "yes",
context: "fulfill",
subContext: "",
modifier: "ai",
modifier: "sf",
id: "6",
time: ""
},

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

@ -41,6 +41,11 @@ export default defineComponent({
}
}
window.ipcRenderer.on("render-message", (event, payload) => {
console.log(payload.message)
emitter.emit("renderMessage", payload.message);
})
return {
emittMessage,
};

93
src/components/input/inputDetails/audioInput.vue
View file

@ -1,53 +1,68 @@
<template>
<svg xmlns="http://www.w3.org/2000/svg" :width="bubbleWidth" height="34" :x="center" y="450" >
<g id="Group_126" data-name="Group 126" transform="translate(0 0)">
<rect id="Rectangle_478" data-name="Rectangle 478" :width="bubbleWidth" height="34" rx="10" transform="translate(0 0)" fill="#b9b9b9"/>
<g id="Group_125" data-name="Group 125">
<path v-for="(path, index) in paths"
:key="index"
:id="path.id"
:data-name="path.name"
:d="path.d"
:transform="path.transform"
fill="none"
stroke="#000"
stroke-linecap="round"
stroke-width="1.5"
<svg
xmlns="http://www.w3.org/2000/svg"
:width="bubbleWidth"
height="34"
:x="center"
y="440"
rx="10"
class="audioInput"
>
<g
id="Group_126"
data-name="Group 126"
transform="translate(0 0)"
rx="10"
>
<rect
id="Rectangle_478"
data-name="Rectangle 478"
:width="bubbleWidth"
height="34"
rx="10"
transform="translate(0 0)"
fill="#b9b9b9"
/>
<!-- <path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(10 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(15 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-20" transform="translate(20 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-15" transform="translate(25 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-10" transform="translate(30 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
<path id="Path_328" data-name="Path 328" d="M0,25v-5" transform="translate(120 0)" fill="none" stroke="#000" stroke-linecap="round" stroke-width="1.5"/>
--> </g>
</g>
</svg>
<svg>
<g rx="20" id="Group_125" data-name="Group 125" v-for="(path, index) in paths">
<path
:key="index"
id="path"
:data-name="path.identifier"
:d="path.d"
:transform="`translate(${path.offset} 0)`"
fill="none"
:stroke="path.color"
stroke-linecap="round"
stroke-width="1.5"
/>
</g>
</svg>
</g>
</svg>
</template>
<script lang="ts">
import { defineComponent, computed, ref } from 'vue'
export default defineComponent ({
name: 'AudioInput',
import { defineComponent, computed, inject } from "vue";
export default defineComponent({
name: "AudioInput",
props: {
bubbleWidth: Number,
paths: Array
paths: Array,
},
setup(props){
setup(props) {
// need audioPath type/interface
const emitter: any = inject("mitt");
function audioSend() {
}
const center = computed(() => {
if (props.bubbleWidth) {
return 175 - props.bubbleWidth / 2;
}
})
return { center }
}
})
</script>
});
return { center };
},
});
</script>

16
src/components/input/inputDetails/textInput.vue
View file

@ -1,5 +1,11 @@
<template>
<foreignObject class="inputContainer" :x="textXoffset" y="450" width="55%" height="50%">
<foreignObject
class="inputContainer"
:x="textXoffset"
y="450"
width="55%"
height="50%"
>
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="inputBubble" contenteditable v-show="input.length > 0">
<p>{{ input }}</p>
@ -28,15 +34,15 @@ div[contenteditable] {
display: table;
justify-items: center;
border: 0;
border-radius: 20px;
color: #fff;
background-color: #585858;
border-radius: 10px;
color: #000;
background-color: #b9b9b9;
font-size: 14;
text-align: left;
p {
max-width: 150px;
overflow-wrap: break-word;
padding: 10px 15px 10px 15px;
padding: 7px 10px 5px 10px;
margin: 0;
}
}

44
src/components/input/inputItem.vue
View file

@ -1,40 +1,32 @@
<template>
<audio-input
v-if="renderAudio"
:bubbleWidth="reactiveWidth"
:paths="paths"
/>
<text-input
v-else
:input="input"
:textXoffset="textInputXoffset"
/>
<audio-input v-if="visualizeStream" :bubbleWidth="audioBubbleWidth" :paths="paths" />
<text-input v-else :input="input" :textXoffset="textInputXoffset" />
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import TextInput from './inputDetails/textInput.vue';
import AudioInput from './inputDetails/audioInput.vue';
import { defineComponent } from "vue";
import TextInput from "./inputDetails/textInput.vue";
import AudioInput from "./inputDetails/audioInput.vue";
import useInputController from "@/core/UI/input/useInputController";
export default defineComponent({
name: "InputItem",
components: {TextInput, AudioInput},
components: { TextInput, AudioInput },
setup() {
const {
const {
input,
renderAudio,
reactiveWidth,
visualizeStream,
textInputXoffset,
paths } = useInputController();
audioBubbleWidth,
paths,
} = useInputController();
return {
input,
textInputXoffset,
renderAudio,
reactiveWidth,
paths
}
}
})
</script>
visualizeStream,
audioBubbleWidth,
paths,
};
},
});
</script>