Updated Linux css files to properly support new auto hide feature

demo/MainWindow.cpp

@@ -651,7 +651,7 @@ CMainWindow::CMainWindow(QWidget *parent) :
 
 	// uncomment the following line to enable focus highlighting of the dock
 	// widget that has the focus
-	//CDockManager::setConfigFlag(CDockManager::FocusHighlighting, true);
+    CDockManager::setConfigFlag(CDockManager::FocusHighlighting, true);
 
 	// uncomment if you would like to enable dock widget auto hiding
     CDockManager::setConfigFlag(CDockManager::DefaultAutoHideConfig, true);

src/stylesheets/default.css

@@ -18,7 +18,7 @@ ads--CDockContainerWidget > QSplitter {
 }
 
 ads--CDockContainerWidget ads--CDockSplitter::handle {
-	background: palette(dark);
+    background: palette(dark);
 }
 
 
@@ -26,7 +26,33 @@ ads--CDockContainerWidget ads--CDockSplitter::handle {
  * CDockAreaWidget
  *****************************************************************************/
 ads--CDockAreaWidget {
-	background: palette(window);
+    background: palette(window);
+}
+
+ads--CTitleBarButton {
+        padding: 0px 0px;
+}
+
+
+#tabsMenuButton::menu-indicator {
+        image: none;
+}
+
+#tabsMenuButton {
+        qproperty-icon: url(:/ads/images/tabs-menu-button.svg);
+        qproperty-iconSize: 16px;
+}
+
+#dockAreaCloseButton {
+        qproperty-icon: url(:/ads/images/close-button.svg),
+                url(:/ads/images/close-button-disabled.svg) disabled;
+        qproperty-iconSize: 16px;
+}
+
+#detachGroupButton {
+        qproperty-icon: url(:/ads/images/detach-button.svg),
+                url(:/ads/images/detach-button-disabled.svg) disabled;
+        qproperty-iconSize: 16px;
 }
 
 
@@ -94,36 +120,6 @@ QScrollArea#dockWidgetScrollArea {
 }
 
 
-/*****************************************************************************
- * Dock area title bar and buttons styling
- *****************************************************************************/
- ads--CTitleBarButton {
-	padding: 0px 0px;
-}
-
-
-#tabsMenuButton::menu-indicator {
-	image: none;
-}
-
-#tabsMenuButton {
-	qproperty-icon: url(:/ads/images/tabs-menu-button.svg);
-	qproperty-iconSize: 16px;
-}
-
-#dockAreaCloseButton {
-	qproperty-icon: url(:/ads/images/close-button.svg),
-		url(:/ads/images/close-button-disabled.svg) disabled;
-	qproperty-iconSize: 16px;
-}
-
-#detachGroupButton {
-	qproperty-icon: url(:/ads/images/detach-button.svg),
-		url(:/ads/images/detach-button-disabled.svg) disabled;
-	qproperty-iconSize: 16px;	
-}
-
-
 /*****************************************************************************
  *
  * Styling of auto hide functionality
@@ -135,33 +131,27 @@ QScrollArea#dockWidgetScrollArea {
  * CDockWidgetSideTab
  *****************************************************************************/
 ads--CDockWidgetSideTab {
-	/*background: palette(window);*/
+        qproperty-iconSize: 16px 16px;/* this is optional in case you would like to change icon size*/
-	qproperty-iconSize: 16px 16px;/* this is optional in case you would like to change icon size*/
-}
-
-
-ads--CDockWidgetSideTab {
 	background: none;
 	border: none;
 	padding-left: 2px;
 	padding-right: 0px;
 	text-align: center;
+        margin-right: 6px;
+        min-height: 20;
 }
 
 
 ads--CDockWidgetSideTab[sideTabBarArea="0"],
 ads--CDockWidgetSideTab[sideTabBarArea="2"]  {
 	border-top: 5px solid rgba(0, 0, 0, 48);
-	margin-right: 6px;
+
-	min-height: 20;
 }
 
 
 ads--CDockWidgetSideTab[sideTabBarArea="1"],
 ads--CDockWidgetSideTab[sideTabBarArea="3"] {
 	border-bottom: 5px solid rgba(0, 0, 0, 48);
-	margin-right: 6px;
-	min-height: 20;
 }
 
 

