diff --git a/src/client/webapp/elements/mounts.tsx b/src/client/webapp/elements/mounts.tsx index 72e50e3..6ff3474 100644 --- a/src/client/webapp/elements/mounts.tsx +++ b/src/client/webapp/elements/mounts.tsx @@ -5,6 +5,7 @@ import Q from "../q-module"; import ElementsUtil from "./require/elements-util"; import MemberList from "./lists/member-list"; import MessageList from './lists/message-list'; +import ChannelTitle from './sections/channel-title'; export function mountBaseComponents() { // guild-list @@ -21,8 +22,9 @@ export function mountGuildComponents(q: Q, guild: CombinedGuild) { } export function mountGuildChannelComponents(q: Q, guild: CombinedGuild, channel: Channel) { - // channel-content pieces - // TODO + // channel-title pieces + ElementsUtil.unmountReactComponent(q.$('.channel-title-anchor')); + ElementsUtil.mountReactComponent(q.$('.channel-title-anchor'), ) // message-list // Up Next: Figure out why this is empty diff --git a/src/client/webapp/elements/sections/channel-title.tsx b/src/client/webapp/elements/sections/channel-title.tsx new file mode 100644 index 0000000..cb65405 --- /dev/null +++ b/src/client/webapp/elements/sections/channel-title.tsx @@ -0,0 +1,26 @@ +import React, { FC } from 'react'; +import { Channel } from '../../data-types'; + +export interface ChannelTitleProps { + channel: Channel; +} + +const ChannelTitle: FC = (props: ChannelTitleProps) => { + const { channel } = props; + + return ( +
+
+ + + +
+
{channel.name}
+
+
{channel.flavorText}
+
+ ); +} + +export default ChannelTitle; diff --git a/src/client/webapp/index.html b/src/client/webapp/index.html index b6b53dd..00b024a 100644 --- a/src/client/webapp/index.html +++ b/src/client/webapp/index.html @@ -58,15 +58,7 @@
-
- -
- -
-
-
-
-
+
@@ -85,7 +77,6 @@
-
diff --git a/src/client/webapp/styles/scrollbars.scss b/src/client/webapp/styles/scrollbars.scss index 4c1e640..231ebcd 100644 --- a/src/client/webapp/styles/scrollbars.scss +++ b/src/client/webapp/styles/scrollbars.scss @@ -26,7 +26,6 @@ /* General custom scrollbar (much thinner than channel feed) */ /* Note: Using this hack... https://stackoverflow.com/questions/29866759/how-do-i-add-a-margin-to-a-css-webkit-scrollbar */ - :not(.message-list .infinite-scroll-scroll-base):not(:hover)::-webkit-scrollbar-thumb { visibility: hidden; } diff --git a/src/client/webapp/ui.ts b/src/client/webapp/ui.ts index e119a1a..b1bab91 100644 --- a/src/client/webapp/ui.ts +++ b/src/client/webapp/ui.ts @@ -125,9 +125,6 @@ export default class UI { next.classList.add('active'); // Channel Name + Flavor Text Header + Text Input Placeholder - this.q.$('#channel-name').innerText = channel.name; - this.q.$('#channel-flavor-text').innerText = channel.flavorText || ''; - this.q.$('#channel-flavor-divider').style.visibility = channel.flavorText ? 'visible' : 'hidden'; this.q.$('#text-input').setAttribute('data-placeholder', 'Message #' + channel.name); mountGuildChannelComponents(this.q, guild, channel); @@ -279,9 +276,6 @@ export default class UI { newElement.classList.add('active'); // See also setActiveChannel - this.q.$('#channel-name').innerText = channel.name; - this.q.$('#channel-flavor-text').innerText = channel.flavorText ?? ''; - this.q.$('#channel-flavor-divider').style.visibility = channel.flavorText ? 'visible' : 'hidden'; this.q.$('#text-input').setAttribute('placeholder', 'Message #' + channel.name); } }