domi/forgejo-domi
1
0
Fork 0
forked from forgejo/forgejo
Code Pull requests Activity

Improve and fix bugs surrounding reactions (#24760)

Browse source 
- Slightly decrease size of reaction buttons
- Remove tooltip inside menu, it's obvious by the picture alone
- Fix top menu triangle
- Use `display: grid` to align icons in menu
- Use regular tooltip for reaction users
- Fix bug that deleted the reaction bar on clicking already reacted
reaction in dropdown

<img width="490" alt="Screenshot 2023-05-17 at 00 03 42"
src="61588b37-facb-4829-b75b-e1cb5dda8ca4">

<img width="67" alt="Screenshot 2023-05-17 at 00 11 14"
src="29605589-3b5f-40c6-8ad4-09923094bb8e">

<img width="211" alt="Screenshot 2023-05-17 at 00 29 30"
src="7d2725da-6a3d-4e42-a351-53647f79f762">
<img width="210" alt="Screenshot 2023-05-17 at 00 29 54"
src="b50f8364-033c-4445-ba25-61a814bb2d92">


<img width="892" alt="Screenshot 2023-05-17 at 00 12 20"
src="30a46424-406a-46e5-b4de-47172eb8679d">

---------

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
Co-authored-by: Giteabot <teabot@gitea.io>
This commit is contained in:
silverwind 2023-05-28 03:34:18 +02:00 • committed by GitHub
parent 2f149c5c9d
commit 595e8abd68
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
15 changed files with 117 additions and 113 deletions
Download patch file Download diff file Expand all files Collapse all files

19
web_src/css/base.css
View file

@ -165,8 +165,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;
@ -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-5);
--color-reaction-active-bg: var(--color-primary-light-6);
--color-tooltip-text: #ffffff;
--color-tooltip-bg: #000000f0;
--color-header-bar: #ffffff;
@ -894,6 +895,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);
@ -1059,10 +1065,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;
}

69
web_src/css/repo.css
View file

@ -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;
@ -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;
}
@ -2133,7 +2138,7 @@
.repository .select-reaction.dropdown .menu {
right: 0 !important;
left: auto !important;
min-width: 15em;
min-width: 170px;
}
.repository .segment.reactions.dropdown .menu > .header,
@ -2144,25 +2149,15 @@
.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;
margin: 4px;
font-size: 20px;
width: 34px;
height: 34px;
min-height: 0 !important;
border-radius: 6px;
display: flex;
justify-content: center;
display: flex !important;
align-items: 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,
.repository .select-reaction.dropdown .menu > .item:hover {
background: var(--color-primary);
justify-content: center;
}
.repository .segment.reactions {
@ -2173,35 +2168,41 @@
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 {
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);
}
.repository .segment.reactions .ui.label:first-of-type {
border-bottom-left-radius: 3px;
}
.repository .segment.reactions .ui.label.disabled {
cursor: default;
opacity: 1;
}
.repository .segment.reactions .ui.label.basic {
.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-dark-1) !important;
}
.repository .segment.reactions .ui.label.basic.primary {
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 {
@ -2211,6 +2212,9 @@
.repository .segment.reactions .select-reaction {
display: flex;
align-items: center;
}
.repository .segment.reactions .select-reaction a {
padding: 0 14px;
}
@ -2469,7 +2473,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;
@ -2516,14 +2520,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;
@ -2534,6 +2530,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;

7
web_src/css/themes/theme-arc-green.css
View file

@ -152,8 +152,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: #ffffff19;
--color-active: #ffffff24;
--color-menu: #2e323e;
--color-card: #2e323e;
--color-markup-table-row: #ffffff06;
@ -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;