src/stylesheets/default_linux.css

@@ -6,7 +6,7 @@
  * CDockContainerWidget
  *****************************************************************************/
 ads--CDockContainerWidget {
-	background: palette(dark);
+    background: palette(window);
 }
 
 
@@ -14,11 +14,11 @@ ads--CDockContainerWidget {
  * CDockSplitter
  *****************************************************************************/
 ads--CDockContainerWidget > QSplitter{
-        padding: 1 0 1 0;
+    padding: 1 0 1 0;
 }
 
 ads--CDockContainerWidget ads--CDockSplitter::handle {
-	background: palette(dark);
+    background: palette(dark);
 }
 
 
@@ -26,15 +26,38 @@ ads--CDockContainerWidget ads--CDockSplitter::handle {
  * CDockAreaWidget
  *****************************************************************************/
 ads--CDockAreaWidget {
-	background: palette(window);
+    background: palette(window);
-	border: 1px solid white;
 }
 
 ads--CDockAreaWidget #tabsMenuButton::menu-indicator {
-	image: none;
+    image: none;
 }
 
 
+ads--CTitleBarButton {
+        padding: 0px 0px;
+}
+
+
+#tabsMenuButton {
+        qproperty-icon: url(:/ads/images/tabs-menu-button.svg);
+        qproperty-iconSize: 16px;
+}
+
+
+#dockAreaCloseButton {
+        qproperty-icon: url(:/ads/images/close-button.svg),
+                url(:/ads/images/close-button-disabled.svg) disabled;
+        qproperty-iconSize: 16px;
+}
+
+
+#detachGroupButton {
+        qproperty-icon: url(:/ads/images/detach-button.svg),
+                url(:/ads/images/detach-button-disabled.svg) disabled;
+        qproperty-iconSize: 16px;
+}
+
 
 /*****************************************************************************
  * CDockWidgetTab and close button styling
@@ -47,16 +70,19 @@ ads--CDockWidgetTab {
 	padding: 0 0px;
 }
 
+
 ads--CDockWidgetTab[activeTab="true"] {
 	background: qlineargradient(spread : pad, x1 : 0, y1 : 0, x2 : 0, y2 : 0.5, stop : 0
 		palette(window), stop:1 palette(light));
 	/*background: palette(highlight);*/
 }
 
+
 ads--CDockWidgetTab QLabel {
 	color: palette(dark);
 }
 
+
 ads--CDockWidgetTab[activeTab="true"] QLabel {
 	color: palette(foreground);
 }
@@ -99,32 +125,6 @@ QScrollArea#dockWidgetScrollArea {
 }
 
 
-/*****************************************************************************
- * Dock area title bar and buttons styling
- *****************************************************************************/
-ads--CTitleBarButton {
-        padding: 0px 0px;
-}
-
-
-#tabsMenuButton {
-        qproperty-icon: url(:/ads/images/tabs-menu-button.svg);
-        qproperty-iconSize: 16px;
-}
-
-#dockAreaCloseButton {
-	qproperty-icon: url(:/ads/images/close-button.svg),
-		url(:/ads/images/close-button-disabled.svg) disabled;
-	qproperty-iconSize: 16px;
-}
-
-#detachGroupButton {
-	qproperty-icon: url(:/ads/images/detach-button.svg),
-		url(:/ads/images/detach-button-disabled.svg) disabled;
-	qproperty-iconSize: 16px;	
-}
-
-
 /*****************************************************************************
  * Floating widget styling
  *****************************************************************************/
@@ -154,3 +154,177 @@ ads--CFloatingWidgetTitleBar {
 #floatingTitleCloseButton:pressed {
     background: rgba(0, 0, 0, 48);
 }
