From 751ca670ce25c55f4aea286fceacc5fa4e7fad2e Mon Sep 17 00:00:00 2001 From: Korbs Date: Tue, 26 Mar 2024 17:54:35 -0400 Subject: [PATCH] update --- package.json | 5 +- src/base/scripts/webviews/preload.js | 75 ++++++++++++++++++++-------- src/base/styles/index.css | 2 +- src/base/styles/index.scss | 2 +- src/process/menu.js | 2 +- 5 files changed, 60 insertions(+), 26 deletions(-) diff --git a/package.json b/package.json index 5115150..b61955f 100644 --- a/package.json +++ b/package.json @@ -43,8 +43,7 @@ "sass": "^1.63.6" }, "devDependencies": { - "electron": "^28.1.3", + "electron": "^29.1.5", "electron-builder": "^24.9.1" - }, - "packageManager": "yarn@4.0.2" + } } diff --git a/src/base/scripts/webviews/preload.js b/src/base/scripts/webviews/preload.js index 6e33234..7359d21 100644 --- a/src/base/scripts/webviews/preload.js +++ b/src/base/scripts/webviews/preload.js @@ -1,36 +1,71 @@ // Set the title of the tab name -/// Instead of the tab name being "PAGE_NAME - Penpot", this script will remove the " - Penpot" portion. -function setTitleDash() {document.title = "Penpot Dashboard"} -function setTitle() {document.title = document.querySelector("#workspace > header > div.left-area > div.menu-section > div.project-tree > span:nth-child(2)").innerText} +/// Instead of the tab name being "PROJECT_NAME - Penpot", this script will remove the " - Penpot" portion. +function SetTitleToDash() { + document.title = "Dashboard" +} -function titleModified() { - if (document.querySelector(".dashboard-layout") !== null) { - setTitleDash() // Set title to "Penpot Dashboard" - } - if (document.querySelector("#workspace") !== null) { - setTitle() // Set title to only project name - } - else {} +function SetTitleToProject() { + document.title = document.querySelector(".main_ui_workspace_left_header__file-name").innerText +} + + +function _waitForElement(selector, delay = 50, tries = 100) { + const element = document.querySelector(selector); + + if (!window[`__${selector}`]) { + window[`__${selector}`] = 0; + window[`__${selector}__delay`] = delay; + window[`__${selector}__tries`] = tries; + } + + function _search() { + return new Promise((resolve) => { + window[`__${selector}`]++; + setTimeout(resolve, window[`__${selector}__delay`]); + }); + } + + if (element === null) { + if (window[`__${selector}`] >= window[`__${selector}__tries`]) { + window[`__${selector}`] = 0; + return Promise.resolve(null); + } + + return _search().then(() => _waitForElement(selector)); + } else { + return Promise.resolve(element); + } +} + + + + +function UpdateTitle() { + if (window.location.href.indexOf("#/workspace") != -1) { + const start = (async () => { + const $el = await _waitForElement(`.main_ui_workspace_left_header__file-name`); + SetTitleToProject() + })(); + } } -/// Credit: https://stackoverflow.com/a/2499119/15103862 window.onload = function() { - var titleEl = document.getElementsByTagName("title")[0] - var docEl = document.documentElement + var titleEl = document.getElementsByTagName("title")[0]; + var docEl = document.documentElement; if (docEl && docEl.addEventListener) { docEl.addEventListener("DOMSubtreeModified", function(evt) { - var t = evt.target + var t = evt.target; if (t === titleEl || (t.parentNode && t.parentNode === titleEl)) { - titleModified() + UpdateTitle() } - }, false) + }, false); } else { document.onpropertychange = function() { if (window.event.propertyName == "title") { - titleModified() + UpdateTitle() } - } + }; } -} \ No newline at end of file +}; \ No newline at end of file diff --git a/src/base/styles/index.css b/src/base/styles/index.css index b922e51..3c0a54f 100644 --- a/src/base/styles/index.css +++ b/src/base/styles/index.css @@ -1 +1 @@ -body{background:#1d1f20;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} +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} diff --git a/src/base/styles/index.scss b/src/base/styles/index.scss index aa0818c..cd407df 100644 --- a/src/base/styles/index.scss +++ b/src/base/styles/index.scss @@ -1,5 +1,5 @@ body { - background: #1d1f20; + background: #18181a; font-family: arial; } diff --git a/src/process/menu.js b/src/process/menu.js index b2b528f..74c025c 100644 --- a/src/process/menu.js +++ b/src/process/menu.js @@ -95,7 +95,7 @@ module.exports = { label: 'Open Tab Developer Tools', accelerator: 'CmdOrCtrl+Shift+D', click: () => { - mainWindow.webContents.executeJavaScript(`document.querySelector("body > tab-group").shadowRoot.querySelector("div > div > webview.visible").openDevTools()`) + mainWindow.webContents.executeJavaScript(`document.querySelector("body > sl-include:nth-child(4) > tab-group").shadowRoot.querySelector("div > div > webview.visible").openDevTools()`) }}, { type: 'separator' }, { role: 'resetZoom' },