use vscode-codicons instead of unicode icons

adds new optional `title` field to actions

fixes #3

README.md

@@ -58,7 +58,8 @@ The only required parameters per action are `title` and `args`.
 "git-log--graph.actions.branch": [
     // ... the default actions, VSCode should put them here automatically so you can also edit them.
     {
-        "title": "⇆   Switch", // Whatever you want to appear on the button itself. Title is also used as a cache key (see `Save` above).
+        "title": "Switch", // Whatever you want to appear on the button itself. Title is also used as a cache key (see `Save` above).
+        "icon": "arrow-swap", // An icon to display next to the title. Choose one from https://microsoft.github.io/vscode-codicons/dist/codicon.html
         "args": "switch '$1'", // The actual command, appended to `git `. This will be executed WITHOUT VALIDATION SO BE CAREFUL. $1, $2 and so on are placeholders for the respective `params`.
         "params": [ "{BRANCH_NAME}" ], // Default values for the `args` placeholders. You can write anything here, including special keywords that include: `{BRANCH_NAME}`, `{COMMIT_HASH}`, {SOURCE_BRANCH_NAME} and {TARGET_BRANCH_NAME} (where it makes sense).
         // `options` are just an easy and quick way to toggle common trailing options. You can also specify them manually in `args` of course, given that `args` is also editable yet again at runtime.

package.json

@@ -48,6 +48,9 @@
 							"title": {
 								"type": "string"
 							},
+							"icon": {
+								"type": "string"
+							},
 							"description": {
 								"type": "string"
 							},
@@ -88,7 +91,8 @@
 					},
 					"default": [
 						{
-							"title": "↧",
+							"title": "",
+							"icon": "fold-down",
 							"description": "Stash (include untracked)",
 							"args": "stash -u",
 							"options": [
@@ -100,19 +104,22 @@
 							"immediate": true
 						},
 						{
-							"title": "↥",
+							"title": "",
+							"icon": "fold-up",
 							"description": "Stash pop",
 							"args": "stash pop",
 							"immediate": true
 						},
 						{
-							"title": "⇩",
+							"title": "",
+							"icon": "cloud-download",
 							"description": "Fetch all",
 							"args": "fetch --all",
 							"immediate": true
 						},
 						{
-							"title": "🛇",
+							"title": "",
+							"icon": "circle-slash",
 							"description": "Abort merge or cherry-pick",
 							"args": "merge --abort; git cherry-pick --abort; git reset --merge",
 							"immediate": true,
@@ -133,6 +140,9 @@
 							"title": {
 								"type": "string"
 							},
+							"icon": {
+								"type": "string"
+							},
 							"description": {
 								"type": "string"
 							},
@@ -173,7 +183,8 @@
 					},
 					"default": [
 						{
-							"title": "⛙   Merge {SOURCE_BRANCH_NAME} into {TARGET_BRANCH_NAME}...",
+							"title": "Merge {SOURCE_BRANCH_NAME} into {TARGET_BRANCH_NAME}...",
+							"icon": "git-merge",
 							"args": "checkout '$2' && git merge '$1'",
 							"params": [
 								"{SOURCE_BRANCH_NAME}",
@@ -187,15 +198,17 @@
 							]
 						},
 						{
-							"title": "↦   Rebase {SOURCE_BRANCH_NAME} into {TARGET_BRANCH_NAME}...",
+							"title": "Rebase {SOURCE_BRANCH_NAME} into {TARGET_BRANCH_NAME}...",
+							"icon": "references",
 							"args": "checkout '$2' && git rebase '$1'",
 							"params": [
 								"{SOURCE_BRANCH_NAME}",
 								"{TARGET_BRANCH_NAME}"
 							]
 						},
 						{
-							"title": "⎌   Reset {SOURCE_BRANCH_NAME} onto {TARGET_BRANCH_NAME}...",
+							"title": "Reset {SOURCE_BRANCH_NAME} onto {TARGET_BRANCH_NAME}...",
+							"icon": "reply",
 							"args": "checkout '$1' && git reset '$1'",
 							"params": [
 								"{SOURCE_BRANCH_NAME}",
@@ -227,6 +240,9 @@
 							"title": {
 								"type": "string"
 							},
+							"icon": {
+								"type": "string"
+							},
 							"description": {
 								"type": "string"
 							},
@@ -267,23 +283,26 @@
 					},
 					"default": [
 						{
-							"title": "→   Checkout",
+							"title": "Checkout",
+							"icon": "git-commit",
 							"immediate": true,
 							"args": "checkout '$1'",
 							"params": [
 								"{COMMIT_HASH}"
 							]
 						},
 						{
-							"title": "+   Create branch",
+							"title": "Create branch",
+							"icon": "add",
 							"args": "branch '$1' '$2'",
 							"params": [
 								"new_branch_name",
 								"{COMMIT_HASH}"
 							]
 						},
 						{
-							"title": "𖣣   Cherry pick",
+							"title": "Cherry pick",
+							"icon": "record",
 							"args": "cherry-pick '$1'",
 							"params": [
 								"{COMMIT_HASH}"
@@ -296,7 +315,8 @@
 							]
 						},
 						{
-							"title": "↺   Revert",
+							"title": "Revert",
+							"icon": "discard",
 							"args": "revert '$1'",
 							"params": [
 								"{COMMIT_HASH}"
@@ -309,14 +329,16 @@
 							]
 						},
 						{
-							"title": "↦   Rebase",
+							"title": "Rebase",
+							"icon": "references",
 							"args": "rebase '$1'",
 							"params": [
 								"{COMMIT_HASH}"
 							]
 						},
 						{
-							"title": "⎌   Reset",
+							"title": "Reset",
+							"icon": "reply",
 							"args": "reset '$1'",
 							"params": [
 								"{COMMIT_HASH}"
@@ -347,6 +369,9 @@
 							"title": {
 								"type": "string"
 							},
+							"icon": {
+								"type": "string"
+							},
 							"description": {
 								"type": "string"
 							},
@@ -409,6 +434,9 @@
 							"title": {
 								"type": "string"
 							},
+							"icon": {
+								"type": "string"
+							},
 							"description": {
 								"type": "string"
 							},
@@ -449,7 +477,8 @@
 					},
 					"default": [
 						{
-							"title": "→   Checkout",
+							"title": "Checkout",
+							"icon": "git-commit",
 							"description": "",
 							"immediate": true,
 							"args": "checkout '$1'",
@@ -458,7 +487,8 @@
 							]
 						},
 						{
-							"title": "⛙   Merge",
+							"title": "Merge",
+							"icon": "git-merge",
 							"args": "merge '$1'",
 							"params": [
 								"{BRANCH_NAME}"
@@ -471,15 +501,17 @@
 							]
 						},
 						{
-							"title": "✎   Rename",
+							"title": "Rename",
+							"icon": "edit",
 							"args": "branch -m '$1' '$2'",
 							"params": [
 								"{BRANCH_NAME}",
 								"new_branch_name"
 							]
 						},
 						{
-							"title": "🗑   Delete",
+							"title": "Delete",
+							"icon": "trash",
 							"args": "branch -d '$1'",
 							"params": [
 								"{BRANCH_NAME}"
@@ -492,7 +524,8 @@
 							]
 						},
 						{
-							"title": "⥁   Rebase",
+							"title": "Rebase",
+							"icon": "references",
 							"args": "rebase '$1'",
 							"params": [
 								"{BRANCH_NAME}"

src/extension.coffee

@@ -21,7 +21,7 @@ module.exports.activate = (###* @type vscode.ExtensionContext ### context) =>
 			(try await git "show \"#{uri.path}\"") or ''
 
 	context.subscriptions.push vscode.commands.registerCommand 'git-log--graph.start', =>
-		panel = vscode.window.createWebviewPanel(EXT_NAME, EXT_NAME, vscode.window.activeTextEditor?.viewColumn or 1, { enableScripts: true, retainContextWhenHidden: true, localResourceRoots: [ vscode.Uri.joinPath(context.extensionUri, 'web-dist'), vscode.Uri.joinPath(context.extensionUri, 'media') ] })
+		panel = vscode.window.createWebviewPanel(EXT_NAME, EXT_NAME, vscode.window.activeTextEditor?.viewColumn or 1, { enableScripts: true, retainContextWhenHidden: true, localResourceRoots: [ vscode.Uri.joinPath(context.extensionUri, 'web-dist') ] })
 		panel.iconPath = vscode.Uri.joinPath(context.extensionUri, "logo.png");
 		view = panel.webview
 
@@ -66,6 +66,12 @@ module.exports.activate = (###* @type vscode.ExtensionContext ### context) =>
 				<meta http-equiv='Content-Security-Policy' content=\"default-src 'none'; style-src #{view.cspSource} 'unsafe-inline'; script-src #{view.cspSource}; font-src #{view.cspSource};\">
 				<meta name='viewport' content='width=device-width, initial-scale=1.0'>
 				<link href='#{get_uri 'web-dist', 'css', 'app.css'}' rel='stylesheet'>
+				<style>
+					@font-face {
+						font-family: 'codicon';
+						src: url('#{get_uri 'web-dist', 'fonts', 'codicon.ttf'}') format('truetype');
+					}
+				</style>
 				<title>#{EXT_NAME}</title>
 			</head>
 			<body>

web/package.json

@@ -14,6 +14,7 @@
   "devDependencies": {
     "@vue/cli": "^5.0.4",
     "@vue/cli-service": "~5.0.0",
+		"@vscode/codicons": "^0.0.20",
     "coffee-loader": "^1.0.0",
     "coffeescript": ">= 2.0.0",
     "slm": "^2.0.0",

web/src/views/GitActionButton.vue

@@ -1,7 +1,10 @@
 <template lang="slm">
 div
-	button.btn @click="show_popup=true" :title="git_action.description"
-		| {{ git_action.title }}
+	button.btn.gap-5 @click="show_popup=true" :title="git_action.description"
+		.icon.center v-if="git_action.icon"
+			i.codicon :class="'codicon-'+git_action.icon"
+		.title v-if="git_action.title"
+			| {{ git_action.title }}
 	popup v-if="show_popup" @close="show_popup=false"
 		.selected-input
 			p Execute Git command

web/src/views/GitInput.vue

@@ -9,19 +9,22 @@ div.col.gap-10
 				details
 					summary Edited. Be careful!
 					| Editing this field can be dangerous, as it is executed without escaping. If you do not know what you are doing, please click Reset.
-			button.btn.btn-2 type="button" v-if="text_changed" @click="reset_command()"
-				| ↺ Reset
+			button.btn.btn-2.gap-3 type="button" v-if="text_changed" @click="reset_command()"
+				i.codicon.codicon-discard
+				| Reset
 			div v-if="is_saved && ! has_unsaved_changes"
 				| Saved
-			button.btn.btn-2 type="button" v-if="has_unsaved_changes" @click="save()"
-				| 🖫 Save
+			button.btn.btn-2.gap-3 type="button" v-if="has_unsaved_changes" @click="save()"
+				i.codicon.codicon-save
+				| Save
 		.param v-for="(param, i) in params"
 			label.row.align-center.gap-5
 				| Param \${{ i+1 }}
 				input v-model="params[i]"
 		div
-			button.btn
-				| ✓ Execute
+			button.btn.gap-3
+				i.codicon.codicon-check
+				| Execute
 	.error-response.padding-l v-if="error"
 		| Command failed: 
 		| {{ error }}

web/src/views/MainView.vue

@@ -22,7 +22,8 @@
 						li Click on any of the branch names to jump to the tip of it.
 				aside#actions.center.gap-5
 					git-action-button.global-action v-for="action of global_actions" :git_action="action" @change="do_log()"
-					button#refresh.btn @click="do_log()" title="Refresh" ⟳
+					button#refresh.btn.center @click="do_log()" title="Refresh"
+						i.codicon.codicon-refresh
 			aside#search.center.gap-5.justify-flex-end
 				input#txt-filter v-model="txt_filter" placeholder="🔍 search subject, hash, author" ref="txt_filter_ref" @keyup.enter="txt_filter_enter($event)"
 				button#clear-filter v-if="txt_filter" @click="clear_filter()"

web/src/vue-app.coffee

@@ -8,6 +8,7 @@ import drag from './directives/drag'
 import drop from './directives/drop'
 import { RecycleScroller } from 'vue-virtual-scroller'
 import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'
+import '@vscode/codicons/dist/codicon.css'
 
 app = createApp(App)
 

web/yarn.lock

@@ -1530,6 +1530,11 @@
   dependencies:
     "@types/node" "*"
 
+"@vscode/codicons@^0.0.20":
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/@vscode/codicons/-/codicons-0.0.20.tgz#8f52b8caf3b89fbb66bb3cd856c723e7696d5a46"
+  integrity sha512-LlO6K7nzrIWDCZN1Zi6J6ibxrpMibSAct+zNjAwpkNkwup6cJLx5diYvsOJODMPWOuQlBO21qkxtdkSRzW6+Jw==
+
 "@vue/cli-overlay@^5.0.8":
   version "5.0.8"
   resolved "https://registry.yarnpkg.com/@vue/cli-overlay/-/cli-overlay-5.0.8.tgz#b61477acdc43bbd42fce6326d228471201ecdcdd"