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): add banner notify setting#1353

Merged
mydearxym merged 3 commits intodevfromdashboard-banner-notify-setting
Jul 9, 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
8 changes: 7 additions & 1 deletionsrc/containers/layout/GlobalLayout/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -13,6 +13,7 @@ import { SIZE, BODY_SCROLLER } from '@/constant'
import { bond } from '@/utils/mobx'

import ThemePalette from '@/containers/layout/ThemePalette'
import BannerNotify from '@/widgets/BannerNotify'
// import Header from '@/widgets/Header'

// import Footer from '@/containers/unit/Footer'
Expand DownExpand Up@@ -61,7 +62,7 @@ const GlobalLayoutContainer: FC<TProps> = ({
// load debug graph
useInit(store, { isMobile })

const { sidebarPin, wallpaper, wallpapers } = store
const { sidebarPin, wallpaper, wallpapers, globalLayout } = store

return (
<ThemePalette>
Expand All@@ -82,6 +83,11 @@ const GlobalLayoutContainer: FC<TProps> = ({
<Wrapper>
<SEO metric={metric} config={seoConfig} />
<InnerWrapper metric={metric} sidebarPin={sidebarPin}>
<BannerNotify
metric={metric}
layout={globalLayout.bannerNotify}
bg={globalLayout.bannerNotifyBg}
/>
{/* @ts-ignore */}
<ContentWrapper offsetLeft={sidebarPin}>
{/* @ts-ignore */}
Expand Down
5 changes: 5 additions & 0 deletionssrc/containers/layout/GlobalLayout/store.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import type {
TC11N,
TCommunity,
TWallpaper,
TGlobalLayout,
} from '@/spec'
import { markStates, toJS } from '@/utils/mobx'

Expand DownExpand Up@@ -55,6 +56,10 @@ const GlobalLayout = T.model('GlobalLayoutStore', {
const root = getParent(self) as TRootStore
return root.wallpaperEditor.wallpapers
},
get globalLayout(): TGlobalLayout {
const root = getParent(self) as TRootStore
return root.dashboardThread.globalLayout
},
}))
.actions((self) => ({
toast(type, options): void {
Expand Down
198 changes: 198 additions & 0 deletionssrc/containers/thread/DashboardThread/UI/BannerNotifyLayout.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
import { FC, memo } from 'react'

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 ColorSelector from '@/widgets/ColorSelector'
import ArrowButton from '@/widgets/Buttons/ArrowButton'
import CheckLabel from '@/widgets/CheckLabel'

import { SETTING_FIELD } from '../constant'
import SectionLabel from '../SectionLabel'
import SavingBar from '../SavingBar'

import {
Wrapper,
SelectWrapper,
Layout,
LayoutTitle,
Block,
Bar,
NotifyBar,
NotifyDesc,
NotifyLink,
NotifySolidLink,
CrossIcon,
ArrowIcon,
Main,
ListsWrapper,
TagssWrapper,
BgWrapper,
BgLabel,
TheColor,
} from '../styles/ui/banner_notify_layout'
import { edit } from '../logic'

type TProps = {
layout: TBannerNotifyLayout
isLayoutTouched: boolean
isBgTouched: boolean
saving: boolean
bg: TColorName
}

const BannerNotifyLayout: FC<TProps> = ({
layout,
isLayoutTouched,
isBgTouched,
saving,
bg,
}) => {
return (
<Wrapper>
<SectionLabel
title="横幅通知"
desc={
<>
全局横幅通知的样式，当用户设置内容时会以一下样式展示。
<Inline>
<ArrowButton
onClick={() =>
callDashboardDesc(DASHBOARD_DESC_LAYOUT.POST_LIST)
}
size="tiny"
arrowStyle="simple"
>
查看示例
</ArrowButton>
</Inline>
</>
}
/>
<SelectWrapper>
<Layout
onClick={() =>
edit(BANNER_NOTIFY_LAYOUT.DEFAULT, 'bannerNotifyLayout')
}
>
<Block $active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}>
<NotifyBar bg={bg}>
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
<SpaceGrow />
<NotifySolidLink bg={bg}>查看详情</NotifySolidLink>
<Space left={5} />
<CrossIcon />
</NotifyBar>

<Main>
<ListsWrapper>
<Bar long={60} thin />
<Br bottom={14} />
<Bar long={50} thin />
<Br bottom={14} />
<Bar long={55} thin />
<Br bottom={14} />
<Bar long={40} thin />
<Br bottom={14} />
</ListsWrapper>
<TagssWrapper>
<Br bottom={10} />
<Bar long={60} thin />
<Br bottom={6} />
<Bar long={85} thin />
<Br bottom={6} />
<Bar long={50} thin />
<Br bottom={6} />
</TagssWrapper>
</Main>
</Block>
<LayoutTitle $active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}>
<CheckLabel
title="常规式"
$active={layout === BANNER_NOTIFY_LAYOUT.DEFAULT}
top={15}
left={-15}
/>
</LayoutTitle>
</Layout>
<Space right={40} />
<Layout
onClick={() =>
edit(BANNER_NOTIFY_LAYOUT.CENTER, 'bannerNotifyLayout')
}
>
<Block $active={layout === BANNER_NOTIFY_LAYOUT.CENTER}>
<NotifyBar bg={bg} center>
<NotifyDesc>这是一条全局通知，全站可见。</NotifyDesc>
<NotifyLink>查看详情</NotifyLink>
<Space left={5} />
<ArrowIcon />
</NotifyBar>

<Main>
<ListsWrapper>
<Bar long={60} thin />
<Br bottom={14} />
<Bar long={50} thin />
<Br bottom={14} />
<Bar long={55} thin />
<Br bottom={14} />
<Bar long={40} thin />
<Br bottom={14} />
</ListsWrapper>
<TagssWrapper>
<Br bottom={10} />
<Bar long={60} thin />
<Br bottom={6} />
<Bar long={85} thin />
<Br bottom={6} />
<Bar long={50} thin />
<Br bottom={6} />
</TagssWrapper>
</Main>
</Block>
<LayoutTitle $active={layout === BANNER_NOTIFY_LAYOUT.CENTER}>
<CheckLabel
title="居中式"
$active={layout === BANNER_NOTIFY_LAYOUT.CENTER}
top={15}
left={-15}
/>
</LayoutTitle>
</Layout>
</SelectWrapper>
<SavingBar
isTouched={isLayoutTouched}
field={SETTING_FIELD.BANNER_NOTIFY_LAYOUT}
loading={saving}
top={20}
/>

<Br top={30} />
<SavingBar
isTouched={isBgTouched}
field={SETTING_FIELD.BANNER_NOTIFY_BG}
loading={saving}
>
<BgWrapper>
<div>背景色</div>
<BgLabel bg={bg}>
<ColorSelector
activeColor={bg}
onChange={(color) => edit(color, 'bannerNotifyBg')}
placement="right"
offset={[-1, 15]}
>
<TheColor color={bg} />
</ColorSelector>
</BgLabel>
</BgWrapper>
</SavingBar>
</Wrapper>
)
}

export default memo(BannerNotifyLayout)
11 changes: 11 additions & 0 deletionssrc/containers/thread/DashboardThread/UI/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,7 @@ import BrandLayout from './BrandLayout'
import BannerLayout from './BannerLayout'
import PostListLayout from './PostListLayout'
import ChangelogLayout from './ChangelogLayout'
import BannerNotifyLayout from './BannerNotifyLayout'

import type { TUiSettings, TTouched } from '../spec'
import { Wrapper } from '../styles/ui'
Expand All@@ -23,6 +24,8 @@ const UI: FC<TProps> = ({ settings, touched }) => {
primaryColor,
brandLayout,
bannerLayout,
bannerNotifyLayout,
bannerNotifyBg,
postLayout,
changelogLayout,
wallpaper,
Expand DownExpand Up@@ -65,6 +68,14 @@ const UI: FC<TProps> = ({ settings, touched }) => {
saving={saving}
/>
<Divider top={30} bottom={60} />
<BannerNotifyLayout
layout={bannerNotifyLayout}
bg={bannerNotifyBg}
isLayoutTouched={touched.bannerNotifyLayout}
isBgTouched={touched.bannerNotifyBg}
saving={saving}
/>
<Divider top={20} bottom={60} />
<Wallpaper wallpaper={wallpaper} />
</Wrapper>
)
Expand Down
2 changes: 2 additions & 0 deletionssrc/containers/thread/DashboardThread/constant.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -32,6 +32,8 @@ export const SETTING_FIELD = {
POST_LAYOUT: 'postLayout',
BRAND_LAYOUT: 'brandLayout',
BANNER_LAYOUT: 'bannerLayout',
BANNER_NOTIFY_LAYOUT: 'bannerNotifyLayout',
BANNER_NOTIFY_BG: 'bannerNotifyBg',
CHANGELOG_LAYOUT: 'changelogLayout',
TAG: 'tag',
ALIAS: 'alias',
Expand Down
7 changes: 7 additions & 0 deletionssrc/containers/thread/DashboardThread/spec.d.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -7,6 +7,7 @@ import type {
TChangelogLayout,
TBrandLayout,
TBannerLayout,
TBannerNotifyLayout,
TTag,
} from '@/spec'

Expand DownExpand Up@@ -69,6 +70,8 @@ export type TUiSettings = {
primaryColor: TColorName
brandLayout: TBrandLayout
bannerLayout: TBannerLayout
bannerNotifyLayout: TBannerNotifyLayout
bannerNotifyBg: TColorName
postLayout: TPostLayout
changelogLayout: TChangelogLayout
}
Expand All@@ -77,6 +80,8 @@ export type TTouched = {
primaryColor: boolean
brandLayout: boolean
bannerLayout: boolean
bannerNotifyLayout: boolean
bannerNotifyBg: boolean
postLayout: boolean
changelogLayout: boolean
alias: boolean
Expand All@@ -90,6 +95,8 @@ export type TSettingField =
| 'postLayout'
| 'brandLayout'
| 'bannerLayout'
| 'bannerNotifyLayout'
| 'bannerNotifyBg'
| 'changelogLayout'
| 'tag'
| 'alias'
20 changes: 20 additions & 0 deletionssrc/containers/thread/DashboardThread/store.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -11,6 +11,7 @@ import { mockTags } from '@/utils/mock'
import {
BRAND_LAYOUT,
BANNER_LAYOUT,
BANNER_NOTIFY_LAYOUT,
CHANGELOG_LAYOUT,
POST_LAYOUT,
COLORS,
Expand DownExpand Up@@ -54,6 +55,11 @@ const settingsModalFields = {
T.enumeration(values(BANNER_LAYOUT)),
BANNER_LAYOUT.HEADER,
),
bannerNotifyLayout: T.optional(
T.enumeration(values(BANNER_NOTIFY_LAYOUT)),
BANNER_NOTIFY_LAYOUT.DEFAULT,
),
bannerNotifyBg: T.optional(T.enumeration(keys(COLORS)), 'BLACK'),
changelogLayout: T.optional(
T.enumeration(values(CHANGELOG_LAYOUT)),
CHANGELOG_LAYOUT.FOLD,
Expand DownExpand Up@@ -81,6 +87,8 @@ const DashboardThread = T.model('DashboardThread', {
changelogLayout,
postLayout,
bannerLayout,
bannerNotifyLayout,
bannerNotifyBg,
brandLayout,
} = initSettings

Expand All@@ -90,6 +98,8 @@ const DashboardThread = T.model('DashboardThread', {
post: postLayout,
changelog: changelogLayout,
banner: bannerLayout,
bannerNotify: bannerNotifyLayout,
bannerNotifyBg,
}
},
get curCommunity(): TCommunity {
Expand All@@ -106,6 +116,12 @@ const DashboardThread = T.model('DashboardThread', {
const primaryColorTouched = slf.primaryColor !== initSettings.primaryColor
const brandLayoutTouched = slf.brandLayout !== initSettings.brandLayout
const bannerLayoutTouched = slf.bannerLayout !== initSettings.bannerLayout
const bannerNotifyLayoutTouched =
slf.bannerNotifyLayout !== initSettings.bannerNotifyLayout

const bannerNotifyBgTouched =
slf.bannerNotifyBg !== initSettings.bannerNotifyBg

const postLayoutTouched = slf.postLayout !== initSettings.postLayout
const changelogLayoutTouched =
slf.changelogLayout !== initSettings.changelogLayout
Expand All@@ -116,6 +132,8 @@ const DashboardThread = T.model('DashboardThread', {
primaryColor: primaryColorTouched,
brandLayout: brandLayoutTouched,
bannerLayout: bannerLayoutTouched,
bannerNotifyLayout: bannerNotifyLayoutTouched,
bannerNotifyBg: bannerNotifyBgTouched,
postLayout: postLayoutTouched,
changelogLayout: changelogLayoutTouched,
alias: aliasTouched,
Expand DownExpand Up@@ -167,6 +185,8 @@ const DashboardThread = T.model('DashboardThread', {
'primaryColor',
'brandLayout',
'bannerLayout',
'bannerNotifyLayout',
'bannerNotifyBg',
'postLayout',
'changelogLayout',
],
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp