KCL-6857 Move configuration UI to new design

DancingGoat/Areas/Admin/Models/MessageModel.cs

@@ -10,7 +10,6 @@ public class MessageModel
     public enum MessageType
     {
         Info,
-        Warning,
         Error
     }
 }

DancingGoat/Areas/Admin/Views/SelfConfig/Index.cshtml

@@ -1,19 +1,18 @@
-@using DancingGoat.Helpers.Extensions
-@model DancingGoat.Areas.Admin.Models.IndexViewModel
+@model DancingGoat.Areas.Admin.Models.IndexViewModel
 
 @{
-    ViewBag.Title = "Sample Site—Configuration";
+    ViewBag.Title = "Sample Site — Configuration";
 }
 
 @inject IOptionsSnapshot<AppConfiguration> Config
 
 <header>
-    <div class="content">
-        <h1>@ViewBag.Title</h1>
-        <p>For your sample app to work, you should have a Kentico Kontent project containing content. Your app should be then configured with its project ID. You can either get it by signing in using your Kentico Kontent credentials or by signing up for a trial. Later, it will be converted to a free plan.</p>
+    <div class="kk-container">
+        <h1 class="headline-large">@ViewBag.Title</h1>
+        <p class="margin-top-xl">For your sample app to work, you should have a Kentico Kontent project containing content. Your app should be then configured with its project ID. You can either get it by signing in using your Kentico Kontent credentials or by signing up for a trial. Later, it will be converted to a free plan.</p>
     </div>
 </header>
-@{ await Html.RenderPartialAsync("~/Areas/Admin/Views/Shared/_MessagesPartial.cshtml");}
+@{ await Html.RenderPartialAsync("~/Areas/Admin/Views/Shared/_MessagesPartial.cshtml"); }
 
 <script type="text/javascript">
     function openKenticoKontent() {
@@ -44,37 +43,42 @@
     }
 </script>
 
-<section>
-    <h2>Get a Project ID</h2>
-    <p>You may wish to either select from existing projects or create a new sample project. The app will be configured with its project ID.</p>
-    <input type="submit" class="button-secondary" onclick="openKenticoKontent()" value="Get Project ID from Kentico Kontent" />
-    @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post, new { id = "set-configuration-from-kc" }))
-    {
-        @Html.HiddenFor(m => m.ProjectGuid, new { id = "project-guid-from-kc" })
-        @Html.HiddenFor(m => m.EndAt, new { id = "end-at-from-kc" })
-        @Html.HiddenFor(m => m.NewlyGeneratedProject, new { id = "newly-generated-project-from-kc" })
-    }
-</section>
-
-<div class="content sections-secondary divided">
-    <section class="section-secondary">
-        @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post))
+<div class="kk-container">
+    <section class="paper margin-top-xl">
+        <h2 class="headline-medium">Get a Project ID</h2>
+        <p class="margin-top-l">You may wish to either select from existing projects or create a new sample project. The app will be configured with its project ID.</p>
+        <button class="button button-primary margin-top-xl" onclick="openKenticoKontent()">Get Project ID from Kentico Kontent</button>
+        @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post, new { id = "set-configuration-from-kc" }))
         {
-            <h2>Set A Project ID Manually</h2>
-            <p>Alternatively, you can configure your app manually by submitting a project ID below.</p>
-            <div class="inline-controls">
-                @Html.ValidatedEditorFor(vm => vm.ProjectGuid)
-                <input type="submit" class="button-secondary" value="Submit" />
-            </div>
-        }
-    </section>
-    <section class="section-secondary">
-        <h2>Use the Shared Project</h2>
-        <p>Alternatively, you may wish to use the shared project (project ID "@(Config.Value.DefaultDeliveryOptions.ProjectId)").</p>
-        <p><strong>Note:</strong> You cannot edit content in the shared project.</p>
-        @using (Html.BeginForm("UseShared", "SelfConfig"))
-        {
-            <input type="submit" class="button-secondary" value="Use the shared project" />
+            @Html.HiddenFor(m => m.ProjectGuid, new { id = "project-guid-from-kc" })
+            @Html.HiddenFor(m => m.EndAt, new { id = "end-at-from-kc" })
+            @Html.HiddenFor(m => m.NewlyGeneratedProject, new { id = "newly-generated-project-from-kc" })
         }
     </section>
 </div>
