ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-16 18:46:40 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fixing async tree styling (#22458)

Browse Source
This commit is contained in:
Aasim Khan
2023-03-27 13:16:23 -07:00
committed by GitHub
parent 115062c0fc
commit e80c6f2dcb
2 changed files with 95 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -137,15 +137,31 @@
.monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page, .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page, .hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page, .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page { .hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
background: url('default_server.svg') center center no-repeat; .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.hc-light .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page,
.hc-light .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page {
background-image: url('default_server.svg');
background-position: center center;
background-repeat: no-repeat;
background-size: 16px 16px;
}
.monaco-list:focus .monaco-list-rows > .monaco-list-row.selected .connection-profile-container > .icon.server-page,
.hc-light .monaco-list:focus .monaco-list-rows > .monaco-list-row.selected .connection-profile-container > .icon.server-page {
background-image: url('default_server_inverse.svg');
} }
.vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page, .vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page, .hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-tile > .icon.server-page,
.vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page, .vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page { .hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-tile > .icon.server-page,
background: url('default_server_inverse.svg') center center no-repeat; .vs-dark .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.hc-black .monaco-tree .monaco-tree-rows > .monaco-tree-row > .content > .connection-profile-container > .icon.server-page,
.vs-dark .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page,
.hc-black .monaco-list .monaco-list-rows > .monaco-list-row .connection-profile-container > .icon.server-page {
background-image: url('default_server_inverse.svg');
} }
/* loading for OE node */ /* loading for OE node */
@@ -170,13 +186,15 @@
} }
/* Connected badge */ /* Connected badge */
.monaco-list .connection-tile .connection-status-badge.connected { .monaco-list .connection-tile .connection-status-badge.connected,
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge.connected {
border: 2.4px solid rgba(59, 180, 74, 100%); border: 2.4px 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 .connection-status-badge.disconnected { .monaco-list .connection-tile .connection-status-badge.disconnected,
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge.disconnected {
border: 2.4px solid rgba(208, 46, 0, 100%); border: 2.4px solid rgba(208, 46, 0, 100%);
background: rgba(255, 255, 255, 80%); background: rgba(255, 255, 255, 80%);
} }
@@ -185,3 +203,67 @@
.server-explorer-viewlet .button-section { .server-explorer-viewlet .button-section {
padding: 20px; padding: 20px;
} }
/*async tree styles */
.monaco-list-row .async-server-group .async-server-group {
display: flex;
align-items: center;
}
.monaco-list-row .async-server-group .async-server-group .async-server-group-container {
flex: 1;
margin-right: 5px;
display: flex;
height: 100px;
align-items: center;
justify-content: center;
border-radius: 5px;
}
.monaco-list-row .async-server-group .async-server-group .async-server-group-container .name {
padding-left: 10px;
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
height: 25px;
line-height: 25px;
}
.monaco-list-row .object-element-container {
display: flex;
}
.monaco-list-row .object-element-container .label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.monaco-list-row .object-element-container .icon {
flex: 0 30px;
}
.monaco-list-row .connection-profile .connection-profile-container {
display: flex;
}
.monaco-list-row .connection-profile .connection-profile-container .label {
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
}
.monaco-list-row .connection-profile .connection-profile-container .icon {
flex: 0 30px;
position: relative;
}
.monaco-list-row .connection-profile .connection-profile-container .icon .connection-status-badge {
position: absolute;
bottom: 0;
right: 3px;
width: 4px;
height: 4px;
border-radius: 50%;
}

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

@@ -39,9 +39,9 @@ class ConnectionProfileGroupTemplate extends Disposable {
private _option: ConnectionProfileGroupDisplayOptions private _option: ConnectionProfileGroupDisplayOptions
) { ) {
super(); super();
container.parentElement!.classList.add('server-group'); container.parentElement!.classList.add('async-server-group');
container.classList.add('server-group'); container.classList.add('async-server-group');
this._root = dom.append(container, dom.$('.server-group')); this._root = dom.append(container, dom.$('.async-server-group-container'));
this._nameContainer = dom.append(this._root, dom.$('span.name')); this._nameContainer = dom.append(this._root, dom.$('span.name'));
} }
@@ -50,10 +50,10 @@ class ConnectionProfileGroupTemplate extends Disposable {
if (this._option.showColor && rowElement) { if (this._option.showColor && rowElement) {
rowElement.style.color = element.textColor; rowElement.style.color = element.textColor;
if (element.color) { if (element.color) {
rowElement.style.background = element.color; this._nameContainer.style.background = element.color;
} else { } else {
// If the group doesn't contain specific color, assign the default color // If the group doesn't contain specific color, assign the default color
rowElement.style.background = DefaultServerGroupColor; this._nameContainer.style.background = DefaultServerGroupColor;
} }
} }
if (element.description && (element.description !== '')) { if (element.description && (element.description !== '')) {
@@ -100,7 +100,7 @@ class ConnectionProfileTemplate extends Disposable {
) { ) {
super(); super();
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-profile-container'));
this._icon = dom.append(this._root, dom.$('div.icon')); this._icon = dom.append(this._root, dom.$('div.icon'));
this._connectionStatusBadge = dom.append(this._icon, dom.$('div.connection-status-badge')); 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'));
@@ -153,7 +153,7 @@ class TreeNodeTemplate extends Disposable {
container: HTMLElement container: HTMLElement
) { ) {
super(); super();
this._root = dom.append(container, dom.$('.object-element-group')); this._root = dom.append(container, dom.$('.object-element-container'));
this._icon = dom.append(this._root, dom.$('div.object-icon')); this._icon = dom.append(this._root, dom.$('div.object-icon'));
this._label = dom.append(this._root, dom.$('div.label')); this._label = dom.append(this._root, dom.$('div.label'));
} }