diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 08b202d192f84..a165b18077e19 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -468,6 +468,7 @@ keep_activity_private_popup = Makes the activity visible only for you and the ad lookup_avatar_by_mail = Look Up Avatar by Email Address federated_avatar_lookup = Federated Avatar Lookup enable_custom_avatar = Use Custom Avatar +current_avatar = Current avatar choose_new_avatar = Choose new avatar update_avatar = Update Avatar delete_current_avatar = Delete Current Avatar diff --git a/templates/explore/navbar.tmpl b/templates/explore/navbar.tmpl index 5b1e6b5d0605f..4fad600dbd73d 100644 --- a/templates/explore/navbar.tmpl +++ b/templates/explore/navbar.tmpl @@ -1,18 +1,20 @@
- - {{svg "octicon-repo"}} {{.i18n.Tr "explore.repos"}} - - {{if not .UsersIsDisabled}} - - {{svg "octicon-person"}} {{.i18n.Tr "explore.users"}} +
+ + {{svg "octicon-repo"}} {{.i18n.Tr "explore.repos"}} - {{end}} - - {{svg "octicon-organization"}} {{.i18n.Tr "explore.organizations"}} - - {{if .IsRepoIndexerEnabled}} - - {{svg "octicon-code"}} {{.i18n.Tr "explore.code"}} - - {{end}} + {{if not .UsersIsDisabled}} + + {{svg "octicon-person"}} {{.i18n.Tr "explore.users"}} + + {{end}} + + {{svg "octicon-organization"}} {{.i18n.Tr "explore.organizations"}} + + {{if .IsRepoIndexerEnabled}} + + {{svg "octicon-code"}} {{.i18n.Tr "explore.code"}} + + {{end}} +
diff --git a/templates/explore/repo_list.tmpl b/templates/explore/repo_list.tmpl index 91dc3d8bf40a7..440a12c14f500 100644 --- a/templates/explore/repo_list.tmpl +++ b/templates/explore/repo_list.tmpl @@ -2,15 +2,17 @@ {{range .Repos}}
-
+
+ {{- /* begin inline block */ -}} {{$avatar := (repoAvatar . 32 "mr-3")}} {{if $avatar}} {{$avatar}} {{end}} - {{if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name}} + {{- if or $.PageIsExplore $.PageIsProfileStarList }}{{if .Owner}}{{.Owner.Name}} / {{end}}{{end}}{{.Name -}} -
+ {{- /* end inline block */ -}} +
{{if .IsArchived}} {{$.i18n.Tr "repo.desc.archived"}} {{end}} diff --git a/templates/org/settings/options.tmpl b/templates/org/settings/options.tmpl index 09bf5e0caa16e..88d552296ec6a 100644 --- a/templates/org/settings/options.tmpl +++ b/templates/org/settings/options.tmpl @@ -88,9 +88,15 @@
{{.CsrfTokenHtml}} -
- - +
+
+ + {{avatar .Org 28 "mr-5"}} +
+
+ + +
diff --git a/templates/repo/header.tmpl b/templates/repo/header.tmpl index 71963d698c71f..8ba40dfd85ae6 100644 --- a/templates/repo/header.tmpl +++ b/templates/repo/header.tmpl @@ -1,38 +1,55 @@
{{with .Repository}}
-
+
-
+
{{$avatar := (repoAvatar . 32 "mr-3")}} - {{if $avatar}} + {{if $.PageIsSettings}} +
{{svg "octicon-tools" 32}}
+ {{else if $avatar}} {{$avatar}} {{else}} {{template "repo/icon" .}} {{end}} - {{.Owner.Name}} -
/
- {{.Name}} -
- {{if .IsTemplate}} - {{if .IsPrivate}} - {{$.i18n.Tr "repo.desc.private_template"}} - {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{$.i18n.Tr "repo.desc.internal_template"}} +
+ {{.Owner.Name}} +
/
+
+
+ {{- /* begin inline block */ -}} + {{.Name}} + {{- if $.PageIsSettings -}} +
/
{{$.i18n.Tr "repo.settings"}} + {{- else -}} + {{- /* end inline block */ -}} +
+ {{if .IsTemplate}} + {{if .IsPrivate}} + {{$.i18n.Tr "repo.desc.private_template"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{$.i18n.Tr "repo.desc.internal_template"}} + {{end}} + {{end}} + {{else}} + {{if .IsPrivate}} + {{$.i18n.Tr "repo.desc.private"}} + {{else}} + {{if .Owner.Visibility.IsPrivate}} + {{$.i18n.Tr "repo.desc.internal"}} + {{end}} + {{end}} {{end}} - {{end}} - {{else}} - {{if .IsPrivate}} - {{$.i18n.Tr "repo.desc.private"}} - {{else}} - {{if .Owner.Visibility.IsPrivate}} - {{$.i18n.Tr "repo.desc.internal"}} + {{if .IsArchived}} + {{$.i18n.Tr "repo.desc.archived"}} {{end}} - {{end}} - {{end}} - {{if .IsArchived}} - {{$.i18n.Tr "repo.desc.archived"}} + {{if $.Permission.IsAdmin}} + + {{svg "octicon-tools"}} + + {{end}} +
{{end}}
@@ -41,7 +58,7 @@ {{if .IsGenerated}}
{{$.i18n.Tr "repo.generated_from"}} {{SubStr .TemplateRepo.RelLink 1 -1}}
{{end}}
{{if not .IsBeingCreated}} -
+
{{if $.RepoTransfer}} {{$.CsrfTokenHtml}} @@ -97,9 +114,10 @@
{{end}} +{{if not $.PageIsSettings}}
{{if not .Repository.IsBeingCreated}} -
+
{{if .Permission.CanRead $.UnitTypeCode}} {{svg "octicon-code"}} {{.i18n.Tr "repo.code"}} @@ -117,7 +135,7 @@ {{if .Permission.CanRead $.UnitTypeExternalTracker}} - {{svg "octicon-link-external"}} {{.i18n.Tr "repo.issues"}} + {{svg "octicon-link-external"}} {{.i18n.Tr "repo.issues"}} {{end}} @@ -162,15 +180,15 @@ {{template "custom/extra_tabs" .}} - {{if .Permission.IsAdmin}} -
- - {{svg "octicon-tools"}} {{.i18n.Tr "repo.settings"}} - -
- {{end}} +
{{end}}
-
+
+
+
+
+
+
+{{end}}
diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl index 501c3c4630a40..78c29d45a49ca 100644 --- a/templates/repo/settings/navbar.tmpl +++ b/templates/repo/settings/navbar.tmpl @@ -1,4 +1,4 @@ -
+
{{.i18n.Tr "repo.settings.options"}} diff --git a/templates/repo/settings/options.tmpl b/templates/repo/settings/options.tmpl index 9d87101671ffb..64636edc087b8 100644 --- a/templates/repo/settings/options.tmpl +++ b/templates/repo/settings/options.tmpl @@ -57,14 +57,27 @@ {{.CsrfTokenHtml}} -
- - + {{$avatar := (repoAvatar .Repository 28 "mr-5")}} +
+
+ + {{if $avatar}} + {{$avatar}} + {{else}} +
{{svg "octicon-circle-slash" 16}}
+ {{end}} +
+
+ + +
- {{$.i18n.Tr "settings.delete_current_avatar"}} + {{if $avatar}} + {{$.i18n.Tr "settings.delete_current_avatar"}} + {{end}}
diff --git a/templates/user/settings/profile.tmpl b/templates/user/settings/profile.tmpl index ee3cc589041a8..755085ce0acf5 100644 --- a/templates/user/settings/profile.tmpl +++ b/templates/user/settings/profile.tmpl @@ -100,14 +100,24 @@
-
- - +
+ {{if .SignedUser.UseCustomAvatar}} +
+ + {{avatar .SignedUser 28 "mr-5"}} +
+ {{end}} +
+ + +
- {{$.i18n.Tr "settings.delete_current_avatar"}} + {{if .SignedUser.UseCustomAvatar}} + {{$.i18n.Tr "settings.delete_current_avatar"}} + {{end}}
diff --git a/web_src/less/_base.less b/web_src/less/_base.less index 351dbf5da013e..ca50f67ccd4d8 100644 --- a/web_src/less/_base.less +++ b/web_src/less/_base.less @@ -90,6 +90,7 @@ --color-text-light-3: #a0a0a0; --color-box-header: #f7f7f7; --color-box-body: #ffffff; + --color-box-body-transparent: #ffffff00; --color-footer: #ffffff; --color-timeline: #ececec; --color-input-text: #212121; @@ -97,6 +98,7 @@ --color-input-border: #dedede; --color-input-border-hover: #cecece; --color-navbar: #f8f8f8; + --color-navbar-transparent: #f8f8f800; --color-light: #00000004; --color-light-border: #0000001d; --color-hover: #0000000d; @@ -248,12 +250,12 @@ a.muted:hover, .page-content { margin-top: 15px; -} -.page-content .header-wrapper, -.page-content .new-menu { - margin-top: -15px !important; - padding-top: 15px !important; + .header-wrapper, + .new-menu { + margin-top: -15px !important; + padding-top: 15px !important; + } } .ui.input.focus > input, @@ -285,6 +287,11 @@ a.muted:hover, .ui.menu .item > .label { background: var(--color-grey); + + &:not(.floating) { + margin-left: 7px; + padding: .3em .5em; + } } .ui.link.menu .item:hover, @@ -1233,46 +1240,33 @@ footer { margin-bottom: 15px; background: var(--color-navbar); border-bottom: 1px solid var(--color-secondary) !important; - overflow: auto; -} + overflow-y: visible; -@media @mediaSm { - .ui.menu.new-menu { - overflow: visible !important; - } -} + .new-menu-inner { + display: flex; + overflow-x: auto; + overflow-y: hidden; + margin-left: auto; + margin-right: auto; -.ui.menu.new-menu .new-menu-inner { - display: flex; - margin-left: auto; - margin-right: auto; -} + @media @mediaSm { + & { + flex-wrap: wrap; + overflow: visible !important; + margin-left: 0; + margin-right: 0; + } + } -@media @mediaSm { - .ui.menu.new-menu .new-menu-inner { - flex-wrap: wrap; - margin-left: 0; - margin-right: 0; + &::before, + &::after { + height: 38px !important; + } } } -.ui.menu.new-menu::after { - position: absolute; - display: block; - background: linear-gradient(to right, transparent, var(--color-navbar) 100%); - content: ''; - right: 0; - height: 39px; - width: 60px; - visibility: visible; - pointer-events: none; -} - -.ui.menu.new-menu.shadow-body::after { - background: linear-gradient(to right, transparent, var(--color-body) 100%); -} - .ui.menu.new-menu .item { + height: 40px; margin: 0 !important; } @@ -1282,25 +1276,50 @@ footer { } } -.ui.menu.new-menu .item:last-child { - padding-right: 30px !important; -} +.ui.segment.sub-menu .list, +.ui.tabs.container .ui.menu, +.ui.menu.new-menu .new-menu-inner { + &::before, + &::after { + content: ""; + position: absolute; + display: block; + min-width: 1em; + height: 39px; + visibility: visible; + pointer-events: none; + } -.ui.menu.new-menu::-webkit-scrollbar { - height: 6px; - display: none; -} + &::before { + background: linear-gradient(to left, var(--color-navbar-transparent), var(--color-navbar) 75%); + left: 0; + z-index: 1; + } -.ui.menu.new-menu::-webkit-scrollbar-track { - background: none !important; -} + &::after { + background: linear-gradient(to right, var(--color-navbar-transparent), var(--color-navbar) 75%); + right: 0; + } -.ui.menu.new-menu::-webkit-scrollbar-thumb { - box-shadow: none !important; -} + &::-webkit-scrollbar { + height: 10px; + display: none; + } -.ui.menu.new-menu:hover::-webkit-scrollbar { - display: block; + &::-webkit-scrollbar-track { + background: none; + } + /* Exclude Firefox */ + @supports (-webkit-appearance:none) and (not (-moz-appearance:none)) { + &:hover { + overflow-x: scroll !important; + margin-bottom: -10px !important; + + &::-webkit-scrollbar { + display: block; + } + } + } } [v-cloak] { @@ -1322,7 +1341,7 @@ footer { display: flex; align-items: center; flex: 1; - word-break: break-all; + word-break: break-word; color: var(--color-text-light); .avatar { @@ -1331,6 +1350,7 @@ footer { } .labels { + margin-top: -.25rem; margin-left: .5rem; > * + * { @@ -1991,6 +2011,15 @@ table th[data-sortt-desc] { .ui.header .ui.label { margin-left: .25rem; + margin-right: .25rem; + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } } .ui.header > .ui.label.compact { diff --git a/web_src/less/_explore.less b/web_src/less/_explore.less index 89fd2af629df6..f602aec66a903 100644 --- a/web_src/less/_explore.less +++ b/web_src/less/_explore.less @@ -26,12 +26,9 @@ font-size: 1.5rem; margin-bottom: .5rem; - .name { - word-break: break-all; - } - .metas { font-size: 14px; + align-self: flex-start; } } diff --git a/web_src/less/_repository.less b/web_src/less/_repository.less index b750cf8c077fb..7d0db7734045e 100644 --- a/web_src/less/_repository.less +++ b/web_src/less/_repository.less @@ -15,6 +15,7 @@ .fork-flag { font-size: 12px; margin-top: 2px; + line-height: initial; } .repo-buttons .svg { @@ -38,11 +39,15 @@ justify-content: space-between; .ui.label { - margin-left: 7px; - padding: 3px 5px; + margin-top: -3px; + margin-bottom: -3px; } } + .menu.new-menu.navbar { + margin-top: -8px !important; + } + .owner.dropdown { min-width: 40% !important; } @@ -170,17 +175,56 @@ .ui.tabs { &.container { - margin-top: 14px; + margin-top: 15px; margin-bottom: 0; .ui.menu { border-bottom: 0; + margin: auto -1em; + padding-left: 1em; + overflow-x: auto; + overflow-y: hidden; + + /* Firefox and Safari < 14 need a spacer */ + @supports (-moz-appearance:none) or (not (text-orientation:inherit)) { + .spacer:last-child { + min-width: 1em; + } + } + + &::before { + left: auto !important; + margin-left: -1em; + } + + &::after { + position: sticky !important; + } } - } - &.divider { - margin-top: 0; - margin-bottom: 20px; + + div { + height: 0; + margin-bottom: 20px; + + .divider { + margin-top: -1px; + margin-bottom: 20px; + background: var(--color-body); + + @media @mediaSm { + width: calc(100% - 2em); + } + + &.spacer { + width: 1.25em; + } + + &:first-child, + &:last-child { + z-index: 2; + } + } + } } } @@ -1224,6 +1268,10 @@ .svg { margin-right: 10px; } + + .filter.dropdown > .ui.button { + margin-right: 0; + } } .comment.form { @@ -2144,16 +2192,23 @@ } .ui.segment.sub-menu { - padding: 7px; - line-height: 0; + background: none; + padding: 0; .list { - width: 100%; + font-size: 1rem; display: flex; + align-items: center; .item { - width: 100%; color: var(--color-text); + flex: 1; + min-width: max-content; + min-width: -webkit-max-content; + padding: 0 1em; + margin: 0; + height: 39px; + line-height: 39px; &:first-of-type { border-radius: var(--border-radius) 0 0 var(--border-radius); @@ -2277,6 +2332,28 @@ .repository-summary { box-shadow: none !important; + &:not(.repository-summary-language-stats) .list { + overflow: hidden; + + &::before, + &::after { + content: none; + } + } + + &.repository-summary-language-stats .list { + overflow-x: auto; + overflow-y: hidden; + + &::before { + background: linear-gradient(to left, var(--color-box-body-transparent), var(--color-box-body) 75%); + } + + &::after { + background: linear-gradient(to right, var(--color-box-body-transparent), var(--color-box-body) 75%); + } + } + .segment.language-stats-details, .segment.repository-summary { border-top: none; @@ -2289,7 +2366,6 @@ .segment.language-stats { padding: 0; - height: 11px; display: flex; white-space: nowrap; width: 100%; @@ -2306,15 +2382,6 @@ } } - .repository-menu { - padding: 0 !important; - } - - .repository-menu .item { - padding-top: 9px !important; - padding-bottom: 9px !important; - } - &.diff .committed-by { padding-top: .5rem; @@ -2844,11 +2911,34 @@ tbody.commit-list { display: flex; align-items: center; justify-content: space-between; - flex-wrap: wrap; word-break: break-word; + line-height: 40px; + margin: -7px 0; + + > * { + margin: 7px 0; + } +} + +.repo-icon { + &.none { + height: 28px; + width: 28px; + padding: 5px !important; + background: var(--color-diff-inactive) !important; + + .svg { + color: var(--color-light-border); + } + } + + .svg { + vertical-align: middle; + } } -.repo-buttons { +.repo-buttons, +.repo-buttons > form { display: flex; align-items: center; } @@ -3074,7 +3164,7 @@ td.blob-excerpt { /* prevent page shaking on language bar click */ .repository-summary-language-stats { - height: 48px; + height: 50px; overflow: hidden; } @@ -3125,16 +3215,6 @@ td.blob-excerpt { border-left: 1px solid var(--color-secondary); } -.repository .ui.menu.new-menu { - background: none !important; - - @media @mediaLgAndDown { - &::after { - background: none !important; - } - } -} - .repository.migrate .card { transition: all .1s ease-in-out; box-shadow: none !important; diff --git a/web_src/less/themes/theme-arc-green.less b/web_src/less/themes/theme-arc-green.less index 9f35d4dafe55b..1e35f52a46da4 100644 --- a/web_src/less/themes/theme-arc-green.less +++ b/web_src/less/themes/theme-arc-green.less @@ -79,6 +79,7 @@ --color-body: #383c4a; --color-box-header: #404652; --color-box-body: #303440; + --color-box-body-transparent: #30344000; --color-text-dark: #dbe0ea; --color-text: #bbc0ca; --color-text-light: #a6aab5; @@ -91,6 +92,7 @@ --color-input-border: #454a57; --color-input-border-hover: #505667; --color-navbar: #2a2e3a; + --color-navbar-transparent: #2a2e3a00; --color-light: #00000028; --color-light-border: #ffffff28; --color-hover: #60606020; @@ -333,8 +335,8 @@ a.ui.basic.green.label:hover { color: #dbdbdb; } -.repository .navbar .active.item, -.repository .navbar .active.item:hover { +.ui.tabs.container .ui.menu .active.item, +.ui.tabs.container .ui.menu .active.item:hover { border-color: transparent !important; }