Gitpub/Gitpub-Desktop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated taskbar to be OS agnostic

Browse Source 
Updated task bar to use MacOS traffic lights on left when on MacOS and the regular buttons on the right when it is Windows or Linux
This commit is contained in:
Andrew Zambazos
2026-05-13 13:28:11 +12:00
parent 68c400f6c4
commit 558cd3ddd7
2 changed files with 88 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/css/components.css
+52
View File
@@ -151,6 +151,7 @@
/* ── Toolbar ──────────────────────────────────────────────────────────────── */
.gd-toolbar {
--mac-window-controls-width: 80px;
display: flex;
align-items: stretch;
grid-column: 1 / -1;
@@ -227,6 +228,57 @@
color: #ffffff;
}
.gd-toolbar-macos .gd-window-controls {
align-items: center;
gap: 8px;
width: var(--mac-window-controls-width);
padding: 0 14px;
border-left: 0;
border-right: 1px solid rgba(229, 161, 62, 0.12);
}
.gd-toolbar-macos .gd-toolbar-left {
width: calc(320px - var(--mac-window-controls-width));
}
.gd-toolbar-macos .gd-window-control {
width: 12px;
height: 12px;
border-radius: 999px;
color: rgba(60, 64, 67, 0.72);
}
.gd-toolbar-macos .gd-window-control svg {
opacity: 0;
transform: scale(0.72);
transition: opacity 0.12s ease;
}
.gd-toolbar-macos .gd-window-controls:hover .gd-window-control svg {
opacity: 1;
}
.gd-toolbar-macos .gd-window-close {
background: #ff5f57;
}
.gd-toolbar-macos .gd-window-minimize {
background: #ffbd2e;
}
.gd-toolbar-macos .gd-window-maximize {
background: #28c840;
}
.gd-toolbar-macos .gd-window-control:hover {
color: rgba(36, 41, 47, 0.8);
}
.gd-toolbar-macos .gd-window-close:hover {
background: #ff5f57;
color: rgba(36, 41, 47, 0.8);
}
.gd-external-actions {
display: flex;
align-items: center;
frontend/js/app.js
+36 -6
View File
@@ -70,6 +70,16 @@ const WINDOW_MINIMIZE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" ar
const WINDOW_MAXIMIZE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" fill-rule="evenodd" d="M2.75 2h6.5c.414 0 .75.336.75.75v6.5a.75.75 0 0 1-.75.75h-6.5A.75.75 0 0 1 2 9.25v-6.5c0-.414.336-.75.75-.75Zm.75 1.5v5h5v-5h-5Z"/></svg>`;
const WINDOW_CLOSE_ICON = `<svg width="12" height="12" viewBox="0 0 12 12" aria-hidden="true"><path fill="currentColor" d="M3.28 2.22a.75.75 0 0 0-1.06 1.06L4.94 6 2.22 8.72a.75.75 0 1 0 1.06 1.06L6 7.06l2.72 2.72a.75.75 0 1 0 1.06-1.06L7.06 6l2.72-2.72a.75.75 0 0 0-1.06-1.06L6 4.94 3.28 2.22Z"/></svg>`;
function currentPlatform() {
const platform = navigator.userAgentData?.platform || navigator.platform || "";
const userAgent = navigator.userAgent || "";
const value = `${platform} ${userAgent}`.toLowerCase();
if (value.includes("mac")) return "macos";
if (value.includes("win")) return "windows";
return "linux";
}
function currentTauriWindow() {
const tauriWindow = window.__TAURI__?.window;
if (tauriWindow?.getCurrentWindow) {
@@ -211,6 +221,26 @@ function externalEditorOptionsTemplate(state) {
`;
}
function windowControlsTemplate(isMacos = false) {
const controls = isMacos
? [
{ action: "close", label: "Close", icon: WINDOW_CLOSE_ICON, className: "gd-window-close" },
{ action: "minimize", label: "Minimize", icon: WINDOW_MINIMIZE_ICON, className: "gd-window-minimize" },
{ action: "maximize", label: "Maximize", icon: WINDOW_MAXIMIZE_ICON, className: "gd-window-maximize" },
]
: [
{ action: "minimize", label: "Minimize", icon: WINDOW_MINIMIZE_ICON, className: "gd-window-minimize" },
{ action: "maximize", label: "Maximize", icon: WINDOW_MAXIMIZE_ICON, className: "gd-window-maximize" },
{ action: "close", label: "Close", icon: WINDOW_CLOSE_ICON, className: "gd-window-close" },
];
return `<div class="gd-window-controls" role="group" aria-label="Window controls">
${controls.map((control) => `
<button class="gd-window-control ${control.className}" type="button" data-window-action="${control.action}" title="${control.label}" aria-label="${control.label} window">${control.icon}</button>
`).join("")}
</div>`;
}
function statusLabel(status = "") {
const labels = {
modified: "Modified",
@@ -1160,6 +1190,9 @@ function dashboardView() {
const displayRepoName = currentRepositoryName();
const displayBranchName = currentBranchName();
const hasLocalRepo = Boolean(state.selectedRepoPath);
const isMacos = currentPlatform() === "macos";
const toolbarPlatformClass = isMacos ? "gd-toolbar-macos" : "gd-toolbar-standard";
const windowControlsHTML = windowControlsTemplate(isMacos);
// ── Repository identity ─────────────────────────────────────────────────
const repoIdentity = (() => {
@@ -1184,6 +1217,7 @@ function dashboardView() {
// ── Toolbar ─────────────────────────────────────────────────────────────
const toolbarHTML = `
${isMacos ? windowControlsHTML : ""}
<div class="gd-toolbar-left">
<button class="gd-toolbar-cell gd-repo-cell" type="button" data-open-modal="repos" title="${escapeHtml(state.selectedRepoPath || repoIdentity.primary)}">
<span class="gd-cell-icon">${LOCAL_REPO_ICON}</span>
@@ -1277,11 +1311,7 @@ function dashboardView() {
</div>` : ""}
</div>
</div>
<div class="gd-window-controls" role="group" aria-label="Window controls">
<button class="gd-window-control" type="button" data-window-action="minimize" title="Minimize" aria-label="Minimize window">${WINDOW_MINIMIZE_ICON}</button>
<button class="gd-window-control" type="button" data-window-action="maximize" title="Maximize" aria-label="Maximize window">${WINDOW_MAXIMIZE_ICON}</button>
<button class="gd-window-control gd-window-close" type="button" data-window-action="close" title="Close" aria-label="Close window">${WINDOW_CLOSE_ICON}</button>
</div>
${isMacos ? "" : windowControlsHTML}
`;
// ── Sidebar content ─────────────────────────────────────────────────────
@@ -1431,7 +1461,7 @@ function dashboardView() {
// ── Assemble ─────────────────────────────────────────────────────────────
appRoot.innerHTML = `
<div class="layout">
<header class="gd-toolbar">
<header class="gd-toolbar ${toolbarPlatformClass}">
${toolbarHTML}
</header>
<aside class="gd-left">