Jump to content

Background of title icon of panel


FFREDIANELLI

Recommended Posts

Thanks Sherzod, 

1. Color of backgroud icon of p2 , stay default.

2. Position of icon on P2, (I need it on left),  stay on top of the title, even if i put  spaces in front of the title html removes it, i'm using '__' in front of the title , but is not a good solution. 

Many thanks in advance.

image.png.17fd18075aebddac43d3314e336b320e.png

ptitle.rar

Link to comment
Share on other sites

15 hours ago, FFREDIANELLI said:

1. Color of backgroud icon of p2 , stay default.

2. Position of icon on P2, (I need it on left),  stay on top of the title, even if i put  spaces in front of the title html removes it, i'm using '__' in front of the title , but is not a good solution. 

Many thanks in advance.

Hello,

Also, try this solution, without "customCSS and cls":

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  with UniPanel2 do
  begin
    JSInterface.JSConfig('titlePosition', [1]);
    JSInterface.JSAddListener('afterrender', 'function(me){me.header.setStyle("background", "green"); me.getEl().select(".x-tool-tool-el").elements.forEach(function(el){el.style["background-color"]="green"})}');
  end;
end;

CustomPanel.png.2877827e64258d34e253cfabee37b543.png

Link to comment
Share on other sites

The commented code is how it was... the new code assumes the title position ok ! but que colors not...

I need to create the panels on runtime its a kanban panel, so i only know the color at runtime...

image.thumb.png.4d51b55e1342c336c71f9b8a893a78ab.png

        while UniMainModule.qsql.Eof = false do
        begin
          pp := TUniPanel.Create(ffunil);
          with pp do
          begin
            name := 'pp_S' + UniMainModule.qStepid_step.AsString + '_P' +
              UniMainModule.qsql.fieldbyname('ID_FUNIL').AsString;
            parent := sb1;
            Left := 0;
            Top := 0 + i;
            inc(i);
            TabOrder := i;
            color := $00F0FFF0;
            Width := 230;
            Height := 270;
            Align := altop;
            TitleVisible := True;
            TitleAlign := taLeftJustify;
            Title :=  UniMainModule.qsql.fieldbyname('EMPRESA')
              .AsString ;
            Collapsible := True;
            Collapsed := not ckAbrir.Checked;
            CollapseDirection := cdtop;
            LayoutConfig.Margin := '5 0 0 0';

            JSInterface.JSConfig('titlePosition', [1]);
            JSInterface.JSAddListener('afterrender',
            'function(me){me.header.setStyle("background", "' + cor_chance(UniMainModule.qsql.fieldbyname('CHANCES').value) +
            '"); me.getEl().select(".x-tool-tool-el").elements.forEach(function(el){el.style["background-color"]="'
             + cor_chance(UniMainModule.qsql.fieldbyname('CHANCES').value) + '"})}');
            
//            ClientEvents.ExtEvents.clear;
//            ClientEvents.ExtEvents.add
//              ('afterrender=function afterrender(sender, eOpts){this.addCls("my-panel");}');
//            ClientEvents.UniEvents.clear;
//            ClientEvents.UniEvents.add
//              ('beforeInit=function beforeInit(sender, config) {  config.cls="Chances'
//              + UniMainModule.qsql.fieldbyname('CHANCES').AsString + '";}');

.
.
.


Function Cor_chance(chance: integer): string;
var
  s: string;
begin
  if chance = 1 then
    s := 'Gray'
  else if chance = 2 then
    s := 'DarkRed'
  else if chance = 3 then
    s := 'LightSteelBlue'
  else if chance = 4 then
    s := 'DarkSeaGreen'
  else if chance = 5 then
    s := 'MediumSeaGreen'
  else if chance = 6 then
    s := 'SteelBlue'
end;

Link to comment
Share on other sites

1 hour ago, Sherzod said:
1 hour ago, FFREDIANELLI said:

Hi, added a test case with creation on runtime, the color do not change to green.

 

 

6 minutes ago, FFREDIANELLI said:

Do you clicked on the button Click Here ?

Can you please check your test case?
How should I test your testcase?

Link to comment
Share on other sites

11 minutes ago, FFREDIANELLI said:

Plese use ptitle2.rar

Try this:

    ...
    JSInterface.JSConfig('titlePosition', [1]);
    ClientEvents.ExtEvents.Values['afterrender'] := 'function afterrender(sender, eOpts){sender.header.setStyle("background", "green"); sender.getEl().select(".x-tool-tool-el").elements.forEach(function(el){el.style["background-color"]="green"})}';
  end;

 

Link to comment
Share on other sites

  • 3 years later...
19 minutes ago, Muhammad Idris said:

Collapsed_Panel_Title_Color.zip 6.29 MB · 0 downloads

Also try these changes:

1. UniPanel1.LayoutConfig.Cls = customPanel

2. Also add these rules to CustomCSS:

.customPanel .x-panel-header-collapsed, .customPanel .x-tool-tool-el {
  background-color: #3F3D3D;
  border: #3F3D3D;
}

 

Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...