CSS Treeview

[freedowsRoO]

Hi guys! how you guys doing?

 

I created a menu with a treeview in my aplication and i'm editing the CSS to let the application more beatiful. So, i change the background, imgs and font but i can't find how to change the CSS of hover and activated itens properties. 

 

Any ideia? Thanks!

 

[Sherzod]

Hi!,

Can you please explain in more details providing part of your code, screenshots?!

[freedowsRoO]

7 hours ago, Sherzod said:

Hi!,

Can you please explain in more details providing part of your code, screenshots?!

 

I just want to edit the TREEVIEW CSS. I can set the background and font color with the ".PanelTreeview .x-grid-cell" but the other properties like "focused" or "selected" doesn't work.

 Here is my CSS:

/*SIDE MENU TREEVIEW INTERNO*/
.PanelTreeview .x-grid-cell {
    color: #767f8e;
    font: normal 1.0vw "Roboto", sans-serif;
   /* background-color: #2f353f !important; */
    border-color: #fff; 
    border-style: solid;
}

.PanelTreeview .x-grid-tree-node-expanded .x-tree-icon-parent {
    background-image: url(images/plants.png);
}

.PanelTreeview .x-grid-row-focused .x-grid-td {
	border-bottom-style: solid;
    border-bottom-color: #e2eff8;
	background-color: #e2eff8;	
}

.PanelTreeview .x-grid-row-selected .x-grid-td {
    background-color: #c1ddf1;
	border-bottom-style: solid;
    border-bottom-color: #c1ddf1;
}

.PanelTreeview .x-grid-row-before-focused .x-grid-td {
	border-bottom-style: solid;
    border-bottom-color: #e2eff8;
	background-color: red;	
}

.PanelTreeview .x-grid-row-before--selected .x-grid-td {
    background-color: red;
	border-bottom-style: solid;
    border-bottom-color: #c1ddf1;
}

 

and in my treeview i add this code in uniEvents:

function beforeInit(sender, config)
{
  config.cls='PanelTreeview';
}

 

 

[Sherzod]

Sorry, which component are you using?

[freedowsRoO]

8 minutes ago, Sherzod said:

Sorry, which component are you using?

TUniTreeView

[freedowsRoO]

Any ideia? To found the CSS class responsive to the treeview i'm running the application and using F12 to find the treeview css class, but no success at this moment.

[freedowsRoO]

I found this solution: 

It's almost solve my problem, now i need that when I hover over the item it changes color.

[freedowsRoO]

@Sherzod i did what i want but i found a 'bug'. The solution above doesn't work when i have a login form. As you can see in my example, the treeview in login form works well and in main form not work.

 

 

tree.rar

[Sherzod]

22 minutes ago, freedowsRoO said:

i did what i want but i found a 'bug'. The solution above doesn't work when i have a login form. As you can see in my example, the treeview in login form works well and in main form not work.

Hi,

Can you please make a simple testcase?! I will check

Thanks

[freedowsRoO]

28 minutes ago, Sherzod said:

Hi,

Can you please make a simple testcase?! I will check

Thanks

 

Of course! I did it in my last post. =]

 

51 minutes ago, freedowsRoO said:

@Sherzod i did what i want but i found a 'bug'. The solution above doesn't work when i have a login form. As you can see in my example, the treeview in login form works well and in main form not work.

 

 

tree.rar

 

[Sherzod]

59 minutes ago, freedowsRoO said:

Of course! I did it in my last post. =]

Ok, sorry,

Can you try use like this?:

