ui: new commits page.

- changes according to design
- consistency, space saving etc

package.json

@@ -28,7 +28,7 b''
     "moment": "^2.18.1",
     "mousetrap": "^1.6.1",
     "qrious": "^4.0.2",
-    "sticky-sidebar": "3.3.1",
+    "sticky-sidebar": "3.3.4",
     "waypoints": "4.0.1",
     "webpack": "4.23.1",
     "webpack-cli": "3.1.2",

rhodecode/apps/repository/views/repo_commits.py

@@ -128,6 +128,7 b' class RepoCommitsView(RepoAppView):'
         c.statuses = []
         c.comments = []
         c.unresolved_comments = []
+        c.resolved_comments = []
         if len(c.commit_ranges) == 1:
             commit = c.commit_ranges[0]
             c.comments = CommentsModel().get_comments(
@@ -148,6 +149,8 b' class RepoCommitsView(RepoAppView):'
 
             c.unresolved_comments = CommentsModel()\
                 .get_commit_unresolved_todos(commit.raw_id)
+            c.resolved_comments = CommentsModel()\
+                .get_commit_resolved_todos(commit.raw_id)
 
         diff = None
         # Iterate over ranges (default commit view is always one commit)

rhodecode/model/comment.py

@@ -187,6 +187,23 b' class CommentsModel(BaseModel):'
 
         return todos
 
+    def get_commit_resolved_todos(self, commit_id, show_outdated=True):
+
+        todos = Session().query(ChangesetComment) \
+            .filter(ChangesetComment.revision == commit_id) \
+            .filter(ChangesetComment.resolved_by != None) \
+            .filter(ChangesetComment.comment_type
+                    == ChangesetComment.COMMENT_TYPE_TODO)
+
+        if not show_outdated:
+            todos = todos.filter(
+                coalesce(ChangesetComment.display_state, '') !=
+                ChangesetComment.COMMENT_OUTDATED)
+
+        todos = todos.all()
+
+        return todos
+
     def _log_audit_action(self, action, action_data, auth_user, comment):
         audit_logger.store(
             action=action,

rhodecode/public/css/buttons.less

@@ -71,6 +71,12 b' input[type="button"] {'
         margin: 0 0 0 0;
     }
 
+    &.btn-active {
+        color: @rcdarkblue;
+        background-color: @white;
+        .border ( @border-thickness, @rcdarkblue );
+    }
+
 }
 
 
@@ -97,6 +103,11 b' input[type="button"] {'
         .border ( @border-thickness-buttons, @grey5 );
         background-color: transparent;
     }
+    &.btn-active {
+        color: @rcdarkblue;
+        background-color: @white;
+        .border ( @border-thickness, @rcdarkblue );
+    }
 }
 
 .btn-primary,
@@ -214,8 +225,28 b' input[type="button"] {'
     display: inline-block;
     .btn {
         float: left;
-        margin: 0 0 0 -1px;
+        margin: 0 0 0 0;
+        // first item
+        &:first-of-type:not(:last-of-type) {
+            border-radius: @border-radius 0 0 @border-radius;
+
     }
+        // middle elements
+        &:not(:first-of-type):not(:last-of-type) {
+            border-radius: 0;
+            border-left-width: 0;
+            border-right-width: 0;
+        }
+        // last item
+        &:last-of-type:not(:first-of-type) {
+            border-radius: 0 @border-radius @border-radius 0;
+        }
+
+        &:only-child {
+            border-radius: @border-radius;
+        }
+    }
+
 }
 
 .btn-link {

rhodecode/public/css/code-block.less

@@ -682,13 +682,14 b' input.filediff-collapse-state {'
             display: none
         }
         .filediff-collapse-indicator {
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 4.5px 0 4.5px 9.3px;
-            border-color: transparent transparent transparent  #aaa;
-            margin: 6px 0px;
+            float: left;
+            cursor: pointer;
+            margin: 1px -5px;
         }
+        .filediff-collapse-indicator:before {
+            content: '\f105';
+        }
+
         .filediff-menu {
             display: none;
         }
@@ -696,18 +697,20 b' input.filediff-collapse-state {'
     }
 
     &+ .filediff { /* file diff is expanded */
+
         .filediff-collapse-indicator {
-            width: 0;
-            height: 0;
-            border-style: solid;
-            border-width: 9.3px 4.5px 0 4.5px;
-            border-color: #aaa transparent transparent transparent;
-            margin: 6px 0px;
+            float: left;
+            cursor: pointer;
+            margin: 1px -5px;
+        }
+        .filediff-collapse-indicator:before {
+            content: '\f107';
+        }
 
-        }
         .filediff-menu {
             display: block;
         }
+
         margin: 10px 0;
         &:nth-child(2) {
             margin: 0;
@@ -735,13 +738,14 b' input.filediff-collapse-state {'
 
 #diff-file-sticky{
     will-change: min-height;
+    height: 80px;
 }
 
 .sidebar__inner{
     transform: translate(0, 0); /* For browsers don't support translate3d. */
     transform: translate3d(0, 0, 0);
     will-change: position, transform;
-    height: 70px;
+    height: 65px;
     z-index: 30;
     background-color: #fff;
     padding: 5px 0px;
@@ -775,10 +779,17 b' input.filediff-collapse-state {'
 }
 
 .diffset-menu {
-    margin-bottom: 20px;
+
 }
