Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add wrapper to app content fields #12347

Merged
merged 4 commits into from
Sep 15, 2022
Merged

Add wrapper to app content fields #12347

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
38f1129
Add wrapper to app content fields
MikeAlhayek Sep 6, 2022
1d0a411
Minor cleanup
MikeAlhayek Sep 7, 2022
5c8ac6c
Update the wrapper class name
MikeAlhayek Sep 9, 2022
2fa7164
clean up
MikeAlhayek Sep 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField-Switch.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,8 +2,10 @@

@{
var settings = Model.PartFieldDefinition.GetSettings<BooleanFieldSettings>();
var fieldName = Model.PartFieldDefinition.Name;
}
<div class="mb-3">

<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Value)_FieldWrapper">
<div class="form-check form-switch">
<input asp-for="Value" type="checkbox" class="form-check-input content-preview-select" checked="@Model.Value" />
<label asp-for="Value" class="form-check-label">@(string.IsNullOrEmpty(settings.Label) ? Model.PartFieldDefinition.DisplayName() : settings.Label)</label>
Expand Down
4 changes: 2 additions & 2 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
@model OrchardCore.ContentFields.ViewModels.EditBooleanFieldViewModel
@{

var settings = Model.PartFieldDefinition.GetSettings<BooleanFieldSettings>();
var fieldName = Model.PartFieldDefinition.Name;
}

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Value)_FieldWrapper">
<div class="form-check">
<input asp-for="Value" type="checkbox" class="form-check-input content-preview-select" checked="@Model.Value" />
<label class="form-check-label" asp-for="Value">
Expand Down
10 changes: 4 additions & 6 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,12 @@
<script asp-name="vue-multiselect-wrapper" asp-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-wrapper.js" at="Foot" depends-on="vuejs, vue-multiselect, sortable, vuedraggable"></script>
<style asp-name="vue-multiselect-wrapper" asp-src="~/OrchardCore.ContentFields/Styles/vue-multiselect-wrapper.min.css" debug-src="~/OrchardCore.ContentFields/Styles/vue-multiselect-wrapper.css" depends-on="vue-multiselect"></style>

<label asp-for="ContentItemIds">@Model.PartFieldDefinition.DisplayName()</label>
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.ContentItemIds)_FieldWrapper">
MikeAlhayek marked this conversation as resolved.
Show resolved Hide resolved
<label asp-for="ContentItemIds">@Model.PartFieldDefinition.DisplayName()</label>

<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">
<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="ContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">

<div class="mb-3">
<ul class="list-group w-xl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
<ul class="mb-1 list-group w-xl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
<draggable v-model="arrayOfItems">
<li v-for="(item, i) in arrayOfItems"
class="cursor-move list-group-item content-picker-default__list-item d-flex align-items-start justify-content-between"
Expand All @@ -33,9 +33,7 @@
</li>
</draggable>
</ul>
</div>

<div class="mb-3">
<div class="w-xl-50">
<input asp-for="ContentItemIds" type="hidden" v-model="selectedIds" />
<vue-multiselect v-model="value" :options="options" track-by="id"
Expand Down
4 changes: 3 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,11 @@

@{
var settings = Model.PartFieldDefinition.GetSettings<DateFieldSettings>();
var fieldName = Model.PartFieldDefinition.Name;
}

<script asp-name="jQuery-ui-i18n" at="Foot"></script>
<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Value)_FieldWrapper">
<div class="row">
<div class="col-md-6 col-lg-4">
<label asp-for="Value">@Model.PartFieldDefinition.DisplayName()</label>
Expand Down
3 changes: 2 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,10 @@

@{
var settings = Model.PartFieldDefinition.GetSettings<DateTimeFieldSettings>();
var fieldName = Model.PartFieldDefinition.Name;
}
<script asp-name="jQuery-ui-i18n" at="Foot"></script>
<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.LocalDateTime)_FieldWrapper">
<div class="row">
<div class="col-md-6 col-lg-4">
<label asp-for="LocalDateTime">@Model.PartFieldDefinition.DisplayName()</label>
Expand Down
15 changes: 8 additions & 7 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Monaco.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,11 +4,12 @@
var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
var monacoSettings = Model.PartFieldDefinition.GetSettings<HtmlFieldMonacoEditorSettings>();
var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
var fieldName = Model.PartFieldDefinition.Name;
}

