Infrastructure/ghost
0
Fork 0
mirror of https://github.com/TryGhost/Ghost.git synced 2025-03-04 02:01:58 -05:00
Code Issues Activity

Added simple colour picker to change signup embed background

Browse source 
refs https://github.com/TryGhost/Team/issues/3338
This commit is contained in:
Jono Mingard 2023-06-02 11:33:08 +12:00
parent 024045b9e3
commit eaa16c2f75
2 changed files with 35 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
ghost/admin/app/components/settings/signup-form-embed.hbs
View file

@ -4,7 +4,7 @@
<div class="gh-expandable-block"> <div class="gh-expandable-block">
<div class="gh-expandable-header"> <div class="gh-expandable-header">
<div> <div>
<h4 class="gh-expandable-title">Embeddable Sigup Form</h4> <h4 class="gh-expandable-title">Embeddable Signup Form</h4>
<p class="gh-expandable-description">Grow your audience from anywhere on the web</p> <p class="gh-expandable-description">Grow your audience from anywhere on the web</p>
</div> </div>
<button type="button" class="gh-btn" {{on "click" (toggle "opened" this)}}> <button type="button" class="gh-btn" {{on "click" (toggle "opened" this)}}>
@ -39,6 +39,15 @@
<p>Members who sign up via the form will have these labels.</p> <p>Members who sign up via the form will have these labels.</p>
</div> </div>
</div> </div>
<div class="form-group gh-stack-item row">
<label class="fw6 f8">Background color</label>
<Modals::Newsletters::Components::ColorPicker
@color={{this.backgroundColor}}
@presetColors={{this.backgroundPresetColors}}
@onColorChange={{this.setBackgroundColor}}
/>
</div>
</div> </div>
</div> </div>

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

@ -24,6 +24,7 @@ export default class SignupFormEmbed extends Component {
@tracked opened = false; @tracked opened = false;
@tracked style = 'all-in-one'; @tracked style = 'all-in-one';
@tracked labels = []; @tracked labels = [];
@tracked backgroundColor = '#f9f9f9';
@inject config; @inject config;
@service notifications; @service notifications;
@ -37,6 +38,28 @@ export default class SignupFormEmbed extends Component {
this.labels = labels; this.labels = labels;
} }
@action
setBackgroundColor(backgroundColor) {
this.backgroundColor = backgroundColor;
}
get backgroundPresetColors() {
return [
{
value: '#f9f9f9',
name: 'Light grey',
class: '',
style: 'background: #f9f9f9 !important;'
},
{
value: '#000000',
name: 'Black',
class: '',
style: 'background: #000000 !important;'
}
];
}
get generatedCode() { get generatedCode() {
const siteUrl = this.config.blogUrl; const siteUrl = this.config.blogUrl;
const scriptUrl = this.config.signupForm.url.replace('{version}', this.config.signupForm.version); const scriptUrl = this.config.signupForm.url.replace('{version}', this.config.signupForm.version);
@ -58,9 +81,8 @@ export default class SignupFormEmbed extends Component {
options.title = this.settings.title; options.title = this.settings.title;
options.description = this.settings.description; options.description = this.settings.description;
const backgroundColor = '#f9f9f9'; options['background-color'] = this.backgroundColor;
options['background-color'] = backgroundColor; options['text-color'] = textColorForBackgroundColor(this.backgroundColor).hex();
options['text-color'] = textColorForBackgroundColor(backgroundColor).hex();
style = 'height: 40vmin; min-height: 360px;'; style = 'height: 40vmin; min-height: 360px;';
} }