templates: add copy to clipboard for repository clone.

rhodecode/public/css/summary.less

@@ -1,270 +1,270 b''
 // summary.less
 // For use in RhodeCode applications;
 // Used for headers and file detail summary screens.
 
 .summary {
     float: left;
     position: relative;
     width: 100%;
     margin: 0;
     padding: 0;
 
     .summary-detail-header {
         float: left;
         display: block;
         width: 100%;
         margin-bottom: @textmargin;
         padding: 0 0 .5em 0;
         border-bottom: @border-thickness solid @border-default-color;
 
         .breadcrumbs {
             float: left;
             display: inline;
             margin: 0;
             padding: 0;
         }
         h4 {
             float: left;
             margin: 0 1em 0 0;
             padding: 0;
             line-height: 1.2em;
             font-size: @basefontsize;
         }
 
         .action_link {
             float: right;
         }
 
         .new-file {
             float: right;
             margin-top: -1.5em;
         }
     }
 
     .summary-detail {
         float: left;
         position: relative;
         width: 73%;
         margin: 0 3% @space 0;
         padding: 0;
 
         .file_diff_buttons {
             margin-top: @space;
         }
 
         // commit message
         .commit {
           white-space: pre-wrap;
         }
 
         #clone_url {
-            width: ~"calc(100% - 96px)";
+            width: ~"calc(100% - 103px)";
             padding:  @padding/4;
         }
 
         #clone_url_id {
-            width: ~"calc(100% - 118px)";
+            width: ~"calc(100% - 125px)";
             padding:  @padding/4;
         }
 
         &.directory {
             margin-bottom: 0;
         }
 
         .desc {
             white-space: pre-wrap;
         }
         .disabled {
             opacity: .5;
             cursor: inherit;
         }
         .help-block {
             color: inherit;
             margin: 0;
         }
     }
 
     .sidebar-right {
         float: left;
         width: 24%;
         margin: 0;
         padding: 0;
 
         ul {
             margin-left: 0;
             padding-left: 0;
 
             li {
 
                 &:before {
                     content: none;
                     width: 0;
                 }
             }
         }
     }
 
     #clone_by_name, #clone_by_id{
         display: inline-block;
-        margin-left: @padding;
+        margin-left: 0px;
     }
 
     .codeblock {
         border: none;
         background-color: transparent;
     }
 
     .code-body {
         border: @border-thickness solid @border-default-color;
         .border-radius(@border-radius);
     }
 }
 
 // this is used outside of just the summary
 .fieldset, // similar to form fieldset
 .summary .sidebar-right-content { // these have to match
     clear: both;
     float: left;
     position: relative;
     display:block;
     width: 100%;
     min-height: 1em;
     margin-bottom: @textmargin;
     padding: 0;
     line-height: 1.2em;
 
     &:after { // clearfix
         content: "";
         clear: both;
         width: 100%;
         height: 1em;
     }
 }
 
 .summary .sidebar-right-content {
     margin-bottom: @space;
 
     .rc-user {
         min-width: 0;
     }
 }
 
 .fieldset {
 
     .left-label { // similar to form legend
         float: left;
         display: block;
         width: 25%;
         margin: 0;
         padding: 0;
         font-family: @text-semibold;
     }
     
     .right-content { // similar to form fields
         float: left;
         display: block;
         width: 75%;
         margin: 0 0 0 -15%;
         padding: 0 0 0 15%;
 
         .truncate-wrap,
         .truncate {
             max-width: 100%;
             width: 100%;
         }
 
         .commit-long {
             overflow-x: auto;
         }
     }
     .commit.truncate-wrap {
         overflow:hidden;
         text-overflow: ellipsis;
     }
 }
 
 // expand commit message
 #message_expand {
     clear: both;
     display: block;
     color: @rcblue;
     cursor: pointer;
 }
 
 #trimmed_message_box {
     max-height: floor(2 * @basefontsize * 1.2);  // 2 lines * line-height
     overflow: hidden;
 }
 
 // show/hide comments button
 .show-inline-comments {
     display: inline;
     cursor: pointer;
 
     .comments-show { display: inline; }
     .comments-hide { display: none; }
     
     &.comments-visible {
         .comments-show { display: none; }
         .comments-hide { display: inline; }
     }
 }
     
 // Quick Start section
 .quick_start {
     float: left;
     display: block;
     position: relative;
     width: 100%;
 
     // adds some space to make copy and paste easier
     .left-label,
     .right-content {
         line-height: 1.6em;
     }
 }
 
 .submodule {
     .summary-detail {
         width: 100%;
 
         .btn-collapse {
             display: none;
         }
     }
 }
 
 .codeblock-header {
     float: left;
     display: block;
     width: 100%;
     margin: 0;
     padding: @space 0 @padding 0;
     border-top: @border-thickness solid @border-default-color; 
 
     .stats {
         float: left;
         width: 50%;
     }
 
     .buttons {
         float: right;
         width: 50%;
         text-align: right;
         color: @grey4;
     }
 }
 
 #summary-menu-stats {
 
     .stats-bullet {
         color: @grey3;
         min-width: 3em;
     }
 
     .repo-size {
         margin-bottom: .5em;
     }
     
 }
 

