Skip to content

Commit

Permalink
feat: add Windows support
Browse files Browse the repository at this point in the history
  • Loading branch information
Toinane committed Mar 18, 2022
1 parent 70fd4f4 commit b0dcb9d
Show file tree
Hide file tree
Showing 11 changed files with 165 additions and 24 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
"main": "build/src/main/index.js",
"scripts": {
"dev": "tsc-watch -p tsconfig.electron.json --onSuccess 'npm run dev:server'",
"dev:win": "tsc-watch -p tsconfig.electron.json",
"dev:server": "node build/src/scripts/dev-server.js",
"build:ts": "tsc -p tsconfig.electron.json",
"build": "npm run build:ts && node build/src/scripts/build.js ",
Expand Down
24 changes: 22 additions & 2 deletions src/main/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import { app, BrowserWindow, ipcMain, Menu, shell } from 'electron'
import type { Rectangle } from 'electron'
import path from 'path'
import { platform } from 'process'
import { store } from './store'
import { checkForUpdate } from './update-check'
import { ImageOptimizer } from './image-compressor'
Expand All @@ -8,12 +10,21 @@ import { createMenu } from './menu'
const isDev = process.env.NODE_ENV === 'development'
let mainWindow: BrowserWindow

function getPlatform () {
switch (platform) {
case 'darwin': return 'macos'
case 'win32': return 'windows'
default: return 'linux'
}
}

function createWindow () {
const bounds = store.app.get('bounds')
const { x, y } = store.app.get('bounds') as Rectangle
mainWindow = new BrowserWindow({
width: 550,
height: 370,
...bounds,
x,
y,
titleBarStyle: 'hidden',
resizable: false,
backgroundColor: '#212123',
Expand All @@ -40,6 +51,7 @@ function createWindow () {
}

function init () {
store.app.set('os', getPlatform())
createWindow()
checkForUpdate(mainWindow)
Menu.setApplicationMenu(Menu.buildFromTemplate(createMenu(mainWindow)))
Expand Down Expand Up @@ -72,6 +84,14 @@ ipcMain.on('drop', (_, files = []) => {
optimizer.start()
})

ipcMain.on('toolbar', (_, type) => {
switch (type) {
case 'reduce': return mainWindow.minimize()
case 'maximize': return mainWindow.maximize()
case 'close': return mainWindow.close()
}
})

ipcMain.on('open-url', (event, url) => {
shell.openExternal(url)
})
4 changes: 4 additions & 0 deletions src/main/store/module/app.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ export default new Store<StoreSchema>({
watch: true,

schema: {
os: {
type: 'string',
default: 'macos'
},
bounds: {
type: 'object',
default: {}
Expand Down
1 change: 1 addition & 0 deletions src/main/types/index.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ declare global {
}

export interface StoreSchema {
os: ['macos', 'windows', 'linux']
bounds: object
addToSubfolder: boolean
addMinSuffix: boolean
Expand Down
24 changes: 9 additions & 15 deletions src/renderer/App.vue
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
<template>
<div class="app-tool-bar" />
<header>
<AppTitleBar />
</header>
<main>
<RouterView />
</main>
Expand Down Expand Up @@ -58,13 +60,17 @@ ipc.on('drop-from-dialog', () => {
height: 100vh;
overflow: hidden;
display: grid;
grid-template-rows: auto var(--footer-height);
grid-template-rows: var(--toolbar-height) auto var(--footer-height);
grid-template-areas:
'header'
'main'
'footer';
header {
grid-area: header;
}
main {
grid-area: main;
padding: var(--toolbar-height) 12px 0 12px;
padding: 0 12px 0 12px;
}
footer {
grid-area: footer;
Expand All @@ -79,16 +85,4 @@ ipc.on('drop-from-dialog', () => {
pointer-events: none;
}
}
.app {
&-tool-bar {
position: absolute;
top: 0;
width: 100%;
height: var(--toolbar-height);
-webkit-app-region: drag;
z-index: 1010;
transition: all 0.5s;
}
}
</style>
1 change: 1 addition & 0 deletions src/renderer/components/AppFileList.vue
Original file line number Diff line number Diff line change
Expand Up @@ -141,6 +141,7 @@ onUnmounted(() => {
top: 0;
}
tr {
height: 25px;
&.event {
background: var(--color-table-row-even);
}
Expand Down
116 changes: 116 additions & 0 deletions src/renderer/components/AppTitleBar.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,116 @@
<template>
<div
class="tool-bar"
:class="platform"
>
<div
class="close"
@click="ipc.send('toolbar', 'close')"
/>
<div
class="reduce"
@click="ipc.send('toolbar', 'reduce')"
/>
<div class="drag-zone" />
</div>
</template>

<script setup lang="ts">
import { store as electronStore, ipc } from '@/electron'
const platform = electronStore.get('os')
</script>

<style lang="scss" scoped>
.tool-bar {
height: var(--toolbar-height);
display: flex;
justify-content: left;
align-items: center;
.drag-zone {
width: 100%;
height: 100%;
-webkit-app-region: drag;
}
}
.macos {
margin-left: 10px;
div:not(.drag-zone) {
width: 12px;
height: 11px;
margin: 5px;
border-radius: 100px;
}
.close {
background: #FF5A52;
}
.maximize {
background: #E7C039;
}
.reduce {
background: #51C23A;
}
}
.windows {
justify-content: right;
flex-direction: row-reverse;
div:not(.drag-zone) {
position: relative;
width: 50px;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
div:hover {
background: rgba(255, 255, 255, 0.2);
}
.reduce::before {
content: "";
position: absolute;
top: 50%;
left: 38%;
width: 10px;
border-bottom: 1px solid var(--color-gray-700);
}
.maximize::before {
content: "";
position: absolute;
top: 37%;
left: 37%;
width: 8px;
height: 8px;
border: 1px solid var(--color-gray-700);
}
.close::before, .close::after {
content: "";
position: absolute;
top: 50%;
left: 32%;
width: 14px;
height: 0.5px;
transform: rotate(45deg);
background: var(--color-gray-700);
}
.close::after {
transform: rotate(-45deg);
}
.close:hover {
background: rgba(232, 17, 35, 0.8);
}
}
</style>
3 changes: 2 additions & 1 deletion src/renderer/components/ui/AppInput.vue
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
</div>
</template>

<script setup lang="ts">import { computed } from 'vue'
<script setup lang="ts">
import { computed } from 'vue'
interface Props {
modelValue: string | number
Expand Down
3 changes: 2 additions & 1 deletion src/renderer/types/components.d.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ declare module 'vue' {
AppInput: typeof import('./../components/ui/AppInput.vue')['default']
AppPreloader: typeof import('./../components/ui/AppPreloader.vue')['default']
AppSettingRow: typeof import('./../components/AppSettingRow.vue')['default']
AppTitleBar: typeof import('./../components/AppTitleBar.vue')['default']
AppToggle: typeof import('./../components/ui/AppToggle.vue')['default']
SvgArrowCircleUp: typeof import('~icons/svg/arrow-circle-up')['default']
SvgCog: typeof import('~icons/svg/cog')['default']
Expand All @@ -18,4 +19,4 @@ declare module 'vue' {
}
}

export {}
export { }
10 changes: 6 additions & 4 deletions src/scripts/dev-server.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { spawn } from 'child_process'
import type { ChildProcess, SpawnOptionsWithoutStdio } from 'child_process'
import type { ChildProcess } from 'child_process'
import path from 'path'
import chalk from 'chalk'
import chokidar from 'chokidar'
Expand All @@ -23,9 +23,7 @@ async function startRenderer () {
function startElectron () {
if (electronProcess) return

const args = ['.', rendererPort] as SpawnOptionsWithoutStdio

electronProcess = spawn('electron', args)
electronProcess = spawn('electron', ['.', rendererPort.toString()], { shell: true })

electronProcess?.stdout?.on('data', data => {
console.log(chalk.blueBright('[Electron] ') + chalk.white(data.toString()))
Expand All @@ -34,6 +32,10 @@ function startElectron () {
electronProcess?.stderr?.on('data', data => {
console.log(chalk.redBright('[Electron] ') + chalk.white(data.toString()))
})

electronProcess.on('error', error => {
console.log(chalk.redBright('[Electron] ', error))
})
}

function restartElectron () {
Expand Down
2 changes: 1 addition & 1 deletion yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -6109,7 +6109,7 @@ human-signals@^2.1.0:
resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==

husky@^7.0.4:
husky@^7.0.0:
version "7.0.4"
resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.4.tgz#242048245dc49c8fb1bf0cc7cfb98dd722531535"
integrity sha512-vbaCKN2QLtP/vD4yvs6iz6hBEo6wkSzs8HpRah1Z6aGmF2KW5PdYuAd7uX5a+OyBZHBhd+TFLqgjUgytQr4RvQ==
Expand Down

0 comments on commit b0dcb9d

Please sign in to comment.