csharp: create empty sample, new upload style

web/documentserver-example/csharp/App_Themes/stylesheet.css

@@ -112,14 +112,17 @@ 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;
-}
+
+    .try-editor-list li {
+        float: left;
+        margin: 0 15px;
+        width: 100px;
+        cursor: pointer;
+    }
+
 .try-editor {
     background-color: transparent;
     background-position: center 0;
@@ -142,6 +145,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;
@@ -184,25 +192,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 {

web/documentserver-example/csharp/Default.aspx

@@ -48,23 +48,33 @@
             <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="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="webeditor.ashx?type=upload" />
+                        </a>
+                    </div>
+                    <div class="create-panel">
+                        <ul class="try-editor-list clearFix">
+                            <li><a class="try-editor document" data-type="document">Create<br />Document</a></li>
+                            <li><a class="try-editor spreadsheet" data-type="spreadsheet">Create<br />Spreadsheet</a></li>
+                            <li><a class="try-editor presentation" data-type="presentation">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="doceditor.aspx?type=document" target="_blank">Create<br />Sample Document</a></li>
-                <li><a class="try-editor spreadsheet" href="doceditor.aspx?type=spreadsheet" target="_blank">Create<br />Sample Spreadsheet</a></li>
-                <li><a class="try-editor presentation" href="doceditor.aspx?type=presentation" target="_blank">Create<br />Sample Presentation</a></li>
-            </ul>
+
 
             <% var storedFiles = GetStoredFiles();
                if (storedFiles.Any())

web/documentserver-example/csharp/DocEditor.aspx.cs

@@ -92,7 +92,7 @@ namespace OnlineEditorsExample
             var type = Request["type"];
             if (!string.IsNullOrEmpty(type))
             {
-                Try(type);
+                Try(type, Request["sample"]);
                 Response.Redirect("doceditor.aspx?fileID=" + HttpUtility.UrlEncode(FileName));
             }
 
@@ -172,7 +172,7 @@ namespace OnlineEditorsExample
             DocConfig = new JavaScriptSerializer().Serialize(config);
         }
 
-        private static void Try(string type)
+        private static void Try(string type, string sample)
         {
             string ext;
             switch (type)
@@ -189,7 +189,7 @@ namespace OnlineEditorsExample
                 default:
                     return;
             }
-            var demoName = "demo" + ext;
+            var demoName = (string.IsNullOrEmpty(sample) ? "new" : "demo") + ext;
             FileName = _Default.GetCorrectName(demoName);
 
             File.Copy(HttpRuntime.AppDomainAppPath + "app_data/" + demoName, _Default.StoragePath(FileName, null));

web/documentserver-example/csharp/OnlineEditorsExample.csproj

@@ -54,6 +54,7 @@
   <ItemGroup>
     <Content Include="App_Themes\images\file_docx.png" />
     <Content Include="App_Themes\images\file_pptx.png" />
+    <Content Include="App_Themes\images\file_upload.png" />
     <Content Include="App_Themes\images\file_xlsx.png" />
     <Content Include="App_Themes\images\icon_docx.png" />
     <Content Include="App_Themes\images\icon_pptx.png" />
@@ -117,6 +118,11 @@
     <Content Include="App_Data\demo.pptx" />
     <Content Include="App_Data\demo.xlsx" />
   </ItemGroup>
+  <ItemGroup>
+    <Content Include="App_Data\new.docx" />
+    <Content Include="App_Data\new.pptx" />
+    <Content Include="App_Data\new.xlsx" />
+  </ItemGroup>
   <PropertyGroup>
     <VisualStudioVersion Condition="'$(VisualStudioVersion)' == ''">10.0</VisualStudioVersion>
     <VSToolsPath Condition="'$(VSToolsPath)' == ''">$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)</VSToolsPath>

web/documentserver-example/csharp/script/jscript.js

@@ -91,11 +91,6 @@ if (typeof jQuery != "undefined") {
             return;
         }
 
-        if (jq("#checkOriginalFormat").is(":checked")) {
-            loadScripts();
-            return;
-        }
-
         timer = setTimeout(function () {
             var requestAddress = "webeditor.ashx"
                 + "?type=convert"
@@ -195,6 +190,17 @@ if (typeof jQuery != "undefined") {
         jq.unblockUI();
     });
 
+    jq(document).on("click", ".try-editor", function (e) {
+        var url = "doceditor.aspx?type=" + 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"