Sexierer titlebar and official UI changes

This commit is contained in:
KayoticCarnige 2021-05-04 11:38:20 -04:00
parent f4ae1ff46d
commit 11063cf69e
5 changed files with 113 additions and 4 deletions

BIN
discord.ico Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 361 KiB

View file

@ -13,8 +13,8 @@
} }
.titlebar { .titlebar {
font-family: Verdana, Geneva, Tahoma, sans-serif; background-color: #2c2f33 !important;
background-color: #202225; font-size: 0px !important;
} }
body { body {
@ -26,7 +26,7 @@
text-align: center; text-align: center;
font-weight: 100; font-weight: 100;
transform: translateY(360%); transform: translateY(360%);
font-family: Whitney,Helvetica Neue,Helvetica,Arial,sans-serif; font-family: Whitney,"Helvetica Neue",Helvetica,Arial,sans-serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-style: italic; font-style: italic;
} }

View file

@ -10,6 +10,7 @@ function createWindow() {
mainWindow = new BrowserWindow({ mainWindow = new BrowserWindow({
width: 800, width: 800,
height: 600, height: 600,
icon: __dirname + '/discord.ico',
frame: false, frame: false,
webPreferences: { webPreferences: {
preload: path.join(__dirname, 'preload.js'), preload: path.join(__dirname, 'preload.js'),

View file

@ -2,8 +2,61 @@ const customTitlebar = require('custom-electron-titlebar')
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
new customTitlebar.Titlebar({ new customTitlebar.Titlebar({
backgroundColor: customTitlebar.Color.fromHex("#2C2F33"), backgroundColor: customTitlebar.Color.fromHex("#202225"),
}); });
/**
* Utility function to add CSS in multiple passes.
* @param {string} styleString
*/
function addStyle(styleString) {
const style = document.createElement('style');
style.textContent = styleString;
document.head.append(style);
}
addStyle(`
@import url("https://kckarnige.github.io/femboi_owo/discord-font.css");
.base-3dtUhz, .sidebar-2K8pFh {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
overflow: hidden;
border-top-left-radius: 8px;
}
div.menubar[role="menubar"] {
width: 0px;
}
.window-title:after {
content: "Cord";
color: #fff;
font-weight: normal;
font-size: 12px;
font-family: Discordinated;
}
.window-title:before {
content: "ARM";
color: #7289da;
font-weight: normal;
font-size: 12px;
font-family: Helvetica, sans-serif;
}
.window-title {
font-size: 0px !important;
margin-left: initial !important;
transform: translate(10px, 3px) !important;
}
.titlebar {
background: #202225 !important;
}
`);
}) })

55
renderer.js Normal file
View file

@ -0,0 +1,55 @@
// This file is required by the index.html file and will
// be executed in the renderer process for that window.
// All of the Node.js APIs are available in this process.
const remote = require('electron').remote;
const win = remote.getCurrentWindow(); /* Note this is different to the
html global `window` variable */
// When document has loaded, initialise
document.onreadystatechange = (event) => {
if (document.readyState == "complete") {
handleWindowControls();
document.getElementById('electron-ver').innerHTML = `${process.versions.electron}`
}
};
window.onbeforeunload = (event) => {
/* If window is reloaded, remove win event listeners
(DOM element listeners get auto garbage collected but not
Electron win listeners as the win is not dereferenced unless closed) */
win.removeAllListeners();
}
function handleWindowControls() {
// Make minimise/maximise/restore/close buttons work when they are clicked
document.getElementById('min-button').addEventListener("click", event => {
win.minimize();
});
document.getElementById('max-button').addEventListener("click", event => {
win.maximize();
});
document.getElementById('restore-button').addEventListener("click", event => {
win.unmaximize();
});
document.getElementById('close-button').addEventListener("click", event => {
win.close();
});
// Toggle maximise/restore buttons when maximisation/unmaximisation occurs
toggleMaxRestoreButtons();
win.on('maximize', toggleMaxRestoreButtons);
win.on('unmaximize', toggleMaxRestoreButtons);
function toggleMaxRestoreButtons() {
if (win.isMaximized()) {
document.body.classList.add('maximized');
} else {
document.body.classList.remove('maximized');
}
}
}