imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Use icon component instead of mask-image for formatting buttons (#9732)

Browse source 
Use icon component instead of mask-image for formatting buttons
This commit is contained in:
Florian Duros 2022-12-09 17:01:03 +01:00 • committed by GitHub
parent 5c99450ff5
commit dec72c7683
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 41 additions and 74 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/views/rooms/wysiwyg_composer/components/FormattingButtons.tsx
View file

@ -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<HTMLButtonElement>;
}
function Button({ label, keyCombo, onClick, isActive, className }: ButtonProps) {
function Button({ label, keyCombo, onClick, isActive, icon }: ButtonProps) {
return <AccessibleTooltipButton
element="button"
onClick={onClick as (e: ButtonEvent) => void}
title={label}
className={
classNames('mx_FormattingButtons_Button', className, {
classNames('mx_FormattingButtons_Button', {
'mx_FormattingButtons_active': isActive,
'mx_FormattingButtons_Button_hover': !isActive,
})}
tooltip={keyCombo && <Tooltip label={label} keyCombo={keyCombo} />}
alignment={Alignment.Top}
/>;
>
{ icon }
</AccessibleTooltipButton>;
}
interface FormattingButtonsProps {
@ -65,10 +72,10 @@ interface FormattingButtonsProps {
export function FormattingButtons({ composer, actionStates }: FormattingButtonsProps) {
return <div className="mx_FormattingButtons">
<Button isActive={actionStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => composer.bold()} className="mx_FormattingButtons_Button_bold" />
<Button isActive={actionStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} className="mx_FormattingButtons_Button_italic" />
<Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} className="mx_FormattingButtons_Button_underline" />
<Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} className="mx_FormattingButtons_Button_strikethrough" />
<Button isActive={actionStates.inlineCode === 'reversed'} label={_td('Code')} keyCombo={{ ctrlOrCmdKey: true, key: 'e' }} onClick={() => composer.inlineCode()} className="mx_FormattingButtons_Button_inline_code" />
<Button isActive={actionStates.bold === 'reversed'} label={_td("Bold")} keyCombo={{ ctrlOrCmdKey: true, key: 'b' }} onClick={() => composer.bold()} icon={<BoldIcon className="mx_FormattingButtons_Icon" />} />
<Button isActive={actionStates.italic === 'reversed'} label={_td('Italic')} keyCombo={{ ctrlOrCmdKey: true, key: 'i' }} onClick={() => composer.italic()} icon={<ItalicIcon className="mx_FormattingButtons_Icon" />} />
<Button isActive={actionStates.underline === 'reversed'} label={_td('Underline')} keyCombo={{ ctrlOrCmdKey: true, key: 'u' }} onClick={() => composer.underline()} icon={<UnderlineIcon className="mx_FormattingButtons_Icon" />} />
<Button isActive={actionStates.strikeThrough === 'reversed'} label={_td('Strikethrough')} onClick={() => composer.strikeThrough()} icon={<StrikeThroughIcon className="mx_FormattingButtons_Icon" />} />
<Button isActive={actionStates.inlineCode === 'reversed'} label={_td('Code')} keyCombo={{ ctrlOrCmdKey: true, key: 'e' }} onClick={() => composer.inlineCode()} icon={<InlineCodeIcon className="mx_FormattingButtons_Icon" />} />
</div>;
}