+
+#todo-box {
+    clear:both;
+    display: none;
+    text-align: right
+}
+
 .diffset {
-    margin: 20px auto;
+    margin: 0px auto;
     .diffset-heading {
         border: 1px solid @grey5;
         margin-bottom: -1px;
@@ -826,6 +837,8 b' input.filediff-collapse-state {'
         margin-right: 3px;
         font-size: 12px;
         font-weight: normal;
+        min-width: 30px;
+        text-align: center;
 
         &:first-child {
             border-radius: @border-radius 0 0 @border-radius;
@@ -877,18 +890,10 b' input.filediff-collapse-state {'
         }
     }
 
-    .filediff-collapse-indicator {
-        border-style: solid;
-        float: left;
-        margin: 4px 0px 0 0;
-        cursor: pointer;
-    }
-
     .filediff-heading {
-        background: @grey7;
         cursor: pointer;
         display: block;
-        padding: 5px 10px;
+        padding: 10px 10px;
     }
     .filediff-heading:after {
         content: "";
@@ -900,9 +905,9 b' input.filediff-collapse-state {'
     }
 
     .filediff-menu {
-        float: right;
         text-align: right;
         padding: 5px 5px 5px 0px;
+        background: @grey7;
 
         &> a,
         &> span {
@@ -958,8 +963,16 b' input.filediff-collapse-state {'
 }
 
 
+.op-added {
+    color: @alert1;
+}
+
+.op-deleted {
+    color: @alert2;
+}
 
 .filediff, .filelist {
+
     .pill {
         &[op="name"] {
             background: none;

rhodecode/public/css/comments.less

@@ -10,6 +10,14 b''
     width: 100%;
 }
 
+.comments-heading {
+    margin-bottom: -1px;
+    background: @grey6;
+    display: block;
+    padding: 10px 0px;
+    font-size: 18px
+}
+
 tr.inline-comments div {
     max-width: 100%;
 

rhodecode/public/css/main.less

@@ -1107,6 +1107,52 b' label {'
     }
 }
 
+.review-status {
+    &.under_review {
+        color: @alert3;
+    }
+    &.approved {
+        color: @alert1;
+    }
+    &.rejected,
+    &.forced_closed{
+        color: @alert2;
+    }
+    &.not_reviewed {
+        color: @grey5;
+    }
+}
+
+.review-status-under_review {
+  color: @alert3;
+}
+.status-tag-under_review {
+  border-color: @alert3;
+}
+
+.review-status-approved {
+  color: @alert1;
+}
+.status-tag-approved {
+  border-color: @alert1;
+}
+
+.review-status-rejected,
+.review-status-forced_closed {
+  color: @alert2;
+}
+.status-tag-rejected,
+.status-tag-forced_closed {
+  border-color: @alert2;
+}
+
+.review-status-not_reviewed {
+  color: @grey5;
+}
+.status-tag-not_reviewed {
+  border-color: @grey5;
+}
+
 .flag_status_comment_box {
 	margin: 5px 6px 0px 2px;
 }

rhodecode/public/css/rcicons.less

@@ -1,12 +1,12 b''
 @font-face {
   font-family: 'rcicons';
 
-  src: url('../fonts/RCIcons/rcicons.eot?92789106');
-  src: url('../fonts/RCIcons/rcicons.eot?92789106#iefix') format('embedded-opentype'),
-       url('../fonts/RCIcons/rcicons.woff2?92789106') format('woff2'),
-       url('../fonts/RCIcons/rcicons.woff?92789106') format('woff'),
-       url('../fonts/RCIcons/rcicons.ttf?92789106') format('truetype'),
-       url('../fonts/RCIcons/rcicons.svg?92789106#rcicons') format('svg');
+  src: url('../fonts/RCIcons/rcicons.eot?44705679');
+  src: url('../fonts/RCIcons/rcicons.eot?44705679#iefix') format('embedded-opentype'),
+       url('../fonts/RCIcons/rcicons.woff2?44705679') format('woff2'),
+       url('../fonts/RCIcons/rcicons.woff?44705679') format('woff'),
+       url('../fonts/RCIcons/rcicons.ttf?44705679') format('truetype'),
+       url('../fonts/RCIcons/rcicons.svg?44705679#rcicons') format('svg');
 
   font-weight: normal;
   font-style: normal;
@@ -163,8 +163,6 b''
 .icon-down:before { content: '\e80b'; } /* '' */
 .icon-folder:before { content: '\e80c'; } /* '' */
 .icon-folder-open:before { content: '\e80d'; } /* '' */
-.icon-folder-empty:before { content: '\f114'; } /* '' */
-.icon-folder-open-empty:before { content: '\f115'; } /* '' */
 .icon-trash-empty:before { content: '\e80e'; } /* '' */
 .icon-group:before { content: '\e80f'; } /* '' */
 .icon-remove:before { content: '\e810'; } /* '' */
@@ -187,6 +185,7 b''
 .icon-info-circled:before { content: '\e821'; } /* '' */
 .icon-upload:before { content: '\e822'; } /* '' */
 .icon-home:before { content: '\e823'; } /* '' */
+.icon-flag-filled:before { content: '\e824'; } /* '' */
 .icon-git:before { content: '\e82a'; } /* '' */
 .icon-hg:before { content: '\e82d'; } /* '' */
 .icon-svn:before { content: '\e82e'; } /* '' */
@@ -195,11 +194,24 b''
 .icon-rhodecode:before { content: '\e831'; } /* '' */
 .icon-up:before { content: '\e832'; } /* '' */
 .icon-merge:before { content: '\e833'; } /* '' */
+.icon-spin-alt:before { content: '\e834'; } /* '' */
+.icon-spin:before { content: '\e838'; } /* '' */
 .icon-docs:before { content: '\f0c5'; } /* '' */
 .icon-menu:before { content: '\f0c9'; } /* '' */
+.icon-sort:before { content: '\f0dc'; } /* '' */
 .icon-paste:before { content: '\f0ea'; } /* '' */
 .icon-doc-text:before { content: '\f0f6'; } /* '' */
 .icon-plus-squared:before { content: '\f0fe'; } /* '' */
+.icon-angle-left:before { content: '\f104'; } /* '' */
+.icon-angle-right:before { content: '\f105'; } /* '' */
+.icon-angle-up:before { content: '\f106'; } /* '' */
+.icon-angle-down:before { content: '\f107'; } /* '' */
+.icon-circle-empty:before { content: '\f10c'; } /* '' */
+.icon-circle:before { content: '\f111'; } /* '' */
+.icon-folder-empty:before { content: '\f114'; } /* '' */
+.icon-folder-open-empty:before { content: '\f115'; } /* '' */
+.icon-code:before { content: '\f121'; } /* '' */
+.icon-info:before { content: '\f129'; } /* '' */
 .icon-minus-squared:before { content: '\f146'; } /* '' */
 .icon-minus-squared-alt:before { content: '\f147'; } /* '' */
 .icon-doc-inv:before { content: '\f15b'; } /* '' */
@@ -207,10 +219,9 b''
 .icon-plus-squared-alt:before { content: '\f196'; } /* '' */
 .icon-file-code:before { content: '\f1c9'; } /* '' */
 .icon-history:before { content: '\f1da'; } /* '' */
+.icon-circle-thin:before { content: '\f1db'; } /* '' */
 .icon-sliders:before { content: '\f1de'; } /* '' */
 .icon-trash:before { content: '\f1f8'; } /* '' */
-.icon-spin-alt:before { content: '\e834'; } /* '' */
-.icon-spin:before { content: '\e838'; } /* '' */
 
 
 // MERGED ICONS BASED ON CURRENT ONES
@@ -233,10 +244,12 b''
 .icon-false:before { &:extend(.icon-delete:before); }
 .icon-expand-linked:before { &:extend(.icon-down:before); }
 .icon-pr-merge-fail:before { &:extend(.icon-delete:before); }
+.icon-wide-mode:before { &:extend(.icon-sort:before); }
+.icon-flag-filled-red:before { &:extend(.icon-flag-filled:before); }
 
 // TRANSFORM
-
 .icon-merge:before {transform: rotate(180deg);}
+.icon-wide-mode:before {transform: rotate(90deg);}
 
 // -- END ICON CLASSES -- //
 
@@ -254,6 +267,7 b''
 .icon-false { color: @grey5 }
 .icon-expand-linked { cursor: pointer; color: @grey3; font-size: 14px }
 .icon-more-linked { cursor: pointer; color: @grey3 }
+.icon-flag-filled-red { color: @color5 !important; }
 
 .repo-switcher-dropdown .select2-result-label {
     .icon-git:before {

rhodecode/public/css/select2.less

@@ -152,6 +152,8 b' select.select2{height:28px;visibility:hi'
 .drop-menu-no-width {
   .drop-menu-base;
   width: auto;
+  min-width: 0;
+  margin: 0;
 }
 
 .field-sm .drop-menu {

rhodecode/public/css/summary.less

@@ -153,6 +153,7 b''
         text-align: center;
         color: #949494;
         font-size: 11px;
+        line-height: 1.3em;
 
         &:hover {
             background: #f1f1f1;
@@ -199,6 +200,10 b''
     .fieldset {
         margin-bottom: 0;
     }
+
+    .tags-main {
+        margin-bottom: 5px;
+    }
 }
 
 .fieldset {

rhodecode/public/fonts/RCIcons/config.json

@@ -564,6 +564,72 b''
       "src": "fontawesome"
     },
     {
+      "uid": "7034e4d22866af82bef811f52fb1ba46",
+      "css": "code",
+      "code": 61729,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "f3f90c8c89795da30f7444634476ea4f",
+      "css": "angle-left",
+      "code": 61700,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "7bf14281af5633a597f85b061ef1cfb9",
+      "css": "angle-right",
+      "code": 61701,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5de9370846a26947e03f63142a3f1c07",
+      "css": "angle-up",
+      "code": 61702,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "e4dde1992f787163e2e2b534b8c8067d",
+      "css": "angle-down",
+      "code": 61703,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "4i0s2bklai5fywieqm4dqqngfz9ptfab",
+      "css": "flag-filled",
+      "code": 59428,
+      "src": "typicons"
+    },
+    {
+      "uid": "3d4ea8a78dc34efe891f3a0f3d961274",
+      "css": "info",
+      "code": 61737,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "56a21935a5d4d79b2e91ec00f760b369",
+      "css": "sort",
+      "code": 61660,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "130380e481a7defc690dfb24123a1f0c",
+      "css": "circle",
+      "code": 61713,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "422e07e5afb80258a9c4ed1706498f8a",
+      "css": "circle-empty",
+      "code": 61708,
+      "src": "fontawesome"
+    },
+    {
+      "uid": "5774d0a0e50f6eefc8be01bd761e5dd3",
+      "css": "circle-thin",
+      "code": 61915,
+      "src": "fontawesome"
+    },
+    {
       "uid": "c43db6645e7515889fc2193294f50767",
       "css": "plus",
       "code": 59411,

rhodecode/public/fonts/RCIcons/rcicons.svg

@@ -78,6 +78,8 b''
 
 <glyph glyph-name="home" unicode="&#xe823;" d="M888 336q16-16 11-27t-27-11l-84 0 0-310q0-14-1-21t-8-13-23-6l-204 0 0 310-204 0 0-310-194 0q-28 0-35 10t-7 30l0 310-84 0q-22 0-27 11t11 27l400 402q16 16 38 16t38-16z" horiz-adv-x="900" />
 
+<glyph glyph-name="flag-filled" unicode="&#xe824;" d="M640 693q25 25 57 11t32-47l0-418q0-21-15-36-80-80-193-80t-193 80q-47 46-110 50t-114-36l0-238q0-21-15-37t-36-15-37 15-16 37l0 678q0 21 15 36 80 80 193 80t193-80q50-50 120-50t119 50z" horiz-adv-x="729" />
+
 <glyph glyph-name="git" unicode="&#xe82a;" d="M929 844h-858c-36 0-65-30-65-65v-857c0-36 30-65 65-65h857c36 0 65 30 65 65v857c1 35-29 65-64 65z m-729-549c4-11 9-20 14-27 6-8 14-14 22-18 9-4 19-6 29-6 9 0 16 1 24 2 7 2 14 4 20 7l6 51h-27c-4 0-8 1-10 4-2 1-3 5-3 7l5 39h105l-16-131c-8-7-16-12-25-15-9-4-18-8-28-10-10-3-18-5-30-7-10-1-21-2-33-2-20 0-38 4-54 11-16 8-30 18-41 30-12 13-20 28-27 45-6 18-10 36-10 56 0 18 3 34 7 50 3 17 10 30 17 44 8 14 16 25 26 36 10 12 22 20 34 28 13 7 26 14 41 17 15 4 30 7 47 7 13 0 25-2 36-4 11-3 21-6 29-10 8-4 16-9 22-14 6-5 13-11 18-16l-20-31c-4-5-9-8-14-9-5-1-10 0-16 4-5 3-10 6-14 8-5 3-9 5-14 7-5 1-10 2-15 3-5 2-11 2-17 2-14 0-27-3-38-9-11-6-21-14-29-25-8-10-15-24-18-38-5-15-7-31-7-48-1-14 2-27 4-38z m336-102h-71l39 315h71l-39-315z m343 258h-80l-33-258h-70l32 258h-80l7 57h231l-7-57z" horiz-adv-x="1000" />
 
 <glyph glyph-name="hg" unicode="&#xe82d;" d="M927 841h-853c-36 0-65-29-65-65v-853c0-36 29-65 65-65h853c36 0 65 29 65 65v853c0 36-29 65-65 65z m-483-648h-70l16 133h-113l-17-133h-70l39 313h70l-16-132h113l16 132h71l-39-313z m177 101c3-11 8-20 14-27 7-8 14-14 23-18 8-4 18-6 28-6 9 0 16 1 23 3 7 1 14 3 20 6l6 51h-27c-4 0-7 1-9 3-3 3-3 6-3 9l5 39h104l-16-131c-8-6-16-11-25-15-9-5-18-8-27-11-9-2-19-4-30-6-10-1-21-2-33-2-19 0-37 4-53 11-16 7-30 17-41 29-11 13-20 28-26 45-7 17-10 35-10 55 0 17 2 34 6 50 4 15 10 30 17 43 7 14 16 26 26 36 10 11 22 20 34 28 13 7 27 13 41 17 14 4 30 7 46 7 13 0 25-2 36-4 11-3 20-6 29-10 8-4 16-9 23-14 7-5 13-11 18-17l-23-28c-4-5-8-8-13-9-5-1-11 0-16 3-5 4-10 7-14 9-5 3-9 5-14 6-4 2-9 3-14 4-5 1-11 1-17 1-14 0-27-3-38-8-11-6-21-14-29-25-8-10-15-23-19-38-5-15-7-31-7-49 0-13 2-26 5-37z" horiz-adv-x="1000" />
@@ -102,16 +104,34 b''
 
 <glyph glyph-name="menu" unicode="&#xf0c9;" d="M857 100v-71q0-15-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 25t25 11h785q15 0 26-11t10-25z m0 286v-72q0-14-10-25t-26-10h-785q-15 0-25 10t-11 25v72q0 14 11 25t25 10h785q15 0 26-10t10-25z m0 285v-71q0-14-10-25t-26-11h-785q-15 0-25 11t-11 25v71q0 15 11 26t25 10h785q15 0 26-10t10-26z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="sort" unicode="&#xf0dc;" d="M571 243q0-15-10-25l-250-250q-11-11-25-11t-25 11l-250 250q-11 10-11 25t11 25 25 11h500q14 0 25-11t10-25z m0 214q0-14-10-25t-25-11h-500q-15 0-25 11t-11 25 11 25l250 250q10 11 25 11t25-11l250-250q10-10 10-25z" horiz-adv-x="571.4" />
+
 <glyph glyph-name="paste" unicode="&#xf0ea;" d="M429-79h500v358h-233q-22 0-37 15t-16 38v232h-214v-643z m142 804v36q0 7-5 12t-12 6h-393q-7 0-13-6t-5-12v-36q0-7 5-13t13-5h393q7 0 12 5t5 13z m143-375h167l-167 167v-167z m286-71v-375q0-23-16-38t-38-16h-535q-23 0-38 16t-16 38v89h-303q-23 0-38 16t-16 37v750q0 23 16 38t38 16h607q22 0 38-16t15-38v-183q12-7 20-15l228-228q16-15 27-42t11-49z" horiz-adv-x="1000" />
 
 <glyph glyph-name="doc-text" unicode="&#xf0f6;" d="M819 638q16-16 27-42t11-50v-642q0-23-15-38t-38-16h-750q-23 0-38 16t-16 38v892q0 23 16 38t38 16h500q22 0 49-11t42-27z m-248 136v-210h210q-5 17-12 23l-175 175q-6 7-23 12z m215-853v572h-232q-23 0-38 16t-16 37v233h-429v-858h715z m-572 483q0 7 5 12t13 5h393q8 0 13-5t5-12v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36z m411-125q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z m0-143q8 0 13-5t5-13v-36q0-8-5-13t-13-5h-393q-8 0-13 5t-5 13v36q0 8 5 13t13 5h393z" horiz-adv-x="857.1" />
 
 <glyph glyph-name="plus-squared" unicode="&#xf0fe;" d="M714 314v72q0 14-10 25t-25 10h-179v179q0 15-11 25t-25 11h-71q-15 0-25-11t-11-25v-179h-178q-15 0-25-10t-11-25v-72q0-14 11-25t25-10h178v-179q0-14 11-25t25-11h71q15 0 25 11t11 25v179h179q14 0 25 10t10 25z m143 304v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="angle-left" unicode="&#xf104;" d="M350 546q0-7-6-12l-219-220 219-219q6-6 6-13t-6-13l-28-28q-5-5-12-5t-13 5l-260 261q-6 5-6 12t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="357.1" />
+
+<glyph glyph-name="angle-right" unicode="&#xf105;" d="M332 314q0-7-5-12l-261-261q-5-5-12-5t-13 5l-28 28q-6 6-6 13t6 13l219 219-219 220q-6 5-6 12t6 13l28 28q5 6 13 6t12-6l261-260q5-5 5-13z" horiz-adv-x="357.1" />
+
+<glyph glyph-name="angle-up" unicode="&#xf106;" d="M600 189q0-7-6-12l-28-28q-5-6-12-6t-13 6l-220 219-219-219q-5-6-13-6t-12 6l-28 28q-6 5-6 12t6 13l260 260q5 6 12 6t13-6l260-260q6-5 6-13z" horiz-adv-x="642.9" />
+
+<glyph glyph-name="angle-down" unicode="&#xf107;" d="M600 439q0-7-6-12l-260-261q-5-5-13-5t-12 5l-260 261q-6 5-6 12t6 13l28 28q5 6 12 6t13-6l219-219 220 219q5 6 13 6t12-6l28-28q6-5 6-13z" horiz-adv-x="642.9" />
+
+<glyph glyph-name="circle-empty" unicode="&#xf10c;" d="M429 654q-83 0-153-41t-110-111-41-152 41-152 110-111 153-41 152 41 110 111 41 152-41 152-110 111-152 41z m428-304q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
+<glyph glyph-name="circle" unicode="&#xf111;" d="M857 350q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="folder-empty" unicode="&#xf114;" d="M857 118v393q0 22-15 38t-38 15h-393q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-536q0-22 16-38t38-16h679q22 0 38 16t15 38z m72 393v-393q0-51-37-88t-88-37h-679q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h375q51 0 88-37t37-88z" horiz-adv-x="928.6" />
 
 <glyph glyph-name="folder-open-empty" unicode="&#xf115;" d="M994 331q0 19-30 19h-607q-22 0-48-12t-39-29l-164-203q-11-13-11-22 0-20 30-20h607q23 0 48 13t40 29l164 203q10 12 10 22z m-637 90h429v90q0 22-16 38t-38 15h-321q-23 0-38 16t-16 38v36q0 22-15 38t-38 15h-179q-22 0-38-15t-16-38v-476l143 175q25 30 65 49t78 19z m708-90q0-35-25-67l-165-203q-24-30-65-49t-78-19h-607q-51 0-88 37t-37 88v536q0 51 37 88t88 37h179q51 0 88-37t37-88v-18h303q52 0 88-37t37-88v-90h107q30 0 56-13t37-40q8-17 8-37z" horiz-adv-x="1071.4" />
 
+<glyph glyph-name="code" unicode="&#xf121;" d="M344 69l-28-28q-5-5-12-5t-13 5l-260 261q-6 5-6 12t6 13l260 260q5 6 13 6t12-6l28-28q6-5 6-13t-6-12l-219-220 219-219q6-6 6-13t-6-13z m330 596l-208-721q-2-7-9-11t-13-1l-34 9q-8 3-11 9t-2 14l209 720q2 8 8 11t13 2l35-10q7-2 11-9t1-13z m367-363l-260-261q-6-5-13-5t-13 5l-28 28q-5 6-5 13t5 13l219 219-219 220q-5 5-5 12t5 13l28 28q6 6 13 6t13-6l260-260q5-5 5-13t-5-12z" horiz-adv-x="1071.4" />
+
+<glyph glyph-name="info" unicode="&#xf129;" d="M357 100v-71q0-15-10-25t-26-11h-285q-15 0-25 11t-11 25v71q0 15 11 25t25 11h35v214h-35q-15 0-25 11t-11 25v71q0 15 11 25t25 11h214q15 0 25-11t11-25v-321h35q15 0 26-11t10-25z m-71 643v-107q0-15-11-25t-25-11h-143q-14 0-25 11t-11 25v107q0 14 11 25t25 11h143q15 0 25-11t11-25z" horiz-adv-x="357.1" />
+
 <glyph glyph-name="minus-squared" unicode="&#xf146;" d="M714 314v72q0 14-10 25t-25 10h-500q-15 0-25-10t-11-25v-72q0-14 11-25t25-10h500q14 0 25 10t10 25z m143 304v-536q0-66-47-113t-114-48h-535q-67 0-114 48t-47 113v536q0 66 47 113t114 48h535q67 0 114-48t47-113z" horiz-adv-x="857.1" />
 
 <glyph glyph-name="minus-squared-alt" unicode="&#xf147;" d="M643 404v-36q0-8-5-13t-13-5h-464q-8 0-13 5t-5 13v36q0 7 5 12t13 5h464q8 0 13-5t5-12z m71-250v464q0 37-26 63t-63 26h-464q-37 0-63-26t-27-63v-464q0-37 27-63t63-27h464q37 0 63 27t26 63z m72 464v-464q0-67-47-114t-114-47h-464q-67 0-114 47t-47 114v464q0 66 47 113t114 48h464q66 0 114-48t47-113z" horiz-adv-x="785.7" />
@@ -126,6 +146,8 b''
 
 <glyph glyph-name="history" unicode="&#xf1da;" d="M857 350q0-87-34-166t-91-137-137-92-166-34q-96 0-183 41t-147 114q-4 6-4 13t5 11l76 77q6 5 14 5 9-1 13-7 41-53 100-82t126-29q58 0 110 23t92 61 61 91 22 111-22 111-61 91-92 61-110 23q-55 0-105-20t-90-57l77-77q17-16 8-38-10-23-33-23h-250q-15 0-25 11t-11 25v250q0 24 22 33 22 10 39-8l72-72q60 57 137 88t159 31q87 0 166-34t137-92 91-137 34-166z m-357 161v-250q0-8-5-13t-13-5h-178q-8 0-13 5t-5 13v35q0 8 5 13t13 5h125v197q0 8 5 13t12 5h36q8 0 13-5t5-13z" horiz-adv-x="857.1" />
 
+<glyph glyph-name="circle-thin" unicode="&#xf1db;" d="M429 707q-73 0-139-28t-114-76-76-114-29-139 29-139 76-113 114-77 139-28 138 28 114 77 76 113 29 139-29 139-76 114-114 76-138 28z m428-357q0-117-57-215t-156-156-215-58-216 58-155 156-58 215 58 215 155 156 216 58 215-58 156-156 57-215z" horiz-adv-x="857.1" />
+
 <glyph glyph-name="sliders" unicode="&#xf1de;" d="M196 64v-71h-196v71h196z m197 72q14 0 25-11t11-25v-143q0-14-11-25t-25-11h-143q-14 0-25 11t-11 25v143q0 15 11 25t25 11h143z m89 214v-71h-482v71h482z m-357 286v-72h-125v72h125z m732-572v-71h-411v71h411z m-536 643q15 0 26-10t10-26v-142q0-15-10-25t-26-11h-142q-15 0-25 11t-11 25v142q0 15 11 26t25 10h142z m358-286q14 0 25-10t10-25v-143q0-15-10-25t-25-11h-143q-15 0-25 11t-11 25v143q0 14 11 25t25 10h143z m178-71v-71h-125v71h125z m0 286v-72h-482v72h482z" horiz-adv-x="857.1" />
 
 <glyph glyph-name="trash" unicode="&#xf1f8;" d="M286 82v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m143 0v393q0 8-5 13t-13 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q8 0 13 5t5 13z m142 0v393q0 8-5 13t-12 5h-36q-8 0-13-5t-5-13v-393q0-8 5-13t13-5h36q7 0 12 5t5 13z m-303 554h250l-27 65q-4 5-9 6h-177q-6-1-10-6z m518-18v-36q0-8-5-13t-13-5h-54v-529q0-46-26-80t-63-34h-464q-37 0-63 33t-27 79v531h-53q-8 0-13 5t-5 13v36q0 8 5 13t13 5h172l39 93q9 21 31 35t44 15h178q23 0 44-15t30-35l39-93h173q8 0 13-5t5-13z" horiz-adv-x="785.7" />

rhodecode/templates/changeset/changeset.mako

@@ -1,10 +1,12 b''
 ## -*- coding: utf-8 -*-
 
 <%inherit file="/base/base.mako"/>
+<%namespace name="base" file="/base/base.mako"/>
 <%namespace name="diff_block" file="/changeset/diff_block.mako"/>
+<%namespace name="file_base" file="/files/base.mako"/>
 
 <%def name="title()">
-    ${_('%s Commit') % c.repo_name} - ${h.show_id(c.commit)}
+    ${_('{} Commit').format(c.repo_name)} - ${h.show_id(c.commit)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
@@ -19,120 +21,111 b''
 </%def>
 
 <%def name="main()">
-<script>
+<script type="text/javascript">
     // TODO: marcink switch this to pyroutes
     AJAX_COMMENT_DELETE_URL = "${h.route_path('repo_commit_comment_delete',repo_name=c.repo_name,commit_id=c.commit.raw_id,comment_id='__COMMENT_ID__')}";
     templateContext.commit_data.commit_id = "${c.commit.raw_id}";
 </script>
+
 <div class="box">
 
-  <div id="changeset_compare_view_content"  class="summary changeset">
-    <div class="summary-detail">
+  <div class="summary">
+
         <div class="fieldset">
-          <div class="left-label-summary">
-            <p>${_('Commit')}</p>
-            <div class="right-label-summary">
-              <code>
-                  ${h.show_id(c.commit)}
-              </code>
+        <div class="left-content">
+
+          <div class="left-content-avatar">
+            ${base.gravatar(c.commit.author_email, 30)}
+          </div>
+
+          <div class="left-content-message">
+          <div class="fieldset collapsable-content no-hide" data-toggle="summary-details">
+            <div class="commit truncate-wrap">${h.urlify_commit_message(h.chop_at_smart(c.commit.message, '\n', suffix_if_chopped='...'), c.repo_name)}</div>
+          </div>
+
+          <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none">
+            <div class="commit">${h.urlify_commit_message(c.commit.message,c.repo_name)}</div>
+          </div>
+
+          <div class="fieldset" data-toggle="summary-details">
+            <div class="">
+                <table>
+                <tr class="file_author tooltip" title="${h.tooltip(h.author_string(c.commit.author_email))}">
+
+                    <td>
+                        <span class="user commit-author">${h.link_to_user(c.commit.author)}</span>
+                        <span class="commit-date">- ${h.age_component(c.commit.date)}</span>
+                    </td>
+
+                    <td>
+                    ## second cell for consistency with files
+                    </td>
+                </tr>
+                </table>
+            </div>
+          </div>
+
+        </div>
+        </div>
+
+          <div class="right-content">
+
+          <div data-toggle="summary-details">
+              <div class="tags tags-main">
+                <code><a href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">${h.show_id(c.commit)}</a></code>
               <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
-              % if hasattr(c.commit, 'phase'):
-                    <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">${c.commit.phase}</span>
+                ${file_base.refs(c.commit)}
+
+                ## phase
+                % if hasattr(c.commit, 'phase') and getattr(c.commit, 'phase') != 'public':
+                    <span class="tag phase-${c.commit.phase} tooltip" title="${_('Commit phase')}">
+                        <i class="icon-info"></i>${c.commit.phase}
+                    </span>
               % endif
 
               ## obsolete commits
-              % if hasattr(c.commit, 'obsolete'):
-                % if c.commit.obsolete:
-                    <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">${_('obsolete')}</span>
-                % endif
+                % if getattr(c.commit, 'obsolete', False):
+                    <span class="tag obsolete-${c.commit.obsolete} tooltip" title="${_('Evolve State')}">
+                        ${_('obsolete')}
+                    </span>
               % endif
 
               ## hidden commits
-              % if hasattr(c.commit, 'hidden'):
-                % if c.commit.hidden:
-                    <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">${_('hidden')}</span>
+                % if getattr(c.commit, 'hidden', False):
+                    <span class="tag hidden-${c.commit.hidden} tooltip" title="${_('Evolve State')}">
+                        ${_('hidden')}
+                    </span>
                 % endif
+              </div>
+
+              %if c.statuses:
+                  <div class="tag status-tag-${c.statuses[0]} pull-right">
+                      <i class="icon-circle review-status-${c.statuses[0]}"></i>
+                      <div class="pull-right">${h.commit_status_lbl(c.statuses[0])}</div>
+                  </div>
               % endif
 
+          </div>
 
-              <div class="pull-right">
-                  <span id="parent_link">
+        </div>
+      </div>
+
+      <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
+        <div class="left-label-summary">
+          <p>${_('Commit navigation')}:</p>
+          <div class="right-label-summary">
+              <span id="parent_link" class="tag tagtag">
                     <a href="#parentCommit" title="${_('Parent Commit')}"><i class="icon-left icon-no-margin"></i>${_('parent')}</a>
                   </span>
-                   |
-                  <span id="child_link">
+
+              <span id="child_link" class="tag tagtag">
                     <a href="#childCommit" title="${_('Child Commit')}">${_('child')}<i class="icon-right icon-no-margin"></i></a>
                   </span>
               </div>
-
-              </div>
             </div>
           </div>
 
-
-
-      <div class="fieldset">
-        <div class="left-label-summary">
-          <p>${_('Description')}:</p>
-          <div class="right-label-summary">
-            <div id="trimmed_message_box" class="commit">${h.urlify_commit_message(c.commit.message,c.repo_name)}</div>
-            <div id="message_expand" style="display:none;">
-              ${_('Expand')}
-            </div>
-          </div>
-        </div>
-      </div>
-
-      %if c.statuses:
-      <div class="fieldset">
-        <div class="left-label-summary">
-          <p>${_('Commit status')}:</p>
-          <div class="right-label-summary">
-            <div class="changeset-status-ico">
-              <div class="${'flag_status %s' % c.statuses[0]} pull-left"></div>
-            </div>
-            <div title="${_('Commit status')}" class="changeset-status-lbl">[${h.commit_status_lbl(c.statuses[0])}]</div>
-          </div>
-        </div>
-      </div>
-      %endif
-
-      <div class="fieldset">
-        <div class="left-label-summary">
-          <p>${_('References')}:</p>
-          <div class="right-label-summary">
-            <div class="tags">
-              %if c.commit.merge:
-                <span class="mergetag tag">
-                 <i class="icon-merge"></i>${_('merge')}
-                </span>
-              %endif
-
-              %if h.is_hg(c.rhodecode_repo):
-                %for book in c.commit.bookmarks:
-                <span class="booktag tag" title="${h.tooltip(_('Bookmark %s') % book)}">
-                  <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=book))}"><i class="icon-bookmark"></i>${h.shorter(book)}</a>
-                </span>
-                %endfor
-              %endif
-
-              %for tag in c.commit.tags:
-               <span class="tagtag tag"  title="${h.tooltip(_('Tag %s') % tag)}">
-                <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=tag))}"><i class="icon-tag"></i>${tag}</a>
-               </span>
-              %endfor
-
-              %if c.commit.branch:
-                <span class="branchtag tag" title="${h.tooltip(_('Branch %s') % c.commit.branch)}">
-                  <a href="${h.route_path('repo_files:default_path',repo_name=c.repo_name,commit_id=c.commit.raw_id,_query=dict(at=c.commit.branch))}"><i class="icon-code-fork"></i>${h.shorter(c.commit.branch)}</a>
-                </span>
-              %endif
-              </div>
-            </div>
-        </div>
-      </div>
-
-      <div class="fieldset">
+      <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
         <div class="left-label-summary">
           <p>${_('Diff options')}:</p>
           <div class="right-label-summary">
@@ -153,58 +146,14 b''
         </div>
       </div>
 
-      <div class="fieldset">
-        <div class="left-label-summary">
-          <p>${_('Comments')}:</p>
-          <div class="right-label-summary">
-            <div class="comments-number">
-                %if c.comments:
-                    <a href="#comments">${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}</a>,
-                %else:
-                    ${_ungettext("%d Commit comment", "%d Commit comments", len(c.comments)) % len(c.comments)}
-                %endif
-                %if c.inline_cnt:
-                    <a href="#" onclick="return Rhodecode.comments.nextComment();" id="inline-comments-counter">${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}</a>
-                %else:
-                    ${_ungettext("%d Inline Comment", "%d Inline Comments", c.inline_cnt) % c.inline_cnt}
-                %endif
-            </div>
-            </div>
-        </div>
+      <div class="clear-fix"></div>
+
+      <div  class="btn-collapse" data-toggle="summary-details">
+        ${_('Show More')}
       </div>
 
-      <div class="fieldset">
-        <div class="left-label-summary">
-          <p>${_('Unresolved TODOs')}:</p>
-          <div class="right-label-summary">
-              <div class="comments-number">
-                  % if c.unresolved_comments:
-                      % for co in c.unresolved_comments:
-                          <a class="permalink" href="#comment-${co.comment_id}" onclick="Rhodecode.comments.scrollToComment($('#comment-${co.comment_id}'))"> #${co.comment_id}</a>${'' if loop.last else ','}
-                      % endfor
-                  % else:
-                      ${_('There are no unresolved TODOs')}
-                  % endif
-              </div>
-          </div>
-        </div>
       </div>
 
-      <div class="fieldset">
-        <div class="left-label-summary">
-          <p>${_('Author')}</p>
-
-          <div class="right-label-summary">
-            ${self.gravatar_with_user(c.commit.author)}
-            <div class="user-inline-data">- ${h.age_component(c.commit.date)}</div>
-          </div>
-        </div>
-
-    <div class="clear-fix"></div>
-
-    </div> <!-- end summary-detail -->
-  </div> <!-- end summary -->
-  </div>
   <div class="cs_files">
     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
     ${cbdiffs.render_diffset_menu(c.changes[c.commit.raw_id])}
@@ -212,6 +161,11 b''
       c.changes[c.commit.raw_id], commit=c.commit, use_comments=True,inline_comments=c.inline_comments )}
   </div>
 
+    <div class="comments-heading">
+        <i class="icon-comment"></i>
+        ${_('Comments')} ${len(c.comments)}
+    </div>
+
     ## template for inline comment form
     <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 
@@ -350,6 +304,7 b''
 
           // inject comments into their proper positions
           var file_comments = $('.inline-comment-placeholder');
+
       })
     </script>
 

