more flexible styling about angular-tree-control HOT 11 CLOSED

It is easy to add configurable classes for ul/li element, we can do that if that's what you need.
However, I feel that it may not be sufficient to get the bootstrap style as they have specific classes per level (and those limit on the number of levels) where in angular-tree-control there no such specific classes. The reason is that both trees are built differently - the bootstrap is built like a list with padding where angular-tree-control is built like a tree.

Let me know if adding classes on the ul/li is what you need, if so, we will add the option to do so.

from angular-tree-control.

the only important difference that i see in templates is that abn-tree uses a single ul for all levels, and increase the padding in each level to simulate the nesting behavior, but you have a more tree-like template, a ul per level.
it should be ok to add required bootstrap classes to each ul(as of abn-tree .nav.nav-list.nav-pills.nav-stacked), and do some padding like this for nesting:

.nav-stacked ul {
    margin-left: 15px !important;
}

also, getting the icons of tree (open/close/folder) as class and a class for active element, should do the thing.
do i missed something?

from angular-tree-control.

To make sure we both understand one another - this is the current way a tree control is rendered into dom:

<treecontrol class="tree-classic">
  <ul>
    <li class="tree-expanded">
      <i class="tree-has-children"></i>
      <i class="tree-normal"></i>
      <div class="tree-label">
        <span>label: Node 2 (id)</span>
      </div>
      <treeitem>
        <ul>
          <li class="tree-normal">
            <i class="tree-has-children"></i>
            <i class="tree-normal"></i>
            <div class="tree-label tree-selected">
              <span>label: Node 3 (id)</span>
            </div>
          </li>
          <li class="tree-normal">
            <i class="tree-has-children"></i>
            <i class="tree-normal"></i>
            <div class="tree-label">
              <span>label: Node 4 (id)</span>
            </div>
          </li>
        </ul>
      </treeitem>
    </li>
  </ul>
</treecontrol>

There are classes to indicate selection, expansion and placeholders for the images

• tree-selected is placed on the div containing the label of the selected item
• tree-label is placed on the div containing the label HTML
• tree-expanded, tree-collapsed and tree-normal are placed on the li element indicating an element with children expanded, element with children collapsed and element without children.
• tree-has-children is placed on the i element that is shown for branches with children. This is the class to use to customize the closed / open folder images
• tree-normal in (also) placed on the i element that is shown for leafs and can be used to customize the leaf icon.

Using those classes, the current three styling options are made in the tree-control.css

I can also added optional additional classes to be added to any of those element.
For instance, we can have a definitions in options like

$scope.treeOptions = {
    nodeChildren: "children",
    dirSelectable: true,
    additionalClasses: {
      ul: "abn-tree .nav.nav-list.nav-pills.nav-stacked",
      li: "",
      iExpanded: "",
      iCollapsed: "",
      iNormal: "",
      divSelected: ""
  }
}

Does such a change solves your need?

from angular-tree-control.

yes, this seems good
also, 2 additional classes for styling icons of expanded and collapsed items (as of abn) is needed
thank you

from angular-tree-control.

aren't the tree-expanded and tree-collapsed classes on the li element sufficient?

from angular-tree-control.

no
i want to assign a class to , e.g. to have icon
a class on

from angular-tree-control.

only one is sufficient, except that for angular, there is no conditional ng-click.
The first 'i' is used for branches (expanded or collapsed) - with ng-click
The second 'i' is used for leafs - without ng-click.

I am adding a member to options which allows injecting classes to the tree dom, with the following 6 options

• ul - to inject classes to the ul element
• li - to inject classes to the li element
• iExpanded - to inject classes to the first 'i' element when the node is expanded
• iCollapsed - to inject classes to the first 'i' element when the node is collapsed
• iLeaf - to inject a class to the second 'i' element for leafs
• label - to inject a class to the div around the label

from angular-tree-control.

done and pushed. let me know what you think

from angular-tree-control.

thank you
i'll check it and inform you how is it going

from angular-tree-control.

@yoavaa using bootstrap 3, fontawesome 4 and

injectClasses: {
  ul: "list-group",
  li: "list-group-item",
  iExpanded: "fa fa-minus fa-lg",
  iCollapsed: "fa fa-plus fa-lg",
  iLeaf: "fa fa-leaf fa-lg",
}

nearly i have what i want, i think providing another option for selected li should make it completely awesome :)
thank you

from angular-tree-control.

Hi arash,

I have just added the option you have asked for.
Take a look,

Cheers,
Yoav

On Thu, Jan 16, 2014 at 9:07 PM, arash [email protected] wrote:

@yoavaa https://github.com/yoavaa using bootstrap 3, fontawesome 4 and

injectClasses: {
ul: "list-group",
li: "list-group-item",
iExpanded: "fa fa-minus fa-lg",
iCollapsed: "fa fa-plus fa-lg",
iLeaf: "fa fa-leaf fa-lg",}

nearly i have what i want, i think providing another option for selected
li should make it completely awesome :)
thank you

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-32510327
.

from angular-tree-control.