ColdBreeze/ColdBreeze-chat-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: remove hover effects in mobile

Browse Source
This commit is contained in:
Tristan Yang
2023-02-20 12:54:45 +08:00
parent 567b3714bc
commit 053c7d9402
27 changed files with 46 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/common/component/Message/Commands.tsx
+6 -15
View File
@@ -82,16 +82,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
toast.error("Added Favorites Failed!");
}
};
// const StyledCmds = styled.ul`
// > .picker {
// position: absolute;
// left: -10px;
// top: 0;
// transform: translateX(-100%);
// }
// `;
const cmdClass = `flex cursor-pointer p-1 md:hover:bg-gray-100 md:dark:hover:bg-gray-800`;
return (
<>
<ul
@@ -105,27 +96,27 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
trigger="click"
content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
>
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
<li className={cmdClass}>
<Tooltip placement="top" tip={t("action.add_reaction")}>
<img src={reactIcon} className="toggler w-6 h-6" alt="icon emoji" />
</Tooltip>
</li>
</Tippy>
{canEdit && (
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={toggleEditMessage}>
<li className={cmdClass} onClick={toggleEditMessage}>
<Tooltip placement="top" tip={t("action.edit")}>
<img src={editIcon} className="w-6 h-6" alt="icon edit" />
</Tooltip>
</li>
)}
{canReply && (
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleReply}>
<li className={cmdClass} onClick={handleReply}>
<Tooltip placement="top" tip={t("action.reply")}>
<img src={replyIcon} className="w-6 h-6" alt="icon reply" />
</Tooltip>
</li>
)}
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800" onClick={handleAddFav}>
<li className={cmdClass} onClick={handleAddFav}>
<Tooltip placement="top" tip={t("action.add_to_fav")}>
<IconBookmark className="fill-slate-500 w-6 h-6" />
</Tooltip>
@@ -166,7 +157,7 @@ const Commands: FC<Props> = ({ context = "user", contextId = 0, mid = 0, toggleE
/>
}
>
<li className="flex cursor-pointer p-1 hover:bg-gray-100 dark:hover:bg-gray-800">
<li className="flex cursor-pointer p-1 md:hover:bg-gray-100 md:dark:hover:bg-gray-800">
<Tooltip placement="top" tip={t("more")}>
<img src={moreIcon} alt="icon more" />
</Tooltip>
src/common/component/Message/FavoredMessage.tsx
+1 -1
View File
@@ -22,7 +22,7 @@ const FavoredMessage: FC<Props> = ({ id = "" }) => {
{messages.map((msg, idx) => {
const { user = {}, download, content, content_type, properties, thumbnail } = msg;
return (
<div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800" key={idx}>
<div className="w-full relative flex items-start gap-3 px-2 py-1 my-2 rounded-lg md:dark:hover:bg-gray-800" key={idx}>
{user && (
<div className="shrink-0 w-10 h-10 flex">
<Avatar width={40} height={40} className="rounded-full object-cover" src={user.avatar} name={user.name} />
src/common/component/Message/Reaction.tsx
+2 -2
View File
@@ -65,7 +65,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
return uids.length > 0 ? (
<span
onClick={readOnly ? undefined : handleReact.bind(null, reaction)}
className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 hover:bg-cyan-100 ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-cyan-200" : ""}`}
className={`cursor-pointer rounded-md relative flex items-center gap-1 p-1 md:hover:bg-cyan-100 ${reacted ? "shadow-[inset_0_0_0_1px_#06aed4] bg-cyan-200" : ""}`}
key={reaction}
>
<Tippy
@@ -93,7 +93,7 @@ const Reaction: FC<Props> = ({ mid, reactions = null, readOnly = false }) => {
trigger="click"
content={<ReactionPicker mid={mid} hidePicker={hideAll} />}
>
<button className="invisible group-hover:visible w-6 h-6 bg-cyan-100 hover:bg-cyan-200 rounded-md flex-center">
<button className="invisible group-hover:visible w-6 h-6 bg-cyan-100 md:hover:bg-cyan-200 rounded-md flex-center">
<IconAddEmoji className={'w-4 h-4'} />
</button>
</Tippy>
src/common/component/Message/ReactionPicker.tsx
+1 -1
View File
@@ -28,7 +28,7 @@ const ReactionPicker: FC<Props> = ({ mid, hidePicker }) => {
reactionData[emoji] && reactionData[emoji].findIndex((id) => id == currUid) > -1;
return (
<li
className={`flex-center cursor-pointer rounded-lg p-4 hover:bg-gray-50 w-4 h-4 ${reacted ? "bg-gray-50" : ""}`}
className={`flex-center cursor-pointer rounded-lg p-4 md:hover:bg-gray-50 w-4 h-4 ${reacted ? "bg-gray-50" : ""}`}
key={emoji}
onClick={handleReact.bind(null, emoji)}
>
src/common/component/Message/index.tsx
+1 -1
View File
@@ -96,7 +96,7 @@ const Message: FC<IProps> = ({
onContextMenu={readOnly ? undefined : handleContextMenuEvent}
data-msg-mid={mid}
ref={inviewRef}
className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg dark:hover:bg-gray-800 hover:bg-gray-100`,
className={clsx(`group w-full relative flex items-start gap-2 md:gap-4 px-1 md:px-2 py-1 my-2 rounded-lg md:dark:hover:bg-gray-800 md:hover:bg-gray-100`,
readOnly && "hover:bg-transparent",
showExpire && "bg-red-200",
pinInfo && "bg-cyan-50 dark:bg-cyan-800 pt-7"