github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-09 23:18:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: scrollbar

Browse Source
This commit is contained in:
kuaifan 2023-06-08 16:56:55 +08:00
parent b0fda87923
commit 317970f010
30 changed files with 919 additions and 492 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/assets/js/app.js vendored
View File

@ -40,6 +40,7 @@ import TableAction from './components/TableAction.vue'
import QuickEdit from './components/QuickEdit.vue'
import UserAvatar from './components/UserAvatar.vue'
import ImgView from './components/ImgView.vue'
import Scrollbar from './components/Scrollbar'
Vue.component('PageTitle', PageTitle);
Vue.component('Loading', Loading);
@ -49,6 +50,7 @@ Vue.component('TableAction', TableAction);
Vue.component('QuickEdit', QuickEdit);
Vue.component('UserAvatar', UserAvatar);
Vue.component('ImgView', ImgView);
Vue.component('Scrollbar', Scrollbar);
import {
Avatar,

4
resources/assets/js/components/RightBottom.vue
View File

@ -29,7 +29,9 @@
</div>
<div v-if="$Platform === 'mac'" class="notification-tip">{{$L('离最新版本只有一步之遥了！重新启动应用即可完成更新。')}}</div>
</div>
<MarkdownPreview class="notification-body scrollbar-overlay" :initialValue="updateNote"/>
<Scrollbar class-name="notification-body">
<MarkdownPreview :initialValue="updateNote"/>
</Scrollbar>
<div slot="footer" class="adaption">
<Button type="default" @click="updateShow=false">{{$L('稍后')}}</Button>
<Button type="primary" :loading="updateIng" @click="updateQuitAndInstall">{{$L($Platform === 'mac' ? '重新启动' : '立即升级')}}</Button>

419
resources/assets/js/components/Scrollbar/index.js vendored Normal file
View File

@ -0,0 +1,419 @@
import {supportsTouch, toInt} from "./lib/util";
import * as CSS from './lib/css';
export default {
name: 'Scrollbar',
props: {
tag: {
type: String,
default: 'div'
},
className: {
type: String,
default: ''
},
enableX: {
type: Boolean,
default: false
},
enableY: {
type: Boolean,
default: true
},
hideBar: {
type: Boolean,
default: false
},
minSize: {
type: Number,
default: 20
},
},
data() {
return {
isReady: false,
scrollingX: false,
scrollingY: false,
moveingX: false,
moveingY: false,
containerWidth: null,
containerHeight: null,
contentWidth: null,
contentHeight: null,
contentOverflow: {
x: null,
y: null,
},
thumbYHeight: null,
thumbYTop: null,
thumbXWidth: null,
thumbXLeft: null,
lastScrollTop: 0,
lastScrollLeft: 0,
timeouts: {},
}
},
computed: {
containerClass() {
const classList = ['scrollbar-container'];
if (supportsTouch) {
classList.push('scrollbar-touch')
} else {
classList.push('scrollbar-desktop')
}
if (this.contentWidth > this.containerWidth && this.contentOverflow.x !== 'hidden' && this.enableX) {
classList.push('scrollbar-active-x')
}
if (this.contentHeight > this.containerHeight && this.contentOverflow.y !== 'hidden' && this.enableY) {
classList.push('scrollbar-active-y')
}
if (this.scrollingX) {
classList.push('scrollbar-scrolling-x')
}
if (this.scrollingY) {
classList.push('scrollbar-scrolling-y')
}
if (this.moveingX) {
classList.push('scrollbar-moveing-x')
}
if (this.moveingY) {
classList.push('scrollbar-moveing-y')
}
if (this.hideBar || !this.isReady) {
classList.push('scrollbar-hidebar')
}
return classList
},
contentClass({className, enableX, enableY}) {
const classList = ['scrollbar-content'];
if (className) {
classList.push(className)
}
if (!enableX) {
classList.push('scrollbar-disable-x')
}
if (!enableY) {
classList.push('scrollbar-disable-y')
}
return classList
}
},
mounted() {
this.$nextTick(() => {
this.updateBase()
});
},
updated() {
this.$nextTick(() => {
this.updateGeometry(false);
});
},
methods: {
/**
* 滚动区域信息
* @returns {{scale: number, scrollY: *, scrollE: number}}
*/
scrollInfo() {
const scroller = $A(this.$refs.content);
const wInnerH = Math.round(scroller.innerHeight());
const wScrollY = scroller.scrollTop();
const bScrollH = this.$refs.content.scrollHeight;
return {
scale: wScrollY / (bScrollH - wInnerH), //已滚动比例
scrollY: wScrollY, //滚动的距离
scrollE: bScrollH - wInnerH - wScrollY, //与底部距离
}
},
/**
* 滚动区域元素
* @returns {Vue | Element | (Vue | Element)[]}
*/
scrollElement() {
return this.$refs.content;
},
/**
* 从滚动区域获取指定元素
* @param el
* @returns {*}
*/
querySelector(el) {
return this.$refs.content && this.$refs.content.querySelector(el)
},
/**
* 更新基础信息
*/
updateBase() {
if (supportsTouch) {
return;
}
const containerStyles = CSS.get(this.$refs.container);
const contentStyles = CSS.get(this.$refs.content);
CSS.set(this.$refs.trackX, {
left: toInt(containerStyles.paddingLeft) + toInt(contentStyles.marginLeft),
right: toInt(containerStyles.paddingRight) + toInt(contentStyles.marginRight),
bottom: toInt(containerStyles.paddingBottom) + toInt(contentStyles.marginBottom),
});
CSS.set(this.$refs.trackY, {
top: toInt(containerStyles.paddingTop) + toInt(contentStyles.marginTop),
bottom: toInt(containerStyles.paddingBottom) + toInt(contentStyles.marginBottom),
right: toInt(containerStyles.paddingRight) + toInt(contentStyles.marginRight),
});
this.contentOverflow = {
x: contentStyles.overflowX,
y: contentStyles.overflowY,
}
},
/**
* 更新滚动条
* @param scrolling 是否正在滚动
*/
updateGeometry(scrolling) {
if (supportsTouch) {
return;
}
const element = this.$refs.content;
if (!element) {
return;
}
const scrollTop = Math.floor(element.scrollTop);
const rect = element.getBoundingClientRect();
this.containerWidth = Math.round(rect.width);
this.containerHeight = Math.round(rect.height);
this.contentWidth = element.scrollWidth;
this.contentHeight = element.scrollHeight;
this.thumbXWidth = Math.max(toInt((this.containerWidth * this.containerWidth) / this.contentWidth), this.minSize);
this.thumbXLeft = toInt((element.scrollLeft * (this.containerWidth - this.thumbXWidth)) / (this.contentWidth - this.containerWidth));
this.thumbYHeight = Math.max(toInt((this.containerHeight * this.containerHeight) / this.contentHeight), this.minSize);
this.thumbYTop = toInt((scrollTop * (this.containerHeight - this.thumbYHeight)) / (this.contentHeight - this.containerHeight));
CSS.set(this.$refs.thumbX, {
left: this.thumbXLeft,
width: this.thumbXWidth,
});
CSS.set(this.$refs.thumbY, {
top: this.thumbYTop,
height: this.thumbYHeight,
});
if (scrolling) {
this.scrollingX = this.lastScrollLeft !== element.scrollLeft;
this.scrollingY = this.lastScrollTop !== element.scrollTop;
this.lastScrollTop = element.scrollTop;
this.lastScrollLeft = element.scrollLeft;
this.timeouts['scroll'] && clearTimeout(this.timeouts['scroll']);
this.timeouts['scroll'] = setTimeout(() => {
this.scrollingX = false;
this.scrollingY = false;
}, 1000)
}
},
/**
* 鼠标移入事件（单次）
*/
onContainerMouseMove() {
setTimeout(() => {
if (this.isReady) {
return
}
this.updateGeometry(true);
this.isReady = true
}, 300)
},
/**
* 滚动区域滚动事件
* @param e
*/
onContentScroll(e) {
this.updateGeometry(true);
this.$emit('on-scroll', e);
this.isReady = true
},
/**
* 内容区域鼠标进入事件
*/
onContentMouseenter() {
this.updateBase();
this.updateGeometry(false);
},
/**
* 轨道区域(X)鼠标按下事件
* @param e
*/
onTrackXMouseDown(e) {
if (supportsTouch) {
return;
}
const element = this.$refs.content;
const rect = this.$refs.trackX.getBoundingClientRect();
const positionLeft = e.pageX - window.scrollX - rect.left;
const direction = positionLeft > this.thumbXLeft ? 1 : -1;
element.scrollLeft += direction * this.containerWidth;
this.updateGeometry(true);
e.stopPropagation();
},
/**
* 轨道区域(Y)鼠标按下事件
* @param e
*/
onTrackYMouseDown(e) {
if (supportsTouch) {
return;
}
const element = this.$refs.content;
const rect = this.$refs.trackY.getBoundingClientRect();
const positionTop = e.pageY - window.scrollY - rect.top;
const direction = positionTop > this.thumbYTop ? 1 : -1;
element.scrollTop += direction * this.containerHeight;
this.updateGeometry(true);
e.stopPropagation();
},
/**
* 滚动条(X)鼠标按下事件
* @param e
*/
onThumbXMouseDown(e) {
if (supportsTouch) {
return;
}
const element = this.$refs.content;
const rect = element.getBoundingClientRect();
const scrollLeft = element.scrollLeft;
const pageX = e.pageX - window.scrollX;
const mouseMoveHandler = (e) => {
const diff = e.pageX - pageX;
element.scrollLeft = scrollLeft + diff * this.contentWidth / rect.width;
};
const mouseUpHandler = () => {
this.timeouts['moveX'] = setTimeout(() => {
this.moveingX = false;
}, 100);
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
this.moveingX = true;
this.timeouts['moveX'] && clearTimeout(this.timeouts['moveX']);
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
e.preventDefault();
e.stopPropagation();
},
/**
* 滚动条(Y)鼠标按下事件
* @param e
*/
onThumbYMouseDown(e) {
if (supportsTouch) {
return;
}
const element = this.$refs.content;
const rect = element.getBoundingClientRect();
const scrollTop = element.scrollTop;
const pageY = e.pageY - window.scrollY;
const mouseMoveHandler = (e) => {
const diff = e.pageY - pageY;
element.scrollTop = scrollTop + diff * this.contentHeight / rect.height;
};
const mouseUpHandler = () => {
this.timeouts['moveY'] = setTimeout(() => {
this.moveingY = false;
}, 100);
document.removeEventListener('mousemove', mouseMoveHandler);
document.removeEventListener('mouseup', mouseUpHandler);
};
this.moveingY = true;
this.timeouts['moveY'] && clearTimeout(this.timeouts['moveY']);
document.addEventListener('mousemove', mouseMoveHandler);
document.addEventListener('mouseup', mouseUpHandler);
e.preventDefault();
e.stopPropagation();
}
},
render(h) {
return h('div', {
ref: 'container',
class: this.containerClass,
on: {
'~mousemove': this.onContainerMouseMove,
}
}, [
h(this.tag, {
ref: 'content',
class: this.contentClass,
on: {
scroll: this.onContentScroll,
mouseenter: this.onContentMouseenter,
}
}, this.$slots.default),
h('div', {
ref: 'trackX',
class: 'scrollbar-track-x',
on: {
mousedown: this.onTrackXMouseDown
}
}, [
h('div', {
ref: 'thumbX',
class: 'scrollbar-thumb-x',
on: {
mousedown: this.onThumbXMouseDown
}
}),
]),
h('div', {
ref: 'trackY',
class: 'scrollbar-track-y',
on: {
mousedown: this.onTrackYMouseDown
}
}, [
h('div', {
ref: 'thumbY',
class: 'scrollbar-thumb-y',
on: {
mousedown: this.onThumbYMouseDown
}
})
]),
])
}
}

19
resources/assets/js/components/Scrollbar/lib/css.js vendored Normal file
View File

@ -0,0 +1,19 @@
export function get(element) {
if (element) {
return getComputedStyle(element);
}
return {};
}
export function set(element, obj) {
if (element) {
for (const key in obj) {
let val = obj[key];
if (typeof val === 'number') {
val = `${val}px`;
}
element.style[key] = val;
}
}
return element;
}

9
resources/assets/js/components/Scrollbar/lib/util.js vendored Normal file
View File

@ -0,0 +1,9 @@
export function toInt(x) {
return parseInt(x, 10) || 0;
}
export const supportsTouch = typeof window !== 'undefined' &&
('ontouchstart' in window ||
('maxTouchPoints' in window.navigator &&
window.navigator.maxTouchPoints > 0) ||
(window.DocumentTouch && document instanceof window.DocumentTouch));

156
resources/assets/js/components/Scrollbar/style.scss vendored Normal file
View File

@ -0,0 +1,156 @@
@import 'perfect-scrollbar/css/perfect-scrollbar.css';
.scrollbar-container {
flex: 1;
height: 100%;
position: relative;
overflow: hidden;
/*
* 触摸设备隐藏自定义滚动条
*/
&.scrollbar-touch {
.scrollbar-track-x,
.scrollbar-track-y {
display: none;
}
}
/*
* 桌面设备隐藏系统滚动条
*/
&.scrollbar-desktop,
&.scrollbar-hidebar {
.scrollbar-content {
&::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
}
}
/*
* 隐藏滚动条
*/
&.scrollbar-hidebar {
.scrollbar-track-x,
.scrollbar-track-y {
opacity: 0 !important;
}
}
/*
* 滚动条轨道样式
*/
.scrollbar-track-x,
.scrollbar-track-y {
position: absolute;
z-index: 101;
display: block;
visibility: hidden;
opacity: 0;
transition: background-color .2s linear, opacity .2s linear;
}
.scrollbar-track-x {
left: 0;
right: 0;
bottom: 0;
height: 15px;
}
.scrollbar-track-y {
top: 0;
right: 0;
bottom: 0;
width: 15px;
}
&.scrollbar-active-x .scrollbar-track-x,
&.scrollbar-active-y .scrollbar-track-y {
visibility: visible;
background-color: transparent;
}
&:hover > .scrollbar-track-x,
&:hover > .scrollbar-track-y,
&.scrollbar-scrolling-x .scrollbar-track-x,
&.scrollbar-scrolling-y .scrollbar-track-y {
opacity: 0.6;
}
.scrollbar-track-x:hover,
.scrollbar-track-y:hover,
.scrollbar-track-x:focus,
.scrollbar-track-y:focus,
&.scrollbar-moveing-x .scrollbar-track-x,
&.scrollbar-moveing-y .scrollbar-track-y {
background-color: #eee;
opacity: 0.9;
}
/*
* 滚动条样式
*/
.scrollbar-thumb-x,
.scrollbar-thumb-y {
position: absolute;
z-index: 102;
background-color: #aaa;
border-radius: 6px;
transform: translateZ(0);
}
.scrollbar-thumb-x {
transition: background-color .2s linear, height .2s ease-in-out;
height: 6px;
bottom: 2px;
}
.scrollbar-thumb-y {
transition: background-color .2s linear, width .2s ease-in-out;
width: 6px;
right: 2px;
}
.scrollbar-track-x:hover > .scrollbar-thumb-x,
.scrollbar-track-x:focus > .scrollbar-thumb-x,
&.scrollbar-moveing-x .scrollbar-thumb-x {
background-color: #999;
height: 11px;
}
.scrollbar-track-y:hover > .scrollbar-thumb-y,
.scrollbar-track-y:focus > .scrollbar-thumb-y,
&.scrollbar-moveing-y .scrollbar-thumb-y {
background-color: #999;
width: 11px;
}
/*
* 内容区域样式
*/
.scrollbar-content {
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch;
&.scrollbar-disable-x {
overflow-x: hidden;
}
&.scrollbar-disable-y {
overflow-y: hidden;
}
}
}
/*
* 隐藏系统滚动条
*/
.scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
}

152
resources/assets/js/components/ScrollerY.vue
View File

@ -1,152 +0,0 @@
<template>
<div ref="scrollerView" class="app-scroller-y" :class="[static ? 'static' : '']">
<slot/>
<div ref="bottom" class="app-scroller-bottom"></div>
</div>
</template>
<script>
export default {
name: 'ScrollerY',
props: {
static: {
type: Boolean,
default: false
},
autoBottom: {
type: Boolean,
default: false
},
autoRecovery: {
type: Boolean,
default: true
},
autoRecoveryAnimate: {
type: Boolean,
default: false
},
},
data() {
return {
scrollY: 0,
scrollDiff: 0,
autoInterval: null,
}
},
mounted() {
this.openInterval()
this.$nextTick(this.initScroll);
},
activated() {
this.openInterval()
this.recoveryScroll()
},
destroyed() {
this.closeInterval()
},
deactivated() {
this.closeInterval()
},
methods: {
initScroll() {
this.autoToBottom();
let scrollListener = typeof this.$listeners['on-scroll'] === "function";
let scrollerView = $A(this.$refs.scrollerView);
scrollerView.scroll(() => {
let wInnerH = Math.round(scrollerView.innerHeight());
let wScrollY = scrollerView.scrollTop();
let bScrollH = this.$refs.scrollerView.scrollHeight;
this.scrollY = wScrollY;
if (scrollListener) {
let direction = 'static';
let directionreal = 'static';
if (this.scrollDiff - wScrollY > 50) {
this.scrollDiff = wScrollY;
direction = 'down';
} else if (this.scrollDiff - wScrollY < -100) {
this.scrollDiff = wScrollY;
direction = 'up';
}
if (this.scrollDiff - wScrollY > 1) {
this.scrollDiff = wScrollY;
directionreal = 'down';
} else if (this.scrollDiff - wScrollY < -1) {
this.scrollDiff = wScrollY;
directionreal = 'up';
}
this.$emit('on-scroll', {
scale: wScrollY / (bScrollH - wInnerH), //已滚动比例
scrollY: wScrollY, //滚动的距离
scrollE: bScrollH - wInnerH - wScrollY, //与底部距离
direction: direction, //滚动方向
directionreal: directionreal, //滚动方向（即时）
});
}
});
},
recoveryScroll() {
if (this.autoRecovery && (this.scrollY > 0 || this.autoBottom)) {
this.$nextTick(() => {
if (this.autoBottom) {
this.autoToBottom();
} else {
this.scrollTo(this.scrollY, this.autoRecoveryAnimate);
}
});
}
},
openInterval() {
this.autoToBottom();
this.autoInterval && clearInterval(this.autoInterval);
this.autoInterval = setInterval(this.autoToBottom, 300)
},
closeInterval() {
clearInterval(this.autoInterval);
this.autoInterval = null;
},
scrollTo(top, animate) {
if (animate === false) {
$A(this.$refs.scrollerView).stop().scrollTop(top);
} else {
$A(this.$refs.scrollerView).stop().animate({"scrollTop": top});
}
},
autoToBottom() {
if (this.autoBottom) {
$A.scrollToView(this.$refs.bottom, {
behavior: 'instant',
inline: 'end',
})
}
},
scrollInfo() {
let scrollerView = $A(this.$refs.scrollerView);
let wInnerH = Math.round(scrollerView.innerHeight());
let wScrollY = scrollerView.scrollTop();
let bScrollH = this.$refs.scrollerView.scrollHeight;
this.scrollY = wScrollY;
return {
scale: wScrollY / (bScrollH - wInnerH), //已滚动比例
scrollY: wScrollY, //滚动的距离
scrollE: bScrollH - wInnerH - wScrollY, //与底部距离
}
},
querySelector(el) {
return this.$refs.scrollerView && this.$refs.scrollerView.querySelector(el)
},
}
}
</script>

61
resources/assets/js/pages/manage.vue
View File

@ -100,29 +100,33 @@
</template>
</DropdownMenu>
</Dropdown>
<ul :class="listClassName" @scroll="operateVisible = false">
<li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
<i class="taskfont">&#xe6fb;</i>
<div class="menu-title">{{$L('仪表盘')}}</div>
<Badge v-if="dashboardTask.overdue_count > 0" class="menu-badge" type="error" :overflow-count="999" :count="dashboardTask.overdue_count"/>
<Badge v-else-if="dashboardTask.today_count > 0" class="menu-badge" type="info" :overflow-count="999" :count="dashboardTask.today_count"/>
<Badge v-else-if="dashboardTask.all_count > 0" class="menu-badge" type="primary" :overflow-count="999" :count="dashboardTask.all_count"/>
</li>
<li @click="toggleRoute('calendar')" :class="classNameRoute('calendar')">
<i class="taskfont">&#xe6f5;</i>
<div class="menu-title">{{$L('日历')}}</div>
</li>
<li @click="toggleRoute('messenger')" :class="classNameRoute('messenger')">
<i class="taskfont">&#xe6eb;</i>
<div class="menu-title">{{$L('消息')}}</div>
<Badge class="menu-badge" :overflow-count="999" :text="msgUnreadMention"/>
</li>
<li @click="toggleRoute('file')" :class="classNameRoute('file')">
<i class="taskfont">&#xe6f3;</i>
<div class="menu-title">{{$L('文件')}}</div>
</li>
<li ref="menuProject" class="menu-project">
<ul :class="listClassName" @scroll="operateVisible = false">
<Scrollbar class-name="manage-item" @on-scroll="operateVisible = false">
<div class="menu-base">
<ul>
<li @click="toggleRoute('dashboard')" :class="classNameRoute('dashboard')">
<i class="taskfont">&#xe6fb;</i>
<div class="menu-title">{{$L('仪表盘')}}</div>
<Badge v-if="dashboardTask.overdue_count > 0" class="menu-badge" type="error" :overflow-count="999" :count="dashboardTask.overdue_count"/>
<Badge v-else-if="dashboardTask.today_count > 0" class="menu-badge" type="info" :overflow-count="999" :count="dashboardTask.today_count"/>
<Badge v-else-if="dashboardTask.all_count > 0" class="menu-badge" type="primary" :overflow-count="999" :count="dashboardTask.all_count"/>
</li>
<li @click="toggleRoute('calendar')" :class="classNameRoute('calendar')">
<i class="taskfont">&#xe6f5;</i>
<div class="menu-title">{{$L('日历')}}</div>
</li>
<li @click="toggleRoute('messenger')" :class="classNameRoute('messenger')">
<i class="taskfont">&#xe6eb;</i>
<div class="menu-title">{{$L('消息')}}</div>
<Badge class="menu-badge" :overflow-count="999" :text="msgUnreadMention"/>
</li>
<li @click="toggleRoute('file')" :class="classNameRoute('file')">
<i class="taskfont">&#xe6f3;</i>
<div class="menu-title">{{$L('文件')}}</div>
</li>
</ul>
</div>
<div ref="menuProject" class="menu-project">
<ul>
<li
v-for="(item, key) in projectLists"
:ref="`project_${item.id}`"
@ -152,8 +156,8 @@
</li>
<li v-if="projectKeyLoading > 0" class="loading"><Loading/></li>
</ul>
</li>
</ul>
</div>
</Scrollbar>
<div class="operate-position" :style="operateStyles" v-show="operateVisible">
<Dropdown
trigger="custom"
@ -610,13 +614,6 @@ export default {
return data;
},
listClassName() {
return {
'scrollbar-overlay': true,
'scrollbar-hidden': this.operateVisible === true,
}
},
taskBrowseLists() {
const {cacheTasks, cacheTaskBrowse, userId} = this;
return cacheTaskBrowse.filter(({userid}) => userid === userId).map(({id}) => {

14
resources/assets/js/pages/manage/components/ChatInput/emoji.vue
View File

@ -14,12 +14,14 @@
@click="emojiNavActive=item.type"
v-html="item.content"></div>
</div>
<ul class="scrollbar-overlay" :class="[type, 'no-dark-content']">
<li v-for="item in list" @click="onSelect($event, item)">
<img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
<span v-else v-html="item.html" :title="item.name"></span>
</li>
</ul>
<Scrollbar>
<ul :class="[type, 'no-dark-content']">
<li v-for="item in list" @click="onSelect($event, item)">
<img v-if="item.type === 'emoticon'" :src="item.src" :title="item.name" :alt="item.name"/>
<span v-else v-html="item.html" :title="item.name"></span>
</li>
</ul>
</Scrollbar>
</div>
<ul v-if="!onlyEmoji" class="chat-emoji-menu">
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'">

56
resources/assets/js/pages/manage/components/DialogView.vue
View File

@ -107,18 +107,22 @@
popper-class="dialog-wrapper-read-poptip"
:placement="isRightMsg ? 'bottom-end' : 'bottom-start'">
<div class="read-poptip-content">
<ul class="read scrollbar-overlay">
<li class="read-title"><em>{{ todoDoneList.length }}</em>{{ $L('完成') }}</li>
<li v-for="item in todoDoneList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
<ul class="unread scrollbar-overlay">
<li class="read-title"><em>{{ todoUndoneList.length }}</em>{{ $L('待办') }}</li>
<li v-for="item in todoUndoneList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
<Scrollbar class-name="read">
<div class="read-title"><em>{{ todoDoneList.length }}</em>{{ $L('完成') }}</div>
<ul>
<li v-for="item in todoDoneList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
</Scrollbar>
<Scrollbar class-name="unread">
<div class="read-title"><em>{{ todoUndoneList.length }}</em>{{ $L('待办') }}</div>
<ul>
<li v-for="item in todoUndoneList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
</Scrollbar>
</div>
<div slot="reference" class="popover-reference"></div>
</EPopover>
@ -147,18 +151,22 @@
popper-class="dialog-wrapper-read-poptip"
:placement="isRightMsg ? 'bottom-end' : 'bottom-start'">
<div class="read-poptip-content">
<ul class="read scrollbar-overlay">
<li class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</li>
<li v-for="item in readList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
<ul class="unread scrollbar-overlay">
<li class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</li>
<li v-for="item in unreadList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
<Scrollbar class-name="read">
<div class="read-title"><em>{{ readList.length }}</em>{{ $L('已读') }}</div>
<ul>
<li v-for="item in readList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
</Scrollbar>
<Scrollbar class-name="unread">
<div class="read-title"><em>{{ unreadList.length }}</em>{{ $L('未读') }}</div>
<ul>
<li v-for="item in unreadList">
<UserAvatar :userid="item.userid" :size="26" showName tooltipDisabled/>
</li>
</ul>
</Scrollbar>
</div>
<div slot="reference" class="popover-reference"></div>
</EPopover>

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

@ -145,7 +145,7 @@
<!--消息列表-->
<VirtualList
ref="scroller"
class="dialog-scroller scrollbar-overlay"
class="dialog-scroller scrollbar-virtual"
:class="scrollerClass"
:data-key="'id'"
:data-sources="allMsgs"
@ -481,7 +481,7 @@
<div class="dialog-nav">
<div class="drawer-title">{{$L('待办消息')}}</div>
</div>
<div class="dialog-scroller scrollbar-overlay">
<Scrollbar class-name="dialog-scroller">
<DialogItem
v-if="todoViewMsg"
:source="todoViewMsg"
@ -491,7 +491,7 @@
@on-emoji="onEmoji"
simpleView/>
<Button class="original-button" icon="md-exit" type="text" :loading="todoViewPosLoad" @click="onPosTodo">{{ $L("回到原文") }}</Button>
</div>
</Scrollbar>
<div class="todo-button">
<Button type="primary" size="large" icon="md-checkbox-outline" @click="onDoneTodo" :loading="todoViewLoad" long>{{ $L("完成") }}</Button>
</div>
@ -2417,7 +2417,7 @@ export default {
this.$store.dispatch("openTask", $A.runNum(target.getAttribute("data-id")));
}
break;
}
},
@ -2829,4 +2829,4 @@ export default {
}
}
}
</script>
</script>

