Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

feat(dashboard): widgets UI/UX#1354

Merged
mydearxym merged 6 commits intodevfromdashboard-widgets
Jul 13, 2022
Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -26,10 +26,10 @@ const ThreadSelector: FC = () => {
</CatButton>

<CatButton
ghost={thread !== THREAD.ROADMAP}
ghost={thread !== THREAD.KANBAN}
size="small"
noBorder={thread !== THREAD.ROADMAP}
onClick={() => setThread(THREAD.ROADMAP)}
noBorder={thread !== THREAD.KANBAN}
onClick={() => setThread(THREAD.KANBAN)}
>
看板墙
</CatButton>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import type { TBannerLayout } from '@/spec'
import { BANNER_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
import { callDashboardDesc } from '@/utils/helper'

import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
import {Row,Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
import ArrowButton from '@/widgets/Buttons/ArrowButton'
import CheckLabel from '@/widgets/CheckLabel'

Expand All@@ -22,7 +22,6 @@ import {
Block,
Bar,
Circle,
Row,
Main,
ListsWrapper,
TagssWrapper,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import type { TBannerNotifyLayout, TColorName } from '@/spec'
import { BANNER_NOTIFY_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
import { callDashboardDesc } from '@/utils/helper'

import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
import {Row,Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
import ColorSelector from '@/widgets/ColorSelector'
import ArrowButton from '@/widgets/Buttons/ArrowButton'
import CheckLabel from '@/widgets/CheckLabel'
Expand All@@ -20,7 +20,6 @@ import {
Layout,
LayoutTitle,
Block,
Row,
Bar,
NotifyTextBar,
NotifyBar,
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import type { TChangelogLayout } from '@/spec'
import { CHANGELOG_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
import { callDashboardDesc } from '@/utils/helper'

import { Br, Space, SpaceGrow, Divider, Inline } from '@/widgets/Common'
import {Row,Br, Space, SpaceGrow, Divider, Inline } from '@/widgets/Common'
import ArrowButton from '@/widgets/Buttons/ArrowButton'
import CheckLabel from '@/widgets/CheckLabel'

Expand All@@ -25,7 +25,6 @@ import {
MiniIntro,
Cover,
MiniPic,
Row,
Column,
UpvoteIcon,
Picture,
Expand DownExpand Up@@ -83,9 +82,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
<Bar long={80} thin />
<Br top={10} />
<Bar long={30} thin />
<Br top={10} />
<Bar long={60} thin />
<Br top={15} />
<Br top={14} />
<Row>
<UpvoteIcon size={15} />
<Space right={5} />
Expand All@@ -94,7 +91,7 @@ const ChangelogLayout: FC<TProps> = ({ layout, isTouched, saving }) => {
<Bar long={12} thin />
</Row>

<Divider />
<Dividertop={30} bottom={30}/>

<MiniItem>
<Cover>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,7 +5,7 @@ import type { TPostLayout } from '@/spec'
import { POST_LAYOUT, DASHBOARD_DESC_LAYOUT } from '@/constant'
import { callDashboardDesc } from '@/utils/helper'

import { Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
import {Row,Br, Space, SpaceGrow, Inline } from '@/widgets/Common'
import ArrowButton from '@/widgets/Buttons/ArrowButton'
import CheckLabel from '@/widgets/CheckLabel'

Expand All@@ -21,7 +21,6 @@ import {
Block,
Bar,
Circle,
Row,
Column,
UpvoteIcon,
CommentIcon,
Expand Down
133 changes: 133 additions & 0 deletionssrc/containers/thread/DashboardThread/Widgets/BaseSetting.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,133 @@
import { FC, memo } from 'react'
import { includes, reject, clone } from 'ramda'

import { THREAD } from '@/constant'
import ColorSelector from '@/widgets/ColorSelector'
import { SpaceGrow, Br } from '@/widgets/Common'
import ToggleSwitch from '@/widgets/Buttons/ToggleSwitch'

import type { TWidgetsSettings, TTouched } from '../spec'
import { SETTING_FIELD } from '../constant'

import SectionLabel from '../SectionLabel'
import SavingBar from '../SavingBar'

import {
Wrapper,
Label,
TheColor,
ThreadsWrapper,
Section,
Header,
ThreadTitle,
Desc,
} from '../styles/widgets/base_setting'

import { edit } from '../logic'
import { TThread } from '@/spec'

type TProps = {
touched: TTouched
settings: TWidgetsSettings
}

const BaseSetting: FC<TProps> = ({ settings, touched }) => {
const { widgetsPrimaryColor: primaryColor, widgetsThreads, saving } = settings

const threadOnChange = (checked: boolean, thread: TThread): void => {
const newThreads = checked
? [...widgetsThreads, thread]
: reject((t) => t === thread, clone(widgetsThreads))

edit(newThreads, 'widgetsThreads')
}

return (
<Wrapper>
<SectionLabel
title="组件主题色"
desc="默认与当前社区设置的主题色相一致。"
/>
<SavingBar
isTouched={touched.widgetsPrimaryColor}
field={SETTING_FIELD.WIDGETS_PRIMARY_COLOR}
loading={saving}
>
<Label color={primaryColor}>
<ColorSelector
activeColor={primaryColor}
onChange={(color) => edit(color, 'widgetsPrimaryColor')}
placement="right"
offset={[-1, 15]}
>
<TheColor color={primaryColor} />
</ColorSelector>
</Label>
</SavingBar>

<Br top={35} />
<SectionLabel
title="展示板块"
desc="被勾选的板块会在组件中以 Tab 形式展示相关内容，展示样式与‘社区板块’中的设置保持一致"
/>

<ThreadsWrapper>
<Section>
<Header>
<ThreadTitle>讨论</ThreadTitle>
<SpaceGrow />
<ToggleSwitch
checked={includes(THREAD.POST, widgetsThreads)}
onChange={(checked) => threadOnChange(checked, THREAD.POST)}
/>
</Header>
<Desc>社区内全部帖子列表</Desc>
</Section>
<Section>
<Header>
<ThreadTitle>看板</ThreadTitle>
<SpaceGrow />
<ToggleSwitch
checked={includes(THREAD.KANBAN, widgetsThreads)}
onChange={(checked) => threadOnChange(checked, THREAD.KANBAN)}
/>
</Header>
<Desc>社区内看板内容，包含GTD标签</Desc>
</Section>
<Section>
<Header>
<ThreadTitle>更新日志</ThreadTitle>
<SpaceGrow />
<ToggleSwitch
checked={includes(THREAD.CHANGELOG, widgetsThreads)}
onChange={(checked) => threadOnChange(checked, THREAD.CHANGELOG)}
/>
</Header>
<Desc>最新版本以及历史发布版本</Desc>
</Section>
<Section>
<Header>
<ThreadTitle>帮助台</ThreadTitle>
<SpaceGrow />
<ToggleSwitch
checked={includes(THREAD.HELP, widgetsThreads)}
onChange={(checked) => threadOnChange(checked, THREAD.HELP)}
/>
</Header>
<Desc>常见问题与帮助中心文档</Desc>
</Section>
</ThreadsWrapper>

<Br top={touched.widgetsThreads ? 20 : 70} />

<SavingBar
isTouched={touched.widgetsThreads}
field={SETTING_FIELD.WIDGETS_THREADS}
loading={saving}
bottom={40}
/>
</Wrapper>
)
}

export default memo(BaseSetting)
21 changes: 21 additions & 0 deletionssrc/containers/thread/DashboardThread/Widgets/CodeArea.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
import { FC, memo } from 'react'

import CopyButton from '@/widgets/Buttons/CopyButton'

import { Wrapper, CopyBtnWrapper } from '../styles/widgets/code_area'

const CodeArea: FC = () => {
const id = 'your-id'
const value = `<script async src="https://groupher.com/xxx" id="${id}" data-token="yyy" data-width="normal" />`

return (
<Wrapper>
{value}
<CopyBtnWrapper>
<CopyButton value={value} />
</CopyBtnWrapper>
</Wrapper>
)
}

export default memo(CodeArea)
117 changes: 113 additions & 4 deletionssrc/containers/thread/DashboardThread/Widgets/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,124 @@
import { FC, memo } from 'react'

import { Wrapper } from '../styles/widgets'
import { Br } from '@/widgets/Common'
import Tabs from '@/widgets/Switcher/Tabs'
import Button from '@/widgets/Buttons/Button'
import { Radio } from '@/widgets/Switcher'

import type { TWidgetsSettings, TTouched } from '../spec'
import { WIDGET_TYPES } from '../constant'

import Portal from '../Portal'
import BaseSetting from './BaseSetting'
import CodeArea from './CodeArea'

import {
Wrapper,
TypeSelect,
TabWrapper,
BtnWrapper,
ViewIcon,
HintTitle,
HintDesc,
InputWrapper,
InputLabel,
Inputer,
} from '../styles/widgets'
import { edit, onSave } from '../logic'

export const TAB_ITEMS = [
{
title: '侧边栏',
raw: 'sidebar',
},
{
title: '居中模态框',
raw: 'modal',
},
{
title: '弹出提示',
raw: 'modal',
},
{
title: '页面内嵌',
raw: 'iframe',
},
{
title: '链接',
raw: 'link',
},
]

type TProps = {
testid?: string
settings: TWidgetsSettings
touched: TTouched
}

const Widgets: FC<TProps> = ({ testid = 'widgets' }) => {
const Widgets: FC<TProps> = ({ settings, touched }) => {
const { widgetsType } = settings

return (
<Wrapper>
<div>Widgets</div>
<Portal
title="网站插件"
desc="为您的主页添加社区，更新日志，看板等插件，让产品用户及时方便的了解最新动态。"
/>

<BaseSetting settings={settings} touched={touched} />
<TypeSelect>
<TabWrapper>
<Tabs
items={WIDGET_TYPES}
size="small"
activeKey={widgetsType}
bottomSpace={4}
onChange={(raw) => {
edit(raw, 'widgetsType')
onSave('widgetsType', true)
}}
/>
</TabWrapper>
<Button size="small" space={8} top={-2} right={2} ghost>
<BtnWrapper>
<ViewIcon />
预览
</BtnWrapper>
</Button>
</TypeSelect>
<InputWrapper>
<InputLabel>目标元素 ID:</InputLabel>
<Inputer />
</InputWrapper>
<InputWrapper>
<InputLabel>组件尺寸:</InputLabel>
<Radio
size="small"
left={-20}
items={[
{
value: '小',
key: '1',
},
{
value: '中',
key: '2',
dimOnActive: true,
},
{
value: '大',
key: '3',
dimOnActive: true,
},
]}
activeKey="1"
/>
</InputWrapper>
<Br top={30} />
<HintTitle>启用网站插件，请复制以下代码到您的站点源码中。</HintTitle>
<Br top={8} />
<CodeArea />
<Br top={10} />
<HintDesc>如果团队中缺乏相关技术人员，请联系我们。</HintDesc>
</Wrapper>
)
}
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp