Merge pull request #45 from hansu/3-hide-commit-msg-box-2.0

allow collapsing commit summary

Author: hansu

package.json

@@ -138,6 +138,11 @@
 					"default": "Inline",
 					"description": "Specifies where the Commit Details View is rendered in the Git Graph View."
 				},
+				"git-graph.commitDetailsView.initiallyHideSummary": {
+					"type": "boolean",
+					"default": false,
+					"description": "Initially hide the commit summary in the Commit Details View."
+				},
 				"git-graph.contextMenuActionsVisibility": {
 					"type": "object",
 					"default": {},

src/config.ts

@@ -72,7 +72,8 @@ class Config {
 				: FileViewType.Tree,
 			location: this.getRenamedExtensionSetting<string>('commitDetailsView.location', 'commitDetailsViewLocation', 'Inline') === 'Docked to Bottom'
 				? CommitDetailsViewLocation.DockedToBottom
-				: CommitDetailsViewLocation.Inline
+				: CommitDetailsViewLocation.Inline,
+			initiallyHideSummary: this.config.get('commitDetailsView.initiallyHideSummary', false)
 		};
 	}
 

src/extensionState.ts

@@ -37,7 +37,8 @@ export const DEFAULT_REPO_STATE: GitRepoState = {
 	simplifyByDecoration: BooleanOverride.Default,
 	showStashes: BooleanOverride.Default,
 	showTags: BooleanOverride.Default,
-	workspaceFolderIndex: null
+	workspaceFolderIndex: null,
+	isCdvSummaryHidden: true
 };
 
 const DEFAULT_GIT_GRAPH_VIEW_GLOBAL_STATE: GitGraphViewGlobalState = {

src/types.ts

@@ -222,6 +222,7 @@ export interface GitRepoState {
 	showStashes: BooleanOverride;
 	showTags: BooleanOverride;
 	workspaceFolderIndex: number | null;
+	isCdvSummaryHidden: boolean;
 }
 
 
@@ -287,6 +288,7 @@ export interface CommitDetailsViewConfig {
 	readonly fileTreeCompactFolders: boolean;
 	readonly fileViewType: FileViewType;
 	readonly location: CommitDetailsViewLocation;
+	readonly initiallyHideSummary: boolean;
 }
 
 export interface GraphConfig {

web/main.ts

@@ -184,6 +184,7 @@ class GitGraphView {
 				name: this.gitRepos[this.currentRepo].name || getRepoName(this.currentRepo)
 			}, 'Opening Terminal');
 		});
+		this.gitRepos[this.currentRepo].isCdvSummaryHidden = this.config.commitDetailsView.initiallyHideSummary;
 	}
 
 
@@ -838,7 +839,7 @@ class GitGraphView {
 		}
 
 		const colHeadersElem = document.getElementById('tableColHeaders');
-		const cdvHeight = this.gitRepos[this.currentRepo].cdvHeight;
+		const cdvHeight = this.gitRepos[this.currentRepo].isCdvSummaryHidden ? 0 : this.gitRepos[this.currentRepo].cdvHeight;
 		const headerHeight = colHeadersElem !== null ? colHeadersElem.clientHeight + 1 : 0;
 		const expandedCommit = this.isCdvDocked() ? null : this.expandedCommit;
 		const expandedCommitElem = expandedCommit !== null ? document.getElementById('cdv') : null;