+
+<div class="kk-container">
+    <div class="row-lg row-lg--align-start">
+        <section class="col paper margin-top-xl">
+            @using (Html.BeginForm("UseSelected", "SelfConfig", FormMethod.Post))
+            {
+                <h2 class="headline-medium">Set A Project ID Manually</h2>
+                <p class="margin-top-l">Alternatively, you can configure your app manually by submitting a project ID below.</p>
+                <div class="project-id-form margin-top-xl">
+                    @Html.EditorFor(vm => vm.ProjectGuid, new { htmlAttributes = new { aria_label = "Project ID", autocomplete = "off", @class = "project-id-form__input", placeholder = "Project ID" } })
+                    @Html.ValidationMessageFor(vm => vm.ProjectGuid)
+                    <button type="submit" class="button button-primary project-id-form__submit-button">Submit</button>
+                </div>
+            }
+        </section>
+        <section class="col paper margin-top-xl">
+            <h2 class="headline-medium">Use the Shared Project</h2>
+            <p class="margin-top-l">Alternatively, you may wish to use the shared project (project ID "@(Config.Value.DefaultDeliveryOptions.ProjectId)").</p>
+            <p class="margin-top-l"><strong>Note:</strong> You cannot edit content in the shared project.</p>
+            @using (Html.BeginForm("UseShared", "SelfConfig"))
+            {
+                <button class="button button-primary margin-top-xl">Use the shared project</button>
+            }
+        </section>
+    </div>
+</div>

DancingGoat/Areas/Admin/Views/SelfConfig/Wait.cshtml

@@ -3,9 +3,8 @@
 }
 
 <header>
-    <div class="content">
-        <h1>Waiting for the sample project to become ready...</h1>
-        <p></p>
+    <div class="container">
+        <h1 class="headline-large">Waiting for the sample project to become ready...</h1>
     </div>
 </header>
 @await Html.PartialAsync("~/Areas/Admin/Views/Shared/_MessagesPartial.cshtml")

DancingGoat/Areas/Admin/Views/Shared/Error.cshtml

@@ -1,8 +1,8 @@
 @model DancingGoat.Areas.Admin.Models.MessageModel
 
 <header class="full-height">
-    <div class="content">
-        <h1>Error: @Html.DisplayFor(vm => vm.Caption)</h1>
-        <p>@Html.DisplayFor(vm => vm.Message)</p>
+    <div class="container">
+        <h1 class="headline-large">Error: @Html.DisplayFor(vm => vm.Caption)</h1>
+        <p class="color-alert-text margin-top-l">@Html.DisplayFor(vm => vm.Message)</p>
     </div>
 </header>

DancingGoat/Areas/Admin/Views/Shared/_Layout.cshtml

@@ -1,22 +1,18 @@
 <!DOCTYPE html>
 
-<html>
+<html lang="en">
 <head>
     <meta name="viewport" content="width=device-width" />
     <title>@ViewBag.Title</title>
     <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,400i,600,700,700i&amp;subset=latin-ext">
     <link rel="stylesheet" href="@Url.Content("~/css/admin.css")" type="text/css" />
     @RenderSection("headers", false)
 </head>
-<body>
-    <div class="logotype-row">
-        <div class="content">
-            <div class="logotype">
-                <a href="/" class="logotype-link">
-                    <img src="~/images/Admin/kk-logo-hor-white-neg-rgb.svg" alt="Kentico Kontent logo" />
-                </a>
-            </div>
-        </div>
+<body class="gradient-desk padding-bottom-xl">
+    <div class="kk-container">
+        <a href="/" class="logo-link">
+            <img class="logo" src="~/images/Admin/kk-logo.svg" alt="Kentico Kontent logo" />
+        </a>
     </div>
     @RenderBody()
     @RenderSection("Scripts", required: false)

DancingGoat/Areas/Admin/Views/Shared/_MessagesPartial.cshtml

