fix server member list scrolling
This commit is contained in:
@@ -26,86 +26,85 @@
|
||||
chat.userContextMenu = { x: e.clientX, y: e.clientY, user };
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
|
||||
<div class="right-sidebar">
|
||||
<div class="member-list">
|
||||
{#if !chat.isReady}
|
||||
<div class="member-list-section-header">
|
||||
<div class="member-list">
|
||||
{#if !chat.isReady}
|
||||
<div class="member-list-section-header">
|
||||
MEMBERS
|
||||
</div>
|
||||
{#each Array(10) as _}
|
||||
<div class="member-item">
|
||||
<Skeleton circle width="32px" />
|
||||
<div style="margin-left: 12px;">
|
||||
<Skeleton width="100px" height="0.9rem" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#each Array(10) as _}
|
||||
<div class="member-item">
|
||||
<Skeleton circle width="32px" />
|
||||
<div style="margin-left: 12px;">
|
||||
{/each}
|
||||
{:else}
|
||||
{#if onlineMembers.length > 0}
|
||||
<div class="member-list-section-header">
|
||||
ONLINE — {onlineMembers.length}
|
||||
</div>
|
||||
{#each onlineMembers as member (member.identity.toHexString())}
|
||||
{@const status = getStatus(member)}
|
||||
{@const voiceState = getVoiceState(member)}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="member-item" oncontextmenu={(e) => handleContextMenu(e, member)}>
|
||||
<div class="avatar-container">
|
||||
<Avatar user={member} size="small" isTalking={voiceState?.isTalking} />
|
||||
<div class="status-dot green overlay"></div>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<span class="member-name {voiceState?.isTalking ? 'talking' : ''}">
|
||||
{member.name || member.identity.toHexString().substring(0, 8)}
|
||||
{#if chat.identity?.isEqual(member.identity)}
|
||||
<span class="me-badge">(You)</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if status}
|
||||
<div class="member-status" title={status}>{status}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div style="flex: 1;"></div>
|
||||
<div class="member-indicators">
|
||||
{#if voiceState?.isSharingScreen}
|
||||
<span class="sharing-badge">LIVE</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/each}
|
||||
{:else}
|
||||
{#if onlineMembers.length > 0}
|
||||
<div class="member-list-section-header">
|
||||
ONLINE — {onlineMembers.length}
|
||||
</div>
|
||||
{#each onlineMembers as member (member.identity.toHexString())}
|
||||
{@const status = getStatus(member)}
|
||||
{@const voiceState = getVoiceState(member)}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="member-item" oncontextmenu={(e) => handleContextMenu(e, member)}>
|
||||
<div class="avatar-container">
|
||||
<Avatar user={member} size="small" isTalking={voiceState?.isTalking} />
|
||||
<div class="status-dot green overlay"></div>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<span class="member-name {voiceState?.isTalking ? 'talking' : ''}">
|
||||
{member.name || member.identity.toHexString().substring(0, 8)}
|
||||
{#if chat.identity?.isEqual(member.identity)}
|
||||
<span class="me-badge">(You)</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if status}
|
||||
<div class="member-status" title={status}>{status}</div>
|
||||
{/if}
|
||||
</div>
|
||||
<div style="flex: 1;"></div>
|
||||
<div class="member-indicators">
|
||||
{#if voiceState?.isSharingScreen}
|
||||
<span class="sharing-badge">LIVE</span>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
|
||||
{#if offlineMembers.length > 0}
|
||||
<div class="member-list-section-header">
|
||||
OFFLINE — {offlineMembers.length}
|
||||
</div>
|
||||
{#each offlineMembers as member (member.identity.toHexString())}
|
||||
{@const status = getStatus(member)}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="member-item offline" oncontextmenu={(e) => handleContextMenu(e, member)}>
|
||||
<div class="avatar-container">
|
||||
<Avatar user={member} size="small" />
|
||||
<div class="status-dot grey overlay"></div>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<span class="member-name">
|
||||
{member.name || member.identity.toHexString().substring(0, 8)}
|
||||
{#if chat.identity?.isEqual(member.identity)}
|
||||
<span class="me-badge">(You)</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if status}
|
||||
<div class="member-status" title={status}>{status}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
{#if offlineMembers.length > 0}
|
||||
<div class="member-list-section-header">
|
||||
OFFLINE — {offlineMembers.length}
|
||||
</div>
|
||||
{#each offlineMembers as member (member.identity.toHexString())}
|
||||
{@const status = getStatus(member)}
|
||||
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
||||
<div class="member-item offline" oncontextmenu={(e) => handleContextMenu(e, member)}>
|
||||
<div class="avatar-container">
|
||||
<Avatar user={member} size="small" />
|
||||
<div class="status-dot grey overlay"></div>
|
||||
</div>
|
||||
<div class="member-details">
|
||||
<span class="member-name">
|
||||
{member.name || member.identity.toHexString().substring(0, 8)}
|
||||
{#if chat.identity?.isEqual(member.identity)}
|
||||
<span class="me-badge">(You)</span>
|
||||
{/if}
|
||||
</span>
|
||||
{#if status}
|
||||
<div class="member-status" title={status}>{status}</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
{/if}
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.avatar-container {
|
||||
position: relative;
|
||||
@@ -150,24 +149,14 @@
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
|
||||
.right-sidebar {
|
||||
width: 240px;
|
||||
background-color: var(--background-secondary);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-shrink: 0;
|
||||
border-left: 1px solid rgba(0, 0, 0, 0.2);
|
||||
position: relative;
|
||||
z-index: 100;
|
||||
}
|
||||
.member-list {
|
||||
padding: 16px 8px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
overflow-y: auto;
|
||||
overflow-y: auto;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
.member-item {
|
||||
@@ -179,6 +168,7 @@
|
||||
cursor: pointer;
|
||||
color: var(--interactive-normal);
|
||||
transition: all 0.1s;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.member-item:hover {
|
||||
@@ -209,6 +199,7 @@
|
||||
color: var(--text-muted);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.02em;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.sharing-badge {
|
||||
|
||||
Reference in New Issue
Block a user