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

input

Browse source
This commit is contained in:
Andrew Gundersen 2021-02-26 15:37:02 -06:00
commit 725753b7b3
8 changed files with 79 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/App.vue
View file

@ -53,12 +53,17 @@
border: none;
outline: none;
z-index: 1;
}
.menu {
position: fixed;
margin-left: 20px;
margin-top: 20px;
z-index: 2;
}
.menuButton {

14
src/assets/crimata.svg Normal file
View file

@ -0,0 +1,14 @@
<svg xmlns="http://www.w3.org/2000/svg" width="13.795" height="12.759" viewBox="0 0 13.795 12.759">
<g id="Group_544" data-name="Group 544" transform="translate(-4127 -507)">
<g id="Group_33" data-name="Group 33" transform="translate(4127 507)">
<g id="Group_32" data-name="Group 32" transform="translate(0 0)">
<g id="Group_31" data-name="Group 31" transform="translate(0 6.627)">
<circle id="Ellipse_50" data-name="Ellipse 50" cx="3.066" cy="3.066" r="3.066" transform="translate(0 0)" fill="#383838"/>
<circle id="Ellipse_51" data-name="Ellipse 51" cx="3.066" cy="3.066" r="3.066" transform="translate(7.664 0)" fill="#383838"/>
</g>
<circle id="Ellipse_52" data-name="Ellipse 52" cx="3.066" cy="3.066" r="3.066" transform="translate(3.826 0)" fill="#383838"/>
<path id="Path_150" data-name="Path 150" d="M36.27,83.67" transform="translate(-33.199 -73.977)" fill="#ff0"/>
</g>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 973 B

1
src/background/session.ts
View file

@ -6,6 +6,7 @@ import { ipcMain } from "electron";
interface RenderMessage {
content: string;
avatar: string;
context: string;
subContext: string;
modifier: string;

9
src/components/taInput/index.vue
View file

@ -10,8 +10,6 @@
<TextInput
v-else
:input="input"
:textXoffset="textInputXoffset"
:textYoffset="textInputYoffset"
/>
</template>
@ -40,10 +38,6 @@ export default defineComponent({
const {
input,
visualizeStream,
textInputXoffset,
textInputYoffset,
audioBubbleWidth,
paths,
} = useInputController();
@ -51,9 +45,6 @@ export default defineComponent({
return {
input,
textInputXoffset,
textInputYoffset,
visualizeStream,
audioBubbleWidth,
paths,

2
src/components/taInput/inputController.ts
View file

@ -96,8 +96,6 @@ export default function useInputController() {
return {
input,
visualizeStream,
textInputXoffset,
textInputYoffset,
audioBubbleWidth,
paths
}

35
src/components/taInput/textDetails/text.vue
View file

@ -1,20 +1,11 @@
<template>
<foreignObject
class="inputContainer"
:x="textXoffset"
:y="textYoffset"
width="55%"
height="50%"
>
<div xmlns="http://www.w3.org/1999/xhtml">
<div class="inputBox">
<div class="inputBubble" v-show="input.length > 0">
<p>{{ input }}</p>
</div>
</div>
</foreignObject>
</template>
<script lang="ts">
@ -26,17 +17,28 @@ export default defineComponent({
name: "TextInput",
props: {
input: String,
textXoffset: String,
textYoffset: String,
},
});
</script>
<style lang="scss" scoped>
.inputBubble {
.inputBox {
position: fixed;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
bottom: 0;
z-index: 1;
}
.inputBubble {
max-width: 180px;
min-height: 32px;
@ -48,14 +50,15 @@ export default defineComponent({
font-size: 14px;
bottom: 20px;
margin-left: 50%;
p {
max-width: 150px;
overflow-wrap: break-word;
padding: 7px 10px 5px 10px;
margin: 0;
}
margin-bottom: 20px;
z-index: 1;
}
</style>

2
src/types/message/index.ts
View file

@ -1,5 +1,6 @@
export interface Message {
content: string;
avatar: string;
context: string;
subContext: string;
modifier: string;
@ -15,4 +16,3 @@ interface MessageTransform {
export interface MessageAnimeFunc {
(message: SVGElement, transform: MessageTransform, scrollHeight?: number | undefined, targetList?: NodeList | undefined): void;
}

42
src/views/messenger.vue
View file

@ -24,10 +24,21 @@
</div>
<!-- message context -->
<div class="context">
{{ message.context }}
<span class="context">
<!-- Render Crimata icon or initials. -->
<div v-if="message.avatar == 'crimata'" class="photo">
<img src="@/assets/crimata.svg"/>
</div>
<div v-else class="photo">
{{ message.avatar }}
</div>
{{ message.context }}
</span>
</div>
</div>
@ -59,7 +70,7 @@ export default defineComponent({
// Render a message.
const render = (message: Message) => {
messages.push(message)
console.log(`Pushing: ${message.modifier}: ${message.content}`)
console.log(`Pushing: ${message.modifier}: ${message.avatar}, ${message.content}`)
}
onMounted(() => {
@ -93,10 +104,12 @@ export default defineComponent({
background-color: #EBEBEB;
top: 0;
bottom: 0;
z-index: -1px;
}
#messenger::-webkit-scrollbar {
display: none;
}
.message {
@ -158,6 +171,9 @@ export default defineComponent({
}
.context {
display: flex;
align-items: center;
font-family: "SF Compact Display";
font-size: 12px;
font-weight: bold;
@ -165,6 +181,22 @@ export default defineComponent({
margin-top: 5px;
}
.photo {
display: flex;
justify-content: center;
align-items: center;
margin-right: 5px;
width: 30px;
height: 30px;
font-size: 14px;
background-color: white;
border-radius: 15px;
}
</style>