From 60c65415dd2eb59e695159e111778aaf0661e606 Mon Sep 17 00:00:00 2001
From: fuxiaohei <fuxiaohei@vip.qq.com>
Date: Tue, 23 Sep 2014 22:28:03 +0800
Subject: [PATCH] pull request page ui review, upgrade octicon icons
---
public/ng/css/gogs.css | 14 +-
public/ng/fonts/octicons.css | 20 +-
public/ng/fonts/octicons.eot | Bin 31440 -> 31440 bytes
public/ng/fonts/octicons.ttf | Bin 31272 -> 31272 bytes
public/ng/fonts/octicons.woff | Bin 17492 -> 17492 bytes
public/ng/less/gogs/dashboard.less | 1 -
public/ng/less/gogs/issue.less | 23 +-
public/ng/less/gogs/organization.less | 378 +++++++++++++-------------
templates/repo/pulls.tmpl | 135 ++++++++-
9 files changed, 343 insertions(+), 228 deletions(-)
diff --git a/public/ng/css/gogs.css b/public/ng/css/gogs.css
index 1d0c468ca..207e349d5 100644
--- a/public/ng/css/gogs.css
+++ b/public/ng/css/gogs.css
@@ -728,7 +728,6 @@ ol.linenums {
}
#dashboard {
padding: 24px 0;
- margin-bottom: 60px;
}
#dashboard-sidebar .panel-header h4 {
margin: 0;
@@ -1608,12 +1607,16 @@ The register and sign-in page style
background-color: #FFF;
border-color: #DDD;
}
+.pr-title {
+ padding: 4px 0;
+}
.pr-title .pr-num {
font-weight: normal;
color: #888;
}
.pr-meta {
color: #888;
+ padding: 4px 0 8px 0;
}
.pr-meta .pr-author {
margin: 0 8px;
@@ -1687,7 +1690,7 @@ The register and sign-in page style
.issue-line,
.issue-merge,
.issue-add-comment {
- margin-bottom: 16px;
+ margin-bottom: 24px;
}
.issue-comment .author-avatar img {
margin-right: 12px;
@@ -1791,6 +1794,7 @@ textarea#issue-add-content {
width: 100%;
box-sizing: border-box;
height: 120px;
+ resize: vertical;
}
.org-header-alert .alert {
margin-top: 10px;
@@ -1825,7 +1829,11 @@ textarea#issue-add-content {
color: #d9453d;
}
#org-header > div > .menu-line > li.right > a .octicon {
- margin-right: 6px;
+ margin-right: 4px;
+}
+#org-header > div > .menu-line > li.right > a .label {
+ margin-left: 4px;
+ font-size: .6em;
}
#org-header > div > .menu-line > li.right .current {
border-bottom: 2px solid #D26911;
diff --git a/public/ng/fonts/octicons.css b/public/ng/fonts/octicons.css
index 2d66bd6cf..a5dcd153a 100755
--- a/public/ng/fonts/octicons.css
+++ b/public/ng/fonts/octicons.css
@@ -14,22 +14,20 @@
.mega-octicon is optimized for 32px but can be used larger.
*/
-.octicon {
- font: normal normal 16px octicons;
- line-height: 1;
- display: inline-block;
- text-decoration: none;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
-}
-.mega-octicon {
- font: normal normal 32px octicons;
- line-height: 1;
+.octicon, .mega-octicon {
+ font: normal normal normal 16px/1 octicons;
display: inline-block;
text-decoration: none;
+ text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ -ms-user-select: none;
+ user-select: none;
}
+.mega-octicon { font-size: 32px; }
+
.octicon-alert:before { content: '\f02d'} /* */
.octicon-alignment-align:before { content: '\f08a'} /* */
diff --git a/public/ng/fonts/octicons.eot b/public/ng/fonts/octicons.eot
index e4edc6e56d0a836940eeb5701f264a1f4692edc4..22881a8b6c4342720d2d4318ef5887c8abbfc8a2 100755
GIT binary patch
delta 58
zcmcccmGQz?#tAkoH-zP5CpxTP;hNxmdE%QXGO_Z)H{$tizA|vLFo3`X?G{ZKy?G9!
GNhJV{Y!iq8
delta 58
zcmcccmGQz?#tAkof9$u!O>|hn!g+M-!HI9C$i!{2{}az|^Ob>{g#iT4AG1_|(VOQm
Hnp6S+@kbVH
diff --git a/public/ng/fonts/octicons.ttf b/public/ng/fonts/octicons.ttf
index b850701aea89d12f1684a50036194747ff1e7de2..189ca2813d4920f3be1bd1a43b19a09740d1eb2c 100755
GIT binary patch
delta 49
xcmZ4Sg>l6f#t9BATob%6Pjs0g6Du!#Bc9*pD+4zR0|;EuZqbC%8^4%T0syf~5CZ@J
delta 49
xcmZ4Sg>l6f#t9BAoJY4Foaiz|CT@%UpLl+ouMFHQ3?Oj+n56=Y-uT6&5&-CX5&-}J
diff --git a/public/ng/fonts/octicons.woff b/public/ng/fonts/octicons.woff
index c1e76ab4a31ce674350afc9cd971adb03b9dffc8..2b770e429f38d820c1916bb395f7e72ddafa60c5 100755
GIT binary patch
delta 63
zcmV-F0Kos$hym1y0g!kE3Xn_Fv3z+sC|G&n8}a-$Um3Vr7(n2Hc8eyA{{Qj6Ew?7K
VJCMu4zyuNn01uA}9J3udHwv6Q8y5fo
delta 63
zcmV-F0Kos$hym1y0g!kE3B|R+v3z+sD7Y>5f8zOVzA|vLFo3}MW0ndq`v1rOw%nS`
V?m#XF0~1IT07dQ#j<X#)HwpnA9tHpa
diff --git a/public/ng/less/gogs/dashboard.less b/public/ng/less/gogs/dashboard.less
index 1609b9d1c..8e10b9d61 100644
--- a/public/ng/less/gogs/dashboard.less
+++ b/public/ng/less/gogs/dashboard.less
@@ -43,7 +43,6 @@
}
#dashboard {
padding: 24px 0;
- margin-bottom: 60px;
}
// dashboard sidebar contains contributed repositories panel,
// and my repositories panel
diff --git a/public/ng/less/gogs/issue.less b/public/ng/less/gogs/issue.less
index ae481f0e2..a2209bcca 100644
--- a/public/ng/less/gogs/issue.less
+++ b/public/ng/less/gogs/issue.less
@@ -1,19 +1,15 @@
@import "../ui/var";
-
.repo-issue-wrapper {
padding: 18px 0;
}
-
.pr-main {
padding-right: 40px;
box-sizing: border-box;
}
-
.pr-sidebar {
border-left: 1px solid #DDD;
box-sizing: border-box;
}
-
#pr-sidebar-nav {
margin-top: 6px;
li {
@@ -39,16 +35,16 @@
}
}
}
-
.pr-title {
.pr-num {
font-weight: normal;
color: #888;
}
+ padding: 4px 0;
}
-
.pr-meta {
color: #888;
+ padding: 4px 0 8px 0;
.pr-author {
margin: 0 8px;
color: #444;
@@ -62,7 +58,6 @@
padding: 4px 6px;
}
}
-
.pr-nav {
border-bottom: 1px solid #DDD;
margin-top: 16px;
@@ -89,7 +84,6 @@
}
}
}
-
.diff-bar {
.diff-add {
color: @btnGreenColor;
@@ -114,26 +108,22 @@
border-bottom-left-radius: .2em;
}
}
-
#pr-commit,
#pr-file-diff,
#issue-add-comment-preview {
display: none;
}
-
#pr-conversation-list {
padding-right: 30px;
box-sizing: border-box;
}
-
.issue-comment,
.issue-commit,
.issue-line,
.issue-merge,
.issue-add-comment {
- margin-bottom: 16px;
+ margin-bottom: 24px;
}
-
.issue-comment {
.author-avatar {
img {
@@ -165,7 +155,6 @@
}
}
}
-
.issue-commit {
line-height: 32px;
i, .author-avatar img {
@@ -181,7 +170,6 @@
line-height: 24px;
}
}
-
.issue-merge {
.ico {
width: 40px;
@@ -202,7 +190,6 @@
font-size: 13px;
}
}
-
.issue-merge-ok {
.ico {
background-color: #65AD4E;
@@ -217,12 +204,10 @@
color: darken(#65AD4E, 10%);
}
}
-
.issue-line {
height: 4px;
background-color: #E6E6E6;
}
-
.issue-add-comment {
.panel {
margin-left: 60px;
@@ -254,9 +239,9 @@
}
}
}
-
textarea#issue-add-content {
width: 100%;
box-sizing: border-box;
height: 120px;
+ resize: vertical;
}
\ No newline at end of file
diff --git a/public/ng/less/gogs/organization.less b/public/ng/less/gogs/organization.less
index b6e31940a..3bf11c8ce 100644
--- a/public/ng/less/gogs/organization.less
+++ b/public/ng/less/gogs/organization.less
@@ -1,229 +1,233 @@
@import "../ui/var";
.org-header-alert .alert {
- margin-top: 10px;
+ margin-top: 10px;
}
.org-header {
- padding: 16px 0;
- background-color: #FFF;
- border-bottom: 1px solid #DDD;
- img {
- padding-right: 10px;
- }
+ padding: 16px 0;
+ background-color: #FFF;
+ border-bottom: 1px solid #DDD;
+ img {
+ padding-right: 10px;
+ }
}
#org-home-header {
- min-height: 100px;
+ min-height: 100px;
}
#org-header {
- height: 48px;
- .org-name {
- padding-left: 10px;
- font-size: 1.4em;
- height: 50px;
- line-height: 50px;
- margin-bottom: 0;
- }
- > div {
- > .menu-line {
- > li {
- &.right {
- > a {
- font-size: 1.2em;
- color: @dashboardHeaderLinkColor;
- &:hover {
- background-color: transparent;
- color: @dashboardHeaderLinkHoverColor;
- }
- .octicon {
- margin-right: 6px;
- }
- }
- .current {
- border-bottom: 2px solid #D26911;
- }
- }
- }
- }
- }
+ height: 48px;
+ .org-name {
+ padding-left: 10px;
+ font-size: 1.4em;
+ height: 50px;
+ line-height: 50px;
+ margin-bottom: 0;
+ }
+ > div {
+ > .menu-line {
+ > li {
+ &.right {
+ > a {
+ font-size: 1.2em;
+ color: @dashboardHeaderLinkColor;
+ &:hover {
+ background-color: transparent;
+ color: @dashboardHeaderLinkHoverColor;
+ }
+ .octicon {
+ margin-right: 4px;
+ }
+ .label{
+ margin-left: 4px;
+ font-size: .6em;
+ }
+ }
+ .current {
+ border-bottom: 2px solid #D26911;
+ }
+ }
+ }
+ }
+ }
}
#org-home-header-info {
- padding-top: 10px;
- h2 {
- font-size: 30px;
- }
- ul {
- list-style: none;
- li {
- float: left;
- padding-right: 5px;
- }
- }
+ padding-top: 10px;
+ h2 {
+ font-size: 30px;
+ }
+ ul {
+ list-style: none;
+ li {
+ float: left;
+ padding-right: 5px;
+ }
+ }
}
#org-home-repo-list {
- padding: 10px 0;
+ padding: 10px 0;
}
#org-repo-list {
- padding: 10px 0;
- .org-repo-item {
- border-top: 1px solid #eee;
- padding: 30px 20px;
- .org-repo-status {
- list-style: none;
- color: #888;
- li {
- float: left;
- margin-right: 6px;
- }
- }
- h2 {
- margin-bottom: 5px;
- }
- .org-repo-description {
- margin: 0;
- font-size: 14px;
- color: #666;
- }
- .org-repo-updated {
- font-size: 12px;
- display: block;
- margin: 5px 0 0;
- color: #808080;
- }
- }
+ padding: 10px 0;
+ .org-repo-item {
+ border-top: 1px solid #eee;
+ padding: 30px 20px;
+ .org-repo-status {
+ list-style: none;
+ color: #888;
+ li {
+ float: left;
+ margin-right: 6px;
+ }
+ }
+ h2 {
+ margin-bottom: 5px;
+ }
+ .org-repo-description {
+ margin: 0;
+ font-size: 14px;
+ color: #666;
+ }
+ .org-repo-updated {
+ font-size: 12px;
+ display: block;
+ margin: 5px 0 0;
+ color: #808080;
+ }
+ }
}
.org-sidebar {
- margin: -80px 0 0 20px;
- .panel-footer {
- padding: .8em 1.2em;
- }
- .member-avatar-group {
- padding: 15px;
- img {
- width: 59px;
- height: 59px;
- border-radius: 3px;
- }
- }
+ margin: -80px 0 0 20px;
+ .panel-footer {
+ padding: .8em 1.2em;
+ }
+ .member-avatar-group {
+ padding: 15px;
+ img {
+ width: 59px;
+ height: 59px;
+ border-radius: 3px;
+ }
+ }
}
#org-home-team-list {
- padding: 0 15px;
- ul {
- list-style: none;
- padding-top: 10px;
- li {
- padding: 10px 0;
- border-bottom: 1px solid #eee;
- &:last-child {
- border-bottom: 0;
- }
- }
- }
+ padding: 0 15px;
+ ul {
+ list-style: none;
+ padding-top: 10px;
+ li {
+ padding: 10px 0;
+ border-bottom: 1px solid #eee;
+ &:last-child {
+ border-bottom: 0;
+ }
+ }
+ }
}
.team-name {
- display: block;
- font-size: 14px;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
+ display: block;
+ font-size: 14px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
}
.team-meta {
- margin-top: 0;
- margin-bottom: 0;
- color: #777;
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #777;
}
.org-toolbar {
- padding: 10px 0;
- border-bottom: 1px solid #eee;
+ padding: 10px 0;
+ border-bottom: 1px solid #eee;
}
#org-member-list {
- .org-member-item {
- height: 50px;
- line-height: 50px;
- border-bottom: 1px solid #eee;
- padding: 15px 20px;
- .member-name {
- padding-left: 15px;
- }
- ul {
- list-style: none;
- li {
- text-align: center;
- display: inline-block;
- }
- }
- }
+ .org-member-item {
+ height: 50px;
+ line-height: 50px;
+ border-bottom: 1px solid #eee;
+ padding: 15px 20px;
+ .member-name {
+ padding-left: 15px;
+ }
+ ul {
+ list-style: none;
+ li {
+ text-align: center;
+ display: inline-block;
+ }
+ }
+ }
}
.invite-box {
- padding: 50px 0;
- min-height: 130px;
- margin: 0 auto;
- width: 50%;
- input {
- width: 300px;
- }
+ padding: 50px 0;
+ min-height: 130px;
+ margin: 0 auto;
+ width: 50%;
+ input {
+ width: 300px;
+ }
}
#org-member-list-block {
- padding-top: 2px;
+ padding-top: 2px;
}
.org-team-list {
- .org-team-list-item {
- float: left;
- padding: 15px;
- width: 555px;
- .member-avatar-group {
- padding: 5px 15px;
- img {
- width: 38px;
- height: 38px;
- border-radius: 3px;
- }
- }
- }
+ .org-team-list-item {
+ float: left;
+ padding: 15px;
+ width: 555px;
+ .member-avatar-group {
+ padding: 5px 15px;
+ img {
+ width: 38px;
+ height: 38px;
+ border-radius: 3px;
+ }
+ }
+ }
}
#team-create-form {
- .note {
- margin-left: 153px;
- }
+ .note {
+ margin-left: 153px;
+ }
}
#org-team-card {
- .desc {
- font-size: 14px;
- padding: 10px 20px;
- }
- .team-stats {
- padding: 0 20px 10px 20px;
- text-transform: uppercase;
- border-bottom: 1px solid #dddddd;
- }
- .panel-footer {
- padding: 10px 20px;
- }
+ .desc {
+ font-size: 14px;
+ padding: 10px 20px;
+ }
+ .team-stats {
+ padding: 0 20px 10px 20px;
+ text-transform: uppercase;
+ border-bottom: 1px solid #dddddd;
+ }
+ .panel-footer {
+ padding: 10px 20px;
+ }
}
#team-repositories-list,
#team-members-list {
- .panel-body .search {
- padding: 4px 0 10px 10px;
- border-bottom: 1px solid #dddddd;
- }
- li {
- &.collab {
- padding-top: 10px !important;
- border-bottom: 1px solid #dddddd;
- }
- &:last-child {
- border-bottom: 0 !important;
- }
- }
+ .panel-body .search {
+ padding: 4px 0 10px 10px;
+ border-bottom: 1px solid #dddddd;
+ }
+ li {
+ &.collab {
+ padding-top: 10px !important;
+ border-bottom: 1px solid #dddddd;
+ }
+ &:last-child {
+ border-bottom: 0 !important;
+ }
+ }
}
#team-repositories-list {
- li {
- a .octicon {
- color: #888;
- }
- .member {
- color: @linkColor;
- font-size: 14px;
- height: 40px;
- line-height: 40px;
- }
- }
+ li {
+ a .octicon {
+ color: #888;
+ }
+ .member {
+ color: @linkColor;
+ font-size: 14px;
+ height: 40px;
+ line-height: 40px;
+ }
+ }
}
\ No newline at end of file
diff --git a/templates/repo/pulls.tmpl b/templates/repo/pulls.tmpl
index 8c5d9376c..b2444f852 100644
--- a/templates/repo/pulls.tmpl
+++ b/templates/repo/pulls.tmpl
@@ -1,9 +1,130 @@
-{{template "base/head" .}}
-{{template "base/navbar" .}}
-{{template "repo/nav" .}}
-{{template "repo/toolbar" .}}
-<div id="body" class="container">
- <div id="source">
+{{template "ng/base/head" .}}
+{{template "ng/base/header" .}}
+<div id="repo-wrapper">
+ {{template "repo/header" .}}
+ <div class="clear container repo-issue-wrapper repo-pr">
+ <div class="pr-main grid-11-12 left">
+ <div class="pr-title clear">
+ <h2 class="pr-title grid-5-6 left">Fix: Repo Name can not be converted to lower in some cases <span class="pr-num">#256</span></h2>
+ <div class="pr-title-btn grid-1-6 right text-right">
+ <button class="btn btn-gray btn-radius">Edit</button>
+ <a href="#"><button class="btn btn-green btn-radius">New Issue</button></a>
+ </div>
+ </div>
+ <div class="pr-meta">
+ <button class="btn btn-small btn-green btn-radius">
+ <i class="octicon octicon-git-pull-request"></i> Open
+ </button>
+ <span class="msg">
+ <a href="#" class="text-bold pr-author">eryx</a>wants to merge 2 commits into <span class="pr-branch label label-gray radius">gogits:master</span> from <span class="pr-branch label label-gray radius">unknown repository</span>
+ </span>
+ </div>
+ <div class="pr-nav clear">
+ <ul class="menu menu-line left" id="pr-nav">
+ <li class="current js-tab-nav js-tab-nav-show" data-tab-target="#pr-conversation"><a href="#"><i class="octicon octicon-comment"></i>conversations
+ <span class="label label-gray label-radius">5</span>
+ </a></li>
+ <li class="js-tab-nav" data-tab-target="#pr-commit"><a href="#"><i class="octicon octicon-git-commit"></i>commits
+ <span class="label label-gray label-radius">2</span>
+ </a></li>
+ <li class="js-tab-nav" data-tab-target="#pr-file-diff"><a href="#"><i class="octicon octicon-file-code"></i>files
+ <span class="label label-gray label-radius">3</span>
+ </a></li>
+ </ul>
+ <div class="diff-bar right">
+ <span class="diff-add">+12</span>
+ <span class="inline-block diff-status">
+ <span class="block diff-status-inner"></span>
+ </span>
+ <span class="diff-delete">-7</span>
+ </div>
+ </div>
+ <div id="pr-conversation" class="js-tab-show clear">
+ <div id="pr-conversation-list" class="left grid-5-6">
+ <div class="issue-comment clear">
+ <a class="author-avatar" href="#"><img class="avatar-40 radius" src="https://avatars2.githubusercontent.com/u/275347?v=1&s=96" alt=""/></a>
+ <div class="panel panel-radius">
+ <p class="panel-header clear"><a class="author-name" href="#">eryx</a>
+ <span class="date">7 days ago</span>
+ <span class="action right">
+ <span class="label label-black label-radius">owner</span>
+ <a href="#"><i class="octicon octicon-pencil"></i></a>
+ <a href="#"><i class="octicon octicon-x"></i></a>
+ </span>
+ </p>
+ <div class="panel-content content markdown">just like github.com, the RepoName can not be converted to lower in the case of backend data storage, or frontend clone link display.</div>
+ </div>
+ </div>
+ <div class="issue-commit clear">
+ <i class="mega-octicon octicon-git-commit left"></i>
+ <a class="author-avatar left" href="#"><img class="avatar-24 radius" src="https://avatars2.githubusercontent.com/u/275347?v=1&s=96" alt=""/></a>
+ <a class="sha right" href="#">8e259ba</a>
+ <span class="message">Fix: Repo Name can not be converted to lower in the case of backend data storage, or frontend clone link display. or frontend clone link display or frontend clone link display.</span>
+ </div>
+ <div class="issue-line"></div>
+ <div class="issue-merge issue-merge-ok clear">
+ <span class="inline-block radius ico"><i class="mega-octicon octicon-git-pull-request"></i></span>
+ <div class="panel panel-radius">
+ <p class="panel-header clear">
+ <i class="octicon octicon-check"></i><strong>All is well !</strong>
+ </p>
+ <div class="panel-content content clear">
+ <div class="message left"><strong>This pull request can be automatically merged.</strong><br/>
+ You can also merge branches on the <a href="#">command line</a>.</div>
+ <button class="btn btn-green right btn-radius">
+ <i class="octicon octicon-git-merge"></i>
+ Merge Pull Request
+ </button>
+ </div>
+ </div>
+ </div>
+ <div class="issue-add-comment clear">
+ <a class="author-avatar" href="#"><img class="avatar-40 radius" src="https://avatars2.githubusercontent.com/u/275347?v=1&s=96" alt=""/></a>
+ <div class="panel panel-radius">
+ <div class="panel-header">
+ <ul class="menu menu-line add-nav">
+ <li class="js-tab-nav js-tab-nav-show" data-tab-target="#issue-add-comment-form"><a href="#">Write</a></li>
+ <li class="js-tab-nav" data-tab-target="#issue-add-comment-preview"><a href="#">Preview</a></li>
+ </ul>
+ </div>
+ <div class="panel-content content">
+ <form id="issue-add-comment-form" action="#" method="post">
+ <textarea class="ipt ipt-radius" name="content" id="issue-add-content"></textarea>
+ <p class="submit text-right">
+ <button class="btn btn-gray btn-radius text-bold" name="submit" value="close">Close pull request</button>
+ <button class="btn btn-green btn-radius text-bold" name="submit" value="comment">Comment</button>
+ </p>
+ </form>
+ <div id="issue-add-comment-preview">
+ preview
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div id="pr-conversation-sidebar" class="left grid-1-6">
+ 1-4
+ </div>
+ </div>
+ <div id="pr-commit">commit</div>
+ <div id="pr-file-diff">file diff</div>
+ </div>
+ <div class="pr-sidebar grid-1-12 right">
+ <ul class="menu menu-vertical" id="pr-sidebar-nav">
+ <li><a href="#" class="btn-right-radius"><i class="octicon octicon-code"></i>
+ <span class="right">code</span></a></li>
+ <li class="border-bottom"></li>
+ <li><a href="#" class="btn-right-radius"><i class="octicon octicon-issue-opened"></i>
+ <span class="num right label label-blue label-radius">12</span>
+ </a></li>
+ <li class="current"><a href="#" class="btn-right-radius"><i class="octicon octicon-git-pull-request"></i>
+ <span class="num right label label-black label-radius">12</span>
+ </a></li>
+ <li class="border-bottom"></li>
+ <li><a href="#" class="btn-right-radius"><i class="octicon octicon-tools"></i></a></li>
+ </ul>
+ </div>
</div>
</div>
-{{template "base/footer" .}}
\ No newline at end of file
+</div>
+{{template "ng/base/footer" .}}
\ No newline at end of file