Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Explore making the explorer a moveable view #173619

Merged
merged 1 commit into from Feb 7, 2023
Merged

Explore making the explorer a moveable view #173619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
57 changes: 30 additions & 27 deletions src/vs/workbench/contrib/files/browser/explorerViewlet.ts
View file
Open in desktop
Expand Up @@ -149,6 +149,7 @@ export class ExplorerViewletViewsContribution extends Disposable implements IWor
containerIcon: explorerViewIcon,
ctorDescriptor: new SyncDescriptor(ExplorerView),
order: 1,
canMoveView: true,
canToggleVisibility: false,
focusCommand: {
id: 'workbench.explorer.fileView.focus'
Expand Down Expand Up @@ -199,37 +200,39 @@ export class ExplorerViewPaneContainer extends ViewPaneContainer {

protected override createView(viewDescriptor: IViewDescriptor, options: IViewletViewOptions): ViewPane {
if (viewDescriptor.id === VIEW_ID) {
return this.instantiationService.createInstance(ExplorerView, options, {
willOpenElement: e => {
if (!(e instanceof MouseEvent)) {
return; // only delay when user clicks
}
return this.instantiationService.createInstance(ExplorerView, {
...options, delegate: {
willOpenElement: e => {
if (!(e instanceof MouseEvent)) {
return; // only delay when user clicks
}

const openEditorsView = this.getOpenEditorsView();
if (openEditorsView) {
let delay = 0;

const config = this.configurationService.getValue<IFilesConfiguration>();
if (!!config.workbench?.editor?.enablePreview) {
// delay open editors view when preview is enabled
// to accomodate for the user doing a double click
// to pin the editor.
// without this delay a double click would be not
// possible because the next element would move
// under the mouse after the first click.
delay = 250;
const openEditorsView = this.getOpenEditorsView();
if (openEditorsView) {
let delay = 0;

const config = this.configurationService.getValue<IFilesConfiguration>();
if (!!config.workbench?.editor?.enablePreview) {
// delay open editors view when preview is enabled
// to accomodate for the user doing a double click
// to pin the editor.
// without this delay a double click would be not
// possible because the next element would move
// under the mouse after the first click.
delay = 250;
}

openEditorsView.setStructuralRefreshDelay(delay);
}
},
didOpenElement: e => {
if (!(e instanceof MouseEvent)) {
return; // only delay when user clicks
}

openEditorsView.setStructuralRefreshDelay(delay);
}
},
didOpenElement: e => {
if (!(e instanceof MouseEvent)) {
return; // only delay when user clicks
const openEditorsView = this.getOpenEditorsView();
openEditorsView?.setStructuralRefreshDelay(0);
}

const openEditorsView = this.getOpenEditorsView();
openEditorsView?.setStructuralRefreshDelay(0);
}
});
}
Expand Down
52 changes: 26 additions & 26 deletions src/vs/workbench/contrib/files/browser/media/explorerviewlet.css
View file
Open in desktop
Expand Up @@ -4,7 +4,7 @@
*--------------------------------------------------------------------------------------------*/

/* --- Explorer viewlet --- */
.explorer-viewlet,
.explorer-folders-view,
.explorer-folders-view {
height: 100%;
}
Expand All @@ -13,42 +13,42 @@
padding-left: 4px; /* align top level twistie with `Explorer` title label */
}

.explorer-viewlet .explorer-folders-view.highlight .monaco-list .explorer-item:not(.explorer-item-edited),
.explorer-viewlet .explorer-folders-view.highlight .monaco-list .monaco-tl-twistie {
.explorer-folders-view .explorer-folders-view.highlight .monaco-list .explorer-item:not(.explorer-item-edited),
.explorer-folders-view .explorer-folders-view.highlight .monaco-list .monaco-tl-twistie {
opacity: 0.3;
}

.explorer-viewlet .explorer-item,
.explorer-viewlet .editor-group {
.explorer-folders-view .explorer-item,
.explorer-folders-view .editor-group {
height: 22px;
line-height: 22px;
}

.explorer-viewlet .explorer-item {
.explorer-folders-view .explorer-item {
display: flex; /* this helps showing the overflow ellipsis (...) even though we use display:inline-block for the labels */
flex-wrap: nowrap;
}

.explorer-viewlet .explorer-item > a,
.explorer-viewlet .editor-group {
.explorer-folders-view .explorer-item > a,
.explorer-folders-view .editor-group {
text-overflow: ellipsis;
overflow: hidden;
}

.explorer-viewlet .explorer-item,
.explorer-viewlet .explorer-item .monaco-inputbox {
.explorer-folders-view .explorer-item,
.explorer-folders-view .explorer-item .monaco-inputbox {
flex: 1;
}

.explorer-viewlet .explorer-item.cut {
.explorer-folders-view .explorer-item.cut {
opacity: 0.5;
}

.explorer-viewlet .explorer-item.explorer-item-edited .label-name {
.explorer-folders-view .explorer-item.explorer-item-edited .label-name {
flex: 0; /* do not steal space when label is hidden because we are in edit mode */
}

.explorer-viewlet .pane-header .count {
.explorer-folders-view .pane-header .count {
min-width: fit-content;
display: flex;
align-items: center;
Expand All @@ -65,49 +65,49 @@
min-height: auto;
}

.explorer-viewlet .explorer-item.nonexistent-root {
.explorer-folders-view .explorer-item.nonexistent-root {
opacity: 0.5;
}

.explorer-viewlet .explorer-item .monaco-inputbox {
.explorer-folders-view .explorer-item .monaco-inputbox {
width: 100%;
line-height: normal;
}

.explorer-viewlet .explorer-item .monaco-icon-name-container.multiple > .label-name > .monaco-highlighted-label {
.explorer-folders-view .explorer-item .monaco-icon-name-container.multiple > .label-name > .monaco-highlighted-label {
border-radius: 3px;
}

.explorer-viewlet .explorer-item .monaco-icon-name-container.multiple > .label-name:hover > .monaco-highlighted-label,
.explorer-viewlet .monaco-list .monaco-list-row.focused .explorer-item .monaco-icon-name-container.multiple > .label-name.active > .monaco-highlighted-label {
.explorer-folders-view .explorer-item .monaco-icon-name-container.multiple > .label-name:hover > .monaco-highlighted-label,
.explorer-folders-view .monaco-list .monaco-list-row.focused .explorer-item .monaco-icon-name-container.multiple > .label-name.active > .monaco-highlighted-label {
text-decoration: underline;
}

.explorer-viewlet .explorer-item .monaco-icon-name-container.multiple > .label-name.drop-target > .monaco-highlighted-label {
.explorer-folders-view .explorer-item .monaco-icon-name-container.multiple > .label-name.drop-target > .monaco-highlighted-label {
background-color: var(--vscode-list-dropBackground);
}

.explorer-viewlet .explorer-item.align-nest-icon-with-parent-icon {
.explorer-folders-view .explorer-item.align-nest-icon-with-parent-icon {
margin-left: var(--vscode-explorer-align-offset-margin-left);
}

.monaco-workbench.linux .explorer-viewlet .explorer-item .monaco-inputbox,
.monaco-workbench.mac .explorer-viewlet .explorer-item .monaco-inputbox {
.monaco-workbench.linux .explorer-folders-view .explorer-item .monaco-inputbox,
.monaco-workbench.mac .explorer-folders-view .explorer-item .monaco-inputbox {
height: 22px;
}

.monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox > .ibwrapper > .input {
.monaco-workbench .explorer-folders-view .explorer-item .monaco-inputbox > .ibwrapper > .input {
padding: 0;
height: 20px;
}

/* High Contrast Theming */
.monaco-workbench.hc-black .explorer-viewlet .explorer-item,
.monaco-workbench.hc-light .explorer-viewlet .explorer-item {
.monaco-workbench.hc-black .explorer-folders-view .explorer-item,
.monaco-workbench.hc-light .explorer-folders-view .explorer-item {
line-height: 20px;
}

.monaco-workbench .explorer-viewlet .explorer-item .monaco-inputbox input[type="text"] {
.monaco-workbench .explorer-folders-view .explorer-item .monaco-inputbox input[type="text"] {
outline-width: 1px;
outline-style: solid;
outline-offset: -1px;
Expand Down
13 changes: 9 additions & 4 deletions src/vs/workbench/contrib/files/browser/views/explorerView.ts
View file
Open in desktop
Expand Up @@ -144,6 +144,10 @@ export interface IExplorerViewContainerDelegate {
didOpenElement(event?: UIEvent): void;
}

export interface IExplorerViewPaneOptions extends IViewPaneOptions {
delegate: IExplorerViewContainerDelegate;
}

export class ExplorerView extends ViewPane implements IExplorerView {
static readonly TREE_VIEW_STATE_STORAGE_KEY: string = 'workbench.explorer.treeViewState';

Expand Down Expand Up @@ -173,10 +177,10 @@ export class ExplorerView extends ViewPane implements IExplorerView {
private dragHandler!: DelayedDragHandler;
private autoReveal: boolean | 'force' | 'focusNoScroll' = false;
private decorationsProvider: ExplorerDecorationsProvider | undefined;
private readonly delegate: IExplorerViewContainerDelegate | undefined;

constructor(
options: IViewPaneOptions,
private readonly delegate: IExplorerViewContainerDelegate,
options: IExplorerViewPaneOptions,
@IContextMenuService contextMenuService: IContextMenuService,
@IViewDescriptorService viewDescriptorService: IViewDescriptorService,
@IInstantiationService instantiationService: IInstantiationService,
Expand All @@ -202,6 +206,7 @@ export class ExplorerView extends ViewPane implements IExplorerView {
) {
super(options, keybindingService, contextMenuService, configurationService, contextKeyService, viewDescriptorService, instantiationService, openerService, themeService, telemetryService);

this.delegate = options.delegate;
this.resourceContext = instantiationService.createInstance(ResourceContextKey);
this._register(this.resourceContext);

Expand Down Expand Up @@ -468,10 +473,10 @@ export class ExplorerView extends ViewPane implements IExplorerView {
}
this.telemetryService.publicLog2<WorkbenchActionExecutedEvent, WorkbenchActionExecutedClassification>('workbenchActionExecuted', { id: 'workbench.files.openFile', from: 'explorer' });
try {
this.delegate.willOpenElement(e.browserEvent);
this.delegate?.willOpenElement(e.browserEvent);
await this.editorService.openEditor({ resource: element.resource, options: { preserveFocus: e.editorOptions.preserveFocus, pinned: e.editorOptions.pinned, source: EditorOpenSource.USER } }, e.sideBySide ? SIDE_GROUP : ACTIVE_GROUP);
} finally {
this.delegate.didOpenElement();
this.delegate?.didOpenElement();
}
}
}));
Expand Down