Add conversation header button hover states
This commit is contained in:
parent
a2a0d56270
commit
8c951602b7
2 changed files with 113 additions and 138 deletions
|
@ -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
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 }) => (
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue