github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-13 03:52:50 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 优化深色模式

Browse Source
This commit is contained in:
kuaifan 2023-07-28 10:48:42 +08:00
parent fe4ab6e9d5
commit 05680ab152
5 changed files with 31 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
public/js/AgoraRTC_N-4.14.2.js vendored
View File

File diff suppressed because one or more lines are too long

19
resources/assets/js/functions/web.js vendored
View File

@ -1153,11 +1153,13 @@
},
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() {
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() {
@ -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() {
this.utils.addStyle('dark-mode-style', 'style', `
@media screen {
@ -1302,7 +1293,6 @@
if (this.isDarkEnabled()) {
return
}
this.createDarkFilter();
this.createDarkStyle();
this.utils.addClass(document.body, "dark-mode-reverse")
},
@ -1311,7 +1301,6 @@
if (!this.isDarkEnabled()) {
return
}
this.utils.removeElementById('dark-mode-svg');
this.utils.removeElementById('dark-mode-style');
this.utils.removeClass(document.body, "dark-mode-reverse")
},

31
resources/assets/js/pages/manage/components/DialogWrapper.vue
View File

@ -612,7 +612,7 @@ export default {
operateItem: {},
recordState: '',
wrapperStart: {},
wrapperStart: null,
scrollOffset: 0,
scrollTail: 0,
@ -1585,15 +1585,32 @@ export default {
},
onTouchStart(e) {
this.wrapperStart = Object.assign(this.scrollInfo(), {
clientY: e.touches[0].clientY,
exclud: !this.$refs.scroller.$el.contains(e.target),
});
this.wrapperStart = null;
if (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) {
if (this.windowPortrait && this.windowScrollY > 0) {
if (this.wrapperStart.exclud) {
if (this.footerPaddingBottom > 0 || (this.windowPortrait && this.windowScrollY > 0)) {
if (this.wrapperStart === null) {
e.preventDefault();
return;
}

4
resources/assets/sass/pages/components/dialog-wrapper.scss vendored
View File

@ -976,8 +976,8 @@
position: absolute;
content: "";
left: 7px;
top: 6px;
bottom: 6px;
top: 5px;
bottom: 5px;
width: 1px;
transform: scaleX(0.5);
background-color: rgba(#818181, 0.5);

2
resources/mobile

@ -1 +1 @@
Subproject commit beef15a591134255727755e635e72a7af9a0df0c
Subproject commit 5f358c8e0fc75b555b4c8e6283c6a836c5c2778c