Skip to content

Commit 834fc74

Browse files
authored
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
1 parent 8ea1d32 commit 834fc74

File tree

5 files changed

+27
-13
lines changed

5 files changed

+27
-13
lines changed

templates/repo/view_file.tmpl

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -33,9 +33,9 @@
3333
{{if not .ReadmeInList}}
3434
<div class="file-header-right file-actions df ac">
3535
{{if .HasSourceRenderedToggle}}
36-
<div class="ui compact icon buttons">
37-
<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>
38-
<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>
36+
<div class="ui compact icon buttons two-toggle-buttons">
37+
<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>
38+
<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>
3939
</div>
4040
{{end}}
4141
<div class="ui buttons mr-2">
@@ -50,7 +50,7 @@
5050
</div>
5151
{{if .Repository.CanEnableEditor}}
5252
{{if .CanEditFile}}
53-
<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>
53+
<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>
5454
{{else}}
5555
<span class="btn-octicon poping up disabled" data-content="{{.EditFileTooltip}}" data-position="bottom center" data-variation="tiny inverted">{{svg "octicon-pencil"}}</span>
5656
{{end}}

web_src/less/_base.less

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1594,6 +1594,14 @@ a.ui.label:hover {
15941594
border-left: none;
15951595
}
15961596

1597+
.two-toggle-buttons .button:not(.active):first-of-type {
1598+
border-right: none;
1599+
}
1600+
1601+
.two-toggle-buttons .button.active:last-of-type {
1602+
border-left: 1px solid var(--color-light-border);
1603+
}
1604+
15971605
.ui.labeled.button.disabled > .button,
15981606
.ui.basic.buttons .button,
15991607
.ui.basic.button {

web_src/less/_repository.less

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -396,23 +396,18 @@
396396

397397
.file-actions {
398398
.btn-octicon {
399-
display: inline-block;
400-
padding: 5px;
401-
margin-left: 5px;
402399
line-height: 1;
403-
color: var(--color-text);
400+
padding: 10px 8px;
404401
vertical-align: middle;
405-
background: transparent;
406-
border: 0;
407-
outline: none;
402+
color: var(--color-text);
408403
}
409404

410405
.btn-octicon:hover {
411406
color: var(--color-primary);
412407
}
413408

414409
.btn-octicon-danger:hover {
415-
color: #bd2c00;
410+
color: var(--color-red);
416411
}
417412

418413
.btn-octicon.disabled {
@@ -430,13 +425,18 @@
430425
.view-raw {
431426
padding: 5px;
432427

433-
* {
428+
> * {
434429
max-width: 100%;
430+
border: 1px solid var(--color-secondary);
435431
}
436432

437433
img {
434+
margin: 1rem 0;
438435
border-radius: 0;
436+
object-fit: contain;
439437
}
438+
439+
/* also see misc.css for one more related rule */
440440
}
441441

442442
.plain-text {

web_src/less/misc.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
/* can not have this selector in less because of https://github.com/less/less.js/issues/3027 */
2+
.view-raw img[src$='.svg' i] {
3+
max-height: 600px !important;
4+
max-width: 600px !important;
5+
}

webpack.config.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -48,6 +48,7 @@ export default {
4848
resolve(__dirname, 'web_src/fomantic/build/semantic.js'),
4949
resolve(__dirname, 'web_src/js/index.js'),
5050
resolve(__dirname, 'web_src/fomantic/build/semantic.css'),
51+
resolve(__dirname, 'web_src/less/misc.css'),
5152
resolve(__dirname, 'web_src/less/index.less'),
5253
],
5354
swagger: [

0 commit comments

Comments
 (0)