From 6f506d602301e9aa221613fb8a2b584be859404c Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Mon, 13 Feb 2017 14:40:45 -0800
Subject: [PATCH 1/8] some attempts to get icons in create tab

---
 interface/resources/images/sphere-01.svg     | 108 +++++++++++++++++++
 interface/resources/qml/hifi/tablet/Edit.qml |  46 ++++----
 2 files changed, 135 insertions(+), 19 deletions(-)
 create mode 100644 interface/resources/images/sphere-01.svg

diff --git a/interface/resources/images/sphere-01.svg b/interface/resources/images/sphere-01.svg
new file mode 100644
index 0000000000..975199c8da
--- /dev/null
+++ b/interface/resources/images/sphere-01.svg
@@ -0,0 +1,108 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 50 150" style="enable-background:new 0 0 50 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{opacity:0.9;}
+	.st1{fill:#FFFFFF;}
+	.st2{fill:#1E1E1E;}
+	.st3{fill:#EAEAEA;}
+	.st4{opacity:0.47;}
+	.st5{opacity:0.47;fill:#EAEAEA;}
+</style>
+<g>
+	<g class="st0">
+		<path class="st1" d="M50,46c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V4c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4V46z"/>
+	</g>
+</g>
+<g class="st0">
+	<path class="st2" d="M50,96c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4V54c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4V96z"/>
+</g>
+<path d="M32.7,9.4c-4.3-4.3-11.2-4.3-15.5,0c-2.1,2.1-3.2,4.8-3.2,7.7c0,2.9,1.1,5.7,3.2,7.7C19.4,27,22.2,28,25,28
+	c2.8,0,5.6-1.1,7.7-3.2c2.1-2.1,3.2-4.8,3.2-7.7C35.9,14.2,34.8,11.4,32.7,9.4z M18.3,10.4c1.4-1.4,3.2-2.3,5-2.6
+	C23,8.3,22.7,9,22.4,9.9c-0.6,2-1,4.6-1,7.3c0,0.1,0,0.3,0,0.5c0.3,0.1,0.6,0.1,0.9,0.1c0.1,0,0.2,0,0.3,0c0-0.2,0-0.4,0-0.6
+	c0-5.5,1.4-9.2,2.5-9.5c0,0,0,0,0.1-0.1c2.4,0,4.7,1,6.5,2.8c1.7,1.7,2.7,4,2.8,6.5c-0.2,1.1-3.9,2.5-9.5,2.5
+	c-5.5,0-9.1-1.4-9.4-2.4C15.6,14.5,16.6,12.2,18.3,10.4z M31.7,23.8c-1.9,1.9-4.3,2.8-6.8,2.8c-0.7-0.4-1.4-2.1-1.9-4.6l-1.2-0.1
+	c0.2,0.9,0.4,1.8,0.6,2.6c0.2,0.8,0.5,1.4,0.8,1.9c-1.8-0.3-3.5-1.2-4.9-2.6c-1.4-1.4-2.3-3.2-2.6-5.1c0.5,0.3,1.2,0.6,2,0.9
+	c2,0.6,4.6,1,7.3,1s5.3-0.3,7.3-1c0.8-0.3,1.5-0.6,2-0.9C34,20.6,33.1,22.4,31.7,23.8z"/>
+<g>
+	<path d="M11.1,37.5c0,0-0.1-0.1-0.2-0.2c-0.1-0.1-0.2-0.1-0.4-0.2c-0.2-0.1-0.3-0.1-0.5-0.2c-0.2,0-0.4-0.1-0.6-0.1
+		c-0.3,0-0.6,0.1-0.8,0.2c-0.2,0.1-0.3,0.3-0.3,0.5c0,0.1,0,0.2,0.1,0.3c0.1,0.1,0.2,0.2,0.3,0.2s0.3,0.1,0.5,0.2
+		c0.2,0.1,0.4,0.1,0.6,0.2c0.3,0.1,0.6,0.2,0.9,0.3c0.3,0.1,0.5,0.2,0.6,0.4c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.1,0.4,0.1,0.7
+		c0,0.3-0.1,0.6-0.2,0.9c-0.1,0.2-0.3,0.4-0.5,0.6s-0.5,0.3-0.8,0.3c-0.3,0.1-0.6,0.1-0.9,0.1c-0.5,0-1-0.1-1.4-0.2
+		s-0.9-0.3-1.3-0.6l0.5-1.1c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0.1,0.3,0.2,0.5,0.3s0.4,0.2,0.6,0.2c0.2,0.1,0.5,0.1,0.7,0.1
+		c0.7,0,1-0.2,1-0.7c0-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.3-0.1-0.5-0.2c-0.2-0.1-0.4-0.1-0.7-0.2
+		c-0.3-0.1-0.6-0.2-0.8-0.3S7.7,39,7.6,38.9c-0.2-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.3,0.1-0.6,0.2-0.9
+		c0.1-0.3,0.3-0.5,0.5-0.6s0.5-0.3,0.7-0.4c0.3-0.1,0.6-0.1,0.9-0.1c0.5,0,0.9,0.1,1.2,0.2c0.4,0.1,0.7,0.3,1,0.5L11.1,37.5z"/>
+	<path d="M13.1,42.2v-6.4h2.7c0.3,0,0.6,0.1,0.8,0.2s0.5,0.3,0.6,0.5c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.2,0.8
+		c0,0.3,0,0.5-0.1,0.8c-0.1,0.3-0.2,0.5-0.4,0.7c-0.2,0.2-0.4,0.4-0.6,0.5c-0.2,0.1-0.5,0.2-0.8,0.2h-1.5v2.1H13.1z M14.3,39h1.4
+		c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.2-0.4,0.2-0.8c0-0.2,0-0.3-0.1-0.4c0-0.1-0.1-0.2-0.2-0.3C16.2,37.1,16.1,37,16,37
+		c-0.1,0-0.2-0.1-0.3-0.1h-1.4V39z"/>
+	<path d="M24.3,35.8v6.4H23v-2.7h-2.9v2.7h-1.2v-6.4h1.2v2.6H23v-2.6H24.3z"/>
+	<path d="M30.3,41.1v1.1h-4.4v-6.4h4.4v1.1h-3.1v1.5h2.7v1h-2.7v1.7H30.3z"/>
+	<path d="M31.5,42.2v-6.4h2.8c0.3,0,0.6,0.1,0.8,0.2s0.5,0.3,0.6,0.5c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.2,0.8
+		c0,0.4-0.1,0.8-0.3,1.1c-0.2,0.3-0.5,0.6-0.8,0.7l1.5,2.4h-1.4L34,40.1h-1.2v2.1H31.5z M32.7,39h1.6c0.1,0,0.2,0,0.3-0.1
+		c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3s0.1-0.3,0.1-0.4c0-0.1,0-0.3-0.1-0.4s-0.1-0.2-0.2-0.3c-0.1-0.1-0.2-0.2-0.3-0.2
+		c-0.1-0.1-0.2-0.1-0.3-0.1h-1.5V39z"/>
+	<path d="M42.2,41.1v1.1h-4.4v-6.4h4.4v1.1H39v1.5h2.7v1H39v1.7H42.2z"/>
+</g>
+<path class="st3" d="M33.1,59.4c-4.3-4.3-11.2-4.3-15.5,0c-2.1,2.1-3.2,4.8-3.2,7.7c0,2.9,1.1,5.7,3.2,7.7c2.1,2.1,4.9,3.2,7.7,3.2
+	c2.8,0,5.6-1.1,7.7-3.2c2.1-2.1,3.2-4.8,3.2-7.7C36.3,64.2,35.1,61.5,33.1,59.4z M18.6,60.4c1.4-1.4,3.2-2.3,5-2.6
+	c-0.3,0.5-0.7,1.2-0.9,2.1c-0.6,2-1,4.6-1,7.3c0,0.1,0,0.3,0,0.5c0.3,0.1,0.6,0.1,0.9,0.1c0.1,0,0.2,0,0.3,0c0-0.2,0-0.4,0-0.6
+	c0-5.5,1.4-9.2,2.5-9.5c0,0,0,0,0.1-0.1c2.4,0,4.7,1,6.5,2.8c1.7,1.7,2.7,4,2.8,6.5c-0.2,1.1-3.9,2.5-9.5,2.5
+	c-5.5,0-9.1-1.4-9.4-2.4C15.9,64.5,16.9,62.2,18.6,60.4z M32,73.8c-1.9,1.9-4.3,2.8-6.8,2.8c-0.7-0.4-1.4-2.1-1.9-4.6l-1.2-0.1
+	c0.2,0.9,0.4,1.8,0.6,2.6c0.2,0.8,0.5,1.4,0.8,1.9c-1.8-0.3-3.5-1.2-4.9-2.6c-1.4-1.4-2.3-3.2-2.6-5.1c0.5,0.3,1.2,0.6,2,0.9
+	c2,0.6,4.6,1,7.3,1s5.3-0.3,7.3-1c0.8-0.3,1.5-0.6,2-0.9C34.3,70.7,33.4,72.4,32,73.8z"/>
+<g>
+	<path class="st3" d="M11.5,87.5c0,0-0.1-0.1-0.2-0.2c-0.1-0.1-0.2-0.1-0.4-0.2S10.5,87,10.3,87c-0.2,0-0.4-0.1-0.6-0.1
+		c-0.3,0-0.6,0.1-0.8,0.2s-0.3,0.3-0.3,0.5c0,0.1,0,0.2,0.1,0.3C8.9,88,9,88.1,9.1,88.2c0.1,0.1,0.3,0.1,0.5,0.2
+		c0.2,0.1,0.4,0.1,0.6,0.2c0.3,0.1,0.6,0.2,0.9,0.3s0.5,0.2,0.6,0.4c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.1,0.4,0.1,0.7
+		c0,0.3-0.1,0.6-0.2,0.9c-0.1,0.2-0.3,0.4-0.5,0.6c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0.1-0.6,0.1-0.9,0.1c-0.5,0-1-0.1-1.4-0.2
+		C8,92,7.6,91.8,7.2,91.5l0.5-1.1c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0.1,0.3,0.2,0.5,0.3s0.4,0.2,0.6,0.2c0.2,0.1,0.5,0.1,0.7,0.1
+		c0.7,0,1-0.2,1-0.7c0-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.3-0.1-0.5-0.2c-0.2-0.1-0.4-0.1-0.7-0.2
+		c-0.3-0.1-0.6-0.2-0.8-0.3c-0.2-0.1-0.4-0.2-0.6-0.3s-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.3,0.1-0.6,0.2-0.9
+		c0.1-0.3,0.3-0.5,0.5-0.6s0.5-0.3,0.7-0.4s0.6-0.1,0.9-0.1c0.5,0,0.9,0.1,1.2,0.2s0.7,0.3,1,0.5L11.5,87.5z"/>
+	<path class="st3" d="M13.4,92.2v-6.4h2.7c0.3,0,0.6,0.1,0.8,0.2s0.5,0.3,0.6,0.5s0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.2,0.8
+		c0,0.3,0,0.5-0.1,0.8c-0.1,0.3-0.2,0.5-0.4,0.7c-0.2,0.2-0.4,0.4-0.6,0.5c-0.2,0.1-0.5,0.2-0.8,0.2h-1.5v2.1H13.4z M14.7,89h1.4
+		c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.2-0.4,0.2-0.8c0-0.2,0-0.3-0.1-0.4c0-0.1-0.1-0.2-0.2-0.3s-0.2-0.2-0.3-0.2
+		c-0.1,0-0.2-0.1-0.3-0.1h-1.4V89z"/>
+	<path class="st3" d="M24.6,85.9v6.4h-1.2v-2.7h-2.9v2.7h-1.2v-6.4h1.2v2.6h2.9v-2.6H24.6z"/>
+	<path class="st3" d="M30.6,91.2v1.1h-4.4v-6.4h4.4v1.1h-3.1v1.5h2.7v1h-2.7v1.7H30.6z"/>
+	<path class="st3" d="M31.8,92.2v-6.4h2.8c0.3,0,0.6,0.1,0.8,0.2s0.5,0.3,0.6,0.5c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.2,0.8
+		c0,0.4-0.1,0.8-0.3,1.1s-0.5,0.6-0.8,0.7l1.5,2.4h-1.4l-1.3-2.1h-1.2v2.1H31.8z M33.1,89h1.6c0.1,0,0.2,0,0.3-0.1
+		c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3s0.1-0.3,0.1-0.4c0-0.1,0-0.3-0.1-0.4s-0.1-0.2-0.2-0.3S35,87.1,34.9,87
+		c-0.1-0.1-0.2-0.1-0.3-0.1h-1.5V89z"/>
+	<path class="st3" d="M42.5,91.2v1.1h-4.4v-6.4h4.4v1.1h-3.1v1.5H42v1h-2.7v1.7H42.5z"/>
+</g>
+<g class="st4">
+	<path class="st2" d="M50,146c0,2.2-1.8,4-4,4H4c-2.2,0-4-1.8-4-4v-42c0-2.2,1.8-4,4-4h42c2.2,0,4,1.8,4,4V146z"/>
+</g>
+<path class="st5" d="M33.1,109.4c-4.3-4.3-11.2-4.3-15.5,0c-2.1,2.1-3.2,4.8-3.2,7.7c0,2.9,1.1,5.7,3.2,7.7c2.1,2.1,4.9,3.2,7.7,3.2
+	c2.8,0,5.6-1.1,7.7-3.2c2.1-2.1,3.2-4.8,3.2-7.7C36.3,114.2,35.1,111.5,33.1,109.4z M18.6,110.4c1.4-1.4,3.2-2.3,5-2.6
+	c-0.3,0.5-0.7,1.2-0.9,2.1c-0.6,2-1,4.6-1,7.3c0,0.1,0,0.3,0,0.5c0.3,0.1,0.6,0.1,0.9,0.1c0.1,0,0.2,0,0.3,0c0-0.2,0-0.4,0-0.6
+	c0-5.5,1.4-9.2,2.5-9.5c0,0,0,0,0.1-0.1c2.4,0,4.7,1,6.5,2.8c1.7,1.7,2.7,4,2.8,6.5c-0.2,1.1-3.9,2.5-9.5,2.5
+	c-5.5,0-9.1-1.4-9.4-2.4C15.9,114.5,16.9,112.2,18.6,110.4z M32,123.8c-1.9,1.9-4.3,2.8-6.8,2.8c-0.7-0.4-1.4-2.1-1.9-4.6l-1.2-0.1
+	c0.2,0.9,0.4,1.8,0.6,2.6c0.2,0.8,0.5,1.4,0.8,1.9c-1.8-0.3-3.5-1.2-4.9-2.6c-1.4-1.4-2.3-3.2-2.6-5.1c0.5,0.3,1.2,0.6,2,0.9
+	c2,0.6,4.6,1,7.3,1s5.3-0.3,7.3-1c0.8-0.3,1.5-0.6,2-0.9C34.3,120.7,33.4,122.4,32,123.8z"/>
+<g class="st4">
+	<path class="st3" d="M11.5,137.5c0,0-0.1-0.1-0.2-0.2c-0.1-0.1-0.2-0.1-0.4-0.2s-0.3-0.1-0.5-0.2c-0.2,0-0.4-0.1-0.6-0.1
+		c-0.3,0-0.6,0.1-0.8,0.2s-0.3,0.3-0.3,0.5c0,0.1,0,0.2,0.1,0.3c0.1,0.1,0.2,0.2,0.3,0.2c0.1,0.1,0.3,0.1,0.5,0.2
+		c0.2,0.1,0.4,0.1,0.6,0.2c0.3,0.1,0.6,0.2,0.9,0.3s0.5,0.2,0.6,0.4c0.2,0.1,0.3,0.3,0.4,0.5c0.1,0.2,0.1,0.4,0.1,0.7
+		c0,0.3-0.1,0.6-0.2,0.9c-0.1,0.2-0.3,0.4-0.5,0.6c-0.2,0.2-0.5,0.3-0.8,0.3c-0.3,0.1-0.6,0.1-0.9,0.1c-0.5,0-1-0.1-1.4-0.2
+		c-0.5-0.1-0.9-0.3-1.3-0.6l0.5-1.1c0.1,0.1,0.2,0.1,0.3,0.2c0.1,0.1,0.3,0.2,0.5,0.3s0.4,0.2,0.6,0.2c0.2,0.1,0.5,0.1,0.7,0.1
+		c0.7,0,1-0.2,1-0.7c0-0.1,0-0.3-0.1-0.4c-0.1-0.1-0.2-0.2-0.3-0.3c-0.1-0.1-0.3-0.1-0.5-0.2c-0.2-0.1-0.4-0.1-0.7-0.2
+		c-0.3-0.1-0.6-0.2-0.8-0.3c-0.2-0.1-0.4-0.2-0.6-0.3s-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6c0-0.3,0.1-0.6,0.2-0.9
+		c0.1-0.3,0.3-0.5,0.5-0.6s0.5-0.3,0.7-0.4s0.6-0.1,0.9-0.1c0.5,0,0.9,0.1,1.2,0.2s0.7,0.3,1,0.5L11.5,137.5z"/>
+	<path class="st3" d="M13.4,142.2v-6.4h2.7c0.3,0,0.6,0.1,0.8,0.2s0.5,0.3,0.6,0.5s0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.2,0.8
+		c0,0.3,0,0.5-0.1,0.8c-0.1,0.3-0.2,0.5-0.4,0.7c-0.2,0.2-0.4,0.4-0.6,0.5c-0.2,0.1-0.5,0.2-0.8,0.2h-1.5v2.1H13.4z M14.7,139h1.4
+		c0.2,0,0.4-0.1,0.6-0.3c0.2-0.2,0.2-0.4,0.2-0.8c0-0.2,0-0.3-0.1-0.4c0-0.1-0.1-0.2-0.2-0.3s-0.2-0.2-0.3-0.2
+		c-0.1,0-0.2-0.1-0.3-0.1h-1.4V139z"/>
+	<path class="st3" d="M24.6,135.9v6.4h-1.2v-2.7h-2.9v2.7h-1.2v-6.4h1.2v2.6h2.9v-2.6H24.6z"/>
+	<path class="st3" d="M30.6,141.2v1.1h-4.4v-6.4h4.4v1.1h-3.1v1.5h2.7v1h-2.7v1.7H30.6z"/>
+	<path class="st3" d="M31.8,142.2v-6.4h2.8c0.3,0,0.6,0.1,0.8,0.2s0.5,0.3,0.6,0.5c0.2,0.2,0.3,0.4,0.4,0.7c0.1,0.3,0.2,0.5,0.2,0.8
+		c0,0.4-0.1,0.8-0.3,1.1s-0.5,0.6-0.8,0.7l1.5,2.4h-1.4l-1.3-2.1h-1.2v2.1H31.8z M33.1,139h1.6c0.1,0,0.2,0,0.3-0.1
+		c0.1-0.1,0.2-0.1,0.3-0.2c0.1-0.1,0.1-0.2,0.2-0.3s0.1-0.3,0.1-0.4c0-0.1,0-0.3-0.1-0.4s-0.1-0.2-0.2-0.3s-0.2-0.2-0.3-0.2
+		c-0.1-0.1-0.2-0.1-0.3-0.1h-1.5V139z"/>
+	<path class="st3" d="M42.5,141.2v1.1h-4.4v-6.4h4.4v1.1h-3.1v1.5H42v1h-2.7v1.7H42.5z"/>
+</g>
+</svg>
diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index 44959395fa..5301ff78f8 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -4,6 +4,7 @@ import QtWebEngine 1.1
 import QtWebChannel 1.0
 import QtQuick.Controls.Styles 1.4
 import "../../controls"
+import "../toolbars"
 import HFWebEngineProfile 1.0
 
 StackView {
@@ -41,9 +42,17 @@ StackView {
                 Flow {
                     id: createEntitiesFlow
                     spacing: 16
+                    anchors.right: parent.right
+                    anchors.rightMargin: 30
+                    anchors.left: parent.left
+                    anchors.leftMargin: 30
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 30
+                    anchors.top: parent.top
+                    anchors.topMargin: 30
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/assets-01.svg"
+                    TabletButton {
+                        icon: "icons/assets-01.svg"
                         text: "ASSETS"
                         onClicked: {
                             editRoot.sendToScript({
@@ -52,8 +61,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/model-01.svg"
+                    TabletButton {
+                        icon: "model-01.svg"
                         text: "MODEL"
                         onClicked: {
                             editRoot.sendToScript({
@@ -62,8 +71,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/cube-01.svg"
+                    TabletButton {
+                        icon: "../cube-01.svg"
                         text: "CUBE"
                         onClicked: {
                             editRoot.sendToScript({
@@ -72,9 +81,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/sphere-01.svg"
-                        text: "SPHERE"
+                    ToolbarButton {
+                        imageURL: "../images/sphere-01.svg"
                         onClicked: {
                             editRoot.sendToScript({
                                 method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
@@ -82,8 +90,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/light-01.svg"
+                    TabletButton {
+                        icon: "../scripts/system/assets/images/tools/light-01.svg"
                         text: "LIGHT"
                         onClicked: {
                             editRoot.sendToScript({
@@ -92,8 +100,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/text-01.svg"
+                    TabletButton {
+                        icon: "../scripts/system/assets/images/tools/text-01.svg"
                         text: "TEXT"
                         onClicked: {
                             editRoot.sendToScript({
@@ -102,8 +110,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/web-01.svg"
+                    TabletButton {
+                        icon: "../scripts/system/assets/images/tools/web-01.svg"
                         text: "WEB"
                         onClicked: {
                             editRoot.sendToScript({
@@ -112,8 +120,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/zone-01.svg"
+                    TabletButton {
+                        icon: "../scripts/system/assets/images/tools/zone-01.svg"
                         text: "ZONE"
                         onClicked: {
                             editRoot.sendToScript({
@@ -122,8 +130,8 @@ StackView {
                         }
                     }
 
-                    Button {
-                        iconSource: "../../../../../scripts/system/assets/images/tools/particle-01.svg"
+                    TabletButton {
+                        icon: "../scripts/system/assets/images/tools/particle-01.svg"
                         text: "PARTICLE"
                         onClicked: {
                             editRoot.sendToScript({

From 88318c1911f522925c81ab6f3fa3df6b92021bb2 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 11:40:26 -0800
Subject: [PATCH 2/8] create tab background and new entity buttons

---
 interface/resources/qml/hifi/tablet/Edit.qml  | 169 ++++++++-------
 .../qml/hifi/tablet/NewEntityButton.qml       | 204 ++++++++++++++++++
 2 files changed, 291 insertions(+), 82 deletions(-)
 create mode 100644 interface/resources/qml/hifi/tablet/NewEntityButton.qml

diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index 5301ff78f8..4a5930e6e7 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -39,106 +39,111 @@ StackView {
                 enabled: true
                 property string originalUrl: ""
 
-                Flow {
-                    id: createEntitiesFlow
-                    spacing: 16
-                    anchors.right: parent.right
-                    anchors.rightMargin: 30
-                    anchors.left: parent.left
-                    anchors.leftMargin: 30
-                    anchors.bottom: parent.bottom
-                    anchors.bottomMargin: 30
-                    anchors.top: parent.top
-                    anchors.topMargin: 30
+                Rectangle { 
+                    color: "#383838"
+                    Flow {
+                        id: createEntitiesFlow
+                        spacing: 35
+                        anchors.right: parent.right
+                        anchors.rightMargin: 55
+                        anchors.left: parent.left
+                        anchors.leftMargin: 55
+                        anchors.bottom: parent.bottom
+                        anchors.bottomMargin: 30
+                        anchors.top: parent.top
+                        anchors.topMargin: 70
 
-                    TabletButton {
-                        icon: "icons/assets-01.svg"
-                        text: "ASSETS"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
-                            });
+                        NewEntityButton {
+                            icon: "icons/assets-01.svg"
+                            text: "ASSETS"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "model-01.svg"
-                        text: "MODEL"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
-                            });
+                        NewEntityButton {
+                            icon: "model-01.svg"
+                            text: "MODEL"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "../cube-01.svg"
-                        text: "CUBE"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../cube-01.svg"
+                            text: "CUBE"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
+                                });
+                            }
                         }
-                    }
 
-                    ToolbarButton {
-                        imageURL: "../images/sphere-01.svg"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../images/sphere-01.svg"
+                            text: "SPHERE"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "../scripts/system/assets/images/tools/light-01.svg"
-                        text: "LIGHT"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../scripts/system/assets/images/tools/light-01.svg"
+                            text: "LIGHT"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "../scripts/system/assets/images/tools/text-01.svg"
-                        text: "TEXT"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../scripts/system/assets/images/tools/text-01.svg"
+                            text: "TEXT"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "../scripts/system/assets/images/tools/web-01.svg"
-                        text: "WEB"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../scripts/system/assets/images/tools/web-01.svg"
+                            text: "WEB"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "../scripts/system/assets/images/tools/zone-01.svg"
-                        text: "ZONE"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../scripts/system/assets/images/tools/zone-01.svg"
+                            text: "ZONE"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
+                                });
+                            }
                         }
-                    }
 
-                    TabletButton {
-                        icon: "../scripts/system/assets/images/tools/particle-01.svg"
-                        text: "PARTICLE"
-                        onClicked: {
-                            editRoot.sendToScript({
-                                method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
-                            });
+                        NewEntityButton {
+                            icon: "../scripts/system/assets/images/tools/particle-01.svg"
+                            text: "PARTICLE"
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
+                                });
+                            }
                         }
-                    }
+                    } 
+
                 }
             }
 
diff --git a/interface/resources/qml/hifi/tablet/NewEntityButton.qml b/interface/resources/qml/hifi/tablet/NewEntityButton.qml
new file mode 100644
index 0000000000..93816be71b
--- /dev/null
+++ b/interface/resources/qml/hifi/tablet/NewEntityButton.qml
@@ -0,0 +1,204 @@
+import QtQuick 2.0
+import QtGraphicalEffects 1.0
+
+Item {
+    id: tabletButton
+    property var uuid;
+    property string text: "EDIT"
+    property string icon: "icons/edit-icon.svg"
+    property string activeText: tabletButton.text
+    property string activeIcon: tabletButton.icon
+    property bool isActive: false
+    property bool inDebugMode: false
+    property bool isEntered: false
+    property double sortOrder: 100
+    property int stableOrder: 0
+    property var tabletRoot;
+    width: 100
+    height: 100
+
+    signal clicked()
+
+    function changeProperty(key, value) {
+        tabletButton[key] = value;
+    }
+
+    onIsActiveChanged: {
+        if (tabletButton.isEntered) {
+            tabletButton.state = (tabletButton.isActive) ? "hover active state" : "hover sate";
+        } else {
+            tabletButton.state = (tabletButton.isActive) ? "active state" : "base sate";
+        }
+    }
+
+    Rectangle {
+        id: buttonBg
+        color: "#222222"
+        opacity: 1
+        radius: 8
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+    }
+
+    function urlHelper(src) {
+        if (src.match(/\bhttp/)) {
+            return src;
+        } else {
+            return "../../../" + src;
+        }
+    }
+
+    Image {
+        id: icon
+        width: 50
+        height: 50
+        visible: false
+        anchors.bottom: text.top
+        anchors.bottomMargin: 5
+        anchors.horizontalCenter: parent.horizontalCenter
+        fillMode: Image.Stretch
+        source: tabletButton.urlHelper(tabletButton.icon)
+    }
+
+    ColorOverlay {
+        id: iconColorOverlay
+        anchors.fill: icon
+        source: icon
+        color: "#ffffff"
+    }
+
+    Text {
+        id: text
+        color: "#ffffff"
+        text: tabletButton.text
+        font.bold: true
+        font.pixelSize: 18
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 10
+        anchors.horizontalCenter: parent.horizontalCenter
+        horizontalAlignment: Text.AlignHCenter
+    }
+
+    MouseArea {
+        anchors.fill: parent
+        hoverEnabled: true
+        enabled: true
+        onClicked: {
+            console.log("Tablet Button Clicked!");
+            if (tabletButton.inDebugMode) {
+                if (tabletButton.isActive) {
+                    tabletButton.isActive = false;
+                } else {
+                    tabletButton.isActive = true;
+                }
+            }
+            tabletButton.clicked();
+            if (tabletRoot) {
+                tabletRoot.playButtonClickSound();
+            }
+        }
+        onEntered: {
+            tabletButton.isEntered = true;
+            if (tabletButton.isActive) {
+                tabletButton.state = "hover active state";
+            } else {
+                tabletButton.state = "hover state";
+            }
+        }
+        onExited: {
+            tabletButton.isEntered = false;
+            if (tabletButton.isActive) {
+                tabletButton.state = "active state";
+            } else {
+                tabletButton.state = "base state";
+            }
+        }
+    }
+
+    states: [
+        State {
+            name: "hover state"
+
+            PropertyChanges {
+                target: buttonOutline
+                border.color: "#1fc6a6"
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: glow
+                visible: true
+            }
+        },
+        State {
+            name: "active state"
+
+            PropertyChanges {
+                target: buttonOutline
+                border.color: "#1fc6a6"
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: buttonBg
+                color: "#1fc6a6"
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: text
+                color: "#333333"
+                text: tabletButton.activeText
+            }
+
+            PropertyChanges {
+                target: iconColorOverlay
+                color: "#333333"
+            }
+
+            PropertyChanges {
+                target: icon
+                source: tabletButton.urlHelper(tabletButton.activeIcon)
+            }
+        },
+        State {
+            name: "hover active state"
+
+            PropertyChanges {
+                target: glow
+                visible: true
+            }
+
+            PropertyChanges {
+                target: buttonOutline
+                border.color: "#ffffff"
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: buttonBg
+                color: "#1fc6a6"
+                opacity: 1
+            }
+
+            PropertyChanges {
+                target: text
+                color: "#333333"
+            }
+
+            PropertyChanges {
+                target: iconColorOverlay
+                color: "#333333"
+            }
+
+        }
+    ]
+}
+
+

From 8e89e0773211edb37d6259a6e5981e5e2a87f742 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 11:50:39 -0800
Subject: [PATCH 3/8] text choose an entity type to create

---
 interface/resources/qml/hifi/tablet/Edit.qml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index 4a5930e6e7..6e0995779a 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -41,6 +41,18 @@ StackView {
 
                 Rectangle { 
                     color: "#383838"
+
+                    Text {
+                        color: "#ffffff"
+                        text: "Choose an Entity Type to Create:"
+                        font.pixelSize: 14
+                        font.bold: true
+                        anchors.top: parent.top
+                        anchors.topMargin: 28
+                        anchors.left: parent.left
+                        anchors.leftMargin: 28
+                    }
+
                     Flow {
                         id: createEntitiesFlow
                         spacing: 35

From bd834097d59428b1e9bd53ebf10fb057078173a0 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 12:36:27 -0800
Subject: [PATCH 4/8] tab bar styling

---
 interface/resources/qml/hifi/tablet/Edit.qml  | 32 +++++++++++++------
 .../qml/hifi/tablet/NewEntityButton.qml       |  2 +-
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index 6e0995779a..3489af5fcb 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -34,13 +34,13 @@ StackView {
             height: 60
 
             Tab {
-                title: "Create"
+                title: "CREATE"
                 active: true
                 enabled: true
                 property string originalUrl: ""
 
                 Rectangle { 
-                    color: "#383838"
+                    color: "#404040"
 
                     Text {
                         color: "#ffffff"
@@ -160,7 +160,7 @@ StackView {
             }
 
             Tab {
-                title: "List"
+                title: "LIST"
                 active: true
                 enabled: true
                 property string originalUrl: ""
@@ -175,7 +175,7 @@ StackView {
             }
 
             Tab {
-                title: "Properties"
+                title: "PROPERTIES"
                 active: true
                 enabled: true
                 property string originalUrl: ""
@@ -190,7 +190,7 @@ StackView {
             }
 
             Tab {
-                title: "Grid"
+                title: "GRID"
                 active: true
                 enabled: true
                 property string originalUrl: ""
@@ -205,7 +205,7 @@ StackView {
             }
 
             Tab {
-                title: "Particles"
+                title: "P"
                 active: true
                 enabled: true
                 property string originalUrl: ""
@@ -223,17 +223,29 @@ StackView {
             style: TabViewStyle {
                 frameOverlap: 1
                 tab: Rectangle {
-                    color: styleData.selected ? "slategrey" :"grey"
-                    implicitWidth: text.width + 25
-                    implicitHeight: 60
-                    radius: 2
+                    color: styleData.selected ? "#404040" :"black"
+                    implicitWidth: text.width + 42
+                    implicitHeight: 40
                     Text {
                         id: text
                         anchors.centerIn: parent
                         text: styleData.title
+                        font.pixelSize: 16
+                        font.bold: true
                         color: styleData.selected ? "white" : "white"
                     }
                 }
+                tabBar: Rectangle {
+                    color: "black"
+                    anchors.right: parent.right
+                    anchors.rightMargin: 0
+                    anchors.left: parent.left
+                    anchors.leftMargin: 0
+                    anchors.bottom: parent.bottom
+                    anchors.bottomMargin: 0
+                    anchors.top: parent.top
+                    anchors.topMargin: 0
+                }
             }
         }
     }
diff --git a/interface/resources/qml/hifi/tablet/NewEntityButton.qml b/interface/resources/qml/hifi/tablet/NewEntityButton.qml
index 93816be71b..5cb3d169e7 100644
--- a/interface/resources/qml/hifi/tablet/NewEntityButton.qml
+++ b/interface/resources/qml/hifi/tablet/NewEntityButton.qml
@@ -33,7 +33,7 @@ Item {
 
     Rectangle {
         id: buttonBg
-        color: "#222222"
+        color: "#1c1c1c"
         opacity: 1
         radius: 8
         anchors.right: parent.right

From 3850bc35a9ffe90f0c7ce2cd78ff7e852dddfb09 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 13:31:03 -0800
Subject: [PATCH 5/8] icons on new entity buttons

---
 .../icons/create-icons/20-text-01.svg         |  26 ++++
 .../icons/create-icons/21-cube-01.svg         |  17 +++
 .../icons/create-icons/22-sphere-01.svg       |  21 +++
 .../icons/create-icons/23-zone-01.svg         |  38 +++++
 .../icons/create-icons/24-light-01.svg        |  34 +++++
 .../icons/create-icons/25-web-1-01.svg        |  30 ++++
 .../icons/create-icons/90-particles-01.svg    |  29 ++++
 .../icons/create-icons/94-model-01.svg        |  20 +++
 interface/resources/qml/hifi/tablet/Edit.qml  |  20 +--
 .../qml/hifi/tablet/NewEntityButton.qml       | 134 ++++++------------
 10 files changed, 271 insertions(+), 98 deletions(-)
 create mode 100644 interface/resources/icons/create-icons/20-text-01.svg
 create mode 100644 interface/resources/icons/create-icons/21-cube-01.svg
 create mode 100644 interface/resources/icons/create-icons/22-sphere-01.svg
 create mode 100644 interface/resources/icons/create-icons/23-zone-01.svg
 create mode 100644 interface/resources/icons/create-icons/24-light-01.svg
 create mode 100644 interface/resources/icons/create-icons/25-web-1-01.svg
 create mode 100644 interface/resources/icons/create-icons/90-particles-01.svg
 create mode 100644 interface/resources/icons/create-icons/94-model-01.svg

diff --git a/interface/resources/icons/create-icons/20-text-01.svg b/interface/resources/icons/create-icons/20-text-01.svg
new file mode 100644
index 0000000000..337f3b70e3
--- /dev/null
+++ b/interface/resources/icons/create-icons/20-text-01.svg
@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<g>
+		<path d="M220.3,378.4l-81.1-232c-1-2.8-3.6-4.3-6.6-4.3h-9.2c-3,0-5.6,1.5-6.6,4.3L34,378.5c-0.8,2.1-0.4,5.1,0.9,7
+			c1.3,1.9,3.4,3.5,5.7,3.5h15.9c3,0,5.6-2.6,6.6-5.4L90.2,305h73.7l27,78.6c1,2.8,3.6,5.4,6.6,5.4h16.2c2.3,0,4.4-1.8,5.7-3.6
+			C220.7,383.5,221.1,380.5,220.3,378.4z M100.3,276l25.6-73.1c0.6-1.7,1.3-3.3,1.9-5.1c0.6,1.8,1.2,3,1.7,4.5l24.9,73.7H100.3z"/>
+		<path d="M351.6,215.5c-9.7-11.4-24.3-17.2-43.2-17.2c-17.5,0-35.5,4.7-53.2,14.1c-3.1,1.7-4.6,5.4-3.3,8.7l5.2,13.6
+			c0.7,1.9,2.3,3.4,4.2,4.1c1.9,0.7,4.1,0.5,5.8-0.6c14.1-8.2,27.7-12.3,40.6-12.3c10.9,0,18.8,3.2,23.3,9.6c5.2,7.3,8,18.4,8,33
+			v4.6l-22.7,0.7c-25,0.6-44.7,6-58.2,16.1c-14.3,10.7-21.6,25.7-21.6,44.7c0,17.1,4.9,30.9,14.5,40.8c9.7,10,23.2,15.1,40.1,15.1
+			c12,0,22.8-2.7,32.2-8c5.6-3.1,11.1-7.7,16.4-13.6l1.6,13.3c0.4,3.5,3.4,6.8,6.9,6.8h10.2c3.9,0,7.6-4.4,7.6-8.3V265.9
+			C366,243.2,361.1,226.7,351.6,215.5z M265.1,335.2c0-11.2,3.5-19.1,10.7-24.1c8-5.6,22.1-9,42-10.1l19.1-0.9v9.6
+			c0,17.2-3.8,29.9-12,39.1c-8.1,9-19,13.4-33.3,13.4c-8.8,0-15.3-2.2-19.8-6.9C267.3,350.8,265.1,344.2,265.1,335.2z"/>
+		<path d="M451.3,439.9c-10,0-15.3-8.1-15.3-18c-0.1-22.2-0.2-298.2-0.4-320.4c-0.1-10,5.2-18.2,15.2-18.3c0.1,0,0.1,0,0.2,0
+			c9.9,0,15.2,8,15.3,18c0.2,22.2,0.3,298.3,0.4,320.5C466.7,431.7,461.4,439.9,451.3,439.9C451.4,439.9,451.3,439.9,451.3,439.9z"
+			/>
+	</g>
+</g>
+</svg>
diff --git a/interface/resources/icons/create-icons/21-cube-01.svg b/interface/resources/icons/create-icons/21-cube-01.svg
new file mode 100644
index 0000000000..21a980ca35
--- /dev/null
+++ b/interface/resources/icons/create-icons/21-cube-01.svg
@@ -0,0 +1,17 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path d="M451.6,90.8L189.4,64.9c-3.2-0.3-6.2,0.5-8.8,2.4l0.1,0L54.9,155.4l0,0c-0.5,0.3-0.5,0.7-0.9,1c-2.8,2.5-4,6.1-4,9.9v262.5
+		c0,6.8,4.8,12.6,11.6,13.2l262.3,25.9c0.4,0,0.8,0.1,1.2,0.1c2.7,0,5.3-0.9,7.6-2.4l0,0l125.8-88.2l0,0c0.5-0.3,0.3-0.7,0.7-1
+		c2.8-2.5,3.8-6.1,3.8-9.9V104.1C463,97.2,458.4,91.5,451.6,90.8z M430.1,364.7l-1.8,1.4c-0.2,0.1-0.3,0.3-0.6,0.4c0,0,0.4,0,0.4,0
+		L339,429.2v-230l98-69.5v222.2C436,358,435,361.1,430.1,364.7z M203.3,93l210.6,20.8l-92.4,64.7L99.6,156.6l86.7-60.8
+		c0.2,0,0.3,0,0.5,0c0,0,0,0,0.1,0c3.4-2.1,7.4-3.4,11.4-3.4C200,92.4,201.7,92.6,203.3,93z M313,440L76,416.7V181l237,23.3V440z"/>
+</g>
+</svg>
diff --git a/interface/resources/icons/create-icons/22-sphere-01.svg b/interface/resources/icons/create-icons/22-sphere-01.svg
new file mode 100644
index 0000000000..5080a16e78
--- /dev/null
+++ b/interface/resources/icons/create-icons/22-sphere-01.svg
@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path d="M417.6,96.6c-90.2-90.2-236.9-90.2-327.1,0c-43.7,43.7-67.8,101.8-67.8,163.6c0,61.8,24.1,119.9,67.8,163.6
+		c45.1,45.1,104.3,67.6,163.6,67.6c59.2,0,118.5-22.5,163.6-67.6c43.7-43.7,67.8-101.8,67.8-163.6
+		C485.4,198.4,461.3,140.3,417.6,96.6z M112.7,118.8c30-30,67.2-48.4,106.1-55.3c-7.4,11.3-14,26-19.8,44
+		c-13.2,41.4-20.5,96.3-20.5,154.5c0,2.8,0,7,0.1,9.8c6.4,1.6,12.8,1.7,19.3,2.8c1.9,0.3,3.9,0.6,5.9,0.8c-0.1-4.4-0.1-8.8-0.1-13.3
+		c0-116.9,30-193.4,52.3-200c0.5-0.5,1-1,1.4-1.6c50.1,0.8,99.9,20.3,138,58.4c36.6,36.6,57.3,85,58.5,136.6
+		c-4.8,22.4-81.7,53.2-200.2,53.2c-115.3,0-191.3-29.1-199.6-51.4C54.9,204.9,75.6,155.9,112.7,118.8z M395.5,401.6
+		C356,441.1,304,460.5,252.1,460c-14.1-8.9-30.3-43.3-39.9-96.6l-25.6-1.4c3.2,19.2,7.4,38.5,12.5,54.3c5.1,16,10.9,29.4,17.3,40.1
+		c-38-7.2-74.3-25.5-103.7-54.9C83.2,372.1,64,334.9,57.1,294.6c11,6.9,25.2,13.2,42.3,18.7c41.4,13.2,96.3,20.5,154.5,20.5
+		c58.2,0,113-7.3,154.5-20.5c17.4-5.6,31.7-11.9,42.9-19C444.2,334.7,425.1,372,395.5,401.6z"/>
+</g>
+</svg>
diff --git a/interface/resources/icons/create-icons/23-zone-01.svg b/interface/resources/icons/create-icons/23-zone-01.svg
new file mode 100644
index 0000000000..5428257893
--- /dev/null
+++ b/interface/resources/icons/create-icons/23-zone-01.svg
@@ -0,0 +1,38 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path d="M380.7,139.8c-2.7-6.6-9.2-10.8-16.3-10.8H292v34h29.9L159,326.1V290h-36v79h1.3c0.1,2,0.5,4.1,1.3,5.9
+		c2.7,6.6,9.1,11.1,16.2,11.1H225v-35h-40.8L346,189.7V215h35v-62.4C382,148.5,382.4,144,380.7,139.8z"/>
+	<path d="M338.4,437.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C348.1,459.3,338.4,449.6,338.4,437.6z M266.9,437.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0
+		c0,12-9.7,21.7-21.7,21.7l0,0C276.6,459.3,266.9,449.6,266.9,437.6z M195.4,437.6c0-12,9.7-21.7,21.7-21.7l0,0
+		c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C205.1,459.3,195.4,449.6,195.4,437.6z M123.9,437.6
+		c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C133.6,459.3,123.9,449.6,123.9,437.6z"/>
+	<path d="M74.1,459.3c-5.7,0-11.3-2.3-15.4-6.4c-4-4-6.4-9.6-6.4-15.3c0-5.7,2.3-11.3,6.4-15.3c4-4,9.6-6.4,15.4-6.4
+		c5.7,0,11.3,2.3,15.3,6.4c4,4,6.4,9.6,6.4,15.3c0,5.7-2.3,11.3-6.4,15.3C85.4,457,79.8,459.3,74.1,459.3z"/>
+	<path d="M52.4,366.1c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C62.1,387.8,52.4,378,52.4,366.1z M52.4,294.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7
+		l0,0C62.1,316.3,52.4,306.5,52.4,294.6z M52.4,223.1c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0
+		c0,12-9.7,21.7-21.7,21.7l0,0C62.1,244.8,52.4,235,52.4,223.1z M52.4,151.5c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7
+		l0,0c0,12-9.7,21.7-21.7,21.7l0,0C62.1,173.2,52.4,163.5,52.4,151.5z"/>
+	<path d="M338.4,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C348.1,101.7,338.4,92,338.4,80z M266.9,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C276.6,101.7,266.9,92,266.9,80z M195.4,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C205.1,101.7,195.4,92,195.4,80z M123.9,80c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C133.6,101.7,123.9,92,123.9,80z"/>
+	<path d="M431.6,101.7c-5.7,0-11.3-2.3-15.3-6.4c-4-4-6.4-9.6-6.4-15.3c0-5.7,2.3-11.3,6.4-15.3c4-4,9.6-6.4,15.3-6.4
+		s11.3,2.3,15.3,6.4c4,4,6.4,9.6,6.4,15.3c0,5.7-2.3,11.3-6.4,15.3C442.9,99.4,437.4,101.7,431.6,101.7z"/>
+	<path d="M409.9,366.1c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0
+		C419.7,387.8,409.9,378.1,409.9,366.1z M409.9,294.6c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0
+		c0,12-9.7,21.7-21.7,21.7l0,0C419.7,316.3,409.9,306.5,409.9,294.6z M409.9,223.1c0-12,9.7-21.7,21.7-21.7l0,0
+		c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C419.7,244.7,409.9,235,409.9,223.1z M409.9,151.5
+		c0-12,9.7-21.7,21.7-21.7l0,0c12,0,21.7,9.7,21.7,21.7l0,0c0,12-9.7,21.7-21.7,21.7l0,0C419.7,173.2,409.9,163.5,409.9,151.5z"/>
+</g>
+</svg>
diff --git a/interface/resources/icons/create-icons/24-light-01.svg b/interface/resources/icons/create-icons/24-light-01.svg
new file mode 100644
index 0000000000..028ea22793
--- /dev/null
+++ b/interface/resources/icons/create-icons/24-light-01.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<circle cx="259.2" cy="252.5" r="38.3"/>
+	<path d="M259.2,361.8c-60.3,0-109.3-49-109.3-109.3s49-109.3,109.3-109.3s109.3,49,109.3,109.3S319.4,361.8,259.2,361.8z
+		 M259.2,171.8c-44.5,0-80.7,36.2-80.7,80.7s36.2,80.7,80.7,80.7s80.7-36.2,80.7-80.7S303.7,171.8,259.2,171.8z"/>
+	<path d="M414.1,268.5c-7.9,0-14.2-6.4-14.3-14.2c0-7.9,6.3-14.3,14.2-14.3c17.1-0.1,34.5-0.2,51.6-0.3c0,0,0.1,0,0.1,0
+		c7.8,0,14.2,6.3,14.3,14.2c0.1,7.9-6.3,14.3-14.2,14.4C448.8,268.3,431.4,268.4,414.1,268.5C414.2,268.5,414.1,268.5,414.1,268.5z"
+		/>
+	<path d="M105.8,268.5C105.8,268.5,105.8,268.5,105.8,268.5c-17.3-0.1-34.6-0.2-51.7-0.4c-7.9-0.1-14.2-6.5-14.1-14.4
+		c0.1-7.8,6.5-14.1,14.3-14.1c0.1,0,0.1,0,0.2,0c17,0.2,34.3,0.3,51.5,0.4c7.9,0,14.3,6.5,14.2,14.3
+		C120.1,262.2,113.7,268.5,105.8,268.5z"/>
+	<path d="M369.1,159.5c-3.6,0-7.3-1.4-10-4.1c-5.6-5.6-5.6-14.6-0.1-20.2c12-12.1,24.2-24.5,36.3-36.7c5.5-5.6,14.6-5.7,20.2-0.2
+		c5.6,5.5,5.7,14.6,0.2,20.2c-12.1,12.3-24.3,24.7-36.4,36.8C376.4,158.1,372.8,159.5,369.1,159.5z"/>
+	<path d="M114.4,413.7c-3.7,0-7.4-1.4-10.2-4.3c-5.5-5.6-5.4-14.7,0.2-20.2c12.2-11.9,24.5-24.1,36.7-36.1
+		c5.6-5.6,14.6-5.5,20.2,0.1c5.6,5.6,5.5,14.6-0.1,20.2c-12.2,12.1-24.6,24.3-36.8,36.2C121.6,412.3,118,413.7,114.4,413.7z"/>
+	<path d="M260.2,114.2c-7.9,0-14.2-6.4-14.3-14.2c-0.1-17-0.2-34.4-0.3-51.6c-0.1-7.9,6.3-14.3,14.2-14.4c0,0,0.1,0,0.1,0
+		c7.8,0,14.2,6.3,14.3,14.2c0.1,17.3,0.3,34.7,0.3,51.7C274.5,107.8,268.1,114.2,260.2,114.2C260.2,114.2,260.2,114.2,260.2,114.2z"
+		/>
+	<path d="M259.9,474.1c-0.1,0-0.1,0-0.2,0c-7.9-0.1-14.2-6.5-14.1-14.4c0.2-16.9,0.3-34.3,0.4-51.5c0-7.9,6.4-14.2,14.3-14.2
+		c0,0,0,0,0.1,0c7.9,0,14.3,6.5,14.2,14.3c-0.1,17.3-0.2,34.6-0.4,51.7C274,467.8,267.7,474.1,259.9,474.1z"/>
+	<path d="M151.2,159.3c-3.6,0-7.3-1.4-10-4.1c-12.2-12.1-24.6-24.3-36.7-36.3c-5.6-5.5-5.7-14.6-0.2-20.2c5.5-5.6,14.6-5.7,20.2-0.2
+		c12.2,12,24.6,24.2,36.8,36.4c5.6,5.6,5.6,14.6,0.1,20.2C158.5,157.9,154.9,159.3,151.2,159.3z"/>
+	<path d="M405.4,414c-3.7,0-7.4-1.4-10.2-4.3c-11.9-12.2-24-24.5-36.1-36.7c-5.6-5.6-5.5-14.6,0.1-20.2c5.6-5.6,14.6-5.5,20.2,0.1
+		c12.1,12.2,24.3,24.6,36.2,36.8c5.5,5.6,5.4,14.7-0.2,20.2C412.6,412.6,409,414,405.4,414z"/>
+</g>
+</svg>
diff --git a/interface/resources/icons/create-icons/25-web-1-01.svg b/interface/resources/icons/create-icons/25-web-1-01.svg
new file mode 100644
index 0000000000..4f0eccc11e
--- /dev/null
+++ b/interface/resources/icons/create-icons/25-web-1-01.svg
@@ -0,0 +1,30 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:none;stroke:#000000;stroke-width:18;stroke-miterlimit:10;}
+	.st1{fill:none;stroke:#000000;stroke-width:18;stroke-linecap:round;stroke-miterlimit:10;}
+	.st2{fill:none;stroke:#000000;stroke-width:19;stroke-linecap:round;stroke-miterlimit:10;}
+	.st3{stroke:#000000;stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;}
+</style>
+<g>
+	<path d="M438,121.5c0-8-6.5-14.5-14.5-14.5h-333c-8,0-14.5,6.5-14.5,14.5v298c0,8,6.5,14.5,14.5,14.5h333c8,0,14.5-6.5,14.5-14.5
+		V121.5z M219.4,130H391c8.3,0,15,7.2,15,16s-6.7,16-15,16H219.4c-8.3,0-15-7.2-15-16S211.1,130,219.4,130z M171.5,128.6
+		c9.2,0,16.7,7.5,16.7,16.7c0,9.2-7.5,16.7-16.7,16.7c-9.2,0-16.7-7.5-16.7-16.7C154.8,136,162.3,128.6,171.5,128.6z M121,128.6
+		c9.2,0,16.7,7.5,16.7,16.7c0,9.2-7.5,16.7-16.7,16.7c-9.2,0-16.7-7.5-16.7-16.7C104.4,136,111.8,128.6,121,128.6z M412,405H104V186
+		h308V405z"/>
+</g>
+<g>
+	<path class="st3" d="M161.6,320.5h-14.3l-20.5-59.3h12.9l14.7,44.8l14.7-44.8h12.9l14.7,44.8l14.7-44.8h12.9L204,320.5h-14.3
+		l-14-40.6L161.6,320.5z"/>
+	<path class="st3" d="M299.4,296.3h-46.5c0.3,4.3,2.3,7.8,5.9,10.4c3.6,2.6,7.8,4,12.5,4c7.4,0,13.1-2.3,16.9-7l7.1,7.8
+		c-6.4,6.6-14.7,9.9-25,9.9c-8.3,0-15.4-2.8-21.2-8.3c-5.8-5.5-8.7-13-8.7-22.3c0-9.3,3-16.7,8.9-22.2c5.9-5.5,12.9-8.2,21-8.2
+		c8.1,0,14.9,2.4,20.6,7.3c5.6,4.9,8.5,11.6,8.5,20.1V296.3z M252.9,286.5h34c0-5-1.6-8.8-4.7-11.5s-7-4-11.5-4
+		c-4.6,0-8.7,1.4-12.3,4.2C254.7,278,252.9,281.8,252.9,286.5z"/>
+	<path class="st3" d="M353.6,260.3c7.9,0,14.7,2.8,20.4,8.2c5.6,5.5,8.5,12.8,8.5,22c0,9.1-2.8,16.6-8.4,22.3
+		c-5.6,5.7-12.1,8.6-19.6,8.6s-14.2-3.3-20.1-9.8v8.9h-12.5v-82.7h12.5v33.8C339.2,264.1,345.6,260.3,353.6,260.3z M334.1,291
+		c0,5.6,1.7,10.3,5.1,13.9c3.4,3.6,7.6,5.4,12.5,5.4c4.9,0,9.2-1.8,12.8-5.3c3.6-3.6,5.5-8.2,5.5-13.9c0-5.7-1.8-10.4-5.3-14.2
+		c-3.6-3.8-7.8-5.6-12.8-5.6c-5,0-9.2,1.9-12.6,5.6C335.8,280.6,334.1,285.3,334.1,291z"/>
+</g>
+</svg>
diff --git a/interface/resources/icons/create-icons/90-particles-01.svg b/interface/resources/icons/create-icons/90-particles-01.svg
new file mode 100644
index 0000000000..5e0105d7cd
--- /dev/null
+++ b/interface/resources/icons/create-icons/90-particles-01.svg
@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path d="M331.8,283.4c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C342.1,306.6,331.8,296.2,331.8,283.4z"/>
+<path d="M277.8,350.9c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C288.1,374.2,277.8,363.8,277.8,350.9z"/>
+<path d="M216.3,368.8c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C226.7,392,216.3,381.6,216.3,368.8z"/>
+<path d="M169.9,308.9c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C180.3,332.1,169.9,321.7,169.9,308.9z"/>
+<path d="M251.2,447.4c-4.9-3.6-8.3-9.1-9.2-15.3c-0.9-6,0.6-12.3,4.2-17.2c3.6-4.9,9.1-8.3,15.2-9.1c6-0.9,12.3,0.6,17.3,4.3
+	c4.9,3.6,8.3,9.1,9.1,15.2c0.9,6-0.6,12.3-4.2,17.2s-9.1,8.3-15.2,9.1C262.4,452.6,256.1,451,251.2,447.4z"/>
+<path d="M67.6,246.1c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C78,269.3,67.6,258.8,67.6,246.1z"/>
+<path d="M178.8,199.5c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C189.1,222.7,178.8,212.2,178.8,199.5z"/>
+<path d="M250.3,293.9c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C260.7,317.1,250.3,306.6,250.3,293.9z"/>
+<path d="M413,242.1c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C423.5,265.3,413,255,413,242.1z"/>
+<path d="M302.1,203.7c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C312.6,226.9,302.1,216.5,302.1,203.7z"/>
+<path d="M132.3,113.5c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C142.8,136.6,132.3,126.2,132.3,113.5z"/>
+<path d="M366.6,136.7c0-12.8,10.4-23.2,23.2-23.2l0,0c12.8,0,23.2,10.4,23.2,23.2l0,0c0,12.8-10.4,23.2-23.2,23.2l0,0
+	C377.1,159.9,366.6,149.5,366.6,136.7z"/>
+</svg>
diff --git a/interface/resources/icons/create-icons/94-model-01.svg b/interface/resources/icons/create-icons/94-model-01.svg
new file mode 100644
index 0000000000..5d8c4c5eca
--- /dev/null
+++ b/interface/resources/icons/create-icons/94-model-01.svg
@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.2.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
+<path d="M494.2,117.2c-2.2-5.3-7.8-8.4-13.5-7.3l-89.9,16.4l44.9-72.6c2.8-4.6,2.3-10.5-1.2-14.5s-9.3-5.3-14.2-3l-213.1,98
+	c-15.3-4.9-72.2-27.3-111.4-43.2c-0.3-0.1-0.6-0.2-0.8-0.3c0,0-0.1,0-0.1,0c-0.4-0.1-0.9-0.2-1.3-0.3c-0.1,0-0.2-0.1-0.3-0.1
+	c-0.5-0.1-0.9-0.2-1.4-0.2c0,0,0,0-0.1,0c-0.5,0-0.9,0.1-1.4,0.1c-0.1,0-0.1,0-0.2,0c0,0-0.1,0-0.1,0c-0.5,0-0.9,0.1-1.3,0.2
+	c-0.1,0-0.2,0-0.3,0.1c-0.4,0.1-0.8,0.2-1.2,0.3c-0.1,0-0.1,0-0.2,0.1c-0.4,0.1-0.8,0.3-1.2,0.5c-0.1,0-0.2,0.1-0.3,0.1
+	c-0.8,0.4-1.6,0.9-2.3,1.5c-0.1,0.1-0.2,0.1-0.2,0.2c-0.3,0.3-0.7,0.6-1,0.9c0,0-0.1,0.1-0.1,0.1c-0.2,0.2-0.4,0.4-0.5,0.6
+	c-0.1,0.1-0.2,0.2-0.3,0.4c-0.1,0.1-0.1,0.2-0.2,0.3c-0.3,0.4-0.5,0.8-0.7,1.2c0,0,0,0,0,0l-27.3,52.1l-32.7,40.1
+	c-3.4,4.2-3.7,10.2-0.6,14.7c2.3,3.3,6.1,5.2,10,5.2c1.3,0,2.6-0.2,3.9-0.7l50.1-17l40.6-1.9l-26.7,50.3c-2.4,4.5-1.7,9.9,1.6,13.7
+	c0.3,0.3,25.6,29.3,51.7,57.7c15.4,16.8,28,30.1,37.6,39.6c6.6,6.5,11.6,11.2,15.6,14.4l-16,61l-45.7,18.2
+	c-6.3,2.5-9.3,9.6-6.8,15.8c1.9,4.8,6.5,7.7,11.3,7.7c1.5,0,3-0.3,4.5-0.9l44.5-17.7l17.2,15.4c2.3,2.1,5.2,3.1,8.1,3.1
+	c3.4,0,6.7-1.4,9.1-4.1c4.5-5,4-12.7-1-17.2L212.1,431l16-60.7l75.7,89.3c2.4,2.8,5.8,4.3,9.3,4.3c1.1,0,2.1-0.1,3.2-0.4l84.6-22.8
+	c4.8-1.3,8.4-5.4,8.9-10.4c0.6-5-2-9.8-6.4-12.1l-136.2-71.8l44.4-91.2L489.9,132C494.6,128.7,496.4,122.6,494.2,117.2z
+	 M294.4,234.2l-122.6-55.4l41.5-20.6c0,0,0,0,0,0l180.4-82.9L294.4,234.2z M146.4,160.8l-24.8-33.2c16.7,6.6,39.3,15.5,54,21
+	L146.4,160.8z M87.3,166.6l-9.6-12.3l15.1-28.9l27.4,37.3l1.7,2.3L87.3,166.6z M123.2,243.6l22.8-43.3c18.3,44.8,35.2,91,47,121
+	C173.7,301.1,147.7,271.5,123.2,243.6z M317.4,438l-57.5-67.8l104.6,55.1L317.4,438z M223.3,336.7c-5.5-14.1-42.6-104.1-30.8-76.4
+	c0.6,1.4-20.5-49.2-27.9-66.3l120.9,58.9l-47.1,95L223.3,336.7z M330.5,216.7l43-62.3l70.9-16.2L330.5,216.7z"/>
+</svg>
diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index 3489af5fcb..601dbb5d73 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -76,7 +76,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "model-01.svg"
+                            icon: "icons/create-icons/94-model-01.svg"
                             text: "MODEL"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -86,7 +86,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../cube-01.svg"
+                            icon: "icons/create-icons/21-cube-01.svg"
                             text: "CUBE"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -96,7 +96,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../images/sphere-01.svg"
+                            icon: "icons/create-icons/22-sphere-01.svg"
                             text: "SPHERE"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -106,7 +106,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../scripts/system/assets/images/tools/light-01.svg"
+                            icon: "icons/create-icons/24-light-01.svg"
                             text: "LIGHT"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -116,7 +116,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../scripts/system/assets/images/tools/text-01.svg"
+                            icon: "icons/create-icons/20-text-01.svg"
                             text: "TEXT"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -126,7 +126,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../scripts/system/assets/images/tools/web-01.svg"
+                            icon: "icons/create-icons/25-web-1-01.svg"
                             text: "WEB"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -136,7 +136,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../scripts/system/assets/images/tools/zone-01.svg"
+                            icon: "icons/create-icons/23-zone-01.svg"
                             text: "ZONE"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -146,7 +146,7 @@ StackView {
                         }
 
                         NewEntityButton {
-                            icon: "../scripts/system/assets/images/tools/particle-01.svg"
+                            icon: "icons/create-icons/90-particles-01.svg"
                             text: "PARTICLE"
                             onClicked: {
                                 editRoot.sendToScript({
@@ -154,7 +154,9 @@ StackView {
                                 });
                             }
                         }
-                    } 
+                    }
+
+
 
                 }
             }
diff --git a/interface/resources/qml/hifi/tablet/NewEntityButton.qml b/interface/resources/qml/hifi/tablet/NewEntityButton.qml
index 5cb3d169e7..e5684fa791 100644
--- a/interface/resources/qml/hifi/tablet/NewEntityButton.qml
+++ b/interface/resources/qml/hifi/tablet/NewEntityButton.qml
@@ -2,12 +2,12 @@ import QtQuick 2.0
 import QtGraphicalEffects 1.0
 
 Item {
-    id: tabletButton
+    id: newEntityButton
     property var uuid;
-    property string text: "EDIT"
+    property string text: "ENTITY"
     property string icon: "icons/edit-icon.svg"
-    property string activeText: tabletButton.text
-    property string activeIcon: tabletButton.icon
+    property string activeText: newEntityButton.text
+    property string activeIcon: newEntityButton.icon
     property bool isActive: false
     property bool inDebugMode: false
     property bool isEntered: false
@@ -54,6 +54,38 @@ Item {
         }
     }
 
+    Rectangle {
+        id: buttonOutline
+        color: "#00000000"
+        opacity: 0
+        radius: 8
+        z: 1
+        border.width: 2
+        border.color: "#ffffff"
+        anchors.right: parent.right
+        anchors.rightMargin: 0
+        anchors.left: parent.left
+        anchors.leftMargin: 0
+        anchors.bottom: parent.bottom
+        anchors.bottomMargin: 0
+        anchors.top: parent.top
+        anchors.topMargin: 0
+    }
+
+    DropShadow {
+        id: glow
+        visible: false
+        anchors.fill: parent
+        horizontalOffset: 0
+        verticalOffset: 0
+        color: "#ffffff"
+        radius: 20
+        z: -1
+        samples: 41
+        source: buttonOutline
+    }
+
+
     Image {
         id: icon
         width: 50
@@ -63,7 +95,7 @@ Item {
         anchors.bottomMargin: 5
         anchors.horizontalCenter: parent.horizontalCenter
         fillMode: Image.Stretch
-        source: tabletButton.urlHelper(tabletButton.icon)
+        source: newEntityButton.urlHelper(newEntityButton.icon)
     }
 
     ColorOverlay {
@@ -76,11 +108,11 @@ Item {
     Text {
         id: text
         color: "#ffffff"
-        text: tabletButton.text
+        text: newEntityButton.text
         font.bold: true
-        font.pixelSize: 18
+        font.pixelSize: 16
         anchors.bottom: parent.bottom
-        anchors.bottomMargin: 10
+        anchors.bottomMargin: 12
         anchors.horizontalCenter: parent.horizontalCenter
         horizontalAlignment: Text.AlignHCenter
     }
@@ -90,34 +122,13 @@ Item {
         hoverEnabled: true
         enabled: true
         onClicked: {
-            console.log("Tablet Button Clicked!");
-            if (tabletButton.inDebugMode) {
-                if (tabletButton.isActive) {
-                    tabletButton.isActive = false;
-                } else {
-                    tabletButton.isActive = true;
-                }
-            }
-            tabletButton.clicked();
-            if (tabletRoot) {
-                tabletRoot.playButtonClickSound();
-            }
+            newEntityButton.clicked();
         }
         onEntered: {
-            tabletButton.isEntered = true;
-            if (tabletButton.isActive) {
-                tabletButton.state = "hover active state";
-            } else {
-                tabletButton.state = "hover state";
-            }
+            newEntityButton.state = "hover state";
         }
         onExited: {
-            tabletButton.isEntered = false;
-            if (tabletButton.isActive) {
-                tabletButton.state = "active state";
-            } else {
-                tabletButton.state = "base state";
-            }
+            newEntityButton.state = "base state";
         }
     }
 
@@ -127,7 +138,6 @@ Item {
 
             PropertyChanges {
                 target: buttonOutline
-                border.color: "#1fc6a6"
                 opacity: 1
             }
 
@@ -137,66 +147,12 @@ Item {
             }
         },
         State {
-            name: "active state"
-
-            PropertyChanges {
-                target: buttonOutline
-                border.color: "#1fc6a6"
-                opacity: 1
-            }
-
-            PropertyChanges {
-                target: buttonBg
-                color: "#1fc6a6"
-                opacity: 1
-            }
-
-            PropertyChanges {
-                target: text
-                color: "#333333"
-                text: tabletButton.activeText
-            }
-
-            PropertyChanges {
-                target: iconColorOverlay
-                color: "#333333"
-            }
-
-            PropertyChanges {
-                target: icon
-                source: tabletButton.urlHelper(tabletButton.activeIcon)
-            }
-        },
-        State {
-            name: "hover active state"
+            name: "base state"
 
             PropertyChanges {
                 target: glow
-                visible: true
+                visible: false
             }
-
-            PropertyChanges {
-                target: buttonOutline
-                border.color: "#ffffff"
-                opacity: 1
-            }
-
-            PropertyChanges {
-                target: buttonBg
-                color: "#1fc6a6"
-                opacity: 1
-            }
-
-            PropertyChanges {
-                target: text
-                color: "#333333"
-            }
-
-            PropertyChanges {
-                target: iconColorOverlay
-                color: "#333333"
-            }
-
         }
     ]
 }

From d4ea0c116dbba42f15346a95ed48d3c04e132702 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 14:36:39 -0800
Subject: [PATCH 6/8] asset server button

---
 interface/resources/qml/hifi/tablet/Edit.qml | 102 +++++++++++++++++--
 1 file changed, 91 insertions(+), 11 deletions(-)

diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index 601dbb5d73..b3f28569cc 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -6,6 +6,7 @@ import QtQuick.Controls.Styles 1.4
 import "../../controls"
 import "../toolbars"
 import HFWebEngineProfile 1.0
+import QtGraphicalEffects 1.0
 
 StackView {
     id: editRoot
@@ -60,20 +61,9 @@ StackView {
                         anchors.rightMargin: 55
                         anchors.left: parent.left
                         anchors.leftMargin: 55
-                        anchors.bottom: parent.bottom
-                        anchors.bottomMargin: 30
                         anchors.top: parent.top
                         anchors.topMargin: 70
 
-                        NewEntityButton {
-                            icon: "icons/assets-01.svg"
-                            text: "ASSETS"
-                            onClicked: {
-                                editRoot.sendToScript({
-                                    method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
-                                });
-                            }
-                        }
 
                         NewEntityButton {
                             icon: "icons/create-icons/94-model-01.svg"
@@ -156,8 +146,98 @@ StackView {
                         }
                     }
 
+                    Item {
+                        id: assetServerButton
+                        width: 370
+                        height: 38
+                        anchors.horizontalCenter: parent.horizontalCenter
+                        anchors.top: createEntitiesFlow.bottom
+                        anchors.topMargin: 35
+                        
+                        Rectangle {
+                            id: assetServerButtonBg
+                            color: "black"
+                            opacity: 1
+                            radius: 6
+                            anchors.right: parent.right
+                            anchors.rightMargin: 0
+                            anchors.left: parent.left
+                            anchors.leftMargin: 0
+                            anchors.bottom: parent.bottom
+                            anchors.bottomMargin: 0
+                            anchors.top: parent.top
+                            anchors.topMargin: 0
+                        }
 
+                        Rectangle {
+                            id: assetServerButtonGradient
+                            gradient: Gradient {
+                                GradientStop {
+                                    position: 0
+                                    color: "#383838"
+                                }
 
+                                GradientStop {
+                                    position: 1
+                                    color: "black"
+                                }
+                            }
+                            opacity: 1
+                            radius: 6
+                            anchors.right: parent.right
+                            anchors.rightMargin: 0
+                            anchors.left: parent.left
+                            anchors.leftMargin: 0
+                            anchors.bottom: parent.bottom
+                            anchors.bottomMargin: 0
+                            anchors.top: parent.top
+                            anchors.topMargin: 0
+                        }
+
+                        Text {
+                            color: "#ffffff"
+                            text: "OPEN THIS DOMAIN'S ASSET SERVER"
+                            font.bold: true
+                            font.pixelSize: 14
+                            anchors.centerIn: parent
+                        }
+
+                        MouseArea {
+                            anchors.fill: parent
+                            hoverEnabled: true
+                            enabled: true
+                            onClicked: {
+                                editRoot.sendToScript({
+                                    method: "newEntityButtonClicked", params: { buttonName: "openAssetBrowserButton" }
+                                });
+                            }
+                            onEntered: {
+                                assetServerButton.state = "hover state";
+                            }
+                            onExited: {
+                                assetServerButton.state = "base state";
+                            }
+                        }
+
+                        states: [
+                            State {
+                                name: "hover state"
+
+                                PropertyChanges {
+                                    target: assetServerButtonGradient
+                                    opacity: 0
+                                }
+                            },
+                            State {
+                                name: "base state"
+
+                                PropertyChanges {
+                                    target: assetServerButtonGradient
+                                    opacity: 1
+                                }
+                            }
+                        ]
+                    }
                 }
             }
 

From 80c3c003984b58b5a1f57833780b4e72aa3b8b85 Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 14:48:06 -0800
Subject: [PATCH 7/8] switch to properties tab when you create an entity

---
 interface/resources/qml/hifi/tablet/Edit.qml | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index b3f28569cc..a4e3db73f4 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -72,6 +72,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newModelButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -82,6 +83,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newCubeButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -92,6 +94,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newSphereButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -102,6 +105,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newLightButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -112,6 +116,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newTextButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -122,6 +127,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newWebButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -132,6 +138,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newZoneButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
 
@@ -142,6 +149,7 @@ StackView {
                                 editRoot.sendToScript({
                                     method: "newEntityButtonClicked", params: { buttonName: "newParticleButton" }
                                 });
+                                editTabView.currentIndex = 2
                             }
                         }
                     }

From c60360b6e070cf29c01a89d8d8bf5b70089cfcbe Mon Sep 17 00:00:00 2001
From: Faye Li <si.fi.faye.li@gmial.com>
Date: Thu, 23 Feb 2017 16:34:10 -0800
Subject: [PATCH 8/8] particle explorer icon

---
 interface/resources/qml/hifi/tablet/Edit.qml | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/interface/resources/qml/hifi/tablet/Edit.qml b/interface/resources/qml/hifi/tablet/Edit.qml
index a4e3db73f4..00856f8212 100644
--- a/interface/resources/qml/hifi/tablet/Edit.qml
+++ b/interface/resources/qml/hifi/tablet/Edit.qml
@@ -1,5 +1,5 @@
 import QtQuick 2.5
-import QtQuick.Controls 1.0
+import QtQuick.Controls 1.4
 import QtWebEngine 1.1
 import QtWebChannel 1.0
 import QtQuick.Controls.Styles 1.4
@@ -7,6 +7,7 @@ import "../../controls"
 import "../toolbars"
 import HFWebEngineProfile 1.0
 import QtGraphicalEffects 1.0
+import "../../styles-uit"
 
 StackView {
     id: editRoot
@@ -323,6 +324,17 @@ StackView {
                         font.pixelSize: 16
                         font.bold: true
                         color: styleData.selected ? "white" : "white"
+                        property string glyphtext: ""
+                        HiFiGlyphs {
+                            anchors.centerIn: parent
+                            size: 30
+                            color: "#ffffff"
+                            text: text.glyphtext
+                        }
+                        Component.onCompleted: if (styleData.title == "P") {
+                            text.text = "   ";
+                            text.glyphtext = "\ue004";
+                        }
                     }
                 }
                 tabBar: Rectangle {