From 3cb7d4a0fe5e3726a25d9fc243a1da94f88d5211 Mon Sep 17 00:00:00 2001 From: Gabriel Veit Date: Sat, 11 May 2024 21:37:30 +0100 Subject: [PATCH 1/3] Allow bulk selection by holding shift --- README.md | 1 + addCheckboxes.js | 45 ++++++++++++++++++++++++++++++++++++++++++--- globals.js | 4 +--- 3 files changed, 44 insertions(+), 6 deletions(-) diff --git a/README.md b/README.md index 0e2bd32..ac89acd 100644 --- a/README.md +++ b/README.md @@ -28,3 +28,4 @@ English | [中文版本](./README-CN.md) - Select the conversations you wish to delete. - Click the "Bulk delete" button, and the selected conversations will be deleted. - If needed, you can click the "Remove checkboxes" button to hide the checkboxes. +- It's possible to select all checkboxes between your last selection and the one being selected by holding shift. diff --git a/addCheckboxes.js b/addCheckboxes.js index b44459e..bb02a3b 100644 --- a/addCheckboxes.js +++ b/addCheckboxes.js @@ -17,13 +17,50 @@ function toggleCheckbox(event) { const checkbox = parentElement ? parentElement.querySelector(`.${CHECKBOX_CLASS}`) : null; if (checkbox) { checkbox.checked = !checkbox.checked; + checkPreviousCheckboxes(checkbox); } event.stopPropagation(); } -// 阻止事件冒泡 -function preventEventPropagation(event) { +function handleCheckboxClick(event) { + // 阻止事件冒泡 event.stopPropagation(); + + checkPreviousCheckboxes(event.target); +} + +function checkPreviousCheckboxes(clickedCheckbox) { + if (shiftPressed && clickedCheckbox.checked) { + const allCheckboxes = Array.from(document.querySelectorAll(`.${CHECKBOX_CLASS}`)); + const previousCheckboxes = allCheckboxes.slice(0, allCheckboxes.indexOf(clickedCheckbox)); + + let index = previousCheckboxes.length - 1; + while (index >= 0 && !previousCheckboxes[index].checked) { + index--; + } + + // A negative index means no previous checkbox is checked + if (index >= 0) { + previousCheckboxes.slice(index).forEach((checkbox) => { + checkbox.checked = true; + }); + } + } +} + +function addShiftKeyEventListeners() { + console.log('Adding Shift key event listeners...'); + document.addEventListener('keydown', (event) => { + if (event.key === 'Shift') { + shiftPressed = true; + } + }); + + document.addEventListener('keyup', (event) => { + if (event.key === 'Shift') { + shiftPressed = false; + } + }); } // 添加复选框到每个对话 @@ -46,7 +83,7 @@ function addCheckboxes() { checkbox.className = CHECKBOX_CLASS; checkbox.dataset.index = index; checkbox.checked = isChecked; - checkbox.addEventListener('click', preventEventPropagation); + checkbox.addEventListener('click', handleCheckboxClick); conversation.insertAdjacentElement('afterbegin', checkbox); // 为对话标题添加点击事件 @@ -77,6 +114,8 @@ function addCheckboxes() { } } }); + + addShiftKeyEventListeners(); } // 执行主函数 diff --git a/globals.js b/globals.js index e8ad938..8b1740f 100644 --- a/globals.js +++ b/globals.js @@ -3,8 +3,6 @@ if (typeof window.globalsLoaded === 'undefined') { window.globalsLoaded = true; - let lastChecked = null; - let Selectors = { // Plus 用户的选择器 conversationsCheckbox: '.conversation-checkbox:checked', @@ -17,7 +15,7 @@ if (typeof window.globalsLoaded === 'undefined') { let CHECKBOX_CLASS = 'conversation-checkbox'; - window.lastChecked = lastChecked; + window.shiftPressed = false; window.Selectors = Selectors; window.CHECKBOX_CLASS = CHECKBOX_CLASS; } else { From b1bdaf0edc321750110f7d7345f547fd3d906fca Mon Sep 17 00:00:00 2001 From: qcrao Date: Sun, 21 Jul 2024 17:05:55 +0800 Subject: [PATCH 2/3] add tooltip --- popup.css | 84 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ popup.html | 13 +++++++-- 2 files changed, 94 insertions(+), 3 deletions(-) diff --git a/popup.css b/popup.css index 6400c94..3af7d5d 100644 --- a/popup.css +++ b/popup.css @@ -249,3 +249,87 @@ button#bulk-archive { #modalCancel:hover { background-color: #e2e6ea; } + +/* 调整 button-container 样式 */ +.button-container { + position: relative; + display: inline-block; + width: calc(50% - 5px); /* 调整宽度以适应两个按钮并留有间隙 */ +} + +/* 调整 tooltip-trigger 样式 */ +.tooltip-trigger { + position: absolute; + top: 5px; + right: 5px; + width: 16px; + height: 16px; + background-color: rgba(255, 255, 255, 0.2); + color: white; + border: 1px solid white; + border-radius: 50%; + font-size: 12px; + font-style: italic; + font-weight: bold; + display: flex; + align-items: center; + justify-content: center; + cursor: help; + transition: all 0.3s ease; + z-index: 2; +} + +/* 调整 tooltip-content 样式 */ +.tooltip-content { + visibility: hidden; + width: 220px; + background-color: #555; + color: #fff; + text-align: center; + border-radius: 6px; + padding: 5px; + position: absolute; + z-index: 3; + bottom: 125%; + right: -5px; /* 向右对齐 */ + opacity: 0; + transition: opacity 0.3s, visibility 0.3s; + pointer-events: none; /* 防止tooltip内容影响鼠标事件 */ +} + +.tooltip-content::after { + content: ""; + position: absolute; + top: 100%; + right: 10px; + margin-left: -5px; + border-width: 5px; + border-style: solid; + border-color: #555 transparent transparent transparent; +} + +.tooltip-trigger:hover .tooltip-content { + visibility: visible; + opacity: 1; +} + +/* 调整按钮样式以确保正确的大小和位置 */ +.buttons-row button, +.button-container button { + width: 100%; + height: 100%; +} + +/* 更新按钮悬停效果 */ +.button-container:hover button, +.button-container:hover .tooltip-trigger { + transform: translateY(-3px); +} + +/* 确保 buttons-row 正确显示两个按钮 */ +.buttons-row { + display: flex; + justify-content: space-between; + width: 100%; + gap: 10px; +} diff --git a/popup.html b/popup.html index 9b3f271..11825d0 100644 --- a/popup.html +++ b/popup.html @@ -12,9 +12,16 @@
- +
+ + + Hold Shift and click to select multiple conversations! + +
From ef916d4d194b0a2744378933cd782d80b82e076c Mon Sep 17 00:00:00 2001 From: qcrao Date: Sun, 21 Jul 2024 17:18:34 +0800 Subject: [PATCH 3/3] opt style --- popup.css | 57 ++++++++++++++++++++++++++++++++---------------------- popup.html | 5 +++-- 2 files changed, 37 insertions(+), 25 deletions(-) diff --git a/popup.css b/popup.css index 3af7d5d..593895e 100644 --- a/popup.css +++ b/popup.css @@ -264,11 +264,8 @@ button#bulk-archive { right: 5px; width: 16px; height: 16px; - background-color: rgba(255, 255, 255, 0.2); - color: white; - border: 1px solid white; - border-radius: 50%; - font-size: 12px; + color: rgba(255, 255, 255, 0.9); /* 近白色 */ + font-size: 14px; font-style: italic; font-weight: bold; display: flex; @@ -277,35 +274,41 @@ button#bulk-archive { cursor: help; transition: all 0.3s ease; z-index: 2; + text-shadow: 0 0 2px rgba(0, 0, 0, 0.5); /* 添加轻微阴影以增加可见度 */ } /* 调整 tooltip-content 样式 */ .tooltip-content { visibility: hidden; - width: 220px; - background-color: #555; + width: 130px; + background-color: #333; color: #fff; - text-align: center; + text-align: left; border-radius: 6px; - padding: 5px; + padding: 10px; position: absolute; z-index: 3; - bottom: 125%; - right: -5px; /* 向右对齐 */ + top: -5px; + left: calc(100% + 10px); opacity: 0; transition: opacity 0.3s, visibility 0.3s; - pointer-events: none; /* 防止tooltip内容影响鼠标事件 */ + pointer-events: none; + font-style: normal; + font-weight: normal; + font-size: 12px; + line-height: 1.4; + box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .tooltip-content::after { content: ""; position: absolute; - top: 100%; - right: 10px; - margin-left: -5px; + top: 10px; + right: 100%; + margin-top: -5px; border-width: 5px; border-style: solid; - border-color: #555 transparent transparent transparent; + border-color: transparent #333 transparent transparent; } .tooltip-trigger:hover .tooltip-content { @@ -313,11 +316,21 @@ button#bulk-archive { opacity: 1; } -/* 调整按钮样式以确保正确的大小和位置 */ +/* 确保按钮容器不会因为tooltip内容而变形 */ +.button-container { + position: relative; + display: inline-block; + width: calc(50% - 5px); + overflow: visible; +} + +/* 可能需要调整按钮样式以适应新的布局 */ .buttons-row button, .button-container button { width: 100%; height: 100%; + position: relative; + z-index: 1; } /* 更新按钮悬停效果 */ @@ -326,10 +339,8 @@ button#bulk-archive { transform: translateY(-3px); } -/* 确保 buttons-row 正确显示两个按钮 */ -.buttons-row { - display: flex; - justify-content: space-between; - width: 100%; - gap: 10px; +/* 添加悬停效果到 i 图标 */ +.tooltip-trigger:hover { + color: #fff; /* 完全白色 */ + text-shadow: 0 0 4px rgba(255, 255, 255, 0.5); /* 增强悬停时的光晕效果 */ } diff --git a/popup.html b/popup.html index 11825d0..1496a1f 100644 --- a/popup.html +++ b/popup.html @@ -16,9 +16,10 @@ - + i Hold Shift and click to select multiple conversations!Hold Shift to select
multiple conversations.