From e1753a154d34dae71c49053f1707bfc4c314d03a Mon Sep 17 00:00:00 2001 From: Oleg Sinizin Date: Mon, 27 Sep 2021 13:28:08 +0300 Subject: [PATCH] nodejs: users tooltip layout --- .../nodejs/public/javascripts/jscript.js | 75 ++++++--- .../nodejs/public/stylesheets/media.css | 27 ++-- .../nodejs/public/stylesheets/stylesheet.css | 66 +++----- .../nodejs/views/index.ejs | 73 ++++----- .../nodejs/views/wopiIndex.ejs | 146 +++++++++--------- 5 files changed, 189 insertions(+), 198 deletions(-) diff --git a/web/documentserver-example/nodejs/public/javascripts/jscript.js b/web/documentserver-example/nodejs/public/javascripts/jscript.js index 15f62b34..c6f6de9c 100644 --- a/web/documentserver-example/nodejs/public/javascripts/jscript.js +++ b/web/documentserver-example/nodejs/public/javascripts/jscript.js @@ -297,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("
" + 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); + }); + } } function getUrlVars() { diff --git a/web/documentserver-example/nodejs/public/stylesheets/media.css b/web/documentserver-example/nodejs/public/stylesheets/media.css index beba2515..54840adc 100644 --- a/web/documentserver-example/nodejs/public/stylesheets/media.css +++ b/web/documentserver-example/nodejs/public/stylesheets/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; @@ -163,7 +162,7 @@ } } @media (max-width: 670px) and (min-width: 620px){ - .main-panel{ + .main-panel { width: 90%; } } @@ -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; } @@ -592,7 +585,7 @@ } } @media (max-width: 600px) and (min-width: 320px) { - .main-panel{ + .main-panel { display: flex; flex-direction: column; } diff --git a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css index d8efa65f..76e56991 100644 --- a/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css +++ b/web/documentserver-example/nodejs/public/stylesheets/stylesheet.css @@ -364,7 +364,7 @@ footer { color: #AAAAAA; height: 64px; width: 100%; - position: absolute; + position: relative; left: 0; bottom: 0; } @@ -426,6 +426,7 @@ footer table tr td:first-child { } .stored-list { + display: block; list-style: none; padding: 0; position: relative; @@ -610,29 +611,6 @@ footer table tr td:first-child { 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; @@ -720,27 +698,6 @@ footer table tr td:first-child { 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; } @@ -781,3 +738,22 @@ html { 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; +} diff --git a/web/documentserver-example/nodejs/views/index.ejs b/web/documentserver-example/nodejs/views/index.ejs index 8e8824b0..f0883feb 100644 --- a/web/documentserver-example/nodejs/views/index.ejs +++ b/web/documentserver-example/nodejs/views/index.ejs @@ -32,11 +32,6 @@
-
- - - -
ONLYOFFICE @@ -78,17 +73,7 @@ Username - + @@ -146,19 +130,30 @@
- <% if (storedFiles.length <= 0) - { %> - ONLYOFFICE Document Editors – Welcome! - - Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors. -
You may upload your own documents for testing using the "Upload file" button and selecting the necessary files on your PC. - - <%} else - { %> -
- Your documents - - +
+ 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. + + You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions. + <% users.forEach(user => { %> +
+ <%= user.name == null ? 'Anonymous' : user.name %> +
    + <% user.descriptions.forEach(description => { %> +
  • <%= description %>
    • + <% }) %> +
+
+ <% }) %> +
+ <%if (storedFiles.length > 0) + {%> +
+ Your documents +
+ @@ -166,11 +161,11 @@ - -
Filename EditorsDownload Remove
-
- - + +
+
+ + <% for (var i = 0; i < storedFiles.length; i++) { %> <% } %> - -
@@ -249,10 +244,10 @@
+ + +
-
<% } %>
diff --git a/web/documentserver-example/nodejs/views/wopiIndex.ejs b/web/documentserver-example/nodejs/views/wopiIndex.ejs index 8d8144b2..300992ea 100644 --- a/web/documentserver-example/nodejs/views/wopiIndex.ejs +++ b/web/documentserver-example/nodejs/views/wopiIndex.ejs @@ -71,17 +71,7 @@ Username - + @@ -138,69 +127,80 @@
- <% if (storedFiles.length <= 0) - { %> +
ONLYOFFICE Document Editors – Welcome! - Get started with a demo-sample of ONLYOFFICE Document Editors, the first html5-based editors. -
You may upload your own documents for testing using the "Upload file" button and selecting the necessary files on your PC. - - <%} else - { %> -
- Your documents - - - - - - - - - - -
FilenameWOPI ActionsDownloadRemove
-
- - - <% for (var i = 0; i < storedFiles.length; i++) { %> - - - <% if (storedFiles[i].actions && storedFiles[i].actions.length > 0) { %> - - <% } %> - - - - <% } %> - -
- <% if (storedFiles[i].defaultAction) { %> - - <%} else { %> - - <% } %> - <%= storedFiles[i].name %> - - - <% for (var j = 0; j < storedFiles[i].actions.length; j++) { %> - - <% if (storedFiles[i].actions[j].name == "edit") { %> - <%= storedFiles[i].actions[j].name %> - <%} else { %> - <%= storedFiles[i].actions[j].name %> - <% } %> - - <% } %> - - - Download - - - Delete -
-
+ 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. + + You can open the same document using different users in different Web browser sessions, so you can check out multi-user editing functions. + <% users.forEach(user => { %> +
+ <%= user.name == null ? 'Anonymous' : user.name %> +
    + <% user.descriptions.forEach(description => { %> +
  • <%= description %>
    • + <% }) %> +
+ <% }) %> +
+ <% if (storedFiles.length > 0) + { %> +
+ Your documents + + + + + + + + + + +
FilenameWOPI ActionsDownloadRemove
+
+ + + <% for (var i = 0; i < storedFiles.length; i++) { %> + + + <% if (storedFiles[i].actions && storedFiles[i].actions.length > 0) { %> + + <% } %> + + + + <% } %> + +
+ <% if (storedFiles[i].defaultAction) { %> + + <%} else { %> + + <% } %> + <%= storedFiles[i].name %> + + + <% for (var j = 0; j < storedFiles[i].actions.length; j++) { %> + + <% if (storedFiles[i].actions[j].name == "edit") { %> + <%= storedFiles[i].actions[j].name %> + <%} else { %> + <%= storedFiles[i].actions[j].name %> + <% } %> + + <% } %> + + + Download + + + Delete +
+
+
<% } %>