ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 10:58:30 -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; left: -35px;
} }
.monaco-list .connection-tile > .icon.server-page::after { .monaco-list .connection-tile .connection-status-badge {
position: absolute; width: 0.35em;
height: 0.25rem; height: 0.35em;
width: 0.25rem; -webkit-border-radius: 50%;
top: 14px; -moz-border-radius: 50%;
left: 45px; border-radius: 50%;
border-radius: 100%; margin-left: 13px;
content:""; margin-top: 10px;
font-size: 100%;
line-height: 100%;
color:white;
text-align:center;
vertical-align:middle;
} }
/* Connected badge */ /* 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%); border: 0.12rem solid rgba(59, 180, 74, 100%);
background: rgba(59, 180, 74, 100%); background: rgba(59, 180, 74, 100%);
} }
/* Disconnected badge */ /* 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%); border: 0.12rem solid rgba(208, 46, 0, 100%);
background: rgba(255, 255, 255, 80%); 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 _root: HTMLElement;
private _icon: HTMLElement; private _icon: HTMLElement;
private _connectionStatusBadge: HTMLElement;
private _label: HTMLElement; private _label: HTMLElement;
/** /**
* _isCompact is used to render connections tiles with and without the action buttons. * _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'); container.parentElement.classList.add('connection-profile');
this._root = dom.append(container, dom.$('.connection-tile')); this._root = dom.append(container, dom.$('.connection-tile'));
this._icon = dom.append(this._root, dom.$('div.icon server-page')); 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')); this._label = dom.append(this._root, dom.$('div.label'));
} }
@@ -98,13 +100,13 @@ class ConnectionProfileTemplate extends Disposable {
if (!this._isCompact) { if (!this._isCompact) {
let iconPath: IconPath = getIconPath(element, this._connectionManagementService); let iconPath: IconPath = getIconPath(element, this._connectionManagementService);
if (this._connectionManagementService.isConnected(undefined, element)) { if (this._connectionManagementService.isConnected(undefined, element)) {
this._icon.classList.remove('disconnected'); this._connectionStatusBadge.classList.remove('disconnected');
this._icon.classList.add('connected'); this._connectionStatusBadge.classList.add('connected');
renderServerIcon(this._icon, iconPath, true); renderServerIcon(this._icon, iconPath);
} else { } else {
this._icon.classList.remove('connected'); this._connectionStatusBadge.classList.remove('connected');
this._icon.classList.add('disconnected'); this._connectionStatusBadge.classList.add('disconnected');
renderServerIcon(this._icon, iconPath, false); renderServerIcon(this._icon, iconPath);
} }
} }
@@ -283,7 +285,7 @@ function getIconPath(connection: ConnectionProfile, connectionManagementService:
return iconPath; return iconPath;
} }
function renderServerIcon(element: HTMLElement, iconPath: IconPath, isConnected: boolean): void { function renderServerIcon(element: HTMLElement, iconPath: IconPath): void {
if (!element) { return; } if (!element) { return; }
if (iconPath) { if (iconPath) {
iconRenderer.putIcon(element, iconPath); iconRenderer.putIcon(element, iconPath);