Răsfoiți Sursa

Merge pull request #4 from ckeditor/t/3

t/3: Allow dynamically colored icons created with Template class
Piotrek Koszuliński 9 ani în urmă
părinte
comite
3a9512b4f4

+ 13 - 2
packages/ckeditor5-theme-lark/tests/manual/theme.html

@@ -6,6 +6,14 @@
 			line-height: 3em;
 			line-height: 3em;
 		}
 		}
 
 
+		#icons, #iconsColored {
+			overflow: hidden;
+		}
+
+		#iconsColored {
+			color: red;
+		}
+
 		#buttonResponsive div > div {
 		#buttonResponsive div > div {
 			font-size: 1.3em;
 			font-size: 1.3em;
 			line-height: 2.8em;
 			line-height: 2.8em;
@@ -56,7 +64,10 @@
 </p>
 </p>
 
 
 <h3>Icon: Availability</h3>
 <h3>Icon: Availability</h3>
-<p id="icons"></p>
+<p id="icons" class="ck-reset-all"></p>
+
+<h3>Icon: Availability (colored)</h3>
+<p id="iconsColored" class="ck-reset-all"></p>
 
 
 <hr/>
 <hr/>
 
 
@@ -79,7 +90,7 @@
 
 
 <h3>Button: Icon</h3>
 <h3>Button: Icon</h3>
 <div class="ck-reset-all" >
 <div class="ck-reset-all" >
-	<div id="buttonIcon"></div>
+	<div id="buttonIcon" class="wrappable"></div>
 
 
 	<br/>
 	<br/>
 
 

+ 15 - 11
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -6,6 +6,9 @@
 'use strict';
 'use strict';
 
 
 import IconManagerView from '/ckeditor5/ui/iconmanagerview.js';
 import IconManagerView from '/ckeditor5/ui/iconmanagerview.js';
+import Model from '/ckeditor5/ui/model.js';
+import IconView from '/ckeditor5/ui/icon/iconview.js';
+import ButtonView from '/ckeditor5/ui/button/buttonview.js';
 import iconManagerModel from '/theme/iconmanagermodel.js';
 import iconManagerModel from '/theme/iconmanagermodel.js';
 
 
 function setupIconManager() {
 function setupIconManager() {
@@ -15,22 +18,23 @@ function setupIconManager() {
 }
 }
 
 
 function renderIcons() {
 function renderIcons() {
+	const containers = [
+		document.getElementById( 'icons' ),
+		document.getElementById( 'iconsColored' )
+	];
 	const buttonIcons = document.getElementById( 'buttonIcon' );
 	const buttonIcons = document.getElementById( 'buttonIcon' );
-	const icons = document.getElementById( 'icons' );
-	const tmp = document.createElement( 'div' );
 
 
 	iconManagerModel.icons.forEach( i => {
 	iconManagerModel.icons.forEach( i => {
-		tmp.innerHTML = `<svg class="ck-icon"><use xlink:href="#ck-icon-${ i }"></use></svg>`;
+		const view = new IconView( new Model( { icon: i } ) );
+		const button = new ButtonView( new Model( { label: i, icon: i, isEnabled: true } ) );
+		button.init();
 
 
-		icons.appendChild( tmp.firstChild );
-		icons.appendChild( document.createTextNode( ' ' ) );
+		containers.forEach( c => {
+			c.appendChild( view.element.cloneNode( 1 ) );
+			c.appendChild( document.createTextNode( ' ' ) );
+		} );
 
 
-		tmp.innerHTML =
-			`<button class="ck-button ck-button-notext">
-				<svg class="ck-icon ck-icon-left"><use xlink:href="#ck-icon-${ i }"></use></svg>
-			</button>`;
-
-		buttonIcons.appendChild( tmp.firstChild );
+		buttonIcons.appendChild( button.element );
 		buttonIcons.appendChild( document.createTextNode( ' ' ) );
 		buttonIcons.appendChild( document.createTextNode( ' ' ) );
 	} );
 	} );
 }
 }

+ 5 - 5
packages/ckeditor5-theme-lark/theme/components/icon.scss

@@ -8,13 +8,12 @@
  */
  */
 $ck-icon-size: 20px;
 $ck-icon-size: 20px;
 
 
-.ck-icon-manager {
+.ck-icon-manager-sprite {
 	display: none;
 	display: none;
 
 
-	&-sprite {
-		* {
-			fill: currentColor; // needed by Webkit/Blink
-		}
+	* {
+		color: inherit; // allows dynamic coloring of the icons
+		fill: currentColor; // needed by Webkit/Blink
 	}
 	}
 }
 }
 
 
@@ -38,6 +37,7 @@ $ck-icon-size: 20px;
 	}
 	}
 
 
 	* {
 	* {
+		color: inherit; // allows dynamic coloring of the icons
 		fill: currentColor; // needed by FF
 		fill: currentColor; // needed by FF
 	}
 	}