rhodecode/templates/changeset/changeset_range.mako

@@ -23,6 +23,7 b''
 </%def>
 
 <%def name="main()">
+
     <div class="box">
         <div class="summary changeset">
             <div class="summary-detail">
@@ -60,8 +61,7 b''
                     <div class="right-label-summary">
                         <div class="code-header" >
                             <div class="compare_header">
-                              <div class="btn btn-primary">
-                                <a href="${h.route_path('repo_compare',
+                                <a class="btn btn-primary" href="${h.route_path('repo_compare',
                                 repo_name=c.repo_name,
                                 source_ref_type='rev',
                                 source_ref=getattr(c.commit_ranges[0].parents[0] if c.commit_ranges[0].parents else h.EmptyCommit(), 'raw_id'),
@@ -75,7 +75,6 b''
                         </div>
                     </div>
                 </div>
-              </div>
 
               <div class="clear-fix"></div>
             </div> <!-- end summary-detail -->
@@ -104,8 +103,9 b''
       <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
       <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
       <%namespace name="diff_block" file="/changeset/diff_block.mako"/>
-      ${cbdiffs.render_diffset_menu()}
+
       %for commit in c.commit_ranges:
+        ${cbdiffs.render_diffset_menu(c.changes[commit.raw_id])}
         ${cbdiffs.render_diffset(
             diffset=c.changes[commit.raw_id],
             collapse_when_files_over=5,

rhodecode/templates/codeblocks/diffs.mako

@@ -50,6 +50,12 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
     inline_comments=None,
 
 )">
+
+<%
+    diffset_container_id = h.md5(diffset.target_ref)
+    collapse_all = len(diffset.files) > collapse_when_files_over
+%>
+
 %if use_comments:
 <div id="cb-comments-inline-container-template" class="js-template">
   ${inline_comments_container([], inline_comments)}
@@ -79,9 +85,6 b" return '%s_%s_%i' % (h.md5_safe(commit+f"
 </div>
 
 %endif
-<%
-collapse_all = len(diffset.files) > collapse_when_files_over
-%>
 
 %if c.user_session_attrs["diffmode"] == 'sideside':
 <style>
@@ -107,37 +110,88 b' collapse_all = len(diffset.files) > coll'
 %endif
 
 <div class="diffset ${disable_new_comments and 'diffset-comments-disabled'}">
-    <div class="diffset-heading ${diffset.limited_diff and 'diffset-heading-warning' or ''}">
-        %if commit:
+
+    <div style="height: 20px; line-height: 20px">
+        ## expand/collapse action
+        <div class="pull-left">
+            <a class="${'collapsed' if collapse_all else ''}" href="#expand-files" onclick="toggleExpand(this, '${diffset_container_id}'); return false">
+            % if collapse_all:
+                <i class="icon-plus-squared-alt icon-no-margin"></i>${_('Expand all files')}
+            % else:
+                <i class="icon-minus-squared-alt icon-no-margin"></i>${_('Collapse all files')}
+            % endif
+            </a>
+
+        </div>
+
+        ## todos
+        <div class="pull-right">
+            <div class="comments-number" style="padding-left: 10px">
+                % if hasattr(c, 'unresolved_comments') and hasattr(c, 'resolved_comments'):
+                    <i class="icon-flag-filled" style="color: #949494">TODOs:</i>
+                    % if c.unresolved_comments:
+                        <a href="#show-todos" onclick="$('#todo-box').toggle(); return false">
+                            ${_('{} unresolved').format(len(c.unresolved_comments))}
+                        </a>
+                    % else:
+                        ${_('0 unresolved')}
+                    % endif
+
+                    ${_('{} Resolved').format(len(c.unresolved_comments))}
+                % endif
+            </div>
+        </div>
+
+        ## comments
             <div class="pull-right">
-                <a class="btn tooltip" title="${h.tooltip(_('Browse Files at revision {}').format(commit.raw_id))}" href="${h.route_path('repo_files',repo_name=diffset.repo_name, commit_id=commit.raw_id, f_path='')}">
-                    ${_('Browse Files')}
+            <div class="comments-number" style="padding-left: 10px">
+                % if hasattr(c, 'comments') and hasattr(c, 'inline_cnt'):
+                    <i class="icon-comment" style="color: #949494">COMMENTS:</i>
+                    % if c.comments:
+                        <a href="#comments">${_ungettext("{} General", "{} General", len(c.comments)).format(len(c.comments))}</a>,
+                    % else:
+                        ${_('0 General')}
+                    % endif
+
+                    % if c.inline_cnt:
+                        <a href="#" onclick="return Rhodecode.comments.nextComment();"
+                           id="inline-comments-counter">${_ungettext("{} Inline", "{} Inline", c.inline_cnt).format(c.inline_cnt)}
                 </a>
+                    % else:
+                        ${_('0 Inline')}
+                    % endif
+                % endif
+            </div>
+        </div>
+
+    </div>
+
+    % if diffset.limited_diff:
+        <div class="diffset-heading ${(diffset.limited_diff and 'diffset-heading-warning' or '')}">
+            <h2 class="clearinner">
+                ${_('The requested changes are too big and content was truncated.')}
+                <a href="${h.current_route_path(request, fulldiff=1)}" onclick="return confirm('${_("Showing a big diff might take some time and resources, continue?")}')">${_('Show full diff')}</a>
+            </h2>
+        </div>
+    ## commit range header for each individual diff
+    % elif commit and hasattr(c, 'commit_ranges') and len(c.commit_ranges) > 1:
+        <div class="diffset-heading ${(diffset.limited_diff and 'diffset-heading-warning' or '')}">
+            <div class="clearinner">
+                <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=diffset.repo_name,commit_id=commit.raw_id)}">${('r%s:%s' % (commit.idx,h.short_id(commit.raw_id)))}</a>
+            </div>
             </div>
         %endif
