UI Bootstrap Material Design Switch

[How To] Bootstrap Material Design Switch

Just messing around Material Design to get rid of adminLTE classical design built in Serenity. Just an alternative to the Bootstrap Switch design , more simple, though, but with working ReadOnly for editor just like using BooleanEditor.

BooleanSwitchEditor

namespace YourProjectName {

    /**
     * BooleanSwitchEditor. Inspired by http://bootsnipp.com/snippets/featured/material-design-switch
     *  
     */
    @Serenity.Decorators.element("<div/>")
    @Serenity.Decorators.registerEditor([Serenity.IGetEditValue, Serenity.ISetEditValue, Serenity.IReadOnly])
    export class BooleanSwitchEditor extends Serenity.Widget<BooleanSwitchOptions>
        implements Serenity.IGetEditValue, Serenity.ISetEditValue, Serenity.IReadOnly {

        private _value: boolean;
        private _input: JQuery;
        private _label: JQuery;

        constructor(container: JQuery, options: BooleanSwitchOptions) {
            super(container, options);

            if (!options.css) {
                this.options.css = "label-success";
            }
            var id = container.prop('id') + '_bsw';
            this._input = jQuery('<input type="checkbox"/>').prop('id', id);
            this._input.on('click', (e) => {
                if (this._input.hasClass('readonly') || this.element.hasClass('readonly'))
                    e.preventDefault();
            });

            
            this._label = jQuery('<label/>').prop('for', id).addClass(this.options.css);

            container.removeClass('flexify');
            container.append(this._input);
            container.append(this._label);
        }


        


        public setEditValue(source: any, property: Serenity.PropertyItem): void {
            this._input.prop('checked', source[property.name]);
        }

        public getEditValue(property: Serenity.PropertyItem, target: any): void {
            target[property.name] = this._input.is(":checked");
        }

        get_readOnly(): boolean {
            return this._input.hasClass(":readonly");
        }

        //We could also do it by disabling input checkbox
        set_readOnly(value: boolean) {
            if (value) {
                if (!this._input.hasClass("readonly"))
                    this._input.addClass("readonly");

            }
            else 
                this._input.removeClass("readonly");
        }


        public get value(): boolean {
            return this._input.is(":checked");
        }

        public set value(data: boolean) {
            this._input.prop("checked", data)
        }

        public changeCss(className: string) {
            if (className && className.length > 0)
                this._label.removeClass(this.options.css).addClass(className);
        }
    }
    export interface BooleanSwitchOptions {
        css?: string;

    }
   
}

CSS:

.s-BooleanSwitchEditor > input[type="checkbox"] {
    display: none;
}

.s-BooleanSwitchEditor > label {
    cursor: pointer;
    height: 0px;
    position: relative;
    width: 40px;
}

.s-BooleanSwitchEditor > label::before {
    background: rgb(0, 0, 0);
    box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    content: '';
    height: 16px;
    margin-top: -8px;
    position: absolute;
    opacity: 0.3;
    transition: all 0.4s ease-in-out;
    width: 40px;
}

.s-BooleanSwitchEditor > label::after {
    background: rgb(255, 255, 255);
    border-radius: 16px;
    box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
    content: '';
    height: 24px;
    left: -4px;
    margin-top: -8px;
    position: absolute;
    top: -4px;
    transition: all 0.3s ease-in-out;
    width: 24px;
}

.s-BooleanSwitchEditor > input[type="checkbox"]:checked + label::before {
    background: inherit;
    opacity: 0.5;
}

.s-BooleanSwitchEditor > input[type="checkbox"]:checked + label::after {
    background: inherit;
    left: 20px;
}

.s-BooleanSwitchEditor.readonly {
    background-color: transparent;
}

.s-BooleanSwitchEditor.readonly > label {
    cursor: not-allowed;
}

Use it in your XYZForm.cs

   [BooleanSwitchEditor(Css = "label-success")]
   public bool? IsTechnicianArrived { get; set; }

• Some bootstrap default css for labeling:
  • label-default
  • label-success
  • label-danger
  • label-warning
  • label-primary
  • label-info

Best regards