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