@await DisplayAsync(await New.ShortcodeModal())

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Html)_FieldWrapper">
<label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
<div id="@Html.IdFor(x => x.Html)_editor" asp-for="Text" style="min-height: 400px;" class="form-control" dir="@culture.GetLanguageDirection()"></div>
<textarea asp-for="Html" hidden>@Html.Raw(Model.Html)</textarea>
Expand All @@ -20,8 +21,8 @@

<script asp-name="monaco" depends-on="admin" at="Foot"></script>
<script at="Foot" depends-on="monaco">
$(document).ready(function () {
require(['vs/editor/editor.main'], function () {
$(document).ready(function() {
require(['vs/editor/editor.main'], function() {

var settings = @Html.Raw(monacoSettings.Options);
if (settings.automaticLayout == undefined) {
Expand All @@ -46,7 +47,7 @@

var editor = monaco.editor.create(document.getElementById('@Html.IdFor(x => x.Html)_editor'), settings);
var textArea = document.getElementById('@Html.IdFor(x => x.Html)');

editor.getModel().onDidChangeContent((event) => {
textArea.value = editor.getValue();
$(document).trigger('contentpreview:render');
Expand All @@ -55,8 +56,8 @@
const shortcodesAction = {
id: "shortcodes",
label: "Add Shortcode",
run: function (editor) {
shortcodesApp.init(function (value) {
run: function(editor) {
shortcodesApp.init(function(value) {
if (value) {
var selection = editor.getSelection();
var text = value;
Expand All @@ -76,7 +77,7 @@

editor.getModel().setValue(textArea.value);

window.addEventListener("submit", function () {
window.addEventListener("submit", function() {
textArea.value = editor.getValue();
});
});
Expand Down
3 changes: 2 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Multiline.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
@{
var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
var fieldName = Model.PartFieldDefinition.Name;
}

@await DisplayAsync(await New.ShortcodeModal())

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Html)_FieldWrapper">
<label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
<textarea asp-for="Html" rows="5" class="form-control content-preview-text shortcode-modal-input" dir="@culture.GetLanguageDirection()"></textarea>
@if (!String.IsNullOrEmpty(settings.Hint))
Expand Down
3 changes: 2 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
var trumbowygSettings = Model.PartFieldDefinition.GetSettings<HtmlFieldTrumbowygEditorSettings>();
var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
var fieldName = Model.PartFieldDefinition.Name;
}

<script asp-name="trumbowyg-plugins" depends-on="admin" version="2" at="Foot"></script>
Expand All @@ -22,7 +23,7 @@ else

@await DisplayAsync(await New.ShortcodeModal())

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Html)_FieldWrapper">
<label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
@if (culture.IsRightToLeft())
{
Expand Down
3 changes: 2 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Wysiwyg.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
@{
var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
var fieldName = Model.PartFieldDefinition.Name;
}

<style asp-name="trumbowyg" version="2"></style>
Expand All @@ -13,7 +14,7 @@

@await DisplayAsync(await New.ShortcodeModal())

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Html)_FieldWrapper">
<label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
@if (culture.IsRightToLeft())
{
Expand Down
3 changes: 2 additions & 1 deletion src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,12 @@
@{
var settings = Model.PartFieldDefinition.GetSettings<HtmlFieldSettings>();
var culture = await Orchard.GetContentCultureAsync(Model.Field.ContentItem);
var fieldName = Model.PartFieldDefinition.Name;
}

@await DisplayAsync(await New.ShortcodeModal())

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Html)_FieldWrapper">
<label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
<textarea asp-for="Html" rows="5" class="form-control content-preview-text" dir="@culture.GetLanguageDirection()"></textarea>
@if (!String.IsNullOrEmpty(settings.Hint))
Expand Down
39 changes: 22 additions & 17 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,39 +2,44 @@

@{
var settings = Model.PartFieldDefinition.GetSettings<LinkFieldSettings>();
}

@{
var isRequired = settings.Required && String.IsNullOrWhiteSpace(settings.DefaultUrl);
var isTextRequired = settings.LinkTextMode == LinkTextMode.Required && String.IsNullOrWhiteSpace(settings.DefaultText);
var urlClass = settings.Required ? "required" : null;
var textClass = settings.LinkTextMode == LinkTextMode.Required ? "required" : null;
var fieldName = Model.PartFieldDefinition.Name;
var useFormFloating = String.IsNullOrWhiteSpace(settings.UrlPlaceholder) || String.IsNullOrWhiteSpace(settings.TextPlaceholder);
}

<div class="row">
<div class="mb-3 col-md-12">
<div class="row field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Text)_FieldWrapper">
<div class="mb-1 col-md-12">
<label asp-for="Url">@Model.PartFieldDefinition.DisplayName()</label>
</div>
<div class="mb-3 col-md-6" asp-validation-class-for="Url">
@if (string.IsNullOrEmpty(settings.UrlPlaceholder))
{
<label asp-for="Url" class="@urlClass">@T["Url"]</label>
}
<input asp-for="Url" class="form-control content-preview-text" placeholder="@settings.UrlPlaceholder" required="@isRequired" />
@if (!string.IsNullOrWhiteSpace(settings.Hint))
<div class="@(useFormFloating ? "form-floating" : String.Empty)">
<input asp-for="Url" class="form-control content-preview-text" placeholder="@settings.UrlPlaceholder" required="@isRequired" />
@if (useFormFloating)
{
<label asp-for="Url" class="@urlClass">@T["Url"]</label>
}
</div>

@if (!String.IsNullOrWhiteSpace(settings.Hint))
{
<span class="hint">@settings.Hint</span>
}
</div>
@if (settings.LinkTextMode == LinkTextMode.Optional || settings.LinkTextMode == LinkTextMode.Required)
{
<div class="mb-3 col-md-6" asp-validation-class-for="Text">
@if (string.IsNullOrEmpty(settings.TextPlaceholder))
{
<label asp-for="Text" class="@textClass">@T["Link text"]</label>
}
<input asp-for="Text" type="text" class="form-control content-preview-text" placeholder="@settings.TextPlaceholder" required="@isTextRequired" />
@if (!string.IsNullOrWhiteSpace(settings.HintLinkText))
<div class="@(useFormFloating ? "form-floating" : String.Empty)">
<input asp-for="Text" type="text" class="form-control content-preview-text" placeholder="@settings.TextPlaceholder" required="@isTextRequired" />
@if (useFormFloating)
{
<label asp-for="Text" class="@textClass">@T["Link text"]</label>
}
</div>

@if (!String.IsNullOrWhiteSpace(settings.HintLinkText))
{
<span class="hint">@settings.HintLinkText</span>
}
Expand Down
9 changes: 4 additions & 5 deletions ...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,10 +20,11 @@

<label asp-for="LocalizationSets">@Model.PartFieldDefinition.DisplayName()</label>

<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="LocalizationSetContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.LocalizationSets)_FieldWrapper">

<div class="mb-3">
<ul class="list-group w-xl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
<div id="@vueElementId" class="vue-multiselect" data-part="@partName" data-field="@fieldName" data-editor-type="LocalizationSetContentPicker" data-selected-items="@selectedItems" data-search-url="@searchUrl" data-multiple="@multiple">

<ul class="mb-1 list-group w-xl-50 content-picker-default__list" v-show="arrayOfItems.length" v-cloak>
<draggable v-model="arrayOfItems">
<li v-for="(item, i) in arrayOfItems"
class="cursor-move list-group-item content-picker-default__list-item d-flex align-items-start justify-content-between"
Expand All @@ -36,9 +37,7 @@
</li>
</draggable>
</ul>
</div>

<div class="mb-3">
<div class="w-xl-50">
<input asp-for="LocalizationSets" type="hidden" v-model="selectedIds" />
<vue-multiselect v-model="value" :options="options" track-by="id"
Expand Down
5 changes: 3 additions & 2 deletions ...chardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-CheckboxList.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,16 +4,17 @@
@{
var settings = Model.PartFieldDefinition.GetSettings<MultiTextFieldSettings>();
var options = new List<SelectListItem>();

foreach (var option in settings.Options)
{
bool isSelected = Model.Values.Contains(option.Value) ? true : false;

options.Add(new SelectListItem { Text = option.Name, Value = option.Value, Selected = isSelected });
}
var fieldName = Model.PartFieldDefinition.Name;
var i = 0;
}
<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Values)_FieldWrapper">
<label>@Model.PartFieldDefinition.DisplayName()</label>
@foreach (var option in options)
{
Expand Down
34 changes: 16 additions & 18 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField-Picker.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@
@{
var settings = Model.PartFieldDefinition.GetSettings<MultiTextFieldSettings>();
var selectedValues = new List<object>();

foreach (var option in settings.Options)
{
if (Model.Values?.Contains(option.Value) == true)
Expand All @@ -14,8 +14,8 @@
}

var jSelectedValues = JsonConvert.SerializeObject(selectedValues);
var jOptions = JsonConvert.SerializeObject(settings.Options.Select(o => new { value = o.Value, name = o.Name}));
var jOptions = JsonConvert.SerializeObject(settings.Options.Select(o => new { value = o.Value, name = o.Name }));

var partName = Model.PartFieldDefinition.PartDefinition.Name;
var fieldName = Model.PartFieldDefinition.Name;

Expand All @@ -27,24 +27,23 @@
<script asp-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-multitextfieldpicker.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/vue-multiselect-multitextfieldpicker.js" asp-name="multitextfieldpicker" at="Foot" depends-on="vuejs, vue-multiselect"></script>
<style asp-src="~/OrchardCore.ContentFields/Styles/vue-multiselect-multitextfieldpicker.min.css" debug-src="~/OrchardCore.ContentFields/Styles/vue-multiselect-multitextfieldpicker.css" asp-name="multitextfieldpicker" depends-on="vue-multiselect"></style>

<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Values)_FieldWrapper">
<label>@Model.PartFieldDefinition.DisplayName()</label>
<div id="@vueElementId" class="multitextfieldpicker" data-selectedvalues="@jSelectedValues" data-options="@jOptions" data-valueskey="@valuesKey">
<div class="w-xl-50">
<input v-for="v in value" v-bind:name="valuesKey" v-bind:value="v.value" type="hidden" />
<vue-multiselect
v-model="value"
placeholder="@T["Type to search"]"
select-label="@T["Select"]"
deselect-label="@T["Remove"]"
track-by="value"
label="name"
:options="options"
:multiple="true"
:show-labels="false"
:close-on-select="false"
:taggable="true"
tag-position="bottom">
<vue-multiselect v-model="value"
placeholder="@T["Type to search"]"
select-label="@T["Select"]"
deselect-label="@T["Remove"]"
track-by="value"
label="name"
:options="options"
:multiple="true"
:show-labels="false"
:close-on-select="false"
:taggable="true"
tag-position="bottom">
<template slot="noOptions">
@T["No values found"]
</template>
Expand All @@ -55,7 +54,6 @@
<span class="hint">@settings.Hint</span>
}
</div>

</div>

<script depends-on="multitextfieldpicker" at="Foot">
Expand Down
10 changes: 6 additions & 4 deletions src/OrchardCore.Modules/OrchardCore.ContentFields/Views/MultiTextField.Edit.cshtml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,14 @@

options.Add(new SelectListItem { Text = option.Name, Value = option.Value, Selected = isSelected });
}
var fieldName = Model.PartFieldDefinition.Name;
}
<div class="mb-3">
<div class="mb-3 field-wrapper @fieldName-wrapper" id="@Html.IdFor(x => x.Values)_FieldWrapper">
<label asp-for="Values">@Model.PartFieldDefinition.DisplayName()</label>
<div class="row col-md-6 col-lg-4">
<select class="form-select content-preview-select" asp-for="Values" asp-items="options" multiple
style="min-height: 200px"></select>
<div class="row">
<div class="col-md-6 col-lg-4">
<select class="form-select content-preview-select" asp-for="Values" asp-items="options" multiple></select>
</div>
</div>
@if (!String.IsNullOrEmpty(settings.Hint))
{
Expand Down
Loading