GH-54 - Search & Replace

* Creates new search tab in browse view * Ability to search in current folder * Ability to replace found search term Resolves: GH-54
adobe · Mar 23, 2024 · 1d56b69 · 1d56b69
1 parent 8896dcd
commit 1d56b69
Show file tree

Hide file tree

Showing 5 changed files with 481 additions and 38 deletions.
diff --git a/blocks/browse/da-browse/da-browse.css b/blocks/browse/da-browse/da-browse.css
@@ -19,6 +19,62 @@ input, button {
   font-family: var(--body-font-family);
 }
 
+/* Tab List */
+.da-browse-tab-header {
+  display: flex;
+  gap: 18px;
+  margin-bottom: 24px;
+}
+
+.da-browse-tab-header button {
+  position: relative;
+  display: block;
+  background: none;
+  border: none;
+  padding: 0 0 6px;
+  margin: 0;
+  box-sizing: border-box;
+  color: #8f8f8f;
+}
+
+.da-browse-tab-header button::after {
+  display: block;
+  content: '';
+  position: absolute;
+  bottom: 0;
+  height: 3px;
+  width: 100%;
+  opacity: 0;
+  transition: opacity 0.2s ease-in-out;
+  background: #131313;
+  border-radius: 3px;
+}
+
+.da-browse-tab-header h2 {
+  margin: 0;
+  text-transform: uppercase;
+  font-size: 22px;
+}
+
+.da-browse-tab-header button[aria-selected="true"] {
+  color: #131313;
+}
+
+.da-browse-tab-header button[aria-selected="true"]::after {
+  opacity: 1;
+}
+
+
+.da-browse-tab-panel {
+  display: none;
+}
+
+.da-browse-tab-panel-active {
+  display: block;
+}
+
+/* Tab List End */
+
 /* Item List */
 
 .da-item-list {
@@ -193,6 +249,10 @@ input[type="checkbox"] {
 }
 
 /* Breadcrumbs */
+.da-breadcrumb {
+  margin-bottom: 12px;
+}
+
 .da-breadcrumb-list {
   margin: 0 0 12px;
   padding: 0;
@@ -264,9 +324,18 @@ input[type="checkbox"] {
   height: 32px;
 }
 
+@media (width >= 600px) {
+  .da-breadcrumb-list {
+    margin: 0;
+  }
+
+  .da-breadcrumb:has(da-search) .da-breadcrumb-list {
+    margin-bottom: 12px;
+  }
+}
+
 /* Actions */
 .da-actions-create {
-  margin: 0 0 12px;
   padding: 0;
   display: flex;
   list-style: none;
@@ -324,19 +393,21 @@ input[type="checkbox"] {
 
 .da-actions-new-button,
 .da-actions-button {
-    position: relative;
-    display: block;
-    font-size: 14px;
-    font-weight: 700;
-    padding: 0px 10px;
-    line-height: 24px;
-    background: #EFEFEF;
-    border: none;
-    font-size: 14px;
-    background-color: #cee4ff;
-    color: #066ce7;
-    border-radius: 6px;
-    cursor: pointer;
+  background-color: var(--spectrum-blue-800);
+  border-radius: 8px;
+  border: 2px solid var(--spectrum-blue-800);
+  border-color: var(--spectrum-blue-800);
+  color: #FFF;
+  display: inline-block;
+  font-size: 15px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 18px;
+  padding: 5px 14px;
+  text-decoration: none;
+  outline-offset: 0;
+  outline-color: var(--spectrum-blue-800);
+  transition: outline-offset .2s;
 }
 
 .da-actions-new-button {
@@ -438,7 +509,7 @@ li.da-actions-menu-item button:hover {
 /* Empty list */
 .empty-list {
   border: 1px solid rgb(234, 234, 234);
-  background-color: rgb(255, 255, 255);
+  background-color: rgb(248, 248, 248);
   border-radius: 6px;
   display: flex;
   justify-content: center;
@@ -449,7 +520,12 @@ li.da-actions-menu-item button:hover {
 
 @media (min-width: 900px) {
   .da-breadcrumb {
+    margin-bottom: 12px;
     display: flex;
     gap: 24px;
   }
+
+  .da-breadcrumb:has(da-search) {
+    display: block;
+  }
 }
diff --git a/blocks/browse/da-browse/da-browse.js b/blocks/browse/da-browse/da-browse.js
@@ -1,19 +1,24 @@
-import { LitElement, html } from '../../../deps/lit/lit-core.min.js';
-import { getDaAdmin } from '../../shared/constants.js';
+import { LitElement, html, nothing } from '../../../deps/lit/lit-core.min.js';
+import { DA_ORIGIN } from '../../shared/constants.js';
 import inlinesvg from '../../shared/inlinesvg.js';
-
-import getSheet from '../../shared/sheet.js';
 import { saveToDa, daFetch } from '../../shared/utils.js';
+import { getNx } from '../../../scripts/utils.js';
 
-const sheet = await getSheet('/blocks/browse/da-browse/da-browse.css');
+// Components
+import './da-search.js';
 
-const DA_ORIGIN = getDaAdmin();
+// Styles
+const { default: getStyle } = await import(`${getNx()}/utils/styles.js`);
+const style = await getStyle(import.meta.url);
 
+// Icons
 const ICONS = ['/blocks/browse/da-browse/img/Smock_Settings_18_N.svg'];
 
 export default class DaBrowse extends LitElement {
   static properties = {
     details: { attribute: false },
+    searchItems: { attribute: false },
+    _tabItems: { state: true },
     _listItems: { state: true },
     _selectedItems: { state: true },
     _breadcrumbs: {},
@@ -27,11 +32,22 @@ export default class DaBrowse extends LitElement {
 
   constructor() {
     super();
+    this.searchItems = [];
     this._selectedItems = [];
     this._createShow = '';
     this._createName = '';
     this._createFile = '';
     this._fileLabel = 'Select file';
+    this._tabItems = [
+      { id: 'browse', label: 'Browse', selected: true },
+      { id: 'search', label: 'Search', selected: false },
+    ];
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.shadowRoot.adoptedStyleSheets = [style];
+    inlinesvg({ parent: this.shadowRoot, paths: ICONS });
   }
 
   async getList() {
@@ -132,12 +148,6 @@ export default class DaBrowse extends LitElement {
     this._fileLabel = 'Select file';
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this.shadowRoot.adoptedStyleSheets = [sheet];
-    inlinesvg({ parent: this.shadowRoot, paths: ICONS });
-  }
-
   async update(props) {
     if (props.has('details')) {
       this._listItems = await this.getList();
@@ -202,6 +212,20 @@ export default class DaBrowse extends LitElement {
     this._canPaste = false;
   }
 
+  handleTab(idx) {
+    const current = this._tabItems.find((item) => item.selected);
+    if (this._tabItems[idx].id === current.id) return;
+    this._tabItems.forEach((item) => {
+      item.selected = false;
+    });
+    this._tabItems[idx].selected = true;
+    this._tabItems = [...this._tabItems];
+  }
+
+  handeSearchList(e) {
+    this.searchItems = e.detail.items;
+  }
+
   renderConfig(length, crumb, idx) {
     if (this.details.depth <= 2 && idx + 1 === length) {
       return html`
@@ -281,17 +305,19 @@ export default class DaBrowse extends LitElement {
       </div>`;
   }
 
-  listView() {
+  listView(items, allowSelect) {
     return html`
       <ul class="da-item-list">
-        ${this._listItems.map((item, idx) => html`
+        ${items.map((item, idx) => html`
           <li class="da-item-list-item">
             <div class="da-item-list-item-inner">
-              <div class="checkbox-wrapper">
-                <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); }}">
-                <label class="checkbox-label" for="item-selected-${idx}"></label>
-              </div>
-              <input type="checkbox" name="select" style="display: none;">
+              ${allowSelect ? html`
+                <div class="checkbox-wrapper">
+                  <input type="checkbox" name="item-selected" id="item-selected-${idx}" .checked="${item.isChecked}" @click="${() => { this.toggleChecked(item); }}">
+                  <label class="checkbox-label" for="item-selected-${idx}"></label>
+                </div>
+                <input type="checkbox" name="select" style="display: none;">
+              ` : nothing}
               <a href="${item.ext ? this.getEditPath(item) : `#${item.path}`}" class="da-item-list-item-title">
                 <span class="da-item-list-item-type ${item.ext ? 'da-item-list-item-type-file' : 'da-item-list-item-type-folder'} ${item.ext ? `da-item-list-item-icon-${item.ext}` : ''}">
                 </span>${item.name}
@@ -306,9 +332,12 @@ export default class DaBrowse extends LitElement {
     return html`<div class="empty-list"><h3>Empty</h3></div>`;
   }
 
-  render() {
+  renderSearch() {
+    return html`<da-search @updated=${this.handeSearchList} path=${this.details.fullpath} />`;
+  }
+
+  renderBreadCrumbs() {
     return html`
-      <h1>Browse</h1>
       <div class="da-breadcrumb">
         <ul class="da-breadcrumb-list">
           ${this._breadcrumbs.map((crumb, idx) => html`
@@ -320,9 +349,40 @@ export default class DaBrowse extends LitElement {
             </li>
           `)}
         </ul>
-        ${this.renderNew()}
+        ${this._tabItems[0].selected
+    ? this.renderNew()
+    : this.renderSearch()}
+      </div>
+    `;
+  }
+
+  renderSearchList() {
+    return html`${this.searchItems?.length > 0 ? this.listView(this.searchItems, false) : this.emptyView()}`;
+  }
+
+  renderBrowse() {
+    return html`${this._listItems?.length > 0 ? this.listView(this._listItems, true) : this.emptyView()}`;
+  }
+
+  render() {
+    return html`
+      <div class="da-browse-tab-list">
+        <div class="da-browse-tab-header">
+          ${this._tabItems.map((tab, idx) => html`
+            <button id="da-browse-tab-button-${tab.id}" @click=${() => this.handleTab(idx)} role="tab" aria-selected="${tab.selected}" aria-controls="tabpanel-${tab.id}">
+              <h2>${tab.label}</h2>
+            </button>
+          `)}
+        </div>
+        <div class="da-browse-tab-content">
+          ${this.renderBreadCrumbs()}
+          ${this._tabItems.map((tab) => html`
+            <div class="da-browse-tab-panel${tab.selected ? ' da-browse-tab-panel-active' : ''}" role="tabpanel" id="tabpanel-${tab.id}" aria-labelledby="da-browse-tab-button-${tab.id}">
+              ${tab.id === 'browse' ? this.renderBrowse() : this.renderSearchList()}
+            </div>
+          `)}
+        </div>
       </div>
-      ${this._listItems.length > 0 ? this.listView() : this.emptyView()}
       ${this._selectedItems.length > 0 ? html`${this.actionBar()}` : ''}
     `;
   }