Add new setting "git-log--graph.details-panel-position": Decide whe…

…re the commit details should appear when you click a row in the main view

closes #86

package.json

@@ -97,6 +97,15 @@
 						"As a view in the Source Control side nav section. You will also be able to drag it to any other place in the interface."
 					]
 				},
+				"git-log--graph.details-panel-position": {
+					"description": "Decide where the commit details should appear when you click a row in the main view.",
+					"type": "string",
+					"default": "right",
+					"enum": [
+						"right",
+						"bottom"
+					]
+				},
 				"git-log--graph.hide-quick-branch-tips": {
 					"description": "If active, the area at the top with the dotted branch lines and git status will not be shown anymore.",
 					"type": "boolean",

web/src/views/CommitDetails.coffee

@@ -21,6 +21,9 @@ export default defineComponent
 			type: Object
 			required: true
 	setup: (props) ->
+		details_panel_position = computed =>
+			config.value['details-panel-position']
+
 		branch_tips = computed =>
 			props.commit.refs.filter is_branch
 
@@ -98,4 +101,5 @@ export default defineComponent
 			show_branch
 			config_show_buttons
 			parent_hashes
+			details_panel_position
 		}

web/src/views/CommitDetails.vue

@@ -1,58 +1,62 @@
 <template lang="slm">
 .commit-details
-	h2.summary :title="commit.subject" {{ commit.subject }}
+	.row.fill-h
+		.left.flex-1
+			h2.summary :title="commit.subject" {{ commit.subject }}
 
-	p.body {{ body }}
+			p.body {{ body }}
 
-	template v-if="config_show_buttons"
-		.stash v-if="stash"
-			h3 Stash:
-			.row.gap-5.wrap
-				git-action-button v-for="action of stash_actions" :git_action="action"
-
-		.branch-tips v-if="branch_tips.length"
-			ul
-				li v-for="branch_tip of branch_tips"
-					ref-tip :git_ref="branch_tip" :commit="commit"
+			template v-if="config_show_buttons"
+				.stash v-if="stash"
+					h3 Stash:
 					.row.gap-5.wrap
-						git-action-button v-for="action of branch_actions(branch_tip)" :git_action="action"
-						button.show-branch.btn.gap-5 @click="show_branch(branch_tip)" title="Show the log for this branch only. Revert with a simple click on the main refresh button."
-							i.codicon.codicon-eye
-							| Show
+						git-action-button v-for="action of stash_actions" :git_action="action"
 
-		.tags v-if="tags.length"
-			ul v-for="tag, tag_i of tags"
-				li
-					ref-tip :git_ref="tag" :commit="commit"
-					pre {{ tag_details[tag_i] }}
-					.row.gap-5.wrap
-						git-action-button v-for="action of tag_actions(tag.name)" :git_action="action"
+				.branch-tips v-if="branch_tips.length"
+					ul
+						li v-for="branch_tip of branch_tips"
+							ref-tip :git_ref="branch_tip" :commit="commit"
+							.row.gap-5.wrap
+								git-action-button v-for="action of branch_actions(branch_tip)" :git_action="action"
+								button.show-branch.btn.gap-5 @click="show_branch(branch_tip)" title="Show the log for this branch only. Revert with a simple click on the main refresh button."
+									i.codicon.codicon-eye
+									| Show
 
-		.commit
-			h3
-				| This commit {{ commit.hash }}
-				button @click="$emit('hash_clicked',commit.hash)" title="Jump to commit"
-					i.codicon.codicon-link
-				| :
-			.row.gap-5.wrap
-				git-action-button v-for="action of commit_actions" :git_action="action"
+				.tags v-if="tags.length"
+					ul v-for="tag, tag_i of tags"
+						li
+							ref-tip :git_ref="tag" :commit="commit"
+							pre {{ tag_details[tag_i] }}
+							.row.gap-5.wrap
+								git-action-button v-for="action of tag_actions(tag.name)" :git_action="action"
 
-	files-diffs-list :files="changed_files" @show_diff="show_diff" @view_rev="view_rev"
+				.commit
+					h3
+						| This commit {{ commit.hash }}
+						button @click="$emit('hash_clicked',commit.hash)" title="Jump to commit"
+							i.codicon.codicon-link
+						| :
+					.row.gap-5.wrap
+						git-action-button v-for="action of commit_actions" :git_action="action"
+
+			files-diffs-list v-if="details_panel_position !== 'bottom'" :files="changed_files" @show_diff="show_diff" @view_rev="view_rev"
 
