mirrors/signal-desktop
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages 2 Wiki Activity Actions

Add conversation header button hover states

Browse source
This commit is contained in:
Evan Hahn 2021-03-02 19:16:04 -06:00 • committed by Josh Perez
parent a2a0d56270
commit 8c951602b7
2 changed files with 113 additions and 138 deletions
Download patch file Download diff file Expand all files Collapse all files

209
stylesheets/components/ConversationHeader.scss
View file

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

42
ts/components/conversation/ConversationHeader.tsx
View file

@ -249,10 +249,9 @@ export class ConversationHeader extends React.Component<PropsType, StateType> {
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<PropsType, StateType> {
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<PropsType, StateType> {
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<PropsType, StateType> {
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<PropsType, StateType> {
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<PropsType, StateType> {
<Measure
bounds
onResize={({ bounds }) => {
const width = (bounds && bounds.width) || 0;
this.setState({ isNarrow: width < 500 });
if (!bounds || !bounds.width) {
return;
}
this.setState({ isNarrow: bounds.width < 500 });
}}
>
{({ measureRef }) => (