Mirrors/coco-app
1
0
Fork 0
mirror of https://github.com/infinilabs/coco-app.git synced 2025-12-16 19:47:43 +01:00
Code Issues Packages Projects Releases Wiki Activity

style: window style adjustment

Browse Source
This commit is contained in:
rain
2024-11-26 20:27:27 +08:00
parent f499b53e0c
commit 43e53a7847
9 changed files with 45 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src-tauri/tauri.conf.json
View File

@@ -24,8 +24,8 @@
"dragDropEnabled": true,
"focus": true,
"fullscreen": false,
"height": 600,
"maxHeight": 600,
"height": 596,
"maxHeight": 596,
"minHeight": 90,
"width": 680,
"maxWidth": 680,

2
src/components/ChatAI/Chat.tsx
View File

@@ -211,7 +211,7 @@ const ChatAI = forwardRef<ChatAIRef, ChatAIProps>(
return (
<div
data-tauri-drag-region
className={`h-[500px] flex flex-col rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-cover`}
className={`h-[500px] flex flex-col rounded-xl overflow-hidden`}
>
<header
data-tauri-drag-region

2
src/components/SearchChat/DropdownList.tsx
View File

@@ -103,7 +103,7 @@ function DropdownList({ selected, suggests }: DropdownListProps) {
<div
ref={containerRef}
data-tauri-drag-region
className="h-[500px] w-full p-2 pb-10 flex flex-col bg-search_bg_light dark:bg-chat_bg_dark bg-cover rounded-xl overflow-y-auto overflow-hidden focus:outline-none"
className="h-[500px] w-full p-2 pb-10 flex flex-col rounded-xl overflow-y-auto overflow-hidden focus:outline-none"
tabIndex={0}
>
{suggests?.map((item, index) => {

2
src/components/SearchChat/InputBox.tsx
View File

@@ -54,7 +54,7 @@ export default function ChatInput({
return (
<div className="w-full rounded-xl overflow-hidden">
<div className="bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-cover rounded-xl">
<div className="rounded-xl">
<div className="p-[13px] flex items-center dark:text-[#D8D8D8] bg-white dark:bg-[#202126] rounded-xl transition-all">
<div className="flex flex-wrap gap-2 flex-1 items-center">
{isChatMode ? (

11
src/components/SearchChat/Search.tsx
View File

@@ -56,17 +56,22 @@ function Search({ isTransitioned, isChatMode, input }: SearchProps) {
!isChatMode && debouncedSearch();
}, [input]);
if (suggests.length === 0) return null;
console.log(11111, isChatMode);
if (isChatMode || suggests.length === 0) return null;
return (
<div
className={`absolute w-full transition-opacity duration-500 ${
className={`rounded-xl overflow-hidden bg-search_bg_light dark:bg-search_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute w-full transition-opacity duration-500 ${
isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
} bottom-0 h-[500px]`}
style={{
backgroundPosition: "-1px 0",
backgroundSize: "101% 100%",
}}
>
{isChatMode ? null : (
<div
className={`min-h-full w-full flex items-start justify-center rounded-xl overflow-hidden relative`}
className={`min-h-full w-full flex items-start justify-center overflow-hidden relative`}
>
{/* Search Results Panel */}
{suggests.length > 0 ? (

12
src/components/SearchChat/Transition.tsx
View File

@@ -10,12 +10,12 @@ const TransitionComponent = () => {
return (
<div
data-tauri-drag-region
className="w-[680px] h-[600px] mx-auto bg-gray-100 overflow-hidden relative"
className="w-[680px] h-[596px] mx-auto overflow-hidden relative"
>
<div
data-tauri-drag-region
className={`absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-red-500 text-white flex items-center justify-center transition-all duration-500 ${
isTransitioned ? "top-[506px] h-[90px]" : "top-0 h-[90px]"
}`}
>
<button
@@ -28,17 +28,17 @@ const TransitionComponent = () => {
<div
data-tauri-drag-region
className={`absolute w-full bg-green-500 transition-opacity duration-500 ${
className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-green-500 transition-opacity duration-500 ${
isTransitioned ? "opacity-0 pointer-events-none" : "opacity-100"
} bottom-0 h-[500px]`}
></div>
<div
data-tauri-drag-region
className={`absolute w-full bg-yellow-500 transition-all duration-500 ${
className={`shadow-window-custom border border-[#E6E6E6] dark:border-[#272626] absolute w-full bg-yellow-500 transition-all duration-500 ${
isTransitioned
? "top-0 opacity-100 pointer-events-auto"
: "-top-[510px] opacity-0 pointer-events-none"
: "-top-[506px] opacity-0 pointer-events-none"
} h-[500px]`}
></div>
</div>

10
src/components/SearchChat/index.tsx
View File

@@ -54,8 +54,8 @@ export default function SearchChat() {
className={`w-full h-full min-h-screen mx-auto overflow-hidden relative`}
>
<div
className={`absolute z-100 w-full flex items-center justify-center duration-500 ${
isTransitioned ? "top-[510px] h-[90px]" : "top-0 h-[90px]"
className={`rounded-xl overflow-hidden bg-inputbox_bg_light dark:bg-inputbox_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute z-100 w-full flex items-center justify-center duration-500 ${
isTransitioned ? "top-[506px] h-[90px]" : "top-0 h-[90px]"
}`}
>
<InputBox
@@ -73,10 +73,10 @@ export default function SearchChat() {
</div>
<div
className={`absolute w-full transition-all duration-500 ${
className={`rounded-xl overflow-hidden bg-chat_bg_light dark:bg-chat_bg_dark bg-cover border border-[#E6E6E6] dark:border-[#272626] absolute w-full transition-all duration-500 ${
isTransitioned
? "top-0 opacity-100 pointer-events-auto"
: "-top-[510px] opacity-0 pointer-events-none"
: "-top-[506px] opacity-0 pointer-events-none"
} h-[500px]`}
>
<ChatAI
@@ -88,6 +88,7 @@ export default function SearchChat() {
/>
</div>
{isChatMode ? null : (
<Search
key="Search"
input={input}
@@ -95,6 +96,7 @@ export default function SearchChat() {
isTransitioned={isTransitioned}
changeInput={changeInput}
/>
)}
</div>
);
}

4
src/main.css
View File

@@ -82,4 +82,8 @@
.dark .custom-scrollbar::-webkit-scrollbar-thumb {
background-color: #475569;
}
.bg-100 {
background-size: 100% 100%;
}
}

15
tailwind.config.js
View File

@@ -11,12 +11,12 @@ export default {
separator: "rgb(var(--color-separator) / <alpha-value>)",
},
backgroundImage: {
'chat_bg_light': "url('/chat_bg_light.png')",
'chat_bg_dark': "url('/chat_bg_dark.png')",
'search_bg_light': "url('/search_bg_light.png')",
'search_bg_dark': "url('/search_bg_dark.png')",
'inputbox_bg_light': "url('/inputbox_bg_light.png')",
'inputbox_bg_dark': "url('/inputbox_bg_dark.png')",
chat_bg_light: "url('/chat_bg_light.png')",
chat_bg_dark: "url('/chat_bg_dark.png')",
search_bg_light: "url('/search_bg_light.png')",
search_bg_dark: "url('/search_bg_dark.png')",
inputbox_bg_light: "url('/inputbox_bg_light.png')",
inputbox_bg_dark: "url('/inputbox_bg_dark.png')",
},
textColor: {
primary: "rgb(var(--color-foreground) / <alpha-value>)",
@@ -30,6 +30,9 @@ export default {
"100%": { opacity: "1" },
},
},
boxShadow: {
'window-custom': '0 1px 5px 0 rgba(0, 0, 0, 0.15), 0 1px 5px -1px rgba(0, 0, 0, 0.1), 0 2px 5px rgba(0, 0, 0, 0.1)',
},
},
},
plugins: [],