+
+
+/*****************************************************************************
+ *
+ * Styling of auto hide functionality
+ *
+ *****************************************************************************/
+
+
+/*****************************************************************************
+ * CDockWidgetSideTab
+ *****************************************************************************/
+ads--CDockWidgetSideTab {
+    qproperty-iconSize: 16px 16px;/* this is optional in case you would like to change icon size*/
+    padding-left: 2px;
+    padding-right: 0px;
+    text-align: center;
+    margin-right: 6px;
+    min-height: 20;
+    border: none;
+}
+
+ads--CDockWidgetSideTab[sideTabBarArea="1"],
+ads--CDockWidgetSideTab[sideTabBarArea="3"] {
+    border-bottom: 5px solid rgba(0, 0, 0, 48);
+}
+
+
+ads--CDockWidgetSideTab[sideTabBarArea="0"],
+ads--CDockWidgetSideTab[sideTabBarArea="2"]  {
+    border-top: 5px solid rgba(0, 0, 0, 48);
+}
+
+
+ads--CDockWidgetSideTab:hover[sideTabBarArea="0"],
+ads--CDockWidgetSideTab:hover[sideTabBarArea="2"]  {
+    border-top: 5px solid palette(highlight);
+    color: palette(highlight);
+}
+
+
+ads--CDockWidgetSideTab:hover[sideTabBarArea="1"],
+ads--CDockWidgetSideTab:hover[sideTabBarArea="3"]  {
+    border-bottom: 5px solid palette(highlight);
+    color: palette(highlight);
+}
+
+ads--CDockWidgetSideTab[sideTabBarArea="0"][activeTab="true"],
+ads--CDockWidgetSideTab[sideTabBarArea="2"][activeTab="true"]  {
+    border-top: 5px solid palette(highlight);
+}
+
+
+ads--CDockWidgetSideTab[sideTabBarArea="1"][activeTab="true"],
+ads--CDockWidgetSideTab[sideTabBarArea="3"][activeTab="true"] {
+    border-bottom: 5px solid palette(highlight);
+}
+
+
+/*****************************************************************************
+ * CSideTabBar
+ *****************************************************************************/
+ads--CSideTabBar{
+        background: palette(window);
+}
+
+
+ads--CSideTabBar[sideTabBarArea="0"] {
+    border-bottom: 1px solid palette(dark);
+}
+
+ads--CSideTabBar[sideTabBarArea="1"] {
+    border-right: 1px solid palette(dark);
+}
+
+ads--CSideTabBar[sideTabBarArea="2"] {
+    border-left: 1px solid palette(dark);
+}
+
+ads--CSideTabBar[sideTabBarArea="3"] {
+    border-top: 1px solid palette(dark);
+}
+
+
+/*****************************************************************************
+ * CAutoHideDockContainer
+ *****************************************************************************/
+ads--CAutoHideDockContainer {
+        background: palette(window);
+}
+
+
+ads--CAutoHideDockContainer ads--CDockAreaTitleBar {
+        background: palette(highlight);
+        padding: 0px;
+        border: none;
+}
+
+
+/*
+ * This is required because the ads--CDockAreaWidget[focused="true"] will
+ * overwrite the ads--CAutoHideDockContainer ads--CDockAreaTitleBar rule
+ */
+ads--CAutoHideDockContainer ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
+        background: palette(highlight);
+        padding: 0px;
+        border: none;
+}
+
+
+#autoHideTitleLabel {
+        padding-left: 4px;
+        color: palette(light);
+}
+
+
+/*****************************************************************************
+ * CAutoHideDockContainer titlebar buttons
+ *****************************************************************************/
+#dockAreaAutoHideButton {
+        qproperty-icon: url(:/ads/images/vs-pin-button.svg);
+        qproperty-iconSize: 16px;
+}
+
+ads--CAutoHideDockContainer #dockAreaAutoHideButton {
+        qproperty-icon: url(:/ads/images/vs-pin-button-pinned-focused.svg);
+        qproperty-iconSize: 16px;
+}
+
+
+ads--CAutoHideDockContainer #dockAreaCloseButton{
+        qproperty-icon: url(:/ads/images/close-button-focused.svg)
+}
+
+
+ads--CAutoHideDockContainer ads--CTitleBarButton:hover {
+        background: rgba(255, 255, 255, 48);
+}
+
+ads--CAutoHideDockContainer ads--CTitleBarButton:pressed {
+        background: rgba(255, 255, 255, 96);
+}
+
+/*****************************************************************************
+ * CAutoHideDockContainer Titlebar and Buttons
+ *****************************************************************************/
+
+
+/*****************************************************************************
+ * CResizeHandle
+ *****************************************************************************/
+ads--CResizeHandle {
+    background: palette(window);
+}
+
+
+ads--CAutoHideDockContainer[sideTabBarArea="0"] ads--CResizeHandle {
+    border-top: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideTabBarArea="1"] ads--CResizeHandle {
+    border-left: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideTabBarArea="2"] ads--CResizeHandle {
+    border-right: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideTabBarArea="3"] ads--CResizeHandle {
+    border-top: 1px solid palette(dark);
+}
+
+
+