-        <h2 class="clearinner">
-        ## invidual commit
-        % if commit:
-            <a class="tooltip revision" title="${h.tooltip(commit.message)}" href="${h.route_path('repo_commit',repo_name=diffset.repo_name,commit_id=commit.raw_id)}">${('r%s:%s' % (commit.idx,h.short_id(commit.raw_id)))}</a> -
-            ${h.age_component(commit.date)}
-            % if diffset.limited_diff:
-                - ${_('The requested changes are too big and content was truncated.')}
-                ${_ungettext('%(num)s file changed.', '%(num)s files changed.', diffset.changed_files) % {'num': diffset.changed_files}}
-                <a href="${h.current_route_path(request, fulldiff=1)}" onclick="return confirm('${_("Showing a big diff might take some time and resources, continue?")}')">${_('Show full diff')}</a>
-            % elif hasattr(c, 'commit_ranges') and len(c.commit_ranges) > 1:
-                ## compare diff, has no file-selector and we want to show stats anyway
-               ${_ungettext('{num} file changed: {linesadd} inserted, ''{linesdel} deleted',
-                            '{num} files changed: {linesadd} inserted, {linesdel} deleted', diffset.changed_files) \
-                            .format(num=diffset.changed_files, linesadd=diffset.lines_added, linesdel=diffset.lines_deleted)}
+
+    <div id="todo-box">
+        % if hasattr(c, 'unresolved_comments') and c.unresolved_comments:
+            % for co in c.unresolved_comments:
+                <a class="permalink" href="#comment-${co.comment_id}"
+                   onclick="Rhodecode.comments.scrollToComment($('#comment-${co.comment_id}'))">
+                    <i class="icon-flag-filled-red"></i>
+                    ${co.comment_id}</a>${('' if loop.last else ',')}
+            % endfor
             % endif
