From 834fc74873e8047552e9181e130bd53d8e890eb0 Mon Sep 17 00:00:00 2001
From: silverwind <me@silverwind.io>
Date: Thu, 22 Apr 2021 23:43:44 +0200
Subject: [PATCH] Raw file view tweaks (#15520)

- Limit SVG images to 600px width
- Adjust size of view toggle buttons to match other buttons
- Make Edit/Delete buttons easier to click

Had to create a separate CSS file because the less parser can not parse
CSS4 case-insensitive attribute selectors which are widely supported by
browsers.

Fixes: https://github.com/go-gitea/gitea/issues/15515
---
 templates/repo/view_file.tmpl |  8 ++++----
 web_src/less/_base.less       |  8 ++++++++
 web_src/less/_repository.less | 18 +++++++++---------
 web_src/less/misc.css         |  5 +++++
 webpack.config.js             |  1 +
 5 files changed, 27 insertions(+), 13 deletions(-)
 create mode 100644 web_src/less/misc.css

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 889cb5a691..d9c1e93eaf 100644
--- a/templates/repo/view_file.tmpl
+++ b/templates/repo/view_file.tmpl
@@ -33,9 +33,9 @@
 		{{if not .ReadmeInList}}
 		<div class="file-header-right file-actions df ac">
 			{{if .HasSourceRenderedToggle}}
-				<div class="ui compact icon buttons">
-					<a href="{{$.Link}}?display=source" class="ui tiny basic button poping up {{if .IsDisplayingSource}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code"}}</a>
-					<a href="{{$.Link}}" class="ui tiny basic button poping up {{if .IsDisplayingRendered}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file"}}</a>
+				<div class="ui compact icon buttons two-toggle-buttons">
+					<a href="{{$.Link}}?display=source" class="ui mini basic button poping up {{if .IsDisplayingSource}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_source"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-code" 15}}</a>
+					<a href="{{$.Link}}" class="ui mini basic button poping up {{if .IsDisplayingRendered}}active{{end}}" data-content="{{.i18n.Tr "repo.file_view_rendered"}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-file" 15}}</a>
 				</div>
 			{{end}}
 			<div class="ui buttons mr-2">
@@ -50,7 +50,7 @@
 			</div>
 			{{if .Repository.CanEnableEditor}}
 				{{if .CanEditFile}}
-					<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon poping up"  data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span></a>
+					<a href="{{.RepoLink}}/_edit/{{EscapePound .BranchName}}/{{EscapePound .TreePath}}"><span class="btn-octicon poping up" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span></a>
 				{{else}}
 					<span class="btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span>
 				{{end}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 366ee073b4..bba378dde2 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -1594,6 +1594,14 @@ a.ui.label:hover {
   border-left: none;
 }
 
+.two-toggle-buttons .button:not(.active):first-of-type {
+  border-right: none;
+}
+
+.two-toggle-buttons .button.active:last-of-type {
+  border-left: 1px solid var(--color-light-border);
+}
+
 .ui.labeled.button.disabled > .button,
 .ui.basic.buttons .button,
 .ui.basic.button {
diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less
index 7e6f398f3f..70ad8dd730 100644
--- a/web_src/less/_repository.less
+++ b/web_src/less/_repository.less
@@ -396,15 +396,10 @@
 
         .file-actions {
           .btn-octicon {
-            display: inline-block;
-            padding: 5px;
-            margin-left: 5px;
             line-height: 1;
-            color: var(--color-text);
+            padding: 10px 8px;
             vertical-align: middle;
-            background: transparent;
-            border: 0;
-            outline: none;
+            color: var(--color-text);
           }
 
           .btn-octicon:hover {
@@ -412,7 +407,7 @@
           }
 
           .btn-octicon-danger:hover {
-            color: #bd2c00;
+            color: var(--color-red);
           }
 
           .btn-octicon.disabled {
@@ -430,13 +425,18 @@
       .view-raw {
         padding: 5px;
 
-        * {
+        > * {
           max-width: 100%;
+          border: 1px solid var(--color-secondary);
         }
 
         img {
+          margin: 1rem 0;
           border-radius: 0;
+          object-fit: contain;
         }
+
+        /* also see misc.css for one more related rule */
       }
 
       .plain-text {
diff --git a/web_src/less/misc.css b/web_src/less/misc.css
new file mode 100644
index 0000000000..02b849fd09
--- /dev/null
+++ b/web_src/less/misc.css
@@ -0,0 +1,5 @@
+/* can not have this selector in less because of https://github.com/less/less.js/issues/3027 */
+.view-raw img[src$='.svg' i] {
+  max-height: 600px !important;
+  max-width: 600px !important;
+}
diff --git a/webpack.config.js b/webpack.config.js
index 1b668e75cc..cb5b6c1b6a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -48,6 +48,7 @@ export default {
       resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
       resolve(__dirname, 'web_src/js/index.js'),
       resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
+      resolve(__dirname, 'web_src/less/misc.css'),
       resolve(__dirname, 'web_src/less/index.less'),
     ],
     swagger: [