ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-24 01:25:37 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix connection status badge display (#11933)

Browse Source
This commit is contained in:
Charles Gagnon
2020-08-25 08:45:42 -07:00
committed by GitHub
parent 8e74ce1881
commit 7b54abbc96
2 changed files with 19 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -139,29 +139,24 @@
left: -35px;
}
.monaco-list .connection-tile > .icon.server-page::after {
position: absolute;
height: 0.25rem;
width: 0.25rem;
top: 14px;
left: 45px;
border-radius: 100%;
content:"";
font-size: 100%;
line-height: 100%;
color:white;
text-align:center;
vertical-align:middle;
.monaco-list .connection-tile .connection-status-badge {
width: 0.35em;
height: 0.35em;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
margin-left: 13px;
margin-top: 10px;
}
/* Connected badge */
.monaco-list .connection-tile > .icon.server-page.connected::after {
.monaco-list .connection-tile .connection-status-badge.connected {
border: 0.12rem solid rgba(59, 180, 74, 100%);
background: rgba(59, 180, 74, 100%);
}
/* Disconnected badge */
.monaco-list .connection-tile > .icon.server-page.disconnected::after {
.monaco-list .connection-tile .connection-status-badge.disconnected {
border: 0.12rem solid rgba(208, 46, 0, 100%);
background: rgba(255, 255, 255, 80%);
}

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

@@ -76,6 +76,7 @@ class ConnectionProfileTemplate extends Disposable {
private _root: HTMLElement;
private _icon: HTMLElement;
private _connectionStatusBadge: HTMLElement;
private _label: HTMLElement;
/**
* _isCompact is used to render connections tiles with and without the action buttons.
@@ -91,6 +92,7 @@ class ConnectionProfileTemplate extends Disposable {
container.parentElement.classList.add('connection-profile');
this._root = dom.append(container, dom.$('.connection-tile'));
this._icon = dom.append(this._root, dom.$('div.icon server-page'));
this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge'));
this._label = dom.append(this._root, dom.$('div.label'));
}
@@ -98,13 +100,13 @@ class ConnectionProfileTemplate extends Disposable {
if (!this._isCompact) {
let iconPath: IconPath = getIconPath(element, this._connectionManagementService);
if (this._connectionManagementService.isConnected(undefined, element)) {
this._icon.classList.remove('disconnected');
this._icon.classList.add('connected');
renderServerIcon(this._icon, iconPath, true);
this._connectionStatusBadge.classList.remove('disconnected');
this._connectionStatusBadge.classList.add('connected');
renderServerIcon(this._icon, iconPath);
} else {
this._icon.classList.remove('connected');
this._icon.classList.add('disconnected');
renderServerIcon(this._icon, iconPath, false);
this._connectionStatusBadge.classList.remove('connected');
this._connectionStatusBadge.classList.add('disconnected');
renderServerIcon(this._icon, iconPath);
}
}
@@ -283,7 +285,7 @@ function getIconPath(connection: ConnectionProfile, connectionManagementService:
return iconPath;
}
function renderServerIcon(element: HTMLElement, iconPath: IconPath, isConnected: boolean): void {
function renderServerIcon(element: HTMLElement, iconPath: IconPath): void {
if (!element) { return; }
if (iconPath) {
iconRenderer.putIcon(element, iconPath);