8
0
فهرست منبع

Merge pull request #19 from ckeditor/t/ckeditor5-ui/26

T/ckeditor5 ui/26: Review our approach to MVVM.
Piotrek Koszuliński 9 سال پیش
والد
کامیت
4581c49d52
2فایلهای تغییر یافته به همراه43 افزوده شده و 20 حذف شده
  1. 42 19
      packages/ckeditor5-theme-lark/tests/manual/theme.js
  2. 1 1
      packages/ckeditor5-theme-lark/theme/components/dropdown.scss

+ 42 - 19
packages/ckeditor5-theme-lark/tests/manual/theme.js

@@ -8,13 +8,16 @@
 import testUtils from '/tests/ui/_utils/utils.js';
 import testUtils from '/tests/ui/_utils/utils.js';
 
 
 import Collection from '/ckeditor5/utils/collection.js';
 import Collection from '/ckeditor5/utils/collection.js';
-import IconManagerView from '/ckeditor5/ui/iconmanagerview.js';
 import Model from '/ckeditor5/ui/model.js';
 import Model from '/ckeditor5/ui/model.js';
 import Controller from '/ckeditor5/ui/controller.js';
 import Controller from '/ckeditor5/ui/controller.js';
 import View from '/ckeditor5/ui/view.js';
 import View from '/ckeditor5/ui/view.js';
 import Template from '/ckeditor5/ui/template.js';
 import Template from '/ckeditor5/ui/template.js';
 
 
 import iconManagerModel from '/theme/iconmanagermodel.js';
 import iconManagerModel from '/theme/iconmanagermodel.js';
+import IconManager from '/ckeditor5/ui/iconmanager/iconmanager.js';
+import IconManagerView from '/ckeditor5/ui/iconmanager/iconmanagerview.js';
+
+import Icon from '/ckeditor5/ui/icon/icon.js';
 import IconView from '/ckeditor5/ui/icon/iconview.js';
 import IconView from '/ckeditor5/ui/icon/iconview.js';
 
 
 import Button from '/ckeditor5/ui/button/button.js';
 import Button from '/ckeditor5/ui/button/button.js';
@@ -64,7 +67,7 @@ testUtils.createTestUIController( {
 function renderIcon( ui ) {
 function renderIcon( ui ) {
 	// --- IconManager ------------------------------------------------------------
 	// --- IconManager ------------------------------------------------------------
 
 
-	ui.add( 'body', new Controller( null, new IconManagerView( iconManagerModel ) ) );
+	ui.add( 'body', new IconManager( iconManagerModel, new IconManagerView() ) );
 
 
 	// --- In-text ------------------------------------------------------------
 	// --- In-text ------------------------------------------------------------
 
 
@@ -223,22 +226,17 @@ function renderDropdown( ui ) {
 		items: collection
 		items: collection
 	} );
 	} );
 
 
-	const enabledModel = new Model( {
+	ui.add( 'dropdown', dropdown( {
 		label: 'Normal state',
 		label: 'Normal state',
 		isEnabled: true,
 		isEnabled: true,
-		isOn: false,
 		content: itemListModel
 		content: itemListModel
-	} );
+	} ) );
 
 
-	const disabledModel = new Model( {
+	ui.add( 'dropdown', dropdown( {
 		label: 'Disabled',
 		label: 'Disabled',
 		isEnabled: false,
 		isEnabled: false,
-		isOn: false,
 		content: itemListModel
 		content: itemListModel
-	} );
-
-	ui.add( 'dropdown', new ListDropdown( enabledModel, new ListDropdownView( enabledModel ) ) );
-	ui.add( 'dropdown', new ListDropdown( disabledModel, new ListDropdownView( disabledModel ) ) );
+	} ) );
 }
 }
 
 
 function renderToolbar( ui ) {
 function renderToolbar( ui ) {
@@ -258,7 +256,9 @@ function renderToolbar( ui ) {
 			label: 'Button with icon',
 			label: 'Button with icon',
 			icon: 'bold',
 			icon: 'bold',
 			iconAlign: 'LEFT'
 			iconAlign: 'LEFT'
-		} )
+		} ),
+		dropdown(),
+		button()
 	] ) );
 	] ) );
 
 
 	// --- Rounded ------------------------------------------------------------
 	// --- Rounded ------------------------------------------------------------
@@ -338,21 +338,32 @@ const TextView = class extends View {
 };
 };
 
 
 function text() {
 function text() {
-	return new Controller( null, new TextView( null ) );
+	return new Controller( null, new TextView() );
 }
 }
 
 
 function icon( name ) {
 function icon( name ) {
-	return new Controller( null, new IconView( new Model( { icon: name } ) ) );
+	const model = new Model( {
+		name: name,
+		align: ''
+	} );
+
+	return new Icon( model, new IconView() );
 }
 }
 
 
-function button( { label = 'Button', noText = false, isEnabled = true, isOn = false, icon, iconAlign } = {} ) {
+function button( {
+	label = 'Button',
+	noText = false,
+	isEnabled = true,
+	isOn = false,
+	icon, iconAlign
+} = {} ) {
 	const model = new Model( { label, noText, isEnabled, isOn, icon, iconAlign } );
 	const model = new Model( { label, noText, isEnabled, isOn, icon, iconAlign } );
 
 
-	return new Button( model, new ButtonView( model ) );
+	return new Button( model, new ButtonView() );
 }
 }
 
 
 function toolbar( children = [] ) {
 function toolbar( children = [] ) {
-	const toolbar = new Toolbar( null, new ToolbarView( null ) );
+	const toolbar = new Toolbar( null, new ToolbarView() );
 
 
 	children.forEach( c => {
 	children.forEach( c => {
 		toolbar.add( 'buttons', c );
 		toolbar.add( 'buttons', c );
@@ -361,6 +372,18 @@ function toolbar( children = [] ) {
 	return toolbar;
 	return toolbar;
 }
 }
 
 
+function dropdown( {
+	label = 'Dropdown',
+	isEnabled = true,
+	isOn = false,
+	content = new Model( { items: new Collection( { idProperty: 'label' } ) } )
+} = {} ) {
+	const model = new Model( { label, isEnabled, content, isOn } );
+	const dropdown = new ListDropdown( model, new ListDropdownView() );
+
+	return dropdown;
+}
+
 const ToolbarSeparatorView = class extends View {
 const ToolbarSeparatorView = class extends View {
 	constructor() {
 	constructor() {
 		super();
 		super();
@@ -375,7 +398,7 @@ const ToolbarSeparatorView = class extends View {
 };
 };
 
 
 function toolbarSeparator() {
 function toolbarSeparator() {
-	return new Controller( null, new ToolbarSeparatorView( null ) );
+	return new Controller( null, new ToolbarSeparatorView() );
 }
 }
 
 
 const ToolbarNewlineView = class extends View {
 const ToolbarNewlineView = class extends View {
@@ -392,5 +415,5 @@ const ToolbarNewlineView = class extends View {
 };
 };
 
 
 function toolbarNewLine() {
 function toolbarNewLine() {
-	return new Controller( null, new ToolbarNewlineView( null ) );
+	return new Controller( null, new ToolbarNewlineView() );
 }
 }

+ 1 - 1
packages/ckeditor5-theme-lark/theme/components/dropdown.scss

@@ -36,7 +36,7 @@
 
 
 	@include ck-rounded-corners();
 	@include ck-rounded-corners();
 
 
-	&-active {
+	&-visible {
 		display: inline-block;
 		display: inline-block;
 	}
 	}
 }
 }