src/stylesheets/focus_highlighting_linux.css

@@ -1,9 +1,18 @@
 /*
  * Default style sheet on Linux Platforms with focus highlighting flag enabled
  */
+
+/*****************************************************************************
+ * CDockContainerWidget
+ *****************************************************************************/
 ads--CDockContainerWidget {
-        background: palette(dark);
+        background: palette(window);
 }
+
+
+/*****************************************************************************
+ * CDockSplitter
+ *****************************************************************************/
 ads--CDockContainerWidget > QSplitter{
         padding: 1 0 1 0;
 }
@@ -13,15 +22,64 @@ ads--CDockContainerWidget ads--CDockSplitter::handle {
         background: palette(dark);
 }
 
+
+/*****************************************************************************
+ * CDockAreaWidget
+ *****************************************************************************/
 ads--CDockAreaWidget {
         background: palette(window);
-        border: 1px solid white;
 }
 
 ads--CDockAreaWidget #tabsMenuButton::menu-indicator {
         image: none;
 }
 
+
+ads--CTitleBarButton {
+        padding: 0px 0px;
+}
+
+
+#tabsMenuButton {
+        qproperty-icon: url(:/ads/images/tabs-menu-button.svg);
+        qproperty-iconSize: 16px;
+}
+
+
+#dockAreaCloseButton {
+        qproperty-icon: url(:/ads/images/close-button.svg),
+                url(:/ads/images/close-button-disabled.svg) disabled;
+        qproperty-iconSize: 16px;
+}
+
+
+#detachGroupButton {
+        qproperty-icon: url(:/ads/images/detach-button.svg),
+                url(:/ads/images/detach-button-disabled.svg) disabled;
+        qproperty-iconSize: 16px;
+}
+
+
+
+/*****************************************************************************
+ * CDockAreaTitleBar
+ *****************************************************************************/
+ads--CDockAreaTitleBar {
+        background: transparent;
+        border-bottom: 2px solid palette(light);
+        padding-bottom: 0px;
+}
+
+ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
+        background: transparent;
+        border-bottom: 2px solid palette(highlight);
+        padding-bottom: 0px;
+}
+
+
+/*****************************************************************************
+ * CDockWidgetTab and close button styling
+ *****************************************************************************/
 ads--CDockWidgetTab {
         background: palette(window);
         border-color: palette(light);
@@ -44,33 +102,6 @@ ads--CDockWidgetTab[activeTab="true"] QLabel {
         color: palette(foreground);
 }
 
-ads--CDockWidget {
-        background: palette(light);
-        border-color: palette(light);
-        border-style: solid;
-        border-width: 1px 0 0 0;
-}
-
-ads--CTitleBarButton {
-        padding: 0px 0px;
-}
-
-QScrollArea#dockWidgetScrollArea {
-        padding: 0px;
-        border: none;
-}
-
-#dockAreaCloseButton {
-        qproperty-icon: url(:/ads/images/close-button.svg),
-                url(:/ads/images/close-button-disabled.svg) disabled;
-        qproperty-iconSize: 16px;
-}
-
-#detachGroupButton {
-        qproperty-icon: url(:/ads/images/detach-button.svg),
-                url(:/ads/images/detach-button-disabled.svg) disabled;
-        qproperty-iconSize: 16px;
-}
 
 #tabCloseButton {
         margin-top: 2px;