rhodecode/templates/summary/components.mako

@@ -1,202 +1,211 b''
 <%def name="refs_counters(branches, closed_branches, tags, bookmarks)">
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
       <i class="icon-branch"></i>${_ungettext(
       '%(num)s Branch','%(num)s Branches', len(branches)) % {'num': len(branches)}}</a>
     </span>
 
     %if closed_branches:
     <span class="branchtag tag">
     <a href="${h.route_path('branches_home',repo_name=c.repo_name)}" class="childs">
       <i class="icon-branch"></i>${_ungettext(
       '%(num)s Closed Branch', '%(num)s Closed Branches', len(closed_branches)) % {'num': len(closed_branches)}}</a>
     </span>
     %endif
 
     <span class="tagtag tag">
     <a href="${h.route_path('tags_home',repo_name=c.repo_name)}" class="childs">
         <i class="icon-tag"></i>${_ungettext(
         '%(num)s Tag', '%(num)s Tags', len(tags)) % {'num': len(tags)}}</a>
     </span>
 
     %if bookmarks:
     <span class="booktag tag">
     <a href="${h.route_path('bookmarks_home',repo_name=c.repo_name)}" class="childs">
         <i class="icon-bookmark"></i>${_ungettext(
         '%(num)s Bookmark', '%(num)s Bookmarks', len(bookmarks)) % {'num': len(bookmarks)}}</a>
     </span>
     %endif
 </%def>
 
 <%def name="summary_detail(breadcrumbs_links, show_downloads=True)">
     <% summary = lambda n:{False:'summary-short'}.get(n) %>
 
     <div id="summary-menu-stats" class="summary-detail">
         <div class="summary-detail-header">
             <div class="breadcrumbs files_location">
                 <h4>
                   ${breadcrumbs_links}
                 </h4>
             </div>
             <div id="summary_details_expand" class="btn-collapse" data-toggle="summary-details">
                 ${_('Show More')}
             </div>
         </div>
 
         <div class="fieldset">
           %if h.is_svn_without_proxy(c.rhodecode_db_repo):
             <div class="left-label disabled">
               ${_('Read-only url')}:
             </div>
             <div class="right-content disabled">
                 <input type="text" class="input-monospace" id="clone_url" disabled value="${c.clone_repo_url}"/>
+                <i id="clone_by_name_copy" class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url}" title="${_('Copy the clone url')}"></i>
+
                 <input type="text" class="input-monospace" id="clone_url_id" disabled value="${c.clone_repo_url_id}" style="display: none;"/>
+                <i id="clone_by_id_copy" class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_id}" title="${_('Copy the clone by id url')}" style="display: none"></i>
+
                 <a id="clone_by_name" class="clone" style="display: none;">${_('Show by Name')}</a>
                 <a id="clone_by_id" class="clone">${_('Show by ID')}</a>
+
                 <p class="help-block">${_('SVN Protocol is disabled. To enable it, see the')} <a href="${h.route_url('enterprise_svn_setup')}" target="_blank">${_('documentation here')}</a>.</p>
             </div>
           %else:
             <div class="left-label">
               ${_('Clone url')}:
             </div>
             <div class="right-content">
                 <input type="text" class="input-monospace" id="clone_url" readonly="readonly" value="${c.clone_repo_url}"/>
+                <i id="clone_by_name_copy" class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url}" title="${_('Copy the clone url')}"></i>
+
                 <input type="text" class="input-monospace" id="clone_url_id" readonly="readonly" value="${c.clone_repo_url_id}" style="display: none;"/>
