Skip to content

Commit

Permalink
#127 intiialize custom title bar
Browse files Browse the repository at this point in the history
  • Loading branch information
neil authored and neil committed Mar 9, 2023
1 parent f4ba807 commit f06ea8a
Show file tree
Hide file tree
Showing 7 changed files with 50 additions and 19 deletions.
9 changes: 7 additions & 2 deletions modules/desktop/electron/electron.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import windowStateManager from "electron-window-state";
import { app, BrowserWindow, ipcMain, net } from "electron";
import { setupTitlebar, attachTitlebarToWindow } from "custom-electron-titlebar/main";
import * as Sentry from "@sentry/electron";
import contextMenu from "electron-context-menu";
import serve from "electron-serve";
Expand Down Expand Up @@ -34,18 +35,21 @@ const port = process.env.PORT || 3000;
const allowDebug = !app.isPackaged || process.env.DEBUG_BUILD === "1";
let mainWindow: BrowserWindow | null;

setupTitlebar();

function createWindow() {
const windowState = windowStateManager({
defaultWidth: 800,
defaultHeight: 600
});

const mainWindow = new BrowserWindow({
titleBarStyle: "hidden",
backgroundColor: "black",
autoHideMenuBar: true,
trafficLightPosition: {
x: 17,
y: 32
x: 14,
y: 13
},
minHeight: 450,
minWidth: 500,
Expand Down Expand Up @@ -74,6 +78,7 @@ function createWindow() {
windowState.saveState(mainWindow);
});

attachTitlebarToWindow(mainWindow);
return mainWindow;
}

Expand Down
9 changes: 9 additions & 0 deletions modules/desktop/electron/preload.cjs
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
import { Titlebar } from "custom-electron-titlebar";

const isVite = () => {
try {
return window.location.href.includes("is-vite");
Expand All @@ -17,3 +19,10 @@ if (!isVite()) {
SvelteSentry.init
);
}

window.addEventListener("DOMContentLoaded", () => {
// Title bar implemenation
new Titlebar({
titleHorizontalAlignment: "left"
});
});
1 change: 1 addition & 0 deletions modules/desktop/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -82,6 +82,7 @@
"axios": "^1.3.2",
"bcryptjs": "^2.4.3",
"buffer": "^6.0.3",
"custom-electron-titlebar": "4.2.0-beta.0",
"dayjs": "^1.11.7",
"electron-context-menu": "^3.6.1",
"electron-log": "^4.4.8",
Expand Down
24 changes: 14 additions & 10 deletions modules/desktop/src/components/top-bar/top-bar.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,24 @@
});
</script>

<header class="border-gray flex w-full border border-l-0 border-r-0">
<a href="/">
<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
</a>
<header class="border-gray flex w-full border border-l-0 border-r-0" style="-webkit-app-region: drag">
<div class="w-16">
<!-- just spacing for the close/expand/ buttons in title bar
todo: handle this different when on linux probably move to right
-->
</div>
<ul class="text-gray flex h-10 gap-4 pl-4 align-middle leading-10">
<button on:click={navStore.back} class={$prevPath ? 'active' : ''}>&#8592</button>
<button on:click={navStore.next} class={$nextPath ? 'active' : ''}>&#8594</button>
</ul>
<SearchInput
class="flex-grow border border-none py-4"
size="small"
placeholder={$t("store-search-placeholder")}
{onSearch}
/>
<div class="p-1 flex-grow h-8">
<SearchInput
class="w-full border border-gray rounded-sm"
size="small"
placeholder={$t("store-search-placeholder")}
{onSearch}
/>
</div>
<!-- <ul class="text-gray flex gap-4 pr-4 pt-2 align-middle">
<button class="icon-filter hover:text-white" />
<button class="icon-share hover:text-white" />
Expand Down
2 changes: 1 addition & 1 deletion modules/desktop/src/libs/translations/translations.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
"cli": {
"install": "install tea"
},
"store-search-placeholder": "search the tea store",
"store-search-placeholder": "type to search",
"search": "search",
"home": {
"discover-title": "DISCOVER",
Expand Down
14 changes: 8 additions & 6 deletions modules/ui/src/search-input/search-input.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
};
</script>

<section class={`flex items-center border-b border-r-0 border-l-0 py-2 ${size} ${clazz}`}>
<section class={`flex items-center pb-1 ${size} ${clazz}`}>
<div class="icon pl-4">
<i class="icon-search-icon" />
</div>
Expand All @@ -26,15 +26,18 @@

<!-- <input type="search" class="w-full bg-black h-12 p-4 border border-x-0 border-gray"/> -->
<style>
section {
padding-top: 0.15rem;
}
.icon-search-icon {
color: #949494;
margin-right: 20px;
margin-right: 10px;
position: relative;
top: 2px;
top: 3px;
}
section.medium .icon-search-icon {
font-size: 30px;
font-size: 24px;
}
section.medium {
Expand All @@ -47,7 +50,6 @@
section input {
font-family: "pp-neue-machina", sans-serif;
color: #00ffd0;
text-transform: uppercase;
margin-bottom: -5px;
min-width: 60%;
padding: 0px;
Expand All @@ -59,7 +61,7 @@
}
section.medium input {
font-size: 24px;
font-size: 16px;
}
section.large input {
font-size: 32px;
Expand Down
10 changes: 10 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit f06ea8a

Please sign in to comment.