Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-01-20 22:42:53 -05:00
Code Issues Activity

Added transparent background pattern to minimal signup form preview

Browse source 
refs https://github.com/TryGhost/Team/issues/3340
This commit is contained in:
Simon Backx 2023-06-02 09:45:17 +02:00
parent f908a03fff
commit 9ff9906670
2 changed files with 18 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

21
ghost/admin/app/components/modals/settings/signup-form-embed.js
View file

@ -100,7 +100,11 @@ export default class SignupFormEmbedModal extends Component {
}
if (preview) {
style = 'height: 100vh';
if (this.style === 'minimal') {
style = 'max-width: 500px;position: absolute; left: 50%; top:50%; transform: translate(-50%, -50%);';
} else {
style = 'height: 100vh';
}
}
let dataOptionsString = '';
@ -108,18 +112,23 @@ export default class SignupFormEmbedModal extends Component {
dataOptionsString += ` data-${key}="${escapeHtml(value)}"`;
}
return `<div style="${escapeHtml(style)}"><script src="${encodeURI(scriptUrl)}"${dataOptionsString}></script></div>`;
const code = `<div style="${escapeHtml(style)}"><script src="${encodeURI(scriptUrl)}"${dataOptionsString}></script></div>`;
if (preview && this.style === 'minimal') {
// Add background
return `<div style="position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%), linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%);background-size: 16px 16px;background-position: 0 0, 8px 8px;;"></div>${code}`;
}
return code;
}
@task
*copyText() {
// Copy this.generatedCode tp the clipboard
const el = document.createElement('textarea');
el.value = this.generatedCode;
document.body.appendChild(el);
const el = document.getElementById('gh-signup-form-embed-code-input');
el.select();
document.execCommand('copy');
document.body.removeChild(el);
this.notifications.showNotification('Code copied to clipboard!');
yield true;
return true;

12
ghost/admin/app/components/settings/signup-form/style-select.js
View file

@ -4,17 +4,11 @@ import {action} from '@ember/object';
export default class StyleSelect extends Component {
get options() {
return [{
name: 'All in one',
description: 'A branded form ready to be dropped into any site.',
value: 'all-in-one',
icon: 'members-post',
icon_color: 'blue'
name: 'Branded',
value: 'all-in-one'
}, {
name: 'Minimal',
description: 'A simple form with just an email field.',
value: 'minimal',
icon: 'members-all',
icon_color: 'pink'
value: 'minimal'
}];
}