-        % else:
-            ## pull requests/compare
-            ${_('File Changes')}
-        % endif
-
-        </h2>
     </div>
-
     %if diffset.has_hidden_changes:
         <p class="empty_data">${_('Some changes may be hidden')}</p>
     %elif not diffset.files:
@@ -157,14 +211,14 b' collapse_all = len(diffset.files) > coll'
         ## anchor with support of sticky header
         <div class="anchor" id="a_${h.FID(filediff.raw_id, filediff.patch['filename'])}"></div>
 
-        <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state" id="filediff-collapse-${id(filediff)}" type="checkbox" onchange="updateSticky();">
+        <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state collapse-${diffset_container_id}" id="filediff-collapse-${id(filediff)}" type="checkbox" onchange="updateSticky();">
         <div
             class="filediff"
             data-f-path="${filediff.patch['filename']}"
             data-anchor-id="${h.FID(filediff.raw_id, filediff.patch['filename'])}"
         >
         <label for="filediff-collapse-${id(filediff)}" class="filediff-heading">
-            <div class="filediff-collapse-indicator"></div>
+            <div class="filediff-collapse-indicator icon-"></div>
             ${diff_ops(filediff)}
         </label>
 
@@ -292,25 +346,26 b' collapse_all = len(diffset.files) > coll'
                 display_state = ''
         %>
         <div class="filediffs filediff-outdated" style="${display_state}">
