From 0f438ef0b3fe641df102212becb32cdfb4dd3305 Mon Sep 17 00:00:00 2001 From: Unknwon Date: Fri, 13 Nov 2015 12:05:48 -0500 Subject: [PATCH] new dashboard ui --- public/css/gogs.css | 110 ++++++++--- public/js/gogs.js | 1 + public/less/_base.less | 62 ++++--- public/less/_dashboard.less | 64 +++++++ templates/user/dashboard/dashboard.tmpl | 233 +++++++++++------------- templates/user/dashboard/feeds.tmpl | 102 ++++++----- templates/user/dashboard/nav.tmpl | 46 ----- templates/user/dashboard/navbar.tmpl | 4 +- 8 files changed, 354 insertions(+), 268 deletions(-) delete mode 100644 templates/user/dashboard/nav.tmpl diff --git a/public/css/gogs.css b/public/css/gogs.css index 8c66cdb3f36..145f38aded9 100755 --- a/public/css/gogs.css +++ b/public/css/gogs.css @@ -759,7 +759,7 @@ pre.raw { z-index: 900; } .following.bar .head.link.item { - padding-right: 0!important; + padding-right: 0 !important; } .following.bar .head.link.item .dropdown.icon, .following.bar .head.link.item .menu .octicon { @@ -792,50 +792,59 @@ pre.raw { float: right; } .ui .text.red { - color: #d95c5c!important; + color: #d95c5c !important; } .ui .text.red a { - color: #d95c5c!important; + color: #d95c5c !important; } .ui .text.red a:hover { - color: #E67777!important; + color: #E67777 !important; } .ui .text.blue { - color: #428bca!important; + color: #428bca !important; } .ui .text.blue a { - color: #15c!important; + color: #15c !important; } .ui .text.blue a:hover { - color: #428bca!important; + color: #428bca !important; } .ui .text.grey { - color: #767676!important; + color: #767676 !important; } .ui .text.grey a { - color: #444!important; + color: #444 !important; } .ui .text.grey a:hover { - color: #000!important; + color: #000 !important; +} +.ui .text.light.grey { + color: #888 !important; } .ui .text.green { - color: #6cc644!important; + color: #6cc644 !important; } .ui .text.purple { - color: #6e5494!important; + color: #6e5494 !important; } .ui .text.yellow { - color: #FBBD08!important; + color: #FBBD08 !important; } .ui .text.left { - text-align: left!important; + text-align: left !important; } .ui .text.right { - text-align: right!important; + text-align: right !important; } .ui .text.small { font-size: 0.75em; } +.ui .text.bold { + font-weight: bold; +} +.ui .text.italic { + font-style: italic; +} .ui .text.truncate { overflow: hidden; text-overflow: ellipsis; @@ -856,14 +865,14 @@ pre.raw { vertical-align: middle; } .ui .warning.header { - background-color: #F9EDBE!important; + background-color: #F9EDBE !important; border-color: #F0C36D; } .ui .warning.segment { border-color: #F0C36D; } .ui .info.header { - background-color: #d9edf7!important; + background-color: #d9edf7 !important; border-color: #85c5e5; } .ui .info.segment { @@ -876,7 +885,7 @@ pre.raw { border-radius: 3px; } .ui .form .fake { - display: none!important; + display: none !important; } .ui.status.buttons .octicon { margin-right: 4px; @@ -894,7 +903,7 @@ pre.raw { border-top: none; line-height: 1em; color: rgba(0, 0, 0, 0.8); - padding: .71428571em 1.14285714em!important; + padding: .71428571em 1.14285714em !important; font-size: 1rem; text-transform: none; font-weight: 400; @@ -910,7 +919,7 @@ pre.raw { z-index: 13; } .scrolling.menu .item.selected { - font-weight: 700!important; + font-weight: 700 !important; } footer { margin-top: 54px !important; @@ -1010,7 +1019,7 @@ footer .container .links > *:first-child { .octicon.icon, .mega-octicon.icon { font-family: octicons; - opacity: 1!important; + opacity: 1 !important; } .sr-only { position: absolute; @@ -2539,48 +2548,107 @@ ol.linenums { padding-top: 15px; padding-bottom: 80px; } +.dashboard.feeds .context.user.menu, .dashboard.issues .context.user.menu { z-index: 101; min-width: 200px; } +.dashboard.feeds .context.user.menu .ui.header, .dashboard.issues .context.user.menu .ui.header { font-size: 1rem; text-transform: none; } +.dashboard.feeds .filter.menu .item, .dashboard.issues .filter.menu .item { text-align: left; } +.dashboard.feeds .filter.menu .item .text, .dashboard.issues .filter.menu .item .text { height: 16px; vertical-align: middle; } +.dashboard.feeds .filter.menu .item .text.truncate, .dashboard.issues .filter.menu .item .text.truncate { width: 85%; } +.dashboard.feeds .filter.menu .item .floating.label, .dashboard.issues .filter.menu .item .floating.label { top: 7px; left: 90%; width: 15%; } +.dashboard.feeds .filter.menu .jump.item, .dashboard.issues .filter.menu .jump.item { margin: 1px; padding-right: 0; } +.dashboard.feeds .filter.menu .menu, .dashboard.issues .filter.menu .menu { max-height: 300px; overflow-x: auto; right: 0!important; left: auto!important; } +.dashboard.feeds .ui.right .head.menu, .dashboard.issues .ui.right .head.menu { margin-top: -5px; } +.dashboard.feeds .ui.right .head.menu .item.active, .dashboard.issues .ui.right .head.menu .item.active { color: #d9453d; } +.dashboard.feeds .head.menu .octicon, .dashboard.issues .head.menu .octicon { margin-right: 5px; } +.feeds .news .ui.avatar { + margin-top: 13px; +} +.feeds .news p { + line-height: 1em; +} +.feeds .news .time-since { + font-size: 13px; +} +.feeds .news .issue.title { + line-height: 1em; + width: 80%; +} +.feeds .news .push.news .content ul { + font-size: 13px; + list-style: none; + padding-left: 10px; +} +.feeds .news .push.news .content ul img { + margin-bottom: -2px; +} +.feeds .news .push.news .content ul .text.truncate { + width: 80%; + margin-bottom: -5px; +} +.feeds .list .header { + padding-top: 10px; + padding-bottom: 5px; +} +.feeds .list ul { + list-style: none; + margin: 0; + padding-left: 0; +} +.feeds .list ul li:not(:last-child) { + border-bottom: 1px solid #EAEAEA; +} +.feeds .list ul li.private { + background-color: #fcf8e9; +} +.feeds .list ul li a { + padding: 6px 1.2em; + display: block; +} +.feeds .list ul li a .octicon { + margin-right: 6px; + color: #888; +} .admin { padding-top: 15px; padding-bottom: 80px; diff --git a/public/js/gogs.js b/public/js/gogs.js index f3aed276de0..81a9c1f4439 100644 --- a/public/js/gogs.js +++ b/public/js/gogs.js @@ -583,6 +583,7 @@ $(document).ready(function () { } }); $('.tabular.menu .item').tab(); + $('.tabable.menu .item').tab(); $('.toggle.button').click(function () { $($(this).data('target')).slideToggle(100); diff --git a/public/less/_base.less b/public/less/_base.less index 99cb736c6e7..21591cb14c1 100644 --- a/public/less/_base.less +++ b/public/less/_base.less @@ -55,7 +55,7 @@ pre { z-index: 900; } .head.link.item { - padding-right: 0!important; + padding-right: 0 !important; .dropdown.icon, .menu .octicon { margin-right: 5px; @@ -65,9 +65,9 @@ pre { margin-right: 0; } .searchbox { - background-color: rgb(244, 244, 244)!important; + background-color: rgb(244, 244, 244) !important; &:focus { - background-color: rgb(233, 233, 233)!important; + background-color: rgb(233, 233, 233) !important; } } .text .octicon { @@ -84,6 +84,7 @@ pre { } } } + .ui { &.left { float: left; @@ -94,51 +95,60 @@ pre { .text { &.red { - color: #d95c5c!important; + color: #d95c5c !important; a { - color: #d95c5c!important; + color: #d95c5c !important; &:hover { - color: #E67777!important; + color: #E67777 !important; } } } &.blue { - color: #428bca!important; + color: #428bca !important; a { - color: #15c!important; + color: #15c !important; &:hover { - color: #428bca!important; + color: #428bca !important; } } } &.grey { - color: #767676!important; + color: #767676 !important; a { - color: #444!important; + color: #444 !important; &:hover { - color: #000!important; + color: #000 !important; } } } + &.light.grey { + color: #888 !important; + } &.green { - color: #6cc644!important; + color: #6cc644 !important; } &.purple { - color: #6e5494!important; + color: #6e5494 !important; } &.yellow { - color: #FBBD08!important; + color: #FBBD08 !important; } &.left { - text-align: left!important; + text-align: left !important; } &.right { - text-align: right!important; + text-align: right !important; } &.small { font-size: 0.75em; } + &.bold { + font-weight: bold; + } + &.italic { + font-style: italic; + } &.truncate { overflow: hidden; @@ -166,7 +176,7 @@ pre { } .warning { &.header { - background-color: #F9EDBE!important; + background-color: #F9EDBE !important; border-color: #F0C36D; } &.segment { @@ -175,7 +185,7 @@ pre { } .info { &.header { - background-color: #d9edf7!important; + background-color: #d9edf7 !important; border-color: #85c5e5; } &.segment { @@ -193,7 +203,7 @@ pre { .form { .fake { - display: none!important; + display: none !important; } } @@ -217,7 +227,7 @@ pre { border-top: none; line-height: 1em; color: rgba(0,0,0,.8); - padding: .71428571em 1.14285714em!important; + padding: .71428571em 1.14285714em !important; font-size: 1rem; text-transform: none; font-weight: 400; @@ -237,12 +247,12 @@ pre { .scrolling.menu { .item.selected { - font-weight: 700!important; + font-weight: 700 !important; } } footer { - margin-top: @footer-margin+14px!important; + margin-top: @footer-margin+14px !important; height: @footer-margin; background-color: white; border-top: 1px solid #d6d6d6; @@ -277,8 +287,8 @@ footer { .generate-img(16); .generate-img(@n, @i: 1) when (@i =< @n) { .img-@{i} { - width: (2px * @i)!important; - height: (2px * @i)!important; + width: (2px * @i) !important; + height: (2px * @i) !important; } .generate-img(@n, (@i + 1)); } @@ -286,7 +296,7 @@ footer { .octicon.icon, .mega-octicon.icon { font-family: octicons; - opacity: 1!important; + opacity: 1 !important; } // Accessibility diff --git a/public/less/_dashboard.less b/public/less/_dashboard.less index 19264b09538..2a3d9734277 100644 --- a/public/less/_dashboard.less +++ b/public/less/_dashboard.less @@ -2,6 +2,7 @@ padding-top: 15px; padding-bottom: @footer-margin * 2; + &.feeds, &.issues { .context.user.menu { z-index: 101; @@ -52,4 +53,67 @@ } } } +} + +&.feeds { + .news { + .ui.avatar { + margin-top: 13px; + } + p { + line-height: 1em; + } + .time-since { + font-size: 13px; + } + .issue.title { + line-height: 1em; + width: 80%; + } + .push.news .content ul { + font-size: 13px; + list-style: none; + padding-left: 10px; + + img { + margin-bottom: -2px; + } + .text.truncate { + width: 80%; + margin-bottom: -5px; + } + } + } + + .list { + .header { + padding-top: 10px; + padding-bottom: 5px; + } + ul { + list-style: none; + margin: 0; + padding-left: 0; + + li { + &:not(:last-child) { + border-bottom: 1px solid #EAEAEA; + } + + &.private { + background-color: #fcf8e9; + } + + a { + padding: 6px 1.2em; + display: block; + + .octicon { + margin-right: 6px; + color: #888; + } + } + } + } + } } \ No newline at end of file diff --git a/templates/user/dashboard/dashboard.tmpl b/templates/user/dashboard/dashboard.tmpl index e530b6f7359..d8791241e9c 100644 --- a/templates/user/dashboard/dashboard.tmpl +++ b/templates/user/dashboard/dashboard.tmpl @@ -1,131 +1,112 @@ -{{template "ng/base/head" .}} -{{template "ng/base/header" .}} -{{template "user/dashboard/nav" .}} -
-
- {{template "ng/base/alert" .}} -
- {{template "user/dashboard/feeds" .}} +{{template "base/head" .}} +
+ {{template "user/dashboard/navbar" .}} +
+
+
+ {{template "user/dashboard/feeds" .}} +
+
+
+ {{.i18n.Tr "repository"}} + {{if not .ContextUser.IsOrganization}} + {{.i18n.Tr "organization"}} + {{end}} + {{.i18n.Tr "mirror"}}
-
-
+
-{{template "ng/base/footer" .}} +{{template "base/footer" .}} \ No newline at end of file diff --git a/templates/user/dashboard/feeds.tmpl b/templates/user/dashboard/feeds.tmpl index bff44f06bb3..57c2e859823 100644 --- a/templates/user/dashboard/feeds.tmpl +++ b/templates/user/dashboard/feeds.tmpl @@ -1,59 +1,67 @@ {{range .Feeds}} -
-
- -
-
-

- {{.GetActUserName}} - {{if eq .GetOpType 1}} - {{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoPath | Str2html}} - {{else if eq .GetOpType 2}} - {{$.i18n.Tr "action.rename_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}} - {{else if eq .GetOpType 5}} - {{$.i18n.Tr "action.commit_repo" .GetRepoLink .GetBranch .GetRepoPath | Str2html}} - {{else if eq .GetOpType 6}} - {{ $index := index .GetIssueInfos 0}} - {{$.i18n.Tr "action.create_issue" .GetRepoLink $index .GetRepoPath | Str2html}} - {{else if eq .GetOpType 7}} - {{ $index := index .GetIssueInfos 0}} - {{$.i18n.Tr "action.create_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}} - {{else if eq .GetOpType 8}} - {{$.i18n.Tr "action.transfer_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}} - {{else if eq .GetOpType 9}} - {{$.i18n.Tr "action.push_tag" .GetRepoLink .GetBranch .GetRepoPath | Str2html}} - {{else if eq .GetOpType 10}} - {{ $index := index .GetIssueInfos 0}} - {{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoPath | Str2html}} – {{.GetIssueTitle}} - {{else if eq .GetOpType 11}} - {{ $index := index .GetIssueInfos 0}} - {{$.i18n.Tr "action.merge_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}} - {{end}} +

+
+ +
+
+
+
+

+ {{.GetActUserName}} + {{if eq .GetOpType 1}} + {{$.i18n.Tr "action.create_repo" .GetRepoLink .GetRepoPath | Str2html}} + {{else if eq .GetOpType 2}} + {{$.i18n.Tr "action.rename_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}} + {{else if eq .GetOpType 5}} + {{$.i18n.Tr "action.commit_repo" .GetRepoLink .GetBranch .GetRepoPath | Str2html}} + {{else if eq .GetOpType 6}} + {{ $index := index .GetIssueInfos 0}} + {{$.i18n.Tr "action.create_issue" .GetRepoLink $index .GetRepoPath | Str2html}} + {{else if eq .GetOpType 7}} + {{ $index := index .GetIssueInfos 0}} + {{$.i18n.Tr "action.create_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}} + {{else if eq .GetOpType 8}} + {{$.i18n.Tr "action.transfer_repo" .GetContent .GetRepoLink .GetRepoPath | Str2html}} + {{else if eq .GetOpType 9}} + {{$.i18n.Tr "action.push_tag" .GetRepoLink .GetBranch .GetRepoPath | Str2html}} + {{else if eq .GetOpType 10}} + {{ $index := index .GetIssueInfos 0}} + {{$.i18n.Tr "action.comment_issue" .GetRepoLink $index .GetRepoPath | Str2html}} + {{else if eq .GetOpType 11}} + {{ $index := index .GetIssueInfos 0}} + {{$.i18n.Tr "action.merge_pull_request" .GetRepoLink $index .GetRepoPath | Str2html}} + {{end}}

{{if eq .GetOpType 5}} -
- +
+
{{else if eq .GetOpType 6}} -

{{index .GetIssueInfos 1}}

+

{{index .GetIssueInfos 1}}

{{else if eq .GetOpType 7}} -

{{index .GetIssueInfos 1}}

+

{{index .GetIssueInfos 1}}

{{else if eq .GetOpType 10}} -

{{index .GetIssueInfos 1}}

+ {{.GetIssueTitle}} +

{{index .GetIssueInfos 1}}

{{else if eq .GetOpType 11}} -

{{index .GetIssueInfos 1}}

+

{{index .GetIssueInfos 1}}

{{end}} -

{{TimeSince .GetCreate $.i18n.Lang}}

+

{{TimeSince .GetCreate $.i18n.Lang}}

+
- +
+ +
+
+
{{end}} \ No newline at end of file diff --git a/templates/user/dashboard/nav.tmpl b/templates/user/dashboard/nav.tmpl deleted file mode 100644 index 0549bbe949c..00000000000 --- a/templates/user/dashboard/nav.tmpl +++ /dev/null @@ -1,46 +0,0 @@ -
- -
\ No newline at end of file diff --git a/templates/user/dashboard/navbar.tmpl b/templates/user/dashboard/navbar.tmpl index 5a7fbf7b542..8469e23bc38 100644 --- a/templates/user/dashboard/navbar.tmpl +++ b/templates/user/dashboard/navbar.tmpl @@ -10,12 +10,12 @@ {{.i18n.Tr "home.switch_dashboard_context"}}
- + {{.SignedUser.Name}} {{range .Orgs}} - + {{.Name}}