mirror of
https://github.com/kuaifan/dootask.git
synced 2025-12-13 12:02:51 +00:00
perf: 优化深色模式
This commit is contained in:
parent
fe4ab6e9d5
commit
05680ab152
30
public/js/AgoraRTC_N-4.14.2.js
vendored
30
public/js/AgoraRTC_N-4.14.2.js
vendored
File diff suppressed because one or more lines are too long
19
resources/assets/js/functions/web.js
vendored
19
resources/assets/js/functions/web.js
vendored
@ -1153,11 +1153,13 @@
|
|||||||
},
|
},
|
||||||
|
|
||||||
defaultFilter() {
|
defaultFilter() {
|
||||||
return '-webkit-filter: invert(0.92) hue-rotate(180deg) !important; filter: invert(0.92) hue-rotate(180deg) !important;';
|
return '-webkit-filter: invert(100%) hue-rotate(180deg) contrast(90%) !important; ' +
|
||||||
|
'filter: invert(100%) hue-rotate(180deg) contrast(90%) !important;';
|
||||||
},
|
},
|
||||||
|
|
||||||
reverseFilter() {
|
reverseFilter() {
|
||||||
return '-webkit-filter: invert(0.92) hue-rotate(180deg) !important; filter: invert(0.92) hue-rotate(180deg) !important;';
|
return '-webkit-filter: invert(100%) hue-rotate(180deg) contrast(110%) !important; ' +
|
||||||
|
'filter: invert(100%) hue-rotate(180deg) contrast(110%) !important;';
|
||||||
},
|
},
|
||||||
|
|
||||||
noneFilter() {
|
noneFilter() {
|
||||||
@ -1211,17 +1213,6 @@
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
||||||
createDarkFilter() {
|
|
||||||
if (this.utils.hasElementById('dark-mode-svg')) return;
|
|
||||||
let svgDom = '<svg id="dark-mode-svg" style="height: 0; width: 0;"><filter id="dark-mode-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.283 -0.567 -0.567 0.000 0.925 -0.567 0.283 -0.567 0.000 0.925 -0.567 -0.567 0.283 0.000 0.925 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter><filter id="dark-mode-reverse-filter" x="0" y="0" width="99999" height="99999"><feColorMatrix type="matrix" values="0.333 -0.667 -0.667 0.000 1.000 -0.667 0.333 -0.667 0.000 1.000 -0.667 -0.667 0.333 0.000 1.000 0.000 0.000 0.000 1.000 0.000"></feColorMatrix></filter></svg>';
|
|
||||||
let div = document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
|
|
||||||
div.innerHTML = svgDom;
|
|
||||||
let frag = document.createDocumentFragment();
|
|
||||||
while (div.firstChild)
|
|
||||||
frag.appendChild(div.firstChild);
|
|
||||||
document.head.appendChild(frag);
|
|
||||||
},
|
|
||||||
|
|
||||||
createDarkStyle() {
|
createDarkStyle() {
|
||||||
this.utils.addStyle('dark-mode-style', 'style', `
|
this.utils.addStyle('dark-mode-style', 'style', `
|
||||||
@media screen {
|
@media screen {
|
||||||
@ -1302,7 +1293,6 @@
|
|||||||
if (this.isDarkEnabled()) {
|
if (this.isDarkEnabled()) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.createDarkFilter();
|
|
||||||
this.createDarkStyle();
|
this.createDarkStyle();
|
||||||
this.utils.addClass(document.body, "dark-mode-reverse")
|
this.utils.addClass(document.body, "dark-mode-reverse")
|
||||||
},
|
},
|
||||||
@ -1311,7 +1301,6 @@
|
|||||||
if (!this.isDarkEnabled()) {
|
if (!this.isDarkEnabled()) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
this.utils.removeElementById('dark-mode-svg');
|
|
||||||
this.utils.removeElementById('dark-mode-style');
|
this.utils.removeElementById('dark-mode-style');
|
||||||
this.utils.removeClass(document.body, "dark-mode-reverse")
|
this.utils.removeClass(document.body, "dark-mode-reverse")
|
||||||
},
|
},
|
||||||
|
|||||||
@ -612,7 +612,7 @@ export default {
|
|||||||
operateItem: {},
|
operateItem: {},
|
||||||
|
|
||||||
recordState: '',
|
recordState: '',
|
||||||
wrapperStart: {},
|
wrapperStart: null,
|
||||||
|
|
||||||
scrollOffset: 0,
|
scrollOffset: 0,
|
||||||
scrollTail: 0,
|
scrollTail: 0,
|
||||||
@ -1585,15 +1585,32 @@ export default {
|
|||||||
},
|
},
|
||||||
|
|
||||||
onTouchStart(e) {
|
onTouchStart(e) {
|
||||||
this.wrapperStart = Object.assign(this.scrollInfo(), {
|
this.wrapperStart = null;
|
||||||
clientY: e.touches[0].clientY,
|
if (this.$refs.scroller.$el.contains(e.target)) {
|
||||||
exclud: !this.$refs.scroller.$el.contains(e.target),
|
// 聊天内容区域
|
||||||
});
|
this.wrapperStart = Object.assign(this.scrollInfo(), {
|
||||||
|
clientY: e.touches[0].clientY,
|
||||||
|
});
|
||||||
|
} else if (this.$refs.input.$refs.editor.contains(e.target)) {
|
||||||
|
// 输入内容区域
|
||||||
|
const editor = this.$refs.input.$refs.editor.querySelector(".ql-editor");
|
||||||
|
if (editor) {
|
||||||
|
const clientSize = editor.clientHeight;
|
||||||
|
const offset = editor.scrollTop;
|
||||||
|
const scrollSize = editor.scrollHeight;
|
||||||
|
this.wrapperStart = {
|
||||||
|
offset, // 滚动的距离
|
||||||
|
scale: offset / (scrollSize - clientSize), // 已滚动比例
|
||||||
|
tail: scrollSize - clientSize - offset, // 与底部距离
|
||||||
|
clientY: e.touches[0].clientY,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
onTouchMove(e) {
|
onTouchMove(e) {
|
||||||
if (this.windowPortrait && this.windowScrollY > 0) {
|
if (this.footerPaddingBottom > 0 || (this.windowPortrait && this.windowScrollY > 0)) {
|
||||||
if (this.wrapperStart.exclud) {
|
if (this.wrapperStart === null) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -976,8 +976,8 @@
|
|||||||
position: absolute;
|
position: absolute;
|
||||||
content: "";
|
content: "";
|
||||||
left: 7px;
|
left: 7px;
|
||||||
top: 6px;
|
top: 5px;
|
||||||
bottom: 6px;
|
bottom: 5px;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
transform: scaleX(0.5);
|
transform: scaleX(0.5);
|
||||||
background-color: rgba(#818181, 0.5);
|
background-color: rgba(#818181, 0.5);
|
||||||
|
|||||||
@ -1 +1 @@
|
|||||||
Subproject commit beef15a591134255727755e635e72a7af9a0df0c
|
Subproject commit 5f358c8e0fc75b555b4c8e6283c6a836c5c2778c
|
||||||
Loading…
x
Reference in New Issue
Block a user