From patchwork Fri Jan 26 02:26:50 2024 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Patchwork-Submitter: Maxim Cournoyer X-Patchwork-Id: 59413 Return-Path: X-Original-To: patchwork@mira.cbaines.net Delivered-To: patchwork@mira.cbaines.net Received: by mira.cbaines.net (Postfix, from userid 113) id C09A027BBEA; Fri, 26 Jan 2024 02:28:37 +0000 (GMT) X-Spam-Checker-Version: SpamAssassin 3.4.6 (2021-04-09) on mira.cbaines.net X-Spam-Level: X-Spam-Status: No, score=-3.7 required=5.0 tests=BAYES_00,DKIM_ADSP_CUSTOM_MED, DKIM_INVALID,DKIM_SIGNED,FREEMAIL_FROM,MAILING_LIST_MULTI, RCVD_IN_MSPIKE_H5,RCVD_IN_MSPIKE_WL,SPF_HELO_PASS,URIBL_BLOCKED autolearn=ham autolearn_force=no version=3.4.6 Received: from lists.gnu.org (lists.gnu.org [209.51.188.17]) by mira.cbaines.net (Postfix) with ESMTPS id 356A427BBE2 for ; Fri, 26 Jan 2024 02:28:36 +0000 (GMT) Received: from localhost ([::1] helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1rTBwl-0002tW-89; Thu, 25 Jan 2024 21:27:59 -0500 Received: from eggs.gnu.org ([2001:470:142:3::10]) by lists.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_256_GCM_SHA384:256) (Exim 4.90_1) (envelope-from ) id 1rTBwj-0002r7-LZ for guix-patches@gnu.org; Thu, 25 Jan 2024 21:27:57 -0500 Received: from debbugs.gnu.org ([2001:470:142:5::43]) by eggs.gnu.org with esmtps (TLS1.2:ECDHE_RSA_AES_128_GCM_SHA256:128) (Exim 4.90_1) (envelope-from ) id 1rTBwj-0007Ns-De for guix-patches@gnu.org; Thu, 25 Jan 2024 21:27:57 -0500 Received: from Debian-debbugs by debbugs.gnu.org with local (Exim 4.84_2) (envelope-from ) id 1rTBwp-0004Yk-HM for guix-patches@gnu.org; Thu, 25 Jan 2024 21:28:03 -0500 X-Loop: help-debbugs@gnu.org Subject: [bug#68680] [PATCH mumi v3 4/4] html: Add a button to copy a Message-ID to the clipboard. Resent-From: Maxim Cournoyer Original-Sender: "Debbugs-submit" Resent-CC: guix-patches@gnu.org Resent-Date: Fri, 26 Jan 2024 02:28:03 +0000 Resent-Message-ID: Resent-Sender: help-debbugs@gnu.org X-GNU-PR-Message: followup 68680 X-GNU-PR-Package: guix-patches X-GNU-PR-Keywords: patch To: 68680@debbugs.gnu.org Cc: rekado@elephly.net, arunisaac@systemreboot.net, Maxim Cournoyer Received: via spool by 68680-submit@debbugs.gnu.org id=B68680.170623607317483 (code B ref 68680); Fri, 26 Jan 2024 02:28:03 +0000 Received: (at 68680) by debbugs.gnu.org; 26 Jan 2024 02:27:53 +0000 Received: from localhost ([127.0.0.1]:49790 helo=debbugs.gnu.org) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1rTBwe-0004Xt-TU for submit@debbugs.gnu.org; Thu, 25 Jan 2024 21:27:53 -0500 Received: from mail-qk1-x731.google.com ([2607:f8b0:4864:20::731]:51601) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1rTBwd-0004Wu-BE for 68680@debbugs.gnu.org; Thu, 25 Jan 2024 21:27:52 -0500 Received: by mail-qk1-x731.google.com with SMTP id af79cd13be357-7831aacdaffso638841285a.3 for <68680@debbugs.gnu.org>; Thu, 25 Jan 2024 18:27:45 -0800 (PST) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20230601; t=1706236059; x=1706840859; darn=debbugs.gnu.org; h=content-transfer-encoding:mime-version:references:in-reply-to :message-id:date:subject:cc:to:from:from:to:cc:subject:date :message-id:reply-to; bh=hxzCeTwvs0shl5TIf2eqlQ6cqVVl/z7vLaeg5RLHrpI=; b=bRQ5gvSrdsYHwXWhdarbaeusnW0a0QFUMT9kNB7n5XEoI7f1ROC7l6fAe9ja24hgI0 9zbeubznqCHezOAgRcrfHIXg8RwoK49K8DRmU59VO13e/YOtUTaompN3cJT4FnveIVus DXk4iJ9uqXrAQRAL+jygJdsEoBTDg5jHrqyfxjD6pzbT4THLpR2oDKokc6rrqfQZwkt/ 6odTJr/QRc6ItiHIaMPvHdk4sfu3etF526dVQcfeiC8FtI77RpvnSYPpU5w8iDEWo2nG O7g5sMbNSJY/FDh0Kp8zavxifEBzc+8biArxe33WuV73+pkEPep5/LNGPoX9ae8T9tWy nj4g== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20230601; t=1706236059; x=1706840859; h=content-transfer-encoding:mime-version:references:in-reply-to :message-id:date:subject:cc:to:from:x-gm-message-state:from:to:cc :subject:date:message-id:reply-to; bh=hxzCeTwvs0shl5TIf2eqlQ6cqVVl/z7vLaeg5RLHrpI=; b=cyC5Hi9w+xPEy5xdkpqFy8A4ASx5O8rD3IyzTADKflORM3ja2O70vP+u7zV3emi3zx 5PemvTLBA9S4gTMHhkGzQvE+WLDAtyJBm2m2+kHcsUeDPdp804OXd6Pkz8W1/yrtTEup 1Pk/UEzAPz/C6rW2rWS/DaeIUjNlgB8cAjm9aBq+E7ndxOoB4iRk/0QAYPGZriObVIE5 tWBmXEeiVEB2/Ol8GWgJvDnc2ECy9SVkCtmB9zRv2KqEeKmF10MnGKGqjhcpusTRK45D SqnRmnbQofXbC/feK+Nqc7kpsWXaBaxxyvtzFJGXlEZW0DXAZS/n5snQeT0oszs0m+xz Kx1w== X-Gm-Message-State: AOJu0Yz3x2Z+Rd7jzFXcQyZA47lgINuqEO+gwN9/CL5gH03kwymCajzZ x3rSPat+38o2eLxc/fmZlarM76HX6dDm+BVh9kkQb6kKFFCi0HNRjBkcVo+b X-Google-Smtp-Source: AGHT+IEMVi+uDFQcYc9WT+dX2XUl954SGsW2zEoTP5mBGsmV191bU4B0n6dryxoC4WzzlJow4Fc4tg== X-Received: by 2002:a05:620a:a97:b0:783:b88c:f8c9 with SMTP id v23-20020a05620a0a9700b00783b88cf8c9mr879819qkg.26.1706236059119; Thu, 25 Jan 2024 18:27:39 -0800 (PST) Received: from localhost.localdomain (dsl-155-16.b2b2c.ca. [66.158.155.16]) by smtp.gmail.com with ESMTPSA id g26-20020a37e21a000000b00783574d5017sm153736qki.19.2024.01.25.18.27.38 (version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256); Thu, 25 Jan 2024 18:27:38 -0800 (PST) From: Maxim Cournoyer Date: Thu, 25 Jan 2024 21:26:50 -0500 Message-ID: <20240126022717.31305-5-maxim.cournoyer@gmail.com> X-Mailer: git-send-email 2.41.0 In-Reply-To: <20240126022717.31305-1-maxim.cournoyer@gmail.com> References: <20240126022717.31305-1-maxim.cournoyer@gmail.com> MIME-Version: 1.0 X-BeenThere: debbugs-submit@debbugs.gnu.org X-Mailman-Version: 2.1.18 Precedence: list X-BeenThere: guix-patches@gnu.org List-Id: List-Unsubscribe: , List-Archive: List-Post: List-Help: List-Subscribe: , Errors-To: guix-patches-bounces+patchwork=mira.cbaines.net@gnu.org Sender: guix-patches-bounces+patchwork=mira.cbaines.net@gnu.org X-getmail-retrieved-from-mailbox: Patches * mumi/web/view/html.scm (issue-page) : New HTML element. (layout): Bump timestamp on .css and .js files to force reload. * mumi/web/view/utils.scm (download-icon): Update source. Use 'rem' as size unit. (copy-icon): New variable. (display-message-body) : Add IDs to buttons. Add to "message-button" class. * assets/mumi.scss: Refactor spacing of message header buttons via a flex display. Add a shrinking animation to message buttons on hover. * assets/js/mumi.js (mumi): Register an event for it that copies the Message-ID to the clipboard. Add js-indent-level prop line as well as copyright notices. * mumi/web/view/html.scm --- Changes in v3: - Allow using the new copy button via the keyboard - Register event handlers on all copy message-id buttons - Move download icon sizes to CSS to resolve warning in Firefox - Add guard inside download button event to ensure only one event runs at a time, avoiding tooltip getting stuck on 'Copied!' - Use a class name instead of a unique ID for the message-id buttons - Register handlers to every message-id buttons Changes in v2: - Add timestamp to CSS and JavaScript file names to force reload assets/js/mumi.js | 59 ++++++++++++++++++++++++++++++++++++++++- assets/mumi.scss | 28 ++++++++++++++++--- mumi/web/view/html.scm | 24 ++++++++++++----- mumi/web/view/utils.scm | 40 +++++++++++++++++----------- 4 files changed, 126 insertions(+), 25 deletions(-) diff --git a/assets/js/mumi.js b/assets/js/mumi.js index ab29f08..77b9276 100644 --- a/assets/js/mumi.js +++ b/assets/js/mumi.js @@ -1,4 +1,8 @@ -// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3.0-or-later +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3.0-or-later -*- js-indent-level: 2; -*- +// +// Copyright © 2019, 2022, 2023 Ricardo Wurmus +// Copyright © 2024 Maxim Cournoyer +// var mumi = (function () { const possibleTokens = [ { text: 'is:open' }, @@ -129,12 +133,65 @@ var mumi = (function () { var init = function () { initTokenInput (); }; + + // Copy a message Message-ID to the clipboard. + var setupMessageIdButtonHandler = () => { + + // Avoid having the async timeout code starting while a previous + // one is ongoing, which would corrupt the tooltip text. + var isMessageIdHandlerRunning = false; + + let messageIdHandler = (evt) => { + if (isMessageIdHandlerRunning) return; + isMessageIdHandlerRunning = true; + + // If the button was triggered by a keyup event, check if it was + // the Enter key. + if (evt.type === "keyup" && event.key !== "Enter") return; + + messageIdButton = evt.currentTarget; + originalTooltip = messageIdButton.dataset.tooltip; + var messageId = messageIdButton.dataset.messageId; + if (!window.isSecureContext) { + console.log("not in a secure context -- " + + "cannot copy message-id to clipboard\n" + + "tip: for testing, open via http://localhost:1234"); + return; + } + + // Avoid the button being stuck in the focused state when a + // mouse is used, to avoid UI clutter. + if (evt.type === "click") { + messageIdButton.removeAttribute('tabindex'); + } + + // Update button's tooltip for the next 3 s. + messageIdButton.dataset.tooltip = "Copied!"; + setTimeout(() => { + messageIdButton.dataset.tooltip = originalTooltip; + if (evt.type === "click") { + // Re-add the tabindex attribute. + messageIdButton.setAttribute("tabindex", "0") + isMessageIdHandlerRunning = false; + }}, 3000); + + navigator.clipboard.writeText(messageId); + console.log("copied Message-ID " + messageId + " to clipboard"); + }; + + document.querySelectorAll(".copy-message-id-button").forEach((btn) => { + btn.addEventListener("click", messageIdHandler); + btn.addEventListener("keyup", messageIdHandler)}); + }; + return({ 'init': init, 'lines': setupLineHandler, + 'messageIdButtonHandler': setupMessageIdButtonHandler, }); })(); window.addEventListener ("load", mumi.init); window.addEventListener ("DOMContentLoaded", mumi.lines); +window.addEventListener ("DOMContentLoaded", mumi.messageIdButtonHandler); // @license-end diff --git a/assets/mumi.scss b/assets/mumi.scss index 822f110..b12a733 100644 --- a/assets/mumi.scss +++ b/assets/mumi.scss @@ -506,11 +506,33 @@ details { margin-right: 0.2em; } -.download-message, .download-part { float: right; - font-size: 0.8em; - font-style: italic; +} + +.header-buttons { + display: flex; + flex-direction: row; + float: right; + justify-content: flex-end; + } + +.header-buttons > * { + margin: 0 0 0 0.5rem; + // Custom buttons: undo the Pico CSS default style. + background: revert; + border: revert; + color: revert; + padding: revert; +} + +.message-button { + height: 1rem; + width: 1rem; +} + +.message-button:hover { + transform: scale(0.95); } @media (min-width: 768px) { diff --git a/mumi/web/view/html.scm b/mumi/web/view/html.scm index 8f06a36..8ae1a6f 100644 --- a/mumi/web/view/html.scm +++ b/mumi/web/view/html.scm @@ -1,6 +1,7 @@ ;;; mumi -- Mediocre, uh, mail interface ;;; Copyright © 2016, 2017, 2018, 2019, 2020, 2021, 2022 Ricardo Wurmus ;;; Copyright © 2018, 2019, 2023 Arun Isaac +;;; Copyright © 2024 Maxim Cournoyer ;;; ;;; This program is free software: you can redistribute it and/or ;;; modify it under the terms of the GNU Affero General Public License @@ -62,11 +63,11 @@ (@ (rel "stylesheet") (media "screen") (type "text/css") - (href "/css/mumi.css?20221231000000"))) + (href "/css/mumi.css?20240125000002"))) (script (@ (src "/js/tokeninput.js"))) (script - (@ (src "/js/mumi.js"))) + (@ (src "/js/mumi.js?20240125000002"))) ,@head) (body (script (@ (src "/js/theme-switcher.js"))) @@ -612,6 +613,7 @@ currently disabled.")) (not (bug-archived bug))) mailer-form disabled-mailer))) + (define (show-message message-number message previous-subject) `((div (a (@ (class "message-anchor") @@ -642,10 +644,20 @@ currently disabled.")) message-number))) (title ,(date->string (date message)))) ,(time->string (date message))))) - (div (@ (class "download-message")) - (a (@ (href ,(format #f "/issue/~a/raw/~a" - id message-number))) - ,download-icon)) + (div (@ (class "header-buttons")) + (div (@ (class "copy-message-id-button message-button") + (tabindex "0") ;make it keyboard-usable + (role "button") ;specific to Pico CSS + (data-tooltip "Copy Message-ID") + (data-message-id ,(message-id message))) + ,copy-icon) + (div (@ (id "download-raw-message-button") + (class "message-button") + (role "button") + (data-tooltip "Download raw message")) + (a (@ (href ,(format #f "/issue/~a/raw/~a" + id message-number))) + ,download-icon))) ,@(if (string-suffix? previous-subject (subject message)) '() `((div (@ (class "subject")) ,(subject message)))) diff --git a/mumi/web/view/utils.scm b/mumi/web/view/utils.scm index 1ce7b64..712d198 100644 --- a/mumi/web/view/utils.scm +++ b/mumi/web/view/utils.scm @@ -2,6 +2,7 @@ ;;; Copyright © 2017, 2018, 2019, 2020 Ricardo Wurmus ;;; Copyright © 2018, 2019 Arun Isaac ;;; Copyright © 2018 Ludovic Courtès +;;; Copyright © 2024 Maxim Cournoyer ;;; ;;; This program is free software: you can redistribute it and/or ;;; modify it under the terms of the GNU Affero General Public License @@ -35,6 +36,7 @@ #:use-module (web uri) #:export (prettify avatar-color + copy-icon download-icon display-message-body time->string)) @@ -215,23 +217,27 @@ numbers with the given MESSAGE-NUMBER." ;; https://icons.getbootstrap.com/icons/download/ (define download-icon '(svg (@ (class "bi bi-download") - (width "1em") - (height "1em") (viewBox "0 0 16 16") (fill "currentColor") (xmlns "http://www.w3.org/2000/svg")) - (title "Download") - (path (@ (fill-rule "evenodd") - (clip-rule "evenodd") - (d "M.5 8a.5.5 0 01.5.5V12a1 1 0 001 1h12a1 1 0 001-1\ -V8.5a.5.5 0 011 0V12a2 2 0 01-2 2H2a2 2 0 01-2-2V8.5A.5.5 0 01.5 8z")) "") - (path (@ (fill-rule "evenodd") - (clip-rule "evenodd") - (d "M5 7.5a.5.5 0 01.707 0L8 9.793 10.293 7.5a.5.5 0 \ -11.707.707l-2.646 2.647a.5.5 0 01-.708 0L5 8.207A.5.5 0 015 7.5z")) "") + (path (@ (d "M.5 9.9a.5.5 0 0 1 .5.5v2.5a1 1 0 0 0 1 1h12a1 \ +1 0 0 0 1-1v-2.5a.5.5 0 0 1 1 0v2.5a2 2 0 0 1-2 2H2a2 2 0 0 \ +1-2-2v-2.5a.5.5 0 0 1 .5-.5"))) + (path (@ (d "M7.646 11.854a.5.5 0 0 0 .708 0l3-3a.5.5 0 0 \ +0-.708-.708L8.5 10.293V1.5a.5.5 0 0 0-1 0v8.793L5.354 8.146a.5.5 0 \ +1 0-.708.708z"))))) + +;; https://icons.getbootstrap.com/icons/copy/ +(define copy-icon + '(svg (@ (class "bi bi-copy") + (viewBox "0 0 16 16") + (fill "currentColor") + (xmlns "http://www.w3.org/2000/svg")) (path (@ (fill-rule "evenodd") - (clip-rule "evenodd") - (d "M8 1a.5.5 0 01.5.5v8a.5.5 0 01-1 0v-8A.5.5 0 018 1z")) ""))) + (d "M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 \ +2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 \ +0-1-1zM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 \ +2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1z"))))) (define* (display-message-body bug-num message-number message #:optional plain?) "Convenience procedure to render MESSAGE (part of bug with number @@ -285,7 +291,9 @@ lines when PLAIN? is #T." ""))) ((string-suffix? ".scm" attachment-name) `(div (@ (class "multipart scheme")) - (div (@ (class "download-part")) + (div (@ (id "download-scheme-part-button") + (class "download-part message-button") + (data-tooltip "Download Scheme file")) (a (@ (href ,(attachment-url))) ,download-icon)) ,(highlights->sxml (highlight lex-scheme body)))) @@ -294,7 +302,9 @@ lines when PLAIN? is #T." (list "multipart" (or (and content-type (content-type->css-class content-type)) ""))))) - (div (@ (class "download-part")) + (div (@ (id "download-part-button") + (class "download-part message-button") + (data-tooltip "Download MIME part")) (a (@ (href ,(attachment-url))) ,download-icon)) ,(cond