diff --git a/.changeset/proud-cheetahs-provide.md b/.changeset/proud-cheetahs-provide.md new file mode 100644 index 000000000..72f197417 --- /dev/null +++ b/.changeset/proud-cheetahs-provide.md @@ -0,0 +1,6 @@ +--- +"@tabler/core": patch +"preview": patch +--- + +Add avatars page with various demos of avatars diff --git a/core/scss/_variables.scss b/core/scss/_variables.scss index 613f34af6..33a8bf6cc 100644 --- a/core/scss/_variables.scss +++ b/core/scss/_variables.scss @@ -342,49 +342,57 @@ $avatar-size: 2.5rem !default; $avatar-status-size: .75rem !default; $avatar-font-size: 1rem !default; $avatar-icon-size: 1.5rem !default; +$avatar-brand-size: 1.25rem !default; $avatar-bg: var(--#{$prefix}bg-surface-secondary) !default; $avatar-sizes: ( "xxs": ( size: 1rem, font-size: .5rem, - icon-size: .75rem, - status-size: .25rem + icon-size: .5rem, + status-size: .25rem, + brand-size: .5rem ), "xs": ( size: 1.25rem, font-size: $h6-font-size, icon-size: .75rem, - status-size: .375rem + status-size: .375rem, + brand-size: .75rem ), "sm": ( size: 2rem, font-size: $h5-font-size, icon-size: 1.5rem, - status-size: .5rem + status-size: .5rem, + brand-size: 1rem ), "md": ( size: 2.5rem, font-size: $h4-font-size, icon-size: 1.5rem, - status-size: .75rem + status-size: .75rem, + brand-size: 1.25rem ), "lg": ( size: 3rem, font-size: $h2-font-size, icon-size: 2rem, - status-size: .75rem + status-size: .75rem, + brand-size: 1.25rem ), "xl": ( size: 5rem, font-size: 2rem, icon-size: 3rem, - status-size: 1rem + status-size: 1rem, + brand-size: 1.25rem ), "2xl": ( size: 7rem, font-size: 3rem, icon-size: 5rem, - status-size: 1rem + status-size: 1rem, + brand-size: 2rem ), ) !default; $avatar-border-radius: var(--#{$prefix}border-radius) !default; diff --git a/core/scss/ui/_avatars.scss b/core/scss/ui/_avatars.scss index bab57db25..73357366d 100644 --- a/core/scss/ui/_avatars.scss +++ b/core/scss/ui/_avatars.scss @@ -2,9 +2,11 @@ --#{$prefix}avatar-size: var(--#{$prefix}avatar-list-size, #{$avatar-size}); --#{$prefix}avatar-status-size: #{$avatar-status-size}; --#{$prefix}avatar-bg: #{$avatar-bg}; - --#{$prefix}avatar-box-shadow: #{$avatar-box-shadow}; + --#{$prefix}avatar-box-shadow-color: var(--#{$prefix}border-color-translucent); + --#{$prefix}avatar-box-shadow: inset 0 0 0 1px var(--#{$prefix}avatar-box-shadow-color); --#{$prefix}avatar-font-size: #{$avatar-font-size}; --#{$prefix}avatar-icon-size: #{$avatar-icon-size}; + --#{$prefix}avatar-brand-size: #{$avatar-brand-size}; position: relative; width: var(--#{$prefix}avatar-size); height: var(--#{$prefix}avatar-size); @@ -22,6 +24,7 @@ background: var(--#{$prefix}avatar-bg) no-repeat center/cover; border-radius: $avatar-border-radius; box-shadow: var(--#{$prefix}avatar-box-shadow); + transition: color $transition-time, background-color $transition-time, box-shadow $transition-time; .icon { width: var(--#{$prefix}avatar-icon-size); @@ -38,6 +41,11 @@ @at-root a#{&} { cursor: pointer; + + &:hover { + color: var(--#{$prefix}primary); + --#{$prefix}avatar-box-shadow-color: var(--#{$prefix}primary); + } } } @@ -51,11 +59,12 @@ --#{$prefix}avatar-status-size: #{map-get($size, status-size)}; --#{$prefix}avatar-font-size: #{map-get($size, font-size)}; --#{$prefix}avatar-icon-size: #{map-get($size, icon-size)}; - } + --#{$prefix}avatar-brand-size: #{map-get($size, brand-size)}; - .avatar-#{$avatar-size} .badge:empty { - width: map-get($size, status-size); - height: map-get($size, status-size); + .badge:empty { + width: map-get($size, status-size); + height: map-get($size, status-size); + } } } @@ -64,7 +73,6 @@ // .avatar-list { --#{$prefix}avatar-list-size: 3rem; - @include elements-list; a.avatar { @@ -80,7 +88,13 @@ .avatar { margin-right: calc(#{$avatar-list-spacing} * var(--#{$prefix}avatar-size)) !important; - box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-cap-bg, var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface))); + box-shadow: var(--#{$prefix}avatar-box-shadow), 0 0 0 2px var(--#{$prefix}card-bg, var(--#{$prefix}bg-surface)); + } +} + +@each $avatar-size, $size in $avatar-sizes { + .avatar-list-#{$avatar-size} { + --#{$prefix}avatar-list-size: #{map-get($size, size)}; } } @@ -88,8 +102,6 @@ // Avatar upload // .avatar-upload { - width: 4rem; - height: 4rem; border: var(--#{$prefix}border-width) dashed var(--#{$prefix}border-color); background: $form-check-input-bg; box-shadow: none; @@ -118,4 +130,16 @@ .avatar-cover { margin-top: calc(-.5 * var(--#{$prefix}avatar-size)); box-shadow: 0 0 0 .25rem var(--#{$prefix}card-bg, var(--#{$prefix}body-bg)); +} + +.avatar-brand { + width: var(--#{$prefix}avatar-brand-size); + height: var(--#{$prefix}avatar-brand-size); + position: absolute; + right: -2px; + bottom: -2px; + z-index: 1000; + background: var(--#{$prefix}bg-surface); + border-radius: var(--#{$prefix}border-radius); + border: 1px solid var(--#{$prefix}border-color); } \ No newline at end of file diff --git a/preview/pages/_data/menu.json b/preview/pages/_data/menu.json index 43019cc4b..53672170c 100644 --- a/preview/pages/_data/menu.json +++ b/preview/pages/_data/menu.json @@ -63,6 +63,11 @@ } } }, + "avatars": { + "url": "avatars.html", + "title": "Avatars", + "badge": "New" + }, "badges": { "url": "badges.html", "title": "Badges" diff --git a/preview/pages/_data/people.json b/preview/pages/_data/people.json index e4531eeb9..5036aa9ad 100644 --- a/preview/pages/_data/people.json +++ b/preview/pages/_data/people.json @@ -48,7 +48,8 @@ "credit_card_type": "bankcard", "bitcoin_address": "1NvUquhGpiEqpedb4H2HCHawrPaG8i4zap", "birth_date": "20/04/1999", - "ip_address": "207.39.45.122" + "ip_address": "207.39.45.122", + "photo": "static/avatars/052f.jpg" }, { "id": 3, @@ -177,7 +178,8 @@ "credit_card_type": "maestro", "bitcoin_address": "1B4Z2mefCpudYsixuC1gZKzfXyp8224XwD", "birth_date": "01/05/1978", - "ip_address": "18.191.234.41" + "ip_address": "18.191.234.41", + "photo": "static/avatars/004m.jpg" }, { "id": 8, @@ -254,7 +256,8 @@ "credit_card_type": "bankcard", "bitcoin_address": "1MAkh5f9Em7A8Af8K4kpebxDWgq5mRreiR", "birth_date": "31/05/1959", - "ip_address": "239.192.13.146" + "ip_address": "239.192.13.146", + "photo": "static/avatars/063m.jpg" }, { "id": 11, @@ -321,7 +324,7 @@ "slogan": "productize real-time mindshare", "shirt_size": "XS", "university": "Olabisi Onabanjo University ", - "ssn": "644-28-1542", + "ssn": "644-28-1542", "country": "Nigeria", "country_code": "NG", "city": "Dadiya", diff --git a/preview/pages/_includes/ui/avatar-upload.html b/preview/pages/_includes/ui/avatar-upload.html index d05b59357..5b25ed3e7 100644 --- a/preview/pages/_includes/ui/avatar-upload.html +++ b/preview/pages/_includes/ui/avatar-upload.html @@ -1,4 +1,3 @@ - + {% include "ui/icon.html" icon="plus" %} - {{ include.text | default: "Add" }} \ No newline at end of file diff --git a/preview/pages/_includes/ui/avatar.html b/preview/pages/_includes/ui/avatar.html index fca4ae7d6..3a24d97b0 100644 --- a/preview/pages/_includes/ui/avatar.html +++ b/preview/pages/_includes/ui/avatar.html @@ -1,24 +1,38 @@ -{% assign src = include.src %} -{% assign placeholder = include.placeholder %} -{% if include.person-id %} - {% assign person-id = include.person-id | minus: 1 %} - {% assign person = people[person-id] %} - {% assign src = person.photo %} - {% unless src %} - {% assign placeholder = person.full_name | first_letters %} - {% endunless %} - {% elsif include.person %} - {% assign person = include.person %} - {% assign src = person.photo %} - {% unless src %} - {% assign placeholder = person.full_name | first_letters %} - {% endunless %} +{%- assign src = include.src -%} +{%- assign placeholder = include.placeholder -%} +{%- if include.person-id -%} + {%- assign person-id = include.person-id | minus: 1 -%} + {%- assign person = people[person-id] -%} + {%- assign src = person.photo -%} + {%- unless src -%} + {%- assign placeholder = person.full_name | first_letters -%} + {%- endunless -%} + {%- elsif include.person -%} + {%- assign person = include.person -%} + {%- assign src = person.photo -%} + {%- unless src -%} + {%- assign placeholder = person.full_name | first_letters -%} + {%- endunless -%} +{%- endif -%} +{%- assign link = include.link | default: false -%} +{%- if include.dropdown -%} + {%- assign link = true -%} +{%- endif -%} +{%- assign el = 'span' -%} +{%- if link -%}{%- assign el = 'a' -%}{%- endif -%} +<{{ el }} class="avatar{% if include.size %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}> +{%- if include.status -%} +{% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %} +{%- endif -%} +{%- if include.brand -%} + +{%- endif -%} +{% if src %} +{% elsif placeholder %} +{{ placeholder }} +{% elsif include.icon %} +{% include "ui/icon.html" icon=include.icon class="avatar-icon" %} +{% else %} +{% include "ui/icon.html" icon="user" class="avatar-icon" %} {% endif %} -{% assign link = include.link | default: false %} -{% if include.dropdown %} - {% assign link = true %} -{% endif %} -{% assign el = 'span' %} -{% if link %}{% assign el = 'a' %}{% endif %} -<{{ el }} class="avatar{% if include['size'] %} avatar-{{ include['size'] }}{% endif %}{% if include.thumb %} avatar-thumb{% endif %}{% if include.class %} {{ include.class }}{% endif %}{% if include.shape %} {{ include.shape }}{% endif %}{% if include.color %} bg-{{ include.color }}-lt{% endif %}{% if include.rounded %} rounded{% endif %}"{% if src %} style="background-image: url({{ page | relative }}/{{ src }})"{% endif %}{% if include.dropdown %} data-bs-toggle="dropdown"{% endif %}>{% if include.status %} - {% if include.status-text %}{{ include.status-text }}{% elsif include.status-icon %}{% include "ui/icon.html" icon=include.status-icon class="avatar-status-icon" %}{% endif %}{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include "ui/icon.html" icon=include.icon class="avatar-icon" %}{% endif %} + diff --git a/preview/pages/_includes/ui/icon.html b/preview/pages/_includes/ui/icon.html index c3200763b..7fbc10af3 100644 --- a/preview/pages/_includes/ui/icon.html +++ b/preview/pages/_includes/ui/icon.html @@ -1,32 +1,31 @@ -{% assign icon-name = include.icon %} -{% assign icon-type = include.type | default: "outline" %} +{%- assign icon-name = include.icon -%} +{%- assign icon-type = include.type | default: "outline" -%} -{% assign replace-to = "icon" %} +{%- assign replace-to = "icon" -%} -{% if include.class %} -{% assign replace-to = replace-to | append: ' ' | append: include.class %} -{% endif %} +{%- if include.class -%} +{%- assign replace-to = replace-to | append: ' ' | append: include.class -%} +{%- endif -%} -{% if include.color %} -{% assign replace-to = replace-to | append: ' text-' | append: include.color %} -{% endif %} +{%- if include.color -%} +{%- assign replace-to = replace-to | append: ' text-' | append: include.color -%} +{%- endif %} -{% if include.inline %} -{% assign replace-to = replace-to | append: ' icon-inline' %} -{% endif %} +{%- if include.inline -%} +{%- assign replace-to = replace-to | append: ' icon-inline' -%} +{%- endif -%} -{% if include['size'] %} -{% assign replace-to = replace-to | append: ' icon-' | append: include['size'] %} -{% endif %} +{%- if include['size'] -%} +{%- assign replace-to = replace-to | append: ' icon-' | append: include['size'] -%} +{%- endif -%} -{% assign replace-to = 'class="' | append: replace-to | append: '"' %} +{%- assign replace-to = 'class="' | append: replace-to | append: '"' -%} -{% if site.useIconfont %} +{%- if site.useIconfont -%} -{% elsif icons[icon-name] %} +{%- elsif icons[icon-name] -%} {% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %} {% assign svg-icon = svg-icon | replace: '', '' %} {{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }} -{% endif %} - +{%- endif -%} diff --git a/preview/pages/avatars.html b/preview/pages/avatars.html new file mode 100644 index 000000000..c9a95f695 --- /dev/null +++ b/preview/pages/avatars.html @@ -0,0 +1,173 @@ +--- +title: Avatars +layout: default +description: A page showcasing different avatar styles and examples. +permalink: /avatars.html +page-menu: base.avatars +page-header: Avatars +--- + +
+
+
+
+

Default avatar

+ {% include "ui/avatar.html" %} +
+
+
+
+
+
+

Avatar with icon

+ + {% assign icon-icons = "user,settings,car,balloon,users,users-group,apps,ghost" | split: "," %} +
+ {% for icon in icon-icons %} + {% include "ui/avatar.html" icon=icon %} + {% endfor %} +
+
+
+
+
+
+
+

Avatar with icon

+ +
+ {% for color in site.colors %} + {% include "ui/avatar.html" icon="user" color=color[0] %} + {% endfor %} +
+
+
+
+
+
+
+

Simple avatar

+
+ {% for person in people limit: 8 -%} + {% include "ui/avatar.html" person=person %} + {%- endfor %} +
+
+
+
+
+
+
+

Avatar placeholder

+
+ {% for person in people limit: 8 %} + {% assign placeholder = person.full_name | first_letters %} + {% include "ui/avatar.html" placeholder=placeholder %} + {% endfor %} +
+
+
+
+
+
+
+

Avatar shapes

+
+ {% include "ui/avatar.html" %} + {% include "ui/avatar.html" class="rounded-circle" %} + {% include "ui/avatar.html" class="rounded-0" %} +
+
+
+
+
+
+
+

Avatar sizes

+
+
+
+ {% include "ui/avatar.html" size="xxs" %} + {% include "ui/avatar.html" size="xs" %} + {% include "ui/avatar.html" size="sm" %} + {% include "ui/avatar.html" size="md" %} + {% include "ui/avatar.html" size="lg" %} + {% include "ui/avatar.html" size="xl" %} +
+
+
+
+ {% include "ui/avatar.html" placeholder="PK" size="xxs" %} + {% include "ui/avatar.html" placeholder="PK" size="xs" %} + {% include "ui/avatar.html" placeholder="PK" size="sm" %} + {% include "ui/avatar.html" placeholder="PK" size="md" %} + {% include "ui/avatar.html" placeholder="PK" size="lg" %} + {% include "ui/avatar.html" placeholder="PK" size="xl" %} +
+
+
+
+
+
+
+
+
+

Avatar lists

+
+ {% assign sizes = "xxs,xs,sm,md,lg" | split: "," %} + {% for size in sizes %} +
+
+ {% for person in people limit: 5 %} + {% include "ui/avatar.html" person=person %} + {% endfor %} + {% include "ui/avatar.html" icon="plus" link %} +
+
+
+
+ {% for person in people limit: 5 %} + {% include "ui/avatar.html" person=person class="rounded-circle" %} + {% endfor %} + {% include "ui/avatar.html" icon="plus" link class="rounded-circle" %} +
+
+ {% endfor %} +
+
+
+
+
+
+
+

Avatar placeholder

+ {% assign sizes = "xxs,xs,sm,md,lg,xl,2xl" | split: "," %} + {% for size in sizes %} + {% include "ui/avatar-upload.html" size=size %} + {% endfor %} +
+
+
+
+
+
+

Avatar statuses

+ {% assign colors = "red,green,blue,yellow,secondary" | split: "," %} + {% for color in colors %} + {% include "ui/avatar.html" person-id=forloop.index class="rounded-circle" status=color %} + {% endfor %} +
+
+
+
+
+
+

Avatar brands

+ {% assign brands = "netflix,amazon,messenger,figma,twitch" | split: "," %} + {% for brand in brands %} + {% include "ui/avatar.html" person-id=forloop.index brand=brand %} + {% endfor %} +
+
+
+
\ No newline at end of file