diff --git a/demo/demo.css b/demo/demo.css index 80c8e25ff..c75bed13a 100644 --- a/demo/demo.css +++ b/demo/demo.css @@ -5,7 +5,7 @@ } body { - font-family: "Helvetica Neue", Helvetica, sans-serif; + font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #454545; margin: 0; padding: 0; @@ -19,75 +19,37 @@ body { .editor-pane { max-width: 50em; margin: 0 auto; - padding: 5.5em 1.45em 3em; + padding: 3em 1.45em; width: 100%; + position: relative; } .code-pane-open .editor-pane { width: 50%; margin: 0; } -header { +.demo-buttons { position: fixed; - left:0; right:0; top: 0; - z-index: 2; - height: 3.125em; - border-bottom: 1px solid #e0e0e0; - box-shadow: 0 1px 2px rgba(0,0,0,.03); - background: rgba(252,252,252,0.92); - background: linear-gradient(to bottom, rgba(252,252,252,0.92) 0%,rgba(252,252,252,0.97) 100%); -} - -.demo-title { - text-align: center; - font-size: 1.4em; - font-weight: 500; - letter-spacing: -0.015em; - padding: 0; - margin: 0 auto; - width: 50%; - line-height: 2.2em; -} - -.mode-buttons { - position: absolute; top: 0; - right: 0.5em; - line-height: 2.9em; + right: 0; + z-index: 3; } -.mode-buttons button { - background-color: transparent; - border: 1px solid #52a3ff; - outline: none; - color: #52a3ff; - border-radius: 5px; - padding: 0.6em 1em; - margin: 0; - min-width: 8.5em; - font-size: 0.75em; - line-height: 1.1em; +.demo-buttons a { + display: block; cursor: pointer; - transition: background-color 0.15s; -} -.mode-buttons button:hover { - background-color: rgba(0,122,255,0.15); -} -.mode-buttons button:active { - background-color: #52a3ff; - color: #FFF; - transition: none; -} -.mode-buttons button:focus { - outline: none; + font-size: 24px; + padding: 9px 12px; + color: #2b303b; + text-shadow: 0 1px 2px rgba(252,252,252,0.7), 0 -1px 2px rgba(252,252,252,0.7), 1px 0 2px rgba(252,252,252,0.7), -1px 0 2px rgba(252,252,252,0.7); } - .code-panes { position: fixed; - top: 3.125em; + top: 0; bottom: 0; right: -50%; width: 0; + z-index: 2; } .code-pane-open .code-panes { right: 0; @@ -136,11 +98,33 @@ header { border-bottom: 1px solid rgba(192,197,206,0.25); } +@font-face { + font-family: 'demo-icons'; + src: url(data:application/x-font-ttf;charset=utf-8;base64,AAEAAAALAIAAAwAwT1MvMggi/LYAAAC8AAAAYGNtYXAaVcxXAAABHAAAAExnYXNwAAAAEAAAAWgAAAAIZ2x5ZmOrGnQAAAFwAAABxGhlYWQBePfEAAADNAAAADZoaGVhA5kB5gAAA2wAAAAkaG10eAMAAAAAAAOQAAAAFGxvY2EAKAD2AAADpAAAAAxtYXhwAAgAhgAAA7AAAAAgbmFtZRP8/tEAAAPQAAABYHBvc3QAAwAAAAAFMAAAACAAAwIAAZAABQAAAUwBZgAAAEcBTAFmAAAA9QAZAIQAAAAAAAAAAAAAAAAAAAABEAAAAAAAAAAAAAAAAAAAAABAAADmAAHg/+D/4AHgACAAAAABAAAAAAAAAAAAAAAgAAAAAAACAAAAAwAAABQAAwABAAAAFAAEADgAAAAKAAgAAgACAAEAIOYA//3//wAAAAAAIOYA//3//wAB/+MaBAADAAEAAAAAAAAAAAAAAAEAAf//AA8AAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAEAAAAAAAAAAAACAAA3OQEAAAAAAgAAAAABtwG3AHIAgwAANzU0NzYzNzY3JicmNTQ3Njc2NxYfATY3Njc2FzcWFxYVFxYXNzY3FhcWFxYVFAcGBwYHFh8BMhcWHQEUBwYnBwYHFhcWFRQHBgcGByYvAQYHBgcGJwcmJyYvASYnBwYHJicmJyY1NDc2NzY3Ji8BIicmNTcUFxYXNjc2NTQnJgcmBwYVAAIDAzUEBwsUAgIIFBUGBAQnDQ0FAwIJPwQDAwgODCkCBQMEJQoCAgUKCgUHBDUDAwICAwM1BQYKFAMCCBUUBgQEJw0NBQQCCD8EAwMBCA4LKQIFBAMkCwICBQoKBQcENQMDApIWFR4fFRYWFR8eFRa8PwQCBAkMDhAYAgUBBQkWEwEBAh8HBCgNCQEBAQIDAzUEByABAQECIw0DAwUCBwwOBg8NCQQCBD8EAgUBCQ8LDRsCBQIEChUTAQEBIAgDKA0JAQEBAQQDNQQHIAEBAQIhDwQCBQIHDA4GDw0JBAIEHh0WFQEBFRYdIBQXAQEXFCAAAAABAAAAAQAA+Wpa1V8PPPUACwIAAAAAANBR24gAAAAA0FHbiAAAAAABtwG3AAAACAACAAAAAAAAAAEAAAHg/+AAAAIAAAAAAAG3AAEAAAAAAAAAAAAAAAAAAAAFAAAAAAAAAAAAAAAAAQAAAAIAAAAAAAAAAAoAFAAeAOIAAQAAAAUAhAACAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAA4ArgABAAAAAAABABQAAAABAAAAAAACAA4AXAABAAAAAAADABQAKgABAAAAAAAEABQAagABAAAAAAAFABYAFAABAAAAAAAGAAoAPgABAAAAAAAKADQAfgADAAEECQABABQAAAADAAEECQACAA4AXAADAAEECQADABQAKgADAAEECQAEABQAagADAAEECQAFABYAFAADAAEECQAGABQASAADAAEECQAKADQAfgBkAGUAbQBvAC0AaQBjAG8AbgBzAFYAZQByAHMAaQBvAG4AIAAxAC4AMABkAGUAbQBvAC0AaQBjAG8AbgBzZGVtby1pY29ucwBkAGUAbQBvAC0AaQBjAG8AbgBzAFIAZQBnAHUAbABhAHIAZABlAG0AbwAtAGkAYwBvAG4AcwBGAG8AbgB0ACAAZwBlAG4AZQByAGEAdABlAGQAIABiAHkAIABJAGMAbwBNAG8AbwBuAC4AAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==) format('truetype'), + url(data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAWcAAsAAAAABVAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABPUy8yAAABCAAAAGAAAABgCCL8tmNtYXAAAAFoAAAATAAAAEwaVcxXZ2FzcAAAAbQAAAAIAAAACAAAABBnbHlmAAABvAAAAcQAAAHEY6sadGhlYWQAAAOAAAAANgAAADYBePfEaGhlYQAAA7gAAAAkAAAAJAOZAeZobXR4AAAD3AAAABQAAAAUAwAAAGxvY2EAAAPwAAAADAAAAAwAKAD2bWF4cAAAA/wAAAAgAAAAIAAIAIZuYW1lAAAEHAAAAWAAAAFgE/z+0XBvc3QAAAV8AAAAIAAAACAAAwAAAAMCAAGQAAUAAAFMAWYAAABHAUwBZgAAAPUAGQCEAAAAAAAAAAAAAAAAAAAAARAAAAAAAAAAAAAAAAAAAAAAQAAA5gAB4P/g/+AB4AAgAAAAAQAAAAAAAAAAAAAAIAAAAAAAAgAAAAMAAAAUAAMAAQAAABQABAA4AAAACgAIAAIAAgABACDmAP/9//8AAAAAACDmAP/9//8AAf/jGgQAAwABAAAAAAAAAAAAAAABAAH//wAPAAEAAAAAAAAAAAACAAA3OQEAAAAAAQAAAAAAAAAAAAIAADc5AQAAAAABAAAAAAAAAAAAAgAANzkBAAAAAAIAAAAAAbcBtwByAIMAADc1NDc2Mzc2NyYnJjU0NzY3NjcWHwE2NzY3Nhc3FhcWFRcWFzc2NxYXFhcWFRQHBgcGBxYfATIXFh0BFAcGJwcGBxYXFhUUBwYHBgcmLwEGBwYHBicHJicmLwEmJwcGByYnJicmNTQ3Njc2NyYvASInJjU3FBcWFzY3NjU0JyYHJgcGFQACAwM1BAcLFAICCBQVBgQEJw0NBQMCCT8EAwMIDgwpAgUDBCUKAgIFCgoFBwQ1AwMCAgMDNQUGChQDAggVFAYEBCcNDQUEAgg/BAMDAQgOCykCBQQDJAsCAgUKCgUHBDUDAwKSFhUeHxUWFhUfHhUWvD8EAgQJDA4QGAIFAQUJFhMBAQIfBwQoDQkBAQECAwM1BAcgAQEBAiMNAwMFAgcMDgYPDQkEAgQ/BAIFAQkPCw0bAgUCBAoVEwEBASAIAygNCQEBAQEEAzUEByABAQECIQ8EAgUCBwwOBg8NCQQCBB4dFhUBARUWHSAUFwEBFxQgAAAAAQAAAAEAAPlqWtVfDzz1AAsCAAAAAADQUduIAAAAANBR24gAAAAAAbcBtwAAAAgAAgAAAAAAAAABAAAB4P/gAAACAAAAAAABtwABAAAAAAAAAAAAAAAAAAAABQAAAAAAAAAAAAAAAAEAAAACAAAAAAAAAAAKABQAHgDiAAEAAAAFAIQAAgAAAAAAAgAAAAAAAAAAAAAAAAAAAAAAAAAOAK4AAQAAAAAAAQAUAAAAAQAAAAAAAgAOAFwAAQAAAAAAAwAUACoAAQAAAAAABAAUAGoAAQAAAAAABQAWABQAAQAAAAAABgAKAD4AAQAAAAAACgA0AH4AAwABBAkAAQAUAAAAAwABBAkAAgAOAFwAAwABBAkAAwAUACoAAwABBAkABAAUAGoAAwABBAkABQAWABQAAwABBAkABgAUAEgAAwABBAkACgA0AH4AZABlAG0AbwAtAGkAYwBvAG4AcwBWAGUAcgBzAGkAbwBuACAAMQAuADAAZABlAG0AbwAtAGkAYwBvAG4Ac2RlbW8taWNvbnMAZABlAG0AbwAtAGkAYwBvAG4AcwBSAGUAZwB1AGwAYQByAGQAZQBtAG8ALQBpAGMAbwBuAHMARgBvAG4AdAAgAGcAZQBuAGUAcgBhAHQAZQBkACAAYgB5ACAASQBjAG8ATQBvAG8AbgAuAAMAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=) format('woff'); + font-weight: normal; + font-style: normal; +} +.icon-settings { + font-family: 'demo-icons'; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + line-height: 1; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} +.icon-settings:before { + content: "\e600"; +} + .json-key { - color: #b48ead; + color: #a8b389; } .json-number { - color: #8fa1b3; + color: #879db3; } .json-string { color: #c0c5ce; diff --git a/demo/demo.js b/demo/demo.js index 453b15538..b53f77fe8 100644 --- a/demo/demo.js +++ b/demo/demo.js @@ -98,6 +98,10 @@ if (window.editor) { editor.on('update', function(data) { ContentKitDemo.syncCodePane(this); }); + var settingsBtn = document.getElementById('settings-btn'); + settingsBtn.addEventListener('click', function() { + ContentKitDemo.toggleCodePane(); + }); } if (location.hash === '#code') { ContentKitDemo.openCodePane(); diff --git a/demo/index.html b/demo/index.html index 8d2da4c3a..4a19555f9 100644 --- a/demo/index.html +++ b/demo/index.html @@ -5,27 +5,23 @@ ContentKit Editor - + + + + -
-

ContentKit Editor

-
- -
-
-
- -
-

- A modern, minimalist text editor allowing you to write in a distraction free environment. Simply select any text you would like to format and a toolbar will appear where you can toggle options such as bold and italic, or create a link.

+ +
+

ContentKit Editor

+

A modern, minimalist text editor allowing you to write in a distraction free environment. Simply select any text you would like to format and a toolbar will appear where you can toggle options such as bold and italic, or create a link.

Create headings by pressing "H1" on the toolbar

Pressing "H2" will create a subheading, like this one.

Create block quotes by selecting any text and pressing the "quote" button. Press it again to toggle back to a standard paragraph.
@@ -34,13 +30,12 @@

Pressing "H2" will create a subheading, like this one.

Tips & Tricks:

    -
  • Pressing enter creates a new paragraph
    • -
  • To create a soft line break, hold shift while pressing enter
    • -
  • Close the formatting toolbar by clicking anywhere, or press ESC
    • -
  • Clicking an active format button, will remove that format
    • +
  • Close the formatting toolbar by clicking anywhere, or press ESC
    • +
  • Make the toolbar sticky by pressing F5
  • Double click a word to select it
  • You only have to select a portion of a paragraph if you want to change it to a heading, subheading, or quote
    • -
  • Press enter twice to exit a list
    • +
  • To create a soft line break, press shift + enter
    • +
  • Press enter twice to exit a list

Keyboard shortcuts:

@@ -57,21 +52,24 @@

Keyboard shortcuts:

Enjoy focusing on your content and not worrying about formatting!

+
+ +
+
-
-
+ diff --git a/src/css/animations.less b/src/css/animations.less index 273e33ec8..8668d000d 100644 --- a/src/css/animations.less +++ b/src/css/animations.less @@ -66,3 +66,12 @@ 50% { opacity: 1; transform: scale(1.05) translateX(4px); } 100% { } } + +@-webkit-keyframes slide-down { + 0% { -webkit-transform: translateY(-100%); } + 100% { -webkit-transform: none; } +} +@keyframes slide-down { + 0% { transform: translateY(-100%); } + 100% { transform: none; } +} diff --git a/src/css/editor.less b/src/css/editor.less index 37c39aa17..8eac98b94 100644 --- a/src/css/editor.less +++ b/src/css/editor.less @@ -5,7 +5,7 @@ @import 'variables.less'; .ck-editor { - font-family: Georgia, serif; + font-family: 'Lora', Georgia, serif; margin: 1em 0; color: #454545; /* @@ -26,6 +26,13 @@ .ck-editor a { color: @themeColorText; } +.ck-editor { + h1, h2, h3, h4, h5, h6 { + font-family: 'Merriweather Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif; + font-weight: 800; + letter-spacing: -0.02em; + } +} .ck-editor blockquote { border-left: 4px solid @themeColorText; margin: 1em 0 1em -1.2em; @@ -40,4 +47,4 @@ .ck-editor div, .ck-editor iframe { max-width: 100%; -} \ No newline at end of file +} diff --git a/src/css/toolbar.less b/src/css/toolbar.less index 73edd19ba..a10b3300f 100644 --- a/src/css/toolbar.less +++ b/src/css/toolbar.less @@ -6,11 +6,6 @@ text-align: center; position: absolute; 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%); - background: -o-linear-gradient(top, rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%); - background: -ms-linear-gradient(top, rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%); background: linear-gradient(to bottom, rgba(74,74,74,0.97) 0%,rgba(43,43,43,1) 100%); box-shadow: 0 1px 3px -1px rgba(0,0,0,0.8), inset 0 2px 0 rgba(255,255,255,0.12), inset 1px 1px 0 #282828, inset -1px -1px 0 #282828; border-radius: 3px; @@ -59,19 +54,30 @@ .ck-toolbar.sticky { position: fixed; - top: 3.125em; + top: 0; left: 0; right: 0; transition: none; border-radius: 0; margin: 0; + border-bottom: 1px solid #e0e0e0; + box-shadow: 0 1px 2px rgba(0,0,0,.03); + background: linear-gradient(to bottom, rgba(252,252,252,0.92) 0%,rgba(252,252,252,0.97) 100%); box-shadow: none; - -webkit-animation: none; - animation: none; + -webkit-animation: slide-down 0.25s; + animation: slide-down 0.25s; } .ck-toolbar.sticky:after { content: none; } +.sticky .ck-toolbar-btn { + color: #454545; + text-shadow: none; +} +.sticky .ck-toolbar-btn:hover, +.sticky .ck-toolbar-btn:active { + background-color: #eee; +} .ck-toolbar-buttons { border-radius: 5px; diff --git a/src/js/content-kit-editor/views/text-format-toolbar.js b/src/js/content-kit-editor/views/text-format-toolbar.js index 7d95521f2..05afa9d2c 100644 --- a/src/js/content-kit-editor/views/text-format-toolbar.js +++ b/src/js/content-kit-editor/views/text-format-toolbar.js @@ -34,7 +34,11 @@ function TextFormatToolbar(options) { }); document.addEventListener('keyup', function(e) { - if (e.keyCode === Keycodes.ESC && !toolbar.sticky) { + var key = e.keyCode; + if (key === 116) { //F5 + toolbar.toggleSticky(); + handleTextSelection(toolbar); + } else if (!toolbar.sticky && key === Keycodes.ESC) { toolbar.hide(); } }); diff --git a/src/js/content-kit-editor/views/toolbar.js b/src/js/content-kit-editor/views/toolbar.js index 35d639d2c..e350da190 100644 --- a/src/js/content-kit-editor/views/toolbar.js +++ b/src/js/content-kit-editor/views/toolbar.js @@ -137,6 +137,10 @@ Toolbar.prototype.setSticky = function(sticky) { } }; +Toolbar.prototype.toggleSticky = function() { + this.setSticky(!this.sticky); +}; + Toolbar.Direction = ToolbarDirection; export default Toolbar;