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: #15515

Author: silverwind

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}}

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 {

web_src/less/_repository.less

@@ -396,23 +396,18 @@
 
         .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 {
             color: var(--color-primary);
           }
 
           .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 {

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;
+}

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: [