From a1f5c7bfce6af221930df8c417057ca7946c810e Mon Sep 17 00:00:00 2001
From: velengel <kounakadora528@gmail.com>
Date: Tue, 23 Nov 2021 11:44:10 +0900
Subject: [PATCH] Add copy Commit ID button in commits list (#17759)

* fix: implement commit id copy to clipboard

* fix: remove abundant attributes / consider edge-case

* fix: locale_en fixed

* fix: use ui button

* tune copy button

* fix: button size

* Fix merge

Co-authored-by: Ysmr-Ry <ryo.yossy@live.jp>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Lunny Xiao <xiaolunwen@gmail.com>
---
 templates/repo/commits_list.tmpl | 3 ++-
 web_src/less/_base.less          | 7 +++++++
 web_src/less/_repository.less    | 2 +-
 3 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/templates/repo/commits_list.tmpl b/templates/repo/commits_list.tmpl
index 3a98a3afb2..e270a99972 100644
--- a/templates/repo/commits_list.tmpl
+++ b/templates/repo/commits_list.tmpl
@@ -23,7 +23,8 @@
 								{{$userName}}
 							{{end}}
 						</td>
-						<td class="sha">
+						<td class="sha df">
+							<button class="ui button copy-commit-sha df ac" data-clipboard-text="{{.ID}}">{{svg "octicon-copy" 14}}</button>
 							{{$class := "ui sha label"}}
 							{{if .Signature}}
 								{{$class = (printf "%s%s" $class " isSigned")}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index c09f3a2bdd..1477c1af49 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -985,6 +985,13 @@ a.ui.card:hover,
     margin: 0 6px;
   }
 
+  .button.copy-commit-sha {
+    border: 1px solid var(--color-light-border);
+    margin-right: 3px;
+    padding: 6px 6px 4px;
+    background: var(--color-light);
+  }
+
   .button.truncate {
     display: inline-block;
     max-width: 100%;
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 85607881dc..e0f8b98fa2 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -1364,7 +1364,7 @@
           text-align: center;
         }
 
-        width: 175px;
+        width: 200px;
       }
     }