mirror of
https://github.com/TryGhost/Ghost.git
synced 2024-12-01 13:54:35 +03:00
Changed design of first step Launch wizard to be consistent with branding modal in settings
refs https://github.com/TryGhost/Team/issues/460
This commit is contained in:
Sanne de Vries
Daniel Lockyer
parent
35d9545c68
commit
f9779cf5e3
@ -1,152 +1,161 @@
|
||||
<div class="mb10" data-test-setting="icon">
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
@paramsHash={{hash purpose="icon"}}
|
||||
@onComplete={{action "imageUploaded" "icon"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content pb4">
|
||||
<div class="gh-setting-title">Publication icon</div>
|
||||
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-branding-settings">
|
||||
<section class="gh-launch-wizard-settings-design">
|
||||
<div class="gh-stack">
|
||||
<div class="gh-stack-item gh-setting-first">
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Accent color</div>
|
||||
<div class="gh-setting-desc">Primary color used in your publication theme</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
|
||||
<div class="gh-setting-action gh-setting-action-smallimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.icon}}
|
||||
<div class="flex items-end">
|
||||
<img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
|
||||
<span class="ml2">delete</span>
|
||||
</button>
|
||||
<div class="gh-setting-action" data-test-setting="accentColor">
|
||||
<GhFormGroup
|
||||
@errors={{this.settings.errors}}
|
||||
@hasValidated={{this.settings.hasValidated}}
|
||||
@property="accentColor"
|
||||
@class="input-color-form-group"
|
||||
>
|
||||
<div class="input-color">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="abcdef"
|
||||
name="accent-color"
|
||||
autocorrect="off"
|
||||
maxlength="6"
|
||||
value={{this.accentColor}}
|
||||
class="gh-input"
|
||||
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
||||
{{on "blur" (action 'updateAccentColor')}}
|
||||
data-test-input="accentColor"
|
||||
/>
|
||||
<div class="color-picker-horizontal-divider"></div>
|
||||
<div
|
||||
class="color-box-container"
|
||||
style={{this.accentColorBgStlye}}
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color"
|
||||
class="color-picker"
|
||||
value="{{this.accentColorPickerValue}}"
|
||||
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="gh-stack-item gh-setting" data-test-setting="icon">
|
||||
<GhUploader
|
||||
@extensions={{this.iconExtensions}}
|
||||
@paramsHash={{hash purpose="icon"}}
|
||||
@onComplete={{action "imageUploaded" "icon"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content">
|
||||
<div class="gh-setting-title">Publication icon</div>
|
||||
<div class="gh-setting-desc">A square, social icon used in the UI of your publication, at least 60x60px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="icon">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.icon}}
|
||||
<div class="gh-branding-image-container transparent-bg">
|
||||
<img class="blog-icon" src="{{this.settings.icon}}" {{on "click" this.triggerFileDialog}} alt="icon" data-test-icon-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "icon")}} data-test-delete-image="icon">
|
||||
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn self-center" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
|
||||
<span>Upload icon</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div class="gh-stack-item gh-setting" data-test-setting="logo">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "logo"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div>
|
||||
<div class="gh-setting-title">Publication logo</div>
|
||||
<div class="gh-setting-desc mb3">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
|
||||
|
||||
<div class="gh-setting-action gh-uploadbutton-container gh-setting-action-smallimg flex flex-column">
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.logo}}
|
||||
<div class="gh-branding-image-container largeimg justify-center transparent-bg">
|
||||
<img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
|
||||
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
|
||||
<span>Upload logo</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div class="gh-stack-item gh-setting bb b--whitegrey" data-test-setting="coverImage">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "coverImage"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div>
|
||||
<div class="gh-setting-title">Publication cover</div>
|
||||
<div class="gh-setting-desc mb3">An optional large background image for your site</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
|
||||
<div class="gh-setting-action gh-uploadbutton-container flex flex-column items-stretch">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.coverImage}}
|
||||
<div class="gh-branding-image-container largeimg justify-start">
|
||||
<img class="blog-cover" src="{{this.settings.coverImage}}" {{on "click" this.triggerFileDialog}} alt="cover photo" data-test-cover-img>
|
||||
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.removeImage "coverImage")}} data-test-delete-image="coverImage">
|
||||
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn self-start" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage">
|
||||
<span>Upload cover</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
<div>
|
||||
<button type="button" class="gh-btn gh-btn-black mt4" {{on "click" @nextStep}} data-test-button="wizard-next"><span>Next step</span></button>
|
||||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" {{on "click" triggerFileDialog}} data-test-image-upload-btn="icon">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.iconMimeTypes}} data-test-file-input="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
|
||||
<div class="mb10" data-test-setting="logo">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "logo"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content pb4">
|
||||
<div class="gh-setting-title">Publication logo</div>
|
||||
<div class="gh-setting-desc">The primary logo for your brand displayed across your theme, should be transparent and at least 600px x 72px</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="logo">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-smallimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.logo}}
|
||||
<div class="flex items-end">
|
||||
<img class="blog-logo" src="{{this.settings.logo}}" {{on "click" this.triggerFileDialog}} alt="logo" data-test-logo-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{on "click" (fn this.removeImage "logo")}} data-test-delete-image="logo">
|
||||
<span class="ml2">delete</span>
|
||||
</button>
|
||||
</div>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="logo">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="logo" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
|
||||
<div class="mb10" data-test-setting="coverImage">
|
||||
<GhUploader
|
||||
@extensions={{this.imageExtensions}}
|
||||
@onComplete={{action "imageUploaded" "coverImage"}}
|
||||
as |uploader|
|
||||
>
|
||||
<div class="gh-setting-content pb4">
|
||||
<div class="gh-setting-title">Publication cover</div>
|
||||
<div class="gh-setting-desc">An optional large background image for your site</div>
|
||||
{{#each uploader.errors as |error|}}
|
||||
<div class="gh-setting-error" data-test-error="coverImage">{{or error.context error.message}}</div>
|
||||
{{/each}}
|
||||
</div>
|
||||
<div class="gh-setting-action gh-setting-action-largeimg">
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.coverImage}}
|
||||
<img class="blog-cover" src="{{this.settings.coverImage}}" {{on "click" this.triggerFileDialog}} alt="cover photo" data-test-cover-img>
|
||||
<button type="button" class="gh-setting-action-largeimg-delete" {{on "click" (fn this.removeImage "coverImage")}} data-test-delete-image="coverImage">
|
||||
<span>delete</span>
|
||||
</button>
|
||||
{{else}}
|
||||
<button type="button" class="gh-btn" {{on "click" this.triggerFileDialog}} data-test-image-upload-btn="coverImage">
|
||||
<span>Upload Image</span>
|
||||
</button>
|
||||
{{/if}}
|
||||
<div style="display:none">
|
||||
<GhFileInput @multiple={{false}} @action={{uploader.setFiles}} @accept={{this.imageMimeTypes}} data-test-file-input="coverImage" />
|
||||
</div>
|
||||
</div>
|
||||
</GhUploader>
|
||||
</div>
|
||||
|
||||
<div class="mb12" data-test-setting="accentColor">
|
||||
<GhFormGroup
|
||||
@errors={{this.settings.errors}}
|
||||
@hasValidated={{this.settings.hasValidated}}
|
||||
@property="accentColor"
|
||||
@class="input-color-form-group"
|
||||
>
|
||||
<div class="pb4">
|
||||
<div class="gh-setting-title">Accent color</div>
|
||||
<div class="gh-setting-desc">Primary color used in your publication theme</div>
|
||||
<GhErrorMessage
|
||||
@errors={{this.settings.errors}}
|
||||
@property="accentColor"
|
||||
data-test-error="accentColor"
|
||||
/>
|
||||
</div>
|
||||
<div class="input-color">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="abcdef"
|
||||
name="accent-color"
|
||||
autocorrect="off"
|
||||
maxlength="6"
|
||||
value={{this.accentColor}}
|
||||
class="gh-input"
|
||||
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
||||
{{on "blur" this.updateAccentColor}}
|
||||
data-test-input="accentColor"
|
||||
/>
|
||||
<div class="color-picker-horizontal-divider"></div>
|
||||
<div
|
||||
class="color-box-container"
|
||||
style={{this.accentColorBgStlye}}
|
||||
>
|
||||
<input
|
||||
type="color"
|
||||
name="accent-color"
|
||||
class="color-picker"
|
||||
value="{{this.accentColorPickerValue}}"
|
||||
{{on "input" (perform this.debounceUpdateAccentColor)}}
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</GhFormGroup>
|
||||
</div>
|
||||
|
||||
<button type="button" class="gh-btn gh-btn-black" {{on "click" @nextStep}} data-test-button="wizard-next"><span>Next step</span></button>
|
||||
</section>
|
||||
</div>
|
||||
@ -120,7 +120,7 @@
|
||||
|
||||
{{!-- TODO: reset "failed" state automatically --}}
|
||||
<GhTaskButton
|
||||
@buttonText="Launch my site"
|
||||
@buttonText="Save and continue"
|
||||
@task={{this.saveAndContinue}}
|
||||
@runningText="Launching"
|
||||
@class="right gh-btn gh-btn-black gh-btn-icon"
|
||||
|
||||
@ -60,7 +60,7 @@
|
||||
{{#if uploader.isUploading}}
|
||||
{{uploader.progressBar}}
|
||||
{{else if this.settings.logo}}
|
||||
<div class="gh-branding-image-container largeimg transparent-bg">
|
||||
<div class="gh-branding-image-container largeimg justify-center transparent-bg">
|
||||
<img class="blog-logo" src="{{this.settings.logo}}" alt="logo" data-test-logo-img>
|
||||
<button type="button" class="gh-setting-action-smallimg-delete" {{action "removeImage" "logo"}} data-test-delete-image="logo">
|
||||
{{svg-jar "trash" class="w4 h4 fill-white"}}
|
||||
|
||||
@ -19,7 +19,6 @@
|
||||
}
|
||||
|
||||
.gh-launch-wizard-preview {
|
||||
border-radius: 6px;
|
||||
box-shadow:
|
||||
0 0 0 1px rgba(0,0,0,0.02),
|
||||
0 2.8px 2.2px rgba(0, 0, 0, 0.02),
|
||||
@ -29,4 +28,30 @@
|
||||
0 41.8px 33.4px rgba(0, 0, 0, 0.05),
|
||||
0 100px 80px rgba(0, 0, 0, 0.07);
|
||||
;
|
||||
}
|
||||
|
||||
.gh-launch-wizard-settings-design {
|
||||
min-width: 320px;
|
||||
margin: 20px 0 -20px;
|
||||
padding: 24px 80px 24px 0;
|
||||
height: calc(100vh - 136px);
|
||||
}
|
||||
|
||||
.gh-launch-wizard-settings-design .gh-setting-action-largeimg-delete,
|
||||
.gh-launch-wizard-settings-design .gh-setting-action-smallimg-delete {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
background: rgba(0, 0, 0, 0.9);
|
||||
border: 1px solid rgba(255, 255, 255, 0.25);
|
||||
padding: 5px;
|
||||
margin: 0;
|
||||
border-radius: 3px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.gh-launch-wizard-settings-design .gh-setting-action-largeimg-delete:hover,
|
||||
.gh-launch-wizard-settings-design .gh-setting-action-smallimg-delete:hover {
|
||||
background: var(--red);
|
||||
border-color: transparent;
|
||||
}
|
||||
@ -1126,7 +1126,6 @@ p.theme-validation-details {
|
||||
height: unset;
|
||||
min-height: 80px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.gh-branding-image-container.transparent-bg {
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
<div class="fullscreen-wizard-container" {{will-destroy this.reset}}>
|
||||
<div class="pt8 pl20 pr20 flex justify-between-l items-center bb">
|
||||
<div class="pt7 pb5 pl20 pr20 flex justify-between-l items-center bb b--whitegrey">
|
||||
<div class="flex flex-column">
|
||||
<div class="ttu gh-launch-wizard-step-indicator">{{this.currentStep.position}}</div>
|
||||
<h1>{{this.currentStep.title}}</h1>
|
||||
<h2>{{this.currentStep.title}}</h2>
|
||||
</div>
|
||||
<button type="button" class="close gh-btn" title="Close" {{on "click" this.close}} data-test-button="close-wizard">
|
||||
<span>Save and exit</span>
|
||||
@ -10,7 +10,7 @@
|
||||
</div>
|
||||
|
||||
<div class="flex mb4 br3 bg-white">
|
||||
<div class="w-30 vh-75 mt12 ml20 pr6">
|
||||
<div class="w-30 vh-75 ml20">
|
||||
{{component (concat "gh-launch-wizard/" this.step)
|
||||
nextStep=this.nextStep
|
||||
backStep=this.backStep
|
||||
@ -20,7 +20,7 @@
|
||||
}}
|
||||
</div>
|
||||
|
||||
<div class="relative flex-grow-1 mt12 ml12 mr20">
|
||||
<div class="relative flex-grow-1 mt10 mr20">
|
||||
<GhBrowserPreview @icon={{this.settings.icon}} @title={{this.config.blogTitle}}>
|
||||
<GhSiteIframe class="gh-launch-wizard-preview" @src={{this.previewSrc}} @guid={{this.previewGuid}}></GhSiteIframe>
|
||||
</GhBrowserPreview>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user