]> source.dussan.org Git - gitea.git/commitdiff
pull request page ui review, upgrade octicon icons
authorfuxiaohei <fuxiaohei@vip.qq.com>
Tue, 23 Sep 2014 14:28:03 +0000 (22:28 +0800)
committerfuxiaohei <fuxiaohei@vip.qq.com>
Tue, 23 Sep 2014 14:28:03 +0000 (22:28 +0800)
public/ng/css/gogs.css
public/ng/fonts/octicons.css
public/ng/fonts/octicons.eot
public/ng/fonts/octicons.ttf
public/ng/fonts/octicons.woff
public/ng/less/gogs/dashboard.less
public/ng/less/gogs/issue.less
public/ng/less/gogs/organization.less
templates/repo/pulls.tmpl

index 1d0c468cacad3c63bd5a7060207f86903c0d89cd..207e349d54cd4e695e313dc4961e99d209323fa6 100644 (file)
@@ -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;
index 2d66bd6cf317abf4092519df612756bcb4cbf81b..a5dcd153a8561161370bf63a37037eba8639bc08 100755 (executable)
 .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'} /*  */
index e4edc6e56d0a836940eeb5701f264a1f4692edc4..22881a8b6c4342720d2d4318ef5887c8abbfc8a2 100755 (executable)
Binary files a/public/ng/fonts/octicons.eot and b/public/ng/fonts/octicons.eot differ
index b850701aea89d12f1684a50036194747ff1e7de2..189ca2813d4920f3be1bd1a43b19a09740d1eb2c 100755 (executable)
Binary files a/public/ng/fonts/octicons.ttf and b/public/ng/fonts/octicons.ttf differ
index c1e76ab4a31ce674350afc9cd971adb03b9dffc8..2b770e429f38d820c1916bb395f7e72ddafa60c5 100755 (executable)
Binary files a/public/ng/fonts/octicons.woff and b/public/ng/fonts/octicons.woff differ
index 1609b9d1c998c107afe2b473c39ee2eee5505bc6..8e10b9d61b81735003e68138a87539aabc97a204 100644 (file)
@@ -43,7 +43,6 @@
 }
 #dashboard {
   padding: 24px 0;
-  margin-bottom: 60px;
 }
 // dashboard sidebar contains contributed repositories panel,
 // and my repositories panel
index ae481f0e20432771af0da3446bb8e22eed8e82b3..a2209bcca90c8d33c1961bae6d6db4f19be55995 100644 (file)
@@ -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 {
     }
   }
 }
-
 .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;
     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 {
     }
   }
 }
-
 .issue-commit {
   line-height: 32px;
   i, .author-avatar img {
     line-height: 24px;
   }
 }
-
 .issue-merge {
   .ico {
     width: 40px;
     font-size: 13px;
   }
 }
-
 .issue-merge-ok {
   .ico {
     background-color: #65AD4E;
     color: darken(#65AD4E, 10%);
   }
 }
-
 .issue-line {
   height: 4px;
   background-color: #E6E6E6;
 }
-
 .issue-add-comment {
   .panel {
     margin-left: 60px;
     }
   }
 }
-
 textarea#issue-add-content {
   width: 100%;
   box-sizing: border-box;
   height: 120px;
+  resize: vertical;
 }
\ No newline at end of file
index b6e31940a59bc84b28d8205031a7756de04d96e7..3bf11c8cee8dae3177124b3d4b601b09e7028dd9 100644 (file)
 @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
index 8c5d9376c84b35546e195d408887c56126cbbebb..b2444f85227c48c62399507132798a1bd87ef9b1 100644 (file)
@@ -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>&nbsp;&nbsp;
+                    <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>&nbsp;&nbsp;
+                                        <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