csharp-mvc: create empty sample, new upload style

web/documentserver-example/csharp-mvc/Content/stylesheet.css

@@ -113,13 +113,14 @@ label .checkbox {
 
 .try-editor-list {
     list-style: none;
-    margin: 0;
+    margin: 0 0 16px;
     padding: 0;
 }
 .try-editor-list li {
     float: left;
-    margin: 25px;
-    width: 150px;
+    margin: 0 15px;
+    width: 100px;
+    cursor: pointer;
 }
 .try-editor {
     background-color: transparent;
@@ -143,6 +144,11 @@ label .checkbox {
     background-image: url("images/file_pptx.png");
 }
 
+.create-sample {
+    display: inline-block;
+    margin-left: 75px;
+}
+
 .button, .button:visited, .button:hover, .button:active {
     display: inline-block;
     font-weight: normal;
@@ -185,25 +191,43 @@ label .checkbox {
     border: 1px solid #E9EAEA;
 }
 
+.upload-panel {
+    border-right: 1px solid #D1D1D1;
+    float: left;
+    margin-right: 25px;
+}
+
 .file-upload {
+    background: url("images/file_upload.png") no-repeat center 0 transparent;
     cursor: pointer;
-    margin-bottom: 8px;
-    padding: 0 !important;
+    display: inline-block;
+    font-size: 14px;
+    font-weight: bold;
+    height: 45px;
+    margin: 0 40px 16px;
     overflow: hidden;
+    padding-top: 100px;
     position: relative;
+    text-align: center;
+    width: 100px;
 }
-.file-upload span {
-    line-height: 21px;
-    margin: 2px 12px;
+
+    .file-upload input {
+        cursor: pointer;
+        opacity: 0;
+        position: absolute;
+        right: 0;
+        top: 0;
+        transform: translate(555px, 60px) scale(8);
+    }
+
+.create-panel {
+    float: left;
 }
-.file-upload input {
-    cursor: pointer;
-    font-size: 23px;
-    opacity: 0;
-    position: absolute;
-    right: 0;
-    top: 0;
-    transform: translate(-300px, 0) scale(4);
+
+.upload-panel,
+.create-panel {
+    padding: 10px 0;
 }
 
 #mainProgress {
@@ -370,4 +394,12 @@ label .checkbox {
     -moz-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
     -webkit-box-shadow:0 2px 4px rgba(0, 0, 0, 0.5);
     padding: 0 !important;
+}
+
+.clearFix:after {
+    content: ".";
+    display: block;
+    height: 0;
+    clear: both;
+    visibility: hidden;
 }

web/documentserver-example/csharp-mvc/Controllers/HomeController.cs

@@ -50,9 +50,9 @@ namespace OnlineEditorsExampleMVC.Controllers
             return View("Editor", file);
         }
 
-        public ActionResult Sample(string fileExt)
+        public ActionResult Sample(string fileExt, bool? sample)
         {
-            var fileName = DocManagerHelper.CreateDemo(fileExt);
+            var fileName = DocManagerHelper.CreateDemo(fileExt, sample ?? false);
             Response.Redirect(Url.Action("Editor", "Home", new { fileName = fileName }));
             return null;
         }

web/documentserver-example/csharp-mvc/Helpers/DocManagerHelper.cs

@@ -106,9 +106,9 @@ namespace OnlineEditorsExampleMVC.Helpers
             return storedFiles;
         }
 
-        public static string CreateDemo(string fileExt)
+        public static string CreateDemo(string fileExt, bool withContent)
         {
-            var demoName = "sample." + fileExt;
+            var demoName = (withContent ? "sample." : "new.") + fileExt;
 
             var fileName = GetCorrectName(demoName);
 

web/documentserver-example/csharp-mvc/OnlineEditorsExampleMVC.csproj

@@ -152,6 +152,7 @@
     <Content Include="Content\images\done.png" />
     <Content Include="Content\images\file_docx.png" />
     <Content Include="Content\images\file_pptx.png" />
+    <Content Include="Content\images\file_upload.png" />
     <Content Include="Content\images\file_xlsx.png" />
     <Content Include="Content\images\loader16.gif" />
     <Content Include="Content\images\logo.png" />

web/documentserver-example/csharp-mvc/Scripts/jscript.js

@@ -91,11 +91,6 @@ if (typeof jQuery != "undefined") {
             return;
         }
 
-        if (jq("#checkOriginalFormat").is(":checked")) {
-            loadScripts();
-            return;
-        }
-
         timer = setTimeout(function () {
             var requestAddress = UrlConverter
                 + "&filename=" + encodeURIComponent(jq("#hiddenFileName").val());
@@ -194,6 +189,18 @@ if (typeof jQuery != "undefined") {
         jq.unblockUI();
     });
 
+    jq(document).on("click", ".try-editor", function (e) {
+        var url = jq(".try-editor-list")[0].attributes["data-link"].value;
+        url += "?fileExt=" + e.target.attributes["data-type"].value;
+        if (jq("#createSample").is(":checked")) {
+            url += "&sample=true";
+        }
+        var w = window.open(url, "_blank");
+        w.onload = function () {
+            window.location.reload();
+        }
+    });
+
     jq.dropdownToggle({
         switcherSelector: ".question",
         dropdownID: "hint"

web/documentserver-example/csharp-mvc/Views/Home/Index.aspx

@@ -53,24 +53,32 @@
         <br />
         <span class="portal-descr">Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors. You may upload your own documents for testing using the "Choose file" button and selecting the necessary files on your PC.</span>
 
-        <div class="file-upload button gray">
-            <span>Choose file</span>
-            <input type="file" id="fileupload" name="files[]" data-url="<%= Url.Content("~/webeditor.ashx?type=upload") %>" />
+        <div class="help-block">
+            <span class="try-descr">Upload your file or create new file</span>
+            <br />
+            <br />
+            <div class="clearFix">
+                <div class="upload-panel clearFix">
+                    <a class="file-upload">
+                        Upload
+                        <br />
+                        File
+                        <input type="file" id="fileupload" name="files[]" data-url="<%= Url.Content("~/webeditor.ashx?type=upload") %>" />
+                    </a>
+                </div>
+                <div class="create-panel">
+                    <ul class="try-editor-list clearFix" data-link="<%= Url.Action("sample", "Home") %>">
+                        <li><a class="try-editor document" data-type="docx">Create<br />Document</a></li>
+                        <li><a class="try-editor spreadsheet" data-type="xlsx">Create<br />Spreadsheet</a></li>
+                        <li><a class="try-editor presentation" data-type="pptx">Create<br />Presentation</a></li>
+                    </ul>
+                    <label class="create-sample">
+                        <input id="createSample" class="checkbox" type="checkbox" />
+                        Create a file filled with sample content
+                    </label>
+                </div>
+            </div>
         </div>
-        <label class="save-original">
-            <input type="checkbox" id="checkOriginalFormat" class="checkbox" />Save document in original format
-        </label>
-        <span class="question"></span>
-        <br />
-        <br />
-        <br />
-        <span class="try-descr">You are also enabled to view and edit documents pre-uploaded to the portal.</span>
-
-        <ul class="try-editor-list">
-            <li><a class="try-editor document" href="<%= Url.Action("sample", "Home", new { fileExt = "docx" }) %>" target="_blank">Create<br />Sample Document</a></li>
-            <li><a class="try-editor spreadsheet" href="<%= Url.Action("sample", "Home", new { fileExt = "xlsx" }) %>" target="_blank">Create<br />Sample Spreadsheet</a></li>
-            <li><a class="try-editor presentation" href="<%= Url.Action("sample", "Home", new { fileExt = "pptx" }) %>" target="_blank">Create<br />Sample Presentation</a></li>
-        </ul>
 
         <% var storedFiles = DocManagerHelper.GetStoredFiles();
             if (storedFiles.Any())