diff --git a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css index bd810ecd3e..8e97881ebe 100644 --- a/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css +++ b/src/sql/workbench/contrib/dataExplorer/browser/media/connectionViewletPanel.css @@ -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; +} diff --git a/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css b/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css index c9f73a45c4..be3afec009 100644 --- a/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css +++ b/src/sql/workbench/contrib/objectExplorer/browser/media/serverTreeActions.css @@ -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; } diff --git a/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts b/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts index 036f19f95e..ba38da5209 100644 --- a/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts +++ b/src/sql/workbench/services/objectExplorer/browser/asyncServerTreeRenderer.ts @@ -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'); diff --git a/src/vs/base/browser/ui/tree/media/tree.css b/src/vs/base/browser/ui/tree/media/tree.css index 6d3faee477..29f5337d8d 100644 --- a/src/vs/base/browser/ui/tree/media/tree.css +++ b/src/vs/base/browser/ui/tree/media/tree.css @@ -26,7 +26,7 @@ display: inline-block; box-sizing: border-box; height: 100%; - /* border-left: 1px solid transparent; {{SQL CARBON EDIT}} Remove indent guide from all custom tree views */ + border-left: 1px solid transparent; } .monaco-tl-indent > .indent-guide {