ui: added secondary action instead of two buttons on files page.

- also made improvements for secondary dropdown actions in pull-requests

rhodecode/public/css/buttons.less

@@ -1,527 +1,527 b''
 
 
 //BUTTONS
 button,
 .btn,
 input[type="button"] {
     -webkit-appearance: none;
     display: inline-block;
     margin: 0 @padding/3 0 0;
     padding: @button-padding;
     text-align: center;
     font-size: @basefontsize;
     line-height: 1em;
     font-family: @text-light;
     text-decoration: none;
     text-shadow: none;
     color: @grey2;
     background-color: white;
     background-image: none;
     border: none;
     .border ( @border-thickness-buttons, @grey5 );
     .border-radius (@border-radius);
     cursor: pointer;
     white-space: nowrap;
     -webkit-transition: background .3s,color .3s;
        -moz-transition: background .3s,color .3s;
          -o-transition: background .3s,color .3s;
             transition: background .3s,color .3s;
             box-shadow: @button-shadow;
     -webkit-box-shadow: @button-shadow;
 
 
 
     a {
         display: block;
         margin: 0;
         padding: 0;
         color: inherit;
         text-decoration: none;
 
         &:hover {
             text-decoration: none;
         }
     }
 
     &:focus,
     &:active {
         outline:none;
     }
 
     &:hover {
         color: @rcdarkblue;
         background-color: @grey6;
 
     }
 
     &.btn-active {
         color: @rcdarkblue;
         background-color: @grey6;
     }
 
     .icon-remove {
         display: none;
     }
 
     //disabled buttons
     //last; overrides any other styles
     &:disabled {
         opacity: .7;
         cursor: auto;
         background-color: white;
         color: @grey4;
         text-shadow: none;
     }
 
     &.no-margin {
         margin: 0 0 0 0;
     }
 
 
 
 }
 
 
 .btn-default {
     border: @border-thickness solid @grey5;
     background-image: none;
     color: @grey2;
 
     a {
         color: @grey2;
     }
 
     &:hover,
     &.active {
         color: @rcdarkblue;
         background-color: @white;
         .border ( @border-thickness, @grey4 );
 
         a {
             color: @grey2;
         }
     }
     &:disabled {
         .border ( @border-thickness-buttons, @grey5 );
         background-color: transparent;
     }
     &.btn-active {
         color: @rcdarkblue;
         background-color: @white;
         .border ( @border-thickness, @rcdarkblue );
     }
 }
 
 .btn-primary,
 .btn-small, /* TODO: anderson: remove .btn-small to not mix with the new btn-sm */
 .btn-success {
     .border ( @border-thickness, @rcblue );
     background-color: @rcblue;
     color: white;
 
     a {
         color: white;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @rcdarkblue );
         color: white;
         background-color: @rcdarkblue;
 
         a {
             color: white;
         }
     }
     &:disabled {
         background-color: @rcblue;
     }
 }
 
 .btn-secondary {
     &:extend(.btn-default);
 
     background-color: white;
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-default:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
     }
 
     &:disabled {
         color: @rcblue;
         background-color: white;
     }
 }
 
 .btn-warning,
 .btn-danger,
 .revoke_perm,
 .btn-x,
 .form .action_button.btn-x   {
     .border ( @border-thickness, @alert2 );
     background-color: white;
     color: @alert2;
 
     a {
         color: @alert2;
     }
 
     &:hover,
     &.active {
         .border ( @border-thickness, @alert2 );
         color: white;
         background-color: @alert2;
 
         a {
             color: white;
         }
     }
 
     i {
         display:none;
     }
 
     &:disabled {
         background-color: white;
         color: @alert2;
     }
 }
 
 .btn-approved-status {
     .border ( @border-thickness, @alert1 );
     background-color: white;
     color: @alert1;
 
 }
 
 .btn-rejected-status {
     .border ( @border-thickness, @alert2 );
     background-color: white;
     color: @alert2;
 }
 
 .btn-sm,
 .btn-mini,
 .field-sm .btn {
     padding: @padding/3;
 }
 
 .btn-xs {
     padding: @padding/4;
 }
 
 .btn-lg {
     padding: @padding * 1.2;
 }
 
 .btn-group {
     display: inline-block;
     .btn {
         float: left;
         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-group-actions {
     position: relative;
     z-index: 100;
 
     &:not(.open) .btn-action-switcher-container {
         display: none;
     }
 }
 
 
 .btn-action-switcher-container{
   position: absolute;
-  top: 30px;
-  left: -82px;
+  top: 100%;
+  right: 0;
 }
 
 .btn-action-switcher {
     display: block;
     position: relative;
     z-index: 300;
-    min-width: 240px;
-    max-width: 500px;
+    max-width: 600px;
     margin-top: 4px;
     margin-bottom: 24px;
     font-size: 14px;
     font-weight: 400;
     padding: 8px 0;
     background-color: #fff;
     border: 1px solid @grey4;
     border-radius: 3px;
     box-shadow: @dropdown-shadow;
+    overflow: auto;
 
     li {
         display: block;
         text-align: left;
         list-style: none;
         padding: 5px 10px;
     }
 
     li .action-help-block {
         font-size: 10px;
         line-height: normal;
         color: @grey4;
     }
 
 }
 
 .btn-link {
     background: transparent;
     border: none;
     padding: 0;
     color: @rcblue;
 
     &:hover {
         background: transparent;
         border: none;
         color: @rcdarkblue;
     }
 
     //disabled buttons
     //last; overrides any other styles
     &:disabled {
         opacity: .7;
         cursor: auto;
         background-color: white;
         color: @grey4;
         text-shadow: none;
     }
 
     // TODO: johbo: Check if we can avoid this, indicates that the structure
     // is not yet good.
     // lisa: The button CSS reflects the button HTML; both need a cleanup.
     &.btn-danger {
         color: @alert2;
 
         &:hover {
             color: darken(@alert2,30%);
         }
 
         &:disabled {
             color: @alert2;
         }
     }
 }
 
 .btn-social {
     &:extend(.btn-default);
     margin: 5px 5px 5px 0px;
     min-width: 160px;
 }
 
 // TODO: johbo: check these exceptions
 
 .links {
 
     .btn + .btn {
         margin-top: @padding;
     }
 }
 
 
 .action_button {
     display:inline;
     margin: 0;
     padding: 0 1em 0 0;
     font-size: inherit;
     color: @rcblue;
     border: none;
     border-radius: 0;
     background-color: transparent;
 
     &.last-item {
         border: none;
         padding: 0 0 0 0;
     }
 
     &:last-child {
         border: none;
         padding: 0 0 0 0;
     }
 
     &:hover {
         color: @rcdarkblue;
         background-color: transparent;
         border: none;
     }
     .noselect
 }
 
 .grid_delete {
     .action_button {
         border: none;
     }
 }
 
 
 // TODO: johbo: Form button tweaks, check if we can use the classes instead
 input[type="submit"] {
     &:extend(.btn-primary);
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-primary:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
 
         &:disabled {
             color: @rcblue;
             background-color: transparent;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @rcblue );
         background-color: @rcblue;
         color: white;
         opacity: 0.5;
     }
 }
 
 input[type="reset"] {
     &:extend(.btn-default);
 
     // TODO: johbo: Check if this tweak can be avoided.
     background: transparent;
 
     &:focus {
         outline: 0;
     }
 
     &:hover {
         &:extend(.btn-default:hover);
     }
 
     &.btn-link {
         &:extend(.btn-link);
         color: @rcblue;
 
         &:disabled {
             border: none;
         }
     }
 
     &:disabled {
         .border ( @border-thickness-buttons, @rcblue );
         background-color: white;
         color: @rcblue;
     }
 }
 
 input[type="submit"],
 input[type="reset"] {
     &.btn-danger {
         &:extend(.btn-danger);
 
         &:focus {
             outline: 0;
         }
 
         &:hover {
             &:extend(.btn-danger:hover);
         }
 
         &.btn-link {
             &:extend(.btn-link);
             color: @alert2;
 
             &:hover {
                 color: darken(@alert2,30%);
             }
         }
 
         &:disabled {
             color: @alert2;
             background-color: white;
         }
     }
     &.btn-danger-action {
         .border ( @border-thickness, @alert2 );
         background-color: @alert2;
         color: white;
 
         a {
             color: white;
         }
 
         &:hover {
             background-color: darken(@alert2,20%);
         }
 
         &.active {
             .border ( @border-thickness, @alert2 );
             color: white;
             background-color: @alert2;
 
             a {
                 color: white;
             }
         }
 
         &:disabled {
             background-color: white;
             color: @alert2;
         }
     }
 }
 
 
 .button-links {
     float: left;
     display: inline;
     margin: 0;
     padding-left: 0;
     list-style: none;
     text-align: right;
 
     li {
 
 
     }
 
     li.active {
         background-color: @grey6;
         .border ( @border-thickness, @grey4 );
     }
 
 }

rhodecode/templates/files/files_browser.mako

@@ -1,84 +1,100 b''
 
 <div id="codeblock" class="browserblock">
     <div class="browser-header">
         <div class="browser-nav">
 
             <div class="info_box">
 
               <div class="info_box_elem previous">
                   <a id="prev_commit_link" data-commit-id="${c.prev_commit.raw_id}" class=" ${('disabled' if c.url_prev == '#' else '')}" href="${c.url_prev}" title="${_('Previous commit')}"><i class="icon-left"></i></a>
               </div>
 
               ${h.hidden('refs_filter')}
 
               <div class="info_box_elem next">
                   <a id="next_commit_link" data-commit-id="${c.next_commit.raw_id}" class=" ${('disabled' if c.url_next == '#' else '')}" href="${c.url_next}" title="${_('Next commit')}"><i class="icon-right"></i></a>
               </div>
             </div>
 
             % if h.HasRepoPermissionAny('repository.write','repository.admin')(c.repo_name):
-              <div>
-                <a class="btn btn-primary new-file" href="${h.route_path('repo_files_upload_file',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
-                    ${_('Upload File')}
-                </a>
-                <a class="btn btn-primary new-file" href="${h.route_path('repo_files_add_file',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
-                    ${_('Add File')}
-                </a>
-              </div>
+
+            <div class="new-file">
+                <div class="btn-group btn-group-actions">
+                    <a class="btn btn-primary no-margin" href="${h.route_path('repo_files_add_file',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
+                        ${_('Add File')}
+                    </a>
+
+                    <a class="tooltip btn btn-primary" style="margin-left: -1px" data-toggle="dropdown" aria-pressed="false" role="button" title="${_('more options')}">
+                        <i class="icon-down"></i>
+                    </a>
+
+                    <div class="btn-action-switcher-container">
+                        <ul class="btn-action-switcher" role="menu" style="min-width: 200px">
+                            <li>
+                                <a class="action_button" href="${h.route_path('repo_files_upload_file',repo_name=c.repo_name,commit_id=c.commit.raw_id,f_path=c.f_path)}">
+                                    <i class="icon-upload"></i>
+                                    ${_('Upload File')}
+                                </a>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+            </div>
+
             % endif
 
             % if c.enable_downloads:
               <% at_path = '{}'.format(request.GET.get('at') or c.commit.raw_id[:6]) %>
               <div class="btn btn-default new-file">
                   % if c.f_path == '/':
                     <a href="${h.route_path('repo_archivefile',repo_name=c.repo_name, fname='{}.zip'.format(c.commit.raw_id))}">
                         ${_('Download full tree ZIP')}
                     </a>
                   % else:
                     <a href="${h.route_path('repo_archivefile',repo_name=c.repo_name, fname='{}.zip'.format(c.commit.raw_id), _query={'at_path':c.f_path})}">
                         ${_('Download this tree ZIP')}
                     </a>
                   % endif
               </div>
             % endif
 
             <div class="files-quick-filter">
                 <ul class="files-filter-box">
                     <li class="files-filter-box-path">
                         <i class="icon-search"></i>
                     </li>
                     <li class="files-filter-box-input">
                         <input onkeydown="NodeFilter.initFilter(event)" class="init" type="text" placeholder="Quick filter" name="filter" size="25" id="node_filter" autocomplete="off">
                     </li>
                 </ul>
             </div>
         </div>
 
     </div>
 
     ## file tree is computed from caches, and filled in
     <div id="file-tree">
     ${c.file_tree |n}
     </div>
 
     %if c.readme_data:
     <div id="readme" class="anchor">
     <div class="box">
         <div class="readme-title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_ref_type, c.rhodecode_db_repo.landing_ref_name))}">
             <div>
                 <i class="icon-file-text"></i>
                 <a href="${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.rhodecode_db_repo.landing_ref_name,f_path=c.readme_file)}">
                     ${c.readme_file}
                 </a>
             </div>
         </div>
         <div class="readme codeblock">
           <div class="readme_box">
             ${c.readme_data|n}
           </div>
         </div>
     </div>
     </div>
     %endif
 
 </div>

rhodecode/templates/files/files_upload.mako

@@ -1,211 +1,211 b''
 <%inherit file="/base/base.mako"/>
 
 <%def name="title()">
     ${_('{} Files Upload').format(c.repo_name)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="breadcrumbs_links()"></%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='files')}
 </%def>
 
 <%def name="main()">
 
 <div class="box">
     ## Template for uploads
     <div style="display: none" id="tpl-dropzone">
         <div class="dz-preview dz-file-preview">
             <div class="dz-details">
 
                 <div class="dz-filename">
                     <span data-dz-name></span>
                 </div>
                 <div class="dz-filename-size">
                     <span class="dz-size" data-dz-size></span>
 
                 </div>
 
                 <div class="dz-sending" style="display: none">${_('Uploading...')}</div>
                 <div class="dz-response" style="display: none">
                     ${_('Uploaded')} 100%
                 </div>
 
             </div>
             <div class="dz-progress">
                 <span class="dz-upload" data-dz-uploadprogress></span>
             </div>
 
             <div class="dz-error-message">
             </div>
         </div>
     </div>
 
     <div class="edit-file-title">
         <span class="title-heading">${_('Upload new file')} @ <code>${h.show_id(c.commit)}</code></span>
         % if c.commit.branch:
         <span class="tag branchtag">
             <i class="icon-branch"></i> ${c.commit.branch}
         </span>
         % endif
     </div>
 
     <% form_url = h.route_path('repo_files_upload_file', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path) %>
     ##${h.secure_form(form_url, id='eform', enctype="multipart/form-data", request=request)}
     <div class="edit-file-fieldset">
         <div class="path-items">
