TreeGrid with Reindeer theme

Hello,

We have a Vaadin application that used version 7.x and as a customized theme ,a one that is based on Reindeer Theme.
We followed the documentation about migration of Vaadin application from 7.x to 8.x and everything works well. And we continued using our customized theme.
Currently, i have to develop a new view with the new Vaadin 8.1 component “TreeGrid” which suits our need to explore a defined directory (a.k.a File System explorer in the Sampler https://demo.vaadin.com/sampler/#ui/grids-and-trees/tree-grid/file-system-data-provider),but i am facing problems with the style of the TreeGrid.
Please note that in the Sampler application, when choosing “Reindeer” as a theme for the component, we can’t expand/collapse items,we can’t resize columns, the sort icons are not displayed…
What i tried to do is to recuperate the Valo styling for the TreeGrid component from the github repository and to integrate it to our theme, and doing that corrected the fact that i couldn’t even select an item,but the resize of the columns and sort icons are not corrected.
Would you please point me to some resources that explains how to use new Vaadin 8.x component with the default Vaadin 7.x theme “Reindeer”? Or how to do it?

Thank you in advance,
Best regards,
17122616.png

In Vaadin 8+ there is no Reindeer theme except the compatibility package, i.e. Reindeer theme has not been updated to have styles for genuine Vaadin 8+ components such as TreeGrid.

What i tried to do is to recuperate the Valo styling for the TreeGrid component from the github repository and to integrate it to our theme

Hence, what you have attempted to do is the correct way. No the question is what GitHub repository you refer to? There is TreeGrid add-on for Vaadin 7, that is not the place you should look into, but the Vaadin framework github repository.

And since TreeGrid is made of Vaadin 8 version of Grid, you probably need to reverse engineer some of the styles of it too.

Note, if you drop compatibility package, the Reindeer base theme will be dropped too, so you need rework everything.

Thank you for the prompt response,

Tatu Lund:
And since TreeGrid is made of Vaadin 8 version of Grid, you probably need to reverse engineer some of the styles of it too.

I have tried to make the reverse engineering but the result is not 100% working ( screenshot attachment in my first comment).
The github repository i’m pointing to is the Vaadin Framework one. I took a look at the TreeGrid one (https://github.com/vaadin/framework/blob/master/themes/src/main/themes/VAADIN/themes/valo/components/treegrid.scss) and thought it would simply work by integrating it to our customized Reindeer theme, but not.
Then i have made some modifications on it to accept Reindeer theme styling.

// Originally taken from : https://github.com/vaadin/framework/blob/master/themes/src/main/themes/VAADIN/themes/valo/components/_treegrid.scss

@import "../reindeer/grid/grid.scss";

/** Expander width and item indentation constants*/
$v-treegrid-expander-width: 1.5em !default;

$v-treegrid-indent: 1em !default;

// Classname for depth styling
$v-treegrid-class-depth: depth !default;

/** Expander button visual - collapsed */
@mixin reindeer-treegrid-collapsed-icon-style {
    content: "\f0da";
    font-family: ThemeIcons;
}

/** Expander button visual - expanded */
@mixin reindeer-treegrid-expanded-icon-style {
    content: "\f0d7";
    font-family: ThemeIcons;
}

@mixin my_treegrid ($primary-stylename: v-treegrid) {

  @include reindeer-grid($primary-stylename);
  
  .#{$primary-stylename}-expander {
    display: inline-block;
    vertical-align: top;

    &::before {
      display: inline-block;
      width: $v-treegrid-expander-width;
      text-align: center;
      content: "";

      // Expander for expanded item
      &.expanded {
        @include reindeer-treegrid-expanded-icon-style;
      }

      // Expander for collapsed item
      &.collapsed {
        @include reindeer-treegrid-collapsed-icon-style;
      }

      /*&.collapse-disabled {
        @include opacity($v-disabled-opacity);
        cursor: default;
      }*/
    }
  }

  // Hierarchy depth styling
  .#{$primary-stylename}-node {
    @for $i from 0 through 15 {
      &.#{$v-treegrid-class-depth}-#{$i} {
        padding-left: $v-treegrid-indent * $i;
      }
    }
  }

  // Expander and cell content in same line
  .#{$primary-stylename}-cell-content {
    display: inline-block;
    vertical-align: middle;
  }

  /*.#{$primary-stylename}-row-focused {

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: $v-grid-cell-focused-border;
      display: none;
      pointer-events: none;
    }
  }*/

  // Needed for hiding the included style
  .#{$primary-stylename}-cell-focused {
    position: static;

    &::before {
      display: none;
    }
  }

  .#{$primary-stylename}:focus .#{$primary-stylename}-row-focused::before {
    display: block;
  }

  .#{$primary-stylename}.v-disabled:focus .#{$primary-stylename}-row-focused::before {
    // Disabled TreeGrid should not show row focus outline
    display: none;
  }

  .#{$primary-stylename}:focus .#{$primary-stylename}-cell-focused::before {
    display: none;
  }
  
  // Originally taken : https://github.com/vaadin/framework/blob/master/themes/src/main/themes/VAADIN/themes/valo/components/_grid.scss
  .#{$primary-stylename}-column-resize-handle {
    position: absolute;
    width: 2 * $v-grid-cell-padding-horizontal;
    right: -$v-grid-cell-padding-horizontal;
    top: 0px;
    bottom: 0px;
    cursor: col-resize;
    z-index: 10;

    // TODO should refactor into a mixin
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
}

