Skip to content

Commit 49e2641

Browse files
Tshepo1103-labTshepo1103-lab
committed
fix: fixing the style of the thumbnail
1 parent 3981ce4 commit 49e2641

File tree

2 files changed

+97
-97
lines changed

2 files changed

+97
-97
lines changed

‎shesha-reactjs/src/components/fileUpload/index.tsx‎

Lines changed: 19 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -150,15 +150,11 @@ export const FileUpload: FC<IFileUploadProps> = ({
150150
<DeleteOutlined title="Remove" />
151151
</a>
152152
)}
153-
{isImageType(fileInfo?.type) ? (
153+
{
154154
<a onClick={onPreview} style={{ color: color }}>
155155
<EyeOutlined title="Preview" />
156156
</a>
157-
) : (
158-
<a onClick={() => downloadFile({ fileId: fileInfo?.id, fileName: fileInfo?.name })} style={{ color: color }}>
159-
<DownloadOutlined title="Download" />
160-
</a>
161-
)}
157+
}
162158
</Space>
163159
);
164160
};
@@ -177,28 +173,33 @@ export const FileUpload: FC<IFileUploadProps> = ({
177173
const styledfileControls = () => {
178174
return (
179175
fileInfo && (
180-
<div style={{width: '90px', height: '90px', display: 'flex', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', overflow: 'hidden', fontSize: '35px'}}>
176+
<div className={styles.styledFileControls}>
181177
{iconRender(fileInfo)}
182178
<div className={styles.overlayThumbnailControls} style={{fontSize: '15px'}}>{fileControls('#fff')}</div>
183179
</div>
184180
)
185181
);
186182
};
183+
187184
const renderFileItem = (file: any) => {
188185
const showThumbnailControls = !isUploading && listType === 'thumbnail';
189186
const showTextControls = listType === 'text';
190187

191188
return (
192-
<div style={{ display: 'flex', flexDirection: 'column', alignItems: 'center', gap: '8px' }}>
193-
<div style={{backgroundColor: '#f2f2f2', display: 'flex', width: '90px', height: '90px', alignItems: 'center', justifyContent: 'center', borderRadius: '8px', overflow: 'hidden',}}>
194-
{showThumbnailControls && styledfileControls()}
195-
</div>
196-
{!hideFileName && (
197-
<div style={{ textAlign: 'center', maxWidth: '90px', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
198-
{file.name} ({filesize(file.size)})
199-
</div>
200-
)}
201-
{showTextControls && fileControls(theme.application.primaryColor)}
189+
<div>
190+
{showThumbnailControls && styledfileControls()}
191+
<a title={file.name}>
192+
<Space>
193+
{isUploading ? (
194+
<span><SyncOutlined spin /></span>
195+
) : (
196+
<>
197+
{(listType === 'text' || !hideFileName) && `${file.name} (${filesize(file.size)})`}
198+
{showTextControls && fileControls(theme.application.primaryColor)}
199+
</>
200+
)}
201+
</Space>
202+
</a>
202203
</div>
203204
);
204205
};
@@ -248,7 +249,7 @@ export const FileUpload: FC<IFileUploadProps> = ({
248249
);
249250
}
250251

251-
return <div className='ant-upload-list-item-name ant-upload-list-item-name-stub thumbnail-stub'>{uploadButton}</div>;
252+
return <div className={listType === 'thumbnail' ? 'ant-upload-list-item-name ant-upload-list-item-name-stub thumbnail-stub' : ''}>{uploadButton}</div>;
252253
};
253254

254255
const renderUploader = () => {

‎shesha-reactjs/src/components/fileUpload/styles/styles.ts‎

Lines changed: 78 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -33,13 +33,13 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
3333
borderStyle = 'solid',
3434
color,
3535
fontFamily = 'Segoe UI',
36-
fontSize = '14px',
36+
fontSize = '25px',
3737
fontWeight = '400',
3838
height,
3939
maxHeight,
4040
minHeight,
4141
textAlign = 'center',
42-
...rest
42+
4343
} = style || {};
4444

4545
const { layout, isDragger } = model;
@@ -51,55 +51,60 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
5151
const storedFilesRendererBtnContainer = 'stored-files-renderer-btn-container';
5252
const storedFilesRendererNoFiles = 'stored-files-renderer-no-files';
5353

54+
const commonBorderStyles = css`
55+
border: ${borderWidth} ${borderStyle} ${borderColor};
56+
border-top: ${borderTopWidth || borderWidth} ${borderTopStyle || borderStyle} ${borderTopColor || borderColor};
57+
border-right: ${borderRightWidth || borderWidth} ${borderRightStyle || borderStyle} ${borderRightColor || borderColor};
58+
border-left: ${borderLeftWidth || borderWidth} ${borderLeftStyle || borderStyle} ${borderLeftColor || borderColor};
59+
border-bottom: ${borderBottomWidth || borderWidth} ${borderBottomStyle || borderStyle} ${borderBottomColor || borderColor};
60+
box-shadow: ${boxShadow};
61+
`;
62+
63+
const commonTextStyles = css`
64+
color: ${color || token.colorPrimary};
65+
font-family: ${fontFamily};
66+
font-size: ${fontSize};
67+
font-weight: ${fontWeight};
68+
text-align: ${textAlign};
69+
`;
70+
5471
const shaStoredFilesRenderer = cx(
5572
'sha-stored-files-renderer',
5673
css`
5774
--thumbnail-width: ${layout ? (width ?? height ?? '54px') : '100%'};
5875
--thumbnail-height: ${layout ? (height ?? width ?? '54px') : '100%'};
59-
--ant-border-radius-xs: ${borderRadius ?? '8px'} !important;
60-
--ant-border-radius-sm: ${borderRadius ?? '8px'} !important;
61-
--ant-border-radius-lg: ${borderRadius ?? '8px'} !important;
62-
--ant-button-content-font-size: ${fontSize ?? '14px'} !important;
63-
--ant-button-font-weight: ${fontWeight ?? '400'} !important;
64-
--ant-font-family: ${fontFamily ?? 'Segoe UI'} !important;
65-
--ant-button-font-weight: ${fontWeight ?? '400'} !important;
66-
${rest}
67-
max-height: auto;
76+
--ant-border-radius-xs: ${borderRadius} !important;
77+
--ant-border-radius-sm: ${borderRadius} !important;
78+
--ant-border-radius-lg: ${borderRadius} !important;
79+
--ant-button-content-font-size: ${fontSize} !important;
80+
--ant-button-font-weight: ${fontWeight} !important;
81+
--ant-font-family: ${fontFamily} !important;
6882
height: ${height ?? '54px'} !important;
6983
width: ${width ?? '54px'} !important;
84+
max-height: ${maxHeight ?? 'auto'} !important;
85+
min-height: ${minHeight} !important;
86+
max-width: ${maxWidth} !important;
87+
min-width: ${minWidth} !important;
7088
7189
.ant-upload-select-picture-card {
7290
width: var(--thumbnail-width) !important;
7391
height: var(--thumbnail-height) !important;
92+
background-position: ${backgroundPosition} !important;
93+
background-repeat: ${backgroundRepeat} !important;
94+
background-size: ${backgroundSize} !important;
7495
}
7596
76-
.ant-upload-list-picture-card-container {
77-
width: var(--thumbnail-width) !important;
78-
height: var(--thumbnail-height) !important;
79-
}
80-
81-
.ant-upload-list-picture-card .ant-upload-list-item {
97+
.ant-upload-list-item {
8298
width: var(--thumbnail-width) !important;
83-
height: var(--thumbnail-height) !important;
84-
85-
img {
86-
width: 100% !important;
87-
height: 100% !important;
88-
object-fit: contain !important;
89-
}
90-
.ant-image .anticon {
91-
border-radius: ${borderRadius ?? '8px'} !important;
92-
display: block !important;
93-
94-
}
99+
height: calc(var(--thumbnail-height) + 32px) !important;
100+
border-top: ${borderTop} !important;
101+
border-bottom: ${borderBottom} !important;
102+
border-right: ${borderRight} !important;
95103
}
96104
97-
.ant-upload-list-picture-card .ant-upload-list-item-thumbnail {
98-
img {
99-
width: 100% !important;
100-
height: 100% !important;
101-
object-fit: contain !important;
102-
}
105+
.ant-upload-list-picture-card {
106+
height: calc(var(--thumbnail-height) + ${fontSize} * 2 + 32px) !important;
107+
padding-bottom: 1rem;
103108
}
104109
105110
.ant-upload-list-item-image {
@@ -110,64 +115,42 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
110115
111116
.ant-upload:not(.ant-upload-disabled) {
112117
.icon {
113-
color: ${token.colorPrimary} !important;
118+
color: ${color || token.colorPrimary} !important;
114119
}
115120
}
116121
117122
.ant-upload-list-item {
118123
--ant-line-width: 0px !important;
119124
--ant-padding-xs: 0px !important;
120-
--font-size: ${fontSize ?? '14px'} !important;
121-
--ant-font-size: ${fontSize ?? '14px'} !important;
122-
border-radius: ${borderRadius ?? '8px'} !important;
125+
--font-size: ${fontSize} !important;
126+
--ant-font-size: ${fontSize} !important;
127+
border-radius: ${borderRadius} !important;
123128
display: flex;
124129
125130
:before {
126131
top: 0;
127132
width: 100% !important;
128-
border-radius: ${borderRadius ?? '8px'} !important;
133+
border-radius: ${borderRadius} !important;
129134
height: 100% !important;
130135
}
131136
}
132137
133138
.ant-upload-list-item-thumbnail {
134-
border-radius: ${borderRadius ?? '8px'} !important;
139+
border-radius: ${borderRadius} !important;
135140
padding: 0 !important;
136-
background: ${background ?? backgroundImage ?? (backgroundColor || '#fff')} !important;
137-
border: ${borderWidth} ${borderStyle} ${borderColor};
138-
border-top: ${borderTopWidth || borderWidth} ${borderTopStyle || borderStyle} ${borderTopColor || borderColor};
139-
border-right: ${borderRightWidth || borderWidth} ${borderRightStyle || borderStyle}
140-
${borderRightColor || borderColor};
141-
border-left: ${borderLeftWidth || borderWidth} ${borderLeftStyle || borderStyle}
142-
${borderLeftColor || borderColor};
143-
border-bottom: ${borderBottomWidth || borderWidth} ${borderBottomStyle || borderStyle}
144-
${borderBottomColor || borderColor};
145-
box-shadow: ${boxShadow};
146-
147-
img {
148-
width: var(--thumbnail-width, 54px) !important;
149-
height: var(--thumbnail-height, 54px) !important;
150-
border-radius: ${borderRadius ?? '8px'} !important;
151-
object-fit: cover !important;
152-
display: flex !important;
153-
justify-content: center !important;
154-
}
155-
.ant-image .anticon {
156-
border-radius: ${borderRadius ?? '8px'} !important;
157-
display: block !important;
158-
}
141+
background: ${background ?? backgroundImage ?? backgroundColor} !important;
142+
${commonBorderStyles}
159143
}
160144
161145
.ant-upload-list-item-name {
162-
display: 'block';
163-
color: ${color ?? token.colorPrimary};
164-
font-family: ${fontFamily ?? 'Segoe UI'};
165-
font-size: ${fontSize ?? '14px'};
166-
font-weight: ${fontWeight ?? '400'};
167-
text-align: ${textAlign ?? 'center'};
146+
display: block;
147+
${commonTextStyles}
168148
padding: 0 8px !important;
169149
width: ${(layout && width) ?? '54px'} !important;
170-
font-size: var(--font-size, 14px) !important;
150+
white-space: nowrap;
151+
overflow: hidden;
152+
text-overflow: ellipsis;
153+
max-width: 100%;
171154
}
172155
173156
.thumbnail-stub {
@@ -194,15 +177,14 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
194177
.${prefixCls}-upload {
195178
${layout && !isDragger && 'width: var(--thumbnail-width) !important;'};
196179
${layout && !isDragger && 'height: var(--thumbnail-height) !important'};
197-
border-radius: ${borderRadius ?? '8px'} !important;
180+
border-radius: ${borderRadius} !important;
198181
align-items: center;
199182
200183
&.${prefixCls}-upload-btn {
201184
.${prefixCls}-upload-drag-icon {
202185
margin: unset;
203186
}
204187
205-
206188
.ant-upload-select {
207189
align-content: center;
208190
}
@@ -212,16 +194,16 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
212194
.ant-btn {
213195
padding: 0;
214196
* {
215-
font-size: ${fontSize ?? '14px'} !important;
216-
font-weight: ${fontWeight ?? '400'} !important;
217-
font-family: ${fontFamily ?? 'Segoe UI'} !important;
197+
font-size: ${fontSize} !important;
198+
font-weight: ${fontWeight} !important;
199+
font-family: ${fontFamily} !important;
218200
}
219201
}
220202
221203
.ant-upload-list-item-container {
222204
width: var(--thumbnail-width) !important;
223205
height: var(--thumbnail-height) !important;
224-
border-radius: ${borderRadius ?? '8px'} !important;
206+
border-radius: ${borderRadius} !important;
225207
&.ant-upload-animate-inline-appear,
226208
&.ant-upload-animate-inline-appear-active,
227209
&.ant-upload-animate-inline {
@@ -251,11 +233,10 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
251233
css`
252234
width: var(--thumbnail-width, 54px) !important;
253235
height: var(--thumbnail-height, 54px) !important;
254-
border-radius: ${borderRadius ?? '8px'} !important;
236+
border-radius: ${borderRadius} !important;
255237
object-fit: cover !important;
256238
display: flex !important;
257239
justify-content: center !important;
258-
border-radius: 8px;
259240
`
260241
);
261242

@@ -304,6 +285,23 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
304285
`
305286
);
306287

288+
const styledFileControls = cx(
289+
'styled-file-controls',
290+
css`
291+
${commonBorderStyles}
292+
${commonTextStyles}
293+
border-radius: ${borderRadius} !important;
294+
padding: 0 !important;
295+
background: ${background ?? backgroundImage ?? backgroundColor} !important;
296+
width: ${width || '90px'} !important;
297+
height: ${height || '90px'} !important;
298+
display: flex !important;
299+
align-items: center !important;
300+
justify-content: center !important;
301+
font-size: ${fontSize || '14px'} !important;
302+
`
303+
);
304+
307305
return {
308306
shaStoredFilesRenderer,
309307
storedFilesRendererBtnContainer,
@@ -314,5 +312,6 @@ export const useStyles = createStyles(({ token, css, cx, prefixCls }, { style, m
314312
overlayThumbnailControls,
315313
antUploadText,
316314
antUploadHint,
315+
styledFileControls,
317316
};
318317
});

0 commit comments

Comments
 (0)