tykayn/mastodon
1
0
Fork 0
mirror of https://framagit.org/tykayn/mastodon.git synced 2023-08-25 08:33:12 +02:00
Code Issues Projects Releases Wiki Activity

[Glitch] Change icon button styles to make hover/focus states more obvious

Browse Source 
Port c8fd823327 to glitch-soc

Signed-off-by: Thibaut Girka <thib@sitedethib.com>
This commit is contained in:
ThibG 2019-08-03 19:10:50 +02:00 committed by Thibaut Girka
parent 8b57d704dc
commit f02ffce249
3 changed files with 46 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/javascript/flavours/glitch/features/compose/components/options.js
View File

@ -7,7 +7,7 @@ import spring from 'react-motion/lib/spring';
// Components. // Components.
import IconButton from 'flavours/glitch/components/icon_button'; import IconButton from 'flavours/glitch/components/icon_button';
import TextIconButton from 'flavours/glitch/components/text_icon_button'; import TextIconButton from './text_icon_button';
import Dropdown from './dropdown'; import Dropdown from './dropdown';
import ImmutablePureComponent from 'react-immutable-pure-component'; import ImmutablePureComponent from 'react-immutable-pure-component';

16
app/javascript/flavours/glitch/components/text_icon_button.js → app/javascript/flavours/glitch/features/compose/components/text_icon_button.js
View File

@ -1,6 +1,12 @@
import React from 'react'; import React from 'react';
import PropTypes from 'prop-types'; import PropTypes from 'prop-types';
const iconStyle = {
height: null,
lineHeight: '27px',
width: `${18 * 1.28571429}px`,
};
export default class TextIconButton extends React.PureComponent { export default class TextIconButton extends React.PureComponent {
static propTypes = { static propTypes = {
@ -20,7 +26,15 @@ export default class TextIconButton extends React.PureComponent {
const { label, title, active, ariaControls } = this.props; const { label, title, active, ariaControls } = this.props;
return ( return (
<button title={title} aria-label={title} className={`text-icon-button ${active ? 'active' : ''}`} aria-expanded={active} onClick={this.handleClick} aria-controls={ariaControls}> <button
title={title}
aria-label={title}
className={`text-icon-button ${active ? 'active' : ''}`}
aria-expanded={active}
onClick={this.handleClick}
aria-controls={ariaControls}
style={iconStyle}
>
{label} {label}
</button> </button>
); );

36
app/javascript/flavours/glitch/styles/components/index.scss
View File

@ -118,20 +118,29 @@
display: inline-block; display: inline-block;
padding: 0; padding: 0;
color: $action-button-color; color: $action-button-color;
border: none; border: 0;
border-radius: 4px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
transition: color 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: lighten($action-button-color, 7%); color: lighten($action-button-color, 7%);
transition: color 200ms ease-out; background-color: rgba($action-button-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
}
&:focus {
background-color: rgba($action-button-color, 0.3);
} }
&.disabled { &.disabled {
color: darken($action-button-color, 13%); color: darken($action-button-color, 13%);
background-color: transparent;
cursor: default; cursor: default;
} }
@ -156,10 +165,16 @@
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
background-color: rgba($lighter-text-color, 0.15);
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
} }
&.disabled { &.disabled {
color: lighten($lighter-text-color, 7%); color: lighten($lighter-text-color, 7%);
background-color: transparent;
} }
&.active { &.active {
@ -186,7 +201,8 @@
.text-icon-button { .text-icon-button {
color: $lighter-text-color; color: $lighter-text-color;
border: none; border: 0;
border-radius: 4px;
background: transparent; background: transparent;
cursor: pointer; cursor: pointer;
font-weight: 600; font-weight: 600;
@ -194,17 +210,25 @@
padding: 0 3px; padding: 0 3px;
line-height: 27px; line-height: 27px;
outline: 0; outline: 0;
transition: color 100ms ease-in; transition: all 100ms ease-in;
transition-property: background-color, color;
&:hover, &:hover,
&:active, &:active,
&:focus { &:focus {
color: darken($lighter-text-color, 7%); color: darken($lighter-text-color, 7%);
transition: color 200ms ease-out; background-color: rgba($lighter-text-color, 0.15);
transition: all 200ms ease-out;
transition-property: background-color, color;
}
&:focus {
background-color: rgba($lighter-text-color, 0.3);
} }
&.disabled { &.disabled {
color: lighten($lighter-text-color, 20%); color: lighten($lighter-text-color, 20%);
background-color: transparent;
cursor: default; cursor: default;
} }