Skip to content

Commit

Permalink
feat: add labelPosition prop to checkbox wdg #48
Browse files Browse the repository at this point in the history
  • Loading branch information
@GhilesHideur
GhilesHideur committed Oct 19, 2023
1 parent afa2e77 commit 8ae2abd
Show file tree
Hide file tree
Showing 2 changed files with 26 additions and 19 deletions.
2 changes: 1 addition & 1 deletion front-end/source/assets/style/widgets/_widgets-forms.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -251,7 +251,6 @@
left: 0;
position: absolute;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
font-size: 20px;
Expand Down Expand Up @@ -1045,6 +1044,7 @@

// Custom Group labels
.switch-span,
.checkbox-span,
.select-span,
.ac-value-span,
.value-span {
Expand Down
43 changes: 25 additions & 18 deletions front-end/source/kernel/dashboard/plugins/basic/plugin-flat-ui-boolean-widgets.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,23 +93,39 @@ function flatUiBooleanWidgetsPluginClass() {
let divContent = '';
const widgetHtml = document.createElement('div');
widgetHtml.setAttribute('id', 'checkbox-widget-html' + idWidget);

//
const labelHeight = checkboxHeight * modelsParameters[idInstance].checkboxSize;
const divContainerHeightPx = $('#' + idDivContainer).height(); // in px
//const divMarginTop = (divContainerHeightPx - labelHeight) / 2;
widgetHtml.setAttribute("style",
//'padding-top: ' + divMarginTop + 'px; ' +
'width: inherit; cursor: inherit; display: flex; justify-content: center;');
//

const labelPosition = (!_.isUndefined(modelsParameters[idInstance].labelPosition) && modelsParameters[idInstance].labelPosition === 'right') ? 'right' : 'left';
const widgetDirection = (labelPosition === 'left') ? 'rtl' : 'ltr';

// Dynamically set the direction property to 'ltr' or 'rtl'
document.styleSheets[0].addRule('#checkbox-widget-html' + idWidget, 'direction: ' + widgetDirection);

if (modelsParameters[idInstance].label != "" && modelsParameters[idInstance].displayLabel) { //ABK
// conversion to enable HTML tags
const labelText = this.getTransformedText("label");
const styleLabel = 'style = "cursor: inherit; line-height:' + lineHeight + 'px;"';

divContent += '<label class="checkbox" id="label' + idWidget +
'" style="cursor: inherit; display: flex; align-items: center; margin:auto; padding-left: ' + padding +
'px; line-height:' + lineHeight + 'px; ' + this.labelFontSize() + this.labelColor() + this.labelFontFamily() + '; " for="checkbox' + idWidget + '">';
divContent += '<label class="checkbox" id="label' + idWidget + '" ' + styleLabel + ' for="checkbox' + idWidget + '">';
divContent += '<input type="checkbox" class="nohover" data-toggle="radio" style="zoom:' + modelsParameters[idInstance].checkboxSize +
'" value="" id="checkbox' + idWidget + '" disabled>';
divContent += '</input>';
divContent += labelText;
divContent += '</label>';

const styleSpan = 'style="display: flex; justify-content: center; align-items: center; ' + this.labelFontSize() + this.labelColor() + this.labelFontFamily() + ' text-align: ' + labelPosition + ';"';
divContent += '<span id="checkbox-span' + idWidget +
'" class="checkbox-span" ' + styleSpan + '>' +
labelText + '</span>';
} else {
divContent += '<label class="checkbox" id="label' + idWidget +
'" style="cursor: inherit; display: flex; align-items: center; margin: auto;" for="checkbox' + idWidget + '">';
const styleLabel = 'style = "cursor: inherit; padding-right: 0px;"';
divContent += '<label class="checkbox" id="label' + idWidget + '" ' + styleLabel + ' for="checkbox' + idWidget + '">';
divContent += '<input type="checkbox" class="nohover" data-toggle="radio" style="zoom:' + modelsParameters[idInstance].checkboxSize +
' value="" id="checkbox' + idWidget + '" disabled>';
divContent += '</input>';
Expand All @@ -119,14 +135,6 @@ function flatUiBooleanWidgetsPluginClass() {
widgetHtml.innerHTML = divContent;
$("#" + idDivContainer).html(widgetHtml);

//
const labelHeight = checkboxHeight * modelsParameters[idInstance].checkboxSize;
//divMarginTop = (divContainerHeightPx - labelHeight) / 2;
widgetHtml.setAttribute("style",
//'padding-top: ' + divMarginTop + 'px; ' +
'width: inherit; cursor: inherit; display: flex; justify-content: center; align-items: center;');
//

$('[data-toggle="checkbox"]').radiocheck();
$('[data-toggle="radio"]').radiocheck();

Expand Down Expand Up @@ -260,6 +268,7 @@ function flatUiBooleanWidgetsPluginClass() {
const widgetHtml = document.createElement('div');
widgetHtml.setAttribute('id', 'switch-widget-html' + idWidget);
widgetHtml.setAttribute('class', 'switch-widget-html');
widgetHtml.setAttribute('style', 'height: ' + divContainerHeightPx + 'px;');

const labelPosition = (!_.isUndefined(modelsParameters[idInstance].labelPosition) && modelsParameters[idInstance].labelPosition === 'right') ? 'right' : 'left';
const widgetDirection = (labelPosition === 'left') ? 'rtl' : 'ltr';
Expand Down Expand Up @@ -290,15 +299,13 @@ function flatUiBooleanWidgetsPluginClass() {
// conversion to enable HTML tags
const labelText = this.getTransformedText("label");

divContent = divContent + '<span id="switch-span' + idWidget +
divContent += '<span id="switch-span' + idWidget +
'" class="switch-span" style="' + this.labelFontSize() + this.labelColor() + this.labelFontFamily() + ' text-align: ' + labelPosition + ';">' +
labelText + '</span>';
}
widgetHtml.innerHTML = divContent;
$("#" + idDivContainer).html(widgetHtml);

widgetHtml.setAttribute('style', 'height: ' + divContainerHeightPx + 'px;');

document.styleSheets[0].addRule('input + #slide' + idWidget , this.switchOffColor());
document.styleSheets[0].addRule('input:checked + #slide' + idWidget , this.switchOnColor());
document.styleSheets[0].addRule('input:focus + #slide' + idWidget , this.switchShadowColor());
Expand Down

0 comments on commit 8ae2abd

Please sign in to comment.