deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-06-19 22:25:23 +02:00
Code Issues Projects Releases Wiki Activity

css updated

Browse source
This commit is contained in:
khaydarov 2016-07-02 18:33:16 +03:00
parent 6b69d1f325
commit 56db847a11
4 changed files with 113 additions and 99 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
editor.css
View file

@ -166,12 +166,6 @@
.ce_redactor li{
margin: 5px 0;
}
.ce_redactor blockquote{
font-size: 1.3em;
line-height: 1.9em;
margin: 2.5em 162px !important;
padding: 2.5em 3.5em !important;
}
.ce_redactor code{
display: block;
font-family: 'monospace', 'monaco', 'consolas', 'courier';

12
example.html
View file

@ -20,11 +20,9 @@
font-size: 2em;
}
</style>
<<<<<<< HEAD
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
<link rel="stylesheet" href="plugins/ceditor-tool-quote/ceditor-tool-quote.css" />
=======
>>>>>>> master
<link rel="stylesheet" href="plugins/images/plugin.css" />
</head>
<body style="padding: 100px">
@ -150,7 +148,7 @@
{
quote : {
type : 'withPhoto',
text : 'git — распределенная система контроля версий файлов.<br> «Распределенная» значит, что каждый репозиторий содержит всю историю изменений, и из него можно развернуть полноценную рабочую копию проекта.',
text : '«Распределенная» значит, что каждый репозиторий содержит всю историю изменений, и из него можно развернуть полноценную рабочую копию проекта. Супервизор позволяет следить за состоянием приложений, останавливать, запускать и перезапускать их. Для начала нам нужно создать конфигурационный файл для вашей программы',
photo : '',
author : '',
}
@ -271,11 +269,5 @@
</script>
<script src="plugins/ceditor-tool-link.js"></script>
<<<<<<< HEAD
<script src="plugins/ceditor-tool-quote/ceditor-tool-quote.js"></script>
=======
<link rel="stylesheet" href="plugins/ceditor-tool-link.css" />
<script src="plugins/images/plugin.js"></script>
<link rel="stylesheet" href="plugins/images/plugin.css" />
>>>>>>> master

115
plugins/ceditor-tool-quote/ceditor-tool-quote.css
View file

@ -18,62 +18,143 @@
border-bottom-color: #f6d8da;
color: #cc7d74;
}
.clearfix_quote:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
/** Quote Styles */
.quoteStyle-withCaption--author:empty {
direction: rtl;
}
.quoteStyle-withCaption--author {
margin: 2.5em 100px !important;
margin-top: 25px;
text-align: right;
font-size: 17px;
font-size: 1.38em;
font-weight: bold;
color: #000;
line-height: 1.5em;
}
.quoteStyle-simple--text,
.quoteStyle-withCaption--blockquote,
.quoteStyle-withPhoto--quote {
font-size: 1.3em;
line-height: 1.9em;
}
.quoteStyle-simple--text,
.quoteStyle-withCaption--blockquote
{
margin: 2.5em 100px;
padding: 1.5em 2.0em !important;
background: #FBFBFB;
}
.quoteStyle-withCaption--blockquote:focus,
.quoteStyle-withCaption--author:focus {
outline: none;
}
.quoteStyle-simple--text:empty::before,
.quoteStyle-withCaption--blockquote:empty::before,
.quoteStyle-withPhoto--quote:empty::before
{
content : 'Введите цитату';
color: #818BA1;
opacity: 0.7;
transition: opacity 200ms ease;
}
.quoteStyle-withCaption--author:empty::before
{
content : 'Введите имя автора';
color: #A5ABBC;
opacity: 1;
transition: opacity 200ms ease;
}
.quoteStyle-withPhoto--author:empty::before {
content : 'Введите имя автора';
color: #000;
opacity: .8;
transition: opacity 200ms ease;
}
.quoteStyle-simple--text:focus::before,
.quoteStyle-withCaption--blockquote:focus::before,
.quoteStyle-withPhoto--quote:focus::before
{
opacity: .1;
}
.quoteStyle-withCaption--author:focus::before,
.quoteStyle-withPhoto--author:focus::before
{
opacity: .1;
}
/** Quote with photo */
.ce_redactor .quoteStyle-withPhoto--wrapper {
margin: 0px !important;
padding: 4.5em 6.5em !important;
margin: 0;
padding: 4.5em 8.5em !important;
}
.quoteStyle-withPhoto--photo {
width: 80px;
height: 80px;
border: 1px solid #8E8E8E;
text-align: center;
line-height: 80px;
border-radius: 50%;
float: left;
margin-right: 33px;
margin-right: 35px;
border: 3px dashed #D7E2EE;
}
.quoteStyle-withPhoto--photo:hover {
cursor: pointer;
background: #F0F3F6;
border: 3px dashed #D7E2EE;
}
.quoteStyle-withPhoto--photo:hover::after {
display: block;
}
.quoteStyle-withPhoto--photo .ce-icon-picture {
font-family: "codex_editor";
font-size: 1.5em;
color: #8990AA;
}
.quoteStyle-withPhoto--author {
font-size: 24px;
font-size: 1.56em;
font-weight: bold;
color: #000;
/*letter-spacing: 0px;*/
outline: none;
overflow: hidden;
margin-bottom: 6px;
}
.quoteStyle-withPhoto--job {
font-weight: regular;
font-size: 19px;
font-size: 1.38em;
color: #818BA1;
/*letter-spacing: 0px;*/
outline: none;
overflow: hidden;
}
.quoteStyle-withPhoto--job:empty::before {
content : 'Введите должность автора';
color: #A5ABBC;
opacity: 1;
transition: opacity 200ms ease;
}
.quoteStyle-withPhoto--job:focus::before {
opacity: .1;
}
.quoteStyle-withPhoto--quote {
margin-top: 30px;
background: #FBFBFB;
margin-top: 45px;
line-height: 32px;
outline: none;
overflow: hidden;
}

