pengjunjie/document-server-integration
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/document-server-integration.git synced 2026-04-07 14:06:11 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(nodejs): new mobile index wopi page

Browse Source
This commit is contained in:
sshakndr
2025-09-09 13:02:48 +07:00
parent 106187bc70
commit 8aebdbbb29
3 changed files with 56 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/documentserver-example/nodejs/public/javascripts/jscript.js
View File

@ -686,20 +686,24 @@ function toggleContextMenu(event) {
} }
if (td.children.length == 0) continue; if (td.children.length == 0) continue;
for (let child of Array.from(td.children)) {
let action = document.createElement("div"); let action = document.createElement("div");
action.innerText = td.children[0].children[0].getAttribute("title"); action.innerText = child.children[0].getAttribute("title");
td.children[0].appendChild(action); child.appendChild(action);
td.children[0].onclick = () => { child.onclick = () => {
setTimeout(() => window.location.reload(), 0); setTimeout(() => window.location.reload(), 0);
}
const ntd = document.createElement("td");
ntd.style.display = "block";
ntd.classList.add("contentCells");
ntd.classList.add("contentCells-icon");
ntd.appendChild(child);
const tr = document.createElement("tr");
tr.appendChild(ntd);
tbody.appendChild(tr);
} }
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"); let table = document.createElement("table");

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

@ -18,13 +18,13 @@
.tableRow td:first-child{ .tableRow td:first-child{
flex-grow: 1; flex-grow: 1;
max-width: 50%; max-width: 46%;
} }
.downloadContentCells{ .downloadContentCells{
margin-left: auto; margin-left: auto;
} }
.tableRow td:last-child:after{ .tableRow td:nth-last-child(2):after{
top: 33px; top: 33px;
left: 0; left: 0;
content: ""; content: "";
@ -39,7 +39,7 @@
@media (max-width: 1280px) and (min-width: 1080px) { @media (max-width: 1280px) and (min-width: 1080px) {
.tableHeaderCellViewers { .tableHeaderCellViewers {
width: 24%; width: 25%;
} }
} }
@ -66,10 +66,13 @@
padding-left: 7px; padding-left: 7px;
} }
.tableRow td:first-child { .tableRow td:first-child {
max-width: 45%; max-width: 40%;
} }
.tableHeaderCellViewers { .tableHeaderCellViewers {
width: 23%; width: 27%;
}
.tableHeaderCellDownload {
width: 25%;
} }
} }
@media (max-width: 986px) and (min-width: 890px){ @media (max-width: 986px) and (min-width: 890px){
@ -77,15 +80,15 @@
padding-left: 16px; padding-left: 16px;
} }
.tableHeaderCellDownload{ .tableHeaderCellDownload{
width: 20%; width: 25%;
padding-right: 0; padding-right: 0;
} }
.tableHeaderCellViewers{ .tableHeaderCellViewers{
width: 22%; width: 18%;
padding-right: 0; padding-right: 0;
} }
.tableRow td:first-child { .tableRow td:first-child {
max-width: 40%; max-width: 27%;
} }
.contentCells-wopi { .contentCells-wopi {
padding-right: 114px; padding-right: 114px;
@ -110,7 +113,7 @@
top: 32px; top: 32px;
border: none; border: none;
} }
.tableRow td:last-child:after{ .tableRow td:nth-last-child(2):after{
top: 65px; top: 65px;
width: 100%; width: 100%;
height: 1%; height: 1%;
@ -119,38 +122,29 @@
max-width: 100%; max-width: 100%;
} }
} }
@media (max-width: 593px){
.tableRow td:first-child{
width: 100%;
}
.tableRow td:last-child:after{
width: 90%;
top: 65px;
height: 1%;
}
}
@media (max-width: 769px) and (min-width: 320px){ @media (max-width: 769px) and (min-width: 320px){
.contentCells-icon { .contentCells-icon {
width: 9%; width: 9%;
} }
} }
@media (max-width: 508px) { @media (max-width: 592px) {
.downloadContentCells { .tableRow td:first-child{
margin-left: unset;
}
.contentCells-wopi {
width: 100%; width: 100%;
} }
.downloadContentCells {
margin-left: unset;
}
.contentCells-wopi {
display: none;
}
.contentCells-icon { .contentCells-icon {
width: 1%; width: auto;
} }
.contentCells-shift { .contentCells-shift {
padding-right: 30px; padding-right: 30px;
padding-left: 3px; padding-left: 3px;
} }
.tableRow td:last-child:after{ .tableRow td:nth-last-child(2):after{
top: 95px; display: none;
height: 1%;
width: 100%;
} }
} }