Uses ... ServerModule;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniServerModule.CustomCSS.Add( //<------------
    // cor interna da treeview
    '#' + UniTreeView1.JSName + '_id .x-tree-view{'+
    '  background-color: #2f353f;'+
    '}'+

    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn{'+
    '  background-color: #2f353f;'+
    '  color: #767f8e;'+
    '  font: normal 0.8vw "Roboto", sans-serif;'+
    '  height: 40px; ' +
    '  padding-top: 10px;'+
    '}'+

    // Config da linha selecionada
    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-selected .x-grid-cell-inner-treecolumn {'+
    '  background-color: #212529;'+
    '  color: #ffffff;'+
    '  font: normal 0.8vw "Roboto", sans-serif;'+
    '  border-Left: 3px solid #6e8cd7;'+
    '}'
    +

    // Config ao passar o mouse em cima da linha
    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-over .x-grid-cell-inner-treecolumn {'+
    '  background-color: #212529;'+
    '  color: #ffffff;'+
    '  font: normal 0.8vw "Roboto", sans-serif;'+
    '  border-Left: 3px solid #6e8cd7;'+
    '  margin: 2px #2f353f; '+
    '}'

//    // Altera imagem que expand o menu
//    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-tree-lines .x-grid-tree-node-expanded .x-tree-elbow-plus {'+
//    ' background-image: url(images/elbow-minus.png);'+
//    '}'+
//
//    // Altera imagem que expand o menu
//    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn {'+
//
//    '}'
  );
end;

 

[freedowsRoO]

No success yet, your code only work the second time that i running the application.

3 hours ago, Sherzod said:

Ok, sorry,

Can you try use like this?:

Uses ... ServerModule;

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniServerModule.CustomCSS.Add( //<------------
    // cor interna da treeview
    '#' + UniTreeView1.JSName + '_id .x-tree-view{'+
    '  background-color: #2f353f;'+
    '}'+

    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn{'+
    '  background-color: #2f353f;'+
    '  color: #767f8e;'+
    '  font: normal 0.8vw "Roboto", sans-serif;'+
    '  height: 40px; ' +
    '  padding-top: 10px;'+
    '}'+

    // Config da linha selecionada
    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-selected .x-grid-cell-inner-treecolumn {'+
    '  background-color: #212529;'+
    '  color: #ffffff;'+
    '  font: normal 0.8vw "Roboto", sans-serif;'+
    '  border-Left: 3px solid #6e8cd7;'+
    '}'
    +

    // Config ao passar o mouse em cima da linha
    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-row-over .x-grid-cell-inner-treecolumn {'+
    '  background-color: #212529;'+
    '  color: #ffffff;'+
    '  font: normal 0.8vw "Roboto", sans-serif;'+
    '  border-Left: 3px solid #6e8cd7;'+
    '  margin: 2px #2f353f; '+
    '}'

//    // Altera imagem que expand o menu
//    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-tree-lines .x-grid-tree-node-expanded .x-tree-elbow-plus {'+
//    ' background-image: url(images/elbow-minus.png);'+
//    '}'+
//
//    // Altera imagem que expand o menu
//    '#' + UniTreeView1.JSName + '_id .x-tree-view .x-grid-cell-inner-treecolumn {'+
//
//    '}'
  );
end;

 

 

[Sherzod]

28 minutes ago, freedowsRoO said:

No success yet, your code only work the second time that i running the application.

4 hours ago, Sherzod said:

Ok sorry we will try to find another solution

[freedowsRoO]

3 minutes ago, Sherzod said:

Ok sorry we will try to find another solution

Thanks so much for your help.

[freedowsRoO]

Hi again! @Sherzod 

 

I'm using the UNIGUI 1.0 and i realized that this version don't have the 'uniTreeMenu' i saw that the TreeMenu does exactly what i'm trying to do with the 'Treeview' component. So my question is. The treeMenu was released in wich version? I'll upgrade my UNIGUI.

[Sherzod]

2 hours ago, freedowsRoO said:

I'm using the UNIGUI 1.0 and i realized that this version don't have the 'uniTreeMenu' i saw that the TreeMenu does exactly what i'm trying to do with the 'Treeview' component. So my question is. The treeMenu was released in wich version? I'll upgrade my UNIGUI.

Hi,

It is available from build:

But, better if you will upgrade to the latest version and build 

[freedowsRoO]

Thank you!

[Sherzod]

Thank you!