grim/hgkeeper-theme

Add a https clone button for repositories
draft
2020-11-02, Sorvival
7f59fbdee643
Parents 4c9af23fbe68
Children 9ce2c1888f99
Add a https clone button for repositories

This button will be responsive so that it's still usable on mobile. The clone button triggers a popover that contains the `hg clone` command for the current repository and a quick copy to clipboard button.

Testing Done:
1. Setup `.hg/hgrc` file on the repo i'll test on and add a value for `http_clone_url` under the `web` section.
2. Run `hg serve`
3. Verified the clone button appears.
4. Verified the copy button copies the entire `hg clone ` to the clipboard
5. Verified the repository title and the clone button behaves in a responsive manner (ie on mobile they are split into two lines)

Bugs closed: HGKEEPERTHEME-11

Reviewed at https://reviews.imfreedom.org/r/194/
4 files changed, 53 insertions(+), 1 deletions(-)
  • +1 -0
    templates/hgkeeper/header.tmpl
  • +24 -1
    templates/hgkeeper/nav/repo.tmpl
  • +19 -0
    templates/static/hgk/css/hgkeeper.css
  • +9 -0
    templates/static/hgk/js/hgkeeper.js
    • --- a/templates/hgkeeper/header.tmpl Mon Nov 02 20:26:00 2020 -0600
    +++ b/templates/hgkeeper/header.tmpl Mon Nov 02 20:26:11 2020 -0600
    @@ -15,6 +15,7 @@
    <script type="text/javascript" src="{staticurl|urlescape}hgk/js/bootstrap.bundle.min.js"></script>
    <script type="text/javascript" src="{staticurl|urlescape}hgk/js/clipboard.min.js"></script>
    <script type="text/javascript" src="{staticurl|urlescape}hgk/js/graph.js"></script>
    + <script type="text/javascript" src="{staticurl|urlescape}hgk/js/hgkeeper.js"></script>
    <script type="text/javascript" src="{staticurl|urlescape}mercurial.js"></script>
    </head>
    <body>
    --- a/templates/hgkeeper/nav/repo.tmpl Mon Nov 02 20:26:00 2020 -0600
    +++ b/templates/hgkeeper/nav/repo.tmpl Mon Nov 02 20:26:11 2020 -0600
    @@ -1,4 +1,27 @@
    -<h3>{repo|escape}</h3>
    +<div class="row mb-1">
    + <div class="col-sm hgk-repository-name">
    + <h3>{repo|escape}</h3>
    + </div>
    + <div class="col-sm col">
    + <button type="button" class="btn btn-lg btn-primary float-right hgk-clone-btn" data-toggle="popover" data-placement="bottom" data-title="Clone using https">
    + Clone<i class="icofont-caret-down"></i>
    + </button>
    + </div>
    +</div>
    +
    +
    +<div class="popover-template d-none">
    + <div class="popover" role="tooltip">
    + <div class="arrow"></div>
    + <h3 class="popover-header"></h3>
    + <div class="btn-group clone-btn-group">
    + <input type="text" class="p-1 rounded-left border border-info text-monospace hgk-repository-clone-url" readonly="readonly" placeholder="Repository clone url" value="hg clone {http_clone_url}" />
    + <a class="btn btn-sm btn-outline-info hgk-copy-repository-url-btn" data-clipboard-action="copy" data-clipboard-text="hg clone {http_clone_url}" title="Copy repository clone url">
    + <i class="icofont-ui-copy"></i>
    + </a>
    + </div>
    + </div>
    +</div>
    <ul class="nav nav-pills nav-justified">
    <li class="nav-item">
    --- a/templates/static/hgk/css/hgkeeper.css Mon Nov 02 20:26:00 2020 -0600
    +++ b/templates/static/hgk/css/hgkeeper.css Mon Nov 02 20:26:11 2020 -0600
    @@ -125,6 +125,25 @@
    }
    /******************************************************************************
    + * Repository Nav Classes
    + *****************************************************************************/
    +
    +.hgk-repository-clone-url {
    + background-color: unset;
    + color: #ffffff;
    +}
    +
    +@media (max-width: 576px) {
    + .hgk-clone-btn {
    + width: 100%;
    + }
    +
    + .hgk-repository-name {
    + text-align: center;
    + }
    +}
    +
    +/******************************************************************************
    * Other Junk
    *****************************************************************************/
    --- /dev/null Thu Jan 01 00:00:00 1970 +0000
    +++ b/templates/static/hgk/js/hgkeeper.js Mon Nov 02 20:26:11 2020 -0600
    @@ -0,0 +1,9 @@
    +// Handles creation of bootstrap popover invoked by the clone repository button
    +$(function () {
    + $('[data-toggle="popover"]').popover({
    + template: $(".popover-template").html(),
    + sanitize: false
    + })
    +
    + new ClipboardJS('.hgk-copy-repository-url-btn');
    +})