diff --git a/web/documentserver-example/csharp-mvc/Content/images/corner.png b/web/documentserver-example/csharp-mvc/Content/images/corner.png deleted file mode 100644 index a2264e4e..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/corner.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_docx.png b/web/documentserver-example/csharp-mvc/Content/images/file_docx.png deleted file mode 100644 index 5947d7ca..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/file_docx.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_docx.svg b/web/documentserver-example/csharp-mvc/Content/images/file_docx.svg new file mode 100644 index 00000000..751395f6 --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/file_docx.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_pptx.png b/web/documentserver-example/csharp-mvc/Content/images/file_pptx.png deleted file mode 100644 index 426be1d9..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/file_pptx.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_pptx.svg b/web/documentserver-example/csharp-mvc/Content/images/file_pptx.svg new file mode 100644 index 00000000..deba611b --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/file_pptx.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_upload.png b/web/documentserver-example/csharp-mvc/Content/images/file_upload.png deleted file mode 100644 index 5566e6dd..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/file_upload.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_upload.svg b/web/documentserver-example/csharp-mvc/Content/images/file_upload.svg new file mode 100644 index 00000000..3617f42e --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/file_upload.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_xlsx.png b/web/documentserver-example/csharp-mvc/Content/images/file_xlsx.png deleted file mode 100644 index a5f3b7c6..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/file_xlsx.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/file_xlsx.svg b/web/documentserver-example/csharp-mvc/Content/images/file_xlsx.svg new file mode 100644 index 00000000..7ee32b7b --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/file_xlsx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/icon_docx.png b/web/documentserver-example/csharp-mvc/Content/images/icon_docx.png deleted file mode 100644 index 854d4ae4..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/icon_docx.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/icon_docx.svg b/web/documentserver-example/csharp-mvc/Content/images/icon_docx.svg new file mode 100644 index 00000000..4772f3fc --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/icon_docx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/icon_pptx.png b/web/documentserver-example/csharp-mvc/Content/images/icon_pptx.png deleted file mode 100644 index 084235ec..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/icon_pptx.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/icon_pptx.svg b/web/documentserver-example/csharp-mvc/Content/images/icon_pptx.svg new file mode 100644 index 00000000..f799557b --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/icon_pptx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/icon_xlsx.png b/web/documentserver-example/csharp-mvc/Content/images/icon_xlsx.png deleted file mode 100644 index edfa88fa..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/icon_xlsx.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/images/icon_xlsx.svg b/web/documentserver-example/csharp-mvc/Content/images/icon_xlsx.svg new file mode 100644 index 00000000..db0a7b1d --- /dev/null +++ b/web/documentserver-example/csharp-mvc/Content/images/icon_xlsx.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/logo.svg b/web/documentserver-example/csharp-mvc/Content/images/logo.svg index fafbb3a7..58020531 100644 --- a/web/documentserver-example/csharp-mvc/Content/images/logo.svg +++ b/web/documentserver-example/csharp-mvc/Content/images/logo.svg @@ -1,15 +1,15 @@ - - - - - - - - - - - - - - - \ No newline at end of file + + + + + + + + + + + + + + + diff --git a/web/documentserver-example/csharp-mvc/Content/images/question_small.png b/web/documentserver-example/csharp-mvc/Content/images/question_small.png deleted file mode 100644 index 033f3da9..00000000 Binary files a/web/documentserver-example/csharp-mvc/Content/images/question_small.png and /dev/null differ diff --git a/web/documentserver-example/csharp-mvc/Content/stylesheet.css b/web/documentserver-example/csharp-mvc/Content/stylesheet.css index 5140b894..ef30bd48 100644 --- a/web/documentserver-example/csharp-mvc/Content/stylesheet.css +++ b/web/documentserver-example/csharp-mvc/Content/stylesheet.css @@ -20,127 +20,144 @@ height: 100%; width: 100%; } + body { - background: #fff; - color: #333; - font-family: 'Open Sans', Tahoma,sans-serif; + background: #FFFFFF; + color: #333333; + font-family: Open Sans; font-size: 12px; + font-style: normal; font-weight: normal; height: 100%; margin: 0; padding: 0; text-decoration: none; } + form { height: 100%; } + div { margin: 0; padding: 0; } -a, a:hover, a:visited { - color: #333; + +a, +a:hover, +a:visited { + color: #333333; + cursor: pointer; +} + +header { + background: #333333; + height: 72px; + margin: 0 auto; + min-width: 1152px; + width: auto; +} + +header img { + margin: 22px 0 22px 32px; +} + +.center { + margin: 0 auto 0; + width: 1152px; +} + +.main { + height: calc(100% - 136px); + min-height: 549px; +} + +.table-main { + border-spacing: 0; + height: 100%; + min-height: 549px; +} + +.section { + height: 100%; + padding: 0; + vertical-align: top; } -.top-panel { - background: #3D4A6B; - height: 80px; - width: 100%; -} -.top-panel img { - margin: 12px 0 0 16px; -} .main-panel { - margin: 80px auto; - width: 600px; + box-sizing: border-box; + -moz-box-sizing: border-box; + height: 100%; + list-style: none; + padding: 48px 32px; + position: relative; + width: 896px; } + .portal-name { - font-size: 20px; + color: #FF6F3D; + font-size: 24px; + font-weight: bold; + line-height: 133%; + letter-spacing: -0.02em; } + .portal-descr { display: inline-block; - line-height: 20px; - margin-bottom: 24px; - width: 600px; -} -.save-original { - color: #929597; - line-height: 20px; - margin-left: 16px; - white-space: nowrap; - width: 272px; -} -label .checkbox { - vertical-align: middle; -} -.question { - background: url("images/question_small.png") no-repeat center center transparent; - cursor: pointer; - display: inline-block; - height: 16px; - width: 16px; -} -#hint { - background-color: #FFFFFF; - border: 1px solid #8E908F; - display: none; - margin: 4px 0 0 -32px; - max-width: 415px; - padding: 10px 15px 15px; - word-wrap: break-word; - z-index: 255; -} -.corner { - background: url("images/corner.png") no-repeat scroll 0 0 transparent; - height: 6px; - left: 35px; - margin-top: -15px; - position: absolute; - width: 9px; - z-index: 261; -} -.try-descr { font-size: 16px; - white-space : nowrap; + line-height: 160%; + margin-top: 16px; +} + +.header-list { + font-weight: bold; + font-size: 16px; + line-height: 133%; + letter-spacing: -0.02em; +} + +label .checkbox { + margin: 0 5px 3px 0; + vertical-align: middle; + cursor: pointer; } .try-editor-list { list-style: none; - margin: 0 0 16px; + margin: 0; padding: 0; } + .try-editor-list li { - float: left; - margin: 0 15px; - width: 100px; - cursor: pointer; + margin-bottom: 12px } + .try-editor { background-color: transparent; - background-position: center 0; background-repeat: no-repeat; display: block; font-size: 14px; - font-weight: bold; - height: 45px; - padding-top: 100px; - text-align: center; + line-height: 40px; + padding-left: 42px; text-decoration: none; } + .try-editor.word { - background-image: url("images/file_docx.png"); + background-image: url("images/file_docx.svg"); } + .try-editor.cell { - background-image: url("images/file_xlsx.png"); + background-image: url("images/file_xlsx.svg"); } + .try-editor.slide { - background-image: url("images/file_pptx.png"); + background-image: url("images/file_pptx.svg"); } .create-sample { - display: inline-block; - margin-left: 75px; + color: #666666; + line-height: 24px; } .button, .button:visited, .button:hover, .button:active { @@ -186,34 +203,34 @@ label .checkbox { } .upload-panel { - border-right: 1px solid #D1D1D1; float: left; - margin-right: 25px; + padding: 24px 0; } .file-upload { - background: url("images/file_upload.png") no-repeat center 0 transparent; + background: url("images/file_upload.svg") no-repeat 0 transparent; cursor: pointer; - display: inline-block; + display: block; font-size: 14px; - font-weight: bold; - height: 45px; - margin: 0 40px 16px; + line-height: 40px; overflow: hidden; - padding-top: 100px; + padding-left: 42px; position: relative; - text-align: center; - width: 100px; + width: 150px; } - .file-upload input { - cursor: pointer; - opacity: 0; - position: absolute; - right: 0; - top: 0; - transform: translate(555px, 60px) scale(8); - } +.file-upload input { + cursor: pointer; + height: 40px; + margin: 0; + opacity: 0; + opacity: 0; + position: absolute; + right: 0; + top: 0; + transform: translate(0px, -21px) scale(2); + width: 192px; +} .create-panel { float: left; @@ -229,15 +246,19 @@ label .checkbox { display: none; margin: 15px; } + #mainProgress #embeddedView { display: none; } + #mainProgress.embedded #embeddedView { display: block; } + #mainProgress.embedded #uploadSteps { display: none; } + .error-message { background: url("images/alert.png") no-repeat scroll 4px 10px #FFECE3; color: #666668 !important; @@ -248,9 +269,11 @@ label .checkbox { padding: 10px 10px 10px 30px; vertical-align: middle; } + #mainProgress .error-message a { color: #666668; } + .step { background-repeat: no-repeat; background-position: left center; @@ -260,83 +283,120 @@ label .checkbox { line-height: 30px; padding-left: 25px; } + .current { background-image: url("images/loader16.gif"); color: #333; } + .done { background-image: url("images/done.png"); color: #333; } + .error { background-image: url("images/alert.png"); } + .step-descr { display: block; margin-left: 45px; } + #mainProgress .step-descr a { color: #979B9F; } + .progress-descr { color: #333; } + #loadScripts { display: none; } + #iframeScripts { position: absolute; visibility: hidden; } -.bottom-panel { - bottom: 0; - position: fixed; - text-align: right; - width: 100%; + +footer { + background: #333333; + color: #AAAAAA; + height: 64px; + min-width: 1152px; + width: auto; } + +footer table { +border-spacing: 0; +} + +footer table tr { + height: 64px; +} + +footer table td { + padding-left: 32px; +} + +footer a, +footer a:hover, +footer a:visited { +color: #FF6F3D; +font-size: 14px; +line-height: 120%; +} + +footer a:hover { + text-decoration: none; +} + +.copy { + padding-left: 510px; +} + +.help-block { + margin: 48px 32px; +} + .help-block span { - font-size: 16px; - line-height: 26px; + font-size: 14px; + font-weight: 600; + line-height: 19px; } .stored-list { - border-top: 1px solid #D1D1D1; list-style: none; - margin: 0; padding: 0; + position: relative; + height: 100%; } - .stored-list li { - border-bottom: 1px solid #D1D1D1; - line-height: 28px; - padding: 0 8px; - } - .stored-edit { background-color: transparent; background-position: left center; background-repeat: no-repeat; display: inline-block; - line-height: 16px; - max-width: 450px; - margin-bottom: -6px; + height: 16px; + max-width: 250px; overflow: hidden; - padding: 4px 0 1px 34px; + padding: 8px 0 1px 26px; text-decoration: none; text-overflow: ellipsis; white-space: nowrap; } .stored-edit.word { - background-image: url("images/icon_docx.png"); + background-image: url("images/icon_docx.svg"); } .stored-edit.cell { - background-image: url("images/icon_xlsx.png"); + background-image: url("images/icon_xlsx.svg"); } .stored-edit.slide { - background-image: url("images/icon_pptx.png"); + background-image: url("images/icon_pptx.svg"); } .stored-edit span { @@ -348,7 +408,6 @@ label .checkbox { text-decoration: underline; } - .blockTitle { background-color: #E2E2E2 !important; border: none !important; @@ -360,6 +419,7 @@ label .checkbox { font-weight: normal !important; padding: 15px 25px !important; } + .dialog-close { background: url("images/close.png") no-repeat scroll left top #E2E2E2; cursor: pointer; @@ -370,6 +430,7 @@ label .checkbox { margin-top: 4px; width: 12px; } + .blockPage { border: none !important; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); @@ -387,11 +448,6 @@ label .checkbox { visibility: hidden; } -/*Icon table*/ -#tableRow { - vertical-align: top; -} - .tableRow { background: transparent; -moz-transition: all 0.2s ease-in-out; @@ -401,16 +457,17 @@ label .checkbox { transition: all 0.2s ease-in-out; } - .tableRow:hover { - background-color: #ebebeb; - } +.tableRow:hover { + background-color: #ECECEC; +} .tableHeader { + padding-top: 10px; +} + +.tableHeader tr { background: transparent; - color: #333; cursor: default; - font-family: 'Open Sans', sans-serif; - font-size: 13px; height: 40px; -khtml-user-select: none; user-select: none; @@ -419,19 +476,39 @@ label .checkbox { } .tableHeaderCell { - padding: 2px 1px 2px 5px; + border-bottom: 1px solid #CCCCCC; + padding: 2px 4px; text-align: center; } .tableHeaderCellFileName { text-align: left; + width: 37%; +} + +.tableHeaderCellEditors { + width: 29%; +} + +.tableHeaderCellViewers { + width: 11%; +} + +.tableHeaderCellDownload { + width: 13%; + text-align: right; + padding-right: 20px; +} + +.tableHeaderCellRemove { + text-align: left; } .contentCells { - padding: 4px 1px 4px 5px; + border-bottom: 1px solid #EFEFEF; font-family: 'Open Sans', sans-serif; font-size: 16px; - border-bottom: 1px solid #e5e5e5; + padding: 4px; white-space: nowrap; -khtml-user-select: none; user-select: none; @@ -439,27 +516,13 @@ label .checkbox { -webkit-user-select: none; } - .contentCells a { - text-decoration: none; - } - .contentCells-shift { - padding-right: 30px; + padding-right: 44px; } .contentCells-icon { - width: 6%; + width: 4%; } - -.contentCellsSmall { - padding: 5px 1px 5px 6px; - font-family: 'Open Sans', sans-serif; - font-size: 13px; - border-bottom: 1px solid #e5e5e5; - white-space: nowrap; - text-align: center; -} - .primaryRow { background-color: #e9e9e9; } @@ -469,29 +532,43 @@ label .checkbox { } .select-user { - margin-left: 15px; + color: #444444; + font-family: Open Sans; + font-size: 12px !important; + font-weight: normal !important; + line-height: 16px !important; } .user-block-table { height: 100%; + padding: 14px 0; width: 100%; } - .user-block-table td { - background-color: #F4F4F4; - border-bottom: 1px solid white; - padding: 12px 0; - } - -#user, #language { - width: 130px; +.user-block-table td { + background-color: #F4F4F4; + padding-top: 10px; } -.icon-download { - margin-bottom: -5px; +.user-block-table td select { + border: 1px solid #D0D5DA; + box-sizing: border-box; + border-radius: 3px; + cursor: pointer; +} + +#user, +#language { + width: 100%; + margin-top: 5px; + padding-left: 5px; } .icon-delete { cursor: pointer; - margin-bottom: -6px; -} \ No newline at end of file +} + +.left-panel { + width: 256px; + background: #F5F5F5; +} \ No newline at end of file diff --git a/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx b/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx index 875d34cd..da8b696c 100644 --- a/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx +++ b/web/documentserver-example/csharp-mvc/Views/Home/Index.aspx @@ -4,7 +4,7 @@ <%@ Import Namespace="OnlineEditorsExampleMVC.Helpers" %> <%@ Import Namespace="OnlineEditorsExampleMVC.Models" %> - + @@ -37,223 +37,218 @@ <%: Styles.Render("~/Content/css") %> -
- - ONLYOFFICE - -
-
- ONLYOFFICE Document Editors -
-
- 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 "Upload file" button and selecting the necessary files on your PC. +
+
+ + ONLYOFFICE + +
+
- +
+
- - - - - -
- Username: - + +
+ Create new +
+
+ + +
+ +
+ Upload file + " /> + +
+
+ + + + + + + + + +
+ Username + +
+ Language + +
+
Select user name before opening the document; you can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
- + +
+ <% var storedFiles = DocManagerHelper.GetStoredFiles(); + if (!storedFiles.Any()) + { %> + ONLYOFFICE Document Editors – Welcome! + + 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 "Upload file" button and selecting the necessary files on your PC. + + <% } + else + { %> +
+ Your documents + + + + + + + + + + +
FilenameEditorsViewersDownloadRemove
+
+ + + <% foreach (var storedFile in storedFiles) + { + var editUrl = "doceditor.aspx?fileID=" + HttpUtility.UrlEncode(storedFile.Name); + var docType = FileUtility.GetFileType(storedFile.Name).ToString().ToLower(); %> + + + + + + + + + + + + + + + + + <% } %> + +
+ " target="_blank"> + <%= storedFile.Name %> + + + " target="_blank"> + Open in editor for full size screens + + + " target="_blank"> + Open in editor for mobile devices + + + <% if (docType == "word") { %> + " target="_blank"> + Open in editor for review + + <% } else if (docType == "cell") { %> + " target="_blank"> + Open in editor without access to change the filter + + <% } %> + + " target="_blank"> + Open in editor for comment + + + <% if (docType == "word") { %> + " target="_blank"> + Open in editor for filling in forms + + <% } %> + + <% if (docType == "word") { %> + " target="_blank"> + Open in editor without content control modification + + <% } %> + + " target="_blank"> + Open in viewer for full size screens + + + " target="_blank"> + Open in viewer for mobile devices + + + " target="_blank"> + Open in embedded mode + + + + Download + + + + Delete + +
+
+
+ <% } %> +
Choose the language for ONLYOFFICE™ editors interface.
-
-
- - -
- Upload your file or create new file -
-
-
-
- - Upload -
- File - " /> - -
-
- - -
-
-
- - <% var storedFiles = DocManagerHelper.GetStoredFiles(); - if (storedFiles.Any()) - { %> -
- Your documents -
-
-
- - - - - - - - - - <% foreach (var storedFile in storedFiles) - { %> - <% - var editUrl = "doceditor.aspx?fileID=" + HttpUtility.UrlEncode(storedFile.Name); - var docType = FileUtility.GetFileType(storedFile.Name).ToString().ToLower(); - %> - - - - - - - - - - - - - - - <% } %> - -
FilenameEditorsViewers
- " target="_blank"> - <%= storedFile.Name %> - - - Download - - - Delete - - - " target="_blank"> - Open in editor for full size screens - - - " target="_blank"> - Open in editor for mobile devices - - - <% if (docType == "word") { %> - " target="_blank"> - Open in editor for review - - <% } else if (docType == "cell") { %> - " target="_blank"> - Open in editor without access to change the filter - - <% } %> - - " target="_blank"> - Open in editor for comment - - - <% if (docType == "word") { %> - " target="_blank"> - Open in editor for filling in forms - - <% } %> - - <% if (docType == "word") { %> - " target="_blank"> - Open in editor without content control modification - - <% } %> - - " target="_blank"> - Open in viewer for full size screens - - - " target="_blank"> - Open in viewer for mobile devices - - - " target="_blank"> - Open in embedded mode - -
-
-
- <% } %> - -
-
-
-
- Want to learn how it works? -
- Read the editor API Documentation -
-
-
-
-
- Any questions? -
- Please, submit your request and we'll help you shortly. -
-
- -
-
- If you check this option the file will be saved both in the original and converted into Office Open XML format for faster viewing and editing. In other case the document will be overwritten by its copy in Office Open XML format.
@@ -287,8 +282,25 @@
"> - -
© Ascensio System SIA <%= DateTime.Now.Year.ToString() %>. All rights reserved.
+ <%: Scripts.Render("~/bundles/jquery", "~/bundles/scripts") %>