-
-
Notifications
You must be signed in to change notification settings - Fork 3.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #6794 from ckeditor/i/407-simple
Feature (widget): Brought the feature allowing users to type in tight spots around block widgets where web browsers do not allow the caret to be placed (see #407). Closes #6740. Closes #6688. Closes #6689. Closes #6695. Internal (horizontal-line): Updated the styling of .ck-horizontal-line from overflow: hidden to display: flow-root to allow the typing around UI inside the widgets (see #407, #6795). Tests (image): Updated various image test to take the widget typing around feature into account (see #407). Fix (media-mebed): The media widget conversion should not discard widget internals (drag or resize handlers, buttons to insert paragraphs, etc.) injected by other features when converting the URL (see #407). Feature (theme-lark): Brought styles for the feature allowing users to type in tight spots around block widgets (see #407). MINOR BREAKING CHANGE: The new --ck-color-focus-border-coordinates CSS custom property has been added and the existing --ck-color-focus-border property now uses it internally. If your integration overrides the latter, we recommend you update the former to avoid compatibility issues with various editor UI features.
- Loading branch information
Showing
24 changed files
with
1,513 additions
and
104 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
146 changes: 146 additions & 0 deletions
146
packages/ckeditor5-theme-lark/theme/ckeditor5-widget/widgettypearound.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,146 @@ | ||
| /* | ||
| * Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved. | ||
| * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license | ||
| */ | ||
|
|
||
| :root { | ||
| --ck-widget-type-around-button-size: 20px; | ||
| --ck-color-widget-type-around-button-active: var(--ck-color-focus-border); | ||
| --ck-color-widget-type-around-button-hover: var(--ck-color-widget-hover-border); | ||
| --ck-color-widget-type-around-button-blurred-editable: var(--ck-color-widget-blurred-border); | ||
| --ck-color-widget-type-around-button-radar-start-alpha: 0; | ||
| --ck-color-widget-type-around-button-radar-end-alpha: .3; | ||
| --ck-color-widget-type-around-button-icon: var(--ck-color-base-background); | ||
| } | ||
|
|
||
| .ck .ck-widget { | ||
| /* | ||
| * Styles of the type around buttons | ||
| */ | ||
| & .ck-widget__type-around__button { | ||
| cursor: pointer; | ||
| width: var(--ck-widget-type-around-button-size); | ||
| height: var(--ck-widget-type-around-button-size); | ||
| background: var(--ck-color-widget-type-around-button); | ||
| border-radius: 100px; | ||
| animation: fadein linear 300ms 1 normal forwards; | ||
| transition: opacity 100ms linear; | ||
|
|
||
| & svg { | ||
| width: 10px; | ||
| height: 8px; | ||
| transform: translate(-50%,-50%); | ||
| transition: transform .5s ease; | ||
| margin-top: 1px; | ||
|
|
||
| & * { | ||
| stroke-dasharray: 10; | ||
| stroke-dashoffset: 0; | ||
|
|
||
| fill: none; | ||
| stroke: var(--ck-color-widget-type-around-button-icon); | ||
| stroke-width: 1.5px; | ||
| stroke-linecap: round; | ||
| stroke-linejoin: round; | ||
| } | ||
|
|
||
| & line { | ||
| stroke-dasharray: 7; | ||
| } | ||
| } | ||
|
|
||
| &:hover { | ||
| /* | ||
| * Display the "sonar" around the button when hovered. | ||
| */ | ||
| animation: ck-widget-type-around-button-sonar 1s ease infinite; | ||
|
|
||
| /* | ||
| * Animate active button's icon. | ||
| */ | ||
| & svg { | ||
| & polyline { | ||
| animation: ck-widget-type-around-arrow-dash 2s linear; | ||
| } | ||
|
|
||
| & line { | ||
| animation: ck-widget-type-around-arrow-tip-dash 2s linear; | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| * Styles for the buttons when the widget is NOT selected (but the buttons are visible | ||
| * and still can be hovered). | ||
| */ | ||
| &:not(.ck-widget_selected) > .ck-widget__type-around > .ck-widget__type-around__button { | ||
| background: var(--ck-color-widget-type-around-button-hover); | ||
| } | ||
|
|
||
| /* | ||
| * Styles for the buttons when: | ||
| * - the widget is selected, | ||
| * - or the button is being hovered (regardless of the widget state). | ||
| */ | ||
| &.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button, | ||
| & > .ck-widget__type-around > .ck-widget__type-around__button:hover { | ||
| background: var(--ck-color-widget-type-around-button-active); | ||
|
|
||
| &::after { | ||
| width: calc(var(--ck-widget-type-around-button-size) - 2px); | ||
| height: calc(var(--ck-widget-type-around-button-size) - 2px); | ||
| border-radius: 100px; | ||
| background: linear-gradient(135deg, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,.3) 100%); | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| * Styles for the "before" button when the widget has a selection handle. Because some space | ||
| * is consumed by the handle, the button must be moved slightly to the right to let it breathe. | ||
| */ | ||
| &.ck-widget_with-selection-handle > .ck-widget__type-around > .ck-widget__type-around__button_before { | ||
| margin-left: 20px; | ||
| } | ||
| } | ||
|
|
||
| /* | ||
| * Styles for the buttons when the widget is selected but the user clicked outside of the editor (blurred the editor). | ||
| */ | ||
| .ck-editor__editable.ck-blurred .ck-widget.ck-widget_selected > .ck-widget__type-around > .ck-widget__type-around__button:not(:hover) { | ||
| background: var(--ck-color-widget-type-around-button-blurred-editable); | ||
|
|
||
| & svg * { | ||
| stroke: hsl(0,0%,60%); | ||
| } | ||
| } | ||
|
|
||
| @keyframes ck-widget-type-around-arrow-dash { | ||
| 0% { | ||
| stroke-dashoffset: 10; | ||
| } | ||
| 20%, 100% { | ||
| stroke-dashoffset: 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes ck-widget-type-around-arrow-tip-dash { | ||
| 0%, 20% { | ||
| stroke-dashoffset: 7; | ||
| } | ||
| 40%, 100% { | ||
| stroke-dashoffset: 0; | ||
| } | ||
| } | ||
|
|
||
| @keyframes ck-widget-type-around-button-sonar { | ||
| 0% { | ||
| box-shadow: 0 0 0 0 hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); | ||
| } | ||
| 50% { | ||
| box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-end-alpha)); | ||
| } | ||
| 100% { | ||
| box-shadow: 0 0 0 5px hsla(var(--ck-color-focus-border-coordinates), var(--ck-color-widget-type-around-button-radar-start-alpha)); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,5 @@ | ||
| { | ||
| "Widget toolbar": "The label used by assistive technologies describing a toolbar attached to a widget." | ||
| "Widget toolbar": "The label used by assistive technologies describing a toolbar attached to a widget.", | ||
| "Insert paragraph before block": "The title displayed when a mouse is over a button that inserts a paragraph before a block.", | ||
| "Insert paragraph after block": "The title displayed when a mouse is over a button that inserts a paragraph after a block." | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.