rahix/openflexure-microscope-server
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Merge branch 'electron-specific-code' into 'master'

Browse source 
Include custom title bar in Win and Linux

See merge request openflexure/openflexure-microscope-jsclient!32
This commit is contained in:
Joel Collins 2019-06-03 16:36:17 +00:00
commit f109f76049
10 changed files with 55 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

1
app/app.js
View file

@ -79,6 +79,7 @@ require('./menu.js')
function createWindow() {
// Create the browser window.
mainWindow = new BrowserWindow({
frame: (process.platform !== 'darwin') ? false : true,
width: 1124,
height: 800,
icon: path.join(__dirname, '/icons/png/64x64.png')

7
package-lock.json generated
View file

@ -1,6 +1,6 @@
{
"name": "openflexure-ev",
"version": "0.2.5",
"version": "0.2.6",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
@ -3643,6 +3643,11 @@
"array-find-index": "^1.0.1"
}
},
"custom-electron-titlebar": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/custom-electron-titlebar/-/custom-electron-titlebar-3.0.8.tgz",
"integrity": "sha512-VFyV3y5DVcVhGXx1yo16gwNFusbivGQUGTf7ANBA2Hho2tsWvxoVc03rJ908qWqy/yPA0++qSw7AJqjaHimwRA=="
},
"cyclist": {
"version": "0.2.2",
"resolved": "https://registry.npmjs.org/cyclist/-/cyclist-0.2.2.tgz",

5
package.json
View file

@ -19,12 +19,13 @@
"dist:appx": "electron-builder --win --config app/builder-config-appx.yaml",
"build:web": "vue-cli-service build --mode production.web",
"build:app": "vue-cli-service build --mode production.app",
"electron:run": "electron .",
"electron:run": "npm run build:app && electron app/app.js",
"electron:dev": "electron app/app.dev.js",
"serve": "vue-cli-service serve"
"serve:web": "vue-cli-service serve"
},
"dependencies": {
"about-window": "^1.12.1",
"custom-electron-titlebar": "^3.0.8",
"electron-context-menu": "^0.11.0",
"electron-updater": "^4.0.6"
},

9
public/titleicon.svg Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" viewBox="0 0 90 56" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;">
<g transform="matrix(1,0,0,1,-30.245,-47.0254)">
<g id="path3773" transform="matrix(0.12596,0,0,0.12596,28.1368,19.1335)">
<path d="M212.85,344.652C234.052,276.913 297.347,227.702 372.047,227.702C446.747,227.702 510.042,276.913 531.245,344.652L531.245,344.652L531.246,344.656C531.789,346.391 532.304,348.138 532.791,349.896C556.452,421.618 655.593,393.868 655.593,393.868L721.09,563.056L472.356,659.347L430.306,550.728L430.129,550.794L406.853,490.142C408.621,489.464 410.361,488.736 412.072,487.962C419.736,484.232 426.404,480.109 432.198,475.703C447.995,463.209 459.586,446.041 465.257,426.69C473.38,395.32 463.384,366.691 463.101,365.891C449.309,328.959 413.54,302.366 372.047,302.366C330.554,302.366 294.785,328.959 280.994,365.891C280.711,366.689 270.714,395.319 278.838,426.69C284.509,446.041 296.099,463.209 311.897,475.703C317.69,480.109 324.359,484.232 332.023,487.962C333.734,488.736 335.474,489.464 337.242,490.142L337.166,490.34C337.166,490.34 313.965,550.794 313.965,550.794L313.788,550.728L271.739,659.347L23.004,563.056L88.501,393.868C88.501,393.868 187.642,421.618 211.303,349.896C211.79,348.138 212.306,346.391 212.849,344.656L212.85,344.652L212.85,344.652Z" style="fill:white;fill-rule:nonzero;stroke:white;stroke-width:12.54px;"/>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/logo.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 6.7 KiB

17
src/assets/less/app.less Normal file
View file

@ -0,0 +1,17 @@
// Theming specific to the electron app
.menubar-menu-container {
box-shadow: 0.5px 1px 4px 0px rgba(0,0,0,0.3) !important;
}
.menubar-menu-container > * {
box-shadow: none !important;
}
.menubar-menu-container .action-menu-item, .menubar-menu-container .action-label {
cursor: default
}
.menubar-menu-container a:hover {
text-decoration: none;
}

3
src/assets/less/theme.less
View file

@ -4,6 +4,9 @@
// Highlight.js
@import "./highlight.less";
// Electron app theming
@import "./app.less";
// Custom OpenFlexure theming
@global-primary-background: #C32280;

4
src/components/panelDisplay.vue
View file

@ -1,8 +1,8 @@
<template>
<div id="panelDisplay" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
<ul class="uk-flex-none uk-flex-center uk-margin-remove-bottom uk-text-center" uk-tab="swiping: false">
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="Live"></a></li>
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="Captures"></a></li>
<li><a href="#" uk-switcher-item="preview" uk-icon="play-circle" uk-tooltip="pos: bottom; title: Live"></a></li>
<li v-bind:class="{'uk-disabled': !this.$store.getters.ready}"><a href="#" uk-switcher-item="gallery" uk-icon="image" uk-tooltip="pos: bottom; title: Captures"></a></li>
</ul>
<ul class="uk-switcher uk-flex uk-flex-1">
<li class="uk-height-1-1 uk-width-1-1 clickableTab" id="streamDisplayTab"><streamDisplay/></li>

10
src/components/panelLeft.vue
View file

@ -1,11 +1,11 @@
<template>
<div id="panelLeft" class="uk-flex uk-flex-column uk-margin-remove uk-padding-remove uk-height-1-1">
<ul class="uk-flex-none uk-flex-center uk-margin-remove-top uk-margin-remove-bottom" uk-tab="swiping: false">
<li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="Connect"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="Navigate"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="Capture"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="Plugins"></a></li>
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="Settings"></a></li>
<li><a href="#" uk-switcher-item="connect" uk-icon="server" uk-tooltip="pos: bottom; title: Connect"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="navigate" uk-icon="location" uk-tooltip="pos: bottom; title: Navigate"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="capture" uk-icon="camera" uk-tooltip="pos: bottom; title: Capture"></a></li>
<li v-bind:class="disableIfDisconnected"><a href="#" uk-switcher-item="plugins" uk-icon="git-fork" uk-tooltip="pos: bottom; title: Plugins"></a></li>
<li><a href="#" uk-switcher-item="settings" uk-icon="settings" uk-tooltip="pos: bottom; title: Settings"></a></li>
</ul>
<ul class="uk-switcher uk-padding-small uk-flex uk-flex-1 panel-content">
<li class="uk-width-expand"><paneConnect/></li>

13
src/main.app.js
View file

@ -1,7 +1,12 @@
//import { Titlebar, Color } from 'custom-electron-titlebar'
import { Titlebar, Color } from 'custom-electron-titlebar'
//new Titlebar({
// backgroundColor: Color.fromHex('#ffffff')
//});
// Only show custom menubar for Windows or Linux
if ((process.platform !== 'darwin')) {
new Titlebar({
backgroundColor: Color.fromHex('#c5247f'),
icon: './titleicon.svg'
});
}
console.log("Loaded main.app.js for electron-renderer functionality")