Upstream/waveterm
1
0
Fork 0
mirror of https://github.com/wavetermdev/waveterm.git synced 2025-01-31 23:11:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

make it scrollable

Browse Source
This commit is contained in:
Red Adaya 2024-10-08 21:17:09 +08:00
parent 2bc8295fdb
commit 1edba03389
3 changed files with 13 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
frontend/app/element/emojipalette.less
View File

@ -3,23 +3,20 @@
.emoji-palette-content { .emoji-palette-content {
padding: 10px; padding: 10px;
max-height: 250px; max-height: 350px;
width: 250px; width: 300px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
// > input {
// margin-top: 10px;
// }
} }
.emoji-grid { .emoji-grid {
display: grid; display: grid;
grid-template-columns: repeat(auto-fit, minmax(30px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
gap: 5px; gap: 10px;
justify-content: center; padding: 10px 0;
align-items: center; width: 100%;
margin-top: 5px; height: 300px;
overflow-y: auto;
} }
.emoji-button { .emoji-button {

3
frontend/app/element/emojipalette.stories.tsx
View File

@ -1,3 +1,6 @@
// Copyright 2024, Command Line Inc.
// SPDX-License-Identifier: Apache-2.0
import type { Meta, StoryObj } from "@storybook/react"; import type { Meta, StoryObj } from "@storybook/react";
import { useRef } from "react"; import { useRef } from "react";
import { EmojiPalette } from "./emojipalette"; import { EmojiPalette } from "./emojipalette";

3
frontend/app/element/emojipalette.tsx
View File

@ -231,7 +231,7 @@ const EmojiPalette = memo(({ scopeRef, className }: EmojiPaletteProps) => {
return () => { return () => {
scopeRef?.current?.removeEventListener("mousedown", handleClickOutside); scopeRef?.current?.removeEventListener("mousedown", handleClickOutside);
}; };
}, []); }, [scopeRef]);
const handleAnchorClick = () => { const handleAnchorClick = () => {
setIsPaletteVisible((prev) => !prev); setIsPaletteVisible((prev) => !prev);
@ -251,6 +251,7 @@ const EmojiPalette = memo(({ scopeRef, className }: EmojiPaletteProps) => {
{isPaletteVisible && ( {isPaletteVisible && (
<Palette anchorRef={anchorRef} scopeRef={scopeRef} className="emoji-palette-content"> <Palette anchorRef={anchorRef} scopeRef={scopeRef} className="emoji-palette-content">
<Input placeholder="Search emojis..." value={searchTerm} onChange={handleSearchChange} /> <Input placeholder="Search emojis..." value={searchTerm} onChange={handleSearchChange} />
<div className="emoji-grid"> <div className="emoji-grid">
{filteredEmojis.length > 0 ? ( {filteredEmojis.length > 0 ? (
filteredEmojis.map((item, index) => ( filteredEmojis.map((item, index) => (