mirror of
https://github.com/githubuser0xFFFF/Qt-Advanced-Docking-System.git
synced 2024-11-15 13:15:43 +08:00
Added feature to apply a Visual Studio like light theme via ToolBar
This commit is contained in:
Uwe Kindler
parent
a79abbdb48
commit
1bf698478d
@ -561,6 +561,11 @@ void MainWindowPrivate::createActions()
|
||||
a = ui.menuTests->addAction("Toggle Label 0 Window Title");
|
||||
_this->connect(a, SIGNAL(triggered()), SLOT(toggleDockWidgetWindowTitle()));
|
||||
ui.menuTests->addSeparator();
|
||||
|
||||
a = ui.toolBar->addAction("Apply VS Style");
|
||||
a->setToolTip("Applies a Visual Studio light style (visual_studio_light.css)." );
|
||||
a->setIcon(svgIcon(":/adsdemo/images/color_lens.svg"));
|
||||
QObject::connect(a, &QAction::triggered, _this, &CMainWindow::applyVsStyle);
|
||||
}
|
||||
|
||||
|
||||
@ -864,3 +869,15 @@ void CMainWindow::toggleDockWidgetWindowTitle()
|
||||
d->WindowTitleTestDockWidget->setWindowTitle(Title);
|
||||
}
|
||||
|
||||
|
||||
//============================================================================
|
||||
void CMainWindow::applyVsStyle()
|
||||
{
|
||||
QFile StyleSheetFile(":adsdemo/res/visual_studio_light.css");
|
||||
StyleSheetFile.open(QIODevice::ReadOnly);
|
||||
QTextStream StyleSheetStream(&StyleSheetFile);
|
||||
auto Stylesheet = StyleSheetStream.readAll();
|
||||
StyleSheetFile.close();
|
||||
d->DockManager->setStyleSheet(Stylesheet);
|
||||
}
|
||||
|
||||
|
||||
@ -65,6 +65,7 @@ private slots:
|
||||
void onEditorCloseRequested();
|
||||
void showStatusDialog();
|
||||
void toggleDockWidgetWindowTitle();
|
||||
void applyVsStyle();
|
||||
};
|
||||
|
||||
#endif // MAINWINDOW_H
|
||||
|
||||
@ -17,5 +17,7 @@
|
||||
<file>images/create_floating_editor.svg</file>
|
||||
<file>images/create_floating_table.svg</file>
|
||||
<file>images/docked_editor.svg</file>
|
||||
<file>res/visual_studio_light.css</file>
|
||||
<file>images/color_lens.svg</file>
|
||||
</qresource>
|
||||
</RCC>
|
||||
|
||||
6
demo/images/color_lens.svg
Normal file
6
demo/images/color_lens.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0,0,1024,1024">
|
||||
<desc>color_lens icon - Licensed under Apache License v2.0 (http://www.apache.org/licenses/LICENSE-2.0) - Created with Iconfu.com - Derivative work of Material icons (Copyright Google Inc.)</desc>
|
||||
<g fill="#03b8e5" fill-rule="nonzero" style="mix-blend-mode: normal">
|
||||
<path d="M896,469.33c0,117.76 -95.57,213.34 -213.33,213.34h-75.52c-35.41,0 -64,28.59 -64,64c0,16.21 6.4,31.15 16.21,42.24c10.24,11.52 16.64,26.45 16.64,43.09c0,35.41 -28.59,64 -64,64c-212.05,0 -384,-171.95 -384,-384c0,-212.05 171.95,-384 384,-384c212.05,0 384,152.74 384,341.33zM341.33,448c0,-35.41 -28.59,-64 -64,-64c-35.41,0 -64,28.59 -64,64c0,35.41 28.59,64 64,64c35.41,0 64,-28.59 64,-64zM469.33,277.33c0,-35.41 -28.59,-64 -64,-64c-35.41,0 -64,28.59 -64,64c0,35.41 28.59,64 64,64c35.41,0 64,-28.59 64,-64zM682.67,277.33c0,-35.41 -28.59,-64 -64,-64c-35.41,0 -64,28.59 -64,64c0,35.41 28.59,64 64,64c35.41,0 64,-28.59 64,-64zM810.67,448c0,-35.41 -28.59,-64 -64,-64c-35.41,0 -64,28.59 -64,64c0,35.41 28.59,64 64,64c35.41,0 64,-28.59 64,-64z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
379
demo/res/visual_studio_light.css
Normal file
379
demo/res/visual_studio_light.css
Normal file
@ -0,0 +1,379 @@
|
||||
|
||||
/*
|
||||
* Visual Studio like light theme
|
||||
*/
|
||||
|
||||
/*****************************************************************************
|
||||
* CDockManager
|
||||
*****************************************************************************/
|
||||
ads--CDockManager
|
||||
{
|
||||
background: palette(window);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* CDockContainerWidget
|
||||
*****************************************************************************/
|
||||
ads--CDockContainerWidget {
|
||||
background: palette(window);
|
||||
padding: 2px;
|
||||
}
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* CDockAreaWidget
|
||||
*****************************************************************************/
|
||||
ads--CDockAreaWidget {
|
||||
background: palette(window);
|
||||
/*border: 1px solid palette(dark);*/
|
||||
}
|
||||
|
||||
|
||||
ads--CDockAreaTitleBar {
|
||||
background: transparent;
|
||||
border-bottom: 2px solid rgb(204, 204, 204);
|
||||
padding-bottom: 0px;
|
||||
}
|
||||
|
||||
|
||||
ads--CTitleBarButton {
|
||||
padding: 0px 0px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
}
|
||||
|
||||
ads--CTitleBarButton:hover {
|
||||
background: rgba(0, 0, 0, 24);
|
||||
}
|
||||
|
||||
ads--CTitleBarButton:pressed {
|
||||
background: rgba(0, 0, 0, 48);
|
||||
}
|
||||
|
||||
QScrollArea#dockWidgetScrollArea {
|
||||
padding: 0px;
|
||||
border: none;
|
||||
}
|
||||
|
||||
#tabsMenuButton::menu-indicator {
|
||||
image: 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;
|
||||
}
|
||||
|
||||
|
||||
ads--CDockAreaWidget[focused="true"] ads--CDockAreaTitleBar {
|
||||
border-bottom: 2px solid palette(highlight);
|
||||
}
|
||||
|
||||
|
||||
/*****************************************************************************
|
||||
* CDockWidgetTab
|
||||
*****************************************************************************/
|
||||
ads--CDockWidgetTab {
|
||||
background: palette(window);
|
||||
border: none;
|
||||
padding: 0 0px;
|
||||
qproperty-iconSize: 16px 16px;/* this is optional in case you would like to change icon size*/
|
||||
}
|
||||
|
||||
ads--CDockWidgetTab[activeTab="true"] {
|
||||
background: rgb(204, 204, 204);
|
||||
}
|
||||
|
||||
ads--CDockWidgetTab QLabel {
|
||||
color: palette(foreground);
|
||||
}
|
||||
|
||||
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: 1px solid rgb(204, 204, 204);
|
||||
border-top: 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 #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[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);
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user