sij/khoj
1
0
Fork 0
mirror of https://github.com/khoj-ai/khoj.git synced 2024-11-23 23:48:56 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 16

Add listening circle animation to speak button in Obsidian plugin

Browse source 
Use icon active focus as color of animation button
This commit is contained in:
Debanjum Singh Solanky 2024-07-05 14:00:53 +05:30
parent 516af86575
commit 6d59ad7fc9
2 changed files with 27 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/interface/obsidian/src/chat_view.ts
View file

@ -1014,6 +1014,7 @@ export class KhojChatView extends KhojPaneView {
// Start the countdown timer UI
stopSendButtonImg.getElementsByTagName("circle")[0].style.animation = "countdown 3s linear 1 forwards";
stopSendButtonImg.getElementsByTagName("circle")[0].style.color = "var(--icon-color-active)";
// Auto send message after 3 seconds
this.sendMessageTimeout = setTimeout(() => {
@ -1043,6 +1044,7 @@ export class KhojChatView extends KhojPaneView {
this.mediaRecorder.start();
setIcon(transcribeButton, "mic-off");
transcribeButton.classList.add("loading-encircle")
};
// Toggle recording
@ -1057,6 +1059,7 @@ export class KhojChatView extends KhojPaneView {
this.mediaRecorder.stop();
this.mediaRecorder.stream.getTracks().forEach(track => track.stop());
this.mediaRecorder = undefined;
transcribeButton.classList.remove("loading-encircle");
setIcon(transcribeButton, "mic");
}
}

24
src/interface/obsidian/styles.css
View file

@ -598,6 +598,30 @@ img.copy-icon {
}
}
/* Loading Encircle */
.loading-encircle {
position: relative;
}
.loading-encircle::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin-top: -16px;
margin-left: -16px;
border: 4px solid transparent;
border-top-color: var(--icon-color-active);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
@media only screen and (max-width: 600px) {
div.khoj-header {
display: grid;