22
web/documentserver-example/nodejs/views/wopiIndex.ejs
View File

@ -41,13 +41,13 @@
</div> </div>
<menu class="responsive-nav"> <menu class="responsive-nav">
<li> <li>
<a href="#" onclick="toggleSidePanel(event)"> <a href="./">
<img src ="images/mobile-menu.svg" alt="ONLYOFFICE" /> <img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
</a> </a>
</li> </li>
<li> <li>
<a href="./"> <a href="#" onclick="toggleSidePanel(event)">
<img src ="images/mobile-logo.svg" alt="ONLYOFFICE" /> <img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
</a> </a>
</li> </li>
</menu> </menu>
@ -187,7 +187,7 @@
</a> </a>
</td> </td>
<% if (storedFiles[i].actions && storedFiles[i].actions.length > 0) { %> <% if (storedFiles[i].actions && storedFiles[i].actions.length > 0) { %>
<td class="contentCells contentCells-wopi contentCells-shift"> <td class="contentCells contentCells-wopi contentCells-shift" data-section="WOPI Actions">
<% for (var j = 0; j < storedFiles[i].actions.length; j++) { %> <% for (var j = 0; j < storedFiles[i].actions.length; j++) { %>
<a class="action-link" href="wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].actions[j].name %>" target="_blank"> <a class="action-link" href="wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].actions[j].name %>" target="_blank">
<img <img
@ -197,7 +197,7 @@
<% } %> <% } %>
</td> </td>
<% } %> <% } %>
<td class="contentCells contentCells-icon contentCells-shift downloadContentCells"> <td class="contentCells contentCells-icon contentCells-shift downloadContentCells" data-section="File Actions">
<a href="wopi/files/<%= encodeURIComponent(storedFiles[i].name) %>/contents"> <a href="wopi/files/<%= encodeURIComponent(storedFiles[i].name) %>/contents">
<img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a> <img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a>
</td> </td>
@ -205,6 +205,11 @@
<a class="delete-file" data="<%= encodeURIComponent(storedFiles[i].name) %>"> <a class="delete-file" data="<%= encodeURIComponent(storedFiles[i].name) %>">
<img class="icon-action" src="images/delete.svg" alt="Delete" title="Delete" /></a> <img class="icon-action" src="images/delete.svg" alt="Delete" title="Delete" /></a>
</td> </td>
<td class="contentCells contentCells-icon">
<a href="#" onclick="toggleContextMenu(event)">
<img src="images/open-context.svg" alt="Open context menu" title="Open context menu" />
</a>
</td>
</tr> </tr>
<% } %> <% } %>
</tbody> </tbody>
@ -279,6 +284,11 @@
</div> </div>
</footer> </footer>
<div id="mobileContextMenu" onclick="toggleContextMenu(event)">
<div class="context-body" id="mobileContextMenuBody">
</div>
</div>
<script type="text/javascript" src="javascripts/jquery-3.6.4.min.js"></script> <script type="text/javascript" src="javascripts/jquery-3.6.4.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-migrate-3.4.1.min.js"></script> <script type="text/javascript" src="javascripts/jquery-migrate-3.4.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-ui.js"></script> <script type="text/javascript" src="javascripts/jquery-ui.js"></script>