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

Merge commit '3f5c85b434d334f3a60fa5cabd3c933c4fafa28d' into pro

Browse Source 
# Conflicts:
#	resources/mobile
This commit is contained in:
kuaifan 2024-11-25 16:34:15 +08:00
commit 61b1206091
2 changed files with 74 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -23,19 +23,21 @@
</ul> </ul>
</Scrollbar> </Scrollbar>
</div> </div>
<ul v-if="!onlyEmoji" ref="chatEmojiMenuRef" class="chat-emoji-menu" :style="chatEmojiMenuStyle" @scroll="onHandleScroll"> <div v-if="!onlyEmoji" class="chat-emoji-menu-wrap">
<li v-if="showEmojiMenuScrollLeftBtn" @click="onEmojiMenuScroll('left')" class="left-btn"><i class="taskfont">&#xe72d;</i></li> <span v-show="showEmojiMenuScrollLeftBtn" class="left-btn" @click="onEmojiMenuScroll('left')"><i class="taskfont">&#xe72d;</i></span>
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'"> <ul ref="chatEmojiMenuRef" class="chat-emoji-menu" @scroll="onHandleScroll">
<i class="taskfont">&#xe6f8;</i> <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
</li> <i class="taskfont">&#xe6f8;</i>
<li :class="{active: type === 'emoji'}" @click="type='emoji'"> </li>
<span class="no-dark-content">&#128512;</span> <li :class="{active: type === 'emoji'}" @click="type='emoji'">
</li> <span class="no-dark-content">&#128512;</span>
<li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)"> </li>
<Imgs :title="item.name" :alt="item.name" :src="item.src"/> <li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
</li> <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
<li v-if="showEmojiMenuScrollRightBtn" @click="onEmojiMenuScroll('right')" class="right-btn"><i class="taskfont">&#xe733;</i></li> </li>
</ul> </ul>
<span v-show="showEmojiMenuScrollRightBtn" class="right-btn" @click="onEmojiMenuScroll('right')"><i class="taskfont">&#xe733;</i></span>
</div>
</div> </div>
</template> </template>
@ -115,19 +117,16 @@ export default {
} }
return []; return [];
}, },
chatEmojiMenuStyle() { showEmojiMenuScrollLeftBtn() {
return {
paddingLeft: this.showEmojiMenuScrollLeftBtn ? '34px' : 0,
paddingRight: this.showEmojiMenuScrollRightBtn ? '34px' : 0,
}
},
showEmojiMenuScrollLeftBtn(){
return this.emojiMenuScrollLeft > 34 return this.emojiMenuScrollLeft > 34
}, },
showEmojiMenuScrollRightBtn(){ showEmojiMenuScrollRightBtn() {
const container = this.$refs['chatEmojiMenuRef']; const container = this.$refs['chatEmojiMenuRef'];
const liWidth = container?.querySelector('li')?.offsetWidth || 48; if (container) {
return this.emojiMenuScrollLeft < this.emoticonData.length * liWidth - (this.$store.state.windowPortrait ? 34 : 0) const liWidth = container?.querySelector('li')?.offsetWidth || 48;
return this.emojiMenuScrollLeft < (container.scrollWidth - container.clientWidth - liWidth);
}
return this.emojiMenuScrollLeft <= 100;
} }
}, },
methods: { methods: {
@ -226,8 +225,11 @@ export default {
onMonitorWheel() { onMonitorWheel() {
const container = this.$refs['chatEmojiMenuRef']; const container = this.$refs['chatEmojiMenuRef'];
container?.addEventListener("wheel", (event) =>{ container?.addEventListener("wheel", (event) =>{
event.preventDefault(); const isTouchpad = Math.abs(event.deltaY) < 10 && event.deltaMode === 0;
container.scrollLeft = container.scrollLeft + event.deltaY; if (!isTouchpad) {
event.preventDefault();
container.scrollLeft = container.scrollLeft + event.deltaY;
}
}); });
}, },

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

@ -562,63 +562,74 @@
} }
} }
} }
.chat-emoji-menu {
width: 376px;
height: 40px;
line-height: 40px;
background-color: #f2f4f7;
display: flex;
align-items: center;
overflow: auto;
&::-webkit-scrollbar { .chat-emoji-menu-wrap {
display: none; position: relative;
}
> li { .chat-emoji-menu {
list-style: none; width: 376px;
cursor: pointer; height: 40px;
line-height: 40px;
background-color: #f2f4f7;
display: flex; display: flex;
align-items: center; align-items: center;
height: 100%; overflow: auto;
&.active { &::-webkit-scrollbar {
background-color: #fff; display: none;
} }
> span { > li {
padding: 0 13px; list-style: none;
font-size: 22px; cursor: pointer;
} display: flex;
align-items: center;
height: 100%;
> i { &.active {
width: 48px; background-color: #fff;
font-size: 18px; }
text-align: center;
}
> img { > span {
width: 24px; padding: 0 13px;
height: 24px; font-size: 22px;
padding: 0 12px; }
box-sizing: content-box;
> i {
width: 48px;
font-size: 18px;
text-align: center;
}
> img {
width: 24px;
height: 24px;
padding: 0 12px;
box-sizing: content-box;
}
} }
} }
.left-btn,.right-btn{ .left-btn,
position: absolute !important; .right-btn {
height: 40px; position: absolute;
top: 0;
height: 100%;
background: #f2f4f7 !important; background: #f2f4f7 !important;
width: 34px; width: 34px;
z-index: 3; z-index: 3;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
} }
.left-btn{ .left-btn {
left: 0; left: 0;
box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.5); box-shadow: 10px 0 10px -10px rgba(0, 0, 0, 0.5);
} }
.right-btn{ .right-btn {
right: 0; right: 0;
box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5); box-shadow: -10px 0 10px -10px rgba(0, 0, 0, 0.5);
} }