11
resources/assets/js/pages/manage/components/ProjectPanel.vue
View File

@ -137,7 +137,7 @@
<Icon class="last" type="md-add" @click="addTopShow(column.id, true)" />
</div>
</div>
<div :ref="'column_' + column.id" class="column-task scrollbar-overlay">
<Scrollbar class="column-task">
<div v-if="!!columnTopShow[column.id]" class="task-item additem">
<TaskAddSimple
:column-id="column.id"
@ -210,7 +210,7 @@
@on-priority="addTaskOpen"/>
</div>
</Draggable>
</div>
</Scrollbar>
</li>
<li :class="['add-column', addColumnShow ? 'show-input' : '']">
<div class="add-column-text" @click="addColumnOpen">
@ -229,7 +229,7 @@
</li>
</Draggable>
</div>
<div v-else-if="tabTypeActive === 'table'" class="project-table scrollbar-overlay">
<Scrollbar v-else-if="tabTypeActive === 'table'" class="project-table" enable-x>
<div class="project-table-head">
<Row class="task-row">
<Col span="12"># {{$L('任务名称')}}</Col>
@ -315,7 +315,7 @@
</Row>
<TaskRow v-if="projectData.cacheParameter.showCompleted" :list="completedList" open-key="completed" @on-priority="addTaskOpen" showCompleteAt/>
</div>
</div>
</Scrollbar>
<div v-else-if="tabTypeActive === 'gantt'" class="project-gantt">
<!--甘特图-->
<ProjectGantt :projectColumn="columnList" :flowInfo="flowInfo"/>
@ -981,9 +981,6 @@ export default {
addTopShow(id, show) {
this.$set(this.columnTopShow, id, show);
if (show) {
this.$refs['column_' + id][0].scrollTop = 0;
}
},
addTaskOpen(params) {

4
resources/assets/js/pages/manage/components/ProjectWorkflow.vue
View File

@ -27,7 +27,7 @@
<div class="taskflow-config-table">
<div class="taskflow-config-table-left-container">
<div class="taskflow-config-table-column-header left-header">{{$L('配置项')}}</div>
<div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body scrollbar-overlay">
<div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body">
<div class="taskflow-config-table-block">
<div class="taskflow-config-table-block-title">{{$L('设置状态为')}}</div>
<div class="taskflow-config-table-block-item">
@ -113,7 +113,7 @@
</EDropdown>
</div>
</div>
<div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body scrollbar-overlay">
<div :ref="`overlay_${data.id}`" class="taskflow-config-table-column-body">
<div class="taskflow-config-table-block">
<div class="taskflow-config-table-block-title"></div>
<RadioGroup v-model="item.status">

4
resources/assets/js/pages/manage/components/TaskDetail.vue
View File

@ -137,7 +137,7 @@
</div>
</div>
</div>
<div class="scroller scrollbar-overlay">
<Scrollbar class-name="scroller">
<div class="title">
<Input
v-model="taskDetail.name"
@ -387,7 +387,7 @@
</EDropdownMenu>
</EDropdown>
</div>
</div>
</Scrollbar>
<TaskUpload ref="upload" class="upload" @on-select-file="onSelectFile"/>
</div>
<div v-show="taskDetail.id > 0" class="task-dialog" :style="dialogStyle">

4
resources/assets/js/pages/manage/components/UpdateLog.vue
View File

@ -9,7 +9,9 @@
<Tag v-if="updateVer" color="volcano">{{updateVer}}</Tag>
</div>
</div>
<MarkdownPreview class="uplog-body scrollbar-overlay" :initialValue="updateLog"/>
<Scrollbar class-name="uplog-body">
<MarkdownPreview :initialValue="updateLog"/>
</Scrollbar>
<div slot="footer" class="adaption">
<Button type="default" @click="uplogFull=!uplogFull">{{$L(uplogFull ? '缩小查看' : '全屏查看')}}</Button>
</div>

4
resources/assets/js/pages/manage/dashboard.vue
View File

@ -35,7 +35,7 @@
</div>
</li>
</ul>
<div class="dashboard-list scrollbar-overlay">
<Scrollbar class="dashboard-list">
<template
v-for="column in columns"
v-if="column.list.length > 0">
@ -81,7 +81,7 @@
</li>
</ul>
</template>
</div>
</Scrollbar>
</div>
</div>
</template>

40
resources/assets/js/pages/manage/messenger.vue
View File

@ -45,16 +45,13 @@
<div v-if="$isEEUiApp && !appNotificationPermission" class="messenger-notify-permission" @click="onOpenAppSetting">
{{$L('未开启通知权限')}}<i class="taskfont">&#xe733;</i>
</div>
<ScrollerY
<Scrollbar
ref="list"
class="messenger-list"
:class="listClassName"
:hide-bar="this.operateVisible"
@touchstart.native="listTouch"
@on-scroll="listScroll"
static>
<ul
v-if="tabActive==='dialog'"
class="dialog">
@on-scroll="listScroll">
<ul v-if="tabActive==='dialog'" ref="ul" class="dialog">
<li
v-if="dialogList.length > 0"
v-for="(dialog, key) in dialogList"
@ -163,7 +160,7 @@
</DropdownMenu>
</Dropdown>
</div>
</ScrollerY>
</Scrollbar>
<div class="messenger-menu">
<div class="menu-icon">
<Icon @click="onActive(null)" :class="{active:tabActive==='dialog'}" type="ios-chatbubbles" />
@ -189,14 +186,13 @@
<script>
import {mapState} from "vuex";
import DialogWrapper from "./components/DialogWrapper";
import ScrollerY from "../../components/ScrollerY";
import longpress from "../../directives/longpress";
import {Store} from "le5le-store";
const MessengerObject = {menuHistory: []};
export default {
components: {ScrollerY, DialogWrapper},
components: {DialogWrapper},
directives: {longpress},
data() {
return {
@ -431,13 +427,6 @@ export default {
});
return num;
}
},
listClassName() {
return {
'scrollbar-overlay': true,
'scrollbar-hidden': this.operateVisible === true,
}
}
},
@ -531,13 +520,21 @@ export default {
}
},
listScroll(res) {
if (res.scrollE < 10) {
listScroll() {
if (this.scrollE() < 10) {
this.getContactsNextPage()
}
this.operateVisible = false;
},
scrollE() {
if (!this.$refs.list) {
return 0
}
const scrollInfo = this.$refs.list.scrollInfo()
return scrollInfo.scrollE
},
onActive(type) {
if (type === null) {
if (this.tabActive !== 'dialog') {
@ -767,8 +764,7 @@ export default {
},
getContactsNextPage() {
const {scrollE} = this.$refs.list.scrollInfo();
if (scrollE < 10
if (this.scrollE() < 10
&& this.tabActive === 'contacts'
&& this.contactsLoad === 0
&& this.contactsHasMorePages) {
@ -867,7 +863,7 @@ export default {
const wrapRect = this.$refs.list.$el.getBoundingClientRect();
this.operateStyles = {
left: `${event.clientX - wrapRect.left}px`,
top: `${dialogRect.top + this.windowScrollY}px`,
top: `${dialogRect.top - dialogRect.height + this.windowScrollY}px`,
height: dialogRect.height + 'px',
}
this.operateVisible = true;

1
resources/assets/sass/components/right-bottom.scss vendored
View File

@ -45,7 +45,6 @@
}
.notification-body {
max-height: 210px;
overflow-x: hidden;
margin-bottom: 16px;
.markdown-preview {
margin: -20px -12px;

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

@ -370,7 +370,7 @@ body.dark-mode-reverse {
.messenger-wrapper {
.messenger-select {
.messenger-list {
> ul {
ul {
&.dialog {
> li {
.icon-avatar {

1
resources/assets/sass/pages/common.scss vendored
View File

@ -6,7 +6,6 @@ body {
.common-gantt .gantt-left .gantt-item,
.project-panel .project-column,
.project-panel .project-table,
.scrollbar-overlay,
.ivu-modal-wrap {
overflow: hidden;
}

7
resources/assets/sass/pages/components/chat-input.scss vendored
View File

@ -305,7 +305,7 @@
.chat-emoji-wrapper {
.chat-emoji-box {
> ul {
ul {
width: auto;
padding: 8px 2px;
&::after {
@ -414,7 +414,7 @@
display: flex;
flex-direction: column;
height: 280px;
> ul {
ul {
flex: 1;
width: 360px;
height: 0;
@ -423,7 +423,6 @@
grid-template-columns: repeat(auto-fill, 40px);
padding: 8px;
flex-wrap: wrap;
overflow-x: hidden;
word-break: break-all;
box-sizing: content-box;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
@ -809,7 +808,7 @@ body.window-portrait {
background-color: #ffffff;
.chat-emoji-box {
height: 246px;
> ul {
ul {
grid-template-columns: repeat(auto-fill, 50px);
> li {
width: 50px;

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

@ -418,6 +418,12 @@
position: relative;
padding: 16px 32px 0;
&.scrollbar-virtual {
overflow-x: hidden;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.dialog-item {
display: flex;
flex-direction: row;
@ -1441,10 +1447,27 @@
flex: 1;
max-height: 300px;
> li {
.read-title,
ul > li {
padding-bottom: 12px;
}
.read-title {
position: sticky;
top: 0;
z-index: 10;
background: #ffffff;
> em {
font-size: 18px;
font-weight: 600;
font-style: normal;
padding-right: 6px;
}
}
ul > li {
min-height: 26px;
list-style: none;
margin-bottom: 12px;
.common-avatar {
width: 100%;
@ -1454,7 +1477,7 @@
}
&:last-child {
margin-bottom: 6px;
padding-bottom: 6px;
}
&.read-title {
@ -1470,7 +1493,8 @@
}
.unread {
> li {
.read-title,
ul > li {
padding-left: 16px;
}
}

2
resources/assets/sass/pages/components/project-panel.scss vendored
View File

@ -368,7 +368,6 @@
flex: 1;
display: flex;
flex-direction: column;
overflow-x: hidden;
.task-list {
> div:last-child {
margin-bottom: 16px;
@ -602,7 +601,6 @@
.project-table {
height: 100%;
margin-top: 18px;
overflow-x: auto;
.task-row {
background-color: #ffffff;
border-bottom: 1px solid #F4F4F5;

1
resources/assets/sass/pages/components/task-detail.scss vendored
View File

@ -152,7 +152,6 @@
margin-left: 28px;
padding-left: 8px;
padding-right: 36px;
overflow-x: hidden;
.title {
margin-top: 18px;
.ivu-input {

1
resources/assets/sass/pages/components/update-log.scss vendored
View File

@ -15,7 +15,6 @@
padding: 0 32px !important;
.uplog-body {
max-height: 240px;
overflow-x: hidden;
.markdown-preview {
margin: -20px -12px;
h1 {

4
resources/assets/sass/pages/page-dashboard.scss vendored
View File

@ -308,7 +308,9 @@ body.window-portrait {
}
.dashboard-list {
padding-bottom: 2px;
overflow: visible;
.scrollbar-content {
overflow: visible;
}
.dashboard-ul {
margin-bottom: 36px;
user-select: none;

326
resources/assets/sass/pages/page-manage.scss vendored
View File

@ -16,170 +16,181 @@
flex-direction: column;
align-items: center;
transition: all 0.2s;
> ul {
.scrollbar-container {
flex: 1;
width: 100%;
margin-top: 16px;
display: flex;
flex-direction: column;
overflow: hidden;
> li {
flex-shrink: 0;
}
.menu-base {
position: sticky;
top: 0;
z-index: 1;
background: #F4F5F7;
ul {
flex: 1;
width: 100%;
display: flex;
align-items: center;
height: 36px;
color: #6b6e72;
cursor: pointer;
position: relative;
width: 80%;
max-width: 100%;
margin: 5px auto;
padding: 0 4%;
border-radius: 4px;
> i {
opacity: 0.3;
font-size: 20px;
margin-right: 10px;
flex-direction: column;
> li {
flex-shrink: 0;
display: flex;
align-items: center;
height: 36px;
color: #6b6e72;
cursor: pointer;
position: relative;
width: 80%;
max-width: 100%;
margin: 5px auto;
padding: 0 4%;
border-radius: 4px;
> i {
opacity: 0.3;
font-size: 20px;
margin-right: 10px;
}
.menu-title {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-badge {
margin-left: 12px;
transform: scale(0.9);
}
&:first-child {
margin-top: 12px;
}
&.active {
background-color: #ffffff;
}
}
.menu-title {
flex: 1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.menu-badge {
margin-left: 12px;
transform: scale(0.9);
}
&:first-child {
margin-top: 12px;
}
&.active {
background-color: #ffffff;
}
&.menu-project {
flex: 1;
}
}
.menu-project {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0 0;
cursor: default;
width: 100%;
> ul {
width: 100%;
> li {
display: flex;
flex-direction: column;
align-items: center;
padding: 12px 0 0;
cursor: default;
width: 100%;
> ul {
width: 100%;
> li {
display: flex;
flex-direction: column;
list-style: none;
list-style: none;
cursor: pointer;
width: 80%;
margin: 2px auto;
border: 2px solid transparent;
.project-h1 {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 0 28px;
border-radius: 4px;
> em {
position: absolute;
top: 50%;
left: 2px;
width: 24px;
height: 24px;
cursor: pointer;
width: 80%;
margin: 2px auto;
border: 2px solid transparent;
.project-h1 {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 8px 0 28px;
border-radius: 4px;
> em {
position: absolute;
top: 50%;
left: 2px;
width: 24px;
height: 24px;
cursor: pointer;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
&:before {
content: "";
width: 12px;
height: 12px;
background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIyMzkwODExNTQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0OTk3IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0zNjYuMTgyNCAxMDguMjM2OEw4MTIuMDMyIDQyOC4wMzJhMTAyLjQgMTAyLjQgMCAwIDEgMCAxNjYuNTAyNEwzNjYuMTgyNCA5MTQuMzI5NmExMDIuNCAxMDIuNCAwIDAgMS0xNjIuMDk5Mi04My4yNTEyVjE5MS40ODhhMTAyLjQgMTAyLjQgMCAwIDEgMTYyLjA5OTItODMuMjUxMnoiIHAtaWQ9IjI0OTk4IiBmaWxsPSIjOTk5OTk5Ij48L3BhdGg+PC9zdmc+") no-repeat center center;
background-size: contain;
transition: transform 0.2s;
}
}
.title {
flex: 1;
color: $primary-title-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 38px;
line-height: 38px;
}
.icon-top {
padding-left: 8px;
width: 14px;
height: 14px;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCiAgICAgeT0iMHB4IgogICAgIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojOEJDRjcwO30KPC9zdHlsZT4wCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuNyw4LjFjLTEuNS0xLjUtNC40LTQuNC00LjQtNC40Yy0xLjItMS4yLTIuNS0xLjQtMy40LTAuN2MtMC41LDAuNC0wLjcsMC45LTAuOCwxLjRjLTAuMSwwLjUtMC40LDEtMC44LDEuMwoJbC0wLjEsMC4xYy0yLDEuNS00LjMsMi44LTYuOCwzLjJDMy45LDkuMiwzLjMsOS41LDMsMTBjLTAuNiwwLjktMC40LDIuMSwwLjMsMi45bDMuNCwzLjRjMCwwLDAsMCwwLDBsLTMuMSwzLjEKCWMtMC4zLDAuMy0wLjMsMC44LDAsMS4xYzAuMSwwLjEsMC4zLDAuMiwwLjUsMC4yYzAuMiwwLDAuNC0wLjEsMC41LTAuMmwzLjEtMy4xYzAsMCwwLDAsMCwwbDIuOSwyLjljMS4zLDEuMywyLjUsMS41LDMuNCwwLjkKCWMwLjQtMC4zLDAuNy0wLjcsMC45LTEuMmMwLjYtMi4zLDEuNC00LjYsMi44LTYuNWwwLjUtMC43YzAuMy0wLjQsMC44LTAuOCwxLjMtMC44YzAuNS0wLjEsMS4xLTAuMywxLjQtMC44CglDMjEuNywxMC4yLDIxLjUsOC45LDIwLjcsOC4xeiIvPgo8L3N2Zz4K") no-repeat center center;
background-size: contain;
}
.num {
padding-left: 8px;
font-size: 12px;
transform: translateY(-50%);
display: flex;
align-items: center;
justify-content: center;
&:before {
content: "";
width: 12px;
height: 12px;
background: url("data:image/svg+xml;base64,PHN2ZyB0PSIxNjIyMzkwODExNTQxIiBjbGFzcz0iaWNvbiIgdmlld0JveD0iMCAwIDEwMjQgMTAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHAtaWQ9IjI0OTk3IiB3aWR0aD0iNDgiIGhlaWdodD0iNDgiPjxwYXRoIGQ9Ik0zNjYuMTgyNCAxMDguMjM2OEw4MTIuMDMyIDQyOC4wMzJhMTAyLjQgMTAyLjQgMCAwIDEgMCAxNjYuNTAyNEwzNjYuMTgyNCA5MTQuMzI5NmExMDIuNCAxMDIuNCAwIDAgMS0xNjIuMDk5Mi04My4yNTEyVjE5MS40ODhhMTAyLjQgMTAyLjQgMCAwIDEgMTYyLjA5OTItODMuMjUxMnoiIHAtaWQ9IjI0OTk4IiBmaWxsPSIjOTk5OTk5Ij48L3BhdGg+PC9zdmc+") no-repeat center center;
background-size: contain;
transition: transform 0.2s;
}
}
.title {
flex: 1;
color: $primary-title-color;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
height: 38px;
line-height: 38px;
}
.icon-top {
padding-left: 8px;
width: 14px;
height: 14px;
background: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjAuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuWbvuWxgl8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCiAgICAgeT0iMHB4IgogICAgIHZpZXdCb3g9IjAgMCAyNCAyNCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMjQgMjQ7IiB4bWw6c3BhY2U9InByZXNlcnZlIj4KPHN0eWxlIHR5cGU9InRleHQvY3NzIj4KCS5zdDB7ZmlsbDojOEJDRjcwO30KPC9zdHlsZT4wCiAgICA8cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAuNyw4LjFjLTEuNS0xLjUtNC40LTQuNC00LjQtNC40Yy0xLjItMS4yLTIuNS0xLjQtMy40LTAuN2MtMC41LDAuNC0wLjcsMC45LTAuOCwxLjRjLTAuMSwwLjUtMC40LDEtMC44LDEuMwoJbC0wLjEsMC4xYy0yLDEuNS00LjMsMi44LTYuOCwzLjJDMy45LDkuMiwzLjMsOS41LDMsMTBjLTAuNiwwLjktMC40LDIuMSwwLjMsMi45bDMuNCwzLjRjMCwwLDAsMCwwLDBsLTMuMSwzLjEKCWMtMC4zLDAuMy0wLjMsMC44LDAsMS4xYzAuMSwwLjEsMC4zLDAuMiwwLjUsMC4yYzAuMiwwLDAuNC0wLjEsMC41LTAuMmwzLjEtMy4xYzAsMCwwLDAsMCwwbDIuOSwyLjljMS4zLDEuMywyLjUsMS41LDMuNCwwLjkKCWMwLjQtMC4zLDAuNy0wLjcsMC45LTEuMmMwLjYtMi4zLDEuNC00LjYsMi44LTYuNWwwLjUtMC43YzAuMy0wLjQsMC44LTAuOCwxLjMtMC44YzAuNS0wLjEsMS4xLTAuMywxLjQtMC44CglDMjEuNywxMC4yLDIxLjUsOC45LDIwLjcsOC4xeiIvPgo8L3N2Zz4K") no-repeat center center;
background-size: contain;
}
.num {
padding-left: 8px;
font-size: 12px;
}
}
.project-h2 {
display: none;
margin: 16px 4px;
padding: 0 8px 0 24px;
cursor: default;
> p {
display: flex;
align-items: center;
padding: 4px 0;
height: 36px;
em,
span {
font-style: normal;
font-size: 12px;
flex-shrink: 0;
padding-right: 6px;
}
.ivu-progress {
margin-right: -18px;
.ivu-progress-inner {
background-color: #e4e4e4;
}
}
.project-h2 {
display: none;
margin: 16px 4px;
padding: 0 8px 0 24px;
cursor: default;
> p {
display: flex;
align-items: center;
padding: 4px 0;
height: 36px;
em,
span {
font-style: normal;
font-size: 12px;
flex-shrink: 0;
padding-right: 6px;
}
.ivu-progress {
margin-right: -18px;
.ivu-progress-inner {
background-color: #e4e4e4;
}
}
}
}
&.active {
.project-h1 {
background-color: #ffffff;
}
}
&.open-menu {
.project-h1 {
> em {
&:before {
transform: rotate(90deg);
}
}
}
.project-h2 {
display: block;
}
}
&.operate {
border-color: $primary-color;
}
&.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
.common-loading {
margin: 6px;
width: 22px;
height: 22px;
}
}
&.active {
.project-h1 {
background-color: #ffffff;
}
}
&.open-menu {
.project-h1 {
> em {
&:before {
transform: rotate(90deg);
}
}
}
.project-h2 {
display: block;
}
}
&.operate {
border-color: $primary-color;
}
&.loading {
display: flex;
align-items: center;
justify-content: center;
padding: 6px;
.common-loading {
margin: 6px;
width: 22px;
height: 22px;
}
}
}
}
@ -401,21 +412,8 @@
@media (max-height: 640px) {
.page-manage {
.manage-box-menu {
> ul {
overflow: auto;
&.scrollbar-overlay {
overflow-y: overlay;
}
> li {
&.menu-project {
> ul {
overflow: visible;
}
}
}
}
.manage-project-search {
margin-top: 12px;
.menu-base {
position: relative;
}
}
}

10
resources/assets/sass/pages/page-messenger.scss vendored
View File

@ -126,7 +126,7 @@
height: 0;
width: 100%;
overflow-x: hidden;
> ul {
ul {
&.dialog {
> li {
display: flex;
@ -486,6 +486,7 @@
left: 0;
width: 1px;
opacity: 0;
margin-top: -4px;
visibility: hidden;
pointer-events: none;
}
@ -620,9 +621,9 @@ body.window-portrait {
opacity: 0;
}
.messenger-list {
> ul {
user-select: none;
ul {
&.dialog {
user-select: none;
> li {
.user-avatar {
.common-avatar {
@ -647,6 +648,9 @@ body.window-portrait {
}
}
}
&.contacts {
user-select: none;
}
}
}
}

53
resources/assets/sass/scrollbar.scss vendored
View File

@ -1,52 +1 @@
/* 滚动条美化 */
.scrollbar-overlay {
overflow-y: auto;
overflow-y: overlay;
-webkit-overflow-scrolling: touch;
/* 滚动条尺寸 */
&::-webkit-scrollbar {
width: 0;
height: 0;
}
/*滚动条滑块隐藏*/
&::-webkit-scrollbar-thumb {
border: 3px solid transparent;
background-color: rgba(0, 0, 0, .2);
background-clip: content-box;
border-radius: 12px;
/*让该容器的滚动条滑块显示*/
&:hover {
border: 2px solid transparent;
background-color: rgba(0, 0, 0, .2);
}
/*按下滚动条，颜色加深*/
&:active {
border: 2px solid transparent;
background-color: rgba(0, 0, 0, .4);
}
}
/*滚动条轨道*/
&::-webkit-scrollbar-track {
border-radius: 12px;
background: rgba(0, 0, 0, 0);
}
/*鼠标浮到容器上*/
&:hover {
&::-webkit-scrollbar {
width: 12px;
height: 12px;
}
}
}
/* 滚动条隐藏 */
.scrollbar-hidden {
&::-webkit-scrollbar {
display: none;
}
}
@import "../js/components/Scrollbar/style.scss";

2
resources/mobile

@ -1 +1 @@
Subproject commit 650cba17f8837c87d7d9fe308a85665f3cf17c80
Subproject commit c74b2a91db411bbffe6b406d9e21677821bf39d4