@@ -1,43 +1,44 @@
-@{
-    const string imagePathPattern = "~/images/Admin/{0}.svg";
+@using DancingGoat.Areas.Admin.Models
+@{
     var routeDataMessageBody = Context.Request.Query["MessageBody"].FirstOrDefault();
     var routeDataMessageType = Context.Request.Query["MessageType"].FirstOrDefault();
-    DancingGoat.Areas.Admin.Models.MessageModel viewBagMessage = null;
+    MessageModel viewBagMessage = null;
     string imageName = null;
-    string imagePath = null;
 
-    if (!string.IsNullOrEmpty(ViewBag.Message))
+    if (ViewBag.Message != null)
     {
         viewBagMessage = ViewBag.Message;
-        imageName = viewBagMessage.MessageType.ToString().ToLowerInvariant();
-        imagePath = string.Format(imagePathPattern, imageName);
+        imageName = CreateImageNameFromMessageType(viewBagMessage.MessageType);
     }
 
     if (!string.IsNullOrEmpty(routeDataMessageType))
     {
-        imageName = routeDataMessageType.ToString().ToLowerInvariant();
-        imagePath = string.Format(imagePathPattern, imageName);
+        imageName = routeDataMessageType.ToLowerInvariant();
     }
 }
 
-@{
-    void MessageImage(string source, string altText)
+@functions
+{
+    static string CreateImageNameFromMessageType(MessageType messageType)
+        => messageType.ToString().ToLowerInvariant();
+
+    void MessageImage(string imageName)
     {
-        <img src="@source" height="44" width="44" alt="@altText" />
+        <div class="user-message__img user-message__img--@imageName"></div>
     }
 }
 
 @if ((!string.IsNullOrEmpty(ViewBag.ErrorMessage)) || (!string.IsNullOrEmpty(routeDataMessageBody)))
 {
-    <section class="messages">
+    <section class="messages kk-container">
         <h2 class="hidden">Message</h2>
         @{
             if (viewBagMessage != null)
             {
                 <table class="user-message message-@imageName">
                     <tr>
                         <td>
-                            @{ MessageImage(Url.Content(imagePath), string.Empty); }
+                            @{ MessageImage(imageName); }
                         </td>
                         <td>
                             <p>
@@ -53,7 +54,7 @@
                 <table class="user-message message-@imageName">
                     <tr>
                         <td>
-                            @{ MessageImage(Url.Content(imagePath), string.Empty); }
+                            @{ MessageImage(imageName); }
                         </td>
                         <td>
                             <p>
@@ -73,7 +74,7 @@ else
         <table class="user-message message-error">
             <tr>
                 <td>
-                    @{ MessageImage(Url.Content(string.Format(imagePathPattern, "error")), "Error"); }
+                    @{ MessageImage(CreateImageNameFromMessageType(MessageType.Error)); }
                 </td>
                 <td>
                     <p class="message-text"></p>

DancingGoat/DancingGoat.csproj

@@ -36,6 +36,10 @@
     </None>
   </ItemGroup>
 
+  <ItemGroup>
+    <Watch Include="**\*.css" />
+  </ItemGroup>
+
   <Target Name="GenerateModels" BeforeTargets="BeforeBuild;BeforeRebuild">
     <PropertyGroup>
       <PowerShellExe Condition=" '$(PowerShellExe)'=='' ">%WINDIR%\System32\WindowsPowerShell\v1.0\powershell.exe</PowerShellExe>

DancingGoat/Helpers/Extensions/HtmlHelperExtensions.cs

@@ -20,49 +20,5 @@ public static IHtmlContent DateTimeFormattedFor<TModel>(this IHtmlHelper<TModel>
         {
             return htmlHelper.DisplayFor(expression, "DateTime", new DateTimeFormatterParameters { FormatCharacter = format });
         }
-
-        /// <summary>
-        /// Returns an HTML input element with a label and validation fields for each property in the object that is represented by the <see cref="Expression"/> expression.
-        /// </summary>
-        /// <typeparam name="TModel">The type of the model.</typeparam>
-        /// <typeparam name="TValue">The type of the value.</typeparam>
-        /// <param name="html">The HTML helper instance that this method extends.</param>
-        /// <param name="expression">An expression that identifies the object that contains the displayed properties.</param>
-        /// <param name="explanationText">An explanation text describing usage of the rendered field.</param>
-        public static IHtmlContent ValidatedEditorFor<TModel, TValue>(this IHtmlHelper<TModel> html, Expression<Func<TModel, TValue>> expression, string explanationText = "", string id = "")
-        {
-            IHtmlContent label;
-            IHtmlContent editor;
-
-            if (!string.IsNullOrEmpty(id))
-            {
-                label = html.LabelFor(expression, new { @for = id });
-                editor = html.EditorFor(expression, new { id });
-            }
-            else
-            {
-                label = html.LabelFor(expression);
-                editor = html.EditorFor(expression);
-            }
-
-            var explanationTextHtml = "";
-
-            if (!string.IsNullOrEmpty(explanationText))
-            {
-                explanationTextHtml = "<div class=\"explanation-text\">" + explanationText + "</div>";
-            }
-
-            var builder = new HtmlContentBuilder();
-            builder.AppendHtml(@"<div class=""form-group""><div class=""form-group-label"">");
-            builder.AppendHtml(label);
-            builder.AppendHtml(@"</div><div class=""form-group-input"">");
-            builder.AppendHtml(editor);
-            builder.AppendHtml(explanationTextHtml);
-            builder.AppendHtml(@"</div><div class=""message-validation"">");
-            builder.AppendHtml(html.ValidationMessageFor(expression));
-            builder.AppendHtml(@"</div></div>");
-
-            return builder;
-        }
     }
 }