Merge pull request #193 from ONLYOFFICE/bugfix/users-tooltip-layout

fix users tooltip size

Readme.md

@@ -1,14 +1,18 @@
-## Document Server integration example
+## Integration examples
 
-These examples show the way to integrate [ONLYOFFICE Document Server][2] into your own website or application using one of the programming languages. The package contains examples written in .Net (C# MVC), .Net (C#), Java, Node.js, PHP and Ruby.
+Test examples are simple document management systems that can be built into your
+application for testing (please, do not use it for production without proper code
+modifications).
+
+These examples show the way to integrate [ONLYOFFICE Docs][2] into your own website or application using one of the programming languages. The package contains examples written in .Net (C# MVC), .Net (C#), Java, Node.js, PHP and Ruby.
 
 You should change `http://documentserver` to your server address in these files:
-* .Net (C# MVC) - `web/documentserver-example/csharp-mvc/web.appsettings.config`
-* .Net (C#) - `web/documentserver-example/csharp/settings.config`
-* Java - `web/documentserver-example/java/src/main/resources/settings.properties`
-* Node.js - `web/documentserver-example/nodejs/config/default.json`
-* PHP - `web/documentserver-example/php/config.php`
-* Ruby - `web/documentserver-example/ruby/config/application.rb`
+* [.Net (C# MVC)](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/csharp-mvc) - `web/documentserver-example/csharp-mvc/web.appsettings.config`
+* [.Net (C#)](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/csharp) - `web/documentserver-example/csharp/settings.config`
+* [Java](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/java) - `web/documentserver-example/java/src/main/resources/settings.properties`
+* [Node.js](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/nodejs) - `web/documentserver-example/nodejs/config/default.json`
+* [PHP](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/php) - `web/documentserver-example/php/config.php`
+* [Ruby](https://github.com/ONLYOFFICE/document-server-integration/tree/master/web/documentserver-example/ruby) - `web/documentserver-example/ruby/config/application.rb`
 
 More information on how to use these examples can be found here: [http://api.onlyoffice.com/editors/demopreview](http://api.onlyoffice.com/editors/demopreview "http://api.onlyoffice.com/editors/demopreview")
 
@@ -72,9 +76,9 @@ ONLYOFFICE for developers: [https://www.onlyoffice.com/developer-edition.aspx](h
 
 ## User Feedback and Support
 
-If you have any problems with or questions about [ONLYOFFICE Document Server][2], please visit our official forum to find answers to your questions: [dev.onlyoffice.org][1] or you can ask and answer ONLYOFFICE development questions on [Stack Overflow][3].
+If you have any problems with or questions about [ONLYOFFICE Document Server][2], please visit our official forum to find answers to your questions: [forum.onlyoffice.com][1] or you can ask and answer ONLYOFFICE development questions on [Stack Overflow][3].
 
-  [1]: http://dev.onlyoffice.org
+  [1]: https://forum.onlyoffice.com
   [2]: https://github.com/ONLYOFFICE/DocumentServer
   [3]: http://stackoverflow.com/questions/tagged/onlyoffice
   

build/msbuild/zip.proj

@@ -24,43 +24,43 @@
     <RemoveDir Directories="$(To)" ContinueOnError="true" />
 
     <ItemGroup>
-      <ZipFilesCSharp Include="$(DirCSharp)**" Exclude="$(DirCSharp)obj\**" />
+      <ZipFilesCSharp Include="$(DirCSharp)**" Exclude="$(DirCSharp)obj\**;$(DirCSharp)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesCSharp)" DestinationFiles="@(ZipFilesCSharp->'$(NameCSharp)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NameCSharp)" WorkingDirectory="$(To)" ZipFileName="$(NameCSharp).zip" />
 
     <ItemGroup>
-      <ZipFilesMVC Include="$(DirMvc)**" Exclude="$(DirMvc)obj\**" />
+      <ZipFilesMVC Include="$(DirMvc)**" Exclude="$(DirMvc)obj\**;$(DirMvc)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesMVC)" DestinationFiles="@(ZipFilesMVC->'$(NameMvc)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NameMvc)" WorkingDirectory="$(To)" ZipFileName="$(NameMvc).zip" />
 
     <ItemGroup>
-      <ZipFilesJava Include="$(DirJava)**" />
+      <ZipFilesJava Include="$(DirJava)**" Exclude="$(DirJava)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesJava)" DestinationFiles="@(ZipFilesJava->'$(NameJava)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NameJava)" WorkingDirectory="$(To)" ZipFileName="$(NameJava).zip" />
 
     <ItemGroup>
-      <ZipFilesNodeJS Include="$(DirNodeJS)**" Exclude="$(DirNodeJS)node_modules\**" />
+      <ZipFilesNodeJS Include="$(DirNodeJS)**" Exclude="$(DirNodeJS)node_modules\**;$(DirNodeJS)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesNodeJS)" DestinationFiles="@(ZipFilesNodeJS->'$(NameNodeJS)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NameNodeJS)" WorkingDirectory="$(To)" ZipFileName="$(NameNodeJS).zip" />
 
     <ItemGroup>
-      <ZipFilesPHP Include="$(DirPHP)**" />
+      <ZipFilesPHP Include="$(DirPHP)**" Exclude="$(DirPHP)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesPHP)" DestinationFiles="@(ZipFilesPHP->'$(NamePHP)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NamePHP)" WorkingDirectory="$(To)" ZipFileName="$(NamePHP).zip" />
 
     <ItemGroup>
-      <ZipFilesRuby Include="$(DirRuby)**" />
+      <ZipFilesRuby Include="$(DirRuby)**" Exclude="$(DirRuby)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesRuby)" DestinationFiles="@(ZipFilesRuby->'$(NameRuby)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NameRuby)" WorkingDirectory="$(To)" ZipFileName="$(NameRuby).zip" />
 
     <ItemGroup>
-      <ZipFilesPython Include="$(DirPython)**" />
+      <ZipFilesPython Include="$(DirPython)**" Exclude="$(DirPython)**\.git" />
     </ItemGroup>
     <Copy SourceFiles="@(ZipFilesPython)" DestinationFiles="@(ZipFilesPython->'$(NamePython)\%(RecursiveDir)%(Filename)%(Extension)')" />
     <Zip Files="$(NamePython)" WorkingDirectory="$(To)" ZipFileName="$(NamePython).zip" />

web/documentserver-example/README.md

@@ -1,17 +0,0 @@
-# Integration examples
-
-## To start integrating document editors into your own website you need to do the following:
-
-1. Download [Document Server installation](https://www.onlyoffice.com/developer-edition-request.aspx?from=api.onlyoffice.com) and set it up on your local server.
-
-2. Select the programming language and clone the source code for the sample of online editors integration into your web site.
-
-3. [Edit the configuration files](https://api.onlyoffice.com/editors/advanced) in the sample changing the default path for the one to the editors installed at step 1 and other advanced parameters available for editor configuration.
-
-4. In case the example and Document Server are installed on different computers, make sure that your server with the example installed has access to the Document Server with the address which you specify instead of **documentserver** in the configuration files. And you must also make sure that the Document Server in its turn has access to the server with the example installed with the address which you specify instead of **example.com** in the configuration files.
-
-Please note that the integration examples are used to demonstrate document editors functions and the ways to connect **Document Server** to your own application. **DO NOT USE** these examples on your own server without **PROPER CODE MODIFICATIONS**!
-
-The result should look like the [demo preview](https://api.onlyoffice.com/editors/demopreview#DemoPreview) on our web site.
-
-If you have any further questions, please contact us at [integration@onlyoffice.com](mailto:integration@onlyoffice.com).

web/documentserver-example/csharp-mvc/App_Start/BundleConfig.cs

@@ -43,7 +43,8 @@ namespace OnlineEditorsExampleMVC
             // create a style bundle
             bundles.Add(new StyleBundle("~/Content/css").Include(
                 "~/Content/stylesheet.css",
-                "~/Content/jquery-ui.css"
+                "~/Content/jquery-ui.css",
+                "~/Content/media.css"
                             ));
 
             // create an editor style bundle

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

@@ -0,0 +1,607 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    #portal-info {
+        width: 65vw;
+    }
+
+    .left-panel {
+        margin-left: 0;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: right;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: left;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: right;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: left;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    #portal-info {
+        width: 50vw;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 14%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x:hidden;
 }
 
 form {
@@ -53,23 +54,24 @@ a:visited {
 
 header {
     background: #333333;
-    height: 72px;
+    height: 48px;
     margin: 0 auto;
     min-width: 1152px;
     width: auto;
 }
 
 header img {
-    margin: 22px 0 22px 32px;
+    margin: 10px 0 22px 32px;
 }
 
 .center {
+    position:relative;
     margin: 0 auto 0;
     width: 1152px;
 }
 
 .main {
-    height: calc(100% - 136px);
+    height: calc(100% - 112px);
     min-height: 536px;
 }
 
@@ -354,19 +356,33 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+	position: relative;
+	left: 0;
+	bottom: 0;
+}
+footer > .center {
+    width: 100%;
 }
-
 footer table {
+    width:100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
+    position:relative;
     padding-left: 32px;
 }
 
@@ -381,9 +397,15 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color:#aaaaaa;
+    width:max-content;
+    position:relative;
+    margin-left:auto;
+    margin-right:14%;
 }
 
 .help-block {
@@ -540,6 +562,7 @@ footer a:hover {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -569,31 +592,7 @@ footer a:hover {
 
 .info {
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
-}
-
-.tooltip {
-    background: #FFFFFF;
-    border-radius: 5px;
-    box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
-    color: #666666;
-    line-height: 160%;
-    max-width: 455px;
-    padding: 14px;
-    position: absolute;
-}
-
-.tooltip ul {
-    margin: 0;
-}
-
-.arrow {
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid #FFFFFF;
-    position: absolute;
-    transform: translate(-50%, -50%);
+    margin: -2px 5px;
 }
 
 .user-block-table {
@@ -681,4 +680,61 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+    .tableRow td:first-child {
+        display: flex;
+        flex-grow: 1;
+        max-width: 25%;
+    }
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+
+.user-descr {
+    display: inline-table;
+    width: 30vw;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.user-descr > b {
+    margin-left: 25px;
+}
+
+#portal-info {
+    display: block;
+    width: 70vw;
+}
+
+.portal-descr:nth-child(3) {
+    margin-bottom: 20px;
 }

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

@@ -106,6 +106,7 @@ namespace OnlineEditorsExampleMVC.Helpers
                 }
             }
 
+            // get the path to the given file
             directory = directory + Path.GetFileName(fileName);
             if (!File.Exists(directory))
             {
@@ -139,7 +140,7 @@ namespace OnlineEditorsExampleMVC.Helpers
         // get the file version by the history path
         public static int GetFileVersion(string historyPath)
         {
-            if (!Directory.Exists(historyPath)) return 0;  // if the history path doesn't exist, then the file version is 0
+            if (!Directory.Exists(historyPath)) return 1;  // if the history path doesn't exist, then the file version is 1
             return Directory.EnumerateDirectories(historyPath).Count() + 1;  // take only directories from the history folder and count them
         }
 
@@ -264,6 +265,7 @@ namespace OnlineEditorsExampleMVC.Helpers
             return callbackUrl.ToString();
         }
 
+        // get url to the created file
         public static string GetCreateUrl(FileUtility.FileType fileType)
         {
             var createUrl = new UriBuilder(GetServerUrl(false))
@@ -277,6 +279,7 @@ namespace OnlineEditorsExampleMVC.Helpers
             return createUrl.ToString();
         }
 
+        // get url to download a file
         public static string GetDownloadUrl(string fileName)
         {
             var downloadUrl = new UriBuilder(GetServerUrl(true))

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

@@ -90,6 +90,9 @@ namespace OnlineEditorsExampleMVC.Helpers
         // file saving process
         public static int processSave(Dictionary<string, object> fileData, string fileName, string userAddress)
         {
+            if (fileData["url"].Equals(null)) {
+                throw new Exception("DownloadUrl is null");
+            }
             var downloadUri = (string)fileData["url"];
             string curExt = Path.GetExtension(fileName).ToLower();  // get current file extension
             string downloadExt = Path.GetExtension(downloadUri).ToLower() ?? "";  // get the extension of the downloaded file
@@ -158,6 +161,9 @@ namespace OnlineEditorsExampleMVC.Helpers
         // file force saving process
         public static int processForceSave(Dictionary<string, object> fileData, string fileName, string userAddress)
         {
+            if (fileData["url"].Equals(null)) {
+                throw new Exception("DownloadUrl is null");
+            }
             var downloadUri = (string)fileData["url"];
 
             string curExt = Path.GetExtension(fileName).ToLower();  // get current file extension

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

@@ -126,6 +126,7 @@ namespace OnlineEditorsExampleMVC.Helpers
                 )
         };
 
+        // get a user by id specified
         public static User getUser(string id)
         {
             foreach(User user in users)
@@ -135,11 +136,13 @@ namespace OnlineEditorsExampleMVC.Helpers
             return users[0];
         }
 
+        // get a list of all the users
         public static List<User> getAllUsers()
         {
             return users;
         }
 
+        // get a list of users with their names and emails for mentions
         public static List<Dictionary<string, object>> getUsersForMentions(string id)
         {
             List<Dictionary<string, object>> usersData = new List<Dictionary<string, object>>();

web/documentserver-example/csharp-mvc/Models/FileModel.cs

@@ -97,7 +97,7 @@ namespace OnlineEditorsExampleMVC.Models
             {
                 new Dictionary<string, string>()
                 {
-                    { "image", templatesImageUrl },
+                    { "image", "" },
                     { "title", "Blank" },
                     { "url", createUrl },
                 },

web/documentserver-example/csharp-mvc/Models/FileUtility.cs

@@ -49,7 +49,7 @@ namespace OnlineEditorsExampleMVC.Models
                 ".dot", ".dotx", ".dotm",
                 ".odt", ".fodt", ".ott", ".rtf", ".txt",
                 ".html", ".htm", ".mht", ".xml",
-                ".pdf", ".djvu", ".fb2", ".epub", ".xps"
+                ".pdf", ".djvu", ".fb2", ".epub", ".xps", ".oxps"
             };
 
         // spreadsheet extensions

web/documentserver-example/csharp-mvc/README.md

@@ -13,33 +13,43 @@ See the detailed guide to learn how to install Document Server [for Windows](htt
 ## Step 2. Download the .Net (C# MVC) code for the editors integration
 
 Download the [.Net (C# MVC) example](https://api.onlyoffice.com/editors/demopreview) from our site.
-You need to connnect the editors to your web site. Specify path to the editors installation in the *settings.config* file:
+You need to connnect the editors to your website. Specify path to the editors installation in the *settings.config* file:
 ```
 <add key="files.docservice.url.site" value="https://documentserver/" />
 ```
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *DocEditor.aspx* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *DocEditor.aspx* file.
 
 ## Step 3. Install the prerequisites
 Сheck if your system meets the system requirements:
-* Microsoft .NET Framework: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
-* Internet Information Services: version 7 or later.
+* **Microsoft .NET Framework**: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
+* **Internet Information Services**: version 7 or later.
 
 ## Step 4. Run your website with the editors
-1. Run the Internet Information Service (IIS) manager
-	Start -> ControlPanel -> System and Security -> Administrative Tools -> Internet Information Services (IIS) Manager
-2. Add your website in the IIS Manager
+1. Run the Internet Information Service (IIS) Manager:
+
+	**Start** -> **Control Panel** -> **System and Security** -> **Administrative Tools** -> **Internet Information Services (IIS) Manager**
+2. Add your website in the IIS Manager.
+	
 	On the **Connections** panel right-click the **Sites** node in the tree, then click **Add Website**.
+
 	![add](screenshots/add.png)
 3. In the **Add Website** dialog box specify the name of the folder with the .Net (C# MVC) project in the **Site name** box.
+	
 	Specify the path to the folder with your project in the **Physical Path** box.
+	
 	Specify the unique value used only for this website in the **Port** box.
+	
 	![sitename](screenshots/sitename.png)
-4. Check for the .NET platform version specified in IIS manager for you web site. Choose **v4.0.** version.
-	Click the **Application Pool** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+4. Check for the .NET platform version specified in IIS Manager for you website. Choose **v4.0.** version.
+	
+	**Application Pools** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+	
 	![platform](screenshots/platform.png)
-5. Browse your website with the IIS manager:
+5. Browse your website with the IIS Manager:
+
 	Right-click the site -> **Manage Website** -> **Browse**
+	
 	![browse](screenshots/browse.png)
 
 ## Step 5. Check accessibility

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

@@ -278,30 +278,58 @@ if (typeof jQuery != "undefined") {
         });
     });
 
-    jq(".info").mouseover(function (event) {
-        var target = event.target;
-        var id = target.dataset.id ? target.dataset.id : target.id;
-        var tooltip = target.dataset.tooltip;
-
-        jq("<div class='tooltip'>" + tooltip + "</div><div class='arrow'></div>").appendTo("body");
-
-        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth();
-
-        var topElement = jq("#" + id).offset().top;
-        var halfHeightElement = jq("#" + id).outerHeight() / 2;
-
-        var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement);
-        var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2;
-        if (heightToFooter > (halfHeightTooltip + 10)) {
-            var top = topElement + halfHeightElement - halfHeightTooltip;
-        } else {
-            var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10;
+        function showUserTooltip (isMobile) {
+        if ( jq("div#portal-info").is(":hidden") ) {
+            jq("div#portal-info").show();
+            jq("div.stored-list").hide();
+        } else if (isMobile && jq("div#portal-info").is(":visible")) {
+            jq("div#portal-info").hide();
+            jq("div.stored-list").show();
         }
+    };
 
-        jq("div.tooltip").css({ "top": top, "left": left + 10 });
-        jq("div.arrow").css({ "top": topElement + halfHeightElement, "left": left + 6 });
-    }).mouseout(function () {
-        jq("div.tooltip").remove();
-        jq("div.arrow").remove();
-    });
+    var fileList = jq("tr.tableRow");
+    if (fileList.length > 0) {
+        console.log(jq("div#portal-info").is(":visible"));
+        jq("div#portal-info").hide();
+    }
+
+    var mouseIsOverTooltip = false;
+    var hideTooltipTimeout = null;
+    if (/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
+        .test(navigator.userAgent)) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                jq(".info").on("touchend", function () {
+                    showUserTooltip(true);
+                });
+            }
+    } else {
+        jq(".info").mouseover(function (event) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                showUserTooltip(false);
+
+                jq("div#portal-info").mouseenter(function () {
+                    mouseIsOverTooltip = true;
+                }).mouseleave(function () {
+                    mouseIsOverTooltip = false;
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                })
+            }
+        }).mouseleave(function () {
+            hideTooltipTimeout = setTimeout(function () {
+                if (mouseIsOverTooltip == false && fileList.length > 0) {
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                }
+            }, 500);
+        });
+    }
+}
 }

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

@@ -179,10 +179,11 @@
         // add mentions for not anonymous users
         { %>
         config.events['onRequestUsers'] = function () {
-            docEditor.setUsers({
+            docEditor.setUsers({  // set a list of users to mention in the comments
                 "users": <%= usersForMentions%>
             });
         };
+        // the user is mentioned in a comment
         config.events['onRequestSendNotify'] = function (event) {
             var actionLink = JSON.stringify(event.data.actionLink);
             console.log("onRequestSendNotify:");

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

@@ -82,31 +82,18 @@
                                     <tr>
                                         <td valign="middle">
                                             <span class="select-user">Username</span>
-                                            <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
-                                            </br>
+                                             <img class="info" src="app_themes/images/info.svg" />
+                                             <select class="select-user" id="user">
                                             <% foreach (User user in Users.getAllUsers())
                                                { %>
                                                     <b><%= user.name.IsEmpty() ? "Anonymous" : user.name %></b>
-                                                    <ul>
-                                                    <% foreach (string description in user.descriptions)
-                                                       { %>
-                                                            <li><%= description %></li>
-                                                    <% } %>
-                                                    </ul>
-                                            <% } %>"
-                                            src="content/images/info.svg" />
-                                            <select class="select-user" id="user">
-                                                <% foreach (User user in Users.getAllUsers())
-                                                   { %>
-                                                    <option value="<%= user.id %>"><%= user.name.IsEmpty() ? "Anonymous" : user.name  %></option>
-                                                <% } %>
-                                            </select>
+                                                 <% } %>
+                                             </select>
                                         </td>
                                     </tr>
                                     <tr>
                                         <td valign="middle">
-                                            <span class="select-user">Language</span>
-                                            <img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="content/images/info.svg" />
+                                            <span class="select-user">Language editors interface</span>
                                             <select class="select-user" id="language">
                                                 <option value="en">English</option>
                                                 <option value="be">Belarusian</option>
@@ -148,44 +135,55 @@
                     </td>
                     <td class="section">
                         <div class="main-panel">
-                            <%  var storedFiles = DocManagerHelper.GetStoredFiles();
-                                if (!storedFiles.Any())
+                            <div id="portal-info">
+                                <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
+                                <span class="portal-descr">
+                                    Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
+                                    <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
+                                </span>
+                                <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
+                                <% foreach (User user in Users.getAllUsers())
+                                  { %>
+                                  <div class="user-descr">
+                                   <b><%= user.name.IsEmpty() ? "Anonymous" : user.name %></b>
+                                       <ul>
+                                       <% foreach (string description in user.descriptions)
+                                               { %>
+                                                   <li><%= description %></li>
+                                            <% } %>
+                                       </ul>
+                                   </div>
+                                   <% } %>
+                            </div>
+                            <%  var storedFiles = GetStoredFiles();
+                                if storedFiles.Any())
                                 { %>
-                                    <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
-                                        <span class="portal-descr">
-                                            Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
-                                            <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
-                                    </span>
-                            <%  }
-                                else 
-                                { %>
-                                    <div class="stored-list">
-                                        <span class="header-list">Your documents</span>
-                                        <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
-                                            <thead>
-                                                <tr>
-                                                    <td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
-                                                    <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">Editors</td>
-                                                    <td class="tableHeaderCell tableHeaderCellViewers">Viewers</td>
-                                                    <td class="tableHeaderCell tableHeaderCellDownload">Download</td>
-                                                    <td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
-                                                </tr>
-                                            </thead>
-                                        </table>
-                                        <div class="scroll-table-body">
-                                            <table cellspacing="0" cellpadding="0" width="100%">
-                                                <tbody>
-                                                    <%  foreach (var storedFile in storedFiles)
-                                                        { 
-                                                            var editUrl = "doceditor.aspx?fileID=" + HttpUtility.UrlEncode(storedFile.Name);
-                                                            var docType = FileUtility.GetFileType(storedFile.Name).ToString().ToLower(); 
-                                                            var canEdir = DocManagerHelper.EditedExts.Contains(Path.GetExtension(storedFile.Name).ToLower());
-                                                        %>
+                                <div class="stored-list">
+                                    <span class="header-list">Your documents</span>
+                                    <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
+                                        <thead>
+                                            <tr >
+                                                <td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
+                                                <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">Editors</td>
+                                                <td class="tableHeaderCell tableHeaderCellViewers">Viewers</td>
+                                                <td class="tableHeaderCell tableHeaderCellDownload">Download</td>
+                                                <td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
+                                            </tr>
+                                        </thead>
+                                    </table>
+                                    <div class="scroll-table-body">
+                                        <table cellspacing="0" cellpadding="0" width="100%">
+                                            <tbody>
+                                            <%  foreach (var storedFile in storedFiles)
+                                                {
+                                                    var editUrl = "doceditor.aspx?fileID=" + HttpUtility.UrlEncode(storedFile.Name);
+                                                    var docType = DocumentType(storedFile.Name);
+                                                    var canEdit = EditedExts.Contains(Path.GetExtension(storedFile.Name).ToLower());
 
-                                                            <tr class="tableRow" title="<%= storedFile.Name %>">
+                                                            <tr class="tableRow" title="<%= storedFile.Name %> [<%= DocManagerHelper.GetFileVersion(storedFile.Name, HttpContext.Current.Request.UserHostAddress) %>]">
                                                                 <td class="contentCells">
                                                                     <a class="stored-edit <%= docType %>" href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name }) %>" target="_blank">
-                                                                        <span title="<%= storedFile.Name %>"><%= storedFile.Name %></span>
+                                                                        <span><%= storedFile.Name %></span>
                                                                     </a>
                                                                 </td>
                                                                 <% if (canEdir) { %>
@@ -199,40 +197,52 @@
                                                                             <img src="content/images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices"/>
                                                                         </a>
                                                                     </td>
-                                                                    <td class="contentCells contentCells-icon">
-                                                                        <% if (docType == "word") { %>
-                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "review" }) %>" target="_blank">
-                                                                                <img src="content/images/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
-                                                                            </a>
-                                                                        <% } else if (docType == "cell") { %>
-                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "filter" }) %>" target="_blank">
-                                                                                <img src="content/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
-                                                                            </a>
-                                                                        <% } %>
-                                                                    </td>
                                                                     <td class="contentCells contentCells-icon">
                                                                         <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "comment" }) %>" target="_blank">
                                                                             <img src="content/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
                                                                         </a>
                                                                     </td>
-                                                                    <td class="contentCells contentCells-icon">
-                                                                        <% if (docType == "word") { %>
+                                                                    <% if (docType == "word") { %>
+                                                                        <td class="contentCells contentCells-icon">
+                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "review" }) %>" target="_blank">
+                                                                                <img src="content/images/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
+                                                                            </a>
+                                                                        </td>
+                                                                    <% } else if (docType == "cell") { %>
+                                                                        <td class="contentCells contentCells-icon">
+                                                                            <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "filter" }) %>" target="_blank">
+                                                                                <img src="content/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
+                                                                            </a>
+                                                                         </td>
+                                                                    <% } %>
+                                                                    <% if (docType != "word" && docType != "cell") { %>
+                                                                        <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                                    <% } %>
+                                                                    <% if (docType == "word") { %>
+                                                                        <td class="contentCells contentCells-icon">
                                                                             <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "fillForms" }) %>" target="_blank">
                                                                                 <img src="content/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                                             </a>
-                                                                        <% } %>
-                                                                    </td>
-                                                                    <td class="contentCells contentCells-shift contentCells-icon">
-                                                                        <% if (docType == "word") { %>
+                                                                        </td>
+                                                                     <% } else { %>
+                                                                        <td class="contentCells contentCells-icon"></td>
+                                                                    <% } %>
+                                                                    <% if (docType == "word"){ %>
+                                                                        <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                                             <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "blockcontent" }) %>" target="_blank">
                                                                                 <img src="content/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
                                                                             </a>
-                                                                        <% } %>
-                                                                    </td>
+                                                                        </td>
+                                                                    <% } else { %>
+                                                                        <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                                    <% } %>
+                                                                    <% if (docType != "word" && docType != "cell") { %>
+                                                                        <td class="contentCells contentCells-icon "></td>
+                                                                    <% } %>
                                                                 <% } else { %>
-                                                                    <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                                    <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                                 <% } %>
-                                                                <td class="contentCells contentCells-icon">
+                                                                <td class="contentCells contentCells-icon firstContentCellViewers">
                                                                     <a href="<%= Url.Action("Editor", "Home", new { fileName = storedFile.Name, editorsType = "desktop", editorsMode = "view" }) %>" target="_blank">
                                                                         <img src="content/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                                     </a>
@@ -247,7 +257,7 @@
                                                                         <img src="content/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                                     </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-icon contentCells-shift">
+                                                                <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                                     <a href="webeditor.ashx?type=download&fileName=<%= HttpUtility.UrlEncode(storedFile.Name) %>">
                                                                         <img class="icon-download" src="content/images/download.svg" alt="Download" title="Download" />
                                                                     </a>
@@ -337,7 +347,7 @@
     </footer>
 
     <%: Scripts.Render("~/bundles/jquery", "~/bundles/scripts") %>
-    
+
     <script language="javascript" type="text/javascript">
         var ConverExtList = '<%= string.Join(",", DocManagerHelper.ConvertExts.ToArray()) %>';
         var EditedExtList = '<%= string.Join(",", DocManagerHelper.EditedExts.ToArray()) %>';

web/documentserver-example/csharp-mvc/WebEditor.ashx.cs

@@ -137,9 +137,9 @@ namespace OnlineEditorsExampleMVC
 
                 var fileName = Path.GetFileName(body["filename"].ToString());
                 var filePass = body["filePass"] != null ? body["filePass"].ToString() : null;
-                var fileUri = DocManagerHelper.GetFileUri(fileName, true);
+                var fileUri = DocManagerHelper.GetDownloadUrl(fileName);
 
-                var extension = (Path.GetExtension(fileUri).ToLower() ?? "").Trim('.');
+                var extension = (Path.GetExtension(fileName).ToLower() ?? "").Trim('.');
                 var internalExtension = DocManagerHelper.GetInternalExtension(FileUtility.GetFileType(fileName)).Trim('.');
 
                 // check if the file with such an extension can be converted

web/documentserver-example/csharp-mvc/web.appsettings.config

@@ -9,7 +9,7 @@
 
   <add key="filesize-max" value="5242880"/>
 
-  <add key="files.docservice.viewed-docs" value=".pdf|.djvu|.xps"/>
+  <add key="files.docservice.viewed-docs" value=".pdf|.djvu|.xps|.oxps"/>
   <add key="files.docservice.edited-docs" value=".docx|.xlsx|.csv|.pptx|.txt"/>
   <add key="files.docservice.convert-docs" value=".docm|.dotx|.dotm|.dot|.doc|.odt|.fodt|.ott|.xlsm|.xltx|.xltm|.xlt|.xls|.ods|.fods|.ots|.pptm|.ppt|.ppsx|.ppsm|.pps|.potx|.potm|.pot|.odp|.fodp|.otp|.rtf|.mht|.html|.htm|.xml|.epub|.fb2"/>
   <add key="files.docservice.timeout" value="120000" />

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

@@ -0,0 +1,607 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    #portal-info {
+        width: 65vw;
+    }
+
+    .left-panel {
+        margin-left: 0;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: right;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: left;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: right;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: left;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    #portal-info {
+        width: 50vw;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 14%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

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

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -53,23 +54,24 @@ a:visited {
 
 header {
     background: #333333;
-    height: 72px;
+    height: 48px;
     margin: 0 auto;
     min-width: 1152px;
     width: auto;
 }
 
 header img {
-    margin: 22px 0 22px 32px;
+    margin: 10px 0 22px 32px;
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
 
 .main {
-    height: calc(100% - 136px);
+    height: calc(100% - 112px);
     min-height: 536px;
 }
 
@@ -120,6 +122,7 @@ header img {
 label .checkbox {
     margin: 0 5px 3px 0;
     vertical-align: middle;
+    cursor: pointer;
 }
 
 .try-editor-list {
@@ -353,20 +356,36 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+	position: relative;
+	left: 0;
+	bottom: 0;
 }
 
-footer table {
-    border-spacing: 0;
+    footer > .center {
+        width: 100%;
+    }
+
+    footer table {
+        width: 100%;
+        border-spacing: 0;
 }
 
 footer table tr {
-    height: 64px;
+            position: relative;
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            align-content: center;
+            flex-wrap: wrap;
+            width: 100vw;
+            height: 64px;
 }
 
 footer table td {
-    padding-left: 32px;
+	display: block;
+            position: relative;
+            padding-left: 32px;
 }
 
 footer a,
@@ -381,8 +400,16 @@ footer a:hover {
     text-decoration: none;
 }
 
+    footer table tr td:first-child {
+        margin-left: 14%;
+    }
+
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
 }
 
 .help-block {
@@ -501,12 +528,12 @@ footer a:hover {
 
 .tableHeader tr {
     background: transparent;
-    cursor: default;
-    height: 40px;
-    -khtml-user-select: none;
-    user-select: none;
-    -moz-user-select: none;
-    -webkit-user-select: none;
+        cursor: default;
+        height: 40px;
+        -khtml-user-select: none;
+        user-select: none;
+        -moz-user-select: none;
+        -webkit-user-select: none;
 }
 
 .tableHeaderCell {
@@ -539,6 +566,7 @@ footer a:hover {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -568,31 +596,7 @@ footer a:hover {
 
 .info {
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
-}
-
-.tooltip {
-    background: #FFFFFF;
-    border-radius: 5px;
-    box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
-    color: #666666;
-    line-height: 160%;
-    max-width: 455px;
-    padding: 14px;
-    position: absolute;
-}
-
-.tooltip ul {
-    margin: 0;
-}
-
-.arrow {
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid #FFFFFF;
-    position: absolute;
-    transform: translate(-50%, -50%);
+    margin: -2px 5px;
 }
 
 .user-block-table {
@@ -610,10 +614,10 @@ footer a:hover {
     border: 1px solid #D0D5DA;
     box-sizing: border-box;
     border-radius: 3px;
-    cursor: pointer;
-    margin-top: 5px;
-    padding: 2px 5px;
-    width: 100%;
+            cursor: pointer;
+            margin-top: 5px;
+            padding: 2px 5px;
+            width: 100%;
 }
 
 .icon-delete {
@@ -680,4 +684,61 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+    .tableRow td:first-child {
+        display: flex;
+        flex-grow: 1;
+        max-width: 25%;
+    }
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+
+.user-descr {
+    display: inline-table;
+    width: 30vw;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.user-descr > b {
+    margin-left: 25px;
+}
+
+#portal-info {
+    display: block;
+    width: 70vw;
+}
+
+.portal-descr:nth-child(3) {
+    margin-bottom: 20px;
 }

web/documentserver-example/csharp/Default.aspx

@@ -34,6 +34,7 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
 
     <link rel="stylesheet" type="text/css" href="app_themes/stylesheet.css" />
+    <link rel="stylesheet" type="text/css" href="app_themes/media.css" />
 
     <link rel="stylesheet" type="text/css" href="app_themes/jquery-ui.css" />
 
@@ -82,19 +83,7 @@
                                         <tr>
                                             <td valign="middle">
                                                 <span class="select-user">Username</span>
-                                                <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
-                                                </br>
-                                                <% foreach (User user in Users.getAllUsers())
-                                                   { %>
-                                                       <b><%= user.name.IsEmpty() ? "Anonymous" : user.name %></b>
-                                                       <ul>
-                                                       <% foreach (string description in user.descriptions)
-                                                          { %>
-                                                              <li><%= description %></li>
-                                                       <% } %>
-                                                       </ul>
-                                                <% } %>"
-                                                src="app_themes/images/info.svg" />
+                                                <img class="info" src="app_themes/images/info.svg" />
                                                 <select class="select-user" id="user">
                                                     <% foreach (User user in Users.getAllUsers())
                                                        { %>
@@ -105,8 +94,7 @@
                                         </tr>
                                         <tr>
                                             <td valign="middle">
-                                                <span class="select-user">Language</span>
-                                                <img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="app_themes/images/info.svg" />
+                                                <span class="select-user">Language editors interface</span>
                                                 <select class="select-user" id="language">
                                                     <option value="en">English</option>
                                                     <option value="be">Belarusian</option>
@@ -148,16 +136,28 @@
                         </td>
                         <td class="section">
                             <div class="main-panel">
-                            <%  var storedFiles = GetStoredFiles();
-                                if (!storedFiles.Any())
-                                { %>
+                                <div id="portal-info">
                                     <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                     <span class="portal-descr">
                                         Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
                                         <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
                                     </span>
-                            <%  }
-                                else
+                                    <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
+                                    <% foreach (User user in Users.getAllUsers())
+                                      { %>
+                                      <div class="user-descr">
+                                       <b><%= user.name.IsEmpty() ? "Anonymous" : user.name %></b>
+                                           <ul>
+                                           <% foreach (string description in user.descriptions)
+                                                   { %>
+                                                       <li><%= description %></li>
+                                                <% } %>
+                                           </ul>
+                                       </div>
+                                       <% } %>
+                                </div>
+                            <%  var storedFiles = GetStoredFiles();
+                                if storedFiles.Any())
                                 { %>
                                     <div class="stored-list">
                                         <span class="header-list">Your documents</span>
@@ -182,10 +182,10 @@
                                                         var canEdit = EditedExts.Contains(Path.GetExtension(storedFile.Name).ToLower());
                                                         %>
 
-                                                        <tr class="tableRow" title="<%= storedFile.Name %>">
+                                                        <tr class="tableRow" title="<%= storedFile.Name %> [<%= GetFileVersion(storedFile.Name, HttpContext.Current.Request.UserHostAddress) %>]">
                                                             <td class="contentCells">
                                                                 <a class="stored-edit <%= docType %>" href="<%= editUrl %>" target="_blank">
-                                                                    <span title="<%= storedFile.Name %>"><%= storedFile.Name %></span>
+                                                                    <span><%= storedFile.Name %></span>
                                                                 </a>
                                                             </td>
                                                             <% if (canEdit) { %>
@@ -200,39 +200,51 @@
                                                                     </a>
                                                                 </td>
                                                                 <td class="contentCells contentCells-icon">
-                                                                    <% if (docType == "word") { %>
+                                                                    <a href="<%= editUrl + "&editorsType=desktop&editorsMode=comment" %>" target="_blank">
+                                                                         <img src="app_themes/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
+                                                                    </a>
+                                                                </td>
+                                                                <% if (docType == "word") { %>
+                                                                    <td class="contentCells contentCells-icon">
                                                                         <a href="<%= editUrl + "&editorsType=desktop&editorsMode=review" %>" target="_blank">
                                                                             <img src="app_themes/images/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
                                                                         </a>
-                                                                    <% } else if (docType == "cell") { %>
+                                                                    </td>
+                                                                <% } else if (docType == "cell") { %>
+                                                                    <td class="contentCells contentCells-icon">
                                                                         <a href="<%= editUrl + "&editorsType=desktop&editorsMode=filter" %>" target="_blank">
                                                                             <img src="app_themes/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
                                                                         </a>
-                                                                    <% } %>
-                                                                </td>
-                                                                <td class="contentCells contentCells-icon">
-                                                                    <a href="<%= editUrl + "&editorsType=desktop&editorsMode=comment" %>" target="_blank">
-                                                                        <img src="app_themes/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
+                                                                    </td>
+                                                                <% } %>
+                                                                <%if (docType != "word" && docType != "cell") { %>
+                                                                    <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                                <% } %>
+                                                                <% if (docType == "word") { %>
+                                                                    <td class="contentCells contentCells-icon">
+                                                                    <a href="<%= editUrl + "&editorsType=desktop&editorsMode=fillForms" %>" target="_blank">
+                                                                        <img src="app_themes/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
                                                                     </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-icon">
-                                                                    <% if (docType == "word") { %>
-                                                                        <a href="<%= editUrl + "&editorsType=desktop&editorsMode=fillForms" %>" target="_blank">
-                                                                            <img src="app_themes/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
-                                                                        </a>
-                                                                    <% } %>
-                                                                </td>
-                                                                <td class="contentCells contentCells-shift contentCells-icon">
-                                                                    <% if (docType == "word") { %>
+                                                                <% } else { %>
+                                                                    <td class="contentCells contentCells-icon"></td>
+                                                                <% } %>
+                                                                <% if (docType == "word") { %>
+                                                                    <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
                                                                         <a href="<%= editUrl + "&editorsType=desktop&editorsMode=blockcontent" %>" target="_blank">
                                                                             <img src="app_themes/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
                                                                         </a>
-                                                                    <% } %>
-                                                                </td>
+                                                                    </td>
+                                                                <% } else{%>
+                                                                    <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                                <%} %>
+                                                                <%if (docType != "word" && docType != "cell"){%>
+                                                                    <td class="contentCells contentCells-icon "></td>
+                                                                <% } %>
                                                             <% } else { %>
-                                                                <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                                <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                             <% } %>
-                                                            <td class="contentCells contentCells-icon">
+                                                            <td class="contentCells contentCells-icon firstContentCellViewers">
                                                                 <a href="<%= editUrl + "&editorsType=desktop&editorsMode=view" %>" target="_blank">
                                                                     <img src="app_themes/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                                 </a>
@@ -247,7 +259,7 @@
                                                                     <img src="app_themes/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                                 </a>
                                                             </td>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
+                                                            <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                                 <a href="webeditor.ashx?type=download&fileName=<%= HttpUtility.UrlEncode(storedFile.Name) %>">
                                                                     <img class="icon-download" src="app_themes/images/download.svg" alt="Download" title="Download" />
                                                                 </a>

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

@@ -56,7 +56,7 @@ namespace OnlineEditorsExample
                 ".dot", ".dotx", ".dotm",
                 ".odt", ".fodt", ".ott", ".rtf", ".txt",
                 ".html", ".htm", ".mht", ".xml",
-                ".pdf", ".djvu", ".fb2", ".epub", ".xps"
+                ".pdf", ".djvu", ".fb2", ".epub", ".xps", ".oxps"
             };
 
         // get an internal file extension
@@ -202,7 +202,7 @@ namespace OnlineEditorsExample
         // get the last file version by its history directory
         public static int GetFileVersion(string historyPath)
         {
-            if (!Directory.Exists(historyPath)) return 0;
+            if (!Directory.Exists(historyPath)) return 1;
             return Directory.EnumerateDirectories(historyPath).Count() + 1;  // run through all the file versions and count them
         }
 
@@ -384,7 +384,8 @@ namespace OnlineEditorsExample
                 fileUrl.Path = HttpRuntime.AppDomainAppVirtualPath
                     + (HttpRuntime.AppDomainAppVirtualPath.EndsWith("/") ? "" : "/")
                     + "webeditor.ashx";
-                fileUrl.Query = "type=download&fileName=" + HttpUtility.UrlEncode(_fileName);
+                fileUrl.Query = "type=download&fileName=" + HttpUtility.UrlEncode(_fileName)
+                + "&userAddress=" + HttpUtility.UrlEncode(HttpContext.Current.Request.UserHostAddress);
 
                 // get the url to the converted file
                 string newFileUri;

web/documentserver-example/csharp/DocEditor.aspx

@@ -184,10 +184,11 @@
         { %>
         // add mentions for not anonymous users
         config.events['onRequestUsers'] = function () {
-            docEditor.setUsers({
+            docEditor.setUsers({  // set a list of users to mention in the comments
                 "users": <%= UsersForMentions %>
         });
         };
+        // the user is mentioned in a comment
         config.events['onRequestSendNotify'] = function (event) {
             var actionLink = JSON.stringify(event.data.actionLink);
             console.log("onRequestSendNotify:");

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

@@ -86,6 +86,7 @@ namespace OnlineEditorsExample
             }
         }
 
+        // get url to the created file
         public static string getCreateUrl(String documentType, String editorsType)
         {
             var createUrl = new UriBuilder(_Default.GetServerUrl(false));
@@ -98,6 +99,7 @@ namespace OnlineEditorsExample
             return createUrl.ToString();
         }
 
+        // get url to download a file
         public static string getDownloadUrl
         {
             get
@@ -167,7 +169,7 @@ namespace OnlineEditorsExample
             {
                 new Dictionary<string, string>()
                 {
-                    { "image", templatesImageUrl },
+                    { "image", "" },
                     { "title", "Blank" },
                     { "url", createUrl }
                 },

web/documentserver-example/csharp/README.md

@@ -20,29 +20,40 @@ Connect the editors to your website by specifying the path to the editors instal
 ```
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *DocEditor.aspx* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *DocEditor.aspx* file.
 
 ## Step 3. Install the prerequisites
 
 Check that your system meets the requirements:
-* Microsoft .NET Framework: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
-* Internet Information Services: version 7 or later.
+* **Microsoft .NET Framework**: version 4.5 (download it from the [official Microsoft website](https://www.microsoft.com/en-US/download/details.aspx?id=30653));
+* **Internet Information Services**: version 7 or later.
 
 ## Step 4. Run your website with the editors
-1. Run the Internet Information Service (IIS) manager
-	Start -> ControlPanel -> System and Security -> Administrative Tools -> Internet Information Services (IIS) Manager
-2. Add your website in the IIS Manager
+1. Run the Internet Information Service (IIS) Manager:
+
+	**Start** -> **Control Panel** -> **System and Security** -> **Administrative Tools** -> **Internet Information Services (IIS) Manager**
+
+2. Add your website in the IIS Manager.
+	
 	On the **Connections** panel right-click the **Sites** node in the tree, then click **Add Website**.
+
 	![add](screenshots/add.png)
 3. In the **Add Website** dialog box specify the name of the folder with the .Net (C#) project in the **Site name** box.
+	
 	Specify the path to the folder with your project in the **Physical Path** box.
+	
 	Specify the unique value used only for this website in the **Port** box.
+
 	![sitename](screenshots/sitename.png)
-4. Check for the .NET platform version specified in IIS manager for you website. Choose **v4.0.** version.
-	Click the **Application Pool** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+4. Check for the .NET platform version specified in IIS Manager for you website. Choose **v4.0.** version.
+	
+	**Application Pools** -> right-click the platform name -> **Set application Pool defaults** -> **.NET CLR version**
+
 	![platform](screenshots/platform.png)
-5. Browse your website with the IIS manager:
+5. Browse your website with the IIS Manager:
+
 	Right-click the site -> **Manage Website** -> **Browse**
+	
 	![browse](screenshots/browse.png)
 
 ## Step 5. Check accessibility

web/documentserver-example/csharp/TrackManager.cs

@@ -92,6 +92,9 @@ namespace OnlineEditorsExample
         // file saving process
         public static int processSave(Dictionary<string, object> fileData, string fileName, string userAddress)
         {
+            if (fileData["url"].Equals(null)) {
+                throw new Exception("DownloadUrl is null");
+            }
             var downloadUri = (string)fileData["url"];
             var curExt = Path.GetExtension(fileName).ToLower();  // get current file extension
             var downloadExt = Path.GetExtension(downloadUri).ToLower() ?? "";  // get the extension of the downloaded file
@@ -166,6 +169,9 @@ namespace OnlineEditorsExample
         // file force saving process
         public static int processForceSave(Dictionary<string, object> fileData, string fileName, string userAddress)
         {
+            if (fileData["url"].Equals(null)) {
+                throw new Exception("DownloadUrl is null");
+            }
             var downloadUri = (string)fileData["url"];
 
             string curExt = Path.GetExtension(fileName).ToLower();  // get current file extension

web/documentserver-example/csharp/Users.cs

@@ -125,6 +125,7 @@ namespace OnlineEditorsExample
                 )
         };
 
+        // get a user by id specified
         public static User getUser(string id)
         {
             foreach (User user in users)
@@ -134,11 +135,13 @@ namespace OnlineEditorsExample
             return users[0];
         }
 
+        // get a list of all the users
         public static List<User> getAllUsers()
         {
             return users;
         }
 
+        // get a list of users with their names and emails for mentions
         public static List<Dictionary<string, object>> getUsersForMentions(string id)
         {
             List<Dictionary<string, object>> usersData = new List<Dictionary<string, object>>();

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

@@ -277,30 +277,58 @@ if (typeof jQuery != "undefined") {
         });
     });
 
-    jq(".info").mouseover(function (event) {
-        var target = event.target;
-        var id = target.dataset.id ? target.dataset.id : target.id;
-        var tooltip = target.dataset.tooltip;
-
-        jq("<div class='tooltip'>" + tooltip + "</div><div class='arrow'></div>").appendTo("body");
-
-        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth();
-
-        var topElement = jq("#" + id).offset().top;
-        var halfHeightElement = jq("#" + id).outerHeight() / 2;
-
-        var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement);
-        var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2;
-        if (heightToFooter > (halfHeightTooltip + 10)) {
-            var top = topElement + halfHeightElement - halfHeightTooltip;
-        } else {
-            var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10;
+        function showUserTooltip (isMobile) {
+        if ( jq("div#portal-info").is(":hidden") ) {
+            jq("div#portal-info").show();
+            jq("div.stored-list").hide();
+        } else if (isMobile && jq("div#portal-info").is(":visible")) {
+            jq("div#portal-info").hide();
+            jq("div.stored-list").show();
         }
+    };
 
-        jq("div.tooltip").css({ "top": top, "left": left + 10 });
-        jq("div.arrow").css({ "top": topElement + halfHeightElement, "left": left + 6 });
-    }).mouseout(function () {
-        jq("div.tooltip").remove();
-        jq("div.arrow").remove();
-    });
+    var fileList = jq("tr.tableRow");
+    if (fileList.length > 0) {
+        console.log(jq("div#portal-info").is(":visible"));
+        jq("div#portal-info").hide();
+    }
+
+    var mouseIsOverTooltip = false;
+    var hideTooltipTimeout = null;
+    if (/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
+        .test(navigator.userAgent)) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                jq(".info").on("touchend", function () {
+                    showUserTooltip(true);
+                });
+            }
+    } else {
+        jq(".info").mouseover(function (event) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                showUserTooltip(false);
+
+                jq("div#portal-info").mouseenter(function () {
+                    mouseIsOverTooltip = true;
+                }).mouseleave(function () {
+                    mouseIsOverTooltip = false;
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                })
+            }
+        }).mouseleave(function () {
+            hideTooltipTimeout = setTimeout(function () {
+                if (mouseIsOverTooltip == false && fileList.length > 0) {
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                }
+            }, 500);
+        });
+    }
+}
 }

web/documentserver-example/csharp/settings.config

@@ -5,7 +5,7 @@
   <add key="filesize-max" value="5242880"/>
   <add key="storage-path" value=""/>
 
-  <add key="files.docservice.viewed-docs" value=".pdf|.djvu|.xps"/>
+  <add key="files.docservice.viewed-docs" value=".pdf|.djvu|.xps|.oxps"/>
   <add key="files.docservice.edited-docs" value=".docx|.xlsx|.csv|.pptx|.txt"/>
   <add key="files.docservice.convert-docs" value=".docm|.dotx|.dotm|.dot|.doc|.odt|.fodt|.ott|.xlsm|.xltx|.xltm|.xlt|.xls|.ods|.fods|.ots|.pptm|.ppt|.ppsx|.ppsm|.pps|.potx|.potm|.pot|.odp|.fodp|.otp|.rtf|.mht|.html|.htm|.xml|.epub|.fb2"/>
   <add key="files.docservice.timeout" value="120000" />

web/documentserver-example/java/README.md

@@ -10,7 +10,7 @@ It is aimed at testing the editors. Please, do not use it for production without
 
 Download and install ONLYOFFICE Docs (packaged as Document Server). 
 
-See the detailed guide to learn how to install Document Server [for Windows](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx). 
+See the detailed guide to learn how to [install Document Server for Windows](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx). 
 
 ### Step 2. Download the Java code for the editors integration
 
@@ -24,14 +24,14 @@ files.docservice.url.site=https://documentserver/
 
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *\src\main\webapp\editor.jsp* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *\src\main\webapp\editor.jsp* file.
 
 ### Step 3. Install the prerequisites
 
 To run the Java example code, install the Java version appropriate for your OS and web server **Apache Tomcat**:
 
-* Java (download from [the Oracle official website](https://www.java.com/en/download/manual.jsp));
-* Apache Tomcat (download from [the official website](http://tomcat.apache.org/)).
+* **Java** (download from [the Oracle official website](https://www.java.com/en/download/manual.jsp));
+* **Apache Tomcat** (download from [the official website](http://tomcat.apache.org/)).
 
 ### Step 4. Run Apache Tomcat
 
@@ -43,9 +43,9 @@ To run the Java example code, install the Java version appropriate for your OS a
 	C:\Program Files\Java\jdk1.8.0_65
 	```
 
-	In **Windows 7** right click **My Computer** and select **Properties**, then click **Advanced**.
+	In **Windows 7**, right click **My Computer** and select **Properties**, then click **Advanced**.
 
-	In **Windows 8** go to **Control Panel** -> **System** -> **Advanced System Settings**.
+	In **Windows 8**, go to **Control Panel** and select **System**, then click **Advanced System Settings**.
 
 	Click the **Environment Variables** button.
 
@@ -53,7 +53,7 @@ To run the Java example code, install the Java version appropriate for your OS a
 
 	In the **Variable Name** field, enter **JAVA_HOME** if you installed the **JDK** (Java Development Kit) or **JRE_HOME** if you installed the **JRE** (Java Runtime Environment).
 
-	In the **Variable Value** field, enter your **JDK** or **JRE** installation path, for example C:\Program Files\Java\jdk1.8.0_65.
+	In the **Variable Value** field, enter your **JDK** or **JRE** installation path, for example *C:\Program Files\Java\jdk1.8.0_65*.
 
 	![make-var](screenshots/make-var.png)
 
@@ -94,6 +94,7 @@ To run the Java example code, install the Java version appropriate for your OS a
 	![manager](screenshots/manager.jpg)
 
 2. Tomcat Web Application Manager will request the **username** and the **password:**
+
 	![author](screenshots/author.jpg)
    
 
@@ -106,11 +107,14 @@ To run the Java example code, install the Java version appropriate for your OS a
 	</tomcat-users>
 	```
 
-3. Upload the Java project in Tomcat Web Application Manager. For that click **Choose File** in the **WAR file to deploy** section and find the **.war** file in the Java project folder, then click **Deploy**.
+3. Upload the Java project in Tomcat Web Application Manager. For that click **Choose File** in the **WAR file to deploy** section and find the *.war* file in the Java project folder, then click **Deploy**.
+
 	![upload-app](screenshots/upload-app.jpg)
+
 	![war-file](screenshots/war-file.jpg) 
 
 4. You will see the project in the **Application List**:
+	
 	![manager-app](screenshots/manager-app.jpg) 
    
 5. Click the link with the application name to run it.
@@ -127,7 +131,7 @@ Make sure that the Document Server has access to the server with the example ins
 
 Download and install ONLYOFFICE Docs (packaged as Document Server). 
 
-See the detailed guide to learn how to install Document Server [for Linux](https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx). 
+See the detailed guide to learn how to [install Document Server for Linux](https://helpcenter.onlyoffice.com/installation/docs-developer-install-ubuntu.aspx). 
 
 ### Step 2. Install the prerequisites and run the website with the editors
 
@@ -159,13 +163,13 @@ See the detailed guide to learn how to install Document Server [for Linux](https
     nano src/main/resources/settings.properties
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     files.docservice.url.site=https://documentserver/
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 5. Install **Maven**:
 
@@ -191,22 +195,22 @@ See the detailed guide to learn how to install Document Server [for Linux](https
     sudo nano /var/lib/tomcat8/conf/tomcat-users.xml
     ```
 
-   Insert the line:
+   Insert the lines:
 
     ```
     <role rolename="manager-gui"/>
     <user username="USERNAME" password="PASSWORD" roles="manager-gui"/>
     ```
 
-	Where the **USERNAME** and **PASSWORD** are your own credentials data.
+	where the **USERNAME** and **PASSWORD** are your own credentials data.
 
-	Restart tomcat:
+	Restart Tomcat:
 
 	```
 	systemctl restart tomcat8
 	```
 
-9. Open the tomcat administration page in browser with the admin user credentions:
+9. Open the Tomcat administration page in browser with the admin user credentions:
 
     ```
     http://localhost:8080/manager/html
@@ -234,15 +238,15 @@ Make sure that the Document Server has access to the server with the example ins
 	nano src/main/resources/settings.properties
 	```
 	
-2. Edit the following lines:
+2. Edit the following line:
 
 	```
 	files.docservice.url.site=https://documentserver/
 	```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-3. Run the next command in the java example directory:
+3. Run the next command in the Java example directory:
 
 	```
 	docker-compose up

web/documentserver-example/java/src/main/java/controllers/IndexServlet.java

@@ -179,7 +179,7 @@ public class IndexServlet extends HttpServlet
 
             String fileName = FileUtility.GetFileName((String) body.get("filename"));
             String filePass = body.get("filePass") != null ? (String) body.get("filePass") : null;
-            String fileUri = DocumentManager.GetFileUri(fileName, true);
+            String fileUri = DocumentManager.GetDownloadUrl(fileName);
             String fileExt = FileUtility.GetFileExtension(fileName);
             FileType fileType = FileUtility.GetFileType(fileName);
             String internalFileExt = DocumentManager.GetInternalExtension(fileType);

web/documentserver-example/java/src/main/java/entities/FileModel.java

@@ -67,7 +67,7 @@ public class FileModel
 
         // add templates for the "Create New" from menu option
         Map<String, String> templateForBlankDocument = new HashMap<>();
-        templateForBlankDocument.put("image", templatesImageUrl);
+        templateForBlankDocument.put("image", "");
         templateForBlankDocument.put("title", "Blank");
         templateForBlankDocument.put("url", createUrl);
         templates.add(templateForBlankDocument);

web/documentserver-example/java/src/main/java/helpers/DocumentManager.java

@@ -199,7 +199,7 @@ public class DocumentManager
     {
         File dir = new File(historyPath);
 
-        if (!dir.exists()) return 0;  // if the history path doesn't exist, then the file version is 0
+        if (!dir.exists()) return 1;  // if the history path doesn't exist, then the file version is 1
 
         File[] dirs = dir.listFiles(new FileFilter() {  // take only directories from the history folder
             @Override
@@ -390,6 +390,7 @@ public class DocumentManager
         }
     }
 
+    // get url to the created file
     public static String GetCreateUrl (FileType fileType) {
         String serverPath = GetServerUrl(false);
         String fileExt = GetInternalExtension(fileType).replace(".", "");
@@ -398,6 +399,7 @@ public class DocumentManager
         return serverPath + "/EditorServlet" + query;
     }
 
+    // get url to download a file
     public static String GetDownloadUrl(String fileName) {
         String serverPath = GetServerUrl(true);
         String hostAddress = CurUserHostAddress(null);

web/documentserver-example/java/src/main/java/helpers/FileUtility.java

@@ -57,7 +57,7 @@ public class FileUtility
                     ".dot", ".dotx", ".dotm",
                     ".odt", ".fodt", ".ott", ".rtf", ".txt",
                     ".html", ".htm", ".mht", ".xml",
-                    ".pdf", ".djvu", ".fb2", ".epub", ".xps"
+                    ".pdf", ".djvu", ".fb2", ".epub", ".xps", ".oxps"
             );
 
     // spreadsheet extensions

web/documentserver-example/java/src/main/java/helpers/TrackManager.java

@@ -118,6 +118,9 @@ public class TrackManager {
 
     // file saving process
     public static void processSave(JSONObject body, String fileName, String userAddress) throws Exception {
+        if (body.get("url") == null) {
+            throw new Exception("DownloadUrl is null");
+        }
         String downloadUri = (String) body.get("url");
         String changesUri = (String) body.get("changesurl");
         String key = (String) body.get("key");
@@ -179,7 +182,9 @@ public class TrackManager {
 
     // file force saving process
     public static void processForceSave(JSONObject body, String fileName, String userAddress) throws Exception {
-
+        if (body.get("url") == null) {
+            throw new Exception("DownloadUrl is null");
+        }
         String downloadUri = (String) body.get("url");
 
         String curExt = FileUtility.GetFileExtension(fileName);  // get current file extension

web/documentserver-example/java/src/main/java/helpers/Users.java

@@ -77,6 +77,7 @@ public class Users {
                 null, new ArrayList<String>(), descr_user_0, false));
     }};
 
+    // get a user by id specified
     public static User getUser (String id) {
         for (User user : users) {
             if (user.id.equals(id)) {
@@ -86,10 +87,12 @@ public class Users {
         return users.get(0);
     }
 
+    // get a list of all the users
     public static List<User> getAllUsers () {
         return users;
     }
 
+    // get a list of users with their names and emails for mentions
     public static List<Map<String, Object>> getUsersForMentions (String id) {
         List<Map<String, Object>> usersData = new ArrayList<>();
         for (User user : users) {

web/documentserver-example/java/src/main/resources/settings.properties

@@ -1,7 +1,7 @@
 filesize-max=5242880
 storage-folder=app_data
 
-files.docservice.viewed-docs=.pdf|.djvu|.xps
+files.docservice.viewed-docs=.pdf|.djvu|.xps|.oxps
 files.docservice.edited-docs=.docx|.xlsx|.csv|.pptx|.txt
 files.docservice.convert-docs=.docm|.dotx|.dotm|.dot|.doc|.odt|.fodt|.ott|.xlsm|.xltx|.xltm|.xlt|.xls|.ods|.fods|.ots|.pptm|.ppt|.ppsx|.ppsm|.pps|.potx|.potm|.pot|.odp|.fodp|.otp|.rtf|.mht|.html|.htm|.xml|.epub|.fb2
 files.docservice.timeout=120000

web/documentserver-example/java/src/main/webapp/css/media.css

@@ -0,0 +1,607 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    #portal-info {
+        width: 65vw;
+    }
+
+    .left-panel {
+        margin-left: 0;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: right;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: left;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: right;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: left;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    #portal-info {
+        width: 50vw;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 14%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

web/documentserver-example/java/src/main/webapp/css/stylesheet.css

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -53,23 +54,24 @@ a:visited {
 
 header {
     background: #333333;
-    height: 72px;
+    height: 48px;
     margin: 0 auto;
     min-width: 1152px;
     width: auto;
 }
 
 header img {
-    margin: 22px 0 22px 32px;
+    margin: 10px 0 22px 32px;
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
 
 .main{
-    height: calc(100% - 136px);
+    height: calc(100% - 112px);
     min-height: 536px;
 }
 
@@ -354,19 +356,35 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+	position: relative;
+	left: 0;
+	bottom: 0;
+}
+
+footer > .center {
+    width: 100%;
 }
 
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
+    position: relative;
     padding-left: 32px;
 }
 
@@ -382,8 +400,15 @@ footer a:hover {
     text-decoration: none;
 }
 
+footer table tr td:first-child {
+    margin-left: 14%;
+}
+
 .copy {
-    padding-left: 510px;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
 }
 
 .help-block {
@@ -540,6 +565,7 @@ footer a:hover {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #e5e5e5;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -569,31 +595,7 @@ footer a:hover {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
-}
-
-.tooltip {
-    background: #FFFFFF;
-    border-radius: 5px;
-    box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
-    color: #666666;
-    line-height: 160%;
-    max-width: 455px;
-    padding: 14px;
-    position: absolute;
-}
-
- .tooltip ul{
-     margin: 0;
-}
-
-.arrow{
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid #FFFFFF;
-    position: absolute;
-    transform: translate(-50%, -50%);
+    margin: -2px 5px;
 }
 
 .user-block-table {
@@ -622,7 +624,11 @@ footer a:hover {
 }
 
 .left-panel {
-    width: 256px;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    max-width: 240px;
+    width: 100%;
     background: #F5F5F5;
 }
 
@@ -681,4 +687,61 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+
+.user-descr {
+    display: inline-table;
+    width: 30vw;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.user-descr > b {
+    margin-left: 25px;
+}
+
+#portal-info {
+    display: block;
+    width: 70vw;
+}
+
+.portal-descr:nth-child(3) {
+    margin-bottom: 20px;
+}

web/documentserver-example/java/src/main/webapp/editor.jsp

@@ -162,10 +162,11 @@
         <% if (usersForMentions != null) { %>
             // add mentions for not anonymous users
             config.events['onRequestUsers'] = function () {
-                docEditor.setUsers({
+                docEditor.setUsers({  // set a list of users to mention in the comments
                     "users": ${usersForMentions}
                 });
             };
+            // the user is mentioned in a comment
             config.events['onRequestSendNotify'] = function (event) {
                 var actionLink = JSON.stringify(event.data.actionLink);
                 console.log("onRequestSendNotify:");

web/documentserver-example/java/src/main/webapp/index.jsp

@@ -35,6 +35,7 @@
         <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
         <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
         <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
+        <link rel="stylesheet" type="text/css" href="css/media.css">
     </head>
     <body>
         <header>
@@ -80,17 +81,7 @@
                                             <tr>
                                                 <td valign="middle">
                                                     <span class="select-user">Username</span>
-                                                    <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
-                                                    </br>
-                                                    <% for (User user : Users.getAllUsers()) { %>
-                                                        <b><%= user.name == null ? "Anonymous" : user.name %></b>
-                                                        <ul>
-                                                            <% for (String description : user.descriptions) { %>
-                                                                <li><%= description %></li>
-                                                            <% } %>
-                                                        </ul>
-                                                    <% } %>"
-                                                    src="css/img/info.svg" />
+                                                    <img class="info" src="css/img/info.svg" />
                                                     <select class="select-user" id="user">
                                                         <% for (User user : Users.getAllUsers()) { %>
                                                             <option value="<%= user.id %>"><%= user.name == null ? "Anonymous" : user.name %></option>
@@ -100,8 +91,7 @@
                                             </tr>
                                             <tr>
                                                 <td valign="middle">
-                                                    <span class="select-user">Language</span>
-                                                    <img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="css/img/info.svg" />
+                                                    <span class="select-user">Language editors interface</span>
                                                     <select class="select-user" id="language">
                                                         <option value="en">English</option>
                                                         <option value="be">Belarusian</option>
@@ -144,15 +134,27 @@
                         </td>
                         <td class="section">
                             <div class="main-panel">
-                                <% DocumentManager.Init(request, response); %>
-                                <% File[] files = DocumentManager.GetStoredFiles(null); %>
-                                <% if (files.length <= 0) { %>
+                                <div id="portal-info">
                                     <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                     <span class="portal-descr">
                                         Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
                                         <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
                                     </span>
-                                <% } else { %>
+                                    <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
+                                    <% for (User user : Users.getAllUsers()) { %>
+                                        <div class="user-descr">
+                                            <b><%= user.name == null ? "Anonymous" : user.name %></b>
+                                            <ul>
+                                                <% for (String description : user.descriptions) { %>
+                                                <li><%= description %></li>
+                                                <% } %>
+                                            </ul>
+                                        </div>
+                                    <% } %>
+                                </div>
+                                <% DocumentManager.Init(request, response); %>
+                                <% File[] files = DocumentManager.GetStoredFiles(null); %>
+                                <% if (files.length > 0)  { %>
                                     <div class="stored-list">
                                        <span class="header-list">Your documents</span>
                                        <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
@@ -172,11 +174,12 @@
                                                     <% for (Integer i = 0; i < files.length; i++) {
                                                         String docType = FileUtility.GetFileType(files[i].getName()).toString().toLowerCase();
                                                         Boolean canEdit = DocumentManager.GetEditedExts().contains(FileUtility.GetFileExtension(files[i].getName()));
+                                                        String version=" ["+DocumentManager.GetFileVersion(DocumentManager.HistoryDir(DocumentManager.StoragePath(files[i].getName(), null)))+"]";
                                                     %>
-                                                        <tr class="tableRow" title="<%= files[i].getName() %>">
+                                                        <tr class="tableRow" title="<%= files[i].getName() %> [<%= version %>]">
                                                             <td class="contentCells">
                                                                 <a class="stored-edit <%= docType %>" href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>" target="_blank">
-                                                                    <span title="<%= files[i].getName() %>"><%= files[i].getName() %></span>
+                                                                    <span><%= files[i].getName() %></span>
                                                                 </a>
                                                             </td>
                                                             <% if (canEdit) { %>
@@ -190,40 +193,52 @@
                                                                         <img src="css/img/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices"/>
                                                                     </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-icon">
-                                                                    <% if (docType.equals("word")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=review" target="_blank">
-                                                                            <img src="css/img/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
-                                                                        </a>
-                                                                    <% } else if (docType.equals("cell")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=filter" target="_blank">
-                                                                            <img src="css/img/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" />
-                                                                        </a>
-                                                                    <% } %>
-                                                                </td>
                                                                 <td class="contentCells contentCells-icon">
                                                                     <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=comment" target="_blank">
                                                                         <img src="css/img/comment.svg" alt="Open in editor for comment" title="Open in editor for comment"/>
                                                                     </a>
                                                                 </td>
+                                                                <% if (docType.equals("word")) { %>
                                                                 <td class="contentCells contentCells-icon">
-                                                                    <% if (docType.equals("word")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=fillForms" target="_blank">
-                                                                            <img src="css/img/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
-                                                                        </a>
-                                                                    <% } %>
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=review" target="_blank">
+                                                                        <img src="css/img/review.svg" alt="Open in editor for review" title="Open in editor for review"/>
+                                                                    </a>
                                                                 </td>
-                                                                <td class="contentCells contentCells-shift contentCells-icon">
-                                                                    <% if (docType.equals("word")) { %>
-                                                                        <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=blockcontent" target="_blank">
-                                                                            <img src="css/img/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
-                                                                        </a>
-                                                                    <% } %>
+                                                                <% } else if (docType.equals("cell")) { %>
+                                                                <td class="contentCells contentCells-icon">
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=filter" target="_blank">
+                                                                        <img src="css/img/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter"/>
+                                                                    </a>
                                                                 </td>
+                                                                <% } %>
+                                                                <% if (!docType.equals("cell") && !docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-icon contentCellsEmpty"></td>
+                                                                <% } %>
+                                                                <% if (docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-icon">
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=fillForms" target="_blank">
+                                                                        <img src="css/img/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms"/>
+                                                                    </a>
+                                                                </td>
+                                                                <% } else { %>
+                                                                <td class="contentCells contentCells-icon "></td>
+                                                                <% } %>
+                                                                <% if (docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                                                                    <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=blockcontent" target="_blank">
+                                                                        <img src="css/img/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification"/>
+                                                                    </a>
+                                                                </td>
+                                                                <% } else { %>
+                                                                <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
+                                                                <% } %>
+                                                                <% if (!docType.equals("cell") && !docType.equals("word")) { %>
+                                                                <td class="contentCells contentCells-icon "></td>
+                                                                <% } %>
                                                             <% } else { %>
-                                                                <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                            <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                             <% } %>
-                                                            <td class="contentCells contentCells-icon">
+                                                            <td class="contentCells contentCells-icon firstContentCellViewers">
                                                                 <a href="EditorServlet?fileName=<%= URLEncoder.encode(files[i].getName(), "UTF-8") %>&type=desktop&mode=view" target="_blank">
                                                                     <img src="css/img/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens"/>
                                                                 </a>
@@ -238,7 +253,7 @@
                                                                     <img src="css/img/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode"/>
                                                                 </a>
                                                             </td>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
+                                                            <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                                 <a href="IndexServlet?type=download&fileName=<%=URLEncoder.encode(files[i].getName(), "UTF-8")%>">
                                                                     <img class="icon-download" src="css/img/download.svg" alt="Download" title="Download" />
                                                                 </a>

web/documentserver-example/java/src/main/webapp/scripts/jscript.js

@@ -276,30 +276,58 @@ if (typeof jQuery !== "undefined") {
         });
     });
 
-    jq(".info").mouseover(function (event) {
-        var target = event.target;
-        var id = target.dataset.id ? target.dataset.id : target.id;
-        var tooltip = target.dataset.tooltip;
-
-        jq("<div class='tooltip'>" + tooltip + "</div><div class='arrow'></div>").appendTo("body");
-
-        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth();
-
-        var topElement = jq("#" + id).offset().top;
-        var halfHeightElement = jq("#" + id).outerHeight() / 2;
-
-        var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement);
-        var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2;
-        if (heightToFooter > (halfHeightTooltip + 10)) {
-            var top = topElement + halfHeightElement - halfHeightTooltip;
-        } else {
-            var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10;
+        function showUserTooltip (isMobile) {
+        if ( jq("div#portal-info").is(":hidden") ) {
+            jq("div#portal-info").show();
+            jq("div.stored-list").hide();
+        } else if (isMobile && jq("div#portal-info").is(":visible")) {
+            jq("div#portal-info").hide();
+            jq("div.stored-list").show();
         }
+    };
 
-        jq("div.tooltip").css({"top": top, "left": left + 10});
-        jq("div.arrow").css({"top": topElement + halfHeightElement, "left": left + 6});
-    }).mouseout(function () {
-        jq("div.tooltip").remove();
-        jq("div.arrow").remove();
-    });
+    var fileList = jq("tr.tableRow");
+    if (fileList.length > 0) {
+        console.log(jq("div#portal-info").is(":visible"));
+        jq("div#portal-info").hide();
+    }
+
+    var mouseIsOverTooltip = false;
+    var hideTooltipTimeout = null;
+    if (/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
+        .test(navigator.userAgent)) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                jq(".info").on("touchend", function () {
+                    showUserTooltip(true);
+                });
+            }
+    } else {
+        jq(".info").mouseover(function (event) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                showUserTooltip(false);
+
+                jq("div#portal-info").mouseenter(function () {
+                    mouseIsOverTooltip = true;
+                }).mouseleave(function () {
+                    mouseIsOverTooltip = false;
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                })
+            }
+        }).mouseleave(function () {
+            hideTooltipTimeout = setTimeout(function () {
+                if (mouseIsOverTooltip == false && fileList.length > 0) {
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                }
+            }, 500);
+        });
+    }
+}
 }

web/documentserver-example/js/init.js

@@ -65,7 +65,7 @@ function key(k) {
 };
 
 var getDocumentType = function (ext) {
-    if (".doc.docx.docm.dot.dotx.dotm.odt.fodt.ott.rtf.txt.html.htm.mht.xml.pdf.djvu.fb2.epub.xps".indexOf(ext) != -1) return "text";
+    if (".doc.docx.docm.dot.dotx.dotm.odt.fodt.ott.rtf.txt.html.htm.mht.xml.pdf.djvu.fb2.epub.xps.oxps".indexOf(ext) != -1) return "text";
     if (".xls.xlsx.xlsm.xlt.xltx.xltm.ods.fods.ots.csv".indexOf(ext) != -1) return "spreadsheet";
     if (".pps.ppsx.ppsm.ppt.pptx.pptm.pot.potx.potm.odp.fodp.otp".indexOf(ext) != -1) return "presentation";
     return null;

web/documentserver-example/nodejs/README.md

@@ -24,15 +24,15 @@ You need to connect the editors to your website. Specify the path to the editors
 
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *\views\editor.ejs* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *\views\editor.ejs* file.
 
 ### Step 3. Install Node.js environment
 
-Install the **node.js** environment which is going to be used to run the Node.js project. Please follow the link at the official website: https://nodejs.org/en/download/ choosing the correct version for your Windows OS (32-bit or 64-bit).
+Install the **node.js** environment which is going to be used to run the Node.js project. Please follow the link at the [official website](https://nodejs.org/en/download/) choosing the correct version for your Windows OS (32-bit or 64-bit).
 
 ### Step 4. Run the Node.js code
 
-We will run the code in Node.js runtime environment and will interact with it using the command line interface (cmd).
+We will run the code in Node.js runtime environment and will interact with it using the **command line interface (cmd)**.
 
 1. Launch the **Command Prompt** and switch to the folder with the Node.js project code, for example:
 
@@ -40,7 +40,7 @@ We will run the code in Node.js runtime environment and will interact with it us
     cd /d "C:\Node.js Example"
     ```
 
-2. Node.js comes with a package manager, **node package manager (npm)**, which is automatically installed along with Node.js. To run the Node.js code, install the project modules using the following npm command:
+2. Node.js comes with a package manager, **node package manager (npm)**, which is automatically installed along with Node.js. To run the Node.js code, install the project modules using the following *npm* command:
 
     ```
     npm install
@@ -114,13 +114,13 @@ See the detailed guide to learn how to [install Document Server for Linux](https
     nano config/default.json
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     "siteUrl": "https://documentserver/"
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 6. Run the project with Node.js:
 

web/documentserver-example/nodejs/app.js

@@ -106,6 +106,7 @@ app.get("/", function (req, res) {  // define a handler for default page
             storedFiles: docManager.getStoredFiles(),
             params: docManager.getCustomParams(),
             users: users,
+            serverUrl: docManager.getServerUrl(),
         });
 
     }
@@ -440,7 +441,14 @@ app.post("/track", function (req, res) {  // define a handler for tracking file
         }
 
         // file saving process
-        var processSave = function (downloadUri, body, fileName, userAddress, resp) {
+        var processSave = function (downloadUri, body, fileName, userAddress) {
+
+            if (!downloadUri) {
+                response.write("{\"error\":1}");
+                response.end();
+                return;
+            }
+
             var curExt = fileUtility.getFileExtension(fileName);  // get current file extension
             var downloadExt = fileUtility.getFileExtension(downloadUri);  // get the extension of the downloaded file
             var newFileName = fileName;
@@ -517,7 +525,14 @@ app.post("/track", function (req, res) {  // define a handler for tracking file
         }
 
         // file force saving process
-        var processForceSave = function (downloadUri, body, fileName, userAddress, resp) {
+        var processForceSave = function (downloadUri, body, fileName, userAddress) {
+
+            if (!downloadUri) {
+                response.write("{\"error\":1}");
+                response.end();
+                return;
+            }
+
             var curExt = fileUtility.getFileExtension(fileName);
             var downloadExt = fileUtility.getFileExtension(downloadUri);
 
@@ -560,12 +575,11 @@ app.post("/track", function (req, res) {  // define a handler for tracking file
                     }
                 }
             }
-
         } else if (body.status == 2 || body.status == 3) { // MustSave, Corrupted
-            processSave(body.url, body, fileName, userAddress, response);  // save file
+            processSave(body.url, body, fileName, userAddress);  // save file
             return;
         } else if (body.status == 6 || body.status == 7) { // MustForceSave, CorruptedForceSave
-            processForceSave(body.url, body, fileName, userAddress, response);  // force save file
+            processForceSave(body.url, body, fileName, userAddress);  // force save file
             return;
         }
 
@@ -644,7 +658,7 @@ app.get("/editor", function (req, res) {  // define a handler for editing docume
         var createUrl = docManager.getCreateUrl(fileUtility.getFileType(fileName), userid, type, lang);
         var templates = [
             {
-                "image": templatesImageUrl,
+                "image": "",
                 "title": "Blank",
                 "url": createUrl
             },

web/documentserver-example/nodejs/config/default.json

@@ -21,7 +21,7 @@
     "apiUrl": "web-apps/apps/api/documents/api.js",
     "preloaderUrl": "web-apps/apps/api/documents/cache-scripts.html",
     "exampleUrl": null,
-    "viewedDocs": [".pdf", ".djvu", ".xps"],
+    "viewedDocs": [".pdf", ".djvu", ".xps", ".oxps"],
     "editedDocs": [".docx", ".xlsx", ".csv", ".pptx", ".txt"],
     "convertedDocs": [".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".pptm", ".ppt", ".ppsx", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".rtf", ".mht", ".html", ".htm", ".xml", ".epub", ".fb2"],
     "storageFolder": "./files",

web/documentserver-example/nodejs/helpers/docManager.js

@@ -160,7 +160,7 @@ docManager.getlocalFileUri = function (fileName, version, forDocumentServer) {
 
 // get server url
 docManager.getServerUrl = function (forDocumentServer) {
-    return (forDocumentServer && !!configServer.get("exampleUrl")) ? configServer.get("exampleUrl") : (docManager.getProtocol() + "://" + docManager.req.get("host"));
+    return (forDocumentServer && !!configServer.get("exampleUrl")) ? configServer.get("exampleUrl") : (docManager.getProtocol() + "://" + docManager.req.get("host") + docManager.req.baseUrl);
 };
 
 // get callback url
@@ -172,6 +172,7 @@ docManager.getCallback = function (fileName) {
     return server + handler;
 };
 
+// get url to the created file
 docManager.getCreateUrl = function (docType, userid, type, lang) {
     const server = docManager.getServerUrl();
     var ext = docManager.getInternalExtension(docType).replace(".", "");
@@ -180,6 +181,7 @@ docManager.getCreateUrl = function (docType, userid, type, lang) {
     return server + handler;
 }
 
+// get url to download a file
 docManager.getDownloadUrl = function (fileName) {
     const server = docManager.getServerUrl(true);
     const hostAddress = docManager.curUserHostAddress();
@@ -258,7 +260,7 @@ docManager.changesUser = function (fileName, userAddress, version) {
     return path.join(docManager.versionPath(fileName, userAddress, version), "user.txt");
 };
 
-// get all the stored files from the folder
+// get all the stored files
 docManager.getStoredFiles = function () {
     const userAddress = docManager.curUserHostAddress();
     const directory = path.join(docManager.dir, userAddress);
@@ -270,7 +272,7 @@ docManager.getStoredFiles = function () {
 
         if (!stats.isDirectory()) {  // if the element isn't a directory
             let historyPath = docManager.historyPath(storedFiles[i], userAddress);  // get the path to the file history
-            let version = 1;
+            let version = 0;
             if (historyPath != "") {  // if the history path exists
                 version = docManager.countVersion(historyPath);  // get the last file version
             }
@@ -281,7 +283,7 @@ docManager.getStoredFiles = function () {
                 name: storedFiles[i],
                 documentType: fileUtility.getFileType(storedFiles[i]),
                 canEdit: configServer.get("editedDocs").indexOf(fileUtility.getFileExtension(storedFiles[i])) != -1,
-                version: version
+                version: version+1
             };
 
             if (!result.length) {  // if the result array is empty
@@ -318,6 +320,7 @@ docManager.copyFile = function (exist, target) {
     fileSystem.writeFileSync(target, fileSystem.readFileSync(exist));
 };
 
+// get an internal extension
 docManager.getInternalExtension = function (fileType) {
     if (fileType == fileUtility.fileType.word)  // .docx for word type
         return ".docx";
@@ -331,6 +334,7 @@ docManager.getInternalExtension = function (fileType) {
     return ".docx";  // the default value is .docx
 };
 
+// get the template image url
 docManager.getTemplateImageUrl = function (fileType) {
     let path = docManager.getServerUrl(true);
     if (fileType == fileUtility.fileType.word)  // for word type

web/documentserver-example/nodejs/helpers/fileUtility.js

@@ -63,7 +63,7 @@ fileUtility.fileType = {
 }
 
 // the document extension list
-fileUtility.documentExts = [".doc", ".docx", ".docm", ".dot", ".dotx", ".dotm", ".odt", ".fodt", ".ott", ".rtf", ".txt", ".html", ".htm", ".mht", ".xml", ".pdf", ".djvu", ".fb2", ".epub", ".xps"];
+fileUtility.documentExts = [".doc", ".docx", ".docm", ".dot", ".dotx", ".dotm", ".odt", ".fodt", ".ott", ".rtf", ".txt", ".html", ".htm", ".mht", ".xml", ".pdf", ".djvu", ".fb2", ".epub", ".xps", ".oxps"];
 
 // the spreadsheet extension list
 fileUtility.spreadsheetExts = [".xls", ".xlsx", ".xlsm", ".xlt", ".xltx", ".xltm", ".ods", ".fods", ".ots", ".csv"];

web/documentserver-example/nodejs/helpers/users.js

@@ -90,10 +90,12 @@ function User(id, name, email, group, reviewGroups, commentGroups, favorite, den
     this.templates = templates;
 };
 
+// get a list of all the users
 users.getAllUsers = function () {
     return users;
 };
 
+// get a user by id specified
 users.getUser = function (id) {
     var result = null;
     this.forEach(user => {
@@ -104,6 +106,7 @@ users.getUser = function (id) {
     return result ? result : this[0];
 };
 
+// get a list of users with their names and emails for mentions
 users.getUsersForMentions = function (id) {
     var result = [];
     this.forEach(user => {

web/documentserver-example/nodejs/helpers/wopi/filesController.js

@@ -36,6 +36,7 @@ actionMapping[reqConsts.requestType.GetLock] = getLock;
 actionMapping[reqConsts.requestType.RefreshLock] = refreshLock;
 actionMapping[reqConsts.requestType.Unlock] = unlock;
 
+// parse wopi request
 function parseWopiRequest(req) {
     let wopiData = {
         requestType: reqConsts.requestType.None,
@@ -43,51 +44,52 @@ function parseWopiRequest(req) {
         id: req.params['id']
     }
 
+    // get the request path
     let reqPath = req.path.substring("/wopi/".length)
 
-    if (reqPath.startsWith("files")) {
-        if (reqPath.endsWith("/contents")) {
-            if (req.method == "GET") {
-                wopiData.requestType = reqConsts.requestType.GetFile;
-            } else if (req.method == "POST") {
-                wopiData.requestType = reqConsts.requestType.PutFile;
+    if (reqPath.startsWith("files")) {  // if it starts with "files"
+        if (reqPath.endsWith("/contents")) {  // ends with "/contents"
+            if (req.method == "GET") {  // and the request method is GET
+                wopiData.requestType = reqConsts.requestType.GetFile;  // then the request type is GetFile
+            } else if (req.method == "POST") {  // if the request method is POST
+                wopiData.requestType = reqConsts.requestType.PutFile;  // then the request type is PutFile
             }
         } else {
-            if (req.method == "GET") {
-                wopiData.requestType = reqConsts.requestType.CheckFileInfo;
-            } else if (req.method == "POST") {
-                let wopiOverride = req.headers[reqConsts.requestHeaders.RequestType.toLowerCase()];
+            if (req.method == "GET") {  // otherwise, if the request method is GET
+                wopiData.requestType = reqConsts.requestType.CheckFileInfo;  // the request type is CheckFileInfo
+            } else if (req.method == "POST") {  // if the request method is POST
+                let wopiOverride = req.headers[reqConsts.requestHeaders.RequestType.toLowerCase()];  // get the X-WOPI-Override header which determines the request type
                 switch (wopiOverride) {
-                    case "LOCK":
-                        if (req.headers[reqConsts.requestHeaders.OldLock.toLowerCase()]) {
-                            wopiData.requestType = reqConsts.requestType.UnlockAndRelock;
+                    case "LOCK":  // if it is equal to LOCK
+                        if (req.headers[reqConsts.requestHeaders.OldLock.toLowerCase()]) {  // check if the request sends the X-WOPI-OldLock header
+                            wopiData.requestType = reqConsts.requestType.UnlockAndRelock;  // if yes, then the request type is UnlockAndRelock
                         } else {
-                            wopiData.requestType = reqConsts.requestType.Lock;
+                            wopiData.requestType = reqConsts.requestType.Lock;  // otherwise, it is Lock
                         }
                         break;
 
-                    case "GET_LOCK":
-                        wopiData.requestType = reqConsts.requestType.GetLock;
+                    case "GET_LOCK":  // if it is equal to GET_LOCK
+                        wopiData.requestType = reqConsts.requestType.GetLock;  // the request type is GetLock
                         break;
 
-                    case "REFRESH_LOCK":
-                        wopiData.requestType = reqConsts.requestType.RefreshLock;
+                    case "REFRESH_LOCK":  // if it is equal to REFRESH_LOCK
+                        wopiData.requestType = reqConsts.requestType.RefreshLock;  // the request type is RefreshLock
                         break;
 
-                    case "UNLOCK":
-                        wopiData.requestType = reqConsts.requestType.Unlock;
+                    case "UNLOCK":  // if it is equal to UNLOCK
+                        wopiData.requestType = reqConsts.requestType.Unlock;  // the request type is Unlock
                         break;
 
-                    case "PUT_RELATIVE":
-                        wopiData.requestType = reqConsts.requestType.PutRelativeFile;
+                    case "PUT_RELATIVE":  // if it is equal to PUT_RELATIVE
+                        wopiData.requestType = reqConsts.requestType.PutRelativeFile;  // the request type is PutRelativeFile (creates a new file on the host based on the current file)
                         break;
 
-                    case "RENAME_FILE":
-                        wopiData.requestType = reqConsts.requestType.RenameFile;
+                    case "RENAME_FILE":  // if it is equal to RENAME_FILE
+                        wopiData.requestType = reqConsts.requestType.RenameFile;  // the request type is RenameFile (renames a file)
                         break;
 
-                    case "PUT_USER_INFO":
-                        wopiData.requestType = reqConsts.requestType.PutUserInfo;
+                    case "PUT_USER_INFO":  // if it is equal to PUT_USER_INFO
+                        wopiData.requestType = reqConsts.requestType.PutUserInfo;  // the request type is PutUserInfo (stores some basic user information on the host)
                         break;
                 }
             }
@@ -99,11 +101,12 @@ function parseWopiRequest(req) {
     return wopiData;
 }
 
+// lock file editing
 function lock(wopi, req, res, userHost) {
     let requestLock = req.headers[reqConsts.requestHeaders.Lock.toLowerCase()];
 
-    let userAddress = docManager.curUserHostAddress(userHost);
-    let filePath = docManager.storagePath(wopi.id, userAddress);
+    let userAddress = docManager.curUserHostAddress(userHost);  // get current user host address
+    let filePath = docManager.storagePath(wopi.id, userAddress);  // get the storage path of the given file
 
     if (!lockManager.hasLock(filePath)) {
         // file isn't locked => lock
@@ -120,14 +123,17 @@ function lock(wopi, req, res, userHost) {
     }
 }
 
+// retrieve a lock on a file
 function getLock(wopi, req, res, userHost) {
     let userAddress = docManager.curUserHostAddress(userHost);
     let filePath = docManager.storagePath(wopi.id, userAddress);
 
+    // get the lock of the specified file and set it as the X-WOPI-Lock header
     res.setHeader(reqConsts.requestHeaders.lock, lockManager.getLock(filePath));
     res.sendStatus(200);
 }
 
+// refresh the lock on a file by resetting its automatic expiration timer to 30 minutes
 function refreshLock(wopi, req, res, userHost) {
     let requestLock = req.headers[reqConsts.requestHeaders.Lock.toLowerCase()];
 
@@ -147,6 +153,7 @@ function refreshLock(wopi, req, res, userHost) {
     }
 }
 
+// allow for file editing
 function unlock(wopi, req, res, userHost) {
     let requestLock = req.headers[reqConsts.requestHeaders.Lock.toLowerCase()];
 
@@ -166,9 +173,10 @@ function unlock(wopi, req, res, userHost) {
     }
 }
 
+// allow for file editing, and then immediately take a new lock on the file
 function unlockAndRelock(wopi, req, res, userHost) {
     let requestLock = req.headers[reqConsts.requestHeaders.Lock.toLowerCase()];
-    let oldLock = req.headers[reqConsts.requestHeaders.oldLock.toLowerCase()];
+    let oldLock = req.headers[reqConsts.requestHeaders.oldLock.toLowerCase()];  // get the X-WOPI-OldLock header
 
     let userAddress = docManager.curUserHostAddress(userHost);
     let filePath = docManager.storagePath(wopi.id, userAddress);
@@ -186,6 +194,7 @@ function unlockAndRelock(wopi, req, res, userHost) {
     }
 }
 
+// request a message to retrieve a file
 function getFile(wopi, req, res, userHost) {
     let userAddress = docManager.curUserHostAddress(userHost);
 
@@ -196,10 +205,11 @@ function getFile(wopi, req, res, userHost) {
 
     res.setHeader("Content-Disposition", "attachment; filename*=UTF-8\'\'" + encodeURIComponent(wopi.id));
 
-    let filestream = fileSystem.createReadStream(path);
-    filestream.pipe(res);
+    let filestream = fileSystem.createReadStream(path);  // open a file as a readable stream
+    filestream.pipe(res);  // retrieve data from file stream and output it to the response object
 }
 
+// request a message to update a file
 function putFile(wopi, req, res, userHost) {
     let requestLock = req.headers[reqConsts.requestHeaders.Lock.toLowerCase()];
 
@@ -214,20 +224,20 @@ function putFile(wopi, req, res, userHost) {
     } else if (lockManager.getLock(storagePath) == requestLock) {
         // lock matches current lock => put file
         if (req.body) {
-            var historyPath = docManager.historyPath(wopi.id, userAddress);
-            if (historyPath == "") {
-                historyPath = docManager.historyPath(wopi.id, userAddress, true);
-                docManager.createDirectory(historyPath);
+            var historyPath = docManager.historyPath(wopi.id, userAddress);  // get the path to the file history
+            if (historyPath == "") {  // if it is empty
+                historyPath = docManager.historyPath(wopi.id, userAddress, true);  // create it
+                docManager.createDirectory(historyPath);  // and create a new directory for the history
             }
 
-            var count_version = docManager.countVersion(historyPath);
-            version = count_version + 1;
-            res.setHeader(reqConsts.requestHeaders.ItemVersion, version + 1);
-            var versionPath = docManager.versionPath(wopi.id, userAddress, version);
-            docManager.createDirectory(versionPath);
+            var count_version = docManager.countVersion(historyPath);  // get the last file version
+            version = count_version + 1;  // get a number of a new file version
+            res.setHeader(reqConsts.requestHeaders.ItemVersion, version + 1);  // set the X-WOPI-ItemVersion header
+            var versionPath = docManager.versionPath(wopi.id, userAddress, version);  // get the path to the specified file version
+            docManager.createDirectory(versionPath);  // and create a new directory for the specified version
 
-            var path_prev = path.join(versionPath, "prev" + fileUtility.getFileExtension(wopi.id));
-            fileSystem.renameSync(docManager.storagePath(wopi.id, userAddress), path_prev);
+            var path_prev = path.join(versionPath, "prev" + fileUtility.getFileExtension(wopi.id));  // get the path to the previous file version
+            fileSystem.renameSync(docManager.storagePath(wopi.id, userAddress), path_prev);  // synchronously rename the given file as the previous file version
 
             let filestream = fileSystem.createWriteStream(storagePath);
             req.pipe(filestream);
@@ -244,17 +254,19 @@ function putFile(wopi, req, res, userHost) {
     }
 }
 
+// return information about the file properties, access rights and editor settings
 function checkFileInfo(wopi, req, res, userHost) {
     let userAddress = docManager.curUserHostAddress(userHost);
-    let historyPath = docManager.historyPath(wopi.id, userAddress);
+    let historyPath = docManager.historyPath(wopi.id, userAddress);  // get the path to the file history
     let version = 1;
-    if (historyPath != "") {
-        version = docManager.countVersion(historyPath) + 1;
+    if (historyPath != "") {  // if it isn't empty
+        version = docManager.countVersion(historyPath) + 1;  // get a number of a new file version
     }
     let path = docManager.storagePath(wopi.id, userAddress);
 
     let user = users.getUser(req.query.userid);
 
+    // create the file information object
     let fileInfo = {
         "BaseFileName": wopi.id,
         "OwnerId": docManager.getFileData(wopi.id, userAddress)[1],
@@ -270,29 +282,32 @@ function checkFileInfo(wopi, req, res, userHost) {
     res.status(200).send(fileInfo);
 }
 
+// return lock mismatch
 function returnLockMismatch(res, lock, reason) {
-    res.setHeader(reqConsts.requestHeaders.Lock, lock || "");
-    if (reason) {
-        res.setHeader(reqConsts.requestHeaders.LockFailureReason, reason);
+    res.setHeader(reqConsts.requestHeaders.Lock, lock || "");  // set the X-WOPI-Lock header
+    if (reason) {  // if there is a reason for lock mismatch
+        res.setHeader(reqConsts.requestHeaders.LockFailureReason, reason);  // set it as the X-WOPI-LockFailureReason header
     }
     res.sendStatus(409); // conflict
 }
 
 exports.fileRequestHandler = (req, res) => {
     let userAddress = null;
-    if (req.params['id'].includes("@")) {
-        let split = req.params['id'].split("@");
-        req.params['id'] = split[0];
-        userAddress = split[1];
+    if (req.params['id'].includes("@")) {  // if there is the "@" sign in the id parameter
+        let split = req.params['id'].split("@");  // split this parameter by "@"
+        req.params['id'] = split[0];  // rewrite id with the first part of the split parameter
+        userAddress = split[1];  // save the second part as the user address
     }
 
-    let wopiData = parseWopiRequest(req);
+    let wopiData = parseWopiRequest(req);  // get the wopi data
 
+    // an error of the unknown request type
     if (wopiData.requestType == reqConsts.requestType.None) {
         res.status(500).send({ 'title': 'fileHandler', 'method': req.method, 'id': req.params['id'], 'error': "unknown" });
         return;
     }
 
+    // an error of the unsupported request type
     let action = actionMapping[wopiData.requestType];
     if (!action) {
         res.status(501).send({ 'title': 'fileHandler', 'method': req.method, 'id': req.params['id'], 'error': "unsupported" });

web/documentserver-example/nodejs/helpers/wopi/lockManager.js

@@ -18,40 +18,47 @@
 
 var lockDict = {};
 
+// get the lock object of the specified file
 function getLockObject(filePath) {
     return lockDict[filePath];
 }
 
+// clear the lock timeout
 function clearLockTimeout(lockObject) {
     if (lockObject && lockObject.timeout) {
         clearTimeout(lockObject.timeout);
     }
 }
 
+// get the lock value of the specified file
 function getLockValue(filePath) {
-    let lock = getLockObject(filePath);
-    if (lock) return lock.value;
+    let lock = getLockObject(filePath);  // get the lock object of the specified file
+    if (lock) return lock.value;  // if it exists, get the lock value from it
     return "";
 }
 
+// check if the specified file path has lock or not
 function hasLock(filePath) {
     return !!getLockObject(filePath);
 }
 
+// lock file editing
 function lock(filePath, lockValue) {
-    let oldLock = getLockObject(filePath);
-    clearLockTimeout(oldLock);
+    let oldLock = getLockObject(filePath);  // get the old lock of the specified file
+    clearLockTimeout(oldLock);  // clear its timeout
 
+    // create a new lock object
     lockDict[filePath] = {
         value: lockValue,
         timeout: setTimeout(unlock, 1000 * 60 * 30, filePath) // set lock for 30 minutes
     }
 }
 
+// allow for file editing
 function unlock(filePath) {
-    let lock = getLockObject(filePath);
-    clearLockTimeout(lock);
-    delete lockDict[filePath];
+    let lock = getLockObject(filePath);  // get the lock of the specified file
+    clearLockTimeout(lock);  // clear its timeout
+    delete lockDict[filePath];  // delete the lock
 }
 
 module.exports = {

web/documentserver-example/nodejs/helpers/wopi/request.js

@@ -16,6 +16,7 @@
  *
  */
 
+// request types
 const requestType = Object.freeze({
     "None": 0,
 
@@ -46,6 +47,7 @@ const requestType = Object.freeze({
     "PutUserInfo": 18,
 });
 
+// request headers
 const requestHeaders = Object.freeze({
     "RequestType": "X-WOPI-Override",
     "ItemVersion": "X-WOPI-ItemVersion",

web/documentserver-example/nodejs/helpers/wopi/utils.js

@@ -25,6 +25,7 @@ const he = require("he");
 
 var cache = null;
 
+// get the wopi discovery information
 function getDiscoveryInfo(maxTry = 1) {
     let actions = [];
 
@@ -32,7 +33,7 @@ function getDiscoveryInfo(maxTry = 1) {
 
     try {
         let response = syncRequest("GET", siteUrl + configServer.get("wopi.discovery"));
-        let discovery = xmlParser.parse(response.getBody().toString(), {
+        let discovery = xmlParser.parse(response.getBody().toString(), {  // create the discovery XML file with the parameters from the response
             attributeNamePrefix: "",
             ignoreAttributes: false,
             parseAttributeValue: true,
@@ -41,7 +42,7 @@ function getDiscoveryInfo(maxTry = 1) {
         for (let app of discovery["wopi-discovery"]["net-zone"].app) {
             if (!Array.isArray(app.action)) { app.action = [app.action]; }
             for (let action of app.action) {
-                actions.push({
+                actions.push({  // write all the parameters to the actions element
                     app: app.name,
                     favIconUrl: app.favIconUrl,
                     checkLicense: app.checkLicense == 'true',
@@ -67,11 +68,12 @@ function getDiscoveryInfo(maxTry = 1) {
     return actions;
 }
 
+// get actions of the specified extension
 function getActions(ext) {
-    let actions = getDiscoveryInfo();
+    let actions = getDiscoveryInfo();  // get the wopi discovery information
     let filtered = [];
 
-    for (let action of actions) {
+    for (let action of actions) {  // and filter it by the specified extention
         if (action.ext == ext) {
             filtered.push(action);
         }
@@ -80,6 +82,7 @@ function getActions(ext) {
     return filtered;
 }
 
+// get an action for the specified extension and name
 function getAction(ext, name) {
     let actions = getDiscoveryInfo();
 
@@ -92,6 +95,7 @@ function getAction(ext, name) {
     return null;
 }
 
+// get the default action for the specified extension
 function getDefaultAction(ext) {
     let actions = getDiscoveryInfo();
 
@@ -104,6 +108,7 @@ function getDefaultAction(ext) {
     return null;
 }
 
+// get the action url
 function getActionUrl(host, userAddress, action, filename) {
     return action.urlsrc.replace(/<.*&>/g, "") + "WOPISrc=" + host + "/wopi/files/" + filename + "@" + userAddress;
 }

web/documentserver-example/nodejs/helpers/wopi/wopiRouting.js

@@ -28,53 +28,63 @@ const users = require("../users");
 
 exports.registerRoutes = function(app) {
 
+    // define a handler for the default wopi page
     app.get("/wopi", function(req, res) {
 
+        // get the wopi discovery information
         utils.getDiscoveryInfo(3);
 
         try {
             docManager.init(storageFolder, req, res);
 
+            // get all the stored files
             let files = docManager.getStoredFiles();
 
+            // run through all the files and write the corresponding information to each file
             for (var file of files) {
-                let ext = fileUtility.getFileExtension(file.name, true);
-                file.actions = utils.getActions(ext);
-                file.defaultAction = utils.getDefaultAction(ext);
+                let ext = fileUtility.getFileExtension(file.name, true);  // get an extension of each file
+                file.actions = utils.getActions(ext);  // get actions of the specified extension
+                file.defaultAction = utils.getDefaultAction(ext);  // get the default action of the specified extension
             }
 
+            // render wopiIndex template with the parameters specified
             res.render("wopiIndex", {
                 storedFiles: files,
                 params: docManager.getCustomParams(),
                 users: users,
+                serverUrl: docManager.getServerUrl(),
             });
 
         } catch (ex) {
-            console.log(ex);
-            res.status(500);
-            res.render("error", { message: "Server error" });
+            console.log(ex);  // display error message in the console
+            res.status(500);  // write status parameter to the response
+            res.render("error", { message: "Server error" });  // render error template with the message parameter specified
             return;
         }
     });
+    // define a handler for creating a new wopi editing session
     app.get("/wopi-new", function(req, res) {
-        var fileExt = req.query.fileExt;
-        var user = users.getUser(req.query.userid);
+        var fileExt = req.query.fileExt;  // get the file extension from the request
+        var user = users.getUser(req.query.userid);  // get a user by the id
 
-        if (fileExt != null) {
-            var fileName = docManager.createDemo(!!req.query.sample, fileExt, user.id, user.name);
-            var redirectPath = docManager.getServerUrl() + "/wopi-action/" + encodeURIComponent(fileName) + "?action=edit" + docManager.getCustomParams();
+        if (fileExt != null) {  // if the file extension exists
+            var fileName = docManager.createDemo(!!req.query.sample, fileExt, user.id, user.name);  // create demo document of the given extension
+            var redirectPath = docManager.getServerUrl(true) + "/wopi-action/" + encodeURIComponent(fileName) + "?action=edit" + docManager.getCustomParams();  // get the redirect path
             res.redirect(redirectPath);
             return;
         }
     });
+    // define a handler for getting wopi action information by its id
     app.get("/wopi-action/:id", function(req, res) {
         try {
             docManager.init(storageFolder, req, res);
 
+            // get an action for the specified extension and name
             let action = utils.getAction(fileUtility.getFileExtension(req.params['id'], true), req.query["action"]);
 
+            // render wopiAction template with the parameters specified
             res.render("wopiAction", {
-                actionUrl: utils.getActionUrl(docManager.getServerUrl(), docManager.curUserHostAddress(), action, req.params['id']),
+                actionUrl: utils.getActionUrl(docManager.getServerUrl(true), docManager.curUserHostAddress(), action, req.params['id']),
                 token: "test",
                 tokenTtl: Date.now() + 1000 * 60 * 60 * 10,
                 params: docManager.getCustomParams(),
@@ -88,23 +98,27 @@ exports.registerRoutes = function(app) {
         }
     });
 
+    // define a handler for getting file information by its id
     app.route('/wopi/files/:id')
         .all(tokenValidator.isValidToken)
         .get(filesController.fileRequestHandler)
         .post(filesController.fileRequestHandler);
 
+    // define a handler for reading/writing the file contents
     app.route('/wopi/files/:id/contents')
         .all(tokenValidator.isValidToken)
         .get(filesController.fileRequestHandler)
         .post(filesController.fileRequestHandler);
 
+    // define a handler for getting folder information by its id
     app.route('/wopi/folders/:id')
         .all(tokenValidator.isValidToken)
         .get(filesController.fileRequestHandler)
         .post(filesController.fileRequestHandler);
 
+    // define a handler for reading/writing the folder contents
     app.route('/wopi/folders/:id/contents')
         .all(tokenValidator.isValidToken)
         .get(filesController.fileRequestHandler)
         .post(filesController.fileRequestHandler);
-};
+};

web/documentserver-example/nodejs/public/javascripts/jscript.js

@@ -101,7 +101,8 @@ if (typeof jQuery != "undefined") {
     });
     
     var timer = null;
-    var checkConvert = function (filePass = null) {
+    var checkConvert = function (filePass) {
+        filePass = null;
         if (timer != null) {
             clearTimeout(timer);
         }
@@ -296,32 +297,59 @@ if (typeof jQuery != "undefined") {
         });
     });
 
-    jq(".info").mouseover(function (event) {
-        var target = event.target;
-        var id = target.dataset.id ? target.dataset.id : target.id;
-        var tooltip = target.dataset.tooltip;
-
-        jq("<div class='tooltip'>" + tooltip + "</div><div class='arrow'></div>").appendTo("body");
-
-        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth();
-
-        var topElement = jq("#" + id).offset().top;
-        var halfHeightElement = jq("#" + id).outerHeight() / 2;
-
-        var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement);
-        var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2;
-        if (heightToFooter > (halfHeightTooltip + 10)) {
-            var top = topElement + halfHeightElement - halfHeightTooltip;
-        } else {
-            var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10;
+    function showUserTooltip (isMobile) {
+        if ( jq("div#portal-info").is(":hidden") ) {
+            jq("div#portal-info").show();
+            jq("div.stored-list").hide();
+        } else if (isMobile && jq("div#portal-info").is(":visible")) {
+            jq("div#portal-info").hide();
+            jq("div.stored-list").show();
         }
+    };
 
-        jq("div.tooltip").css({"top": top, "left": left + 10});
-        jq("div.arrow").css({"top": topElement + halfHeightElement, "left": left + 6});
-    }).mouseout(function () {
-        jq("div.tooltip").remove();
-        jq("div.arrow").remove();
-    });
+    var fileList = jq("tr.tableRow");
+    if (fileList.length > 0) {
+        console.log(jq("div#portal-info").is(":visible"));
+        jq("div#portal-info").hide();
+    }
+
+    var mouseIsOverTooltip = false;
+    var hideTooltipTimeout = null;
+    if (/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
+        .test(navigator.userAgent)) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                jq(".info").on("touchend", function () {
+                    showUserTooltip(true);
+                });
+            }
+    } else {
+        jq(".info").mouseover(function (event) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                showUserTooltip(false);
+
+                jq("div#portal-info").mouseenter(function () {
+                    mouseIsOverTooltip = true;
+                }).mouseleave(function () {
+                    mouseIsOverTooltip = false;
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                })
+            }
+        }).mouseleave(function () {
+            hideTooltipTimeout = setTimeout(function () {
+                if (mouseIsOverTooltip == false && fileList.length > 0) {
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                }
+            }, 500);
+        });
+    }
 }
 
 function getUrlVars() {

web/documentserver-example/nodejs/public/stylesheets/media-wopi.css

@@ -0,0 +1,85 @@
+.tableRow td:first-child{
+    flex-grow: 1;
+    max-width: 100%;
+}
+
+.downloadContentCells{
+    margin-left: auto;
+}
+.tableRow td:last-child:after{
+    top: 33px;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 2%;
+    position: absolute;
+    width: 100%;
+}
+
+@media (min-width: 1280px) {
+    .tableHeaderCellRemove{
+        padding-right:24px ;
+        text-align: center;
+    }
+    .tableHeaderCellDownload{
+        padding-right: 11px;
+    }
+    .tableHeaderCellViewers{
+        width: 24%;
+        text-align: center;
+    }
+    .tableHeaderCellEditors{
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 986px){
+    .tableHeaderCellRemove{
+        padding-left: 7px;
+    }
+}
+@media (max-width: 986px) and (min-width: 890px){
+    .tableHeaderCellRemove{
+        padding-left: 16px;
+    }
+    .tableHeaderCellDownload{
+        width: 20%;
+        padding-right: 0;
+    }
+    .tableHeaderCellViewers{
+        width: 24%;
+        padding-right: 0;
+    }
+}
+@media (max-width: 890px) and (min-width: 769px){
+    .tableRow td:first-child{
+        max-width: 50%;
+    }
+    .contentCells-shift{
+        padding-right: 26px;
+    }
+}
+@media (max-width: 769px) and (min-width: 593px){
+    .tableRow td:first-child{
+        max-width: 40%;
+    }
+}
+@media (max-width: 769px) {
+    .tableRow td{
+        top: 32px;
+        border: none;
+    }
+    .tableRow td:last-child:after{
+        width: 95%;
+    }
+}
+@media (max-width: 593px){
+    .tableRow td:first-child{
+        width: 100%;
+    }
+    .tableRow td:last-child:after{
+        width: 90%;
+        top: 67px;
+        height: 1%;
+    }
+}

web/documentserver-example/nodejs/public/stylesheets/media.css

@@ -0,0 +1,607 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    #portal-info {
+        width: 65vw;
+    }
+
+    .left-panel {
+        margin-left: 0;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin: auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel {
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: right;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: left;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: right;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: left;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    #portal-info {
+        width: 50vw;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 14%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel {
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

web/documentserver-example/nodejs/public/stylesheets/stylesheet.css

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x:hidden ;
 }
 
 form {
@@ -52,23 +53,25 @@ a:visited {
 
 header {
     background: #333333;
-    height: 72px;
+    height: 48px;
     margin: 0 auto;
     min-width: 1152px;
     width: auto;
 }
 
 header img {
-    margin: 22px 0 22px 32px;
+    margin: 10px 0 22px 32px;
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
 
 .main{
-    height: calc(100% - 136px);
+    display: table;
+    height: calc(100% - 112px);
     min-height: 536px;
 }
 
@@ -360,19 +363,33 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+    position: relative;
+    left: 0;
+    bottom: 0;
+}
+footer > .center{
+    width: 100%;
 }
-
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+    display: block;
+    position: relative;
     padding-left: 32px;
 }
 
@@ -387,9 +404,15 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
 }
 
 .help-block {
@@ -403,6 +426,7 @@ footer a:hover {
 }
 
 .stored-list {
+    display: block;
     list-style: none;
     padding: 0;
     position: relative;
@@ -546,7 +570,7 @@ footer a:hover {
 }
 
 .contentCells {
-    border-bottom: 1px solid #EFEFEF;
+    display: block;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
     padding: 4px;
@@ -566,8 +590,8 @@ footer a:hover {
 }
 
 .contentCells-wopi {
-    width: 16%;
-    text-align: center;
+    width: 18%;
+    text-align: left;
 }
 
 .contentCells-wopi a {
@@ -584,31 +608,7 @@ footer a:hover {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
-}
-
-.tooltip {
-    background: #FFFFFF;
-    border-radius: 5px;
-    box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
-    color: #666666;
-    line-height: 160%;
-    max-width: 455px;
-    padding: 14px;
-    position: absolute;
-}
-
-.tooltip ul{
-    margin: 0;
-}
-
-.arrow{
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid #FFFFFF;
-    position: absolute;
-    transform: translate(-50%, -50%);
+    margin: -2px 5px;
 }
 
 .user-block-table {
@@ -696,4 +696,64 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+.tableHeaderCellDownload{
+    padding-right: 28px;
+}
+
+.user-descr {
+    display: inline-table;
+    width: 30vw;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.user-descr > b {
+    margin-left: 25px;
+}
+
+#portal-info {
+    display: block;
+    width: 70vw;
+}
+
+.portal-descr:nth-child(3) {
+    margin-bottom: 20px;
+}

web/documentserver-example/nodejs/views/editor.ejs

@@ -132,13 +132,13 @@
             docEditor.setMailMergeRecipients(<%- JSON.stringify(dataMailMergeRecipients) %>);  // insert recipient data for mail merge into the file
         };
 
-        var onRequestUsers = function () {
-            docEditor.setUsers({
+        var onRequestUsers = function () {  // add mentions for not anonymous users
+            docEditor.setUsers({  // set a list of users to mention in the comments
                 "users": <%- JSON.stringify(usersForMentions) %>
             });
         };
 
-        var onRequestSendNotify = function(event) {
+        var onRequestSendNotify = function(event) {  // the user is mentioned in a comment
             var actionLink = JSON.stringify(event.data.actionLink);
             console.log("onRequestSendNotify:");
             console.log(event.data);
@@ -161,7 +161,7 @@
             "onRequestMailMergeRecipients": onRequestMailMergeRecipients,
         };
 
-        var config = {<%- include("config") %>, events};
+        var config = {<%- include("config") %>, events: events};
 
         var connectEditor = function () {
             addMentions();

web/documentserver-example/nodejs/views/index.ejs

@@ -27,6 +27,7 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
     <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/media.css">
 </head>
 <body>
     <header>
@@ -72,17 +73,7 @@
                                         <tr>
                                             <td valign="middle">
                                                 <span class="select-user">Username</span>
-                                                <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
-                                                </br>
-                                                <% users.forEach(user => { %>
-                                                    <b><%= user.name == null ? 'Anonymous' : user.name %></b>
-                                                    <ul>
-                                                        <% user.descriptions.forEach(description => { %>
-                                                            <li><%= description %></li>
-                                                        <% }) %>
-                                                    </ul>
-                                                <% }) %>"
-                                                src="images/info.svg" />
+                                                <img class="info" src="images/info.svg" />
                                                 <select class="select-user" id="user">
                                                     <% users.forEach(user => { %>
                                                         <option value="<%= user.id %>"><%= user.name == null ? "Anonymous" : user.name %></option>
@@ -92,8 +83,7 @@
                                         </tr>
                                         <tr>
                                             <td valign="middle">
-                                                <span class="select-user">Language</span>
-                                                <img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="images/info.svg" />
+                                                <span class="select-user">Language editors interface</span>
                                                 <select class="select-user" id="language">
                                                     <option value="en">English</option>
                                                     <option value="be">Belarusian</option>
@@ -133,26 +123,37 @@
                                 </table>
 
                                 <div class="links-panel links-panel-border clearFix">
-                                    <a href="/wopi" class="">Go to WOPI page</a>
+                                    <a href="<%= serverUrl %>/wopi" class="">Go to WOPI page</a>
                                 </div>
                             </div>
                         </div>
                     </td>
                     <td class="section">
                         <div class="main-panel">
-                            <% if (storedFiles.length <= 0)
-                            { %>
-                            <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
-                            <span class="portal-descr">
-                                Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
-                                <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
-                            </span>
-                            <%} else
-                            { %>
-                            <div class="stored-list">
-                                <span class="header-list">Your documents</span>
-                                <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
-                                    <thead>
+                            <div id="portal-info">
+                                <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
+                                <span class="portal-descr">
+                                    Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
+                                    <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
+                                </span>
+                                <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
+                                <% users.forEach(user => { %>
+                                    <div class="user-descr">
+                                        <b><%= user.name == null ? 'Anonymous' : user.name %></b>
+                                        <ul>
+                                            <% user.descriptions.forEach(description => { %>
+                                                <li><%= description %></li>
+                                            <% }) %>
+                                        </ul>
+                                    </div>
+                                <% }) %>
+                            </div>
+                            <%if (storedFiles.length > 0)
+                                {%>
+                                <div class="stored-list">
+                                    <span class="header-list">Your documents</span>
+                                    <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
+                                        <thead>
                                         <tr>
                                             <td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
                                             <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift">Editors</td>
@@ -160,56 +161,68 @@
                                             <td class="tableHeaderCell tableHeaderCellDownload">Download</td>
                                             <td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
                                         </tr>
-                                    </thead>
-                                </table>
-                                <div class="scroll-table-body">
-                                    <table cellspacing="0" cellpadding="0" width="100%">
-                                        <tbody>
+                                        </thead>
+                                    </table>
+                                    <div class="scroll-table-body">
+                                        <table cellspacing="0" cellpadding="0" width="100%">
+                                            <tbody>
                                             <% for (var i = 0; i < storedFiles.length; i++) { %>
                                                 <tr class="tableRow" title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]">
                                                     <td class="contentCells">
                                                         <a class="stored-edit <%= storedFiles[i].documentType %>" href="editor?fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <span title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]"><%= storedFiles[i].name %></span>
+                                                            <span><%= storedFiles[i].name %></span>
                                                         </a>
                                                     </td>
                                                     <% if (storedFiles[i].canEdit) { %>
-                                                    <td class="contentCells contentCells-icon">
-                                                        <a href="editor?type=desktop&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens" /></a>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
-                                                        <a href="editor?type=mobile&mode=edit&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" /></a>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
+                                                        <td class="contentCells contentCells-icon">
+                                                            <a href="editor?type=desktop&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                <img src="images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens" /></a>
+                                                        </td>
+                                                        <td class="contentCells contentCells-icon">
+                                                            <a href="editor?type=mobile&mode=edit&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                <img src="images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" /></a>
+                                                        </td>
+                                                        <td class="contentCells contentCells-icon">
+                                                            <a href="editor?type=desktop&mode=comment&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                <img src="images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" /></a>
+                                                        </td>
                                                         <% if (storedFiles[i].documentType == "word") { %>
-                                                        <a href="editor?type=desktop&mode=review&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>
+                                                            <td class="contentCells contentCells-icon">
+                                                                <a href="editor?type=desktop&mode=review&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>
+                                                            </td>
                                                         <% } else if (storedFiles[i].documentType == "cell") { %>
-                                                        <a href="editor?type=desktop&mode=filter&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>
+                                                            <td class="contentCells contentCells-icon">
+                                                                <a href="editor?type=desktop&mode=filter&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>
+                                                            </td>
+                                                        <% } %>
+                                                        <% if (storedFiles[i].documentType !== "word" && storedFiles[i].documentType !== "cell") {%>
+                                                            <td class="contentCells contentCells-icon contentCellsEmpty"></td>
                                                         <% } %>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
-                                                        <a href="editor?type=desktop&mode=comment&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" /></a>
-                                                    </td>
-                                                    <td class="contentCells contentCells-icon">
                                                         <% if (storedFiles[i].documentType == "word") { %>
-                                                        <a href="editor?type=desktop&mode=fillForms&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" /></a>
+                                                            <td class="contentCells contentCells-icon">
+                                                                <a href="editor?type=desktop&mode=fillForms&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" /></a>
+                                                            </td>
+                                                        <% } else { %>
+                                                            <td class="contentCells contentCells-icon "></td>
                                                         <% } %>
-                                                    </td>
-                                                    <td class="contentCells contentCells-shift contentCells-icon">
                                                         <% if (storedFiles[i].documentType == "word") { %>
-                                                        <a href="editor?type=desktop&mode=blockcontent&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
-                                                            <img src="images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification" /></a>
+                                                            <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift">
+                                                                <a href="editor?type=desktop&mode=blockcontent&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
+                                                                    <img src="images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification" /></a>
+                                                            </td>
+                                                        <% } else { %>
+                                                            <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td>
                                                         <% } %>
-                                                    </td>
+                                                        <% if (storedFiles[i].documentType !== "word" && storedFiles[i].documentType !== "cell") {%>
+                                                            <td class="contentCells contentCells-icon "></td>
+                                                        <%}%>
                                                     <% } else { %>
-                                                        <td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>
+                                                        <td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>
                                                     <% } %>
-                                                    <td class="contentCells contentCells-icon">
+                                                    <td class="contentCells contentCells-icon firstContentCellViewers">
                                                         <a href="editor?type=desktop&mode=view&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
                                                             <img src="images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens" /></a>
                                                     </td>
@@ -221,7 +234,7 @@
                                                         <a href="editor?type=embedded&mode=embedded&fileName=<%= encodeURIComponent(storedFiles[i].name) + params %>" target="_blank">
                                                             <img src="images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode" /></a>
                                                     </td>
-                                                    <td class="contentCells contentCells-icon contentCells-shift">
+                                                    <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">
                                                         <a href="download?fileName=<%= encodeURIComponent(storedFiles[i].name) %>">
                                                             <img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a>
                                                     </td>
@@ -231,10 +244,10 @@
                                                     </td>
                                                 </tr>
                                             <% } %>
-                                        </tbody>
-                                    </table>
-                                </div>  
-                            </div>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
                             <% } %>
                         </div>
                     </td>

web/documentserver-example/nodejs/views/wopiIndex.ejs

@@ -28,6 +28,8 @@
     <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
     <link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" />
     <link rel="stylesheet" type="text/css" href="stylesheets/jquery-ui.css" />
+    <link rel="stylesheet" type="text/css" href="stylesheets/media.css">
+    <link rel="stylesheet" type="text/css" href="stylesheets/media-wopi.css">
 </head>
 
 <body>
@@ -49,13 +51,13 @@
                                 <div class="create-panel clearFix">
                                     <ul class="try-editor-list clearFix">
                                         <li>
-                                            <a class="try-editor word reload-page" target="_blank" href="/wopi-new?fileExt=docx<%= params %>" title="Create new document">Document</a>
+                                            <a class="try-editor word reload-page" target="_blank" href="<%= serverUrl %>/wopi-new?fileExt=docx<%= params %>" title="Create new document">Document</a>
                                         </li>
                                         <li>
-                                            <a class="try-editor cell reload-page" target="_blank" href="/wopi-new?fileExt=xlsx<%= params %>" title="Create new spreadsheet">Spreadsheet</a>
+                                            <a class="try-editor cell reload-page" target="_blank" href="<%= serverUrl %>/wopi-new?fileExt=xlsx<%= params %>" title="Create new spreadsheet">Spreadsheet</a>
                                         </li>
                                         <li>
-                                            <a class="try-editor slide reload-page" target="_blank" href="/wopi-new?fileExt=pptx<%= params %>" title="Create new presentation">Presentation</a>
+                                            <a class="try-editor slide reload-page" target="_blank" href="<%= serverUrl %>/wopi-new?fileExt=pptx<%= params %>" title="Create new presentation">Presentation</a>
                                         </li>
                                     </ul>
                                     <label class="create-sample">
@@ -69,17 +71,7 @@
                                     <tr>
                                         <td valign="middle">
                                             <span class="select-user">Username</span>
-                                            <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
-                                            </br>
-                                            <% users.forEach(user => { %>
-                                                <b><%= user.name == null ? 'Anonymous' : user.name %></b>
-                                                <ul>
-                                                    <% user.descriptions.forEach(description => { %>
-                                                        <li><%= description %></li>
-                                                    <% }) %>
-                                                </ul>
-                                            <% }) %>"
-                                            src="images/info.svg" />
+                                            <img class="info" data-id="user" src="images/info.svg" />
                                             <select class="select-user" id="user">
                                                 <% users.forEach(user => { %>
                                                     <option value="<%= user.id %>"><%= user.name == null ? "Anonymous" : user.name %></option>
@@ -89,8 +81,7 @@
                                     </tr>
                                     <tr>
                                         <td valign="middle">
-                                            <span class="select-user">Language</span>
-                                            <img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="images/info.svg" />
+                                            <span class="select-user">Language editors interface</span>
                                             <select class="select-user" id="language">
                                                 <option value="en">English</option>
                                                 <option value="be">Belarusian</option>
@@ -130,75 +121,86 @@
                             </table>
 
                             <div class="links-panel links-panel-border clearFix">
-                                <a href="/" class="">Go to Index page</a>
+                                <a href="<%= serverUrl %>/" class="">Go to Index page</a>
                             </div>
                         </div>
                     </td>
                     <td class="section">
                         <div class="main-panel">
-                            <% if (storedFiles.length <= 0)
-                            { %>
+                            <div id="portal-info">
                                 <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
                                 <span class="portal-descr">
-                                Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
-                                <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
-                            </span>
-                                <%} else
-                            { %>
-                                    <div class="stored-list">
-                                        <span class="header-list">Your documents</span>
-                                        <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
-                                            <thead>
-                                                <tr>
-                                                    <td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
-                                                    <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift"></td>
-                                                    <td class="tableHeaderCell tableHeaderCellViewers">WOPI Actions</td>
-                                                    <td class="tableHeaderCell tableHeaderCellDownload">Download</td>
-                                                    <td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
-                                                </tr>
-                                            </thead>
-                                        </table>
-                                        <div class="scroll-table-body">
-                                            <table cellspacing="0" cellpadding="0" width="100%">
-                                                <tbody>
-                                                    <% for (var i = 0; i < storedFiles.length; i++) { %>
-                                                        <tr class="tableRow" title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]">
-                                                            <td class="contentCells">
-                                                                <% if (storedFiles[i].defaultAction) { %>
-                                                                    <a class="stored-edit <%= storedFiles[i].documentType %>" href="wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].defaultAction.name %><%= params %>">
-                                                                <%} else { %>
-                                                                    <a class="stored-edit <%= storedFiles[i].documentType %>" href="#">
-                                                                <% } %>
-                                                                    <span title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]"><%= storedFiles[i].name %></span>
-                                                                </a>
-                                                            </td>
-                                                            <% if (storedFiles[i].actions && storedFiles[i].actions.length > 0) { %>
-                                                                <td class="contentCells contentCells-wopi contentCells-shift">
-                                                                    <% for (var j = 0; j < storedFiles[i].actions.length; j++) { %>
-                                                                        <a href="wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].actions[j].name %><%= params %>" target="_blank">
-                                                                            <% if (storedFiles[i].actions[j].name == "edit") { %>
-                                                                                <img src="images/fill-forms-24.png" alt="<%= storedFiles[i].actions[j].name %>" title="<%= storedFiles[i].actions[j].name %>" />
-                                                                            <%} else { %>
-                                                                                <img src="images/desktop-24.png" alt="<%= storedFiles[i].actions[j].name %>" title="<%= storedFiles[i].actions[j].name %>" />
-                                                                            <% } %>
-                                                                        </a>
-                                                                    <% } %>
-                                                                </td>
-                                                            <% } %>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
-                                                                <a href="wopi/files/<%= encodeURIComponent(storedFiles[i].name) %>/contents">
-                                                                    <img class="icon-download" src="images/download-24.png" alt="Download" title="Download" /></a>
-                                                            </td>
-                                                            <td class="contentCells contentCells-icon contentCells-shift">
-                                                                <a class="delete-file" data="<%= encodeURIComponent(storedFiles[i].name) %>">
-                                                                    <img class="icon-delete" src="images/delete-24.png" alt="Delete" title="Delete" /></a>
-                                                            </td>
-                                                        </tr>
-                                                    <% } %>
-                                                </tbody>
-                                            </table>
-                                        </div>
+                                    Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
+                                    <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
+                                </span>
+                                <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
+                                <% users.forEach(user => { %>
+                                    <div class="user-descr">
+                                        <b><%= user.name == null ? 'Anonymous' : user.name %></b>
+                                        <ul>
+                                            <% user.descriptions.forEach(description => { %>
+                                                <li><%= description %></li>
+                                            <% }) %>
+                                        </ul>
                                     </div>
+                                <% }) %>
+                            </div>
+                        <% if (storedFiles.length > 0)
+                            { %>
+                                <div class="stored-list">
+                                    <span class="header-list">Your documents</span>
+                                    <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
+                                        <thead>
+                                        <tr>
+                                            <td class="tableHeaderCell tableHeaderCellFileName">Filename</td>
+                                            <td class="tableHeaderCell tableHeaderCellEditors contentCells-shift"></td>
+                                            <td class="tableHeaderCell tableHeaderCellViewers">WOPI Actions</td>
+                                            <td class="tableHeaderCell tableHeaderCellDownload">Download</td>
+                                            <td class="tableHeaderCell tableHeaderCellRemove">Remove</td>
+                                        </tr>
+                                        </thead>
+                                    </table>
+                                    <div class="scroll-table-body">
+                                        <table cellspacing="0" cellpadding="0" width="100%">
+                                            <tbody>
+                                            <% for (var i = 0; i < storedFiles.length; i++) { %>
+                                                <tr class="tableRow" title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]">
+                                                    <td class="contentCells">
+                                                        <% if (storedFiles[i].defaultAction) { %>
+                                                        <a class="stored-edit <%= storedFiles[i].documentType %>" href="<%= serverUrl %>/wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].defaultAction.name %><%= params %>">
+                                                            <%} else { %>
+                                                            <a class="stored-edit <%= storedFiles[i].documentType %>" href="#">
+                                                                <% } %>
+                                                                <span title="<%= storedFiles[i].name %> [<%= storedFiles[i].version %>]"><%= storedFiles[i].name %></span>
+                                                            </a>
+                                                    </td>
+                                                    <% if (storedFiles[i].actions && storedFiles[i].actions.length > 0) { %>
+                                                        <td class="contentCells contentCells-wopi contentCells-shift">
+                                                            <% for (var j = 0; j < storedFiles[i].actions.length; j++) { %>
+                                                                <a href="<%= serverUrl %>/wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].actions[j].name %><%= params %>" target="_blank">
+                                                                    <% if (storedFiles[i].actions[j].name == "edit") { %>
+                                                                        <img src="images/fill-forms.svg" alt="<%= storedFiles[i].actions[j].name %>" title="<%= storedFiles[i].actions[j].name %>" />
+                                                                    <%} else { %>
+                                                                        <img src="images/desktop.svg" alt="<%= storedFiles[i].actions[j].name %>" title="<%= storedFiles[i].actions[j].name %>" />
+                                                                    <% } %>
+                                                                </a>
+                                                            <% } %>
+                                                        </td>
+                                                    <% } %>
+                                                    <td class="contentCells contentCells-icon contentCells-shift downloadContentCells">
+                                                        <a href="<%= serverUrl %>/wopi/files/<%= encodeURIComponent(storedFiles[i].name) %>/contents">
+                                                            <img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a>
+                                                    </td>
+                                                    <td class="contentCells contentCells-icon contentCells-shift">
+                                                        <a class="delete-file" data="<%= encodeURIComponent(storedFiles[i].name) %>">
+                                                            <img class="icon-delete" src="images/delete.svg" alt="Delete" title="Delete" /></a>
+                                                    </td>
+                                                </tr>
+                                            <% } %>
+                                            </tbody>
+                                        </table>
+                                    </div>
+                                </div>
                                 <% } %>
                         </div>
                     </td>
@@ -236,4 +238,4 @@
     <script type="text/javascript" src="javascripts/jscript.js"></script>
 </body>
 
-</html>
+</html>

web/documentserver-example/php/README.md

@@ -12,7 +12,7 @@ Download and install ONLYOFFICE Docs (packaged as Document Server).
 
 See the detailed guide to learn how to [install Document Server for Windows](https://helpcenter.onlyoffice.com/installation/docs-developer-install-windows.aspx?from=api_php_example).
 
-### Step 2. Download the PHP code
+### Step 2. Download the PHP code for the editors integration
 
 Download the [PHP example](https://api.onlyoffice.com/editors/demopreview) from our site.
 
@@ -24,13 +24,13 @@ $GLOBALS['DOC_SERV_SITE_URL'] = "https://documentserver/";
 
 where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
-If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) it the *doceditor.php* file.
+If you want to experiment with the editor configuration, modify the [parameters](https://api.onlyoffice.com/editors/advanced) in the *doceditor.php* file.
 
 ### Step 3. Install the prerequisites
 
-You can use any web server capable of runnig PHP code to run the example. We will demonstrate how to run the PHP example using the **Internet Information Services (IIS)** web server. To set up and configure PHP on IIS, **PHP Manager for IIS** will be used.
+You can use any web server capable of running PHP code to run the example. We will demonstrate how to run the PHP example using the **Internet Information Services (IIS)** web server. To set up and configure PHP on IIS, **PHP Manager for IIS** will be used.
 
-* **IIS: version 7** or later (refer to [Microsoft official website](https://www.iis.net/learn/application-frameworks/scenario-build-a-php-website-on-iis/configuring-step-1-install-iis-and-php) to learn how to install **IIS**);
+* **IIS**: version 7 or later (refer to [Microsoft official website](https://www.iis.net/learn/application-frameworks/scenario-build-a-php-website-on-iis/configuring-step-1-install-iis-and-php) to learn how to install IIS);
 * **PHP** (download it from the [http://php.net](https://php.net/downloads.php) site);
 * **PHP Manager for IIS** (download it from the [Microsoft open source site](https://phpmanager.codeplex.com/releases/view/69115)).
 
@@ -38,15 +38,15 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 1. **PHP Manager for IIS** configuration.
 
-	After **PHP Manager for IIS** installation is complete, launch the **IIS Manager:**
+	After PHP Manager for IIS installation is complete, launch the **IIS Manager:**
 
-	Start -> ControlPanel -> System and Security -> Administrative Tools -> Internet Information Services (IIS) Manager
+	**Start** -> **Control Panel** -> **System and Security** -> **Administrative Tools** -> **Internet Information Services (IIS) Manager**
 
-	and find the **PHP Manager** feature in the **Features View** in **IIS**.
+	and find the **PHP Manager** feature in the **Features View** in IIS.
 
 	![manager](screenshots/manager.png)
 
-	You need to register the installed PHP version in **IIS** using **PHP Manager**.
+	You need to register the installed PHP version in IIS using PHP Manager.
 
 	Double-click **PHP Manager** to open it, click the **Register new PHP version** task and specify the full path to the main PHP executable file location. For example: *C:\Program Files\PHP\php-cgi.exe*.
 	
@@ -58,7 +58,7 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 2. Configure IIS to handle PHP requests.
 
-	For IIS to host PHP applications, you must add handler mapping that tells IIS to pass all the PHP-specific requests to the PHP application framework by using the FastCGI protocol.
+	For IIS to host PHP applications, you must add handler mapping that tells IIS to pass all the PHP-specific requests to the PHP application framework by using the **FastCGI** protocol.
 
 	Double-click the **Handler Mappings** feature:
 	
@@ -66,16 +66,16 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 	In the **Action** panel, click **Add Module Mapping**. In the **Add Module Mapping** dialog box, specify the configuration settings as follows:
 
-	* Request path: ***.php**,
-	* Module: **FastCgiModule**,
-	* Executable: **"C:\[Path to your PHP installation]\php-cgi.exe"**,
-	* Name: **PHP via FastCGI**.
+	* **Request path**: *.php,
+	* **Module**: FastCgiModule,
+	* **Executable**: "C:\[Path to your PHP installation]\php-cgi.exe",
+	* **Name**: PHP via FastCGI.
 
 	Click **OK**.
 	
 	![handler-add](screenshots/handler-add.png)
 
-	After IIS manager configuration is complete, everything is ready for running the **PHP** example.
+	After IIS manager configuration is complete, everything is ready for running the PHP example.
 
 ### Step 5. Run your website with the editors
 
@@ -87,7 +87,7 @@ You can use any web server capable of runnig PHP code to run the example. We wil
 
 2. In the **Add Website** dialog box, specify the name of the folder with the PHP project in the **Site name** box.
 
-	Specify the path to the folder with your project in the **Physical Path** box.
+	Specify the path to the folder with your project in the **Physical path** box.
 
 	Specify the unique value used only for this website in the **Port** box.
 	
@@ -147,13 +147,13 @@ See the detailed guide to learn how to [install Document Server for Linux](https
     nano config.php
     ```
 
-	Edit the following lines:
+	Edit the following line:
 
     ```
     $GLOBALS['DOC_SERV_SITE_URL'] = "https://documentserver/";
     ```
 
-	Where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
+	where the **documentserver** is the name of the server with the ONLYOFFICE Document Server installed.
 
 5. Set permission for site:
 

web/documentserver-example/php/common.php

@@ -258,7 +258,7 @@ function getVersionDir($histDir, $version) {
 
 // get a number of the last file version from the history directory
 function getFileVersion($histDir) {
-    if (!file_exists($histDir) || !is_dir($histDir)) return 0;  // check if the history directory exists
+    if (!file_exists($histDir) || !is_dir($histDir)) return 1;  // check if the history directory exists
 
     $cdir = scandir($histDir);
     $ver = 1;

web/documentserver-example/php/config.php

@@ -4,7 +4,7 @@ $GLOBALS['FILE_SIZE_MAX'] = 5242880;
 $GLOBALS['STORAGE_PATH'] = "";
 $GLOBALS['ALONE'] = FALSE;
 
-$GLOBALS['DOC_SERV_VIEWD'] = array(".pdf", ".djvu", ".xps");
+$GLOBALS['DOC_SERV_VIEWD'] = array(".pdf", ".djvu", ".xps", ".oxps");
 $GLOBALS['DOC_SERV_EDITED'] = array(".docx", ".xlsx", ".csv", ".pptx", ".txt");
 $GLOBALS['DOC_SERV_CONVERT'] = array(".docm", ".doc", ".dotx", ".dotm", ".dot", ".odt", ".fodt", ".ott", ".xlsm", ".xls", ".xltx", ".xltm", ".xlt", ".ods", ".fods", ".ots", ".pptm", ".ppt", ".ppsx", ".ppsm", ".pps", ".potx", ".potm", ".pot", ".odp", ".fodp", ".otp", ".rtf", ".mht", ".html", ".htm", ".xml", ".epub", ".fb2");
 
@@ -39,7 +39,7 @@ $GLOBALS['ExtsDocument'] = array(".doc", ".docx", ".docm",
                                  ".dot", ".dotx", ".dotm",
                                  ".odt", ".fodt", ".ott", ".rtf", ".txt",
                                  ".html", ".htm", ".mht", ".xml",
-                                 ".pdf", ".djvu", ".fb2", ".epub", ".xps");
+                                 ".pdf", ".djvu", ".fb2", ".epub", ".xps", ".oxps");
 
 
 ?>

web/documentserver-example/php/css/media.css

@@ -0,0 +1,607 @@
+@media (min-width: 1280px)  and (max-width: 1380px) {
+    .copy {
+        margin-right: 6.5%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 6.5%;
+    }
+}
+
+@media (max-width: 1280px)  and (min-width: 1080px) {
+
+    .tableRow td:first-child {
+        flex-grow: 1;
+        width: 25%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 25%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 29%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        width: 21%;
+        padding-right: 18px;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 13px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 5%;
+    }
+
+    .copy {
+        margin-right: 5%;
+        padding-right: 32px;
+    }
+
+    .left-panel {
+        margin-left: 48px;
+        width: 20%;
+    }
+}
+
+@media (max-width: 1080px) {
+    .copy {
+        margin-right: 32px;
+    }
+
+    footer table tr td:first-child {
+        margin-left: 0;
+    }
+
+    .tableRow {
+        width: 90%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 38%;
+    }
+
+    .tableHeaderCellDownload {
+        width: 23%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0px;
+    }
+}
+
+@media (max-width: 1008px) {
+    #portal-info {
+        width: 65vw;
+    }
+
+    .left-panel {
+        margin-left: 0;
+    }
+
+    .main-panel {
+        left: -1%;
+        padding: 48px 26px 24px;
+    }
+}
+
+@media (max-width: 769px) and (min-width: 593px) {
+    .contentCells-icon{
+        width: 5%;
+    }
+    .tableRow {
+        width: 55%;
+    }
+
+    .tableRow td:first-child {
+        border: none;
+        flex-grow: 1;
+        width: 100%;
+        max-width: 100%;
+    }
+
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .main-panel {
+        left: 0;
+        padding: 48px 18px 24px;
+    }
+
+    footer table td {
+        margin-left: 0;
+        margin-right: 0;
+        padding-right: 4px;
+        padding-left: 4px;
+    }
+
+    .copy {
+        margin:auto;
+        padding-right: 3%;
+    }
+
+    footer table tr td:first-child {
+        margin-left: auto;
+        padding-left: 1%;
+        margin-right: 1.5%;
+    }
+
+    .contentCells-shift {
+        padding-right: 22px;
+    }
+}
+
+@media (max-width: 715px) {
+    .tableRow {
+        width: 45%;
+    }
+}
+@media (max-width: 670px) and (min-width: 620px){
+    .main-panel{
+        width: 90%;
+    }
+}
+@media (max-width: 681px) and (min-width: 593px) {
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 48px 0 24px;
+    }
+
+    .help-block {
+        margin: 48px 20px 24px;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+}
+
+@media (max-width: 1080px) and (min-width: 970px) {
+    .tableHeader {
+        width: 90%;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .tableHeaderCellFileName {
+        width: 16%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 13%;
+    }
+
+    .tableHeaderCellViewers {
+        text-align: right;
+        width: 37%;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 22px;
+        width: 22%;
+    }
+}
+
+@media (max-width: 986px) and (min-width: 890px) {
+    .tableHeader {
+        width: 75%;
+    }
+
+    .tableHeaderCellEditors {
+        width: 26%;
+        text-align: left;
+    }
+
+    .tableHeaderCellFileName {
+        width: 17%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 27%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 18px;
+        width: 20%;
+    }
+
+    .tableHeaderCellRemove {
+        padding-left: 0;
+    }
+
+    .tableRow {
+        width: 75%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 38px;
+    }
+
+    .tableRow td:first-child {
+        flex-grow: 0;
+        width: 15%;
+    }
+
+    .contentCells-icon {
+        width: 3%;
+    }
+}
+
+@media (max-width: 890px) and (min-width: 769px ) {
+    .left-panel{
+        width: 20%;
+    }
+    .contentCells-shift {
+        padding-right: 28px;
+    }
+
+    .main-panel {
+        width: 580px;
+    }
+
+    .tableRow {
+        width: 95%;
+    }
+
+    .tableHeader {
+        width: 95%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 22%;
+        text-align: right;
+    }
+
+    .tableHeaderCellDownload {
+        padding-right: 4px;
+        width: 20%;
+        text-align: right;
+    }
+
+    .tableHeaderCellFileName {
+        width: 20%;
+    }
+
+    .tableHeaderCellEditors {
+        text-align: left;
+        width: 31%;
+    }
+
+    .tableHeaderCellViewers {
+        width: 18%;
+    }
+}
+
+@media (max-width: 890px) {
+    .tableRow td:first-child {
+        max-width: 17%;
+    }
+}
+
+.downloadContentCellShift:after {
+    bottom: 0;
+    left: 0;
+    content: "";
+    background: #e5e5e5;
+    height: 1px;
+    position: absolute;
+    width: 100%;
+}
+
+@media (max-width: 769px) {
+    .tableRow td:first-child {
+        max-width: 100%;
+    }
+}
+
+
+@media (max-width: 593px ) {
+    #portal-info {
+        width: 50vw;
+    }
+    .file-upload{
+        width: 100%;
+    }
+    #fileupload{
+        width: 100%;
+    }
+    .tableHeader {
+        display: none;
+    }
+
+    .scroll-table-body {
+        top: 31px;
+    }
+
+    footer table tr {
+        justify-content: center;
+    }
+
+    footer table td {
+        padding-top: 16px;
+        padding-right: 32px;
+        padding-left: 32px;
+    }
+
+    footer {
+        height: 80px;
+    }
+
+    .copy {
+        width: 100%;
+        text-align: center;
+        margin: 0;
+    }
+
+    .left-panel {
+        width: 10%;
+    }
+
+    .help-block {
+        margin: 16px 10px 6px;
+    }
+
+    .main-panel {
+        left: 2%;
+        padding: 16px 0 6px;
+    }
+
+    .tableRow {
+        width: 40%;
+    }
+
+    .tableRow td {
+        border: none;
+    }
+
+    .firstContentCellShift {
+        border: none;
+        flex-basis: 10%;
+        flex-grow: 1;
+    }
+
+    .downloadContentCellShift {
+        max-width: 7%;
+        margin-right: -11px;
+        margin-left: auto;
+    }
+
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .tableRow td:last-child {
+        width: 12%;
+        padding-right: 40px;
+        border: none;
+    }
+
+    .contentCells-shift {
+        padding-right: 35px;
+    }
+
+    .downloadContentCellShift:after {
+        width: 85%;
+    }
+
+    .firstContentCellViewers {
+        margin-left: 0;
+        border-bottom: 1px solid #e5e5e5 !important;
+    }
+
+    .firstContentCellViewers ~ td {
+        border-bottom: 1px solid #e5e5e5;
+    }
+    .tableRow td:first-child{
+        border: none;
+        width: 85%;
+    }
+    .contentCellsEmpty{
+        display: none;
+        width: 1%;
+    }
+}
+
+@media (max-width: 560px) and (min-width: 510px) {
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        padding-right: 45px;
+        max-width: 4%;
+    }
+}
+
+@media (max-width: 510px)  and (min-width: 470px) {
+    .tableRow {
+        width: 35%;
+    }
+
+    .tableRow td:first-child{
+        width: 83%;
+    }
+    .contentCells-icon {
+        width: 13%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 6%;
+        padding-right: 37px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 9%;
+    }
+
+    .tableRow td:last-child {
+        padding-right: 28px;
+    }
+}
+
+@media (max-width: 470px)  and (min-width: 420px) {
+    .tableRow {
+        width: 30%;
+    }
+    .tableRow td:first-child{
+        width: 85%;
+    }
+    .contentCells-icon {
+        width: 11%;
+    }
+
+    .downloadContentCellShift {
+        max-width: 3%;
+        padding-right: 37px;
+        padding-left: 0;
+    }
+
+    .firstContentCellShift {
+        margin-left: 1px;
+        flex-basis: 14%;
+    }
+
+    .tableRow td:last-child {
+        width: 5%;
+        padding-right: 63px;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 12%;
+    }
+    .contentCellsEmpty{
+        display: none;
+    }
+}
+
+@media (max-width: 420px) and (min-width: 320px) {
+    .tableRow {
+        width: 25%;
+    }
+
+    .tableRow td:last-child {
+        width: 6%;
+        padding-right: 16px;
+    }
+
+    .downloadContentCellShift {
+        max-width: 4%;
+        margin-right: -18px;
+        margin-left: -1px;
+    }
+
+    .firstContentCellShift {
+        flex-basis: 2%;
+    }
+
+    .contentCells-icon{
+        width: 10%;
+    }
+    footer table td {
+        margin: 0;
+        padding-right: 5px;
+        padding-left: 5px;
+    }
+
+    .copy {
+        padding-right: 5px;
+        margin: 0;
+    }
+    .firstContentCellViewers{
+        padding-right: 2px;
+        width: 11%;
+    }
+}
+
+@media (max-width: 1160px) {
+    .left-panel {
+        margin-left: 0;
+    }
+}
+
+@media (min-width: 593px) {
+    .contentCellsEmpty {
+        display: none;
+    }
+}
+@media (max-width: 769px) and (min-width: 715px){
+    .tableRow{
+        width: 50%;
+    }
+}
+@media (max-width: 510px) {
+    .tableRow td:first-child{
+        flex-grow: 0;
+    }
+}
+@media (max-width: 1100px) and (min-width: 890px){
+    .main-panel > span{
+        max-width: 70%;
+    }
+}
+@media (max-width: 780px) and (min-width: 600px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+    .main-panel > span{
+        max-width: 45%;
+    }
+}
+@media (max-width: 600px) and (min-width: 320px) {
+    .main-panel{
+        display: flex;
+        flex-direction: column;
+    }
+}
+@media (max-width:600px) and (min-width:500px){
+    .main-panel > span{
+        max-width:35%;
+    }
+}
+@media (max-width:500px) and (min-width:400px){
+    .main-panel > span{
+        max-width:20%;
+    }
+}
+@media (max-width:400px) and (min-width:320px){
+    .main-panel > span{
+        max-width:15%;
+    }
+}

web/documentserver-example/php/css/stylesheet.css

@@ -33,6 +33,7 @@ body {
     overflow-y: overlay;
     padding: 0;
     text-decoration: none;
+    overflow-x: hidden;
 }
 
 form {
@@ -52,23 +53,24 @@ a:visited {
 
 header {
     background: #333333;
-    height: 72px;
+    height: 48px;
     margin: 0 auto;
     min-width: 1152px;
     width: auto;
 }
 
 header img {
-    margin: 22px 0 22px 32px;
+    margin: 10px 0 22px 32px;
 }
 
 .center {
+    position: relative;
     margin: 0 auto 0;
     width: 1152px;
 }
 
 .main{
-    height: calc(100% - 136px);
+    height: calc(100% - 112px);
     min-height: 536px;
 }
 
@@ -353,19 +355,33 @@ footer {
     background: #333333;
     color: #AAAAAA;
     height: 64px;
-    min-width: 1152px;
-    width: auto;
+    width: 100%;
+	position: relative;
+	left: 0;
+	bottom: 0;
+}
+footer > .center{
+    width: 100%;
 }
-
 footer table {
+    width: 100%;
     border-spacing: 0;
 }
 
 footer table tr {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    align-content: center;
+    flex-wrap: wrap;
+    width: 100vw;
     height: 64px;
 }
 
 footer table td {
+	display: block;
+    position: relative;
     padding-left: 32px;
 }
 
@@ -380,9 +396,16 @@ footer a:visited {
 footer a:hover {
     text-decoration: none;
 }
-
+footer table tr td:first-child {
+    margin-left: 14%;
+}
 .copy {
-    padding-left: 510px;
+    color: #aaaaaa;
+    width: max-content;
+    position: relative;
+    margin-left: auto;
+    margin-right: 14%;
+
 }
 
 .help-block {
@@ -539,6 +562,7 @@ footer a:hover {
 }
 
 .contentCells {
+	display: block;
     border-bottom: 1px solid #EFEFEF;
     font-family: 'Open Sans', sans-serif;
     font-size: 16px;
@@ -568,31 +592,7 @@ footer a:hover {
 
 .info{
     cursor: pointer;
-    padding: 3px 5px;
-    position: absolute;
-}
-
-.tooltip {
-    background: #FFFFFF;
-    border-radius: 5px;
-    box-shadow: 0px 7px 25px rgba(85, 85, 85, 0.15);
-    color: #666666;
-    line-height: 160%;
-    max-width: 455px;
-    padding: 14px;
-    position: absolute;
-}
-
-.tooltip ul{
-    margin: 0;
-}
-
-.arrow{
-    border-top: 8px solid transparent;
-    border-bottom: 8px solid transparent;
-    border-right: 8px solid #FFFFFF;
-    position: absolute;
-    transform: translate(-50%, -50%);
+    margin: -2px 5px;
 }
 
 .user-block-table {
@@ -680,4 +680,61 @@ footer a:hover {
     line-height: 160%;
     letter-spacing: -0.02em;
     word-wrap: break-word;
-}
+}
+
+html {
+    overflow-x: hidden;
+}
+
+
+.tableRow {
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    position: relative;
+}
+
+
+.tableRow td:first-child {
+    display: flex;
+    flex-grow: 1;
+    max-width: 25%;
+}
+
+.tableHeaderCellFileName {
+    width: 30%;
+}
+
+.tableHeaderCellEditors {
+    width: 28%;
+}
+
+.tableHeaderCellViewers {
+    text-align: center;
+    width: 18%
+}
+
+.firstContentCellViewers {
+    margin-left: auto;
+}
+
+.user-descr {
+    display: inline-table;
+    width: 30vw;
+    min-width: 200px;
+    max-width: 400px;
+}
+
+.user-descr > b {
+    margin-left: 25px;
+}
+
+#portal-info {
+    display: block;
+    width: 70vw;
+}
+
+.portal-descr:nth-child(3) {
+    margin-bottom: 20px;
+}

web/documentserver-example/php/doceditor.php

@@ -66,7 +66,7 @@
     $createUrl = getCreateUrl($filename, $user->id, $type);
     $templates = array(
         array (
-            "image" => $templatesImageUrl,
+            "image" => "",
             "title" => "Blank",
             "url" => $createUrl
         ),
@@ -191,6 +191,7 @@
                     . "&userAddress=" . getClientIp();
     }
 
+    // get url to the created file
     function getCreateUrl($fileName, $uid, $type) {
         $ext = trim(getInternalExtension($fileName),'.');
         return serverPath(false) . '/'
@@ -200,6 +201,7 @@
                 . "&type=" . $type;
     }
 
+    // get url to download a file
     function getDownloadUrl($fileName) {
         return serverPath(TRUE) . '/'
             . "webeditor-ajax.php"
@@ -464,10 +466,11 @@
             <?php if ($usersForMentions != null): ?>
             // add mentions for not anonymous users
             config.events['onRequestUsers'] = function () {
-                docEditor.setUsers({
+                docEditor.setUsers({  // set a list of users to mention in the comments
                     "users": <?php echo json_encode($usersForMentions) ?>
                 });
             };
+            // the user is mentioned in a comment
             config.events['onRequestSendNotify'] = function (event) {
                 var actionLink = JSON.stringify(event.data.actionLink);
                 console.log("onRequestSendNotify:");

web/documentserver-example/php/index.php

@@ -37,7 +37,7 @@
         <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Open+Sans:900,800,700,600,500,400,300&subset=latin,cyrillic-ext,cyrillic,latin-ext" />
 
         <link rel="stylesheet" type="text/css" href="css/stylesheet.css" />
-
+        <link rel="stylesheet" type="text/css" href="css/media.css">
         <link rel="stylesheet" type="text/css" href="css/jquery-ui.css" />
     </head>
     <body>
@@ -83,18 +83,7 @@
                                             <tr>
                                                 <td valign="middle">
                                                     <span class="select-user">Username</span>
-                                                    <img class="info" data-id="user" data-tooltip="You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.
-                                                    </br>
-                                                    <?php foreach(getAllUsers() as $user_l) {
-                                                        $name = $user_l->name ? $user_l->name : "Anonymous";
-                                                        echo '<b>'.$name.'</b>';
-                                                        echo '<ul>';
-                                                        foreach ($user_l->descriptions as $description) {
-                                                            echo '<li>'.$description.'</li>';
-                                                        }
-                                                        echo '</ul>';
-                                                    } ?>"
-                                                    src="css/images/info.svg" />
+                                                    <img class="info" src="css/images/info.svg" />
                                                     <select class="select-user" id="user">
                                                         <?php foreach(getAllUsers() as $user_l) {
                                                             $name = $user_l->name ? $user_l->name : "Anonymous";
@@ -105,8 +94,7 @@
                                             </tr>
                                             <tr>
                                                 <td valign="middle">
-                                                    <span class="select-user">Language</span>
-                                                    <img class="info" data-id="language" data-tooltip="Choose the language for ONLYOFFICE editors interface" src="css/images/info.svg" />
+                                                    <span class="select-user">Language editors interface</span>
                                                     <select class="select-user" id="language">
                                                         <option value="en">English</option>
                                                         <option value="be">Belarusian</option>
@@ -148,16 +136,28 @@
                             </td>
                             <td class="section">
                                 <div class="main-panel">
+                                    <div id="portal-info">
+                                        <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
+                                        <span class="portal-descr">
+                                            Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
+                                            <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
+                                        </span>
+                                        <span class="portal-descr">You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions.</span>
+                                        <?php foreach(getAllUsers() as $user_l) {
+                                            $name = $user_l->name ? $user_l->name : "Anonymous";
+                                            echo '<div class="user-descr">';
+                                            echo '<b>'.$name.'</b>';
+                                            echo '<ul>';
+                                            foreach ($user_l->descriptions as $description) {
+                                                echo '<li>'.$description.'</li>';
+                                            }
+                                            echo '</ul>';
+                                            echo '</div>';
+                                        } ?>"
+                                    </div>
                                     <?php
                                         $storedFiles = getStoredFiles();
-                                        if (empty($storedFiles)) { ?>
-                                            <span class="portal-name">ONLYOFFICE Document Editors – Welcome!</span>
-                                            <span class="portal-descr">
-                                                Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
-                                                <br /> You may upload your own documents for testing using the "<b>Upload file</b>" button and <b>selecting</b> the necessary files on your PC.
-                                            </span>
-                                    <?php
-                                        } else { ?>
+                                        if (!empty($storedFiles)) { ?>
                                             <div class="stored-list">
                                                 <span class="header-list">Your documents</span>
                                                 <table class="tableHeader" cellspacing="0" cellpadding="0" width="100%">
@@ -175,79 +175,81 @@
                                                     <table cellspacing="0" cellpadding="0" width="100%">
                                                         <tbody>
                                                             <?php foreach ($storedFiles as &$storeFile) {
-                                                                echo '<tr class="tableRow" title="'.$storeFile->name.'">';
+                                                                echo '<tr class="tableRow" title="'.$storeFile->name.' ['.getFileVersion(getHistoryDir(getStoragePath($storeFile->name))).']">';
                                                                 echo ' <td class="contentCells">';
                                                                 echo '  <a class="stored-edit '.$storeFile->documentType.'" href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'" target="_blank">';
-                                                                echo '   <span title="'.$storeFile->name.'">'.$storeFile->name.'</span>';
+                                                                echo '   <span>'.$storeFile->name.'</span>';
                                                                 echo '  </a>';
                                                                 echo ' </td>';
                                                                 if ($storeFile->canEdit) {
                                                                     echo ' <td class="contentCells contentCells-icon">';
                                                                     echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=edit&type=desktop" target="_blank">';
                                                                     echo '   <img src="css/images/desktop.svg" alt="Open in editor for full size screens" title="Open in editor for full size screens" /></a>';
-                                                                    echo '  </a>';
                                                                     echo ' </td>';
                                                                     echo ' <td class="contentCells contentCells-icon">';
                                                                     echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=edit&type=mobile" target="_blank">';
                                                                     echo '   <img src="css/images/mobile.svg" alt="Open in editor for mobile devices" title="Open in editor for mobile devices" /></a>';
-                                                                    echo '  </a>';
-                                                                    echo ' <td class="contentCells contentCells-icon">';
-                                                                    if ($storeFile->documentType == "word") {
-                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=review&type=desktop" target="_blank">';
-                                                                        echo '   <img src="css/images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>';
-                                                                        echo '  </a>';
-                                                                    } else if ($storeFile->documentType == "cell") {
-                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=filter&type=desktop" target="_blank">';
-                                                                        echo '   <img src="css/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>';
-                                                                        echo '  </a>';
-                                                                    }
                                                                     echo ' </td>';
                                                                     echo ' <td class="contentCells contentCells-icon">';
                                                                     echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=comment&type=desktop" target="_blank">';
                                                                     echo '   <img src="css/images/comment.svg" alt="Open in editor for comment" title="Open in editor for comment" /></a>';
-                                                                    echo '  </a>';
                                                                     echo ' </td>';
-                                                                    echo ' <td class="contentCells contentCells-icon">';
                                                                     if ($storeFile->documentType == "word") {
+                                                                        echo ' <td class="contentCells contentCells-icon">';
+                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=review&type=desktop" target="_blank">';
+                                                                        echo '   <img src="css/images/review.svg" alt="Open in editor for review" title="Open in editor for review" /></a>';
+                                                                        echo ' </td>';
+                                                                    } else if ($storeFile->documentType == "cell") {
+                                                                        echo ' <td class="contentCells contentCells-icon">';
+                                                                        echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=filter&type=desktop" target="_blank">';
+                                                                        echo '   <img src="css/images/filter.svg" alt="Open in editor without access to change the filter" title="Open in editor without access to change the filter" /></a>';
+                                                                        echo ' </td>';
+                                                                    }
+                                                                    if($storeFile->documentType!="word" && $storeFile->documentType!="cell"){
+                                                                       echo ' <td class="contentCells contentCells-icon contentCellsEmpty"></td>';
+                                                                    }
+                                                                    if ($storeFile->documentType == "word") {
+                                                                        echo ' <td class="contentCells contentCells-icon ">';
                                                                         echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=fillForms&type=desktop" target="_blank">';
                                                                         echo '   <img src="css/images/fill-forms.svg" alt="Open in editor for filling in forms" title="Open in editor for filling in forms" /></a>';
-                                                                        echo '  </a>';
+                                                                        echo ' </td>';
+                                                                    }
+                                                                    else{
+                                                                        echo ' <td class="contentCells contentCells-icon "></td> ';
                                                                     }
-                                                                    echo ' </td>';
-                                                                    echo ' <td class="contentCells contentCells-icon contentCells-shift">';
                                                                     if ($storeFile->documentType == "word") {
+                                                                        echo ' <td class="contentCells contentCells-icon contentCells-shift firstContentCellShift">';
                                                                         echo '  <a href="doceditor.php?fileID=' . urlencode($storeFile->name) . '&user=' . htmlentities($user) . '&action=blockcontent&type=desktop" target="_blank">';
                                                                         echo '   <img src="css/images/block-content.svg" alt="Open in editor without content control modification" title="Open in editor without content control modification" /></a>';
-                                                                        echo '  </a>';
+                                                                        echo ' </td>';
+                                                                    } else{
+                                                                       echo ' <td class="contentCells contentCells-shift contentCells-icon firstContentCellShift"></td> ';
+                                                                    }
+                                                                    if($storeFile->documentType!="word" && $storeFile->documentType!="cell"){
+                                                                        echo ' <td class="contentCells contentCells-icon"></td>';
                                                                     }
-                                                                    echo ' </td>';
                                                                 } else {
-                                                                    echo '<td class="contentCells contentCells-shift contentCells-icon" colspan="6"></td>';
+                                                                    echo '<td class="contentCells contentCells-shift contentCells-icon contentCellsEmpty" colspan="6"></td>';
                                                                 }
-                                                                echo ' <td class="contentCells contentCells-icon">';
+                                                                echo ' <td class="contentCells contentCells-icon firstContentCellViewers">';
                                                                 echo '  <a href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'&action=view&type=desktop" target="_blank">';
                                                                 echo '   <img src="css/images/desktop.svg" alt="Open in viewer for full size screens" title="Open in viewer for full size screens" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo ' <td class="contentCells contentCells-icon">';
                                                                 echo '  <a href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'&action=view&type=mobile" target="_blank">';
                                                                 echo '   <img src="css/images/mobile.svg" alt="Open in viewer for mobile devices" title="Open in viewer for mobile devices" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo ' <td class="contentCells contentCells-icon contentCells-shift">';
                                                                 echo '  <a href="doceditor.php?fileID='.urlencode($storeFile->name).'&user='.htmlentities($user).'&action=embedded&type=embedded" target="_blank">';
                                                                 echo '   <img src="css/images/embeded.svg" alt="Open in embedded mode" title="Open in embedded mode" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
-                                                                echo ' <td class="contentCells contentCells-icon contentCells-shift">';
+                                                                echo ' <td class="contentCells contentCells-icon contentCells-shift downloadContentCellShift">';
                                                                 echo '  <a href="webeditor-ajax.php?type=download&fileName='.urlencode($storeFile->name).'">';
                                                                 echo '   <img class="icon-download" src="css/images/download.svg" alt="Download" title="Download" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo ' <td class="contentCells contentCells-icon contentCells-shift">';
                                                                 echo '  <a class="delete-file" data="'.$storeFile->name.'">';
                                                                 echo '   <img class="icon-delete" src="css/images/delete.svg" alt="Delete" title="Delete" /></a>';
-                                                                echo '  </a>';
                                                                 echo ' </td>';
                                                                 echo '</tr>';
                                                             } ?>

web/documentserver-example/php/js/jscript.js

@@ -308,32 +308,61 @@ if (typeof jQuery != "undefined") {
         });
     });
 
-    jq(".info").mouseover(function (event) {
-        var target = event.target;
-        var id = target.dataset.id ? target.dataset.id : target.id;
-        var tooltip = target.dataset.tooltip;
-
-        jq("<div class='tooltip'>" + tooltip + "</div><div class='arrow'></div>").appendTo("body");
-
-        var left = jq("#" + id).offset().left + jq("#" + id).outerWidth();
-
-        var topElement = jq("#" + id).offset().top;
-        var halfHeightElement = jq("#" + id).outerHeight() / 2;
-
-        var heightToFooter = jq("footer").offset().top - (topElement + halfHeightElement);
-        var halfHeightTooltip = jq("div.tooltip").outerHeight() / 2;
-        if (heightToFooter > (halfHeightTooltip + 10)) {
-            var top = topElement + halfHeightElement - halfHeightTooltip;
-        } else {
-            var top = jq("footer").offset().top - jq("div.tooltip").outerHeight() - 10;
+    
+    function showUserTooltip (isMobile) {
+        if ( jq("div#portal-info").is(":hidden") ) {
+            jq("div#portal-info").show();
+            jq("div.stored-list").hide();
+        } else if (isMobile && jq("div#portal-info").is(":visible")) {
+            jq("div#portal-info").hide();
+            jq("div.stored-list").show();
         }
+    };
 
-        jq("div.tooltip").css({"top": top, "left": left + 10});
-        jq("div.arrow").css({"top": topElement + halfHeightElement, "left": left + 6});
-    }).mouseout(function () {
-        jq("div.tooltip").remove();
-        jq("div.arrow").remove();
-    });
+    var fileList = jq("tr.tableRow");
+    if (fileList.length > 0) {
+        console.log(jq("div#portal-info").is(":visible"));
+        jq("div#portal-info").hide();
+    }
+
+    var mouseIsOverTooltip = false;
+    var hideTooltipTimeout = null;
+    if (/android|avantgo|playbook|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\\|plucker|pocket|psp|symbian|treo|up\\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i
+        .test(navigator.userAgent)) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                jq(".info").on("touchend", function () {
+                    showUserTooltip(true);
+                });
+            }
+    } else {
+        jq(".info").mouseover(function (event) {
+            if (fileList.length > 0) {
+                if (hideTooltipTimeout != null) {
+                    clearTimeout(hideTooltipTimeout);
+                }
+                showUserTooltip(false);
+
+                jq("div#portal-info").mouseenter(function () {
+                    mouseIsOverTooltip = true;
+                }).mouseleave(function () {
+                    mouseIsOverTooltip = false;
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                })
+            }
+        }).mouseleave(function () {
+            hideTooltipTimeout = setTimeout(function () {
+                if (mouseIsOverTooltip == false && fileList.length > 0) {
+                    jq("div.stored-list").show();
+                    jq("div#portal-info").hide();
+                }
+            }, 500);
+        });
+    }
+}
 }
 
 function getUrlVars() {

web/documentserver-example/php/trackmanager.php

@@ -76,6 +76,10 @@ function readBody() {
 // file saving process
 function processSave($data, $fileName, $userAddress) {
     $downloadUri = $data["url"];
+    if ($downloadUri === null) {
+        $result["error"] = 1;
+        return $result;
+    }
 
     $curExt = strtolower('.' . pathinfo($fileName, PATHINFO_EXTENSION));  // get current file extension
     $downloadExt = strtolower('.' . pathinfo($downloadUri, PATHINFO_EXTENSION));  // get the extension of the downloaded file
@@ -144,6 +148,10 @@ function processSave($data, $fileName, $userAddress) {
 // file force saving process
 function processForceSave($data, $fileName, $userAddress) {
     $downloadUri = $data["url"];
+    if ($downloadUri === null) {
+        $result["error"] = 1;
+        return $result;
+    }
 
     $curExt = strtolower('.' . pathinfo($fileName, PATHINFO_EXTENSION));  // get current file extension
     $downloadExt = strtolower('.' . pathinfo($downloadUri, PATHINFO_EXTENSION));  // get the extension of the downloaded file

web/documentserver-example/php/users.php

@@ -94,11 +94,13 @@ $users = [
             null, [], $descr_user_0, false)
 ];
 
+// get a list of all the users
 function getAllUsers() {
     global $users;
     return $users;
 }
 
+// get a user by id specified
 function getUser($id) {
     global $users;
     foreach ($users as $user){
@@ -110,6 +112,7 @@ function getUser($id) {
     return $users[0];
 }
 
+// get a list of users with their names and emails for mentions
 function getUsersForMentions($id) {
     global $users;
     $usersData = [];

web/documentserver-example/php/webeditor-ajax.php

@@ -204,7 +204,11 @@ function convert() {
 
         $fileUri = $post["fileUri"];
         if ($fileUri == NULL || $fileUri == "") {
-            $fileUri = FileUri($fileName, TRUE);
+            $fileUri =  $fileUri=serverPath(TRUE) . '/'
+                . "webeditor-ajax.php"
+                . "?type=download"
+                . "&fileName=" . urlencode($fileName)
+                . "&userAddress=" . getClientIp();
         }
         $key = getDocEditorKey($fileName);