reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

multi columns layout

Browse Source
This commit is contained in:
Ren Amamiya
2023-05-21 08:49:08 +07:00
parent f11fe2d349
commit f73c7321d7
20 changed files with 127 additions and 199 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/shared/accounts/active.tsx
View File

@@ -6,15 +6,11 @@ export default function ActiveAccount({ user }: { user: any }) {
const userData = JSON.parse(user.metadata);
return (
<button
type="button"
className="relative h-10 w-10 overflow-hidden rounded-lg"
>
<button type="button" className="relative h-11 w-11 overflow-hidden">
<Image
src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar"
loading="auto"
className="h-10 w-10 object-cover"
className="h-11 w-11 rounded-md object-cover"
/>
</button>
);

4
src/shared/accounts/inactive.tsx
View File

@@ -6,11 +6,11 @@ export default function InactiveAccount({ user }: { user: any }) {
const userData = JSON.parse(user.metadata);
return (
<div className="relative h-10 w-10 shrink rounded-lg">
<div className="relative h-11 w-11 shrink rounded-md">
<Image
src={userData.picture || DEFAULT_AVATAR}
alt="user's avatar"
className="h-10 w-10 rounded-lg object-cover"
className="h-11 w-11 rounded-lg object-cover"
/>
</div>
);

35
src/shared/appHeader.tsx
View File

@@ -1,7 +1,6 @@
import ArrowLeftIcon from "@icons/arrowLeft";
import ArrowRightIcon from "@icons/arrowRight";
import RefreshIcon from "@icons/refresh";
import EventCollector from "@shared/eventCollector";
import useSWR from "swr";
const fetcher = async () => {
@@ -27,47 +26,33 @@ export default function AppHeader() {
return (
<div
data-tauri-drag-region
className="flex h-full w-full flex-1 items-center px-2"
className="flex h-11 w-full items-center justify-between border-b border-zinc-900 px-3 gap-2.5"
>
<div
className={`flex h-full items-center gap-2 ${
platform === "darwin" ? "pl-[68px]" : ""
}`}
>
<div className="flex gap-2.5">
<button
type="button"
onClick={() => goBack()}
className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
>
<ArrowLeftIcon
width={14}
height={14}
width={16}
height={16}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
<button
type="button"
onClick={() => goForward()}
className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
className="group inline-flex h-6 w-6 items-center justify-center rounded hover:bg-zinc-900"
>
<ArrowRightIcon
width={14}
height={14}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
<button
type="button"
onClick={() => reload()}
className="group inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-900"
>
<RefreshIcon
width={14}
height={14}
width={16}
height={16}
className="text-zinc-500 group-hover:text-zinc-300"
/>
</button>
</div>
<EventCollector />
</div>
);
}

4
src/shared/eventCollector.tsx
View File

@@ -136,8 +136,8 @@ export default function EventCollector() {
);
return (
<div className="inline-flex h-6 w-6 items-center justify-center rounded text-zinc-400 hover:bg-zinc-900 hover:text-white">
<HeartBeatIcon width={14} height={14} />
<div className="inline-flex h-6 w-6 items-center justify-center rounded text-green-400 hover:bg-zinc-900 hover:text-white">
<HeartBeatIcon width={16} height={16} />
</div>
);
}

4
src/shared/multiAccounts.tsx
View File

@@ -18,7 +18,7 @@ export default function MultiAccounts() {
const { data: activeAccount }: any = useSWR("activeAccount", fetcher);
return (
<div className="flex shrink-0 w-[68px] h-full flex-col items-center justify-between border-r border-zinc-900 pb-4 pt-3">
<div className="flex shrink-0 w-[68px] h-full flex-col items-center justify-between border-r border-zinc-900 pb-4 pt-11">
<div className="flex flex-col items-center">
<div className="flex flex-col gap-2">
<>
@@ -31,7 +31,7 @@ export default function MultiAccounts() {
<div>
<button
type="button"
className="group relative flex h-10 w-10 shrink items-center justify-center rounded-lg bg-zinc-900 hover:bg-zinc-800"
className="group relative flex h-11 w-11 shrink items-center justify-center rounded-md bg-zinc-900 hover:bg-zinc-800"
>
<BellIcon
width={16}

24
src/shared/navigation.tsx
View File

@@ -1,23 +1,19 @@
import ChannelsList from "@app/channel/components/list";
import ChatsList from "@app/chat/components/list";
import ActiveLink from "@shared/activeLink";
import { ComposerModal } from "@shared/composer/modal";
import EventCollector from "@shared/eventCollector";
import MyspaceIcon from "@icons/myspace";
import { Disclosure } from "@headlessui/react";
import NavArrowDownIcon from "@icons/navArrowDown";
import ThreadsIcon from "@icons/threads";
import WorldIcon from "@icons/world";
import { Disclosure } from "@headlessui/react";
import ActiveLink from "@shared/activeLink";
import AppHeader from "@shared/appHeader";
import { ComposerModal } from "@shared/composer/modal";
export default function Navigation() {
return (
<div className="flex w-[232px] h-full flex-col gap-3 pt-1.5">
<div className="flex h-11 items-center justify-between px-3.5">
<div className="flex w-[232px] h-full flex-col gap-3 border-r border-zinc-900">
<AppHeader />
<div className="flex h-8 px-3.5">
<ComposerModal />
<EventCollector />
</div>
{/* Newsfeed */}
<div className="flex flex-col gap-0.5 px-1.5">
@@ -26,10 +22,10 @@ export default function Navigation() {
Feeds
</h3>
</div>
<div className="flex flex-col text-zinc-400">
<div className="flex flex-col gap-1">
<ActiveLink
href="/app/space"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:text-white"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
activeClassName="bg-zinc-900/50 hover:bg-zinc-900"
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">
@@ -39,7 +35,7 @@ export default function Navigation() {
</ActiveLink>
<ActiveLink
href="/app/threads"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 hover:text-white"
className="flex h-8 items-center gap-2.5 rounded-md px-2.5 text-zinc-200 hover:text-white"
activeClassName=""
>
<span className="inline-flex h-5 w-5 items-center justify-center rounded bg-zinc-900">