= (props: GuildSetting
if (selectedId === 'invites' ) setDisplay();
}, [ selectedId ]);
- const guildNameText = useMemo(() => {
- return guildMetaError ? 'metadata error' : guildMeta?.name ?? 'loading...';
- }, [ guildMeta, guildMetaError ])
-
return (
-
= (props: ConnectionInfoProps) =>
const rootRef = useRef(null);
- // TODO: Respond to and emit global context menu events to prevent multiple
- // context menus from being open at once. (maybe this isn't very reacty though)
const [ contextMenuOpen, setContextMenuOpen ] = useState(false);
const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
@@ -40,7 +38,7 @@ const ConnectionInfo: FC = (props: ConnectionInfoProps) =>
const contextMenu = useMemo(() => {
if (!selfMember) return null;
- return { console.log('close'); setContextMenuOpen(false); }} />
+ return { setContextMenuOpen(false); }} />
}, [ guild, selfMember, rootRef ]);
const toggleContextMenu = useCallback(() => {
diff --git a/src/client/webapp/elements/sections/guild-title.tsx b/src/client/webapp/elements/sections/guild-title.tsx
new file mode 100644
index 0000000..afea9e4
--- /dev/null
+++ b/src/client/webapp/elements/sections/guild-title.tsx
@@ -0,0 +1,50 @@
+import React, { FC, useCallback, useMemo, useRef, useState } from 'react';
+import CombinedGuild from '../../guild-combined';
+import GuildTitleContextMenu from '../context-menus/context-menu-guild-title';
+import GuildSubscriptions from '../require/guild-subscriptions';
+
+export interface GuildTitleProps {
+ guild: CombinedGuild;
+}
+
+const GuildTitle: FC = (props: GuildTitleProps) => {
+ const { guild } = props;
+
+ const rootRef = useRef(null);
+
+ const [ contextMenuOpen, setContextMenuOpen ] = useState(false);
+
+ // TODO: Handle fetch error
+ const [ guildMeta, fetchError ] = GuildSubscriptions.useGuildMetadataSubscription(guild);
+ const [ selfMember ] = GuildSubscriptions.useSelfMemberSubscription(guild);
+
+ const alignment = useMemo(() => {
+ return { top: 'bottom', centerX: 'centerX' }
+ }, []);
+
+ const contextMenu = useMemo(() => {
+ if (!guildMeta) return null;
+ if (!selfMember) return null;
+ return (
+ { setContextMenuOpen(false); }}
+ guild={guild} guildMeta={guildMeta} selfMember={selfMember}
+ />
+ );
+ }, [ guild, guildMeta, selfMember, rootRef ]);
+
+ const toggleContextMenu = useCallback(() => {
+ setContextMenuOpen(oldContextMenuOpen => !!contextMenu && !oldContextMenuOpen);
+ }, [ contextMenu ]);
+
+ return (
+
+
+ {guildMeta?.name ?? null}
+
+ {contextMenuOpen ? contextMenu : null}
+
diff --git a/src/client/webapp/preload.ts b/src/client/webapp/preload.ts
index 53cdfe6..c00f415 100644
--- a/src/client/webapp/preload.ts
+++ b/src/client/webapp/preload.ts
@@ -18,7 +18,6 @@ import { Changes, Channel, ConnectionInfo, GuildMetadata, Member, Resource, Toke
import Q from './q-module';
import bindWindowButtonEvents from './elements/events-window-buttons';
import bindTextInputEvents from './elements/events-text-input';
-import bindAddGuildTitleEvents from './elements/events-guild-title';
import bindAddGuildEvents from './elements/events-add-guild';
import PersonalDB from './personal-db';
import MessageRAMCache from './message-ram-cache';
@@ -73,7 +72,6 @@ window.addEventListener('DOMContentLoaded', () => {
bindWindowButtonEvents(q);
bindTextInputEvents(document, q, ui);
- bindAddGuildTitleEvents(document, q, ui);
bindAddGuildEvents(document, q, ui, guildsManager);
LOG.silly('events bound');
diff --git a/src/client/webapp/styles/contexts.scss b/src/client/webapp/styles/contexts.scss
index 98e020b..f1fa078 100644
--- a/src/client/webapp/styles/contexts.scss
+++ b/src/client/webapp/styles/contexts.scss
@@ -53,8 +53,8 @@
margin-right: 8px;
}
- .guild-title-context .item .icon img,
- .guild-title-context .item .icon svg {
+ .guild-title-context-menu .item .icon img,
+ .guild-title-context-menu .item .icon svg {
width: 16px;
height: 16px;
}
diff --git a/src/client/webapp/styles/guild.scss b/src/client/webapp/styles/guild.scss
index 699ec9e..686e982 100644
--- a/src/client/webapp/styles/guild.scss
+++ b/src/client/webapp/styles/guild.scss
@@ -14,25 +14,25 @@
border-top-left-radius: 8px;
}
-#guild-name-container {
+// TODO: just do this with inline styles
+.privilege-modify_profile .guild-name-container,
+.privilege-modify_members .guild-name-container {
+ cursor: pointer;
+}
+
+.guild-name-container {
padding: 0 16px;
height: 48px;
font-weight: 600;
display: flex;
align-items: center;
- cursor: pointer;
color: $header-primary;
border-bottom: 1px solid $background-secondary-alt;
-}
-#guild-name {
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
-}
-
-#guild.privilege-modify_profile #guild-name,
-#guild.privilege-modify_members #guild-name {
- cursor: pointer;
+ .guild-name {
+ display: block;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
}
diff --git a/src/client/webapp/ui.ts b/src/client/webapp/ui.ts
index 8e4146b..bef6f7d 100644
--- a/src/client/webapp/ui.ts
+++ b/src/client/webapp/ui.ts
@@ -180,7 +180,6 @@ export default class UI {
public async updateGuildName(guild: CombinedGuild, name: string): Promise{
await this.lockGuildName(guild, () => {
- this.q.$('#guild-name').innerText = name;
const baseElement = this.q.$('#guild-list .guild[data-id="' + guild.id + '"]');
baseElement.setAttribute('meta-name', name);
});