Skip to content

Commit

Permalink
IBX-9298: multiple Custom CSS - no visual indication of selected items
Browse files Browse the repository at this point in the history
  • Loading branch information
@GrabowskiM
GrabowskiM committed Dec 12, 2024
1 parent 640419c commit 94cf689
Show file tree
Hide file tree
Showing 4 changed files with 127 additions and 9 deletions.
16 changes: 14 additions & 2 deletions src/bundle/Resources/public/js/CKEditor/custom-attributes/ui/custom-attributes-form-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import { createLabeledInputNumber } from '../../common/input-number/utils';
import { createLabeledSwitchButton } from '../../common/switch-button/utils';
import { addMultivalueSupport } from '../../common/multivalue-dropdown/utils';

class IbexaCustomAttributesFormView extends View {
constructor(props) {
Expand Down Expand Up @@ -198,7 +199,7 @@ class IbexaCustomAttributesFormView extends View {

config.choices.forEach((choice) => {
itemsList.add({
type: 'button',
type: config.multiple ? 'switchbutton' : 'button',
model: new Model({
withText: true,
label: choice,
Expand All @@ -209,8 +210,19 @@ class IbexaCustomAttributesFormView extends View {

addListToDropdown(labeledDropdown.fieldView, itemsList);

if (config.multiple) {
addMultivalueSupport(labeledDropdown, config);
}

this.listenTo(labeledDropdown.fieldView, 'execute', (event) => {
const value = this.getNewValue(event.source.value, config.multiple, labeledDropdown.fieldView.element.value);
const dropdownValue = labeledDropdown.fieldView.element.value;
const value = this.getNewValue(event.source.value, config.multiple, dropdownValue);

if (config.multiple) {
const isSelected = value.length > dropdownValue.length;

event.source.children.get(0).element.checked = isSelected;
}

labeledDropdown.fieldView.buttonView.set({
label: value,
Expand Down
16 changes: 14 additions & 2 deletions src/bundle/Resources/public/js/CKEditor/link/ui/link-form-view.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@ import { addListToDropdown } from '@ckeditor/ckeditor5-ui/src/dropdown/utils';

import { createLabeledSwitchButton } from '../../common/switch-button/utils';
import { createLabeledInputNumber } from '../../common/input-number/utils';
import { addMultivalueSupport } from '../../common/multivalue-dropdown/utils';
import { getCustomAttributesConfig, getCustomClassesConfig } from '../../custom-attributes/helpers/config-helper';

class IbexaLinkFormView extends View {
Expand Down Expand Up @@ -271,7 +272,7 @@ class IbexaLinkFormView extends View {

config.choices.forEach((choice) => {
itemsList.add({
type: 'button',
type: config.multiple ? 'switchbutton' : 'button',
model: new Model({
withText: true,
label: choice,
Expand All @@ -282,8 +283,19 @@ class IbexaLinkFormView extends View {

addListToDropdown(labeledDropdown.fieldView, itemsList);

if (config.multiple) {
addMultivalueSupport(labeledDropdown, config);
}

this.listenTo(labeledDropdown.fieldView, 'execute', (event) => {
const value = this.getNewValue(event.source.value, config.multiple, labeledDropdown.fieldView.element.value);
const dropdownValue = labeledDropdown.fieldView.element.value;
const value = this.getNewValue(event.source.value, config.multiple, dropdownValue);

if (config.multiple) {
const isSelected = value.length > dropdownValue.length;

event.source.children.get(0).element.checked = isSelected;
}

labeledDropdown.fieldView.buttonView.set({
label: value,
Expand Down
99 changes: 96 additions & 3 deletions src/bundle/Resources/public/scss/_balloon-form.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,104 @@
.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);
.ibexa-ckeditor-dropdown-selected-items {
display: flex;
align-items: center;
flex-wrap: nowrap;
width: calculateRem(198px);
overflow: hidden;
position: relative;

&__item {
display: inline-block;
white-space: nowrap;
background: $ibexa-color-light-300;
border: calculateRem(1px) solid $ibexa-color-light-300;
border-radius: $ibexa-border-radius;
margin-right: calculateRem(4px);
font-size: calculateRem(12px);
line-height: calculateRem(16px);
padding: 0 calculateRem(8px);
}
}

.ck-list {
padding: calculateRem(4px);

&__item {
border-radius: $ibexa-border-radius;

&:hover {
color: $ibexa-color-dark;
background-color: $ibexa-color-light-300;

.ck-button {
background-color: transparent;
}
}
}
}

.ck-button.ck-dropdown__button {
.ck-button {
&__label {
width: calculateRem(198px);
display: inline-block;
}
}
}

.ck-dropdown__panel--multiple {
.ck.ck-button {
&__toggle {
display: none;
}

.ibexa-ckeditor-input--checkbox {
appearance: none;
position: relative;
display: inline-block;
cursor: pointer;
outline: none;
border: calculateRem(1px) solid $ibexa-color-dark-300;
width: calculateRem(16px);
height: calculateRem(16px);
border-radius: calculateRem(2px);
margin-right: calculateRem(16px);

&::after {
content: ' ';
position: absolute;
top: calculateRem(3px);
left: calculateRem(3px);
display: block;
width: calculateRem(8px);
height: calculateRem(5px);
border-left: calculateRem(2px) solid transparent;
border-bottom: calculateRem(2px) solid transparent;
transform: rotate(-45deg);
}

&:hover {
border-color: $ibexa-color-primary;
}

&:focus {
border-color: $ibexa-color-primary;
box-shadow: 0 0 0 calculateRem(4px) rgba($ibexa-color-primary, 0.25);
}

&:checked {
border-color: $ibexa-color-primary;
background-color: $ibexa-color-primary;

&::after {
border-color: $ibexa-color-white;
}
}
}
}
}
}
Expand Down
5 changes: 3 additions & 2 deletions src/bundle/Resources/public/scss/_custom-panel.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,10 @@
width: 100%;

.ck.ck-button {
display: block;
display: flex;

.ck.ck-button__label {
.ck.ck-button__label,
.ibexa-ckeditor-dropdown-selected-items {
width: calc(100% - calculateRem(20px));
height: fit-content;
white-space: normal;
Expand Down

0 comments on commit 94cf689

Please sign in to comment.