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

polish

Browse source
This commit is contained in:
Andrew Gundersen 2022-01-18 16:58:56 -06:00
commit 5d74c67648
17 changed files with 101 additions and 212 deletions
Download patch file Download diff file Expand all files Collapse all files

9
src/render/components/app.js
View file

@ -1,6 +1,7 @@
import Splash from "./splash.js";
import Messenger from "./messenger.js";
import Login from "./login.js";
import Splash from "./splash.js";
import Header from "./header.js";
import Messenger from "./messenger.js";
const account = Vue.ref(null);
@ -8,6 +9,7 @@ const App =
{
components: {
Splash,
Header,
Messenger,
Login
},
@ -20,7 +22,7 @@ const App =
template: `
<main id="app" v-if="account !== null">
<button id="header-titlebar" />
<Header />
<Messenger v-if="account"/>
<Login v-else />
@ -31,7 +33,6 @@ const App =
}
window.mainApi.on("set-account", (account_) => {
console.log("setting-account");
account.value = account_;
});

12
src/render/components/bubble.js
View file

@ -1,6 +1,6 @@
const Bubble =
{
props: ["category", "text", "blob", "modifier", "child"],
props: ["category", "text", "html", "blob", "modifier", "child"],
setup(props)
{
@ -9,7 +9,7 @@ const Bubble =
}
Vue.onMounted(() => {
document.getElementById("messenger").dispatchEvent(new CustomEvent('adjust-scroll'));
document.dispatchEvent(new CustomEvent("scroll"));
});
return { getUrl };
@ -18,13 +18,13 @@ const Bubble =
template: `
<div :class="'bubble ' + modifier + '-bubble ' + modifier +'-'+ child">
<p v-if="category=='text/plain'">{{ text }}</p>
<p v-if="category=='text'">{{ text }}</p>
<p v-else-if="category=='audio/L16'">{{ text }}</p>
<p v-else-if="category=='audio'">{{ text }}</p>
<div v-else-if="category=='text/html'" v-html="text"></div>
<div v-else-if="category=='html'" v-html="html"></div>
<img v-else-if="category.startsWith('image/')" :src="getUrl()" />
<img v-else-if="category == 'image'" :src="getUrl()" />
<a v-else :href="getUrl()">{{ text }}</a>

11
src/render/components/context.js
View file

@ -20,15 +20,10 @@ const Context =
template: `
<span :class="'context ' + modifier + '-context'">
<div
v-show="avatar"
class="context-avatar"
<img v-show="avatar" class="context-avatar"
:class="{ audio: playback }"
>
<img :src="'data:image/png;base64,' + avatar" />
</div>
:src="'data:image/png;base64,' + avatar"
/>
{{ context }}

6
src/render/components/control/scroll.js
View file

@ -7,13 +7,11 @@ const initScroll = (elementId) => {
}
const isBottom = () => {
if (el) {
return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
}
return el.scrollHeight - el.clientHeight <= el.scrollTop + 1;
}
const adjustScroll = () => {
if (el) {
if (isBottom()) {
el.scrollTo({
top: el.scrollHeight - el.clientHeight,
behavior: 'smooth'

4
src/render/components/control/text.js
View file

@ -35,7 +35,7 @@ function useText(elementId, left, typing)
window.addEventListener("keydown", (e) => {
if (!show.value && !metaKeys.includes(e.key))
if (!show.value && !metaKeys.includes(e.key) && !e.ctrlKey)
{
show.value = true;
}
@ -47,7 +47,7 @@ function useText(elementId, left, typing)
if (e.key === "Enter" && el.value)
{
window.mainApi.send("message", {
category: "text/plain",
category: "text",
text: el.value,
blob: null
});

19
src/render/components/drop.js Normal file
View file

@ -0,0 +1,19 @@
const onDrop = async (e) => {
const file = e.dataTransfer.items[0].getAsFile();
const buffer = await file.arrayBuffer();
const b64String = await window.mainApi.invoke("encode", buffer);
let category = "file";
if (file.type.startsWith("image/")) {
category = "image"
}
window.mainApi.send("message", {
category: category,
text: file.name,
blob: b64String
});
}
export default onDrop;

1
src/render/components/message.js
View file

@ -22,6 +22,7 @@ const Message =
v-for="(c, index) in content"
:category="c.category"
:text="c.text"
:html="c.html"
:blob="c.blob"
:modifier="modifier"
:child="calcChild(index, content.length)"

57
src/render/components/messenger.js
View file

@ -1,4 +1,5 @@
import initScroll from "./control/scroll.js";
import onDrop from "./control/drop.js";
import adjustScroll from "./control/scroll.js";
import WS from "./ws.js";
import Input from "./input.js";
@ -17,62 +18,32 @@ const Messenger = {
setup()
{
const person = Vue.ref("");
const messages = Vue.ref([{
modifier: "ai",
content: [{
category: "text/html",
text: `<div class="mail">
<h4>About HTML Parser</h4>
<p>Return the text of the most recently opened start tag. This should not normally be needed for structured processing, but may be useful in dealing with HTML “as deployed” or for re-generating input with minimal changes (whitespace between attributes can be preserved, etc.).</p>
</div>`,
blob: null
}],
context: "Email from David Spade",
avatar: null,
id: 0
}]);
const onDrop = async (e) => {
const file = e.dataTransfer.items[0].getAsFile();
const buffer = await file.arrayBuffer();
const b64String = await window.mainApi.invoke("encode", buffer);
window.mainApi.send("message", {
category: file.type,
text: file.name,
blob: b64String
});
}
const messages = Vue.ref([]);
Vue.onMounted(() => {
window.mainApi.on("message", (message) => {
if (message.person)
window.mainApi.on("update", (update) => {
if (update.name)
{
person.value = message.person;
messages.value = message.messages;
person.value = update;
}
else if (message.name)
else if (typeof update == Array)
{
person.value = message;
messages.value.push(...update);
}
else if (message.content)
{
messages.value.push(message);
messages.value.push(update);
}
else
else if (update.new)
{
messages.value[messages.value.length - 1].content.push(message);
messages.value.at(-1)[update.new] = update.val;
}
});
initScroll("messenger");
window.mainApi.send("messenger");
});
Vue.onUnmounted(() => {
messages.value = [];
window.mainApi.send("message", "win");
});
return { person, messages, onDrop };

22
src/render/components/settings.js
View file

@ -4,15 +4,23 @@ const Settings =
setup() {
const active = Vue.ref(false);
window.addEventListener("keydown", (e) => {
console.log("toggle settings");
})
function hideSettings(e) {
if (e.key == "Escape") {
active.value = false;
window.removeEventListener("keydown", hideSettings);
}
}
function showSettings() {
active.value = true;
window.addEventListener("keydown", hideSettings);
}
const logout = async () => {
await window.mainApi.send("logout");
}
return { active, logout };
return { showSettings, active, logout };
},
template: `
@ -22,7 +30,11 @@ const Settings =
Logout
</button>
</div>`
</div>
<button v-else class="settings-icon" @click="showSettings">
<img src="./assets/settingsIcon.svg">
</button>`
}
export default Settings;