타이틀바를 일반적인 맥 디자인에 맞게 수정
This commit is contained in:
@@ -25,6 +25,13 @@ function createWindow() {
|
|||||||
mainWindow.once('ready-to-show', () => {
|
mainWindow.once('ready-to-show', () => {
|
||||||
mainWindow.show();
|
mainWindow.show();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
mainWindow.on('enter-full-screen', () => {
|
||||||
|
mainWindow.webContents.send('fullscreen-change', true);
|
||||||
|
});
|
||||||
|
mainWindow.on('leave-full-screen', () => {
|
||||||
|
mainWindow.webContents.send('fullscreen-change', false);
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
app.whenReady().then(() => {
|
app.whenReady().then(() => {
|
||||||
|
|||||||
+6
-5
@@ -1,9 +1,10 @@
|
|||||||
const { contextBridge, ipcRenderer } = require('electron');
|
const { contextBridge, ipcRenderer } = require('electron');
|
||||||
|
|
||||||
contextBridge.exposeInMainWorld('api', {
|
contextBridge.exposeInMainWorld('api', {
|
||||||
selectFolder: () => ipcRenderer.invoke('select-folder'),
|
selectFolder: () => ipcRenderer.invoke('select-folder'),
|
||||||
listImages: (folder) => ipcRenderer.invoke('list-images', folder),
|
listImages: (folder) => ipcRenderer.invoke('list-images', folder),
|
||||||
readImage: (path) => ipcRenderer.invoke('read-image', path),
|
readImage: (path) => ipcRenderer.invoke('read-image', path),
|
||||||
renameFiles: (args) => ipcRenderer.invoke('rename-files', args),
|
renameFiles: (args) => ipcRenderer.invoke('rename-files', args),
|
||||||
revealFolder: (folder) => ipcRenderer.invoke('reveal-folder', folder),
|
revealFolder: (folder) => ipcRenderer.invoke('reveal-folder', folder),
|
||||||
|
onFullscreenChange: (callback) => ipcRenderer.on('fullscreen-change', (_e, v) => callback(v)),
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -43,6 +43,10 @@ selection.init({ gridContainer, rubberBand, grid, state, callbacks });
|
|||||||
dragDrop.init({ grid, gridContainer, dragGhostEl, state, callbacks });
|
dragDrop.init({ grid, gridContainer, dragGhostEl, state, callbacks });
|
||||||
hoverPreview.init();
|
hoverPreview.init();
|
||||||
|
|
||||||
|
window.api.onFullscreenChange((isFullscreen) => {
|
||||||
|
document.body.classList.toggle('fullscreen', isFullscreen);
|
||||||
|
});
|
||||||
|
|
||||||
// ── 버튼 이벤트 ──────────────────────────────────
|
// ── 버튼 이벤트 ──────────────────────────────────
|
||||||
inputPrefix.addEventListener('input', updatePreview);
|
inputPrefix.addEventListener('input', updatePreview);
|
||||||
inputDigits.addEventListener('input', updatePreview);
|
inputDigits.addEventListener('input', updatePreview);
|
||||||
|
|||||||
+14
-4
@@ -32,24 +32,34 @@ body {
|
|||||||
|
|
||||||
/* ── 타이틀바 ── */
|
/* ── 타이틀바 ── */
|
||||||
#titlebar {
|
#titlebar {
|
||||||
height: 44px;
|
height: 52px;
|
||||||
background: var(--bg);
|
background: var(--bg);
|
||||||
-webkit-app-region: drag;
|
-webkit-app-region: drag;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 80px 0 20px;
|
justify-content: flex-end;
|
||||||
|
padding: 0 16px 0 80px;
|
||||||
border-bottom: 1px solid var(--border);
|
border-bottom: 1px solid var(--border);
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
body.fullscreen #titlebar {
|
||||||
|
padding-left: 16px;
|
||||||
}
|
}
|
||||||
#titlebar h1 {
|
#titlebar h1 {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
pointer-events: none;
|
||||||
|
white-space: nowrap;
|
||||||
font-size: 13px; font-weight: 600; color: var(--muted);
|
font-size: 13px; font-weight: 600; color: var(--muted);
|
||||||
letter-spacing: .08em; text-transform: uppercase;
|
letter-spacing: .08em; text-transform: uppercase;
|
||||||
}
|
}
|
||||||
#titlebar .dir-path {
|
#titlebar .dir-path {
|
||||||
margin-left: 16px;
|
|
||||||
font-family: 'JetBrains Mono', monospace;
|
font-family: 'JetBrains Mono', monospace;
|
||||||
font-size: 11px; color: var(--muted); opacity: .7;
|
font-size: 11px; color: var(--muted); opacity: .7;
|
||||||
max-width: 600px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
max-width: 400px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ── 툴바 ── */
|
/* ── 툴바 ── */
|
||||||
|
|||||||
Reference in New Issue
Block a user