Merge pull request #10 from SenthilarasuBalu/EJ2CORE-995-WebmailShowCase

feature(EJ2CORE-995): Rendered Appbar, SideBar, Avatar, Splitter, Mention components.

Author: syncsiva

Helpers/MvcLaunchPageExtension.cs

@@ -7,7 +7,6 @@
 using Microsoft.AspNetCore.Hosting;
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;
-//using Microsoft.AspNetCore.Http.Internal;
 
 namespace EJ2CoreSampleBrowser.Helpers
 {

Helpers/ProductXmlDataEngine.cs

@@ -6,7 +6,6 @@
 using System.IO;
 using Manoli.Utils.CSharpFormat;
 using System.Net;
-//using Microsoft.Extensions.PlatformAbstractions;
 using Microsoft.AspNetCore.Hosting.Internal;
 using Microsoft.AspNetCore.Http;
 using Microsoft.AspNetCore.Hosting;

Helpers/SampleBrowserHelper.cs

@@ -5,7 +5,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Html;
 using Microsoft.AspNetCore.Http;
-//using Microsoft.AspNetCore.Http.Internal;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.AspNetCore.Razor.TagHelpers;
 using Microsoft.AspNetCore.Mvc.ViewFeatures;

Helpers/SourceTabActionResult.cs

@@ -5,7 +5,6 @@
 using Microsoft.AspNetCore.Mvc;
 using Microsoft.AspNetCore.Html;
 using Microsoft.AspNetCore.Http;
-//using Microsoft.Extensions.PlatformAbstractions;
 using Microsoft.AspNetCore.Hosting;
 using EJ2CoreSampleBrowser.Helpers.BrowserClasses;
 

Nuget.Config

@@ -3,7 +3,7 @@
   <packageSources>
     <clear />
     <add key="NuGet.org" value="https://api.nuget.org/v3/index.json" />
-    <add key="ej2nuget" value="http://nexus.syncfusion.com/repository/ej2-nuget-production/" />
+    <add key="ej2nuget" value="https://nexus.syncfusion.com/repository/ej2-nuget-production/" />
   </packageSources>
 
   <packageRestore>

Outlook_Core.csproj

@@ -1,7 +1,7 @@
 <Project Sdk="Microsoft.NET.Sdk.Web">
 
   <PropertyGroup>
-    <TargetFramework>net6.0</TargetFramework>
+    <TargetFramework>net7.0</TargetFramework>
     <Nullable>enable</Nullable>
     <ImplicitUsings>enable</ImplicitUsings>
   </PropertyGroup>

Views/Home/Home.cshtml

@@ -17,7 +17,8 @@
 }
 
 <div class='row content'>
-    <div class='sidebar' style='height:100%' role='complementary'>
+    <ejs-sidebar id="sidebar" enableGestures="false" width="280px" target=".content-wrapper" showBackdrop="false" type="Push" style='height: 100%' role='complementary'>
+        <e-content-template>
         <div style='background-color:#fff; width:100%;height:100%'>
             <div class="search-div">
                 <div class="search-device-section">
@@ -45,8 +46,10 @@
                 </div>
             </aside>
         </div>
-    </div>
-    <div class="headerContent" style="z-index: 112; height: 100%; background-color: #f4f4f4; width: 330px;right:0; position: absolute">
+        </e-content-template>
+    </ejs-sidebar>
+    <ejs-sidebar id="headerSidebar" enableGestures="false" position="Right" width="330px" target=".content-wrapper" type="Push" style="z-index: 112; height: 100%; background-color: #f4f4f4; width: 330px;right:0; position: absolute">
+        <e-content-template>
         <div style="right:20px;position: absolute; top: 35px">
             <ejs-button id="btnCloseButton"></ejs-button>
         </div>
@@ -130,7 +133,8 @@
                 </a>
             </div>
         </div>
-    </div>
+        </e-content-template>
+    </ejs-sidebar>
     <div class='content-wrapper' role='main'>
         <div class='content' style='height:100%'>
             <div class="e-roottools" style='background-color:#fff; width:100%;color:white'>
@@ -165,8 +169,9 @@
                     </e-toolbar-items>
                 </ejs-toolbar>
             </div>
-            <div class='maincontent_pane' style='background-color:#fff; width:100%;height:calc(100% - 40px);color:white'>
-                <div class='message-pane customScrollBar' style='overflow: auto'>
+            <div class='maincontent_pane' style='background-color:#f4f9fd; width:100%;height:100%'>
+                <div id="splitter"></div>
+                <div id="list-pane-div" class='message-pane customScrollBar' style='overflow: auto'>
                     <div class="filter-section">
                         <div style='float: left; margin-top: 5px;'>
                             <span id="spanFilterText" style='font-size: 22px;color:#333333'>Inbox</span>

Views/Home/Index.cshtml

@@ -3,8 +3,8 @@
     ViewData["Title"] = "Index";
 }
 <div class='outlook-container'>
-    <div class='header navbar'>
-        <div class='container-fluid' style="font-size: 0; white-space: nowrap; line-height: normal">
+    <ejs-appbar colorMode="Dark" id="appbar" style="font-size: 0; white-space: nowrap; line-height: normal">
+        <e-content-template>
             <div style="display: table-cell">
                 <div class='home-btn'>
                     <span class='ej-icon-Bento' style='font-size: 18px;'></span>
@@ -31,15 +31,15 @@
                 </div>
             </div>
             <div id="profile-div" class="header-right-pane">
-                <div style="right: 0px;position: absolute;top: 3px;pointer-events: none;margin-right: 5px;">
-                    <div class='logo logo-style1 profile-pic'></div>
-                </div>
-                <div style="margin-right: 44px; pointer-events: none;">
+                <div style="pointer-events: none;">
                     <ejs-button id="btnLoginName" cssClass="btn-profile"></ejs-button>
                 </div>
