hippoz/waffle
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Compare commits

base: hippoz:f17fd0174bbd686601c710cbbfa0ed788fe75fd8
Branches Tags
hippoz:master
..
compare: hippoz:131a2705623d649286151ec097175bd9801d661b
Branches Tags
hippoz:master

No commits in common. "f17fd0174bbd686601c710cbbfa0ed788fe75fd8" and "131a2705623d649286151ec097175bd9801d661b" have entirely different histories.
f17fd0174b ... 131a270562

7 changed files with 12 additions and 106 deletions
Show stats Expand all files Collapse all files

29
frontend/public/global.css
View file

@ -84,7 +84,7 @@ body {
background-color: var(--background-color-1);
}
/* top bar */
/* shared styles for all components */
.top-bar {
display: flex;
@ -102,8 +102,6 @@ body {
margin-left: var(--space-xxs);
}
/* modal */
.modal-backdrop {
position: absolute;
width: 100vw;
@ -128,7 +126,7 @@ body {
}
.modal-header {
margin-bottom: var(--space-norm);
margin-bottom: var(--space-md);
text-align: center;
}
@ -145,8 +143,6 @@ body {
float: left;
}
/* input */
.input-label {
text-transform: uppercase;
color: var(--foreground-color-2);
@ -162,8 +158,6 @@ body {
line-height: inherit;
}
/* button */
.button {
background-color: var(--background-color-2);
text-align: center;
@ -191,25 +185,6 @@ body {
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 */
.h1 {
font-size: 2.488rem;
}

2
frontend/src/components/modals/CreateChannel.svelte
View file

@ -27,7 +27,7 @@
<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">Create Channel</span>
<span class="h3">Create Channel</span>
</div>
<label class="input-label">

55
frontend/src/components/modals/EditChannel.svelte
View file

@ -1,55 +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 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
frontend/src/components/pages/main/Main.svelte
View file

@ -1,6 +1,7 @@
<script>
import { CloudIcon } from "svelte-feather-icons";
import { gatewayStatus, selectedChannel } from "../../../stores";
import CreateChannel from "../../modals/CreateChannel.svelte";
import ChannelView from "./ChannelView.svelte";
import OverlayProvider from "./OverlayProvider.svelte";
import Sidebar from "./Sidebar.svelte";

6
frontend/src/components/pages/main/OverlayProvider.svelte
View file

@ -1,12 +1,8 @@
<script>
import { overlayStore } from "../../../stores";
import EditChannel from "../../modals/EditChannel.svelte";
import CreateChannel from "../../modals/CreateChannel.svelte";
</script>
{#if $overlayStore.createChannel}
<CreateChannel { ...$overlayStore.createChannel } />
{/if}
{#if $overlayStore.editChannel}
<EditChannel { ...$overlayStore.editChannel } />
<CreateChannel />
{/if}

14
frontend/src/components/pages/main/Sidebar.svelte
View file

@ -1,5 +1,5 @@
<script>
import { HashIcon, PlusIcon, MoreVerticalIcon } from "svelte-feather-icons";
import { HashIcon, PlusIcon } from "svelte-feather-icons";
import { channels, overlayStore, selectedChannel } from "../../../stores";
import UserTopBar from "./UserTopBar.svelte";
</script>
@ -13,9 +13,6 @@
<HashIcon />
</div>
<span>{ channel.name }</span>
<button class="icon-button" on:click|stopPropagation="{ () => overlayStore.open('editChannel', { channel }) }">
<MoreVerticalIcon />
</button>
</button>
{/each}
<button on:click="{ () => overlayStore.open('createChannel') }" class="sidebar-button">
@ -55,6 +52,7 @@
border-radius: var(--radius-md);
width: 100%;
max-height: 3.4em;
text-align: center;
}
.sidebar-button span {
@ -73,14 +71,6 @@
height: 24px;
}
.sidebar-button .icon-button {
visibility: hidden;
}
.sidebar-button:hover .icon-button {
visibility: visible;
}
.sidebar-button.selected,
.sidebar-button:hover {
background-color: var(--background-color-2);

9
frontend/src/stores.js
View file

@ -222,18 +222,17 @@ class MessagesStoreProvider {
class OverlayStore extends Store {
constructor() {
super({
createChannel: null,
editChannel: null
createChannel: false
});
}
open(name, props={}) {
this.value[name] = props;
open(name) {
this.value[name] = true;
this.updated();
}
close(name) {
this.value[name] = null;
this.value[name] = false;
this.updated();
}
}