Add avatars page with various demos of avatars (#2254)

.changeset/proud-cheetahs-provide.md

@@ -0,0 +1,6 @@
+---
+"@tabler/core": patch
+"preview": patch
+---
+
+Add avatars page with various demos of avatars

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;

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);
 }

preview/pages/_data/menu.json

@@ -63,6 +63,11 @@
           }
         }
       },
+      "avatars": {
+        "url": "avatars.html",
+        "title": "Avatars",
+        "badge": "New"
+      },
       "badges": {
         "url": "badges.html",
         "title": "Badges"

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",

preview/pages/_includes/ui/avatar-upload.html

@@ -1,4 +1,3 @@
-<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}">
+<a href="#" class="avatar avatar-upload{% if include.class %} {{ include.class }}{% endif %}{% if include.size %} avatar-{{ include.size }}{% endif %}">
 	{% include "ui/icon.html" icon="plus" %}
-	<span class="avatar-upload-text">{{ include.text | default: "Add" }}</span>
 </a>

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 -%}
+<span class="badge bg-{{ 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 %}</span>
+{%- endif -%}
+{%- if include.brand -%}
+<span class="avatar-brand" style="background-image: url({{ page | relative }}/static/brands/{{ include.brand }}.svg);"></span>
+{%- 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 %}
-	<span class="badge bg-{{ 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 %}</span>{% endif %}{% if placeholder %}{{ placeholder }}{% elsif include.icon %}{% include "ui/icon.html" icon=include.icon class="avatar-icon" %}{% endif %}</{{ el }}>
+</{{ el }}>

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 -%}
 	<i class="icon ti ti-{{ icon-name }}{% if include.color %} {{ include.color }}{% endif %}{% if include.class %} {{ include.class }}{% endif %}"></i>
-{% elsif icons[icon-name] %}
+{%- elsif icons[icon-name] -%}
 	<!-- Download SVG icon from http://tabler.io/icons/icon/{{ icon-name }} -->
 	{% assign svg-icon = icons[icon-name].svg[icon-type] | default: '' %}
 	{% assign svg-icon = svg-icon | replace: '<path stroke="none" d="M0 0h24v24H0z" fill="none"/>', '' %}
 	{{ svg-icon | replace_regex: 'class=\"[^"]+\"', replace-to }}
-{% endif %}
-
+{%- endif -%}

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
+---
+
+<div class="row row-cards">
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Default avatar</h2>
+				{% include "ui/avatar.html" %}
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar with icon</h2>
+
+				{% assign icon-icons = "user,settings,car,balloon,users,users-group,apps,ghost" | split: "," %}
+				<div class="avatar-list">
+					{% for icon in icon-icons %}
+					{% include "ui/avatar.html" icon=icon %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar with icon</h2>
+
+				<div class="avatar-list">
+					{% for color in site.colors %}
+					{% include "ui/avatar.html" icon="user" color=color[0] %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Simple avatar</h2>
+				<div class="avatar-list">
+					{% for person in people limit: 8 -%}
+					{% include "ui/avatar.html" person=person %}
+					{%- endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar placeholder</h2>
+				<div class="avatar-list">
+					{% for person in people limit: 8 %}
+					{% assign placeholder = person.full_name | first_letters %}
+					{% include "ui/avatar.html" placeholder=placeholder %}
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar shapes</h2>
+				<div class="avatar-list">
+					{% include "ui/avatar.html" %}
+					{% include "ui/avatar.html" class="rounded-circle" %}
+					{% include "ui/avatar.html" class="rounded-0" %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar sizes</h2>
+				<div class="row">
+					<div class="col-6">
+						<div class="avatar-list">
+							{% 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" %}
+						</div>
+					</div>
+					<div class="col-6">
+						<div class="avatar-list">
+							{% 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" %}
+						</div>
+					</div>
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-6">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar lists</h2>
+				<div class="row g-3">
+					{% assign sizes = "xxs,xs,sm,md,lg" | split: "," %}
+					{% for size in sizes %}
+					<div class="col-6">
+						<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
+							{% for person in people limit: 5 %}
+							{% include "ui/avatar.html" person=person %}
+							{% endfor %}
+							{% include "ui/avatar.html" icon="plus" link %}
+						</div>
+					</div>
+					<div class="col-6">
+						<div class="avatar-list avatar-list-stacked avatar-list-{{ size }}">
+							{% 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" %}
+						</div>
+					</div>
+					{% endfor %}
+				</div>
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar placeholder</h2>
+				{% assign sizes = "xxs,xs,sm,md,lg,xl,2xl" | split: "," %}
+				{% for size in sizes %}
+				{% include "ui/avatar-upload.html" size=size %}
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar statuses</h2>
+				{% 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 %}
+			</div>
+		</div>
+	</div>
+	<div class="col-4">
+		<div class="card">
+			<div class="card-body">
+				<h2 class="card-title">Avatar brands</h2>
+				{% assign brands = "netflix,amazon,messenger,figma,twitch" | split: "," %}
+				{% for brand in brands %}
+				{% include "ui/avatar.html" person-id=forloop.index brand=brand %}
+				{% endfor %}
+			</div>
+		</div>
+	</div>
+</div>