Add wrapper to app content fields (#12347)

OrchardCMS · Sep 15, 2022 · 0db8fd5 · 0db8fd5
1 parent 4386194
commit 0db8fd5
Show file tree

Hide file tree

Showing 41 changed files with 439 additions and 407 deletions.
diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField-Switch.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField-Switch.Edit.cshtml
@@ -1,12 +1,14 @@
 @model OrchardCore.ContentFields.ViewModels.EditBooleanFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     var settings = Model.PartFieldDefinition.GetSettings<BooleanFieldSettings>();
+    var fieldName = Model.PartFieldDefinition.Name;
 }
-<div class="mb-3">
+
+<div class="mb-3 field-wrapper [email protected]()" 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>
+        <label asp-for="Value" class="form-check-label">@(String.IsNullOrEmpty(settings.Label) ? Model.PartFieldDefinition.DisplayName() : settings.Label)</label>
         @if (!String.IsNullOrEmpty(settings.Hint))
         {
             <span class="hint dashed">@settings.Hint</span>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/BooleanField.Edit.cshtml
@@ -1,10 +1,12 @@
 @model OrchardCore.ContentFields.ViewModels.EditBooleanFieldViewModel
-@{
+@using OrchardCore.Mvc.Utilities
 
+@{
     var settings = Model.PartFieldDefinition.GetSettings<BooleanFieldSettings>();
+    var fieldName = Model.PartFieldDefinition.Name;
 }
 
-<div class="mb-3">
+<div class="mb-3 field-wrapper [email protected]()" 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">

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/ContentPickerField.Edit.cshtml
@@ -1,7 +1,7 @@
 @model OrchardCore.ContentFields.ViewModels.EditContentPickerFieldViewModel
-@using Newtonsoft.Json;
-@using Newtonsoft.Json.Serialization;
-
+@using Newtonsoft.Json
+@using Newtonsoft.Json.Serialization
+@using OrchardCore.Mvc.Utilities
 @{
     var settings = Model.PartFieldDefinition.GetSettings<ContentPickerFieldSettings>();
     var selectedItems = JsonConvert.SerializeObject(Model.SelectedItems, new JsonSerializerSettings { ContractResolver = new CamelCasePropertyNamesContractResolver() });
@@ -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 [email protected]()" id="@Html.IdFor(x => x.ContentItemIds)_FieldWrapper">
+    <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"
@@ -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"

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateField.Edit.cshtml
@@ -1,10 +1,12 @@
 @model OrchardCore.ContentFields.ViewModels.EditDateFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     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 [email protected]()" 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>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/DateTimeField.Edit.cshtml
@@ -1,10 +1,11 @@
 @model OrchardCore.ContentFields.ViewModels.EditDateTimeFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     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 [email protected]()" 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>

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Monaco.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Monaco.Edit.cshtml
@@ -1,14 +1,14 @@
 @model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     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 [email protected]()" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+    @await DisplayAsync(await New.ShortcodeModal())
     <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>
@@ -20,8 +20,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) {
@@ -46,7 +46,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');
@@ -55,8 +55,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;
@@ -76,7 +76,7 @@
 
             editor.getModel().setValue(textArea.value);
 
-            window.addEventListener("submit", function () {
+            window.addEventListener("submit", function() {
                 textArea.value = editor.getValue();
             });
         });

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Multiline.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Multiline.Edit.cshtml
@@ -1,13 +1,13 @@
 @model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     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 [email protected]()" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+    @await DisplayAsync(await New.ShortcodeModal())
     <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))

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Trumbowyg.Edit.cshtml
@@ -1,11 +1,12 @@
 @model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel
 @using OrchardCore.ContentManagement.Metadata.Models
-@using OrchardCore.ContentFields.Settings;
-
+@using OrchardCore.ContentFields.Settings
+@using OrchardCore.Mvc.Utilities
 @{
     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>
@@ -20,9 +21,8 @@ else
 <script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
 }
 
-@await DisplayAsync(await New.ShortcodeModal())
-
-<div class="mb-3">
+<div class="mb-3 field-wrapper [email protected]()" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+    @await DisplayAsync(await New.ShortcodeModal())
     <label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
     @if (culture.IsRightToLeft())
     {

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Wysiwyg.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField-Wysiwyg.Edit.cshtml
@@ -1,19 +1,20 @@
 @model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel
 @using OrchardCore.ContentManagement.Metadata.Models
-@using OrchardCore.ContentFields.Settings;
-
+@using OrchardCore.ContentFields.Settings
+@using OrchardCore.Mvc.Utilities
 @{
     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>
 <script asp-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.min.js" debug-src="~/OrchardCore.ContentFields/Scripts/trumbowyg.media.tag.js" depends-on="trumbowyg" at="Foot"></script>
 <script asp-name="trumbowyg-shortcodes" at="Foot"></script>
 
-@await DisplayAsync(await New.ShortcodeModal())
 
-<div class="mb-3">
+<div class="mb-3 field-wrapper [email protected]()" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+    @await DisplayAsync(await New.ShortcodeModal())
     <label asp-for="Html">@Model.PartFieldDefinition.DisplayName()</label>
     @if (culture.IsRightToLeft())
     {

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/HtmlField.Edit.cshtml
@@ -1,13 +1,14 @@
 @model OrchardCore.ContentFields.ViewModels.EditHtmlFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     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 field-wrapper [email protected]()" id="@Html.IdFor(x => x.Html)_FieldWrapper">
+    @await DisplayAsync(await New.ShortcodeModal())
 
-<div class="mb-3">
     <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))
@@ -26,9 +27,9 @@
 <script asp-name="codemirror-mode-javascript" at="Foot"></script>
 <script asp-name="codemirror-mode-xml" at="Foot"></script>
 <script at="Foot">
-    $(function () {
+    $(function() {
         var optionsTextArea = document.getElementById('@Html.IdFor(x => x.Html)');
-        @* When the field is rendered by a flow part only the elements scripts are rendered, so the html element will not exist. *@
+    @* When the field is rendered by a flow part only the elements scripts are rendered, so the html element will not exist. *@
         if (optionsTextArea) {
             var editor = CodeMirror.fromTextArea(optionsTextArea, {
                 autoCloseTags: true,
@@ -39,10 +40,10 @@
                 styleActiveLine: true,
                 mode: { name: "htmlmixed" }
             });
-            
+
             initializeCodeMirrorShortcodeWrapper(editor);
 
-            editor.on('change', function(cmEditor){
+            editor.on('change', function(cmEditor) {
                 cmEditor.save();
                 $(document).trigger('contentpreview:render');
             });

diff --git a/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml b/src/OrchardCore.Modules/OrchardCore.ContentFields/Views/LinkField.Edit.cshtml
@@ -1,40 +1,45 @@
 @model OrchardCore.ContentFields.ViewModels.EditLinkFieldViewModel
-
+@using OrchardCore.Mvc.Utilities
 @{
     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 [email protected]()" 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>
             }

diff --git a/...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml b/...ore.Modules/OrchardCore.ContentFields/Views/LocalizationSetContentPickerField.Edit.cshtml
@@ -1,7 +1,8 @@
 @model OrchardCore.ContentFields.ViewModels.EditLocalizationSetContentPickerFieldViewModel
-@using Newtonsoft.Json;
-@using Newtonsoft.Json.Serialization;
-@using OrchardCore.Environment.Shell;
+@using Newtonsoft.Json
+@using Newtonsoft.Json.Serialization
+@using OrchardCore.Environment.Shell
+@using OrchardCore.Mvc.Utilities
 
 @inject ShellSettings ShellSettings
 
@@ -20,10 +21,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 field[email protected]()" 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"
@@ -36,9 +38,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"