Cavemanon/piratepoet
8
Fork 0
Code Pull Requests Actions Releases 16 Activity

Replace unicode icons with SVG in YesNo component

Browse Source 
[MAILPOET-2773]
This commit is contained in:
Ján Mikláš
2020-05-25 12:45:39 +02:00
committed by Veljko V
parent 20257ad52a
commit 03599c54ea
4 changed files with 22 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
assets/css/src/generic/_forms-yesno.scss
View File

@@ -52,11 +52,8 @@
.mailpoet-form-yesno-yes {
border-radius: 3px 0 0 3px;
font-size: 13px;
left: 0;
&:before { content: '✔'; }
input:checked + & {
background: $color-input-success;
color: #fff;
@@ -65,14 +62,8 @@
.mailpoet-form-yesno-no {
border-radius: 0 3px 3px 0;
font-size: 18px;
right: 0;
&:before {
content: '×';
padding-bottom: 4px;
}
input:checked + & {
background: $color-input-error;
color: #fff;

7
assets/js/src/common/form/yesno/icons/no.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export default (
<svg width="17" height="16" viewBox="0 0 17 16">
<path fill="currentColor" d="M12.407 3.31c.576.576.576 1.509 0 2.084L9.914 7.888l2.411 2.412c.586.585.586 1.535 0 2.121-.585.586-1.535.586-2.12 0l-2.413-2.412L5.3 12.503c-.576.575-1.509.575-2.084 0-.575-.575-.575-1.508 0-2.083l2.493-2.495-2.41-2.41c-.587-.587-.587-1.536 0-2.122.585-.586 1.535-.586 2.12 0L7.83 5.804l2.494-2.493c.575-.576 1.508-.576 2.083 0z" />
</svg>
);

7
assets/js/src/common/form/yesno/icons/yes.tsx Normal file
View File

@@ -0,0 +1,7 @@
import React from 'react';
export default (
<svg width="13" height="11" viewBox="0 0 13 11">
<path fill="currentColor" d="M9.967.638c.483-.698 1.405-.846 2.06-.33.654.515.793 1.499.31 2.197l-5.44 7.857c-.55.794-1.64.857-2.267.132l-3.4-3.928c-.552-.638-.515-1.632.083-2.22.598-.59 1.53-.55 2.082.088l2.19 2.532L9.968.638z" />
</svg>
);

10
assets/js/src/common/form/yesno/yesno.tsx
View File

@@ -1,5 +1,7 @@
import React, { InputHTMLAttributes } from 'react';
import classnames from 'classnames';
import iconYes from './icons/yes';
import iconNo from './icons/no';
type Props = InputHTMLAttributes<HTMLInputElement> & {
name: string,
@@ -27,7 +29,9 @@ const YesNo = ({
onChange={(e) => onCheck(true)}
{...attributes}
/>
<span className="mailpoet-form-yesno-control mailpoet-form-yesno-yes" />
<span className="mailpoet-form-yesno-control mailpoet-form-yesno-yes">
{iconYes}
</span>
</label>
<label>
<input
@@ -35,7 +39,9 @@ const YesNo = ({
onChange={(e) => onCheck(false)}
{...attributes}
/>
<span className="mailpoet-form-yesno-control mailpoet-form-yesno-no" />
<span className="mailpoet-form-yesno-control mailpoet-form-yesno-no">
{iconNo}
</span>
</label>
</div>
);