PrivateCoffee/element-web
4
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 3

Use AccessibleButton for 'In reply to' link button on ReplyChain (#8726)

Browse source 
- Remove ButtonResetDefault mixin to respect the concept of cascading

Signed-off-by: Suguru Hirahara <luixxiul@users.noreply.github.com>
This commit is contained in:
Suguru Hirahara 2022-05-31 21:52:12 +00:00 committed by GitHub
parent b776cc8c1f
commit b12a272385
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 15 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
res/css/views/elements/_ReplyChain.scss
View file

@ -15,20 +15,19 @@ limitations under the License.
*/ */
.mx_ReplyChain { .mx_ReplyChain {
margin-top: 0; margin: 0 0 $spacing-8 0;
margin-left: 0; padding: 0 10px; // TODO: Use a spacing variable
margin-right: 0;
margin-bottom: 8px;
padding: 0 10px;
border-left: 2px solid $accent; border-left: 2px solid $accent;
border-radius: 2px; border-radius: 2px;
.mx_ReplyChain_show { .mx_ReplyChain_show {
@mixin ButtonResetDefault; &.mx_AccessibleButton_kind_link_inline {
color: inherit; padding: 0;
color: unset;
&:hover { &:hover {
color: $links; color: $links;
}
} }
} }

10
src/components/views/elements/ReplyChain.tsx
View file

@ -32,7 +32,7 @@ import { Action } from "../../../dispatcher/actions";
import Spinner from './Spinner'; import Spinner from './Spinner';
import ReplyTile from "../rooms/ReplyTile"; import ReplyTile from "../rooms/ReplyTile";
import Pill, { PillType } from './Pill'; import Pill, { PillType } from './Pill';
import { ButtonEvent } from './AccessibleButton'; import AccessibleButton, { ButtonEvent } from './AccessibleButton';
import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply'; import { getParentEventId, shouldDisplayReply } from '../../../utils/Reply';
import RoomContext from "../../../contexts/RoomContext"; import RoomContext from "../../../contexts/RoomContext";
import { MatrixClientPeg } from '../../../MatrixClientPeg'; import { MatrixClientPeg } from '../../../MatrixClientPeg';
@ -217,9 +217,13 @@ export default class ReplyChain extends React.Component<IProps, IState> {
{ {
_t('<a>In reply to</a> <pill>', {}, { _t('<a>In reply to</a> <pill>', {}, {
'a': (sub) => ( 'a': (sub) => (
<button onClick={this.onQuoteClick} className="mx_ReplyChain_show"> <AccessibleButton
kind="link_inline"
className="mx_ReplyChain_show"
onClick={this.onQuoteClick}
>
{ sub } { sub }
</button> </AccessibleButton>
), ),
'pill': ( 'pill': (
<Pill <Pill