klbr/khoj
1
0
Fork 0
mirror of https://github.com/khoaliber/khoj.git synced 2026-03-09 13:25:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update UI of config sub pages to use khoj lantern theme styling

Browse Source
This commit is contained in:
Debanjum Singh Solanky
2023-06-21 21:55:34 -07:00
parent 0ce2ec590a
commit c467a0cbb0
7 changed files with 347 additions and 298 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
src/khoj/interface/web/assets/icons/orgmode.svg → src/khoj/interface/web/assets/icons/org.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 7.8 KiB

129
src/khoj/interface/web/base_config.html
View File

@@ -1,4 +1,5 @@
<!DOCTYPE html> <!DOCTYPE html>
<html data-theme="light">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png"> <link rel="icon" type="image/png" sizes="128x128" href="/static/assets/icons/favicon-128x128.png">
@@ -20,6 +21,47 @@
</div> </div>
</body> </body>
<style> <style>
/* Amber Light scheme (Default) */
/* Can be forced with data-theme="light" */
[data-theme="light"],
:root:not([data-theme="dark"]) {
--primary: #ffb300;
--primary-hover: #ffa000;
--primary-focus: rgba(255, 179, 0, 0.125);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Amber Dark scheme (Auto) */
/* Automatically enabled if user has Dark mode enabled */
@media only screen and (prefers-color-scheme: dark) {
:root:not([data-theme]) {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
}
/* Amber Dark scheme (Forced) */
/* Enabled if forced with data-theme="dark" */
[data-theme="dark"] {
--primary: #ffb300;
--primary-hover: #ffc107;
--primary-focus: rgba(255, 179, 0, 0.25);
--primary-inverse: rgba(0, 0, 0, 0.75);
}
/* Amber (Common styles) */
:root {
--form-element-active-border-color: var(--primary);
--form-element-focus-color: var(--primary-focus);
--switch-color: var(--primary-inverse);
--switch-checked-background-color: var(--primary);
}
html, body {
width: 100%;
margin: 0;
padding: 0;
}
.khoj-configure { .khoj-configure {
display: grid; display: grid;
grid-template-columns: 1fr; grid-template-columns: 1fr;
@@ -54,5 +96,92 @@
width: min(60vw, 150px); width: min(60vw, 150px);
justify-self: center; justify-self: center;
} }
.page {
display: grid;
grid-auto-flow: row;
gap: 32px;
}
.section {
display: grid;
justify-self: center;
}
.section-title {
margin: 0;
padding: 0 0 16px 0;
font-size: 32;
font-weight: normal;
}
.section-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
justify-items: start;
}
.card {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 8px;
padding: 24px 16px;
width: 320px;
height: 160px;
background: white;
border: 1px solid rgb(229, 229, 229);
border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
overflow: hidden;
}
.card-title-row {
display: grid;
grid-template-columns: auto 1fr;
padding: 0;
gap: 12px;
}
.card-icon {
width: 40px;
height: 40px;
}
.card-title {
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
align-self: center;
}
.card-title-text {
vertical-align: middle;
}
.card-description {
margin: 0;
color: grey;
font-size: 16px;
}
.card-button-row {
display: grid;
grid-template-columns: auto;
text-align: right;
}
.card-button {
border: none;
font-weight: bold;
color: rgb(64,64,64);
background: transparent;
font-size: 16px;
cursor: pointer;
margin: 0;
padding: 0;
height: 32px;
text-align: right;
}
.primary-button {
background-color: var(--evening-sun);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style> </style>
</html> </html>

27
src/khoj/interface/web/base_data_integration.html
View File

@@ -1,27 +0,0 @@
<!DOCTYPE html>
<html>
<head>
<title>Khoj: Data Settings</title>
<link rel=”stylesheet” href=”static/styles.css”>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@1/css/pico.min.css">
</head>
<body class="data-integration">
<header class=”header”>
<h1>Configure your data integrations for Khoj</h1>
</header>
<a href="/config">Go back</a>
<div class=”content”>
{% block content %}
{% endblock %}
</div>
<footer class=”footer”>
</footer>
</body>
<style>
body.data-integration {
padding: 0 10%
}
</style>
</html>

120
src/khoj/interface/web/config.html
View File

@@ -1,5 +1,6 @@
{% extends "base_config.html" %} {% extends "base_config.html" %}
{% block content %} {% block content %}
<div class="page"> <div class="page">
<div class="section"> <div class="section">
<h2 class="section-title">Plugins</h2> <h2 class="section-title">Plugins</h2>
@@ -13,7 +14,10 @@
<p class="card-description">Set repositories for Khoj to index</p> <p class="card-description">Set repositories for Khoj to index</p>
</div> </div>
<div class="card-action-row"> <div class="card-action-row">
<button class="card-button" onclick="window.location.href='/config/content_type/github';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button> <button class="card-button" onclick="window.location.href='/config/content_type/github';">
Setup
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</button>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@@ -25,19 +29,25 @@
<p class="card-description">Set markdown files for Khoj to index</p> <p class="card-description">Set markdown files for Khoj to index</p>
</div> </div>
<div class="card-action-row"> <div class="card-action-row">
<button class="card-button" onclick="window.location.href='/config/content_type/markdown';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button> <button class="card-button" onclick="window.location.href='/config/content_type/markdown';">
Setup
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</button>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
<div class="card-title-row"> <div class="card-title-row">
<img class="card-icon" src="/static/assets/icons/orgmode.svg" alt="org-mode"> <img class="card-icon" src="/static/assets/icons/org.svg" alt="org">
<h3 class="card-title">Org-Mode</h3> <h3 class="card-title">Org</h3>
</div> </div>
<div class="card-description-row"> <div class="card-description-row">
<p class="card-description">Set org-mode files for Khoj to index</p> <p class="card-description">Set org files for Khoj to index</p>
</div> </div>
<div class="card-action-row"> <div class="card-action-row">
<button class="card-button" onclick="window.location.href='/config/content_type/org';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button> <button class="card-button" onclick="window.location.href='/config/content_type/org';">
Setup
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</button>
</div> </div>
</div> </div>
<div class="card"> <div class="card">
@@ -49,7 +59,10 @@
<p class="card-description">Set PDF files for Khoj to index</p> <p class="card-description">Set PDF files for Khoj to index</p>
</div> </div>
<div class="card-action-row"> <div class="card-action-row">
<button class="card-button" onclick="window.location.href='/config/content_type/pdf';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button> <button class="card-button" onclick="window.location.href='/config/content_type/pdf';">
Setup
<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg>
</button>
</div> </div>
</div> </div>
</div> </div>
@@ -66,104 +79,15 @@
<p class="card-description">Setup Khoj Chat</p> <p class="card-description">Setup Khoj Chat</p>
</div> </div>
<div class="card-action-row"> <div class="card-action-row">
<button class="card-button" onclick="window.location.href='/config/processor/conversation/';">Configure <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button> <button class="card-button" onclick="window.location.href='/config/processor/conversation';">Setup <svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"></path></svg></button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="section"> <div class="section">
<button id="save" type="submit">Save</button> <button id="save" type="submit">⚙️ Configure</button>
</div> </div>
</div> </div>
<style>
:root {
--night-black: #282c34;
--evening-sun: #fbb912;
}
.page {
display: grid;
grid-auto-flow: row;
gap: 32px;
}
.section {
justify-self: center;
}
.section-title {
margin: 0;
padding: 0 0 16px 0;
font-size: 32;
font-weight: normal;
}
.section-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
justify-items: start;
}
.card {
display: grid;
grid-template-rows: repeat(3, 1fr);
gap: 8px;
padding: 24px 16px;
width: 320px;
height: 160px;
background: white;
border: 1px solid rgb(229, 229, 229);
border-radius: 4px;
box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.1),0px 1px 2px -1px rgba(0,0,0,0.1);
overflow: hidden;
}
.card-title-row {
display: grid;
grid-template-columns: auto 1fr;
padding: 0;
gap: 12px;
}
.card-icon {
width: 40px;
height: 40px;
}
.card-title {
font-size: 20px;
font-weight: normal;
margin: 0;
padding: 0;
align-self: center;
}
.card-description {
margin: 0;
color: grey;
font-size: 16px;
}
.card-button-row {
display: grid;
grid-template-columns: auto;
text-align: right;
}
.card-button {
border: none;
font-weight: bold;
color: rgb(64,64,64);
background: transparent;
font-size: 16px;
cursor: pointer;
margin: 0;
padding: 0;
height: 32px;
text-align: right;
}
button#save {
background-color: var(--evening-sun);
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
</style>
<script> <script>
var regenerate = document.getElementById("save"); var regenerate = document.getElementById("save");
regenerate.addEventListener("click", function(event) { regenerate.addEventListener("click", function(event) {

19
src/khoj/interface/web/content_type_github_input.html
View File

@@ -1,7 +1,12 @@
{% extends "base_data_integration.html" %} {% extends "base_config.html" %}
{% block content %} {% block content %}
<h2>Github</h2> <div class="page">
<form id="config-form"> <div class="section">
<h2 class="section-title">
<img class="card-icon" src="/static/assets/icons/github.svg" alt="Github">
<span class="card-title-text">Github</span>
</h2>
<form>
<div id="success" style="display: none;"></div> <div id="success" style="display: none;"></div>
<table> <table>
<tr> <tr>
@@ -57,8 +62,12 @@
</td> </td>
</tr> </tr>
</table> </table>
<button id="submit" type="submit">Submit</button> <div class="section">
</form> <button id="submit" type="submit">Save</button>
</div>
</form>
</div>
</div>
<script> <script>
submit.addEventListener("click", function(event) { submit.addEventListener("click", function(event) {
event.preventDefault(); event.preventDefault();

17
src/khoj/interface/web/content_type_input.html
View File

@@ -1,7 +1,12 @@
{% extends "base_data_integration.html" %} {% extends "base_config.html" %}
{% block content %} {% block content %}
<h2>{{ content_type }}</h2> <div class="page">
<form id="config-form"> <div class="section">
<h2 class="section-title">
<img class="card-icon" src="/static/assets/icons/{{ content_type }}.svg" alt="{{ content_type|capitalize }}">
<span class="card-title-text">{{ content_type|capitalize }}</span>
</h2>
<form id="config-form">
<div id="success" style="display: none;" ></div> <div id="success" style="display: none;" ></div>
<table> <table>
<tr> <tr>
@@ -68,8 +73,10 @@
</td> </td>
</tr> </tr>
</table> </table>
<button id="submit" type="submit">Submit</button> <button id="submit" type="submit">Save</button>
</form> </form>
</div>
</div>
<script> <script>
function addButtonEventListener(fieldName) { function addButtonEventListener(fieldName) {
var button = document.getElementById(fieldName + "-button"); var button = document.getElementById(fieldName + "-button");

17
src/khoj/interface/web/processor_conversation_input.html
View File

@@ -1,7 +1,12 @@
{% extends "base_processor_integration.html" %} {% extends "base_config.html" %}
{% block content %} {% block content %}
<h2>Conversation</h2> <div class="page">
<form id="config-form"> <div class="section">
<h2 class="section-title">
<img class="card-icon" src="/static/assets/icons/chat.svg" alt="Chat">
<span class="card-title-text">Chat</span>
</h2>
<form id="config-form">
<div id="success" style="display: none;" ></div> <div id="success" style="display: none;" ></div>
<table> <table>
<tr> <tr>
@@ -42,8 +47,10 @@
</td> </td>
</tr> </tr>
</table> </table>
<button id="submit" type="submit">Submit</button> <button id="submit" type="submit">Save</button>
</form> </form>
</div>
</div>
<script> <script>
submit.addEventListener("click", function(event) { submit.addEventListener("click", function(event) {
event.preventDefault(); event.preventDefault();