From 817166c7440be730c1b8160e4ac097491ba962ad Mon Sep 17 00:00:00 2001 From: gdub22 Date: Fri, 5 Sep 2014 16:59:11 -0400 Subject: [PATCH] z-index management. better messages UI --- demo/demo.css | 2 +- demo/index.html | 4 ++ dist/content-kit-editor.css | 49 ++++++++++++++------ dist/content-kit-editor.js | 8 ++-- src/css/message.less | 40 ++++++++++------ src/css/toolbar.less | 4 +- src/css/variables.less | 8 +++- src/js/content-kit-editor/commands/oembed.js | 4 +- src/js/content-kit-editor/views/message.js | 2 +- 9 files changed, 82 insertions(+), 39 deletions(-) diff --git a/demo/demo.css b/demo/demo.css index 1ae519def..1f3432765 100644 --- a/demo/demo.css +++ b/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); diff --git a/demo/index.html b/demo/index.html index 7b1b78b87..432332109 100644 --- a/demo/index.html +++ b/demo/index.html @@ -79,6 +79,10 @@

Keyboard shortcuts:

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' }) + //] }); diff --git a/dist/content-kit-editor.css b/dist/content-kit-editor.css index 6e8fdf32d..4d195959e 100755 --- a/dist/content-kit-editor.css +++ b/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 diff --git a/dist/content-kit-editor.js b/dist/content-kit-editor.js index 6381587af..28773baed 100755 --- a/dist/content-kit-editor.js +++ b/dist/content-kit-editor.js @@ -3,7 +3,7 @@ * @version 0.1.0 * @author Garth Poitras (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; diff --git a/src/css/message.less b/src/css/message.less index ee99251de..5a088baa0 100644 --- a/src/css/message.less +++ b/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; } } diff --git a/src/css/toolbar.less b/src/css/toolbar.less index 3a8f76e03..4d8d2499a 100644 --- a/src/css/toolbar.less +++ b/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; } diff --git a/src/css/variables.less b/src/css/variables.less index 90b38ac51..2d1b2f167 100644 --- a/src/css/variables.less +++ b/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; diff --git a/src/js/content-kit-editor/commands/oembed.js b/src/js/content-kit-editor/commands/oembed.js index 2107856f6..a5960e293 100644 --- a/src/js/content-kit-editor/commands/oembed.js +++ b/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(); diff --git a/src/js/content-kit-editor/views/message.js b/src/js/content-kit-editor/views/message.js index f3f4b4c3d..d3246910f 100644 --- a/src/js/content-kit-editor/views/message.js +++ b/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;