Commit 42ebc0a8 authored by Michael Iseard's avatar Michael Iseard
Browse files

Add icons to buttons

parent 57358845
const {Icon} = wp.components
const ButtonIcon = (props) => {
const icon = () => {
switch (props.icon) {
case 'copy':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 448 512">
<path fill="currentColor"
d="M320 448v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24V120c0-13.255 10.745-24 24-24h72v296c0 30.879 25.121 56 56 56h168zm0-344V0H152c-13.255 0-24 10.745-24 24v368c0 13.255 10.745 24 24 24h272c13.255 0 24-10.745 24-24V128H344c-13.2 0-24-10.8-24-24zm120.971-31.029L375.029 7.029A24 24 0 0 0 358.059 0H352v96h96v-6.059a24 24 0 0 0-7.029-16.97z"/>
</svg>
)
case 'help':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path fill="currentColor"
d="M488 192H336v56c0 39.7-32.3 72-72 72s-72-32.3-72-72V126.4l-64.9 39C107.8 176.9 96 197.8 96 220.2v47.3l-80 46.2C.7 322.5-4.6 342.1 4.3 357.4l80 138.6c8.8 15.3 28.4 20.5 43.7 11.7L231.4 448H368c35.3 0 64-28.7 64-64h16c17.7 0 32-14.3 32-32v-64h8c13.3 0 24-10.7 24-24v-48c0-13.3-10.7-24-24-24zm147.7-37.4L555.7 16C546.9.7 527.3-4.5 512 4.3L408.6 64H306.4c-12 0-23.7 3.4-33.9 9.7L239 94.6c-9.4 5.8-15 16.1-15 27.1V248c0 22.1 17.9 40 40 40s40-17.9 40-40v-88h184c30.9 0 56 25.1 56 56v28.5l80-46.2c15.3-8.9 20.5-28.4 11.7-43.7z"/>
</svg>
)
case 'quill':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M467.14 44.84c-62.55-62.48-161.67-64.78-252.28 25.73-78.61 78.52-60.98 60.92-85.75 85.66-60.46 60.39-70.39 150.83-63.64 211.17l178.44-178.25c6.26-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.6 9.37 33.98 0l66.1-66.03C159.42 454.65 279 457.11 353.95 384h-98.19l147.57-49.14c49.99-49.93 36.38-36.18 46.31-46.86h-97.78l131.54-43.8c45.44-74.46 34.31-148.84-16.26-199.36z"/>
</svg>
)
case 'question':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"/>
</svg>
)
case 'door':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path fill="currentColor"
d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"/>
</svg>
)
case 'upload':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M296 384h-80c-13.3 0-24-10.7-24-24V192h-87.7c-17.8 0-26.7-21.5-14.1-34.1L242.3 5.7c7.5-7.5 19.8-7.5 27.3 0l152.2 152.2c12.6 12.6 3.7 34.1-14.1 34.1H320v168c0 13.3-10.7 24-24 24zm216-8v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h136v8c0 30.9 25.1 56 56 56h80c30.9 0 56-25.1 56-56v-8h136c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"/>
</svg>
)
case 'add':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm144 276c0 6.6-5.4 12-12 12h-92v92c0 6.6-5.4 12-12 12h-56c-6.6 0-12-5.4-12-12v-92h-92c-6.6 0-12-5.4-12-12v-56c0-6.6 5.4-12 12-12h92v-92c0-6.6 5.4-12 12-12h56c6.6 0 12 5.4 12 12v92h92c6.6 0 12 5.4 12 12v56z"/>
</svg>
)
case 'envelope':
return (
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M502.3 190.8c3.9-3.1 9.7-.2 9.7 4.7V400c0 26.5-21.5 48-48 48H48c-26.5 0-48-21.5-48-48V195.6c0-5 5.7-7.8 9.7-4.7 22.4 17.4 52.1 39.5 154.1 113.6 21.1 15.4 56.7 47.8 92.2 47.6 35.7.3 72-32.8 92.3-47.6 102-74.1 131.6-96.3 154-113.7zM256 320c23.2.4 56.6-29.2 73.4-41.4 132.7-96.3 142.8-104.7 173.4-128.7 5.8-4.5 9.2-11.5 9.2-18.9v-19c0-26.5-21.5-48-48-48H48C21.5 64 0 85.5 0 112v19c0 7.4 3.4 14.3 9.2 18.9 30.6 23.9 40.7 32.4 173.4 128.7 16.8 12.2 50.2 41.8 73.4 41.4z"/>
</svg>
)
}
}
return (
<Icon
size="16"
icon={icon()}
/>
)
}
export {ButtonIcon}
\ No newline at end of file
import {Info} from "../Info"
import {SettingCard} from "../SettingCard"
import {ButtonIcon} from "../ButtonIcon"
const {__} = wp.i18n
const {useState, useEffect, Fragment} = wp.element
......@@ -47,18 +48,6 @@ const CampaignPanel = ({settings, campaign, removeCampaign, handleInputChange, a
}}
/>
{ settings._kudos_premium ?
<CheckboxControl
help={__('Displays a campaign progress bar at the top of the donate pop-up.', 'kudos-donations')}
label={__('Display progress bar', "kudos-donations")}
checked={campaign.show_progress || ''}
onChange={(value) => {
campaign.show_progress = value
handleInputChange('_kudos_campaigns', settings._kudos_campaigns)
}}
/>
: ''}
</SettingCard>
<CardDivider/>
......@@ -183,6 +172,7 @@ const CampaignPanel = ({settings, campaign, removeCampaign, handleInputChange, a
<CardFooter>
<ClipboardButton
isSecondary
icon={(<ButtonIcon icon='copy'/>)}
text={'[kudos campaign_id="' + campaign.id + '"]'}
onClick={() => setHasCopied(true)}
onCopy={() => setHasCopied(true)}
......
import logo from '../../../../img/full-logo-green.svg'
import {SettingCard} from "../SettingCard"
import {ButtonIcon} from "../ButtonIcon"
const {__} = wp.i18n
const {
Button,
Icon
} = wp.components
const HelpPanel = ({updateSetting}) => {
const door = () => (
<Icon
size="16"
icon={
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path fill="currentColor"
d="M624 448h-80V113.45C544 86.19 522.47 64 496 64H384v64h96v384h144c8.84 0 16-7.16 16-16v-32c0-8.84-7.16-16-16-16zM312.24 1.01l-192 49.74C105.99 54.44 96 67.7 96 82.92V448H16c-8.84 0-16 7.16-16 16v32c0 8.84 7.16 16 16 16h336V33.18c0-21.58-19.56-37.41-39.76-32.17zM264 288c-13.25 0-24-14.33-24-32s10.75-32 24-32 24 14.33 24 32-10.75 32-24 32z"/>
</svg>
}
/>
)
const question = () => (
<Icon
size="16"
icon={
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zM262.655 90c-54.497 0-89.255 22.957-116.549 63.758-3.536 5.286-2.353 12.415 2.715 16.258l34.699 26.31c5.205 3.947 12.621 3.008 16.665-2.122 17.864-22.658 30.113-35.797 57.303-35.797 20.429 0 45.698 13.148 45.698 32.958 0 14.976-12.363 22.667-32.534 33.976C247.128 238.528 216 254.941 216 296v4c0 6.627 5.373 12 12 12h56c6.627 0 12-5.373 12-12v-1.333c0-28.462 83.186-29.647 83.186-106.667 0-58.002-60.165-102-116.531-102zM256 338c-25.365 0-46 20.635-46 46 0 25.364 20.635 46 46 46s46-20.636 46-46c0-25.365-20.635-46-46-46z"/>
</svg>
}
/>
)
const quill = () => (
<Icon
size="16"
icon={
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 512 512">
<path fill="currentColor"
d="M467.14 44.84c-62.55-62.48-161.67-64.78-252.28 25.73-78.61 78.52-60.98 60.92-85.75 85.66-60.46 60.39-70.39 150.83-63.64 211.17l178.44-178.25c6.26-6.25 16.4-6.25 22.65 0s6.25 16.38 0 22.63L7.04 471.03c-9.38 9.37-9.38 24.57 0 33.94 9.38 9.37 24.6 9.37 33.98 0l66.1-66.03C159.42 454.65 279 457.11 353.95 384h-98.19l147.57-49.14c49.99-49.93 36.38-36.18 46.31-46.86h-97.78l131.54-43.8c45.44-74.46 34.31-148.84-16.26-199.36z"/>
</svg>
}
/>
)
const help = () => (
<Icon
size="16"
icon={
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 640 512">
<path fill="currentColor"
d="M488 192H336v56c0 39.7-32.3 72-72 72s-72-32.3-72-72V126.4l-64.9 39C107.8 176.9 96 197.8 96 220.2v47.3l-80 46.2C.7 322.5-4.6 342.1 4.3 357.4l80 138.6c8.8 15.3 28.4 20.5 43.7 11.7L231.4 448H368c35.3 0 64-28.7 64-64h16c17.7 0 32-14.3 32-32v-64h8c13.3 0 24-10.7 24-24v-48c0-13.3-10.7-24-24-24zm147.7-37.4L555.7 16C546.9.7 527.3-4.5 512 4.3L408.6 64H306.4c-12 0-23.7 3.4-33.9 9.7L239 94.6c-9.4 5.8-15 16.1-15 27.1V248c0 22.1 17.9 40 40 40s40-17.9 40-40v-88h184c30.9 0 56 25.1 56 56v28.5l80-46.2c15.3-8.9 20.5-28.4 11.7-43.7z"/>
</svg>
}
/>
)
return (
<SettingCard>
<h2>{__('Share the love', 'kudos-donations')}</h2>
......@@ -70,7 +18,7 @@ const HelpPanel = ({updateSetting}) => {
isSecondary
href="https://wordpress.org/support/plugin/kudos-donations/reviews/#new-post"
target="_blank"
icon={quill}
icon={(<ButtonIcon icon='quill'/>)}
>
{__('Leave a review', 'kudos-donations')}
</Button>
......@@ -85,14 +33,14 @@ const HelpPanel = ({updateSetting}) => {
className={"kd-mr-2"}
href="https://wordpress.org/support/plugin/kudos-donations/"
target="_blank"
icon={help}
icon={(<ButtonIcon icon='help'/>)}
>
{__('Support forums', 'kudos-donations')}
</Button>
<Button
isSecondary
className={"kd-mr-2"}
icon={door}
icon={(<ButtonIcon icon='door'/>)}
onClick={() => {
updateSetting('_kudos_show_intro', true, false)
}}
......@@ -104,7 +52,7 @@ const HelpPanel = ({updateSetting}) => {
className={"kd-mr-2"}
target="_blank"
href="https://kudosdonations.com/faq/"
icon={question}
icon={(<ButtonIcon icon='question'/>)}
>
{__('Visit our F.A.Q', 'kudos-donations')}
</Button>
......
import {SettingCard} from "../SettingCard"
import {ButtonIcon} from "../ButtonIcon"
const {__} = wp.i18n
const {FormFileUpload, BaseControl} = wp.components
......@@ -33,6 +34,7 @@ const ImportSettingsPanel = (props) => {
>
<FormFileUpload
accept="text/*"
icon={(<ButtonIcon icon='upload'/>)}
className={"is-secondary"}
onChange={(e) => importSettings(e)}
>
......
import {SettingCard} from "../SettingCard"
import {ButtonIcon} from "../ButtonIcon"
const { __ } = wp.i18n
const { Button, TextControl } = wp.components
......@@ -30,6 +31,7 @@ const NewCampaignPanel = ({addCampaign}) => {
<Button
isSecondary
disabled={buttonDisabled}
icon={(<ButtonIcon icon='add' />)}
onClick={
() => {
addCampaign(document.getElementById('kudos_new_campaign').value)
......
import axios from 'axios'
import {SettingCard} from "../SettingCard"
import {ButtonIcon} from "../ButtonIcon"
const {__} = wp.i18n
const {Button, PanelRow, TextControl} = wp.components
......@@ -80,6 +81,7 @@ const TestEmailPanel = (props) => {
isSecondary
disabled={buttonDisabled || isBusy}
isBusy={isBusy}
icon={(<ButtonIcon icon='envelope' />)}
onClick={() => {
sendTest(email)
}}
......
......@@ -12,7 +12,6 @@ import {MollieTab} from "./Components/Tabs/MollieTab"
import {CampaignsTab} from "./Components/Tabs/CampaignsTab"
import {CustomizeTab} from "./Components/Tabs/CustomizeTab"
import {EmailTab} from "./Components/Tabs/EmailTab"
import {AdvancedTab} from "./Components/Tabs/AdvancedTab"
import {HelpTab} from "./Components/Tabs/HelpTab"
const {__} = wp.i18n
......@@ -297,24 +296,13 @@ class KudosAdmin extends Component {
showNotice={this.showNotice}
/>
},
{
name: 'advanced',
title: __('Advanced', 'kudos-donations'),
className: 'tab-advanced',
content:
<AdvancedTab
settings={this.state.settings}
handleInputChange={this.handleInputChange}
updateSetting={this.updateSetting}
updateAll={this.updateAll}
/>
},
{
name: 'help',
title: __('Help', 'kudos-donations'),
className: 'tab-help',
content:
<HelpTab
settings={this.state.settings}
updateSetting={this.updateSetting}
/>
}
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment