Making disabled controls more distinctive

[aem]

 

Although everyone loves the look that comes with the CLASSIC theme

I get constant complaints about not being able to tell disabled items from enabled ones.

It would be great if I could somehow use a slightly darker shade of gray

for disabled items and do it globally (perhaps in customcss). What are the options here?

thanks,

tonyM

[Sherzod]

Hello,

These posts may help you:

 

[aem]

Yes, thank you. The two step process works fine for particular
controls as in:

1. UniServerModule.CustomCSS:
._x-item-disabled .x-form-field {
    opacity: 1;
    -moz-opacity: 1;
    filter: alpha(opacity=100);
    color: dimgray;
    background: gainsboro;
}
2. UniDBEdit->ClientEvents->UniEvents-> beforeInit fn:
function beforeInit(sender, config)
{
    config.disabledCls = "_x-item-disabled";
}

But this would be unwieldly for dozens of forms and thousands of
controls. What I was shooting for was maybe a simple one line that
could be added to a form's constructor. Like:
    prepDisabled(self);

My prepDisabled() looks something like this:
(to be called on form creation just once)

procedure prepDisabled(vform: tuniform);
var
i:integer;
begin
for i:=0 to vform.componentcount-1 do
     begin
    if vform.components[i] is tuniedit then
      tuniedit(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
    if vform.components[i] is tunimemo then
      tunimemo(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
    if vform.components[i] is tunicombobox then
      tunicombobox(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
   if vform.components[i] is tuniradiobutton then
      tuniradiobutton(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
   if vform.components[i] is tunicheckbox then
      tunicheckbox(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
   if vform.components[i] is tunispinedit then
      tunispinedit(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
   if vform.components[i] is tunidatetimepicker then
      tunidatetimepicker(vform.components[i]).ClientEvents.UniEvents.Values['beforeInit'] := 'function beforeInit(sender, config) {config.disabledCls = "_x-item-disabled";}';
    end;
end;

This works pretty darn good.
Please check the attached image.
The only thing lacking is with the radiobuttons and checkboxes,
they may need slightly different treatment.

Radiobuttons and Checkboxes:
 when disabled, which one is Checked is no longer visible.
(and it would be nice if the associated caption could be
assigned a lighter color too)

Neither of these are 'showstoppers' but my guess is they are
both obvious to a JS savant.

as always, thanks so much,

tonyM