mirror of
https://github.com/dscalzi/HeliosLauncher.git
synced 2024-12-22 11:42:14 -08:00
Added dynamic frames for darwin + win32.
The darwin frame is the same as the original, however the button behavior is corrected. The win32 frame uses the traditional buttons found on windows. Also added a small logo image to the windows frame. Each frame is dynamically loaded on startup via ejs. Also disabled the server selection test UI.
This commit is contained in:
Daniel Scalzi
parent
28cd147ca0
commit
b5386c0257
@ -49,22 +49,113 @@ p {
|
||||
* *
|
||||
******************************************************************************/
|
||||
|
||||
#frame_bar {
|
||||
-webkit-app-region: drag;
|
||||
-webkit-user-select: none;
|
||||
background: rgba(1, 2, 1, 0.5);
|
||||
min-height: 22px;
|
||||
/* Frame Bar */
|
||||
#frameBar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: rgba(1, 2, 1, 0.5);
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
/* Undraggable region on the top of the frame. */
|
||||
#frameResizableTop {
|
||||
height: 2px;
|
||||
width: 100%;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Flexbox to wrap the main frame content. */
|
||||
#frameMain {
|
||||
display: flex;
|
||||
height: 20px
|
||||
}
|
||||
|
||||
/* Undraggable region on the left and right of the frame. */
|
||||
.frameResizableVert {
|
||||
width: 2px;
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
/* Main frame content for windows. */
|
||||
#frameContentWin {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
/* Main frame content for darwin. */
|
||||
#frameContentDarwin {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
-webkit-app-region: drag;
|
||||
}
|
||||
|
||||
/* Frame logo (windows only). */
|
||||
#frameImageDock {
|
||||
width: 100px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
z-index: 10000;
|
||||
}
|
||||
#frameImage {
|
||||
height: 15px;
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
|
||||
#frame_btn_dock {
|
||||
margin-left: 2px;
|
||||
/* Windows frame button dock. */
|
||||
#frameButtonDockWin {
|
||||
-webkit-app-region: no-drag !important;
|
||||
position: relative;
|
||||
top: -2px;
|
||||
right: -2px;
|
||||
height: 22px;
|
||||
}
|
||||
#frameButtonDockWin > .frameButton:not(:first-child) {
|
||||
margin-left: -4px;
|
||||
}
|
||||
|
||||
.frame_btn {
|
||||
/* Darwin frame button dock: NaN; */
|
||||
#frameButtonDockDarwin {
|
||||
-webkit-app-region: no-drag !important;
|
||||
position: relative;
|
||||
top: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
/* Windows Frame Button Styles. */
|
||||
.frameButton {
|
||||
background: none;
|
||||
border: none;
|
||||
height: 22px;
|
||||
width: 39px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.frameButton:hover,
|
||||
.frameButton:focus {
|
||||
background: rgba(189, 189, 189, 0.43);
|
||||
}
|
||||
.frameButton:active {
|
||||
background: rgba(156, 156, 156, 0.43);
|
||||
}
|
||||
.frameButton:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
|
||||
/* Close button is red. */
|
||||
#frameButton_close:hover,
|
||||
#frameButton_close:focus {
|
||||
background: rgba(255, 53, 53, 0.61) !important;
|
||||
}
|
||||
#frameButton_close:active {
|
||||
background: rgba(235, 0, 0, 0.61) !important;
|
||||
}
|
||||
|
||||
/* Darwin Frame Button Styles. */
|
||||
.frameButtonDarwin {
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
border-radius: 50%;
|
||||
@ -73,41 +164,40 @@ p {
|
||||
-webkit-app-region: no-drag !important;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.frame_btn:focus {
|
||||
.frameButtonDarwin:focus {
|
||||
outline: 0px;
|
||||
}
|
||||
|
||||
#frame_btn_close {
|
||||
#frameButtonDarwin_close {
|
||||
background-color: #e74c32;
|
||||
}
|
||||
#frame_btn_close:hover,
|
||||
#frame_btn_close:focus {
|
||||
#frameButtonDarwin_close:hover,
|
||||
#frameButtonDarwin_close:focus {
|
||||
background-color: #FF9A8A;
|
||||
}
|
||||
#frame_btn_close:active {
|
||||
#frameButtonDarwin_close:active {
|
||||
background-color: #ff8d7b;
|
||||
}
|
||||
|
||||
#frame_btn_restoredown {
|
||||
#frameButtonDarwin_minimize {
|
||||
background-color: #fed045;
|
||||
}
|
||||
#frame_btn_restoredown:hover,
|
||||
#frame_btn_restoredown:focus {
|
||||
#frameButtonDarwin_minimize:hover,
|
||||
#frameButtonDarwin_minimize:focus {
|
||||
background-color: #FFE9A9;
|
||||
}
|
||||
#frame_btn_restoredown:active {
|
||||
#frameButtonDarwin_minimize:active {
|
||||
background-color: #ffde7b;
|
||||
}
|
||||
|
||||
#frame_btn_minimize {
|
||||
#frameButtonDarwin_restoredown {
|
||||
background-color: #96e734;
|
||||
}
|
||||
#frame_btn_minimize:hover,
|
||||
#frame_btn_minimize:focus {
|
||||
#frameButtonDarwin_restoredown:hover,
|
||||
#frameButtonDarwin_restoredown:focus {
|
||||
background-color: #D6FFA6;
|
||||
}
|
||||
#frame_btn_minimize:active {
|
||||
#frameButtonDarwin_restoredown:active {
|
||||
background-color: #bfff76;
|
||||
}
|
||||
|
||||
|
||||
@ -22,25 +22,33 @@ document.addEventListener('readystatechange', function () {
|
||||
console.log('UICore Initializing..');
|
||||
|
||||
// Bind close button.
|
||||
document.getElementById("frame_btn_close").addEventListener("click", function (e) {
|
||||
const window = remote.getCurrentWindow()
|
||||
window.close()
|
||||
Array.from(document.getElementsByClassName('fCb')).map((val) => {
|
||||
val.addEventListener('click', e => {
|
||||
const window = remote.getCurrentWindow()
|
||||
window.close()
|
||||
})
|
||||
})
|
||||
|
||||
// Bind restore down button.
|
||||
document.getElementById("frame_btn_restoredown").addEventListener("click", function (e) {
|
||||
const window = remote.getCurrentWindow()
|
||||
if(window.isMaximized()){
|
||||
window.unmaximize();
|
||||
} else {
|
||||
window.maximize()
|
||||
}
|
||||
Array.from(document.getElementsByClassName('fRb')).map((val) => {
|
||||
val.addEventListener('click', e => {
|
||||
const window = remote.getCurrentWindow()
|
||||
if(window.isMaximized()){
|
||||
window.unmaximize()
|
||||
} else {
|
||||
window.maximize()
|
||||
}
|
||||
document.activeElement.blur()
|
||||
})
|
||||
})
|
||||
|
||||
// Bind minimize button.
|
||||
document.getElementById("frame_btn_minimize").addEventListener("click", function (e) {
|
||||
const window = remote.getCurrentWindow()
|
||||
window.minimize()
|
||||
Array.from(document.getElementsByClassName('fMb')).map((val) => {
|
||||
val.addEventListener('click', e => {
|
||||
const window = remote.getCurrentWindow()
|
||||
window.minimize()
|
||||
document.activeElement.blur()
|
||||
})
|
||||
})
|
||||
|
||||
} else if(document.readyState === 'complete'){
|
||||
|
||||
@ -1,7 +1,33 @@
|
||||
<div id="frame_bar">
|
||||
<div id="frame_btn_dock">
|
||||
<button class="frame_btn" id="frame_btn_close" tabIndex="-1"></button>
|
||||
<button class="frame_btn" id="frame_btn_restoredown" tabIndex="-1"></button>
|
||||
<button class="frame_btn" id="frame_btn_minimize" tabIndex="-1"></button>
|
||||
<div id="frameBar">
|
||||
<div id="frameResizableTop" class="frameDragPadder"></div>
|
||||
<div id="frameMain">
|
||||
<div class="frameResizableVert frameDragPadder"></div>
|
||||
<%if (process.platform === 'darwin') { %>
|
||||
<div id="frameContentDarwin">
|
||||
<div id="frameButtonDockDarwin">
|
||||
<button class="frameButtonDarwin fCb" id="frameButtonDarwin_close" tabIndex="-1"></button>
|
||||
<button class="frameButtonDarwin fMb" id="frameButtonDarwin_minimize" tabIndex="-1"></button>
|
||||
<button class="frameButtonDarwin fRb" id="frameButtonDarwin_restoredown" tabIndex="-1"></button>
|
||||
</div>
|
||||
</div>
|
||||
<% } else{ %>
|
||||
<div id="frameContentWin">
|
||||
<div id="frameImageDock">
|
||||
<img id= "frameImage" src="./assets/images/WCTextCrop.png" />
|
||||
</div>
|
||||
<div id="frameButtonDockWin">
|
||||
<button class="frameButton fMb" id="frameButton_minimize" tabIndex="-1">
|
||||
<svg name="TitleBarMinimize" width="10" height="10" viewBox="0 0 12 12"><rect stroke="#ffffff" fill="#ffffff" width="10" height="1" x="1" y="6"></rect></svg>
|
||||
</button>
|
||||
<button class="frameButton fRb" id="frameButton_restoredown" tabIndex="-1">
|
||||
<svg name="TitleBarMaximize" width="10" height="10" viewBox="0 0 12 12"><rect width="9" height="9" x="1.5" y="1.5" fill="none" stroke="#ffffff" stroke-width="1.4px"></rect></svg>
|
||||
</button>
|
||||
<button class="frameButton fCb" id="frameButton_close" tabIndex="-1">
|
||||
<svg name="TitleBarClose" width="10" height="10" viewBox="0 0 12 12"><polygon stroke="#ffffff" fill="#ffffff" fill-rule="evenodd" points="11 1.576 6.583 6 11 10.424 10.424 11 6 6.583 1.576 11 1 10.424 5.417 6 1 1.576 1.576 1 6 5.417 10.424 1"></polygon></svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<% } %>
|
||||
<div class="frameResizableVert frameDragPadder"></div>
|
||||
</div>
|
||||
</div>
|
||||
@ -126,7 +126,7 @@
|
||||
<button id="launch_button">PLAY</button>
|
||||
<div class="bot_divider"></div>
|
||||
<!-- Span until we implement the real selection -->
|
||||
<div id="serverSelectContainer">
|
||||
<div id="serverSelectContainer" style="display:none;">
|
||||
<div id="serverSelectContent">
|
||||
<div class="serverSelectElement" sel>
|
||||
<span class="serverSelected">◆</span>
|
||||
@ -145,7 +145,7 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<span class="bot_label" id="server_selection"style="display:none;line-height: 24px;">• No Server Selected</span>
|
||||
<span class="bot_label" id="server_selection"style="line-height: 24px;">• No Server Selected</span>
|
||||
</div>
|
||||
<div id="launch_details">
|
||||
<div id="launch_details_left">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user