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 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-label">
|
||||
<h3>{{i18n 'admin.wizard.type'}}</h3>
|
||||
|
|
|
@ -13,6 +13,7 @@ export default {
|
|||
const getUrl = requirejs('discourse-common/lib/get-url').default;
|
||||
const FieldModel = requirejs('wizard/models/wizard-field').default;
|
||||
const autocomplete = requirejs('discourse/lib/autocomplete').default;
|
||||
const cook = requirejs('discourse/plugins/discourse-custom-wizard/wizard/lib/text-lite').cook;
|
||||
|
||||
$.fn.autocomplete = autocomplete;
|
||||
|
||||
|
@ -57,6 +58,10 @@ export default {
|
|||
return index === 0 && !required;
|
||||
}.property('step.index', 'wizard.required'),
|
||||
|
||||
cookedDescription: function() {
|
||||
return cook(this.get('step.description'));
|
||||
}.property('step.description'),
|
||||
|
||||
bannerImage: function() {
|
||||
const src = this.get('step.banner');
|
||||
if (!src) return;
|
||||
|
@ -153,6 +158,10 @@ export default {
|
|||
WizardField.reopen({
|
||||
classNameBindings: ['field.id'],
|
||||
|
||||
cookedDescription: function() {
|
||||
return cook(this.get('field.description'));
|
||||
}.property('field.description'),
|
||||
|
||||
inputComponentName: function() {
|
||||
const type = this.get('field.type');
|
||||
const id = this.get('field.id');
|
||||
|
|
|
@ -3,8 +3,12 @@
|
|||
<span class='label-value'>{{field.label}}</span>
|
||||
{{/if}}
|
||||
|
||||
{{#if field.image}}
|
||||
<div class="field-image"><img src="{{field.image}}"></div>
|
||||
{{/if}}
|
||||
|
||||
{{#if field.description}}
|
||||
<div class='field-description'>{{{field.description}}}</div>
|
||||
<div class='field-description'>{{cookedDescription}}</div>
|
||||
{{/if}}
|
||||
</label>
|
||||
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
{{/if}}
|
||||
|
||||
{{#if step.description}}
|
||||
<p class='wizard-step-description'>{{{step.description}}}</p>
|
||||
<div class='wizard-step-description'>{{cookedDescription}}</div>
|
||||
{{/if}}
|
||||
|
||||
{{#if bannerImage}}
|
||||
|
|
|
@ -2,12 +2,14 @@
|
|||
|
||||
.custom-wizard {
|
||||
background-color: initial;
|
||||
font-size: 1.1em;
|
||||
|
||||
.wizard-step-contents {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
min-height: initial;
|
||||
}
|
||||
|
||||
.wizard-step-title {
|
||||
|
@ -15,10 +17,13 @@
|
|||
}
|
||||
|
||||
.wizard-step-description {
|
||||
flex: 0;
|
||||
|
||||
p {
|
||||
line-height: 1.7;
|
||||
margin-top: 0;
|
||||
margin-bottom: 1em;
|
||||
flex: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
margin-right: 7px;
|
||||
|
@ -76,6 +81,15 @@
|
|||
}
|
||||
}
|
||||
|
||||
.wizard-step-banner {
|
||||
width: initial;
|
||||
margin-bottom: 1em;
|
||||
|
||||
img {
|
||||
max-height: 300px;
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-step-form {
|
||||
flex: auto;
|
||||
display: flex;
|
||||
|
@ -84,39 +98,64 @@
|
|||
}
|
||||
|
||||
.wizard-field {
|
||||
margin-bottom: 1em;
|
||||
|
||||
&.tip {
|
||||
margin-top: auto;
|
||||
}
|
||||
|
||||
label {
|
||||
display: flex;
|
||||
flex-flow: wrap;
|
||||
align-items: center;
|
||||
|
||||
.field-label {
|
||||
font-weight: 400;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.field-image {
|
||||
margin-right: 10px;
|
||||
|
||||
img {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
||||
.field-description {
|
||||
flex: 1;
|
||||
color: #333;
|
||||
margin-top: 0;
|
||||
|
||||
img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
vertical-align: middle;
|
||||
padding-bottom: 10px;
|
||||
margin-right: 10px;
|
||||
p {
|
||||
margin: 0;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
|
||||
input {
|
||||
img {
|
||||
height: 15px;
|
||||
width: 15px;
|
||||
margin: 0 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.wizard-column .wizard-step-banner {
|
||||
width: initial;
|
||||
margin-bottom: 0;
|
||||
.checkbox-field {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
img {
|
||||
max-height: 300px;
|
||||
&> label {
|
||||
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 {
|
||||
padding: 3px;
|
||||
border: 4px solid red;
|
||||
|
|
|
@ -38,17 +38,4 @@
|
|||
input, textarea {
|
||||
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"
|
||||
label: "Label"
|
||||
description: "Description"
|
||||
image: "Image"
|
||||
image_placeholder: "Image url"
|
||||
dropdown_none: "None"
|
||||
dropdown_none_placeholder: "Translation Key"
|
||||
choices_label: "Dropdown Choices"
|
||||
|
@ -159,8 +161,8 @@ en:
|
|||
none: "There is no wizard here."
|
||||
|
||||
wizard_composer:
|
||||
show_preview: "Show Preview"
|
||||
hide_preview: "Hide Preview"
|
||||
show_preview: "Show Post Preview"
|
||||
hide_preview: "Hide Post Preview"
|
||||
quote_post_title: "Quote whole post"
|
||||
bold_label: "B"
|
||||
bold_title: "Strong"
|
||||
|
|
|
@ -67,6 +67,7 @@ class CustomWizard::Builder
|
|||
|
||||
params[:label] = f['label'] if f['label']
|
||||
params[:description] = f['description'] if f['description']
|
||||
params[:image] = f['image'] if f['image']
|
||||
params[:key] = f['key'] if f['key']
|
||||
|
||||
if @submissions.last && @wizard.unfinished?
|
||||
|
|
|
@ -24,7 +24,7 @@ require_dependency 'wizard/step'
|
|||
end
|
||||
|
||||
::Wizard::Field.class_eval do
|
||||
attr_reader :label, :description, :key, :min_length
|
||||
attr_reader :label, :description, :image, :key, :min_length
|
||||
attr_accessor :dropdown_none
|
||||
|
||||
def initialize(attrs)
|
||||
|
@ -35,6 +35,7 @@ end
|
|||
@required = !!attrs[:required]
|
||||
@label = attrs[:label]
|
||||
@description = attrs[:description]
|
||||
@image = attrs[:image]
|
||||
@key = attrs[:key]
|
||||
@min_length = attrs[:min_length]
|
||||
@value = attrs[:value]
|
||||
|
@ -122,7 +123,7 @@ end
|
|||
end
|
||||
|
||||
::WizardFieldSerializer.class_eval do
|
||||
attributes :dropdown_none
|
||||
attributes :dropdown_none, :image
|
||||
|
||||
def 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)
|
||||
end
|
||||
|
||||
def image
|
||||
object.image
|
||||
end
|
||||
|
||||
def include_image?
|
||||
object.image.present?
|
||||
end
|
||||
|
||||
def placeholder
|
||||
I18n.t("#{object.key || i18n_key}.placeholder", default: '')
|
||||
end
|
||||
|
|
Laden …
In neuem Issue referenzieren