@arcblock/ux 1.16.20 → 1.16.24
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/Blocklet/index.js +3 -2
- package/lib/Footer/index.js +7 -6
- package/package.json +4 -4
- package/src/Blocklet/index.js +31 -22
- package/src/Footer/index.js +38 -12
package/lib/Blocklet/index.js
CHANGED
|
@@ -44,7 +44,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
|
|
|
44
44
|
const Div = _styledComponents.default.div.withConfig({
|
|
45
45
|
displayName: "Blocklet__Div",
|
|
46
46
|
componentId: "sc-3dga5l-0"
|
|
47
|
-
})(["&.arcblock-blocklet{
|
|
47
|
+
})(["&.arcblock-blocklet{padding:0 16px;background:", ";overflow:hidden;&:hover{filter:drop-shadow(0px 4px 12px rgba(92,92,92,0.04));}border-bottom:1px solid #f0f0f0;}.arcblock-blocklet__content{padding:16px 0 0 0;}.arcblock-blocklet__content--main{display:flex;align-items:center;cursor:pointer;}.arcblock-blocklet__content--body{overflow:hidden;flex:1;display:flex;align-items:flex-start;}.arcblock-blocklet__addons{padding:16px 0;}.arcblock-blocklet__cover{width:80px;height:80px;margin-right:12px;overflow:hidden;border-radius:12px;}.arcblock-blocklet__info{flex:1;overflow:hidden;.arcblock-blocklet__button{margin-top:16px;display:inline-block;}}.arcblock-blocklet__button--hover{&:not(.Mui-disabled){position:relative;z-index:1;&::before{content:'';border-radius:100vw;position:absolute;height:100%;width:100%;left:0;top:0;transition:opacity 0.3s;}&:hover::before{opacity:0;}&::after{content:'';position:absolute;height:100%;width:100%;background-color:", ";transform:scale(0.1);opacity:0;z-index:-1;border-radius:100vw;transition:transform 0.3s,opacity 0.3s,background-color 0.3s;}&:hover::after{opacity:1;transform-origin:center;transform:scale(1);}}&:not(.Mui-disabled){background-color:rgba(79,106,246,0.06);color:", ";}&:not(.Mui-disabled){&:hover{color:", ";}}}.arcblock-blocklet__title{margin:0;font-size:18px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__describe{margin:2px 0 0;color:#999;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}.arcblock-blocklet__addons{display:flex;justify-content:space-between;color:#999;font-size:14px;position:relative;}.arcblock-blocklet__addons--item{white-space:nowrap;}&.arcblock-blocklet--size-md{&:hover{position:relative;}.arcblock-blocklet__content{height:8.5em;}.arcblock-blocklet__title{margin-bottom:3px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;text-overflow:initial;white-space:initial;word-break:break-all;}.arcblock-blocklet__describe{white-space:normal;height:2.86em;}.arcblock-blocklet__button{margin-top:5px;}}&.arcblock-blocklet--size-sm,&.arcblock-blocklet--size-xs{.arcblock-blocklet__cover{width:40px;height:40px;border-radius:6px;}.arcblock-blocklet__content{padding:16px 0;}.arcblock-blocklet__addons{padding:8px 0;.arcblock-blocklet__addons--item{font-size:12px;}}}&.arcblock-blocklet--size-xs{.arcblock-blocklet__addons{display:none !important;}}"], props => props.theme.palette.common.white, props => props.theme.palette.primary.main, props => props.theme.palette.primary.main, props => props.theme.palette.common.white);
|
|
48
48
|
|
|
49
49
|
function BlockletIcon(_ref) {
|
|
50
50
|
let {
|
|
@@ -137,7 +137,7 @@ function Blocklet(_ref2) {
|
|
|
137
137
|
|
|
138
138
|
const actualSize = size === 'auto' ? isDownSm ? 'xs' : isDownMd ? 'sm' : 'md' : size; // eslint-disable-next-line no-nested-ternary
|
|
139
139
|
|
|
140
|
-
const didAvatarSize = size === 'auto' ? isUPLg ?
|
|
140
|
+
const didAvatarSize = size === 'auto' ? isUPLg ? 80 : 40 : size === 'md' ? 80 : 40;
|
|
141
141
|
const container = (0, _react.useRef)(null);
|
|
142
142
|
return /*#__PURE__*/_react.default.createElement(Div, Object.assign({}, rest, {
|
|
143
143
|
scaleClickZone: scaleClickZone,
|
|
@@ -182,6 +182,7 @@ function Blocklet(_ref2) {
|
|
|
182
182
|
}
|
|
183
183
|
}, button || onButtonClick && /*#__PURE__*/_react.default.createElement(_Button.default, {
|
|
184
184
|
rounded: true,
|
|
185
|
+
className: "arcblock-blocklet__button--hover",
|
|
185
186
|
variant: "contained",
|
|
186
187
|
color: "primary",
|
|
187
188
|
size: "small",
|
package/lib/Footer/index.js
CHANGED
|
@@ -47,14 +47,15 @@ function Footer(props) {
|
|
|
47
47
|
className: "footer-brand"
|
|
48
48
|
}, brand)), /*#__PURE__*/_react.default.createElement(_Typography.default, {
|
|
49
49
|
component: "p",
|
|
50
|
-
className: "footer-item"
|
|
50
|
+
className: "footer-item",
|
|
51
|
+
style: {
|
|
52
|
+
justifyContent: 'flex-end',
|
|
53
|
+
flexShrink: 0
|
|
54
|
+
}
|
|
51
55
|
}, "Powered by", /*#__PURE__*/_react.default.createElement(_Logo.default, {
|
|
52
56
|
mode: dark ? 'light' : 'dark',
|
|
53
57
|
layout: "horizontal",
|
|
54
|
-
|
|
55
|
-
transform: 'scale(0.6)',
|
|
56
|
-
opacity: 0.5
|
|
57
|
-
}
|
|
58
|
+
className: "logo-container"
|
|
58
59
|
}))));
|
|
59
60
|
}
|
|
60
61
|
|
|
@@ -76,4 +77,4 @@ Footer.defaultProps = {
|
|
|
76
77
|
const Container = _styledComponents.default.div.withConfig({
|
|
77
78
|
displayName: "Footer__Container",
|
|
78
79
|
componentId: "sc-1qpifuv-0"
|
|
79
|
-
})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100
|
|
80
|
+
})(["margin-top:64px;padding:24px 0 32px;border-top:1px solid ", ";box-sizing:border-box;width:100%;@media (max-width:540px){padding:8px 0;}.footer{display:flex;align-items:center;justify-content:space-between;.footer-item{color:", ";display:flex;align-items:center;flex-wrap:wrap;font-size:0.9rem;}.footer-brand{margin-left:8px;margin-right:8px;}.logo-container{margin:0 24px;width:90px;opacity:0.5;}@media (max-width:540px){.footer-item{font-size:0.7rem;}.logo-container{margin:0 0 0 16px;width:70px;height:40px;}}@media (max-width:380px){.footer-item{font-size:0.65rem;}.logo-container{margin:0 0 0 8px;height:24px;}}}"], props => props.dark ? props.theme.palette.grey[900] : '#dee2e7', props => props.theme.palette.grey[900]);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@arcblock/ux",
|
|
3
|
-
"version": "1.16.
|
|
3
|
+
"version": "1.16.24",
|
|
4
4
|
"description": "Common used react components for arcblock products",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"react",
|
|
@@ -53,10 +53,10 @@
|
|
|
53
53
|
"react": ">=16.12.0",
|
|
54
54
|
"react-ga": "^2.7.0"
|
|
55
55
|
},
|
|
56
|
-
"gitHead": "
|
|
56
|
+
"gitHead": "a23dc693aeb4487ddd6305666aece71f04cdbd49",
|
|
57
57
|
"dependencies": {
|
|
58
|
-
"@arcblock/icons": "^1.16.
|
|
59
|
-
"@arcblock/react-hooks": "^1.16.
|
|
58
|
+
"@arcblock/icons": "^1.16.24",
|
|
59
|
+
"@arcblock/react-hooks": "^1.16.24",
|
|
60
60
|
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
|
61
61
|
"@material-ui/core": "^4.12.3",
|
|
62
62
|
"@material-ui/icons": "4.11.2",
|
package/src/Blocklet/index.js
CHANGED
|
@@ -14,19 +14,17 @@ import Img from '../Img';
|
|
|
14
14
|
|
|
15
15
|
const Div = styled.div`
|
|
16
16
|
&.arcblock-blocklet {
|
|
17
|
-
border: 1px solid #f2f2f2;
|
|
18
17
|
padding: 0 16px;
|
|
19
|
-
border-radius: 12px;
|
|
20
18
|
background: ${props => props.theme.palette.common.white};
|
|
21
19
|
overflow: hidden;
|
|
22
20
|
&:hover {
|
|
23
21
|
filter: drop-shadow(0px 4px 12px rgba(92, 92, 92, 0.04));
|
|
24
22
|
}
|
|
23
|
+
border-bottom: 1px solid #f0f0f0;
|
|
25
24
|
}
|
|
26
25
|
.arcblock-blocklet__content {
|
|
27
|
-
padding: 16px 0;
|
|
26
|
+
padding: 16px 0 0 0;
|
|
28
27
|
}
|
|
29
|
-
|
|
30
28
|
.arcblock-blocklet__content--main {
|
|
31
29
|
display: flex;
|
|
32
30
|
align-items: center;
|
|
@@ -40,12 +38,11 @@ const Div = styled.div`
|
|
|
40
38
|
}
|
|
41
39
|
.arcblock-blocklet__addons {
|
|
42
40
|
padding: 16px 0;
|
|
43
|
-
border-top: 1px solid #f2f2f2;
|
|
44
41
|
}
|
|
45
42
|
.arcblock-blocklet__cover {
|
|
46
|
-
width:
|
|
47
|
-
height:
|
|
48
|
-
margin-right:
|
|
43
|
+
width: 80px;
|
|
44
|
+
height: 80px;
|
|
45
|
+
margin-right: 12px;
|
|
49
46
|
overflow: hidden;
|
|
50
47
|
border-radius: 12px;
|
|
51
48
|
}
|
|
@@ -58,9 +55,9 @@ const Div = styled.div`
|
|
|
58
55
|
display: inline-block;
|
|
59
56
|
}
|
|
60
57
|
}
|
|
61
|
-
//
|
|
62
|
-
.arcblock-blocklet__button {
|
|
63
|
-
|
|
58
|
+
// 覆盖 mui-button 的样式 做成 blocklet 内部 button 的专有样式
|
|
59
|
+
.arcblock-blocklet__button--hover {
|
|
60
|
+
&:not(.Mui-disabled) {
|
|
64
61
|
position: relative;
|
|
65
62
|
z-index: 1;
|
|
66
63
|
&::before {
|
|
@@ -95,14 +92,17 @@ const Div = styled.div`
|
|
|
95
92
|
}
|
|
96
93
|
}
|
|
97
94
|
|
|
98
|
-
|
|
95
|
+
&:not(.Mui-disabled) {
|
|
99
96
|
background-color: rgba(79, 106, 246, 0.06);
|
|
100
97
|
color: ${props => props.theme.palette.primary.main};
|
|
101
98
|
}
|
|
102
|
-
&:
|
|
103
|
-
|
|
99
|
+
&:not(.Mui-disabled) {
|
|
100
|
+
&:hover {
|
|
101
|
+
color: ${props => props.theme.palette.common.white};
|
|
102
|
+
}
|
|
104
103
|
}
|
|
105
104
|
}
|
|
105
|
+
|
|
106
106
|
.arcblock-blocklet__title {
|
|
107
107
|
margin: 0;
|
|
108
108
|
font-size: 18px;
|
|
@@ -130,13 +130,22 @@ const Div = styled.div`
|
|
|
130
130
|
.arcblock-blocklet__addons--item {
|
|
131
131
|
white-space: nowrap;
|
|
132
132
|
}
|
|
133
|
-
|
|
134
133
|
&.arcblock-blocklet--size-md {
|
|
135
134
|
&:hover {
|
|
136
135
|
position: relative;
|
|
137
136
|
}
|
|
137
|
+
.arcblock-blocklet__content {
|
|
138
|
+
height: 8.5em;
|
|
139
|
+
}
|
|
138
140
|
.arcblock-blocklet__title {
|
|
139
141
|
margin-bottom: 3px;
|
|
142
|
+
display: -webkit-box;
|
|
143
|
+
-webkit-box-orient: vertical;
|
|
144
|
+
-webkit-line-clamp: 2;
|
|
145
|
+
overflow: hidden;
|
|
146
|
+
text-overflow: initial;
|
|
147
|
+
white-space: initial;
|
|
148
|
+
word-break: break-all;
|
|
140
149
|
}
|
|
141
150
|
.arcblock-blocklet__describe {
|
|
142
151
|
white-space: normal;
|
|
@@ -148,14 +157,14 @@ const Div = styled.div`
|
|
|
148
157
|
}
|
|
149
158
|
&.arcblock-blocklet--size-sm,
|
|
150
159
|
&.arcblock-blocklet--size-xs {
|
|
151
|
-
.arcblock-blocklet__content {
|
|
152
|
-
padding: 12px 0;
|
|
153
|
-
}
|
|
154
160
|
.arcblock-blocklet__cover {
|
|
155
|
-
width:
|
|
156
|
-
height:
|
|
161
|
+
width: 40px;
|
|
162
|
+
height: 40px;
|
|
157
163
|
border-radius: 6px;
|
|
158
164
|
}
|
|
165
|
+
.arcblock-blocklet__content {
|
|
166
|
+
padding: 16px 0;
|
|
167
|
+
}
|
|
159
168
|
.arcblock-blocklet__addons {
|
|
160
169
|
padding: 8px 0;
|
|
161
170
|
.arcblock-blocklet__addons--item {
|
|
@@ -169,7 +178,6 @@ const Div = styled.div`
|
|
|
169
178
|
}
|
|
170
179
|
}
|
|
171
180
|
`;
|
|
172
|
-
|
|
173
181
|
function BlockletIcon({ name }) {
|
|
174
182
|
return <Icon name={name} color="inherit" size={15} style={{ marginRight: 8 }} />;
|
|
175
183
|
}
|
|
@@ -238,7 +246,7 @@ export default function Blocklet({
|
|
|
238
246
|
// eslint-disable-next-line no-nested-ternary
|
|
239
247
|
const actualSize = size === 'auto' ? (isDownSm ? 'xs' : isDownMd ? 'sm' : 'md') : size;
|
|
240
248
|
// eslint-disable-next-line no-nested-ternary
|
|
241
|
-
const didAvatarSize = size === 'auto' ? (isUPLg ?
|
|
249
|
+
const didAvatarSize = size === 'auto' ? (isUPLg ? 80 : 40) : size === 'md' ? 80 : 40;
|
|
242
250
|
const container = useRef(null);
|
|
243
251
|
|
|
244
252
|
return (
|
|
@@ -287,6 +295,7 @@ export default function Blocklet({
|
|
|
287
295
|
(onButtonClick && (
|
|
288
296
|
<Button
|
|
289
297
|
rounded
|
|
298
|
+
className="arcblock-blocklet__button--hover"
|
|
290
299
|
variant="contained"
|
|
291
300
|
color="primary"
|
|
292
301
|
size="small"
|
package/src/Footer/index.js
CHANGED
|
@@ -21,13 +21,12 @@ export default function Footer(props) {
|
|
|
21
21
|
<span className="footer-copy">© Copyright {copyYear} </span>
|
|
22
22
|
<span className="footer-brand">{brand}</span>
|
|
23
23
|
</Typography>
|
|
24
|
-
<Typography
|
|
24
|
+
<Typography
|
|
25
|
+
component="p"
|
|
26
|
+
className="footer-item"
|
|
27
|
+
style={{ justifyContent: 'flex-end', flexShrink: 0 }}>
|
|
25
28
|
Powered by
|
|
26
|
-
<Logo
|
|
27
|
-
mode={dark ? 'light' : 'dark'}
|
|
28
|
-
layout="horizontal"
|
|
29
|
-
style={{ transform: 'scale(0.6)', opacity: 0.5 }}
|
|
30
|
-
/>
|
|
29
|
+
<Logo mode={dark ? 'light' : 'dark'} layout="horizontal" className="logo-container" />
|
|
31
30
|
</Typography>
|
|
32
31
|
</Typography>
|
|
33
32
|
</Container>
|
|
@@ -57,17 +56,15 @@ const Container = styled.div`
|
|
|
57
56
|
box-sizing: border-box;
|
|
58
57
|
width: 100%;
|
|
59
58
|
|
|
59
|
+
@media (max-width: 540px) {
|
|
60
|
+
padding: 8px 0;
|
|
61
|
+
}
|
|
62
|
+
|
|
60
63
|
.footer {
|
|
61
64
|
display: flex;
|
|
62
65
|
align-items: center;
|
|
63
66
|
justify-content: space-between;
|
|
64
67
|
|
|
65
|
-
@media (max-width: 540px) {
|
|
66
|
-
flex-direction: column;
|
|
67
|
-
align-items: flex-start;
|
|
68
|
-
justify-content: flex-start;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
68
|
.footer-item {
|
|
72
69
|
color: ${props => props.theme.palette.grey[900]};
|
|
73
70
|
display: flex;
|
|
@@ -80,5 +77,34 @@ const Container = styled.div`
|
|
|
80
77
|
margin-left: 8px;
|
|
81
78
|
margin-right: 8px;
|
|
82
79
|
}
|
|
80
|
+
|
|
81
|
+
.logo-container {
|
|
82
|
+
margin: 0 24px;
|
|
83
|
+
width: 90px;
|
|
84
|
+
opacity: 0.5;
|
|
85
|
+
}
|
|
86
|
+
|
|
87
|
+
@media (max-width: 540px) {
|
|
88
|
+
.footer-item {
|
|
89
|
+
font-size: 0.7rem;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.logo-container {
|
|
93
|
+
margin: 0 0 0 16px;
|
|
94
|
+
width: 70px;
|
|
95
|
+
height: 40px;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
@media (max-width: 380px) {
|
|
100
|
+
.footer-item {
|
|
101
|
+
font-size: 0.65rem;
|
|
102
|
+
}
|
|
103
|
+
|
|
104
|
+
.logo-container {
|
|
105
|
+
margin: 0 0 0 8px;
|
|
106
|
+
height: 24px;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
83
109
|
}
|
|
84
110
|
`;
|