diff --git a/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts b/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts index 3f04a800e..2d82095ab 100644 --- a/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts +++ b/packages/dockview-core/src/__tests__/dnd/droptarget.spec.ts @@ -53,7 +53,7 @@ describe('droptarget', () => { fireEvent.dragOver(element); const target = element.querySelector( - '.drop-target-dropzone' + '.dv-drop-target-dropzone' ) as HTMLElement; fireEvent.drop(target); expect(position).toBe('center'); @@ -61,7 +61,7 @@ describe('droptarget', () => { const event = new Event('dragover'); (event as any)['__dockview_droptarget_event_is_used__'] = true; fireEvent(element, event); - expect(element.querySelector('.drop-target-dropzone')).toBeNull(); + expect(element.querySelector('.dv-drop-target-dropzone')).toBeNull(); }); test('directionToPosition', () => { @@ -102,7 +102,7 @@ describe('droptarget', () => { fireEvent.dragOver(element); const target = element.querySelector( - '.drop-target-dropzone' + '.dv-drop-target-dropzone' ) as HTMLElement; fireEvent.drop(target); expect(position).toBe('center'); @@ -124,7 +124,7 @@ describe('droptarget', () => { fireEvent.dragOver(element); const target = element.querySelector( - '.drop-target-dropzone' + '.dv-drop-target-dropzone' ) as HTMLElement; jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100); @@ -155,12 +155,12 @@ describe('droptarget', () => { fireEvent.dragOver(element); let viewQuery = element.querySelectorAll( - '.drop-target > .drop-target-dropzone > .drop-target-selection' + '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection' ); expect(viewQuery.length).toBe(1); const target = element.querySelector( - '.drop-target-dropzone' + '.dv-drop-target-dropzone' ) as HTMLElement; jest.spyOn(target, 'clientHeight', 'get').mockImplementation(() => 100); @@ -187,13 +187,13 @@ describe('droptarget', () => { } viewQuery = element.querySelectorAll( - '.drop-target > .drop-target-dropzone > .drop-target-selection' + '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection' ); expect(viewQuery.length).toBe(1); expect(droptarget.state).toBe('left'); check( element - .getElementsByClassName('drop-target-selection') + .getElementsByClassName('dv-drop-target-selection') .item(0) as HTMLDivElement, { top: '0px', @@ -209,13 +209,13 @@ describe('droptarget', () => { ); viewQuery = element.querySelectorAll( - '.drop-target > .drop-target-dropzone > .drop-target-selection' + '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection' ); expect(viewQuery.length).toBe(1); expect(droptarget.state).toBe('top'); check( element - .getElementsByClassName('drop-target-selection') + .getElementsByClassName('dv-drop-target-selection') .item(0) as HTMLDivElement, { top: '0px', @@ -231,13 +231,13 @@ describe('droptarget', () => { ); viewQuery = element.querySelectorAll( - '.drop-target > .drop-target-dropzone > .drop-target-selection' + '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection' ); expect(viewQuery.length).toBe(1); expect(droptarget.state).toBe('bottom'); check( element - .getElementsByClassName('drop-target-selection') + .getElementsByClassName('dv-drop-target-selection') .item(0) as HTMLDivElement, { top: '50%', @@ -253,13 +253,13 @@ describe('droptarget', () => { ); viewQuery = element.querySelectorAll( - '.drop-target > .drop-target-dropzone > .drop-target-selection' + '.dv-drop-target > .dv-drop-target-dropzone > .dv-drop-target-selection' ); expect(viewQuery.length).toBe(1); expect(droptarget.state).toBe('right'); check( element - .getElementsByClassName('drop-target-selection') + .getElementsByClassName('dv-drop-target-selection') .item(0) as HTMLDivElement, { top: '0px', @@ -276,14 +276,14 @@ describe('droptarget', () => { expect( ( element - .getElementsByClassName('drop-target-selection') + .getElementsByClassName('dv-drop-target-selection') .item(0) as HTMLDivElement ).style.transform ).toBe(''); fireEvent.dragLeave(target); expect(droptarget.state).toBe('center'); - viewQuery = element.querySelectorAll('.drop-target'); + viewQuery = element.querySelectorAll('.dv-drop-target'); expect(viewQuery.length).toBe(0); }); diff --git a/packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts index bd45df9f1..cb246b598 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/tab.spec.ts @@ -20,7 +20,7 @@ describe('tab', () => { new groupMock() ); - expect(cut.element.className).toBe('tab inactive-tab'); + expect(cut.element.className).toBe('dv-tab dv-inactive-tab'); }); test('that active tab has active-tab class', () => { @@ -34,10 +34,10 @@ describe('tab', () => { ); cut.setActive(true); - expect(cut.element.className).toBe('tab active-tab'); + expect(cut.element.className).toBe('dv-tab dv-active-tab'); cut.setActive(false); - expect(cut.element.className).toBe('tab inactive-tab'); + expect(cut.element.className).toBe('dv-tab dv-inactive-tab'); }); test('that an external event does not render a drop target and calls through to the group model', () => { @@ -85,7 +85,7 @@ describe('tab', () => { expect(groupView.canDisplayOverlay).toBeCalled(); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -139,7 +139,7 @@ describe('tab', () => { expect(groupView.canDisplayOverlay).toBeCalledTimes(0); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -193,7 +193,7 @@ describe('tab', () => { expect(groupView.canDisplayOverlay).toBeCalledTimes(0); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(1); }); @@ -253,7 +253,7 @@ describe('tab', () => { expect(groupView.canDisplayOverlay).toBeCalledTimes(1); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -313,7 +313,7 @@ describe('tab', () => { expect(groupView.canDisplayOverlay).toBeCalledTimes(1); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); }); diff --git a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts index 7681e70ee..b6e4fa861 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/titlebar/tabsContainer.spec.ts @@ -40,7 +40,7 @@ describe('tabsContainer', () => { const cut = new TabsContainer(accessor, groupPanel); const emptySpace = cut.element - .getElementsByClassName('void-container') + .getElementsByClassName('dv-void-container') .item(0); if (!emptySpace!) { @@ -60,7 +60,7 @@ describe('tabsContainer', () => { expect(groupView.canDisplayOverlay).toHaveBeenCalled(); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -95,7 +95,7 @@ describe('tabsContainer', () => { const cut = new TabsContainer(accessor, groupPanel); const emptySpace = cut.element - .getElementsByClassName('void-container') + .getElementsByClassName('dv-void-container') .item(0); if (!emptySpace!) { @@ -126,7 +126,7 @@ describe('tabsContainer', () => { expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(1); }); @@ -164,7 +164,7 @@ describe('tabsContainer', () => { cut.openPanel(new TestPanel('panel2', jest.fn() as any)); const emptySpace = cut.element - .getElementsByClassName('void-container') + .getElementsByClassName('dv-void-container') .item(0); if (!emptySpace!) { @@ -189,7 +189,7 @@ describe('tabsContainer', () => { expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(1); }); @@ -227,7 +227,7 @@ describe('tabsContainer', () => { cut.openPanel(new TestPanel('panel2', jest.fn() as any)); const emptySpace = cut.element - .getElementsByClassName('void-container') + .getElementsByClassName('dv-void-container') .item(0); if (!emptySpace!) { @@ -252,7 +252,7 @@ describe('tabsContainer', () => { expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(0); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(1); }); @@ -289,7 +289,7 @@ describe('tabsContainer', () => { cut.openPanel(new TestPanel('panel2', jest.fn() as any)); const emptySpace = cut.element - .getElementsByClassName('void-container') + .getElementsByClassName('dv-void-container') .item(0); if (!emptySpace!) { @@ -320,7 +320,7 @@ describe('tabsContainer', () => { expect(groupView.canDisplayOverlay).toHaveBeenCalledTimes(1); expect( - cut.element.getElementsByClassName('drop-target-dropzone').length + cut.element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -341,7 +341,7 @@ describe('tabsContainer', () => { const cut = new TabsContainer(accessor, groupPanel); let query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .left-actions-container' + '.dv-tabs-and-actions-container > .dv-left-actions-container' ); expect(query.length).toBe(1); @@ -354,7 +354,7 @@ describe('tabsContainer', () => { cut.setLeftActionsElement(left); query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .left-actions-container' + '.dv-tabs-and-actions-container > .dv-left-actions-container' ); expect(query.length).toBe(1); expect(query[0].children.item(0)?.className).toBe( @@ -369,7 +369,7 @@ describe('tabsContainer', () => { cut.setLeftActionsElement(left2); query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .left-actions-container' + '.dv-tabs-and-actions-container > .dv-left-actions-container' ); expect(query.length).toBe(1); expect(query[0].children.item(0)?.className).toBe( @@ -381,7 +381,7 @@ describe('tabsContainer', () => { cut.setLeftActionsElement(undefined); query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .left-actions-container' + '.dv-tabs-and-actions-container > .dv-left-actions-container' ); expect(query.length).toBe(1); @@ -405,7 +405,7 @@ describe('tabsContainer', () => { const cut = new TabsContainer(accessor, groupPanel); let query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .right-actions-container' + '.dv-tabs-and-actions-container > .dv-right-actions-container' ); expect(query.length).toBe(1); @@ -418,7 +418,7 @@ describe('tabsContainer', () => { cut.setRightActionsElement(right); query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .right-actions-container' + '.dv-tabs-and-actions-container > .dv-right-actions-container' ); expect(query.length).toBe(1); expect(query[0].children.item(0)?.className).toBe( @@ -433,7 +433,7 @@ describe('tabsContainer', () => { cut.setRightActionsElement(right2); query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .right-actions-container' + '.dv-tabs-and-actions-container > .dv-right-actions-container' ); expect(query.length).toBe(1); expect(query[0].children.item(0)?.className).toBe( @@ -445,7 +445,7 @@ describe('tabsContainer', () => { cut.setRightActionsElement(undefined); query = cut.element.querySelectorAll( - '.tabs-and-actions-container > .right-actions-container' + '.dv-tabs-and-actions-container > .dv-right-actions-container' ); expect(query.length).toBe(1); @@ -472,7 +472,7 @@ describe('tabsContainer', () => { const cut = new TabsContainer(accessor, groupPanel); - const container = cut.element.querySelector('.void-container')!; + const container = cut.element.querySelector('.dv-void-container')!; expect(container).toBeTruthy(); jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation( @@ -528,7 +528,7 @@ describe('tabsContainer', () => { const cut = new TabsContainer(accessor, groupPanel); - const container = cut.element.querySelector('.void-container')!; + const container = cut.element.querySelector('.dv-void-container')!; expect(container).toBeTruthy(); jest.spyOn(cut.element, 'getBoundingClientRect').mockImplementation( @@ -596,7 +596,7 @@ describe('tabsContainer', () => { const panel = createPanel('test_id'); cut.openPanel(panel); - const el = cut.element.querySelector('.tab')!; + const el = cut.element.querySelector('.dv-tab')!; expect(el).toBeTruthy(); const event = new KeyboardEvent('pointerdown', { shiftKey: true }); @@ -655,14 +655,14 @@ describe('tabsContainer', () => { const panel = new panelMock('test_id'); cut.openPanel(panel); - let result = cut.element.querySelector('.pre-actions-container'); + let result = cut.element.querySelector('.dv-pre-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(0); const actions = document.createElement('div'); cut.setPrefixActionsElement(actions); - result = cut.element.querySelector('.pre-actions-container'); + result = cut.element.querySelector('.dv-pre-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.item(0)).toBe(actions); @@ -670,14 +670,14 @@ describe('tabsContainer', () => { const updatedActions = document.createElement('div'); cut.setPrefixActionsElement(updatedActions); - result = cut.element.querySelector('.pre-actions-container'); + result = cut.element.querySelector('.dv-pre-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.item(0)).toBe(updatedActions); cut.setPrefixActionsElement(undefined); - result = cut.element.querySelector('.pre-actions-container'); + result = cut.element.querySelector('.dv-pre-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(0); }); @@ -722,14 +722,14 @@ describe('tabsContainer', () => { const panel = new panelMock('test_id'); cut.openPanel(panel); - let result = cut.element.querySelector('.left-actions-container'); + let result = cut.element.querySelector('.dv-left-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(0); const actions = document.createElement('div'); cut.setLeftActionsElement(actions); - result = cut.element.querySelector('.left-actions-container'); + result = cut.element.querySelector('.dv-left-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.item(0)).toBe(actions); @@ -737,14 +737,14 @@ describe('tabsContainer', () => { const updatedActions = document.createElement('div'); cut.setLeftActionsElement(updatedActions); - result = cut.element.querySelector('.left-actions-container'); + result = cut.element.querySelector('.dv-left-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.item(0)).toBe(updatedActions); cut.setLeftActionsElement(undefined); - result = cut.element.querySelector('.left-actions-container'); + result = cut.element.querySelector('.dv-left-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(0); }); @@ -789,14 +789,14 @@ describe('tabsContainer', () => { const panel = new panelMock('test_id'); cut.openPanel(panel); - let result = cut.element.querySelector('.right-actions-container'); + let result = cut.element.querySelector('.dv-right-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(0); const actions = document.createElement('div'); cut.setRightActionsElement(actions); - result = cut.element.querySelector('.right-actions-container'); + result = cut.element.querySelector('.dv-right-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.item(0)).toBe(actions); @@ -804,14 +804,14 @@ describe('tabsContainer', () => { const updatedActions = document.createElement('div'); cut.setRightActionsElement(updatedActions); - result = cut.element.querySelector('.right-actions-container'); + result = cut.element.querySelector('.dv-right-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(1); expect(result!.childNodes.item(0)).toBe(updatedActions); cut.setRightActionsElement(undefined); - result = cut.element.querySelector('.right-actions-container'); + result = cut.element.querySelector('.dv-right-actions-container'); expect(result).toBeTruthy(); expect(result!.childNodes.length).toBe(0); }); diff --git a/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts b/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts index c681f9b6b..92797f0e9 100644 --- a/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/components/watermark/watermark.spec.ts @@ -12,7 +12,7 @@ describe('watermark', () => { cut.init({ containerApi: api, group }); - const closeEl = cut.element.querySelector('.close-action')!; + const closeEl = cut.element.querySelector('.dv-close-action')!; expect(closeEl).toBeTruthy(); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts index 44379aa61..f6511e5d6 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewComponent.spec.ts @@ -643,13 +643,13 @@ describe('dockviewComponent', () => { }); let viewQuery = container.querySelectorAll( - '.branch-node > .split-view-container > .view-container > .view' + '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view' ); expect(viewQuery.length).toBe(1); viewQuery = container.querySelectorAll( - '.branch-node > .split-view-container > .view-container > .view:nth-child(1) >.groupview > .content-container > .testpanel-panel2' + '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view:nth-child(1) >.dv-groupview > .dv-content-container > .testpanel-panel2' ); expect(viewQuery.length).toBe(1); @@ -661,19 +661,19 @@ describe('dockviewComponent', () => { }); viewQuery = container.querySelectorAll( - '.branch-node > .split-view-container > .view-container > .view' + '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view' ); expect(viewQuery.length).toBe(2); viewQuery = container.querySelectorAll( - '.branch-node > .split-view-container > .view-container > .view:nth-child(1) >.groupview > .content-container > .testpanel-panel2' + '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view:nth-child(1) >.dv-groupview > .dv-content-container > .testpanel-panel2' ); expect(viewQuery.length).toBe(1); viewQuery = container.querySelectorAll( - '.branch-node > .split-view-container > .view-container > .view:nth-child(2) >.groupview > .content-container > .testpanel-panel1' + '.dv-branch-node > .dv-split-view-container > .dv-view-container > .dv-view:nth-child(2) >.dv-groupview > .dv-content-container > .testpanel-panel1' ); expect(viewQuery.length).toBe(1); @@ -2360,17 +2360,17 @@ describe('dockviewComponent', () => { const group = dockview.getGroupPanel('panel2')!.api.group; const viewQuery = group.element.querySelectorAll( - '.groupview > .tabs-and-actions-container > .tabs-container > .tab' + '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab' ); expect(viewQuery.length).toBe(2); const viewQuery2 = group.element.querySelectorAll( - '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .dv-default-tab' + '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab > .dv-default-tab' ); expect(viewQuery2.length).toBe(1); const viewQuery3 = group.element.querySelectorAll( - '.groupview > .tabs-and-actions-container > .tabs-container > .tab > .panel-tab-part-panel2' + '.dv-groupview > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab > .panel-tab-part-panel2' ); expect(viewQuery3.length).toBe(1); }); @@ -3038,21 +3038,21 @@ describe('dockviewComponent', () => { component: 'default', }); - expect(dockview.element.querySelectorAll('.view').length).toBe(1); + expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1); const panel2 = dockview.addPanel({ id: 'panel2', component: 'default', }); - expect(dockview.element.querySelectorAll('.view').length).toBe(1); + expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1); const panel3 = dockview.addPanel({ id: 'panel3', component: 'default', }); - expect(dockview.element.querySelectorAll('.view').length).toBe(1); + expect(dockview.element.querySelectorAll('.dv-view').length).toBe(1); dockview.moveGroupOrPanel({ from: { groupId: panel3.group.id, panelId: panel3.id }, @@ -3060,7 +3060,7 @@ describe('dockviewComponent', () => { }); expect(dockview.groups.length).toBe(2); - expect(dockview.element.querySelectorAll('.view').length).toBe(2); + expect(dockview.element.querySelectorAll('.dv-view').length).toBe(2); dockview.moveGroupOrPanel({ from: { groupId: panel2.group.id, panelId: panel2.id }, @@ -3068,7 +3068,7 @@ describe('dockviewComponent', () => { }); expect(dockview.groups.length).toBe(3); - expect(dockview.element.querySelectorAll('.view').length).toBe(4); + expect(dockview.element.querySelectorAll('.dv-view').length).toBe(4); dockview.moveGroupOrPanel({ from: { groupId: panel1.group.id, panelId: panel1.id }, @@ -3077,7 +3077,7 @@ describe('dockviewComponent', () => { expect(dockview.groups.length).toBe(2); - expect(dockview.element.querySelectorAll('.view').length).toBe(2); + expect(dockview.element.querySelectorAll('.dv-view').length).toBe(2); }); test('that fromJSON layouts are resized to the current dimensions', async () => { @@ -3199,13 +3199,15 @@ describe('dockviewComponent', () => { }); expect( - dockview.element.querySelectorAll('.view-container > .view').length + dockview.element.querySelectorAll('.dv-view-container > .dv-view') + .length ).toBe(1); dockview.addFloatingGroup(panel1); expect( - dockview.element.querySelectorAll('.view-container > .view').length + dockview.element.querySelectorAll('.dv-view-container > .dv-view') + .length ).toBe(0); }); @@ -3432,7 +3434,7 @@ describe('dockviewComponent', () => { groupDragEvents.push(event); }); - const el = dockview.element.querySelector('.tab')!; + const el = dockview.element.querySelector('.dv-tab')!; expect(el).toBeTruthy(); fireEvent.dragStart(el); @@ -3475,7 +3477,7 @@ describe('dockviewComponent', () => { groupDragEvents.push(event); }); - const el = dockview.element.querySelector('.void-container')!; + const el = dockview.element.querySelector('.dv-void-container')!; expect(el).toBeTruthy(); fireEvent.dragStart(el); @@ -3504,7 +3506,7 @@ describe('dockviewComponent', () => { dockview.layout(1000, 500); - let el = dockview.element.querySelector('.view-container'); + let el = dockview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); @@ -3516,7 +3518,7 @@ describe('dockviewComponent', () => { expect(dockview.groups.length).toBe(1); expect(dockview.panels.length).toBe(1); - el = dockview.element.querySelector('.view-container'); + el = dockview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBeGreaterThan(0); @@ -3570,7 +3572,7 @@ describe('dockviewComponent', () => { expect(dockview.groups.length).toBe(0); expect(dockview.panels.length).toBe(0); - el = dockview.element.querySelector('.view-container'); + el = dockview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); }); @@ -3595,7 +3597,7 @@ describe('dockviewComponent', () => { dockview.layout(1000, 500); - let el = dockview.element.querySelector('.view-container'); + let el = dockview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); @@ -3616,7 +3618,7 @@ describe('dockviewComponent', () => { el = dockview.element.querySelector('.dv-resize-container'); expect(el).toBeTruthy(); - el = dockview.element.querySelector('.view-container'); + el = dockview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBeGreaterThan(0); @@ -3696,7 +3698,7 @@ describe('dockviewComponent', () => { el = dockview.element.querySelector('.dv-resize-container'); expect(el).toBeFalsy(); - el = dockview.element.querySelector('.view-container'); + el = dockview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); }); diff --git a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts index 01d0c84d1..d9b6d4bfb 100644 --- a/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts +++ b/packages/dockview-core/src/__tests__/dockview/dockviewGroupPanelModel.spec.ts @@ -492,12 +492,12 @@ describe('dockviewGroupPanelModel', () => { test('default', () => { let viewQuery = groupview.element.querySelectorAll( - '.groupview > .tabs-and-actions-container' + '.dv-groupview > .dv-tabs-and-actions-container' ); expect(viewQuery).toBeTruthy(); viewQuery = groupview.element.querySelectorAll( - '.groupview > .content-container' + '.dv-groupview > .dv-content-container' ); expect(viewQuery).toBeTruthy(); }); @@ -632,7 +632,7 @@ describe('dockviewGroupPanelModel', () => { null as any ); const contentContainer = groupviewContainer - .getElementsByClassName('content-container') + .getElementsByClassName('dv-content-container') .item(0)!.childNodes; const panel1 = new TestPanel('id_1', panelApi); @@ -702,7 +702,7 @@ describe('dockviewGroupPanelModel', () => { }); const element = container - .getElementsByClassName('content-container') + .getElementsByClassName('dv-content-container') .item(0)!; jest.spyOn(element, 'clientHeight', 'get').mockImplementation( @@ -716,7 +716,7 @@ describe('dockviewGroupPanelModel', () => { expect(counter).toBe(1); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -762,7 +762,7 @@ describe('dockviewGroupPanelModel', () => { }); const element = container - .getElementsByClassName('content-container') + .getElementsByClassName('dv-content-container') .item(0)!; jest.spyOn(element, 'clientHeight', 'get').mockImplementation( @@ -782,7 +782,7 @@ describe('dockviewGroupPanelModel', () => { cut.locked = false; run(10); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(1); fireEvent.dragEnd(element); @@ -790,7 +790,7 @@ describe('dockviewGroupPanelModel', () => { cut.locked = 'no-drop-target'; run(10); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); fireEvent.dragEnd(element); @@ -798,7 +798,7 @@ describe('dockviewGroupPanelModel', () => { cut.locked = true; run(10); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(1); fireEvent.dragEnd(element); @@ -806,7 +806,7 @@ describe('dockviewGroupPanelModel', () => { cut.locked = true; run(25); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); fireEvent.dragEnd(element); }); @@ -860,7 +860,7 @@ describe('dockviewGroupPanelModel', () => { cut.openPanel(new TestPanel('panel1', panelApi)); const element = container - .getElementsByClassName('content-container') + .getElementsByClassName('dv-content-container') .item(0)!; jest.spyOn(element, 'clientHeight', 'get').mockImplementation( @@ -879,7 +879,7 @@ describe('dockviewGroupPanelModel', () => { expect(counter).toBe(0); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -933,7 +933,7 @@ describe('dockviewGroupPanelModel', () => { cut.openPanel(new TestPanel('panel2', panelApi)); const element = container - .getElementsByClassName('content-container') + .getElementsByClassName('dv-content-container') .item(0)!; jest.spyOn(element, 'clientHeight', 'get').mockImplementation( @@ -952,7 +952,7 @@ describe('dockviewGroupPanelModel', () => { expect(counter).toBe(0); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -1006,7 +1006,7 @@ describe('dockviewGroupPanelModel', () => { cut.openPanel(new TestPanel('panel2', panelApi)); const element = container - .getElementsByClassName('content-container') + .getElementsByClassName('dv-content-container') .item(0)!; jest.spyOn(element, 'clientHeight', 'get').mockImplementation( @@ -1025,7 +1025,7 @@ describe('dockviewGroupPanelModel', () => { expect(counter).toBe(1); expect( - element.getElementsByClassName('drop-target-dropzone').length + element.getElementsByClassName('dv-drop-target-dropzone').length ).toBe(0); }); @@ -1110,7 +1110,7 @@ describe('dockviewGroupPanelModel', () => { container.getElementsByClassName('watermark-test-container').length ).toBe(0); expect( - container.getElementsByClassName('tabs-and-actions-container') + container.getElementsByClassName('dv-tabs-and-actions-container') .length ).toBe(1); diff --git a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts index 905c6d6e9..ec5f306f8 100644 --- a/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts +++ b/packages/dockview-core/src/__tests__/gridview/gridviewComponent.spec.ts @@ -2594,7 +2594,7 @@ describe('gridview', () => { components: { default: TestGridview }, }); - let el = gridview.element.querySelector('.view-container'); + let el = gridview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); @@ -2661,7 +2661,7 @@ describe('gridview', () => { expect(gridview.groups.length).toBe(0); - el = gridview.element.querySelector('.view-container'); + el = gridview.element.querySelector('.dv-view-container'); expect(el).toBeTruthy(); expect(el!.childNodes.length).toBe(0); }); diff --git a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts index e659b9d9d..e2e780da2 100644 --- a/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts +++ b/packages/dockview-core/src/__tests__/splitview/splitview.spec.ts @@ -96,7 +96,7 @@ describe('splitview', () => { expect(splitview.orientation).toBe(Orientation.HORIZONTAL); const viewQuery = container.querySelectorAll( - '.split-view-container horizontal' + '.dv-split-view-container dv-horizontal' ); expect(viewQuery).toBeTruthy(); @@ -111,7 +111,7 @@ describe('splitview', () => { expect(splitview.orientation).toBe(Orientation.VERTICAL); const viewQuery = container.querySelectorAll( - '.split-view-container vertical' + '.dv-split-view-container dv-vertical' ); expect(viewQuery).toBeTruthy(); @@ -128,48 +128,48 @@ describe('splitview', () => { splitview.addView(new Testview(50, 50)); let viewQuery = container.querySelectorAll( - '.split-view-container > .view-container > .view' + '.dv-split-view-container > .dv-view-container > .dv-view' ); expect(viewQuery.length).toBe(3); let sashQuery = container.querySelectorAll( - '.split-view-container > .sash-container > .sash' + '.dv-split-view-container > .dv-sash-container > .dv-sash' ); expect(sashQuery.length).toBe(2); splitview.removeView(2); viewQuery = container.querySelectorAll( - '.split-view-container > .view-container > .view' + '.dv-split-view-container > .dv-view-container > .dv-view' ); expect(viewQuery.length).toBe(2); sashQuery = container.querySelectorAll( - '.split-view-container > .sash-container > .sash' + '.dv-split-view-container > .dv-sash-container > .dv-sash' ); expect(sashQuery.length).toBe(1); splitview.removeView(0); viewQuery = container.querySelectorAll( - '.split-view-container > .view-container > .view' + '.dv-split-view-container > .dv-view-container > .dv-view' ); expect(viewQuery.length).toBe(1); sashQuery = container.querySelectorAll( - '.split-view-container > .sash-container > .sash' + '.dv-split-view-container > .dv-sash-container > .dv-sash' ); expect(sashQuery.length).toBe(0); splitview.removeView(0); viewQuery = container.querySelectorAll( - '.split-view-container > .view-container > .view' + '.dv-split-view-container > .dv-view-container > .dv-view' ); expect(viewQuery.length).toBe(0); sashQuery = container.querySelectorAll( - '.split-view-container > .sash-container > .sash' + '.dv-split-view-container > .dv-sash-container > .dv-sash' ); expect(sashQuery.length).toBe(0); @@ -188,14 +188,14 @@ describe('splitview', () => { splitview.addView(view2); let viewQuery = container.querySelectorAll( - '.split-view-container > .view-container > .view.visible' + '.dv-split-view-container > .dv-view-container > .dv-view.visible' ); expect(viewQuery.length).toBe(2); splitview.setViewVisible(1, false); viewQuery = container.querySelectorAll( - '.split-view-container > .view-container > .view.visible' + '.dv-split-view-container > .dv-view-container > .dv-view.visible' ); expect(viewQuery.length).toBe(1); @@ -619,7 +619,7 @@ describe('splitview', () => { ); const sashElement = container - .getElementsByClassName('sash') + .getElementsByClassName('dv-sash') .item(0) as HTMLElement; // validate the expected state before drag @@ -803,7 +803,7 @@ describe('splitview', () => { let viewQuery = Array.from( container .querySelectorAll( - '.split-view-container > .view-container > .view' + '.dv-split-view-container > .dv-view-container > .dv-view' ) .entries() ) @@ -818,7 +818,7 @@ describe('splitview', () => { let sashQuery = Array.from( container .querySelectorAll( - '.split-view-container > .sash-container > .sash' + '.dv-split-view-container > .dv-sash-container > .dv-sash' ) .entries() ) @@ -860,7 +860,7 @@ describe('splitview', () => { viewQuery = Array.from( container .querySelectorAll( - '.split-view-container > .view-container > .view' + '.dv-split-view-container > .dv-view-container > .dv-view' ) .entries() ) @@ -875,7 +875,7 @@ describe('splitview', () => { sashQuery = Array.from( container .querySelectorAll( - '.split-view-container > .sash-container > .sash' + '.dv-split-view-container > .dv-sash-container > .dv-sash' ) .entries() ) diff --git a/packages/dockview-core/src/dnd/droptarget.scss b/packages/dockview-core/src/dnd/droptarget.scss index 181ecbdab..f23f318f7 100644 --- a/packages/dockview-core/src/dnd/droptarget.scss +++ b/packages/dockview-core/src/dnd/droptarget.scss @@ -1,7 +1,7 @@ -.drop-target { +.dv-drop-target { position: relative; - > .drop-target-dropzone { + > .dv-drop-target-dropzone { position: absolute; left: 0px; top: 0px; @@ -10,7 +10,7 @@ z-index: 1000; pointer-events: none; - > .drop-target-selection { + > .dv-drop-target-selection { position: relative; box-sizing: border-box; height: 100%; diff --git a/packages/dockview-core/src/dnd/droptarget.ts b/packages/dockview-core/src/dnd/droptarget.ts index f7680200d..702fed867 100644 --- a/packages/dockview-core/src/dnd/droptarget.ts +++ b/packages/dockview-core/src/dnd/droptarget.ts @@ -196,13 +196,13 @@ export class Droptarget extends CompositeDisposable { if (!this.targetElement) { this.targetElement = document.createElement('div'); - this.targetElement.className = 'drop-target-dropzone'; + this.targetElement.className = 'dv-drop-target-dropzone'; this.overlayElement = document.createElement('div'); - this.overlayElement.className = 'drop-target-selection'; + this.overlayElement.className = 'dv-drop-target-selection'; this._state = 'center'; this.targetElement.appendChild(this.overlayElement); - this.element.classList.add('drop-target'); + this.element.classList.add('dv-drop-target'); this.element.append(this.targetElement); } @@ -399,7 +399,7 @@ export class Droptarget extends CompositeDisposable { this.element.removeChild(this.targetElement); this.targetElement = undefined; this.overlayElement = undefined; - this.element.classList.remove('drop-target'); + this.element.classList.remove('dv-drop-target'); } } } diff --git a/packages/dockview-core/src/dockview/components/panel/content.ts b/packages/dockview-core/src/dockview/components/panel/content.ts index bece6440b..d09606382 100644 --- a/packages/dockview-core/src/dockview/components/panel/content.ts +++ b/packages/dockview-core/src/dockview/components/panel/content.ts @@ -55,7 +55,7 @@ export class ContentContainer ) { super(); this._element = document.createElement('div'); - this._element.className = 'content-container'; + this._element.className = 'dv-content-container'; this._element.tabIndex = -1; this.addDisposables(this._onDidFocus, this._onDidBlur); diff --git a/packages/dockview-core/src/dockview/components/tab/defaultTab.scss b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss index a77e25b2c..0fdf53d78 100644 --- a/packages/dockview-core/src/dockview/components/tab/defaultTab.scss +++ b/packages/dockview-core/src/dockview/components/tab/defaultTab.scss @@ -6,7 +6,7 @@ ); /* forces tab to be drawn on a separate layer (see https://github.com/microsoft/vscode/issues/18733) */ } -.tab { +.dv-tab { flex-shrink: 0; &:focus-within, @@ -33,7 +33,7 @@ } } - &.active-tab { + &.dv-active-tab { .dv-default-tab { .dv-default-tab-action { visibility: visible; @@ -41,7 +41,7 @@ } } - &.inactive-tab { + &.dv-inactive-tab { .dv-default-tab { .dv-default-tab-action { visibility: hidden; diff --git a/packages/dockview-core/src/dockview/components/tab/tab.ts b/packages/dockview-core/src/dockview/components/tab/tab.ts index 69094e92e..1eb1174d8 100644 --- a/packages/dockview-core/src/dockview/components/tab/tab.ts +++ b/packages/dockview-core/src/dockview/components/tab/tab.ts @@ -72,11 +72,11 @@ export class Tab extends CompositeDisposable { super(); this._element = document.createElement('div'); - this._element.className = 'tab'; + this._element.className = 'dv-tab'; this._element.tabIndex = 0; this._element.draggable = true; - toggleClass(this.element, 'inactive-tab', true); + toggleClass(this.element, 'dv-inactive-tab', true); const dragHandler = new TabDragHandler( this._element, @@ -139,8 +139,8 @@ export class Tab extends CompositeDisposable { } public setActive(isActive: boolean): void { - toggleClass(this.element, 'active-tab', isActive); - toggleClass(this.element, 'inactive-tab', !isActive); + toggleClass(this.element, 'dv-active-tab', isActive); + toggleClass(this.element, 'dv-inactive-tab', !isActive); } public setContent(part: ITabRenderer): void { diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss index 4a3b57f74..fef520e03 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.scss @@ -1,4 +1,4 @@ -.tabs-and-actions-container { +.dv-tabs-and-actions-container { display: flex; background-color: var(--dv-tabs-and-actions-container-background-color); flex-shrink: 0; @@ -6,31 +6,27 @@ height: var(--dv-tabs-and-actions-container-height); font-size: var(--dv-tabs-and-actions-container-font-size); - &.hidden { - display: none; - } - &.dv-single-tab.dv-full-width-single-tab { - .tabs-container { + .dv-tabs-container { flex-grow: 1; - .tab { + .dv-tab { flex-grow: 1; } } - .void-container { + .dv-void-container { flex-grow: 0; } } - .void-container { + .dv-void-container { display: flex; flex-grow: 1; cursor: grab; } - .tabs-container { + .dv-tabs-container { display: flex; overflow-x: overlay; overflow-y: hidden; @@ -51,7 +47,7 @@ background: var(--dv-tabs-container-scrollbar-color); } - .tab { + .dv-tab { -webkit-user-drag: element; outline: none; min-width: 75px; diff --git a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts index f856d03df..9972bab90 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/tabsContainer.ts @@ -176,7 +176,7 @@ export class TabsContainer super(); this._element = document.createElement('div'); - this._element.className = 'tabs-and-actions-container'; + this._element.className = 'dv-tabs-and-actions-container'; toggleClass( this._element, @@ -185,16 +185,16 @@ export class TabsContainer ); this.rightActionsContainer = document.createElement('div'); - this.rightActionsContainer.className = 'right-actions-container'; + this.rightActionsContainer.className = 'dv-right-actions-container'; this.leftActionsContainer = document.createElement('div'); - this.leftActionsContainer.className = 'left-actions-container'; + this.leftActionsContainer.className = 'dv-left-actions-container'; this.preActionsContainer = document.createElement('div'); - this.preActionsContainer.className = 'pre-actions-container'; + this.preActionsContainer.className = 'dv-pre-actions-container'; this.tabContainer = document.createElement('div'); - this.tabContainer.className = 'tabs-container'; + this.tabContainer.className = 'dv-tabs-container'; this.voidContainer = new VoidContainer(this.accessor, this.group); diff --git a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts index 308580a63..284b780a4 100644 --- a/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts +++ b/packages/dockview-core/src/dockview/components/titlebar/voidContainer.ts @@ -35,7 +35,7 @@ export class VoidContainer extends CompositeDisposable { this._element = document.createElement('div'); - this._element.className = 'void-container'; + this._element.className = 'dv-void-container'; this._element.tabIndex = 0; this._element.draggable = true; diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.scss b/packages/dockview-core/src/dockview/components/watermark/watermark.scss index 110b5818d..f085a974d 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.scss +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.scss @@ -1,30 +1,30 @@ -.watermark { +.dv-watermark { display: flex; width: 100%; - &.has-actions { - .watermark-title { - .actions-container { + &.dv-has-actions { + .dv-watermark-title { + .dv-actions-container { display: none; } } } - .watermark-title { + .dv-watermark-title { height: 35px; width: 100%; display: flex; } - .watermark-content { + .dv-watermark-content { flex-grow: 1; } - .actions-container { + .dv-actions-container { display: flex; align-items: center; padding: 0px 8px; - .close-action { + .dv-close-action { padding: 4px; display: flex; align-items: center; diff --git a/packages/dockview-core/src/dockview/components/watermark/watermark.ts b/packages/dockview-core/src/dockview/components/watermark/watermark.ts index 0742f8741..bee5c4b5a 100644 --- a/packages/dockview-core/src/dockview/components/watermark/watermark.ts +++ b/packages/dockview-core/src/dockview/components/watermark/watermark.ts @@ -24,25 +24,25 @@ export class Watermark constructor() { super(); this._element = document.createElement('div'); - this._element.className = 'watermark'; + this._element.className = 'dv-watermark'; const title = document.createElement('div'); - title.className = 'watermark-title'; + title.className = 'dv-watermark-title'; const emptySpace = document.createElement('span'); emptySpace.style.flexGrow = '1'; const content = document.createElement('div'); - content.className = 'watermark-content'; + content.className = 'dv-watermark-content'; this._element.appendChild(title); this._element.appendChild(content); const actionsContainer = document.createElement('div'); - actionsContainer.className = 'actions-container'; + actionsContainer.className = 'dv-actions-container'; const closeAnchor = document.createElement('div'); - closeAnchor.className = 'close-action'; + closeAnchor.className = 'dv-close-action'; closeAnchor.appendChild(createCloseButton()); actionsContainer.appendChild(closeAnchor); @@ -69,6 +69,6 @@ export class Watermark private render(): void { const isOneGroup = !!(this._api && this._api.size <= 1); - toggleClass(this.element, 'has-actions', isOneGroup); + toggleClass(this.element, 'dv-has-actions', isOneGroup); } } diff --git a/packages/dockview-core/src/dockview/dockviewComponent.scss b/packages/dockview-core/src/dockview/dockviewComponent.scss index 54a0e290d..386bf2a82 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.scss +++ b/packages/dockview-core/src/dockview/dockviewComponent.scss @@ -16,16 +16,16 @@ } } -.groupview { - &.active-group { - > .tabs-and-actions-container > .tabs-container > .tab { - &.active-tab { +.dv-groupview { + &.dv-active-group { + > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab { + &.dv-active-tab { background-color: var( --dv-activegroup-visiblepanel-tab-background-color ); color: var(--dv-activegroup-visiblepanel-tab-color); } - &.inactive-tab { + &.dv-inactive-tab { background-color: var( --dv-activegroup-hiddenpanel-tab-background-color ); @@ -33,15 +33,15 @@ } } } - &.inactive-group { - > .tabs-and-actions-container > .tabs-container > .tab { - &.active-tab { + &.dv-inactive-group { + > .dv-tabs-and-actions-container > .dv-tabs-container > .dv-tab { + &.dv-active-tab { background-color: var( --dv-inactivegroup-visiblepanel-tab-background-color ); color: var(--dv-inactivegroup-visiblepanel-tab-color); } - &.inactive-tab { + &.dv-inactive-tab { background-color: var( --dv-inactivegroup-hiddenpanel-tab-background-color ); @@ -55,7 +55,7 @@ * when a tab is dragged we lose the above stylings because they are conditional on parent elements * therefore we also set some stylings for the dragging event **/ -.tab { +.dv-tab { &.dv-tab-dragging { background-color: var( --dv-activegroup-visiblepanel-tab-background-color diff --git a/packages/dockview-core/src/dockview/dockviewComponent.ts b/packages/dockview-core/src/dockview/dockviewComponent.ts index 7a511ec67..af3f887d1 100644 --- a/packages/dockview-core/src/dockview/dockviewComponent.ts +++ b/packages/dockview-core/src/dockview/dockviewComponent.ts @@ -890,7 +890,7 @@ export class DockviewComponent DEFAULT_FLOATING_GROUP_OVERFLOW_SIZE, }); - const el = group.element.querySelector('.void-container'); + const el = group.element.querySelector('.dv-void-container'); if (!el) { throw new Error('failed to find drag handle'); diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss index dc8b46a8d..3faff3ce0 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanel.scss +++ b/packages/dockview-core/src/dockview/dockviewGroupPanel.scss @@ -1,4 +1,4 @@ -.groupview { +.dv-groupview { display: flex; flex-direction: column; height: 100%; @@ -9,13 +9,13 @@ outline: none; } - &.empty { - > .tabs-and-actions-container { + &.dv-empty { + > .dv-tabs-and-actions-container { display: none; } } - > .content-container { + > .dv-content-container { flex-grow: 1; min-height: 0; outline: none; diff --git a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts index 1d02d4d33..21e9cbe2d 100644 --- a/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts +++ b/packages/dockview-core/src/dockview/dockviewGroupPanelModel.ts @@ -342,7 +342,7 @@ export class DockviewGroupPanelModel toggleClass( this.container, - 'locked-groupview', + 'dv-locked-groupview', value === 'no-drop-target' || value ); } @@ -436,7 +436,7 @@ export class DockviewGroupPanelModel ) { super(); - toggleClass(this.container, 'groupview', true); + toggleClass(this.container, 'dv-groupview', true); this._api = new DockviewApi(this.accessor); @@ -806,8 +806,8 @@ export class DockviewGroupPanelModel this._isGroupActive = isGroupActive; - toggleClass(this.container, 'active-group', isGroupActive); - toggleClass(this.container, 'inactive-group', !isGroupActive); + toggleClass(this.container, 'dv-active-group', isGroupActive); + toggleClass(this.container, 'dv-inactive-group', !isGroupActive); this.tabsContainer.setActive(this.isActive); @@ -956,7 +956,7 @@ export class DockviewGroupPanelModel } private updateContainer(): void { - toggleClass(this.container, 'empty', this.isEmpty); + toggleClass(this.container, 'dv-empty', this.isEmpty); this.panels.forEach((panel) => panel.runEvents()); diff --git a/packages/dockview-core/src/gridview/branchNode.ts b/packages/dockview-core/src/gridview/branchNode.ts index 76688d3eb..1fb55e7ef 100644 --- a/packages/dockview-core/src/gridview/branchNode.ts +++ b/packages/dockview-core/src/gridview/branchNode.ts @@ -171,7 +171,7 @@ export class BranchNode extends CompositeDisposable implements IView { this._size = size; this.element = document.createElement('div'); - this.element.className = 'branch-node'; + this.element.className = 'dv-branch-node'; if (!childDescriptors) { this.splitview = new Splitview(this.element, { diff --git a/packages/dockview-core/src/gridview/gridview.scss b/packages/dockview-core/src/gridview/gridview.scss index 3cc2708b7..129892fa1 100644 --- a/packages/dockview-core/src/gridview/gridview.scss +++ b/packages/dockview-core/src/gridview/gridview.scss @@ -1,5 +1,5 @@ -.grid-view, -.branch-node { +.dv-grid-view, +.dv-branch-node { height: 100%; width: 100%; } diff --git a/packages/dockview-core/src/gridview/gridview.ts b/packages/dockview-core/src/gridview/gridview.ts index f2b4806cf..7f76f4978 100644 --- a/packages/dockview-core/src/gridview/gridview.ts +++ b/packages/dockview-core/src/gridview/gridview.ts @@ -113,7 +113,7 @@ export function getGridLocation(element: HTMLElement): number[] { throw new Error('Invalid grid element'); } - if (/\bgrid-view\b/.test(parentElement.className)) { + if (/\bdv-grid-view\b/.test(parentElement.className)) { return []; } @@ -711,7 +711,7 @@ export class Gridview implements IDisposable { margin?: number ) { this.element = document.createElement('div'); - this.element.className = 'grid-view'; + this.element.className = 'dv-grid-view'; this._locked = locked ?? false; this._margin = margin ?? 0; diff --git a/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts index 3a8931967..300a9be44 100644 --- a/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts +++ b/packages/dockview-core/src/paneview/defaultPaneviewHeader.ts @@ -26,11 +26,11 @@ export class DefaultHeader super(); this._element = document.createElement('div'); - this.element.className = 'default-header'; + this.element.className = 'dv-default-header'; this._content = document.createElement('span'); this._expander = document.createElement('div'); - this._expander.className = 'dockview-pane-header-icon'; + this._expander.className = 'dv-pane-header-icon'; this.element.appendChild(this._expander); this.element.appendChild(this._content); diff --git a/packages/dockview-core/src/paneview/paneview.scss b/packages/dockview-core/src/paneview/paneview.scss index 8ba8d81fb..076760881 100644 --- a/packages/dockview-core/src/paneview/paneview.scss +++ b/packages/dockview-core/src/paneview/paneview.scss @@ -1,14 +1,14 @@ -.pane-container { +.dv-pane-container { height: 100%; width: 100%; - &.animated { - .view { + &.dv-animated { + .dv-view { transition-duration: 0.15s; transition-timing-function: ease-out; } } - .view { + .dv-view { overflow: hidden; display: flex; flex-direction: column; @@ -19,19 +19,19 @@ } &:not(:first-child) { - .pane > .pane-header { + .dv-pane > .dv-pane-header { border-top: 1px solid var(--dv-paneview-header-border-color); } } - .default-header { + .dv-default-header { background-color: var(--dv-group-view-background-color); color: var(--dv-activegroup-visiblepanel-tab-color); display: flex; padding: 0px 8px; cursor: pointer; - .dockview-pane-header-icon { + .dv-pane-header-icon { display: flex; justify-content: center; align-items: center; @@ -44,23 +44,23 @@ } } - &:first-of-type > .pane > .pane-header { + &:first-of-type > .dv-pane > .dv-pane-header { border-top: none !important; } - .pane { + .dv-pane { display: flex; flex-direction: column; overflow: hidden; height: 100%; - .pane-header { + .dv-pane-header { box-sizing: border-box; user-select: none; position: relative; outline: none; - &.pane-draggable { + &.dv-pane-draggable { cursor: pointer; } @@ -83,7 +83,7 @@ } } } - .pane-body { + .dv-pane-body { overflow-y: auto; overflow-x: hidden; flex-grow: 1; diff --git a/packages/dockview-core/src/paneview/paneview.ts b/packages/dockview-core/src/paneview/paneview.ts index 0ba11ad90..53a6516a8 100644 --- a/packages/dockview-core/src/paneview/paneview.ts +++ b/packages/dockview-core/src/paneview/paneview.ts @@ -61,7 +61,7 @@ export class Paneview extends CompositeDisposable implements IDisposable { this._orientation = options.orientation ?? Orientation.VERTICAL; this.element = document.createElement('div'); - this.element.className = 'pane-container'; + this.element.className = 'dv-pane-container'; container.appendChild(this.element); @@ -190,11 +190,11 @@ export class Paneview extends CompositeDisposable implements IDisposable { this.animationTimer = undefined; } - addClasses(this.element, 'animated'); + addClasses(this.element, 'dv-animated'); this.animationTimer = setTimeout(() => { this.animationTimer = undefined; - removeClasses(this.element, 'animated'); + removeClasses(this.element, 'dv-animated'); }, 200); } diff --git a/packages/dockview-core/src/paneview/paneviewPanel.ts b/packages/dockview-core/src/paneview/paneviewPanel.ts index 6d3d7254a..9a4df9e13 100644 --- a/packages/dockview-core/src/paneview/paneviewPanel.ts +++ b/packages/dockview-core/src/paneview/paneviewPanel.ts @@ -175,7 +175,7 @@ export abstract class PaneviewPanel this._orientation = orientation; - this.element.classList.add('pane'); + this.element.classList.add('dv-pane'); this.addDisposables( this.api.onWillVisibilityChange((event) => { @@ -310,7 +310,7 @@ export abstract class PaneviewPanel this.header = document.createElement('div'); this.header.tabIndex = 0; - this.header.className = 'pane-header'; + this.header.className = 'dv-pane-header'; this.header.style.height = `${this.headerSize}px`; this.header.style.lineHeight = `${this.headerSize}px`; this.header.style.minHeight = `${this.headerSize}px`; @@ -320,7 +320,7 @@ export abstract class PaneviewPanel this.body = document.createElement('div'); - this.body.className = 'pane-body'; + this.body.className = 'dv-pane-body'; this.element.appendChild(this.body); } diff --git a/packages/dockview-core/src/splitview/splitview.scss b/packages/dockview-core/src/splitview/splitview.scss index a9f9644e6..b44cc84f8 100644 --- a/packages/dockview-core/src/splitview/splitview.scss +++ b/packages/dockview-core/src/splitview/splitview.scss @@ -1,17 +1,17 @@ .dv-debug { - .split-view-container { - .sash-container { - .sash { - &.enabled { + .dv-split-view-container { + .dv-sash-container { + .dv-sash { + &.dv-enabled { background-color: black; } - &.disabled { + &.dv-disabled { background-color: orange; } - &.maximum { + &.dv-maximum { background-color: green; } - &.minimum { + &.dv-minimum { background-color: red; } } @@ -19,47 +19,47 @@ } } -.split-view-container { +.dv-split-view-container { position: relative; overflow: hidden; height: 100%; width: 100%; &.dv-splitview-disabled { - & > .sash-container > .sash { + & > .dv-sash-container > .dv-sash { pointer-events: none; } } - &.animation { - .view, - .sash { + &.dv-animation { + .dv-view, + .dv-sash { transition-duration: 0.15s; transition-timing-function: ease-out; } } - &.horizontal { + &.dv-horizontal { height: 100%; - & > .sash-container > .sash { + & > .dv-sash-container > .dv-sash { height: 100%; width: 4px; - &.enabled { + &.dv-enabled { cursor: ew-resize; } - &.disabled { + &.dv-disabled { cursor: default; } - &.maximum { + &.dv-maximum { cursor: w-resize; } - &.minimum { + &.dv-minimum { cursor: e-resize; } } - & > .view-container > .view { + & > .dv-view-container > .dv-view { &:not(:first-child) { &::before { height: 100%; @@ -69,28 +69,28 @@ } } - &.vertical { + &.dv-vertical { width: 100%; - & > .sash-container > .sash { + & > .dv-sash-container > .dv-sash { width: 100%; height: 4px; - &.enabled { + &.dv-enabled { cursor: ns-resize; } - &.disabled { + &.dv-disabled { cursor: default; } - &.maximum { + &.dv-maximum { cursor: n-resize; } - &.minimum { + &.dv-minimum { cursor: s-resize; } } - & > .view-container > .view { + & > .dv-view-container > .dv-view { width: 100%; &:not(:first-child) { @@ -102,12 +102,12 @@ } } - .sash-container { + .dv-sash-container { height: 100%; width: 100%; position: absolute; - .sash { + .dv-sash { position: absolute; z-index: 99; outline: none; @@ -130,13 +130,13 @@ } } - .view-container { + .dv-view-container { position: relative; height: 100%; width: 100%; background-color: var(--dv-background-color); - .view { + .dv-view { height: 100%; box-sizing: border-box; overflow: auto; @@ -144,8 +144,8 @@ } } - &.separator-border { - .view:not(:first-child)::before { + &.dv-separator-border { + .dv-view:not(:first-child)::before { content: ' '; position: absolute; top: 0; diff --git a/packages/dockview-core/src/splitview/splitview.ts b/packages/dockview-core/src/splitview/splitview.ts index 20b52c2c1..e19456bc7 100644 --- a/packages/dockview-core/src/splitview/splitview.ts +++ b/packages/dockview-core/src/splitview/splitview.ts @@ -160,11 +160,11 @@ export class Splitview { this.size = this.orthogonalSize; this.orthogonalSize = tmp; - removeClasses(this.element, 'horizontal', 'vertical'); + removeClasses(this.element, 'dv-horizontal', 'dv-vertical'); this.element.classList.add( this.orientation == Orientation.HORIZONTAL - ? 'horizontal' - : 'vertical' + ? 'dv-horizontal' + : 'dv-vertical' ); } @@ -277,10 +277,10 @@ export class Splitview { style(styles?: ISplitviewStyles): void { if (styles?.separatorBorder === 'transparent') { - removeClasses(this.element, 'separator-border'); + removeClasses(this.element, 'dv-separator-border'); this.element.style.removeProperty('--dv-separator-border'); } else { - addClasses(this.element, 'separator-border'); + addClasses(this.element, 'dv-separator-border'); if (styles?.separatorBorder) { this.element.style.setProperty( '--dv-separator-border', @@ -390,7 +390,7 @@ export class Splitview { skipLayout?: boolean ): void { const container = document.createElement('div'); - container.className = 'view'; + container.className = 'dv-view'; container.appendChild(view.element); @@ -431,7 +431,7 @@ export class Splitview { if (this.viewItems.length > 1) { //add sash const sash = document.createElement('div'); - sash.className = 'sash'; + sash.className = 'dv-sash'; const onPointerStart = (event: PointerEvent) => { for (const item of this.viewItems) { @@ -835,13 +835,17 @@ export class Splitview { const size = view.visible ? view.size - marginReducedSize : 0; - const visiblePanelsBeforeThisView = Math.max(0, runningVisiblePanelCount[i] - 1); + const visiblePanelsBeforeThisView = Math.max( + 0, + runningVisiblePanelCount[i] - 1 + ); const offset = i === 0 || visiblePanelsBeforeThisView === 0 ? 0 : viewLeftOffsets[i - 1] + - (visiblePanelsBeforeThisView / sashCount) * marginReducedSize; + (visiblePanelsBeforeThisView / sashCount) * + marginReducedSize; if (i < this.viewItems.length - 1) { // calculate sash position @@ -985,10 +989,10 @@ export class Splitview { } private updateSash(sash: ISashItem, state: SashState): void { - toggleClass(sash.container, 'disabled', state === SashState.DISABLED); - toggleClass(sash.container, 'enabled', state === SashState.ENABLED); - toggleClass(sash.container, 'maximum', state === SashState.MAXIMUM); - toggleClass(sash.container, 'minimum', state === SashState.MINIMUM); + toggleClass(sash.container, 'dv-disabled', state === SashState.DISABLED); + toggleClass(sash.container, 'dv-enabled', state === SashState.ENABLED); + toggleClass(sash.container, 'dv-maximum', state === SashState.MAXIMUM); + toggleClass(sash.container, 'dv-minimum', state === SashState.MINIMUM); } private resize = ( @@ -1122,13 +1126,13 @@ export class Splitview { private createViewContainer(): HTMLElement { const element = document.createElement('div'); - element.className = 'view-container'; + element.className = 'dv-view-container'; return element; } private createSashContainer(): HTMLElement { const element = document.createElement('div'); - element.className = 'sash-container'; + element.className = 'dv-sash-container'; return element; } @@ -1136,9 +1140,9 @@ export class Splitview { const element = document.createElement('div'); const orientationClassname = this._orientation === Orientation.HORIZONTAL - ? 'horizontal' - : 'vertical'; - element.className = `split-view-container ${orientationClassname}`; + ? 'dv-horizontal' + : 'dv-vertical'; + element.className = `dv-split-view-container ${orientationClassname}`; return element; } diff --git a/packages/dockview-core/src/svg.scss b/packages/dockview-core/src/svg.scss index 02519fae6..175a8a2d2 100644 --- a/packages/dockview-core/src/svg.scss +++ b/packages/dockview-core/src/svg.scss @@ -1,4 +1,4 @@ -.dockview-svg { +.dv-svg { display: inline-block; fill: currentcolor; line-height: 1; diff --git a/packages/dockview-core/src/svg.ts b/packages/dockview-core/src/svg.ts index bf0360191..7e7fd6282 100644 --- a/packages/dockview-core/src/svg.ts +++ b/packages/dockview-core/src/svg.ts @@ -10,7 +10,7 @@ const createSvgElementFromPath = (params: { svg.setAttributeNS(null, 'viewBox', params.viewbox); svg.setAttributeNS(null, 'aria-hidden', 'false'); svg.setAttributeNS(null, 'focusable', 'false'); - svg.classList.add('dockview-svg'); + svg.classList.add('dv-svg'); const path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); path.setAttributeNS(null, 'd', params.path); svg.appendChild(path); diff --git a/packages/dockview-core/src/theme.scss b/packages/dockview-core/src/theme.scss index 907a13f64..e121f583a 100644 --- a/packages/dockview-core/src/theme.scss +++ b/packages/dockview-core/src/theme.scss @@ -80,22 +80,22 @@ --dv-inactivegroup-visiblepanel-tab-color: white; --dv-inactivegroup-hiddenpanel-tab-color: white; - .groupview { - &.active-group { - > .tabs-and-actions-container { + .dv-groupview { + &.dv-active-group { + > .dv-tabs-and-actions-container { box-sizing: content-box; border-bottom: 2px solid var(--dv-activegroup-visiblepanel-tab-background-color); - .tab { - &.active-tab { + .dv-tab { + &.dv-active-tab { border-top: 2px solid var( --dv-activegroup-visiblepanel-tab-background-color ); } - &.inactive-tab { + &.dv-inactive-tab { border-top: 2px solid var( --dv-activegroup-hiddenpanel-tab-background-color @@ -104,21 +104,21 @@ } } } - &.inactive-group { - > .tabs-and-actions-container { + &.dv-inactive-group { + > .dv-tabs-and-actions-container { box-sizing: content-box; border-bottom: 2px solid var(--dv-inactivegroup-visiblepanel-tab-background-color); - .tab { - &.active-tab { + .dv-tab { + &.dv-active-tab { border-top: 2px solid var( --dv-inactivegroup-visiblepanel-tab-background-color ); } - &.inactive-tab { + &.dv-inactive-tab { border-top: 2px solid var( --dv-inactivegroup-hiddenpanel-tab-background-color @@ -177,11 +177,11 @@ --dv-paneview-active-outline-color: #6272a4; - .groupview { - &.active-group { - > .tabs-and-actions-container { - > .tabs-container { - > .tab.active-tab { + .dv-groupview { + &.dv-active-group { + > .dv-tabs-and-actions-container { + > .dv-tabs-container { + > .dv-tab.dv-active-tab { position: relative; &::after { @@ -198,10 +198,10 @@ } } } - &.inactive-group { - > .tabs-and-actions-container { - > .tabs-container { - > .tab.active-tab { + &.dv-inactive-group { + > .dv-tabs-and-actions-container { + > .dv-tabs-container { + > .dv-tab.dv-active-tab { position: relative; &::after { @@ -230,20 +230,20 @@ } @mixin dockview-design-replit-mixin { - .dv-resize-container:has(> .groupview) { + .dv-resize-container:has(> .dv-groupview) { border-radius: 8px; } - .groupview { + .dv-groupview { overflow: hidden; border-radius: 10px; - .tabs-and-actions-container { - .tab { + .dv-tabs-and-actions-container { + .dv-tab { margin: 4px; border-radius: 8px; - .dockview-svg { + .dv-svg { height: 8px; width: 8px; } @@ -255,15 +255,15 @@ border-bottom: 1px solid rgba(128, 128, 128, 0.35); } - .content-container { + .dv-content-container { background-color: #fcfcfc; } - &.active-group { + &.dv-active-group { border: 1px solid rgba(128, 128, 128, 0.35); } - &.inactive-group { + &.dv-inactive-group { border: 1px solid transparent; } } @@ -292,8 +292,21 @@ } } - .horizontal > .sash-container > .sash { - &:not(.disabled) { + .dv-horizontal > .dv-sash-container > .dv-sash { + &:not(.disabled) { + &::after { + content: ''; + height: 40px; + width: 4px; + border-radius: 2px; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + background-color: var(--dv-separator-handle-background-color); + position: absolute; + } + + &:hover { &::after { content: ''; height: 40px;