From 25d1c719acd00a53c105d0c8d26c6b282bc2fb21 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 10:43:24 +0200 Subject: [PATCH 01/19] Convert Pill to TS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- .../views/elements/{Pill.js => Pill.tsx} | 127 ++++++++++-------- 1 file changed, 70 insertions(+), 57 deletions(-) rename src/components/views/elements/{Pill.js => Pill.tsx} (79%) diff --git a/src/components/views/elements/Pill.js b/src/components/views/elements/Pill.tsx similarity index 79% rename from src/components/views/elements/Pill.js rename to src/components/views/elements/Pill.tsx index ba166ccfc6f..dd3555ac4e7 100644 --- a/src/components/views/elements/Pill.js +++ b/src/components/views/elements/Pill.tsx @@ -13,13 +13,12 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License. */ + import React from 'react'; -import * as sdk from '../../../index'; import dis from '../../../dispatcher/dispatcher'; import classNames from 'classnames'; import { Room } from 'matrix-js-sdk/src/models/room'; import { RoomMember } from 'matrix-js-sdk/src/models/room-member'; -import PropTypes from 'prop-types'; import { MatrixClientPeg } from '../../../MatrixClientPeg'; import FlairStore from "../../../stores/FlairStore"; import { getPrimaryPermalinkEntity, parseAppLocalLink } from "../../../utils/permalinks/Permalinks"; @@ -28,56 +27,78 @@ import { Action } from "../../../dispatcher/actions"; import { mediaFromMxc } from "../../../customisations/Media"; import Tooltip from './Tooltip'; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import { Group } from "matrix-js-sdk/src/models/group"; +import { MatrixClient } from 'matrix-js-sdk/src'; +import RoomAvatar from '../avatars/RoomAvatar'; +import MemberAvatar from '../avatars/MemberAvatar'; +import BaseAvatar from '../avatars/BaseAvatar'; + +interface IProps { + // The Type of this Pill. If url is given, this is auto-detected. + type?: string; + // The URL to pillify (no validation is done) + url?: string; + // Whether the pill is in a message + inMessage?: boolean; + // The room in which this pill is being rendered + room?: Room; + // Whether to include an avatar in the pill + shouldShowPillAvatar?: boolean; + // Whether to render this pill as if it were highlit by a selection + isSelected?: boolean; + + yOffset?: number; +} + +interface IState { + // ID/alias of the room/user + resourceId: string; + // Type of pill + pillType: string; + // The member related to the user pill + member: RoomMember; + // The group related to the group pill + group: Group; + // The room related to the room pill + room: Room; + // Is the user hovering the pill + hover: boolean; +} @replaceableComponent("views.elements.Pill") -class Pill extends React.Component { - static roomNotifPos(text) { +export default class Pill extends React.Component { + private unmounted = true; + private matrixClient: MatrixClient; + + public static roomNotifPos(text) { return text.indexOf("@room"); } - static roomNotifLen() { + public static roomNotifLen() { return "@room".length; } - static TYPE_USER_MENTION = 'TYPE_USER_MENTION'; - static TYPE_ROOM_MENTION = 'TYPE_ROOM_MENTION'; - static TYPE_GROUP_MENTION = 'TYPE_GROUP_MENTION'; - static TYPE_AT_ROOM_MENTION = 'TYPE_AT_ROOM_MENTION'; // '@room' mention - - static propTypes = { - // The Type of this Pill. If url is given, this is auto-detected. - type: PropTypes.string, - // The URL to pillify (no validation is done) - url: PropTypes.string, - // Whether the pill is in a message - inMessage: PropTypes.bool, - // The room in which this pill is being rendered - room: PropTypes.instanceOf(Room), - // Whether to include an avatar in the pill - shouldShowPillAvatar: PropTypes.bool, - // Whether to render this pill as if it were highlit by a selection - isSelected: PropTypes.bool, - }; + public static TYPE_USER_MENTION = 'TYPE_USER_MENTION'; + public static TYPE_ROOM_MENTION = 'TYPE_ROOM_MENTION'; + public static TYPE_GROUP_MENTION = 'TYPE_GROUP_MENTION'; + public static TYPE_AT_ROOM_MENTION = 'TYPE_AT_ROOM_MENTION'; // '@room' mention - state = { - // ID/alias of the room/user - resourceId: null, - // Type of pill - pillType: null, - - // The member related to the user pill - member: null, - // The group related to the group pill - group: null, - // The room related to the room pill - room: null, - // Is the user hovering the pill - hover: false, - }; + constructor(props: IProps) { + super(props); + + this.state = { + resourceId: null, + pillType: null, + member: null, + group: null, + room: null, + hover: false, + }; + } // TODO: [REACT-WARNING] Replace with appropriate lifecycle event // eslint-disable-next-line camelcase - async UNSAFE_componentWillReceiveProps(nextProps) { + async UNSAFE_componentWillReceiveProps(nextProps: IProps) { let resourceId; let prefix; @@ -148,32 +169,32 @@ class Pill extends React.Component { } componentDidMount() { - this._unmounted = false; - this._matrixClient = MatrixClientPeg.get(); + this.unmounted = false; + this.matrixClient = MatrixClientPeg.get(); // eslint-disable-next-line new-cap this.UNSAFE_componentWillReceiveProps(this.props); // HACK: We shouldn't be calling lifecycle functions ourselves. } componentWillUnmount() { - this._unmounted = true; + this.unmounted = true; } - onMouseOver = () => { + private onMouseOver = (): void => { this.setState({ hover: true, }); }; - onMouseLeave = () => { + private onMouseLeave = (): void => { this.setState({ hover: false, }); }; - doProfileLookup(userId, member) { + private doProfileLookup(userId: string, member): void { MatrixClientPeg.get().getProfileInfo(userId).then((resp) => { - if (this._unmounted) { + if (this.unmounted) { return; } member.name = resp.displayname; @@ -192,7 +213,7 @@ class Pill extends React.Component { }); } - onUserPillClicked = () => { + private onUserPillClicked = (): void => { dis.dispatch({ action: Action.ViewUser, member: this.state.member, @@ -200,10 +221,6 @@ class Pill extends React.Component { }; render() { - const BaseAvatar = sdk.getComponent('views.avatars.BaseAvatar'); - const MemberAvatar = sdk.getComponent('avatars.MemberAvatar'); - const RoomAvatar = sdk.getComponent('avatars.RoomAvatar'); - const resource = this.state.resourceId; let avatar = null; @@ -280,13 +297,12 @@ class Pill extends React.Component { tip = ; } - return + return { this.props.inMessage ? @@ -296,7 +312,6 @@ class Pill extends React.Component { : @@ -311,5 +326,3 @@ class Pill extends React.Component { } } } - -export default Pill; From be40bb98a363e983ab9f0f94e462bf08ff1ef4cb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 11:33:18 +0200 Subject: [PATCH 02/19] Move pill CSS into a separate file MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/_components.scss | 1 + res/css/views/elements/_Pill.scss | 101 ++++++++++++++++++++++++++ res/css/views/elements/_RichText.scss | 84 --------------------- 3 files changed, 102 insertions(+), 84 deletions(-) create mode 100644 res/css/views/elements/_Pill.scss diff --git a/res/css/_components.scss b/res/css/_components.scss index 1146a100b54..b7853bd2795 100644 --- a/res/css/_components.scss +++ b/res/css/_components.scss @@ -127,6 +127,7 @@ @import "./views/elements/_ErrorBoundary.scss"; @import "./views/elements/_EventListSummary.scss"; @import "./views/elements/_FacePile.scss"; +@import "./views/elements/_Pill.scss"; @import "./views/elements/_Field.scss"; @import "./views/elements/_ImageView.scss"; @import "./views/elements/_InfoTooltip.scss"; diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss new file mode 100644 index 00000000000..a0871d15905 --- /dev/null +++ b/res/css/views/elements/_Pill.scss @@ -0,0 +1,101 @@ +/* +Copyright 2021 Šimon Brandner + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +// Most of these should be probably split out into their separate thing + +.mx_UserPill, +.mx_RoomPill, +.mx_GroupPill, +.mx_AtRoomPill { + display: inline-flex; + align-items: center; + vertical-align: middle; + border-radius: $font-16px; + line-height: $font-15px; + padding-left: 0; +} + +a.mx_Pill { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: calc(100% - 1ch); +} + +.mx_Pill { + padding: $font-1px; + padding-right: 0.4em; + vertical-align: text-top; + line-height: $font-17px; +} + +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_GroupPill, +.mx_GroupPill { + color: $accent-fg-color; + background-color: $rte-group-pill-color; +} + +/* More specific to override `.markdown-body a` text-decoration */ +.mx_EventTile_content .markdown-body a.mx_Pill { + text-decoration: none; +} + +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_UserPill, +.mx_UserPill { + color: $primary-fg-color; + background-color: $other-user-pill-bg-color; +} + +.mx_UserPill_selected { + background-color: $accent-color !important; +} + +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, +.mx_EventTile_content .markdown-body a.mx_AtRoomPill, +.mx_EventTile_content .mx_AtRoomPill, +.mx_MessageComposer_input .mx_AtRoomPill { + color: $accent-fg-color; + background-color: $mention-user-pill-bg-color; +} + +/* More specific to override `.markdown-body a` color */ +.mx_EventTile_content .markdown-body a.mx_RoomPill, +.mx_EventTile_content .markdown-body a.mx_GroupPill, +.mx_RoomPill, +.mx_GroupPill { + color: $accent-fg-color; + background-color: $rte-room-pill-color; +} + +.mx_EventTile_body .mx_UserPill, +.mx_EventTile_body .mx_RoomPill, +.mx_EventTile_body .mx_GroupPill { + cursor: pointer; +} + +.mx_UserPill .mx_BaseAvatar, +.mx_RoomPill .mx_BaseAvatar, +.mx_GroupPill .mx_BaseAvatar, +.mx_AtRoomPill .mx_BaseAvatar { + position: relative; + display: inline-flex; + align-items: center; + border-radius: 10rem; + margin-right: 0.24rem; +} diff --git a/res/css/views/elements/_RichText.scss b/res/css/views/elements/_RichText.scss index d60282695c8..a40eb87c7f3 100644 --- a/res/css/views/elements/_RichText.scss +++ b/res/css/views/elements/_RichText.scss @@ -2,90 +2,6 @@ // naming scheme; it's completely unclear where or how they're being used // --Matthew -.mx_UserPill, -.mx_RoomPill, -.mx_GroupPill, -.mx_AtRoomPill { - display: inline-flex; - align-items: center; - vertical-align: middle; - border-radius: $font-16px; - line-height: $font-15px; - padding-left: 0; -} - -a.mx_Pill { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - max-width: calc(100% - 1ch); -} - -.mx_Pill { - padding: $font-1px; - padding-right: 0.4em; - vertical-align: text-top; - line-height: $font-17px; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_GroupPill, -.mx_GroupPill { - color: $accent-fg-color; - background-color: $rte-group-pill-color; -} - -/* More specific to override `.markdown-body a` text-decoration */ -.mx_EventTile_content .markdown-body a.mx_Pill { - text-decoration: none; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_UserPill, -.mx_UserPill { - color: $primary-fg-color; - background-color: $other-user-pill-bg-color; -} - -.mx_UserPill_selected { - background-color: $accent-color !important; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, -.mx_EventTile_content .markdown-body a.mx_AtRoomPill, -.mx_EventTile_content .mx_AtRoomPill, -.mx_MessageComposer_input .mx_AtRoomPill { - color: $accent-fg-color; - background-color: $mention-user-pill-bg-color; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_RoomPill, -.mx_EventTile_content .markdown-body a.mx_GroupPill, -.mx_RoomPill, -.mx_GroupPill { - color: $accent-fg-color; - background-color: $rte-room-pill-color; -} - -.mx_EventTile_body .mx_UserPill, -.mx_EventTile_body .mx_RoomPill, -.mx_EventTile_body .mx_GroupPill { - cursor: pointer; -} - -.mx_UserPill .mx_BaseAvatar, -.mx_RoomPill .mx_BaseAvatar, -.mx_GroupPill .mx_BaseAvatar, -.mx_AtRoomPill .mx_BaseAvatar { - position: relative; - display: inline-flex; - align-items: center; - border-radius: 10rem; - margin-right: 0.24rem; -} - .mx_Markdown_BOLD { font-weight: bold; } From 8a0d067e3f57b2ad39fb23f943de50b781c5aa2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 12:14:35 +0200 Subject: [PATCH 03/19] Cleanup _Pill.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_Pill.scss | 121 +++++++++---------------- res/css/views/rooms/_EventTile.scss | 6 ++ src/components/views/elements/Pill.tsx | 3 - 3 files changed, 47 insertions(+), 83 deletions(-) diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss index a0871d15905..da3d3fd26a9 100644 --- a/res/css/views/elements/_Pill.scss +++ b/res/css/views/elements/_Pill.scss @@ -14,88 +14,49 @@ See the License for the specific language governing permissions and limitations under the License. */ -// Most of these should be probably split out into their separate thing - -.mx_UserPill, -.mx_RoomPill, -.mx_GroupPill, -.mx_AtRoomPill { - display: inline-flex; - align-items: center; - vertical-align: middle; - border-radius: $font-16px; - line-height: $font-15px; - padding-left: 0; -} - -a.mx_Pill { - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - max-width: calc(100% - 1ch); -} - .mx_Pill { - padding: $font-1px; - padding-right: 0.4em; - vertical-align: text-top; + padding: $font-1px 0.4em $font-1px 0; line-height: $font-17px; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_GroupPill, -.mx_GroupPill { - color: $accent-fg-color; - background-color: $rte-group-pill-color; -} - -/* More specific to override `.markdown-body a` text-decoration */ -.mx_EventTile_content .markdown-body a.mx_Pill { - text-decoration: none; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_UserPill, -.mx_UserPill { - color: $primary-fg-color; - background-color: $other-user-pill-bg-color; -} - -.mx_UserPill_selected { - background-color: $accent-color !important; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_highlight .mx_EventTile_content .markdown-body a.mx_UserPill_me, -.mx_EventTile_content .markdown-body a.mx_AtRoomPill, -.mx_EventTile_content .mx_AtRoomPill, -.mx_MessageComposer_input .mx_AtRoomPill { - color: $accent-fg-color; - background-color: $mention-user-pill-bg-color; -} - -/* More specific to override `.markdown-body a` color */ -.mx_EventTile_content .markdown-body a.mx_RoomPill, -.mx_EventTile_content .markdown-body a.mx_GroupPill, -.mx_RoomPill, -.mx_GroupPill { - color: $accent-fg-color; - background-color: $rte-room-pill-color; -} - -.mx_EventTile_body .mx_UserPill, -.mx_EventTile_body .mx_RoomPill, -.mx_EventTile_body .mx_GroupPill { - cursor: pointer; -} - -.mx_UserPill .mx_BaseAvatar, -.mx_RoomPill .mx_BaseAvatar, -.mx_GroupPill .mx_BaseAvatar, -.mx_AtRoomPill .mx_BaseAvatar { - position: relative; + border-radius: $font-16px; + vertical-align: text-top; display: inline-flex; align-items: center; - border-radius: 10rem; - margin-right: 0.24rem; + + .mx_BaseAvatar { + position: relative; + display: inline-flex; + align-items: center; + border-radius: 10rem; + margin-right: 0.24rem; + } + + a& { + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + max-width: calc(100% - 1ch); + text-decoration: none !important; // To override .markdown-body + } + + &.mx_GroupPill { + color: $accent-fg-color !important; // To override .markdown-body + background-color: $rte-group-pill-color; + } + + &.mx_UserPill { + color: $primary-fg-color !important; // To override .markdown-body + background-color: $other-user-pill-bg-color; + } + + &.mx_AtRoomPill { + color: $accent-fg-color !important; // To override .markdown-body + background-color: $mention-user-pill-bg-color; + } + + &.mx_RoomPill, + &.mx_GroupPill { + color: $accent-fg-color !important; // To override .markdown-body + background-color: $rte-room-pill-color; + } } + diff --git a/res/css/views/rooms/_EventTile.scss b/res/css/views/rooms/_EventTile.scss index 55f73c0315a..4c8fb080d62 100644 --- a/res/css/views/rooms/_EventTile.scss +++ b/res/css/views/rooms/_EventTile.scss @@ -581,6 +581,12 @@ $hover-select-border: 4px; display: inline !important; } +.mx_EventTile_body .mx_UserPill, +.mx_EventTile_body .mx_RoomPill, +.mx_EventTile_body .mx_GroupPill { + cursor: pointer; +} + /* // actually, removing the Italic TTF provides // better results seemingly diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index dd3555ac4e7..cb67d18d157 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -44,8 +44,6 @@ interface IProps { room?: Room; // Whether to include an avatar in the pill shouldShowPillAvatar?: boolean; - // Whether to render this pill as if it were highlit by a selection - isSelected?: boolean; yOffset?: number; } @@ -286,7 +284,6 @@ export default class Pill extends React.Component { const classes = classNames("mx_Pill", pillClass, { "mx_UserPill_me": userId === MatrixClientPeg.get().getUserId(), - "mx_UserPill_selected": this.props.isSelected, }); if (this.state.pillType) { From a69c11e2dbd26579c6e3f7dfec95afab4458e063 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 15:07:47 +0200 Subject: [PATCH 04/19] Unify pill colors MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/structures/_RoomDirectory.scss | 2 +- res/css/views/elements/_Pill.scss | 30 +++++-------------- res/themes/dark/css/_dark.scss | 5 +--- res/themes/legacy-dark/css/_legacy-dark.scss | 5 +--- .../legacy-light/css/_legacy-light.scss | 12 ++++---- res/themes/light/css/_light.scss | 12 ++++---- 6 files changed, 21 insertions(+), 45 deletions(-) diff --git a/res/css/structures/_RoomDirectory.scss b/res/css/structures/_RoomDirectory.scss index ec07500af56..2f72f15145c 100644 --- a/res/css/structures/_RoomDirectory.scss +++ b/res/css/structures/_RoomDirectory.scss @@ -154,7 +154,7 @@ limitations under the License. line-height: $font-20px; padding: 0 5px; color: $accent-fg-color; - background-color: $rte-room-pill-color; + background-color: $pill-bg-color; } .mx_RoomDirectory_topic { diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss index da3d3fd26a9..b6f8053aed5 100644 --- a/res/css/views/elements/_Pill.scss +++ b/res/css/views/elements/_Pill.scss @@ -22,6 +22,14 @@ limitations under the License. display: inline-flex; align-items: center; + color: $accent-fg-color !important; // To override .markdown-body + background-color: $pill-bg-color !important; // To override .markdown-body + + &.mx_UserPill_me, + &.mx_AtRoomPill { + background-color: $warning-color !important; // To override .markdown-body + } + .mx_BaseAvatar { position: relative; display: inline-flex; @@ -37,26 +45,4 @@ limitations under the License. max-width: calc(100% - 1ch); text-decoration: none !important; // To override .markdown-body } - - &.mx_GroupPill { - color: $accent-fg-color !important; // To override .markdown-body - background-color: $rte-group-pill-color; - } - - &.mx_UserPill { - color: $primary-fg-color !important; // To override .markdown-body - background-color: $other-user-pill-bg-color; - } - - &.mx_AtRoomPill { - color: $accent-fg-color !important; // To override .markdown-body - background-color: $mention-user-pill-bg-color; - } - - &.mx_RoomPill, - &.mx_GroupPill { - color: $accent-fg-color !important; // To override .markdown-body - background-color: $rte-room-pill-color; - } } - diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 74b33fbd02d..92af8304341 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -29,10 +29,7 @@ $light-fg-color: $header-panel-text-secondary-color; // used for focusing form controls $focus-bg-color: $room-highlight-color; -$mention-user-pill-bg-color: $warning-color; -$other-user-pill-bg-color: $room-highlight-color; -$rte-room-pill-color: $room-highlight-color; -$rte-group-pill-color: $room-highlight-color; +$pill-bg-color: $room-highlight-color; // informational plinth $info-plinth-bg-color: $header-panel-bg-color; diff --git a/res/themes/legacy-dark/css/_legacy-dark.scss b/res/themes/legacy-dark/css/_legacy-dark.scss index 555ef4f66c7..c26484a573f 100644 --- a/res/themes/legacy-dark/css/_legacy-dark.scss +++ b/res/themes/legacy-dark/css/_legacy-dark.scss @@ -29,10 +29,7 @@ $light-fg-color: $header-panel-text-secondary-color; // used for focusing form controls $focus-bg-color: $room-highlight-color; -$mention-user-pill-bg-color: $warning-color; -$other-user-pill-bg-color: $room-highlight-color; -$rte-room-pill-color: $room-highlight-color; -$rte-group-pill-color: $room-highlight-color; +$pill-bg-color: $room-highlight-color; // informational plinth $info-plinth-bg-color: $header-panel-bg-color; diff --git a/res/themes/legacy-light/css/_legacy-light.scss b/res/themes/legacy-light/css/_legacy-light.scss index c7debcdabef..846ac62153c 100644 --- a/res/themes/legacy-light/css/_legacy-light.scss +++ b/res/themes/legacy-light/css/_legacy-light.scss @@ -8,9 +8,9 @@ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ -$font-family: Nunito, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji'; +$font-family: nunito, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', arial, helvetica, sans-serif, 'Noto Color Emoji'; -$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji'; +$monospace-font-family: inconsolata, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', courier, monospace, 'Noto Color Emoji'; // unified palette // try to use these colors when possible @@ -53,8 +53,6 @@ $orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings $warning-bg-color: #df2a8b; $info-bg-color: #2a9edf; -$mention-user-pill-bg-color: $warning-color; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // pinned events indicator $pinned-unread-color: $notice-primary-color; @@ -160,8 +158,8 @@ $voip-accept-color: #80f480; $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); -$rte-room-pill-color: #aaa; -$rte-group-pill-color: #aaa; + +$pill-bg-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; @@ -383,7 +381,7 @@ $composer-shadow-color: tranparent; @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color ! important; + border: 1px solid $accent-color !important; color: $accent-color; background-color: $button-secondary-bg-color; } diff --git a/res/themes/light/css/_light.scss b/res/themes/light/css/_light.scss index 7e958c2af63..ce2f9cc6546 100644 --- a/res/themes/light/css/_light.scss +++ b/res/themes/light/css/_light.scss @@ -8,9 +8,9 @@ /* Noto Color Emoji contains digits, in fixed-width, therefore causing digits in flowed text to stand out. TODO: Consider putting all emoji fonts to the end rather than the front. */ -$font-family: Inter, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Arial, Helvetica, Sans-Serif, 'Noto Color Emoji'; +$font-family: inter, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', arial, helvetica, sans-serif, 'Noto Color Emoji'; -$monospace-font-family: Inconsolata, Twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', Courier, monospace, 'Noto Color Emoji'; +$monospace-font-family: inconsolata, twemoji, 'Apple Color Emoji', 'Segoe UI Emoji', courier, monospace, 'Noto Color Emoji'; // unified palette // try to use these colors when possible @@ -50,8 +50,6 @@ $orange-warning-color: #ff8d13; // used for true warnings // background colour for warnings $warning-bg-color: #DF2A8B; $info-bg-color: #2A9EDF; -$mention-user-pill-bg-color: $warning-color; -$other-user-pill-bg-color: rgba(0, 0, 0, 0.1); // informational plinth $info-plinth-bg-color: #f7f7f7; @@ -149,8 +147,8 @@ $voip-accept-color: #80f480; $rte-bg-color: #e9e9e9; $rte-code-bg-color: rgba(0, 0, 0, 0.04); -$rte-room-pill-color: #aaa; -$rte-group-pill-color: #aaa; + +$pill-bg-color: #aaa; $topleftmenu-color: #212121; $roomheader-color: #45474a; @@ -385,7 +383,7 @@ $composer-shadow-color: rgba(0, 0, 0, 0.04); @define-mixin mx_DialogButton_secondary { // flip colours for the secondary ones font-weight: 600; - border: 1px solid $accent-color ! important; + border: 1px solid $accent-color !important; color: $accent-color; background-color: $button-secondary-bg-color; } From 3748b767f7de635e206988f30cb4c57f670ec9b7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=A0imon=20Brandner?= Date: Sun, 18 Jul 2021 15:24:42 +0200 Subject: [PATCH 05/19] Make space pills more squarish MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: Šimon Brandner --- res/css/views/elements/_Pill.scss | 4 ++++ res/css/views/rooms/_BasicMessageComposer.scss | 2 +- src/components/views/elements/Pill.tsx | 2 +- src/editor/parts.ts | 2 +- 4 files changed, 7 insertions(+), 3 deletions(-) diff --git a/res/css/views/elements/_Pill.scss b/res/css/views/elements/_Pill.scss index b6f8053aed5..44a886dd891 100644 --- a/res/css/views/elements/_Pill.scss +++ b/res/css/views/elements/_Pill.scss @@ -30,6 +30,10 @@ limitations under the License. background-color: $warning-color !important; // To override .markdown-body } + &.mx_SpacePill { + border-radius: $font-5px; + } + .mx_BaseAvatar { position: relative; display: inline-flex; diff --git a/res/css/views/rooms/_BasicMessageComposer.scss b/res/css/views/rooms/_BasicMessageComposer.scss index e1ba4682043..791e46b7ccb 100644 --- a/res/css/views/rooms/_BasicMessageComposer.scss +++ b/res/css/views/rooms/_BasicMessageComposer.scss @@ -45,7 +45,7 @@ limitations under the License. overflow-x: hidden; &.mx_BasicMessageComposer_input_shouldShowPillAvatar { - span.mx_UserPill, span.mx_RoomPill { + span.mx_UserPill, span.mx_RoomPill, span.mx_SpacePill { position: relative; // avatar psuedo element diff --git a/src/components/views/elements/Pill.tsx b/src/components/views/elements/Pill.tsx index cb67d18d157..a68f242ed81 100644 --- a/src/components/views/elements/Pill.tsx +++ b/src/components/views/elements/Pill.tsx @@ -263,7 +263,7 @@ export default class Pill extends React.Component { avatar =