From b3f3a0b915b3c02fb01e4e0037558add5c4fc836 Mon Sep 17 00:00:00 2001 From: Sebastian Schwarzer <44020029+CronJorian@users.noreply.github.com> Date: Fri, 16 Sep 2022 15:47:58 +0200 Subject: [PATCH] Readiness bubble for rest users (#2169) * Create progressCircle component * Add color variable for progress circle * Delete boardUser, move to userAvatar + boardUsers * Refactor boardUsers scss * Implement progressCircle * Rewrite progressCircle * WIP color changes * Use variables * Add new colors * Use currentColor keyword * Show check icon with animation * Update color, and increase font size * Apply review changes Co-authored-by: Sebastian Schwarzer --- .../ParticipantsList/ProgressCircle.tsx | 23 +++ src/components/BoardUsers/BoardUsers.scss | 146 +++++++++--------- src/components/BoardUsers/BoardUsers.tsx | 94 +++++------ .../{BoardUser.scss => UserAvatar.scss} | 30 +--- src/components/BoardUsers/UserAvatar.tsx | 2 +- src/components/Infobar/Infobar.scss | 4 +- src/constants/style.scss | 1 + 7 files changed, 153 insertions(+), 147 deletions(-) create mode 100644 src/components/BoardHeader/ParticipantsList/ProgressCircle.tsx rename src/components/BoardUsers/{BoardUser.scss => UserAvatar.scss} (82%) diff --git a/src/components/BoardHeader/ParticipantsList/ProgressCircle.tsx b/src/components/BoardHeader/ParticipantsList/ProgressCircle.tsx new file mode 100644 index 0000000000..2d505c2438 --- /dev/null +++ b/src/components/BoardHeader/ParticipantsList/ProgressCircle.tsx @@ -0,0 +1,23 @@ +type ProgressCircleProps = { + className?: string; + percentage: number; +}; + +export const ProgressCircle = ({percentage, className}: ProgressCircleProps) => { + // clamp between 0 and 1 + percentage = Math.min(Math.max(percentage, 0), 1); + return ( + + + + ); +}; diff --git a/src/components/BoardUsers/BoardUsers.scss b/src/components/BoardUsers/BoardUsers.scss index aad9ad0b0f..3ae600b606 100644 --- a/src/components/BoardUsers/BoardUsers.scss +++ b/src/components/BoardUsers/BoardUsers.scss @@ -1,114 +1,118 @@ @import "constants/style.scss"; .board-users { - list-style-type: none; - align-self: center; display: flex; flex-direction: row; - width: max-content; - padding: 0; - margin: 0; + gap: $margin--default; } -.board-users li { - display: inline; -} - -.board-users__other-avatars { - box-sizing: border-box; +.board-users__button { + display: flex; + justify-content: center; + align-items: center; + padding: 4px; background: none; border: none; outline: none; - display: flex; - flex-direction: row-reverse; - align-items: center; - cursor: pointer; - padding-left: $padding--default; border-radius: 16px; - & .user-avatar, - & .rest-users { - margin-left: -12px; - transition: all 0.08s ease-out; - } - - &:hover { - & > .rest-users { - transform: scale(1.16); - } - & .user-avatar { - filter: brightness(1.1); - transform: scale(1.08); - } + &--others { + flex-direction: row-reverse; + padding-left: $padding--default; } &:focus-visible { box-shadow: 0 0 0 2px rgba($color-backlog-blue, 0.48); } - &:active { - & > .rest-users, - & > :not(.rest-users) { - transform: scale(1); + &:hover { + .board-users__avatar { + filter: brightness(1.1); + transform: scale(1.08); } } } -.board-users__my-avatar { - display: contents; - margin-left: $margin--small; - - & > button { - border: none; - outline: none; - background: none; - border-radius: 16px; - cursor: pointer; +.board-users__avatar { + transition: all 0.08s ease-out; - &:focus-visible { - box-shadow: 0 0 0 2px rgba($color-backlog-blue, 0.48); - } + &--others { + margin-left: -12px; } } -.board-users__my-avatar .user-avatar { - transition: all 0.08s ease-out; - margin: 0; - - &:hover { - filter: brightness(1.1); - transform: scale(1.08); +.rest-users { + position: relative; + font-size: $text-size--medium; + height: $icon--extralarge; + width: $icon--extralarge; + border-radius: $border-radius--round; + background-color: $menu-icon-background-color--dark; + padding: 2px; + color: $color-white; + font-weight: 700; + + &__readiness { + color: $color-progress-circle; + border-radius: $border-radius--round; + + circle { + transition: stroke-dashoffset 0.45s ease-in-out; + fill: transparent; + } } - &:active { - transform: scale(1); + &__count, + &__all-ready { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + // line-height: 36px; + // font-size: $text-size--medium; } -} -@media screen and (max-width: 768px) { - .board-users { - margin-right: $margin--small; + &__all-ready { + color: $color-white; + width: 100%; + height: 100%; + + .circle { + display: none; + } + + .check { + --dasharray: 20; + stroke-dasharray: var(--dasharray); + stroke-dashoffset: 0; + animation: draw 0.6s ease-in-out, scale 0.3s ease-out; + transform-origin: 37% 40%; + } } } -@media screen and (max-width: 500px) { - .board-users { - margin-right: 0; +@media #{$mini-smartphone} { + .board-users__button--others { + display: none; } +} - .board-users__other-avatars { - display: none; +[theme="dark"] { + .rest-users { + background-color: $color-icon-light-blue; + color: $color-dark-two; } - .board-users__my-avatar { - margin-right: 0; + .board-users__button { + &:focus-visible { + box-shadow: 0 0 0 2px rgba($color-planning-pink, 0.48); + } } } -[theme="dark"] { - .board-users__other-avatars:focus-visible, - .board-users__my-avatar > button:focus-visible { - box-shadow: 0 0 0 2px rgba($color-planning-pink, 0.48); +@keyframes draw { + 0% { + stroke-dashoffset: var(--dasharray); } } diff --git a/src/components/BoardUsers/BoardUsers.tsx b/src/components/BoardUsers/BoardUsers.tsx index 1ad142c10e..aacd6e4fbf 100644 --- a/src/components/BoardUsers/BoardUsers.tsx +++ b/src/components/BoardUsers/BoardUsers.tsx @@ -4,6 +4,8 @@ import {useEffect, useState} from "react"; import {useNavigate} from "react-router"; import {useTranslation} from "react-i18next"; import {ParticipantsList} from "components/BoardHeader/ParticipantsList"; +import {ProgressCircle} from "components/BoardHeader/ParticipantsList/ProgressCircle"; +import {ReactComponent as CheckIcon} from "assets/icon-check.svg"; import {UserAvatar} from "./UserAvatar"; const getWindowDimensions = () => { @@ -43,53 +45,55 @@ export const BoardUsers = () => { me: state.participants!.self, })); - const usersToShow = them.slice().splice(0, them.length > NUM_OF_DISPLAYED_USERS ? NUM_OF_DISPLAYED_USERS - 1 : NUM_OF_DISPLAYED_USERS); + const usersRest = them.slice(); + const usersToShow = usersRest.splice(0, them.length > NUM_OF_DISPLAYED_USERS ? NUM_OF_DISPLAYED_USERS - 1 : NUM_OF_DISPLAYED_USERS); return ( -
- +
+ {them.length > 0 && ( + + )} + {!!me && ( + + )} setShowParticipants(false)} />
); diff --git a/src/components/BoardUsers/BoardUser.scss b/src/components/BoardUsers/UserAvatar.scss similarity index 82% rename from src/components/BoardUsers/BoardUser.scss rename to src/components/BoardUsers/UserAvatar.scss index 884d2a177e..11c7b19709 100644 --- a/src/components/BoardUsers/BoardUser.scss +++ b/src/components/BoardUsers/UserAvatar.scss @@ -1,16 +1,12 @@ @import "constants/style.scss"; -.user-avatar, -.rest-users { +.user-avatar { box-sizing: border-box; height: 48px; + width: 48px; border-radius: 100px; display: inline-block; position: relative; -} - -.user-avatar { - width: 48px; #Circle-Background { stroke: $color-white-one; @@ -18,23 +14,6 @@ } } -.rest-users { - background-color: $menu-icon-background-color--dark; - color: $color-white; - height: 36px; - width: 36px; -} - -.user__initials, -.rest-users__count { - position: relative; - color: var(--accent-color); - font-weight: bold; - line-height: 36px; - font-size: $text-size--medium; - padding-left: 4px; -} - .user-avatar__ready { position: absolute; top: -8px; @@ -96,11 +75,6 @@ } [theme="dark"] { - .user__initials, - .rest-users { - background-color: #9ebfff; - color: #333948; - } .user-avatar__raised-hand { color: $color-planning-pink; } diff --git a/src/components/BoardUsers/UserAvatar.tsx b/src/components/BoardUsers/UserAvatar.tsx index 1b8cb71cc0..a05ef0ae97 100644 --- a/src/components/BoardUsers/UserAvatar.tsx +++ b/src/components/BoardUsers/UserAvatar.tsx @@ -1,5 +1,5 @@ import {useEffect, useRef, useState} from "react"; -import "./BoardUser.scss"; +import "./UserAvatar.scss"; import classNames from "classnames"; import {ReactComponent as IconCheck} from "assets/icon-check.svg"; import {ReactComponent as RaisedHand} from "assets/icon-hand.svg"; diff --git a/src/components/Infobar/Infobar.scss b/src/components/Infobar/Infobar.scss index 0f24c182cd..60c0f9349e 100644 --- a/src/components/Infobar/Infobar.scss +++ b/src/components/Infobar/Infobar.scss @@ -22,10 +22,10 @@ } .info-bar__return-to-focused-note-button > svg { - background-color: #333948; + background-color: $menu-icon-background-color--dark; color: $color-white; } [theme="dark"] .info-bar__return-to-focused-note-button > svg { background-color: $color-white; - color: #333948; + color: $menu-icon-background-color--dark; } diff --git a/src/constants/style.scss b/src/constants/style.scss index 48a24db9db..5e5fd5f8e6 100644 --- a/src/constants/style.scss +++ b/src/constants/style.scss @@ -24,6 +24,7 @@ $menu-icon-background-color--dark: #333948; $menu-icon-background-color--light: $color-white; $tooltip-background-color--light: #d3daf0; $tooltip-background-color--dark: #485064; +$color-progress-circle: #3c7fff; $color-icon-light-blue: #9ebfff; // theme colors