Skip to content
This repository was archived by the owner on Nov 8, 2022. It is now read-only.

Commit f9636bf

Browse files
mydearxymmydearxym
authored
refactor(collect-folder): rename && redesign old one (#1129)
* fix(tooltip): mini adjust * feat(collection-folder): basic UI done * feat(collection-folder): remove old FavoritesCats * fix(tooltip): hide logic, edge case * feat(collection-folder): creator redesign * feat(collection-folder): wip * style(arrow-button): adjust metric * feat(folder): add inactive concept
1 parent 380be47 commit f9636bf

File tree

64 files changed

+1132
-968
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

64 files changed

+1132
-968
lines changed

‎src/components/Buttons/ArrowButton.tsx‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
*
55
*/
66

7-
import { FC, ReactNode, useRef, useState, useEffect, memo } from 'react'
7+
import { FC, ReactNode, memo } from 'react'
88

99
import type { TSIZE } from '@/spec'
1010
import { ICON } from '@/config'
@@ -40,32 +40,12 @@ const ArrowButton: FC<TProps> = ({
4040
? `${ICON}/shape/arrow.svg`
4141
: `${ICON}/shape/arrow-simple.svg`
4242

43-
const leftTextRef = useRef(null)
44-
const rightTextRef = useRef(null)
45-
46-
const [leftChildWidth, setLeftTextWidth] = useState(50)
47-
const [rightChildWidth, setRightTextWidth] = useState(50)
48-
49-
useEffect(() => {
50-
if (leftTextRef) {
51-
setLeftTextWidth(leftTextRef.current?.clientWidth)
52-
}
53-
}, [leftTextRef])
54-
55-
useEffect(() => {
56-
if (rightTextRef) {
57-
setRightTextWidth(rightTextRef.current?.clientWidth)
58-
}
59-
}, [rightTextRef])
60-
61-
const textWidth = direction === 'left' ? leftChildWidth : rightChildWidth
62-
6343
return (
6444
<Wrapper
6545
onClick={() => !disabled && onClick()}
6646
dimWhenIdle={dimWhenIdle}
47+
direction={direction}
6748
size={size}
68-
width={textWidth}
6949
disabled={disabled}
7050
>
7151
{direction === 'left' ? (
@@ -76,15 +56,11 @@ const ArrowButton: FC<TProps> = ({
7656
src={iconSrc}
7757
disabled={disabled}
7858
/>
79-
<Text ref={leftTextRef} size={size}>
80-
{children}
81-
</Text>
59+
<Text size={size}>{children}</Text>
8260
</>
8361
) : (
8462
<>
85-
<Text ref={rightTextRef} size={size}>
86-
{children}
87-
</Text>
63+
<Text size={size}>{children}</Text>
8864
<RightIcon
8965
arrowStyle={arrowStyle}
9066
size={size}

‎src/components/Buttons/MenuButton/index.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,10 +22,10 @@ export type TOption = {
2222
type TProps = {
2323
children: ReactNode
2424
options: TOption[]
25-
extraOptions: TOption[]
25+
extraOptions?: TOption[]
2626
placement?: TTooltipPlacement
2727
panelMinWidth?: string
28-
onClick: (key?: string) => void
28+
onClick?: (key?: string) => void
2929
}
3030

3131
const MenuButton: FC<TProps> = ({

‎src/components/Buttons/styles/arrow_button.ts‎

Lines changed: 27 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,30 +4,36 @@ import Img from '@/Img'
44
import { css } from '@/utils'
55

66
import {
7-
getWidth,
87
getIconSize,
98
getFontSize,
109
getMargin,
1110
getSimpleMargin,
11+
//
12+
getArrowTopOffset,
13+
getArrowMaxWidth,
14+
getArrowInitWidth,
1215
} from './metircs/arrow_button'
1316

1417
type TWrapper = {
1518
disabled: boolean
1619
dimWhenIdle: boolean
20+
direction: 'left' | 'right'
1721
size: string
18-
width: number
1922
}
2023
export const Wrapper = styled.div<TWrapper>`
24+
position: relative;
2125
${css.flex('align-center')};
2226
opacity: ${({ dimWhenIdle, disabled }) =>
2327
dimWhenIdle || disabled ? '0.65' : 1};
24-
min-width: ${({ size, width }) => getWidth(size, width)};
28+
justify-content: ${({ direction }) =>
29+
direction === 'left' ? 'flex-end' : 'flex-start'};
30+
margin-left: ${({ size }) => getArrowMaxWidth(size)};
2531
2632
&:hover {
2733
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
2834
opacity: ${({ disabled }) => (disabled ? 0.65 : 1)};
2935
}
30-
transition: all 0.25s;
36+
transition: all 0.2s;
3137
`
3238
export const Text = styled.div<{ size: string }>`
3339
font-size: ${({ size }) => getFontSize(size)};
@@ -42,33 +48,37 @@ export const Icon = styled(Img)<{ size: string }>`
4248
`
4349
type TIcon = { size: string; arrowStyle: string; disabled: boolean }
4450
export const LeftIcon = styled(Icon)<TIcon>`
51+
position: absolute;
52+
top: ${({ size }) => getArrowTopOffset(size)};
53+
left: ${({ size }) => `-${getArrowInitWidth(size)}`};
54+
55+
opacity: 0.6;
4556
margin-right: ${({ size, arrowStyle }) =>
4657
arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
4758
4859
${Wrapper}:hover & {
49-
margin-left: ${({ arrowStyle, disabled }) => {
60+
opacity: 1;
61+
left: ${({ size, disabled }) => {
5062
if (disabled) return 0
51-
return arrowStyle === 'default' ? '-4px' : '-2px'
63+
return `-${getArrowMaxWidth(size)}`
5264
}};
53-
/* margin-left: ${({ size, arrowStyle, disabled }) => {
54-
return arrowStyle === 'default'
55-
? `-${getMargin(size, !disabled)}`
56-
: `-${getSimpleMargin(size, !disabled)}`
57-
}}; */
58-
fill: #327ca1;
5965
}
6066
`
6167
export const RightIcon = styled(Icon)<TIcon>`
68+
position: absolute;
69+
top: ${({ size }) => getArrowTopOffset(size)};
70+
right: ${({ size }) => `-${getArrowInitWidth(size)}`};
71+
72+
opacity: 0.6;
6273
margin-left: ${({ size, arrowStyle }) =>
6374
arrowStyle === 'default' ? getMargin(size) : getSimpleMargin(size)};
6475
6576
${Wrapper}:hover & {
66-
margin-left: ${({ size, arrowStyle, disabled }) => {
67-
return arrowStyle === 'default'
68-
? getMargin(size, !disabled)
69-
: getSimpleMargin(size, !disabled)
77+
opacity: 1;
78+
right: ${({ size, disabled }) => {
79+
if (disabled) return 0
80+
return `-${getArrowMaxWidth(size)}`
7081
}};
71-
fill: #327ca1;
7282
}
7383
7484
transform: rotate(180deg);

‎src/components/Buttons/styles/button.ts‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@ export const Wrapper = styled.button<TButton>`
2626
border: 1px solid transparent;
2727
white-space: nowrap;
2828
padding: ${({ size }) => getPadding(size)};
29-
font-size: 14px;
29+
font-size: ${({ size }) => getFontSize(size)};
30+
/* font-size: 14px; */
3031
border-radius: 4px;
3132
height: ${({ size }) => getHeight(size)};
3233
user-select: none;
33-
transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
34+
transition: all 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
3435
position: relative;
3536
3637
color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -39,7 +40,7 @@ export const Wrapper = styled.button<TButton>`
3940
border-color: ${({ noBorder, disabled }) =>
4041
getBorderColor(noBorder, disabled)};
4142
42-
opacity: ${({ noBorder }) => (noBorder ? '0.7' : 1)};
43+
opacity: ${({ noBorder }) => (noBorder ? '0.8' : 1)};
4344
4445
&:hover {
4546
color: ${({ ghost, disabled }) => getColor(ghost, disabled)};
@@ -89,34 +90,27 @@ export const LoadingMask = styled.div<{ width: string }>`
8990
left: 0;
9091
background: ${({ width }) => (width === '100%' ? 'transparent' : '#2c6b94')};
9192
z-index: 1;
92-
transition: width 0.3s;
93+
transition: width 0.1s;
9394
`
9495
export const RedWrapper = styled(Wrapper)`
9596
color: ${({ ghost }) => (ghost ? theme('baseColor.red') : 'white')};
9697
background-color: ${({ ghost }) =>
9798
!ghost ? theme('baseColor.red') : 'transparent'};
98-
border-color: ${theme('baseColor.red')};
99+
100+
border-color: ${({ noBorder }) =>
101+
noBorder ? 'transparent' : theme('baseColor.red')};
99102
100103
&:hover {
101-
border: 2px solid;
102104
background-color: ${({ ghost }) =>
103105
!ghost ? lighten(0.1, 'tomato') : 'transparent'};
104-
border-color: ${lighten(0.1, 'tomato')};
105-
font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
106106
}
107107
&:focus {
108-
border: 2px solid;
109108
background-color: ${({ ghost }) =>
110109
!ghost ? lighten(0.1, 'tomato') : 'transparent'};
111-
border-color: ${lighten(0.1, 'tomato')};
112-
font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
113110
}
114111
&:active {
115-
border: 2px solid;
116112
background-color: ${({ ghost }) =>
117113
!ghost ? lighten(0.1, 'tomato') : 'transparent'};
118-
border-color: ${lighten(0.1, 'tomato')};
119-
font-weight: ${({ ghost }) => (ghost ? 'bold' : 'normal')};
120114
}
121-
transition: all 0.25s;
115+
transition: all 0.1s;
122116
`

‎src/components/Buttons/styles/metircs/arrow_button.ts‎

Lines changed: 52 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -17,25 +17,6 @@ const MEDIUM_MARGIN_HOVER = 10
1717
const LARGE_MARGIN = 6
1818
const LARGE_MARGIN_HOVER = 10
1919

20-
// arrow button should have width
21-
// otherwise the arrow will jump
22-
export const getWidth = (size: string, width = 30): string => {
23-
switch (size) {
24-
case SIZE.TINY: {
25-
return `${width + TINY_SIZE + TINY_MARGIN_HOVER}px`
26-
}
27-
case SIZE.SMALL: {
28-
return `${width + SMALL_SIZE + SMALL_MARGIN_HOVER}px`
29-
}
30-
case SIZE.MEDIUM: {
31-
return `${width + MEDIUM_SIZE + MEDIUM_MARGIN_HOVER}px`
32-
}
33-
default: {
34-
return `${width + LARGE_SIZE + LARGE_MARGIN_HOVER}px`
35-
}
36-
}
37-
}
38-
3920
export const getIconSize = (size: string): string => {
4021
switch (size) {
4122
case SIZE.TINY: {
@@ -103,3 +84,55 @@ export const getSimpleMargin = (size: string, hover = false): string => {
10384
}
10485
}
10586
}
87+
88+
//
89+
export const getArrowTopOffset = (size: string): string => {
90+
switch (size) {
91+
case SIZE.TINY: {
92+
return '3px;'
93+
}
94+
case SIZE.SMALL: {
95+
return '4px;'
96+
}
97+
case SIZE.MEDIUM: {
98+
return '5px;'
99+
}
100+
default: {
101+
return '6px;'
102+
}
103+
}
104+
}
105+
106+
export const getArrowMaxWidth = (size: string): string => {
107+
switch (size) {
108+
case SIZE.TINY: {
109+
return '18px;'
110+
}
111+
case SIZE.SMALL: {
112+
return '20px;'
113+
}
114+
case SIZE.MEDIUM: {
115+
return '25px;'
116+
}
117+
default: {
118+
return '28px;'
119+
}
120+
}
121+
}
122+
123+
export const getArrowInitWidth = (size: string): string => {
124+
switch (size) {
125+
case SIZE.TINY: {
126+
return '15px;'
127+
}
128+
case SIZE.SMALL: {
129+
return '17px;'
130+
}
131+
case SIZE.MEDIUM: {
132+
return '20px;'
133+
}
134+
default: {
135+
return '23px;'
136+
}
137+
}
138+
}

‎src/components/Buttons/styles/metircs/button.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ export const getHeight = (size: string): string => {
6363
export const getPadding = (size: string): string => {
6464
switch (size) {
6565
case SIZE.TINY: {
66-
return '1px 5px'
66+
return '0 4px'
6767
}
6868

6969
case SIZE.SMALL: {

‎src/components/Checker/styles/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ export const Icon = styled(Img)<TItem>`
3535
cursor: pointer;
3636
`
3737
export const ChildWrapper = styled.div<TItem>`
38-
color: ${theme('thread.articleDigest')};
39-
opacity: ${({ checked }) => (checked ? 1 : 0.9)};
38+
color: ${({ checked }) =>
39+
checked ? theme('thread.articleTitle') : theme('thread.articleDigest')};
4040
font-size: ${({ size }) => getFontSize(size)};
4141
margin-left: 6px;
4242
cursor: pointer;

‎src/components/Folder/Content.js‎

Lines changed: 0 additions & 24 deletions
This file was deleted.

‎src/components/Folder/Content.tsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { FC, memo } from 'react'
2+
import TimeAgo from 'timeago-react'
3+
4+
import { ICON } from '@/config'
5+
6+
import { Wrapper, Info, Total, Unit, Text, LockIcon } from './styles/content'
7+
8+
type TProps = {
9+
total?: number
10+
updatedAt?: string
11+
lock?: boolean
12+
inactive: boolean
13+
}
14+
15+
const Content: FC<TProps> = ({ total, updatedAt, lock, inactive }) => {
16+
return (
17+
<Wrapper inactive={inactive}>
18+
{lock && <LockIcon src={`${ICON}/shape/lock.svg`} />}
19+
<Info>
20+
<Total>
21+
{total} <Unit>项</Unit>
22+
</Total>
23+
<Text>
24+
<TimeAgo datetime={updatedAt} locale="zh_CN" />
25+
</Text>
26+
</Info>
27+
</Wrapper>
28+
)
29+
}
30+
31+
export default memo(Content)

0 commit comments

Comments
 (0)