nostr/lume
1
0
Fork 0
mirror of https://github.com/luminous-devs/lume.git synced 2024-09-18 11:13:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

added tabs mockup and updated note conente style

Browse Source
This commit is contained in:
Ren Amamiya 2023-03-27 08:43:48 +07:00
parent 5fcb1ef647
commit 392ce50280
10 changed files with 92 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
src-tauri/Cargo.lock generated
View File

@ -1853,6 +1853,17 @@ dependencies = [
"vcpkg",
]
[[package]]
name = "os_info"
version = "3.6.0"
source = "registry+https://github.com/rust-lang/crates.io-index"
checksum = "5c424bc68d15e0778838ac013b5b3449544d8133633d8016319e7e05a820b8c0"
dependencies = [
"log",
"serde",
"winapi",
]
[[package]]
name = "overload"
version = "0.1.1"
@ -3061,6 +3072,7 @@ dependencies = [
"objc",
"once_cell",
"open",
"os_info",
"percent-encoding",
"rand 0.8.5",
"raw-window-handle",

2
src-tauri/Cargo.toml
View File

@ -16,7 +16,7 @@ tauri-build = { version = "1.2", features = [] }
[dependencies]
serde_json = "1.0"
serde = { version = "1.0", features = ["derive"] }
tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "shell-open", "system-tray", "window-start-dragging"] }
tauri = { version = "1.2", features = ["app-all", "clipboard-all", "http-all", "notification-all", "os-all", "shell-open", "system-tray", "window-start-dragging"] }
[dependencies.tauri-plugin-sql]
git = "https://github.com/tauri-apps/plugins-workspace"

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

@ -18,6 +18,9 @@
"hide": false,
"show": false
},
"os": {
"all": true
},
"http": {
"all": true,
"request": true,

53
src/components/appHeader/actions.tsx Normal file
View File

@ -0,0 +1,53 @@
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
import { platform } from '@tauri-apps/api/os';
import { useRouter } from 'next/router';
import { useLayoutEffect, useState } from 'react';
export default function AppActions() {
const router = useRouter();
const [os, setOS] = useState('');
const goBack = () => {
router.back();
};
const goForward = () => {
window.history.forward();
};
const reload = () => {
router.reload();
};
useLayoutEffect(() => {
const getPlatform = async () => {
const result = await platform();
setOS(result);
};
getPlatform().catch(console.error);
}, []);
return (
<div className={`flex h-full items-center gap-2 ${os === 'darwin' ? 'pl-[68px]' : ''}`}>
<button
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
</button>
<button
onClick={() => goForward()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
</button>
<button
onClick={() => reload()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
</button>
</div>
);
}

57
src/components/appHeader/index.tsx
View File

@ -1,47 +1,26 @@
import AppActions from '@components/appHeader/actions';
import { NoteConnector } from '@components/note/connector';
import { ArrowLeftIcon, ArrowRightIcon, ReloadIcon } from '@radix-ui/react-icons';
import { useRouter } from 'next/router';
import { PlusIcon } from '@radix-ui/react-icons';
export default function AppHeader() {
const router = useRouter();
const goBack = () => {
router.back();
};
const goForward = () => {
window.history.forward();
};
const reload = () => {
router.reload();
};
return (
<div data-tauri-drag-region className="flex h-full w-full flex-1 items-center justify-between px-2">
<div className="flex h-full items-center gap-2 pl-[68px]">
<button
onClick={() => goBack()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowLeftIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
</button>
<button
onClick={() => goForward()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ArrowRightIcon className="h-4 w-4 text-zinc-500 group-hover:text-zinc-300" />
</button>
<button
onClick={() => reload()}
className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900"
>
<ReloadIcon className="h-[14px] w-[14px] text-zinc-500 group-hover:text-zinc-300" />
</button>
</div>
<div>
<NoteConnector />
<div data-tauri-drag-region className="flex h-full w-full flex-1 items-center px-2">
<AppActions />
<div data-tauri-drag-region className="flex h-full w-full items-center justify-between">
<div className="flex h-full items-center divide-x divide-zinc-900 px-4 py-px">
<div className="group inline-flex h-full w-24 items-center justify-center border-l border-zinc-900 hover:bg-zinc-900">
<span className="text-sm font-medium leading-none text-zinc-400 group-hover:text-zinc-100">Home</span>
</div>
<div className="inline-flex h-full w-16 items-center justify-center border-r border-zinc-900">
<button className="group inline-flex h-6 w-6 items-center justify-center rounded-md hover:bg-zinc-900">
<PlusIcon className="h-4 w-4 text-zinc-400 group-hover:text-zinc-100" />
</button>
</div>
</div>
<div>
<NoteConnector />
</div>
</div>
</div>
);

2
src/components/note/base.tsx
View File

@ -87,7 +87,7 @@ export const NoteBase = memo(function NoteBase({ event }: { event: any }) {
<UserExtend pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>

2
src/components/note/comment.tsx
View File

@ -57,7 +57,7 @@ export const NoteComment = memo(function NoteComment({ event }: { event: any })
<UserExtend pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>

2
src/components/note/extend.tsx
View File

@ -60,7 +60,7 @@ export const NoteExtend = memo(function NoteExtend({ event }: { event: any }) {
<UserLarge pubkey={event.pubkey} time={event.created_at} />
<div className="mt-2">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>

2
src/components/note/parent.tsx
View File

@ -109,7 +109,7 @@ export const NoteParent = memo(function NoteParent({ id }: { id: string }) {
<UserExtend pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>

2
src/components/note/repost.tsx
View File

@ -91,7 +91,7 @@ export const NoteRepost = memo(function NoteRepost({ id }: { id: string }) {
<UserExtend pubkey={event.pubkey} time={event.created_at} />
<div className="-mt-5 pl-[52px]">
<div className="flex flex-col gap-2">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1 prose-img:mt-2 prose-img:mb-0 prose-video:mt-1 prose-video:mb-0">
<div className="prose prose-zinc max-w-none break-words text-[15px] leading-tight dark:prose-invert prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-img:m-0 prose-video:m-0">
{content}
</div>
</div>