From patchwork Fri Jan 26 17:13:21 2024 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Patchwork-Submitter: Maxim Cournoyer X-Patchwork-Id: 59440 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 5E58B27BBE2; Fri, 26 Jan 2024 17:15:30 +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=unavailable 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 7811D27BBEC for ; Fri, 26 Jan 2024 17:15:20 +0000 (GMT) Received: from localhost ([::1] helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1rTPnO-0000hJ-Me; Fri, 26 Jan 2024 12:15:14 -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 1rTPn9-0000f3-4K for guix-patches@gnu.org; Fri, 26 Jan 2024 12:15:00 -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 1rTPn7-0004pC-AA for guix-patches@gnu.org; Fri, 26 Jan 2024 12:14:58 -0500 Received: from Debian-debbugs by debbugs.gnu.org with local (Exim 4.84_2) (envelope-from ) id 1rTPnD-0004Dt-RY for guix-patches@gnu.org; Fri, 26 Jan 2024 12:15:03 -0500 X-Loop: help-debbugs@gnu.org Subject: [bug#68680] [PATCH mumi v4 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 17:15: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.170628926416075 (code B ref 68680); Fri, 26 Jan 2024 17:15:03 +0000 Received: (at 68680) by debbugs.gnu.org; 26 Jan 2024 17:14:24 +0000 Received: from localhost ([127.0.0.1]:52593 helo=debbugs.gnu.org) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1rTPmZ-0004B5-Cs for submit@debbugs.gnu.org; Fri, 26 Jan 2024 12:14:24 -0500 Received: from mail-qv1-xf2d.google.com ([2607:f8b0:4864:20::f2d]:44208) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1rTPmV-0004A0-Dk for 68680@debbugs.gnu.org; Fri, 26 Jan 2024 12:14:20 -0500 Received: by mail-qv1-xf2d.google.com with SMTP id 6a1803df08f44-68873473ce6so4959226d6.0 for <68680@debbugs.gnu.org>; Fri, 26 Jan 2024 09:14:12 -0800 (PST) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20230601; t=1706289247; x=1706894047; 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=W/YpZzb/dSk4kYfH/BnjGk0FjB9KgtLTBvur+GKhuBo=; b=eXklrWJTrHg+m1YaUwhlJ/mt+WttzRRgpIMYdA8c2rL0ZVodcYNci12jXsbmY2c/WR ZpkFqjmb49Cq/Okl3hUthN2tf2TDeJZu3fJuvAZl8M9a2h5L6j355ZKWJ06jK38LM6cT vHCkU1Ghl51pzh1AoiPZtuUAFnr2UT9ZvrxizpRYZbqZwFUbLekS/PtkATPnJdhNhkD+ swBhi8BNhMMvBJMaonbACwKlrU857NwN1gRMa4r8voo/pDUxKNM8J1d5HrIHCr/H7quj AdBJkwcpgOxIplMHTfXrNodnR6VmfscrftqmZBgTaA2prqds5IX6vBs4j7q8FRks+QG4 oooQ== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20230601; t=1706289247; x=1706894047; 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=W/YpZzb/dSk4kYfH/BnjGk0FjB9KgtLTBvur+GKhuBo=; b=WFUiMXI2wJEqrfkx4TDlhd0xQGKw5vqq/66AWGbnKgw0V973vUcP6UQjYDgeBG14b4 tvRIASWK1QmlnUYhsAttIWZaXK5waTLnm05HMb9JjKsgAJfvuVHuwBg8tS2qtsgrMvRh 2GA52bYLaygAR1aKdCKh17dsxN9RNcO/md3tTGxCliOWWe+MYsQKTTvlS0A2ktBq8WyY cn6W5Ym0YVmyi5Ak7O0MnO6hUX0qww5QLRptzkyZ4E1OaG24gWHvX7bOH8MJMP09Vpt4 gVhRm7CxiuSX6KsWC2boF0+AvJ24x2hpcCa8+8hMFIgswri+N/K1DdBN14r/n4qvFCrU q+xg== X-Gm-Message-State: AOJu0YxuWi4zMLrRl9eVu/FsgeH80fVcIxr+IkWNuFH1ppFMfRnP10DY RlnnVOu4pVq5ErM3dHVea0aL5Gahtyfa71VMxW41jn1fli0VUiqBL59qlPNy X-Google-Smtp-Source: AGHT+IFoDKu/OM25MRsRcu7bZehtHxxE93AVEZ9eQVdsO+XBeaharKKdcM9I+38qx4unrpzfeuM0Sw== X-Received: by 2002:a05:6214:5188:b0:67c:cd09:9b93 with SMTP id kl8-20020a056214518800b0067ccd099b93mr140893qvb.7.1706289246835; Fri, 26 Jan 2024 09:14:06 -0800 (PST) Received: from localhost.localdomain (dsl-153-164.b2b2c.ca. [66.158.153.164]) by smtp.gmail.com with ESMTPSA id ld8-20020a056214418800b006854ec9dbabsm668080qvb.92.2024.01.26.09.14.05 (version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256); Fri, 26 Jan 2024 09:14:06 -0800 (PST) From: Maxim Cournoyer Date: Fri, 26 Jan 2024 12:13:21 -0500 Message-ID: <20240126171358.20291-5-maxim.cournoyer@gmail.com> X-Mailer: git-send-email 2.41.0 In-Reply-To: <20240126171358.20291-1-maxim.cournoyer@gmail.com> References: <20240126171358.20291-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 v4: - Set icon sizes via CSS instead of HTML, which improves layout. 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 | 31 +++++++++++++++++++--- mumi/web/view/html.scm | 24 ++++++++++++----- mumi/web/view/utils.scm | 40 +++++++++++++++++----------- 4 files changed, 129 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..e605630 100644 --- a/assets/mumi.scss +++ b/assets/mumi.scss @@ -506,11 +506,36 @@ 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. We use + // buttons for inheriting their CSS style when focused via the + // keyboard. + background: revert; + border: revert; + color: revert; + padding: revert; +} + +.bi-copy, +.bi-download{ + 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..104162d 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?20240126000000"))) (script (@ (src "/js/tokeninput.js"))) (script - (@ (src "/js/mumi.js"))) + (@ (src "/js/mumi.js?20240126000000"))) ,@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