mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-15 10:58:31 -05:00
Merge from vscode 91e99652cd5fcfc072387c64e151b435e39e8dcf (#6962)
This commit is contained in:
Anthony Dresser
@@ -31,51 +31,131 @@
|
||||
<script>
|
||||
require.config({ baseUrl: '/static' });
|
||||
|
||||
switch (location.search) {
|
||||
case '?grid': {
|
||||
require(['vs/base/browser/ui/grid/grid', 'vs/base/common/event'], ({ Grid, Sizing, Direction }, { Event }) => {
|
||||
const buttons = document.getElementById('buttons');
|
||||
const params = location.search.split(/[?&]/);
|
||||
const testGrid = params.findIndex(p => p === 'grid') >= 0;
|
||||
const testDeserialization = params.findIndex(p => p === 'deserialize') >= 0;
|
||||
|
||||
class View {
|
||||
static ID = 0;
|
||||
if (testGrid) {
|
||||
require(['vs/base/browser/ui/grid/grid', 'vs/base/common/event'], ({ Grid, Sizing, Direction, SerializableGrid }, { Event }) => {
|
||||
const buttons = document.getElementById('buttons');
|
||||
|
||||
constructor(label, minimumWidth, maximumWidth, minimumHeight, maximumHeight, snap) {
|
||||
const id = View.ID++;
|
||||
this.label = label;
|
||||
this.minimumWidth = minimumWidth;
|
||||
this.maximumWidth = maximumWidth;
|
||||
this.minimumHeight = minimumHeight;
|
||||
this.maximumHeight = maximumHeight;
|
||||
this.snap = snap;
|
||||
this.onDidChange = Event.None;
|
||||
let grid;
|
||||
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = 'view';
|
||||
this.element.style.backgroundColor = `hsl(${(id * 41) % 360}, 50%, 70%)`;
|
||||
this.element.textContent = this.label;
|
||||
class View {
|
||||
static ID = 0;
|
||||
|
||||
this.button = document.createElement('button');
|
||||
this.button.onclick = () => grid.setViewVisible(this, !grid.isViewVisible(this));
|
||||
buttons.appendChild(this.button);
|
||||
this.setVisible(true);
|
||||
}
|
||||
constructor(label, minimumWidth, maximumWidth, minimumHeight, maximumHeight, snap) {
|
||||
this.id = View.ID++;
|
||||
this.label = label;
|
||||
this.minimumWidth = minimumWidth;
|
||||
this.maximumWidth = maximumWidth;
|
||||
this.minimumHeight = minimumHeight;
|
||||
this.maximumHeight = maximumHeight;
|
||||
this.snap = snap;
|
||||
this.onDidChange = Event.None;
|
||||
|
||||
layout(width, height, orientation) {
|
||||
this.element.style.lineHeight = `${height}px`;
|
||||
}
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = 'view';
|
||||
this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`;
|
||||
this.element.textContent = this.label;
|
||||
|
||||
setVisible(visible) {
|
||||
this.button.textContent = visible ? `hide ${this.label}` : `show ${this.label}`;
|
||||
}
|
||||
this.button = document.createElement('button');
|
||||
this.button.onclick = () => grid.setViewVisible(this, !grid.isViewVisible(this));
|
||||
buttons.appendChild(this.button);
|
||||
this.setVisible(true);
|
||||
}
|
||||
|
||||
const editor = new View('editor', 200, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY);
|
||||
const statusbar = new View('status', 0, Number.POSITIVE_INFINITY, 20, 20);
|
||||
const activitybar = new View('activity', 50, 50, 0, Number.POSITIVE_INFINITY);
|
||||
const sidebar = new View('sidebar', 200, Number.POSITIVE_INFINITY, 0, Number.POSITIVE_INFINITY, true);
|
||||
const panel = new View('panel', 0, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY, true);
|
||||
layout(width, height, orientation) {
|
||||
console.log(`layout@${this.label}`);
|
||||
this.element.style.lineHeight = `${height}px`;
|
||||
}
|
||||
|
||||
const grid = new Grid(editor, {});
|
||||
setVisible(visible) {
|
||||
this.button.textContent = visible ? `hide ${this.label}` : `show ${this.label}`;
|
||||
}
|
||||
}
|
||||
|
||||
const editor = new View('editor', 200, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY);
|
||||
const statusbar = new View('status', 0, Number.POSITIVE_INFINITY, 20, 20);
|
||||
const activitybar = new View('activity', 50, 50, 0, Number.POSITIVE_INFINITY);
|
||||
const sidebar = new View('sidebar', 200, Number.POSITIVE_INFINITY, 0, Number.POSITIVE_INFINITY, true);
|
||||
const panel = new View('panel', 0, Number.POSITIVE_INFINITY, 200, Number.POSITIVE_INFINITY, true);
|
||||
|
||||
if (testDeserialization) {
|
||||
const viewMap = {
|
||||
['activitybar']: activitybar,
|
||||
['editor']: editor,
|
||||
['panel']: panel,
|
||||
['sidebar']: sidebar,
|
||||
['statusbar']: statusbar
|
||||
};
|
||||
|
||||
const gridViewDescriptor = {
|
||||
root: {
|
||||
type: 'branch',
|
||||
size: 800,
|
||||
data: [
|
||||
{
|
||||
type: 'branch',
|
||||
size: 580,
|
||||
data: [
|
||||
{
|
||||
type: 'leaf',
|
||||
size: activitybar.maximumWidth,
|
||||
data: { type: 'activitybar' },
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
type: 'leaf',
|
||||
size: 200,
|
||||
data: { type: 'sidebar' },
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
type: 'branch',
|
||||
size: 550,
|
||||
data: [
|
||||
{
|
||||
type: 'leaf',
|
||||
size: 380,
|
||||
data: { type: 'editor' },
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
type: 'leaf',
|
||||
size: 200,
|
||||
data: { type: 'panel' },
|
||||
visible: true
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'leaf',
|
||||
size: statusbar.maximumHeight,
|
||||
data: { type: "statusbar" },
|
||||
visible: true
|
||||
}
|
||||
]
|
||||
},
|
||||
orientation: 0,
|
||||
width: 800,
|
||||
height: 600
|
||||
};
|
||||
|
||||
|
||||
const fromJSON = ({ type }) => viewMap[type];
|
||||
grid = SerializableGrid.deserialize(
|
||||
gridViewDescriptor,
|
||||
{ fromJSON },
|
||||
{ proportionalLayout: false }
|
||||
);
|
||||
|
||||
container.appendChild(grid.element);
|
||||
grid.layout(800, 600);
|
||||
} else {
|
||||
grid = new Grid(editor, {});
|
||||
const container = document.getElementById('container');
|
||||
container.appendChild(grid.element);
|
||||
grid.layout(800, 600);
|
||||
@@ -84,55 +164,95 @@
|
||||
grid.addView(activitybar, Sizing.Distribute, editor, Direction.Left);
|
||||
grid.addView(sidebar, 250, editor, Direction.Left);
|
||||
grid.addView(panel, 200, editor, Direction.Down);
|
||||
});
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
require(['vs/base/browser/ui/splitview/splitview', 'vs/base/common/event'], ({ SplitView, Sizing }, { Event }) => {
|
||||
const buttons = document.getElementById('buttons');
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
require(['vs/base/browser/ui/splitview/splitview', 'vs/base/common/event'], ({ SplitView, Sizing }, { Event }) => {
|
||||
const buttons = document.getElementById('buttons');
|
||||
|
||||
class View {
|
||||
static ID = 0;
|
||||
let splitview;
|
||||
|
||||
constructor(minimumSize, maximumSize) {
|
||||
this.id = View.ID++;
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = 'view';
|
||||
this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`;
|
||||
this.element.textContent = `${this.id}`;
|
||||
this.minimumSize = typeof minimumSize === 'number' ? minimumSize : 100;
|
||||
this.maximumSize = typeof maximumSize === 'number' ? maximumSize : Number.POSITIVE_INFINITY;
|
||||
this.onDidChange = Event.None;
|
||||
this.snap = !minimumSize && !maximumSize;
|
||||
class View {
|
||||
static ID = 0;
|
||||
|
||||
this.button = document.createElement('button');
|
||||
this.button.onclick = () => splitview.setViewVisible(this.id, !splitview.isViewVisible(this.id));
|
||||
buttons.appendChild(this.button);
|
||||
this.setVisible(true);
|
||||
}
|
||||
constructor(minimumSize, maximumSize) {
|
||||
this.id = View.ID++;
|
||||
this.element = document.createElement('div');
|
||||
this.element.className = 'view';
|
||||
this.element.style.backgroundColor = `hsl(${(this.id * 41) % 360}, 50%, 70%)`;
|
||||
this.element.textContent = `${this.id}`;
|
||||
this.minimumSize = typeof minimumSize === 'number' ? minimumSize : 100;
|
||||
this.maximumSize = typeof maximumSize === 'number' ? maximumSize : Number.POSITIVE_INFINITY;
|
||||
this.onDidChange = Event.None;
|
||||
this.snap = !minimumSize && !maximumSize;
|
||||
|
||||
layout(size, orientation) {
|
||||
this.element.style.lineHeight = `${size}px`;
|
||||
}
|
||||
|
||||
setVisible(visible) {
|
||||
this.button.textContent = visible ? `hide ${this.id}` : `show ${this.id}`;
|
||||
}
|
||||
this.button = document.createElement('button');
|
||||
this.button.onclick = () => splitview.setViewVisible(this.id, !splitview.isViewVisible(this.id));
|
||||
buttons.appendChild(this.button);
|
||||
this.setVisible(true);
|
||||
}
|
||||
|
||||
const container = document.getElementById('container');
|
||||
const splitview = new SplitView(container, {});
|
||||
layout(size, orientation) {
|
||||
this.element.style.lineHeight = `${size}px`;
|
||||
}
|
||||
|
||||
setVisible(visible) {
|
||||
this.button.textContent = visible ? `hide ${this.id}` : `show ${this.id}`;
|
||||
}
|
||||
}
|
||||
|
||||
const container = document.getElementById('container');
|
||||
|
||||
const views = [new View(100, 100), new View(), new View(), new View(), new View()];
|
||||
|
||||
if (testDeserialization) {
|
||||
const splitViewDescriptor = {
|
||||
views: [
|
||||
{
|
||||
view: views[0],
|
||||
size: 100,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
view: views[1],
|
||||
size: 100,
|
||||
visible: false
|
||||
},
|
||||
{
|
||||
view: views[2],
|
||||
size: 100,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
view: views[3],
|
||||
size: 200,
|
||||
visible: true
|
||||
},
|
||||
{
|
||||
view: views[4],
|
||||
size: 200,
|
||||
visible: true
|
||||
}
|
||||
]
|
||||
};
|
||||
|
||||
splitview = new SplitView(container, { descriptor: splitViewDescriptor, orientation: 0 });
|
||||
splitview.layout(600);
|
||||
} else {
|
||||
// Create a new split view from scratch
|
||||
splitview = new SplitView(container, {});
|
||||
splitview.layout(600);
|
||||
|
||||
splitview.addView(new View(100, 100), Sizing.Distribute);
|
||||
splitview.addView(new View(), Sizing.Distribute);
|
||||
splitview.addView(new View(), Sizing.Distribute);
|
||||
splitview.addView(new View(), Sizing.Distribute);
|
||||
splitview.addView(new View(), Sizing.Distribute);
|
||||
});
|
||||
}
|
||||
splitview.addView(views[0], Sizing.Distribute);
|
||||
splitview.addView(views[1], Sizing.Distribute);
|
||||
splitview.addView(views[2], Sizing.Distribute);
|
||||
splitview.addView(views[3], Sizing.Distribute);
|
||||
splitview.addView(views[4], Sizing.Distribute);
|
||||
}
|
||||
});
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user