github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2025-12-18 23:32:49 +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

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

@ -23,8 +23,9 @@
</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>
<ul ref="chatEmojiMenuRef" class="chat-emoji-menu" @scroll="onHandleScroll">
<li :class="{active: type === 'emosearch'}" @click="type='emosearch'"> <li :class="{active: type === 'emosearch'}" @click="type='emosearch'">
<i class="taskfont">&#xe6f8;</i> <i class="taskfont">&#xe6f8;</i>
</li> </li>
@ -34,8 +35,9 @@
<li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)"> <li v-for="item in emoticonData" :class="{active: type === 'emoticon' && emoticonPath == item.path}" @click="onEmoticon(item.path)">
<Imgs :title="item.name" :alt="item.name" :src="item.src"/> <Imgs :title="item.name" :alt="item.name" :src="item.src"/>
</li> </li>
<li v-if="showEmojiMenuScrollRightBtn" @click="onEmojiMenuScroll('right')" class="right-btn"><i class="taskfont">&#xe733;</i></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'];
if (container) {
const liWidth = container?.querySelector('li')?.offsetWidth || 48; const liWidth = container?.querySelector('li')?.offsetWidth || 48;
return this.emojiMenuScrollLeft < this.emoticonData.length * liWidth - (this.$store.state.windowPortrait ? 34 : 0) 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) =>{
const isTouchpad = Math.abs(event.deltaY) < 10 && event.deltaMode === 0;
if (!isTouchpad) {
event.preventDefault(); event.preventDefault();
container.scrollLeft = container.scrollLeft + event.deltaY; container.scrollLeft = container.scrollLeft + event.deltaY;
}
}); });
}, },

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

@ -562,6 +562,10 @@
} }
} }
} }
.chat-emoji-menu-wrap {
position: relative;
.chat-emoji-menu { .chat-emoji-menu {
width: 376px; width: 376px;
height: 40px; height: 40px;
@ -604,21 +608,28 @@
box-sizing: content-box; 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);
} }