mirror of
https://github.com/ParisNeo/lollms-webui.git
synced 2025-02-20 17:22:47 +00:00
added transitions to list items and such
This commit is contained in:
AndzejsP
parent
14bc73ca08
commit
e1ccf30499
@ -50,8 +50,12 @@
|
||||
</div>
|
||||
</div>
|
||||
<!-- SEARCH BAR -->
|
||||
<div class="flex-row items-center gap-3 flex-0 w-full">
|
||||
<div v-if="isSearch" class="p-4 pt-2">
|
||||
<!-- <Transition name="expand" > -->
|
||||
<div key="1" v-if="isSearch" class="flex-row items-center gap-3 flex-0 w-full">
|
||||
|
||||
|
||||
|
||||
<div class="p-4 pt-2 ">
|
||||
<div class="relative">
|
||||
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
|
||||
<div class="scale-75">
|
||||
@ -71,7 +75,9 @@
|
||||
@input="filterDiscussions()" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<!-- </Transition> -->
|
||||
<hr v-if="isCheckbox" class="h-px bg-bg-light p-0 mb-4 px-4 mx-4 border-0 dark:bg-bg-dark">
|
||||
<div v-if="isCheckbox" class="flex flex-row flex-grow p-4 pt-0 items-center">
|
||||
|
||||
@ -119,17 +125,18 @@
|
||||
<div class="relative overflow-y-scroll no-scrollbar">
|
||||
<!-- DISCUSSION LIST -->
|
||||
<div class="mx-4 flex-grow" :class="filterInProgress ? 'opacity-20 pointer-events-none' : ''">
|
||||
<Discussion v-for="(item, index) in list" :key="index" :id="item.id" :title="item.title"
|
||||
<TransitionGroup name="list" >
|
||||
<Discussion v-for="(item, index) in list" :key="item.id" :id="item.id" :title="item.title"
|
||||
:selected="currentDiscussion.id == item.id" :loading="item.loading" :isCheckbox="isCheckbox"
|
||||
:checkBoxValue="item.checkBoxValue" @select="selectDiscussion(item)" @delete="deleteDiscussion(item.id)"
|
||||
@editTitle="editTitle" @checked="checkUncheckDiscussion" />
|
||||
|
||||
</TransitionGroup>
|
||||
<div v-if="list.length < 1"
|
||||
class="gap-2 py-2 my-2 hover:shadow-md hover:bg-primary-light dark:hover:bg-primary rounded-md p-2 duration-75 group cursor-pointer">
|
||||
<p class="px-3">No discussions are found</p>
|
||||
</div>
|
||||
<div
|
||||
class="sticky bottom-0 bg-gradient-to-t pointer-events-none from-bg-light-tone dark:from-bg-dark-tone flex height-64">
|
||||
class="sticky bottom-0 bg-gradient-to-t pointer-events-none from-bg-light-tone dark:from-bg-dark-tone flex flex-grow">
|
||||
<!-- FADING DISCUSSION LIST END ELEMENT -->
|
||||
</div>
|
||||
</div>
|
||||
@ -140,14 +147,13 @@
|
||||
|
||||
<!-- CHAT AREA -->
|
||||
<div class="container flex flex-col flex-grow pt-4 pb-10">
|
||||
<!-- REMOVED @click="scrollToElement($event.target)" -->
|
||||
<!-- Removed reference to copyToClipBoard() ; function was moved to Message.vue -->
|
||||
<Message v-for="(msg, index) in discussionArr" :key="index" :message="msg" :id="'msg-' + msg.id" ref="messages"
|
||||
<TransitionGroup name="list" >
|
||||
<Message v-for="(msg, index) in discussionArr" :key="msg.id" :message="msg" :id="'msg-' + msg.id" ref="messages"
|
||||
@copy="copyToClipBoard" @delete="deleteMessage" @rankUp="rankUpMessage" @rankDown="rankDownMessage"
|
||||
@updateMessage="updateMessage" @resendMessage="resendMessage" :avatar="getAvatar(msg.sender)" />
|
||||
|
||||
<WelcomeComponent v-if="!currentDiscussion.id" />
|
||||
|
||||
</TransitionGroup>
|
||||
|
||||
</div>
|
||||
<div class=" sticky bottom-0">
|
||||
@ -159,12 +165,46 @@
|
||||
<Toast ref="toast">
|
||||
</Toast>
|
||||
</template>
|
||||
|
||||
|
||||
<style scoped>
|
||||
.height-64 {
|
||||
min-height: 64px;
|
||||
.expand-enter-active,
|
||||
.expand-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.expand-enter{
|
||||
transition: all 0.5s ease;
|
||||
opacity: 1;
|
||||
transform: translatey(30px);
|
||||
}
|
||||
.expand-leave-to {
|
||||
|
||||
transform: translatey(-30px);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.list-move, /* apply transition to moving elements */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
transform: translatey(-30px);
|
||||
}
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translatey(30px);
|
||||
}
|
||||
/* ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
|
||||
export default {
|
||||
@ -526,6 +566,10 @@ export default {
|
||||
},
|
||||
sendMsg(msg) {
|
||||
// Sends message to binding
|
||||
if(!msg){
|
||||
this.$refs.toast.showToast("Message contains no centent!", 4, false)
|
||||
return
|
||||
}
|
||||
this.isGenerating = true;
|
||||
this.setDiscussionLoading(this.currentDiscussion.id, this.isGenerating);
|
||||
axios.get('/get_generation_status', {}).then((res) => {
|
||||
@ -1036,7 +1080,7 @@ import Toast from '../components/Toast.vue'
|
||||
import feather from 'feather-icons'
|
||||
|
||||
import axios from 'axios'
|
||||
import { nextTick } from 'vue'
|
||||
import { nextTick,TransitionGroup } from 'vue'
|
||||
|
||||
import socket from '@/services/websocket.js'
|
||||
|
||||
|
||||
@ -95,12 +95,14 @@
|
||||
</label>
|
||||
<div ref="modelZoo" class="overflow-y-auto no-scrollbar p-2 pb-0 "
|
||||
:class="mzl_collapsed ? '' : 'max-h-96'">
|
||||
<TransitionGroup name="list" >
|
||||
<model-entry v-for="(model, index) in models" :key="index" :title="model.title"
|
||||
:icon="model.icon" :path="model.path" :owner="model.owner" :owner_link="model.owner_link"
|
||||
:license="model.license" :description="model.description" :is-installed="model.isInstalled"
|
||||
:on-install="onInstall" :on-uninstall="onUninstall" :on-selected="onSelected"
|
||||
:selected="model.title === configFile.model" :model="model" />
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EXPAND / COLLAPSE BUTTON -->
|
||||
<button v-if="mzl_collapsed"
|
||||
@ -179,10 +181,12 @@
|
||||
<div ref="personalitiesZoo"
|
||||
class="overflow-y-auto no-scrollbar p-2 pb-0 grid lg:grid-cols-3 md:grid-cols-2 gap-4"
|
||||
:class="pzl_collapsed ? '' : 'max-h-96'">
|
||||
<TransitionGroup name="bounce" >
|
||||
<personality-entry v-for="(pers, index) in personalitiesFiltered" :key="index"
|
||||
:personality="pers"
|
||||
:selected="pers.name === configFile.personality && pers.category === configFile.personality_category && pers.language === configFile.personality_language"
|
||||
:on-selected="onPersonalitySelected" />
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
<!-- EXPAND / COLLAPSE BUTTON -->
|
||||
@ -377,11 +381,48 @@
|
||||
|
||||
|
||||
</template>
|
||||
<style scoped>
|
||||
.list-move, /* apply transition to moving elements */
|
||||
.list-enter-active,
|
||||
.list-leave-active {
|
||||
transition: all 0.5s ease;
|
||||
}
|
||||
|
||||
.list-enter-from {
|
||||
transform: translatey(-30px);
|
||||
}
|
||||
.list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translatey(30px);
|
||||
}
|
||||
/* ensure leaving items are taken out of layout flow so that moving
|
||||
animations can be calculated correctly. */
|
||||
.list-leave-active {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.bounce-enter-active {
|
||||
animation: bounce-in 0.5s;
|
||||
}
|
||||
.bounce-leave-active {
|
||||
animation: bounce-in 0.5s reverse;
|
||||
}
|
||||
@keyframes bounce-in {
|
||||
0% {
|
||||
transform: scale(0);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.25);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
import axios from "axios";
|
||||
import feather from 'feather-icons'
|
||||
import { nextTick } from 'vue'
|
||||
import { nextTick,TransitionGroup } from 'vue'
|
||||
import MessageBox from "@/components/MessageBox.vue";
|
||||
import YesNoDialog from "@/components/YesNoDialog.vue";
|
||||
import Toast from '../components/Toast.vue'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user