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
+ key: dropdown.none.label
+
list