Răsfoiți Sursa

RestrictedEditingUI PoC. Updated the feature icons.

Aleksander Nowodzinski 6 ani în urmă
părinte
comite
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

@@ -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>