Skip to content

Commit

Permalink
Merge pull request #8232 from ckeditor/i/7704
Browse files Browse the repository at this point in the history 
Fix (link): Improve link balloon buttons separators look on mobiles. Closes #7704.
  • Loading branch information
@jodator
jodator committed Oct 20, 2020
2 parents f60cbd5 + 172a544 commit 6aecaf8
Show file tree
Hide file tree
Showing 13 changed files with 58 additions and 168 deletions.
4 changes: 3 additions & 1 deletion packages/ckeditor5-image/src/imagetextalternative/ui/textalternativeformview.js
View file
Expand Up @@ -23,6 +23,7 @@ import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
import '../../../theme/textalternativeform.css';
import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';

/**
* The TextAlternativeFormView class.
Expand Down Expand Up @@ -111,7 +112,8 @@ export default class TextAlternativeFormView extends View {
attributes: {
class: [
'ck',
'ck-text-alternative-form'
'ck-text-alternative-form',
'ck-responsive-form'
],

// https://github.com/ckeditor/ckeditor5-image/issues/40
Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-image/tests/imagetextalternative/ui/textalternativeformview.js
View file
Expand Up @@ -29,6 +29,7 @@ describe( 'TextAlternativeFormView', () => {

expect( view.element.classList.contains( 'ck' ) ).to.be.true;
expect( view.element.classList.contains( 'ck-text-alternative-form' ) ).to.be.true;
expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.be.true;
expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
} );

Expand Down
4 changes: 3 additions & 1 deletion packages/ckeditor5-link/src/ui/linkactionsview.js
View file
Expand Up @@ -21,6 +21,7 @@ import { ensureSafeUrl } from '../utils';
import unlinkIcon from '../../theme/icons/unlink.svg';
import pencilIcon from '@ckeditor/ckeditor5-core/theme/icons/pencil.svg';
import '../../theme/linkactions.css';
import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';

/**
* The link actions view class. This view displays the link preview, allows
Expand Down Expand Up @@ -117,7 +118,8 @@ export default class LinkActionsView extends View {
attributes: {
class: [
'ck',
'ck-link-actions'
'ck-link-actions',
'ck-responsive-form'
],

// https://github.com/ckeditor/ckeditor5-link/issues/90
Expand Down
5 changes: 3 additions & 2 deletions packages/ckeditor5-link/src/ui/linkformview.js
View file
Expand Up @@ -24,6 +24,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
import '../../theme/linkform.css';
import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';

/**
* The link form view controller class.
Expand Down Expand Up @@ -133,10 +134,10 @@ export default class LinkFormView extends View {
}
} );

const classList = [ 'ck', 'ck-link-form' ];
const classList = [ 'ck', 'ck-link-form', 'ck-responsive-form' ];

if ( linkCommand.manualDecorators.length ) {
classList.push( 'ck-link-form_layout-vertical' );
classList.push( 'ck-link-form_layout-vertical', 'ck-vertical-form' );
}

this.setTemplate( {
Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-link/tests/ui/linkactionsview.js
View file
Expand Up @@ -26,6 +26,7 @@ describe( 'LinkActionsView', () => {
it( 'should create element from template', () => {
expect( view.element.classList.contains( 'ck' ) ).to.true;
expect( view.element.classList.contains( 'ck-link-actions' ) ).to.true;
expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true;
expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
} );

Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-link/tests/ui/linkformview.js
View file
Expand Up @@ -39,6 +39,7 @@ describe( 'LinkFormView', () => {
it( 'should create element from template', () => {
expect( view.element.classList.contains( 'ck' ) ).to.true;
expect( view.element.classList.contains( 'ck-link-form' ) ).to.true;
expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true;
expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
} );

Expand Down
4 changes: 3 additions & 1 deletion packages/ckeditor5-media-embed/src/ui/mediaformview.js
View file
Expand Up @@ -23,6 +23,7 @@ import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
import '../../theme/mediaform.css';
import '@ckeditor/ckeditor5-ui/theme/components/responsive-form/responsiveform.css';

/**
* The media form view controller class.
Expand Down Expand Up @@ -132,7 +133,8 @@ export default class MediaFormView extends View {
attributes: {
class: [
'ck',
'ck-media-form'
'ck-media-form',
'ck-responsive-form'
],

tabindex: '-1'
Expand Down
1 change: 1 addition & 0 deletions packages/ckeditor5-media-embed/tests/ui/mediaformview.js
View file
Expand Up @@ -35,6 +35,7 @@ describe( 'MediaFormView', () => {
it( 'should create element from template', () => {
expect( view.element.classList.contains( 'ck' ) ).to.true;
expect( view.element.classList.contains( 'ck-media-form' ) ).to.true;
expect( view.element.classList.contains( 'ck-responsive-form' ) ).to.true;
expect( view.element.getAttribute( 'tabindex' ) ).to.equal( '-1' );
} );

Expand Down
67 changes: 0 additions & 67 deletions packages/ckeditor5-theme-lark/theme/ckeditor5-image/textalternativeform.css
View file

This file was deleted.

25 changes: 0 additions & 25 deletions packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkactions.css
View file
Expand Up @@ -11,8 +11,6 @@
@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";

.ck.ck-link-actions {
padding: var(--ck-spacing-standard);

& .ck-button.ck-link-actions__preview {
padding-left: 0;
padding-right: 0;
Expand Down Expand Up @@ -52,11 +50,6 @@
}
}

&:focus {
/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
outline: none;
}

@mixin ck-dir ltr {
& .ck-button:not(:first-child) {
margin-left: var(--ck-spacing-standard);
Expand All @@ -70,9 +63,6 @@
}

@mixin ck-media-phone {
padding: 0;
width: calc(.8 * var(--ck-input-text-width));

& .ck-button.ck-link-actions__preview {
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

Expand All @@ -83,27 +73,12 @@
}

& .ck-button:not(.ck-link-actions__preview) {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);

border-radius: 0;
border: 0;
border-top: 1px solid var(--ck-color-base-border);

@mixin ck-dir ltr {
margin-left: 0;

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}

@mixin ck-dir rtl {
margin-left: 0;

&:last-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}
Expand Down
65 changes: 0 additions & 65 deletions packages/ckeditor5-theme-lark/theme/ckeditor5-link/linkform.css
View file
Expand Up @@ -3,69 +3,8 @@
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-link-form {
padding: var(--ck-spacing-standard);

&:focus {
/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
outline: none;
}

@mixin ck-dir ltr {
& > :not(:first-child) {
margin-left: var(--ck-spacing-standard);
}
}

@mixin ck-dir rtl {
& > :not(:last-child) {
margin-left: var(--ck-spacing-standard);
}
}

@mixin ck-media-phone {
padding: 0;
width: calc(.8 * var(--ck-input-text-width));

& .ck-labeled-field-view {
margin: var(--ck-spacing-standard) var(--ck-spacing-standard) 0;

& .ck-input-text {
min-width: 0;
width: 100%;
}
}

& .ck-button {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);

border-radius: 0;
border: 0;
border-top: 1px solid var(--ck-color-base-border);

@mixin ck-dir ltr {
margin-left: 0;

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}

@mixin ck-dir rtl {
margin-left: 0;

&:last-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}
}

/*
* Style link form differently when manual decorators are available.
* See: https://github.com/ckeditor/ckeditor5-link/issues/186.
Expand Down Expand Up @@ -93,10 +32,6 @@

@mixin ck-dir ltr {
margin-left: 0;

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}

@mixin ck-dir rtl {
Expand Down
18 changes: 12 additions & 6 deletions ...theme/ckeditor5-media-embed/mediaform.css → ...onents/responsive-form/responsiveform.css
View file
Expand Up @@ -6,10 +6,15 @@
@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";
@import "@ckeditor/ckeditor5-ui/theme/mixins/_dir.css";

.ck.ck-media-form {
.ck-vertical-form .ck-button::after {
border-right: 1px solid var(--ck-color-base-border);
}

.ck.ck-responsive-form {
padding: var(--ck-spacing-standard);

&:focus {
/* https://github.com/ckeditor/ckeditor5-link/issues/90 */
outline: none;
}