+                <i id="clone_by_id_copy" class="tooltip icon-clipboard clipboard-action" data-clipboard-text="${c.clone_repo_url_id}" title="${_('Copy the clone by id url')}" style="display: none"></i>
+
                 <a id="clone_by_name" class="clone" style="display: none;">${_('Show by Name')}</a>
                 <a id="clone_by_id" class="clone">${_('Show by ID')}</a>
             </div>
           %endif
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label">
             ${_('Description')}:
           </div>
           <div class="right-content">
              %if c.visual.stylify_metatags:
                <div class="input ${summary(c.show_stats)} desc">${h.urlify_text(h.escaped_stylize(c.rhodecode_db_repo.description))}</div>
              %else:
                <div class="input ${summary(c.show_stats)} desc">${h.urlify_text(h.html_escape(c.rhodecode_db_repo.description))}</div>
              %endif
           </div>
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label">
             ${_('Information')}:
           </div>
           <div class="right-content">
 
               <div class="repo-size">
                   <% commit_rev = c.rhodecode_db_repo.changeset_cache.get('revision') %>
 
                   ## commits
                   % if commit_rev == -1:
                       ${_ungettext('%(num)s Commit', '%(num)s Commits', 0) % {'num': 0}},
                   % else:
                       <a href="${h.route_path('repo_changelog', repo_name=c.repo_name)}">
                         ${_ungettext('%(num)s Commit', '%(num)s Commits', commit_rev) % {'num': commit_rev}}</a>,
                   % endif
 
                   ## forks
                   <a title="${_('Number of Repository Forks')}" href="${h.url('repo_forks_home', repo_name=c.repo_name)}">
                      ${c.repository_forks} ${_ungettext('Fork', 'Forks', c.repository_forks)}</a>,
 
                   ## repo size
                   % if commit_rev == -1:
                       <span class="stats-bullet">0 B</span>
                   % else:
                       <span class="stats-bullet" id="repo_size_container">
                           ${_('Calculating Repository Size...')}
                       </span>
                   % endif
               </div>
 
             <div class="commit-info">
                 <div class="tags">
                 % if c.rhodecode_repo:
                     ${refs_counters(
                         c.rhodecode_repo.branches,
                         c.rhodecode_repo.branches_closed,
                         c.rhodecode_repo.tags,
                         c.rhodecode_repo.bookmarks)}
                 % else:
                     ## missing requirements can make c.rhodecode_repo None
                     ${refs_counters([], [], [], [])}
                 % endif
                 </div>
             </div>
 
           </div>
         </div>
 
         <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
           <div class="left-label">
             ${_('Statistics')}:
           </div>
           <div class="right-content">
             <div class="input ${summary(c.show_stats)} statistics">
               % if c.show_stats:
                 <div id="lang_stats" class="enabled">
                     ${_('Calculating Code Statistics...')}
                 </div>
               % else:
                   <span class="disabled">
                       ${_('Statistics are disabled for this repository')}
                   </span>
                   % if h.HasPermissionAll('hg.admin')('enable stats on from summary'):
                      , ${h.link_to(_('enable statistics'),h.route_path('edit_repo',repo_name=c.repo_name, anchor='repo_enable_statistics'))}
                   % endif
               % endif
             </div>
             
           </div>
         </div>
 
         % if show_downloads:
           <div class="fieldset collapsable-content" data-toggle="summary-details" style="display: none;">
             <div class="left-label">
               ${_('Downloads')}:
             </div>
             <div class="right-content">
               <div class="input ${summary(c.show_stats)} downloads">
                 % if c.rhodecode_repo and len(c.rhodecode_repo.revisions) == 0:
                   <span class="disabled">
                     ${_('There are no downloads yet')}
                   </span>
                 % elif not c.enable_downloads:
                     <span class="disabled">
                         ${_('Downloads are disabled for this repository')}
                     </span>
                     % if h.HasPermissionAll('hg.admin')('enable downloads on from summary'):
                        , ${h.link_to(_('enable downloads'),h.route_path('edit_repo',repo_name=c.repo_name, anchor='repo_enable_downloads'))}
                     % endif
                 % else:
                     <span class="enabled">
                         <a id="archive_link" class="btn btn-small" href="${h.route_path('repo_archivefile',repo_name=c.rhodecode_db_repo.repo_name,fname='tip.zip')}">
                             <i class="icon-archive"></i> tip.zip
                             ## replaced by some JS on select
                         </a>
                     </span>
                     ${h.hidden('download_options')}
                 % endif
               </div>
             </div>
           </div>
         % endif
 
     </div><!--end summary-detail-->
 </%def>
 
 <%def name="summary_stats(gravatar_function)">
     <div class="sidebar-right">
       <div class="summary-detail-header">
         <h4 class="item">
              ${_('Owner')}
         </h4>
       </div>
       <div class="sidebar-right-content">
         ${gravatar_function(c.rhodecode_db_repo.user.email, 16)}
       </div>
     </div><!--end sidebar-right-->
 </%def>

