diff --git a/src/base/assets/penpot-logo/App Icon Rounded.png b/src/base/assets/penpot-logo/App Icon Rounded.png new file mode 100644 index 0000000..07560b1 Binary files /dev/null and b/src/base/assets/penpot-logo/App Icon Rounded.png differ diff --git a/src/base/assets/penpot-logo/App Icon.png b/src/base/assets/penpot-logo/App Icon.png new file mode 100644 index 0000000..dfb0a6b Binary files /dev/null and b/src/base/assets/penpot-logo/App Icon.png differ diff --git a/src/base/assets/penpot-logo/Linux/icon.png b/src/base/assets/penpot-logo/Linux/icon.png new file mode 100644 index 0000000..39a614c Binary files /dev/null and b/src/base/assets/penpot-logo/Linux/icon.png differ diff --git a/src/base/assets/penpot-logo/Windows/icon.ico b/src/base/assets/penpot-logo/Windows/icon.ico new file mode 100644 index 0000000..e69de29 diff --git a/src/base/assets/penpot-logo/logo-black.png b/src/base/assets/penpot-logo/logo-black.png new file mode 100644 index 0000000..a9a463c Binary files /dev/null and b/src/base/assets/penpot-logo/logo-black.png differ diff --git a/src/base/assets/penpot-logo/logo-full-black.png b/src/base/assets/penpot-logo/logo-full-black.png new file mode 100644 index 0000000..4b32e34 Binary files /dev/null and b/src/base/assets/penpot-logo/logo-full-black.png differ diff --git a/src/base/assets/penpot-logo/logo-full-white.png b/src/base/assets/penpot-logo/logo-full-white.png new file mode 100644 index 0000000..f0f3e84 Binary files /dev/null and b/src/base/assets/penpot-logo/logo-full-white.png differ diff --git a/src/base/assets/penpot-logo/logo-white.png b/src/base/assets/penpot-logo/logo-white.png new file mode 100644 index 0000000..f0c271d Binary files /dev/null and b/src/base/assets/penpot-logo/logo-white.png differ diff --git a/src/base/assets/penpot-logo/macOS App Icon.png b/src/base/assets/penpot-logo/macOS App Icon.png new file mode 100644 index 0000000..a3829f9 Binary files /dev/null and b/src/base/assets/penpot-logo/macOS App Icon.png differ diff --git a/src/base/assets/penpot-logo/macOS/icon.icns b/src/base/assets/penpot-logo/macOS/icon.icns new file mode 100644 index 0000000..caf8324 Binary files /dev/null and b/src/base/assets/penpot-logo/macOS/icon.icns differ diff --git a/src/base/assets/penpot-logo/macOS/macOS App Icon.icns b/src/base/assets/penpot-logo/macOS/macOS App Icon.icns new file mode 100644 index 0000000..b84796f Binary files /dev/null and b/src/base/assets/penpot-logo/macOS/macOS App Icon.icns differ diff --git a/src/base/components/alerts/no-instance.html b/src/base/components/alerts/no-instance.html index 33a482a..3753ffa 100644 --- a/src/base/components/alerts/no-instance.html +++ b/src/base/components/alerts/no-instance.html @@ -1,5 +1,5 @@ No Instance Detected
- Your instance setting is not set, please set one. Reset Setting + Your instance setting is not set, please set one. Reset Instance \ No newline at end of file diff --git a/src/base/components/settings.html b/src/base/components/settings.html index 3e330a5..f14f588 100644 --- a/src/base/components/settings.html +++ b/src/base/components/settings.html @@ -7,7 +7,25 @@ - A server running Penpot, is called an instance. There can be many and you don't really need to choose one, commonly you only need to choose the offiical one that is ran by Penpot or to self-host your own. - - + +
+
+

Help

