0
0
Fork 1
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:
Angus McLeod 2018-03-05 09:52:15 +08:00
Ursprung 82f99d9dec
Commit 4ab2cbb1ff
9 geänderte Dateien mit 103 neuen und 66 gelöschten Zeilen

Datei anzeigen

@ -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>

Datei anzeigen

@ -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');

Datei anzeigen

@ -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>

Datei anzeigen

@ -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}}

Datei anzeigen

@ -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;

Datei anzeigen

@ -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;
}
}
} }

Datei anzeigen

@ -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"

Datei anzeigen

@ -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?

Datei anzeigen

@ -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