-            <ul>
+            <ul class="tooltip" title="Repository path to store uploaded files. To change it, navigate to different path and click upload from there.">
             <li class="breadcrumb-path">
                 <div>
                     <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path='')}"><i class="icon-home"></i></a> /
-                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path)}">${c.f_path}</a> ${('/' if c.f_path else '')}
+                    <a href="${h.route_path('repo_files', repo_name=c.repo_name, commit_id=c.commit.raw_id, f_path=c.f_path)}">${c.f_path}</a>${('/' if c.f_path else '')}
                 </div>
             </li>
             <li class="location-path">
 
             </li>
             </ul>
         </div>
 
     </div>
 
     <div class="upload-form table">
         <div>
 
-            <div class="dropzone-wrapper" id="file-uploader">
+            <div class="dropzone-wrapper" id="file-uploader" style="border: none; padding: 40px 0">
                 <div class="dropzone-pure">
                     <div class="dz-message">
                     <i class="icon-upload" style="font-size:36px"></i></br>
                     ${_("Drag'n Drop files here or")} <span class="link">${_('Choose your files')}</span>.<br>
                     </div>
                 </div>
 
             </div>
         </div>
 
     </div>
 
     <div class="upload-form edit-file-fieldset">
         <div class="fieldset">
             <div class="message">
                 <textarea id="commit" name="message"  placeholder="${c.default_message}"></textarea>
             </div>
         </div>
         <div class="pull-left">
             ${h.submit('commit_btn',_('Commit changes'), class_="btn btn-small btn-success")}
         </div>
     </div>
     ##${h.end_form()}
 
     <div class="file-upload-transaction-wrapper" style="display: none">
     <div class="file-upload-transaction">
         <h3>${_('Committing...')}</h3>
         <p>${_('Please wait while the files are being uploaded')}</p>
         <p class="error" style="display: none">
 
         </p>
         <i class="icon-spin animate-spin"></i>
         <p></p>
     </div>
     </div>
 
 </div>
 
 <script type="text/javascript">
 
     $(document).ready(function () {
 
         //see: https://www.dropzonejs.com/#configuration
         myDropzone = new Dropzone("div#file-uploader", {
             url: "${form_url}",
             headers: {"X-CSRF-Token": CSRF_TOKEN},
             paramName: function () {
                 return "files_upload"
             }, // The name that will be used to transfer the file
             parallelUploads: 20,
             maxFiles: 20,
             uploadMultiple: true,
             //chunking: true, // use chunking transfer, not supported at the moment
             //maxFilesize: 2, // in MBs
             autoProcessQueue: false, // if false queue will not be processed automatically.
             createImageThumbnails: false,
             previewTemplate: document.querySelector('#tpl-dropzone').innerHTML,
             accept: function (file, done) {
                 done();
             },
             init: function () {
                 this.on("addedfile", function (file) {
 
                 });
 
                 this.on("sending", function (file, xhr, formData) {
                     formData.append("message", $('#commit').val());
                     $(file.previewElement).find('.dz-sending').show();
                 });
 
                 this.on("success", function (file, response) {
                     $(file.previewElement).find('.dz-sending').hide();
                     $(file.previewElement).find('.dz-response').show();
 
                     if (response.error !== null) {
                         $('.file-upload-transaction-wrapper .error').html('ERROR: {0}'.format(response.error));
                         $('.file-upload-transaction-wrapper .error').show();
                         $('.file-upload-transaction-wrapper i').hide()
                     }
 
                     var redirect_url = response.redirect_url || '/';
                     window.location = redirect_url
 
                 });
 
                 this.on("error", function (file, errorMessage, xhr) {
                     var error = null;
 
                     if (xhr !== undefined){
                         var httpStatus = xhr.status + " " + xhr.statusText;
                         if (xhr !== undefined && xhr.status >= 500) {
                             error = httpStatus;
                         }
                     }
 
                     if (error === null) {
                         error = errorMessage.error || errorMessage || httpStatus;
                     }
 
                     $(file.previewElement).find('.dz-error-message').html('ERROR: {0}'.format(error));
                 });
             }
             });
 
         $('#commit_btn').on('click', function(e) {
             e.preventDefault();
             var button = $(this);
             if (button.hasClass('clicked')) {
                 button.attr('disabled', true);
             } else {
                 button.addClass('clicked');
             }
 
             var files = myDropzone.getQueuedFiles();
             if (files.length === 0) {
                 alert("Missing files");
                 e.preventDefault();
             }
 
             $('.upload-form').hide();
             $('.file-upload-transaction-wrapper').show();
             myDropzone.processQueue();
 
         });
 
     });
 
 </script>
 </%def>

