From 504b058ec4a3f58a6830df9ff7858d81ce5a6d9c Mon Sep 17 00:00:00 2001 From: Peng Lyu Date: Sat, 16 Mar 2019 12:49:08 -0700 Subject: [PATCH] Update Comment Action Toolbar --- .../comments/electron-browser/commentNode.ts | 31 +++++++++++++------ 1 file changed, 21 insertions(+), 10 deletions(-) diff --git a/src/vs/workbench/contrib/comments/electron-browser/commentNode.ts b/src/vs/workbench/contrib/comments/electron-browser/commentNode.ts index 6dc8ee69050..fc507f47afa 100644 --- a/src/vs/workbench/contrib/comments/electron-browser/commentNode.ts +++ b/src/vs/workbench/contrib/comments/electron-browser/commentNode.ts @@ -48,8 +48,9 @@ export class CommentNode extends Disposable { private _editAction: Action; private _commentEditContainer: HTMLElement; private _commentDetailsContainer: HTMLElement; + private _actionsToolbarContainer: HTMLElement; private _reactionsActionBar?: ActionBar; - private _actionsContainer?: HTMLElement; + private _reactionActionsContainer?: HTMLElement; private _commentEditor: SimpleCommentEditor | null; private _commentEditorDisposables: IDisposable[] = []; private _commentEditorModel: ITextModel; @@ -133,6 +134,11 @@ export class CommentNode extends Disposable { this._isPendingLabel.innerText = ''; } + this._actionsToolbarContainer = dom.append(header, dom.$('.comment-actions.hidden')); + this.createActionsToolbar(); + } + + private createActionsToolbar() { const actions: Action[] = []; let reactionGroup = this.commentService.getReactionGroup(this.owner); @@ -148,7 +154,7 @@ export class CommentNode extends Disposable { } if (this.comment.canEdit || this.comment.editCommand) { - this._editAction = this.createEditAction(commentDetailsContainer); + this._editAction = this.createEditAction(this._commentDetailsContainer); actions.push(this._editAction); } @@ -158,9 +164,7 @@ export class CommentNode extends Disposable { } if (actions.length) { - const actionsContainer = dom.append(header, dom.$('.comment-actions.hidden')); - - this.toolbar = new ToolBar(actionsContainer, this.contextMenuService, { + this.toolbar = new ToolBar(this._actionsToolbarContainer, this.contextMenuService, { actionItemProvider: action => { if (action.id === ToggleReactionsAction.ID) { return new DropdownMenuActionItem( @@ -181,7 +185,7 @@ export class CommentNode extends Disposable { orientation: ActionsOrientation.HORIZONTAL }); - this.registerActionBarListeners(actionsContainer); + this.registerActionBarListeners(this._actionsToolbarContainer); this.toolbar.setActions(actions, [])(); this._toDispose.push(this.toolbar); } @@ -297,8 +301,8 @@ export class CommentNode extends Disposable { } private createReactionsContainer(commentDetailsContainer: HTMLElement): void { - this._actionsContainer = dom.append(commentDetailsContainer, dom.$('div.comment-reactions')); - this._reactionsActionBar = new ActionBar(this._actionsContainer, { + this._reactionActionsContainer = dom.append(commentDetailsContainer, dom.$('div.comment-reactions')); + this._reactionsActionBar = new ActionBar(this._reactionActionsContainer, { actionItemProvider: action => { if (action.id === ToggleReactionsAction.ID) { return new DropdownMenuActionItem( @@ -577,8 +581,15 @@ export class CommentNode extends Disposable { this._body.appendChild(this._md); } + const shouldUpdateActions = newComment.editCommand !== this.comment.editCommand || newComment.deleteCommand !== this.comment.deleteCommand; this.comment = newComment; + if (shouldUpdateActions) { + dom.clearNode(this._actionsToolbarContainer); + this.createActionsToolbar(); + } + + if (newComment.label) { this._isPendingLabel.innerText = newComment.label; } else if (newComment.isDraft) { @@ -588,8 +599,8 @@ export class CommentNode extends Disposable { } // update comment reactions - if (this._actionsContainer) { - this._actionsContainer.remove(); + if (this._reactionActionsContainer) { + this._reactionActionsContainer.remove(); } if (this._reactionsActionBar) { -- GitLab