Skip to content

Commit

Permalink
moved guild search next to channel messages, bug fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@slatinsky
slatinsky committed Oct 16, 2022
1 parent 06fe282 commit 28bfcc0
Show file tree
Hide file tree
Showing 14 changed files with 384 additions and 354 deletions.
2 changes: 1 addition & 1 deletion preprocess/preprocess.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -316,7 +316,7 @@ def process(self):
'message_ids': message_ids,
'messages': messages_by_channel,
'threadIdToMessageId': thread_id_to_message_id,
'version': '1.0.0'
'id': self.guild_id,
}

# step 7 - write data to json files
Expand Down
1 change: 0 additions & 1 deletion src/lib/images/svelte-logo.svg
View file

This file was deleted.

Binary file removed src/lib/images/svelte-welcome.png
View file
Binary file not shown.
Binary file removed src/lib/images/svelte-welcome.webp
View file
Binary file not shown.
217 changes: 125 additions & 92 deletions src/routes/channels/[guildId]/+layout.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,41 +1,60 @@
<script>
import Search from './Search.svelte';
import Header from "./Header.svelte";
import Header from './Header.svelte';
import SearchResults from './SearchResults.svelte';
export let data;
let found_messages = [];
let searched = false;
$: console.warn('found_messages', found_messages);
$: console.warn('searched', searched);
let currentGuildId = data.guildId;
function guildChanged(_) { // fix crash if shifting between guilds and searching at the same time
if (currentGuildId !== data.guildId) {
currentGuildId = data.guildId;
found_messages = [];
searched = false;
}
}
$: guildChanged(data);
</script>

{#key data.channelId}
<Header channel={data.guild.channels[data.channelId]} messages={data.messages} />
{/key}
<div class="columns">
<div class="channels">
<div id="guild-layout" class={searched ? 'with-search' : ''}>
<div id="channels">
<div class="guild-name">{data.guilds[data.guildId].name}</div>
{#each Object.values(data.guild.categories) as category}
<div class="category">{category.name}</div>
{#each category.channelIds as channel}
<div class="channel">
<a href="/channels/{data.guildId}/{channel.id}" class={data.channelId == channel.id ? 'selected' : ''}># {channel.name}</a>
<a
href="/channels/{data.guildId}/{channel.id}"
class={data.channelId == channel.id ? 'selected' : ''}># {channel.name}</a
>
{#if channel.threads}
{#each channel.threads as thread}
<div>
<div class="thread" title={thread.name}>
<!-- {thread.id} -->
<a href="/channels/{data.guildId}/{thread.id}" class="{data.channelId == thread.id ? 'selected' : ''}">
<!-- svg -->
<svg
class="thread-svg-icon"
width="8"
height="8"
viewBox="0 0 12 11"
fill="none"
aria-hidden="true"
><path
d="M11 9H4C2.89543 9 2 8.10457 2 7V1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1V7C0 9.20914 1.79086 11 4 11H11C11.5523 11 12 10.5523 12 10C12 9.44771 11.5523 9 11 9Z"
fill="currentColor"
/></svg
<div>
<div class="thread" title={thread.name}>
<!-- {thread.id} -->
<a
href="/channels/{data.guildId}/{thread.id}"
class={data.channelId == thread.id ? 'selected' : ''}
>
<!-- svg -->
<svg
class="thread-svg-icon"
width="8"
height="8"
viewBox="0 0 12 11"
fill="none"
aria-hidden="true"
><path
d="M11 9H4C2.89543 9 2 8.10457 2 7V1C2 0.447715 1.55228 0 1 0C0.447715 0 0 0.447715 0 1V7C0 9.20914 1.79086 11 4 11H11C11.5523 11 12 10.5523 12 10C12 9.44771 11.5523 9 11 9Z"
fill="currentColor"
/></svg
>
{thread.name}</a
>
{thread.name}</a
>
</div>
</div>
{/each}
Expand All @@ -44,83 +63,57 @@
{/each}
{/each}
</div>
<div>
<slot />
<div id="header">
{#key data.channelId}
<Header
guild={data.guild}
channel={data.guild.channels[data.channelId]}
messages={data.messages}
bind:found_messages
bind:searched
/>
{/key}
</div>

<div class="search-container">
<Search
authors={data.guild.authors}
all_messages={data.guild.messages}
guild={data.guild}
guildId={data.guildId}
/>
<div id="messages">
<slot />
</div>
{#if searched}
<div id="search">
<SearchResults {found_messages} guild={data.guild} bind:searched />
</div>
{/if}
</div>

<style>
#guild-layout {
display: grid;
/* flex-direction: row; */
background-color: #2f3136;
height: 100vh;
.category {
padding-top: 15px;
font-size: 0.9rem;
text-transform: uppercase;
}
.channel {
margin: 5px 15px;
}
.channel > a {
/* color: #b9bbbe; */
/* color: white !important; */
color: #DCDDDE;
}
.selected {
color: chartreuse !important;
}
.thread {
margin: 5px 15px 5px 30px;
font-size: small;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
grid-template-areas:
'channels header header'
'channels messages messages';
.thread > a {
color: gray;
grid-template-columns: 250px 3fr 2fr;
grid-template-rows: 50px auto;
}
.thread:hover {
color: white;
#guild-layout.with-search {
grid-template-areas:
'channels header header'
'channels messages search';
}
/*
.channel:hover {
background-color: #42474d;
} */
.channels {
#channels {
grid-area: channels;
display: flex;
flex-direction: column;
padding: 0 15px 10px 15px;
margin-right: 5px;
overflow-y: auto;
}
.columns {
display: grid;
grid-template-columns: 250px auto 350px;
flex-direction: row;
background-color: #2f3136;
height: 100vh;
}
.guild-name {
#channels .guild-name {
padding: 10px 0 10px 0;
font-size: 20px;
font-weight: 600;
Expand All @@ -130,16 +123,56 @@
border-bottom: 2px solid #202225;
margin-bottom: 10px;
}
.category-name {
#channels .channel {
margin: 5px 15px;
}
#channels .channel > a {
/* color: #b9bbbe; */
/* color: white !important; */
color: #dcddde;
}
#channels .selected {
color: chartreuse !important;
}
#channels .category {
padding-top: 15px;
font-size: 0.9rem;
text-transform: uppercase;
}
#channels .category-name {
font-size: 16px;
font-weight: 600;
margin: 15px 0 0px 0;
}
#channels .thread {
margin: 5px 15px 5px 30px;
font-size: small;
text-decoration: none;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
}
#channels .thread > a {
color: gray;
}
#channels .thread:hover {
color: white;
}
.search-container {
overflow-y: auto;
max-height: calc(100vh - 96px);
margin-right: 5px;
#header {
grid-area: header;
}
#messages {
grid-area: messages;
}
#search {
grid-area: search;
}
#search:empty {
display: none;
}
</style>
24 changes: 11 additions & 13 deletions src/routes/channels/[guildId]/+page.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,18 +1,16 @@
<div class="container">
<div class="txt">Select channel</div>
<div class="txt">Select channel</div>
</div>

