vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Fixed #6659 - Avatar - New Design Tokens

pull/6674/head
Cagatay Civici 2024-10-28 18:09:00 +03:00
parent 44cb5820d4
commit e2040e9bb2
6 changed files with 115 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

48
apps/showcase/doc/avatar/AvatarGroupDoc.vue
View File

@ -4,12 +4,12 @@
</DocSectionText> </DocSectionText>
<div class="card flex justify-center"> <div class="card flex justify-center">
<AvatarGroup> <AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" size="large" /> <Avatar label="+2" shape="circle" />
</AvatarGroup> </AvatarGroup>
</div> </div>
<DocSectionCode :code="code" /> <DocSectionCode :code="code" />
@ -22,24 +22,24 @@ export default {
code: { code: {
basic: ` basic: `
<AvatarGroup> <AvatarGroup>
<Avatar image="/images/avatar/amyelsner.png" size="large" shape="circle" /> <Avatar image="/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="/images/avatar/asiyajavayant.png" size="large" shape="circle" /> <Avatar image="/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="/images/avatar/onyamalimba.png" size="large" shape="circle" /> <Avatar image="/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="/images/avatar/ionibowcher.png" size="large" shape="circle" /> <Avatar image="/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="/images/avatar/xuxuefeng.png" size="large" shape="circle" /> <Avatar image="/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" size="large" /> <Avatar label="+2" shape="circle" />
</AvatarGroup> </AvatarGroup>
`, `,
options: ` options: `
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<AvatarGroup> <AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" size="large" /> <Avatar label="+2" shape="circle" />
</AvatarGroup> </AvatarGroup>
</div> </div>
</template> </template>
@ -52,12 +52,12 @@ export default {
<template> <template>
<div class="card flex justify-center"> <div class="card flex justify-center">
<AvatarGroup> <AvatarGroup>
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/amyelsner.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/asiyajavayant.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/onyamalimba.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/ionibowcher.png" shape="circle" />
<Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" size="large" shape="circle" /> <Avatar image="https://primefaces.org/cdn/primevue/images/avatar/xuxuefeng.png" shape="circle" />
<Avatar label="+2" shape="circle" size="large" /> <Avatar label="+2" shape="circle" />
</AvatarGroup> </AvatarGroup>
</div> </div>
</template> </template>

21
packages/primevue/src/avatar/style/AvatarStyle.js
View File

@ -9,6 +9,7 @@ const theme = ({ dt }) => `
height: ${dt('avatar.height')}; height: ${dt('avatar.height')};
font-size: ${dt('avatar.font.size')}; font-size: ${dt('avatar.font.size')};
background: ${dt('avatar.background')}; background: ${dt('avatar.background')};
color: ${dt('avatar.color')};
border-radius: ${dt('avatar.border.radius')}; border-radius: ${dt('avatar.border.radius')};
} }
@ -25,7 +26,9 @@ const theme = ({ dt }) => `
} }
.p-avatar-icon { .p-avatar-icon {
font-size: ${dt('avatar.font.size')}; font-size: ${dt('avatar.icon.size')};
width: ${dt('avatar.icon.size')};
height: ${dt('avatar.icon.size')};
} }
.p-avatar img { .p-avatar img {
@ -40,7 +43,9 @@ const theme = ({ dt }) => `
} }
.p-avatar-lg .p-avatar-icon { .p-avatar-lg .p-avatar-icon {
font-size: ${dt('avatar.lg.font.size')}; font-size: ${dt('avatar.lg.icon.size')};
width: ${dt('avatar.lg.icon.size')};
height: ${dt('avatar.lg.icon.size')};
} }
.p-avatar-xl { .p-avatar-xl {
@ -50,7 +55,9 @@ const theme = ({ dt }) => `
} }
.p-avatar-xl .p-avatar-icon { .p-avatar-xl .p-avatar-icon {
font-size: ${dt('avatar.xl.font.size')}; font-size: ${dt('avatar.xl.icon.size')};
width: ${dt('avatar.xl.icon.size')};
height: ${dt('avatar.xl.icon.size')};
} }
.p-avatar-group { .p-avatar-group {
@ -65,6 +72,14 @@ const theme = ({ dt }) => `
.p-avatar-group .p-avatar { .p-avatar-group .p-avatar {
border: 2px solid ${dt('avatar.group.border.color')}; border: 2px solid ${dt('avatar.group.border.color')};
} }
.p-avatar-group .p-avatar-lg + .p-avatar-lg {
margin-left: ${dt('avatar.lg.group.offset')};
}
.p-avatar-group .p-avatar-xl + .p-avatar-xl {
margin-left: ${dt('avatar.xl.group.offset')};
}
`; `;
const classes = { const classes = {

22
packages/themes/src/presets/aura/avatar/index.js
View File

@ -4,20 +4,36 @@ export default {
height: '2rem', height: '2rem',
fontSize: '1rem', fontSize: '1rem',
background: '{content.border.color}', background: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}'
}, },
icon: {
size: '1rem'
},
group: { group: {
borderColor: '{content.background}', borderColor: '{content.background}',
offset: '-1rem' offset: '-0.75rem'
}, },
lg: { lg: {
width: '3rem', width: '3rem',
height: '3rem', height: '3rem',
fontSize: '1.5rem' fontSize: '1.5rem',
icon: {
size: '1.5rem'
},
group: {
offset: '-1rem'
}
}, },
xl: { xl: {
width: '4rem', width: '4rem',
height: '4rem', height: '4rem',
fontSize: '2rem' fontSize: '2rem',
icon: {
size: '2rem'
},
group: {
offset: '-1.5rem'
}
} }
}; };

19
packages/themes/src/presets/lara/avatar/index.js
View File

@ -4,20 +4,33 @@ export default {
height: '2rem', height: '2rem',
fontSize: '1rem', fontSize: '1rem',
background: '{content.border.color}', background: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}'
}, },
icon: {
size: '1rem'
},
group: { group: {
borderColor: '{content.background}', borderColor: '{content.background}',
offset: '-1rem' offset: '-0.75rem'
}, },
lg: { lg: {
width: '3rem', width: '3rem',
height: '3rem', height: '3rem',
fontSize: '1.5rem' fontSize: '1.5rem',
icon: {
size: '1.5rem'
},
group: {
offset: '-1rem'
}
}, },
xl: { xl: {
width: '4rem', width: '4rem',
height: '4rem', height: '4rem',
fontSize: '2rem' fontSize: '2rem',
icon: {
size: '2rem'
}
} }
}; };

22
packages/themes/src/presets/material/avatar/index.js
View File

@ -4,20 +4,36 @@ export default {
height: '2rem', height: '2rem',
fontSize: '1rem', fontSize: '1rem',
background: '{content.border.color}', background: '{content.border.color}',
color: '{content.color}',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}'
}, },
icon: {
size: '1rem'
},
group: { group: {
borderColor: '{content.background}', borderColor: '{content.background}',
offset: '-1rem' offset: '-0.75rem'
}, },
lg: { lg: {
width: '3rem', width: '3rem',
height: '3rem', height: '3rem',
fontSize: '1.5rem' fontSize: '1.5rem',
icon: {
size: '1.5rem'
},
group: {
offset: '-1rem'
}
}, },
xl: { xl: {
width: '4rem', width: '4rem',
height: '4rem', height: '4rem',
fontSize: '2rem' fontSize: '2rem',
icon: {
size: '2rem'
},
group: {
offset: '-1.5rem'
}
} }
}; };

22
packages/themes/src/presets/nora/avatar/index.js
View File

@ -4,20 +4,36 @@ export default {
height: '2rem', height: '2rem',
fontSize: '1rem', fontSize: '1rem',
background: '{content.hover.background}', background: '{content.hover.background}',
color: '{content.color}',
borderRadius: '{content.border.radius}' borderRadius: '{content.border.radius}'
}, },
icon: {
size: '1rem'
},
group: { group: {
borderColor: '{content.background}', borderColor: '{content.background}',
offset: '-1rem' offset: '-0.75rem'
}, },
lg: { lg: {
width: '3rem', width: '3rem',
height: '3rem', height: '3rem',
fontSize: '1.5rem' fontSize: '1.5rem',
icon: {
size: '1.5rem'
},
group: {
offset: '-1rem'
}
}, },
xl: { xl: {
width: '4rem', width: '4rem',
height: '4rem', height: '4rem',
fontSize: '2rem' fontSize: '2rem',
icon: {
size: '2rem'
},
group: {
offset: '-1.5rem'
}
} }
}; };