Permalink
Browse files

frameless window. Adding close button. Making win small

  • Loading branch information...
1 parent 2b413de commit 1d73ed6056d290ef4457b00cf38fe8c224c8c53c @ebidel ebidel committed Aug 23, 2012
Showing with 56 additions and 35 deletions.
  1. +36 −13 gdocs/css/main.css
  2. +5 −7 gdocs/js/app.js
  3. +7 −5 gdocs/js/background.js
  4. +1 −2 gdocs/js/gdocs.js
  5. +7 −8 gdocs/main.html
View
49 gdocs/css/main.css
@@ -1,6 +1,13 @@
+@font-face {
+ font-family: 'Droid Sans';
+ font-style: normal;
+ font-weight: 400;
+ src: local('Droid Sans'), local('DroidSans'), url(DroidSans.woff) format('woff');
+}
+
html, body {
- background: white;
margin: 0;
+ height: 100%;
}
body ::-webkit-scrollbar {
@@ -34,24 +41,26 @@ body ::-webkit-scrollbar-corner {
}
body {
- padding: 5px;
+ padding: 15px;
overflow: hidden;
- background: url(../img/google_drive_logo.jpg) no-repeat 95% 10%;
- background-size: 270px 215px;
+ background: url(../img/google_drive_logo.jpg) no-repeat 80% 20%,
+ -webkit-linear-gradient(bottom, #eee, rgba(255,255,255,0));
+ background-size: 270px 215px, 100%;
+ font-family: 'Droid Sans', sans-serif;
}
body.dropping > #main {
-webkit-filter: blur(2px);
}
.dropping #dropper {
- display: -webkit-flexbox;
+ display: -webkit-flex;
opacity: 1;
pointer-events: all;
}
ul {
- margin: 10px;
+ margin: 0;
height: 525px;
overflow: auto;
}
@@ -61,7 +70,7 @@ li {
border-radius: 3px;
padding: 5px;
margin-bottom: 3px;
- background-color: #eee;
+ background: -webkit-linear-gradient(right, #eee, rgba(255,255,255,0), #eee);
color: #666666;
}
@@ -73,19 +82,20 @@ li {
pointer-events: none;
opacity: 0;
background: rgba(255,255,255,0.5);
- padding: 10px;
position: absolute;
z-index: 100;
width: 100%;
height: 100%;
+ left: 0;
+ top: 0;
box-sizing: border-box;
- -webkit-flex-align: center;
- -webkit-flex-pack: center;
+ -webkit-align-items: center;
+ -webkit-justify-content: center;
-webkit-transition: opacity 0.1s ease-in-out;
}
.dropzone {
- padding: 75px 175px;
+ padding: 15px 50px;
border-radius: 10px;
border: 10px dashed #ccc;
}
@@ -97,12 +107,25 @@ li {
}
#main > nav {
- display: inline-block;
+ margin-bottom: 10px;
}
-#main > h2 {
+nav > h2 {
display: inline-block;
vertical-align: middle;
+ margin-right: 15px;
+}
+
+nav:hover #close-button {
+ opacity: 1;
+}
+
+#close-button {
+ float: right;
+ padding: 0 5px 2px 5px;
+ font-weight: bold;
+ opacity: 0;
+ -webkit-transition: all 0.3s ease-in-out;
}
.date {
View
12 gdocs/js/app.js
@@ -1,11 +1,5 @@
var gdocs = new GDocs();
-function log(msg) {
- var frag = document.createDocumentFragment();
- frag.textContent = msg;
- document.querySelector('#log').appendChild(frag);
-}
-
function upload(blob) {
gdocs.upload(blob, function() {
//...
@@ -19,6 +13,10 @@ var dnd = new DnDFileController('body', function(files) {
});
});
+document.querySelector('#close-button').addEventListener('click', function(e) {
+ self.close();
+});
+
function DocsController($scope, $http) {
$scope.docs = [];
@@ -44,7 +42,7 @@ function DocsController($scope, $http) {
xhr.open('GET', doc.icon, true);
xhr.responseType = 'blob';
xhr.onload = function(e) {
- doc.icon = window.webkitURL.createObjectURL(this.response);
+ doc.icon = window.URL.createObjectURL(this.response);
$scope.docs.push(doc);
View
12 gdocs/js/background.js
@@ -1,15 +1,17 @@
chrome.app.runtime.onLaunched.addListener(function(launchData) {
chrome.app.window.create('../main.html', {
- width: 800,
+ width: 500,
height: 600,
- minWidth: 800,
+ minWidth: 500,
minHeight: 600,
- left: 100,
- top: 100,
- type: 'shell'
+ frame: 'none'
});
});
chrome.runtime.onInstalled.addListener(function() {
console.log('installed');
});
+
+chrome.runtime.onSuspend.addListener(function() {
+ // Do some simple clean-up tasks.
+});
View
3 gdocs/js/gdocs.js
@@ -56,15 +56,14 @@ GDocs.prototype.auth = function(opt_callback) {
var self = this;
try {
chrome.experimental.identity.getAuthToken({interactive: false}, function(token) {
- //log(token);
//document.querySelector('#authorize-button').disabled = true;
if (token) {
self.accessToken = token;
opt_callback && opt_callback();
}
});
} catch(e) {
- log(e);
+ console.log(e);
}
};
View
15 gdocs/main.html
@@ -16,7 +16,7 @@
Author: Eric Bidelman (ericbidelman@chromium.org)
-->
-<html ng-app ng-csp>
+<html data-ng-app data-ng-csp>
<head>
<meta charset="utf-8" />
<title>Google Drive Uploader</title>
@@ -29,18 +29,17 @@
<div class="dropzone"><img src="img/upload.svg"></div>
</div>
-<section id="main" ng-controller="DocsController">
- <h2>Google Drive Uploader</h2>
+<section id="main" data-ng-controller="DocsController">
<nav>
+ <h2>Google Drive Uploader</h2>
<!--<button id="authorize-button" class="btn" onclick="auth()">Authorize</button>-->
- <button class="btn" ng-click="fetchDocs()">Refresh</button>
+ <button class="btn" data-ng-click="fetchDocs()">Refresh</button>
+ <button class="btn" id="close-button" title="Close">x</button>
<!--<input type="file" name="file">-->
</nav>
- <output id="log"></output>
-
<ul>
- <li ng-repeat="doc in docs">
+ <li data-ng-repeat="doc in docs">
<!-- crbug.com/120693. These anchors shouldn't need target="_blank".-->
<img src="{{doc.icon}}"> <a href="{{doc.alternateLink}}" target="_blank">{{doc.title}}</a> {{doc.size}}
<span class="date">{{doc.updatedDate}}</span>
@@ -53,6 +52,6 @@
<script src="js/resumableupload.js"></script>
<script src="js/gdocs.js"></script>
<script src="js/app.js"></script>
-<script src="js/angular-1.0.0rc7.min.js"></script>
+<script src="js/angular-1.0.1.min.js"></script>
</body>
</html>

0 comments on commit 1d73ed6

Please sign in to comment.