@@ -92,27 +123,21 @@ QScrollArea#dockWidgetScrollArea {
 }
 
 
-#tabsMenuButton {
-        qproperty-icon: url(:/ads/images/tabs-menu-button.svg);
-        qproperty-iconSize: 16px;
-}
-
-
 /* Focus related styling */
 ads--CDockWidgetTab[focused="true"] {
         background: palette(highlight);
         border-color: palette(highlight);
 }
 
-ads--CDockWidgetTab[focused="true"]>#tabCloseButton {
+ads--CDockWidgetTab[focused="true"] > #tabCloseButton {
         qproperty-icon: url(:/ads/images/close-button-focused.svg)
 }
 
-ads--CDockWidgetTab[focused="true"]>#tabCloseButton:hover {
+ads--CDockWidgetTab[focused="true"] > #tabCloseButton:hover {
         background: rgba(255, 255, 255, 48);
 }
 
-ads--CDockWidgetTab[focused="true"]>#tabCloseButton:pressed {
+ads--CDockWidgetTab[focused="true"] > #tabCloseButton:pressed {
         background: rgba(255, 255, 255, 92);
 }
 
@@ -120,19 +145,28 @@ ads--CDockWidgetTab[focused="true"] QLabel {
         color: palette(light);
 }
 
-ads--CDockAreaTitleBar {
-        background: transparent;
-        border-bottom: 2px solid palette(light);
-        padding-bottom: 0px;
-}
 
-ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
+/*****************************************************************************
-        background: transparent;
+ * CDockWidget
-        border-bottom: 2px solid palette(highlight);
+ *****************************************************************************/
-        padding-bottom: 0px;
+ads--CDockWidget {
+        background: palette(light);
+        border-color: palette(light);
+        border-style: solid;
+        border-width: 1px 0 0 0;
 }
 
 
+QScrollArea#dockWidgetScrollArea {
+        padding: 0px;
+        border: none;
+}
+
+
+
+/*****************************************************************************
+ * Floating widget styling
+ *****************************************************************************/
 ads--CFloatingWidgetTitleBar {
     qproperty-maximizeIcon: url(:/ads/images/maximize-button.svg);
     qproperty-normalIcon: url(:/ads/images/restore-button.svg);
@@ -197,3 +231,174 @@ ads--CFloatingDockContainer[isActiveWindow="true"] #floatingTitleMaximizeButton:
 }
 */
 
