From d928d579bf8983a377905de1ea36f4458b22a943 Mon Sep 17 00:00:00 2001 From: Cynthia Pang Date: Fri, 20 Oct 2023 17:13:48 +0800 Subject: [PATCH] Add custom css for AutoHideExample. --- examples/autohide/autohide.qrc | 1 + examples/autohide/mainwindow.cpp | 7 + examples/autohide/res/autohide.css | 368 +++++++++++++++++++++++++++++ 3 files changed, 376 insertions(+) create mode 100644 examples/autohide/res/autohide.css diff --git a/examples/autohide/autohide.qrc b/examples/autohide/autohide.qrc index 0c68187..e5319c6 100644 --- a/examples/autohide/autohide.qrc +++ b/examples/autohide/autohide.qrc @@ -1,5 +1,6 @@ images/minimize-button.svg + res/autohide.css diff --git a/examples/autohide/mainwindow.cpp b/examples/autohide/mainwindow.cpp index b514818..c8be9bf 100644 --- a/examples/autohide/mainwindow.cpp +++ b/examples/autohide/mainwindow.cpp @@ -34,6 +34,13 @@ CMainWindow::CMainWindow(QWidget *parent) DockManager = new CDockManager(this); + QFile StyleSheetFile(":/adsautohide/res/autohide.css"); + StyleSheetFile.open(QIODevice::ReadOnly); + QTextStream StyleSheetStream(&StyleSheetFile); + auto Stylesheet = StyleSheetStream.readAll(); + StyleSheetFile.close(); + DockManager->setStyleSheet(Stylesheet); + // Set central widget QPlainTextEdit* w = new QPlainTextEdit(); w->setPlaceholderText("This is the central editor. Enter your text here."); diff --git a/examples/autohide/res/autohide.css b/examples/autohide/res/autohide.css new file mode 100644 index 0000000..3da61ae --- /dev/null +++ b/examples/autohide/res/autohide.css @@ -0,0 +1,368 @@ +/* + * Default style sheet on Windows Platforms with focus highlighting flag enabled + */ + + +/***************************************************************************** + * CDockContainerWidget + *****************************************************************************/ +ads--CDockContainerWidget { + background: palette(window); +} + + + /***************************************************************************** + * CDockSplitter + *****************************************************************************/ + ads--CDockContainerWidget > QSplitter { + padding: 1 0 1 0; + } + + +ads--CDockSplitter::handle { + background-color: palette(dark); + /* uncomment the following line if you would like to change the size of + the splitter handles */ + /* height: 1px; */ +} + + +/***************************************************************************** + * CDockAreaWidget + *****************************************************************************/ +ads--CDockAreaWidget { + background: palette(window); +} + + +ads--CDockAreaTitleBar { + background: transparent; + border-bottom: 2px solid palette(light); + padding-bottom: 0px; +} + +ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar { + border-bottom: 2px solid palette(highlight); +} + +ads--CTitleBarButton { + padding: 0px 0px; +} + + +#tabsMenuButton::menu-indicator { + image: none; +} + + +#dockAreaCloseButton { + qproperty-iconSize: 16px; +} + +#detachGroupButton { + qproperty-icon: url(:/ads/images/detach-button.svg), url(:/ads/images/detach-button-disabled.svg) disabled; + qproperty-iconSize: 16px; +} + + + +/***************************************************************************** + * CDockWidgetTab + *****************************************************************************/ +ads--CDockWidgetTab { + background: palette(window); + border-color: palette(light); + border-style: solid; + border-width: 0 1px 0 0; + padding: 0 0px; + qproperty-iconSize: 16px 16px; /* this is optional in case you would like to change icon size*/ +} + + 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); + } + + +#tabCloseButton { + margin-top: 2px; + background: none; + border: none; + padding: 0px -2px; + qproperty-icon: url(:/ads/images/close-button.svg), url(:/ads/images/close-button-disabled.svg) disabled; + qproperty-iconSize: 16px; +} + + #tabCloseButton:hover { + /*border: 1px solid rgba(0, 0, 0, 32);*/ + background: rgba(0, 0, 0, 24); + } + + #tabCloseButton:pressed { + background: rgba(0, 0, 0, 48); + } + +/* Focus related styling */ +ads--CDockWidgetTab[focused="true"] { + background: palette(highlight); + border-color: palette(highlight); +} + + ads--CDockWidgetTab[focused="true"] > #tabCloseButton { + qproperty-icon: url(:/ads/images/close-button-focused.svg) + } + + ads--CDockWidgetTab[focused="true"] > #tabCloseButton:hover { + background: rgba(255, 255, 255, 48); + } + + ads--CDockWidgetTab[focused="true"] > #tabCloseButton:pressed { + background: rgba(255, 255, 255, 92); + } + + ads--CDockWidgetTab[focused="true"] QLabel { + color: palette(light); + } + + + +/***************************************************************************** + * 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; +} + + + +/***************************************************************************** + * + * Styling of auto hide functionality + * + *****************************************************************************/ + + +/***************************************************************************** + * CAutoHideTab + *****************************************************************************/ +ads--CAutoHideTab { + 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; + min-height: 20px; + padding-bottom: 2px; +} + + + ads--CAutoHideTab:hover { + color: palette(highlight); + } + + + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="0"], + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="2"] { + border-top: 6px solid rgba(0, 0, 0, 48); + } + + + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="1"], + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="3"] { + border-bottom: 6px solid rgba(0, 0, 0, 48); + } + + + + ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="0"], + ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="2"], + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="0"][activeTab="true"], + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="2"][activeTab="true"] { + border-top: 6px solid palette(highlight); + } + + + ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="1"], + ads--CAutoHideTab:hover[iconOnly="false"][sideBarLocation="3"], + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="1"][activeTab="true"], + ads--CAutoHideTab[iconOnly="false"][sideBarLocation="3"][activeTab="true"] { + border-bottom: 6px solid palette(highlight); + } + + + /** + * Auto hide tabs with icon only + */ + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="0"] { + border-top: 6px solid rgba(0, 0, 0, 48); + } + + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="1"] { + border-left: 6px solid rgba(0, 0, 0, 48); + } + + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="2"] { + border-right: 6px solid rgba(0, 0, 0, 48); + } + + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="3"] { + border-bottom: 6px solid rgba(0, 0, 0, 48); + } + + + /** + * Auto hide tabs with icon only hover + */ + ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="0"], + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="0"][activeTab="true"] { + border-top: 6px solid palette(highlight); + } + + ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="1"], + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="1"][activeTab="true"] { + border-left: 6px solid palette(highlight); + } + + ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="2"], + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="2"][activeTab="true"] { + border-right: 6px solid palette(highlight); + } + + ads--CAutoHideTab:hover[iconOnly="true"][sideBarLocation="3"], + ads--CAutoHideTab[iconOnly="true"][sideBarLocation="3"][activeTab="true"] { + border-bottom: 6px solid palette(highlight); + } + + + +/***************************************************************************** + * CAutoHideSideBar + *****************************************************************************/ +ads--CAutoHideSideBar { + background: palette(window); + border: none; + qproperty-spacing: 12; +} + +#sideTabsContainerWidget { + background: transparent; +} + + +ads--CAutoHideSideBar[sideBarLocation="0"] { + border-bottom: 1px solid palette(dark); +} + +ads--CAutoHideSideBar[sideBarLocation="1"] { + border-right: 1px solid palette(dark); +} + +ads--CAutoHideSideBar[sideBarLocation="2"] { + border-left: 1px solid palette(dark); +} + +ads--CAutoHideSideBar[sideBarLocation="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 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[sideBarLocation="0"] ads--CResizeHandle { + border-top: 1px solid palette(dark); +} + +ads--CAutoHideDockContainer[sideBarLocation="1"] ads--CResizeHandle { + border-left: 1px solid palette(dark); +} + +ads--CAutoHideDockContainer[sideBarLocation="2"] ads--CResizeHandle { + border-right: 1px solid palette(dark); +} + +ads--CAutoHideDockContainer[sideBarLocation="3"] ads--CResizeHandle { + border-top: 1px solid palette(dark); +}