diff --git a/demo/MainWindow.cpp b/demo/MainWindow.cpp index 57d5286..733a9e8 100644 --- a/demo/MainWindow.cpp +++ b/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); diff --git a/src/stylesheets/default.css b/src/stylesheets/default.css index 3a9fddb..b72c50b 100644 --- a/src/stylesheets/default.css +++ b/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*/ -} - - -ads--CDockWidgetSideTab { + qproperty-iconSize: 16px 16px;/* this is optional in case you would like to change icon size*/ 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; } diff --git a/src/stylesheets/default_linux.css b/src/stylesheets/default_linux.css index 43f6e17..f8dedfe 100644 --- a/src/stylesheets/default_linux.css +++ b/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); - border: 1px solid white; + background: palette(window); } 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); +} + + + diff --git a/src/stylesheets/focus_highlighting_linux.css b/src/stylesheets/focus_highlighting_linux.css index f16ab5e..dfa8a10 100644 --- a/src/stylesheets/focus_highlighting_linux.css +++ b/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; - border-bottom: 2px solid palette(highlight); - padding-bottom: 0px; +/***************************************************************************** + * CDockWidget + *****************************************************************************/ +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); +} +