-            <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state" id="filediff-collapse-${id(filename)}" type="checkbox" onchange="updateSticky();">
+            <input ${(collapse_all and 'checked' or '')} class="filediff-collapse-state collapse-${diffset_container_id}" id="filediff-collapse-${id(filename)}" type="checkbox" onchange="updateSticky();">
             <div class="filediff" data-f-path="${filename}"  id="a_${h.FID(filediff.raw_id, filename)}">
                 <label for="filediff-collapse-${id(filename)}" class="filediff-heading">
                     <div class="filediff-collapse-indicator"></div>
+
                     <span class="pill">
                         ## file was deleted
-                        <strong>${filename}</strong>
+                        ${filename}
                     </span>
-                    <span class="pill-group" style="float: left">
+                    <span class="pill-group pull-left" >
                         ## file op, doesn't need translation
                         <span class="pill" op="removed">removed in this version</span>
                     </span>
                     <a class="pill filediff-anchor" href="#a_${h.FID(filediff.raw_id, filename)}">¶</a>
-                    <span class="pill-group" style="float: right">
+                    <span class="pill-group pull-right">
                         <span class="pill" op="deleted">-${comments_dict['stats']}</span>
                     </span>
                 </label>
 
-                <table class="cb cb-diff-${c.user_session_attrs["diffmode"]} code-highlight ${over_lines_changed_limit and 'cb-collapsed' or ''}">
+                <table class="cb cb-diff-${c.user_session_attrs["diffmode"]} code-highlight ${(over_lines_changed_limit and 'cb-collapsed' or '')}">
                     <tr>
                         % if c.user_session_attrs["diffmode"] == 'unified':
                         <td></td>
@@ -358,29 +413,30 b' from rhodecode.lib.diffs import NEW_FILE'
     MOD_FILENODE, RENAMED_FILENODE, CHMOD_FILENODE, BIN_FILENODE, COPIED_FILENODE
 %>
     <span class="pill">
+        <i class="icon-file-text"></i>
         %if filediff.source_file_path and filediff.target_file_path:
             %if filediff.source_file_path != filediff.target_file_path:
                  ## file was renamed, or copied
                 %if RENAMED_FILENODE in filediff.patch['stats']['ops']:
