Skip to content

File header tweaks, add CSS helpers #12635

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Sep 8, 2020
Merged

File header tweaks, add CSS helpers #12635

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4c14d1f
File header tweaks, add CSS helpers
silverwind Aug 29, 2020
4dc6f45
Merge branch 'master' into more-octicons
zeripath Sep 7, 2020
93351af
Merge branch 'master' into more-octicons
techknowlogick Sep 8, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .stylelintrc
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ rules:
block-closing-brace-empty-line-before: null
color-hex-length: null
comment-empty-line-before: null
declaration-block-single-line-max-declarations: null
declaration-empty-line-before: null
indentation: 2
no-descending-specificity: null
Expand Down
14 changes: 12 additions & 2 deletions modules/templates/helper.go
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -468,13 +468,23 @@ func NewTextFuncMap() []texttmpl.FuncMap {
var widthRe = regexp.MustCompile(`width="[0-9]+?"`)
var heightRe = regexp.MustCompile(`height="[0-9]+?"`)

// SVG render icons
func SVG(icon string, size int) template.HTML {
// SVG render icons - arguments icon name (string), size (int), class (string)
func SVG(icon string, others ...interface{}) template.HTML {
var size = others[0].(int)

class := ""
if len(others) > 1 && others[1].(string) != "" {
class = others[1].(string)
}

if svgStr, ok := svg.SVGs[icon]; ok {
if size != 16 {
svgStr = widthRe.ReplaceAllString(svgStr, fmt.Sprintf(`width="%d"`, size))
svgStr = heightRe.ReplaceAllString(svgStr, fmt.Sprintf(`height="%d"`, size))
}
if class != "" {
svgStr = strings.Replace(svgStr, `class="`, fmt.Sprintf(`class="%s `, class), 1)
}
return template.HTML(svgStr)
}
return template.HTML("")
Expand Down
14 changes: 5 additions & 9 deletions templates/repo/view_file.tmpl
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,8 @@
<div class="{{TabSizeClass .Editorconfig .FileName}} non-diff-file-content">
<h4 class="file-header ui top attached header">
<div class="file-header-left">
<div class="file-header-left df ac">
{{if .ReadmeInList}}
{{if .FileIsSymlink}}
<i class="icons"><i class="book icon"></i><i class="bottom left corner tiny inverted share icon"></i></i>
{{else}}
<i class="book icon"></i>
{{end}}
{{svg "octicon-book" 16 "mr-3"}}
<strong>{{.FileName}}</strong>
{{else}}
<div class="file-info text grey normal mono">
Expand All @@ -26,16 +22,16 @@
</div>
{{end}}
{{if .LFSLock}}
<div class="file-info-entry">
<i class="fa fa-lock poping up disabled" data-content="{{.LFSLockHint}}" data-position="bottom center" data-variation="tiny inverted"></i>
<div class="file-info-entry ui" data-tooltip="{{.LFSLockHint}}" data-inverted="">
{{svg "octicon-lock" 16 "mr-2"}}
<a href="{{AppSubUrl}}/{{.LFSLock.Owner.Name}}">{{.LFSLockOwner}}</a>
</div>
{{end}}
</div>
{{end}}
</div>
{{if not .ReadmeInList}}
<div class="file-header-right">
<div class="file-header-right df ac">
<div class="ui right file-actions">
<div class="ui buttons">
<a class="ui button" href="{{EscapePound $.RawFileLink}}">{{.i18n.Tr "repo.file_raw"}}</a>
Expand Down
5 changes: 5 additions & 0 deletions web_src/less/_repository.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3139,6 +3139,11 @@ td.blob-excerpt {
align-items: center;
}

.file-info-entry {
display: flex;
align-items: center;
}

.file-info-entry + .file-info-entry {
border-left: 1px solid currentColor;
margin-left: 8px;
Expand Down
107 changes: 101 additions & 6 deletions web_src/less/helpers.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,101 @@
.flex-0 {
flex: 0;
}
.flex-1 {
flex: 1;
}
.df { display: flex; }
.ac { align-items: center; }
.jc { justify-content: center; }

.m-0 { margin: 0 !important; }
.m-1 { margin: .125rem !important; }
.m-2 { margin: .25rem !important; }
.m-3 { margin: .5rem !important; }
.m-4 { margin: 1rem !important; }
.m-5 { margin: 2rem !important; }

.ml-0 { margin-left: 0 !important; }
.ml-1 { margin-left: .125rem !important; }
.ml-2 { margin-left: .25rem !important; }
.ml-3 { margin-left: .5rem !important; }
.ml-4 { margin-left: 1rem !important; }
.ml-5 { margin-left: 2rem !important; }

.mr-0 { margin-right: 0 !important; }
.mr-1 { margin-right: .125rem !important; }
.mr-2 { margin-right: .25rem !important; }
.mr-3 { margin-right: .5rem !important; }
.mr-4 { margin-right: 1rem !important; }
.mr-5 { margin-right: 2rem !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: .125rem !important; }
.mt-2 { margin-top: .25rem !important; }
.mt-3 { margin-top: .5rem !important; }
.mt-4 { margin-top: 1rem !important; }
.mt-5 { margin-top: 2rem !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: .125rem !important; }
.mb-2 { margin-bottom: .25rem !important; }
.mb-3 { margin-bottom: .5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-5 { margin-bottom: 2rem !important; }

.mx-0 { margin-left: 0 !important; margin-right: 0 !important; }
.mx-1 { margin-left: .125rem !important; margin-right: .125rem !important; }
.mx-2 { margin-left: .25rem !important; margin-right: .25rem !important; }
.mx-3 { margin-left: .5rem !important; margin-right: .5rem !important; }
.mx-4 { margin-left: 1rem !important; margin-right: 1rem !important; }
.mx-5 { margin-left: 2rem !important; margin-right: 2rem !important; }

.my-0 { margin-top: 0 !important; margin-bottom: 0 !important; }
.my-1 { margin-top: .125rem !important; margin-bottom: .125rem !important; }
.my-2 { margin-top: .25rem !important; margin-bottom: .25rem !important; }
.my-3 { margin-top: .5rem !important; margin-bottom: .5rem !important; }
.my-4 { margin-top: 1rem !important; margin-bottom: 1rem !important; }
.my-5 { margin-top: 2rem !important; margin-bottom: 2rem !important; }

.p-0 { padding: 0 !important; }
.p-1 { padding: .125rem !important; }
.p-2 { padding: .25rem !important; }
.p-3 { padding: .5rem !important; }
.p-4 { padding: 1rem !important; }
.p-5 { padding: 2rem !important; }

.pl-0 { padding-left: 0 !important; }
.pl-1 { padding-left: .125rem !important; }
.pl-2 { padding-left: .25rem !important; }
.pl-3 { padding-left: .5rem !important; }
.pl-4 { padding-left: 1rem !important; }
.pl-5 { padding-left: 2rem !important; }

.pr-0 { padding-right: 0 !important; }
.pr-1 { padding-right: .125rem !important; }
.pr-2 { padding-right: .25rem !important; }
.pr-3 { padding-right: .5rem !important; }
.pr-4 { padding-right: 1rem !important; }
.pr-5 { padding-right: 2rem !important; }

.pt-0 { padding-top: 0 !important; }
.pt-1 { padding-top: .125rem !important; }
.pt-2 { padding-top: .25rem !important; }
.pt-3 { padding-top: .5rem !important; }
.pt-4 { padding-top: 1rem !important; }
.pt-5 { padding-top: 2rem !important; }

.pb-0 { padding-bottom: 0 !important; }
.pb-1 { padding-bottom: .125rem !important; }
.pb-2 { padding-bottom: .25rem !important; }
.pb-3 { padding-bottom: .5rem !important; }
.pb-4 { padding-bottom: 1rem !important; }
.pb-5 { padding-bottom: 2rem !important; }

.px-0 { padding-left: 0 !important; padding-right: 0 !important; }
.px-1 { padding-left: .125rem !important; padding-right: .125rem !important; }
.px-2 { padding-left: .25rem !important; padding-right: .25rem !important; }
.px-3 { padding-left: .5rem !important; padding-right: .5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-5 { padding-left: 2rem !important; padding-right: 2rem !important; }

.py-0 { padding-top: 0 !important; padding-bottom: 0 !important; }
.py-1 { padding-top: .125rem !important; padding-bottom: .125rem !important; }
.py-2 { padding-top: .25rem !important; padding-bottom: .25rem !important; }
.py-3 { padding-top: .5rem !important; padding-bottom: .5rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.py-5 { padding-top: 2rem !important; padding-bottom: 2rem !important; }
3 changes: 2 additions & 1 deletion web_src/less/index.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
@import "~font-awesome/css/font-awesome.css";

@import "./helpers.less";
@import "./features/gitgraph.less";
@import "./features/animations.less";
@import "./markdown/mermaid.less";
Expand All @@ -21,3 +20,5 @@
@import "_explore";
@import "_review";
@import "_chroma";

@import "./helpers.less";