1
0
Fork 0

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

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

@ -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,11 +17,14 @@
}
.wizard-step-description {
line-height: 1.7;
margin-top: 0;
margin-bottom: 1em;
flex: 0;
p {
line-height: 1.7;
margin-top: 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;
}
.field-label {
font-weight: 400;
}
label {
display: flex;
flex-flow: wrap;
align-items: center;
.field-description {
color: #333;
img {
width: 40px;
height: 40px;
vertical-align: middle;
padding-bottom: 10px;
margin-right: 10px;
.field-label {
width: 100%;
}
input {
margin: 0 5px;
.field-image {
margin-right: 10px;
img {
width: 30px;
height: 30px;
}
}
.field-description {
flex: 1;
color: #333;
margin-top: 0;
p {
margin: 0;
line-height: 1.3em;
}
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;

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

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

Datei anzeigen

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