|
@@ -10,7 +10,6 @@ import testUtils from '@ckeditor/ckeditor5-ui/tests/_utils/utils';
|
|
|
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
|
|
import Collection from '@ckeditor/ckeditor5-utils/src/collection';
|
|
|
import Model from '@ckeditor/ckeditor5-ui/src/model';
|
|
import Model from '@ckeditor/ckeditor5-ui/src/model';
|
|
|
import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
import View from '@ckeditor/ckeditor5-ui/src/view';
|
|
|
-import Template from '@ckeditor/ckeditor5-ui/src/template';
|
|
|
|
|
|
|
|
|
|
import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
|
|
import IconView from '@ckeditor/ckeditor5-ui/src/icon/iconview';
|
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
|
|
@@ -37,7 +36,7 @@ class ToolbarNewlineView extends View {
|
|
|
constructor() {
|
|
constructor() {
|
|
|
super();
|
|
super();
|
|
|
|
|
|
|
|
- this.template = new Template( {
|
|
|
|
|
|
|
+ this.setTemplate( {
|
|
|
tag: 'span',
|
|
tag: 'span',
|
|
|
attributes: {
|
|
attributes: {
|
|
|
class: 'ck-toolbar__newline'
|
|
class: 'ck-toolbar__newline'
|
|
@@ -114,6 +113,10 @@ function renderButton() {
|
|
|
const roundedButton = button( { label: 'Rounded corners' } );
|
|
const roundedButton = button( { label: 'Rounded corners' } );
|
|
|
const boldButton = button( { label: 'Bold text' } );
|
|
const boldButton = button( { label: 'Bold text' } );
|
|
|
|
|
|
|
|
|
|
+ ui.buttonTypes.add( actionButton );
|
|
|
|
|
+ ui.buttonTypes.add( roundedButton );
|
|
|
|
|
+ ui.buttonTypes.add( boldButton );
|
|
|
|
|
+
|
|
|
// TODO: It requires model interface.
|
|
// TODO: It requires model interface.
|
|
|
actionButton.element.classList.add( 'ck-button-action' );
|
|
actionButton.element.classList.add( 'ck-button-action' );
|
|
|
|
|
|
|
@@ -123,10 +126,6 @@ function renderButton() {
|
|
|
// TODO: It requires model interface.
|
|
// TODO: It requires model interface.
|
|
|
boldButton.element.classList.add( 'ck-button-bold' );
|
|
boldButton.element.classList.add( 'ck-button-bold' );
|
|
|
|
|
|
|
|
- ui.buttonTypes.add( actionButton );
|
|
|
|
|
- ui.buttonTypes.add( roundedButton );
|
|
|
|
|
- ui.buttonTypes.add( boldButton );
|
|
|
|
|
-
|
|
|
|
|
// --- Icon ------------------------------------------------------------
|
|
// --- Icon ------------------------------------------------------------
|
|
|
|
|
|
|
|
ui.buttonIcon.add( button( {
|
|
ui.buttonIcon.add( button( {
|
|
@@ -139,11 +138,11 @@ function renderButton() {
|
|
|
icon: italicIcon
|
|
icon: italicIcon
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ ui.buttonIconCustom.add( styledButton );
|
|
|
|
|
+
|
|
|
// TODO: It probably requires model interface.
|
|
// TODO: It probably requires model interface.
|
|
|
styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
|
|
styledButton.element.setAttribute( 'style', 'border-radius: 100px; border: 0' );
|
|
|
|
|
|
|
|
- ui.buttonIconCustom.add( styledButton );
|
|
|
|
|
-
|
|
|
|
|
ui.buttonIconStates.add( button( {
|
|
ui.buttonIconStates.add( button( {
|
|
|
label: 'Disabled',
|
|
label: 'Disabled',
|
|
|
icon: boldIcon,
|
|
icon: boldIcon,
|
|
@@ -156,11 +155,11 @@ function renderButton() {
|
|
|
isEnabled: false
|
|
isEnabled: false
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ ui.buttonIconStates.add( disabledActionButton );
|
|
|
|
|
+
|
|
|
// TODO: It requires model interface.
|
|
// TODO: It requires model interface.
|
|
|
disabledActionButton.element.classList.add( 'ck-button-action' );
|
|
disabledActionButton.element.classList.add( 'ck-button-action' );
|
|
|
|
|
|
|
|
- ui.buttonIconStates.add( disabledActionButton );
|
|
|
|
|
-
|
|
|
|
|
ui.buttonIconStates.add( button( {
|
|
ui.buttonIconStates.add( button( {
|
|
|
label: 'Bold',
|
|
label: 'Bold',
|
|
|
withText: false,
|
|
withText: false,
|
|
@@ -189,10 +188,10 @@ function renderButton() {
|
|
|
icon: boldIcon
|
|
icon: boldIcon
|
|
|
} );
|
|
} );
|
|
|
|
|
|
|
|
|
|
+ ui[ `buttonResponsive${ i }` ].add( notextButton );
|
|
|
|
|
+
|
|
|
// TODO: It requires model interface.
|
|
// TODO: It requires model interface.
|
|
|
notextButton.element.classList.add( 'ck-button-action' );
|
|
notextButton.element.classList.add( 'ck-button-action' );
|
|
|
-
|
|
|
|
|
- ui[ `buttonResponsive${ i }` ].add( notextButton );
|
|
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
// --- Tooltip ------------------------------------------------------------
|
|
// --- Tooltip ------------------------------------------------------------
|
|
@@ -282,10 +281,10 @@ function renderToolbar() {
|
|
|
button()
|
|
button()
|
|
|
] );
|
|
] );
|
|
|
|
|
|
|
|
- wrapToolbar.element.style.width = '150px';
|
|
|
|
|
-
|
|
|
|
|
ui.toolbarWrap.add( wrapToolbar );
|
|
ui.toolbarWrap.add( wrapToolbar );
|
|
|
|
|
|
|
|
|
|
+ wrapToolbar.element.style.width = '150px';
|
|
|
|
|
+
|
|
|
// --- Separator ------------------------------------------------------------
|
|
// --- Separator ------------------------------------------------------------
|
|
|
|
|
|
|
|
ui.toolbarSeparator.add( toolbar( [
|
|
ui.toolbarSeparator.add( toolbar( [
|