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: {