Please note that i commented this part because the project won’t compile.

/*&.collapse-disabled {
        @include opacity($v-disabled-opacity);
        cursor: default;
      }*/

and that i have commented this part too, because with it, when focusing on an item (with 3 columns), Column 1 begins from Column 2 position (concerning the row of the item).

/*.#{$primary-stylename}-row-focused {

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: $v-grid-cell-focused-border;
      display: none;
      pointer-events: none;
    }
  }*/

As so, it’s possible to expand/collapse an item, and to select a row (because in the Sampler File System Explorer, we can’t even select an item, expand/collapse, when the theme selected is Reindeer).
But the remaining 2 things that i have not succeded to, are:

  • The sort icons on column headers
  • The cursor to resize a column

As so, i have added this part (modified) from the Grid Valo styling hoping that it would do the trick but unseccesfully ( the resizing column cursor is placed at the right hand border of the TreeGrid)

.#{$primary-stylename}-column-resize-handle {
    position: absolute;
    width: 2 * $v-grid-cell-padding-horizontal;
    right: -$v-grid-cell-padding-horizontal;
    top: 0px;
    bottom: 0px;
    cursor: col-resize;
    z-index: 10;

    // TODO should refactor into a mixin
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

I do doubt that the problem is coming from :

$v-grid-cell-padding-horizontal 

wich is equel in Reindeer to

$v-grid-cell-padding-horizontal: 10px !default;

and not the same in valo.
Would it be that the missing part? i don’t know yet!

Tatu Lund:
There is TreeGrid add-on for Vaadin 7, that is not the place you should look into, but the Vaadin framework github repository.

As a last resort, would the TreeGrid for Vaadin 7 work on Vaadin 8?

Thank you,
Best regards,

You probably like Reindeer, because by default it is a bit more compact, i.e. smaller font, more rows per view in Grid, etc. If that is the case, I think it would much less work for you to switch to use Valo instead of Reindeer and customize it to be more compact, which should be relatively easy by setting some variables.

See more discussion here: https://vaadin.com/forum/thread/15341687

Thank you the feedback,
We plan to integrate the TreeGrid component after doing the switch to use Valo instead of Reindeer, because this theme migration is an expensive task due to the fact that we have many customizations done on Reindeer.
Best regards,