From 1d3b2a9a93187bca0c3bb759214a04cea84d032a Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 17 May 2023 00:02:38 +0200 Subject: [PATCH 01/28] Improve and fix bug surrounding reactions --- .../repo/issue/view_content/add_reaction.tmpl | 8 ++-- web_src/css/base.css | 7 +++- web_src/css/repo.css | 41 ++++++------------- web_src/js/features/comp/ReactionSelector.js | 10 ++++- 4 files changed, 31 insertions(+), 35 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 1a908f1aaa7f3..89c99b6279274 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -6,9 +6,11 @@
{{.ctxData.locale.Tr "repo.pick_reaction"}}
- {{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} - {{end}} +
+ {{range $value := AllowedReactions}} + {{ReactionToEmoji $value}} + {{end}} +
{{end}} diff --git a/web_src/css/base.css b/web_src/css/base.css index 04fc2a0f25a61..aec27c00353d2 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -1055,10 +1055,15 @@ a.label, } .ui.pointing.dropdown > .menu:not(.hidden)::after { - background: var(--color-box-body); + background: var(--color-menu); box-shadow: -1px -1px 0 0 var(--color-secondary); } +.ui.pointing.upward.dropdown .menu::after, +.ui.top.pointing.upward.dropdown .menu::after { + box-shadow: 1px 1px 0 0 var(--color-secondary); +} + .ui.comments .comment .text { margin: 0; } diff --git a/web_src/css/repo.css b/web_src/css/repo.css index dbf9bf79bd561..d89784c16b085 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1085,7 +1085,7 @@ .repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label { border: 1px solid; - padding: 6px 10px !important; + padding: 5px 8px !important; margin: 0 2px; border-radius: var(--border-radius); border-color: var(--color-secondary-dark-1) !important; @@ -2129,39 +2129,22 @@ background: var(--color-secondary); } -.repository .segment.reactions.dropdown .menu, -.repository .select-reaction.dropdown .menu { - right: 0 !important; - left: auto !important; - min-width: 15em; -} - -.repository .segment.reactions.dropdown .menu > .header, -.repository .select-reaction.dropdown .menu > .header { - margin: 0.75rem 0 0.5rem; +.reactions-grid { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 8px; + margin: 0 3px 3px; } -.repository .segment.reactions.dropdown .menu > .item, -.repository .select-reaction.dropdown .menu > .item { - float: left; - padding: 0.25rem !important; - margin: 0.25rem; - font-size: 1.5em; - width: 39px; - left: 13px; - border-radius: 6px; +.reactions-grid a { display: flex; justify-content: center; align-items: center; + padding: 8px; + border-radius: 6px !important; } -.repository .segment.reactions.dropdown .menu > .item img.emoji, -.repository .select-reaction.dropdown .menu > .item img.emoji { - margin-right: 0; -} - -.repository .segment.reactions.dropdown .menu > .item:hover, -.repository .select-reaction.dropdown .menu > .item:hover { +.reactions-grid a:hover { background: var(--color-primary); } @@ -2177,14 +2160,14 @@ .repository .segment.reactions .ui.label { max-height: 40px; - padding: 10px 18px !important; + padding: 8px 16px !important; display: flex !important; align-items: center; border: 0; border-right: 1px solid; border-radius: 0; margin: 0; - font-size: 14px; + font-size: 12px; font-weight: var(--font-weight-normal); border-color: var(--color-secondary) !important; background: var(--color-reaction-bg); diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 33ceb73c7cee7..3d89ec977747e 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -11,10 +11,15 @@ export function initCompReactionSelector(parent) { } for (const el of parent[0].querySelectorAll(selector)) { - createTippy(el, {placement: 'bottom-start', content: el.getAttribute('data-title')}); + createTippy(el, { + placement: 'bottom-start', + content: el.getAttribute('data-title'), + theme: 'tooltip', + hideOnClick: true, + }); } - parent.find(`.select-reaction > .menu > .item, ${selector}`).on('click', function (e) { + parent.find(`.select-reaction > .menu .item, ${selector}`).on('click', function (e) { e.preventDefault(); if ($(this).hasClass('disabled')) return; @@ -29,6 +34,7 @@ export function initCompReactionSelector(parent) { content: $(this).attr('data-reaction-content'), } }).done((resp) => { + e.target._tippy?.destroy(); if (resp && (resp.html || resp.empty)) { const content = $(this).closest('.content'); let react = content.find('.segment.reactions'); From 4f7695062181b8699747b4cf823e21a59bb2022d Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 17 May 2023 00:18:30 +0200 Subject: [PATCH 02/28] remove tooltip in popup, use hover color --- templates/repo/issue/view_content/add_reaction.tmpl | 2 +- web_src/css/repo.css | 2 +- web_src/js/features/comp/ReactionSelector.js | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 89c99b6279274..ab60a560575eb 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -8,7 +8,7 @@
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css index d89784c16b085..c1277ee544a49 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2145,7 +2145,7 @@ } .reactions-grid a:hover { - background: var(--color-primary); + background: var(--color-hover); } .repository .segment.reactions { diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 3d89ec977747e..507bd2755cb9e 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -34,7 +34,6 @@ export function initCompReactionSelector(parent) { content: $(this).attr('data-reaction-content'), } }).done((resp) => { - e.target._tippy?.destroy(); if (resp && (resp.html || resp.empty)) { const content = $(this).closest('.content'); let react = content.find('.segment.reactions'); From cb79e735b2176dde15ee979b3bc610ea1785cd23 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 17 May 2023 00:26:21 +0200 Subject: [PATCH 03/28] add active color and tweak hover and active colors --- web_src/css/base.css | 4 ++-- web_src/css/repo.css | 4 ++++ web_src/css/themes/theme-arc-green.css | 4 ++-- 3 files changed, 8 insertions(+), 4 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index aec27c00353d2..14a4ed6b26882 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -162,8 +162,8 @@ --color-light: #00000006; --color-light-mimic-enabled: rgba(0, 0, 0, calc(6 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #0000001d; - --color-hover: #0000000c; - --color-active: #00000014; + --color-hover: #00000014; + --color-active: #0000001e; --color-menu: #ffffff; --color-card: #ffffff; --color-markup-table-row: #00000008; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c1277ee544a49..0e4d39f5a5350 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2148,6 +2148,10 @@ background: var(--color-hover); } +.reactions-grid a:active { + background: var(--color-active); +} + .repository .segment.reactions { padding: 0; display: flex; diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index d5db18b55ae56..0807aa45c23b1 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -146,8 +146,8 @@ --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; - --color-hover: #ffffff10; - --color-active: #ffffff16; + --color-hover: #ffffff1c; + --color-active: #ffffff26; --color-menu: #2e323e; --color-card: #2e323e; --color-markup-table-row: #ffffff06; From 00ac3190e5193c1f081eb27f7826f6db785f2e11 Mon Sep 17 00:00:00 2001 From: silverwind Date: Wed, 17 May 2023 00:30:47 +0200 Subject: [PATCH 04/28] more color tweaks --- web_src/css/themes/theme-arc-green.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 0807aa45c23b1..6c9dd4ef98e2e 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -146,8 +146,8 @@ --color-light: #00000028; --color-light-mimic-enabled: rgba(0, 0, 0, calc(40 / 255 * 222 / 255 / var(--opacity-disabled))); --color-light-border: #ffffff28; - --color-hover: #ffffff1c; - --color-active: #ffffff26; + --color-hover: #ffffff19; + --color-active: #ffffff24; --color-menu: #2e323e; --color-card: #2e323e; --color-markup-table-row: #ffffff06; From 2167ac68727766c38e544c077750c41acb970fda Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 20 May 2023 01:48:09 +0200 Subject: [PATCH 05/28] fix reaction row deletion bug, convert to fetch --- .../repo/issue/view_content/add_reaction.tmpl | 4 +- .../repo/issue/view_content/reactions.tmpl | 3 +- web_src/css/repo.css | 4 ++ web_src/js/features/comp/ReactionSelector.js | 67 +++++++++++-------- 4 files changed, 48 insertions(+), 30 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index ab60a560575eb..299b80bb1fc86 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,10 +1,10 @@ {{if .ctxData.IsSigned}}
- + {{svg "octicon-smiley"}}
-
{{.ctxData.locale.Tr "repo.pick_reaction"}}
+
{{.ctxData.locale.Tr "repo.pick_reaction"}}
{{range $value := AllowedReactions}} diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl index 3c957d91c7318..ac423631a0a12 100644 --- a/templates/repo/issue/view_content/reactions.tmpl +++ b/templates/repo/issue/view_content/reactions.tmpl @@ -1,5 +1,6 @@ {{range $key, $value := .Reactions}} - + {{$hasReacted := $value.HasUser $.ctxData.SignedUserID}} + {{ReactionToEmoji $key}} {{len $value}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0e4d39f5a5350..fb6872cba896b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2129,6 +2129,10 @@ background: var(--color-secondary); } +.reaction-header { + background: none !important; +} + .reactions-grid { display: grid; grid-template-columns: repeat(4, 1fr); diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 507bd2755cb9e..1f59b1e1964f0 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -19,40 +19,53 @@ export function initCompReactionSelector(parent) { }); } - parent.find(`.select-reaction > .menu .item, ${selector}`).on('click', function (e) { + parent.find(`.select-reaction > .menu .item, ${selector}`).on('click', async function (e) { e.preventDefault(); if ($(this).hasClass('disabled')) return; - const actionURL = $(this).hasClass('item') ? $(this).closest('.select-reaction').data('action-url') : $(this).data('action-url'); - const url = `${actionURL}/${$(this).hasClass('primary') ? 'unreact' : 'react'}`; - $.ajax({ - type: 'POST', - url, - data: { + const reactionContent = $(this).attr('data-reaction-content'); + let actionUrl, hasReacted; + if ($(this).hasClass('item')) { // in dropdown menu + actionUrl = $(this).closest('.select-reaction').data('action-url'); + const parent = $(this).closest('.segment.reactions'); + const el = parent.find(`[data-reaction-content="${reactionContent}"]`); + hasReacted = el.attr('data-has-reacted') === 'true'; + } else { // not in menu + actionUrl = $(this).data('action-url'); + hasReacted = $(this).attr('data-has-reacted') === 'true'; + } + + const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { + method: 'POST', + headers: { + 'content-type': 'application/x-www-form-urlencoded', + }, + body: new URLSearchParams({ _csrf: csrfToken, - content: $(this).attr('data-reaction-content'), + content: reactionContent, + }), + }); + + const data = await res.json(); + if (data && (data.html || data.empty)) { + const content = $(this).closest('.content'); + let react = content.find('.segment.reactions'); + if ((!data.empty || data.html === '') && react.length > 0) { + react.remove(); } - }).done((resp) => { - if (resp && (resp.html || resp.empty)) { - const content = $(this).closest('.content'); - let react = content.find('.segment.reactions'); - if ((!resp.empty || resp.html === '') && react.length > 0) { - react.remove(); - } - if (!resp.empty) { - react = $('
'); - const attachments = content.find('.segment.bottom:first'); - if (attachments.length > 0) { - react.insertBefore(attachments); - } else { - react.appendTo(content); - } - react.html(resp.html); - react.find('.dropdown').dropdown(); - initCompReactionSelector(react); + if (!data.empty) { + react = $('
'); + const attachments = content.find('.segment.bottom:first'); + if (attachments.length > 0) { + react.insertBefore(attachments); + } else { + react.appendTo(content); } + react.html(data.html); + react.find('.dropdown').dropdown(); + initCompReactionSelector(react); } - }); + } }); } From 202cf694c9bbf30d8b7ffdb596765536559d968b Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 20 May 2023 02:20:31 +0200 Subject: [PATCH 06/28] remove wrapper and restore old shitty css --- .../repo/issue/view_content/add_reaction.tmpl | 8 ++-- .../repo/issue/view_content/reactions.tmpl | 2 +- web_src/css/repo.css | 46 +++++++++++++------ web_src/js/features/comp/ReactionSelector.js | 2 +- 4 files changed, 37 insertions(+), 21 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 299b80bb1fc86..2a3199794c744 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -6,11 +6,9 @@
{{.ctxData.locale.Tr "repo.pick_reaction"}}
-
- {{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} - {{end}} -
+ {{range $value := AllowedReactions}} + {{ReactionToEmoji $value}} + {{end}}
{{end}} diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl index ac423631a0a12..b13682a39b154 100644 --- a/templates/repo/issue/view_content/reactions.tmpl +++ b/templates/repo/issue/view_content/reactions.tmpl @@ -1,6 +1,6 @@ {{range $key, $value := .Reactions}} {{$hasReacted := $value.HasUser $.ctxData.SignedUserID}} - + {{ReactionToEmoji $key}} {{len $value}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index fb6872cba896b..38b336ea0cbdf 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2133,27 +2133,45 @@ background: none !important; } -.reactions-grid { - display: grid; - grid-template-columns: repeat(4, 1fr); - gap: 8px; - margin: 0 3px 3px; +.repository .segment.reactions.dropdown .menu, +.repository .select-reaction.dropdown .menu { + right: 0 !important; + left: auto !important; + min-width: 15em; } -.reactions-grid a { - display: flex; - justify-content: center; +.repository .segment.reactions.dropdown .menu > .header, +.repository .select-reaction.dropdown .menu > .header { + margin: 0.75rem 0 0.5rem; +} + +.repository .segment.reactions.dropdown .menu > .item, +.repository .select-reaction.dropdown .menu > .item { + float: left; + margin: 4px; + font-size: 20px; + width: 32px; + height: 32px; + min-height: 0 !important; + left: 3px; + top: -2px; + border-radius: 6px; + display: flex !important; align-items: center; - padding: 8px; - border-radius: 6px !important; + justify-content: center; +} + +.repository .segment.reactions.dropdown .menu > .item img.emoji, +.repository .select-reaction.dropdown .menu > .item img.emoji { + margin-right: 0; } -.reactions-grid a:hover { - background: var(--color-hover); +.repository .segment.reactions.dropdown .menu > .item:hover { + background: var(--color-hover) !important; } -.reactions-grid a:active { - background: var(--color-active); +.repository .segment.reactions.dropdown .menu > .item:active { + background: var(--color-active) !important; } .repository .segment.reactions { diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 1f59b1e1964f0..0797cbda2f4b4 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -31,7 +31,7 @@ export function initCompReactionSelector(parent) { const parent = $(this).closest('.segment.reactions'); const el = parent.find(`[data-reaction-content="${reactionContent}"]`); hasReacted = el.attr('data-has-reacted') === 'true'; - } else { // not in menu + } else { // outside of dropdown menu actionUrl = $(this).data('action-url'); hasReacted = $(this).attr('data-has-reacted') === 'true'; } From f52ac71024395ac3e932a3f6ba7891d7b9e02cf2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 20 May 2023 02:25:46 +0200 Subject: [PATCH 07/28] css tweak --- web_src/css/base.css | 5 +++++ web_src/css/repo.css | 13 ------------- 2 files changed, 5 insertions(+), 13 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 14a4ed6b26882..46ea5db0a241a 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -890,6 +890,11 @@ a.label, background: var(--color-hover); } +.ui.dropdown .menu > .item:active { + color: var(--color-text); + background: var(--color-active); +} + .ui.dropdown .menu .active.item { color: var(--color-text); background: var(--color-active); diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 38b336ea0cbdf..a2f6a1eb68694 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2161,19 +2161,6 @@ justify-content: center; } -.repository .segment.reactions.dropdown .menu > .item img.emoji, -.repository .select-reaction.dropdown .menu > .item img.emoji { - margin-right: 0; -} - -.repository .segment.reactions.dropdown .menu > .item:hover { - background: var(--color-hover) !important; -} - -.repository .segment.reactions.dropdown .menu > .item:active { - background: var(--color-active) !important; -} - .repository .segment.reactions { padding: 0; display: flex; From 15b9cb9968a5f448d215a201b70b7b0acf099ed9 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 20 May 2023 02:28:29 +0200 Subject: [PATCH 08/28] tweak size --- web_src/css/repo.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index a2f6a1eb68694..a8b8ab8868612 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2149,11 +2149,11 @@ .repository .select-reaction.dropdown .menu > .item { float: left; margin: 4px; - font-size: 20px; - width: 32px; - height: 32px; + font-size: 19px; + width: 30px; + height: 30px; min-height: 0 !important; - left: 3px; + left: 5px; top: -2px; border-radius: 6px; display: flex !important; From 145a5618fc02833f0c9cabf917f179584318a14e Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 20 May 2023 02:32:37 +0200 Subject: [PATCH 09/28] fix selector, add comment --- web_src/css/repo.css | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index a8b8ab8868612..236da3df8852d 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2129,8 +2129,8 @@ background: var(--color-secondary); } -.reaction-header { - background: none !important; +.reactions-header { + background: none !important; /* conflict from .repository .diff-file-box .header */ } .repository .segment.reactions.dropdown .menu, From 33361de58927f9643e89d788b43f952b918fd094 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 20 May 2023 02:33:04 +0200 Subject: [PATCH 10/28] expand comment --- web_src/css/repo.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 236da3df8852d..c0f317b84cf46 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2130,7 +2130,7 @@ } .reactions-header { - background: none !important; /* conflict from .repository .diff-file-box .header */ + background: none !important; /* conflict from .repository .diff-file-box .header in files tab emoji dropdown */ } .repository .segment.reactions.dropdown .menu, From 81047dc52d1aa06c4a1a01ca381f2a8a3dfde812 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 22 May 2023 00:59:37 +0200 Subject: [PATCH 11/28] fix dropdown width, add back title --- templates/repo/issue/view_content/add_reaction.tmpl | 2 +- web_src/css/repo.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 2a3199794c744..340eb37f0d5c1 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -7,7 +7,7 @@
{{.ctxData.locale.Tr "repo.pick_reaction"}}
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css index c0f317b84cf46..2d9a302327576 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2137,7 +2137,7 @@ .repository .select-reaction.dropdown .menu { right: 0 !important; left: auto !important; - min-width: 15em; + min-width: 170px; } .repository .segment.reactions.dropdown .menu > .header, From e51920f7378e6b15691c098c203656cb516626e5 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 22 May 2023 01:00:47 +0200 Subject: [PATCH 12/28] add aria-label --- templates/repo/issue/view_content/add_reaction.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 340eb37f0d5c1..6d668207bcc73 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -7,7 +7,7 @@
{{.ctxData.locale.Tr "repo.pick_reaction"}}
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}} From 5fe0a591cbf4b8b8c04ac58377ff7da934ea2125 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 22 May 2023 19:38:04 +0200 Subject: [PATCH 13/28] use muted links for emoji dropdown --- templates/repo/issue/view_content/add_reaction.tmpl | 2 +- templates/repo/issue/view_content/context_menu.tmpl | 2 +- web_src/css/repo.css | 11 +++-------- 3 files changed, 5 insertions(+), 10 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 6d668207bcc73..ec7149b8502e0 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -1,6 +1,6 @@ {{if .ctxData.IsSigned}}
- + {{svg "octicon-smiley"}}
diff --git a/templates/repo/issue/view_content/context_menu.tmpl b/templates/repo/issue/view_content/context_menu.tmpl index aa9d52b67af77..296668c9e04bb 100644 --- a/templates/repo/issue/view_content/context_menu.tmpl +++ b/templates/repo/issue/view_content/context_menu.tmpl @@ -1,6 +1,6 @@ {{if .ctxData.IsSigned}}
- + {{svg "octicon-kebab-horizontal"}}
diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 2d9a302327576..026c493ebc18e 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2207,6 +2207,9 @@ .repository .segment.reactions .select-reaction { display: flex; align-items: center; +} + +.repository .segment.reactions .select-reaction a { padding: 0 14px; } @@ -2512,14 +2515,6 @@ left: 7px; } -.comment-header a { - color: var(--color-text); -} - -.comment-header a:hover { - color: var(--color-primary); -} - .comment-header .actions a { margin-right: 0 !important; padding: 0.5rem !important; From d7af8e064a9a239bf51506b17f73a15584cee6e6 Mon Sep 17 00:00:00 2001 From: silverwind Date: Mon, 22 May 2023 19:42:59 +0200 Subject: [PATCH 14/28] unify comment header muting --- templates/repo/diff/comments.tmpl | 4 ++-- templates/repo/issue/view_content.tmpl | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index 50f0c903aefe9..9e21873293449 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -15,7 +15,7 @@ {{svg (MigrationIcon $.root.Repository.GetOriginalURLHostname)}} {{.OriginalAuthor}} - + {{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}} @@ -24,7 +24,7 @@ {{end}} {{else}} - + {{template "shared/user/namelink" .Poster}} {{$.root.locale.Tr "repo.issues.commented_at" (.HashTag|Escape) $createdStr | Safe}} diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index 3c60eca671dc9..eca1844bb3c52 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -27,7 +27,7 @@ {{svg (MigrationIcon .Repository.GetOriginalURLHostname)}} {{.Issue.OriginalAuthor}} - + {{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}} @@ -37,7 +37,7 @@ {{avatar $.Context .Issue.Poster 24}} - + {{template "shared/user/authorlink" .Issue.Poster}} {{.locale.Tr "repo.issues.commented_at" (.Issue.HashTag|Escape) $createdStr | Safe}} From 1773a6a3526db91506ff172ef73802004e673420 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 23 May 2023 12:01:46 +0800 Subject: [PATCH 15/28] refactor & simplify --- templates/repo/diff/comments.tmpl | 2 -- templates/repo/issue/view_content.tmpl | 4 +-- .../repo/issue/view_content/add_reaction.tmpl | 1 + .../repo/issue/view_content/comments.tmpl | 12 ++----- .../repo/issue/view_content/reactions.tmpl | 7 +++- web_src/js/features/comp/ReactionSelector.js | 34 ++++--------------- web_src/js/features/repo-legacy.js | 2 +- 7 files changed, 18 insertions(+), 44 deletions(-) diff --git a/templates/repo/diff/comments.tmpl b/templates/repo/diff/comments.tmpl index 9e21873293449..5b0b32cc97c58 100644 --- a/templates/repo/diff/comments.tmpl +++ b/templates/repo/diff/comments.tmpl @@ -59,9 +59,7 @@
{{$reactions := .Reactions.GroupByType}} {{if $reactions}} -
{{template "repo/issue/view_content/reactions" dict "ctxData" $.root "ActionURL" (printf "%s/comments/%d/reactions" $.root.RepoLink .ID) "Reactions" $reactions}} -
{{end}}
diff --git a/templates/repo/issue/view_content.tmpl b/templates/repo/issue/view_content.tmpl index eca1844bb3c52..77087e0a8f0ca 100644 --- a/templates/repo/issue/view_content.tmpl +++ b/templates/repo/issue/view_content.tmpl @@ -78,9 +78,7 @@
{{$reactions := .Issue.Reactions.GroupByType}} {{if $reactions}} -
- {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}} -
+ {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/issues/%d/reactions" $.RepoLink .Issue.Index) "Reactions" $reactions}} {{end}} diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index ec7149b8502e0..65e23dd575721 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -7,6 +7,7 @@
{{.ctxData.locale.Tr "repo.pick_reaction"}}
{{range $value := AllowedReactions}} + {{/* the popup menu is only used for "adding reaction", so do not put data-has-reacted on it */}} {{ReactionToEmoji $value}} {{end}} diff --git a/templates/repo/issue/view_content/comments.tmpl b/templates/repo/issue/view_content/comments.tmpl index b65ebc68a24f5..23459c304cbf1 100644 --- a/templates/repo/issue/view_content/comments.tmpl +++ b/templates/repo/issue/view_content/comments.tmpl @@ -87,9 +87,7 @@ {{$reactions := .Reactions.GroupByType}} {{if $reactions}} -
- {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}} -
+ {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}} {{end}} @@ -471,9 +469,7 @@ {{$reactions := .Reactions.GroupByType}} {{if $reactions}} -
- {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}} -
+ {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}} {{end}} @@ -595,9 +591,7 @@ {{$reactions := .Reactions.GroupByType}} {{if $reactions}} -
- {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}} -
+ {{template "repo/issue/view_content/reactions" dict "ctxData" $ "ActionURL" (printf "%s/comments/%d/reactions" $.RepoLink .ID) "Reactions" $reactions}} {{end}} diff --git a/templates/repo/issue/view_content/reactions.tmpl b/templates/repo/issue/view_content/reactions.tmpl index b13682a39b154..02202783da363 100644 --- a/templates/repo/issue/view_content/reactions.tmpl +++ b/templates/repo/issue/view_content/reactions.tmpl @@ -1,6 +1,10 @@ +
{{range $key, $value := .Reactions}} {{$hasReacted := $value.HasUser $.ctxData.SignedUserID}} - + {{ReactionToEmoji $key}} {{len $value}} @@ -8,3 +12,4 @@ {{if AllowedReactions}} {{template "repo/issue/view_content/add_reaction" dict "ctxData" $.ctxData "ActionURL" .ActionURL}} {{end}} +
diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 0797cbda2f4b4..8eb52463953d2 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -1,40 +1,18 @@ import $ from 'jquery'; -import {createTippy} from '../../modules/tippy.js'; const {csrfToken} = window.config; -export function initCompReactionSelector(parent) { - let selector = 'a.label'; - if (!parent) { - parent = $(document); - selector = `.reactions ${selector}`; - } - - for (const el of parent[0].querySelectorAll(selector)) { - createTippy(el, { - placement: 'bottom-start', - content: el.getAttribute('data-title'), - theme: 'tooltip', - hideOnClick: true, - }); - } - - parent.find(`.select-reaction > .menu .item, ${selector}`).on('click', async function (e) { +export function initCompReactionSelector($parent) { + $parent.find(`.select-reaction .item.reaction, .comment-reaction-button`).on('click', async function (e) { e.preventDefault(); if ($(this).hasClass('disabled')) return; + this._tippy?.hide(); + + const actionUrl = $(this).closest('[data-action-url]').attr('data-action-url'); const reactionContent = $(this).attr('data-reaction-content'); - let actionUrl, hasReacted; - if ($(this).hasClass('item')) { // in dropdown menu - actionUrl = $(this).closest('.select-reaction').data('action-url'); - const parent = $(this).closest('.segment.reactions'); - const el = parent.find(`[data-reaction-content="${reactionContent}"]`); - hasReacted = el.attr('data-has-reacted') === 'true'; - } else { // outside of dropdown menu - actionUrl = $(this).data('action-url'); - hasReacted = $(this).attr('data-has-reacted') === 'true'; - } + const hasReacted = $(this).attr('data-has-reacted') === 'true'; const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { method: 'POST', diff --git a/web_src/js/features/repo-legacy.js b/web_src/js/features/repo-legacy.js index 2804844d81f2d..f23ff45470c10 100644 --- a/web_src/js/features/repo-legacy.js +++ b/web_src/js/features/repo-legacy.js @@ -544,7 +544,7 @@ export function initRepository() { initRepoIssueDependencyDelete(); initRepoIssueCodeCommentCancel(); initRepoPullRequestUpdate(); - initCompReactionSelector(); + initCompReactionSelector($(document)); initRepoPullRequestMergeForm(); } From 68fe6a840fbd587dd52e6f97b7407ab7dc2c1c07 Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Tue, 23 May 2023 20:17:58 +0800 Subject: [PATCH 16/28] make hideOnClick=true for tooltip --- web_src/js/features/common-global.js | 10 ---------- web_src/js/features/comp/ReactionSelector.js | 2 -- web_src/js/features/repo-code.js | 4 +--- web_src/js/modules/tippy.js | 1 + 4 files changed, 2 insertions(+), 15 deletions(-) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 776e63a83de8c..8772bedf825b6 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -98,16 +98,6 @@ export function initGlobalCommon() { }, onHide() { this._tippy?.enable(); - - // hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu - setTimeout(() => { - const $dropdown = $(this); - if ($dropdown.dropdown('is hidden')) { - $(this).find('.menu > .item').each((_, item) => { - item._tippy?.hide(); - }); - } - }, 2000); }, }); diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 8eb52463953d2..36c565eb848dc 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -8,8 +8,6 @@ export function initCompReactionSelector($parent) { if ($(this).hasClass('disabled')) return; - this._tippy?.hide(); - const actionUrl = $(this).closest('[data-action-url]').attr('data-action-url'); const reactionContent = $(this).attr('data-reaction-content'); const hasReacted = $(this).attr('data-has-reacted') === 'true'; diff --git a/web_src/js/features/repo-code.js b/web_src/js/features/repo-code.js index 73eccaf193e39..26d8e2247214d 100644 --- a/web_src/js/features/repo-code.js +++ b/web_src/js/features/repo-code.js @@ -190,8 +190,6 @@ export function initRepoCodeView() { currentTarget.closest('tr').outerHTML = blob; }); $(document).on('click', '.copy-line-permalink', async (e) => { - const success = await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url'))); - if (!success) return; - document.querySelector('.code-line-button')?._tippy?.hide(); + await clippie(toAbsoluteUrl(e.currentTarget.getAttribute('data-url'))); }); } diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index df2143b0ef184..511f8dd0e1cf4 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -62,6 +62,7 @@ function attachTooltip(target, content = null) { content, delay: 100, role: 'tooltip', + hideOnClick: true, placement: target.getAttribute('data-tooltip-placement') || 'top-start', ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), }; From 6009b63355b8329cd935744f3765f8fc45c657c1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 11:26:24 +0200 Subject: [PATCH 17/28] disable hideOnClick when element has data-clipboard-target --- web_src/js/modules/tippy.js | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 511f8dd0e1cf4..6c9e69ad337c6 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -58,11 +58,17 @@ function attachTooltip(target, content = null) { content = content ?? target.getAttribute('data-tooltip-content'); if (!content) return null; + // when element has a clipboard target, we update the tooltip after copy + // in which case it is undesireable to automatically hide it on click as + // it would momentarily flash the tooltip out and in. + const hasClipboardTarget = target.hasAttribute('data-clipboard-target'); + const hideOnClick = hasClipboardTarget ? false : true; + const props = { content, delay: 100, role: 'tooltip', - hideOnClick: true, + hideOnClick, placement: target.getAttribute('data-tooltip-placement') || 'top-start', ...(target.getAttribute('data-tooltip-interactive') === 'true' ? {interactive: true, aria: {content: 'describedby', expanded: false}} : {}), }; From 4cea5c224303d768a82f0ceebd454e62e2ffce4a Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 11:28:01 +0200 Subject: [PATCH 18/28] simplify --- web_src/js/modules/tippy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index 6c9e69ad337c6..c8e255f504e8c 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -62,7 +62,7 @@ function attachTooltip(target, content = null) { // in which case it is undesireable to automatically hide it on click as // it would momentarily flash the tooltip out and in. const hasClipboardTarget = target.hasAttribute('data-clipboard-target'); - const hideOnClick = hasClipboardTarget ? false : true; + const hideOnClick = !hasClipboardTarget; const props = { content, From d9239499c171e0a720ebb64fb0617a537dd5b2ee Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 11:35:09 +0200 Subject: [PATCH 19/28] fix border radiuses --- web_src/css/repo.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 19f0493cb6f97..1cdb1aed2c64b 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2169,6 +2169,7 @@ width: 100% !important; max-width: 100% !important; margin: 0 !important; + border-radius: 0 0 var(--border-radius) var(--border-radius); } .repository .segment.reactions .ui.label { @@ -2186,6 +2187,10 @@ background: var(--color-reaction-bg); } +.repository .segment.reactions .ui.label:first-of-type { + border-bottom-left-radius: 3px; +} + .repository .segment.reactions .ui.label.disabled { cursor: default; opacity: 1; From 520892b5fb4b04055ce4b10dcd42014c94b152f1 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 11:48:11 +0200 Subject: [PATCH 20/28] fix double segment.reaction --- web_src/js/features/comp/ReactionSelector.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 36c565eb848dc..313f32ae2537e 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -31,14 +31,13 @@ export function initCompReactionSelector($parent) { react.remove(); } if (!data.empty) { - react = $('
'); const attachments = content.find('.segment.bottom:first'); + react = $(data.html); if (attachments.length > 0) { react.insertBefore(attachments); } else { react.appendTo(content); } - react.html(data.html); react.find('.dropdown').dropdown(); initCompReactionSelector(react); } From 591ffb0a37b06546dcdd1b385ea5769b0ff73fe4 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 11:56:28 +0200 Subject: [PATCH 21/28] fix unreact from dropdown menu --- templates/repo/issue/view_content/add_reaction.tmpl | 1 - web_src/js/features/comp/ReactionSelector.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 65e23dd575721..ec7149b8502e0 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -7,7 +7,6 @@
{{.ctxData.locale.Tr "repo.pick_reaction"}}
{{range $value := AllowedReactions}} - {{/* the popup menu is only used for "adding reaction", so do not put data-has-reacted on it */}} {{ReactionToEmoji $value}} {{end}} diff --git a/web_src/js/features/comp/ReactionSelector.js b/web_src/js/features/comp/ReactionSelector.js index 313f32ae2537e..336634a582fe2 100644 --- a/web_src/js/features/comp/ReactionSelector.js +++ b/web_src/js/features/comp/ReactionSelector.js @@ -10,7 +10,7 @@ export function initCompReactionSelector($parent) { const actionUrl = $(this).closest('[data-action-url]').attr('data-action-url'); const reactionContent = $(this).attr('data-reaction-content'); - const hasReacted = $(this).attr('data-has-reacted') === 'true'; + const hasReacted = $(this).closest('.ui.segment.reactions').find(`a[data-reaction-content="${reactionContent}"]`).attr('data-has-reacted') === 'true'; const res = await fetch(`${actionUrl}/${hasReacted ? 'unreact' : 'react'}`, { method: 'POST', From a998593b7afbd67ed1c60438368f6bc5f27c299c Mon Sep 17 00:00:00 2001 From: wxiaoguang Date: Sat, 27 May 2023 18:47:06 +0800 Subject: [PATCH 22/28] revert "hide tooltip after menu gets hidden" --- web_src/js/features/common-global.js | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/web_src/js/features/common-global.js b/web_src/js/features/common-global.js index 8772bedf825b6..776e63a83de8c 100644 --- a/web_src/js/features/common-global.js +++ b/web_src/js/features/common-global.js @@ -98,6 +98,16 @@ export function initGlobalCommon() { }, onHide() { this._tippy?.enable(); + + // hide all tippy elements of items after a while. eg: use Enter to click "Copy Link" in the Issue Context Menu + setTimeout(() => { + const $dropdown = $(this); + if ($dropdown.dropdown('is hidden')) { + $(this).find('.menu > .item').each((_, item) => { + item._tippy?.hide(); + }); + } + }, 2000); }, }); From 78094fbac021c0208bf9d6c01dae0876a995c1b2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 19:30:00 +0200 Subject: [PATCH 23/28] remove header --- options/locale/locale_en-US.ini | 1 - templates/repo/issue/view_content/add_reaction.tmpl | 4 +--- web_src/css/repo.css | 12 +++--------- 3 files changed, 4 insertions(+), 13 deletions(-) diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini index 1026a13e3338a..16dbb0948d47d 100644 --- a/options/locale/locale_en-US.ini +++ b/options/locale/locale_en-US.ini @@ -965,7 +965,6 @@ mirror_password_help = Change the username to erase a stored password. watchers = Watchers stargazers = Stargazers forks = Forks -pick_reaction = Pick your reaction reactions_more = and %d more unit_disabled = The site administrator has disabled this repository section. language_other = Other diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index ec7149b8502e0..961edf6b07e19 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -3,9 +3,7 @@ {{svg "octicon-smiley"}} -
-
{{.ctxData.locale.Tr "repo.pick_reaction"}}
-
+
{{range $value := AllowedReactions}} {{ReactionToEmoji $value}} {{end}} diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 1cdb1aed2c64b..95e511d089d70 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2129,10 +2129,6 @@ background: var(--color-secondary); } -.reactions-header { - background: none !important; /* conflict from .repository .diff-file-box .header in files tab emoji dropdown */ -} - .repository .segment.reactions.dropdown .menu, .repository .select-reaction.dropdown .menu { right: 0 !important; @@ -2149,12 +2145,10 @@ .repository .select-reaction.dropdown .menu > .item { float: left; margin: 4px; - font-size: 19px; - width: 30px; - height: 30px; + font-size: 20px; + width: 34px; + height: 34px; min-height: 0 !important; - left: 5px; - top: -2px; border-radius: 6px; display: flex !important; align-items: center; From cb832360a655b20e06d98439123c668819fa5e35 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 19:35:18 +0200 Subject: [PATCH 24/28] tweaks to edited menu --- web_src/css/repo.css | 7 ++++++- web_src/js/features/repo-issue-content.js | 2 +- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 95e511d089d70..0d69efa5b7d16 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2467,7 +2467,7 @@ padding: 0.5rem 1rem; margin: 0 !important; position: relative; - color: var(--color-text-light-2); + color: var(--color-text); min-height: 41px; background-color: var(--color-box-header); display: flex; @@ -2524,6 +2524,11 @@ margin-left: 0.25rem; } +.content-history-menu .octicon-triangle-down { + position: relative; + top: 1.5px; +} + .comment-body { background: var(--color-box-body); border: none !important; diff --git a/web_src/js/features/repo-issue-content.js b/web_src/js/features/repo-issue-content.js index 87295573e8f80..792a11c5ab65c 100644 --- a/web_src/js/features/repo-issue-content.js +++ b/web_src/js/features/repo-issue-content.js @@ -76,7 +76,7 @@ function showContentHistoryMenu(issueBaseUrl, $item, commentId) { const $headerLeft = $item.find('.comment-header-left'); const menuHtml = `
- • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')} + • ${i18nTextEdited}${svg('octicon-triangle-down', 14, 'dropdown icon gt-ml-1 gt-mt-1')}
`; From d4ccf6e42598fd9e0a0a752720bc49f720d6480d Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 19:37:26 +0200 Subject: [PATCH 25/28] restore data-tooltip-content --- templates/repo/issue/view_content/add_reaction.tmpl | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/templates/repo/issue/view_content/add_reaction.tmpl b/templates/repo/issue/view_content/add_reaction.tmpl index 961edf6b07e19..37931f287e3db 100644 --- a/templates/repo/issue/view_content/add_reaction.tmpl +++ b/templates/repo/issue/view_content/add_reaction.tmpl @@ -5,7 +5,7 @@
{{range $value := AllowedReactions}} - {{ReactionToEmoji $value}} + {{ReactionToEmoji $value}} {{end}}
From 26ec23af9f0ba8db9ba2f69c9338a630c29d26f2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 19:57:10 +0200 Subject: [PATCH 26/28] reaction color tweaks --- web_src/css/base.css | 3 ++- web_src/css/repo.css | 14 ++++++++++---- web_src/css/themes/theme-arc-green.css | 3 ++- 3 files changed, 14 insertions(+), 6 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 9d88082fb1a9c..8d26463c10621 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -184,7 +184,8 @@ --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text-dark); --color-reaction-bg: #0000000a; - --color-reaction-active-bg: var(--color-primary-alpha-20); + --color-reaction-hover-bg: var(--color-primary-light-6); + --color-reaction-active-bg: var(--color-primary-light-7); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; --color-header-bar: #ffffff; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 0d69efa5b7d16..6a0ea0f1b54b0 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -1096,6 +1096,11 @@ border-color: var(--color-primary-alpha-80) !important; } +.repository.view.issue .comment-list .comment-code-cloud .segment.reactions .ui.label.basic.primary:hover { + background-color: var(--color-reaction-hover-bg) !important; + border-color: var(--color-primary-alpha-80) !important; +} + .repository.view.issue .comment-list .comment-code-cloud button.comment-form-reply { margin: 0; } @@ -2190,15 +2195,16 @@ opacity: 1; } -.repository .segment.reactions .ui.label.basic { - color: var(--color-primary) !important; -} - .repository .segment.reactions .ui.label.basic.primary { + color: var(--color-primary) !important; background-color: var(--color-reaction-active-bg) !important; border-color: var(--color-secondary) !important; } +.repository .segment.reactions .ui.label.basic:hover { + background-color: var(--color-reaction-hover-bg) !important; +} + .repository .segment.reactions .reaction-count { margin-left: 0.5rem; } diff --git a/web_src/css/themes/theme-arc-green.css b/web_src/css/themes/theme-arc-green.css index 6632d63115884..88dbe10d97817 100644 --- a/web_src/css/themes/theme-arc-green.css +++ b/web_src/css/themes/theme-arc-green.css @@ -170,7 +170,8 @@ --color-project-board-bg: var(--color-secondary-light-2); --color-caret: var(--color-text); /* should ideally be --color-text-dark, see #15651 */ --color-reaction-bg: #ffffff12; - --color-reaction-active-bg: var(--color-primary-alpha-40); + --color-reaction-hover-bg: var(--color-primary-light-4); + --color-reaction-active-bg: var(--color-primary-light-5); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; --color-header-bar: #2e323e; From aaa56363ab7f6bd4a3f5e7fcbd3b3d29e1363138 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sat, 27 May 2023 20:02:50 +0200 Subject: [PATCH 27/28] border tweak --- web_src/css/base.css | 4 ++-- web_src/css/repo.css | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 8d26463c10621..21de3c82685e4 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -184,8 +184,8 @@ --color-project-board-light-label: #a6aab5; --color-caret: var(--color-text-dark); --color-reaction-bg: #0000000a; - --color-reaction-hover-bg: var(--color-primary-light-6); - --color-reaction-active-bg: var(--color-primary-light-7); + --color-reaction-hover-bg: var(--color-primary-light-5); + --color-reaction-active-bg: var(--color-primary-light-6); --color-tooltip-text: #ffffff; --color-tooltip-bg: #000000f0; --color-header-bar: #ffffff; diff --git a/web_src/css/repo.css b/web_src/css/repo.css index 6a0ea0f1b54b0..daca98bb5182f 100644 --- a/web_src/css/repo.css +++ b/web_src/css/repo.css @@ -2198,7 +2198,7 @@ .repository .segment.reactions .ui.label.basic.primary { color: var(--color-primary) !important; background-color: var(--color-reaction-active-bg) !important; - border-color: var(--color-secondary) !important; + border-color: var(--color-secondary-dark-1) !important; } .repository .segment.reactions .ui.label.basic:hover { From 8a91a4cfe6a1942202011c72ccc05d8cc024c308 Mon Sep 17 00:00:00 2001 From: silverwind Date: Sun, 28 May 2023 00:16:18 +0200 Subject: [PATCH 28/28] Fix misspell --- web_src/js/modules/tippy.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web_src/js/modules/tippy.js b/web_src/js/modules/tippy.js index c8e255f504e8c..d9f496fb8581c 100644 --- a/web_src/js/modules/tippy.js +++ b/web_src/js/modules/tippy.js @@ -59,7 +59,7 @@ function attachTooltip(target, content = null) { if (!content) return null; // when element has a clipboard target, we update the tooltip after copy - // in which case it is undesireable to automatically hide it on click as + // in which case it is undesirable to automatically hide it on click as // it would momentarily flash the tooltip out and in. const hasClipboardTarget = target.hasAttribute('data-clipboard-target'); const hideOnClick = !hasClipboardTarget;