@@ -2608,7 +2609,7 @@ class GitGraphView {
 		}
 
 		if (expandedCommit.loading) {
-			html += '<div id="cdvLoading">' + SVG_ICONS.loading + ' Loading ' + (expandedCommit.compareWithHash === null ? expandedCommit.commitHash !== UNCOMMITTED ? 'Commit Details' : 'Uncommitted Changes' : 'Commit Comparison') + ' ...</div>';
+			html += '<div id="cdvFiles"></div><div id="cdvLoading">' + SVG_ICONS.loading + ' Loading ' + (expandedCommit.compareWithHash === null ? expandedCommit.commitHash !== UNCOMMITTED ? 'Commit Details' : 'Uncommitted Changes' : 'Commit Comparison') + ' ...</div>';
 		} else {
 			html += '<div id="cdvSummary">';
 			if (expandedCommit.compareWithHash === null) {
@@ -2648,16 +2649,17 @@ class GitGraphView {
 				// Commit comparison should be shown
 				html += 'Displaying all changes from <b>' + commitOrder.from + '</b> to <b>' + (commitOrder.to !== UNCOMMITTED ? commitOrder.to : 'Uncommitted Changes') + '</b>.';
 			}
-			html += '</div><div id="cdvFiles">' + generateFileViewHtml(expandedCommit.fileTree!, expandedCommit.fileChanges!, expandedCommit.lastViewedFile, expandedCommit.contextMenuOpen.fileView, this.getFileViewType(), commitOrder.to === UNCOMMITTED) + '</div><div id="cdvDivider"></div>';
+			html += '</div><div id="cdvFiles">' + (!isDocked ? '<div id="cdvSummaryToggleBtn">' + SVG_ICONS.collapse + '</div>' : '') + '<div id="cdvFilesViewWrapper"><div id="cdvFilesView">' + generateFileViewHtml(expandedCommit.fileTree!, expandedCommit.fileChanges!, expandedCommit.lastViewedFile, expandedCommit.contextMenuOpen.fileView, this.getFileViewType(), commitOrder.to === UNCOMMITTED) + '</div></div></div><div id="cdvDivider"></div>';
 		}
 		html += '</div><div id="cdvControls"><div id="cdvClose" class="cdvControlBtn" title="Close">' + SVG_ICONS.close + '</div>' +
 			(codeReviewPossible ? '<div id="cdvCodeReview" class="cdvControlBtn">' + SVG_ICONS.review + '</div>' : '') +
 			(!expandedCommit.loading ? '<div id="cdvFileViewTypeList" class="cdvControlBtn cdvFileViewTypeBtn" title="File List View">' + SVG_ICONS.fileList + '</div><div id="cdvFileViewTypeTree" class="cdvControlBtn cdvFileViewTypeBtn" title="File Tree View">' + SVG_ICONS.fileTree + '</div><div id="cdvCollapse" class="cdvControlBtn cdvFolderBtn" title="Collapse/Expand Folders">' + SVG_ICONS.collapseAll + '</div><div id="cdvExpand" class="cdvControlBtn cdvFolderBtn" title="Expand Folders">' + SVG_ICONS.expandAll + '</div>' : '') +
 			(externalDiffPossible ? '<div id="cdvExternalDiff" class="cdvControlBtn">' + SVG_ICONS.linkExternal + '</div>' : '') +
 			'</div><div class="cdvHeightResize"></div>';
 
-		elem.innerHTML = isDocked ? html : '<td><div class="cdvHeightResize"></div></td><td colspan="' + (this.getNumColumns() - 1) + '">' + html + '</td>';
-		if (!expandedCommit.loading) this.setCdvDivider();
+		elem.innerHTML = isDocked ? html : '<td><div class="cdvHeightResize"></div></td><td colspan="' + (this.getNumColumns() - 1) + '"><div id="cdvContentWrapper">' + html + '</div></td>';
+		this.setCdvDivider();
+		this.setCdvHeight(elem, isDocked);
 		if (!isDocked) this.renderGraph();
 
 		if (!refresh) {
@@ -2730,6 +2732,12 @@ class GitGraphView {
 			document.getElementById('cdvExpand')!.addEventListener('click', () => {
 				this.openFolders(true);
 			});
+			let cdvSummaryToggleBtn = document.getElementById('cdvSummaryToggleBtn');
+			if (cdvSummaryToggleBtn !== null) cdvSummaryToggleBtn.addEventListener('click', () => {
+				this.gitRepos[this.currentRepo].isCdvSummaryHidden = !(this.gitRepos[this.currentRepo].isCdvSummaryHidden);
+				this.hideCdvSummary(this.gitRepos[this.currentRepo].isCdvSummaryHidden);
+			});
+			this.hideCdvSummary(this.gitRepos[this.currentRepo].isCdvSummaryHidden);
 
 			if (codeReviewPossible) {
 				this.renderCodeReviewBtn();
@@ -2773,6 +2781,20 @@ class GitGraphView {
 		}
 	}
 
+	private hideCdvSummary(hide: boolean) {
+		let btnIcon = document.getElementById('cdvSummaryToggleBtn')?.getElementsByTagName('svg')?.[0] ?? null;
+		let cdvSummary = document.getElementById('cdvSummary');
+		if (hide && !this.isCdvDocked()) {
+			if (btnIcon) btnIcon.style.transform = 'rotate(90deg)';
+			cdvSummary!.classList.add('hidden');
+		} else {
+			if (btnIcon) btnIcon.style.transform = 'rotate(-90deg)';
+			cdvSummary!.classList.remove('hidden');
+		}
+		let elem = document.getElementById('cdv');
+		if (elem !== null) this.setCdvHeight(elem, this.isCdvDocked());
+	}
+
 	private setCdvHeight(elem: HTMLElement, isDocked: boolean) {
 		let height = this.gitRepos[this.currentRepo].cdvHeight, windowHeight = window.innerHeight;
 		if (height > windowHeight - 40) {
@@ -2784,8 +2806,24 @@ class GitGraphView {
 		}
 
 		let heightPx = height + 'px';
-		elem.style.height = heightPx;
-		if (isDocked) this.viewElem.style.bottom = heightPx;
+		if (isDocked) {
+			this.viewElem.style.bottom = heightPx;
+			elem.style.height = heightPx;
+			return;
+		}
+		let inlineElem = document.getElementById('cdvContentWrapper');
+		if (!inlineElem) {
+			elem.style.height = heightPx;
+			return;
+		}
+		if (this.gitRepos[this.currentRepo].isCdvSummaryHidden) {
+			inlineElem.style.height = heightPx;
+			elem.style.height = '0px';
+		} else {
+			inlineElem.style.removeProperty('height');
+			elem.style.height = heightPx;
+		}
+		this.renderGraph();
 	}
 
 	private setCdvDivider() {

web/styles/main.css

@@ -311,6 +311,7 @@ table { border-collapse: collapse; }
 	font-size:13px;
 	line-height:18px;
 	white-space:normal;
+	overflow: visible;
 }
 #cdv.docked{
 	display:block;
@@ -334,6 +335,7 @@ table { border-collapse: collapse; }
 	position:absolute;
 	right:0;
 	width:32px;
+	overflow: hidden;
 }
 
 .cdvControlBtn{
@@ -397,10 +399,15 @@ table { border-collapse: collapse; }
 	top:0;
 	bottom:0;
 	box-sizing:border-box;
-	border-right:1px solid rgba(128,128,128,0.2);
 	overflow-x:hidden;
 	overflow-y:auto;
 }
+#cdvSummary, #cdvFiles, #cdvLoading, #cdvControls {
+	background-color: color-mix(in srgb, var(--vscode-editor-background) 90%, rgba(128, 128, 128,1));
+	border-left:1px solid rgba(128,128,128,0.2);
+	border-bottom:2px solid rgba(128,128,128,0.2);
+}
+
 #cdvDivider{
 	position:absolute;
 	left:50%;
@@ -411,6 +418,7 @@ table { border-collapse: collapse; }
 	left:0;
 	width:50%;
 	padding:10px;
+	padding-right:16px;
 	text-overflow:ellipsis;
 	-webkit-user-select:text;
 	user-select:text;
@@ -464,15 +472,57 @@ table { border-collapse: collapse; }
 	fill:#e00000;
 	opacity:0.8;
 }
+#cdvSummaryToggleBtn{
+	position: absolute;
+	top:0;
+	margin:0;
+	left:-21px;
+	z-index:100;
+	overflow:visible;
+	cursor:pointer;
+	padding:2px;
+	width:16px;
+	height:16px;
+    background-color: color-mix(in srgb, var(--vscode-editor-background) 90%, rgba(128, 128, 128,1));
+	border-left: 1px solid var(--vscode-editor-background);
+}
+
+#cdvSummaryToggleBtn svg{
+	fill:var(--vscode-editor-foreground);
+	fill-opacity:0.6;
+}
+.hidden{
+	display: none;
+}
+#cdvContentWrapper {
+	position: absolute;
+    left: 0;
+    right: 0;
+	top:0;
+	bottom:0;
+    z-index: 11;
+	pointer-events: none;
 
