diff options
author | silverwind <me@silverwind.io> | 2021-11-16 09:16:05 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-11-16 16:16:05 +0800 |
commit | 23bd7b1211a80aa3b0dcb60ec4a1c0089ff28dd4 (patch) | |
tree | 38fafd772b6341daa87cb256ee10dfdcf5a87a48 /web_src/less/markup/codecopy.less | |
parent | d789670894d09d7db96f4cd2dc3d57d2424eb753 (diff) | |
download | gitea-23bd7b1211a80aa3b0dcb60ec4a1c0089ff28dd4.tar.gz gitea-23bd7b1211a80aa3b0dcb60ec4a1c0089ff28dd4.zip |
Add copy button to markdown code blocks (#17638)
* Add copy button to markdown code blocks
Done mostly in JS because I think it's better not to try getting buttons
past the markup sanitizer.
* add svg module tests
* fix sanitizer regexp
* remove outdated comment
* vertically center button in issue comments as well
* add comment to css
* fix undefined on view file line copy
* combine animation less files
* Update modules/markup/markdown/markdown.go
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
* add test for different sizes
* add cloneNode and add tests for it
* use deep clone
* remove useless optional chaining
* remove the svg node cache
* unify clipboard copy string and i18n
* remove unused var
* remove unused localization
* minor css tweaks to the button
* comment tweak
* remove useless attribute
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Diffstat (limited to 'web_src/less/markup/codecopy.less')
-rw-r--r-- | web_src/less/markup/codecopy.less | 32 |
1 files changed, 32 insertions, 0 deletions
diff --git a/web_src/less/markup/codecopy.less b/web_src/less/markup/codecopy.less new file mode 100644 index 0000000000..b2ce77aaa1 --- /dev/null +++ b/web_src/less/markup/codecopy.less @@ -0,0 +1,32 @@ +.markup .code-block { + position: relative; +} + +.markup .code-copy { + position: absolute; + top: 8px; + right: 6px; + padding: 9px; + visibility: hidden; + animation: fadeout .2s both; +} + +/* adjustments for comment content having only 14px font size */ +.repository.view.issue .comment-list .comment .markup .code-copy { + right: 5px; + padding: 8px; +} + +/* can not use regular transparent button colors for hover and active states because + we need opaque colors here as code can appear behind the button */ +.markup .code-copy:hover { + background: var(--color-secondary) !important; +} +.markup .code-copy:active { + background: var(--color-secondary-dark-1) !important; +} + +.markup .code-block:hover .code-copy { + visibility: visible; + animation: fadein .2s both; +} |