Procházet zdrojové kódy

Merge branch 'master' of github.com:ckeditor/ckeditor5-ui

Kamil Piechaczek před 8 roky
rodič
revize
a9c85e1122

+ 7 - 3
packages/ckeditor5-ui/src/icon/iconview.js

@@ -75,9 +75,13 @@ export default class IconView extends View {
 	 */
 	_updateXMLContent() {
 		if ( this.content ) {
-			const svg = new DOMParser()
-				.parseFromString( this.content.trim(), 'image/svg+xml' )
-				.firstChild;
+			const parsed = new DOMParser().parseFromString( this.content.trim(), 'image/svg+xml' );
+			const svg = parsed.querySelector( 'svg' );
+			const viewBox = svg.getAttribute( 'viewBox' );
+
+			if ( viewBox ) {
+				this.viewBox = viewBox;
+			}
 
 			this.element.innerHTML = '';
 

+ 6 - 6
packages/ckeditor5-ui/tests/button/buttonview.js

@@ -99,7 +99,7 @@ describe( 'ButtonView', () => {
 
 			it( 'it reacts to #tooltipPosition attribute', () => {
 				view.tooltip = 'foo';
-				view.icon = 'bar';
+				view.icon = '<svg></svg>';
 
 				expect( view.tooltipPosition ).to.equal( 's' );
 				expect( view.tooltipView.position ).to.equal( 's' );
@@ -240,22 +240,22 @@ describe( 'ButtonView', () => {
 
 		it( 'is set when view#icon is defined', () => {
 			view = new ButtonView( locale );
-			view.icon = 'foo';
+			view.icon = '<svg></svg>';
 			view.render();
 
 			expect( view.element.childNodes ).to.have.length( 3 );
 			expect( view.element.childNodes[ 0 ] ).to.equal( view.iconView.element );
 
 			expect( view.iconView ).to.instanceOf( IconView );
-			expect( view.iconView.content ).to.equal( 'foo' );
+			expect( view.iconView.content ).to.equal( '<svg></svg>' );
 
-			view.icon = 'bar';
-			expect( view.iconView.content ).to.equal( 'bar' );
+			view.icon = '<svg>bar</svg>';
+			expect( view.iconView.content ).to.equal( '<svg>bar</svg>' );
 		} );
 
 		it( 'is destroyed with the view', () => {
 			view = new ButtonView( locale );
-			view.icon = 'foo';
+			view.icon = '<svg></svg>';
 			view.render();
 
 			const spy = sinon.spy( view.iconView, 'destroy' );

+ 6 - 6
packages/ckeditor5-ui/tests/dropdown/button/createbuttondropdown.js

@@ -18,7 +18,7 @@ describe( 'createButtonDropdown', () => {
 
 	beforeEach( () => {
 		locale = { t() {} };
-		buttons = [ 'foo', 'bar' ].map( icon => {
+		buttons = [ '<svg>foo</svg>', '<svg>bar</svg>' ].map( icon => {
 			const button = new ButtonView();
 			button.icon = icon;
 
@@ -189,19 +189,19 @@ describe( 'createButtonDropdown', () => {
 
 			it( 'should be set to defaultIcon if defined and on button is on', () => {
 				const model = new Model( {
-					defaultIcon: 'baz',
+					defaultIcon: '<svg>baz</svg>',
 					buttons
 				} );
 
 				view = createButtonDropdown( model, locale );
 				view.render();
 
-				expect( view.buttonView.icon ).to.equal( 'baz' );
+				expect( view.buttonView.icon ).to.equal( '<svg>baz</svg>' );
 			} );
 
 			it( 'should not bind icons if staticIcon is set', () => {
 				const model = new Model( {
-					defaultIcon: 'baz',
+					defaultIcon: '<svg>baz</svg>',
 					staticIcon: true,
 					buttons
 				} );
@@ -209,10 +209,10 @@ describe( 'createButtonDropdown', () => {
 				view = createButtonDropdown( model, locale );
 				view.render();
 
-				expect( view.buttonView.icon ).to.equal( 'baz' );
+				expect( view.buttonView.icon ).to.equal( '<svg>baz</svg>' );
 				view.toolbarView.items.get( 1 ).isOn = true;
 
-				expect( view.buttonView.icon ).to.equal( 'baz' );
+				expect( view.buttonView.icon ).to.equal( '<svg>baz</svg>' );
 			} );
 		} );
 	} );

+ 15 - 0
packages/ckeditor5-ui/tests/icon/iconview.js

@@ -50,6 +50,21 @@ describe( 'IconView', () => {
 				view.content = '<svg version="1.1" xmlns="http://www.w3.org/2000/svg"></svg>';
 				expect( view.element.innerHTML = '' );
 			} );
+
+			it( 'works for #content with more than <svg> declaration', () => {
+				expect( view.element.innerHTML = '' );
+
+				view.content =
+					'<?xml version="1.0" encoding="utf-8"?><svg version="1.1" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
+				expect( view.element.innerHTML = '<g id="test"></g>' );
+			} );
+
+			it( 'should respect parsed <svg>\'s viewBox attribute', () => {
+				expect( view.element.innerHTML = '' );
+
+				view.content = '<svg version="1.1" viewBox="10 20 30 40" xmlns="http://www.w3.org/2000/svg"><g id="test"></g></svg>';
+				expect( view.viewBox ).to.equal( '10 20 30 40' );
+			} );
 		} );
 	} );
 } );

+ 29 - 5
packages/ckeditor5-ui/tests/manual/icon/icon.html

@@ -1,13 +1,37 @@
 <head>
 	<style>
-		#inline-svg li {
-			width: 150px;
+		.test-cases li {
+			width: 200px;
 			text-align: center;
-			min-height: 60px;
 		}
 	</style>
 </head>
 
-<h2>Icons with embed SVG</h2>
+<div class="test-cases">
+	<h2>Icon sizing</h2>
 
-<ol id="inline-svg"></ol>
+	<ol>
+		<li id="icon20"></li>
+		<li id="icon40"></li>
+		<li id="icon60"></li>
+	</ol>
+
+	<h2>Icon colors</h2>
+
+	<ol>
+		<li>icon <span id="icon-red"></span> has own color</li>
+		<li style="color: blue">icon <span id="icon-blue-inherited"></span> inherits color</li>
+	</ol>
+
+	<h2>Icon with dirty markup</h2>
+
+	<ol>
+		<li id="icon-dirty"></li>
+	</ol>
+
+	<h2>Icon with own viewBox</h2>
+
+	<ol>
+		<li id="icon-view-box"></li>
+	</ol>
+</div>

+ 51 - 57
packages/ckeditor5-ui/tests/manual/icon/icon.js

@@ -3,58 +3,60 @@
  * For licensing, see LICENSE.md.
  */
 
-/* globals document */
-
 import IconView from '../../../src/icon/iconview';
-
-const wrapper = document.querySelector( '#inline-svg' );
-
-const icon = `
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg"
- xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
-    <!-- Generator: Sketch 3.5.2 (25235) - http://www.bohemiancoding.com/sketch -->
-    <title>image</title>
-    <desc>Created with Sketch.</desc>
-    <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="image" sketch:type="MSArtboardGroup" fill="#454545">
-            <g id="icon:image" sketch:type="MSLayerGroup" transform="translate(2.000000, 3.000000)">
-                <path d="M0,11.9941413 C0,13.1019465 0.894513756,14 1.99406028,14 L14.0059397,14 C15.1072288,14 16,13.1029399 16,11.9941413
-                 L16,2.00585866 C16,0.898053512 15.1054862,0 14.0059397,0 L1.99406028,0 C0.892771196,0 0,0.897060126 0,2.00585866
-                 L0,11.9941413 Z M1,2.00247329 C1,1.44882258 1.44994876,1 2.00684547,1 L13.9931545,1 C14.5492199,1 15,1.45576096
-                 15,2.00247329 L15,11.9975267 C15,12.5511774 14.5500512,13 13.9931545,13 L2.00684547,13 C1.45078007,13 1,12.544239
-                 1,11.9975267 L1,2.00247329 Z M2.0237314,12.0028573 L14,12.0028573 L14,8.90598928 L11.1099289,4.64285714
-                 L8.01350775,9.9000001 L5.01091767,7.79714291 L2,10.9601769 L2.0237314,12.0028573 Z M4.40625001,3 C3.62959688,3
-                  3,3.62360071 3,4.39285714 C3,5.16210429 3.62959688,5.78571429 4.40625001,5.78571429 C5.18289376,5.78571429
-                  5.81250002,5.16210429 5.81250002,4.39285714 C5.81250002,3.62360071 5.18289376,3 4.40625001,3 L4.40625001,3 Z"
-                  id="path4700" sketch:type="MSShapeGroup"></path>
-            </g>
-        </g>
-    </g>
+import testUtils from '../../_utils/utils';
+
+const icon = `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg">
+	<path d="M2 14.994C2 16.102 2.895 17 3.994 17h12.012A2 2 0 0 0 18 14.994V5.006A2.001 2.001 0 0 0
+	16.006 3H3.994A2 2 0 0 0 2 5.006v9.988zm1-9.992C3 4.45 3.45 4 4.007 4h11.986A1.01 1.01 0 0 1 17
+	5.002v9.996C17 15.55 16.55 16 15.993 16H4.007A1.01 1.01 0 0 1 3 14.998V5.002zm1.024
+	10H16v-3.096l-2.89-4.263-3.096 5.257-3.003-2.103L4 13.96l.024 1.043zM6.406 6A1.4 1.4 0 0 0 5
+	7.393a1.4 1.4 0 0 0 1.406 1.393 1.4 1.4 0 0 0 1.407-1.393A1.4 1.4 0 0 0 6.406 6z"
+	fill="#454545" fill-rule="evenodd"/>
 </svg>`;
 
-// Small.
-addCase( renderIcon( icon, 20 ) );
-
-// Medium.
-addCase( renderIcon( icon, 40 ) );
-
-// Large.
-addCase( renderIcon( icon, 60 ) );
-
-// Color.
-addCase( renderIcon( icon, 60, 'red' ) );
-
-// Inherited color.
-const iconWrapper = document.createElement( 'p' );
-iconWrapper.style.color = 'blue';
-iconWrapper.appendChild( document.createTextNode( 'foo' ) );
-iconWrapper.appendChild( renderIcon( icon, 60 ) );
-iconWrapper.appendChild( document.createTextNode( 'bar' ) );
-addCase( iconWrapper );
+const iconDirty = `<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg xmlns="http://www.w3.org/2000/svg">
+	<title>Title</title>
+	<desc>Desc</desc>
+	<path d="M2 14.994C2 16.102 2.895 17 3.994 17h12.012A2 2 0 0 0 18 14.994V5.006A2.001 2.001 0 0 0
+	16.006 3H3.994A2 2 0 0 0 2 5.006v9.988zm1-9.992C3 4.45 3.45 4 4.007 4h11.986A1.01 1.01 0 0 1 17
+	5.002v9.996C17 15.55 16.55 16 15.993 16H4.007A1.01 1.01 0 0 1 3 14.998V5.002zm1.024
+	10H16v-3.096l-2.89-4.263-3.096 5.257-3.003-2.103L4 13.96l.024 1.043zM6.406 6A1.4 1.4 0 0 0 5
+	7.393a1.4 1.4 0 0 0 1.406 1.393 1.4 1.4 0 0 0 1.407-1.393A1.4 1.4 0 0 0 6.406 6z"
+	fill="#454545" fill-rule="evenodd"/>
+</svg>`;
 
-function renderIcon( content, size, color ) {
+const iconViewBox = `<svg viewBox="0 0 35 35" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.5 26.24c0 1.939 1.566 3.51 3.49 3.51h21.02a3.5 3.5 0 0 0 3.49-3.51V8.76a3.502 3.502 0 0
+0-3.49-3.51H6.99A3.5 3.5 0 0 0 3.5 8.76v17.48zM5.25 8.753C5.25 7.787 6.038 7 7.012 7h20.976a1.767 1.767 0 0
+1 1.762 1.753v17.494c0 .965-.788 1.753-1.762 1.753H7.012a1.767 1.767 0 0 1-1.762-1.753V8.753zm1.792
+17.5H28v-5.419l-5.058-7.46-5.418 9.2-5.255-3.68L7 24.43l.042 1.825v-.002zM11.21 10.5a2.45 2.45 0 0 0-2.46
+2.438 2.45 2.45 0 0 0 2.46 2.438 2.45 2.45 0 0 0 2.463-2.438A2.45 2.45 0 0 0 11.21 10.5z" fill="#454545"
+fill-rule="evenodd"/></svg>`;
+
+const ui = testUtils.createTestUIView( {
+	'icon20': '#icon20',
+	'icon40': '#icon40',
+	'icon60': '#icon60',
+	'iconRed': '#icon-red',
+	'iconBlueInherited': '#icon-blue-inherited',
+	'iconDirty': '#icon-dirty',
+	'iconViewBox': '#icon-view-box'
+} );
+
+ui.icon20.add( getIcon( icon, 20 ) );
+ui.icon40.add( getIcon( icon, 40 ) );
+ui.icon60.add( getIcon( icon, 60 ) );
+
+ui.iconRed.add( getIcon( icon, 20, 'red' ) );
+ui.iconBlueInherited.add( getIcon( icon, 20 ) );
+
+ui.iconDirty.add( getIcon( iconDirty, 100, 'green' ) );
+ui.iconViewBox.add( getIcon( iconViewBox, 100, 'green' ) );
+
+function getIcon( content, size, color ) {
 	const iconView = new IconView();
 
 	iconView.render();
@@ -69,13 +71,5 @@ function renderIcon( content, size, color ) {
 		iconView.element.style.color = color;
 	}
 
-	return iconView.element;
-}
-
-function addCase( el ) {
-	const item = document.createElement( 'li' );
-
-	item.appendChild( el );
-
-	wrapper.appendChild( item );
+	return iconView;
 }

+ 14 - 5
packages/ckeditor5-ui/tests/manual/icon/icon.md

@@ -1,7 +1,16 @@
 ## Icons with inline SVG
 
-1. First icon should be small size and dark color.
-1. Second icon should be medium size and dark color.
-1. Third icon should be large size and dark color.
-1. Fourth icon should be large size and red color.
-1. Fifth icon should be large size and blue color (inherited).
+### Sizing
+1. First icon should be small and dark.
+1. Second icon should be medium and dark.
+1. Third icon should be large and dark.
+
+## Colors
+1. First icon should be small and red.
+1. Second icon should be small and blue, just like text around.
+
+## Dirtiness
+1. First icon should be large and green.
+
+## ViewBox
+1. First icon should be large and green, same as the previous one.

+ 5 - 2
packages/ckeditor5-ui/theme/components/dropdown/dropdown.css

@@ -19,7 +19,7 @@
 
 		position: absolute;
 		top: 50%;
-		transform: translate( 0, -50% );
+		transform: translate3d( 0, -50%, 0 );
 	}
 
 	/* Dropdown button should span horizontally, e.g. in vertical toolbars */
@@ -44,9 +44,12 @@
 
 	position: absolute;
 	left: 0px;
-	transform: translateY( 100% );
+	transform: translate3d( 0, 100%, 0 );
 }
 
 .ck-dropdown__panel-visible {
 	display: inline-block;
+
+	/* This will prevent blurry icons in dropdown on Firefox. See #340. */
+	will-change: transform;
 }

+ 3 - 0
packages/ckeditor5-ui/theme/components/icon/icon.css

@@ -11,6 +11,9 @@ svg.ck-icon {
 	/* Inherit cursor style (#5). */
 	cursor: inherit;
 
+	/* This will prevent blurry icons on Firefox. See #340. */
+	will-change: transform;
+
 	& * {
 		/* Inherit cursor style (#5). */
 		cursor: inherit;