+                <div style="margin-right: 5px; pointer-events: none;">
+                    <span class="e-avatar e-avatar-large e-avatar-circle" style="background-image: url('/content/images/1.png');height: 40px; width: 40px;"></span>
+                </div>
             </div>
-        </div>
-    </div>
+        </e-content-template>
+    </ejs-appbar>
     <div id="content-area" style="height: 100%">
     </div>
 </div>

Views/Shared/_Layout.cshtml

@@ -11,7 +11,7 @@
 
     <link rel="shortcut icon" href="~/favicon.ico" />
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
-    <link href="~/content/styles.css" rel="stylesheet" />
+    <link href="~/content/fabric.css" rel="stylesheet" />
     <link href="~/content/Outlook Icons/style.css" rel="stylesheet" />
     <link href="~/content/css/outlook.css" rel="stylesheet" />
 	<script type="text/javascript">

wwwroot/content/css/outlook.css

@@ -29,23 +29,6 @@ html, body {
 
 /* Top Header Customization */
 
-.header {
-    position: relative;
-    display: block;
-    z-index: 11;
-    background: #222;
-}
-
-    .header.navbar {
-        border-width: 0;
-        border-radius: 0;
-        margin-bottom: 0;
-    }
-
-    .header.navbar.head-pane-hide .header-right-pane {
-        display: none;
-    }
-
     .header-right-pane {
         display: table-cell; 
         text-align: right; 
@@ -105,22 +88,23 @@ html, body {
     left: -280px;
 }
 
-.sidebar {
+#sidebar {
     position: absolute;
-    top: 50px;
     bottom: 0;
     z-index: 10006;
     width: 280px;
     left: 0px;
     border-right: 1px solid #e5e3e3;
+    overflow-y: hidden;
 }
 
 .content-wrapper {
     margin: 0;
-    left: 280px;
+    left: 0px;
     height: 100%;
-    position:absolute;
-    width:calc(100% - 280px);
+    position: absolute;
+    width: 100%;
+    overflow: hidden;
 }
     .content-wrapper > .content {
         z-index: 7;
@@ -149,14 +133,18 @@ html, body {
 }
 
 .reading-pane {
-    width:calc(100% - 374px);
+    width: 100%;
     background-color:#fff;
     height:calc(100% - 40px);
-    left:374px; 
+    left: 0px;
     position:absolute;
     overflow: auto;
 }
 
+#list-pane-div {
+    width: 100%;
+}
+
 .reading-pane.new-mail {
     overflow: hidden;
 }
@@ -981,11 +969,6 @@ html, body {
     height: 100%;
 }
 
-.e-dlg-overlay {
-    background-color: white;
-    opacity: 0.65;
-}
-
 .dlg-content-style {
     padding: 15px;
     background-color: #f4f4f4;
@@ -1165,22 +1148,6 @@ html, body {
     z-index: 100001;
 }
 
-.overlay-element {
-    width: 100%;
-    height: calc(100% + 50px);
-    position: absolute;
-    left: 0px; right: 0px;
-    top: 0px; bottom: 0px;
-    background-color: rgb(51,51,51);
-    opacity: 0.4;
-    z-index: 10005;
-    display: none;
-}
-
-.overlay-element.show1 {
-    display: block;
-}
-
 .popup-subjectstyle {
     width:250px;
 }
@@ -1413,7 +1380,7 @@ html, body {
 
 @media screen and (min-width:1200px) {
     .row.content.show-header-content .content-wrapper {
-        width:calc(100% - 610px);
+        width: 100%;
     }
 }
 
@@ -1456,8 +1423,10 @@ html, body {
     #toolbar_mobile {
         display: block;
     }
-    .header.navbar {
-        display: none;
+    /* To Animate Appbar  */
+    #appbar {
+        animation: hideAppBar 0.5s ease-out;
+        height: 0px;
     }
     .outlook-container {
         height: 100%;
@@ -1503,6 +1472,14 @@ html, body {
     }
 
 }
+@keyframes hideAppBar {
+    from {
+        height: 48px;
+    }
+    to {
+        height: 0px;
+    }
+}
 
 @media screen and (max-width:605px) {
     .row.content.show-message-pane #toolbar_mobile .e-toolbar-item.tb-item-back {
@@ -1684,4 +1661,45 @@ html, body {
 }
 #rp-to {
     font-size: 12px;
+}
+/* Overriding appbar styles to achieve exact appbar alignment*/
+#appbar {
+    padding: 0%;
+}
+#profile-div {
+    display: flex;
+}
+.header-right-pane {
+    height: 50px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+/* Overriding the default positon to achieve exact alignment */
+#reading-pane-div {
+    position: relative;
+}
+#list-pane-div {
+    position: relative;
+}
+.msg-top-margin {
+    top: 40px;
+}
+/* Overriding splitter styles to remove resize handler Icon  */
+.e-splitter .e-split-bar.e-split-bar-horizontal .e-resize-handler::before {
+    display: none;
+}
+/* Overriding splitter styles to make splitBar transparent  */
+#splitter.e-splitter .e-split-bar.e-split-bar-horizontal,
+#splitter.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-hover,
+.e-splitter .e-split-bar.e-split-bar-horizontal.e-split-bar-active {
+    background-color: transparent;
+}
+/* Styles for the of Right-SideBar Content */
+#headerSidebar {
+    background-color: #f4f4f4;
+}
+#headerSidebar .text-content {
+    font-size: 28px;
+    font-family: "Segoe UI Light","Segoe UI",Segoe,Tahoma,Helvetica,Arial,Sans-Serif;
 }