+}
+#cdvContent *, #cdvControls, .cdvHeightResize {
+    pointer-events: auto;
+}
 #cdvFiles{
 	left:50%;
 	right:0;
-	padding:4px 8px 8px 0;
 	-webkit-user-select:none;
 	user-select:none;
+	overflow: visible;
+}
+#cdvFilesViewWrapper{
+	overflow-x:hidden;
+	overflow-y:auto;
+	height: 100%;
+}
+#cdvFilesView{
+	padding:4px 8px 8px 0;
 }
-#cdvFiles ul{
+#cdvFilesView ul{
 	list-style-type:none;
 	-webkit-margin-before:0;
 	-webkit-margin-after:0;
@@ -482,11 +532,11 @@ table { border-collapse: collapse; }
 	margin:0;
 	padding:0 0 0 25px;
 }
-#cdvFiles > ul{
+#cdvFilesView > ul{
 	-webkit-padding-start:10px;
 	padding:0 0 0 10px;
 }
-#cdvFiles li{
+#cdvFilesView li{
 	margin-top:4px;
 	white-space:nowrap;
 	text-overflow:ellipsis;
@@ -502,7 +552,18 @@ table { border-collapse: collapse; }
 	text-align:center;
 	line-height:24px;
 	text-overflow:ellipsis;
