diff options
| author | Teemu Suo-Anttila <tsuoanttila@users.noreply.github.com> | 2017-05-02 18:26:11 +0300 |
|---|---|---|
| committer | Henri Sara <henri.sara@gmail.com> | 2017-05-02 18:26:11 +0300 |
| commit | bb43a537e05d9d60ef82f1acac41cea6343c8cbb (patch) | |
| tree | 12617ba2c0b076dbf33d4aa4399061487616e112 /themes/src/main | |
| parent | d5c7d4b68a2befa3ec874eae8a456614d0333233 (diff) | |
| download | vaadin-framework-bb43a537e05d9d60ef82f1acac41cea6343c8cbb.tar.gz vaadin-framework-bb43a537e05d9d60ef82f1acac41cea6343c8cbb.zip | |
Add an initial version of Tree component (#9212)
This patch introduces a Tree component, implemented as a Composite
using TreeGrid. As initial version of the component, some functionality
of the old Tree component has been left out for now.
Partly addresses #8617
Diffstat (limited to 'themes/src/main')
3 files changed, 65 insertions, 0 deletions
diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss index 552d0f035d..99514e2164 100644 --- a/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss +++ b/themes/src/main/themes/VAADIN/themes/valo/components/_all.scss @@ -35,6 +35,7 @@ @import "textarea"; @import "tree"; @import "treegrid"; +@import "newtree"; @import "treetable"; @import "twincolselect"; @import "upload"; @@ -146,6 +147,10 @@ @include valo-tree; } + @if v-is-included(newtree) { + @include valo-newtree; + } + @if v-is-included(treegrid) { @include valo-treegrid; } diff --git a/themes/src/main/themes/VAADIN/themes/valo/components/_newtree.scss b/themes/src/main/themes/VAADIN/themes/valo/components/_newtree.scss new file mode 100644 index 0000000000..9929d7ef47 --- /dev/null +++ b/themes/src/main/themes/VAADIN/themes/valo/components/_newtree.scss @@ -0,0 +1,59 @@ +@import "treegrid"; + +$v-newtree-border-radius: 3px; + +@mixin valo-newtree ($primary-stylename: v-newtree) { + + @include valo-treegrid($primary-stylename); + + .#{$primary-stylename}-row > td { + background-color: transparent; + border: none; + } + + .#{$primary-stylename}-tablewrapper { + background-color: transparent; + border: none; + } + + .#{$primary-stylename}-row-selected > .#{$primary-stylename}-cell { + background-color: transparent; + background-image: none; + color: inherit; + text-shadow: none; + border: none; + } + + .#{$primary-stylename}:focus .#{$primary-stylename}-rowmode-row-focused:before { + display: none; + } + + .#{$primary-stylename}-cell-content { + border: $v-grid-cell-focused-border; + border-color: transparent; + border-radius: $v-newtree-border-radius; + padding: $v-grid-cell-padding; + } + + .#{$primary-stylename}:focus .#{$primary-stylename}-rowmode-cell-focused + > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content { + border: $v-grid-cell-focused-border; + } + + // Selected + .#{$primary-stylename}-row-selected { + $grid-sel-bg: $v-grid-row-selected-background-color; + + > .#{$primary-stylename}-cell > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content { + @include valo-gradient($grid-sel-bg); + color: valo-font-color($grid-sel-bg); + text-shadow: valo-text-shadow($font-color: valo-font-color($grid-sel-bg), $background-color: $grid-sel-bg); + border-color: adjust-color($grid-sel-bg, $lightness: -8%, $saturation: -8%); + } + + > .#{$primary-stylename}-cell-focused > .#{$primary-stylename}-node > .#{$primary-stylename}-cell-content { + border-color: adjust-color($grid-sel-bg, $lightness: 20%); + } + } +} + diff --git a/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss b/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss index cdeca2dd4b..2c70ebeee5 100644 --- a/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss +++ b/themes/src/main/themes/VAADIN/themes/valo/shared/_variables.scss @@ -490,6 +490,7 @@ $v-included-components: textarea, richtextarea, tree, + newtree, treegrid, treetable, twincolselect, |