From bb43a537e05d9d60ef82f1acac41cea6343c8cbb Mon Sep 17 00:00:00 2001
From: Teemu Suo-Anttila <tsuoanttila@users.noreply.github.com>
Date: Tue, 2 May 2017 18:26:11 +0300
Subject: 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
---
 .../themes/VAADIN/themes/valo/components/_all.scss |  5 ++
 .../VAADIN/themes/valo/components/_newtree.scss    | 59 ++++++++++++++++++++++
 .../VAADIN/themes/valo/shared/_variables.scss      |  1 +
 3 files changed, 65 insertions(+)
 create mode 100644 themes/src/main/themes/VAADIN/themes/valo/components/_newtree.scss

(limited to 'themes/src/main')

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,
-- 
cgit v1.2.3