AlexTorresDev / custom-electron-titlebar

Custom electon title bar inpire on VS Code title bar
MIT License
868 stars 149 forks source link

this lib cant use in electron-react-boilerplate? #131

Closed qq1053831109 closed 2 years ago

qq1053831109 commented 3 years ago

this lib cant use in electron-react-boilerplate?

fatihgurdal commented 3 years ago

used. I use it image

ibrahimyaacob92 commented 3 years ago

please share how you do it ?

fatihgurdal commented 3 years ago

please share how you do it ?

I just did these two actions

app>main.dev.ts

const webPreference: WebPreferences = (process.env.NODE_ENV === 'development' ||
    process.env.E2E_BUILD === 'true') &&
    process.env.ERB_SECURE !== 'true'
    ? {
      nodeIntegration: true,
      enableRemoteModule: true,
    }
    : {
      preload: path.join(__dirname, 'dist/renderer.prod.js'),
      enableRemoteModule: true,
    };
  mainWindow = new BrowserWindow({
    show: false,
    width: 1024,
    height: 728,
    icon: getAssetPath('icon.png'),
    frame: false,
    webPreferences: webPreference,
    titleBarStyle: 'hidden'
  });

app/app.html

 <script>
        const path = require('path');
        const url = require('url');
        const customTitlebar = require('custom-electron-titlebar');
        window.addEventListener('DOMContentLoaded', () => {
            const titlebar = new customTitlebar.Titlebar({
                backgroundColor: customTitlebar.Color.fromHex('#16354e'),
                icon: url.format(path.join(__dirname, '/assets', '/48x48_light.png')),
                shadow: true
            });

            const replaceText = (selector, text) => {
                const element = document.getElementById(selector)
                if (element) element.innerText = text
            }

            for (const type of['chrome', 'node', 'electron']) {
                replaceText(`${type}-version`, process.versions[type])
            }
        })
</script>

image