From f40d8a4a64fcbbeab542ed6828cbd34554f55f52 Mon Sep 17 00:00:00 2001 From: Oleg Sinizin Date: Tue, 28 Sep 2021 19:13:48 +0300 Subject: [PATCH] php: user tooltip layout --- web/documentserver-example/php/css/media.css | 23 ++---- .../php/css/stylesheet.css | 65 +++++----------- web/documentserver-example/php/index.php | 44 +++++------ web/documentserver-example/php/js/jscript.js | 77 +++++++++++++------ 4 files changed, 104 insertions(+), 105 deletions(-) diff --git a/web/documentserver-example/php/css/media.css b/web/documentserver-example/php/css/media.css index 75504229..3f8f7f8a 100644 --- a/web/documentserver-example/php/css/media.css +++ b/web/documentserver-example/php/css/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/php/css/stylesheet.css b/web/documentserver-example/php/css/stylesheet.css index 8188510b..7279349a 100644 --- a/web/documentserver-example/php/css/stylesheet.css +++ b/web/documentserver-example/php/css/stylesheet.css @@ -356,7 +356,7 @@ footer { color: #AAAAAA; height: 64px; width: 100%; - position: absolute; + position: relative; left: 0; bottom: 0; } @@ -595,29 +595,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; @@ -704,26 +681,6 @@ footer table tr td:first-child { letter-spacing: -0.02em; 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; @@ -761,3 +718,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; +} diff --git a/web/documentserver-example/php/index.php b/web/documentserver-example/php/index.php index 8f82ff00..181540e5 100644 --- a/web/documentserver-example/php/index.php +++ b/web/documentserver-example/php/index.php @@ -83,18 +83,7 @@ Username - '.$name.''; - echo ''; - } ?>" - src="css/images/info.svg" /> + @@ -148,16 +136,28 @@
+
+ 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. + name ? $user_l->name : "Anonymous"; + echo '
'; + echo ''.$name.''; + echo '
    '; + foreach ($user_l->descriptions as $description) { + echo '
  • '.$description.'
    • '; + } + echo '
'; + echo '
'; + } ?>" +
- 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. - - + if (!empty($storedFiles)) { ?>
Your documents diff --git a/web/documentserver-example/php/js/jscript.js b/web/documentserver-example/php/js/jscript.js index c05663a1..8d5a79a1 100644 --- a/web/documentserver-example/php/js/jscript.js +++ b/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("
" + 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() {