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

diff --git a/templates/repo/view_file.tmpl b/templates/repo/view_file.tmpl
index 889cb5a691d0de7959f393833a51dc2e668ae904..d9c1e93eaf95acc0df9bee5fb3b5684288fc5778 100644 (file)
--- 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 366ee073b4c038f424d2a8c0fadfb1f6f475b264..bba378dde2476be732c610d40dd3e7bb2275f00b 100644 (file)
--- 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 7e6f398f3f3bde4bd6784585d4340f0e301e5842..70ad8dd730868ade6780dcc412acadf064bf9314 100644 (file)
--- 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 (file)
index 0000000..02b849f
--- /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 1b668e75ccfeeb078c308153079993135b81be8a..cb5b6c1b6ac1071da40523aee1edb047177362a6 100644 (file)
--- 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: [