-                    <strong>${filediff.target_file_path}</strong> ⬅ <del>${filediff.source_file_path}</del>
+                    ${filediff.target_file_path} ⬅ <del>${filediff.source_file_path}</del>
                     <% final_path = filediff.target_file_path %>
                 %elif COPIED_FILENODE in filediff.patch['stats']['ops']:
-                    <strong>${filediff.target_file_path}</strong> ⬅ ${filediff.source_file_path}
+                    ${filediff.target_file_path} ⬅ ${filediff.source_file_path}
                     <% final_path = filediff.target_file_path %>
                 %endif
             %else:
                 ## file was modified
-                <strong>${filediff.source_file_path}</strong>
+                ${filediff.source_file_path}
                 <% final_path = filediff.source_file_path %>
             %endif
         %else:
             %if filediff.source_file_path:
                 ## file was deleted
-                <strong>${filediff.source_file_path}</strong>
+                ${filediff.source_file_path}
                 <% final_path = filediff.source_file_path %>
             %else:
                 ## file was added
-                <strong>${filediff.target_file_path}</strong>
+                ${filediff.target_file_path}
                 <% final_path = filediff.target_file_path %>
             %endif
         %endif
@@ -389,7 +445,7 b' from rhodecode.lib.diffs import NEW_FILE'
     ## anchor link
     <a class="pill filediff-anchor" href="#a_${h.FID(filediff.raw_id, filediff.patch['filename'])}">¶</a>
 
-    <span class="pill-group" style="float: right">
+    <span class="pill-group pull-right">
 
         ## ops pills
         %if filediff.limited_diff:
@@ -501,13 +557,11 b' from rhodecode.lib.diffs import NEW_FILE'
         ${commentblock.comment_block(comment, inline=True)}
     %endfor
     % if comments and comments[-1].outdated:
-    <span class="btn btn-secondary cb-comment-add-button comment-outdated}"
-          style="display: none;}">
+    <span class="btn btn-secondary cb-comment-add-button comment-outdated}" style="display: none;}">
         ${_('Add another comment')}
     </span>
     % else:
-    <span onclick="return Rhodecode.comments.createComment(this)"
-          class="btn btn-secondary cb-comment-add-button">
+    <span onclick="return Rhodecode.comments.createComment(this)" class="btn btn-secondary cb-comment-add-button">
         ${_('Add another comment')}
     </span>
     % endif
@@ -717,7 +771,8 b' def get_comments_for(diff_type, comments'
 </button>
 </%def>
 
-<%def name="render_diffset_menu(diffset=None, range_diff_on=None)">
+<%def name="render_diffset_menu(diffset, range_diff_on=None)">
+    <% diffset_container_id = h.md5(diffset.target_ref) %>
 
     <div id="diff-file-sticky" class="diffset-menu clearinner">
         ## auto adjustable
@@ -725,22 +780,22 b' def get_comments_for(diff_type, comments'
             <div class="sidebar__bar">
             <div class="pull-right">
             <div class="btn-group">
-
-                ## DIFF OPTIONS via Select2
-                <div class="pull-left">
-                ${h.hidden('diff_menu')}
+                    <a class="btn tooltip toggle-wide-diff" href="#toggle-wide-diff" onclick="toggleWideDiff(this); return false" title="${h.tooltip(_('Toggle wide diff'))}">
+                    <i class="icon-wide-mode"></i>
+                    </a>
                 </div>
+                <div class="btn-group">
 
                 <a
-                  class="btn ${(c.user_session_attrs["diffmode"] == 'sideside' and 'btn-primary')} tooltip"
-                  title="${h.tooltip(_('View side by side'))}"
+                  class="btn ${(c.user_session_attrs["diffmode"] == 'sideside' and 'btn-active')} tooltip"
+                  title="${h.tooltip(_('View diff as side by side'))}"
                   href="${h.current_route_path(request, diffmode='sideside')}">
                     <span>${_('Side by Side')}</span>
                 </a>
 
                 <a
-                  class="btn ${(c.user_session_attrs["diffmode"] == 'unified' and 'btn-primary')} tooltip"
-                  title="${h.tooltip(_('View unified'))}" href="${h.current_route_path(request, diffmode='unified')}">
+                  class="btn ${(c.user_session_attrs["diffmode"] == 'unified' and 'btn-active')} tooltip"
+                  title="${h.tooltip(_('View diff as unified'))}" href="${h.current_route_path(request, diffmode='unified')}">
                     <span>${_('Unified')}</span>
                 </a>
 
@@ -760,20 +815,20 b' def get_comments_for(diff_type, comments'
                    </a>
                 % endif
             </div>
+                <div class="btn-group">
+
+                <div class="pull-left">
+                    ${h.hidden('diff_menu_{}'.format(diffset_container_id))}
+                </div>
+
+                </div>
         </div>
             <div class="pull-left">
             <div class="btn-group">
               <div class="pull-left">
-              ${h.hidden('file_filter')}
+                ${h.hidden('file_filter_{}'.format(diffset_container_id))}
               </div>
-              <a
-                  class="btn"
-                  href="#"
-                  onclick="$('input[class=filediff-collapse-state]').prop('checked', false); updateSticky(); return false">${_('Expand All Files')}</a>
-              <a
-                  class="btn"
-                  href="#"
-                  onclick="$('input[class=filediff-collapse-state]').prop('checked', true); updateSticky(); return false">${_('Collapse All Files')}</a>
+
             </div>
             </div>
         </div>
@@ -788,19 +843,19 b' def get_comments_for(diff_type, comments'
     </div>
 
     % if diffset:
-
         %if diffset.limited_diff:
             <% file_placeholder = _ungettext('%(num)s file changed', '%(num)s files changed', diffset.changed_files) % {'num': diffset.changed_files} %>
         %else:
-            <% file_placeholder = _ungettext('%(num)s file changed: %(linesadd)s inserted, ''%(linesdel)s deleted', '%(num)s files changed: %(linesadd)s inserted, %(linesdel)s deleted', diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}%>
+            <% file_placeholder = h.literal(_ungettext('%(num)s file changed: <span class="op-added">%(linesadd)s inserted</span>, <span class="op-deleted">%(linesdel)s deleted</span>', '%(num)s files changed: <span class="op-added">%(linesadd)s inserted</span>, <span class="op-deleted">%(linesdel)s deleted</span>',
+            diffset.changed_files) % {'num': diffset.changed_files, 'linesadd': diffset.lines_added, 'linesdel': diffset.lines_deleted}) %>
+
         %endif
         ## case on range-diff placeholder needs to be updated
         % if range_diff_on is True:
             <% file_placeholder = _('Disabled on range diff') %>
         % endif
 
-        <script>
-
+        <script type="text/javascript">
         var feedFilesOptions = function (query, initialData) {
             var data = {results: []};
             var isQuery = typeof query.term !== 'undefined';
@@ -826,14 +881,13 b' def get_comments_for(diff_type, comments'
             query.callback(data);
         };
 
