From 8c951602b7e5b00de0adb5c3da19d8a798222655 Mon Sep 17 00:00:00 2001 From: Evan Hahn <69474926+EvanHahn-Signal@users.noreply.github.com> Date: Tue, 2 Mar 2021 19:16:04 -0600 Subject: [PATCH] Add conversation header button hover states --- .../components/ConversationHeader.scss | 209 ++++++++---------- .../conversation/ConversationHeader.tsx | 42 ++-- 2 files changed, 113 insertions(+), 138 deletions(-) diff --git a/stylesheets/components/ConversationHeader.scss b/stylesheets/components/ConversationHeader.scss index 6bdfba60d1..bdb17adfe1 100644 --- a/stylesheets/components/ConversationHeader.scss +++ b/stylesheets/components/ConversationHeader.scss @@ -168,32 +168,22 @@ } } - &__calling-button--video, - &__calling-button--audio, - &__calling-button--join, - &__search-button, - &__more-button { + &__button { + $icon-size: 32px; + + @include button-reset; + align-items: stretch; + border-radius: 4px; + border: 2px solid transparent; + display: flex; + height: $icon-size; margin-right: var(--button-spacing); - transition: margin-right 200ms ease-out; - - @include keyboard-mode { - &:focus { - background: $ultramarine-ui-light; - } - } - @include dark-keyboard-mode { - &:focus { - background: $ultramarine-ui-dark; - } - } - } - - &__calling-button { - $icon-size: 24px; - - border: none; + min-width: $icon-size; opacity: 0; - transition: opacity 250ms ease-out; + padding: 2px; + transition: margin-right 200ms ease-out, opacity 200ms ease-out, + background 100ms ease-out; + width: $icon-size; &:disabled { cursor: default; @@ -203,43 +193,89 @@ opacity: 1; } + @include light-theme { + &:hover, + &:focus { + background: $color-gray-02; + } + &:active { + background: $color-gray-05; + } + } + @include dark-theme { + &:hover, + &:focus { + background: $color-gray-80; + } + &:active { + background: $color-gray-75; + } + } + + @include keyboard-mode { + &:focus { + border-color: $ultramarine-ui-light; + } + } + @include dark-keyboard-mode { + &:focus { + border-color: $ultramarine-ui-dark; + } + } + + @mixin normal-button($light-icon, $dark-icon) { + &::before { + content: ''; + display: block; + flex-grow: 1; + @include light-theme { + @include color-svg($light-icon, $color-gray-75); + &:hover, + &:active, + &:focus { + @include color-svg($light-icon, $color-gray-90); + } + } + @include dark-theme { + @include color-svg($dark-icon, $color-gray-15); + &:hover, + &:active, + &:focus { + @include color-svg($dark-icon, $color-gray-02); + } + } + } + } + &--video { - @include light-theme { - @include color-svg( - '../images/icons/v2/video-outline-24.svg', - $color-gray-75 - ); - } - @include dark-theme { - @include color-svg( - '../images/icons/v2/video-solid-24.svg', - $color-gray-15 - ); - } - height: $icon-size; - width: $icon-size; - min-width: $icon-size; + @include normal-button( + '../images/icons/v2/video-outline-24.svg', + '../images/icons/v2/video-solid-24.svg' + ); } &--audio { - @include light-theme { - @include color-svg( - '../images/icons/v2/phone-right-outline-24.svg', - $color-gray-75 - ); - } - @include dark-theme { - @include color-svg( - '../images/icons/v2/phone-right-solid-24.svg', - $color-gray-15 - ); - } - height: $icon-size; - width: $icon-size; - min-width: $icon-size; + @include normal-button( + '../images/icons/v2/phone-right-outline-24.svg', + '../images/icons/v2/phone-right-solid-24.svg' + ); } - &--join { + &--search { + @include normal-button( + '../images/icons/v2/search-24.svg', + '../images/icons/v2/search-24.svg' + ); + } + + &--more { + @include normal-button( + '../images/icons/v2/chevron-down-24.svg', + '../images/icons/v2/chevron-down-24.svg' + ); + } + + &--join-call { @include font-body-1; align-items: center; background-color: $color-accent-green; @@ -252,14 +288,11 @@ text-overflow: ellipsis; white-space: nowrap; user-select: none; - - @include keyboard-mode { - &:focus { - box-shadow: 0px 0px 0px 4px $ultramarine-ui-light; - } - } + width: auto; &:before { + $icon-size: 24px; + @include color-svg( '../images/icons/v2/video-solid-24.svg', $color-white @@ -273,58 +306,4 @@ } } } - - &__search-button { - height: 24px; - width: 24px; - min-width: 24px; - border: none; - opacity: 0; - transition: opacity 250ms ease-out; - - &:disabled { - cursor: default; - } - - &--show { - opacity: 1; - } - - @include light-theme { - @include color-svg('../images/icons/v2/search-24.svg', $color-gray-75); - } - @include dark-theme { - @include color-svg('../images/icons/v2/search-24.svg', $color-gray-15); - } - } - - &__more-button { - height: 24px; - width: 24px; - min-width: 24px; - border: none; - opacity: 0; - transition: opacity 250ms ease-out; - - &:disabled { - cursor: default; - } - - &--show { - opacity: 1; - } - - @include light-theme { - @include color-svg( - '../images/icons/v2/chevron-down-24.svg', - $color-gray-75 - ); - } - @include dark-theme { - @include color-svg( - '../images/icons/v2/chevron-down-24.svg', - $color-gray-15 - ); - } - } } diff --git a/ts/components/conversation/ConversationHeader.tsx b/ts/components/conversation/ConversationHeader.tsx index 28323aca23..10b11e53df 100644 --- a/ts/components/conversation/ConversationHeader.tsx +++ b/ts/components/conversation/ConversationHeader.tsx @@ -249,10 +249,9 @@ export class ConversationHeader extends React.Component { type="button" onClick={this.showMenuBound} className={classNames( - 'module-ConversationHeader__more-button', - showBackButton - ? null - : 'module-ConversationHeader__more-button--show' + 'module-ConversationHeader__button', + 'module-ConversationHeader__button--more', + showBackButton ? null : 'module-ConversationHeader__button--show' )} disabled={showBackButton} aria-label={i18n('moreInfo')} @@ -269,10 +268,9 @@ export class ConversationHeader extends React.Component { type="button" onClick={onSearchInConversation} className={classNames( - 'module-ConversationHeader__search-button', - showBackButton - ? null - : 'module-ConversationHeader__search-button--show' + 'module-ConversationHeader__button', + 'module-ConversationHeader__button--search', + showBackButton ? null : 'module-ConversationHeader__button--show' )} disabled={showBackButton} aria-label={i18n('search')} @@ -295,11 +293,9 @@ export class ConversationHeader extends React.Component { type="button" onClick={onOutgoingVideoCallInConversation} className={classNames( - 'module-ConversationHeader__calling-button', - 'module-ConversationHeader__calling-button--video', - showBackButton - ? null - : 'module-ConversationHeader__calling-button--show' + 'module-ConversationHeader__button', + 'module-ConversationHeader__button--video', + showBackButton ? null : 'module-ConversationHeader__button--show' )} disabled={showBackButton} aria-label={i18n('makeOutgoingVideoCall')} @@ -319,11 +315,11 @@ export class ConversationHeader extends React.Component { type="button" onClick={onOutgoingAudioCallInConversation} className={classNames( - 'module-ConversationHeader__calling-button', - 'module-ConversationHeader__calling-button--audio', + 'module-ConversationHeader__button', + 'module-ConversationHeader__button--audio', showBackButton ? null - : 'module-ConversationHeader__calling-button--show' + : 'module-ConversationHeader__button--show' )} disabled={showBackButton} aria-label={i18n('makeOutgoingCall')} @@ -337,11 +333,9 @@ export class ConversationHeader extends React.Component { type="button" onClick={onOutgoingVideoCallInConversation} className={classNames( - 'module-ConversationHeader__calling-button', - 'module-ConversationHeader__calling-button--join', - showBackButton - ? null - : 'module-ConversationHeader__calling-button--show' + 'module-ConversationHeader__button', + 'module-ConversationHeader__button--join-call', + showBackButton ? null : 'module-ConversationHeader__button--show' )} disabled={showBackButton} > @@ -576,8 +570,10 @@ export class ConversationHeader extends React.Component { { - const width = (bounds && bounds.width) || 0; - this.setState({ isNarrow: width < 500 }); + if (!bounds || !bounds.width) { + return; + } + this.setState({ isNarrow: bounds.width < 500 }); }} > {({ measureRef }) => (