self-hosted/focalboard
1
0
Fork 0
mirror of https://github.com/mattermost/focalboard.git synced 2024-12-12 09:04:14 +02:00
Code Issues Releases Activity

GH-1907 - Updating person popover (#1959)

Browse Source 
* Updating assginee popover

* Updating css

* Removing console log

* Updating border property

* Updating avatar

* Updating tests
This commit is contained in:
Asaad Mahmood 2021-12-14 20:06:14 +05:00 committed by GitHub
parent 4656089cb1
commit 5f3f65ed37
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 95 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
webapp/src/components/properties/user/__snapshots__/user.test.tsx.snap
View File

@ -19,9 +19,13 @@ exports[`components/properties/user not readonly 1`] = `
>
<div
class="react-select__single-value css-ciz25-singleValue"
>
<div
class="UserProperty-item"
>
username-1
</div>
</div>
<div
class="css-1shkodo-Input"
>
@ -207,9 +211,13 @@ exports[`components/properties/user user dropdown open 1`] = `
>
<div
class="react-select__single-value css-ciz25-singleValue"
>
<div
class="UserProperty-item"
>
username-1
</div>
</div>
<div
class="css-1shkodo-Input"
>
@ -287,11 +295,15 @@ exports[`components/properties/user user dropdown open 1`] = `
class="react-select__option react-select__option--is-focused react-select__option--is-selected css-xoibch-option"
id="react-select-4-option-0"
tabindex="-1"
>
<div
class="UserProperty-item"
>
username-1
</div>
</div>
</div>
</div>
</div>
</div>
`;

58
webapp/src/components/properties/user/user.scss
View File

@ -9,4 +9,62 @@
text-overflow: ellipsis;
min-width: unset;
}
.UserProperty-item {
display: flex;
align-items: center;
img {
border-radius: 50px;
width: 24px;
height: 24px;
margin-right: 6px;
}
}
.react-select__menu {
background: rgba(var(--center-channel-bg-rgb), 1);
box-shadow: var(--elevation-4);
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: 4px;
}
.react-select__single-value {
margin: 0;
position: relative;
top: 12px;
max-width: 100%;
}
.react-select__option {
display: flex;
align-items: center;
height: 40px;
padding: 0 40px 0 20px;
&:hover {
background: rgba(var(--center-channel-color-rgb), 0.08);
}
&:active {
background: rgba(var(--button-bg-rgb), 0.08);
}
&.react-select__option--is-selected {
background: rgba(var(--button-bg-rgb), 0.08);
color: rgba(var(--center-channel-color-rgb), 1);
}
.UserProperty-item {
img {
margin-right: 12px;
}
}
}
.react-select__menu-list {
border: 0;
}
}

22
webapp/src/components/properties/user/user.tsx
View File

@ -12,6 +12,8 @@ import {useAppSelector} from '../../../store/hooks'
import './user.scss'
import {getSelectBaseStyle} from '../../../theme'
const imageURLForUser = (window as any).Components?.imageURLForUser
type Props = {
value: string,
readonly: boolean,
@ -26,6 +28,25 @@ const selectStyles = {
}),
}
const formatOptionLabel = (user: any) => {
let profileImg
if (imageURLForUser) {
profileImg = imageURLForUser(user.id)
}
return (
<div className='UserProperty-item'>
{profileImg && (
<img
alt='UserProperty-avatar'
src={profileImg}
/>
)}
{user.username}
</div>
)
}
const UserProperty = (props: Props): JSX.Element => {
const workspaceUsers = useAppSelector<IUser[]>(getWorkspaceUsersList)
const workspaceUsersById = useAppSelector<{[key:string]: IUser}>(getWorkspaceUsers)
@ -42,6 +63,7 @@ const UserProperty = (props: Props): JSX.Element => {
backspaceRemovesValue={true}
className={'UserProperty octo-propertyvalue'}
classNamePrefix={'react-select'}
formatOptionLabel={formatOptionLabel}
styles={selectStyles}
placeholder={'Empty'}
getOptionLabel={(o: IUser) => o.username}