mirror of
https://github.com/glitch-soc/mastodon.git
synced 2025-12-22 06:49:09 +00:00
[WIP] Initial status work
This commit is contained in:
kibigo!
146
app/javascript/glitch/components/common/button/index.js
Normal file
146
app/javascript/glitch/components/common/button/index.js
Normal file
@@ -0,0 +1,146 @@
|
||||
// <CommonButton>
|
||||
// ========
|
||||
|
||||
// For code documentation, please see:
|
||||
// https://glitch-soc.github.io/docs/javascript/glitch/common/button
|
||||
|
||||
// For more information, please contact:
|
||||
// @kibi@glitch.social
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// Imports
|
||||
// -------
|
||||
|
||||
// Package imports.
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
// Our imports.
|
||||
import CommonLink from 'glitch/components/common/link';
|
||||
import CommonIcon from 'glitch/components/common/icon';
|
||||
|
||||
// Stylesheet imports.
|
||||
import './style';
|
||||
|
||||
// * * * * * * * //
|
||||
|
||||
// The component
|
||||
// -------------
|
||||
|
||||
export default class CommonButton extends React.PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
active: PropTypes.bool,
|
||||
animate: PropTypes.bool,
|
||||
children: PropTypes.node,
|
||||
className: PropTypes.string,
|
||||
disabled: PropTypes.bool,
|
||||
href: PropTypes.string,
|
||||
icon: PropTypes.string,
|
||||
onClick: PropTypes.func,
|
||||
showTitle: PropTypes.bool,
|
||||
title: PropTypes.string,
|
||||
}
|
||||
state = {
|
||||
loaded: false,
|
||||
}
|
||||
|
||||
// The `loaded` state property activates our animations. We wait
|
||||
// until an activation change in order to prevent unsightly
|
||||
// animations when the component first mounts.
|
||||
componentWillReceiveProps (nextProps) {
|
||||
const { active } = this.props;
|
||||
|
||||
// The double "not"s here cast both arguments to booleans.
|
||||
if (!nextProps.active !== !active) this.setState({ loaded: true });
|
||||
}
|
||||
|
||||
handleClick = (e) => {
|
||||
const { onClick } = this.props;
|
||||
if (!onClick) return;
|
||||
onClick(e);
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
// Rendering the component.
|
||||
render () {
|
||||
const { handleClick } = this;
|
||||
const {
|
||||
active,
|
||||
animate,
|
||||
children,
|
||||
className,
|
||||
disabled,
|
||||
href,
|
||||
icon,
|
||||
onClick,
|
||||
showTitle,
|
||||
title,
|
||||
...others
|
||||
} = this.props;
|
||||
const { loaded } = this.state;
|
||||
const computedClass = classNames('glitch', 'glitch__common__button', className, {
|
||||
_active: active && !href, // Links can't be active
|
||||
_animated: animate && loaded,
|
||||
_disabled: disabled,
|
||||
_link: href,
|
||||
_star: icon === 'star',
|
||||
'_with-text': children || title && showTitle,
|
||||
});
|
||||
let conditionalProps = {};
|
||||
|
||||
// If href is provided, we render a link.
|
||||
if (href) {
|
||||
if (!disabled && href) conditionalProps.href = href;
|
||||
if (title && !showTitle) {
|
||||
if (!children) conditionalProps.title = title;
|
||||
else conditionalProps['aria-label'] = title;
|
||||
}
|
||||
if (onClick) {
|
||||
if (!disabled) conditionalProps.onClick = handleClick;
|
||||
else conditionalProps['aria-disabled'] = true;
|
||||
conditionalProps.role = 'button';
|
||||
conditionalProps.tabIndex = 0;
|
||||
}
|
||||
return (
|
||||
<CommonLink
|
||||
className={computedClass}
|
||||
{...conditionalProps}
|
||||
{...others}
|
||||
>
|
||||
{children}
|
||||
{title && showTitle ? <span className='button\title'>{title}</span> : null}
|
||||
<CommonIcon name={icon} className='button\icon' />
|
||||
</CommonLink>
|
||||
);
|
||||
|
||||
// Otherwise, we render a button.
|
||||
} else {
|
||||
if (active !== void 0) conditionalProps['aria-pressed'] = active;
|
||||
if (title && !showTitle) {
|
||||
if (!children) conditionalProps.title = title;
|
||||
else conditionalProps['aria-label'] = title;
|
||||
}
|
||||
if (onClick && !disabled) {
|
||||
conditionalProps.onClick = handleClick;
|
||||
}
|
||||
return (
|
||||
<button
|
||||
className={computedClass}
|
||||
{...conditionalProps}
|
||||
disabled={disabled}
|
||||
{...others}
|
||||
tabIndex='0'
|
||||
type='button'
|
||||
>
|
||||
{children}
|
||||
{title && showTitle ? <span className='button\title'>{title}</span> : null}
|
||||
<CommonIcon name={icon} className='button\icon' />
|
||||
</button>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
}
|
||||
134
app/javascript/glitch/components/common/button/style.scss
Normal file
134
app/javascript/glitch/components/common/button/style.scss
Normal file
@@ -0,0 +1,134 @@
|
||||
@import 'variables';
|
||||
|
||||
.glitch.glitch__common__button {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
padding: 0;
|
||||
color: $ui-base-lighter-color;
|
||||
background: transparent;
|
||||
outline: thin transparent dotted;
|
||||
font-size: inherit;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
transition: color ($glitch-animation-speed * .15s) ease-in, outline-color ($glitch-animation-speed * .3s) ease-in-out;
|
||||
|
||||
&._animated .button\\icon {
|
||||
animation-name: glitch__common__button__deactivate;
|
||||
animation-duration: .9s;
|
||||
animation-timing-function: ease-in-out;
|
||||
|
||||
@keyframes glitch__common__button__deactivate {
|
||||
from {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
57% {
|
||||
transform: rotate(-60deg);
|
||||
}
|
||||
86% {
|
||||
transform: rotate(30deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&._active {
|
||||
.button\\icon {
|
||||
color: $ui-highlight-color;
|
||||
}
|
||||
|
||||
&._animated .button\\icon {
|
||||
animation-name: glitch__common__button__activate;
|
||||
|
||||
@keyframes glitch__common__button__activate {
|
||||
from {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
57% {
|
||||
transform: rotate(420deg); // Blazin' 😎
|
||||
}
|
||||
86% {
|
||||
transform: rotate(330deg);
|
||||
}
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
The special `._star` class is given to buttons which have a star
|
||||
icon (see JS). When they are active, we give them a gold star ⭐️.
|
||||
*/
|
||||
&._star .button\\icon {
|
||||
color: $gold-star;
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
For links, we consider them disabled if they don't have an `href`
|
||||
attribute (see JS).
|
||||
*/
|
||||
&._disabled {
|
||||
opacity: $glitch-disabled-opacity;
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
This is confusing becuase of the names, but the `color .3 ease-out`
|
||||
transition is actually used when easing *in* to a hovering/active/
|
||||
focusing state, and the default transition is used when leaving. Our
|
||||
buttons are a little slower to glow than they are to fade.
|
||||
*/
|
||||
&:active,
|
||||
&:focus,
|
||||
&:hover {
|
||||
color: $glitch-lighter-color;
|
||||
transition: color ($glitch-animation-speed * .3s) ease-out, outline-color ($glitch-animation-speed * .15s) ease-in-out;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
outline-color: currentColor;
|
||||
}
|
||||
|
||||
/*
|
||||
Buttons with text have a number of different styling rules and an
|
||||
overall different appearance.
|
||||
*/
|
||||
&._with-text {
|
||||
display: inline-block;
|
||||
border: none;
|
||||
border-radius: .35em;
|
||||
padding: 0 .5em;
|
||||
color: $glitch-texture-color;
|
||||
background: $ui-base-lighter-color;
|
||||
font-size: .75em;
|
||||
font-weight: inherit;
|
||||
text-transform: uppercase;
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
vertical-align: baseline;
|
||||
transition: background-color ($glitch-animation-speed * .15s) ease-in, outline-color ($glitch-animation-speed * .3s) ease-in-out;
|
||||
|
||||
.button\\icon {
|
||||
display: inline-block;
|
||||
font-size: 1.25em;
|
||||
vertical-align: -.1em;
|
||||
}
|
||||
|
||||
& > *:not(:first-child) {
|
||||
margin: 0 0 0 .4em;
|
||||
border-left: 1px solid currentColor;
|
||||
padding: 0 0 0 .3em;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&:hover,
|
||||
&:focus {
|
||||
color: $glitch-texture-color;
|
||||
background: $glitch-lighter-color;
|
||||
transition: background-color ($glitch-animation-speed * .3s) ease-out, outline-color ($glitch-animation-speed * .15s) ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user