mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-11-26 04:08:01 +03:00
Updated layout switch
This commit is contained in:
Peter Zimon
Djordje Vlaisavljevic
parent
6530cd535e
commit
65b6978482
@ -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>
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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'>
|
||||
|
||||
@ -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>
|
||||
</>
|
||||
);
|
||||
|
||||
@ -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');
|
||||
}} />
|
||||
|
||||
@ -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>
|
||||
|
After Width: | Height: | Size: 651 B |
@ -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>
|
||||
|
After Width: | Height: | Size: 735 B |
Loading…
Reference in New Issue
Block a user