deblan-mirror/editor.js
deblan-mirror/editor.js
1
0
Fork 0
mirror of https://github.com/codex-team/editor.js synced 2024-06-26 09:20:07 +02:00
Code Issues Projects Releases Wiki Activity

Improvements: new Block Settings button style (#1064)

Browse source
This commit is contained in:
Peter Savchenko 2020-03-14 22:57:30 +03:00 committed by GitHub
parent 92eab3be79
commit 06d657cb4a
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
11 changed files with 73 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/editor.js vendored
View file

File diff suppressed because one or more lines are too long

11
dist/sprite.svg vendored
View file

@ -14,12 +14,11 @@
<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 id="dots" viewBox="0 0 8 8">
<circle cx="6.5" cy="1.5" r="1.5"/>
<circle cx="6.5" cy="6.5" r="1.5"/>
<circle cx="1.5" cy="1.5" r="1.5"/>
<circle cx="1.5" cy="6.5" r="1.5"/>
</symbol>
<symbol id="italic" viewBox="0 0 4 11">

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.9 KiB

After

Width:  |  Height:  |  Size: 3.9 KiB

1
docs/CHANGELOG.md
View file

@ -8,6 +8,7 @@
- `Fix` - Fixed inline toolbar flipper activation on closing conversion toolbar [#995](https://github.com/codex-team/editor.js/issues/995)
- `Improvements` - New window tab is opened by clicking on anchor with ctrl [#1057](https://github.com/codex-team/editor.js/issues/1057)
- `Fix` - Fix block-tune buttons alignment in some CSS-resetors that forces `box-sizing: border-box` rule [#1003](https://github.com/codex-team/editor.js/issues/1003)
- `Improvements` - New style of a Block Settings button. Focused block background removed.
### 2.16.1

11
src/assets/dots.svg
View file

@ -1,7 +1,6 @@
<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 xmlns="http://www.w3.org/2000/svg" viewBox="0 0 8 8">
<circle cx="6.5" cy="1.5" r="1.5"/>
<circle cx="6.5" cy="6.5" r="1.5"/>
<circle cx="1.5" cy="1.5" r="1.5"/>
<circle cx="1.5" cy="6.5" r="1.5"/>
</svg>

Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 225 B

After

Width:  |  Height:  |  Size: 218 B

16
src/components/modules/rectangleSelection.ts
View file

@ -131,12 +131,20 @@ export default class RectangleSelection extends Module {
* @param {number} pageY - Y coord of mouse
*/
public startSelection(pageX, pageY) {
this.Editor.BlockSelection.allBlocksSelected = false;
this.clearSelection();
this.stackOfSelected = [];
const elemWhereSelectionStart = document.elementFromPoint(pageX - window.pageXOffset, pageY - window.pageYOffset);
/**
* Don't clear selected block by clicks on the Block settings
* because we need to keep highlighting working block
*/
const startsInsideToolbar = elemWhereSelectionStart.closest(`.${this.Editor.Toolbar.CSS.toolbar}`);
if (!startsInsideToolbar) {
this.Editor.BlockSelection.allBlocksSelected = false;
this.clearSelection();
this.stackOfSelected = [];
}
const selectorsToAvoid = [
`.${Block.CSS.content}`,
`.${this.Editor.Toolbar.CSS.toolbar}`,

5
src/components/modules/toolbar/blockSettings.ts
View file

@ -102,6 +102,11 @@ export default class BlockSettings extends Module {
public open(): void {
this.nodes.wrapper.classList.add(this.CSS.wrapperOpened);
/**
* Highlight content of a Block we are working with
*/
this.Editor.BlockManager.currentBlock.selected = true;
/**
* Fill Tool's settings
*/

22
src/components/modules/toolbar/index.ts
View file

@ -8,12 +8,13 @@ import * as _ from '../../utils';
*
* ______________________________________ Toolbar ____________________________________________
* | |
* | ..................... Content .................... ......... Block Actions .......... |
* | . . . . |
* | . . . [Open Settings] . |
* | . [Plus Button] [Toolbox: {Tool1}, {Tool2}] . . . |
* | . . . [Settings Panel] . |
* | .................................................. .................................. |
* | ..................... Content ......................................................... |
* | . ........ Block Actions ........... |
* | . . [Open Settings] . |
* | . [Plus Button] [Toolbox: {Tool1}, {Tool2}] . . |
* | . . [Settings Panel] . |
* | . .................................. |
* | ....................................................................................... |
* | |
* |___________________________________________________________________________________________|
*
@ -105,9 +106,14 @@ export default class Toolbar extends Module {
*/
['content', 'actions'].forEach( (el) => {
this.nodes[el] = $.make('div', this.CSS[el]);
$.append(this.nodes.wrapper, this.nodes[el]);
});
/**
* Actions will be included to the toolbar content so we can align in to the right of the content
*/
$.append(this.nodes.wrapper, this.nodes.content);
$.append(this.nodes.content, this.nodes.actions);
/**
* Fill Content Zone:
* - Plus Button
@ -144,7 +150,7 @@ export default class Toolbar extends Module {
*/
this.nodes.blockActionsButtons = $.make('div', this.CSS.blockActionsButtons);
this.nodes.settingsToggler = $.make('span', this.CSS.settingsToggler);
const settingsIcon = $.svg('dots', 18, 4);
const settingsIcon = $.svg('dots', 8, 8);
$.append(this.nodes.settingsToggler, settingsIcon);
$.append(this.nodes.blockActionsButtons, this.nodes.settingsToggler);

13
src/styles/block.css
View file

@ -3,18 +3,6 @@
margin-top: 0;
}
&--focused {
background-image: linear-gradient(17deg, rgba(243, 248, 255, 0.03) 63.45%, rgba(207, 214, 229, 0.27) 98%);
border-radius: 3px;
@media (--mobile){
background-image: none;
background-color: rgba(200, 199, 219, 0.17);
margin: 0 -10px;
padding: 0 10px;
}
}
&--selected &__content {
background: var(--selectionColor);
@ -89,7 +77,6 @@
}
}
.codex-editor--narrow .ce-block--focused {
@media (--not-mobile) {
margin-right: calc(var(--narrow-mode-right-padding) * -1);

7
src/styles/settings.css
View file

@ -1,12 +1,13 @@
.ce-settings {
@apply --overlay-pane;
right: 5px;
top: 35px;
right: -1px;
top: 30px;
min-width: 114px;
box-sizing: content-box;
@media (--mobile){
bottom: 50px;
bottom: 40px;
right: -11px;
top: auto;
}

31
src/styles/toolbar.css
View file

@ -32,7 +32,7 @@
display: flex;
align-content: center;
margin: 0;
max-width: calc(100% - 40px);
max-width: calc(100% - 35px);
}
}
@ -72,15 +72,15 @@
*/
&__actions {
position: absolute;
right: 0;
top: 10px;
padding-right: 16px;
right: -30px;
top: 5px;
opacity: 0;
@media (--mobile){
position: static;
margin-left: auto;
padding-right: 10px;
position: absolute;
right: -28px;
top: 50%;
transform: translateY(-50%);
display: flex;
align-items: center;
}
@ -95,11 +95,22 @@
}
&__settings-btn {
display: inline-block;
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
color: var(--grayText);
cursor: pointer;
background: var(--bg-light);
&:hover {
color: var(--color-dark);
}
@media (--mobile){
background: transparent;
}
}
}

5
src/styles/variables.css
View file

@ -18,6 +18,11 @@
*/
--grayText: #707684;
/**
* Gray icons hover
*/
--color-dark: #1D202B;
/**
* Blue icons
*/