OpenSourceArk/Ghost
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated layout switch

Browse Source
This commit is contained in:
Peter Zimon 2024-08-22 17:03:10 +02:00 committed by Djordje Vlaisavljevic
parent 6530cd535e
commit 65b6978482
7 changed files with 52 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/admin-x-activitypub/src/components/Activities.tsx
View File

@ -9,7 +9,7 @@ const Activities: React.FC<ActivitiesProps> = ({}) => {
// const fakeAuthor =
return (
<>
<MainNavigation />
<MainNavigation title='Activities' />
<div className='z-0 flex w-full flex-col items-center'>
<div className='mt-8 flex w-full max-w-[560px] flex-col'>
<ActivityItem>

40
apps/admin-x-activitypub/src/components/Inbox.tsx
View File

@ -6,7 +6,7 @@ import NiceModal from '@ebay/nice-modal-react';
import React, {useState} from 'react';
import {Activity} from './activities/ActivityItem';
import {ActorProperties, ObjectProperties} from '@tryghost/admin-x-framework/api/activitypub';
import {Button, Heading, Select, SelectOption, Tooltip} from '@tryghost/admin-x-design-system';
import {Button, Heading} from '@tryghost/admin-x-design-system';
import {useBrowseInboxForUser} from '../MainContent';
interface InboxProps {}
@ -33,44 +33,14 @@ const Inbox: React.FC<InboxProps> = ({}) => {
});
};
const selectOptions: SelectOption[] = [
{value: 'option-1', label: 'Home'},
{value: 'option-2', label: 'Posts'},
{value: 'option-3', label: 'Notes'},
{value: 'option-4', label: 'Media'}
];
const defaultValue: SelectOption = {
value: 'option-1', label: 'Home'
};
const controlClasses = {
control: '!bg-transparent !hidden mr-2 !pl-0 text-xl font-bold',
menu: '!min-w-[120px]'
const handleLayoutChange = (newLayout: string) => {
setLayout(newLayout);
};
return (
<>
<MainNavigation />
<div className='mx-auto mt-4 flex w-full max-w-[640px] items-center justify-between border-b border-grey-200 pb-4'>
<div>
<Select controlClasses={controlClasses} defaultValue={defaultValue} options={selectOptions} unstyled onSelect={() => {}} />
<h2 className='text-xl font-bold'>Home</h2>
</div>
<div className=''>
<Tooltip content="Inbox">
<Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
setLayout('inbox');
}} />
</Tooltip>
<Tooltip content="Feed">
<Button className='!px-2' icon='cardview' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
setLayout('feed');
}} />
</Tooltip>
</div>
</div>
<div className='z-0 flex w-full flex-col'>
<MainNavigation page='home' title="Home" onLayoutChange={handleLayoutChange} />
<div className='z-0 my-5 flex w-full flex-col'>
<div className='w-full'>
{inboxTabActivities.length > 0 ? (
<ul className='mx-auto flex max-w-[640px] flex-col'>

2
apps/admin-x-activitypub/src/components/Profile.tsx
View File

@ -87,7 +87,7 @@ const Profile: React.FC<ProfileProps> = ({}) => {
return (
<>
<MainNavigation />
<MainNavigation title='Profile' />
<div className='z-0 flex w-full flex-col items-center'>
<div className='mx-auto mt-8 w-full max-w-[560px]' id='ap-sidebar'>
<div className='h-[200px] w-full rounded-lg bg-gradient-to-tr from-grey-200 to-grey-100'>

8
apps/admin-x-activitypub/src/components/Search.tsx
View File

@ -9,7 +9,7 @@ interface SearchProps {}
const Search: React.FC<SearchProps> = ({}) => {
return (
<>
<MainNavigation />
<MainNavigation title='Search' />
<div className='z-0 flex w-full flex-col items-center pt-8'>
<div className='mb-6 flex w-full max-w-[560px] items-center gap-2 rounded-full bg-grey-100 px-3 py-2 text-grey-500'><Icon name='magnifying-glass' size={18} />Search the Fediverse</div>
<ActivityItem>
@ -27,7 +27,7 @@ const Search: React.FC<SearchProps> = ({}) => {
<div className='text-sm'>4,545 followers</div>
</div>
<Button className='ml-auto' label='Follow' link />
</ActivityItem>
</ActivityItem>
<ActivityItem>
<APAvatar/>
<div>
@ -35,7 +35,7 @@ const Search: React.FC<SearchProps> = ({}) => {
<div className='text-sm'>1,156 followers</div>
</div>
<Button className='ml-auto' label='Follow' link />
</ActivityItem>
</ActivityItem>
<ActivityItem>
<APAvatar/>
<div>
@ -43,7 +43,7 @@ const Search: React.FC<SearchProps> = ({}) => {
<div className='text-sm'>1,584 followers</div>
</div>
<Button className='ml-auto' label='Follow' link />
</ActivityItem>
</ActivityItem>
</div>
</>
);

44
apps/admin-x-activitypub/src/components/navigation/MainNavigation.tsx
View File

@ -1,23 +1,57 @@
import MainHeader from './MainHeader';
import React from 'react';
import {Button} from '@tryghost/admin-x-design-system';
import React, {useEffect, useState} from 'react';
import {Button, Tooltip} from '@tryghost/admin-x-design-system';
import {useRouting} from '@tryghost/admin-x-framework/routing';
interface MainNavigationProps {}
interface MainNavigationProps {
title?: string;
page?: string;
onLayoutChange?: (layout: string) => void;
}
const MainNavigation: React.FC<MainNavigationProps> = ({}) => {
const MainNavigation: React.FC<MainNavigationProps> = ({
title = 'Home',
page = '',
onLayoutChange
}) => {
const {route, updateRoute} = useRouting();
const mainRoute = route.split('/')[0];
const [layout, setLayout] = useState('inbox');
useEffect(() => {
if (onLayoutChange) {
onLayoutChange(layout);
}
}, [layout, onLayoutChange]);
return (
<MainHeader>
<div className='col-[1/2] px-8'>
<h2 className='mt-1 text-xl font-bold'>
{title}
</h2>
</div>
<div className='col-[2/3] flex items-center justify-center gap-9'>
<Button icon='home' iconColorClass={mainRoute === '' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('')} />
<Button icon='magnifying-glass' iconColorClass={mainRoute === 'search' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('search')} />
<Button icon='bell' iconColorClass={mainRoute === 'activity' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('activity')} />
<Button icon='user' iconColorClass={mainRoute === 'profile' ? 'text-black' : 'text-grey-500'} iconSize={18} unstyled onClick={() => updateRoute('profile')} />
</div>
<div className='col-[3/4] flex items-center justify-end px-8'>
<div className='col-[3/4] flex items-center justify-end gap-2 px-8'>
{page === 'home' &&
<div className='mr-3'>
<Tooltip content="Inbox">
<Button className='!px-2' icon='listview' iconColorClass={layout === 'inbox' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
setLayout('inbox');
}} />
</Tooltip>
<Tooltip content="Feed">
<Button className='!px-2' icon='card-list' iconColorClass={layout === 'feed' ? 'text-black' : 'text-grey-400'} size='sm' onClick={() => {
setLayout('feed');
}} />
</Tooltip>
</div>
}
<Button color='black' icon='add' label="Follow" onClick={() => {
updateRoute('follow-site');
}} />

1
apps/admin-x-design-system/src/assets/icons/card-list.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" id="Layout-Agenda--Streamline-Ultimate" height="24" width="24"><desc>Layout Agenda Streamline Icon: https://streamlinehq.com</desc><defs></defs><title>layout-agenda</title><path d="M2.25 0.747h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path><path d="M2.25 14.247h19.5s1.5 0 1.5 1.5v6s0 1.5 -1.5 1.5H2.25s-1.5 0 -1.5 -1.5v-6s0 -1.5 1.5 -1.5" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 651 B

1
apps/admin-x-design-system/src/assets/icons/column-layout.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" id="Layout--Streamline-Ultimate" height="24" width="24"><desc>Layout Streamline Icon: https://streamlinehq.com</desc><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m1.5 2.99707 0 18.00003c0 0.8284 0.67157 1.5 1.5 1.5l18 0c0.8284 0 1.5 -0.6716 1.5 -1.5l0 -18.00003c0 -0.82843 -0.6716 -1.5 -1.5 -1.5l-18 0c-0.82843 0 -1.5 0.67157 -1.5 1.5Z" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 22.4971 0 -21.00003" stroke-width="1.5"></path><path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m12.0029 11.9971 10 0" stroke-width="1.5"></path></svg>
Side by Side

After

Width:  |  Height:  |  Size: 735 B