Expand Down Expand Up @@ -43,7 +48,8 @@
}
}

& .ck-button {
/* 'button' selector must be used because those styles shouldn't be added to other elements, like 'a'. Example in LinkActionsView. */
& button.ck-button {
padding: var(--ck-spacing-standard);
margin-top: var(--ck-spacing-standard);

Expand All @@ -53,10 +59,6 @@

@mixin ck-dir ltr {
margin-left: 0;

&:first-of-type {
border-right: 1px solid var(--ck-color-base-border);
}
}

@mixin ck-dir rtl {
Expand All @@ -66,6 +68,10 @@
border-right: 1px solid var(--ck-color-base-border);
}
}

&::after {
border-right: 1px solid var(--ck-color-base-border);
}
}
}
}
30 changes: 30 additions & 0 deletions packages/ckeditor5-ui/theme/components/responsive-form/responsiveform.css
View file
@@ -0,0 +1,30 @@
/*
* Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
* For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
*/

@import "@ckeditor/ckeditor5-ui/theme/mixins/_rwd.css";

.ck-vertical-form .ck-button::after {
content: "";
width: 0;
position: absolute;
right: -1px;
top: var(--ck-spacing-small);
bottom: var(--ck-spacing-small);
z-index: 1;
}

.ck.ck-responsive-form {
@mixin ck-media-phone {
& .ck-button::after {
content: "";
width: 0;
position: absolute;
right: -1px;
top: var(--ck-spacing-small);
bottom: var(--ck-spacing-small);
z-index: 1;
}
}
}

0 comments on commit 6aecaf8

Please sign in to comment.