J3vb/OwnCord
1
0
Fork 0
mirror of https://github.com/J3vb/OwnCord.git synced 2026-09-02 19:43:10 +03:00
Code Issues Packages Projects Releases Wiki Activity

fix(client): move the status-picker dot onto the avatar corner

Browse Source 
The corner dot on the user bar avatar was a static hardcoded-green div —
never reflected real status and did nothing on click. Removed it and
relocated the actual StatusPicker trigger dot (real color, opens the
status dropdown) to that same corner instead of its own row. The
"Online"/"Idle"/... text label under the username is unchanged.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
J3vb
2026-08-09 08:50:59 +02:00
co-authored by Claude Sonnet 5
parent 929438a2b7
commit 26b46ccd95
3 changed files with 23 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Client/tauri-client/src/components/UserBar.ts
+4 -8
View File
@@ -120,19 +120,15 @@ export function createUserBar(options?: UserBarOptions): MountableComponent {
});
avatarTextEl = createElement("span", {});
avatarEl.appendChild(avatarTextEl);
const statusDot = createElement("div", {
class: "status-dot",
style:
"background: var(--green); width: 10px; height: 10px; border-radius: 50%; position: absolute; bottom: 0; right: 0;",
});
avatarEl.appendChild(statusDot);
const info = createElement("div", { class: "ub-info" });
nameEl = createElement("span", { class: "ub-name", "data-testid": "user-bar-name" });
statusEl = createElement("span", { class: "ub-status" });
appendChildren(info, nameEl, statusEl);
// Status picker — anchored below username, opens upward
// Status picker — the dot itself lives in the avatar's corner (same spot
// the old plain status indicator occupied) so it doubles as the status
// display and its click target; the dropdown still opens upward from there.
const statusPickerWrap = createElement("div", {
class: "ub-status-picker-wrap",
"data-testid": "status-picker-wrap",
@@ -203,7 +199,7 @@ export function createUserBar(options?: UserBarOptions): MountableComponent {
() => updatePickerDisabled(),
);
info.appendChild(statusPickerWrap);
avatarEl.appendChild(statusPickerWrap);
const buttons = createElement("div", { class: "ub-controls" });
Client/tauri-client/src/styles/app.css
+12 -5
View File
@@ -657,14 +657,14 @@
color: white;
cursor: pointer;
}
.user-bar .status-dot {
/* The status picker's own trigger dot now lives here instead of a separate
static dot — same corner, but it's the real thing: colored per status and
clickable to open the picker. Sizing/border override lives with the rest
of the status-picker rules below. */
.user-bar .ub-status-picker-wrap {
position: absolute;
bottom: -1px;
right: -1px;
width: 12px;
height: 12px;
border-radius: var(--radius-circle);
border: 3px solid rgba(17, 18, 20, 0.6);
}
.user-bar .ub-info {
flex: 1;
@@ -750,6 +750,13 @@
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* In the user bar the dot sits on the avatar corner, not inline next to
text — bigger, with a ring so it reads against any avatar picture. */
.user-bar .status-picker-dot {
width: 12px;
height: 12px;
border: 3px solid rgba(17, 18, 20, 0.6);
}
.status-picker-option {
display: flex;
align-items: center;
Client/tauri-client/tests/e2e/user-bar.spec.ts
+7
View File
@@ -36,6 +36,13 @@ test.describe("User Bar", () => {
await expect(status).toHaveText("Online");
});
test("status picker dot sits on the avatar", async ({ page }) => {
const dot = page.locator(
"[data-testid='user-bar'] .ub-avatar [data-testid='status-picker-wrap'] .status-picker-dot",
);
await expect(dot).toBeVisible();
});
test("user bar has settings button with correct label", async ({ page }) => {
const controls = page.locator("[data-testid='user-bar'] .ub-controls");
await expect(controls).toBeVisible();