diff --git a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js index a37f2d23..1ac5fd6f 100644 --- a/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js +++ b/src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js @@ -7,6 +7,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection'; import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils'; import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; +import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; + import { createLabeledInputNumber } from '../../common/input-number/utils'; import { createLabeledSwitchButton } from '../../common/switch-button/utils'; @@ -191,11 +193,23 @@ class IbexaCustomAttributesFormView extends View { } createDropdown(config) { + const Translator = getTranslator(); const labeledDropdown = new LabeledFieldView(this.locale, createLabeledDropdown); const itemsList = new Collection(); labeledDropdown.label = config.label; + if (!config.multiple && !config.required) { + itemsList.add({ + type: 'button', + model: new Model({ + withText: true, + label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'), + value: null, + }), + }); + } + config.choices.forEach((choice) => { itemsList.add({ type: 'button', @@ -219,9 +233,7 @@ class IbexaCustomAttributesFormView extends View { labeledDropdown.fieldView.element.value = value; - if (event.source.value) { - labeledDropdown.set('isEmpty', false); - } + labeledDropdown.set('isEmpty', !event.source.value); }); return labeledDropdown; diff --git a/src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js b/src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js index 4c342bcd..a72be3eb 100644 --- a/src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js +++ b/src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js @@ -6,6 +6,8 @@ import Collection from '@ckeditor/ckeditor5-utils/src/collection'; import { createLabeledInputText, createLabeledDropdown } from '@ckeditor/ckeditor5-ui/src/labeledfield/utils'; import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils'; +import { getTranslator } from '@ibexa-admin-ui/src/bundle/Resources/public/js/scripts/helpers/context.helper'; + import { createLabeledSwitchButton } from '../../common/switch-button/utils'; import { createLabeledInputNumber } from '../../common/input-number/utils'; import { getCustomAttributesConfig, getCustomClassesConfig } from '../../custom-attributes/helpers/config-helper'; @@ -19,6 +21,7 @@ class IbexaLinkFormView extends View { this.saveButtonView = this.createButton('Save', null, 'ck-button-save', 'save-link'); this.cancelButtonView = this.createButton('Remove link', null, 'ck-button-cancel', 'remove-link'); + this.removeCustomAttributesButtonView = this.createButton('Remove attributes', null, 'ck-button-cancel'); this.selectContentButtonView = this.createButton('Select content', null, 'ibexa-btn--select-content'); this.urlInputView = this.createTextInput({ label: 'Link to' }); this.titleView = this.createTextInput({ label: 'Title' }); @@ -42,6 +45,7 @@ class IbexaLinkFormView extends View { const customAttributesLinkConfig = customAttributesConfig.link; const customClassesLinkConfig = customClassesConfig.link; const customAttributesDefinitions = []; + const actionBtns = [this.saveButtonView, this.cancelButtonView]; this.children = this.createFormChildren(); this.attributesChildren = this.createFromAttributesChildren(customAttributesLinkConfig, customClassesLinkConfig); @@ -63,6 +67,8 @@ class IbexaLinkFormView extends View { children: this.attributesChildren, }); + + actionBtns.push(this.removeCustomAttributesButtonView); } this.setTemplate({ @@ -107,7 +113,7 @@ class IbexaLinkFormView extends View { attributes: { class: 'ibexa-ckeditor-balloon-form__actions', }, - children: [this.saveButtonView, this.cancelButtonView], + children: actionBtns, }, ], }, @@ -264,11 +270,23 @@ class IbexaLinkFormView extends View { } createDropdown(config) { + const Translator = getTranslator(); const labeledDropdown = new LabeledFieldView(this.locale, createLabeledDropdown); const itemsList = new Collection(); labeledDropdown.label = config.label; + if (!config.multiple && !config.required) { + itemsList.add({ + type: 'button', + model: new Model({ + withText: true, + label: Translator.trans(/*@Desc("None")*/ 'dropdown.none.label', {}, 'ck_editor'), + value: null, + }), + }); + } + config.choices.forEach((choice) => { itemsList.add({ type: 'button', @@ -292,9 +310,13 @@ class IbexaLinkFormView extends View { labeledDropdown.fieldView.element.value = value; - if (event.source.value) { - labeledDropdown.set('isEmpty', false); - } + labeledDropdown.set('isEmpty', !event.source.value); + }); + + this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => { + labeledDropdown.fieldView.element.value = null; + + labeledDropdown.set('isEmpty', true); }); return labeledDropdown; @@ -323,6 +345,11 @@ class IbexaLinkFormView extends View { labeledInput.label = label; + this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => { + labeledInput.fieldView.reset(); + labeledInput.set('isEmpty', true); + }); + return labeledInput; } @@ -331,6 +358,11 @@ class IbexaLinkFormView extends View { labeledInput.label = config.label; + this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => { + labeledInput.fieldView.reset(); + labeledInput.set('isEmpty', true); + }); + return labeledInput; } @@ -348,6 +380,12 @@ class IbexaLinkFormView extends View { labeledSwitch.label = label; labeledSwitch.fieldView.set('isEmpty', false); + this.listenTo(this.removeCustomAttributesButtonView, 'execute', () => { + labeledSwitch.fieldView.element.value = false; + labeledSwitch.fieldView.set('value', false); + labeledSwitch.fieldView.isOn = false; + }); + return labeledSwitch; } diff --git a/src/bundle/Resources/public/scss/_balloon-form.scss b/src/bundle/Resources/public/scss/_balloon-form.scss index 8c330784..f9fd89c3 100644 --- a/src/bundle/Resources/public/scss/_balloon-form.scss +++ b/src/bundle/Resources/public/scss/_balloon-form.scss @@ -69,6 +69,10 @@ .ck.ck-button { cursor: pointer; + & + .ck-button { + margin-left: calculateRem(8px); + } + &.ck-button-save { color: $ibexa-color-white; fill: $ibexa-color-white; @@ -76,7 +80,6 @@ border-width: 0; padding: calculateRem(0px) calculateRem(16px); border-radius: $ibexa-border-radius; - margin-right: calculateRem(8px); &:hover { color: $ibexa-color-white; diff --git a/src/bundle/Resources/translations/ck_editor.en.xliff b/src/bundle/Resources/translations/ck_editor.en.xliff index 6d901793..8a91576d 100644 --- a/src/bundle/Resources/translations/ck_editor.en.xliff +++ b/src/bundle/Resources/translations/ck_editor.en.xliff @@ -56,6 +56,11 @@ Custom tag toolbar key: custom_tag.toolbar.label + + None + None + key: dropdown.none.label + list list