+
+
+
+ Help + Selfhost +
+
+
+ \ No newline at end of file diff --git a/src/base/index.html b/src/base/index.html index 597d698..5e295a4 100644 --- a/src/base/index.html +++ b/src/base/index.html @@ -7,15 +7,23 @@ + - + + + diff --git a/src/base/scripts/instance.js b/src/base/scripts/instance.js index 3337ba5..5c37c05 100644 --- a/src/base/scripts/instance.js +++ b/src/base/scripts/instance.js @@ -29,12 +29,14 @@ if (!localStorage.getItem("firstTime")) { setTimeout(() => { document.querySelector("#InstanceField").value = localStorage.getItem('Instance') }, 0o500); -// setTimeout(() => { -// if (document.querySelector("body > tab-group").shadowRoot.querySelector("div > div > webview").src === '') { -// console.log('You need to set an instance.') -// document.querySelector("body > titlebar > div.actions > div > button:nth-child(2)").click() -// document.querySelector(".tdm-warnings").style.display = 'inherit' -// } else { -// console.log('An instance is set.') -// } -// }, 1500); \ No newline at end of file +setTimeout(() => { + if (document.querySelector("tab-group").shadowRoot.querySelector("div > div > webview").src === '') { + document.querySelector("tab-group").shadowRoot.querySelector("div > div > webview").style.opacity = '0' + document.querySelector("tab-group").shadowRoot.querySelector("div > nav").style.opacity = '0' + console.log('You need to set an instance.') + document.querySelector("body > titlebar > div.actions > div > button:nth-child(2)").click() + document.querySelector(".tdm-warnings").style.display = 'inherit' + } else { + console.log('An instance is set.') + } +}, 1500); \ No newline at end of file diff --git a/src/base/scripts/theme.js b/src/base/scripts/theme.js new file mode 100644 index 0000000..f3e7c69 --- /dev/null +++ b/src/base/scripts/theme.js @@ -0,0 +1,7 @@ +function ThemeCheck() { + if (localStorage.getItem('theme') === 'light') { + document.body.classList.add('theme-is-light') + } else { + document.body.classList.add('theme-is-dark') + } +} \ No newline at end of file diff --git a/src/base/scripts/toggles.js b/src/base/scripts/toggles.js index ea94a9e..9755039 100644 --- a/src/base/scripts/toggles.js +++ b/src/base/scripts/toggles.js @@ -8,6 +8,25 @@ function ToggleSettings() { } } +// Detect if there are no tabs +setTimeout(() => { + document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav > div.tabs > div > span.tab-close").addEventListener('click', function(){ATWC()}) + document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav > div.buttons > button").addEventListener('click', function(){ATWC()}) +}, 2000) +function ATWC() { + var element = document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav > div.tabs > *") + if (typeof(element) != 'undefined' && element != null) + { + document.querySelector('.no-tabs-exist').style.display = 'none' + document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav > div.tabs > div > span.tab-close").addEventListener('click', function(){ATWC()}) + } + else { + document.querySelector('.no-tabs-exist').style.display = 'inherit' + document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav > div.tabs > div > span.tab-close").addEventListener('click', function(){ATWC()}) + } +} + + // Alerts /// Docs: https://shoelace.style/getting-started/usage#methods /// No Instance @@ -18,4 +37,4 @@ setTimeout(() => { if (document.querySelector("#InstanceField").value === "") { ShowNoInstance() } -}, 0o500); \ No newline at end of file +}, 1000); \ No newline at end of file diff --git a/src/base/styles/index.css b/src/base/styles/index.css index 3c0a54f..8da8347 100644 --- a/src/base/styles/index.css +++ b/src/base/styles/index.css @@ -1 +1 @@ -body{background:#18181a;font-family:arial}.titlebar{position:fixed;top:0px;right:0px;width:max-content;text-align:right;margin:4px 4px 0px 0px;cursor:default;z-index:5;app-region:no-drag;display:flex}.titlebar .linux-titlebar{display:none}.titlebar button{width:32px;height:32px;font-size:0px;border:none;border-radius:6px;background:rgba(0,0,0,0)}.titlebar button:hover{background:#303236}.titlebar button svg{width:16px;height:16px;filter:invert(1)}sl-include.alert-modal{position:fixed;z-index:50;bottom:24px;left:50%;transform:translate(-50%);width:max-content}drag{position:fixed;top:0px;left:0px;width:100%;height:50px;app-region:drag;z-index:1}.dropdown-modal{position:fixed;top:40px;right:0px;z-index:50;display:none;flex-direction:column;background:#242428;border-radius:6px;border:1px #36363b solid;margin:6px;min-width:250px;width:300px;transition:1s all}.dropdown-modal div:nth-child(1)>div.settings-section-header{border-radius:4px 4px 0px 0px}.dropdown-modal .settings-section-header{background:#303236;padding:6px 0px 6px 16px;font-size:12px}.dropdown-modal .settings-section-header h2{margin:0px}.dropdown-modal .settings-section-content{display:flex;margin:12px}.dropdown-modal .settings-section-content input{padding:6px 12px;border-radius:4px;border:1px #656565 solid;margin-right:6px}.dropdown-modal .settings-section-content input#InstanceSaveButton{background:#575151;color:#fff;border:none;border-radius:4px;padding:0px 12px} +.theme-is-light{background:#fff}.theme-is-light .titlebar{filter:invert(1)}.theme-is-light #theme-select-light{border-color:#00ff89;color:#00ff89}.theme-is-dark{background:#18181a}.theme-is-dark #theme-select-dark{border-color:#00ff89;color:#00ff89}body{font-family:arial}.titlebar{position:fixed;top:0px;right:0px;width:max-content;text-align:right;margin:4px 4px 0px 0px;cursor:default;z-index:5;app-region:no-drag;display:flex}.titlebar .linux-titlebar{display:none}.titlebar button{width:32px;height:32px;font-size:0px;border:none;border-radius:6px;background:rgba(0,0,0,0)}.titlebar button:hover{background:#303236}.titlebar button svg{width:16px;height:16px;filter:invert(1)}sl-include.alert-modal{position:fixed;z-index:50;bottom:24px;left:50%;transform:translate(-50%);width:max-content}drag{position:fixed;top:0px;left:0px;width:100%;height:50px;app-region:drag;z-index:1}.dropdown-modal{position:fixed;top:40px;right:0px;z-index:50;display:none;flex-direction:column;background:#242428;border-radius:6px;border:1px #36363b solid;margin:6px;min-width:250px;width:300px;transition:1s all}.dropdown-modal div:nth-child(1)>div.settings-section-header{border-radius:4px 4px 0px 0px}.dropdown-modal .settings-section-header{background:#303236;padding:6px 0px 6px 16px;font-size:12px}.dropdown-modal .settings-section-header h2{margin:0px}.dropdown-modal .settings-section-content{display:flex;margin:12px}.dropdown-modal .settings-section-content input{padding:6px 12px;border-radius:4px;border:1px #656565 solid;margin-right:6px}.dropdown-modal .settings-section-content input#InstanceSaveButton{background:#575151;color:#fff;border:none;border-radius:4px;padding:0px 12px}div#theme{display:flex;justify-content:space-evenly;gap:12px}.theme-selection{border:2px #7d7d7d solid;border-radius:10px;padding:12px 32px;width:100%;text-align:center}.theme-selection p{margin:0px}div#theme-select-light{color:#000;background:#fff}div#theme-select-dark{color:#fff;background:#232222}.settings-section-content a{background:#3c413e;color:#fff;text-decoration:none;padding:12px 24px;border-radius:10px;width:100%;text-align:center;cursor:default}.no-tabs-exist{position:fixed;top:50%;left:50%;transform:translate(-50%, -50%);text-align:center}.no-tabs-exist img{width:54px}.no-tabs-exist button{color:#000;background:#00ff89;border:none;border-radius:3rem;padding:12px 24px;transition:.3s background,.3s color}.no-tabs-exist button:hover{color:#000;background:#e6e6e6;transition:.3s background,.3s color} diff --git a/src/base/styles/index.scss b/src/base/styles/index.scss index cd407df..43437bb 100644 --- a/src/base/styles/index.scss +++ b/src/base/styles/index.scss @@ -1,5 +1,22 @@ -body { +.theme-is-light { + background: #ffffff; + .titlebar { + filter: invert(1) + } + #theme-select-light { + border-color: #00ff89; + color: #00ff89; + } +} +.theme-is-dark { background: #18181a; + #theme-select-dark { + border-color: #00ff89; + color: #00ff89; + } +} + +body { font-family: arial; } @@ -96,4 +113,62 @@ drag { padding: 0px 12px; } } +} + +div#theme { + display: flex; + justify-content: space-evenly; + gap: 12px; +} +.theme-selection { + border: 2px #7d7d7d solid; + border-radius: 10px; + padding: 12px 32px; + width: 100%; + text-align: center; +} +.theme-selection p { + margin: 0px; +} +div#theme-select-light { + color: black; + background: white; +} +div#theme-select-dark { + color: white; + background: #232222; +} +.settings-section-content a { + background: #3c413e; + color: white; + text-decoration: none; + padding: 12px 24px; + border-radius: 10px; + width: 100%; + text-align: center; + cursor: default; +} + +.no-tabs-exist { + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + text-align: center; + img { + width: 54px; + } + button { + color: black; + background: #00ff89; + border: none; + border-radius: 3rem; + padding: 12px 24px; + transition: 0.3s background, 0.3s color; + &:hover { + color: black; + background: #e6e6e6; + transition: 0.3s background, 0.3s color; + } + } } \ No newline at end of file diff --git a/src/process/menu.js b/src/process/menu.js index 74c025c..5ef7d34 100644 --- a/src/process/menu.js +++ b/src/process/menu.js @@ -79,7 +79,6 @@ module.exports = { accelerator: 'CmdOrCtrl+R', click: async () => { mainWindow.webContents.executeJavaScript(`document.querySelector("tab-group").shadowRoot.querySelector("webview.visible").reload()`) - setTimeout(() => {Platform.CSS()}, 1000) } }, { @@ -87,7 +86,7 @@ module.exports = { accelerator: 'CmdOrCtrl+Shift+R', click: async () => { mainWindow.reload() - setTimeout(() => {Platform.CSS()}, 2000) + setTimeout(() => {Platform.CSS()}, 1000) } }, { role: 'toggleDevTools' }, diff --git a/src/process/preload.js b/src/process/preload.js index a7fba13..a817783 100644 --- a/src/process/preload.js +++ b/src/process/preload.js @@ -6,7 +6,9 @@ contextBridge.exposeInMainWorld( "api", { send: (channel, data) => {let validCha "ReloadApp", "MaximizeWindow", "UnmaximizeWindow", - "MinimizeWindow" + "MinimizeWindow", + "OpenHelp", + "OpenOffline" ] if (validChannels.includes(channel)) {ipcRenderer.send(channel, data)}}}) diff --git a/src/process/window.js b/src/process/window.js index 01704a7..34c54b2 100644 --- a/src/process/window.js +++ b/src/process/window.js @@ -1,4 +1,4 @@ -const {app, BrowserWindow, ipcMain, ipcRenderer} = require('electron') +const {app, BrowserWindow, ipcMain, ipcRenderer, shell} = require('electron') const windowStateKeeper = require('electron-window-state') const path = require('path') @@ -7,7 +7,10 @@ const Platform = require('./platform') module.exports = { create: function () { - let mainWindowState = windowStateKeeper({defaultWidth: 1400,defaultHeight: 900}) + let mainWindowState = windowStateKeeper({ // Remember the positiona and size of the window + defaultWidth: 1400, + defaultHeight: 900 + }) mainWindow = new BrowserWindow({ // Size x: mainWindowState.x, @@ -19,7 +22,7 @@ module.exports = { // Theme darkTheme: true, transparent: global.transparent, - vibrancy: "header", + vibrancy: "sidebar", // Titlebar titleBarStyle: 'hidden', trafficLightPosition: { x: 16, y: 12 }, // for macOS @@ -45,6 +48,8 @@ module.exports = { ipcMain.on('MaximizeWindow', () => {mainWindow.maximize()}) ipcMain.on('UnmaximizeWindow', () => {mainWindow.restore()}) ipcMain.on('MinimizeWindow', () => {mainWindow.minimize()}) + ipcMain.on('OpenHelp', () => {shell.openExternal('https://sudovanilla.com/docs/penpot-desktop/')}) + ipcMain.on('OpenOffline', () => {shell.openExternal('https://sudovanilla.com/docs/penpot-desktop/features/offline-use/')}) if (process.platform === 'darwin') { // Move Tabs when entering or existing fullscreen on macOS @@ -54,7 +59,6 @@ module.exports = { mainWindow.on('blur', (e, cmd) => {mainWindow.webContents.executeJavaScript(`document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav").style.opacity = '0.5'`)}) mainWindow.on('focus', (e, cmd) => {mainWindow.webContents.executeJavaScript(`document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > nav").style.opacity = '1'`)}) } - // Other Functions mainWindowState.manage(mainWindow)