pengjunjie/document-server-integration
1
0
Fork 1
mirror of https://github.com/ONLYOFFICE/document-server-integration.git synced 2026-02-10 18:05:10 +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;
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);
for (let child of Array.from(td.children)) {
let action = document.createElement("div");
action.innerText = child.children[0].getAttribute("title");
child.appendChild(action);
child.onclick = () => {
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");

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

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

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

@ -41,13 +41,13 @@
</div>
<menu class="responsive-nav">
<li>
<a href="#" onclick="toggleSidePanel(event)">
<img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
<a href="./">
<img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
</a>
</li>
<li>
<a href="./">
<img src ="images/mobile-logo.svg" alt="ONLYOFFICE" />
<a href="#" onclick="toggleSidePanel(event)">
<img src ="images/mobile-menu.svg" alt="ONLYOFFICE" />
</a>
</li>
</menu>
@ -187,7 +187,7 @@
</a>
</td>
<% 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++) { %>
<a class="action-link" href="wopi-action/<%= encodeURIComponent(storedFiles[i].name) %>?action=<%= storedFiles[i].actions[j].name %>" target="_blank">
<img
@ -197,7 +197,7 @@
<% } %>
</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">
<img class="icon-download" src="images/download.svg" alt="Download" title="Download" /></a>
</td>
@ -205,6 +205,11 @@
<a class="delete-file" data="<%= encodeURIComponent(storedFiles[i].name) %>">
<img class="icon-action" src="images/delete.svg" alt="Delete" title="Delete" /></a>
</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>
<% } %>
</tbody>
@ -279,6 +284,11 @@
</div>
</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-migrate-3.4.1.min.js"></script>
<script type="text/javascript" src="javascripts/jquery-ui.js"></script>