TUniPanel Border color

[RobYost]

TUniPanel does not seem to have the same color as TUniListbox or TUniTreeView.

 

These other controls have a color from the theme choosen, but TUniPanel's border is black (or maybe dark gray)

 

Is there a solution to this?

 

GroupBox and RadioBox are also of a different color.

[mhmda]

If you want to change panel Border coloer use css and do not forget to set border property in design time

[RobYost]

What I tried was from Erich Wanker's example:

 

     was.ClientEvents.ExtEvents.Add
      ('OnAfterrender=function OnAfterrender(sender)'+
      ' {  sender.setBodyStyle("border-color:#0000ff'");  }');

but this did nothing.  When I tried background-color, like his example it did work.  Is border-color: the correct parameter?

[Sherzod]

Hi,

 

You need like this:

setBodyStyle("border-color", "#0000ff")

[RobYost]

  UniPanel3.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender)' +
    '  {  sender.setBodyStyle("border-color","#ff0000");  }');
  UniPanel3.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender)' +
    '  {  sender.setBodyStyle("border-width","15");  }');
  UniPanel3.ClientEvents.ExtEvents.Add('OnAfterrender=function OnAfterrender(sender)' +
    '  {  sender.setBodyStyle("background-color","#ffff00");  }');

This changes the background color to yellow, but the border is still black and 1 px wide.

 

I put this in TUniFrameCreate(Sender: TObject)

[Sherzod]

Please make a small testcase, we will try

[RobYost]

I found the problem.  BorderStyle has to be ubsDefault for the border color to take affect.

 

Is there a way to determine what the border color should be for a particular theme?

[mhmda]

If you want to change panel Border coloer use css and do not forget to set border property in design time

  

Read carefully :-)

[mos]

I need to be able to click on a TUniImage and when this occurs I want to change the TUniPanel border color and width to 5 that the image is contained in to clRed.

I then need to be able to call some additional Delphi code to do some other processing.

[Sherzod]

Hi,

 

that the image is contained in to clRed.

 

Can you clarify ?!

[mos]

Hi Delphi Developer,

 

  I have a TUniPanel which contains a TUniImage. 

 

  When the user clicks on the TUniImage I want to change the border color and width to indicate that the image was selected.  I then need to be able to call a Delphi procedure when the onClick occurs on the image

  as well.

[Sherzod]

Hi Delphi Developer,

 

  I have a TUniPanel which contains a TUniImage. 

 

  When the user clicks on the TUniImage I want to change the border color and width to indicate that the image was selected.  I then need to be able to call a Delphi procedure when the onClick occurs on the image

  as well.

 

Well,

Firstly, you can use UniImage1 -> OnClick event for this.

 

For example:

procedure TMainForm.UniImage1Click(Sender: TObject);
begin
  with UniPanel1.JSInterface do
  begin
    JSCode(#1'.setBodyStyle("border-color", "red");');
    JSCode(#1'.setBodyStyle("border-width", "5px");');
  end;

  // Your additional code...
end;

[mos]

Hi Delphi Developer,

 

  Thanks for the above code.

 

  How can I test if the border color is set to red and then change it back to another color when the user clicks the Image again?

[Sherzod]

Hi,

 

You can try to use this approach too, for example:

 

1. UniServerModule -> CustomCSS:

.mypanel {
    border-color: red;
    border-width: 5px;
}

2.

procedure TMainForm.UniImage1Click(Sender: TObject);
begin
  with UniPanel1.JSInterface do
    JSCode('var me='#1'; if (me.body.hasCls("mypanel")) {me.removeBodyCls("mypanel")} else {me.addBodyCls("mypanel")};');

end;

[mos]

Hi Delphi Developer,

 

  Is there a way for me to test if the border color has been set or not set and then call a different Delphi procedure based on the color?

 

  e.g. when the border color is red call Delphi procedure 1 otherwise if not set then call Delphi procedure 2

[Sherzod]

Hi,

 

Ok, a bit later I will give you a solution

 

Best regards,

[Sherzod]

Try this approach:

 

1. UniServerModule -> CustomCSS:

.mypanel {
    border-color: red;
    border-width: 5px;
}

2. MainForm -> OnCreate event:

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniImage1.ClientEvents.ExtEvents.Values['click'] := 'function(sender, eOpts){var me='+UniPanel1.JSName+'; '+
    'if (me.body.hasCls("mypanel")) {me.removeBodyCls("mypanel"); ajaxRequest(this, "clicked", ["_red=false"])} else {me.addBodyCls("mypanel"); ajaxRequest(this, "clicked", ["_red=true"])};' +
    '}';
end;

3. UniImage1 -> OnAjaxEvent event:

procedure TMainForm.UniImage1AjaxEvent(Sender: TComponent; EventName: string;
  Params: TUniStrings);
var
  _red: Boolean;
begin
  if EventName = 'clicked' then
  begin
    _red := StrToBool(Params.Values['_red']);
    if _red then
      ShowMessage('red')
    else
      ShowMessage('not red');

  end;

end;

Best regards,

[mos]

Hi Delphi Developer,

 

  I have another situation which I hope you can help me with.

 

  I have a project which has e.g. three TUniPanels (for this example I will call them Panel1, Panel2, Panel3) which I have added your code above to so this will toggle the red border on and off when clicked, so the user knows which Panel(s)

  have been selected.

 

  I need some way of clearing the border of a previously selected Panel if another has been selected e.g. if Panel1 has a red border and I click Panel3 then the border around Panel1 should be cleared.

[Sherzod]

Hi,

 

Ok, I will try to analyze it

[Sherzod]

If you are using ".mypanel", one possible solution:

  UniSession.AddJS('Ext.select(".mypanel").removeCls("mypanel");'); //<----------------
  
  with UniPanel1.JSInterface do
    JSCode('var me='#1'; me.addBodyCls("mypanel");');