Compare commits
No commits in common. "d3dff302c545f8251cd6d6876e361f9fc7bd5fde" and "82926ab17207da5b7e624c5e76608fe6d74ee033" have entirely different histories.
d3dff302c5
...
82926ab172
5 changed files with 4 additions and 107 deletions
|
@ -1,7 +1,4 @@
|
||||||
<script>
|
<script>
|
||||||
import { MoreVerticalIcon } from "svelte-feather-icons";
|
|
||||||
import { overlayStore } from "../stores";
|
|
||||||
|
|
||||||
export let message;
|
export let message;
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -11,18 +8,6 @@
|
||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
}
|
}
|
||||||
|
|
||||||
.message .edit-message {
|
|
||||||
visibility: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message:hover {
|
|
||||||
background-color: var(--background-color-2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.message:hover .edit-message {
|
|
||||||
visibility: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.message-content {
|
.message-content {
|
||||||
color: var(--foreground-color-2);
|
color: var(--foreground-color-2);
|
||||||
}
|
}
|
||||||
|
@ -35,16 +20,9 @@
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
margin-right: var(--space-xxs);
|
margin-right: var(--space-xxs);
|
||||||
}
|
}
|
||||||
|
|
||||||
.edit-message {
|
|
||||||
float: right;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
<div class="message">
|
<div class="message">
|
||||||
<span class="author">{ message.author_username }</span>
|
<span class="author">{ message.author_username }</span>
|
||||||
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
|
<span class="message-content" class:pending={ message._isPending }>{ message.content }</span>
|
||||||
<button class="icon-button edit-message" on:click="{ () => overlayStore.open('editMessage', { message }) }">
|
|
||||||
<MoreVerticalIcon />
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
|
@ -1,65 +0,0 @@
|
||||||
<script>
|
|
||||||
import { fade, fly } from "svelte/transition";
|
|
||||||
import { quintInOut } from "svelte/easing";
|
|
||||||
import { overlayStore } from "../../stores";
|
|
||||||
import request from "../../request";
|
|
||||||
import { apiRoute } from "../../storage";
|
|
||||||
|
|
||||||
export let message;
|
|
||||||
|
|
||||||
let messageContent = message.content;
|
|
||||||
let buttonsEnabled = true;
|
|
||||||
|
|
||||||
const close = () => overlayStore.close('editMessage');
|
|
||||||
const save = async () => {
|
|
||||||
buttonsEnabled = false;
|
|
||||||
const { ok } = await request("PUT", apiRoute(`messages/${message.id}`), true, {
|
|
||||||
content: messageContent
|
|
||||||
});
|
|
||||||
if (!ok) {
|
|
||||||
overlayStore.open("toast", {
|
|
||||||
message: "Couldn't edit message"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
const deleteMessage = async () => {
|
|
||||||
buttonsEnabled = false;
|
|
||||||
const { ok } = await request("DELETE", apiRoute(`messages/${message.id}`), true);
|
|
||||||
if (!ok) {
|
|
||||||
overlayStore.open("toast", {
|
|
||||||
message: "Couldn't delete message"
|
|
||||||
});
|
|
||||||
}
|
|
||||||
close();
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.full-width {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.delete-button {
|
|
||||||
color: var(--red-2);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<div class="modal-backdrop" transition:fade="{{ duration: 300, easing: quintInOut }}" on:click="{ close }">
|
|
||||||
<div class="modal" transition:fly="{{ duration: 300, easing: quintInOut, y: 10 }}" on:click|stopPropagation>
|
|
||||||
<div class="modal-header">
|
|
||||||
<span class="h4">Edit Message</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<label class="input-label">
|
|
||||||
Content
|
|
||||||
<input class="input full-width" minlength="1" maxlength="32" bind:value={ messageContent } />
|
|
||||||
</label>
|
|
||||||
|
|
||||||
<div class="modal-footer">
|
|
||||||
<button class="button modal-secondary-action" on:click="{ close }">Cancel</button>
|
|
||||||
<button class="button modal-secondary-action delete-button" on:click="{ deleteMessage }" disabled="{ !buttonsEnabled }">Delete</button>
|
|
||||||
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
|
@ -5,7 +5,6 @@
|
||||||
import Toast from "./Toast.svelte";
|
import Toast from "./Toast.svelte";
|
||||||
import Login from "./Login.svelte";
|
import Login from "./Login.svelte";
|
||||||
import CreateAccount from "./CreateAccount.svelte";
|
import CreateAccount from "./CreateAccount.svelte";
|
||||||
import EditMessage from "./EditMessage.svelte";
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $overlayStore.createChannel}
|
{#if $overlayStore.createChannel}
|
||||||
|
@ -23,6 +22,3 @@
|
||||||
{#if $overlayStore.createAccount}
|
{#if $overlayStore.createAccount}
|
||||||
<CreateAccount />
|
<CreateAccount />
|
||||||
{/if}
|
{/if}
|
||||||
{#if $overlayStore.editMessage}
|
|
||||||
<EditMessage { ...$overlayStore.editMessage } />
|
|
||||||
{/if}
|
|
||||||
|
|
|
@ -205,27 +205,16 @@ class MessagesStoreProvider {
|
||||||
// we currently don't care about our own messages
|
// we currently don't care about our own messages
|
||||||
if (gateway.user && message.author_id === gateway.user.id)
|
if (gateway.user && message.author_id === gateway.user.id)
|
||||||
return;
|
return;
|
||||||
|
this.getStore(message.channel_id).addMessage(message);
|
||||||
const store = this.getStoreOrNull(message.channel_id);
|
|
||||||
if (store)
|
|
||||||
store.addMessage(message);
|
|
||||||
});
|
});
|
||||||
gateway.subscribe(GatewayEventType.MessageUpdate, (message) => {
|
gateway.subscribe(GatewayEventType.MessageUpdate, (message) => {
|
||||||
const store = this.getStoreOrNull(message.channel_id);
|
this.getStore(message.channel_id).updateMessage(message);
|
||||||
if (store)
|
|
||||||
store.updateMessage(message);
|
|
||||||
});
|
});
|
||||||
gateway.subscribe(GatewayEventType.MessageDelete, (message) => {
|
gateway.subscribe(GatewayEventType.MessageDelete, (message) => {
|
||||||
const store = this.getStoreOrNull(message.channel_id);
|
this.getStore(message.channel_id).deleteMessage(message);
|
||||||
if (store)
|
|
||||||
store.deleteMessage(message);
|
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
getStoreOrNull(channelId) {
|
|
||||||
return this.storeByChannel.get(channelId);
|
|
||||||
}
|
|
||||||
|
|
||||||
getStore(channelId) {
|
getStore(channelId) {
|
||||||
if (!this.storeByChannel.get(channelId)) {
|
if (!this.storeByChannel.get(channelId)) {
|
||||||
const store = new MessageStore(channelId);
|
const store = new MessageStore(channelId);
|
||||||
|
|
|
@ -43,8 +43,7 @@ router.delete(
|
||||||
dispatch(`channel:${permissionCheckResult.rows[0].channel_id}`, {
|
dispatch(`channel:${permissionCheckResult.rows[0].channel_id}`, {
|
||||||
t: GatewayPayloadType.MessageDelete,
|
t: GatewayPayloadType.MessageDelete,
|
||||||
d: {
|
d: {
|
||||||
id,
|
id
|
||||||
channel_id: permissionCheckResult.rows[0].channel_id
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue