github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-12 00:48:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化office右上角菜单按钮重叠的问题

Browse Source
This commit is contained in:
kuaifan 2022-06-10 17:32:03 +08:00
parent 5655c5440f
commit 34c6addde3
4 changed files with 52 additions and 58 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
docker/office/resources/api/documents/api.js vendored
View File

@ -10,6 +10,28 @@
try {
window.localStorage.removeItem('ui-theme-id')
} catch (e) {}
//
window._toolbarClick = function(el, type) {
window.parent.postMessage({
source: 'onlyoffice',
act: type,
rect: el.getBoundingClientRect()
}, "*");
};
window._toolbarInter = setInterval(function() {
if (typeof $ === "function") {
var toolbar = $("#toolbar");
if (toolbar.find(".hedset").length > 0 && toolbar.find(".hedico").length === 0) {
var linkSvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPkxpbms8L3RpdGxlPjxwYXRoIGQ9Ik0yMDggMzUyaC02NGE5NiA5NiAwIDAxMC0xOTJoNjRNMzA0IDE2MGg2NGE5NiA5NiAwIDAxMCAxOTJoLTY0TTE2My4yOSAyNTZoMTg3LjQyIiBmaWxsPSJub25lIiBzdHJva2U9IiNmNWY1ZjUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIzNiIvPjwvc3ZnPg==';
var historySvg = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJpb25pY29uIiB2aWV3Qm94PSIwIDAgNTEyIDUxMiI+PHRpdGxlPlRpbWVyPC90aXRsZT48cGF0aCBkPSJNMTEyLjkxIDEyOEExOTEuODUgMTkxLjg1IDAgMDA2NCAyNTRjLTEuMTggMTA2LjM1IDg1LjY1IDE5My44IDE5MiAxOTQgMTA2LjIuMiAxOTItODUuODMgMTkyLTE5MiAwLTEwNC41NC04My41NS0xODkuNjEtMTg3LjUtMTkyYTQuMzYgNC4zNiAwIDAwLTQuNSA0LjM3VjE1MiIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZjVmNWY1IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMzIiLz48cGF0aCBkPSJNMjMzLjM4IDI3OC42M2wtNzktMTEzYTguMTMgOC4xMyAwIDAxMTEuMzItMTEuMzJsMTEzIDc5YTMyLjUgMzIuNSAwIDAxLTM3LjI1IDUzLjI2IDMzLjIxIDMzLjIxIDAgMDEtOC4wNy03Ljk0eiIgZmlsbD0iI0Y1RjVGNSIvPjwvc3ZnPg==';
toolbar.find(".hedset").eq(0).before('<div class="hedico" style="display:flex;flex-direction:row;align-items:center;justify-content:center">' +
'<button onclick="_toolbarClick(this, \'link\')" type="button" class="btn btn-header"><div style="background-image:url(' + linkSvg + ');background-size:19px;background-position:center;background-repeat:no-repeat;height:100%"></div></button>' +
'<button onclick="_toolbarClick(this, \'history\')" type="button" class="btn btn-header"><div style="background-image:url(' + historySvg + ');background-size:17px;background-position:center;background-repeat:no-repeat;height:100%"></div></button>' +
'</div>')
clearInterval(window._toolbarInter);
}
}
}, 1000);
})(window);
;(function(DocsAPI, window, document, undefined) {

36
resources/assets/js/pages/manage/components/FileContent.vue
View File

@ -2,17 +2,15 @@
<div v-if="ready" class="file-content">
<iframe v-if="isPreview" ref="myPreview" class="preview-iframe" :src="previewUrl"></iframe>
<template v-else>
<div v-if="['word', 'excel', 'ppt'].includes(file.type)" class="office-header">
<div v-if="!file.only_view && officeReady" class="header-icons">
<div class="header-icon" @click="handleClick('link')"><i class="taskfont">&#xe785;</i></div>
<EPopover v-model="historyShow" trigger="click">
<div class="file-content-history">
<FileHistory :value="historyShow" :file="file" @on-restore="onRestoreHistory"/>
</div>
<div slot="reference" class="header-icon"><i class="taskfont">&#xe71d;</i></div>
</EPopover>
<EPopover
v-if="['word', 'excel', 'ppt'].includes(file.type)"
v-model="historyShow"
trigger="click">
<div class="file-content-history">
<FileHistory :value="historyShow" :file="file" @on-restore="onRestoreHistory"/>
</div>
</div>
<div slot="reference" ref="officeHeader" class="office-header"></div>
</EPopover>
<div v-else class="edit-header">
<div class="header-title">
<EPopover v-if="!equalContent" v-model="unsaveTip" class="file-unsave-tip">
@ -289,6 +287,24 @@ export default {
methods: {
handleMessage (event) {
const data = event.data;
if (data.source === 'onlyoffice') {
switch (data.act) {
case 'link':
this.handleClick('link')
break;
case 'history':
if (this.$refs.officeHeader) {
this.$refs.officeHeader.style.top = `${data.rect.top}px`;
this.$refs.officeHeader.style.left = `${data.rect.left}px`;
this.$refs.officeHeader.style.width = `${data.rect.width}px`;
this.$refs.officeHeader.style.height = `${data.rect.height}px`;
this.$refs.officeHeader.click();
}
break;
}
return
}
switch (data.act) {
case 'ready':
this.loadPreview = false;

10
resources/assets/sass/dark.scss vendored
View File

@ -63,16 +63,6 @@ body.dark-mode-reverse {
.file-content,
.file-preview {
.office-header {
.header-icons {
.header-icon {
color: rgba(0, 0, 0, 0.8);
&:hover {
background-color: rgba(0, 0, 0, 0.05);
}
}
}
}
.content-body {
.tox {
.tox-edit-area__iframe {

42
resources/assets/sass/pages/components/file-content.scss vendored
View File

@ -26,37 +26,11 @@
}
.office-header {
display: flex;
align-items: center;
position: absolute;
right: 40px;
top: 28px;
z-index: 1;
.header-icons {
display: flex;
align-items: center;
justify-content: center;
.header-icon {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 28px;
line-height: 28px;
cursor: pointer;
color: rgba(255, 255, 255, 0.9);
&:hover {
background-color: rgba(255, 255, 255, 0.2);
}
> i {
font-size: 16px;
}
}
}
top: 0;
left: 0;
z-index: -1;
opacity: 0;
}
.edit-header {
@ -331,14 +305,6 @@
}
}
@media (max-width: 768px) {
.file-content {
.office-header {
display: none;
}
}
}
@media (max-width: 1200px) {
.file-content {
overflow: auto;