From patchwork Wed Jan 24 02:20:56 2024 Content-Type: text/plain; charset="utf-8" MIME-Version: 1.0 Content-Transfer-Encoding: 8bit X-Patchwork-Submitter: Maxim Cournoyer X-Patchwork-Id: 59356 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 7ADCB27BBE2; Wed, 24 Jan 2024 02:25:32 +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 E19E227BBE9 for ; Wed, 24 Jan 2024 02:25:29 +0000 (GMT) Received: from localhost ([::1] helo=lists1p.gnu.org) by lists.gnu.org with esmtp (Exim 4.90_1) (envelope-from ) id 1rSSwm-0002P1-6z; Tue, 23 Jan 2024 21:25:00 -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 1rSSwk-0002OH-Js for guix-patches@gnu.org; Tue, 23 Jan 2024 21:24:58 -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 1rSSwk-0003GA-1S for guix-patches@gnu.org; Tue, 23 Jan 2024 21:24:58 -0500 Received: from Debian-debbugs by debbugs.gnu.org with local (Exim 4.84_2) (envelope-from ) id 1rSSwp-000372-0B for guix-patches@gnu.org; Tue, 23 Jan 2024 21:25:03 -0500 X-Loop: help-debbugs@gnu.org Subject: [bug#68680] [PATCH mumi 3/3] 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: Wed, 24 Jan 2024 02:25:02 +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: Maxim Cournoyer Received: via spool by 68680-submit@debbugs.gnu.org id=B68680.170606309311930 (code B ref 68680); Wed, 24 Jan 2024 02:25:02 +0000 Received: (at 68680) by debbugs.gnu.org; 24 Jan 2024 02:24:53 +0000 Received: from localhost ([127.0.0.1]:44260 helo=debbugs.gnu.org) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1rSSwe-00036L-R1 for submit@debbugs.gnu.org; Tue, 23 Jan 2024 21:24:53 -0500 Received: from mail-qt1-x82c.google.com ([2607:f8b0:4864:20::82c]:55598) by debbugs.gnu.org with esmtp (Exim 4.84_2) (envelope-from ) id 1rSSwZ-00035l-SC for 68680@debbugs.gnu.org; Tue, 23 Jan 2024 21:24:48 -0500 Received: by mail-qt1-x82c.google.com with SMTP id d75a77b69052e-429ca07044eso37085621cf.3 for <68680@debbugs.gnu.org>; Tue, 23 Jan 2024 18:24:42 -0800 (PST) DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=gmail.com; s=20230601; t=1706063077; x=1706667877; 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=q+4RPNSj/mgRmsxEOZBQj547nqaGdiGcUGCDVDJk86g=; b=RHcovZ4BkzglWnA1EYyFz8CRThK1Oaj4AHmSUEFE+gCQFbgH/xbnXU/JH/mI0S1et7 6aG7cZCNscoZ4w3pdrPI8PxDeeUkGC4/mxSPhx3otIA2xicXRUzKFDvYIl2nij2ikBNl bU7ebeqay4mJ8XXdCWx1mqfsdmgoBKSUtjudvFg088Qf3oWvuWVSMqOt2D7AoBVtmQCN g0tg8oB9XJ9allKw2jmcoITV2A5qpnAdvMjhgMQHJQOzH5JXfuO91HHBus5Vbz7MGjKg BHj1akx3ADku41PXBsSiVLKbf62L3LgLIm2/+ho0e4EkxQ2Ivi/34+ALr1hwsUNqPw+B wx+g== X-Google-DKIM-Signature: v=1; a=rsa-sha256; c=relaxed/relaxed; d=1e100.net; s=20230601; t=1706063077; x=1706667877; 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=q+4RPNSj/mgRmsxEOZBQj547nqaGdiGcUGCDVDJk86g=; b=YNF9kjhu0egNjsIhVkKrIze8GHHVXO1AzX/plJEX8Tzel6agB6S7elgBa7YY61SBmy GT7U6ANIg/iimwqG61oJVkcP9N6RPU8jIibWR8gk3TL5OF+sNeNy5KuoYViz8/5ENOt+ nKOxqB+FBB82IKPGiIK+ECzcWOseIQCW9BI9IXpD7HGeSDqJTFMb0qBsU0j2aD1QWBqI IAcXjAEcWCZCufssYWbw8hmBigGyBgXH95cm9JhFRbaRClWLUZileJXZAFjcSAvj+H1Q Y0X7cKvFgnYKbRRm/FbAeZ83EUyD3IMSzIgdAz+mvEY1wR1jvyU/zcFZJ1hzjg7yqCjr iLBg== X-Gm-Message-State: AOJu0YwEvxAtpJL8bvN5Q/OG0M5KiPfPBmU7VN8Bv7fqLaJj71XANTBt JmalB9Sx/FYVKQVzyXKsS49NqILy2dt2IU/unQ78i9cTkKatCdY1Z5MyIXLZcHo= X-Google-Smtp-Source: AGHT+IG2h5omCnAXMiYyIToxg1GnIIPp+vGC0h+aeLHWuZ28ZGy5tkb9PebNTG8xP8pxtVLuXwxZvA== X-Received: by 2002:a0c:e249:0:b0:681:966d:ca76 with SMTP id x9-20020a0ce249000000b00681966dca76mr1791507qvl.115.1706063076789; Tue, 23 Jan 2024 18:24:36 -0800 (PST) Received: from localhost.localdomain (dsl-158-18.b2b2c.ca. [66.158.158.18]) by smtp.gmail.com with ESMTPSA id d15-20020a056214184f00b006819a4354basm4047479qvy.37.2024.01.23.18.24.36 (version=TLS1_3 cipher=TLS_AES_256_GCM_SHA384 bits=256/256); Tue, 23 Jan 2024 18:24:36 -0800 (PST) From: Maxim Cournoyer Date: Tue, 23 Jan 2024 21:20:56 -0500 Message-ID: <20240124022055.16021-4-maxim.cournoyer@gmail.com> X-Mailer: git-send-email 2.41.0 In-Reply-To: <20240124022055.16021-2-maxim.cournoyer@gmail.com> References: <20240124022055.16021-2-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. * 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. Signed-off-by: Maxim Cournoyer --- assets/js/mumi.js | 31 ++++++++++++++++++++++++++++- assets/mumi.scss | 23 ++++++++++++++++++--- mumi/web/view/html.scm | 20 +++++++++++++++---- mumi/web/view/utils.scm | 44 +++++++++++++++++++++++++++-------------- 4 files changed, 95 insertions(+), 23 deletions(-) diff --git a/assets/js/mumi.js b/assets/js/mumi.js index ab29f08..0d25c5a 100644 --- a/assets/js/mumi.js +++ b/assets/js/mumi.js @@ -1,4 +1,4 @@ -// @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; -*- var mumi = (function () { const possibleTokens = [ { text: 'is:open' }, @@ -129,12 +129,41 @@ var mumi = (function () { var init = function () { initTokenInput (); }; + + // Copy a message Message-ID to the clipboard. + var setupMessageIdButtonHandler = function () { + + let messageIdClickHandler = (evt) => { + 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; + } + // Update button's tooltip for the next 3 s. + messageIdButton.dataset.tooltip = "Copied!"; + setTimeout(() => { messageIdButton.dataset.tooltip = originalTooltip; }, + 3000); + navigator.clipboard.writeText(messageId); + console.log("copied Message-ID " + messageId + " to clipboard"); + }; + + var messageIdButton = document.getElementById("copy-message-id-button"); + if (messageIdButton === null) { return; } + messageIdButton.addEventListener("click", messageIdClickHandler); + }; + 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..60dabb1 100644 --- a/assets/mumi.scss +++ b/assets/mumi.scss @@ -506,11 +506,28 @@ 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: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..3709134 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 @@ -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 (@ (id "copy-message-id-button") + (class "message-button") + (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..ed83d15 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,31 @@ numbers with the given MESSAGE-NUMBER." ;; https://icons.getbootstrap.com/icons/download/ (define download-icon '(svg (@ (class "bi bi-download") - (width "1em") - (height "1em") + (width "1rem") + (height "1rem") + (viewBox "0 0 16 16") + (fill "currentColor") + (xmlns "http://www.w3.org/2000/svg")) + (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") + (width "1rem") + (height "1rem") (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 (@ (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 +295,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 +306,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