From 3fa678a65263d615861bb19c988cbbbb407a56c8 Mon Sep 17 00:00:00 2001
From: David Rowe <david@ctrlaltstudio.com>
Date: Sat, 19 Mar 2016 14:52:40 +1300
Subject: [PATCH] Style tabs and background

---
 examples/html/edit-style.css                  |  4 +-
 interface/resources/qml/ToolWindow.qml        | 61 +++++++++++++++++++
 .../qml/styles-uit/HifiConstants.qml          |  2 +
 tests/ui/qml/main.qml                         | 18 ++++++
 4 files changed, 83 insertions(+), 2 deletions(-)

diff --git a/examples/html/edit-style.css b/examples/html/edit-style.css
index 8d05f5d076..7e5341e208 100644
--- a/examples/html/edit-style.css
+++ b/examples/html/edit-style.css
@@ -15,8 +15,8 @@ body {
     margin: 0;
     padding: 0;
 
-    background-color: rgb(76, 76, 76);
-    color: rgb(204, 204, 204);
+    background-color: #404040;
+    color: #afafaf;
     font-family: Arial;
     font-size: 9.0pt;
 
diff --git a/interface/resources/qml/ToolWindow.qml b/interface/resources/qml/ToolWindow.qml
index 4ec2bef175..aa5109cf45 100644
--- a/interface/resources/qml/ToolWindow.qml
+++ b/interface/resources/qml/ToolWindow.qml
@@ -10,11 +10,13 @@
 
 import QtQuick 2.5
 import QtQuick.Controls 1.4
+import QtQuick.Controls.Styles 1.4
 import QtWebEngine 1.1
 import Qt.labs.settings 1.0
 
 import "windows-uit"
 import "controls-uit"
+import "styles-uit"
 
 Window {
     id: toolWindow
@@ -28,6 +30,9 @@ Window {
     title: "Tools"
     property string newTabSource
     property alias tabView: tabView
+
+    HifiConstants { id: hifi }
+
     onParentChanged: {
         if (parent) {
             x = 120;
@@ -59,11 +64,67 @@ Window {
         id: tabView;
         width: pane.contentWidth
         height: pane.scrollHeight  // Pane height so that don't use Window's scrollbars otherwise tabs may be scrolled out of view.
+
         onCountChanged: {
             if (0 == count) {
                 toolWindow.visible = false
             }
         }
+
+        style: TabViewStyle {
+
+            frame: Rectangle {  // Background shown before content loads.
+                anchors.fill: parent
+                color: hifi.colors.baseGray
+            }
+
+            frameOverlap: 0
+
+            tab: Rectangle {
+                implicitWidth: control.count > 1 ? styleData.availableWidth / control.count : text.contentWidth + 4 * hifi.dimensions.contentMargin.x
+                implicitHeight: 3 * text.height
+                color: styleData.selected ? hifi.colors.black : hifi.colors.tabBackgroundDark
+
+                RalewayRegular {
+                    id: text
+                    text: styleData.title
+                    font.capitalization: Font.AllUppercase
+                    size: hifi.fontSizes.tabName
+                    width: control.count > 1 ? parent.width - 2 * hifi.dimensions.contentSpacing.x : implicitWidth
+                    elide: Text.ElideRight
+                    color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.lightGrayText
+                    horizontalAlignment: Text.AlignHCenter
+                    anchors.centerIn: parent
+                }
+
+                Rectangle {  // Separator.
+                    width: 1
+                    height: parent.height
+                    color: hifi.colors.black
+                    anchors.left: parent.left
+                    anchors.top: parent.top
+                    visible: styleData.index > 0
+
+                    Rectangle {
+                        width: 1
+                        height: 1
+                        color: hifi.colors.baseGray
+                        anchors.left: parent.left
+                        anchors.bottom: parent.bottom
+                    }
+                }
+
+                Rectangle {  // Active underline.
+                    width: parent.width - (styleData.index > 0 ? 1 : 0)
+                    height: 1
+                    anchors.right: parent.right
+                    anchors.bottom: parent.bottom
+                    color: styleData.selected ? hifi.colors.primaryHighlight : hifi.colors.baseGray
+                }
+            }
+
+            tabOverlap: 0
+        }
     }
 
     function updateVisiblity() {
diff --git a/interface/resources/qml/styles-uit/HifiConstants.qml b/interface/resources/qml/styles-uit/HifiConstants.qml
index 46aa3d2cb9..7dd5666f6b 100644
--- a/interface/resources/qml/styles-uit/HifiConstants.qml
+++ b/interface/resources/qml/styles-uit/HifiConstants.qml
@@ -114,6 +114,8 @@ Item {
         readonly property color dropDownDarkStart: "#7d7d7d"
         readonly property color dropDownDarkFinish: "#6b6a6b"
         readonly property color textFieldLightBackground: "#d4d4d4"
+        readonly property color tabBackgroundDark: "#252525"
+        readonly property color tabBackgroundLight: "#d4d4d4"
     }
 
     Item {
diff --git a/tests/ui/qml/main.qml b/tests/ui/qml/main.qml
index d8083b7bbd..e45749e1de 100644
--- a/tests/ui/qml/main.qml
+++ b/tests/ui/qml/main.qml
@@ -220,6 +220,24 @@ ApplicationWindow {
                 }
             }
 
+            Button {
+                text: "Add Tab 2"
+                onClicked: {
+                    console.log(desktop.toolWindow);
+                    desktop.toolWindow.addWebTab({ source: "Foo 2" });
+                    desktop.toolWindow.showTabForUrl("Foo 2", true);
+                }
+            }
+
+            Button {
+                text: "Add Tab 3"
+                onClicked: {
+                    console.log(desktop.toolWindow);
+                    desktop.toolWindow.addWebTab({ source: "Foo 3" });
+                    desktop.toolWindow.showTabForUrl("Foo 3", true);
+                }
+            }
+
             Button {
                 text: "Destroy Tab"
                 onClicked: {