<style>
.container {
background-color: #36393F;
height: 100vh;
.container {
background-color: #36393f;
height: 100vh;
}
}
.txt {
font-size: 32px;
padding-top: 20px;
padding-left: 20px;
}
</style>
.txt {
font-size: 32px;
padding-top: 20px;
padding-left: 20px;
}
</style>
44 changes: 27 additions & 17 deletions src/routes/channels/[guildId]/Header.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,35 @@
<script>
import Search from './[channelId]/Search.svelte';
import SearchFilter from './SearchFilter.svelte';
export let channel;
// export let messages;
export let search;
export let guild;
export let found_messages;
export let searched;
</script>


{#if channel}
<section>
<section class="header-container">
<div class="channel-header">
<div class="channel-header__left">
<div class="channel-name elipsis"># {channel.name}</div>
{#if channel.topic}
<div class="topic elipsis">| {channel.topic}</div>
{/if}
{#if channel}
<div class="channel-name elipsis"># {channel.name}</div>
{#if channel.topic}
<div class="topic elipsis">| {channel.topic}</div>
{/if}
{/if}
<div class="spacer" />
<SearchFilter bind:found_messages bind:searched {guild} />
<!-- <Search {messages} /> -->
</div>
</div>
</section>
{:else}
<div class="info-text">Channel/Thread not exported</div>
{/if}

<style>
.header-container {
background-color: #36393f;
height: 100vh;
}
.channel-header__left {
display: flex;
flex-direction: row;
Expand All @@ -31,6 +38,8 @@
gap: 15px;
padding: 10px 20px;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.channel-name {
Expand All @@ -42,21 +51,22 @@
font-size: 1rem;
font-weight: 400;
color: gray;
}
.elipsis {
display: -webkit-box;
.elipsis {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
text-overflow: ellipsis;
}
}
.info-text {
font-size: 32px;
padding-top: 20px;
padding-left: 20px;
}
.spacer {
flex-grow: 1;
}
</style>
Loading

0 comments on commit 28bfcc0

Please sign in to comment.