Updated report view styles

The palette is now more clear looking and items in the canvas are now
animated into view.

Author: Jouni Koivuviita

src/main/java/com/vaadin/demo/dashboard/component/InlineTextEditor.java

@@ -2,7 +2,8 @@
 
 import com.vaadin.data.Property;
 import com.vaadin.data.util.ObjectProperty;
-import com.vaadin.demo.dashboard.data.dummy.DummyDataGenerator;
+import com.vaadin.event.LayoutEvents.LayoutClickEvent;
+import com.vaadin.event.LayoutEvents.LayoutClickListener;
 import com.vaadin.server.FontAwesome;
 import com.vaadin.shared.ui.label.ContentMode;
 import com.vaadin.ui.Button;
@@ -18,7 +19,7 @@
 public class InlineTextEditor extends CustomComponent {
 
     private final Property<String> property = new ObjectProperty<String>(
-            DummyDataGenerator.randomText(30));
+            "Enter text here...");
     private final Component editor;
     private final Component readOnly;
 
@@ -52,6 +53,14 @@ public void buttonClick(ClickEvent event) {
         CssLayout result = new CssLayout(text, editButton);
         result.addStyleName("text-editor");
         result.setSizeFull();
+        result.addLayoutClickListener(new LayoutClickListener() {
+            @Override
+            public void layoutClick(LayoutClickEvent event) {
+                if (event.getChildComponent() == text && event.isDoubleClick()) {
+                    setCompositionRoot(editor);
+                }
+            }
+        });
         return result;
     }
 

src/main/java/com/vaadin/demo/dashboard/view/reports/ReportEditor.java

@@ -167,8 +167,9 @@ public void addComponent(PaletteItemType paletteItemType,
             if (placeholder.getParent() != null) {
                 layout.removeComponent(placeholder);
             }
-            layout.addComponent(new WrappedComponent(
-                    createComponentFromPaletteItem(paletteItemType, prefillData)));
+            layout.addComponent(
+                    new WrappedComponent(createComponentFromPaletteItem(
+                            paletteItemType, prefillData)), 1);
         }
 
         private Component createComponentFromPaletteItem(PaletteItemType type,

src/main/webapp/VAADIN/themes/dashboard/views/reports.scss

@@ -29,11 +29,24 @@
       }
     }
 
+    .v-slot-palette {
+      @include valo-gradient;
+      border-bottom: valo-border();
+    }
+
     .palette {
-      padding: 0;
+      padding: .5em 0;
+      font-size: 0.9em;
+
+      .v-icon {
+        display: block;
+        text-align: center;
+      }
 
       .v-label {
-        font-size: 14px;
+        font-size: 0.9em;
+        margin: 0 .4em;
+        cursor: move;
       }
     }
 
@@ -47,23 +60,24 @@
 
     .v-slot-canvas {
       overflow: auto;
+    }
 
-      .canvas {
-        padding: $view-padding;
-
-        .title {
-          font-size: 24px;
-          font-weight: 600;
-          border: 1px solid transparent;
-          color: #404346;
-          @include box-shadow(none);
-          width: 100%;
-          text-align: center;
-          cursor: pointer;
-          margin-bottom: 1cm;
-        }
+    .canvas {
+      padding: $view-padding;
+
+      .title {
+        font-size: 24px;
+        font-weight: 600;
+        border: 1px solid transparent;
+        color: #404346;
+        @include box-shadow(none);
+        width: 100%;
+        text-align: center;
+        cursor: pointer;
+        margin-bottom: 1cm;
       }
     }
+
   }
 
   .reports .palette .v-image {
@@ -78,6 +92,15 @@
     padding: 1.5cm;
 
     @include box-shadow(0 2px 10px rgba(0,0,0,.3));
+
+    > .v-slot > .v-widget {
+      @include animation(valo-animate-in-fade 500ms 10ms backwards, animate-in-scale-up 300ms 10ms backwards);
+
+      &.title,
+      &.placeholder {
+        @include animation(none);
+      }
+    }
   }
 
   .reports .canvas .title:hover {