ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-21 17:22:55 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixing server group styling (#23144)

Browse Source 
* Fixing server group styling

* Hiding border when the tree item are selected focused or hovered

* Fixing styles and re-enabling guides

* removing unused import

* Fixing indicator width
This commit is contained in:
Aasim Khan
2023-05-22 09:53:47 -07:00
committed by GitHub
parent b77ba86a99
commit 3bec68b860
4 changed files with 36 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css
View File

@@ -210,9 +210,9 @@
}
.monaco-list-row .async-server-group .async-server-group .async-server-group-container .icon {
width: 7px;
width: 5px;
height: 20px;
border-radius: 3px;
border-radius: 2.5px;
}
.monaco-list-row .async-server-group .async-server-group .async-server-group-container .name {
@@ -222,6 +222,7 @@
text-overflow: ellipsis;
height: 25px;
line-height: 25px;
font-weight: 500;
}
.monaco-list-row .object-element-container {
@@ -253,6 +254,13 @@
position: relative;
}
.monaco-list-row .connection-profile .connection-profile-container .server-group-color {
width: 5px;
height: 18px;
border-radius: 2.5px;
margin-top: 2.5px;
}
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge {
position: absolute;
bottom: 0;
@@ -286,3 +294,14 @@
display: block;
}
.server-explorer-viewlet .monaco-list .async-server-group-container {
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
}
.server-explorer-viewlet .monaco-list:focus .monaco-list-row.selected .async-server-group-container {
border-top-width: 0px;
border-bottom-width: 0px;
}

4
src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css
View File

@@ -11,7 +11,7 @@
.monaco-workbench.vs-dark .actions-container .action-label.add-server-action,
.monaco-workbench.hc-black .actions-container .action-label.add-server-action,
.monaco-list:focus .monaco-list-rows .actions-container .action-label.add-server-action {
.monaco-list:focus .monaco-list-rows .monaco-list-row.selected .actions-container .action-label.add-server-action {
background-image: url('add_server_inverse.svg') !important;
}
@@ -52,7 +52,7 @@
.monaco-workbench.vs-dark .actions-container .action-label.remove-filter-action,
.monaco-workbench.hc-black .actions-container .action-label.remove-filter-action,
.monaco-list:focus .monaco-list-rows .actions-container .action-label.remove-filter-action {
.monaco-list:focus .monaco-list-rows .monaco-list-row.selected .actions-container .action-label.remove-filter-action {
background-image: url('remove_filter_inverse.svg') !important;
}

12
src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts
View File

@@ -105,6 +105,7 @@ class ConnectionProfileTemplate extends Disposable {
private _labelContainer: HTMLElement;
private _label: ResourceLabel;
private _actionBar: ActionBar;
private _serverGroupColorContainer: HTMLElement;
/**
* _isCompact is used to render connections tiles with and without the action buttons.
@@ -121,6 +122,7 @@ class ConnectionProfileTemplate extends Disposable {
super();
container.parentElement!.classList.add('connection-profile');
this._root = dom.append(container, dom.$('.connection-profile-container'));
this._serverGroupColorContainer = dom.append(this._root, dom.$('.server-group-color'));
this._icon = dom.append(this._root, dom.$('div.icon'));
this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge'));
this._labelContainer = dom.append(this._root, dom.$('div.label'));
@@ -131,6 +133,16 @@ class ConnectionProfileTemplate extends Disposable {
}
set(element: ConnectionProfile, filterData: FuzzyScore) {
const colorGroup = element.parent;
if (colorGroup.isRoot) {
this._serverGroupColorContainer.style.display = 'none';
} else {
this._serverGroupColorContainer.style.display = 'block';
const backgroundColor = colorGroup.color ?? DefaultServerGroupColor;
this._serverGroupColorContainer.style.background = backgroundColor;
}
if (!this._isCompact) {
if (this._connectionManagementService.isConnected(undefined, element)) {
this._connectionStatusBadge.classList.remove('disconnected');