+
+/*****************************************************************************
+ *
+ * Styling of auto hide functionality
+ *
+ *****************************************************************************/
+
+
+/*****************************************************************************
+ * CDockWidgetSideTab
+ *****************************************************************************/
+ads--CDockWidgetSideTab {
+    qproperty-iconSize: 16px 16px;/* this is optional in case you would like to change icon size*/
+    padding-left: 2px;
+    padding-right: 0px;
+    text-align: center;
+    margin-right: 6px;
+    min-height: 20;
+    border: none;
+}
+
+ads--CDockWidgetSideTab[sideTabBarArea="1"],
+ads--CDockWidgetSideTab[sideTabBarArea="3"] {
+    border-bottom: 5px solid rgba(0, 0, 0, 48);
+}
+
+
+ads--CDockWidgetSideTab[sideTabBarArea="0"],
+ads--CDockWidgetSideTab[sideTabBarArea="2"]  {
+    border-top: 5px solid rgba(0, 0, 0, 48);
+}
+
+
+ads--CDockWidgetSideTab:hover[sideTabBarArea="0"],
+ads--CDockWidgetSideTab:hover[sideTabBarArea="2"]  {
+    border-top: 5px solid palette(highlight);
+    color: palette(highlight);
+}
+
+
+ads--CDockWidgetSideTab:hover[sideTabBarArea="1"],
+ads--CDockWidgetSideTab:hover[sideTabBarArea="3"]  {
+    border-bottom: 5px solid palette(highlight);
+    color: palette(highlight);
+}
+
+ads--CDockWidgetSideTab[sideTabBarArea="0"][activeTab="true"],
+ads--CDockWidgetSideTab[sideTabBarArea="2"][activeTab="true"]  {
+    border-top: 5px solid palette(highlight);
+}
+
+
+ads--CDockWidgetSideTab[sideTabBarArea="1"][activeTab="true"],
+ads--CDockWidgetSideTab[sideTabBarArea="3"][activeTab="true"] {
+    border-bottom: 5px solid palette(highlight);
+}
+
+
+/*****************************************************************************
+ * CSideTabBar
+ *****************************************************************************/
+ads--CSideTabBar{
+        background: palette(window);
+}
+
+
+ads--CSideTabBar[sideTabBarArea="0"] {
+    border-bottom: 1px solid palette(dark);
+}
+
+ads--CSideTabBar[sideTabBarArea="1"] {
+    border-right: 1px solid palette(dark);
+}
+
+ads--CSideTabBar[sideTabBarArea="2"] {
+    border-left: 1px solid palette(dark);
+}
+
+ads--CSideTabBar[sideTabBarArea="3"] {
+    border-top: 1px solid palette(dark);
+}
+
+
+/*****************************************************************************
+ * CAutoHideDockContainer
+ *****************************************************************************/
+ads--CAutoHideDockContainer {
+        background: palette(window);
+}
+
+
+ads--CAutoHideDockContainer ads--CDockAreaTitleBar {
+        background: palette(highlight);
+        padding: 0px;
+        border: none;
+}
+
+
+/*
+ * This is required because the ads--CDockAreaWidget[focused="true"] will
+ * overwrite the ads--CAutoHideDockContainer ads--CDockAreaTitleBar rule
+ */
+ads--CAutoHideDockContainer ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
+        background: palette(highlight);
+        padding: 0px;
+        border: none;
+}
+
+
+#autoHideTitleLabel {
+        padding-left: 4px;
+        color: palette(light);
+}
+
+
+/*****************************************************************************
+ * CAutoHideDockContainer titlebar buttons
+ *****************************************************************************/
+#dockAreaAutoHideButton {
+        qproperty-icon: url(:/ads/images/vs-pin-button.svg);
+        qproperty-iconSize: 16px;
+}
+
+ads--CAutoHideDockContainer #dockAreaAutoHideButton {
+        qproperty-icon: url(:/ads/images/vs-pin-button-pinned-focused.svg);
+        qproperty-iconSize: 16px;
+}
+
+
+ads--CAutoHideDockContainer #dockAreaCloseButton{
+        qproperty-icon: url(:/ads/images/close-button-focused.svg)
+}
+
+
+ads--CAutoHideDockContainer ads--CTitleBarButton:hover {
+        background: rgba(255, 255, 255, 48);
+}
+
+ads--CAutoHideDockContainer ads--CTitleBarButton:pressed {
+        background: rgba(255, 255, 255, 96);
+}
+
+/*****************************************************************************
+ * CAutoHideDockContainer Titlebar and Buttons
+ *****************************************************************************/
+
+
+/*****************************************************************************
+ * CResizeHandle
+ *****************************************************************************/
+ads--CResizeHandle {
+    background: palette(window);
+}
+
+
+ads--CAutoHideDockContainer[sideTabBarArea="0"] ads--CResizeHandle {
+    border-top: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideTabBarArea="1"] ads--CResizeHandle {
+    border-left: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideTabBarArea="2"] ads--CResizeHandle {
+    border-right: 1px solid palette(dark);
+}
+
+ads--CAutoHideDockContainer[sideTabBarArea="3"] ads--CResizeHandle {
+    border-top: 1px solid palette(dark);
+}
+