custom made frame (fixes chrome33+ no shadow)
cTn
parent
81fb798e13
commit
20c62aa938
|
|
@ -1,6 +1,7 @@
|
||||||
function start_app() {
|
function start_app() {
|
||||||
chrome.app.window.create('main.html', {
|
chrome.app.window.create('main.html', {
|
||||||
id: 'main-window',
|
id: 'main-window',
|
||||||
|
frame: 'none',
|
||||||
resizable: false
|
resizable: false
|
||||||
}, function(window_child) {
|
}, function(window_child) {
|
||||||
window_child.onClosed.addListener(function() {
|
window_child.onClosed.addListener(function() {
|
||||||
|
|
|
||||||
|
|
@ -45,6 +45,62 @@ input[type=number]::-webkit-inner-spin-button:after {
|
||||||
.right {
|
.right {
|
||||||
float: 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 {
|
#main-wrapper {
|
||||||
width: 940px;
|
width: 940px;
|
||||||
margin: 10px auto 0 auto;
|
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 */
|
-webkit-transform: rotateX(0deg); /* DO NOT REMOVE! this fixes the UI freezing bug on MAC OS X */
|
||||||
}
|
}
|
||||||
#status-bar {
|
#status-bar {
|
||||||
position: absolute;
|
margin-left: -10px;
|
||||||
bottom: 0;
|
margin-top: 10px;
|
||||||
left: 0;
|
|
||||||
|
|
||||||
width: 940px;
|
width: 940px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
|
|
|
||||||
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 |
10
main.html
10
main.html
|
|
@ -1,8 +1,6 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>Baseflight Configurator</title>
|
|
||||||
|
|
||||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
||||||
<meta name="author" content="cTn" />
|
<meta name="author" content="cTn" />
|
||||||
|
|
||||||
|
|
@ -46,6 +44,13 @@
|
||||||
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
|
<link type="text/css" rel="stylesheet" href="./tabs/firmware_flasher.css" media="all" />
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<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="main-wrapper">
|
||||||
<div id="port-picker">
|
<div id="port-picker">
|
||||||
<ul>
|
<ul>
|
||||||
|
|
@ -111,5 +116,6 @@
|
||||||
<span class="notify"></span>
|
<span class="notify"></span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
17
main.js
17
main.js
|
|
@ -17,12 +17,25 @@ ga_tracker.sendAppView('Application Started');
|
||||||
$(document).ready(function() {
|
$(document).ready(function() {
|
||||||
// set bounds (default 960x600)
|
// set bounds (default 960x600)
|
||||||
if (screen.height > 600) {
|
if (screen.height > 600) {
|
||||||
chrome.app.window.current().setBounds({width: 960, height: 600});
|
chrome.app.window.current().setBounds({width: 962, height: 627});
|
||||||
} else {
|
} else {
|
||||||
$('div#content').height(280);
|
$('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');
|
var tabs = $('#tabs > ul');
|
||||||
$('a', tabs).click(function() {
|
$('a', tabs).click(function() {
|
||||||
if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active
|
if ($(this).parent().hasClass('active') == false) { // only initialize when the tab isn't already active
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue