diff --git a/web/documentserver-example/csharp/App_Themes/media.css b/web/documentserver-example/csharp/App_Themes/media.css index 75504229..3f8f7f8a 100644 --- a/web/documentserver-example/csharp/App_Themes/media.css +++ b/web/documentserver-example/csharp/App_Themes/media.css @@ -48,7 +48,7 @@ .left-panel { margin-left: 48px; - width: 95%; + width: 20%; } } @@ -87,9 +87,12 @@ } @media (max-width: 1008px) { + #portal-info { + width: 65vw; + } + .left-panel { margin-left: 0; - width: 94%; } .main-panel { @@ -125,10 +128,6 @@ height: 80px; } - .left-panel { - width: 90%; - } - .main-panel { left: 0; padding: 48px 18px 24px; @@ -333,6 +332,9 @@ @media (max-width: 593px ) { + #portal-info { + width: 50vw; + } .file-upload{ width: 100%; } @@ -347,15 +349,6 @@ top: 31px; } - .menu { - display: flex; - } - - header .center > a { - position: absolute; - left: 30px; - } - footer table tr { justify-content: center; } diff --git a/web/documentserver-example/csharp/App_Themes/stylesheet.css b/web/documentserver-example/csharp/App_Themes/stylesheet.css index 7953bd54..c9cab767 100644 --- a/web/documentserver-example/csharp/App_Themes/stylesheet.css +++ b/web/documentserver-example/csharp/App_Themes/stylesheet.css @@ -357,7 +357,7 @@ footer { color: #AAAAAA; height: 64px; width: 100%; - position: absolute; + position: relative; left: 0; bottom: 0; } @@ -599,29 +599,6 @@ footer a:hover { margin: -2px 5px; } -.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%); -} - .user-block-table { height: 100%; padding-top: 14px; @@ -709,27 +686,6 @@ footer a:hover { word-wrap: break-word; } -.menu { - cursor: pointer; - display: none; - flex-wrap: nowrap; - flex-direction: column; - justify-content: space-between; - top: 10px; - left: 12px; - position: absolute; - content: ""; - height: 26px; - width: 30px; -} - - .menu span { - content: ""; - width: 26px; - height: 3px; - background: rgb(194, 194, 194); - } - html { overflow-x: hidden; } @@ -766,3 +722,23 @@ html { .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; +} \ No newline at end of file diff --git a/web/documentserver-example/csharp/Default.aspx b/web/documentserver-example/csharp/Default.aspx index 9f7ffbc0..9b4f1a93 100644 --- a/web/documentserver-example/csharp/Default.aspx +++ b/web/documentserver-example/csharp/Default.aspx @@ -83,19 +83,7 @@ Username - - - <% } %>" - src="app_themes/images/info.svg" /> + @@ -149,16 +136,28 @@
- <% var storedFiles = GetStoredFiles(); - if (!storedFiles.Any()) - { %> +
ONLYOFFICE Document Editors – Welcome! Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors.
You may upload your own documents for testing using the "Upload file" button and selecting the necessary files on your PC. - <% } - else + You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions. + <% foreach (User user in Users.getAllUsers()) + { %> +
+ <%= user.name.IsEmpty() ? "Anonymous" : user.name %> +
    + <% foreach (string description in user.descriptions) + { %> +
  • <%= description %>
    • + <% } %> +
+
+ <% } %> +
+ <% var storedFiles = GetStoredFiles(); + if storedFiles.Any()) { %>
Your documents diff --git a/web/documentserver-example/csharp/script/jscript.js b/web/documentserver-example/csharp/script/jscript.js index 96003597..b79b05b9 100644 --- a/web/documentserver-example/csharp/script/jscript.js +++ b/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("
" + tooltip + "
").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); + }); + } +} } \ No newline at end of file