8
0
Просмотр исходного кода

RestrictedEditingUI PoC. Updated the feature icons.

Aleksander Nowodzinski 6 лет назад
Родитель
Сommit
bdf5233fb9

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

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

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

@@ -10,7 +10,7 @@
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import Plugin from '@ckeditor/ckeditor5-core/src/plugin';
 import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
 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
  * @extends module:core/plugin~Plugin
@@ -28,13 +28,15 @@ export default class RestrictedEditingExceptionUI extends Plugin {
 			const view = new ButtonView( locale );
 			const view = new ButtonView( locale );
 
 
 			view.set( {
 			view.set( {
-				label: t( 'Enable editing' ),
-				icon: restrictedDocumentIcon,
+				icon: unlockIcon,
 				tooltip: true,
 				tooltip: true,
 				isToggleable: true
 				isToggleable: true
 			} );
 			} );
 
 
 			view.bind( 'isOn', 'isEnabled' ).to( command, 'value', 'isEnabled' );
 			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' ) );
 			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

@@ -1 +1,10 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M2.15 3.93c0 .4.33.75.75.75h11.78a.75.75 0 100-1.5H2.9a.75.75 0 00-.75.75zm.75 8.75h3a.75.75 0 000-1.5h-3a.75.75 0 100 1.5zm-.75 3.25c0 .4.33.75.75.75h2.94a.75.75 0 000-1.5H2.9a.75.75 0 00-.75.75zm.75-7.25h4.96a.75.75 0 000-1.5H2.9a.75.75 0 100 1.5zm11.25-2.12a3.01 3.01 0 013 3l.01 1.53h.3c.58 0 1.04.46 1.04 1.03v4.54c0 .57-.46 1.03-1.03 1.03h-6.44c-.57 0-1.03-.46-1.03-1.03v-4.54c0-.57.46-1.03 1.03-1.03h.11V9.57a3.01 3.01 0 013-3.01zm.1 6.64a.5.5 0 00-.5.5v1.5a.5.5 0 101 0v-1.5a.5.5 0 00-.5-.5zm-.1-5.54a1.9 1.9 0 00-1.9 1.9v1.53h3.8V9.56a1.9 1.9 0 00-1.9-1.9z"/></svg>
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>contentlock</title>
+    <desc>Created with Sketch.</desc>
+    <g id="contentlock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M15.5,6.5 C17.3685634,6.5 18.8951264,7.9642776 18.9948211,9.8079648 L19,10 L19,12 C19.5522847,12 20,12.4477153 20,13 L20,18 C20,18.5522847 19.5522847,19 19,19 L12,19 C11.4477153,19 11,18.5522847 11,18 L11,13 C11,12.4477153 11.4477153,12 12,12 L12,10 L12.0051789,9.8079648 C12.1048736,7.9642776 13.6314366,6.5 15.5,6.5 Z M15.5,14 C15.2545401,14 15.0503916,14.1768752 15.0080557,14.4101244 L15,14.5 L15,16.5 C15,16.7761424 15.2238576,17 15.5,17 C15.7454599,17 15.9496084,16.8231248 15.9919443,16.5898756 L16,16.5 L16,14.5 C16,14.2238576 15.7761424,14 15.5,14 Z M15.5,8 C14.3954305,8 13.5,8.8954305 13.5,10 L13.5,12 L17.5,12 L17.5,10 C17.5,8.8954305 16.6045695,8 15.5,8 Z" id="Combined-Shape" fill="#333333"></path>
+        <path d="M6.25,16 C6.66421356,16 7,16.3357864 7,16.75 C7,17.1642136 6.66421356,17.5 6.25,17.5 L0.75,17.5 C0.335786438,17.5 5.07265313e-17,17.1642136 0,16.75 C-5.07265313e-17,16.3357864 0.335786438,16 0.75,16 L6.25,16 Z M6.25,11 C6.66421356,11 7,11.3357864 7,11.75 C7,12.1642136 6.66421356,12.5 6.25,12.5 L0.75,12.5 C0.335786438,12.5 5.07265313e-17,12.1642136 0,11.75 C-5.07265313e-17,11.3357864 0.335786438,11 0.75,11 L6.25,11 Z M9.25,6 C9.66421356,6 10,6.33578644 10,6.75 C10,7.16421356 9.66421356,7.5 9.25,7.5 L0.75,7.5 C0.335786438,7.5 5.07265313e-17,7.16421356 0,6.75 C-5.07265313e-17,6.33578644 0.335786438,6 0.75,6 L9.25,6 Z M15.25,1 C15.6642136,1 16,1.33578644 16,1.75 C16,2.16421356 15.6642136,2.5 15.25,2.5 L0.75,2.5 C0.335786438,2.5 5.07265313e-17,2.16421356 0,1.75 C-5.07265313e-17,1.33578644 0.335786438,1 0.75,1 L15.25,1 Z" id="Combined-Shape" fill="#333333"></path>
+    </g>
+</svg>

+ 10 - 0
packages/ckeditor5-restricted-editing/theme/icons/contentunlock.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<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">
+    <!-- Generator: Sketch 60.1 (88133) - https://sketch.com -->
+    <title>contentunlock</title>
+    <desc>Created with Sketch.</desc>
+    <g id="contentunlock" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <path d="M6.25,16 C6.66421356,16 7,16.3357864 7,16.75 C7,17.1642136 6.66421356,17.5 6.25,17.5 L0.75,17.5 C0.335786438,17.5 5.07265313e-17,17.1642136 0,16.75 C-5.07265313e-17,16.3357864 0.335786438,16 0.75,16 L6.25,16 Z M6.25,11 C6.66421356,11 7,11.3357864 7,11.75 C7,12.1642136 6.66421356,12.5 6.25,12.5 L0.75,12.5 C0.335786438,12.5 5.07265313e-17,12.1642136 0,11.75 C-5.07265313e-17,11.3357864 0.335786438,11 0.75,11 L6.25,11 Z M9.25,6 C9.66421356,6 10,6.33578644 10,6.75 C10,7.16421356 9.66421356,7.5 9.25,7.5 L0.75,7.5 C0.335786438,7.5 5.07265313e-17,7.16421356 0,6.75 C-5.07265313e-17,6.33578644 0.335786438,6 0.75,6 L9.25,6 Z M15.25,1 C15.6642136,1 16,1.33578644 16,1.75 C16,2.16421356 15.6642136,2.5 15.25,2.5 L0.75,2.5 C0.335786438,2.5 5.07265313e-17,2.16421356 0,1.75 C-5.07265313e-17,1.33578644 0.335786438,1 0.75,1 L15.25,1 Z" id="Combined-Shape" fill="#333333"></path>
+        <path d="M15.5,6.5 C16.8799778,6.5 18.0734228,7.29864157 18.6433469,8.45893658 C18.6791651,8.54850985 18.7,8.6468218 18.7,8.75 C18.7,9.16421356 18.3642136,9.5 17.95,9.5 C17.6599712,9.5 17.4083926,9.33537458 17.2836112,9.09447047 C16.9529736,8.44470708 16.2784203,8 15.5,8 C14.3954305,8 13.5,8.8954305 13.5,10 L13.5,12 L19,12 C19.5522847,12 20,12.4477153 20,13 L20,18 C20,18.5522847 19.5522847,19 19,19 L12,19 C11.4477153,19 11,18.5522847 11,18 L11,13 C11,12.4477153 11.4477153,12 12,12 L12,10 L12.0051789,9.8079648 C12.1048736,7.9642776 13.6314366,6.5 15.5,6.5 Z M15.5,14 C15.2545401,14 15.0503916,14.1768752 15.0080557,14.4101244 L15,14.5 L15,16.5 C15,16.7761424 15.2238576,17 15.5,17 C15.7454599,17 15.9496084,16.8231248 15.9919443,16.5898756 L16,16.5 L16,14.5 C16,14.2238576 15.7761424,14 15.5,14 Z" id="Combined-Shape" fill="#333333"></path>
+    </g>
+</svg>