rhodecode/templates/pullrequests/pullrequest_show.mako

@@ -1,921 +1,921 b''
 <%inherit file="/base/base.mako"/>
 <%namespace name="base" file="/base/base.mako"/>
 <%namespace name="dt" file="/data_table/_dt_elements.mako"/>
 
 <%def name="title()">
     ${_('{} Pull Request !{}').format(c.repo_name, c.pull_request.pull_request_id)}
     %if c.rhodecode_name:
         &middot; ${h.branding(c.rhodecode_name)}
     %endif
 </%def>
 
 <%def name="breadcrumbs_links()">
 
 </%def>
 
 <%def name="menu_bar_nav()">
     ${self.menu_items(active='repositories')}
 </%def>
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='showpullrequest')}
 </%def>
 
 <%def name="main()">
 
 <script type="text/javascript">
     // TODO: marcink switch this to pyroutes
     AJAX_COMMENT_DELETE_URL = "${h.route_path('pullrequest_comment_delete',repo_name=c.repo_name,pull_request_id=c.pull_request.pull_request_id,comment_id='__COMMENT_ID__')}";
     templateContext.pull_request_data.pull_request_id = ${c.pull_request.pull_request_id};
 </script>
 
 <div class="box">
 
   <div class="box pr-summary">
 
     <div class="summary-details block-left">
         <div id="pr-title">
             % if c.pull_request.is_closed():
                 <span class="pr-title-closed-tag tag">${_('Closed')}</span>
             % endif
             <input class="pr-title-input large disabled" disabled="disabled" name="pullrequest_title" type="text" value="${c.pull_request.title}">
         </div>
         <div id="pr-title-edit" class="input" style="display: none;">
             <input class="pr-title-input large" id="pr-title-input" name="pullrequest_title" type="text" value="${c.pull_request.title}">
         </div>
 
     <% summary = lambda n:{False:'summary-short'}.get(n) %>
     <div class="pr-details-title">
         <div class="pull-left">
             <a href="${h.route_path('pull_requests_global', pull_request_id=c.pull_request.pull_request_id)}">${_('Pull request !{}').format(c.pull_request.pull_request_id)}</a>
             ${_('Created on')}
             <span class="tooltip" title="${_('Last updated on')} ${h.format_date(c.pull_request.updated_on)}">${h.format_date(c.pull_request.created_on)},</span>
             <span class="pr-details-title-author-pref">${_('by')}</span>
         </div>
 
         <div class="pull-left">
             ${self.gravatar_with_user(c.pull_request.author.email, 16, tooltip=True)}
         </div>
 
         %if c.allowed_to_update:
           <div class="pull-right">
               <div id="edit_pull_request" class="action_button pr-save" style="display: none;">${_('Update title & description')}</div>
               <div id="delete_pullrequest" class="action_button pr-save ${('' if c.allowed_to_delete else 'disabled' )}" style="display: none;">
                   % if c.allowed_to_delete:
                       ${h.secure_form(h.route_path('pullrequest_delete', repo_name=c.pull_request.target_repo.repo_name, pull_request_id=c.pull_request.pull_request_id), request=request)}
                           <input class="btn btn-link btn-danger no-margin" id="remove_${c.pull_request.pull_request_id}" name="remove_${c.pull_request.pull_request_id}"
                                  onclick="submitConfirm(event, this, _gettext('Confirm to delete this pull request'), _gettext('Delete'), '${'!{}'.format(c.pull_request.pull_request_id)}')"
                                  type="submit" value="${_('Delete pull request')}">
                       ${h.end_form()}
                   % else:
                     <span class="tooltip" title="${_('Not allowed to delete this pull request')}">${_('Delete pull request')}</span>
                   % endif
               </div>
               <div id="open_edit_pullrequest" class="action_button">${_('Edit')}</div>
               <div id="close_edit_pullrequest" class="action_button" style="display: none;">${_('Cancel')}</div>
           </div>
 
         %endif
     </div>
 
     <div id="pr-desc" class="input" title="${_('Rendered using {} renderer').format(c.renderer)}">
         ${h.render(c.pull_request.description, renderer=c.renderer, repo_name=c.repo_name)}
     </div>
 
     <div id="pr-desc-edit" class="input textarea" style="display: none;">
         <input id="pr-renderer-input" type="hidden" name="description_renderer" value="${c.visual.default_renderer}">
         ${dt.markup_form('pr-description-input', form_text=c.pull_request.description)}
     </div>
 
     <div id="summary" class="fields pr-details-content">
 
        ## review
        <div class="field">
         <div class="label-pr-detail">
             <label>${_('Review status')}:</label>
         </div>
         <div class="input">
           %if c.pull_request_review_status:
           <div class="tag status-tag-${c.pull_request_review_status}">
             <i class="icon-circle review-status-${c.pull_request_review_status}"></i>
             <span class="changeset-status-lbl">
               %if c.pull_request.is_closed():
                   ${_('Closed')},
               %endif
 
               ${h.commit_status_lbl(c.pull_request_review_status)}
 
             </span>
           </div>
             - ${_ungettext('calculated based on {} reviewer vote', 'calculated based on {} reviewers votes', len(c.pull_request_reviewers)).format(len(c.pull_request_reviewers))}
           %endif
         </div>
        </div>
 
        ## source
        <div class="field">
         <div class="label-pr-detail">
             <label>${_('Commit flow')}:</label>
         </div>
         <div class="input">
             <div class="pr-commit-flow">
                 ## Source
                 %if c.pull_request.source_ref_parts.type == 'branch':
                     <a href="${h.route_path('repo_commits', repo_name=c.pull_request.source_repo.repo_name, _query=dict(branch=c.pull_request.source_ref_parts.name))}"><code class="pr-source-info">${c.pull_request.source_ref_parts.type}:${c.pull_request.source_ref_parts.name}</code></a>
                 %else:
                     <code class="pr-source-info">${'{}:{}'.format(c.pull_request.source_ref_parts.type, c.pull_request.source_ref_parts.name)}</code>
                 %endif
                 ${_('of')} <a href="${h.route_path('repo_summary', repo_name=c.pull_request.source_repo.repo_name)}">${c.pull_request.source_repo.repo_name}</a>
                 &rarr;
                 ## Target
                 %if c.pull_request.target_ref_parts.type == 'branch':
                     <a href="${h.route_path('repo_commits', repo_name=c.pull_request.target_repo.repo_name, _query=dict(branch=c.pull_request.target_ref_parts.name))}"><code class="pr-target-info">${c.pull_request.target_ref_parts.type}:${c.pull_request.target_ref_parts.name}</code></a>
                 %else:
                     <code class="pr-target-info">${'{}:{}'.format(c.pull_request.target_ref_parts.type, c.pull_request.target_ref_parts.name)}</code>
                 %endif
 
                 ${_('of')} <a href="${h.route_path('repo_summary', repo_name=c.pull_request.target_repo.repo_name)}">${c.pull_request.target_repo.repo_name}</a>
 
                 <a class="source-details-action" href="#expand-source-details" onclick="return versionController.toggleElement(this, '.source-details')" data-toggle-on='<i class="icon-angle-down">more details</i>' data-toggle-off='<i class="icon-angle-up">less details</i>'>
                     <i class="icon-angle-down">more details</i>
                 </a>
 
             </div>
 
             <div class="source-details" style="display: none">
 
                 <ul>
 
                     ## common ancestor
                     <li>
                         ${_('Common ancestor')}:
                         % if c.ancestor_commit:
                             <a href="${h.route_path('repo_commit', repo_name=c.target_repo.repo_name, commit_id=c.ancestor_commit.raw_id)}">${h.show_id(c.ancestor_commit)}</a>
                         % else:
                             ${_('not available')}
                         % endif
                     </li>
 
                     ## pull url
                     <li>
                         %if h.is_hg(c.pull_request.source_repo):
                             <% clone_url = 'hg pull -r {} {}'.format(h.short_id(c.source_ref), c.pull_request.source_repo.clone_url()) %>
                         %elif h.is_git(c.pull_request.source_repo):
                             <% clone_url = 'git pull {} {}'.format(c.pull_request.source_repo.clone_url(), c.pull_request.source_ref_parts.name) %>
                         %endif
 
                         <span>${_('Pull changes from source')}</span>: <input type="text" class="input-monospace pr-pullinfo" value="${clone_url}" readonly="readonly">
                         <i class="tooltip icon-clipboard clipboard-action pull-right pr-pullinfo-copy" data-clipboard-text="${clone_url}" title="${_('Copy the pull url')}"></i>
                     </li>
 
                     ## Shadow repo
                     <li>
                         % if not c.pull_request.is_closed() and c.pull_request.shadow_merge_ref:
                             %if h.is_hg(c.pull_request.target_repo):
                                 <% clone_url = 'hg clone --update {} {} pull-request-{}'.format(c.pull_request.shadow_merge_ref.name, c.shadow_clone_url, c.pull_request.pull_request_id) %>
                             %elif h.is_git(c.pull_request.target_repo):
                                 <% clone_url = 'git clone --branch {} {} pull-request-{}'.format(c.pull_request.shadow_merge_ref.name, c.shadow_clone_url, c.pull_request.pull_request_id) %>
                             %endif
 
                             <span class="tooltip" title="${_('Clone repository in its merged state using shadow repository')}">${_('Clone from shadow repository')}</span>: <input type="text" class="input-monospace pr-mergeinfo" value="${clone_url}" readonly="readonly">
                             <i class="tooltip icon-clipboard clipboard-action pull-right pr-mergeinfo-copy" data-clipboard-text="${clone_url}" title="${_('Copy the clone url')}"></i>
 
                         % else:
                             <div class="">
                                 ${_('Shadow repository data not available')}.
                             </div>
                         % endif
                     </li>
 
                 </ul>
 
             </div>
 
         </div>
 
        </div>
 
        ## versions
        <div class="field">
            <div class="label-pr-detail">
                <label>${_('Versions')}:</label>
            </div>
 
            <% outdated_comm_count_ver = len(c.inline_versions[None]['outdated']) %>
            <% general_outdated_comm_count_ver = len(c.comment_versions[None]['outdated']) %>
 
            <div class="pr-versions">
            % if c.show_version_changes:
                <% outdated_comm_count_ver = len(c.inline_versions[c.at_version_num]['outdated']) %>
                <% general_outdated_comm_count_ver = len(c.comment_versions[c.at_version_num]['outdated']) %>
                ${_ungettext('{} version available for this pull request, ', '{} versions available for this pull request, ', len(c.versions)).format(len(c.versions))}
                <a id="show-pr-versions" onclick="return versionController.toggleVersionView(this)" href="#show-pr-versions"
                     data-toggle-on="${_('show versions')}."
                     data-toggle-off="${_('hide versions')}.">
                     ${_('show versions')}.
                </a>
                <table>
                    ## SHOW ALL VERSIONS OF PR
                    <% ver_pr = None %>
 
                    % for data in reversed(list(enumerate(c.versions, 1))):
                        <% ver_pos = data[0] %>
                        <% ver = data[1] %>
                        <% ver_pr = ver.pull_request_version_id %>
                        <% display_row = '' if c.at_version and (c.at_version_num == ver_pr or c.from_version_num == ver_pr) else 'none' %>
 
                        <tr class="version-pr" style="display: ${display_row}">
                            <td>
                                 <code>
                                     <a href="${request.current_route_path(_query=dict(version=ver_pr or 'latest'))}">v${ver_pos}</a>
                                 </code>
                            </td>
                            <td>
                                <input ${('checked="checked"' if c.from_version_num == ver_pr else '')} class="compare-radio-button" type="radio" name="ver_source" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
                                <input ${('checked="checked"' if c.at_version_num == ver_pr else '')} class="compare-radio-button" type="radio" name="ver_target" value="${ver_pr or 'latest'}" data-ver-pos="${ver_pos}"/>
                            </td>
                            <td>
                             <% review_status = c.review_versions[ver_pr].status if ver_pr in c.review_versions else 'not_reviewed' %>
                             <i class="tooltip icon-circle review-status-${review_status}" title="${_('Your review status at this version')}"></i>
 
                            </td>
                            <td>
                                % if c.at_version_num != ver_pr:
                                 <i class="tooltip icon-comment" title="${_('Comments from pull request version v{0}').format(ver_pos)}"></i>
                                 <code>
                                    General:${len(c.comment_versions[ver_pr]['at'])} / Inline:${len(c.inline_versions[ver_pr]['at'])}
                                 </code>
                                % endif
                            </td>
                            <td>
                                ##<code>${ver.source_ref_parts.commit_id[:6]}</code>
                            </td>
                            <td>
                                <code>${h.age_component(ver.updated_on, time_is_local=True, tooltip=False)}</code>
                            </td>
                        </tr>
                    % endfor
 
                    <tr>
                        <td colspan="6">
                            <button id="show-version-diff" onclick="return versionController.showVersionDiff()" class="btn btn-sm" style="display: none"
                                    data-label-text-locked="${_('select versions to show changes')}"
                                    data-label-text-diff="${_('show changes between versions')}"
                                    data-label-text-show="${_('show pull request for this version')}"
                            >
                                ${_('select versions to show changes')}
                            </button>
                        </td>
                    </tr>
                </table>
            % else:
                <div>
                ${_('Pull request versions not available')}.
                </div>
            % endif
            </div>
        </div>
 
     </div>
 
   </div>
 
     ## REVIEW RULES
     <div id="review_rules" style="display: none" class="reviewers-title block-right">
         <div class="pr-details-title">
             ${_('Reviewer rules')}
           %if c.allowed_to_update:
             <span id="close_edit_reviewers" class="block-right action_button last-item" style="display: none;">${_('Close')}</span>
           %endif
         </div>
         <div class="pr-reviewer-rules">
             ## review rules will be appended here, by default reviewers logic
         </div>
         <input id="review_data" type="hidden" name="review_data" value="">
     </div>
 
     ## REVIEWERS
     <div class="reviewers-title first-panel block-right">
       <div class="pr-details-title">
           ${_('Pull request reviewers')}
           %if c.allowed_to_update:
             <span id="open_edit_reviewers" class="block-right action_button last-item">${_('Edit')}</span>
           %endif
       </div>
     </div>
     <div id="reviewers" class="block-right pr-details-content reviewers">
 
         ## members redering block
         <input type="hidden" name="__start__" value="review_members:sequence">
         <ul id="review_members" class="group_members">
 
         % for review_obj, member, reasons, mandatory, status in c.pull_request_reviewers:
             <script>
                 var member = ${h.json.dumps(h.reviewer_as_json(member, reasons=reasons, mandatory=mandatory, user_group=review_obj.rule_user_group_data()))|n};
                 var status = "${(status[0][1].status if status else 'not_reviewed')}";
                 var status_lbl = "${h.commit_status_lbl(status[0][1].status if status else 'not_reviewed')}";
                 var allowed_to_update = ${h.json.dumps(c.allowed_to_update)};
 
                 var entry = renderTemplate('reviewMemberEntry', {
                     'member': member,
                     'mandatory': member.mandatory,
                     'reasons': member.reasons,
                     'allowed_to_update': allowed_to_update,
                     'review_status': status,
                     'review_status_label': status_lbl,
                     'user_group': member.user_group,
                     'create': false
                 });
                 $('#review_members').append(entry)
             </script>
 
         % endfor
 
         </ul>
 
         <input type="hidden" name="__end__" value="review_members:sequence">
         ## end members redering block
 
         %if not c.pull_request.is_closed():
             <div id="add_reviewer" class="ac" style="display: none;">
             %if c.allowed_to_update:
                 % if not c.forbid_adding_reviewers:
                     <div id="add_reviewer_input" class="reviewer_ac">
                        ${h.text('user', class_='ac-input', placeholder=_('Add reviewer or reviewer group'))}
                        <div id="reviewers_container"></div>
                     </div>
                 % endif
                 <div class="pull-right">
                     <button id="update_pull_request" class="btn btn-small no-margin">${_('Save Changes')}</button>
                 </div>
             %endif
             </div>
         %endif
     </div>
 
     ## TODOs will be listed here
     <div class="reviewers-title block-right">
       <div class="pr-details-title">
           ## Only show unresolved, that is only what matters
           TODO Comments - ${len(c.unresolved_comments)} / ${(len(c.unresolved_comments) + len(c.resolved_comments))}
 
           % if not c.at_version:
               % if c.resolved_comments:
                   <span class="block-right action_button last-item noselect" onclick="$('.unresolved-todo-text').toggle(); return versionController.toggleElement(this, '.unresolved-todo');" data-toggle-on="Show resolved" data-toggle-off="Hide resolved">Show resolved</span>
               % else:
                   <span class="block-right last-item noselect">Show resolved</span>
               % endif
           % endif
       </div>
     </div>
     <div class="block-right pr-details-content reviewers">
 
         <table class="todo-table">
               <%
                 def sorter(entry):
                     user_id = entry.author.user_id
                     resolved = '1' if entry.resolved else '0'
                     if user_id == c.rhodecode_user.user_id:
                         # own comments first
                         user_id = 0
                     return '{}_{}_{}'.format(resolved, user_id, str(entry.comment_id).zfill(100))
               %>
 
           % if c.at_version:
               <tr>
                 <td class="unresolved-todo-text">${_('unresolved TODOs unavailable in this view')}.</td>
               </tr>
           % else:
               % for todo_comment in sorted(c.unresolved_comments + c.resolved_comments, key=sorter):
                   <% resolved = todo_comment.resolved %>
                   % if inline:
                       <% outdated_at_ver = todo_comment.outdated_at_version(getattr(c, 'at_version_num', None)) %>
                   % else:
                       <% outdated_at_ver = todo_comment.older_than_version(getattr(c, 'at_version_num', None)) %>
                   % endif
 
                   <tr ${('class="unresolved-todo" style="display: none"' if resolved else '') |n}>
 
                       <td class="td-todo-number">
                           % if resolved:
                               <a class="permalink todo-resolved tooltip" title="${_('Resolved by comment #{}').format(todo_comment.resolved.comment_id)}" href="#comment-${todo_comment.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${todo_comment.comment_id}'), 0, ${h.json.dumps(outdated_at_ver)})">
                               <i class="icon-flag-filled"></i> ${todo_comment.comment_id}</a>
                           % else:
                               <a class="permalink" href="#comment-${todo_comment.comment_id}" onclick="return Rhodecode.comments.scrollToComment($('#comment-${todo_comment.comment_id}'), 0, ${h.json.dumps(outdated_at_ver)})">
                               <i class="icon-flag-filled"></i> ${todo_comment.comment_id}</a>
                           % endif
                       </td>
                       <td class="td-todo-gravatar">
                           ${base.gravatar(todo_comment.author.email, 16, user=todo_comment.author, tooltip=True, extra_class=['no-margin'])}
                       </td>
                       <td class="todo-comment-text-wrapper">
                           <div class="todo-comment-text">
                             <code>${h.chop_at_smart(todo_comment.text, '\n', suffix_if_chopped='...')}</code>
                           </div>
                       </td>
 
                   </tr>
               % endfor
 
               % if len(c.unresolved_comments) == 0:
                   <tr>
                     <td class="unresolved-todo-text">${_('No unresolved TODOs')}.</td>
                   </tr>
               % endif
 
           % endif
 
         </table>
 
     </div>
   </div>
 
   </div>
 
   <div class="box">
 
   % if c.state_progressing:
 
     <h2 style="text-align: center">
         ${_('Cannot show diff when pull request state is changing. Current progress state')}: <span class="tag tag-merge-state-${c.pull_request.state}">${c.pull_request.state}</span>
 
         % if c.is_super_admin:
         <br/>
         If you think this is an error try <a href="${h.current_route_path(request, force_state='created')}">forced state reset</a> to <span class="tag tag-merge-state-created">created</span> state.
         % endif
     </h2>
 
   % else:
 
       ## Diffs rendered here
       <div class="table" >
           <div id="changeset_compare_view_content">
               ##CS
               % if c.missing_requirements:
                 <div class="box">
                   <div class="alert alert-warning">
                     <div>
                       <strong>${_('Missing requirements:')}</strong>
                       ${_('These commits cannot be displayed, because this repository uses the Mercurial largefiles extension, which was not enabled.')}
                     </div>
                   </div>
                 </div>
               % elif c.missing_commits:
                 <div class="box">
                   <div class="alert alert-warning">
                     <div>
                       <strong>${_('Missing commits')}:</strong>
                         ${_('This pull request cannot be displayed, because one or more commits no longer exist in the source repository.')}
                         ${_('Please update this pull request, push the commits back into the source repository, or consider closing this pull request.')}
                         ${_('Consider doing a {force_refresh_url} in case you think this is an error.').format(force_refresh_url=h.link_to('force refresh', h.current_route_path(request, force_refresh='1')))|n}
                     </div>
                   </div>
                 </div>
               % elif c.pr_merge_source_commit.changed and not c.pull_request.is_closed():
                 <div class="box">
                   <div class="alert alert-info">
                     <div>
                         <strong>${_('There are new changes for `{}:{}` in source repository, please consider updating this pull request.').format(c.pr_merge_source_commit.ref_spec.type, c.pr_merge_source_commit.ref_spec.name)}</strong>
                     </div>
                   </div>
                 </div>
               % endif
 
               <div class="compare_view_commits_title">
                   % if not c.compare_mode:
 
                     % if c.at_version_pos:
                         <h4>
                         ${_('Showing changes at v%d, commenting is disabled.') % c.at_version_pos}
                         </h4>
                     % endif
 
                     <div class="pull-left">
                       <div class="btn-group">
                           <a class="${('collapsed' if c.collapse_all_commits else '')}" href="#expand-commits" onclick="toggleCommitExpand(this); return false" data-toggle-commits-cnt=${len(c.commit_ranges)} >
                               % if c.collapse_all_commits:
                                 <i class="icon-plus-squared-alt icon-no-margin"></i>
                                 ${_ungettext('Expand {} commit', 'Expand {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
                               % else:
                                 <i class="icon-minus-squared-alt icon-no-margin"></i>
                                 ${_ungettext('Collapse {} commit', 'Collapse {} commits', len(c.commit_ranges)).format(len(c.commit_ranges))}
                               % endif
                           </a>
                       </div>
                     </div>
 
                     <div class="pull-right">
                         % if c.allowed_to_update and not c.pull_request.is_closed():
 
                             <div class="btn-group btn-group-actions">
                                 <a id="update_commits" class="btn btn-primary no-margin" onclick="updateController.updateCommits(this); return false">
                                     ${_('Update commits')}
                                 </a>
 
                                 <a id="update_commits_switcher" class="tooltip btn btn-primary" style="margin-left: -1px" data-toggle="dropdown" aria-pressed="false" role="button" title="${_('more update options')}">
                                     <i class="icon-down"></i>
                                 </a>
 
                                 <div class="btn-action-switcher-container" id="update-commits-switcher">
-                                    <ul class="btn-action-switcher" role="menu">
+                                    <ul class="btn-action-switcher" role="menu" style="min-width: 300px;">
                                         <li>
                                             <a href="#forceUpdate" onclick="updateController.forceUpdateCommits(this); return false">
                                                 ${_('Force update commits')}
                                             </a>
                                             <div class="action-help-block">
                                                ${_('Update commits and force refresh this pull request.')}
                                             </div>
                                         </li>
                                     </ul>
                                 </div>
                             </div>
 
                         % else:
                           <a class="tooltip btn disabled pull-right" disabled="disabled" title="${_('Update is disabled for current view')}">${_('Update commits')}</a>
                         % endif
 
                     </div>
                   % endif
               </div>
 
               % if not c.missing_commits:
                 % if c.compare_mode:
                     % if c.at_version:
                     <h4>
                         ${_('Commits and changes between v{ver_from} and {ver_to} of this pull request, commenting is disabled').format(ver_from=c.from_version_pos, ver_to=c.at_version_pos if c.at_version_pos else 'latest')}:
                     </h4>
 
                     <div class="subtitle-compare">
                         ${_('commits added: {}, removed: {}').format(len(c.commit_changes_summary.added), len(c.commit_changes_summary.removed))}
                     </div>
 
                     <div class="container">
                         <table class="rctable compare_view_commits">
                             <tr>
                                 <th></th>
                                 <th>${_('Time')}</th>
                                 <th>${_('Author')}</th>
                                 <th>${_('Commit')}</th>
                                 <th></th>
                                 <th>${_('Description')}</th>
                             </tr>
 
                             % for c_type, commit in c.commit_changes:
                               % if c_type in ['a', 'r']:
                                 <%
                                     if c_type == 'a':
                                         cc_title = _('Commit added in displayed changes')
                                     elif c_type == 'r':
                                         cc_title = _('Commit removed in displayed changes')
                                     else:
                                         cc_title = ''
                                 %>
                                 <tr id="row-${commit.raw_id}" commit_id="${commit.raw_id}" class="compare_select">
                                 <td>
                                     <div class="commit-change-indicator color-${c_type}-border">
                                       <div class="commit-change-content color-${c_type} tooltip" title="${h.tooltip(cc_title)}">
                                         ${c_type.upper()}
                                       </div>
                                     </div>
                                 </td>
                                 <td class="td-time">
                                     ${h.age_component(commit.date)}
                                 </td>
                                 <td class="td-user">
                                     ${base.gravatar_with_user(commit.author, 16, tooltip=True)}
                                 </td>
                                 <td class="td-hash">
                                     <code>
                                         <a href="${h.route_path('repo_commit', repo_name=c.target_repo.repo_name, commit_id=commit.raw_id)}">
                                             r${commit.idx}:${h.short_id(commit.raw_id)}
                                         </a>
                                         ${h.hidden('revisions', commit.raw_id)}
                                     </code>
                                 </td>
                                 <td class="td-message expand_commit" data-commit-id="${commit.raw_id}" title="${_( 'Expand commit message')}" onclick="commitsController.expandCommit(this); return false">
                                     <i class="icon-expand-linked"></i>
                                 </td>
                                 <td class="mid td-description">
                                     <div class="log-container truncate-wrap">
                                         <div class="message truncate" id="c-${commit.raw_id}" data-message-raw="${commit.message}">${h.urlify_commit_message(commit.message, c.repo_name)}</div>
                                     </div>
                                 </td>
                             </tr>
                               % endif
                             % endfor
                         </table>
                     </div>
 
                     % endif
 
                 % else:
                     <%include file="/compare/compare_commits.mako" />
                 % endif
 
                 <div class="cs_files">
                     <%namespace name="cbdiffs" file="/codeblocks/diffs.mako"/>
                     % if c.at_version:
                         <% c.inline_cnt = len(c.inline_versions[c.at_version_num]['display']) %>
                         <% c.comments = c.comment_versions[c.at_version_num]['display'] %>
                     % else:
                         <% c.inline_cnt = len(c.inline_versions[c.at_version_num]['until']) %>
                         <% c.comments = c.comment_versions[c.at_version_num]['until'] %>
                     % endif
 
                     <%
                         pr_menu_data = {
                             'outdated_comm_count_ver': outdated_comm_count_ver,
                             'pull_request': c.pull_request
                         }
                     %>
 
                     ${cbdiffs.render_diffset_menu(c.diffset, range_diff_on=c.range_diff_on, pull_request_menu=pr_menu_data)}
 
                     % if c.range_diff_on:
                         % for commit in c.commit_ranges:
                             ${cbdiffs.render_diffset(
                               c.changes[commit.raw_id],
                               commit=commit, use_comments=True,
                               collapse_when_files_over=5,
                               disable_new_comments=True,
                               deleted_files_comments=c.deleted_files_comments,
                               inline_comments=c.inline_comments,
                               pull_request_menu=pr_menu_data, show_todos=False)}
                         % endfor
                     % else:
                         ${cbdiffs.render_diffset(
                           c.diffset, use_comments=True,
                           collapse_when_files_over=30,
                           disable_new_comments=not c.allowed_to_comment,
                           deleted_files_comments=c.deleted_files_comments,
                           inline_comments=c.inline_comments,
                           pull_request_menu=pr_menu_data, show_todos=False)}
                     % endif
 
                 </div>
               % else:
                   ## skipping commits we need to clear the view for missing commits
                   <div style="clear:both;"></div>
               % endif
 
           </div>
       </div>
 
       ## template for inline comment form
       <%namespace name="comment" file="/changeset/changeset_file_comment.mako"/>
 
       ## comments heading with count
       <div class="comments-heading">
         <i class="icon-comment"></i>
         ${_('Comments')} ${len(c.comments)}
       </div>
 
       ## render general comments
       <div id="comment-tr-show">
         % if general_outdated_comm_count_ver:
         <div class="info-box">
             % if general_outdated_comm_count_ver == 1:
                 ${_('there is {num} general comment from older versions').format(num=general_outdated_comm_count_ver)},
                 <a href="#show-hidden-comments" onclick="$('.comment-general.comment-outdated').show(); $(this).parent().hide(); return false;">${_('show it')}</a>
             % else:
                 ${_('there are {num} general comments from older versions').format(num=general_outdated_comm_count_ver)},
                 <a href="#show-hidden-comments" onclick="$('.comment-general.comment-outdated').show(); $(this).parent().hide(); return false;">${_('show them')}</a>
             % endif
         </div>
         % endif
       </div>
 
       ${comment.generate_comments(c.comments, include_pull_request=True, is_pull_request=True)}
 
       % if not c.pull_request.is_closed():
         ## main comment form and it status
         ${comment.comments(h.route_path('pullrequest_comment_create', repo_name=c.repo_name,
                                         pull_request_id=c.pull_request.pull_request_id),
                            c.pull_request_review_status,
                            is_pull_request=True, change_status=c.allowed_to_change_status)}
 
         ## merge status, and merge action
         <div class="pull-request-merge">
             <%include file="/pullrequests/pullrequest_merge_checks.mako"/>
         </div>
 
       %endif
 
    % endif
   </div>
 
   <script type="text/javascript">
 
       versionController = new VersionController();
       versionController.init();
 
       reviewersController = new ReviewersController();
       commitsController = new CommitsController();
 
       updateController = new UpdatePrController();
 
       $(function () {
 
           // custom code mirror
           var codeMirrorInstance = $('#pr-description-input').get(0).MarkupForm.cm;
 
           var PRDetails = {
               editButton: $('#open_edit_pullrequest'),
               closeButton: $('#close_edit_pullrequest'),
               deleteButton: $('#delete_pullrequest'),
               viewFields: $('#pr-desc, #pr-title'),
               editFields: $('#pr-desc-edit, #pr-title-edit, .pr-save'),
 
               init: function () {
                   var that = this;
                   this.editButton.on('click', function (e) {
                       that.edit();
                   });
                   this.closeButton.on('click', function (e) {
                       that.view();
                   });
               },
 
               edit: function (event) {
                   this.viewFields.hide();
                   this.editButton.hide();
                   this.deleteButton.hide();
                   this.closeButton.show();
                   this.editFields.show();
                   codeMirrorInstance.refresh();
               },
 
               view: function (event) {
                   this.editButton.show();
                   this.deleteButton.show();
                   this.editFields.hide();
                   this.closeButton.hide();
                   this.viewFields.show();
               }
           };
 
           var ReviewersPanel = {
               editButton: $('#open_edit_reviewers'),
               closeButton: $('#close_edit_reviewers'),
               addButton: $('#add_reviewer'),
               removeButtons: $('.reviewer_member_remove,.reviewer_member_mandatory_remove'),
 
               init: function () {
                   var self = this;
                   this.editButton.on('click', function (e) {
                       self.edit();
                   });
                   this.closeButton.on('click', function (e) {
                       self.close();
                   });
               },
 
               edit: function (event) {
                   this.editButton.hide();
                   this.closeButton.show();
                   this.addButton.show();
                   this.removeButtons.css('visibility', 'visible');
                   // review rules
                   reviewersController.loadReviewRules(
                       ${c.pull_request.reviewer_data_json | n});
               },
 
               close: function (event) {
                   this.editButton.show();
                   this.closeButton.hide();
                   this.addButton.hide();
                   this.removeButtons.css('visibility', 'hidden');
                   // hide review rules
                   reviewersController.hideReviewRules()
               }
           };
 
           PRDetails.init();
           ReviewersPanel.init();
 
           showOutdated = function (self) {
               $('.comment-inline.comment-outdated').show();
               $('.filediff-outdated').show();
               $('.showOutdatedComments').hide();
               $('.hideOutdatedComments').show();
           };
 
           hideOutdated = function (self) {
               $('.comment-inline.comment-outdated').hide();
               $('.filediff-outdated').hide();
               $('.hideOutdatedComments').hide();
               $('.showOutdatedComments').show();
           };
 
           refreshMergeChecks = function () {
               var loadUrl = "${request.current_route_path(_query=dict(merge_checks=1))}";
               $('.pull-request-merge').css('opacity', 0.3);
               $('.action-buttons-extra').css('opacity', 0.3);
 
               $('.pull-request-merge').load(
                       loadUrl, function () {
                           $('.pull-request-merge').css('opacity', 1);
 
                           $('.action-buttons-extra').css('opacity', 1);
                       }
               );
           };
 
           closePullRequest = function (status) {
               if (!confirm(_gettext('Are you sure to close this pull request without merging?'))) {
                   return false;
               }
               // inject closing flag
               $('.action-buttons-extra').append('<input type="hidden" class="close-pr-input" id="close_pull_request" value="1">');
               $(generalCommentForm.statusChange).select2("val", status).trigger('change');
               $(generalCommentForm.submitForm).submit();
           };
 
           $('#show-outdated-comments').on('click', function (e) {
               var button = $(this);
               var outdated = $('.comment-outdated');
 
               if (button.html() === "(Show)") {
                   button.html("(Hide)");
                   outdated.show();
               } else {
                   button.html("(Show)");
                   outdated.hide();
               }
           });
 
           $('.show-inline-comments').on('change', function (e) {
               var show = 'none';
               var target = e.currentTarget;
               if (target.checked) {
                   show = ''
               }
               var boxid = $(target).attr('id_for');
               var comments = $('#{0} .inline-comments'.format(boxid));
               var fn_display = function (idx) {
                   $(this).css('display', show);
               };
               $(comments).each(fn_display);
               var btns = $('#{0} .inline-comments-button'.format(boxid));
               $(btns).each(fn_display);
           });
 
           $('#merge_pull_request_form').submit(function () {
               if (!$('#merge_pull_request').attr('disabled')) {
                   $('#merge_pull_request').attr('disabled', 'disabled');
               }
               return true;
           });
 
           $('#edit_pull_request').on('click', function (e) {
               var title = $('#pr-title-input').val();
               var description = codeMirrorInstance.getValue();
               var renderer = $('#pr-renderer-input').val();
               editPullRequest(
                       "${c.repo_name}", "${c.pull_request.pull_request_id}",
                       title, description, renderer);
           });
 
           $('#update_pull_request').on('click', function (e) {
               $(this).attr('disabled', 'disabled');
               $(this).addClass('disabled');
               $(this).html(_gettext('Saving...'));
               reviewersController.updateReviewers(
                       "${c.repo_name}", "${c.pull_request.pull_request_id}");
           });
 
 
           // fixing issue with caches on firefox
           $('#update_commits').removeAttr("disabled");
 
           $('.show-inline-comments').on('click', function (e) {
               var boxid = $(this).attr('data-comment-id');
               var button = $(this);
 
               if (button.hasClass("comments-visible")) {
                   $('#{0} .inline-comments'.format(boxid)).each(function (index) {
                       $(this).hide();
                   });
                   button.removeClass("comments-visible");
               } else {
                   $('#{0} .inline-comments'.format(boxid)).each(function (index) {
                       $(this).show();
                   });
                   button.addClass("comments-visible");
               }
           });
 
           // register submit callback on commentForm form to track TODOs
           window.commentFormGlobalSubmitSuccessCallback = function () {
               refreshMergeChecks();
           };
 
           ReviewerAutoComplete('#user');
 
       })
 
   </script>
 
 </div>
 
 </%def>