frontend: add channel editing
This commit is contained in:
parent
240411ddd3
commit
f17fd0174b
6 changed files with 91 additions and 5 deletions
|
@ -191,6 +191,23 @@ body {
|
||||||
background-color: var(--purple-2);
|
background-color: var(--purple-2);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.icon-button {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
background-color: transparent;
|
||||||
|
color: var(--foreground-color-3);
|
||||||
|
text-align: center;
|
||||||
|
border: none;
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
font: inherit;
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-button:hover {
|
||||||
|
color: var(--foreground-color-1);
|
||||||
|
}
|
||||||
|
|
||||||
/* text */
|
/* text */
|
||||||
|
|
||||||
.h1 {
|
.h1 {
|
||||||
|
|
55
frontend/src/components/modals/EditChannel.svelte
Normal file
55
frontend/src/components/modals/EditChannel.svelte
Normal file
|
@ -0,0 +1,55 @@
|
||||||
|
<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 channel;
|
||||||
|
|
||||||
|
let channelName = channel.name;
|
||||||
|
let buttonsEnabled = true;
|
||||||
|
|
||||||
|
const close = () => overlayStore.close('editChannel');
|
||||||
|
const save = async () => {
|
||||||
|
buttonsEnabled = false;
|
||||||
|
await request("PUT", apiRoute(`channels/${channel.id}`), true, {
|
||||||
|
name: channelName
|
||||||
|
});
|
||||||
|
close();
|
||||||
|
};
|
||||||
|
const deleteChannel = async () => {
|
||||||
|
buttonsEnabled = false;
|
||||||
|
await request("DELETE", apiRoute(`channels/${channel.id}`), true);
|
||||||
|
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 Channel</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<label class="input-label">
|
||||||
|
Channel Name
|
||||||
|
<input class="input full-width" bind:value={ channelName } />
|
||||||
|
</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="{ deleteChannel }">Delete</button>
|
||||||
|
<button class="button button-accent modal-primary-action" on:click="{ save }" disabled="{ !buttonsEnabled }">Save</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
|
@ -1,7 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { CloudIcon } from "svelte-feather-icons";
|
import { CloudIcon } from "svelte-feather-icons";
|
||||||
import { gatewayStatus, selectedChannel } from "../../../stores";
|
import { gatewayStatus, selectedChannel } from "../../../stores";
|
||||||
import CreateChannel from "../../modals/CreateChannel.svelte";
|
|
||||||
import ChannelView from "./ChannelView.svelte";
|
import ChannelView from "./ChannelView.svelte";
|
||||||
import OverlayProvider from "./OverlayProvider.svelte";
|
import OverlayProvider from "./OverlayProvider.svelte";
|
||||||
import Sidebar from "./Sidebar.svelte";
|
import Sidebar from "./Sidebar.svelte";
|
||||||
|
|
|
@ -1,8 +1,12 @@
|
||||||
<script>
|
<script>
|
||||||
import { overlayStore } from "../../../stores";
|
import { overlayStore } from "../../../stores";
|
||||||
|
import EditChannel from "../../modals/EditChannel.svelte";
|
||||||
import CreateChannel from "../../modals/CreateChannel.svelte";
|
import CreateChannel from "../../modals/CreateChannel.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if $overlayStore.createChannel}
|
{#if $overlayStore.createChannel}
|
||||||
<CreateChannel { ...$overlayStore.createChannel } />
|
<CreateChannel { ...$overlayStore.createChannel } />
|
||||||
{/if}
|
{/if}
|
||||||
|
{#if $overlayStore.editChannel}
|
||||||
|
<EditChannel { ...$overlayStore.editChannel } />
|
||||||
|
{/if}
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
<script>
|
<script>
|
||||||
import { HashIcon, PlusIcon } from "svelte-feather-icons";
|
import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
|
||||||
import { channels, overlayStore, selectedChannel } from "../../../stores";
|
import { channels, overlayStore, selectedChannel } from "../../../stores";
|
||||||
import UserTopBar from "./UserTopBar.svelte";
|
import UserTopBar from "./UserTopBar.svelte";
|
||||||
</script>
|
</script>
|
||||||
|
@ -13,6 +13,9 @@
|
||||||
<HashIcon />
|
<HashIcon />
|
||||||
</div>
|
</div>
|
||||||
<span>{ channel.name }</span>
|
<span>{ channel.name }</span>
|
||||||
|
<button class="icon-button" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
|
||||||
|
<MoreVerticalIcon />
|
||||||
|
</button>
|
||||||
</button>
|
</button>
|
||||||
{/each}
|
{/each}
|
||||||
<button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
|
<button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
|
||||||
|
@ -52,7 +55,6 @@
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
width: 100%;
|
width: 100%;
|
||||||
max-height: 3.4em;
|
max-height: 3.4em;
|
||||||
text-align: center;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.sidebar-button span {
|
.sidebar-button span {
|
||||||
|
@ -71,6 +73,14 @@
|
||||||
height: 24px;
|
height: 24px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.sidebar-button .icon-button {
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-button:hover .icon-button {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
|
||||||
.sidebar-button.selected,
|
.sidebar-button.selected,
|
||||||
.sidebar-button:hover {
|
.sidebar-button:hover {
|
||||||
background-color: var(--background-color-2);
|
background-color: var(--background-color-2);
|
||||||
|
|
|
@ -222,7 +222,8 @@ class MessagesStoreProvider {
|
||||||
class OverlayStore extends Store {
|
class OverlayStore extends Store {
|
||||||
constructor() {
|
constructor() {
|
||||||
super({
|
super({
|
||||||
createChannel: null
|
createChannel: null,
|
||||||
|
editChannel: null
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue