Merge pull request #59 from birarda/console-styling
base styling with home server stop/restart handling
3
console/.gitignore
vendored
|
@ -1,2 +1,3 @@
|
|||
Console-*/
|
||||
High\ Fidelity-*/
|
||||
npm-debug.log
|
||||
logs/
|
||||
|
|
12
console/package.json
Executable file → Normal file
|
@ -8,6 +8,7 @@
|
|||
""
|
||||
],
|
||||
"devDependencies": {
|
||||
"electron-compilers": "^1.0.1",
|
||||
"electron-packager": "^5.1.1",
|
||||
"electron-prebuilt": "0.36.0"
|
||||
},
|
||||
|
@ -19,12 +20,13 @@
|
|||
"scripts": {
|
||||
"start": "electron . --local-debug-builds",
|
||||
"local-release": "electron . --local-release-builds",
|
||||
"package-darwin": "electron-packager . Console --overwrite --platform=darwin --arch=x64 --version=0.36.0 --icon=resources/console.icns",
|
||||
"package-win": "electron-packager . Console --overwrite --platform=win32 --arch=x64 --version=0.36.0 --icon=resources/console.ico",
|
||||
"package-linux": "electron-packager . Console --overwrite --platform=linux --arch=x64 --version=0.36.0"
|
||||
"package-darwin": "electron-packager . High\\ Fidelity --overwrite --platform=darwin --arch=x64 --version=0.36.0 --icon=resources/console.icns",
|
||||
"package-win": "electron-packager . High\\ Fidelity --overwrite --platform=win32 --arch=x64 --version=0.36.0 --icon=resources/console.ico",
|
||||
"package-linux": "electron-packager . High\\ Fidelity --overwrite --platform=linux --arch=x64 --version=0.36.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"yargs": "^3.30.0",
|
||||
"extend": "^3.0.0"
|
||||
"electron-compile": "^1.0.2",
|
||||
"extend": "^3.0.0",
|
||||
"yargs": "^3.30.0"
|
||||
}
|
||||
}
|
||||
|
|
245
console/src/css/style.less
Normal file
|
@ -0,0 +1,245 @@
|
|||
@light-gray: #949494;
|
||||
|
||||
// the following block avoids (only with two things in body) the bounce effect on OS X when scrolling
|
||||
html {
|
||||
overflow: hidden;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'Raleway';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url('../vendor/Raleway/Raleway-Regular.ttf');
|
||||
}
|
||||
|
||||
body {
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
font-family: 'Raleway', sans-serif;
|
||||
background-image: url('../images/background.jpg');
|
||||
margin: 0;
|
||||
font-size: 11px;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
input, textarea, select, a {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.light-gray {
|
||||
color: @light-gray;
|
||||
}
|
||||
|
||||
h4 {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
header {
|
||||
margin: 50px 75px 35px 75px;
|
||||
|
||||
#console-version {
|
||||
float: right;
|
||||
}
|
||||
}
|
||||
|
||||
#console-tray {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
margin: 0px 75px;
|
||||
color: white;
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#navigation, #servers, .tray-line {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.tray-line {
|
||||
background-color: @light-gray;
|
||||
width: 1px;
|
||||
height: 130px;
|
||||
margin-top: 35px;
|
||||
}
|
||||
|
||||
@square-side: 97px;
|
||||
|
||||
#servers {
|
||||
h4 {
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
margin-left: 20px;
|
||||
img {
|
||||
position: relative;
|
||||
top: -5px;
|
||||
width: @square-side;
|
||||
height: @square-side;
|
||||
}
|
||||
}
|
||||
|
||||
.tray-square {
|
||||
width: @square-side;
|
||||
height: @square-side;
|
||||
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
width: 25px;
|
||||
}
|
||||
}
|
||||
|
||||
.nav-item {
|
||||
margin-right: 20px;
|
||||
float: left;
|
||||
width: @square-side;
|
||||
|
||||
&#nav-search {
|
||||
.nav-square {
|
||||
background-color: @light-gray;
|
||||
box-shadow: 0px 3px 3px #000000;
|
||||
}
|
||||
}
|
||||
|
||||
&#nav-last-visited {
|
||||
.nav-square {
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@focus-background: #A6A7AA;
|
||||
@dark-gray: #585858;
|
||||
|
||||
@focus-height: 270px;
|
||||
|
||||
#tray-focus {
|
||||
margin-top: 5px;
|
||||
width: 100%;
|
||||
height: @focus-height;
|
||||
background-color: @focus-background;
|
||||
|
||||
color: @dark-gray;
|
||||
|
||||
#server-info {
|
||||
@info-padding-top-bottom: 10px;
|
||||
height: @focus-height - @info-padding-top-bottom - @info-padding-top-bottom;
|
||||
padding: @info-padding-top-bottom 75px;
|
||||
|
||||
h2 {
|
||||
color: black;
|
||||
font-size: 36px;
|
||||
margin-left: 255px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.server-box {
|
||||
float: left;
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid @dark-gray;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.process-status {
|
||||
@status-red: #BD5F6D;
|
||||
@status-green: #59AEA8;
|
||||
@status-orange: #D89C40;
|
||||
|
||||
margin-bottom: 10px;
|
||||
|
||||
.circle {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
margin-right: 5px;
|
||||
border-radius: 50%;
|
||||
border: 1px solid #696A6B;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
|
||||
&.stopped {
|
||||
background-color: @status-red;
|
||||
}
|
||||
|
||||
&.started {
|
||||
background-color: @status-green;
|
||||
}
|
||||
|
||||
&.stopping {
|
||||
background-color: @status-orange;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&#left-box {
|
||||
h4 {
|
||||
margin-top: 0px;
|
||||
margin-bottom: 10px;
|
||||
width: 215px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#manage-server {
|
||||
text-align: center;
|
||||
background-color: #232323;
|
||||
height: 140px;
|
||||
|
||||
#manage-buttons {
|
||||
display: inline-block;
|
||||
|
||||
@blue: #08A6E0;
|
||||
|
||||
#manage-separator {
|
||||
width: 1px
|
||||
}
|
||||
|
||||
@side-margin: 20px;
|
||||
|
||||
.manage-button {
|
||||
vertical-align: top;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
margin: 40px @side-margin 20px @side-margin;
|
||||
width: 75px;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
margin: 0 auto;
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
p {
|
||||
color: @blue;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&#stop {
|
||||
margin-right: @side-margin + 2;
|
||||
}
|
||||
|
||||
&#settings {
|
||||
margin-left: @side-margin + 2;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
}
|
||||
|
||||
#manage-separator {
|
||||
display: inline-block;
|
||||
width: 2px;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
BIN
console/src/images/background.jpg
Normal file
After Width: | Height: | Size: 96 KiB |
17
console/src/images/last-visited.svg
Normal file
|
@ -0,0 +1,17 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#FFFFFF" d="M6.5,22.1c-0.4,0-0.7-0.1-1-0.4l-4.9-4.9c-0.6-0.6-0.6-1.5,0-2.1c0.6-0.6,1.5-0.6,2.1,0l4.9,4.9
|
||||
c0.6,0.6,0.6,1.5,0,2.1C7.3,22,6.9,22.1,6.5,22.1z"/>
|
||||
<path fill="#FFFFFF" d="M6.6,22.1c-0.4,0-0.8-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2.1l4.9-4.8c0.6-0.6,1.5-0.5,2.1,0
|
||||
c0.6,0.6,0.6,1.5,0,2.1l-4.9,4.8C7.4,21.9,7,22.1,6.6,22.1z"/>
|
||||
</g>
|
||||
<path fill="#FFFFFF" d="M6.3,29c-0.8,0-1.4-0.6-1.5-1.4c0-0.8,0.6-1.5,1.4-1.5c0.1,0,0.1,0,5.8,0c3.3,0,7.4,0,7.7,0
|
||||
c5.2-0.5,9.3-5,9.3-10.3c0-5.7-4.7-10.4-10.4-10.4c-2.1,0-5.2,0.5-7.5,2.9c-2.2,2.3-3.2,5.9-2.9,10.4c0,0.8-0.6,1.5-1.4,1.5
|
||||
c-0.8,0-1.5-0.6-1.5-1.4c-0.3-5.3,1-9.7,3.7-12.5c2.3-2.5,5.7-3.8,9.6-3.8c7.3,0,13.3,6,13.3,13.3c0,6.9-5.1,12.6-12,13.2
|
||||
c-0.1,0-0.1,0-7.9,0C9.1,29,6.5,29,6.3,29C6.3,29,6.3,29,6.3,29z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.2 KiB |
BIN
console/src/images/logo-512.png
Normal file
After Width: | Height: | Size: 17 KiB |
10
console/src/images/logs.svg
Normal file
|
@ -0,0 +1,10 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#18A6DF" d="M25.4,10.3H12c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4h13.4c0.8,0,1.4,0.6,1.4,1.4S26.2,10.3,25.4,10.3z"/>
|
||||
<path fill="#18A6DF" d="M25.4,21.2H12c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4h13.4c0.8,0,1.4,0.6,1.4,1.4S26.2,21.2,25.4,21.2z"/>
|
||||
<path fill="#18A6DF" d="M25.4,15.7H12c-0.8,0-1.4-0.6-1.4-1.4S11.3,13,12,13h13.4c0.8,0,1.4,0.6,1.4,1.4S26.2,15.7,25.4,15.7z"/>
|
||||
<path fill="#18A6DF" d="M27,27.7H6.5C5.7,27.7,5,27,5,26.2V6.3c0-0.8,0.6-1.4,1.4-1.4s1.4,0.6,1.4,1.4v18.5H27
|
||||
c0.8,0,1.4,0.6,1.4,1.4S27.8,27.7,27,27.7z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 918 B |
12
console/src/images/manage-button-sep.svg
Normal file
|
@ -0,0 +1,12 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="1.7px" height="133.7px" viewBox="0 0 1.7 133.7" enable-background="new 0 0 1.7 133.7" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<line fill="none" stroke="#3F403F" stroke-miterlimit="10" x1="0.9" y1="0" x2="0.9" y2="1.5"/>
|
||||
|
||||
<line fill="none" stroke="#3F403F" stroke-miterlimit="10" stroke-dasharray="2.9648,2.9648" x1="0.9" y1="4.5" x2="0.9" y2="133.4"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 649 B |
26
console/src/images/restart.svg
Normal file
|
@ -0,0 +1,26 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#18A6DF" d="M10.9,29.1H4.1c-0.8,0-1.4-0.6-1.4-1.4s0.6-1.4,1.4-1.4h6.8c0.8,0,1.4,0.6,1.4,1.4S11.7,29.1,10.9,29.1z"
|
||||
/>
|
||||
<path fill="#18A6DF" d="M11,28.9C11,28.9,11,28.9,11,28.9c-0.8,0-1.5-0.7-1.4-1.5l0.1-6.8c0-0.8,0.7-1.4,1.4-1.4c0,0,0,0,0,0
|
||||
c0.8,0,1.4,0.7,1.4,1.5l-0.1,6.8C12.4,28.3,11.8,28.9,11,28.9z"/>
|
||||
</g>
|
||||
<path fill="#18A6DF" d="M9.6,27.7c-0.3,0-0.7-0.1-1-0.4c-3.8-3.4-7.2-9.1-5.6-15.2c1.5-5.6,7.1-9.5,13.3-9.3c0.8,0,1.4,0.7,1.4,1.5
|
||||
c0,0.8-0.7,1.4-1.5,1.4c-4.8-0.2-9.3,2.9-10.4,7.2c-1.3,4.8,1.7,9.6,4.7,12.3c0.6,0.5,0.6,1.4,0.1,2C10.4,27.5,10,27.7,9.6,27.7z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<g>
|
||||
<path fill="#18A6DF" d="M28.2,6h-6.8C20.6,6,20,5.3,20,4.5s0.6-1.4,1.4-1.4h6.8c0.8,0,1.4,0.6,1.4,1.4S29,6,28.2,6z"/>
|
||||
<path fill="#18A6DF" d="M21.2,12.9C21.2,12.9,21.2,12.9,21.2,12.9c-0.8,0-1.5-0.7-1.4-1.5l0.1-6.8c0-0.8,0.7-1.5,1.5-1.4
|
||||
c0.8,0,1.4,0.7,1.4,1.5l-0.1,6.8C22.7,12.2,22,12.9,21.2,12.9z"/>
|
||||
</g>
|
||||
<path fill="#18A6DF" d="M16.4,29.4c-0.2,0-0.3,0-0.5,0c-0.8,0-1.4-0.7-1.4-1.5c0-0.8,0.7-1.4,1.5-1.4c4.8,0.2,9.3-2.9,10.4-7.2
|
||||
c1.3-4.8-1.7-9.6-4.7-12.3c-0.6-0.5-0.6-1.4-0.1-2c0.5-0.6,1.4-0.6,2-0.1c3.8,3.4,7.2,9.1,5.6,15.2C27.7,25.5,22.4,29.4,16.4,29.4z
|
||||
"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.6 KiB |
14
console/src/images/search.svg
Normal file
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#58595B" d="M22.5,14.6h-9.5c-0.7,0-1.2-0.6-1.2-1.2s0.6-1.2,1.2-1.2h9.5c0.7,0,1.2,0.6,1.2,1.2S23.2,14.6,22.5,14.6z"/>
|
||||
<path fill="#58595B" d="M17.7,19.4c-0.7,0-1.2-0.6-1.2-1.2V8.6c0-0.7,0.6-1.2,1.2-1.2S19,7.9,19,8.6v9.5
|
||||
C19,18.8,18.4,19.4,17.7,19.4z"/>
|
||||
<g>
|
||||
<path fill="#58595B" d="M3.9,30.2c-0.4,0-0.7-0.1-1-0.4c-0.6-0.6-0.6-1.5,0-2.1l6.1-6.1c0.6-0.6,1.5-0.6,2.1,0
|
||||
c0.6,0.6,0.6,1.5,0,2.1L5,29.8C4.7,30.1,4.3,30.2,3.9,30.2z"/>
|
||||
<path fill="#58595B" d="M17.7,4.5c4.9,0,8.9,4,8.9,8.9c0,4.9-4,8.9-8.9,8.9s-8.9-4-8.9-8.9C8.8,8.5,12.8,4.5,17.7,4.5 M17.7,1.6
|
||||
c-6.5,0-11.8,5.3-11.8,11.8c0,6.5,5.3,11.8,11.8,11.8c6.5,0,11.8-5.3,11.8-11.8C29.5,6.9,24.2,1.6,17.7,1.6L17.7,1.6z"/>
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 1.1 KiB |
BIN
console/src/images/server.png
Normal file
After Width: | Height: | Size: 73 KiB |
16
console/src/images/settings.svg
Normal file
|
@ -0,0 +1,16 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#18A6DF" d="M16,26.9c-0.4,0-0.8,0-1.2,0c-0.2,0-0.3-0.1-0.3-0.2c-0.4-1-0.8-1.9-1.2-2.9c-0.1-0.3-0.8-0.6-1.2-0.5
|
||||
c-0.9,0.4-1.9,0.8-2.8,1.2c-0.2,0.1-0.3,0.1-0.5-0.1c-0.5-0.5-1.1-1.1-1.6-1.6c-0.2-0.2-0.2-0.3-0.1-0.5c0.4-0.9,0.8-1.9,1.1-2.8
|
||||
c0.1-0.3-0.2-1-0.5-1.2C6.9,18,5.9,17.6,5,17.2c-0.2-0.1-0.3-0.2-0.3-0.4c0-0.7,0-1.5,0-2.2c0-0.2,0.1-0.3,0.3-0.4
|
||||
c0.9-0.4,1.9-0.8,2.8-1.2c0.4-0.2,0.6-0.8,0.5-1.2C7.9,10.9,7.5,9.9,7.1,9C7,8.8,7,8.7,7.2,8.6C7.8,8,8.3,7.5,8.8,6.9
|
||||
C9,6.8,9,6.8,9.2,6.9c1,0.4,1.9,0.8,2.9,1.2c0.4,0.1,1-0.1,1.2-0.5c0.4-0.9,0.8-1.9,1.2-2.8c0.1-0.2,0.2-0.3,0.4-0.3
|
||||
c0.8,0,1.5,0,2.3,0c0.2,0,0.3,0.1,0.4,0.3c0.4,0.9,0.8,1.9,1.2,2.8c0.2,0.4,0.8,0.7,1.2,0.5c0.9-0.4,1.9-0.8,2.8-1.2
|
||||
c0.2-0.1,0.3-0.1,0.5,0.1c0.5,0.5,1.1,1.1,1.6,1.6c0.1,0.1,0.2,0.2,0.1,0.4c-0.4,1-0.8,1.9-1.2,2.9c-0.1,0.3,0.1,1,0.5,1.1
|
||||
c1,0.4,1.9,0.8,2.9,1.2c0.2,0.1,0.2,0.2,0.2,0.4c0,0.8,0,1.5,0,2.3c0,0.2-0.1,0.3-0.3,0.4c-1,0.4-1.9,0.8-2.9,1.2
|
||||
c-0.3,0.1-0.6,0.8-0.4,1.1c0.4,0.9,0.8,1.9,1.2,2.8c0.1,0.2,0.1,0.3-0.1,0.5c-0.5,0.5-1.1,1.1-1.6,1.6c-0.1,0.1-0.2,0.2-0.4,0.1
|
||||
c-1-0.4-1.9-0.8-2.9-1.2c-0.3-0.1-1,0.1-1.1,0.5c-0.4,1-0.8,1.9-1.2,2.9c-0.1,0.2-0.2,0.3-0.4,0.2C16.7,26.9,16.4,26.9,16,26.9z
|
||||
M15.9,19.9c2.5,0,4.3-2.3,4.2-4.3c-0.1-1.8-1.6-4.1-4.2-4.1c-2.6,0-4.3,2.4-4.2,4.3C11.8,17.6,13.3,19.9,15.9,19.9z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 1.7 KiB |
9
console/src/images/stop.svg
Normal file
|
@ -0,0 +1,9 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="32px" height="32px" viewBox="0 0 32 32" enable-background="new 0 0 32 32" xml:space="preserve">
|
||||
<path fill="#18A6DF" d="M24.9,25.5H7.5c-0.7,0-1.2-0.5-1.2-1.2V7.5c0-0.7,0.5-1.2,1.2-1.2s1.2,0.5,1.2,1.2v15.6h16.2
|
||||
c0.7,0,1.2,0.5,1.2,1.2C26.1,25,25.6,25.5,24.9,25.5z"/>
|
||||
<path fill="#18A6DF" d="M24.9,25.5c-0.7,0-1.2-0.5-1.2-1.2V8.7H7.5c-0.7,0-1.2-0.5-1.2-1.2s0.5-1.2,1.2-1.2h17.4
|
||||
c0.7,0,1.2,0.5,1.2,1.2v16.8C26.1,25,25.6,25.5,24.9,25.5z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 722 B |
|
@ -1,36 +1,98 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<title>Console</title>
|
||||
<head>
|
||||
<title>High Fidelity</title>
|
||||
<script>
|
||||
window.$ = window.jQuery = require('./vendor/jQuery/jquery-2.1.4.min.js');
|
||||
</script>
|
||||
<script src="index.js"></script>
|
||||
</head>
|
||||
<body onload="ready()">
|
||||
<link rel="stylesheet" type="text/css" href="css/style.less" />
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<div id="console-version">
|
||||
<p class="light-gray">Version <span class="number">1.0.0</span></p>
|
||||
</div>
|
||||
<div id="hf-brand">
|
||||
<img src="images/logo-512.png" width="190" />
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<h1>High Fidelity</h1>
|
||||
|
||||
<h2>Interface</h2>
|
||||
<div id="process-status">
|
||||
<div id="process-interface">
|
||||
<span class="name">Interface</span>
|
||||
<span class="status">unknown</span>
|
||||
<button class="power-on">Turn On</button>
|
||||
<button class="power-off">Turn Off</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h2>Home</h2>
|
||||
<div id="home">
|
||||
<div id="server">
|
||||
<span class="status">unknown</span>
|
||||
<button class="power-on">Turn On</button>
|
||||
<button class="power-off">Turn Off</button>
|
||||
<a href="http://localhost:40100/" target="_blank">Settings</a>
|
||||
<a id="open-logs" href="#">Open log directory</a>
|
||||
<div id="console-tray">
|
||||
<div id="navigation">
|
||||
<h4 class="light-gray">NAVIGATE</h4>
|
||||
<div id="nav-search" class="nav-item">
|
||||
<div class="tray-square nav-square">
|
||||
<img src="images/search.svg" />
|
||||
</div>
|
||||
<p>Search</p>
|
||||
</div>
|
||||
<div id="nav-last-visited" class="nav-item">
|
||||
<div class="tray-square nav-square">
|
||||
<img src="images/last-visited.svg" />
|
||||
</div>
|
||||
<p>Last visited</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tray-line"></div>
|
||||
<div id="servers">
|
||||
<h4 class="light-gray">MY SERVER</h4>
|
||||
<div class="tray-square">
|
||||
<img src="images/server.png" />
|
||||
</div>
|
||||
<p>Home</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
Node Version: <script>document.write(process.versions.node)</script>
|
||||
<div id="tray-focus">
|
||||
<div id="server-focus">
|
||||
<div id="server-info">
|
||||
<h2>Home</h2>
|
||||
<div id="left-box" class="server-box">
|
||||
<div class="title">
|
||||
<h4 id="status">STATUS</h4>
|
||||
</div>
|
||||
|
||||
<div id="ds-status" class="process-status">
|
||||
<div class="circle stopped"></div>
|
||||
<span>Domain Server</span>
|
||||
</div>
|
||||
<div id="ac-status" class="process-status">
|
||||
<div class="circle stopped"></div>
|
||||
<span>Assignment Clients</span>
|
||||
</div>
|
||||
</div>
|
||||
<div id="right-box" class="server-box">
|
||||
<div class="title">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="manage-server">
|
||||
<div id="manage-buttons">
|
||||
<a id="restart" href="#" class="manage-button">
|
||||
<img src="images/restart.svg" />
|
||||
<p>Restart</p>
|
||||
</a>
|
||||
<a id="stop" href="#" class="manage-button">
|
||||
<img src="images/stop.svg" />
|
||||
<p>Stop</p>
|
||||
</a>
|
||||
<div id="manage-separator">
|
||||
<img src="images/manage-button-sep.svg"/>
|
||||
</div>
|
||||
|
||||
<!-- TODO: handle the case where the DS HTTP port is non-standard -->
|
||||
<a id="settings" href="http://localhost:40100/settings" target="_blank" class="manage-button">
|
||||
<img src="images/settings.svg" />
|
||||
<p>Settings</p>
|
||||
</a>
|
||||
<a id="open-logs" href="#" class="manage-button">
|
||||
<img src="images/logs.svg" />
|
||||
<p>Logs</p>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -1,22 +1,74 @@
|
|||
ready = function() {
|
||||
window.$ = require('./jquery');
|
||||
|
||||
$(function() {
|
||||
const ipcRenderer = require('electron').ipcRenderer;
|
||||
const HFProcess = require('./modules/hf-process.js');
|
||||
|
||||
var settingsButton = $('#manage-server #settings');
|
||||
|
||||
function toggleManageButton(button, enabled) {
|
||||
if (enabled) {
|
||||
button.attr('href', '#');
|
||||
button.removeClass('disabled');
|
||||
} else {
|
||||
button.removeAttr('href');
|
||||
button.addClass('disabled');
|
||||
}
|
||||
}
|
||||
|
||||
function onProcessUpdate(event, arg) {
|
||||
// Update interface
|
||||
console.log("update", event, arg);
|
||||
var interfaceState = arg.interface.state;
|
||||
$('#process-interface .status').text(interfaceState);
|
||||
var interfaceOn = interfaceState != 'stopped';
|
||||
$('#process-interface .power-on').prop('disabled', interfaceOn);
|
||||
$('#process-interface .power-off').prop('disabled', !interfaceOn);
|
||||
|
||||
var serverState = arg.home.state;
|
||||
$('#server .status').text(serverState);
|
||||
var serverOn = serverState != 'stopped';
|
||||
$('#server .power-on').prop('disabled', serverOn);
|
||||
$('#server .power-off').prop('disabled', !serverOn);
|
||||
// var interfaceState = arg.interface.state;
|
||||
// $('#process-interface .status').text(interfaceState);
|
||||
// var interfaceOn = interfaceState != 'stopped';
|
||||
// $('#process-interface .power-on').prop('disabled', interfaceOn);
|
||||
// $('#process-interface .power-off').prop('disabled', !interfaceOn);
|
||||
|
||||
var sendingProcess = arg;
|
||||
|
||||
var processCircle = null;
|
||||
if (sendingProcess.name == "domain-server") {
|
||||
processCircle = $('#ds-status .circle');
|
||||
} else if (sendingProcess.name == "ac-monitor") {
|
||||
processCircle = $('#ac-status .circle');
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
|
||||
if (sendingProcess.name == "domain-server") {
|
||||
toggleManageButton(settingsButton,
|
||||
sendingProcess.state == HFProcess.ProcessStates.STARTED);
|
||||
}
|
||||
|
||||
switch (sendingProcess.state) {
|
||||
case HFProcess.ProcessStates.STOPPED:
|
||||
processCircle.attr('class', 'circle stopped');
|
||||
break;
|
||||
case HFProcess.ProcessStates.STOPPING:
|
||||
processCircle.attr('class', 'circle stopping');
|
||||
break;
|
||||
case HFProcess.ProcessStates.STARTED:
|
||||
|
||||
|
||||
processCircle.attr('class', 'circle started');
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
function onProcessGroupUpdate(event, arg) {
|
||||
var sendingGroup = arg;
|
||||
var stopButton = $('#manage-server #stop');
|
||||
|
||||
switch (sendingGroup.state) {
|
||||
case HFProcess.ProcessGroupStates.STOPPED:
|
||||
case HFProcess.ProcessGroupStates.STOPPING:
|
||||
// if the process group is stopping, the stop button should be disabled
|
||||
toggleManageButton(stopButton, false);
|
||||
break;
|
||||
case HFProcess.ProcessGroupStates.STARTED:
|
||||
// if the process group is going, the stop button should be active
|
||||
toggleManageButton(stopButton, true);
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
$('#process-interface .power-on').click(function() {
|
||||
|
@ -25,10 +77,10 @@ ready = function() {
|
|||
$('#process-interface .power-off').click(function() {
|
||||
ipcRenderer.send('stop-process', { name: 'interface' });
|
||||
});
|
||||
$('#server .power-on').click(function() {
|
||||
ipcRenderer.send('start-server', { name: 'home' });
|
||||
$('#manage-server #restart').click(function() {
|
||||
ipcRenderer.send('restart-server', { name: 'home' });
|
||||
});
|
||||
$('#server .power-off').click(function() {
|
||||
$('#manage-server #stop').click(function() {
|
||||
ipcRenderer.send('stop-server', { name: 'home' });
|
||||
});
|
||||
$('#open-logs').click(function() {
|
||||
|
@ -36,6 +88,7 @@ ready = function() {
|
|||
});
|
||||
|
||||
ipcRenderer.on('process-update', onProcessUpdate);
|
||||
ipcRenderer.on('process-group-update', onProcessGroupUpdate);
|
||||
|
||||
ipcRenderer.send('update');
|
||||
};
|
||||
ipcRenderer.send('update-all-processes');
|
||||
});
|
||||
|
|
5
console/src/jquery.js
vendored
|
@ -19,7 +19,7 @@ const ipcMain = electron.ipcMain;
|
|||
// Keep a global reference of the window object, if you don't, the window will
|
||||
// be closed automatically when the JavaScript object is garbage collected.
|
||||
var mainWindow = null;
|
||||
var appIcon = null;
|
||||
var tray = null;
|
||||
|
||||
var path = require('path');
|
||||
var TRAY_ICON = path.join(__dirname, '../resources/console-tray.png');
|
||||
|
@ -50,6 +50,7 @@ if (argv.localDebugBuilds || argv.localReleaseBuilds) {
|
|||
|
||||
function openFileBrowser(path) {
|
||||
var type = os.type();
|
||||
console.log(type);
|
||||
if (type == "Windows_NT") {
|
||||
childProcess.exec('start ' + path);
|
||||
} else if (type == "Darwin") {
|
||||
|
@ -66,17 +67,26 @@ function openFileBrowser(path) {
|
|||
// initialization and is ready to create browser windows.
|
||||
app.on('ready', function() {
|
||||
// Create tray icon
|
||||
appIcon = new Tray(TRAY_ICON);
|
||||
appIcon.setToolTip('High Fidelity Console');
|
||||
tray = new Tray(TRAY_ICON);
|
||||
tray.setToolTip('High Fidelity');
|
||||
var contextMenu = Menu.buildFromTemplate([{
|
||||
label: 'Quit',
|
||||
accelerator: 'Command+Q',
|
||||
click: function() { app.quit(); }
|
||||
}]);
|
||||
appIcon.setContextMenu(contextMenu);
|
||||
tray.setContextMenu(contextMenu);
|
||||
|
||||
// Require electron-compile to use LESS files in place of basic CSS
|
||||
require('electron-compile').init();
|
||||
|
||||
// Create the browser window.
|
||||
mainWindow = new BrowserWindow({width: 800, height: 600, icon: APP_ICON});
|
||||
mainWindow = new BrowserWindow({
|
||||
title: "High Fidelity",
|
||||
width: 970,
|
||||
height: 775,
|
||||
icon: APP_ICON,
|
||||
resizable: false
|
||||
});
|
||||
|
||||
// and load the index.html of the app.
|
||||
mainWindow.loadURL('file://' + __dirname + '/index.html');
|
||||
|
@ -104,45 +114,69 @@ app.on('ready', function() {
|
|||
var pInterface = new Process('interface', interfacePath);
|
||||
|
||||
var homeServer = new ProcessGroup('home', [
|
||||
new Process('domain_server', dsPath),
|
||||
new Process('ac_monitor', acPath, ['-n6', '--log-directory', logPath])
|
||||
new Process('domain-server', dsPath),
|
||||
new Process('ac-monitor', acPath, ['-n6', '--log-directory', logPath])
|
||||
]);
|
||||
homeServer.start();
|
||||
|
||||
// make sure we stop child processes on app quit
|
||||
app.on('quit', function(){
|
||||
pInterface.stop();
|
||||
homeServer.stop();
|
||||
});
|
||||
|
||||
var processes = {
|
||||
interface: pInterface,
|
||||
home: homeServer
|
||||
};
|
||||
|
||||
function sendProcessUpdate() {
|
||||
console.log("Sending process update to web view");
|
||||
mainWindow.webContents.send('process-update', processes);
|
||||
function sendProcessUpdate(process) {
|
||||
if (mainWindow) {
|
||||
console.log("Sending process update to web view for " + process.name);
|
||||
mainWindow.webContents.send('process-update', process);
|
||||
}
|
||||
};
|
||||
|
||||
pInterface.on('state-update', sendProcessUpdate);
|
||||
homeServer.on('state-update', sendProcessUpdate);
|
||||
function sendProcessGroupUpdate(processGroup) {
|
||||
if (mainWindow) {
|
||||
mainWindow.webContents.send('process-group-update', processGroup);
|
||||
}
|
||||
}
|
||||
|
||||
ipcMain.on('start-process', function(event, arg) {
|
||||
pInterface.start();
|
||||
sendProcessUpdate();
|
||||
});
|
||||
ipcMain.on('stop-process', function(event, arg) {
|
||||
pInterface.stop();
|
||||
sendProcessUpdate();
|
||||
});
|
||||
ipcMain.on('start-server', function(event, arg) {
|
||||
homeServer.start();
|
||||
sendProcessUpdate();
|
||||
// handle process updates
|
||||
// pInterface.on('state-update', sendProcessUpdate);
|
||||
homeServer.on('process-update', sendProcessUpdate);
|
||||
homeServer.on('state-update', sendProcessGroupUpdate);
|
||||
|
||||
// start the home server
|
||||
homeServer.start();
|
||||
|
||||
// ipcMain.on('start-process', function(event, arg) {
|
||||
// pInterface.start();
|
||||
// });
|
||||
// ipcMain.on('stop-process', function(event, arg) {
|
||||
// pInterface.stop();
|
||||
// });
|
||||
|
||||
ipcMain.on('restart-server', function(event, arg) {
|
||||
homeServer.restart();
|
||||
});
|
||||
|
||||
ipcMain.on('stop-server', function(event, arg) {
|
||||
homeServer.stop();
|
||||
sendProcessUpdate();
|
||||
});
|
||||
|
||||
ipcMain.on('open-logs', function(event, arg) {
|
||||
openFileBrowser(logPath);
|
||||
});
|
||||
ipcMain.on('update', sendProcessUpdate);
|
||||
|
||||
sendProcessUpdate();
|
||||
ipcMain.on('update-all-processes', function(event, arg) {
|
||||
// enumerate our processes and call sendProcessUpdate to update
|
||||
// the window with their status
|
||||
for (let process of homeServer.processes) {
|
||||
sendProcessUpdate(process);
|
||||
}
|
||||
|
||||
sendProcessGroupUpdate(homeServer);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
|
|
@ -25,6 +25,7 @@ function ProcessGroup(name, processes) {
|
|||
this.name = name;
|
||||
this.state = ProcessGroupStates.STOPPED;
|
||||
this.processes = [];
|
||||
this.restarting = false;
|
||||
|
||||
for (let process of processes) {
|
||||
this.addProcess(process);
|
||||
|
@ -47,6 +48,7 @@ ProcessGroup.prototype = extend(ProcessGroup.prototype, {
|
|||
}
|
||||
|
||||
this.state = ProcessGroupStates.STARTED;
|
||||
this.emit('state-update', this);
|
||||
},
|
||||
stop: function() {
|
||||
if (this.state != ProcessGroupStates.STARTED) {
|
||||
|
@ -57,6 +59,19 @@ ProcessGroup.prototype = extend(ProcessGroup.prototype, {
|
|||
process.stop();
|
||||
}
|
||||
this.state = ProcessGroupStates.STOPPING;
|
||||
this.emit('state-update', this);
|
||||
},
|
||||
restart: function() {
|
||||
if (this.state == ProcessGroupStates.STOPPED) {
|
||||
// start the group, we were already stopped
|
||||
this.start();
|
||||
} else {
|
||||
// set our restart flag so the group will restart once stopped
|
||||
this.restarting = true;
|
||||
|
||||
// call stop, that will put them in the stopping state
|
||||
this.stop();
|
||||
}
|
||||
},
|
||||
|
||||
// Event handlers
|
||||
|
@ -70,8 +85,15 @@ ProcessGroup.prototype = extend(ProcessGroup.prototype, {
|
|||
}
|
||||
if (!processesStillRunning) {
|
||||
this.state = ProcessGroupStates.STOPPED;
|
||||
this.emit('state-update', this);
|
||||
|
||||
// if we we're supposed to restart, call start now and reset the flag
|
||||
if (this.restarting) {
|
||||
this.start();
|
||||
this.restarting = false;
|
||||
}
|
||||
}
|
||||
this.emit('state-update', this, process);
|
||||
this.emit('process-update', process);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -79,7 +101,6 @@ var ID = 0;
|
|||
function Process(name, command, commandArgs, logDirectory) {
|
||||
events.EventEmitter.call(this);
|
||||
|
||||
this.blah = 'adsf';
|
||||
this.id = ++ID;
|
||||
this.name = name;
|
||||
this.command = command;
|
||||
|
@ -183,6 +204,8 @@ Process.prototype = extend(Process.prototype, {
|
|||
this.child.kill();
|
||||
}
|
||||
this.state = ProcessStates.STOPPING;
|
||||
|
||||
this.emit('state-update', this);
|
||||
},
|
||||
|
||||
// Events
|
||||
|
@ -200,4 +223,5 @@ Process.prototype = extend(Process.prototype, {
|
|||
|
||||
module.exports.Process = Process;
|
||||
module.exports.ProcessGroup = ProcessGroup;
|
||||
module.exports.ProcessGroupStates = ProcessGroupStates;
|
||||
module.exports.ProcessStates = ProcessStates;
|
||||
|
|
94
console/src/vendor/Raleway/OFL.txt
vendored
Executable file
|
@ -0,0 +1,94 @@
|
|||
Copyright (c) 2010, Matt McInerney (matt@pixelspread.com),
|
||||
Copyright (c) 2011, Pablo Impallari (www.impallari.com|impallari@gmail.com),
|
||||
Copyright (c) 2011, Rodrigo Fuenzalida (www.rfuenzalida.com|hello@rfuenzalida.com), with Reserved Font Name Raleway
|
||||
This Font Software is licensed under the SIL Open Font License, Version 1.1.
|
||||
This license is copied below, and is also available with a FAQ at:
|
||||
http://scripts.sil.org/OFL
|
||||
|
||||
|
||||
-----------------------------------------------------------
|
||||
SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
|
||||
-----------------------------------------------------------
|
||||
|
||||
PREAMBLE
|
||||
The goals of the Open Font License (OFL) are to stimulate worldwide
|
||||
development of collaborative font projects, to support the font creation
|
||||
efforts of academic and linguistic communities, and to provide a free and
|
||||
open framework in which fonts may be shared and improved in partnership
|
||||
with others.
|
||||
|
||||
The OFL allows the licensed fonts to be used, studied, modified and
|
||||
redistributed freely as long as they are not sold by themselves. The
|
||||
fonts, including any derivative works, can be bundled, embedded,
|
||||
redistributed and/or sold with any software provided that any reserved
|
||||
names are not used by derivative works. The fonts and derivatives,
|
||||
however, cannot be released under any other type of license. The
|
||||
requirement for fonts to remain under this license does not apply
|
||||
to any document created using the fonts or their derivatives.
|
||||
|
||||
DEFINITIONS
|
||||
"Font Software" refers to the set of files released by the Copyright
|
||||
Holder(s) under this license and clearly marked as such. This may
|
||||
include source files, build scripts and documentation.
|
||||
|
||||
"Reserved Font Name" refers to any names specified as such after the
|
||||
copyright statement(s).
|
||||
|
||||
"Original Version" refers to the collection of Font Software components as
|
||||
distributed by the Copyright Holder(s).
|
||||
|
||||
"Modified Version" refers to any derivative made by adding to, deleting,
|
||||
or substituting -- in part or in whole -- any of the components of the
|
||||
Original Version, by changing formats or by porting the Font Software to a
|
||||
new environment.
|
||||
|
||||
"Author" refers to any designer, engineer, programmer, technical
|
||||
writer or other person who contributed to the Font Software.
|
||||
|
||||
PERMISSION & CONDITIONS
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of the Font Software, to use, study, copy, merge, embed, modify,
|
||||
redistribute, and sell modified and unmodified copies of the Font
|
||||
Software, subject to the following conditions:
|
||||
|
||||
1) Neither the Font Software nor any of its individual components,
|
||||
in Original or Modified Versions, may be sold by itself.
|
||||
|
||||
2) Original or Modified Versions of the Font Software may be bundled,
|
||||
redistributed and/or sold with any software, provided that each copy
|
||||
contains the above copyright notice and this license. These can be
|
||||
included either as stand-alone text files, human-readable headers or
|
||||
in the appropriate machine-readable metadata fields within text or
|
||||
binary files as long as those fields can be easily viewed by the user.
|
||||
|
||||
3) No Modified Version of the Font Software may use the Reserved Font
|
||||
Name(s) unless explicit written permission is granted by the corresponding
|
||||
Copyright Holder. This restriction only applies to the primary font name as
|
||||
presented to the users.
|
||||
|
||||
4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
|
||||
Software shall not be used to promote, endorse or advertise any
|
||||
Modified Version, except to acknowledge the contribution(s) of the
|
||||
Copyright Holder(s) and the Author(s) or with their explicit written
|
||||
permission.
|
||||
|
||||
5) The Font Software, modified or unmodified, in part or in whole,
|
||||
must be distributed entirely under this license, and must not be
|
||||
distributed under any other license. The requirement for fonts to
|
||||
remain under this license does not apply to any document created
|
||||
using the Font Software.
|
||||
|
||||
TERMINATION
|
||||
This license becomes null and void if any of the above conditions are
|
||||
not met.
|
||||
|
||||
DISCLAIMER
|
||||
THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
|
||||
OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
|
||||
COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
|
||||
INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
|
||||
DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
|
||||
FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
|
||||
OTHER DEALINGS IN THE FONT SOFTWARE.
|