8
0

tablecellpropertiesview.js 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773
  1. /**
  2. * @license Copyright (c) 2003-2020, CKSource - Frederico Knabben. All rights reserved.
  3. * For licensing, see LICENSE.md or https://ckeditor.com/legal/ckeditor-oss-license
  4. */
  5. /**
  6. * @module table/tablecellproperties/ui/tablecellpropertiesview
  7. */
  8. import View from '@ckeditor/ckeditor5-ui/src/view';
  9. import ViewCollection from '@ckeditor/ckeditor5-ui/src/viewcollection';
  10. import submitHandler from '@ckeditor/ckeditor5-ui/src/bindings/submithandler';
  11. import KeystrokeHandler from '@ckeditor/ckeditor5-utils/src/keystrokehandler';
  12. import FocusTracker from '@ckeditor/ckeditor5-utils/src/focustracker';
  13. import FocusCycler from '@ckeditor/ckeditor5-ui/src/focuscycler';
  14. import LabeledView from '@ckeditor/ckeditor5-ui/src/labeledview/labeledview';
  15. import { createLabeledDropdown, createLabeledInputText } from '@ckeditor/ckeditor5-ui/src/labeledview/utils';
  16. import LabelView from '@ckeditor/ckeditor5-ui/src/label/labelview';
  17. import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';
  18. import ToolbarView from '@ckeditor/ckeditor5-ui/src/toolbar/toolbarview';
  19. import ButtonView from '@ckeditor/ckeditor5-ui/src/button/buttonview';
  20. import { fillToolbar, getBorderStyleDefinitions, getBorderStyleLabels } from '../../ui/utils';
  21. import FormRowView from '../../ui/formrowview';
  22. import FormHeaderView from '../../ui/formheaderview';
  23. import checkIcon from '@ckeditor/ckeditor5-core/theme/icons/check.svg';
  24. import cancelIcon from '@ckeditor/ckeditor5-core/theme/icons/cancel.svg';
  25. import alignLeftIcon from '@ckeditor/ckeditor5-core/theme/icons/align-left.svg';
  26. import alignRightIcon from '@ckeditor/ckeditor5-core/theme/icons/align-right.svg';
  27. import alignCenterIcon from '@ckeditor/ckeditor5-core/theme/icons/align-center.svg';
  28. import alignJustifyIcon from '@ckeditor/ckeditor5-core/theme/icons/align-justify.svg';
  29. import alignTopIcon from '@ckeditor/ckeditor5-core/theme/icons/align-top.svg';
  30. import alignMiddleIcon from '@ckeditor/ckeditor5-core/theme/icons/align-middle.svg';
  31. import alignBottomIcon from '@ckeditor/ckeditor5-core/theme/icons/align-bottom.svg';
  32. import '../../../theme/form.css';
  33. import '../../../theme/tableform.css';
  34. import '../../../theme/tablecellproperties.css';
  35. const ALIGNMENT_ICONS = {
  36. left: alignLeftIcon,
  37. center: alignCenterIcon,
  38. right: alignRightIcon,
  39. justify: alignJustifyIcon,
  40. top: alignTopIcon,
  41. middle: alignMiddleIcon,
  42. bottom: alignBottomIcon
  43. };
  44. /**
  45. * The class representing a table cell properties form, allowing users to customize
  46. * certain style aspects of a table cell, for instance, border, padding, text alignment, etc..
  47. *
  48. * @extends module:ui/view~View
  49. */
  50. export default class TableCellPropertiesView extends View {
  51. /**
  52. * @inheritDoc
  53. */
  54. constructor( locale ) {
  55. super( locale );
  56. this.set( {
  57. /**
  58. * The value of the cell border style.
  59. *
  60. * @observable
  61. * @default 'none'
  62. * @member #borderStyle
  63. */
  64. borderStyle: 'none',
  65. /**
  66. * The value of the cell border width style.
  67. *
  68. * @observable
  69. * @default ''
  70. * @member #borderWidth
  71. */
  72. borderWidth: '',
  73. /**
  74. * The value of the cell border color style.
  75. *
  76. * @observable
  77. * @default ''
  78. * @member #borderColor
  79. */
  80. borderColor: '',
  81. /**
  82. * The value of the cell padding style.
  83. *
  84. * @observable
  85. * @default ''
  86. * @member #padding
  87. */
  88. padding: '',
  89. /**
  90. * The value of the cell background color style.
  91. *
  92. * @observable
  93. * @default ''
  94. * @member #backgroundColor
  95. */
  96. backgroundColor: '',
  97. /**
  98. * The value of the table cell width style.
  99. *
  100. * @observable
  101. * @default ''
  102. * @member #width
  103. */
  104. width: '',
  105. /**
  106. * The value of the table cell height style.
  107. *
  108. * @observable
  109. * @default ''
  110. * @member #height
  111. */
  112. height: '',
  113. /**
  114. * The value of the horizontal text alignment style.
  115. *
  116. * @observable
  117. * @default 'left'
  118. * @member #horizontalAlignment
  119. */
  120. horizontalAlignment: 'left',
  121. /**
  122. * The value of the vertical text alignment style.
  123. *
  124. * @observable
  125. * @default 'middle'
  126. * @member #verticalAlignment
  127. */
  128. verticalAlignment: 'middle'
  129. } );
  130. const { borderStyleDropdown, borderWidthInput, borderColorInput, borderRowLabel } = this._createBorderFields();
  131. const { widthInput, operatorLabel, heightInput, dimensionsLabel } = this._createDimensionFields();
  132. const { horizontalAlignmentToolbar, verticalAlignmentToolbar, alignmentLabel } = this._createAlignmentFields();
  133. /**
  134. * Tracks information about the DOM focus in the form.
  135. *
  136. * @readonly
  137. * @member {module:utils/focustracker~FocusTracker}
  138. */
  139. this.focusTracker = new FocusTracker();
  140. /**
  141. * An instance of the {@link module:utils/keystrokehandler~KeystrokeHandler}.
  142. *
  143. * @readonly
  144. * @member {module:utils/keystrokehandler~KeystrokeHandler}
  145. */
  146. this.keystrokes = new KeystrokeHandler();
  147. /**
  148. * A collection of child views in the form.
  149. *
  150. * @readonly
  151. * @type {module:ui/viewcollection~ViewCollection}
  152. */
  153. this.children = this.createCollection();
  154. /**
  155. * A dropdown that allows selecting the style of the table cell border.
  156. *
  157. * @readonly
  158. * @member {module:ui/dropdown/dropdownview~DropdownView}
  159. */
  160. this.borderStyleDropdown = borderStyleDropdown;
  161. /**
  162. * An input that allows specifying the width of the table cell border.
  163. *
  164. * @readonly
  165. * @member {module:ui/inputtext/inputtextview~InputTextView}
  166. */
  167. this.borderWidthInput = borderWidthInput;
  168. /**
  169. * An input that allows specifying the color of the table cell border.
  170. *
  171. * @readonly
  172. * @member {module:ui/inputtext/inputtextview~InputTextView}
  173. */
  174. this.borderColorInput = borderColorInput;
  175. /**
  176. * An input that allows specifying the table cell background color.
  177. *
  178. * @readonly
  179. * @member {module:ui/inputtext/inputtextview~InputTextView}
  180. */
  181. this.backgroundInput = this._createBackgroundField();
  182. /**
  183. * An input that allows specifying the table cell padding.
  184. *
  185. * @readonly
  186. * @member {module:ui/inputtext/inputtextview~InputTextView}
  187. */
  188. this.paddingInput = this._createPaddingField();
  189. /**
  190. * An input that allows specifying the table cell width.
  191. *
  192. * @readonly
  193. * @member {module:ui/inputtext/inputtextview~InputTextView}
  194. */
  195. this.widthInput = widthInput;
  196. /**
  197. * An input that allows specifying the table cell height.
  198. *
  199. * @readonly
  200. * @member {module:ui/inputtext/inputtextview~InputTextView}
  201. */
  202. this.heightInput = heightInput;
  203. /**
  204. * A toolbar with buttons that allow changing the horizontal text alignment in a table cell.
  205. *
  206. * @readonly
  207. * @member {module:ui/toolbar/toolbar~ToolbarView}
  208. */
  209. this.horizontalAlignmentToolbar = horizontalAlignmentToolbar;
  210. /**
  211. * A toolbar with buttons that allow changing the vertical text alignment in a table cell.
  212. *
  213. * @readonly
  214. * @member {module:ui/toolbar/toolbar~ToolbarView}
  215. */
  216. this.verticalAlignmentToolbar = verticalAlignmentToolbar;
  217. // Defer creating to make sure other fields are present and the Save button can
  218. // bind its #isEnabled to their error messages so there's no way to save unless all
  219. // fields are valid.
  220. const { saveButtonView, cancelButtonView } = this._createActionButtons();
  221. /**
  222. * The "Save" button view.
  223. *
  224. * @member {module:ui/button/buttonview~ButtonView}
  225. */
  226. this.saveButtonView = saveButtonView;
  227. /**
  228. * The "Cancel" button view.
  229. *
  230. * @member {module:ui/button/buttonview~ButtonView}
  231. */
  232. this.cancelButtonView = cancelButtonView;
  233. /**
  234. * A collection of views that can be focused in the form.
  235. *
  236. * @readonly
  237. * @protected
  238. * @member {module:ui/viewcollection~ViewCollection}
  239. */
  240. this._focusables = new ViewCollection();
  241. /**
  242. * Helps cycling over {@link #_focusables} in the form.
  243. *
  244. * @readonly
  245. * @protected
  246. * @member {module:ui/focuscycler~FocusCycler}
  247. */
  248. this._focusCycler = new FocusCycler( {
  249. focusables: this._focusables,
  250. focusTracker: this.focusTracker,
  251. keystrokeHandler: this.keystrokes,
  252. actions: {
  253. // Navigate form fields backwards using the Shift + Tab keystroke.
  254. focusPrevious: 'shift + tab',
  255. // Navigate form fields forwards using the Tab key.
  256. focusNext: 'tab'
  257. }
  258. } );
  259. // Form header.
  260. this.children.add( new FormHeaderView( locale, {
  261. label: this.t( 'Cell properties' )
  262. } ) );
  263. // Border row.
  264. this.children.add( new FormRowView( locale, {
  265. labelView: borderRowLabel,
  266. children: [
  267. borderRowLabel,
  268. borderStyleDropdown,
  269. borderColorInput,
  270. borderWidthInput
  271. ],
  272. class: 'ck-table-form__border-row'
  273. } ) );
  274. // Background.
  275. this.children.add( new FormRowView( locale, {
  276. children: [
  277. this.backgroundInput
  278. ]
  279. } ) );
  280. // Dimensions row and padding.
  281. this.children.add( new FormRowView( locale, {
  282. children: [
  283. // Dimensions row.
  284. new FormRowView( locale, {
  285. labelView: dimensionsLabel,
  286. children: [
  287. dimensionsLabel,
  288. widthInput,
  289. operatorLabel,
  290. heightInput
  291. ],
  292. class: 'ck-table-cell-properties-form__dimensions-row'
  293. } ),
  294. // Padding row.
  295. new FormRowView( locale, {
  296. children: [
  297. this.paddingInput
  298. ],
  299. class: 'ck-table-cell-properties-form__padding-row'
  300. } )
  301. ]
  302. } ) );
  303. // Text alignment row.
  304. this.children.add( new FormRowView( locale, {
  305. labelView: alignmentLabel,
  306. children: [
  307. alignmentLabel,
  308. horizontalAlignmentToolbar,
  309. verticalAlignmentToolbar,
  310. ],
  311. class: 'ck-table-cell-properties-form__alignment-row'
  312. } ) );
  313. // Action row.
  314. this.children.add( new FormRowView( locale, {
  315. children: [
  316. this.saveButtonView,
  317. this.cancelButtonView,
  318. ],
  319. class: 'ck-table-form__action-row'
  320. } ) );
  321. this.setTemplate( {
  322. tag: 'form',
  323. attributes: {
  324. class: [
  325. 'ck',
  326. 'ck-form',
  327. 'ck-table-form',
  328. 'ck-table-cell-properties-form'
  329. ],
  330. // https://github.com/ckeditor/ckeditor5-link/issues/90
  331. tabindex: '-1'
  332. },
  333. children: this.children
  334. } );
  335. }
  336. /**
  337. * @inheritDoc
  338. */
  339. render() {
  340. super.render();
  341. // Enable the "submit" event for this view. It can be triggered by the #saveButtonView
  342. // which is of the "submit" DOM "type".
  343. submitHandler( {
  344. view: this
  345. } );
  346. [
  347. this.borderStyleDropdown,
  348. this.borderColorInput,
  349. this.borderWidthInput,
  350. this.backgroundInput,
  351. this.widthInput,
  352. this.heightInput,
  353. this.paddingInput,
  354. this.horizontalAlignmentToolbar,
  355. this.verticalAlignmentToolbar,
  356. this.saveButtonView,
  357. this.cancelButtonView
  358. ].forEach( view => {
  359. // Register the view as focusable.
  360. this._focusables.add( view );
  361. // Register the view in the focus tracker.
  362. this.focusTracker.add( view.element );
  363. } );
  364. // Mainly for closing using "Esc" and navigation using "Tab".
  365. this.keystrokes.listenTo( this.element );
  366. }
  367. /**
  368. * Focuses the fist focusable field in the form.
  369. */
  370. focus() {
  371. this._focusCycler.focusFirst();
  372. }
  373. /**
  374. * Creates the following form fields:
  375. *
  376. * * {@link #borderStyleDropdown},
  377. * * {@link #borderWidthInput},
  378. * * {@link #borderColorInput}.
  379. *
  380. * @private
  381. * @returns {Object.<String,module:ui/view~View>}
  382. */
  383. _createBorderFields() {
  384. const locale = this.locale;
  385. const t = this.t;
  386. // -- Group label ---------------------------------------------
  387. const borderRowLabel = new LabelView( locale );
  388. borderRowLabel.text = t( 'Border' );
  389. // -- Style ---------------------------------------------------
  390. const styleLabels = getBorderStyleLabels( t );
  391. const borderStyleDropdown = new LabeledView( locale, createLabeledDropdown );
  392. borderStyleDropdown.set( {
  393. label: t( 'Style' ),
  394. class: 'ck-table-form__border-style'
  395. } );
  396. borderStyleDropdown.view.buttonView.set( {
  397. isOn: false,
  398. withText: true,
  399. tooltip: t( 'Style' )
  400. } );
  401. borderStyleDropdown.view.buttonView.bind( 'label' ).to( this, 'borderStyle', value => {
  402. return styleLabels[ value ];
  403. } );
  404. borderStyleDropdown.view.on( 'execute', evt => {
  405. this.borderStyle = evt.source._borderStyleValue;
  406. } );
  407. addListToDropdown( borderStyleDropdown.view, getBorderStyleDefinitions( this ) );
  408. // -- Width ---------------------------------------------------
  409. const borderWidthInput = new LabeledView( locale, createLabeledInputText );
  410. borderWidthInput.set( {
  411. label: t( 'Width' ),
  412. class: 'ck-table-form__border-width',
  413. } );
  414. borderWidthInput.view.bind( 'value' ).to( this, 'borderWidth' );
  415. borderWidthInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
  416. return value !== 'none';
  417. } );
  418. borderWidthInput.view.on( 'input', () => {
  419. this.borderWidth = borderWidthInput.view.element.value;
  420. } );
  421. // -- Color ---------------------------------------------------
  422. const borderColorInput = new LabeledView( locale, createLabeledInputText );
  423. borderColorInput.label = t( 'Color' );
  424. borderColorInput.view.bind( 'value' ).to( this, 'borderColor' );
  425. borderColorInput.bind( 'isEnabled' ).to( this, 'borderStyle', value => {
  426. return value !== 'none';
  427. } );
  428. borderColorInput.view.on( 'input', () => {
  429. this.borderColor = borderColorInput.view.element.value;
  430. } );
  431. this.on( 'change:borderStyle', ( evt, name, value ) => {
  432. if ( value === 'none' ) {
  433. this.borderColor = '';
  434. this.borderWidth = '';
  435. }
  436. } );
  437. return {
  438. borderRowLabel,
  439. borderStyleDropdown,
  440. borderColorInput,
  441. borderWidthInput,
  442. };
  443. }
  444. /**
  445. * Creates the following form fields:
  446. *
  447. * * {@link #backgroundInput}.
  448. *
  449. * @private
  450. * @returns {module:ui/labeledview/labeledview~LabeledView}
  451. */
  452. _createBackgroundField() {
  453. const locale = this.locale;
  454. const t = this.t;
  455. const backgroundInput = new LabeledView( locale, createLabeledInputText );
  456. backgroundInput.set( {
  457. label: t( 'Background' ),
  458. class: 'ck-table-cell-properties-form__background',
  459. } );
  460. backgroundInput.view.bind( 'value' ).to( this, 'backgroundColor' );
  461. backgroundInput.view.on( 'input', () => {
  462. this.backgroundColor = backgroundInput.view.element.value;
  463. } );
  464. return backgroundInput;
  465. }
  466. /**
  467. * Creates the following form fields:
  468. *
  469. * * {@link #widthInput}.
  470. * * {@link #heightInput}.
  471. *
  472. * @private
  473. * @returns {module:ui/labeledview/labeledview~LabeledView}
  474. */
  475. _createDimensionFields() {
  476. const locale = this.locale;
  477. const t = this.t;
  478. // -- Label ---------------------------------------------------
  479. const dimensionsLabel = new LabelView( locale );
  480. dimensionsLabel.text = t( 'Dimensions' );
  481. // -- Width ---------------------------------------------------
  482. const widthInput = new LabeledView( locale, createLabeledInputText );
  483. widthInput.set( {
  484. label: t( 'Width' ),
  485. class: 'ck-table-cell-properties-form__width',
  486. } );
  487. widthInput.view.bind( 'value' ).to( this, 'width' );
  488. widthInput.view.on( 'input', () => {
  489. this.width = widthInput.view.element.value;
  490. } );
  491. // -- Operator ---------------------------------------------------
  492. const operatorLabel = new View( locale );
  493. operatorLabel.setTemplate( {
  494. tag: 'span',
  495. attributes: {
  496. class: [
  497. 'ck-table-form__dimension-operator'
  498. ]
  499. },
  500. children: [
  501. { text: '×' }
  502. ]
  503. } );
  504. // -- Height ---------------------------------------------------
  505. const heightInput = new LabeledView( locale, createLabeledInputText );
  506. heightInput.set( {
  507. label: t( 'Height' ),
  508. class: 'ck-table-cell-properties-form__height',
  509. } );
  510. heightInput.view.bind( 'value' ).to( this, 'height' );
  511. heightInput.view.on( 'input', () => {
  512. this.height = heightInput.view.element.value;
  513. } );
  514. return {
  515. dimensionsLabel,
  516. widthInput,
  517. operatorLabel,
  518. heightInput
  519. };
  520. }
  521. /**
  522. * Creates the following form fields:
  523. *
  524. * * {@link #paddingInput}.
  525. *
  526. * @private
  527. * @returns {module:ui/labeledview/labeledview~LabeledView}
  528. */
  529. _createPaddingField() {
  530. const locale = this.locale;
  531. const t = this.t;
  532. const paddingInput = new LabeledView( locale, createLabeledInputText );
  533. paddingInput.set( {
  534. label: t( 'Padding' ),
  535. class: 'ck-table-cell-properties-form__padding',
  536. } );
  537. paddingInput.view.bind( 'value' ).to( this, 'padding' );
  538. paddingInput.view.on( 'input', () => {
  539. this.padding = paddingInput.view.element.value;
  540. } );
  541. return paddingInput;
  542. }
  543. /**
  544. * Creates the following form fields:
  545. *
  546. * * {@link #horizontalAlignmentToolbar},
  547. * * {@link #verticalAlignmentToolbar}.
  548. *
  549. * @private
  550. * @returns {Object.<String,module:ui/view~View>}
  551. */
  552. _createAlignmentFields() {
  553. const locale = this.locale;
  554. const t = this.t;
  555. const alignmentLabel = new LabelView( locale );
  556. alignmentLabel.text = t( 'Text alignment' );
  557. // -- Horizontal ---------------------------------------------------
  558. const horizontalAlignmentToolbar = new ToolbarView( locale );
  559. horizontalAlignmentToolbar.set( {
  560. isCompact: true,
  561. ariaLabel: t( 'Horizontal text alignment toolbar' )
  562. } );
  563. fillToolbar( {
  564. view: this,
  565. icons: ALIGNMENT_ICONS,
  566. toolbar: horizontalAlignmentToolbar,
  567. labels: this._horizontalAlignmentLabels,
  568. propertyName: 'horizontalAlignment'
  569. } );
  570. // -- Vertical -----------------------------------------------------
  571. const verticalAlignmentToolbar = new ToolbarView( locale );
  572. verticalAlignmentToolbar.set( {
  573. isCompact: true,
  574. ariaLabel: t( 'Vertical text alignment toolbar' )
  575. } );
  576. fillToolbar( {
  577. view: this,
  578. icons: ALIGNMENT_ICONS,
  579. toolbar: verticalAlignmentToolbar,
  580. labels: this._verticalAlignmentLabels,
  581. propertyName: 'verticalAlignment'
  582. } );
  583. return {
  584. horizontalAlignmentToolbar,
  585. verticalAlignmentToolbar,
  586. alignmentLabel
  587. };
  588. }
  589. /**
  590. * Creates the following form controls:
  591. *
  592. * * {@link #saveButtonView},
  593. * * {@link #cancelButtonView}.
  594. *
  595. * @private
  596. * @returns {Object.<String,module:ui/view~View>}
  597. */
  598. _createActionButtons() {
  599. const locale = this.locale;
  600. const t = this.t;
  601. const saveButtonView = new ButtonView( locale );
  602. const cancelButtonView = new ButtonView( locale );
  603. const fieldsThatShouldValidateToSave = [
  604. this.borderWidthInput,
  605. this.borderColorInput,
  606. this.backgroundInput,
  607. this.paddingInput
  608. ];
  609. saveButtonView.set( {
  610. label: t( 'Save' ),
  611. icon: checkIcon,
  612. class: 'ck-button-save',
  613. type: 'submit',
  614. withText: true,
  615. } );
  616. saveButtonView.bind( 'isEnabled' ).toMany( fieldsThatShouldValidateToSave, 'errorText', ( ...errorTexts ) => {
  617. return errorTexts.every( errorText => !errorText );
  618. } );
  619. cancelButtonView.set( {
  620. label: t( 'Cancel' ),
  621. icon: cancelIcon,
  622. class: 'ck-button-cancel',
  623. type: 'cancel',
  624. withText: true,
  625. } );
  626. cancelButtonView.delegate( 'execute' ).to( this, 'cancel' );
  627. return {
  628. saveButtonView, cancelButtonView
  629. };
  630. }
  631. /**
  632. * Provides localized labels for {@link #horizontalAlignmentToolbar} buttons.
  633. *
  634. * @private
  635. * @type {Object.<String,String>}
  636. */
  637. get _horizontalAlignmentLabels() {
  638. const t = this.t;
  639. return {
  640. left: t( 'Align cell text to the left' ),
  641. center: t( 'Align cell text to the center' ),
  642. right: t( 'Align cell text to the right' ),
  643. justify: t( 'Justify cell text' ),
  644. };
  645. }
  646. /**
  647. * Provides localized labels for {@link #verticalAlignmentToolbar} buttons.
  648. *
  649. * @private
  650. * @type {Object.<String,String>}
  651. */
  652. get _verticalAlignmentLabels() {
  653. const t = this.t;
  654. return {
  655. top: t( 'Align cell text to the top' ),
  656. middle: t( 'Align cell text to the middle' ),
  657. bottom: t( 'Align cell text to the bottom' )
  658. };
  659. }
  660. }