rhodecode/templates/summary/summary.mako

@@ -1,128 +1,136 b''
 <%inherit file="/summary/base.mako"/>
 
 <%namespace name="components" file="/summary/components.mako"/>
 
 
 <%def name="menu_bar_subnav()">
     ${self.repo_menu(active='summary')}
 </%def>
 
 <%def name="main()">
 
 <div class="title">
     ${self.repo_page_title(c.rhodecode_db_repo)}
     <ul class="links icon-only-links block-right">
       <li>
      %if c.rhodecode_user.username != h.DEFAULT_USER:
        <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name, _query=dict(auth_token=c.rhodecode_user.feed_token))}" title="${_('RSS Feed')}"><i class="icon-rss-sign"></i></a>
      %else:
        <a href="${h.route_path('atom_feed_home', repo_name=c.rhodecode_db_repo.repo_name)}" title="${_('RSS Feed')}"><i class="icon-rss-sign"></i></a>
      %endif
       </li>
     </ul>
 </div>
 
 <div id="repo-summary" class="summary">
     ${components.summary_detail(breadcrumbs_links=self.breadcrumbs_links(), show_downloads=True)}
     ${components.summary_stats(gravatar_function=self.gravatar_with_user)}
 </div><!--end repo-summary-->
 
 
 <div class="box" >
     %if not c.repo_commits:
         <div class="title">
           <h3>${_('Quick start')}</h3>
         </div>
      %endif
     <div class="table">
         <div id="shortlog_data">
             <%include file='summary_commits.mako'/>
         </div>
     </div>
 </div>
 
 %if c.readme_data:
 <div id="readme" class="anchor">
 <div class="box" >
     <div class="title" title="${h.tooltip(_('Readme file from commit %s:%s') % (c.rhodecode_db_repo.landing_rev[0], c.rhodecode_db_repo.landing_rev[1]))}">
         <h3 class="breadcrumbs">
             <a href="${h.route_path('repo_files',repo_name=c.repo_name,commit_id=c.rhodecode_db_repo.landing_rev[1],f_path=c.readme_file)}">${c.readme_file}</a>
         </h3>
     </div>
     <div class="readme codeblock">
       <div class="readme_box">
         ${c.readme_data|n}
       </div>
     </div>
 </div>
 </div>
 %endif
 
 <script type="text/javascript">
 $(document).ready(function(){
     $('#clone_by_name').on('click',function(e){
         // show url by name and hide name button
         $('#clone_url').show();
         $('#clone_by_name').hide();
 
         // hide url by id and show name button
         $('#clone_by_id').show();
         $('#clone_url_id').hide();
 
+        // hide copy by id
+        $('#clone_by_name_copy').show();
+        $('#clone_by_id_copy').hide();
+
     });
     $('#clone_by_id').on('click',function(e){
 
         // show url by id and hide id button
         $('#clone_by_id').hide();
         $('#clone_url_id').show();
 
         // hide url by name and show id button
         $('#clone_by_name').show();
         $('#clone_url').hide();
+
+        // hide copy by id
+        $('#clone_by_id_copy').show();
+        $('#clone_by_name_copy').hide();
     });
 
     var initialCommitData = {
         id: null,
         text: 'tip',
         type: 'tag',
         raw_id: null,
         files_url: null
     };
 
     select2RefSwitcher('#download_options', initialCommitData);
 
     // on change of download options
     $('#download_options').on('change', function(e) {
         // format of Object {text: "v0.0.3", type: "tag", id: "rev"}
         var selected_cs = e.added;
         var fname= e.added.raw_id + ".zip";
         var href = pyroutes.url('repo_archivefile', {'repo_name': templateContext.repo_name, 'fname':fname});
         // set new label
         $('#archive_link').html('<i class="icon-archive"></i> '+ e.added.text+".zip");
 
         // set new url to button,
         $('#archive_link').attr('href', href)
     });
 
 
     // load details on summary page expand
     $('#summary_details_expand').on('click', function() {
 
         var callback = function (data) {
             % if c.show_stats:
                 showRepoStats('lang_stats', data);
             % endif
         };
 
         showRepoSize(
             'repo_size_container',
             templateContext.repo_name,
             templateContext.repo_landing_commit,
             callback);
 
     })
 
 })
 </script>
 
 </%def>