-	h3 Parent commits
-	ul
-		li v-for="parent_hash of parent_hashes"
-			| {{ parent_hash }}
-			button @click="$emit('hash_clicked',parent_hash)" title="Jump to commit"
-				i.codicon.codicon-link
+			h3 Parent commits
+			ul
+				li v-for="parent_hash of parent_hashes"
+					| {{ parent_hash }}
+					button @click="$emit('hash_clicked',parent_hash)" title="Jump to commit"
+						i.codicon.codicon-link
 
-	br
-	details
-		summary.align-center Compare...
-		| In order to compare this commit with another one, do <kbd>Ctrl</kbd>+Click on any other commit in the main view
+			br
+			details
+				summary.align-center Compare...
+				| In order to compare this commit with another one, do <kbd>Ctrl</kbd>+Click on any other commit in the main view
 
-	h3 Details
-	p Full hash: {{ commit.hash_long }}
+			h3 Details
+			p Full hash: {{ commit.hash_long }}
+		.right.flex-1
+			files-diffs-list v-if="details_panel_position === 'bottom'" :files="changed_files" @show_diff="show_diff" @view_rev="view_rev"
 </template>
 
 <script lang="coffee" src="./CommitDetails.coffee"></script>
@@ -69,4 +73,6 @@ h2.summary
 .branch-tips, .tags
 	.ref-tip
 		margin 20px 10px 10px
+.left, .right
+	overflow auto
 </style>

web/src/views/MainView.coffee

@@ -22,6 +22,9 @@ import RepoSelection from './RepoSelection.vue'
 export default
 	components: { CommitDetails, CommitsDetails, GitInput, GitActionButton, AllBranches, RefTip, SelectedGitAction, RepoSelection, History, CommitRow }
 	setup: ->
+		details_panel_position = computed =>
+			store.config.value['details-panel-position']
+
 		###* @type {string[]} ###
 		default_selected_commits_hashes = []
 		selected_commits_hashes = store.stateful_computed 'repo:selected-commits-hashes', default_selected_commits_hashes
@@ -331,6 +334,7 @@ export default
 
 		{
 			initialized
+			details_panel_position
 			filtered_commits
 			branches: store.branches
 			head_branch: store.head_branch

web/src/views/MainView.vue

@@ -1,7 +1,7 @@
 <template lang="slm">
 #main-view.fill.col
-	.row.flex-1
-		#left.col
+	.flex-1 :class="details_panel_position === 'bottom' ? 'col' : 'row'"
+		#main-panel.col
 			/ todo use suspend
 			p.loading v-if="!initialized"
 				| Loading...
@@ -42,7 +42,7 @@
 				commit-row.vis :height="110" v-if="connection_fake_commit" :commit="connection_fake_commit"
 			recycle-scroller#log.scroller.fill-w.flex-1 role="list" :items="filtered_commits" v-slot="{ item: commit }" key-field="i" :item-size="scroll_item_height" :buffer="0" :emit-update="true" @update="commits_scroller_updated" ref="commits_scroller_ref" tabindex="-1" v-context-menu="commit_context_menu_provider" @wheel="scroller_on_wheel" @keydown="scroller_on_keydown"
 				commit-row :commit="commit" :class="{selected_commit:selected_commits.includes(commit)}" @click="commit_clicked(commit,$event)" role="button" :data-commit-hash="commit.hash"
-		#right.col.flex-1 v-if="selected_commit || selected_commits.length"
+		#details-panel.col.flex-1 v-if="selected_commit || selected_commits.length"
 			template v-if="selected_commit"
 				commit-details#selected-commit.flex-1.fill-w.padding :commit="selected_commit" @hash_clicked="scroll_to_commit_hash_user($event)"
 				button#close-selected-commit.center @click="selected_commits=[]" title="Close"
@@ -74,11 +74,12 @@ details#log-config
 		color unset
 		padding 10px
 		flex 100% 1 0
-#left
+#main-panel
 	flex-shrink 1
 	width 100%
 	min-width 30%
-	resize horizontal
+	min-height 30%
+	resize both
 	overflow auto
 	position relative
 	> nav
@@ -177,8 +178,9 @@ details#log-config
 				background #292616
 
 
-#right
+#details-panel
 	min-width 400px
+	min-height @css{min(300px, 40vh)}
 	position relative
 	#selected-commit, #selected-commits
 		overflow auto