Enable app frame with inline menu and window controls. See #176
This commit is contained in:
Thomas Wilburn
parent
f2dea6ad91
commit
599ac9f1db
6 changed files with 84 additions and 9 deletions
|
|
@ -35,7 +35,8 @@ var openWindow = function() {
|
|||
};
|
||||
chrome.app.window.create("main.html", {
|
||||
bounds: defaults,
|
||||
id: "caret:main"
|
||||
id: "caret:main",
|
||||
frame: "none"
|
||||
}, function(win) {
|
||||
mainWindow = win;
|
||||
win.contentWindow.launchData = files;
|
||||
|
|
|
|||
|
|
@ -34,10 +34,9 @@ a[target] {
|
|||
|
||||
//MACRO-LEVEL POSITIONING
|
||||
|
||||
.toolbar {
|
||||
.titlebar {
|
||||
flex: 0 0 30px;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
z-index: 999;
|
||||
}
|
||||
|
||||
.tabs {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
@accent: #808;
|
||||
@foreground: black;
|
||||
@background: white;
|
||||
@foreground: #111;
|
||||
@background: #F7F7F7;
|
||||
@faded: #AAA;
|
||||
|
||||
@import "base";
|
||||
|
|
|
|||
63
css/ui.less
63
css/ui.less
|
|
@ -1,12 +1,69 @@
|
|||
//window frame
|
||||
.titlebar {
|
||||
-webkit-app-region: drag;
|
||||
-webkit-transform: translateZ(0);
|
||||
transform: translateZ(0);
|
||||
z-index: 999;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
padding: 4px 16px;
|
||||
background: linear-gradient(to left, @background, mix(@background, #888, 90%));
|
||||
|
||||
.toolbar, .window-controls {
|
||||
-webkit-app-region: no-drag;
|
||||
}
|
||||
|
||||
.app-name {
|
||||
margin-right: 10px;
|
||||
padding-right: 10px;
|
||||
border-right: 1px solid @foreground;
|
||||
}
|
||||
|
||||
.window-controls {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
align-content: stretch;
|
||||
align-items: baseline;
|
||||
padding: 0 4px;
|
||||
|
||||
a {
|
||||
width: 40px;
|
||||
display: block;
|
||||
margin-left: 1px;
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
text-align: center;
|
||||
background: mix(@background, #888, 65%);
|
||||
color: mix(@foreground, #888, 50%);
|
||||
transition: opacity .3s ease;
|
||||
opacity: .8;
|
||||
color: @foreground;
|
||||
vertical-align: middle;
|
||||
|
||||
&:hover {
|
||||
opacity: 1;
|
||||
color: @foreground;
|
||||
}
|
||||
|
||||
&.close {
|
||||
background: @accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
//menus
|
||||
.toolbar {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
background: linear-gradient(to right, @background, mix(@background, #888, 90%));
|
||||
color: @foreground;
|
||||
line-height: 30px;
|
||||
list-style-type: none;
|
||||
z-index: 99;
|
||||
box-shadow: inset 3px 3px 16px rgba(0, 0, 0, .1);
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
|
|
@ -76,6 +133,7 @@
|
|||
|
||||
}
|
||||
|
||||
//status bar
|
||||
.bottom-bar {
|
||||
margin: 0;
|
||||
padding: 2px 5px;
|
||||
|
|
@ -96,6 +154,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
//app-wide scrollbar
|
||||
::-webkit-scrollbar {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
|
|
|
|||
|
|
@ -85,6 +85,14 @@ require([
|
|||
frame.close();
|
||||
});
|
||||
|
||||
command.on("app:minimize", function() {
|
||||
frame.minimize();
|
||||
});
|
||||
|
||||
command.on("app:maximize", function() {
|
||||
frame.isMaximized() ? frame.restore() : frame.maximize();
|
||||
})
|
||||
|
||||
//It's nice to be able to launch the debugger from a command stroke
|
||||
command.on("app:debug", function() {
|
||||
debugger;
|
||||
|
|
|
|||
10
main.html
10
main.html
|
|
@ -7,7 +7,15 @@
|
|||
</head>
|
||||
<body>
|
||||
|
||||
<ul class="toolbar"></ul>
|
||||
<div class="titlebar">
|
||||
<b class="app-name">Caret</b>
|
||||
<ul class="toolbar"></ul>
|
||||
<div class="window-controls">
|
||||
<a command="app:minimize">-</a>
|
||||
<a command="app:maximize">+</a>
|
||||
<a class="close" command="app:exit">×</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="central">
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue