[Patchew-devel] [PATCH] add copy to clipboard button next to search

Paolo Bonzini posted 1 patch 5 years, 5 months ago
static/css/base.css     | 11 +++++++++--
static/js/patchew.js    | 23 +++++++++++++++++++++++
www/templates/base.html |  7 +++++--
3 files changed, 37 insertions(+), 4 deletions(-)
[Patchew-devel] [PATCH] add copy to clipboard button next to search
Posted by Paolo Bonzini 5 years, 5 months ago
This can be useful to copy and paste into the patchew-cli command line.

Fixes issue #88.

Signed-off-by: Paolo Bonzini <pbonzini@redhat.com>
---
 static/css/base.css     | 11 +++++++++--
 static/js/patchew.js    | 23 +++++++++++++++++++++++
 www/templates/base.html |  7 +++++--
 3 files changed, 37 insertions(+), 4 deletions(-)

diff --git a/static/css/base.css b/static/css/base.css
index 9e04f50..a8c66c0 100644
--- a/static/css/base.css
+++ b/static/css/base.css
@@ -65,14 +65,21 @@ h1, h2, h3, .h1, .h2, .h3 {
     color: #666;
 }
 
-.search-help {
+.form-glyph-action {
     color: #ccc;
+    border: 0;
+    background: none;
+    padding: 0px 3px;
 }
 
-.search-help:hover {
+.form-glyph-action:hover {
     color: #aaa;
 }
 
+.form-glyph-action:active {
+    color: #23527c;
+    padding: 0px 3px;
+
 .search-form .form-group {
     width: 600px;
 }
diff --git a/static/js/patchew.js b/static/js/patchew.js
index a982de5..ce45abd 100644
--- a/static/js/patchew.js
+++ b/static/js/patchew.js
@@ -20,3 +20,26 @@ function add_fixed_scroll_events()
                           $(window).scrollTop() + 10 >= pre_fixed.offset().top + pre_fixed.height());
     })
 }
+
+function copy_to_clipboard(input) {
+    if (input.value == '') {
+        return;
+    }
+
+    var origSelectionStart = input.selectionStart;
+    var origSelectionEnd = input.selectionEnd;
+    var origFocus = typeof document.activeElement.focus === "function" ? document.activeElement : null;
+
+    // copy the selection.  Note that the old selection is not restored unless
+    // an error happens, to give the user feedback that the copy has happened.
+    input.focus();
+    input.setSelectionRange(0, input.value.length);
+    try {
+       document.execCommand("copy");
+    } catch(e) {
+        input.setSelectionRange(origSelectionStart, origSelectionEnd);
+        if (origFocus) {
+            origFocus.focus();
+        }
+    }
+}
diff --git a/www/templates/base.html b/www/templates/base.html
index 89dabcf..850317f 100644
--- a/www/templates/base.html
+++ b/www/templates/base.html
@@ -63,9 +63,12 @@ crossorigin="anonymous"/>
         <ul class="nav navbar-nav navbar-right">
             <form class="navbar-form navbar-left search-form" role="search" method="GET" action="{% url 'search' %}">
                 <div class="form-group">
-                    <input type="text" class="form-control" name="q" placeholder="Search" value="{{ search }}">
+                    <input type="text" class="form-control" id="q" name="q" placeholder="Search" value="{{ search }}">
                 </div>
-                <a href="{% url "search_help" %}"><span class="glyphicon glyphicon-question-sign search-help"></span></a>
+                <button type="button" class="form-glyph-action" aria-label="Copy to clipboard"
+				onclick="copy_to_clipboard(document.getElementById('q')); return 0"><span
+				class="fa fa-paste"></span></button>
+                <a href="{% url "search_help" %}" class="form-glyph-action"><span class="glyphicon glyphicon-question-sign"></span></a>
             </form>
             <div class="btn-group user-button">
                 {% if request.user.is_authenticated %}
-- 
2.19.1

_______________________________________________
Patchew-devel mailing list
Patchew-devel@redhat.com
https://www.redhat.com/mailman/listinfo/patchew-devel
Re: [Patchew-devel] [PATCH] add copy to clipboard button next to search
Posted by Caio Carrara 5 years, 5 months ago
Hello Paolo,

On Mon, Nov 26, 2018 at 01:36:25PM +0100, Paolo Bonzini wrote:
> This can be useful to copy and paste into the patchew-cli command line.
> 
> Fixes issue #88.
> 
> Signed-off-by: Paolo Bonzini <pbonzini@redhat.com>
> ---
>  static/css/base.css     | 11 +++++++++--
>  static/js/patchew.js    | 23 +++++++++++++++++++++++
>  www/templates/base.html |  7 +++++--
>  3 files changed, 37 insertions(+), 4 deletions(-)
> 
> diff --git a/static/css/base.css b/static/css/base.css
{...}
> diff --git a/static/js/patchew.js b/static/js/patchew.js
> index a982de5..ce45abd 100644
> --- a/static/js/patchew.js
> +++ b/static/js/patchew.js
{...}

It should be working on Firefox? I've tested it in my machine and it
only have worked on Chrome. I'm running Chrome version 70.x and Firefox
version 63.0 on Fedora 29 (XFCE).

Thanks,
-- 
Caio Carrara
Software Engineer, Virt Team - Red Hat
ccarrara@redhat.com

_______________________________________________
Patchew-devel mailing list
Patchew-devel@redhat.com
https://www.redhat.com/mailman/listinfo/patchew-devel
Re: [Patchew-devel] [PATCH] add copy to clipboard button next to search
Posted by Paolo Bonzini 5 years, 5 months ago
On 26/11/18 14:11, Caio Carrara wrote:
> It should be working on Firefox? I've tested it in my machine and it
> only have worked on Chrome. I'm running Chrome version 70.x and Firefox
> version 63.0 on Fedora 29 (XFCE).

