z-index management. better messages UI

demo/demo.css

@@ -30,7 +30,7 @@ body {
 header {
   position: fixed;
   left:0; right:0; top: 0;
-  z-index: 10;
+  z-index: 2;
   height: 3.125em;
   border-bottom: 1px solid #e0e0e0;
   box-shadow: 0 1px 2px rgba(0,0,0,.03);

demo/index.html

@@ -79,6 +79,10 @@ <h3>Keyboard shortcuts:</h3>
     var editor = new ContentKit.Editor('.editor', {
       imageServiceUrl: 'http://localhost:5000/upload',
       embedServiceUrl: 'http://localhost:5000/embed'
+      //embedCommands: [
+      //  new ImageCommand({  serviceUrl: 'http://localhost:5000/images' }),
+      //  new OEmbedCommand({ serviceUrl: 'http://localhost:5000/embed'  })
+      //]
     });
   </script>
 

dist/content-kit-editor.css

@@ -325,20 +325,41 @@
 }
 .ck-message {
   position: fixed;
-  top: 0.45em;
-  left: 50%;
-  z-index: 10;
-  padding: 0.5em 1em;
-  background-color: #a4d4ff;
-  border: 1px solid #0071d7;
-  color: #333;
-  text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.5);
-  border-radius: 2px;
-  box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.1);
-  -webkit-transform: translateX(-50%);
-  transform: translateX(-50%);
-  -webkit-animation: fadeIn 0.3s;
-  animation: fadeIn 0.3s;
+  left: 0;
+  right: 0;
+  height: 3.125em;
+  line-height: 3.125em;
+  top: -3.125em;
+  z-index: 2;
+  padding: 0 1em;
+  font-weight: 500;
+  text-align: center;
+  background-color: rgba(103, 182, 255, 0.98);
+  border-bottom: 1px solid #4daaff;
+  -webkit-animation: messageShowHide 3.2s;
+  animation: messageShowHide 3.2s;
+}
+@-webkit-keyframes messageShowHide {
+  8% {
+    top: 0;
+  }
+  92% {
+    top: 0;
+  }
+  100% {
+    top: -3.125em;
+  }
+}
+@keyframes messageShowHide {
+  8% {
+    top: 0;
+  }
+  92% {
+    top: 0;
+  }
+  100% {
+    top: -3.125em;
+  }
 }
 /**
  * Icons

dist/content-kit-editor.js

@@ -3,7 +3,7 @@
  * @version  0.1.0
  * @author   Garth Poitras <garth22@gmail.com> (http://garthpoitras.com/)
  * @license  MIT
- * Last modified: Sep 4, 2014
+ * Last modified: Sep 5, 2014
  */
 
 (function(exports, document) {
@@ -1712,9 +1712,9 @@ define("content-kit-editor/commands/oembed",
           if (error) {
             var errorMsg = error;
             if (error.target && error.target.status === 0) {
-              errorMsg = 'Could not connect to embed service';
+              errorMsg = 'Error: could not connect to embed service.';
             } else if (typeof error !== 'string') {
-              errorMsg = 'Embed error';
+              errorMsg = 'Error: embeds are broken :/';
             }
             new Message().show(errorMsg);
             embedIntent.show();
@@ -2687,7 +2687,7 @@ define("content-kit-editor/views/message",
       Message._super.prototype.show.call(messageView);
       setTimeout(function() {
         messageView.hide();
-      }, 3000);
+      }, 3200);
     };
 
     __exports__["default"] = Message;

src/css/message.less

@@ -1,17 +1,29 @@
+@messageHeight : 3.125em;
+
 .ck-message {
   position: fixed;
-  top: 0.45em;
-  left: 50%;
-  z-index: 10;
-  padding: 0.5em 1em;
-  background-color: lighten(@themeColor, 20%);
-  border: 1px solid darken(@themeColor, 20%);
-  color: #333;
-  text-shadow: 0px 1px 0px rgba(255,255,255,0.5);
-  border-radius: 2px;
-  box-shadow: 0px 2px 8px 3px rgba(0, 0, 0, 0.1);
-  -webkit-transform: translateX(-50%);
-          transform: translateX(-50%);
-  -webkit-animation: fadeIn 0.3s;
-          animation: fadeIn 0.3s;
+  left: 0;
+  right: 0;
+  height: @messageHeight;
+  line-height: @messageHeight;
+  top: -@messageHeight;
+  z-index: @z-index--message;
+  padding: 0 1em;
+  font-weight: 500;
+  text-align: center;
+  background-color: fade(lighten(@themeColor, 8%), 98%);
+  border-bottom: 1px solid lighten(@themeColor, 3%);
+  -webkit-animation: messageShowHide 3.2s;
+          animation: messageShowHide 3.2s;
+}
+
+@-webkit-keyframes messageShowHide {
+  8% { top: 0; }
+  92% { top: 0;  }
+  100% { top: -@messageHeight;  }
+}
+@keyframes messageShowHide {
+  8% { top: 0; }
+  92% { top: 0;  }
+  100% { top: -@messageHeight;  }
 }

src/css/toolbar.less

@@ -5,7 +5,7 @@
 .ck-toolbar {
   text-align: center;
   position: absolute;
-  z-index: 1;
+  z-index: @z-index--toolbar;
   background: -moz-linear-gradient(top,  rgba(74,74,74,0.97) 0%, rgba(43,43,43,1) 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(74,74,74,0.97)), color-stop(100%,rgba(43,43,43,1)));
   background: -webkit-linear-gradient(top,  rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%);
@@ -123,7 +123,7 @@
 
 .ck-editor-hilite {
   position: absolute;
-  z-index: -1;
+  z-index: @z-index--hilite;
   background-color: fadeout(@themeColor, 95%);
   border-bottom: 2px dotted @themeColor;
 }

src/css/variables.less

@@ -1,7 +1,13 @@
-// LESS Variables
 
+// Colors
 @themeColor     : rgb(62, 163, 255); //rgb(76, 217, 100);
 @themeColorText : darken(@themeColor, 10%);
 
+// Animation speed
 @elementMoveSpeed : 0.1s;
 @colorChangeSpeed : 0.1s;
+
+// z-indexes
+@z-index--hilite: -1; // behind text
+@z-index--toolbar: 1;
+@z-index--message: 2;

src/js/content-kit-editor/commands/oembed.js

@@ -44,9 +44,9 @@ OEmbedCommand.prototype.exec = function(url) {
       if (error) {
         var errorMsg = error;
         if (error.target && error.target.status === 0) {
-          errorMsg = 'Could not connect to embed service';
+          errorMsg = 'Error: could not connect to embed service.';
         } else if (typeof error !== 'string') {
-          errorMsg = 'Embed error';
+          errorMsg = 'Error: embeds are broken :/';
         }
         new Message().show(errorMsg);
         embedIntent.show();

src/js/content-kit-editor/views/message.js

@@ -14,7 +14,7 @@ Message.prototype.show = function(message) {
   Message._super.prototype.show.call(messageView);
   setTimeout(function() {
     messageView.hide();
-  }, 3000);
+  }, 3200);
 };
 
 export default Message;