diff --git a/CHANGELOG.md b/CHANGELOG.md index 8658d89e..8653e0ca 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,4 +1,5 @@ # Change Log +- php: new mobile index page view - java-spring: new mobile index page view - java: new mobile index page view - go: new mobile index page view diff --git a/web/documentserver-example/php/assets/css/forgotten.css b/web/documentserver-example/php/assets/css/forgotten.css index 82156845..4727ddd9 100644 --- a/web/documentserver-example/php/assets/css/forgotten.css +++ b/web/documentserver-example/php/assets/css/forgotten.css @@ -51,8 +51,8 @@ .tableHeader td:last-child, .tableRow td:last-child { width: 10%; - text-align: center; - padding: 0 !important; + text-align: right; + display: revert; } .tableHeader { @@ -81,6 +81,11 @@ menu.links { .scroll-table-body { overflow-y: auto; + width: 100%; +} + +.scroll-table-body td { + padding: 0 !important; } .stored-list { diff --git a/web/documentserver-example/php/assets/css/media.css b/web/documentserver-example/php/assets/css/media.css index dcfc9586..10b1df8f 100755 --- a/web/documentserver-example/php/assets/css/media.css +++ b/web/documentserver-example/php/assets/css/media.css @@ -454,60 +454,6 @@ padding: 16px 0 6px; } - .tableRow, - menu.links { - width: 40%; - } - - .tableRow td { - border: none; - } - - .firstContentCellShift { - border: none; - flex-basis: 10%; - } - - .downloadContentCellShift { - max-width: 7%; - margin-right: 24px; - margin-left: 0; - } - - .contentCells-icon { - width: 11%; - } - - .tableRow td:last-child { - width: 7%; - padding-right: 0px; - border: none; - } - - .contentCells-shift { - padding-right: 0px; - } - - .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%; - } /* Mobile Upload*/ .blockUI.blockMsg.blockPage.ui-dialog.ui-widget.ui-corner-all.ui-widget-content.ui-draggable { width: 344px !important; @@ -582,104 +528,7 @@ } } -@media (max-width: 560px) and (min-width: 510px) { - .contentCells-icon { - width: 13%; - } - - .downloadContentCellShift { - padding-right: 16px; - max-width: 4%; - } -} - -@media (max-width: 510px) and (min-width: 470px) { - .tableRow, - menu.links { - width: 35%; - } - - .tableRow td:first-child{ - width: 83%; - } - .contentCells-icon { - width: 10%; - } - - .downloadContentCellShift { - max-width: 6%; - padding-right: 6px; - } - - .firstContentCellShift { - flex-basis: 9%; - } - - .tableRow td:last-child { - padding-right: 28px; - } -} - -@media (max-width: 470px) and (min-width: 420px) { - .tableRow, - menu.links { - width: 30%; - } - .tableRow td:first-child{ - width: 85%; - } - .contentCells-icon { - width: 10%; - } - - .downloadContentCellShift { - max-width: 3%; - padding-right: 0px; - padding-left: 0; - } - - .firstContentCellShift { - margin-left: 2px; - 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) { - .tableRow, - menu.links { - 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; @@ -690,10 +539,6 @@ padding-right: 5px; margin: 0; } - .firstContentCellViewers{ - padding-right: 2px; - width: 11%; - } } @media (max-width: 1160px) { @@ -702,11 +547,6 @@ } } -@media (min-width: 593px) { - .contentCellsEmpty { - display: none; - } -} @media (max-width: 769px) and (min-width: 715px){ .tableRow, .storedHeader, @@ -718,11 +558,6 @@ padding-right: 26px; } } -@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%; @@ -802,8 +637,8 @@ margin: 0; position: fixed; left: 0; - height: calc(100% - 124px); - z-index:99; + height: calc(100% - 44px); + z-index: 101; } .left-panel.active { @@ -921,16 +756,37 @@ .tableRow { border-bottom: 1px solid #e5e5e5; - padding: 16px 0; + padding: 12px 0; width: 100%; + flex-wrap: nowrap; } .tableRow td:first-child { width: 100%; } + .tableRow td:last-child { + display: block; + width: 24px; + } + + .contentCells { + padding: 0; + font-size: 13px; + } + + .contentCells-icon { + width: auto; + display: none; + } + + .stored-edit { + height: 12px; + padding: 6px 0 6px 34px; + } + .stored-edit span { - font-size: 14px; + font-size: 13px; } .header-list { @@ -938,7 +794,7 @@ } .firstContentCellViewers { - border-bottom: none !important; + margin: 0; } .firstContentCellViewers ~ td { @@ -973,4 +829,19 @@ .user-block-table { height: auto; } + + .upload-panel { + padding: 12px 0; + } + + .user-block-table td select { + height: 48px; + padding-left: 12px; + border-radius: 6px; + border-color: #aaaaaa; + } + + .user-block-table tr:last-child { + display: none; + } } diff --git a/web/documentserver-example/php/assets/css/stylesheet.css b/web/documentserver-example/php/assets/css/stylesheet.css index 3a70ff7d..3322b527 100644 --- a/web/documentserver-example/php/assets/css/stylesheet.css +++ b/web/documentserver-example/php/assets/css/stylesheet.css @@ -754,7 +754,6 @@ footer table tr td:first-child { .contentCells { display: block; - border-bottom: 1px solid #EFEFEF; font-family: 'Open Sans', sans-serif; font-size: 16px; padding: 4px; @@ -986,3 +985,103 @@ html { top: 50%; transform: translate(-50%, -50%); } + +.tableRow td:last-child { + display: none; +} + +#mobileContextMenu { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100vh; + background-color: rgba(51, 51, 51, 0.3); + display: flex; + justify-content: center; + align-items: flex-end; + z-index: 100; + opacity: 0; + visibility: hidden; + transition: opacity 0.3s ease, visibility 0s linear 0.4s; +} + +#mobileContextMenu.active { + visibility: visible; + opacity: 1; + transition: opacity 0.3s ease; +} + +#mobileContextMenu .context-body { + width: 100%; + max-height: 100%; + transform: translateY(100%); + transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); + overflow-y: auto; + overflow-x: hidden; + scrollbar-width: none; +} + +#mobileContextMenu.active .context-body { + transform: translateY(0); +} + +#mobileContextMenu table { + background-color: white; + width: 100%; + margin-top: 150px; + padding-bottom: 96px; +} + +#mobileContextMenu thead { + padding: 12px 16px 0; + height: 48px; + position: sticky; + top: -1px; + display: flex; + align-items: center; + background-color: white; +} + +#mobileContextMenu thead:not(.is-pinned)::after { + content: ''; + position: absolute; + left: 16px; + right: 16px; + bottom: 0px; + height: 1px; + background: #e2e2e2; +} + +#mobileContextMenu thead.is-pinned { + box-shadow: 0px 4px 6px 0px #CCCCCC4D; + transition: all 0.4s ease-out; +} + +#mobileContextMenu tbody { + padding: 0 16px; + display: block +} + +#mobileContextMenu tr { + display: block; + padding: 12px; +} + +.context-section { + padding: 24px 0 6px !important; + font-size: 13px; + font-weight: 600; + color: #808080; +} + +#mobileContextMenu a:not(.stored-edit) { + display: flex; + flex-direction: row; + align-items: center; + text-decoration: none; +} + +#mobileContextMenu img { + margin-right: 8px; +} diff --git a/web/documentserver-example/php/assets/images/mobile-menu.svg b/web/documentserver-example/php/assets/images/mobile-menu.svg index b40f1158..89290a60 100644 --- a/web/documentserver-example/php/assets/images/mobile-menu.svg +++ b/web/documentserver-example/php/assets/images/mobile-menu.svg @@ -1,5 +1,3 @@ - - - - - + + + \ No newline at end of file diff --git a/web/documentserver-example/php/assets/images/open-context.svg b/web/documentserver-example/php/assets/images/open-context.svg new file mode 100644 index 00000000..da089869 --- /dev/null +++ b/web/documentserver-example/php/assets/images/open-context.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/web/documentserver-example/php/assets/js/jscript.js b/web/documentserver-example/php/assets/js/jscript.js index a1f34188..4df0f8f0 100644 --- a/web/documentserver-example/php/assets/js/jscript.js +++ b/web/documentserver-example/php/assets/js/jscript.js @@ -590,3 +590,75 @@ function toggleUserDescr(event) { else list.classList.add("active"); } } + +function toggleContextMenu(event) { + let contextMenu = document.querySelector("#mobileContextMenu"); + let target = event.currentTarget.parentNode.parentNode.cloneNode(true); + + const closeContextMenu = () => { + contextMenu.classList.remove("active"); + } + if (contextMenu.classList.contains("active") || !target.classList.contains("tableRow")) { + if (event.target.id == "mobileContextMenuBody") closeContextMenu(); + return; + } + + let contextBody = document.querySelector("#mobileContextMenuBody"); + contextBody.innerHTML = ""; + + let startY = 0; + let startScroll = 0; + contextBody.addEventListener('touchstart', (e) => { + startY = e.touches[0].clientY; + startScroll = contextBody.scrollTop; + }); + contextBody.addEventListener('touchmove', (e) => { + const currentY = e.touches[0].clientY; + const diff = currentY - startY; + + if (diff > 10 && (contextBody.scrollTop === 0 || contextBody.scrollTop === startScroll)) { + closeContextMenu(); + } + }); + + let thead = document.createElement("thead"); + thead.appendChild(target.children[0]); + const observer = new IntersectionObserver( + ([e]) => e.target.classList.toggle("is-pinned", e.intersectionRatio < 1), + { threshold: [1] } + ); + observer.observe(thead); + + let tbody = document.createElement("tbody"); + for (let td of Array.from(target.children).slice(0, -1)){ + if (td.getAttribute("data-section")){ + let section = document.createElement("tr"); + section.innerText = td.getAttribute("data-section"); + section.classList.add("context-section"); + tbody.appendChild(section); + } + + if (td.children.length == 0) continue; + + let action = document.createElement("div"); + action.innerText = td.children[0].children[0].getAttribute("title"); + td.children[0].appendChild(action); + td.children[0].onclick = () => { + setTimeout(() => window.location.reload(), 0); + } + td.style.display = "block"; + td.classList.remove("downloadContentCellShift"); + td.classList.remove("firstContentCellViewers"); + + let tr = document.createElement("tr"); + tr.appendChild(td); + tbody.appendChild(tr); + } + + let table = document.createElement("table"); + table.appendChild(thead); + table.appendChild(tbody); + + contextBody.appendChild(table); + contextMenu.classList.add("active"); +} diff --git a/web/documentserver-example/php/src/views/IndexStoredListView.php b/web/documentserver-example/php/src/views/IndexStoredListView.php index 57c646fa..4657e3d8 100644 --- a/web/documentserver-example/php/src/views/IndexStoredListView.php +++ b/web/documentserver-example/php/src/views/IndexStoredListView.php @@ -65,13 +65,13 @@ class IndexStoredListView extends View // 1-2 if (in_array("edit", $storeFile->actions) || in_array("lossy-edit", $storeFile->actions)) { $layout .= << + Open in editor for full size screens @@ -80,15 +80,15 @@ class IndexStoredListView extends View target="_blank" > Open in editor for mobile devices EDIT; } else { $layout .= << + EMPTY; } @@ -101,8 +101,8 @@ class IndexStoredListView extends View target="_blank" > Open in editor for comment @@ -119,8 +119,8 @@ class IndexStoredListView extends View target="_blank" > Open in editor for filling in forms @@ -129,8 +129,8 @@ class IndexStoredListView extends View target="_blank" > Open in editor for filling in forms for mobile devices @@ -144,8 +144,8 @@ class IndexStoredListView extends View target="_blank" > Open in editor for review @@ -157,8 +157,8 @@ class IndexStoredListView extends View target="_blank" > Open in editor without access to change the filter @@ -176,8 +176,8 @@ class IndexStoredListView extends View target="_blank" > Open in editor without content control modification @@ -188,13 +188,13 @@ class IndexStoredListView extends View } $layout .= << + Open in viewer for full size screens @@ -203,8 +203,8 @@ class IndexStoredListView extends View target="_blank" > Open in viewer for mobile devices @@ -222,7 +222,7 @@ class IndexStoredListView extends View if ($storeFile->documentType != null) { $layout .= << + Convert CONVERT; } else { - $layout .= ''; + $layout .= << + EMPTY; } - $layout .= << Delete + + + Open context menu + + - DOWNLOAD; + ACTIONS; } } return $layout; diff --git a/web/documentserver-example/php/templates/index.tpl b/web/documentserver-example/php/templates/index.tpl index 9f157330..a5ada334 100644 --- a/web/documentserver-example/php/templates/index.tpl +++ b/web/documentserver-example/php/templates/index.tpl @@ -25,13 +25,13 @@
  • - - ONLYOFFICE + + ONLYOFFICE
  • - - ONLYOFFICE + + ONLYOFFICE
    • @@ -252,6 +252,11 @@ +
    +
    +
    +
    +