kibigo!
6 years ago
parent
083170bec7
commit
b4a3792201
@ -0,0 +1,97 @@ |
||||
// Inspired by <CommonLink> from Mastodon GO!
|
||||
// ~ 😘 kibi!
|
||||
|
||||
// Package imports.
|
||||
import classNames from 'classnames'; |
||||
import PropTypes from 'prop-types'; |
||||
import React from 'react'; |
||||
|
||||
// Utils.
|
||||
import { assignHandlers } from 'flavours/glitch/util/react_helpers'; |
||||
|
||||
// Handlers.
|
||||
const handlers = { |
||||
|
||||
// We don't handle clicks that are made with modifiers, since these
|
||||
// often have special browser meanings (eg, "open in new tab").
|
||||
click (e) { |
||||
const { onClick } = this.props; |
||||
if (!onClick || e.button || e.ctrlKey || e.shiftKey || e.altKey || e.metaKey) { |
||||
return; |
||||
} |
||||
onClick(e); |
||||
e.preventDefault(); // Prevents following of the link
|
||||
}, |
||||
}; |
||||
|
||||
// The component.
|
||||
export default class Link extends React.PureComponent { |
||||
|
||||
// Constructor.
|
||||
constructor (props) { |
||||
super(props); |
||||
assignHandlers(this, handlers); |
||||
} |
||||
|
||||
// Rendering.
|
||||
render () { |
||||
const { click } = this.handlers; |
||||
const { |
||||
children, |
||||
className, |
||||
href, |
||||
onClick, |
||||
role, |
||||
title, |
||||
...rest |
||||
} = this.props; |
||||
const computedClass = classNames('link', className, role); |
||||
|
||||
// We assume that our `onClick` is a routing function and give it
|
||||
// the qualities of a link even if no `href` is provided. However,
|
||||
// if we have neither an `onClick` or an `href`, our link is
|
||||
// purely presentational.
|
||||
const conditionalProps = {}; |
||||
if (href) { |
||||
conditionalProps.href = href; |
||||
conditionalProps.onClick = click; |
||||
} else if (onClick) { |
||||
conditionalProps.onClick = click; |
||||
conditionalProps.role = 'link'; |
||||
conditionalProps.tabIndex = 0; |
||||
} else { |
||||
conditionalProps.role = 'presentation'; |
||||
} |
||||
|
||||
// If we were provided a `role` it overwrites any that we may have
|
||||
// set above. This can be used for "links" which are actually
|
||||
// buttons.
|
||||
if (role) { |
||||
conditionalProps.role = role; |
||||
} |
||||
|
||||
// Rendering. We set `rel='noopener'` for user privacy, and our
|
||||
// `target` as `'_blank'`.
|
||||
return ( |
||||
<a |
||||
className={computedClass} |
||||
{...conditionalProps} |
||||
rel='noopener' |
||||
target='_blank' |
||||
title={title} |
||||
{...rest} |
||||
>{children}</a> |
||||
); |
||||
} |
||||
|
||||
} |
||||
|
||||
// Props.
|
||||
Link.propTypes = { |
||||
children: PropTypes.node, |
||||
className: PropTypes.string, |
||||
href: PropTypes.string, // The link destination
|
||||
onClick: PropTypes.func, // A function to call instead of opening the link
|
||||
role: PropTypes.string, // An ARIA role for the link
|
||||
title: PropTypes.string, // A title for the link
|
||||
}; |
||||
@ -1,315 +1,370 @@ |
||||
.composer { |
||||
.composer { padding: 10px } |
||||
|
||||
.composer--spoiler { |
||||
display: block; |
||||
box-sizing: border-box; |
||||
margin: 0; |
||||
border: none; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
width: 100%; |
||||
outline: 0; |
||||
color: $ui-base-color; |
||||
background: $simple-background-color; |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
resize: vertical; |
||||
|
||||
&:focus { outline: 0 } |
||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px } |
||||
} |
||||
|
||||
.composer--warning { |
||||
color: darken($ui-secondary-color, 65%); |
||||
margin-bottom: 15px; |
||||
background: $ui-primary-color; |
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); |
||||
padding: 8px 10px; |
||||
border-radius: 4px; |
||||
font-size: 13px; |
||||
font-weight: 400; |
||||
|
||||
a { |
||||
color: darken($ui-primary-color, 33%); |
||||
font-weight: 500; |
||||
text-decoration: underline; |
||||
|
||||
&:active, |
||||
&:focus, |
||||
&:hover { text-decoration: none } |
||||
} |
||||
} |
||||
|
||||
.composer--reply { |
||||
margin: 0 0 -2px; |
||||
border-radius: 4px 4px 0 0; |
||||
padding: 10px; |
||||
background: $ui-primary-color; |
||||
|
||||
& > header { |
||||
margin-bottom: 5px; |
||||
overflow: hidden; |
||||
|
||||
& > .account { |
||||
& > .avatar { |
||||
float: left; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
& > .display_name { |
||||
color: $ui-base-color; |
||||
display: block; |
||||
padding-right: 25px; |
||||
max-width: 100%; |
||||
line-height: 24px; |
||||
text-decoration: none; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
|
||||
& > .cancel { |
||||
float: right; |
||||
line-height: 24px; |
||||
} |
||||
} |
||||
|
||||
& > .content { |
||||
position: relative; |
||||
margin: 10px 0; |
||||
padding: 0 12px; |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
color: $ui-base-color; |
||||
word-wrap: break-word; |
||||
font-weight: 400; |
||||
overflow: visible; |
||||
white-space: pre-wrap; |
||||
padding-top: 5px; |
||||
} |
||||
|
||||
.emojione { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: -5px 0 0; |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 20px; |
||||
|
||||
&:last-child { margin-bottom: 0 } |
||||
} |
||||
|
||||
a { |
||||
color: lighten($ui-base-color, 20%); |
||||
text-decoration: none; |
||||
|
||||
&:hover { text-decoration: underline } |
||||
|
||||
&.mention { |
||||
&:hover { |
||||
text-decoration: none; |
||||
|
||||
span { text-decoration: underline } |
||||
} |
||||
} |
||||
} |
||||
} |
||||
|
||||
.composer--spoiler { |
||||
.composer--textarea { |
||||
background: $simple-background-color; |
||||
position: relative; |
||||
|
||||
&:disabled { background: $ui-secondary-color } |
||||
|
||||
& > .textarea { |
||||
display: block; |
||||
box-sizing: border-box; |
||||
margin: 0; |
||||
border: none; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
border-radius: 4px 4px 0 0; |
||||
padding: 10px 32px 0 10px; |
||||
width: 100%; |
||||
min-height: 100px; |
||||
outline: 0; |
||||
color: $ui-base-color; |
||||
background: $simple-background-color; |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
resize: vertical; |
||||
resize: none; |
||||
|
||||
&:focus { outline: 0 } |
||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px } |
||||
|
||||
@include limited-single-column('screen and (max-width: 600px)') { |
||||
height: 100px !important; // prevent auto-resize textarea |
||||
resize: vertical; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.composer--warning { |
||||
color: darken($ui-secondary-color, 65%); |
||||
margin-bottom: 15px; |
||||
background: $ui-primary-color; |
||||
box-shadow: 0 2px 6px rgba($base-shadow-color, 0.3); |
||||
padding: 8px 10px; |
||||
border-radius: 4px; |
||||
font-size: 13px; |
||||
font-weight: 400; |
||||
.composer--textarea--suggestions { |
||||
display: block; |
||||
position: absolute; |
||||
box-sizing: border-box; |
||||
top: 100%; |
||||
border-radius: 0 0 4px 4px; |
||||
padding: 6px; |
||||
width: 100%; |
||||
color: $ui-base-color; |
||||
background: $ui-secondary-color; |
||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); |
||||
font-size: 14px; |
||||
z-index: 99; |
||||
|
||||
&[hidden] { display: none } |
||||
} |
||||
|
||||
a { |
||||
color: darken($ui-primary-color, 33%); |
||||
font-weight: 500; |
||||
text-decoration: underline; |
||||
.composer--textarea--suggestions--item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
font-size: 14px; |
||||
line-height: 18px; |
||||
cursor: pointer; |
||||
|
||||
&:active, |
||||
&:focus, |
||||
&:hover { text-decoration: none } |
||||
&:hover, |
||||
&:focus, |
||||
&:active, |
||||
&.active { background: darken($ui-secondary-color, 10%) } |
||||
|
||||
& > .emoji { |
||||
img { |
||||
display: block; |
||||
float: left; |
||||
margin-right: 8px; |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.composer--reply { |
||||
margin: 0 0 -2px; |
||||
border-radius: 4px 4px 0 0; |
||||
padding: 10px; |
||||
background: $ui-primary-color; |
||||
|
||||
& > header { |
||||
margin-bottom: 5px; |
||||
overflow: hidden; |
||||
|
||||
& > .account { |
||||
& > .avatar { |
||||
float: left; |
||||
margin-right: 5px; |
||||
} |
||||
|
||||
& > .display_name { |
||||
color: $ui-base-color; |
||||
display: block; |
||||
padding-right: 25px; |
||||
max-width: 100%; |
||||
line-height: 24px; |
||||
text-decoration: none; |
||||
overflow: hidden; |
||||
} |
||||
} |
||||
.composer--upload_form { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 5px; |
||||
color: $ui-base-color; |
||||
background: $simple-background-color; |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
overflow: hidden; |
||||
} |
||||
|
||||
& > .cancel { |
||||
float: right; |
||||
line-height: 24px; |
||||
} |
||||
} |
||||
.composer--upload_form--item { |
||||
flex: 1 1 0; |
||||
margin: 5px; |
||||
min-width: 40%; |
||||
|
||||
& > .content { |
||||
position: relative; |
||||
margin: 10px 0; |
||||
padding: 0 12px; |
||||
& > div { |
||||
position: relative; |
||||
border-radius: 4px; |
||||
height: 100px; |
||||
width: 100%; |
||||
background-position: center; |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
|
||||
input { |
||||
display: block; |
||||
position: absolute; |
||||
box-sizing: border-box; |
||||
bottom: 0; |
||||
left: 0; |
||||
margin: 0; |
||||
border: 0; |
||||
padding: 10px; |
||||
width: 100%; |
||||
color: $ui-secondary-color; |
||||
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); |
||||
font-size: 14px; |
||||
line-height: 20px; |
||||
color: $ui-base-color; |
||||
word-wrap: break-word; |
||||
font-weight: 400; |
||||
overflow: visible; |
||||
white-space: pre-wrap; |
||||
padding-top: 5px; |
||||
} |
||||
font-family: inherit; |
||||
font-weight: 500; |
||||
opacity: 0; |
||||
z-index: 2; |
||||
transition: opacity .1s ease; |
||||
|
||||
&:focus { color: $white } |
||||
|
||||
.emojione { |
||||
width: 20px; |
||||
height: 20px; |
||||
margin: -5px 0 0; |
||||
&::placeholder { |
||||
opacity: 0.54; |
||||
color: $ui-secondary-color; |
||||
} |
||||
} |
||||
|
||||
p { |
||||
margin-bottom: 20px; |
||||
& > .close { mix-blend-mode: difference } |
||||
} |
||||
|
||||
&:last-child { margin-bottom: 0 } |
||||
&.active { |
||||
& > div { |
||||
input { opacity: 1 } |
||||
} |
||||
} |
||||
} |
||||
|
||||
a { |
||||
color: lighten($ui-base-color, 20%); |
||||
text-decoration: none; |
||||
.composer--options { |
||||
padding: 10px; |
||||
background: darken($simple-background-color, 8%); |
||||
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); |
||||
border-radius: 0 0 4px 4px; |
||||
|
||||
& > * { |
||||
display: inline-block; |
||||
box-sizing: content-box; |
||||
padding: 0 3px; |
||||
line-height: 27px; |
||||
} |
||||
|
||||
&:hover { text-decoration: underline } |
||||
& > hr { |
||||
display: inline-block; |
||||
margin: 0 3px; |
||||
border-width: 0 0 0 1px; |
||||
border-style: none none none solid; |
||||
border-color: transparent transparent transparent darken($simple-background-color, 24%); |
||||
padding: 0; |
||||
background: transparent; |
||||
} |
||||
} |
||||
|
||||
&.mention { |
||||
&:hover { |
||||
text-decoration: none; |
||||
.composer--options--dropdown { |
||||
& > .value { transition: none } |
||||
|
||||
span { text-decoration: underline } |
||||
} |
||||
} |
||||
&.active { |
||||
& > .value { |
||||
border-radius: 4px 4px 0 0; |
||||
box-shadow: 0 -4px 4px rgba($base-shadow-color, 0.1); |
||||
color: $primary-text-color; |
||||
background: $ui-highlight-color; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.composer--textarea { |
||||
background: $simple-background-color; |
||||
position: relative; |
||||
.composer--options--dropdown__dropdown { |
||||
position: absolute; |
||||
margin-left: 40px; |
||||
border-radius: 4px; |
||||
box-shadow: 2px 4px 15px rgba($base-shadow-color, 0.4); |
||||
background: $simple-background-color; |
||||
overflow: hidden; |
||||
transform-origin: 50% 0; |
||||
} |
||||
|
||||
&:disabled { background: $ui-secondary-color } |
||||
.composer--options--dropdown--item { |
||||
color: $ui-base-color; |
||||
padding: 10px; |
||||
cursor: pointer; |
||||
display: flex; |
||||
|
||||
& > .textarea { |
||||
display: block; |
||||
box-sizing: border-box; |
||||
margin: 0; |
||||
border: none; |
||||
border-radius: 4px 4px 0 0; |
||||
padding: 10px 32px 0 10px; |
||||
width: 100%; |
||||
min-height: 100px; |
||||
outline: 0; |
||||
color: $ui-base-color; |
||||
background: $simple-background-color; |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
resize: none; |
||||
& > .content { |
||||
flex: 1 1 auto; |
||||
color: darken($ui-primary-color, 24%); |
||||
|
||||
&:focus { outline: 0 } |
||||
@include single-column('screen and (max-width: 630px)') { font-size: 16px } |
||||
&:not(:first-child) { margin-left: 10px } |
||||
|
||||
@include limited-single-column('screen and (max-width: 600px)') { |
||||
height: 100px !important; // prevent auto-resize textarea |
||||
resize: vertical; |
||||
} |
||||
} |
||||
|
||||
.composer--textarea--suggestions { |
||||
strong { |
||||
display: block; |
||||
position: absolute; |
||||
box-sizing: border-box; |
||||
top: 100%; |
||||
border-radius: 0 0 4px 4px; |
||||
padding: 6px; |
||||
width: 100%; |
||||
color: $ui-base-color; |
||||
background: $ui-secondary-color; |
||||
box-shadow: 4px 4px 6px rgba($base-shadow-color, 0.4); |
||||
font-size: 14px; |
||||
z-index: 99; |
||||
|
||||
&[hidden] { display: none } |
||||
|
||||
.composer--textarea--suggestions--item { |
||||
display: flex; |
||||
flex-direction: row; |
||||
align-items: center; |
||||
justify-content: flex-start; |
||||
border-radius: 4px; |
||||
padding: 10px; |
||||
font-size: 14px; |
||||
line-height: 18px; |
||||
cursor: pointer; |
||||
|
||||
&:hover, |
||||
&:focus, |
||||
&:active, |
||||
&.active { background: darken($ui-secondary-color, 10%) } |
||||
|
||||
& > .emoji { |
||||
img { |
||||
display: block; |
||||
float: left; |
||||
margin-right: 8px; |
||||
width: 16px; |
||||
height: 16px; |
||||
} |
||||
} |
||||
} |
||||
font-weight: 500; |
||||
} |
||||
} |
||||
|
||||
.composer--upload_form { |
||||
display: flex; |
||||
flex-direction: row; |
||||
flex-wrap: wrap; |
||||
padding: 5px; |
||||
color: $ui-base-color; |
||||
background: $simple-background-color; |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
overflow: hidden; |
||||
&:hover, |
||||
&.active { |
||||
background: $ui-highlight-color; |
||||
color: $primary-text-color; |
||||
|
||||
.composer--upload_form--item { |
||||
flex: 1 1 0; |
||||
margin: 5px; |
||||
min-width: 40%; |
||||
|
||||
& > div { |
||||
position: relative; |
||||
border-radius: 4px; |
||||
height: 100px; |
||||
width: 100%; |
||||
background-position: center; |
||||
background-size: cover; |
||||
background-repeat: no-repeat; |
||||
|
||||
input { |
||||
display: block; |
||||
position: absolute; |
||||
box-sizing: border-box; |
||||
bottom: 0; |
||||
left: 0; |
||||
margin: 0; |
||||
border: 0; |
||||
padding: 10px; |
||||
width: 100%; |
||||
color: $ui-secondary-color; |
||||
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 80%, transparent); |
||||
font-size: 14px; |
||||
font-family: inherit; |
||||
font-weight: 500; |
||||
opacity: 0; |
||||
z-index: 2; |
||||
transition: opacity .1s ease; |
||||
|
||||
&:focus { color: $white } |
||||
|
||||
&::placeholder { |
||||
opacity: 0.54; |
||||
color: $ui-secondary-color; |
||||
} |
||||
} |
||||
|
||||
& > .close { mix-blend-mode: difference } |
||||
} |
||||
& > .content { |
||||
color: $primary-text-color; |
||||
|
||||
&.active { |
||||
& > div { |
||||
input { opacity: 1 } |
||||
} |
||||
} |
||||
strong { color: $primary-text-color } |
||||
} |
||||
} |
||||
|
||||
.composer--options { |
||||
padding: 10px; |
||||
background: darken($simple-background-color, 8%); |
||||
box-shadow: inset 0 5px 5px rgba($base-shadow-color, 0.05); |
||||
border-radius: 0 0 4px 4px; |
||||
|
||||
& > * { |
||||
display: inline-block; |
||||
box-sizing: content-box; |
||||
padding: 0 3px; |
||||
line-height: 27px; |
||||
} |
||||
&.active:hover { background: lighten($ui-highlight-color, 4%) } |
||||
} |
||||
|
||||
& > hr { |
||||
display: inline-block; |
||||
margin: 0 3px; |
||||
border-width: 0 0 0 1px; |
||||
border-style: none none none solid; |
||||
border-color: transparent transparent transparent darken($simple-background-color, 24%); |
||||
padding: 0; |
||||
background: transparent; |
||||
} |
||||
} |
||||
.composer--publisher { |
||||
padding-top: 10px; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
|
||||
.composer--publisher { |
||||
& > .count { |
||||
display: inline-block; |
||||
margin: 0 16px 0 8px; |
||||
padding-top: 10px; |
||||
text-align: right; |
||||
white-space: nowrap; |
||||
overflow: hidden; |
||||
|
||||
& > .count { |
||||
display: inline-block; |
||||
margin: 0 16px 0 8px; |
||||
padding-top: 10px; |
||||
font-size: 16px; |
||||
line-height: 36px; |
||||
} |
||||
font-size: 16px; |
||||
line-height: 36px; |
||||
} |
||||
|
||||
& > .primary { |
||||
display: inline-block; |
||||
margin: 0; |
||||
padding: 0 10px; |
||||
text-align: center; |
||||
} |
||||
& > .primary { |
||||
display: inline-block; |
||||
margin: 0; |
||||
padding: 0 10px; |
||||
text-align: center; |
||||
} |
||||
|
||||
& > .side_arm { |
||||
display: inline-block; |
||||
margin: 0 2px 0 0; |
||||
padding: 0; |
||||
width: 36px; |
||||
text-align: center; |
||||
} |
||||
& > .side_arm { |
||||
display: inline-block; |
||||
margin: 0 2px 0 0; |
||||
padding: 0; |
||||
width: 36px; |
||||
text-align: center; |
||||
} |
||||
|
||||
&.over { |
||||
& > .count { color: $warning-red } |
||||
} |
||||
&.over { |
||||
& > .count { color: $warning-red } |
||||
} |
||||
} |
||||
|
||||
Loading…
Reference in new issue