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

Collapse the reminders after they're successfully scheduled

Browse source
This commit is contained in:
sabaimran 2024-05-02 09:55:04 +05:30
parent 6b648ee3ad
commit 690e9d8ed3
3 changed files with 77 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/khoj/interface/web/assets/icons/collapse.svg Normal file
View file

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
<svg width="800px" height="800px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns">
<title>collapse</title>
<desc>Created with Sketch Beta.</desc>
<defs>
</defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
<g id="Icon-Set" sketch:type="MSLayerGroup" transform="translate(-360.000000, -1191.000000)" fill="#000000">
<path d="M387.887,1203.04 L381.326,1203.04 L392.014,1192.4 L390.614,1191.01 L379.938,1201.64 L379.969,1195.16 C379.969,1194.61 379.526,1194.17 378.979,1194.17 C378.433,1194.17 377.989,1194.61 377.989,1195.16 L377.989,1204.03 C377.989,1204.32 378.111,1204.56 378.302,1204.72 C378.481,1204.9 378.73,1205.01 379.008,1205.01 L387.887,1205.01 C388.434,1205.01 388.876,1204.57 388.876,1204.03 C388.876,1203.48 388.434,1203.04 387.887,1203.04 L387.887,1203.04 Z M372.992,1208.99 L364.113,1208.99 C363.566,1208.99 363.124,1209.43 363.124,1209.97 C363.124,1210.52 363.566,1210.96 364.113,1210.96 L370.674,1210.96 L359.986,1221.6 L361.386,1222.99 L372.063,1212.36 L372.031,1218.84 C372.031,1219.39 372.474,1219.83 373.021,1219.83 C373.567,1219.83 374.011,1219.39 374.011,1218.84 L374.011,1209.97 C374.011,1209.68 373.889,1209.44 373.697,1209.28 C373.519,1209.1 373.27,1208.99 372.992,1208.99 L372.992,1208.99 Z" id="collapse" sketch:type="MSShapeGroup">
</path>
</g>
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 1.6 KiB

2
src/khoj/interface/web/base_config.html
View file

@ -4,7 +4,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1.0">
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png?v={{ khoj_version }}">
<title>Khoj - Settings</title>
<title>Khoj</title>
<link rel="stylesheet" href="/static/assets/pico.min.css?v={{ khoj_version }}">
<link rel="stylesheet" href="/static/assets/khoj.css?v={{ khoj_version }}">
<script

56
src/khoj/interface/web/config_automation.html
View file

@ -74,6 +74,38 @@
transform: translateY(-5px);
}
.hide-details {
display: none !important;
}
div.card-header {
display: grid;
grid-template-columns: 1fr auto;
grid-gap: 8px;
align-items: baseline;
padding: 8px;
background-color: var(--frosted-background-color);
}
div.card-header:hover {
cursor: pointer;
}
div.toggle-icon {
width: 24px;
height: 24px;
}
@keyframes confirmation {
0% { background-color: normal; transform: scale(1); }
50% { background-color: var(--primary); transform: scale(1.1); }
100% { background-color: normal; transform: scale(1); }
}
.confirmation {
animation: confirmation 1s;
}
</style>
<script>
function deleteAutomation(automationId) {
@ -108,30 +140,44 @@
queryEl.value = automation.query_to_run;
}
function onClickAutomationCard(automationId) {
const automationIDElements = document.querySelectorAll(`.${automationId}`);
automationIDElements.forEach(el => {
el.classList.toggle("hide-details");
});
}
function generateAutomationRow(automation) {
let automationId = automation.id;
let automationNextRun = `Next run at ${automation.next}\nCron: ${automation.crontime}`;
let automationEl = document.createElement("div");
automationEl.innerHTML = `
<div class="card automation" id="automation-card-${automationId}">
<div class="card-header" onclick="onClickAutomationCard('${automationId}')">
<input type="text"
id="automation-subject-${automationId}"
name="subject"
data-original="${automation.subject}"
value="${automation.subject}">
<label for="query-to-run">Your automation</label>
<div class="toggle-icon">
<img src="/static/assets/icons/collapse.svg" alt="Toggle" class="toggle-icon">
</div>
</div>
<label for="query-to-run" class="hide-details ${automationId}">Your automation</label>
<textarea id="automation-queryToRun-${automationId}"
class="hide-details ${automationId}"
data-original="${automation.query_to_run}"
name="query-to-run">${automation.query_to_run}</textarea>
<label for="schedule">Schedule</label>
<label for="schedule" class="hide-details">Schedule</label>
<input type="text"
class="hide-details ${automationId}"
id="automation-schedule-${automationId}"
name="schedule"
data-cron="${automation.crontime}"
data-original="${automation.schedule}"
title="${automationNextRun}"
value="${automation.schedule}">
<div class="automation-buttons">
<div class="hide-details automation-buttons ${automationId}">
<button type="button"
class="delete-automation-button negative-button"
id="delete-automation-button-${automationId}">Delete</button>
@ -236,7 +282,11 @@
.then(automation => {
if (create) {
const automationEl = document.getElementById(`automation-card-${automationId}`);
// Create a more interesting confirmation animation.
automationEl.classList.add("confirmation")
setTimeout(function() {
automationEl.replaceWith(generateAutomationRow(automation));
}, 1000);
} else {
updateAutomationRow(automation);
}