CmsKit - Implement Style & Script to UI

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Create.cshtml

@@ -18,18 +18,18 @@
 }
 
 @section scripts {
-    <abp-script-bundle>
-        <abp-script type="typeof(TuiEditorScriptContributor)"/>
-        <abp-script type="typeof(UppyScriptContributor)"/>
-        <abp-script type="typeof(SlugifyScriptContributor)"/>
-        <abp-script src="/Pages/CmsKit/Pages/create.js" />
-    </abp-script-bundle>
+<abp-script-bundle>
+    <abp-script type="typeof(TuiEditorScriptContributor)" />
+    <abp-script type="typeof(UppyScriptContributor)" />
+    <abp-script type="typeof(SlugifyScriptContributor)" />
+    <abp-script src="/Pages/CmsKit/Pages/create.js" />
+</abp-script-bundle>
 }
 
 @section styles {
-    <abp-style-bundle>
-        <abp-style type="typeof(TuiEditorStyleContributor)"/>
-    </abp-style-bundle>
+<abp-style-bundle>
+    <abp-style type="typeof(TuiEditorStyleContributor)" />
+</abp-style-bundle>
 }
 
 <abp-card>
@@ -37,16 +37,30 @@
     <abp-card-body>
         <form asp-page="/CmsKit/Pages/Create" id="form-page-create">
             <abp-input asp-for="@Model.ViewModel.Title" />
-            
-            <abp-input asp-for="ViewModel.Slug" title="@L["PageSlugInformation"]" data-toggle="tooltip"/>
-            
+
+            <abp-input asp-for="ViewModel.Slug" title="@L["PageSlugInformation"]" data-toggle="tooltip" />
+
             <abp-input asp-for="@Model.ViewModel.Content" />
-            
-            <div class="content-editor"
-                 id="ContentEditor"
-                 data-input-id="@Html.IdFor(x => x.ViewModel.Content)"
-                 data-language="@(CultureInfo.CurrentUICulture.TwoLetterISOLanguageName)">
-            </div>
+
+            <abp-tabs tab-style="Tab">
+
+                <abp-tab title="@L["Content"]">
+                    <div class="content-editor"
+                         id="ContentEditor"
+                         data-input-id="@Html.IdFor(x => x.ViewModel.Content)"
+                         data-language="@(CultureInfo.CurrentUICulture.TwoLetterISOLanguageName)">
+                    </div>
+                </abp-tab>
+
+                <abp-tab title="@L["Script"]">
+                    <abp-input asp-for="ViewModel.Script" suppress-label="true" />
+                </abp-tab>
+
+                <abp-tab title="@L["Style"]">
+                    <abp-input asp-for="ViewModel.Style"  suppress-label="true"/>
+                </abp-tab>
+
+            </abp-tabs>
         </form>
     </abp-card-body>
     <abp-card-footer>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Create.cshtml.cs

@@ -2,6 +2,7 @@
 using Microsoft.AspNetCore.Mvc;
 using System.ComponentModel.DataAnnotations;
 using System.Threading.Tasks;
+using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Form;
 using Volo.Abp.Validation;
 using Volo.CmsKit.Admin.Pages;
 using Volo.CmsKit.Pages;
@@ -39,10 +40,18 @@ namespace Volo.CmsKit.Admin.Web.Pages.CmsKit.Pages
             [Required]
             [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxSlugLength))]
             public string Slug { get; set; }
-            
+
             [HiddenInput]
             [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxSlugLength))]
             public string Content { get; set; }
+
+            [TextArea(Rows = 6)]
+            [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxSlugLength))]
+            public string Script { get; set; }
+
+            [TextArea(Rows = 6)]
+            [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxSlugLength))]
+            public string Style { get; set; }
         }
     }
 }

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml

@@ -19,37 +19,53 @@
 
 
 @section scripts {
-    <abp-script-bundle>
-        <abp-script type="typeof(TuiEditorScriptContributor)"/>
-        <abp-script type="typeof(UppyScriptContributor)"/>
-        <abp-script type="typeof(SlugifyScriptContributor)"/>
-        <abp-script src="/Pages/CmsKit/Pages/update.js" />
-    </abp-script-bundle>
+<abp-script-bundle>
+    <abp-script type="typeof(TuiEditorScriptContributor)" />
+    <abp-script type="typeof(UppyScriptContributor)" />
+    <abp-script type="typeof(SlugifyScriptContributor)" />
+    <abp-script src="/Pages/CmsKit/Pages/update.js" />
+</abp-script-bundle>
 }
 
 @section styles {
-    <abp-style-bundle>
-        <abp-style type="typeof(TuiEditorStyleContributor)"/>
-    </abp-style-bundle>
+<abp-style-bundle>
+    <abp-style type="typeof(TuiEditorStyleContributor)" />
+</abp-style-bundle>
 }
 
 <abp-card>
     <abp-card-header title="@L["Update"].Value"></abp-card-header>
     <abp-card-body>
         <form asp-page="/CmsKit/Pages/Update" id="form-page-update">
