浏览代码

RestrictedEditingUI PoC. Updated the feature icons.

Aleksander Nowodzinski 6 年之前
父节点
当前提交
bdf5233fb9

+ 5 - 0
packages/ckeditor5-restricted-editing/src/restrictedediting.js

@@ -9,6 +9,7 @@
 
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Matcher from '@ckeditor/ckeditor5-engine/src/view/matcher';
+import RestrictedEditingUI from './restrictededitingui';
 
 /**
  * @extends module:core/plugin~Plugin
@@ -21,6 +22,10 @@ export default class RestrictedEditing extends Plugin {
 		return 'RestrictedEditing';
 	}
 
+	static get requires() {
+		return [ RestrictedEditingUI ];
+	}
+
 	/**
 	 * @inheritDoc
 	 */

+ 5 - 3
packages/ckeditor5-restricted-editing/src/restrictededitingexceptionui.js

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 
-import restrictedDocumentIcon from '../theme/icons/contentlock.svg';
+import unlockIcon from '../theme/icons/contentunlock.svg';
 
 /**
  * @extends module:core/plugin~Plugin
@@ -28,13 +28,15 @@ export default class RestrictedEditingExceptionUI extends Plugin {
 			const view = new ButtonView( locale );
 
 			view.set( {
-				label: t( 'Enable editing' ),
-				icon: restrictedDocumentIcon,
+				icon: unlockIcon,
 				tooltip: true,
 				isToggleable: true
 			} );
 
 			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
+			view.bind( 'label' ).to( command, 'value', value => {
+				return value ? t( 'Disable editing' ) : t( 'Enable editing' );
+			} );
 
 			this.listenTo( view, 'execute', () => editor.execute( 'restrictedEditingException' ) );
 

+ 62 - 0
packages/ckeditor5-restricted-editing/src/restrictededitingui.js

@@ -0,0 +1,62 @@
+/**
+ * @license Copyright (c) 2003-2019, CKSource - Frederico Knabben. All rights reserved.
+ * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
+ */
+
+/**
+ * @module restricted-editing/restrictededitingui
+ */
+
+import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
+import { createDropdown, addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
+import Model from '@ckeditor/ckeditor5-ui/src/model';
+import lockIcon from '../theme/icons/contentlock.svg';
+import Collection from '@ckeditor/ckeditor5-utils/src/collection';
+
+/**
+ * @extends module:core/plugin~Plugin
+ */
+export default class RestrictedEditingUI extends Plugin {
+	/**
+	 * @inheritDoc
+	 */
+	init() {
+		const editor = this.editor;
+		const t = editor.t;
+
+		editor.ui.componentFactory.add( 'restrictedEditing', locale => {
+			const dropdownView = createDropdown( locale );
+			const listItems = new Collection();
+
+			listItems.add( {
+				type: 'button',
+				model: new Model( {
+					commandName: 'TODO',
+					label: t( 'Previous editable region' ),
+					withText: true
+				} )
+			} );
+
+			listItems.add( {
+				type: 'button',
+				model: new Model( {
+					commandName: 'TODO',
+					label: t( 'Next editable region' ),
+					withText: true
+				} )
+			} );
+
+			addListToDropdown( dropdownView, listItems );
+
+			dropdownView.buttonView.set( {
+				label: t( 'Browse editable regions' ),
+				icon: lockIcon,
+				tooltip: true,
+				isEnabled: true,
+				isOn: false
+			} );
+
+			return dropdownView;
+		} );
+	}
+}

文件差异内容过多而无法显示
+ 10 - 1
packages/ckeditor5-restricted-editing/theme/icons/contentlock.svg


文件差异内容过多而无法显示
+ 10 - 0
packages/ckeditor5-restricted-editing/theme/icons/contentunlock.svg