Skip to content

Commit

Permalink
improving design
Browse files Browse the repository at this point in the history
  • Loading branch information
@gpoitch
gpoitch committed Oct 1, 2014
1 parent 244b7b5 commit 89e7be1
Show file tree
Hide file tree
Showing 8 changed files with 100 additions and 84 deletions.
92 changes: 38 additions & 54 deletions demo/demo.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
4 changes: 4 additions & 0 deletions demo/demo.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down
36 changes: 17 additions & 19 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,27 +5,23 @@
<title>ContentKit Editor</title>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=0">

<!-- Include ContentKit Editor CSS -->
<!-- Include ContentKit-Editor CSS -->
<link href="../dist/content-kit-editor.css" rel="stylesheet">

<!-- Include fancy fonts (optional) -->
<link href="http://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic|Merriweather+Sans:800" rel="stylesheet">

<!-- CSS just for the demo page -->
<link href="demo.css" rel="stylesheet">
</head>
<body>

<header>
<h1 class="demo-title">ContentKit Editor</h1>
<div class="mode-buttons">
<button onclick="ContentKitDemo.toggleCodePane()">Toggle Data</button>
</div>
</header>

<div class="editor-pane">

<!-- This is the element we will target for the Editor -->
<article class="editor" data-placeholder="Write your story here...">
<p>
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 <b>bold</b> and <i>italic</i>, or create a <a href="https://github.com/ContentKit">link</a>.</p>
<!-- This is the element we will target for the `Editor` -->
<article class="editor">
<h2>ContentKit Editor</h2>
<p>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 <b>bold</b> and <i>italic</i>, or create a <a href="https://github.com/ContentKit">link</a>.</p>
<h2>Create headings by pressing "H1" on the toolbar</h2>
<h3>Pressing "H2" will create a subheading, like this one.</h3>
<blockquote>Create block quotes by selecting any text and pressing the "quote" button. Press it again to toggle back to a standard paragraph.</blockquote>
Expand All @@ -34,13 +30,12 @@ <h3>Pressing "H2" will create a subheading, like this one.</h3>

<h3>Tips &amp; Tricks:</h3>
<ul>
<li>Pressing <i>enter</i> creates a new paragraph</li>
<li>To create a soft line break, hold <i>shift</i> while pressing <i>enter</i></li>
<li>Close the formatting toolbar by clicking anywhere, or press ESC</li>
<li>Clicking an active format button, will remove that format</li>
<li>Close the formatting toolbar by clicking anywhere, or press <b>ESC</b></li>
<li>Make the toolbar sticky by pressing <b>F5</b></li>
<li>Double click a word to select it</li>
<li>You only have to select a portion of a paragraph if you want to change it to a heading, subheading, or quote</li>
<li>Press <i>enter</i> twice to exit a list</li>
<li>To create a soft line break, press <b>shift</b> + <b>enter</b></li>
<li>Press <b>enter</b> twice to exit a list</li>
</ul>

<h3>Keyboard shortcuts:</h3>
Expand All @@ -57,21 +52,24 @@ <h3>Keyboard shortcuts:</h3>
<p>Enjoy focusing on your content and not worrying about formatting!</p>
</article>

<div class="demo-buttons">
<a id="settings-btn"><i class="icon-settings"></i></a>
</div>

</div>

<div class="code-panes" id="code-panes">
<div class="code-pane">
<label>ContentKit JSON</label>
<code id="code-json"></code>
</div>
<div class="code-pane">
<label>HTML</label>
<code id="code-html"></code>
</div>
</div>

<!-- Include ContentKit JS -->
<script src="../dist/content-kit-editor.js"></script>

<!-- Initialize a new Editor -->
<script>var editor = new ContentKit.Editor('.editor');</script>

Expand Down
9 changes: 9 additions & 0 deletions src/css/animations.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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; }
}
11 changes: 9 additions & 2 deletions src/css/editor.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@
@import 'variables.less';

.ck-editor {
font-family: Georgia, serif;
font-family: 'Lora', Georgia, serif;
margin: 1em 0;
color: #454545;
/*
Expand All @@ -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;
Expand All @@ -40,4 +47,4 @@
.ck-editor div,
.ck-editor iframe {
max-width: 100%;
}
}
22 changes: 14 additions & 8 deletions src/css/toolbar.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
6 changes: 5 additions & 1 deletion src/js/content-kit-editor/views/text-format-toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
});
Expand Down
4 changes: 4 additions & 0 deletions src/js/content-kit-editor/views/toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,10 @@ Toolbar.prototype.setSticky = function(sticky) {
}
};

Toolbar.prototype.toggleSticky = function() {
this.setSticky(!this.sticky);
};

Toolbar.Direction = ToolbarDirection;

export default Toolbar;

0 comments on commit 89e7be1

Please sign in to comment.