Yes, it works with Firefox 63.0.1 here.  What does the Javascript
console say?

Paolo

_______________________________________________
Patchew-devel mailing list
Patchew-devel@redhat.com
https://www.redhat.com/mailman/listinfo/patchew-devel
Re: [Patchew-devel] [PATCH] add copy to clipboard button next to search
Posted by Caio Carrara 5 years, 5 months ago
On Mon, Nov 26, 2018 at 02:25:05PM +0100, Paolo Bonzini wrote:
> On 26/11/18 14:11, Caio Carrara wrote:
> > It should be working on Firefox? I've tested it in my machine and it
> > only have worked on Chrome. I'm running Chrome version 70.x and Firefox
> > version 63.0 on Fedora 29 (XFCE).
> 
> Yes, it works with Firefox 63.0.1 here.  What does the Javascript
> console say?
> 
> Paolo

Oops. Sorry for that. My NoScript plugin was enabled. It's working here
too.

-- 
Caio Carrara
Software Engineer, Virt Team - Red Hat
ccarrara@redhat.com

_______________________________________________
Patchew-devel mailing list
Patchew-devel@redhat.com
https://www.redhat.com/mailman/listinfo/patchew-devel
Re: [Patchew-devel] [PATCH] add copy to clipboard button next to search
Posted by Caio Carrara 5 years, 5 months ago
On Mon, Nov 26, 2018 at 01:36:25PM +0100, Paolo Bonzini wrote:
> This can be useful to copy and paste into the patchew-cli command line.
> 
> Fixes issue #88.
> 
> Signed-off-by: Paolo Bonzini <pbonzini@redhat.com>

Reviewed-by: Caio Carrara <ccarrara@redhat.com>

> ---
>  static/css/base.css     | 11 +++++++++--
>  static/js/patchew.js    | 23 +++++++++++++++++++++++
>  www/templates/base.html |  7 +++++--
>  3 files changed, 37 insertions(+), 4 deletions(-)
> 
> diff --git a/static/css/base.css b/static/css/base.css
> index 9e04f50..a8c66c0 100644
> --- a/static/css/base.css
> +++ b/static/css/base.css
> @@ -65,14 +65,21 @@ h1, h2, h3, .h1, .h2, .h3 {
>      color: #666;
>  }
>  
> -.search-help {
> +.form-glyph-action {
>      color: #ccc;
> +    border: 0;
> +    background: none;
> +    padding: 0px 3px;
>  }
>  
> -.search-help:hover {
> +.form-glyph-action:hover {
>      color: #aaa;
>  }
>  
> +.form-glyph-action:active {
> +    color: #23527c;
> +    padding: 0px 3px;
> +
>  .search-form .form-group {
>      width: 600px;
>  }
> diff --git a/static/js/patchew.js b/static/js/patchew.js
> index a982de5..ce45abd 100644
> --- a/static/js/patchew.js
> +++ b/static/js/patchew.js
> @@ -20,3 +20,26 @@ function add_fixed_scroll_events()
>                            $(window).scrollTop() + 10 >= pre_fixed.offset().top + pre_fixed.height());
>      })
>  }
> +
> +function copy_to_clipboard(input) {
> +    if (input.value == '') {
> +        return;
> +    }
> +
> +    var origSelectionStart = input.selectionStart;
> +    var origSelectionEnd = input.selectionEnd;
> +    var origFocus = typeof document.activeElement.focus === "function" ? document.activeElement : null;
> +
> +    // copy the selection.  Note that the old selection is not restored unless
> +    // an error happens, to give the user feedback that the copy has happened.
> +    input.focus();
> +    input.setSelectionRange(0, input.value.length);
> +    try {
> +       document.execCommand("copy");
> +    } catch(e) {
> +        input.setSelectionRange(origSelectionStart, origSelectionEnd);
> +        if (origFocus) {
> +            origFocus.focus();
> +        }
> +    }
> +}
> diff --git a/www/templates/base.html b/www/templates/base.html
> index 89dabcf..850317f 100644
> --- a/www/templates/base.html
> +++ b/www/templates/base.html
> @@ -63,9 +63,12 @@ crossorigin="anonymous"/>
>          <ul class="nav navbar-nav navbar-right">
>              <form class="navbar-form navbar-left search-form" role="search" method="GET" action="{% url 'search' %}">
>                  <div class="form-group">
> -                    <input type="text" class="form-control" name="q" placeholder="Search" value="{{ search }}">
> +                    <input type="text" class="form-control" id="q" name="q" placeholder="Search" value="{{ search }}">
>                  </div>
> -                <a href="{% url "search_help" %}"><span class="glyphicon glyphicon-question-sign search-help"></span></a>
> +                <button type="button" class="form-glyph-action" aria-label="Copy to clipboard"
> +				onclick="copy_to_clipboard(document.getElementById('q')); return 0"><span
> +				class="fa fa-paste"></span></button>
> +                <a href="{% url "search_help" %}" class="form-glyph-action"><span class="glyphicon glyphicon-question-sign"></span></a>
>              </form>
>              <div class="btn-group user-button">
>                  {% if request.user.is_authenticated %}
> -- 
> 2.19.1
> 
> _______________________________________________
> Patchew-devel mailing list
> Patchew-devel@redhat.com
> https://www.redhat.com/mailman/listinfo/patchew-devel

-- 
Caio Carrara
Software Engineer, Virt Team - Red Hat
ccarrara@redhat.com

_______________________________________________
Patchew-devel mailing list
Patchew-devel@redhat.com
https://www.redhat.com/mailman/listinfo/patchew-devel