瀏覽代碼

Docs: Added more missing docs.

Aleksander Nowodzinski 5 年之前
父節點
當前提交
5b3ed4bc14

+ 25 - 71
packages/ckeditor5-table/src/tablecellproperties.js

@@ -37,87 +37,41 @@ export default class TableCellProperties extends Plugin {
 }
 
 /**
- * TODO
+ * A configuration of the table cell properties user interface (balloon). It allows to define:
+ *
+ * * the color palette for the cell border color style field (`tableCellProperties.border.colors`),
+ * * the color palette for the cell background style field (`tableCellProperties.backgroundColors`).
  *
  *		const tableConfig = {
  *			tableCellProperties: {
  *				border: {
- *					colors: [ ... ]
+ *					colors: [
+ *						{
+ *							color: 'hsl(0, 0%, 90%)',
+ *							label: 'Light grey'
+ *						},
+ *						// ...
+ *					]
  *				},
- *				backgroundColors: [ ... ]
+ *				backgroundColors: [
+ *					{
+ *						color: 'hsl(120, 75%, 60%)',
+ *						label: 'Green'
+ *					},
+ *					// ...
+ *				]
  *			}
  *		};
  *
- * TODO: Mention {@link module:table/table~TableColorConfig}.
- *
- * The default colors for the background and the border are the same and defined as follows:
+ * **Note**: The configurations do not impact the data being loaded into the editor,
+ * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
+ * allowing users to pick colors in a more convenient way.
  *
- *		[
- *			{
- *				color: 'hsl(0, 0%, 0%)',
- *				label: 'Black'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 30%)',
- *				label: 'Dim grey'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 60%)',
- *				label: 'Grey'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 90%)',
- *				label: 'Light grey'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 100%)',
- *				label: 'White',
- *				hasBorder: true
- *			},
- *			{
- *				color: 'hsl(0, 75%, 60%)',
- *				label: 'Red'
- *			},
- *			{
- *				color: 'hsl(30, 75%, 60%)',
- *				label: 'Orange'
- *			},
- *			{
- *				color: 'hsl(60, 75%, 60%)',
- *				label: 'Yellow'
- *			},
- *			{
- *				color: 'hsl(90, 75%, 60%)',
- *				label: 'Light green'
- *			},
- *			{
- *				color: 'hsl(120, 75%, 60%)',
- *				label: 'Green'
- *			},
- *			{
- *				color: 'hsl(150, 75%, 60%)',
- *				label: 'Aquamarine'
- *			},
- *			{
- *				color: 'hsl(180, 75%, 60%)',
- *				label: 'Turquoise'
- *			},
- *			{
- *				color: 'hsl(210, 75%, 60%)',
- *				label: 'Light blue'
- *			},
- *			{
- *				color: 'hsl(240, 75%, 60%)',
- *				label: 'Blue'
- *			},
- *			{
- *				color: 'hsl(270, 75%, 60%)',
- *				label: 'Purple'
- *			}
- *		]
+ * The default color palettes for the cell background and the cell border are the same
+ * ({@link module:table/ui/utils~defaultColors check out their content}).
  *
- * **Note**: The colors configuration does not impact the data loaded into the editor;
- * it is reflected only in the UI allowing users to pick colors in a more convenient way.
+ * Both color palette configurations must follow the
+ * {@link module:table/table~TableColorConfig table color configuration format}.
  *
  * Read more about configuring the table feature in {@link module:table/table~TableConfig}.
  *

+ 7 - 3
packages/ckeditor5-table/src/tablecellproperties/ui/tablecellpropertiesview.js

@@ -63,9 +63,13 @@ const ALIGNMENT_ICONS = {
 export default class TableCellPropertiesView extends View {
 	/**
 	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
-	 * @param {Object} options TODO
-	 * @param {module:table/table~TableColorConfig} options.borderColors TODO
-	 * @param {module:table/table~TableColorConfig} options.backgroundColors TODO
+	 * @param {Object} options Additional configuration of the view.
+	 * @param {module:table/table~TableColorConfig} options.borderColors A configuration of the border
+	 * color palette used by the
+	 * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#borderColorInput}.
+	 * @param {module:table/table~TableColorConfig} options.backgroundColors A configuration of the background
+	 * color palette used by the
+	 * {@link module:table/tablecellproperties/ui/tablecellpropertiesview~TableCellPropertiesView#backgroundInput}.
 	 */
 	constructor( locale, options ) {
 		super( locale );

+ 25 - 71
packages/ckeditor5-table/src/tableproperties.js

@@ -38,87 +38,41 @@ export default class TableProperties extends Plugin {
 }
 
 /**
- * TODO
+ * A configuration of the table properties user interface (balloon). It allows to define:
+ *
+ * * the color palette for the table border color style field (`tableProperties.border.colors`),
+ * * the color palette for the table background style field (`tableProperties.backgroundColors`).
  *
  *		const tableConfig = {
  *			tableProperties: {
  *				border: {
- *					colors: [ ... ]
+ *					colors: [
+ *						{
+ *							color: 'hsl(0, 0%, 90%)',
+ *							label: 'Light grey'
+ *						},
+ *						// ...
+ *					]
  *				},
- *				backgroundColors: [ ... ]
+ *				backgroundColors: [
+ *					{
+ *						color: 'hsl(120, 75%, 60%)',
+ *						label: 'Green'
+ *					},
+ *					// ...
+ *				]
  *			}
  *		};
  *
- * TODO: Mention {@link module:table/table~TableColorConfig}.
- *
- * The default colors for the background and the border are the same and defined as follows:
+ * **Note**: The configurations do not impact the data being loaded into the editor,
+ * i.e. they do not limit or filter the colors in the data. They are used only in the user interface
+ * allowing users to pick colors in a more convenient way.
  *
- *		[
- *			{
- *				color: 'hsl(0, 0%, 0%)',
- *				label: 'Black'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 30%)',
- *				label: 'Dim grey'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 60%)',
- *				label: 'Grey'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 90%)',
- *				label: 'Light grey'
- *			},
- *			{
- *				color: 'hsl(0, 0%, 100%)',
- *				label: 'White',
- *				hasBorder: true
- *			},
- *			{
- *				color: 'hsl(0, 75%, 60%)',
- *				label: 'Red'
- *			},
- *			{
- *				color: 'hsl(30, 75%, 60%)',
- *				label: 'Orange'
- *			},
- *			{
- *				color: 'hsl(60, 75%, 60%)',
- *				label: 'Yellow'
- *			},
- *			{
- *				color: 'hsl(90, 75%, 60%)',
- *				label: 'Light green'
- *			},
- *			{
- *				color: 'hsl(120, 75%, 60%)',
- *				label: 'Green'
- *			},
- *			{
- *				color: 'hsl(150, 75%, 60%)',
- *				label: 'Aquamarine'
- *			},
- *			{
- *				color: 'hsl(180, 75%, 60%)',
- *				label: 'Turquoise'
- *			},
- *			{
- *				color: 'hsl(210, 75%, 60%)',
- *				label: 'Light blue'
- *			},
- *			{
- *				color: 'hsl(240, 75%, 60%)',
- *				label: 'Blue'
- *			},
- *			{
- *				color: 'hsl(270, 75%, 60%)',
- *				label: 'Purple'
- *			}
- *		]
+ * The default color palettes for the table background and the table border are the same
+ * ({@link module:table/ui/utils~defaultColors check out their content}).
  *
- * **Note**: The colors configuration does not impact the data loaded into the editor;
- * it is reflected only in the UI allowing users to pick colors in a more convenient way.
+ * Both color palette configurations must follow the
+ * {@link module:table/table~TableColorConfig table color configuration format}.
  *
  * Read more about configuring the table feature in {@link module:table/table~TableConfig}.
  *

+ 8 - 1
packages/ckeditor5-table/src/tableproperties/ui/tablepropertiesview.js

@@ -54,7 +54,14 @@ const ALIGNMENT_ICONS = {
  */
 export default class TablePropertiesView extends View {
 	/**
-	 * @inheritDoc
+	 * @param {module:utils/locale~Locale} locale The {@link module:core/editor/editor~Editor#locale} instance.
+	 * @param {Object} options Additional configuration of the view.
+	 * @param {module:table/table~TableColorConfig} options.borderColors A configuration of the border
+	 * color palette used by the
+	 * {@link module:table/tablecellproperties/ui/tablepropertiesview~TablePropertiesView#borderColorInput}.
+	 * @param {module:table/table~TableColorConfig} options.backgroundColors A configuration of the background
+	 * color palette used by the
+	 * {@link module:table/tablecellproperties/ui/tablepropertiesview~TablePropertiesView#backgroundInput}.
 	 */
 	constructor( locale, options ) {
 		super( locale );

+ 79 - 6
packages/ckeditor5-table/src/ui/utils.js

@@ -236,7 +236,76 @@ export function fillToolbar( { view, icons, toolbar, labels, propertyName } ) {
 }
 
 /**
- * TODO
+ * A default color palette for table properties used in various user interfaces, for instance,
+ * by {@link module:table/tablecellproperties/ui/tablecellproperties~TableCellProperties}
+ * or {@link module:table/tableproperties/ui/tableproperties~TableProperties}.
+ *
+ * The color palette follows the {@link module:table/table~TableColorConfig table color configuration format}
+ * and contains the following color definitions:
+ *
+ *		const defaultColors = [
+ *			{
+ *				color: 'hsl(0, 0%, 0%)',
+ *				label: 'Black'
+ *			},
+ *			{
+ *				color: 'hsl(0, 0%, 30%)',
+ *				label: 'Dim grey'
+ *			},
+ *			{
+ *				color: 'hsl(0, 0%, 60%)',
+ *				label: 'Grey'
+ *			},
+ *			{
+ *				color: 'hsl(0, 0%, 90%)',
+ *				label: 'Light grey'
+ *			},
+ *			{
+ *				color: 'hsl(0, 0%, 100%)',
+ *				label: 'White',
+ *				hasBorder: true
+ *			},
+ *			{
+ *				color: 'hsl(0, 75%, 60%)',
+ *				label: 'Red'
+ *			},
+ *			{
+ *				color: 'hsl(30, 75%, 60%)',
+ *				label: 'Orange'
+ *			},
+ *			{
+ *				color: 'hsl(60, 75%, 60%)',
+ *				label: 'Yellow'
+ *			},
+ *			{
+ *				color: 'hsl(90, 75%, 60%)',
+ *				label: 'Light green'
+ *			},
+ *			{
+ *				color: 'hsl(120, 75%, 60%)',
+ *				label: 'Green'
+ *			},
+ *			{
+ *				color: 'hsl(150, 75%, 60%)',
+ *				label: 'Aquamarine'
+ *			},
+ *			{
+ *				color: 'hsl(180, 75%, 60%)',
+ *				label: 'Turquoise'
+ *			},
+ *			{
+ *				color: 'hsl(210, 75%, 60%)',
+ *				label: 'Light blue'
+ *			},
+ *			{
+ *				color: 'hsl(240, 75%, 60%)',
+ *				label: 'Blue'
+ *			},
+ *			{
+ *				color: 'hsl(270, 75%, 60%)',
+ *				label: 'Purple'
+ *			}
+ *		];
  */
 export const defaultColors = [
 	{
@@ -305,8 +374,9 @@ export const defaultColors = [
 /**
  * A function that helps creating labeled color inputs.
  *
- * For given options, it returns a function that creates an instance of {@link TODO color input text}
- * logically related to a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in DOM.
+ * For given options, it returns a function that creates an instance of
+ * {@link module:table/ui/colorinputview~ColorInputView color input} logically related to
+ * a {@link module:ui/labeledview/labeledview~LabeledView labeled view} in DOM.
  *
  * The helper does the following:
  *
@@ -318,7 +388,8 @@ export const defaultColors = [
  * Usage:
  *
  *		const colorInputCreator = getLabeledColorInputCreator( {
- *			colorConfig: [ ... ]
+ *			colorConfig: [ ... ],
+ *			columns: 3,
  *		} );
  *
  *		const labeledInputView = new LabeledView( locale, colorInputCreator );
@@ -326,8 +397,10 @@ export const defaultColors = [
  *
  * @private
  * @param options Color input options.
- * @param {module:table/table~TableColorConfig} options.colorConfig TODO
- * @param {Number} options.columns TODO
+ * @param {module:table/table~TableColorConfig} options.colorConfig The configuration of the color palette
+ * displayed in the input's dropdown.
+ * @param {Number} options.columns The configuration of the number of columns the color palette consists of
+ * in the input's dropdown.
  * @returns {Function}
  */
 export function getLabeledColorInputCreator( options ) {