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.

refactor(tags-bar): new tags design#1144

Merged
mydearxym merged 2 commits intodevfromnew-tags-design
Aug 12, 2021
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
3 changes: 2 additions & 1 deletionsrc/components/DigestSentence/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,6 +21,7 @@ import {
PreviewWrapper,
PreviewText,
PreviewIcon,
ThunderIcon,
} from './styles'

/* eslint-disable-next-line */
Expand DownExpand Up@@ -69,7 +70,7 @@ const DigestSentence: FC<TProps> = ({
</MediaHintWrapper>
<PreviewWrapper>
<PreviewText>预览</PreviewText>
<PreviewIcon src={`${ICON}/shape/arrow-simple.svg`} />
<ThunderIcon />
</PreviewWrapper>
</Wrapper>
)
Expand Down
8 changes: 7 additions & 1 deletionsrc/components/DigestSentence/styles/index.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
import styled from 'styled-components'

import type { TTestable, TSpace, TSIZE_SM } from '@/spec'

import Img from '@/Img'
import ThunderSVG from '@/icons/Thunder'
import { theme } from '@/utils/themes'
import css from '@/utils/css'

Expand DownExpand Up@@ -66,5 +68,9 @@ export const PreviewIcon = styled(Img)`
export const PreviewText = styled.span`
color: ${theme('thread.extraInfo')};
font-size: 12px;
margin-right: 5px;
`
export const ThunderIcon = styled(ThunderSVG)`
fill: ${theme('thread.extraInfo')};
${css.size(18)};
transform: rotate(12deg);
`
21 changes: 21 additions & 0 deletionssrc/components/Icons/Thunder.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
import { memo, SVGProps } from 'react'

const Thunder = (props: SVGProps<SVGSVGElement>) => {
return (
<svg
className="prefix__icon"
viewBox="0 0 1024 1024"
xmlns="http://www.w3.org/2000/svg"
width={200}
height={200}
{...props}
>
<defs>
<style />
</defs>
<path d="M668.672 468.053L385.877 833.024c-9.13 9.13-18.261 0-18.261-9.13L422.4 531.967H312.917c-9.13 0-9.13-9.13-9.13-9.13L586.58 157.866c9.131-9.131 18.262 0 18.262 9.13l-45.568 291.926h100.352c9.045 0 9.045 9.13 9.045 9.13z" />
</svg>
)
}

export default memo(Thunder)
3 changes: 1 addition & 2 deletionssrc/components/Img/LazyLoadImg.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
import { FC, Fragment, ReactNode, memo, useState } from 'react'

import { LazyLoadImage } from 'react-lazy-load-image-component'
import 'react-lazy-load-image-component/src/effects/blur.css'

import { Wrapper, FallbackWrapper } from './styles/lazy_load_image'

Expand All@@ -24,7 +23,7 @@ const LazyLoadImg: FC<TProps> = ({
src,
alt = 'image',
fallback = null,
visibleByDefault =false,
visibleByDefault =true,
}) => {
const [imgLoaded, setImgLoaded] = useState(false)

Expand Down
18 changes: 18 additions & 0 deletionssrc/containers/layout/ThemePalette/ThirdPartyOverWrite.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -58,6 +58,24 @@ const CustomOverWrite = createGlobalStyle`
font-size: 1.3em;
color: ${theme('editor.content')};
}

.lazy-load-image-background.blur {
filter: blur(3px);
}

.lazy-load-image-background.blur.lazy-load-image-loaded {
filter: blur(0);
transition: filter 0.2s;
}

.lazy-load-image-background.blur > img {
opacity: 0;
}

