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

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

@ -9,6 +9,7 @@ const theme = ({ dt }) => `
height: ${dt('avatar.height')};
font-size: ${dt('avatar.font.size')};
background: ${dt('avatar.background')};
color: ${dt('avatar.color')};
border-radius: ${dt('avatar.border.radius')};
}
@ -25,7 +26,9 @@ const theme = ({ dt }) => `
}
.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 {
@ -40,7 +43,9 @@ const theme = ({ dt }) => `
}
.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 {
@ -50,7 +55,9 @@ const theme = ({ dt }) => `
}
.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 {
@ -65,6 +72,14 @@ const theme = ({ dt }) => `
.p-avatar-group .p-avatar {
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 = {

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

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