custom made frame (fixes chrome33+ no shadow)

10.3.x-maintenance
cTn 2014-01-18 19:21:30 +01:00
parent 81fb798e13
commit 20c62aa938
7 changed files with 143 additions and 68 deletions

View File

@ -1,6 +1,7 @@
function start_app() {
chrome.app.window.create('main.html', {
id: 'main-window',
frame: 'none',
resizable: false
}, function(window_child) {
window_child.onClosed.addListener(function() {

View File

@ -45,6 +45,62 @@ input[type=number]::-webkit-inner-spin-button:after {
.right {
float: right;
}
#outter-wrapper {
border: 1px solid silver;
}
#frame {
height: 25px;
line-height: 25px;
-webkit-app-region: drag;
background-color: white;
}
#frame .title {
float: left;
margin-left: 15px;
font-weight: bold;
text-shadow: 1px 1px #e4e4e4;
}
#frame .minimize {
float: right;
display: block;
width: 26px;
height: 20px;
background: url('../images/controls/minimize.png') no-repeat 0 0;
}
#frame .maximize {
float: right;
display: block;
width: 27px;
height: 20px;
background: url('../images/controls/maximize.png') no-repeat 0 0;
}
#frame .close {
float: right;
display: block;
width: 45px;
height: 20px;
background: url('../images/controls/close.png') no-repeat 0 0;
}
#frame a {
cursor: default;
-webkit-app-region: no-drag;
}
#frame a:hover {
background-position: 0px -20px;
}
#frame a:active {
background-position: 0px -40px;
}
#main-wrapper {
width: 940px;
margin: 10px auto 0 auto;
@ -198,9 +254,8 @@ input[type=number]::-webkit-inner-spin-button:after {
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
}
#status-bar {
position: absolute;
bottom: 0;
left: 0;
margin-left: -10px;
margin-top: 10px;
width: 940px;
height: 20px;

BIN
images/controls/close.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 991 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

@ -1,8 +1,6 @@
<!DOCTYPE html>
<html>
<head>
<title>Baseflight Configurator</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="cTn" />
@ -46,6 +44,13 @@
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
</head>
<body>
<div id="outter-wrapper">
<div id="frame">
<span class="title">Baseflight - Configurator</span>
<a class="close" href="#"></a>
<a class="maximize" href="#"></a>
<a class="minimize" href="#"></a>
</div>
<div id="main-wrapper">
<div id="port-picker">
<ul>
@ -111,5 +116,6 @@
<span class="notify"></span>
</div>
</div>
</div>
</body>
</html>

17
main.js
View File

@ -17,12 +17,25 @@ ga_tracker.sendAppView('Application Started');
$(document).ready(function() {
// set bounds (default 960x600)
if (screen.height > 600) {
chrome.app.window.current().setBounds({width: 960, height: 600});
chrome.app.window.current().setBounds({width: 962, height: 627});
} else {
$('div#content').height(280);
chrome.app.window.current().setBounds({width: 960, height: 400});
chrome.app.window.current().setBounds({width: 960, height: 427});
}
// bind controls
$('#frame .minimize').click(function() {
chrome.app.window.current().minimize();
});
$('#frame .maximize').click(function() {
});
$('#frame .close').click(function() {
chrome.app.window.current().close();
});
// Tabs
var tabs = $('#tabs > ul');
$('a', tabs).click(function() {
if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active