github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 09:48:58 -04:00
Code Issues Projects Releases Packages Wiki Activity

[Enterprise Search] Add UserIcon styles (#77385)

Browse source 
* Add user icon styles

* Remame avatar to user-icon
This commit is contained in:
Scotty Bollinger 2020-09-14 15:07:13 -05:00 • committed by GitHub
parent 6bef44031d
commit 1140b032f7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 142 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

137
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.scss Normal file
View file

@ -0,0 +1,137 @@
.user-icon {
border-radius: 50%;
overflow: hidden;
width: 70px;
height: 70px;
display: inline-flex;
justify-content: center;
align-items: center;
flex-shrink: 0;
position: relative;
font-weight: 500;
background: $euiColorPrimary;
color: $euiColorEmptyShade;
&:not(.user-icon--small) {
font-size: 1.75rem;
}
&--small {
width: 30px;
height: 30px;
font-size: .875rem;
margin-right: .5rem;
}
&__text {
text-shadow: 0 1px 2px rgba(black, 0.08);
justify-content: center;
align-items: center;
font-size: 1.125rem;
color: $euiColorEmptyShade;
font-weight: 500;
.user-icon--small & {
font-size: .87rem;
}
}
&__image {
max-width: 100%;
width: 100%;
height: auto;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
}
.group-avatars {
display: flex;
flex-direction: row;
justify-content: flex-start;
padding-top: 4px;
&__additional {
line-height: 2;
vertical-align: middle;
padding-left: 4px;
}
.group-user-icon {
display: flex;
justify-content: center;
align-items: center;
position: relative;
overflow: hidden;
width: 32px;
height: 32px;
& > * {
pointer-events: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
&__text {
padding-bottom: 2px;
z-index: 2;
line-height: 1;
font-weight: 500;
color: $euiColorEmptyShade;
font-size: .875rem;
text-shadow: 0 1px 2px rgba(black, 0.08);
}
&__image {
width: 24px;
height: 24px;
}
}
}
.groups-tooltip {
position: relative;
display: inline-block;
&:hover &__container {
visibility: visible;
}
&__container {
visibility: hidden;
position: absolute;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0px 0px 12px rgba(black, 0.15);
background: white;
text-align: left;
text-overflow: ellipsis;
min-width: 125px;
padding: 6px 10px 6px 10px;
border-radius: 3px;
z-index: 5;
top: 100%;
margin-left: -10px;
}
&__text {
line-height: 1.5;
white-space: nowrap;
}
&__text:before {
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid white;
top: -6px;
left: 16px;
}
}

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.test.tsx
View file

@ -15,7 +15,7 @@ describe('SourcesTable', () => {
it('renders with picture', () => {
const wrapper = shallow(<UserIcon {...users[0]} />);
expect(wrapper.find('.avatar')).toHaveLength(1);
expect(wrapper.find('.user-icon')).toHaveLength(1);
expect(wrapper.find('.avatar__image')).toHaveLength(1);
});
@ -26,7 +26,7 @@ describe('SourcesTable', () => {
};
const wrapper = shallow(<UserIcon {...user} />);
expect(wrapper.find('.avatar')).toHaveLength(1);
expect(wrapper.find('.user-icon')).toHaveLength(1);
expect(wrapper.find('.avatar__text')).toHaveLength(1);
});

4
x-pack/plugins/enterprise_search/public/applications/workplace_search/components/shared/user_icon/user_icon.tsx
View file

@ -8,8 +8,10 @@ import React from 'react';
import { IUser } from '../../../types';
import './user_icon.scss';
export const UserIcon: React.FC<IUser> = ({ name, pictureUrl, color, initials, email }) => (
<div className="avatar avatar--small" style={{ backgroundColor: color }}>
<div className="user-icon user-icon--small" style={{ backgroundColor: color }}>
{pictureUrl ? (
<img src={pictureUrl} className="avatar__image" alt={name || email} />
) : (