opensource/mattermost
3
0
Fork 0
mirror of https://github.com/mattermost/mattermost.git synced 2026-09-21 05:54:10 +08:00
Code Issues Packages Projects Releases Wiki Activity

Fixed the UI for compact mode file editing (#35878)

Browse Source 
* Fixed the UI for compact mode file editing

* Added test

* Updated file container height and font size for compact mode

* Updated snapshot

* File name truncation fix

* lint fix

* updated snapshot

* Updated snapshot
This commit is contained in:
Harshil Sharma
2026-04-15 10:26:03 +05:30
committed by GitHub
parent 3cb00848a6
commit b712595dd0
10 changed files with 104 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/channels/src/components/file_attachment/__snapshots__/file_attachment.test.tsx.snap
+6 -2
View File
@@ -503,7 +503,7 @@ exports[`FileAttachment should match snapshot, with compact display 1`] = `
class="post-image__column"
>
<div
class="post-image__details"
class="post-image__details compact"
>
<a
class="post-image__name btn btn-icon btn-sm"
@@ -544,7 +544,11 @@ exports[`FileAttachment should match snapshot, with compact display 1`] = `
</g>
</svg>
</span>
test.pdf
<span
class="post-image__filename"
>
test.pdf
</span>
</a>
</div>
</div>
webapp/channels/src/components/file_attachment/__snapshots__/filename_overlay.test.tsx.snap
+5 -1
View File
@@ -41,7 +41,11 @@ exports[`components/file_attachment/FilenameOverlay should match snapshot, compa
</g>
</svg>
</span>
test_filename
<span
class="post-image__filename"
>
test_filename
</span>
</a>
</div>
`;
webapp/channels/src/components/file_attachment/file_attachment.tsx
+1 -1
View File
@@ -403,7 +403,7 @@ export default function FileAttachment(props: Props) {
])}
>
{fileThumbnail}
<div className='post-image__details'>
<div className={classNames('post-image__details', {compact: compactDisplay})}>
{fileDetail}
{fileActions}
{filenameOverlay}
webapp/channels/src/components/file_attachment/filename_overlay.tsx
+1 -1
View File
@@ -78,7 +78,7 @@ export default class FilenameOverlay extends React.PureComponent<Props> {
rel='noopener noreferrer'
>
<AttachmentIcon className='icon'/>
{trimmedFilename}
<span className='post-image__filename'>{trimmedFilename}</span>
</a>
</WithTooltip>
);
webapp/channels/src/components/file_preview/file_preview.test.tsx
+30
View File
@@ -149,4 +149,34 @@ describe('FilePreview', () => {
expect(screen.getByAltText('file preview')).toHaveAttribute('src', getFileUrl(fileId));
});
test('should add compact classes when compactMode is true', () => {
const props = {
...baseProps,
compactMode: true,
};
const {container} = renderWithContext(
<FilePreview {...props}/>,
);
expect(container.querySelector('.file-preview.post-image__column.compact')).toBeInTheDocument();
expect(container.querySelector('.post-image__detail.compact')).toBeInTheDocument();
expect(container.querySelector('.file-preview__remove.compact')).toBeInTheDocument();
});
test('should not add compact classes when compactMode is false', () => {
const props = {
...baseProps,
compactMode: false,
};
const {container} = renderWithContext(
<FilePreview {...props}/>,
);
expect(container.querySelector('.file-preview.post-image__column.compact')).not.toBeInTheDocument();
expect(container.querySelector('.post-image__detail.compact')).not.toBeInTheDocument();
expect(container.querySelector('.file-preview__remove.compact')).not.toBeInTheDocument();
});
});
webapp/channels/src/components/file_preview/file_preview.tsx
+11 -5
View File
@@ -1,6 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import classNames from 'classnames';
import React from 'react';
import type {ReactNode} from 'react';
@@ -28,7 +29,8 @@ type Props = {
fileInfos: FilePreviewInfo[];
uploadsInProgress?: string[];
uploadsProgressPercent?: {[clientID: string]: FilePreviewInfo};
}
compactMode?: boolean;
};
export default class FilePreview extends React.PureComponent<Props> {
static defaultProps = {
@@ -85,6 +87,10 @@ export default class FilePreview extends React.PureComponent<Props> {
previewImage = <div className={'file-icon ' + Utils.getIconClassName(type)}/>;
}
if (this.props.compactMode) {
className += ' compact';
}
previews.push(
<div
key={info.id}
@@ -95,10 +101,10 @@ export default class FilePreview extends React.PureComponent<Props> {
</div>
<div className='post-image__details'>
<div className='post-image__detail_wrapper'>
<div className='post-image__detail'>
<div className={classNames('post-image__detail', {compact: this.props.compactMode})}>
<FilenameOverlay
fileInfo={info}
compactDisplay={false}
compactDisplay={this.props.compactMode}
canDownload={false}
/>
{info.extension && <span className='post-image__type'>{info.extension.toUpperCase()}</span>}
@@ -108,7 +114,7 @@ export default class FilePreview extends React.PureComponent<Props> {
<div>
{Boolean(this.props.onRemove) && (
<a
className='file-preview__remove'
className={classNames('file-preview__remove', {compact: this.props.compactMode})}
onClick={this.handleRemove.bind(this, info.id)}
>
<i className='icon icon-close'/>
@@ -138,7 +144,7 @@ export default class FilePreview extends React.PureComponent<Props> {
}
return (
<div className='file-preview__container'>
<div className={classNames('file-preview__container', {compact: this.props.compactMode})}>
{previews}
</div>
);
webapp/channels/src/components/file_preview/index.ts
+4
View File
@@ -5,15 +5,19 @@ import {connect} from 'react-redux';
import {getConfig} from 'mattermost-redux/selectors/entities/general';
import {isCompactMode} from 'selectors/preferences';
import type {GlobalState} from 'types/store';
import FilePreview from './file_preview';
function mapStateToProps(state: GlobalState) {
const config = getConfig(state);
const compactMode = isCompactMode(state);
return {
enableSVGs: config.EnableSVGs === 'true',
compactMode,
};
}
webapp/channels/src/sass/components/_files.scss
+27
View File
@@ -15,6 +15,10 @@
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
&.compact {
height: unset;
}
}
.file-preview {
@@ -38,11 +42,20 @@
margin-top: -16px;
margin-left: -16px;
}
&.compact {
overflow: hidden !important;
}
}
.app__body {
.file-preview__remove {
position: absolute;
&.compact {
position: unset;
}
top: 4px;
right: 4px;
display: flex;
@@ -494,6 +507,12 @@
font-size: 12px;
text-align: left;
&.compact {
.post-image__name {
font-size: 12px;
}
}
.post-image__archived-name {
align-items: center;
justify-content: start;
@@ -537,6 +556,14 @@
line-height: normal;
text-overflow: ellipsis;
&.compact {
height: unset;
.post-image__name {
font-size: 12px;
}
}
.post-image__name {
display: block;
overflow: hidden;
webapp/channels/src/sass/components/_post.scss
+9 -2
View File
@@ -949,6 +949,7 @@
display: flex;
width: 100%;
max-width: 100%;
align-items: center;
justify-content: flex-start;
padding: 0 5px;
@@ -961,6 +962,12 @@
font-size: 0.9em;
opacity: 0.5;
}
.post-image__filename {
display: inline;
overflow: hidden;
text-overflow: ellipsis;
}
}
a {
@@ -1673,11 +1680,11 @@
}
}
.post__translation-icon-processing {
.post__translation-icon-processing {
color: rgba(var(--center-channel-color-rgb), 0.73);
font-size: 10px;
line-height: 16px;
.LoadingSpinner.with-text .spinner {
margin-right: 3px;
}
webapp/channels/src/selectors/preferences.ts
+10 -1
View File
@@ -1,7 +1,7 @@
// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved.
// See LICENSE.txt for license information.
import {getBool as getBoolPreference} from 'mattermost-redux/selectors/entities/preferences';
import {get, getBool as getBoolPreference} from 'mattermost-redux/selectors/entities/preferences';
import {Preferences} from 'utils/constants';
@@ -33,3 +33,12 @@ export const isUseMilitaryTime = (state: GlobalState) => {
false,
);
};
export const isCompactMode = (state: GlobalState) => {
return get(
state,
Preferences.CATEGORY_DISPLAY_SETTINGS,
Preferences.MESSAGE_DISPLAY,
Preferences.MESSAGE_DISPLAY_DEFAULT,
) === Preferences.MESSAGE_DISPLAY_COMPACT;
};