Spiegel von
https://github.com/paviliondev/discourse-custom-wizard.git
synchronisiert 2024-11-09 20:02:54 +01:00
Cook step descriptions && add image type && style updates
Dieser Commit ist enthalten in:
Ursprung
82f99d9dec
Commit
4ab2cbb1ff
9 geänderte Dateien mit 103 neuen und 66 gelöschten Zeilen
|
@ -34,6 +34,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="setting">
|
||||||
|
<div class="setting-label">
|
||||||
|
<h3>{{i18n 'admin.wizard.field.image'}}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="setting-value">
|
||||||
|
{{input name="image" value=field.image placeholderKey="admin.wizard.field.image_placeholder"}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="setting">
|
<div class="setting">
|
||||||
<div class="setting-label">
|
<div class="setting-label">
|
||||||
<h3>{{i18n 'admin.wizard.type'}}</h3>
|
<h3>{{i18n 'admin.wizard.type'}}</h3>
|
||||||
|
|
|
@ -13,6 +13,7 @@ export default {
|
||||||
const getUrl = requirejs('discourse-common/lib/get-url').default;
|
const getUrl = requirejs('discourse-common/lib/get-url').default;
|
||||||
const FieldModel = requirejs('wizard/models/wizard-field').default;
|
const FieldModel = requirejs('wizard/models/wizard-field').default;
|
||||||
const autocomplete = requirejs('discourse/lib/autocomplete').default;
|
const autocomplete = requirejs('discourse/lib/autocomplete').default;
|
||||||
|
const cook = requirejs('discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite').cook;
|
||||||
|
|
||||||
$.fn.autocomplete = autocomplete;
|
$.fn.autocomplete = autocomplete;
|
||||||
|
|
||||||
|
@ -57,6 +58,10 @@ export default {
|
||||||
return index === 0 && !required;
|
return index === 0 && !required;
|
||||||
}.property('step.index', 'wizard.required'),
|
}.property('step.index', 'wizard.required'),
|
||||||
|
|
||||||
|
cookedDescription: function() {
|
||||||
|
return cook(this.get('step.description'));
|
||||||
|
}.property('step.description'),
|
||||||
|
|
||||||
bannerImage: function() {
|
bannerImage: function() {
|
||||||
const src = this.get('step.banner');
|
const src = this.get('step.banner');
|
||||||
if (!src) return;
|
if (!src) return;
|
||||||
|
@ -153,6 +158,10 @@ export default {
|
||||||
WizardField.reopen({
|
WizardField.reopen({
|
||||||
classNameBindings: ['field.id'],
|
classNameBindings: ['field.id'],
|
||||||
|
|
||||||
|
cookedDescription: function() {
|
||||||
|
return cook(this.get('field.description'));
|
||||||
|
}.property('field.description'),
|
||||||
|
|
||||||
inputComponentName: function() {
|
inputComponentName: function() {
|
||||||
const type = this.get('field.type');
|
const type = this.get('field.type');
|
||||||
const id = this.get('field.id');
|
const id = this.get('field.id');
|
||||||
|
|
|
@ -3,8 +3,12 @@
|
||||||
<span class='label-value'>{{field.label}}</span>
|
<span class='label-value'>{{field.label}}</span>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
|
{{#if field.image}}
|
||||||
|
<div class="field-image"><img src="{{field.image}}"></div>
|
||||||
|
{{/if}}
|
||||||
|
|
||||||
{{#if field.description}}
|
{{#if field.description}}
|
||||||
<div class='field-description'>{{{field.description}}}</div>
|
<div class='field-description'>{{cookedDescription}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
</label>
|
</label>
|
||||||
|
|
||||||
|
|
|
@ -4,7 +4,7 @@
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if step.description}}
|
{{#if step.description}}
|
||||||
<p class='wizard-step-description'>{{{step.description}}}</p>
|
<div class='wizard-step-description'>{{cookedDescription}}</div>
|
||||||
{{/if}}
|
{{/if}}
|
||||||
|
|
||||||
{{#if bannerImage}}
|
{{#if bannerImage}}
|
||||||
|
|
|
@ -2,12 +2,14 @@
|
||||||
|
|
||||||
.custom-wizard {
|
.custom-wizard {
|
||||||
background-color: initial;
|
background-color: initial;
|
||||||
|
font-size: 1.1em;
|
||||||
|
|
||||||
.wizard-step-contents {
|
.wizard-step-contents {
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
min-height: initial;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-step-title {
|
.wizard-step-title {
|
||||||
|
@ -15,10 +17,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-step-description {
|
.wizard-step-description {
|
||||||
|
flex: 0;
|
||||||
|
|
||||||
|
p {
|
||||||
line-height: 1.7;
|
line-height: 1.7;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 0;
|
||||||
flex: 0;
|
}
|
||||||
|
|
||||||
i {
|
i {
|
||||||
margin-right: 7px;
|
margin-right: 7px;
|
||||||
|
@ -76,6 +81,15 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.wizard-step-banner {
|
||||||
|
width: initial;
|
||||||
|
margin-bottom: 1em;
|
||||||
|
|
||||||
|
img {
|
||||||
|
max-height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.wizard-step-form {
|
.wizard-step-form {
|
||||||
flex: auto;
|
flex: auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -84,39 +98,64 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-field {
|
.wizard-field {
|
||||||
margin-bottom: 1em;
|
|
||||||
|
|
||||||
&.tip {
|
&.tip {
|
||||||
margin-top: auto;
|
margin-top: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
label {
|
||||||
|
display: flex;
|
||||||
|
flex-flow: wrap;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.field-label {
|
.field-label {
|
||||||
font-weight: 400;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.field-image {
|
||||||
|
margin-right: 10px;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 30px;
|
||||||
|
height: 30px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.field-description {
|
.field-description {
|
||||||
|
flex: 1;
|
||||||
color: #333;
|
color: #333;
|
||||||
|
margin-top: 0;
|
||||||
|
|
||||||
img {
|
p {
|
||||||
width: 40px;
|
margin: 0;
|
||||||
height: 40px;
|
line-height: 1.3em;
|
||||||
vertical-align: middle;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
margin-right: 10px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
input {
|
img {
|
||||||
|
height: 15px;
|
||||||
|
width: 15px;
|
||||||
margin: 0 5px;
|
margin: 0 5px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.wizard-column .wizard-step-banner {
|
.checkbox-field {
|
||||||
width: initial;
|
display: flex;
|
||||||
margin-bottom: 0;
|
align-items: center;
|
||||||
|
|
||||||
img {
|
&> label {
|
||||||
max-height: 300px;
|
order: 1;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&> .input-area {
|
||||||
|
order: 0;
|
||||||
|
margin: 15px 20px !important;
|
||||||
|
|
||||||
|
input {
|
||||||
|
cursor: pointer;
|
||||||
|
transform: scale(1.3);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -392,29 +431,6 @@ img.avatar {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-column .checkbox-field {
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
&> label {
|
|
||||||
order: 1;
|
|
||||||
flex: 1;
|
|
||||||
|
|
||||||
.field-description {
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&> .input-area {
|
|
||||||
order: 0;
|
|
||||||
margin: 15px 20px !important;
|
|
||||||
|
|
||||||
input {
|
|
||||||
cursor: pointer;
|
|
||||||
transform: scale(1.3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.checkbox-field.invalid .input-area {
|
.checkbox-field.invalid .input-area {
|
||||||
padding: 3px;
|
padding: 3px;
|
||||||
border: 4px solid red;
|
border: 4px solid red;
|
||||||
|
|
|
@ -38,17 +38,4 @@
|
||||||
input, textarea {
|
input, textarea {
|
||||||
border: 1px solid #919191;
|
border: 1px solid #919191;
|
||||||
}
|
}
|
||||||
|
|
||||||
.wizard-column .wizard-field .field-description {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
i, span {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -71,6 +71,8 @@ en:
|
||||||
header: "Fields"
|
header: "Fields"
|
||||||
label: "Label"
|
label: "Label"
|
||||||
description: "Description"
|
description: "Description"
|
||||||
|
image: "Image"
|
||||||
|
image_placeholder: "Image url"
|
||||||
dropdown_none: "None"
|
dropdown_none: "None"
|
||||||
dropdown_none_placeholder: "Translation Key"
|
dropdown_none_placeholder: "Translation Key"
|
||||||
choices_label: "Dropdown Choices"
|
choices_label: "Dropdown Choices"
|
||||||
|
@ -159,8 +161,8 @@ en:
|
||||||
none: "There is no wizard here."
|
none: "There is no wizard here."
|
||||||
|
|
||||||
wizard_composer:
|
wizard_composer:
|
||||||
show_preview: "Show Preview"
|
show_preview: "Show Post Preview"
|
||||||
hide_preview: "Hide Preview"
|
hide_preview: "Hide Post Preview"
|
||||||
quote_post_title: "Quote whole post"
|
quote_post_title: "Quote whole post"
|
||||||
bold_label: "B"
|
bold_label: "B"
|
||||||
bold_title: "Strong"
|
bold_title: "Strong"
|
||||||
|
|
|
@ -67,6 +67,7 @@ class CustomWizard::Builder
|
||||||
|
|
||||||
params[:label] = f['label'] if f['label']
|
params[:label] = f['label'] if f['label']
|
||||||
params[:description] = f['description'] if f['description']
|
params[:description] = f['description'] if f['description']
|
||||||
|
params[:image] = f['image'] if f['image']
|
||||||
params[:key] = f['key'] if f['key']
|
params[:key] = f['key'] if f['key']
|
||||||
|
|
||||||
if @submissions.last && @wizard.unfinished?
|
if @submissions.last && @wizard.unfinished?
|
||||||
|
|
|
@ -24,7 +24,7 @@ require_dependency 'wizard/step'
|
||||||
end
|
end
|
||||||
|
|
||||||
::Wizard::Field.class_eval do
|
::Wizard::Field.class_eval do
|
||||||
attr_reader :label, :description, :key, :min_length
|
attr_reader :label, :description, :image, :key, :min_length
|
||||||
attr_accessor :dropdown_none
|
attr_accessor :dropdown_none
|
||||||
|
|
||||||
def initialize(attrs)
|
def initialize(attrs)
|
||||||
|
@ -35,6 +35,7 @@ end
|
||||||
@required = !!attrs[:required]
|
@required = !!attrs[:required]
|
||||||
@label = attrs[:label]
|
@label = attrs[:label]
|
||||||
@description = attrs[:description]
|
@description = attrs[:description]
|
||||||
|
@image = attrs[:image]
|
||||||
@key = attrs[:key]
|
@key = attrs[:key]
|
||||||
@min_length = attrs[:min_length]
|
@min_length = attrs[:min_length]
|
||||||
@value = attrs[:value]
|
@value = attrs[:value]
|
||||||
|
@ -122,7 +123,7 @@ end
|
||||||
end
|
end
|
||||||
|
|
||||||
::WizardFieldSerializer.class_eval do
|
::WizardFieldSerializer.class_eval do
|
||||||
attributes :dropdown_none
|
attributes :dropdown_none, :image
|
||||||
|
|
||||||
def label
|
def label
|
||||||
return object.label if object.label
|
return object.label if object.label
|
||||||
|
@ -134,6 +135,14 @@ end
|
||||||
I18n.t("#{object.key || i18n_key}.description", default: '', base_url: Discourse.base_url)
|
I18n.t("#{object.key || i18n_key}.description", default: '', base_url: Discourse.base_url)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
def image
|
||||||
|
object.image
|
||||||
|
end
|
||||||
|
|
||||||
|
def include_image?
|
||||||
|
object.image.present?
|
||||||
|
end
|
||||||
|
|
||||||
def placeholder
|
def placeholder
|
||||||
I18n.t("#{object.key || i18n_key}.placeholder", default: '')
|
I18n.t("#{object.key || i18n_key}.placeholder", default: '')
|
||||||
end
|
end
|
||||||
|
|
Laden …
In neuem Issue referenzieren