Merge pull request #341 from pratikb64/navbar-dropdown-and-search

Navbar dropdown and search
frappe · Feb 17, 2025 · a4e3080 · a4e3080
2 parents d0561fb + f4b6d52
commit a4e3080
Show file tree

Hide file tree

Showing 7 changed files with 134 additions and 117 deletions.
diff --git a/wiki/public/js/render_wiki.js b/wiki/public/js/render_wiki.js
@@ -634,13 +634,13 @@ window.RenderWiki = class RenderWiki extends Wiki {
             let results = res.message.docs || [];
             let dropdown_html;
             if (results.length === 0) {
-              dropdown_html = `<div style="margin: 1.5rem 9rem;">No results found</div>`;
+              dropdown_html = `<div style="margin: 0.8rem;text-align: center;">No results found</div>`;
             } else {
               dropdown_html = results
                 .map((r) => {
                   return `<a class="dropdown-item" href="/${r.route}">
-              <h6>${r.title}</h6>
-              <div>${
+              <span class="result-title">${r.title}</span>
+              <div class="result-text">${
                 res.message.search_engine === "frappe_web_search"
                   ? r.content
                   : trimContent(r.content)

diff --git a/wiki/public/scss/dropdowns.scss b/wiki/public/scss/dropdowns.scss
@@ -1,4 +1,4 @@
-#navbar-dropdown{
+#navbar-dropdown {
   flex-grow: 1;
   display: flex;
   justify-content: end;
@@ -11,9 +11,8 @@
   position: absolute;
   left: 10px;
   top: 100%;
-  padding: 6px;
   background-color: var(--navbar-dropdown-bg-color);
-  width: 90%;
+  width: 96%;
   border-radius: 8px;
   box-shadow: 0 10px 24px -3px #0000001a;
 
@@ -23,26 +22,32 @@
   }
 
   a:hover {
-      color:inherit !important;
-      text-decoration:none !important;
-      cursor:pointer !important;
+    color: inherit !important;
+    text-decoration: none !important;
+    cursor: pointer !important;
   }
 
   .app-switcher {
     display: flex;
-    align-items: center;
-    gap: 8px;
+    flex-direction: column;
+    gap: 2px;
     font-size: 14px;
-    padding: 6px;
+    padding: 10px;
+    height: 350px;
+    overflow: auto;
+  }
+
+  .space-link {
+    padding: 4px;
+    padding-left: 8px;
   }
 
-  .app-switcher:hover{
-    background-color: var(--navbar-dropdown-hover-color);
+  .space-link:hover {
+    background-color: var(--sidebar-hover-color);
     border-radius: 4px;
   }
 }
 
-
 .dropdown-toggle.wiki-options::after {
   display: none;
 }
@@ -71,4 +76,4 @@
 
 .dark .wiki-options:hover {
   background-color: var(--gray-700);
-}
+}
diff --git a/wiki/public/scss/general.scss b/wiki/public/scss/general.scss
@@ -20,81 +20,6 @@
   }
 }
 
-#searchModal {
-  > div:first-child {
-    margin-top: 5rem;
-  }
-
-  b.match {
-    background-color: transparent;
-    color: var(--primary);
-    font-weight: 800;
-    padding: 0; // rm website css
-  }
-
-  input {
-    height: 3rem;
-    background: var(--searchbar-color);
-    border-radius: 4px;
-    padding-left: 2.5rem;
-    font-size: inherit;
-  }
-
-  .search-icon {
-    position: absolute;
-    padding: 0.7rem 0 0 0.5rem;
-  }
-
-  svg {
-    color: #74808b;
-  }
-
-  .modal-body {
-    .text-muted {
-      margin: auto;
-      width: max-content;
-    }
-
-    .dropdown-border {
-      height: 1px;
-      margin: 0 0.5rem;
-      background-color: var(--border-color);
-
-      &:last-child {
-        background-color: unset;
-      }
-    }
-  }
-
-  .modal-header {
-    border-bottom-right-radius: calc(var(--border-radius-lg) - 1px);
-    border-bottom-left-radius: calc(var(--border-radius-lg) - 1px);
-  }
-
-  .dropdown-item {
-    font-size: 15px;
-    outline: unset;
-    overflow: auto;
-    margin: 0.5rem 0;
-    white-space: inherit;
-    color: var(--text-color);
-
-    &:active {
-      color: unset;
-      background-color: unset;
-    }
-
-    &:focus,
-    &:hover {
-      background-color: var(--active-item-color);
-    }
-
-    h6 {
-      font-size: 15px;
-    }
-  }
-}
-
 .dropdown-menu {
   background-color: var(--editor-background-color);
   border-color: var(--editor-background-color);

diff --git a/wiki/public/scss/modal.scss b/wiki/public/scss/modal.scss
@@ -104,3 +104,85 @@
     pointer-events: none;
   }
 }
+
+.search-dialog {
+  .modal-content {
+    background-color: var(--search-modal-bg-color) !important;
+  }
+}
+
+.search-modal {
+  padding: 10px;
+  padding-right: 0px;
+  border-radius: 1rem;
+  margin-top: 100px;
+
+  .modal-header {
+    padding: 0px;
+    padding-left: 4px;
+  }
+
+  .search-icon {
+    width: 16px;
+  }
+
+  input {
+    color: var(--search-modal-color);
+    margin-left: 4px;
+    background: transparent;
+    border: transparent;
+  }
+
+  input:focus {
+    background: transparent;
+    border: transparent;
+  }
+
+  .modal-body {
+    padding: 0px;
+  }
+
+  .dropdown-border {
+    height: 1px;
+    background-color: var(--border-color);
+    margin: 4px 0px;
+  }
+
+  .dropdown-border {
+    &:last-child {
+      display: none;
+    }
+  }
+
+  .search-dropdown-menu {
+    max-height: 500px;
+    overflow-x: hidden !important;
+    overflow-y: auto !important;
+
+    &:not(:empty) {
+      margin-top: 18px;
+    }
+
+    .result-title {
+      font-size: 14px;
+      font-weight: 550;
+    }
+
+    .result-text {
+      font-size: 12px;
+    }
+
+    .match {
+      font-weight: 750;
+    }
+  }
+
+  .dropdown-item {
+    padding: 8px !important;
+    color: var(--search-modal-color);
+
+    &:hover {
+      background-color: var(--search-modal-hover-color);
+    }
+  }
+}
diff --git a/wiki/public/scss/variables.scss b/wiki/public/scss/variables.scss
@@ -43,7 +43,7 @@ body {
   --editor-button-text-color: var(--gray-700);
   --editor-hover-button-color: var(--gray-100);
 
-  --navbar-dropdown-bg-color: #d7d7d7;
+  --navbar-dropdown-bg-color: white;
   --navbar-dropdown-hover-color: #c0c0c0;
   --toc-hover-text-color: var(--gray-900);
 
@@ -66,6 +66,9 @@ body {
 
   --scroll-thumb-color: var(--scrollbar-thumb-color);
   --scroll-track-color: var(--scrollbar-track-color);
+  --search-modal-bg-color: white;
+  --search-modal-color: #494949;
+  --search-modal-hover-color: var(--sidebar-hover-color);
 
   // ------------------------------------------
 
@@ -144,6 +147,9 @@ body.dark {
   --scroll-thumb-color: #949494;
   --scroll-track-color: #3f3f3f;
   --sidebar-font-color: #d1d5dc;
+  --search-modal-bg-color: rgb(35, 35, 35);
+  --search-modal-color: rgb(212, 212, 212);
+  --search-modal-hover-color: #343434;
 
   .draft-wiki-page {
     background: var(--gray-700);

diff --git a/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html b/wiki/wiki/doctype/wiki_page/templates/wiki_navbar.html
@@ -12,27 +12,21 @@
       <span>{{ (frappe.get_hooks("brand_html") or [_("Home")])[0] }}</span>
       {%- endif -%}
     </a>
-    <!-- <div id="navbar-dropdown">
+    <div id="navbar-dropdown">
       <svg viewBox="0 0 24 24" width="16" height="16" stroke="currentColor" stroke-width="2" fill="none"
         stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
         <polyline points="6 9 12 15 18 9"></polyline>
       </svg>
-    </div> -->
-    <!-- <div id="navbar-dropdown-content" class="hide">
-      <a href="/apps">
-        <div class="app-switcher">
-          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-            class="lucide lucide-layout-grid">
-            <rect width="7" height="7" x="3" y="3" rx="1" />
-            <rect width="7" height="7" x="14" y="3" rx="1" />
-            <rect width="7" height="7" x="14" y="14" rx="1" />
-            <rect width="7" height="7" x="3" y="14" rx="1" />
-          </svg>
-          Apps
-        </div>
-      </a>
-    </div> -->
+    </div>
+    <div id="navbar-dropdown-content" class="hide">
+      <div class="app-switcher">
+        {% for space in spaces %}
+        <a href="/{{ space.url }}" class="space-link">
+          {{ space.name }}
+        </a>
+        {% endfor %}
+      </div>
+    </div>
   </div>
 
   {% if navbar_search %}
@@ -63,18 +57,17 @@
 <!-- separated the modal to avoid being unresponsive when inside <nav> -->
 <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModalLabel"
   aria-hidden="true">
-  <div class="modal-dialog" role="document">
-    <div class="modal-content">
+  <div class="modal-dialog search-dialog" role="document">
+    <div class="modal-content search-modal">
       <div class="modal-header">
-        <input id="searchInput" type="search" class="form-control" placeholder="Search the docs" />
-        <div class="search-icon">
-          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none"
-            stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"
-            class="feather feather-search">
+        <div>
+          <svg class="search-icon" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
+            fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round">
             <circle cx="11" cy="11" r="8"></circle>
-            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
+            <path d="m21 21-4.3-4.3"></path>
           </svg>
         </div>
+        <input id="searchInput" type="search" class="form-control" placeholder="Search" />
       </div>
       <div class="modal-body">
         <div class="overflow-hidden search-dropdown-menu w-100" aria-labelledby="dropdownMenuSearch"></div>

diff --git a/wiki/wiki/doctype/wiki_page/wiki_page.py b/wiki/wiki/doctype/wiki_page/wiki_page.py
@@ -22,6 +22,7 @@
 from frappe.website.website_generator import WebsiteGenerator
 
 from wiki.wiki.doctype.wiki_page.search import remove_index, update_index
+from wiki.wiki.doctype.wiki_settings.wiki_settings import get_all_spaces
 
 
 class WikiPage(WebsiteGenerator):
@@ -205,6 +206,11 @@ def get_context(self, context):
 		self.verify_permission()
 		self.set_breadcrumbs(context)
 
+		allSpaces = get_all_spaces()
+
+		filtered_spaces = [space for space in allSpaces if "/" not in space]
+		context.spaces = [{"url": space, "name": space.capitalize()} for space in filtered_spaces]
+
 		wiki_settings = frappe.get_single("Wiki Settings")
 		wiki_space_name = frappe.get_value("Wiki Group Item", {"wiki_page": self.name}, "parent")
 		wiki_space = (