frontend: add channel editing

This commit is contained in:
hippoz 2022-04-26 03:01:21 +03:00
parent 240411ddd3
commit f17fd0174b
Signed by: hippoz
GPG key ID: 7C52899193467641
6 changed files with 91 additions and 5 deletions

View file

@ -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 {

View 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>

View file

@ -1,9 +1,8 @@
<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";
</script> </script>

View file

@ -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}

View file

@ -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);

View file

@ -222,7 +222,8 @@ class MessagesStoreProvider {
class OverlayStore extends Store { class OverlayStore extends Store {
constructor() { constructor() {
super({ super({
createChannel: null createChannel: null,
editChannel: null
}); });
} }