79
plugins/ceditor-tool-quote/ceditor-tool-quote.js
View file

@ -5,8 +5,6 @@
var quoteTools = {
captionPlaceholder : 'Введите имя автора',
jobPlacaholder : 'Введите должность',
/**
* Make Quote from JSON datasets
*/
@ -32,10 +30,14 @@ var quoteTools = {
tag = document.createElement('BLOCKQUOTE');
tag.contentEditable = 'true';
tag.dataset.quoteStyle = 'simple';
tag.class = 'ce_quote--text';
tag.classList.add('ce_quote--text');
tag.classList.add('quoteStyle-simple--text');
}
return tag;
},
@ -143,18 +145,12 @@ var quoteTools = {
},
setBlockHandler : function(block) {
},
makeSimpleQuote : function(data) {
var wrapper = quoteTools.ui.blockquote();
var wrapper = quoteTools.ui.makeBlock('BLOCKQUOTE', ['quoteStyle-simple--text', 'ce_quote--text']);
wrapper.innerHTML = data.text || '';
wrapper.classList.add('ce_quote--text');
wrapper.dataset.quoteStyle = 'simple';
wrapper.contentEditable = 'true';
@ -176,11 +172,7 @@ var quoteTools = {
/* make Author contentEditable */
author.contentEditable = 'true';
author.textContent = data.author || quoteTools.captionPlaceholder;
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
author.textContent = data.author;
/* Appending created components */
wrapper.dataset.quoteStyle = 'withCaption';
@ -195,27 +187,22 @@ var quoteTools = {
makeQuoteWithPhoto : function(data) {
var wrapper = quoteTools.ui.blockquote();
photo = quoteTools.ui.makeBlock('IMG', ['quoteStyle-withPhoto--photo']),
photo = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--photo']),
author = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--author', 'ce_quote--author']),
job = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--job', 'ce_quote--job']),
quote = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--quote', 'ce_quote--text'])
/* Default Image src */
photo.src = data.photo || 'plugins/ceditor-tool-quote/img/codex.png';
var icon = quoteTools.ui.makeBlock('SPAN', ['ce-icon-picture']);
photo.appendChild(icon);
/* make author block contentEditable */
author.contentEditable = 'true';
author.textContent = data.author || quoteTools.captionPlaceholder;
quoteTools.ui.mousedown(author, quoteTools.captionPlaceholder);
quoteTools.ui.keyPressed(author, quoteTools.captionPlaceholder);
author.textContent = data.author;
/* Author's position and job */
job.contentEditable = 'true';
job.textContent = data.job || quoteTools.jobPlacaholder;
quoteTools.ui.mousedown(job, quoteTools.jobPlacaholder);
quoteTools.ui.keyPressed(job, quoteTools.jobPlacaholder);
job.textContent = data.job;
var authorsWrapper = quoteTools.ui.makeBlock('DIV', ['quoteStyle-withPhoto--authorWrapper']);
authorsWrapper.appendChild(author);
@ -304,48 +291,8 @@ quoteTools.ui = {
}
return el;
},
mousedown : function(block, placeholder) {
block.addEventListener('focus', function() {
quoteTools.ui.clear(block, placeholder);
});
},
keyPressed : function(block, placeholder) {
block.addEventListener('keydown', function(){
quoteTools.ui.fillbyPlaceholder(block, placeholder);
});
},
clear : function(block, placeholder) {
if ( block.textContent == placeholder) {
block.innerHTML = '';
}
},
fillbyPlaceholder : function(block, placeholder) {
quoteTools.ui.clear(block, placeholder);
setTimeout( function() {
if (block.textContent == '') {
block.textContent = placeholder;
}
}, 10);
}
}
cEditor.tools.quote = {