Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-02-17 23:44:39 -05:00
Code Issues Activity

Updated portal button icon handling

Browse source 
no issue

- Added default icon svgs for button icon
- Updated rendering for default button icon
This commit is contained in:
Rish 2020-07-21 23:00:17 +05:30 • committed by Rishabh Garg
parent 0486f04c7d
commit 2578856c8d
7 changed files with 28 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
ghost/portal/src/components/TriggerButton.js
View file

@ -3,13 +3,27 @@ import Frame from './Frame';
import MemberGravatar from './common/MemberGravatar';
import AppContext from '../AppContext';
import {ReactComponent as UserIcon} from '../images/icons/user.svg';
import {ReactComponent as ButtonIcon1} from '../images/icons/button-icon-1.svg';
import {ReactComponent as ButtonIcon2} from '../images/icons/button-icon-2.svg';
import {ReactComponent as ButtonIcon3} from '../images/icons/button-icon-3.svg';
import {ReactComponent as ButtonIcon4} from '../images/icons/button-icon-4.svg';
import {ReactComponent as ButtonIcon5} from '../images/icons/button-icon-5.svg';
import getContrastColor from '../utils/contrast-color';
const React = require('react');
const ICON_MAPPING = {
'icon-1': ButtonIcon1,
'icon-2': ButtonIcon2,
'icon-3': ButtonIcon3,
'icon-4': ButtonIcon4,
'icon-5': ButtonIcon5
};
const Styles = ({brandColor, hasText}) => {
const frame = {
...(!hasText ? {width: '60px'} : {})
};
const invertColor = getContrastColor(brandColor);
return {
frame: {
zIndex: '2147483000',
@ -58,7 +72,7 @@ const Styles = ({brandColor, hasText}) => {
userIcon: {
width: '20px',
height: '20px',
color: '#fff'
color: invertColor
},
closeIcon: {
width: '20px',
@ -127,7 +141,12 @@ class TriggerButtonContent extends React.Component {
);
}
if (buttonIcon) {
if (Object.keys(ICON_MAPPING).includes(buttonIcon)) {
const ButtonIcon = ICON_MAPPING[buttonIcon];
return (
<ButtonIcon style={Style.userIcon} />
);
} else if (buttonIcon) {
return (
<img style={{width: '26px', height: '26px'}} src={buttonIcon} alt="Icon" />
);
@ -170,7 +189,7 @@ class TriggerButtonContent extends React.Component {
if (hasText) {
return (
<div style={Style.button} onClick={e => this.onToggle(e)}>
<div style={{padding: '0 24px', display: 'flex'}} ref={this.container}>
<div style={{padding: '0 24px', display: 'flex', alignItems: 'center'}} ref={this.container}>
{this.renderTriggerIcon()}
{this.renderText()}
</div>

1
ghost/portal/src/images/icons/button-icon-1.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M12 15.75c-3.308 0-6-2.692-6-6s2.692-6 6-6 6 2.692 6 6-2.692 6-6 6zm0-10.5c-2.481 0-4.5 2.019-4.5 4.5s2.019 4.5 4.5 4.5 4.5-2.019 4.5-4.5-2.019-4.5-4.5-4.5z"/><path d="M12 24c-2.677 0-5.211-.868-7.332-2.51-.021-.012-.066-.038-.11-.082l-.016-.017C1.655 19.094 0 15.674 0 12 0 5.383 5.383 0 12 0s12 5.383 12 12c0 3.674-1.655 7.094-4.543 9.391l-.015.016c-.043.043-.087.069-.112.084C17.211 23.132 14.677 24 12 24zm-5.716-3.199C7.99 21.914 9.956 22.5 12 22.5c2.045 0 4.011-.586 5.717-1.699-1.604-1.322-3.616-2.045-5.716-2.045-2.1-.001-4.112.723-5.717 2.045zM12 1.5C6.21 1.5 1.5 6.21 1.5 12c0 3.023 1.294 5.875 3.562 7.874 1.915-1.69 4.366-2.617 6.938-2.617 2.573 0 5.023.927 6.938 2.616 2.268-2 3.562-4.851 3.562-7.874C22.5 6.21 17.79 1.5 12 1.5z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 837 B

1
ghost/portal/src/images/icons/button-icon-2.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M18.75 24c-1.067 0-2.061-.582-2.594-1.5h-6.062C9.561 23.418 8.567 24 7.5 24s-2.061-.582-2.594-1.5H2.25C1.009 22.5 0 21.491 0 20.25V15.8c.002-.753.376-1.452 1.002-1.869l1.316-.877.41-2.299c.003-.016.006-.033.011-.05C2.989 9.701 3.887 9 4.921 9h2.708c.313-.885 1.161-1.5 2.121-1.5h1.5c0-1.654 1.346-3 3-3s3 1.346 3 3h4.5C22.991 7.5 24 8.509 24 9.75v10.5c0 1.241-1.009 2.25-2.25 2.25h-.406c-.533.918-1.527 1.5-2.594 1.5zm0-4.5c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5 1.5-.673 1.5-1.5-.673-1.5-1.5-1.5zm-11.25 0c-.827 0-1.5.673-1.5 1.5s.673 1.5 1.5 1.5S9 21.827 9 21s-.673-1.5-1.5-1.5zM21.75 21c.414 0 .75-.336.75-.75V9.75c0-.414-.336-.75-.75-.75h-12c-.414 0-.75.336-.75.75v8.656c.918.533 1.5 1.527 1.5 2.594h5.25c0-1.654 1.346-3 3-3s3 1.346 3 3zM3.738 13.632c-.036.2-.153.38-.323.492l-1.582 1.055c-.209.139-.333.372-.334.623v4.448c.001.414.337.75.751.75H4.5c0-1.654 1.346-3 3-3v-7.5H4.921c-.337 0-.632.224-.722.547l-.461 2.585zM15.75 7.5c0-.827-.673-1.5-1.5-1.5s-1.5.673-1.5 1.5h3z"/><path d="M15.75 17.25c-.414 0-.75-.336-.75-.75V15h-1.5c-.414 0-.75-.336-.75-.75s.336-.75.75-.75H15V12c0-.414.336-.75.75-.75s.75.336.75.75v1.5H18c.414 0 .75.336.75.75s-.336.75-.75.75h-1.5v1.5c0 .414-.336.75-.75.75zM14.25 3c-.414 0-.75-.336-.75-.75V.75c0-.414.336-.75.75-.75s.75.336.75.75v1.5c0 .414-.336.75-.75.75zM18 4.5c-.115 0-.231-.027-.334-.079-.37-.185-.521-.636-.336-1.006l.75-1.5c.127-.256.384-.415.67-.415.115 0 .231.027.334.079.37.185.521.636.336 1.006l-.75 1.5c-.127.256-.384.415-.67.415zM10.5 4.5c-.286 0-.543-.159-.671-.414l-.75-1.5c-.185-.37-.034-.821.335-1.006.105-.053.22-.08.336-.08.286 0 .543.159.671.415l.75 1.5c.185.37.034.821-.335 1.006-.105.052-.22.079-.336.079z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.7 KiB

1
ghost/portal/src/images/icons/button-icon-3.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M11.962 22.112c-.251-.002-.511-.048-.758-.137-1.531-.604-3.129-.906-4.771-.906-1.181 0-2.35.16-3.474.475-.187.048-.373.072-.595.078-.64-.001-1.231-.247-1.676-.692-.445-.447-.689-1.039-.688-1.668V4.929c.002-1.031.663-1.932 1.644-2.243 1.521-.525 3.121-.792 4.746-.792 1.837 0 3.634.339 5.342 1.008.047.017.11.029.186.035.026-.003.054-.004.082-.004.028 0 .055.002.082.005.079-.007.147-.021.208-.043 1.69-.663 3.482-1.001 5.316-1.001 1.628 0 3.232.268 4.768.798.967.307 1.624 1.206 1.626 2.235v14.336c0 .198-.025.396-.074.588-.156.609-.541 1.122-1.082 1.443-.365.216-.779.329-1.198.329-.197 0-.395-.025-.589-.074-1.136-.318-2.308-.478-3.491-.478-1.641 0-3.239.302-4.747.897-.256.093-.514.14-.777.145l-.041.002-.039-.003zM6.43 19.569c1.659 0 3.277.276 4.82.822V4.322l-.045-.016C9.657 3.7 8.04 3.395 6.389 3.395c-1.459 0-2.897.241-4.274.715-.371.117-.614.446-.615.82v14.332c0 .23.089.445.25.607.161.162.377.252.606.252.068 0 .149-.01.214-.027 1.242-.347 2.544-.525 3.86-.525zm6.32.822c1.534-.545 3.154-.822 4.816-.822 1.319 0 2.624.178 3.879.53.059.015.129.024.198.024.152 0 .302-.042.436-.121.197-.117.337-.303.393-.525.018-.07.027-.142.027-.213V4.929c-.001-.373-.241-.7-.597-.813-1.391-.479-2.834-.721-4.296-.721-1.647 0-3.259.304-4.789.904l-.067.023v16.069z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.3 KiB

1
ghost/portal/src/images/icons/button-icon-4.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill=currentColor><path d="M3.75 24c-1.241 0-2.25-1.009-2.25-2.25v-9c0-.414.336-.75.75-.75s.75.336.75.75v9c0 .414.336.75.75.75H12v-6c0-2.068 1.682-3.75 3.75-3.75s3.75 1.682 3.75 3.75v6h.75c.414 0 .75-.336.75-.75v-9c0-.414.336-.75.75-.75s.75.336.75.75v9c0 1.241-1.009 2.25-2.25 2.25H3.75zM18 22.5v-6c0-1.241-1.009-2.25-2.25-2.25s-2.25 1.009-2.25 2.25v6H18zM21 10.5c-.863 0-1.685-.38-2.25-1.018-.565.638-1.387 1.018-2.25 1.018s-1.685-.38-2.25-1.018c-.565.638-1.387 1.018-2.25 1.018s-1.685-.38-2.25-1.018C9.185 10.12 8.363 10.5 7.5 10.5s-1.685-.38-2.25-1.018C4.685 10.12 3.863 10.5 3 10.5c-1.654 0-3-1.346-3-3 0-.054.006-.108.018-.162l1.369-6.164C1.542.483 2.144 0 2.852 0h18.295c.698 0 1.314.494 1.465 1.175l1.37 6.162c.012.052.018.107.018.163 0 1.654-1.346 3-3 3zm-2.25-3.75c.414 0 .75.336.75.75 0 .827.673 1.5 1.5 1.5.796 0 1.459-.636 1.498-1.426L21.148 1.5H2.852l-1.35 6.074C1.541 8.364 2.204 9 3 9c.827 0 1.5-.673 1.5-1.5 0-.414.336-.75.75-.75s.75.336.75.75C6 8.327 6.673 9 7.5 9S9 8.327 9 7.5c0-.414.336-.75.75-.75s.75.336.75.75c0 .827.673 1.5 1.5 1.5s1.5-.673 1.5-1.5c0-.414.336-.75.75-.75s.75.336.75.75c0 .827.673 1.5 1.5 1.5S18 8.327 18 7.5c0-.414.336-.75.75-.75z"/><path d="M6 21c-.827 0-1.5-.673-1.5-1.5v-3c0-.827.673-1.5 1.5-1.5h3c.827 0 1.5.673 1.5 1.5v3c0 .827-.673 1.5-1.5 1.5H6zm0-1.5h3v-3H6v3z"/><circle cx="16.125" cy="18.375" r="1.125"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.4 KiB

1
ghost/portal/src/images/icons/button-icon-5.svg Normal file
View file

@ -0,0 +1 @@
<svg width="24" height="24" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill=currentColor><title>gift</title><g fill=currentColor fill-rule="nonzero"><path d="M12 21.488H4v-10.75c0-.414-.336-.75-.75-.75s-.75.336-.75.75v10.75c0 .914.586 1.5 1.5 1.5h8c.414 0 .75-.336.75-.75s-.336-.75-.75-.75z"/><path d="M12.25 21.488h8v-10.75c0-.414.336-.75.75-.75s.75.336.75.75v10.75c0 .914-.586 1.5-1.5 1.5h-8c-.414 0-.75-.336-.75-.75s.336-.75.75-.75z"/><path d="M2.682 6.238h18.636c1.004 0 1.682.546 1.682 1.5v2.25c0 .954-.678 1.5-1.682 1.5H2.682c-1.004 0-1.682-.546-1.682-1.5v-2.25c0-.954.678-1.5 1.682-1.5zm0 1.5c-.239 0-.182-.046-.182 0v2.25c0 .046-.057 0 .182 0h18.636c.239 0 .182.046.182 0v-2.25c0-.046.057 0-.182 0H2.682z"/><path d="M12.75 22.238V6.988c0-.414-.336-.75-.75-.75s-.75.336-.75.75v15.25c0 .414.336.75.75.75s.75-.336.75-.75z"/><path d="M3.5 17.25h17c.414 0 .75-.336.75-.75s-.336-.75-.75-.75h-17c-.414 0-.75.336-.75.75s.336.75.75.75zM7.271 5.457c1.35 1.058 2.855 1.81 4.51 2.255.558.15 1.069-.36.92-.918-.445-1.657-1.197-3.162-2.256-4.511-1.498-1.506-2.74-1.626-3.774-.6-1.033 1.027-.908 2.273.533 3.714l.067.06zm.458-2.709c.397-.395.702-.366 1.596.528.587.755 1.079 1.6 1.456 2.516-.909-.377-1.758-.872-2.549-1.487-.865-.872-.89-1.173-.503-1.557z"/><path d="M16.796 5.397l-.067.06c-1.35 1.058-2.855 1.81-4.512 2.255-.557.15-1.068-.36-.918-.918.444-1.656 1.197-3.162 2.315-4.579 1.44-1.438 2.681-1.558 3.715-.531 1.033 1.026.908 2.272-.533 3.713zm-.525-2.649c-.397-.395-.702-.366-1.537.46-.628.801-1.132 1.662-1.515 2.584.909-.377 1.758-.873 2.549-1.487.865-.872.89-1.173.503-1.557z"/></g></svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
ghost/portal/src/utils/fixtures.js
View file

@ -15,7 +15,7 @@ export const site = {
portal_button: true,
portal_name: true,
portal_plans: ['free', 'monthly', 'yearly'],
portal_button_icon: 'https://raw.githubusercontent.com/TryGhost/members.js/master/src/images/icons/user.svg',
portal_button_icon: 'icon-1',
portal_button_signup_text: 'Subscribe Now for free access to everything',
portal_button_style: 'icon-and-text'
};