.lazy-load-image-background.blur.lazy-load-image-loaded > img {
opacity: 1;
transition: opacity 0.2s;
}
`

export default CustomOverWrite
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -14,7 +14,7 @@ import Sticky from '@/components/Sticky'
import PublishButton from '@/components/Buttons/PublishButton'
import CommunityJoinBadge from '@/containers/tool/CommunityJoinBadge'
import TagsBar from '@/containers/unit/TagsBar'
import PromotionList from '@/components/PromotionList'
//import PromotionList from '@/components/PromotionList'

import type { TBaseProps } from '../index'

Expand DownExpand Up@@ -46,7 +46,7 @@ const ClassicLayout: FC<TProps> = ({
<TagsBarWrapper>
<TagsBar onSelect={onTagSelect} />
</TagsBarWrapper>
<PromotionList onClose={onAdsClose} />
{/*<PromotionList onClose={onAdsClose} /> */}
</Sticky>
)
}
Expand Down
4 changes: 2 additions & 2 deletionssrc/containers/unit/TagsBar/DesktopView/Folder.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -82,7 +82,7 @@ const Folder: FC<TProps> = ({
/>
<Title>{title}</Title>
{!isFolderOpen&&isActiveTagInFolder&&(
<TagItemtag={activeTag}activeinline/>
<TagItemtag={activeTag}active/>
)}
</Header>

Expand All@@ -109,7 +109,7 @@ const Folder: FC<TProps> = ({
)
}}
>
<SubTogglePrefixIconsrc={`${ICON}/shape/more.svg`}/>
<SubTogglePrefixIconsrc={`${ICON}/shape/more-l.svg`}/>
<SubToggleTitle>
{curDisplayCount===MAX_DISPLAY_COUNT ?'展开更多' :'收起'}
</SubToggleTitle>
Expand Down
2 changes: 1 addition & 1 deletionsrc/containers/unit/TagsBar/DesktopView/GobackTag.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -12,7 +12,7 @@ type TProps = {
const GobackTag: FC<TProps> = ({ onSelect }) => {
return (
<Wrapper onClick={() => onSelect(emptyTag)}>
<TagIcon src={`${ICON}/hash-solid.svg`} />
<TagIcon src={`${ICON}/shape/reset.svg`} />
<TagTitle>全部标签</TagTitle>
</Wrapper>
)
Expand Down
38 changes: 17 additions & 21 deletionssrc/containers/unit/TagsBar/DesktopView/TagItem.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,42 @@
import { FC } from 'react'

import { Trans } from '@/utils/i18n'
import type { TTag } from '@/spec'
import { cutRest } from '@/utils/helper'
import { Trans } from '@/utils/i18n'

// import DotDivider from '@/components/DotDivider'
// import TagCount from './TagCount'

import {
Wrapper,
HashWrapper,
HashSign,
TagTitle,
// CountInfoWrapper,
Tag,
Title,
RawWrapper,
Raw,
} from '../styles/desktop_view/tag_item'

type TProps = {
tag: TTag
active: boolean
activeid?: string | null
inline?: boolean
onSelect?: (tag?: TTag) => void
}

const TagItem: FC<TProps> = ({
tag,
active,
activeid,
inline = false,
onSelect,
}) => {
const TagItem: FC<TProps> = ({ tag, active, activeid, onSelect }) => {
return (
<Wrapper $active={active} $inline={inline}>
<Wrapper $active={active}>
<HashWrapper>
<HashSign
color={tag.color}
$active={active}
$inline={inline}
activeid={activeid}
/>
<HashSign color={tag.color} $active={active} activeid={activeid} />
</HashWrapper>
<TagTitle $active={active} $inline={inline} onClick={() => onSelect(tag)}>
{Trans(tag.title)}
</TagTitle>
<Tag $active={active} color={tag.color} onClick={() => onSelect(tag)}>
<Title>{cutRest(Trans(tag.title), 10)}</Title>
<RawWrapper $active={active}>
{/* <DotDivider radius={2} space={6} /> */}
<Raw>{tag.raw}</Raw>
</RawWrapper>
</Tag>
{/* <SpaceGrow />

{!inline && (
Expand Down
5 changes: 3 additions & 2 deletionssrc/containers/unit/TagsBar/DesktopView/index.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -27,6 +27,7 @@ type TProps = Omit<TTagProps, 'view'>
const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
useInit(store)
const { groupedTags, tagsData, activeTagData } = store
console.log('# groupedTags -> ', groupedTags)
const groupsKeys = keys(groupedTags) as string[]

return (
Expand All@@ -35,7 +36,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
<GobackTag
onSelect={(tag) => {
onTagSelect(tag)
onSelect()
onSelect?.()
}}
/>
)}
Expand All@@ -48,7 +49,7 @@ const TagsBarContainer: FC<TProps> = ({ tagsBar: store, onSelect }) => {
activeTag={activeTagData}
onSelect={(tag) => {
onTagSelect(tag)
onSelect()
onSelect?.()
}}
/>
))}
Expand Down
17 changes: 5 additions & 12 deletionssrc/containers/unit/TagsBar/store.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -16,6 +16,8 @@ import type {

import{markStates,toJS}from'@/utils/mobx'
import{groupByKey}from'@/utils/helper'
import{mockTags}from'@/utils/mock'

import{Tag,emptyTag}from'@/model'

constTagsBar=T.model('TagsBar',{
Expand All@@ -35,25 +37,16 @@ const TagsBar = T.model('TagsBar', {
returnroot.viewing.activeThread
},
gettagsData():TTag[]{
returntoJS(self.tags)
// return toJS(self.tags)
returnmockTags(15)
},
getactiveTagData():TTag{
returntoJS(self.activeTag)||emptyTag
},
getgroupedTags():TGroupedTags{
const{ tagsData}=selfasTStore

returngroupByKey(
tagsData.map((tag)=>{
if(parseInt(tag.id,10)<4){
tag.group='这是第一组'
}else{
tag.group='这是第二组'// '__default__'
}
returntag
}),
'group',
)
returngroupByKey(tagsData,'group')
},
}))
.actions((self)=>({
Expand Down
10 changes: 5 additions & 5 deletionssrc/containers/unit/TagsBar/styles/desktop_view/folder.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -41,8 +41,9 @@ export const Content = styled.div<{ isOpen: boolean }>`
`
export const SubToggle = styled.div`
${css.flex('align-center')};
margin-left: 5px;
opacity: 0.5;
margin-top: 5px;
margin-left: 2px;
opacity: 0.6;

&:hover {
opacity: 0.8;
Expand All@@ -52,12 +53,11 @@ export const SubToggle = styled.div`
export const SubToggleTitle = styled.div`
color: ${theme('tags.text')};
font-size: 12px;
margin-left:5px;
margin-left:6px;
padding: 2px;
border-radius: 5px;
`
export const SubTogglePrefixIcon = styled(Img)`
fill: ${theme('tags.text')};
${css.size(14)};
transform: rotate(90deg);
${css.size(13)};
`
19 changes: 5 additions & 14 deletionssrc/containers/unit/TagsBar/styles/desktop_view/goback_tag.ts
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -5,29 +5,20 @@ import { theme } from '@/utils/themes'
import css from '@/utils/css'
import Img from '@/Img'

export const Wrapper = styled.div<TActive>`
export const Wrapper = styled.div`
${css.flex('align-center')};
margin-bottom:5px;
margin-bottom:8px;
max-width: 180px;
padding: 5px;
border-radius: 5px;

background: ${({ active }) => (active ? '#0e303d' : 'transparent')};

&:hover {
background: #0e303d;
}
padding: 5px 2px;
`
export const TagIcon = styled(Img)`
fill: ${theme('banner.desc')};
margin-right:10px;
margin-right:6px;
${css.size(14)};
transform: rotate(17deg);
`

export const TagTitle = styled.div`
color: ${theme('tags.text')};
font-size:15px;
font-size:14px;
letter-spacing: 1px;

&:hover {
Expand Down
Loading
[8]ページ先頭
©2009-2025 Movatter.jp