From 599ac9f1db0d4eeddd38b4e83a28338c7a85c65e Mon Sep 17 00:00:00 2001 From: Thomas Wilburn Date: Thu, 3 Apr 2014 15:06:30 -0700 Subject: [PATCH] Enable app frame with inline menu and window controls. See #176 --- background.js | 3 ++- css/base.less | 5 ++-- css/seed.less | 4 ++-- css/ui.less | 63 +++++++++++++++++++++++++++++++++++++++++++++++++-- js/main.js | 8 +++++++ main.html | 10 +++++++- 6 files changed, 84 insertions(+), 9 deletions(-) diff --git a/background.js b/background.js index 96e6a66..a3f9a50 100644 --- a/background.js +++ b/background.js @@ -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; diff --git a/css/base.less b/css/base.less index 6291955..8ed1c02 100644 --- a/css/base.less +++ b/css/base.less @@ -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 { diff --git a/css/seed.less b/css/seed.less index 082f78c..e39043e 100644 --- a/css/seed.less +++ b/css/seed.less @@ -1,6 +1,6 @@ @accent: #808; -@foreground: black; -@background: white; +@foreground: #111; +@background: #F7F7F7; @faded: #AAA; @import "base"; diff --git a/css/ui.less b/css/ui.less index f54f19c..9f13463 100644 --- a/css/ui.less +++ b/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; diff --git a/js/main.js b/js/main.js index 2e778d8..c49417b 100644 --- a/js/main.js +++ b/js/main.js @@ -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; diff --git a/main.html b/main.html index 435eca5..8acfe6f 100644 --- a/main.html +++ b/main.html @@ -7,7 +7,15 @@ - +
+ Caret + +
+ - + + + × +
+