+	opacity: 0;
+  	animation: fadeIn 0.25s ease-in-out 1s forwards;
 }
+@keyframes fadeIn {
+	0% {
+	  opacity: 0;
+	}
+	100% {
+	  opacity: 1;
+	}
+}
+
 #cdvLoading svg{
 	display:inline-block;
 	width:15px !important;
@@ -526,16 +587,13 @@ table { border-collapse: collapse; }
 	top:0;
 	bottom:2px;
 }
-#cdv.inline #cdvContent{
-	border-left:1px solid rgba(128,128,128,0.2);
-}
+
 #cdv.inline #cdvDivider{
 	top:0;
 	bottom:6px;
 }
 #cdv.inline .cdvHeightResize{
 	bottom:0;
-	border-bottom:2px solid rgba(128,128,128,0.2);
 }
 
 #cdv.docked #cdvContent, #cdv.docked #cdvControls{

web/utils.ts

@@ -45,7 +45,8 @@ const SVG_ICONS = {
 
 	// The SVG icons below are from  https://github.com/microsoft/vscode-icons
 	collapseAll: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9H4V10H9V9Z" fill="#C5C5C5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3L6 2H13L14 3V10L13 11H11V13L10 14H3L2 13V6L3 5H5V3ZM6 5H10L11 6V10H13V3H6V5ZM10 6H3V13H10V6Z" fill="#C5C5C5"/></svg>',
-	expandAll: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9H4V10H9V9Z" fill="#C5C5C5"/><path d="M7 12L7 7L6 7L6 12L7 12Z" fill="#C5C5C5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3L6 2H13L14 3V10L13 11H11V13L10 14H3L2 13V6L3 5H5V3ZM6 5H10L11 6V10H13V3H6V5ZM10 6H3V13H10V6Z" fill="#C5C5C5"/></svg>'
+	expandAll: '<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9 9H4V10H9V9Z" fill="#C5C5C5"/><path d="M7 12L7 7L6 7L6 12L7 12Z" fill="#C5C5C5"/><path fill-rule="evenodd" clip-rule="evenodd" d="M5 3L6 2H13L14 3V10L13 11H11V13L10 14H3L2 13V6L3 5H5V3ZM6 5H10L11 6V10H13V3H6V5ZM10 6H3V13H10V6Z" fill="#C5C5C5"/></svg>',
+	collapse: '<svg style="transform: rotate(-90deg);" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd"  d="M14.207 1.707L13.5 1L7.49997 7L1.49997 1L0.792969 1.707L7.14597 8.061H7.85397L14.207 1.707ZM14.207 7.70688L13.5 6.99988L7.49997 12.9999L1.49997 6.99988L0.792969 7.70688L7.14597 14.0609H7.85397L14.207 7.70688Z"/></svg>'
 };
 
 const GIT_FILE_CHANGE_TYPES = { 'A': 'Added', 'M': 'Modified', 'D': 'Deleted', 'R': 'Renamed', 'U': 'Untracked' };