Jump to content

Background of title icon of panel

FFREDIANELLI

By FFREDIANELLI
in General

 Share

Recommended Posts

FFREDIANELLI Advanced Member

FFREDIANELLI

Posted
  • Author
Posted

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
Sherzod Advanced Member

Sherzod

Posted
Posted
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
FFREDIANELLI Advanced Member

FFREDIANELLI

Posted
  • Author
Posted

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
Sherzod Advanced Member

Sherzod

Posted
Posted
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
Sherzod Advanced Member

Sherzod

Posted
Posted
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...
Sherzod Advanced Member

Sherzod

Posted
Posted
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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...