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

t/103: Refactored tooltip styles to allow tooltips which are no longer pseudo-elements #104

Merged
merged 4 commits into from
Jul 26, 2017
Merged

t/103: Refactored tooltip styles to allow tooltips which are no longer pseudo-elements #104

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f1927cd
Other: Refactored tooltip styles to allow tooltips which are no longe…
oleq Jul 24, 2017
c8d4698
Adjusted spacing of the tooltips.
oleq Jul 24, 2017
ff1732d
Tests: Added tooltip section to the theme's manual test.
oleq Jul 25, 2017
4ff480f
Used ButtonView#tooltipPosition attribute.
oleq Jul 25, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions tests/manual/theme.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,6 +66,8 @@ <h3>Button: Responsiveness</h3>
</div>
</div>

<h3>Button: Tooltip</h3>
<div id="button-tooltip" class="ck-reset_all"></div>
<hr/>

<h2>Dropdown</h2>
Expand Down
21 changes: 20 additions & 1 deletion tests/manual/theme.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,7 @@ const ui = testUtils.createTestUIView( {
'buttonResponsive1': '#button-responsive-1',
'buttonResponsive2': '#button-responsive-2',
'buttonResponsive3': '#button-responsive-3',
'buttonTooltip': '#button-tooltip',

dropdown: '#dropdown',

Expand Down Expand Up @@ -193,6 +194,22 @@ function renderButton() {

ui[ `buttonResponsive${ i }` ].add( notextButton );
}

// --- Tooltip ------------------------------------------------------------

ui.buttonTooltip.add( button( {
label: 'This button has a tooltip (south)',
withText: true,
tooltip: 'The content of the tooltip',
} ) );

ui.buttonTooltip.add( button( {
label: 'This one too – north',
withText: true,
keystroke: 'Ctrl+N',
tooltip: true,
tooltipPosition: 'n'
} ) );
}

function renderDropdown() {
Expand Down Expand Up @@ -332,12 +349,14 @@ function button( {
isEnabled = true,
isOn = false,
withText = true,
keystroke = null,
tooltip,
tooltipPosition = 's',
icon
} = {} ) {
const button = new ButtonView();

button.set( { label, isEnabled, isOn, withText, icon, tooltip } );
button.set( { label, isEnabled, isOn, withText, icon, keystroke, tooltip, tooltipPosition } );

return button;
}
Expand Down
112 changes: 58 additions & 54 deletions theme/components/tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,71 +3,75 @@

$ck-tooltip-arrow-size: 5px;

[data-ck-tooltip] {
@include ck-tooltip__elements {
left: 50%;
.ck-tooltip {
left: 50%;

// For the transition to work, the tooltip must be controlled
// using visibility+opacity. A delay prevents a "tooltip avalanche"
// i.e. when scanning the toolbar with mouse cursor.
transition: opacity .2s ease-in-out .2s;
}
&__text {
@include ck-rounded-corners();

@include ck-tooltip__main {
border-radius: $ck-border-radius;
color: ck-color( 'background' );
font-size: ck-font-size( -2 );
background: ck-color( 'text' );
padding: ck-spacing( 'small' ) ck-spacing( 'medium' );
}
background: ck-color( 'text' );
position: relative;
left: -50%;
line-height: 1.5;

@include ck-tooltip__arrow {
border-style: solid;
&::after {
border-style: solid;
left: 50%;
}
}
}

/**
* A class once applied displays the tooltip south of the element.
*
* [element]
* ^
* +-----------+
* | Tooltip |
* +-----------+
*/
.ck-tooltip_s {
@include ck-tooltip__main {
bottom: -$ck-tooltip-arrow-size + 1;
transform: translate( -50%, 100% );
}
/**
* A class once applied displays the tooltip south of the element.
*
* [element]
* ^
* +-----------+
* | Tooltip |
* +-----------+
*/
&.ck-tooltip_s {
bottom: - $ck-tooltip-arrow-size;
transform: translateY( 100% );

@include ck-tooltip__arrow {
bottom: 0;
transform: translate( -50%, 100% );
border-color: transparent transparent ck-color( 'text' ) transparent;
border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;
}
}
.ck-tooltip__text::after {
top: -$ck-tooltip-arrow-size;
transform: translateX( -50% );
border-color: transparent transparent ck-color( 'text' ) transparent;
border-width: 0 $ck-tooltip-arrow-size $ck-tooltip-arrow-size $ck-tooltip-arrow-size;

/**
* A class once applied displays the tooltip north of the element.
*
* +-----------+
* | Tooltip |
* +-----------+
* V
* [element]
*/
.ck-tooltip_n {
@include ck-tooltip__main {
top: -$ck-tooltip-arrow-size + 1;
transform: translate( -50%, -100% );
}
}

@include ck-tooltip__arrow {
top: 0;
transform: translate( -50%, -100% );
border-color: ck-color( 'text' ) transparent transparent transparent;
border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
/**
* A class once applied displays the tooltip north of the element.
*
* +-----------+
* | Tooltip |
* +-----------+
* V
* [element]
*/
&.ck-tooltip_n {
top: -$ck-tooltip-arrow-size;
transform: translateY( -100% );

.ck-tooltip__text::after {
bottom: -$ck-tooltip-arrow-size;
transform: translateX( -50% );
border-color: ck-color( 'text' ) transparent transparent transparent;
border-width: $ck-tooltip-arrow-size $ck-tooltip-arrow-size 0 $ck-tooltip-arrow-size;
}
}
}

.ck-tooltip,
.ck-tooltip__text::after {
// For the transition to work, the tooltip must be controlled
// using visibility+opacity. A delay prevents a "tooltip avalanche"
// i.e. when scanning the toolbar with mouse cursor.
transition: opacity .2s ease-in-out .2s;
}