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

Improve subscribed user profile pictures and nav pane selection

Browse source 
- Add yellow halo around subscribed user profile
- Fix highlighting current page in header nav pane
This commit is contained in:
Debanjum Singh Solanky 2023-11-09 00:57:05 -08:00
parent 605058c72a
commit 391db80499
6 changed files with 39 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/khoj/interface/web/assets/khoj.css
View file

@ -147,7 +147,7 @@ img.khoj-logo {
}
.circle {
border-radius: 50%;
border: 3px solid var(--primary-hover);
border: 3px dotted var(--main-text-color);
width: 40px;
height: 40px;
padding: 3px;
@ -164,6 +164,11 @@ img.khoj-logo {
align-items: center;
font-size: 20px;
box-sizing: unset;
width: 40px;
height: 40px;
}
.subscribed {
border: 3px solid var(--primary-hover);
}
@media screen and (max-width: 700px) {

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

@ -24,6 +24,12 @@
{% endblock %}
</div>
</body>
<script>
document.getElementById("settings-nav").classList.add("khoj-nav-selected");
{% if is_active %}
document.getElementById("profile-picture").classList.add("subscribed");
{% endif %}
</script>
<style>
html, body {
width: 100%;

7
src/khoj/interface/web/chat.html
View file

@ -374,7 +374,12 @@
<textarea id="chat-input" class="option" oninput="onChatInput()" onkeydown=incrementalChat(event) autofocus="autofocus" placeholder="Type / to see a list of commands, or just type your questions and hit enter."></textarea>
</div>
</body>
<script>
document.getElementById("chat-nav").classList.add("khoj-nav-selected");
{% if is_active %}
document.getElementById("profile-picture").classList.add("subscribed");
{% endif %}
</script>
<style>
html, body {
height: 100%;

6
src/khoj/interface/web/search.html
View file

@ -285,6 +285,12 @@
<!-- Section to Render Results -->
<div id="results"></div>
</body>
<script>
document.getElementById("search-nav").classList.add("khoj-nav-selected");
{% if is_active %}
document.getElementById("profile-picture").classList.add("subscribed");
{% endif %}
</script>
<style>
@media only screen and (max-width: 700px) {

12
src/khoj/interface/web/utils.html
View file

@ -4,18 +4,22 @@
<img class="khoj-logo" src="/static/assets/icons/khoj-logo-sideways-500.png" alt="Khoj"></img>
</a>
<nav class="khoj-nav">
<a class="khoj-nav" href="/chat">💬 Chat</a>
<a class="khoj-nav" href="/search">🔎 Search</a>
<a id="chat-nav" class="khoj-nav" href="/chat">💬 Chat</a>
<a id="search-nav" class="khoj-nav" href="/search">🔎 Search</a>
<!-- Dropdown Menu -->
<div id="khoj-nav-menu-container" class="khoj-nav dropdown">
{% if user_photo and user_photo != "None" %}
<img class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
{% if is_active %}
<img id="profile-picture" class="circle subscribed" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
{% else %}
<img id="profile-picture" class="circle" src="{{ user_photo }}" alt="{{ username[0].upper() }}" onclick="toggleMenu()" referrerpolicy="no-referrer">
{% endif %}
{% else %}
<div class="circle user-initial" alt="{{ username[0].upper() }}" onclick="toggleMenu()">{{ username[0].upper() }}</div>
{% endif %}
<div id="khoj-nav-menu" class="khoj-nav-dropdown-content">
<div class="khoj-nav-username"> {{ username }} </div>
<a class="khoj-nav khoj-nav-selected" href="/config">⚙️ Settings</a>
<a id="settings-nav" class="khoj-nav" href="/config">⚙️ Settings</a>
<a class="khoj-nav" href="/auth/logout">🔑 Logout</a>
</div>
</div>

7
src/khoj/routers/web_client.py
View file

@ -69,6 +69,8 @@ def index_post(request: Request):
def search_page(request: Request):
user = request.user.object
user_picture = request.session.get("user", {}).get("picture")
user_subscription = adapters.get_user_subscription(user.email)
user_subscription_state = get_user_subscription_state(user_subscription)
return templates.TemplateResponse(
"search.html",
@ -76,6 +78,7 @@ def search_page(request: Request):
"request": request,
"username": user.username,
"user_photo": user_picture,
"is_active": user_subscription_state == "subscribed" or user_subscription_state == "unsubscribed",
},
)
@ -85,6 +88,8 @@ def search_page(request: Request):
def chat_page(request: Request):
user = request.user.object
user_picture = request.session.get("user", {}).get("picture")
user_subscription = adapters.get_user_subscription(user.email)
user_subscription_state = get_user_subscription_state(user_subscription)
return templates.TemplateResponse(
"chat.html",
@ -92,6 +97,7 @@ def chat_page(request: Request):
"request": request,
"username": user.username,
"user_photo": user_picture,
"is_active": user_subscription_state == "subscribed" or user_subscription_state == "unsubscribed",
},
)
@ -154,6 +160,7 @@ def config_page(request: Request):
"subscription_state": user_subscription_state,
"subscription_renewal_date": subscription_renewal_date,
"khoj_cloud_subscription_url": os.getenv("KHOJ_CLOUD_SUBSCRIPTION_URL"),
"is_active": user_subscription_state == "subscribed" or user_subscription_state == "unsubscribed",
},
)