Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: ui.avatar #1027

Merged
merged 5 commits into from
Nov 29, 2024
Merged

feat: ui.avatar #1027

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5fe71a1
complete logic
AkshatJawne Nov 19, 2024
ae0cdef
Update plugins/ui/docs/components/avatar.md
AkshatJawne Nov 20, 2024
5fb12e8
make change to code review
AkshatJawne Nov 22, 2024
8c67fc1
Merge branch '940_ui_avatar' of https://github.com/AkshatJawne/deepha…
AkshatJawne Nov 22, 2024
4e95205
remove example
AkshatJawne Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 48 additions & 21 deletions plugins/ui/docs/components/avatar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ An avatar is a small image or icon representing a user or organization.
from deephaven import ui


my_avatar_basic = ui.avatar(src="https://i.imgur.com/kJOwAdv.png", alt="default avatar")
my_avatar_basic = ui.avatar(
src="https://github.com/deephaven.png", alt="default avatar"
)
```


Expand All @@ -21,11 +23,34 @@ from deephaven import ui


my_avatar_is_disabled_example = ui.avatar(
src="https://i.imgur.com/kJOwAdv.png", alt="default avatar", is_disabled=True
src="https://github.com/deephaven.png", alt="default avatar", is_disabled=True
)
```


## Local Image

The following example shows to download an image from a URL, encode it in base64, and use it to create an avatar with a specified size using `ui.avatar`.

```python
from deephaven import ui
import urllib.request
import base64


url = "https://github.com/deephaven.png"
file_name, headers = urllib.request.urlretrieve(url)


with open(file_name, "rb") as f:
file_content = f.read()


b64_content = base64.b64encode(file_content).decode()
b64_avatar = ui.avatar(src=f"data:image/png;base64,{b64_content}", size=300)
```


mofojed marked this conversation as resolved.
Show resolved Hide resolved
## Size

The `size` of an avatar can be set to one of the preset sizes, or a custom pixel value.
Expand All @@ -38,51 +63,53 @@ from deephaven import ui
def ui_avatar_sizing_examples():
return [
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-50",
size="avatar-size-50",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-75",
size="avatar-size-75",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="davatar-size-100",
size="avatar-size-100",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-200",
size="avatar-size-200",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-300",
size="avatar-size-300",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-400",
size="avatar-size-400",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-500",
size="avatar-size-500",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-600",
size="avatar-size-600",
),
ui.avatar(
src="https://i.imgur.com/kJOwAdv.png",
alt="default avatar",
src="https://github.com/deephaven.png",
alt="avatar-size-700",
size="avatar-size-700",
),
ui.avatar(src="https://i.imgur.com/kJOwAdv.png", alt="default avatar", size=80),
ui.avatar(
src="https://github.com/deephaven.png", alt="custom pixel size", size=80
),
]


Expand Down
5 changes: 3 additions & 2 deletions plugins/ui/src/deephaven/ui/types/types.py
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -509,13 +509,14 @@ class SliderChange(TypedDict):
LinkVariant = Literal["primary", "secondary", "over_background"]
AvatarSize = Literal[
"avatar-size-50",
AkshatJawne marked this conversation as resolved.
Show resolved Hide resolved
"avatar-sie-100",
"avatar-size-75",
"avatar-size-100",
"avatar-size-200",
"avatar-size-300",
"avatar-size-400",
"avatar-size-500",
"avatar-size-600",
"avatar-size-600",
"avatar-size-700",
]
BadgeVariant = Literal[
"neutral",
Expand Down
Loading