-            <abp-input asp-for="@Model.Id"/>
-            
-            <abp-input asp-for="@Model.ViewModel.Title"/>
+            <abp-input asp-for="@Model.Id" />
 
-            <abp-input asp-for="ViewModel.Slug" title="@L["PageSlugInformation"]" data-toggle="tooltip"/>
+            <abp-input asp-for="@Model.ViewModel.Title" />
 
-            <abp-input asp-for="@Model.ViewModel.Content"/>
+            <abp-input asp-for="ViewModel.Slug" title="@L["PageSlugInformation"]" data-toggle="tooltip" />
+
+            <abp-input asp-for="@Model.ViewModel.Content" />
+
+
+            <abp-tabs tab-style="Tab">
+
+                <abp-tab title="@L["Content"]">
+                    <div class="content-editor"
+                         id="ContentEditor"
+                         data-input-id="@Html.IdFor(x => x.ViewModel.Content)"
+                         data-language="@(CultureInfo.CurrentUICulture.TwoLetterISOLanguageName)">
+                    </div>
+                </abp-tab>
+
+                <abp-tab title="@L["Script"]">
+                    <abp-input asp-for="ViewModel.Script" suppress-label="true" />
+                </abp-tab>
+
+                <abp-tab title="@L["Style"]">
+                    <abp-input asp-for="ViewModel.Style" suppress-label="true"/>
+                </abp-tab>
+
+            </abp-tabs>
 
-            <div class="content-editor"
-                 id="ContentEditor"
-                 data-input-id="@Html.IdFor(x => x.ViewModel.Content)"
-                 data-language="@(CultureInfo.CurrentUICulture.TwoLetterISOLanguageName)">
-            </div>
         </form>
     </abp-card-body>
     <abp-card-footer>

modules/cms-kit/src/Volo.CmsKit.Admin.Web/Pages/CmsKit/Pages/Update.cshtml.cs

@@ -57,6 +57,14 @@ namespace Volo.CmsKit.Admin.Web.Pages.CmsKit.Pages
             [HiddenInput]
             [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxSlugLength))]
             public string Content { get; set; }
+            
+            [TextArea(Rows = 6)]
+            [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxScriptLength))]
+            public string Script { get; set; }
+
+            [TextArea(Rows = 6)]
+            [DynamicMaxLength(typeof(PageConsts), nameof(PageConsts.MaxStyleLength))]
+            public string Style { get; set; }
         }
     }
 }

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/en.json

@@ -27,6 +27,7 @@
     "CommentAuthorizationExceptionMessage": "Those comments are not allowed for public display.",
     "CommentDeletionConfirmationMessage": "This comment and all replies will be deleted!",
     "Comments": "Comments",
+    "Content": "Content",
     "ContentDeletionConfirmationMessage": "Are you sure to delete this content?",
     "Contents": "Contents",
     "CoverImage": "Cover Image",
@@ -93,6 +94,7 @@
     "ReplyTo": "Reply to",
     "SamplePageMessage": "A sample page for the Pro module",
     "SaveChanges": "Save Changes",
+    "Script": "Script",
     "SelectAll": "Select All",
     "Send": "Send",
     "SendMessage": "Send Message",
@@ -102,6 +104,7 @@
     "SourceUrl": "Source Url",
     "Star": "Star",
     "StartDate": "Start Date",
+    "Style": "Style",
     "Subject": "Subject",
     "SubjectPlaceholder": "Please type a subject",
     "Submit": "Submit",

modules/cms-kit/src/Volo.CmsKit.Domain.Shared/Volo/CmsKit/Localization/Resources/tr.json

@@ -9,6 +9,9 @@
     "Blogs": "Bloglar",
     "ChoosePreference": "Tercih seçiniz...",
     "Cms": "Cms",
+    "Content": "İçerik",
+    "Script": "Script Kodları",
+    "Style": "Stil Kodları",
     "CmsKit.Comments": "Yorumlar",
     "CmsKit.Ratings": "Puanlama",
     "CmsKit.Reactions": "Tepkiler",

modules/cms-kit/src/Volo.CmsKit.Public.Web/Pages/Public/CmsKit/Pages/Index.cshtml

@@ -7,7 +7,17 @@
 
 @section styles{
     <abp-style src="/Pages/Public/CmsKit/Pages/index.css" />
+    <style>
+        @Html.Raw(Model.Page.Style)
+    </style>
 }
+
+@section scripts{
+    <script>
+        @Html.Raw(Model.Page.Script)
+    </script>
+}
+
 @await Component.InvokeAsync(typeof(DefaultPageViewComponent),
     new
     {