-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(landing-page): redesign tabs (#191)
* chore: wip * chore: add new tab * chore(landing): move feature walls -> articles tabs * chore(landing): adjust tabs icon preview * feat(loading): add dashboard holder section * style(landing): fix bg style of user voice * refactor(intros): discuss tab redesign * refactor(intros): kanban done * refactor(intros): add drag concept * refactor(intros): add drag target concept * refactor(intros): add drag target concept * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): changelog make awesome * refactor(intros): wip * chore: wip * refactor(intros): wip * refactor(intros): wip * refactor(intros): help feat wip * chore: wip * chore: wip * chore(help): wip * chore(help): done * chore(help): rename -> tab
- Loading branch information
Showing
178 changed files
with
4,970 additions
and
3,332 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,18 @@ | ||
'use client' | ||
|
||
import React from 'react' | ||
import { Plate, PlateContent } from '@udecode/plate-common' | ||
|
||
import { Wrapper } from './styles' | ||
|
||
const BasicEditorDefaultDemo = () => { | ||
return ( | ||
<Wrapper> | ||
<Plate onChange={(data) => console.log('## onChange: ', data)}> | ||
<PlateContent placeholder="Type..." /> | ||
</Plate> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default BasicEditorDefaultDemo |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import styled from 'styled-components' | ||
|
||
export const Wrapper = styled.div` | ||
margin-top: 10%; | ||
width: 800px; | ||
height: 300px; | ||
border: 1px solid; | ||
` | ||
export const holder = 1 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
29 changes: 29 additions & 0 deletions
29
...tainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/CoverPreview.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import { FC } from 'react' | ||
|
||
import { | ||
Wrapper, | ||
Header, | ||
Dot, | ||
BlocksWrapper, | ||
BlocksSolidIcon, | ||
} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/cover_preview' | ||
|
||
const CoverPreview: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<Header> | ||
<Dot /> | ||
<Dot /> | ||
<Dot /> | ||
</Header> | ||
<BlocksWrapper> | ||
<BlocksSolidIcon /> | ||
<BlocksSolidIcon /> | ||
<BlocksSolidIcon /> | ||
<BlocksSolidIcon /> | ||
</BlocksWrapper> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default CoverPreview |
50 changes: 50 additions & 0 deletions
50
...ontent/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/Toolbox.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,50 @@ | ||
import { FC } from 'react' | ||
|
||
import { | ||
Wrapper, | ||
ICON, | ||
Item, | ||
Title, | ||
ColorBall, | ||
} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview/toolbox' | ||
|
||
const EditorToolbox: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<Item> | ||
<ICON.Rotate /> | ||
<Title>旋转</Title> | ||
</Item> | ||
<Item> | ||
<ICON.Arch /> | ||
<Title>弧度</Title> | ||
</Item> | ||
<Item> | ||
<ICON.Shadow /> | ||
<Title>阴影</Title> | ||
</Item> | ||
<Item> | ||
<ICON.Position /> | ||
<Title>位置</Title> | ||
</Item> | ||
<Item> | ||
<ICON.Size /> | ||
<Title>大小</Title> | ||
</Item> | ||
<Item> | ||
<ICON.Light /> | ||
<Title>灯光</Title> | ||
</Item> | ||
<Item> | ||
<ICON.Ratio /> | ||
<Title>比例</Title> | ||
</Item> | ||
<Item> | ||
<ColorBall /> | ||
<Title>背景</Title> | ||
</Item> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default EditorToolbox |
54 changes: 54 additions & 0 deletions
54
.../content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EditorPreview/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
import { FC } from 'react' | ||
|
||
import TagNode from '@/widgets/TagNode' | ||
import { COLOR_NAME } from '@/constant/colors' | ||
|
||
import Toolbox from './Toolbox' | ||
import CoverPreview from '../CoverPreview' | ||
|
||
import { | ||
Wrapper, | ||
Header, | ||
Title, | ||
Version, | ||
Bar, | ||
Cover, | ||
TagsWrapper, | ||
TagItem, | ||
Content, | ||
} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/editor_preview' | ||
|
||
const EditorPreview: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<Header> | ||
<Title> | ||
文章封面图编辑器 <Version>v2.0</Version> | ||
</Title> | ||
|
||
<TagsWrapper> | ||
<TagItem> | ||
<TagNode color={COLOR_NAME.GREEN} hashSize={10} hashRight={4} opacity={0.6} boldHash /> | ||
Web | ||
</TagItem> | ||
|
||
<TagItem> | ||
<TagNode color={COLOR_NAME.ORANGE} hashSize={10} hashRight={4} opacity={0.6} boldHash /> | ||
Mobile | ||
</TagItem> | ||
</TagsWrapper> | ||
</Header> | ||
<Cover> | ||
<CoverPreview /> | ||
</Cover> | ||
<Toolbox /> | ||
<Content> | ||
<Bar height={6} width={159} right={7} opacity={0.15} /> | ||
<Bar height={6} width={100} opacity={0.1} /> | ||
<Bar height={6} width={60} opacity={0.1} /> | ||
</Content> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default EditorPreview |
38 changes: 38 additions & 0 deletions
38
...ontainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBar.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
import { FC } from 'react' | ||
|
||
import { | ||
Wrapper, | ||
Item, | ||
EmojiImg, | ||
Count, | ||
} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar' | ||
|
||
const EMOTION_STATIC = '/icons/static/emotion' | ||
|
||
const EditorPreview: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/tada.png`} /> | ||
<Count>41</Count> | ||
</Item> | ||
|
||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/beer.png`} /> | ||
<Count>32</Count> | ||
</Item> | ||
|
||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/biceps.png`} /> | ||
<Count>17</Count> | ||
</Item> | ||
|
||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/popcorn.png`} /> | ||
<Count>10</Count> | ||
</Item> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default EditorPreview |
33 changes: 33 additions & 0 deletions
33
...ainers/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/EmotionBarBad.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,33 @@ | ||
import { FC } from 'react' | ||
|
||
import { | ||
Wrapper, | ||
Item, | ||
EmojiImg, | ||
Count, | ||
} from '../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/emotion_bar_bad' | ||
|
||
const EMOTION_STATIC = '/icons/static/emotion' | ||
|
||
const EditorPreview: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/downvote.png`} /> | ||
<Count>14</Count> | ||
</Item> | ||
|
||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/confused.png`} /> | ||
<Count>12</Count> | ||
</Item> | ||
|
||
<Item> | ||
<EmojiImg src={`${EMOTION_STATIC}/pill.png`} /> | ||
<Count>35</Count> | ||
</Item> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default EditorPreview |
41 changes: 41 additions & 0 deletions
41
...ners/content/LandingPage/ArticlesIntroTabs/ChangelogTab/ChangelogDemo/MainList/Footer.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,41 @@ | ||
import { FC } from 'react' | ||
|
||
import { mockUsers } from '@/mock' | ||
|
||
import { SpaceGrow } from '@/widgets/Common' | ||
import Facepile from '@/widgets/Facepile' | ||
|
||
import { | ||
Wrapper, | ||
UpvoteWrapper, | ||
UpvoteIcon, | ||
UpvoteCount, | ||
UsersWrapper, | ||
PublishDate, | ||
} from '../../../../styles/articles_intro_tabs/changelog_tab/changelog_demo/main_list/footer' | ||
|
||
type TProps = { | ||
upvotesCount?: number | ||
date?: string | ||
} | ||
|
||
const Footer: FC<TProps> = ({ upvotesCount = 24, date = '2013-12-01' }) => { | ||
const users = mockUsers(3) | ||
|
||
return ( | ||
<Wrapper> | ||
<UpvoteWrapper> | ||
<UpvoteIcon /> | ||
<UpvoteCount>{upvotesCount}</UpvoteCount> | ||
</UpvoteWrapper> | ||
<UsersWrapper> | ||
<Facepile users={users} /> | ||
</UsersWrapper> | ||
<SpaceGrow /> | ||
|
||
<PublishDate>{date}</PublishDate> | ||
</Wrapper> | ||
) | ||
} | ||
|
||
export default Footer |
Oops, something went wrong.