From dec72c76834a974e9fb553c6217324c090ba92f2 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Fri, 9 Dec 2022 17:01:03 +0100 Subject: [PATCH] Use icon component instead of mask-image for formatting buttons (#9732) Use icon component instead of mask-image for formatting buttons --- .../components/_FormattingButtons.pcss | 72 +++++-------------- res/img/element-icons/room/composer/bold.svg | 2 +- .../room/composer/inline_code.svg | 6 +- .../element-icons/room/composer/italic.svg | 2 +- .../room/composer/strikethrough.svg | 4 +- .../element-icons/room/composer/underline.svg | 2 +- .../components/FormattingButtons.tsx | 27 ++++--- 7 files changed, 41 insertions(+), 74 deletions(-) diff --git a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss index 02f875d24a5..fa8078279f5 100644 --- a/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss +++ b/res/css/views/rooms/wysiwyg_composer/components/_FormattingButtons.pcss @@ -21,80 +21,40 @@ limitations under the License. .mx_FormattingButtons_Button { --size: 28px; - position: relative; cursor: pointer; height: var(--size); - line-height: var(--size); - width: auto; - padding-left: 22px; + width: var(--size); background-color: transparent; border: none; - - &::before { - content: ''; - position: absolute; - top: 6px; - left: 6px; - height: 16px; - width: 16px; - background-color: $tertiary-content; - mask-repeat: no-repeat; - mask-size: contain; - mask-position: center; - } - - &::after { - content: ''; - position: absolute; - left: 0; - top: 0; - z-index: 0; - width: var(--size); - height: var(--size); - border-radius: 5px; - } + display: flex; + align-items: center; + justify-content: center; + border-radius: 5px; } .mx_FormattingButtons_Button_hover { &:hover { - &::after { - background: rgba($secondary-content, 0.1); - } + background: rgba($secondary-content, 0.1); - &::before { - background-color: $secondary-content; + .mx_FormattingButtons_Icon { + color: $secondary-content; } } } .mx_FormattingButtons_active { - &::after { - background: rgba($accent, 0.1); - } + background: rgba($accent, 0.1); - &::before { - background-color: $accent; + .mx_FormattingButtons_Icon { + color: $accent; } } - .mx_FormattingButtons_Button_bold::before { - mask-image: url('$(res)/img/element-icons/room/composer/bold.svg'); - } - - .mx_FormattingButtons_Button_italic::before { - mask-image: url('$(res)/img/element-icons/room/composer/italic.svg'); - } - - .mx_FormattingButtons_Button_underline::before { - mask-image: url('$(res)/img/element-icons/room/composer/underline.svg'); - } - - .mx_FormattingButtons_Button_strikethrough::before { - mask-image: url('$(res)/img/element-icons/room/composer/strikethrough.svg'); - } - - .mx_FormattingButtons_Button_inline_code::before { - mask-image: url('$(res)/img/element-icons/room/composer/inline_code.svg'); + .mx_FormattingButtons_Icon { + --size: 16px; + height: var(--size); + width: var(--size); + color: $tertiary-content; } } diff --git a/res/img/element-icons/room/composer/bold.svg b/res/img/element-icons/room/composer/bold.svg index 4a5cb184cfb..043f9c064cf 100644 --- a/res/img/element-icons/room/composer/bold.svg +++ b/res/img/element-icons/room/composer/bold.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/room/composer/inline_code.svg b/res/img/element-icons/room/composer/inline_code.svg index a4392d9bce5..d9f75fde0c7 100644 --- a/res/img/element-icons/room/composer/inline_code.svg +++ b/res/img/element-icons/room/composer/inline_code.svg @@ -1,5 +1,5 @@ - - - + + + diff --git a/res/img/element-icons/room/composer/italic.svg b/res/img/element-icons/room/composer/italic.svg index 2299fc1fa29..c6cd755d947 100644 --- a/res/img/element-icons/room/composer/italic.svg +++ b/res/img/element-icons/room/composer/italic.svg @@ -1,3 +1,3 @@ - + diff --git a/res/img/element-icons/room/composer/strikethrough.svg b/res/img/element-icons/room/composer/strikethrough.svg index 0ed63b21393..9a9761729b9 100644 --- a/res/img/element-icons/room/composer/strikethrough.svg +++ b/res/img/element-icons/room/composer/strikethrough.svg @@ -1,4 +1,4 @@ - - + + diff --git a/res/img/element-icons/room/composer/underline.svg b/res/img/element-icons/room/composer/underline.svg index b74e562ec8a..f253c874ea8 100644 --- a/res/img/element-icons/room/composer/underline.svg +++ b/res/img/element-icons/room/composer/underline.svg @@ -1,3 +1,3 @@ - + diff --git a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx index 98c13cfa43b..b7d8c325988 100644 --- a/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx +++ b/src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx @@ -14,10 +14,15 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React, { MouseEventHandler } from "react"; +import React, { MouseEventHandler, ReactNode } from "react"; import { FormattingFunctions, AllActionStates } from "@matrix-org/matrix-wysiwyg"; import classNames from "classnames"; +import { Icon as BoldIcon } from '../../../../../../res/img/element-icons/room/composer/bold.svg'; +import { Icon as ItalicIcon } from '../../../../../../res/img/element-icons/room/composer/italic.svg'; +import { Icon as UnderlineIcon } from '../../../../../../res/img/element-icons/room/composer/underline.svg'; +import { Icon as StrikeThroughIcon } from '../../../../../../res/img/element-icons/room/composer/strikethrough.svg'; +import { Icon as InlineCodeIcon } from '../../../../../../res/img/element-icons/room/composer/inline_code.svg'; import AccessibleTooltipButton from "../../../elements/AccessibleTooltipButton"; import { Alignment } from "../../../elements/Tooltip"; import { KeyboardShortcut } from "../../../settings/KeyboardShortcut"; @@ -38,24 +43,26 @@ function Tooltip({ label, keyCombo }: TooltipProps) { } interface ButtonProps extends TooltipProps { - className: string; + icon: ReactNode; isActive: boolean; onClick: MouseEventHandler; } -function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) { +function Button({ label, keyCombo, onClick, isActive, icon }: ButtonProps) { return void} title={label} className={ - classNames('mx_FormattingButtons_Button', className, { + classNames('mx_FormattingButtons_Button', { 'mx_FormattingButtons_active': isActive, 'mx_FormattingButtons_Button_hover': !isActive, })} tooltip={keyCombo && } alignment={Alignment.Top} - />; + > + { icon } + ; } interface FormattingButtonsProps { @@ -65,10 +72,10 @@ interface FormattingButtonsProps { export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) { return
-
; }