Reviewed by Adam Roben.
authorweinig@apple.com <weinig@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Nov 2007 20:28:25 +0000 (20:28 +0000)
committerweinig@apple.com <weinig@apple.com@268f45cc-cd09-0410-ab3c-d52691b4dbfc>
Thu, 1 Nov 2007 20:28:25 +0000 (20:28 +0000)
        - Don't show the close button on the notes unless hovering over the note.
        - Do transformation and fade when closing a note using the new transition properties.

        * misc/DatabaseExample.html:

git-svn-id: https://svn.webkit.org/repository/webkit/trunk@27357 268f45cc-cd09-0410-ab3c-d52691b4dbfc

WebKitSite/ChangeLog
WebKitSite/misc/DatabaseExample.html

index 82b9c5e..e4f3ce0 100644 (file)
@@ -1,3 +1,12 @@
+2007-11-01  Sam Weinig  <sam@webkit.org>
+
+        Reviewed by Adam Roben.
+
+        - Don't show the close button on the notes unless hovering over the note.
+        - Do transformation and fade when closing a note using the new transition properties.
+
+        * misc/DatabaseExample.html:
+
 2007-10-29  Mark Rowe  <mrowe@apple.com>
 
         Upgrade WordPress.
index bd2823e..873ce49 100644 (file)
@@ -16,7 +16,14 @@ body {
     -webkit-box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.5);
 }
 
+/* FIXME: this empty rule works around a bug in our css handling */
+.note:hover { }
+.note:hover .closebutton {
+    display: block;
+} 
+
 .closebutton {
+    display: none;
     background-image: url(deleteButton.png);
     height: 30px;
     position: absolute;
@@ -72,7 +79,7 @@ function Note()
 
     var close = document.createElement('div');
     close.className = 'closebutton';
-    close.addEventListener('click', function() { return self.close() }, false);
+    close.addEventListener('click', function(event) { return self.close(event) }, false);
     note.appendChild(close);
 
     var edit = document.createElement('div');
@@ -163,12 +170,21 @@ Note.prototype = {
         this.note.style.zIndex = x;
     },
 
-    close: function()
+    close: function(event)
     {
         this.cancelPendingSave();
 
         db.executeSql("DELETE FROM WebKitStickyNotes WHERE id = ?", [this.id], function(result) {});
-        document.body.removeChild(this.note);
+
+        var duration = event.shiftKey ? 2 : .5;
+        this.note.style.webkitTransition = '-webkit-transform ' + duration + 's ease-in, opacity ' + duration + 's ease-in';
+        this.note.offsetTop; // Force style recalc
+        this.note.style.webkitTransformOrigin = "0 0";
+        this.note.style.webkitTransform = 'skew(30deg, 0deg) scale(0)';
+        this.note.style.opacity = '0';
+
+        var self = this;
+        setTimeout(function() { document.body.removeChild(self.note) }, duration * 1000);
     },
 
     saveSoon: function()