Skip to content
This repository was archived by the owner on Jun 26, 2020. It is now read-only.

Commit

Permalink
Merge pull request #362 from ckeditor/t/ckeditor5/645
Browse files Browse the repository at this point in the history 
Feature: Updated UI components to bring the support for the refreshed Lark theme (see ckeditor/ckeditor5#645).

BREAKING CHANGE: The DOM structure of the dropdown component has changed. Please refer to the documentation to find out more.

BREAKING CHANGE: Basic properties of the balloon panel component have changed (i.e. the location of the arrow, the default positions), which may have an impact on existing integrations.
  • Loading branch information
@Reinmar
Reinmar authored Feb 2, 2018
2 parents 3175a64 + 9e85ec4 commit 623d536
Show file tree
Hide file tree
Showing 10 changed files with 85 additions and 51 deletions.
18 changes: 18 additions & 0 deletions src/dropdown/dropdownview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,10 @@
*/

import View from '../view';
import IconView from '../icon/iconview';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import dropdownArrowIcon from '../../theme/icons/dropdown-arrow.svg';

import '../../theme/components/dropdown/dropdown.css';

Expand Down Expand Up @@ -108,6 +110,14 @@ export default class DropdownView extends View {
*/
this.keystrokes = new KeystrokeHandler();

/**
* The arrow icon of the dropdown.
*
* @readonly
* @member {module:ui/icon/iconview~IconView} #arrowView
*/
const arrowView = this.arrowView = new IconView();

this.setTemplate( {
tag: 'div',

Expand All @@ -120,10 +130,18 @@ export default class DropdownView extends View {

children: [
buttonView,
arrowView,
panelView
]
} );

arrowView.content = dropdownArrowIcon;
arrowView.extendTemplate( {
attributes: {
class: 'ck-dropdown__arrow'
}
} );

buttonView.extendTemplate( {
attributes: {
class: [
Expand Down
1 change: 1 addition & 0 deletions src/labeledinput/labeledinputview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export default class LabeledInputView extends View {
tag: 'div',
attributes: {
class: [
'ck-labeled-input',
bind.if( 'isReadOnly', 'ck-disabled' )
]
},
Expand Down
6 changes: 4 additions & 2 deletions src/panel/balloon/balloonpanelview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -222,8 +222,10 @@ export default class BalloonPanelView extends View {
const positionOptions = Object.assign( {}, {
element: this.element,
positions: [
defaultPositions.southArrowNorth,
defaultPositions.southArrowNorthWest,
defaultPositions.southArrowNorthEast,
defaultPositions.northArrowSouth,
defaultPositions.northArrowSouthWest,
defaultPositions.northArrowSouthEast
],
Expand Down Expand Up @@ -391,7 +393,7 @@ function getDomElement( object ) {
* @default 30
* @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowHorizontalOffset
*/
BalloonPanelView.arrowHorizontalOffset = 30;
BalloonPanelView.arrowHorizontalOffset = 25;

/**
* A vertical offset of the arrow from the edge of the balloon. Controlled by CSS.
Expand All @@ -410,7 +412,7 @@ BalloonPanelView.arrowHorizontalOffset = 30;
* @default 15
* @member {Number} module:ui/panel/balloon/balloonpanelview~BalloonPanelView.arrowVerticalOffset
*/
BalloonPanelView.arrowVerticalOffset = 15;
BalloonPanelView.arrowVerticalOffset = 10;

/**
* A default set of positioning functions used by the balloon panel view
Expand Down
12 changes: 10 additions & 2 deletions tests/dropdown/dropdownview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
import { keyCodes } from '@ckeditor/ckeditor5-utils/src/keyboard';
import ButtonView from '../../src/button/buttonview';
import IconView from '../../src/icon/iconview';
import DropdownPanelView from '../../src/dropdown/dropdownpanelview';

describe( 'DropdownView', () => {
Expand Down Expand Up @@ -54,14 +55,21 @@ describe( 'DropdownView', () => {

it( 'creates #element from template', () => {
expect( view.element.classList.contains( 'ck-dropdown' ) ).to.be.true;
expect( view.element.firstChild ).to.equal( buttonView.element );
expect( view.element.lastChild ).to.equal( panelView.element );
expect( view.element.children ).to.have.length( 3 );
expect( view.element.children[ 0 ] ).to.equal( buttonView.element );
expect( view.element.children[ 1 ] ).to.equal( view.arrowView.element );
expect( view.element.children[ 2 ] ).to.equal( panelView.element );
} );

it( 'sets view#buttonView class', () => {
expect( view.buttonView.element.classList.contains( 'ck-dropdown__button' ) ).to.be.true;
} );

it( 'creates #arrowView icon instance', () => {
expect( view.arrowView ).to.be.instanceOf( IconView );
expect( view.arrowView.element.classList.contains( 'ck-dropdown__arrow' ) );
} );

describe( 'bindings', () => {
describe( 'view#isOpen to view.buttonView#execute', () => {
it( 'is activated', () => {
Expand Down
4 changes: 4 additions & 0 deletions tests/labeledinput/labeledinputview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,10 @@ describe( 'LabeledInputView', () => {
} );

describe( 'template', () => {
it( 'should have the CSS class', () => {
expect( view.element.classList.contains( 'ck-labeled-input' ) ).to.be.true;
} );

it( 'should have label view', () => {
expect( view.template.children[ 0 ] ).to.equal( view.labelView );
} );
Expand Down
76 changes: 40 additions & 36 deletions tests/panel/balloon/balloonpanelview.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -180,8 +180,10 @@ describe( 'BalloonPanelView', () => {
element: view.element,
target,
positions: [
BalloonPanelView.defaultPositions.southArrowNorth,
BalloonPanelView.defaultPositions.southArrowNorthWest,
BalloonPanelView.defaultPositions.southArrowNorthEast,
BalloonPanelView.defaultPositions.northArrowSouth,
BalloonPanelView.defaultPositions.northArrowSouthWest,
BalloonPanelView.defaultPositions.northArrowSouthEast
],
Expand Down Expand Up @@ -212,7 +214,7 @@ describe( 'BalloonPanelView', () => {

view.attachTo( { target, limiter } );

expect( view.position ).to.equal( 'arrow_nw' );
expect( view.position ).to.equal( 'arrow_n' );
} );

it( 'should put balloon on the `south east` side of the target element when ' +
Expand Down Expand Up @@ -297,8 +299,8 @@ describe( 'BalloonPanelView', () => {

view.attachTo( { target, limiter } );

expect( view.top ).to.equal( 15 );
expect( view.left ).to.equal( -80 );
expect( view.top ).to.equal( BalloonPanelView.arrowVerticalOffset );
expect( view.left ).to.equal( -100 );

positionedAncestor.remove();
} );
Expand All @@ -322,8 +324,8 @@ describe( 'BalloonPanelView', () => {

view.attachTo( { target, limiter } );

expect( view.top ).to.equal( 115 );
expect( view.left ).to.equal( 20 );
expect( view.top ).to.equal( BalloonPanelView.arrowVerticalOffset + 100 );
expect( view.left ).to.equal( 0 );

positionedAncestor.remove();
} );
Expand Down Expand Up @@ -669,10 +671,12 @@ describe( 'BalloonPanelView', () => {
} );

describe( 'defaultPositions', () => {
let positions, balloonRect, targetRect;
let positions, balloonRect, targetRect, arrowHOffset, arrowVOffset;

beforeEach( () => {
positions = BalloonPanelView.defaultPositions;
arrowHOffset = BalloonPanelView.arrowHorizontalOffset;
arrowVOffset = BalloonPanelView.arrowVerticalOffset;

targetRect = {
top: 100,
Expand Down Expand Up @@ -701,24 +705,24 @@ describe( 'BalloonPanelView', () => {

it( 'should define the "northArrowSouth" position', () => {
expect( positions.northArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
top: 50 - arrowVOffset,
left: 125,
name: 'arrow_s'
} );
} );

it( 'should define the "northArrowSouthEast" position', () => {
expect( positions.northArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
left: 130,
top: 50 - arrowVOffset,
left: 100 + arrowHOffset,
name: 'arrow_se'
} );
} );

it( 'should define the "northArrowSouthWest" position', () => {
expect( positions.northArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
left: 120,
top: 50 - arrowVOffset,
left: 150 - arrowHOffset,
name: 'arrow_sw'
} );
} );
Expand All @@ -727,24 +731,24 @@ describe( 'BalloonPanelView', () => {

it( 'should define the "northWestArrowSouth" position', () => {
expect( positions.northWestArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
top: 50 - arrowVOffset,
left: 75,
name: 'arrow_s'
} );
} );

it( 'should define the "northWestArrowSouthWest" position', () => {
expect( positions.northWestArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
left: 70,
top: 50 - arrowVOffset,
left: 100 - arrowHOffset,
name: 'arrow_sw'
} );
} );

it( 'should define the "northWestArrowSouthEast" position', () => {
expect( positions.northWestArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
left: 80,
top: 50 - arrowVOffset,
left: 50 + arrowHOffset,
name: 'arrow_se'
} );
} );
Expand All @@ -753,24 +757,24 @@ describe( 'BalloonPanelView', () => {

it( 'should define the "northEastArrowSouth" position', () => {
expect( positions.northEastArrowSouth( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
top: 50 - arrowVOffset,
left: 175,
name: 'arrow_s'
} );
} );

it( 'should define the "northEastArrowSouthEast" position', () => {
expect( positions.northEastArrowSouthEast( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
left: 180,
top: 50 - arrowVOffset,
left: 150 + arrowHOffset,
name: 'arrow_se'
} );
} );

it( 'should define the "northEastArrowSouthWest" position', () => {
expect( positions.northEastArrowSouthWest( targetRect, balloonRect ) ).to.deep.equal( {
top: 35,
left: 170,
top: 50 - arrowVOffset,
left: 200 - arrowHOffset,
name: 'arrow_sw'
} );
} );
Expand All @@ -779,24 +783,24 @@ describe( 'BalloonPanelView', () => {

it( 'should define the "southArrowNorth" position', () => {
expect( positions.southArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
top: 200 + arrowVOffset,
left: 125,
name: 'arrow_n'
} );
} );

it( 'should define the "southArrowNorthEast" position', () => {
expect( positions.southArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
left: 130,
top: 200 + arrowVOffset,
left: 100 + arrowHOffset,
name: 'arrow_ne'
} );
} );

it( 'should define the "southArrowNorthWest" position', () => {
expect( positions.southArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
left: 120,
top: 200 + arrowVOffset,
left: 150 - arrowHOffset,
name: 'arrow_nw'
} );
} );
Expand All @@ -805,24 +809,24 @@ describe( 'BalloonPanelView', () => {

it( 'should define the "southWestArrowNorth" position', () => {
expect( positions.southWestArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
top: 200 + arrowVOffset,
left: 75,
name: 'arrow_n'
} );
} );

it( 'should define the "southWestArrowNorthWest" position', () => {
expect( positions.southWestArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
left: 70,
top: 200 + arrowVOffset,
left: 100 - arrowHOffset,
name: 'arrow_nw'
} );
} );

it( 'should define the "southWestArrowNorthEast" position', () => {
expect( positions.southWestArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
left: 80,
top: 200 + arrowVOffset,
left: 50 + arrowHOffset,
name: 'arrow_ne'
} );
} );
Expand All @@ -831,24 +835,24 @@ describe( 'BalloonPanelView', () => {

it( 'should define the "southEastArrowNorth" position', () => {
expect( positions.southEastArrowNorth( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
top: 200 + arrowVOffset,
left: 175,
name: 'arrow_n'
} );
} );

it( 'should define the "southEastArrowNorthEast" position', () => {
expect( positions.southEastArrowNorthEast( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
left: 180,
top: 200 + arrowVOffset,
left: 150 + arrowHOffset,
name: 'arrow_ne'
} );
} );

it( 'should define the "southEastArrowNorthWest" position', () => {
expect( positions.southEastArrowNorthWest( targetRect, balloonRect ) ).to.deep.equal( {
top: 215,
left: 170,
top: 200 + arrowVOffset,
left: 200 - arrowHOffset,
name: 'arrow_nw'
} );
} );
Expand Down
5 changes: 0 additions & 5 deletions theme/components/button/button.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,8 @@ a.ck-button {
@mixin ck-unselectable;
@mixin ck-tooltip_enabled;

display: inline-block;
position: relative;

@mixin ck-button-icon {
display: inline-block;
}

&.ck-button_with-text {
& .ck-button__label {
display: inline-block;
Expand Down
6 changes: 1 addition & 5 deletions theme/components/dropdown/dropdown.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,11 +9,7 @@
display: inline-block;
position: relative;

/* A triangle displayed to indicate this is actually a dropdown. */
&::after {
content: '';
width: 0;
height: 0;
& .ck-dropdown__arrow {
pointer-events: none;
z-index: var(--ck-z-default);

Expand Down
Loading

0 comments on commit 623d536

Please sign in to comment.