-        var formatFileResult = function(result, container, query, escapeMarkup) {
-            return function(data, escapeMarkup) {
+        var selectionFormatter = function(data, escapeMarkup) {
                 var container = '<div class="filelist" style="padding-right:100px">{0}</div>';
-                var tmpl = '<span style="margin-right:-50px"><strong>{0}</strong></span>'.format(escapeMarkup(data['text']));
-                var pill = '<span class="pill-group" style="float: right;margin-right: -100px">' +
+            var tmpl = '<div><strong>{0}</strong></div>'.format(escapeMarkup(data['text']));
+            var pill = '<div class="pill-group" style="position: absolute; top:7px; right: 0">' +
                             '<span class="pill" op="added">{0}</span>' +
                             '<span class="pill" op="deleted">{1}</span>' +
-                           '</span>'
+                       '</div>'
                         ;
                 var added = data['ops']['added'];
                 if (added === 0) {
@@ -847,11 +901,20 b' def get_comments_for(diff_type, comments'
 
                 tmpl += pill.format(added, deleted);
                 return container.format(tmpl);
-
-            }(result, escapeMarkup);
+        };
+        var formatFileResult = function(result, container, query, escapeMarkup) {
+            return selectionFormatter(result, escapeMarkup);
         };
 
-        var preloadFileFilterData = {
+        var formatSelection = function (data, container) {
+            return '${file_placeholder}'
+        };
+
+        if (window.preloadFileFilterData === undefined) {
+            window.preloadFileFilterData = {}
+        }
+
+        preloadFileFilterData["${diffset_container_id}"] = {
             results: [
                 % for filediff in diffset.files:
                     {id:"a_${h.FID(filediff.raw_id, filediff.patch['filename'])}",
@@ -861,35 +924,48 b' def get_comments_for(diff_type, comments'
             ]
         };
 
-        $(document).ready(function () {
-
-            var fileFilter = $("#file_filter").select2({
+        var diffFileFilterId = "#file_filter_" + "${diffset_container_id}";
+        var diffFileFilter = $(diffFileFilterId).select2({
                 'dropdownAutoWidth': true,
                 'width': 'auto',
-                'placeholder': "${file_placeholder}",
+
                 containerCssClass: "drop-menu",
                 dropdownCssClass: "drop-menu-dropdown",
-                data: preloadFileFilterData,
+            data: preloadFileFilterData["${diffset_container_id}"],
                 query: function(query) {
-                    feedFilesOptions(query, preloadFileFilterData);
+                feedFilesOptions(query, preloadFileFilterData["${diffset_container_id}"]);
                 },
-                formatResult: formatFileResult
+            initSelection: function(element, callback) {
+              callback({'init': true});
+            },
+            formatResult: formatFileResult,
+            formatSelection: formatSelection
             });
 
             % if range_diff_on is True:
-                fileFilter.select2("enable", false);
+            diffFileFilter.select2("enable", false);
             % endif
 
-            $("#file_filter").on('click', function (e) {
+        $(diffFileFilterId).on('select2-selecting', function (e) {
+            var idSelector = e.choice.id;
+
+            // expand the container if we quick-select the field
+            $('#'+idSelector).next().prop('checked', false);
+            // hide the mast as we later do preventDefault()
+            $("#select2-drop-mask").click();
+
+            window.location.hash = '#'+idSelector;
+            updateSticky();
+
                 e.preventDefault();
-                var selected = $('#file_filter').select2('data');
-                var idSelector = "#"+selected.id;
-                window.location.hash = idSelector;
-                // expand the container if we quick-select the field
-                $(idSelector).next().prop('checked', false);
-                updateSticky()
             });
 
+        </script>
+    % endif
+
+    <script type="text/javascript">
+        $(document).ready(function () {
+
             var contextPrefix = _gettext('Context file: ');
             ## sticky sidebar
             var sidebarElement = document.getElementById('diff-file-sticky');
@@ -900,7 +976,7 b' def get_comments_for(diff_type, comments'
             });
             sidebarElement.addEventListener('affixed.static.stickySidebar', function () {
                 // reset our file so it's not holding new value
-                $('.fpath-placeholder-text').html(contextPrefix)
+                $('.fpath-placeholder-text').html(contextPrefix + ' - ')
             });
 
             updateSticky = function () {
@@ -908,16 +984,10 b' def get_comments_for(diff_type, comments'
                 Waypoint.refreshAll();
             };
 
-            var animateText =  $.debounce(100, function(fPath, anchorId) {
+            var animateText = function (fPath, anchorId) {
                 fPath = Select2.util.escapeMarkup(fPath);
-
-                // animate setting the text
-                var callback = function () {
-                    $('.fpath-placeholder-text').animate({'opacity': 1.00}, 200)
                     $('.fpath-placeholder-text').html(contextPrefix + '<a href="#a_' + anchorId + '">' + fPath + '</a>')
                 };
-                $('.fpath-placeholder-text').animate({'opacity': 0.15}, 200, callback);
-            });
 
             ## dynamic file waypoints
             var setFPathInfo = function(fPath, anchorId){
@@ -925,6 +995,7 b' def get_comments_for(diff_type, comments'
             };
 
             var codeBlock = $('.filediff');
+
             // forward waypoint
             codeBlock.waypoint(
                 function(direction) {
@@ -932,7 +1003,9 b' def get_comments_for(diff_type, comments'
                         setFPathInfo($(this.element).data('fPath'), $(this.element).data('anchorId'))
                     }
                 }, {
-                    offset: 70,
+                    offset: function () {
+                        return 70;
+                    },
                     context: '.fpath-placeholder'
                 }
             );
@@ -945,26 +1018,26 b' def get_comments_for(diff_type, comments'
                     }
                 }, {
                     offset: function () {
-                        return -this.element.clientHeight + 90
+                        return -this.element.clientHeight + 90;
                     },
                     context: '.fpath-placeholder'
                 }
             );
 
-            var preloadDiffMenuData = {
-                results: [
-                    ## Wide diff mode
-                    {
-                        id: 1,
-                        text: _gettext('Toggle Wide Mode diff'),
-                        action: function () {
+            toggleWideDiff = function (el) {
                             updateSticky();
                             var wide = Rhodecode.comments.toggleWideMode(this);
                             storeUserSessionAttr('rc_user_session_attr.wide_diff_mode', wide);
+                if (wide === true) {
+                    $(el).addClass('btn-active');
+                } else {
+                    $(el).removeClass('btn-active');
+                }
                             return null;
-                        },
-                        url: null,
-                    },
+            };
+
+            var preloadDiffMenuData = {
+                results: [
 
                     ## Whitespace change
                     % if request.GET.get('ignorews', '') == '1':
@@ -1006,26 +1079,43 b' def get_comments_for(diff_type, comments'
             // get stored diff mode and pre-enable it
             if (templateContext.session_attrs.wide_diff_mode === "true") {
                 Rhodecode.comments.toggleWideMode(null);
+                $('.toggle-wide-diff').addClass('btn-active');
             }
 
-            $("#diff_menu").select2({
+            var diffMenuId = "#diff_menu_" + "${diffset_container_id}";
+            $(diffMenuId).select2({
                 minimumResultsForSearch: -1,
-                containerCssClass: "drop-menu",
+                containerCssClass: "drop-menu-no-width",
                 dropdownCssClass: "drop-menu-dropdown",
                 dropdownAutoWidth: true,
                 data: preloadDiffMenuData,
-                placeholder: "${_('Diff Options')}",
+                placeholder: "${_('...')}",
             });
-            $("#diff_menu").on('select2-selecting', function (e) {
+            $(diffMenuId).on('select2-selecting', function (e) {
                 e.choice.action();
                 if (e.choice.url !== null) {
                     window.location = e.choice.url
                 }
             });
-
+            toggleExpand = function (el, diffsetEl) {
+                var el = $(el);
+                if (el.hasClass('collapsed')) {
+                    $('.filediff-collapse-state.collapse-{0}'.format(diffsetEl)).prop('checked', false);
+                    el.removeClass('collapsed');
+                    el.html(
+                        '<i class="icon-minus-squared-alt icon-no-margin"></i>' +
+                        _gettext('Collapse all files'));
+                }
+                else {
+                    $('.filediff-collapse-state.collapse-{0}'.format(diffsetEl)).prop('checked', true);
+                    el.addClass('collapsed');
+                    el.html(
+                        '<i class="icon-plus-squared-alt icon-no-margin"></i>' +
+                        _gettext('Expand all files'));
+                }
+                updateSticky()
+            }
         });
-
     </script>
-    % endif
 
 </%def>

rhodecode/templates/files/files.mako

@@ -39,7 +39,7 b''
     </script>
 
     <div>
-        <div id="files_data">
+        <div>
             <%include file='files_pjax.mako'/>
         </div>
     </div>

rhodecode/templates/files/files_add.mako

@@ -49,7 +49,7 b''
     </div>
 
     <div class="table">
-        <div id="files_data">
+        <div>
 
             <div id="codeblock" class="codeblock">
                 <div class="editor-items">

rhodecode/templates/files/files_edit.mako

@@ -50,7 +50,7 b''
     </div>
 
     <div class="table">
-        <div id="files_data">
+        <div>
 
             <div id="codeblock" class="codeblock">
                 <div class="editor-items">

rhodecode/templates/files/files_source_header.mako

@@ -31,7 +31,6 b''
             <p>${_('File last commit')}</p>
             <div class="right-label-summary">
               <code><a href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=c.file_last_commit.raw_id)}">${h.show_id(c.file_last_commit)}</a></code>
-
             ${file_base.refs(c.file_last_commit)}
           </div>
         </div>
@@ -40,8 +39,11 b''
 
     <div class="right-content">
       <div data-toggle="summary-details">
-          <div class="tags commit-info tags-main">
-            <code><a href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">${h.show_id(c.commit)}</a></code>
+          <div class="tags tags-main">
+            <code>
+                <a href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">${h.show_id(c.commit)}</a>
+            </code>
+            <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
             ${file_base.refs(c.commit)}
           </div>
       </div>

rhodecode/templates/files/files_tree_header.mako

@@ -25,11 +25,12 b''
     </div>
 
     <div class="right-content">
-      <div class="tags commit-info">
+      <div class="tags">
         <code>
             <a href="${h.route_path('repo_commit',repo_name=c.repo_name,commit_id=c.commit.raw_id)}">${h.show_id(c.commit)}</a>
         </code>
 
+        <i class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.commit.raw_id}" title="${_('Copy the full commit id')}"></i>
         ${file_base.refs(c.commit)}
       </div>
     </div>

rhodecode/templates/files/files_upload.mako

@@ -77,7 +77,7 b''
     </div>
 
     <div class="upload-form table">
-        <div id="files_data">
+        <div>
 
             <div class="dropzone-wrapper" id="file-uploader">
                 <div class="dropzone-pure">