mirror of
https://github.com/codex-team/editor.js
synced 2026-03-17 16:10:07 +01:00
UI: Block Settings, show Plus after Enter keydown (#265)
* Some UI improvements: icons settigns * Show plus button after split * decrease autoprefixer * rename variable
This commit is contained in:
Peter Savchenko
GitHub
parent
c6656770e5
commit
972eb87d89
25 changed files with 304 additions and 151 deletions
|
|
@ -8,7 +8,7 @@ plugins:
|
|||
postcss-nested-ancestors: {}
|
||||
postcss-nesting: {}
|
||||
postcss-nested: {}
|
||||
postcss-color-function: {}
|
||||
postcss-color-mod-function: {}
|
||||
postcss-color-hex-alpha: {}
|
||||
postcss-font-variant: {}
|
||||
postcss-font-family-system-ui: {}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,15 +1,35 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg xmlns="http://www.w3.org/2000/svg">
|
||||
<symbol id="arrow-down" viewBox="0 0 14 14">
|
||||
<path transform="matrix(1 0 0 -1 0 14)" d="M8.024 4.1v8.6a1.125 1.125 0 0 1-2.25 0V4.1L2.18 7.695A1.125 1.125 0 1 1 .59 6.104L6.103.588c.44-.439 1.151-.439 1.59 0l5.516 5.516a1.125 1.125 0 0 1-1.59 1.59L8.023 4.1z"/>
|
||||
|
||||
</symbol>
|
||||
<symbol id="arrow-up" viewBox="0 0 14 14">
|
||||
<path d="M8.024 4.1v8.6a1.125 1.125 0 0 1-2.25 0V4.1L2.18 7.695A1.125 1.125 0 1 1 .59 6.104L6.103.588c.44-.439 1.151-.439 1.59 0l5.516 5.516a1.125 1.125 0 0 1-1.59 1.59L8.023 4.1z"/>
|
||||
|
||||
</symbol>
|
||||
<symbol id="bold" viewBox="0 0 13 15">
|
||||
<path d="M5.996 13.9H1.752c-.613 0-1.05-.137-1.312-.412-.262-.275-.393-.712-.393-1.312V1.737C.047 1.125.18.684.449.416.718.147 1.152.013 1.752.013h4.5a10.5 10.5 0 0 1 1.723.123c.487.082.922.24 1.308.474a3.43 3.43 0 0 1 1.449 1.738c.132.363.199.747.199 1.151 0 1.39-.695 2.406-2.084 3.05 1.825.581 2.737 1.712 2.737 3.391 0 .777-.199 1.477-.596 2.099a3.581 3.581 0 0 1-1.61 1.378c-.424.177-.91.301-1.46.374-.549.073-1.19.109-1.922.109zm-.209-6.167H2.86v4.055h3.022c1.9 0 2.851-.686 2.851-2.056 0-.7-.246-1.21-.739-1.525-.492-.316-1.228-.474-2.207-.474zM2.86 2.125v3.59h2.577c.7 0 1.242-.066 1.624-.198a1.55 1.55 0 0 0 .876-.758c.158-.265.237-.562.237-.89 0-.702-.25-1.167-.748-1.398-.499-.23-1.26-.346-2.283-.346H2.86z"/>
|
||||
|
||||
</symbol>
|
||||
<symbol id="cross" viewBox="0 0 237 237">
|
||||
<path transform="rotate(45 280.675 51.325)" d="M191 191V73c0-5.523 4.477-10 10-10h25c5.523 0 10 4.477 10 10v118h118c5.523 0 10 4.477 10 10v25c0 5.523-4.477 10-10 10H236v118c0 5.523-4.477 10-10 10h-25c-5.523 0-10-4.477-10-10V236H73c-5.523 0-10-4.477-10-10v-25c0-5.523 4.477-10 10-10h118z"/>
|
||||
|
||||
</symbol>
|
||||
<symbol id="dots" viewBox="0 0 18 4">
|
||||
<g fill-rule="evenodd">
|
||||
<circle cx="9" cy="2" r="2"/>
|
||||
<circle cx="2" cy="2" r="2"/>
|
||||
<circle cx="16" cy="2" r="2"/>
|
||||
</g>
|
||||
|
||||
</symbol>
|
||||
<symbol id="link" viewBox="0 0 15 14">
|
||||
<path transform="rotate(-45 11.83 6.678)" d="M11.332 4.013a51.07 51.07 0 0 1-2.28.001A1.402 1.402 0 0 0 7.7 2.25H3.65a1.4 1.4 0 1 0 0 2.8h.848c.206.86.693 1.61 1.463 2.25H3.65a3.65 3.65 0 1 1 0-7.3H7.7a3.65 3.65 0 0 1 3.632 4.013zM10.9 0h2a3.65 3.65 0 0 1 0 7.3H8.85a3.65 3.65 0 0 1-3.632-4.011A62.68 62.68 0 0 1 7.5 3.273 1.401 1.401 0 0 0 8.85 5.05h4.05a1.4 1.4 0 0 0 0-2.8h-.48C12.274 1.664 11.694.785 10.9 0z"/>
|
||||
|
||||
</symbol>
|
||||
<symbol id="plus" viewBox="0 0 14 14">
|
||||
<path d="M8.05 5.8h4.625a1.125 1.125 0 0 1 0 2.25H8.05v4.625a1.125 1.125 0 0 1-2.25 0V8.05H1.125a1.125 1.125 0 0 1 0-2.25H5.8V1.125a1.125 1.125 0 0 1 2.25 0V5.8z"/>
|
||||
<path d="M8.05 5.8h4.625a1.125 1.125 0 0 1 0 2.25H8.05v4.625a1.125 1.125 0 0 1-2.25 0V8.05H1.125a1.125 1.125 0 0 1 0-2.25H5.8V1.125a1.125 1.125 0 0 1 2.25 0V5.8z"/>
|
||||
|
||||
</symbol>
|
||||
<symbol id="unlink" viewBox="0 0 16 18">
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
|
@ -83,7 +83,7 @@
|
|||
{
|
||||
type : 'text',
|
||||
data : {
|
||||
text : '<p><b>CodeX</b> Привет!!!</p>'
|
||||
text : 'В <b>JavaScript</b> <a href="https://ifmo.su/ts-classes">нет возможности</a> назначить свойства при объявлении класса — все необходимые значения нужно определять в конструкторе или других методах. При таком подходе объявление свойств неявное, не всегда ясно какие свойства имеет класс. TS решает эту проблему: здесь можно не только объявить свойства класса, но и назначить им начальные значения'
|
||||
}
|
||||
}
|
||||
]
|
||||
|
|
|
|||
|
|
@ -3,11 +3,20 @@
|
|||
*/
|
||||
|
||||
.ce-text {
|
||||
padding: 15px 0 !important;
|
||||
line-height: 1.6em;
|
||||
outline: none;
|
||||
padding: 10px 0;
|
||||
line-height: 1.6em;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.ce-text p:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.ce-text p:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
|
||||
.ce-paragraph:empty::before,
|
||||
.ce-paragraph p:empty::before{
|
||||
content : attr(data-placeholder);
|
||||
|
|
@ -32,4 +41,4 @@
|
|||
}
|
||||
.ce-paragraph p:last-of-type{
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
71
package-lock.json
generated
71
package-lock.json
generated
|
|
@ -4,6 +4,12 @@
|
|||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
"@csstools/convert-colors": {
|
||||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@csstools/convert-colors/-/convert-colors-1.4.0.tgz",
|
||||
"integrity": "sha512-5a6wqoJV/xEdbRNKVo6I4hO3VjyDq//8q2f9I6PBAvMesJHFauXDorcNCsr9RzvsZnaWi5NYCcfyqP1QeFHFbw==",
|
||||
"dev": true
|
||||
},
|
||||
"@webassemblyjs/ast": {
|
||||
"version": "1.5.12",
|
||||
"resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.5.12.tgz",
|
||||
|
|
@ -5886,6 +5892,71 @@
|
|||
}
|
||||
}
|
||||
},
|
||||
"postcss-color-mod-function": {
|
||||
"version": "2.4.2",
|
||||
"resolved": "https://registry.npmjs.org/postcss-color-mod-function/-/postcss-color-mod-function-2.4.2.tgz",
|
||||
"integrity": "sha512-j9RM33ybsEJUvIc22Y5I4ucvSJVHMliiW0I34JDLV0gVdvCo7/Y+zW6QMBANj+M4VZJLmyGz2mafIK4Tb5GVyg==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"@csstools/convert-colors": "1.4.0",
|
||||
"postcss": "6.0.23",
|
||||
"postcss-values-parser": "1.5.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"ansi-styles": {
|
||||
"version": "3.2.1",
|
||||
"resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
|
||||
"integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"color-convert": "1.9.1"
|
||||
}
|
||||
},
|
||||
"chalk": {
|
||||
"version": "2.4.1",
|
||||
"resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.1.tgz",
|
||||
"integrity": "sha512-ObN6h1v2fTJSmUXoS3nMQ92LbDK9be4TV+6G+omQlGJFdcUX5heKi1LZ1YnRMIgwTLEj3E24bT6tYni50rlCfQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"ansi-styles": "3.2.1",
|
||||
"escape-string-regexp": "1.0.5",
|
||||
"supports-color": "5.4.0"
|
||||
}
|
||||
},
|
||||
"has-flag": {
|
||||
"version": "3.0.0",
|
||||
"resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
|
||||
"integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
|
||||
"dev": true
|
||||
},
|
||||
"postcss": {
|
||||
"version": "6.0.23",
|
||||
"resolved": "https://registry.npmjs.org/postcss/-/postcss-6.0.23.tgz",
|
||||
"integrity": "sha512-soOk1h6J3VMTZtVeVpv15/Hpdl2cBLX3CAw4TAbkpTJiNPk9YP/zWcD1ND+xEtvyuuvKzbxliTOIyvkSeSJ6ag==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"chalk": "2.4.1",
|
||||
"source-map": "0.6.1",
|
||||
"supports-color": "5.4.0"
|
||||
}
|
||||
},
|
||||
"source-map": {
|
||||
"version": "0.6.1",
|
||||
"resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
|
||||
"integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
|
||||
"dev": true
|
||||
},
|
||||
"supports-color": {
|
||||
"version": "5.4.0",
|
||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.4.0.tgz",
|
||||
"integrity": "sha512-zjaXglF5nnWpsq470jSv6P9DwPvgLkuapYmfDm3JWOm0vkNTVF2tI4UrN2r6jH1qM/uc/WtxYY1hYoA2dOKj5w==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"has-flag": "3.0.0"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"postcss-color-rebeccapurple": {
|
||||
"version": "3.1.0",
|
||||
"resolved": "https://registry.npmjs.org/postcss-color-rebeccapurple/-/postcss-color-rebeccapurple-3.1.0.tgz",
|
||||
|
|
|
|||
|
|
@ -29,8 +29,8 @@
|
|||
"html-janitor": "^2.0.2",
|
||||
"path": "^0.12.7",
|
||||
"postcss-apply": "^0.10.0",
|
||||
"postcss-color-function": "^4.0.1",
|
||||
"postcss-color-hex-alpha": "^3.0.0",
|
||||
"postcss-color-mod-function": "^2.4.2",
|
||||
"postcss-cssnext": "^3.1.0",
|
||||
"postcss-custom-media": "^6.0.0",
|
||||
"postcss-custom-properties": "^7.0.0",
|
||||
|
|
|
|||
3
src/assets/arrow-down.svg
Normal file
3
src/assets/arrow-down.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path transform="matrix(1 0 0 -1 0 14)" d="M8.024 4.1v8.6a1.125 1.125 0 0 1-2.25 0V4.1L2.18 7.695A1.125 1.125 0 1 1 .59 6.104L6.103.588c.44-.439 1.151-.439 1.59 0l5.516 5.516a1.125 1.125 0 0 1-1.59 1.59L8.023 4.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 353 B |
3
src/assets/arrow-up.svg
Normal file
3
src/assets/arrow-up.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M8.024 4.1v8.6a1.125 1.125 0 0 1-2.25 0V4.1L2.18 7.695A1.125 1.125 0 1 1 .59 6.104L6.103.588c.44-.439 1.151-.439 1.59 0l5.516 5.516a1.125 1.125 0 0 1-1.59 1.59L8.023 4.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 321 B |
3
src/assets/cross.svg
Normal file
3
src/assets/cross.svg
Normal file
|
|
@ -0,0 +1,3 @@
|
|||
<svg width="237" height="237" viewBox="0 0 237 237" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path transform="rotate(45 280.675 51.325)" d="M191 191V73c0-5.523 4.477-10 10-10h25c5.523 0 10 4.477 10 10v118h118c5.523 0 10 4.477 10 10v25c0 5.523-4.477 10-10 10H236v118c0 5.523-4.477 10-10 10h-25c-5.523 0-10-4.477-10-10V236H73c-5.523 0-10-4.477-10-10v-25c0-5.523 4.477-10 10-10h118z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 430 B |
7
src/assets/dots.svg
Normal file
7
src/assets/dots.svg
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
<svg width="18" height="4" viewBox="0 0 18 4" xmlns="http://www.w3.org/2000/svg">
|
||||
<g fill-rule="evenodd">
|
||||
<circle cx="9" cy="2" r="2"/>
|
||||
<circle cx="2" cy="2" r="2"/>
|
||||
<circle cx="16" cy="2" r="2"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 225 B |
|
|
@ -1,3 +1,3 @@
|
|||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<path d="M8.05 5.8h4.625a1.125 1.125 0 0 1 0 2.25H8.05v4.625a1.125 1.125 0 0 1-2.25 0V8.05H1.125a1.125 1.125 0 0 1 0-2.25H5.8V1.125a1.125 1.125 0 0 1 2.25 0V5.8z"/>
|
||||
<svg width="14" height="14" viewBox="0 0 14 14" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M8.05 5.8h4.625a1.125 1.125 0 0 1 0 2.25H8.05v4.625a1.125 1.125 0 0 1-2.25 0V8.05H1.125a1.125 1.125 0 0 1 0-2.25H5.8V1.125a1.125 1.125 0 0 1 2.25 0V5.8z"/>
|
||||
</svg>
|
||||
|
|
|
|||
|
Before Width: | Height: | Size: 301 B After Width: | Height: | Size: 260 B |
|
|
@ -23,6 +23,9 @@ export default class DeleteTune implements IBlockTune {
|
|||
*/
|
||||
private CSS = {
|
||||
wrapper: 'ass',
|
||||
button: 'ce-settings__button',
|
||||
buttonDelete: 'ce-settings__button--delete',
|
||||
buttonConfirm: 'ce-settings__button--confirm',
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -35,6 +38,13 @@ export default class DeleteTune implements IBlockTune {
|
|||
*/
|
||||
private resetConfirmation: () => void;
|
||||
|
||||
/**
|
||||
* Tune nodes
|
||||
*/
|
||||
private nodes = {
|
||||
button: null,
|
||||
};
|
||||
|
||||
/**
|
||||
* DeleteTune constructor
|
||||
*
|
||||
|
|
@ -53,9 +63,10 @@ export default class DeleteTune implements IBlockTune {
|
|||
* @returns [Element}
|
||||
*/
|
||||
public render() {
|
||||
const deleteButton = $.make('div', ['ce-settings-delete'], {});
|
||||
deleteButton.addEventListener('click', (event) => this.handleClick(event), false);
|
||||
return deleteButton;
|
||||
this.nodes.button = $.make('div', [this.CSS.button, this.CSS.buttonDelete], {});
|
||||
this.nodes.button.appendChild($.svg('cross', 12, 12));
|
||||
this.nodes.button.addEventListener('click', (event) => this.handleClick(event), false);
|
||||
return this.nodes.button;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -94,6 +105,7 @@ export default class DeleteTune implements IBlockTune {
|
|||
*/
|
||||
private setConfirmation(state): void {
|
||||
this.needConfirmation = state;
|
||||
this.nodes.button.classList.add(this.CSS.buttonConfirm);
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -23,6 +23,7 @@ export default class MoveUpTune implements IBlockTune {
|
|||
*/
|
||||
private CSS = {
|
||||
wrapper: 'ass',
|
||||
button: 'ce-settings__button',
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -39,7 +40,8 @@ export default class MoveUpTune implements IBlockTune {
|
|||
* @returns [Element}
|
||||
*/
|
||||
public render() {
|
||||
const moveUpButton = $.make('div', ['ce-settings-move-up'], {});
|
||||
const moveUpButton = $.make('div', this.CSS.button, {});
|
||||
moveUpButton.appendChild($.svg('arrow-up', 14, 14));
|
||||
moveUpButton.addEventListener('click', (event) => this.handleClick(event), false);
|
||||
return moveUpButton;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -160,12 +160,16 @@ export default class BlockManager extends Module {
|
|||
* @param {String} toolName — plugin name
|
||||
* @param {Object} data — plugin data
|
||||
* @param {Object} settings - default settings
|
||||
*
|
||||
* @return {Block}
|
||||
*/
|
||||
insert(toolName, data = {}, settings = {}) {
|
||||
let block = this.composeBlock(toolName, data, settings);
|
||||
|
||||
this._blocks[++this.currentBlockIndex] = block;
|
||||
this.Editor.Caret.setToBlock(block);
|
||||
|
||||
return block;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
@ -223,7 +227,13 @@ export default class BlockManager extends Module {
|
|||
text: $.isEmpty(wrapper) ? '' : wrapper.innerHTML,
|
||||
};
|
||||
|
||||
this.insert(this.config.initialBlock, data);
|
||||
/**
|
||||
* Renew current Block
|
||||
* @type {Block}
|
||||
*/
|
||||
const blockInserted = this.insert(this.config.initialBlock, data);
|
||||
|
||||
this.currentNode = blockInserted.pluginsContent;
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
|||
|
|
@ -87,6 +87,19 @@ export default class Keyboard extends Module {
|
|||
* Split the Current Block into two blocks
|
||||
*/
|
||||
this.Editor.BlockManager.split();
|
||||
|
||||
/**
|
||||
* Renew local current node after split
|
||||
*/
|
||||
let newCurrent = this.Editor.BlockManager.currentBlock;
|
||||
|
||||
this.Editor.Toolbar.move();
|
||||
this.Editor.Toolbar.open();
|
||||
|
||||
if (this.Editor.Tools.isInitial(newCurrent.tool) && newCurrent.isEmpty) {
|
||||
this.Editor.Toolbar.plusButton.show();
|
||||
}
|
||||
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -114,6 +114,7 @@ export default class Toolbar extends Module {
|
|||
* - Toolbox
|
||||
*/
|
||||
this.nodes.plusButton = $.make('div', Toolbar.CSS.plusButton);
|
||||
$.append(this.nodes.plusButton, $.svg('plus', 14, 14));
|
||||
$.append(this.nodes.content, this.nodes.plusButton);
|
||||
this.nodes.plusButton.addEventListener('click', event => this.plusButtonClicked(event), false);
|
||||
|
||||
|
|
@ -131,7 +132,9 @@ export default class Toolbar extends Module {
|
|||
*/
|
||||
this.nodes.blockActionsButtons = $.make('div', Toolbar.CSS.blockActionsButtons);
|
||||
this.nodes.settingsToggler = $.make('span', Toolbar.CSS.settingsToggler);
|
||||
const settingsIcon = $.svg('dots', 18, 4);
|
||||
|
||||
$.append(this.nodes.settingsToggler, settingsIcon);
|
||||
$.append(this.nodes.blockActionsButtons, this.nodes.settingsToggler);
|
||||
$.append(this.nodes.actions, this.nodes.blockActionsButtons);
|
||||
|
||||
|
|
|
|||
|
|
@ -9,36 +9,6 @@
|
|||
*/
|
||||
import sprite from '../../../build/sprite.svg';
|
||||
|
||||
// let className = {
|
||||
|
||||
/**
|
||||
* @const {string} BLOCK_CLASSNAME - redactor blocks name
|
||||
*/
|
||||
// BLOCK_CLASSNAME : 'ce-block',
|
||||
|
||||
/**
|
||||
* @const {String} wrapper for plugins content
|
||||
*/
|
||||
// BLOCK_CONTENT : 'ce-block__content',
|
||||
|
||||
/**
|
||||
* @const {String} BLOCK_STRETCHED - makes block stretched
|
||||
*/
|
||||
// BLOCK_STRETCHED : 'ce-block--stretched',
|
||||
|
||||
/**
|
||||
* @const {String} BLOCK_HIGHLIGHTED - adds background
|
||||
*/
|
||||
// BLOCK_HIGHLIGHTED : 'ce-block--focused',
|
||||
|
||||
/**
|
||||
* @const {String} - for all default settings
|
||||
*/
|
||||
// SETTINGS_ITEM : 'ce-settings__item'
|
||||
// };
|
||||
|
||||
// import Block from '../block';
|
||||
|
||||
/**
|
||||
* @class
|
||||
*
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
.ce-block {
|
||||
border: 1px dotted #ccc;
|
||||
margin: 2px 0;
|
||||
|
||||
&:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background-color: var(--bg-light);
|
||||
background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
&__content {
|
||||
max-width: var(--content-width);
|
||||
margin: 0 auto;
|
||||
|
|
|
|||
|
|
@ -3,6 +3,9 @@
|
|||
padding: 6px;
|
||||
transform: translateX(-50%);
|
||||
display: none;
|
||||
box-shadow: 0 6px 12px -6px rgba(131, 147, 173, 0.46),
|
||||
5px -12px 34px -13px rgba(97, 105, 134, 0.6),
|
||||
0 26px 52px 3px rgba(147, 165, 186, 0.24);
|
||||
|
||||
&--showed {
|
||||
display: block;
|
||||
|
|
@ -10,24 +13,8 @@
|
|||
}
|
||||
|
||||
.ce-inline-tool {
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
vertical-align: bottom;
|
||||
color: var(--grayText);
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: var(--color-active-icon);
|
||||
}
|
||||
@apply --toolbar-button;
|
||||
line-height: normal;
|
||||
|
||||
&--link {
|
||||
.icon {
|
||||
|
|
|
|||
|
|
@ -1,39 +1,56 @@
|
|||
.ce-settings {
|
||||
border: 1px dotted #ccc;
|
||||
padding: 2px;
|
||||
@apply --overlay-pane;
|
||||
right: 5px;
|
||||
top: 35px;
|
||||
min-width: 124px;
|
||||
|
||||
&::before{
|
||||
left: auto;
|
||||
right: 12px;
|
||||
}
|
||||
|
||||
display: none;
|
||||
|
||||
&--opened {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&__plugin-zone {
|
||||
border: 1px dotted #ccc;
|
||||
padding: 2px;
|
||||
margin-bottom: 2px;
|
||||
|
||||
&::before {
|
||||
content: 'PLUGIN SETTINGS';
|
||||
opacity: .4;
|
||||
font-size: 12px;
|
||||
&:not(:empty){
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__default-zone {
|
||||
border: 1px dotted #ccc;
|
||||
padding: 2px;
|
||||
&::before {
|
||||
/*content: 'DEFAULT SETTINGS';*/
|
||||
opacity: .4;
|
||||
font-size: 12px;
|
||||
&:not(:empty){
|
||||
padding: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
padding: 10px 15px;
|
||||
color: var(--grayText);
|
||||
@apply --toolbar-button;
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-light);
|
||||
&--delete {
|
||||
transition: background-color 300ms ease;
|
||||
will-change: background-color;
|
||||
|
||||
.icon {
|
||||
transition: transform 200ms ease-out;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&--confirm {
|
||||
background-color: var(--color-confirm);
|
||||
color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: color-mod(var(--color-confirm) blackness(+5%)) !important;
|
||||
}
|
||||
|
||||
.icon {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
&__plus {
|
||||
position: absolute;
|
||||
left: calc(var(--toolbar-buttons-size) - 10px);
|
||||
left: calc(calc(var(--toolbar-buttons-size) + 10px) * -1);
|
||||
display: inline-block;
|
||||
background-color: var(--bg-light);
|
||||
width: var(--toolbar-buttons-size);
|
||||
|
|
@ -34,14 +34,7 @@
|
|||
line-height: 34px;
|
||||
text-align: center;
|
||||
border-radius: 50%;
|
||||
|
||||
&::after {
|
||||
content: '+';
|
||||
font-size: 26px;
|
||||
display: block;
|
||||
margin-top: -2px;
|
||||
margin-right: -2px;
|
||||
}
|
||||
cursor: pointer;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
|
|
@ -56,14 +49,10 @@
|
|||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
border: 1px dotted #ccc;
|
||||
padding: 2px;
|
||||
padding-right: 16px;
|
||||
|
||||
&-buttons {
|
||||
border: 1px dotted #ccc;
|
||||
padding: 2px;
|
||||
text-align: right;
|
||||
margin-bottom: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -71,12 +60,7 @@
|
|||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
border: 1px dotted #ccc;
|
||||
|
||||
&::before {
|
||||
content: 'STN';
|
||||
font-size: 10px;
|
||||
opacity: .4;
|
||||
}
|
||||
color: var(--grayText);
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,8 +3,6 @@
|
|||
*/
|
||||
.codex-editor {
|
||||
position: relative;
|
||||
border: 1px solid #ccc;
|
||||
padding: 2px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.hide {
|
||||
|
|
@ -26,3 +24,4 @@
|
|||
::selection{
|
||||
background-color: rgba(61,166,239,0.63);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -22,6 +22,11 @@
|
|||
*/
|
||||
--toolbar-buttons-size: 34px;
|
||||
|
||||
/**
|
||||
* Confirm deletion bg
|
||||
*/
|
||||
--color-confirm: #E24A4A;
|
||||
|
||||
--overlay-pane: {
|
||||
position: absolute;
|
||||
background: #FFFFFF;
|
||||
|
|
@ -41,5 +46,32 @@
|
|||
background: #fff;
|
||||
z-index: -1;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
--toolbar-button: {
|
||||
display: inline-block;
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
text-align: center;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: transparent;
|
||||
vertical-align: bottom;
|
||||
color: var(--grayText);
|
||||
|
||||
&:not(:last-of-type){
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: var(--bg-light);
|
||||
}
|
||||
|
||||
&--active {
|
||||
color: var(--color-active-icon);
|
||||
}
|
||||
};
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue