Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

IBX-9297: Custom CSS can not be removed from link element #199

Open
wants to merge 2 commits into
base: 4.6
Choose a base branch
from
Open

IBX-9297: Custom CSS can not be removed from link element #199

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed8b55c
IBX-9297: Custom CSS can not be removed from link element
GrabowskiM Dec 11, 2024
72ebafc
fixed styles
GrabowskiM Dec 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
18 changes: 15 additions & 3 deletions src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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',
Expand All @@ -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;
Expand Down
46 changes: 42 additions & 4 deletions src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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' });
Expand All @@ -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);
Expand All @@ -63,6 +67,8 @@ class IbexaLinkFormView extends View {

children: this.attributesChildren,
});

actionBtns.push(this.removeCustomAttributesButtonView);
}

this.setTemplate({
Expand Down Expand Up @@ -107,7 +113,7 @@ class IbexaLinkFormView extends View {
attributes: {
class: 'ibexa-ckeditor-balloon-form__actions',
},
children: [this.saveButtonView, this.cancelButtonView],
children: actionBtns,
},
],
},
Expand Down Expand Up @@ -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',
Expand All @@ -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;
Expand Down Expand Up @@ -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;
}

Expand All @@ -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;
}

Expand All @@ -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;
}

Expand Down
9 changes: 7 additions & 2 deletions src/bundle/Resources/public/scss/_balloon-form.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,15 +21,17 @@

.ck-input-text {
border-radius: calculateRem(5px);
width: 100%;
}

.ck.ck-dropdown {
border: calculateRem(1px) solid $ibexa-color-dark-200;
border-radius: calculateRem(5px);
width: 100%;

.ck-button.ck-dropdown__button {
.ck-button__label {
width: calculateRem(198px);
width: 100%;
display: inline-block;
}
}
Expand Down Expand Up @@ -69,14 +71,17 @@
.ck.ck-button {
cursor: pointer;

& + .ck-button {
margin-left: calculateRem(8px);
}

&.ck-button-save {
color: $ibexa-color-white;
fill: $ibexa-color-white;
background-image: $ibexa-gradient-danger-primary;
border-width: 0;
padding: calculateRem(0px) calculateRem(16px);
border-radius: $ibexa-border-radius;
margin-right: calculateRem(8px);

&:hover {
color: $ibexa-color-white;
Expand Down
5 changes: 5 additions & 0 deletions src/bundle/Resources/translations/ck_editor.en.xliff
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,6 +56,11 @@
<target state="new">Custom tag toolbar</target>
<note>key: custom_tag.toolbar.label</note>
</trans-unit>
<trans-unit id="544c548dcc8ae0e549e5e027fc48a7b072bc8872" resname="dropdown.none.label">
<source>None</source>
<target state="new">None</target>
<note>key: dropdown.none.label</note>
</trans-unit>
<trans-unit id="3b257be2c6dd1f7bf0d5c70e64c22bf5b298dbbf" resname="elements_path.list.label">
<source>list</source>
<target state="new">list</target>
Expand Down
Loading