@zywave/notes-widget - npm Package Compare versions

Comparing version 1.1.0-rc.8 to 1.1.0-rc.10

dist/components/empty-state.d.ts

 import { LitElement } from 'lit';
 export declare class EmptyState extends LitElement {
+    static styles: import("lit").CSSResult;
     render(): unknown;
@@ -4,0 +5,0 @@ }

dist/components/empty-state.js

@@ -7,3 +7,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
 };
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -140,2 +140,9 @@ let EmptyState = class EmptyState extends LitElement {
 };
+EmptyState.styles = css `
+  svg {
+    width: 60%;
+    display: block;
+    margin: auto;
+  }
+`;
 EmptyState = __decorate([
@@ -142,0 +149,0 @@ customElement('empty-state')

dist/components/note-dialog.js

@@ -43,3 +43,5 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         ]);
-        this._categories = categories.filter(x => x.isActive);
+        this._categories = categories.filter(x => x.isActive).sort((a, b) => {
+            return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+        });
         (_a = this._dialog) === null || _a === void 0 ? void 0 : _a.addEventListener('close', this.clearFields);
@@ -84,2 +86,3 @@ }
             maxLength=${10000}
+            class="note"
             .value=${this._noteText}
@@ -184,2 +187,5 @@ @input=${this.handleChangeNoteText}
 
+    .note {
+      margin-bottom: -60px;
+    }
   `;
@@ -186,0 +192,0 @@ __decorate([

dist/components/note-expander.d.ts

@@ -12,2 +12,3 @@ import { LitElement } from 'lit';
     private renderNoteLabels;
+    private redirectToDetails;
 }
@@ -14,0 +15,0 @@ declare global {

dist/components/note-expander.js

@@ -18,31 +18,16 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         return html `
-      <zui-expander type="group-standard">
-        <div slot="title" class="title-slot">
-          <div class="note-title">
-            <h3 class="note-title-category">
-              <p>${(_a = this.note) === null || _a === void 0 ? void 0 : _a.categoryName}</p>
-            </h3>
-            ${this.renderNoteLabels()}
+      <div slot="title" class="title-slot">
+        <div class="note-title">
+          <div class="note-title-category">
+            <p>${(_a = this.note) === null || _a === void 0 ? void 0 : _a.categoryName}</p>
           </div>
+          ${this.renderNoteLabels()}
+        </div>
 
-          <p class="note-short-description">
-            ${this.expanded ? nothing : html `
-              <truncated-text text=${this.note.text}></truncated-text>
-            `}
-          </p>
-        </div>  
-      
-        <div slot="content" class="note-content">
-          <p class="note-description">
-            <truncated-text text=${this.note.text} lines="7"></truncated-text>
-          </p>
-          <zui-button
-                data-autom="note-expander_button_view-more"
-                type="link" 
-              >
-              <a href=${`${this.notesUri}/account/${this.accountId}/note/${this.note.noteId}`}></a>
-                View more
-              </zui-button>
-        </div>    
-      </zui-expander>
+        <p class="note-short-description" @click=${this.redirectToDetails}>
+          <truncated-text 
+            .text=${this.note.text}>
+          </truncated-text>
+        </p>
+      </div>
     `;
@@ -60,2 +45,5 @@ }
     }
+    redirectToDetails() {
+        window.location.href = this.notesUri + "/account/" + this.accountId + "/note/" + this.note.noteId;
+    }
 };
@@ -66,9 +54,5 @@ NoteExpander.styles = css `
       width: 100%;
+      border-top: 1px solid var(--zui-gray-200);
     }
 
-    zui-expander {
-      border-bottom: var(--zui-expander-border-bottom, 1px var(--zui-gray-100) solid);
-      width: 100%;
-    }
-
     .note-content {
@@ -85,7 +69,13 @@ padding-top: 0;
     .note-short-description {
-      margin: 2px 0 0;
+      margin: 15px 0 15px;
     }
+
+    .note-short-description:hover {
+      color: var(--zui-blue-500);
+      cursor: pointer;
+    }
     
     .note-title {
       display: flex;
+      margin-bottom: -3px;
     }
@@ -95,4 +85,4 @@
       margin: 0;
-      font-weight: 700;
-      font-size: 14px;
+      font-size: 12px;
+      color: var(--zui-gray-600);
     }
@@ -103,8 +93,8 @@
       color: inherit;
-      cursor: initial;
+      cursor: default;
     }
 
     .note-title-labels {
-      margin-left: 1rem;
-      margin-top: 0.85rem;
+      margin-left: 0.3rem;
+      margin-top: 0.65rem;
       gap: 0.5rem;
@@ -117,2 +107,4 @@ display: flex;
       max-width: 90%;
+      margin-left: 20px;
+      margin-right: 20px;
     }
@@ -119,0 +111,0 @@ `;

dist/components/truncated-text.js

@@ -15,3 +15,3 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
         this.text = "";
-        this.lines = 1;
+        this.lines = 2;
         this.truncatedText = "";
@@ -18,0 +18,0 @@ this.isTruncated = false;

dist/notes-widget.js

@@ -78,3 +78,10 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
                 <zui-table-cell>
-                  <empty-state></empty-state>
+                  <empty-state .addNote="${this.openAddNoteDialog}"></empty-state>
+                  <zui-button
+                      class="empty-add-note"
+                      type="secondary" 
+                      @click=${this.openAddNoteDialog}
+                    >
+                      Add a note
+                  </zui-button>
                 </zui-table-cell>
@@ -101,15 +108,14 @@ </zui-table-row>
         <div class="topbar-actions">
-          <zui-button-dropdown type="secondary">
-              Manage notes
-              <button slot="option"             
-                data-autom="notes-widget_button_add-note"
-                @click=${this.openAddNoteDialog}>
-                  <zui-icon icon="zui-new-file" class="small"></zui-icon>
-                  <span>Add a note</span>
-              </button>
-              <a href=${`${this.notesUri}/account/${this.accountId}`} slot="option">
-                <zui-icon icon="zui-multiple-files" class="small"></zui-icon>
-                View all notes
-              </a>
-            </zui-button-dropdown>
+          <zui-button
+              type="secondary" 
+              @click=${this.openAddNoteDialog}
+            >
+              Add a note
+          </zui-button>
+          <zui-button
+            type="secondary"
+          >
+              <a href=${`${this.notesUri}/account/${this.accountId}`}></a>
+              View all notes
+          </zui-button>
         </div>
@@ -159,2 +165,8 @@ </zui-table-topbar>
 
+    .empty-add-note {
+      width: 35%;
+      display: block;
+      margin: auto;
+    }
+
     zui-table-row {
@@ -161,0 +173,0 @@ display: flex;

package.json

 {
   "name": "@zywave/notes-widget",
-  "version": "1.1.0-rc.8",
+  "version": "1.1.0-rc.10",
   "description": "A custom web component for notes functionality through a widget",
@@ -5,0 +5,0 @@ "main": "dist/notes-widget.js",

src/components/empty-state.ts

@@ -1,2 +0,2 @@
-import { LitElement, html } from 'lit';
+import { LitElement, html, css } from 'lit';
 import { customElement } from 'lit/decorators.js';
@@ -6,2 +6,9 @@
 export class EmptyState extends LitElement {
+  static override styles = css`
+  svg {
+    width: 60%;
+    display: block;
+    margin: auto;
+  }
+`;
 
@@ -8,0 +15,0 @@ override render(): unknown {

src/components/note-dialog.ts

@@ -28,2 +28,5 @@ import { LitElement, html, css, nothing } from 'lit';
 
+    .note {
+      margin-bottom: -60px;
+    }
   `;
@@ -64,3 +67,5 @@
 
-    this._categories = categories.filter(x => x.isActive);
+    this._categories = categories.filter(x => x.isActive).sort((a: any, b: any) => {
+      return a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1;
+    });
     this._dialog?.addEventListener('close', this.clearFields);
@@ -106,2 +111,3 @@ }
             maxLength=${10000}
+            class="note"
             .value=${this._noteText}
@@ -108,0 +114,0 @@ @input=${this.handleChangeNoteText}

src/components/note-expander.ts

@@ -13,9 +13,5 @@ import { LitElement, html, css, nothing } from 'lit';
       width: 100%;
+      border-top: 1px solid var(--zui-gray-200);
     }
 
-    zui-expander {
-      border-bottom: var(--zui-expander-border-bottom, 1px var(--zui-gray-100) solid);
-      width: 100%;
-    }
-
     .note-content {
@@ -32,7 +28,13 @@ padding-top: 0;
     .note-short-description {
-      margin: 2px 0 0;
+      margin: 15px 0 15px;
     }
+
+    .note-short-description:hover {
+      color: var(--zui-blue-500);
+      cursor: pointer;
+    }
     
     .note-title {
       display: flex;
+      margin-bottom: -3px;
     }
@@ -42,4 +44,4 @@
       margin: 0;
-      font-weight: 700;
-      font-size: 14px;
+      font-size: 12px;
+      color: var(--zui-gray-600);
     }
@@ -50,8 +52,8 @@
       color: inherit;
-      cursor: initial;
+      cursor: default;
     }
 
     .note-title-labels {
-      margin-left: 1rem;
-      margin-top: 0.85rem;
+      margin-left: 0.3rem;
+      margin-top: 0.65rem;
       gap: 0.5rem;
@@ -64,2 +66,4 @@ display: flex;
       max-width: 90%;
+      margin-left: 20px;
+      margin-right: 20px;
     }
@@ -82,31 +86,16 @@ `;
     return html`
-      <zui-expander type="group-standard">
-        <div slot="title" class="title-slot">
-          <div class="note-title">
-            <h3 class="note-title-category">
-              <p>${this.note?.categoryName}</p>
-            </h3>
-            ${this.renderNoteLabels()}
+      <div slot="title" class="title-slot">
+        <div class="note-title">
+          <div class="note-title-category">
+            <p>${this.note?.categoryName}</p>
           </div>
+          ${this.renderNoteLabels()}
+        </div>
 
-          <p class="note-short-description">
-            ${this.expanded ? nothing : html`
-              <truncated-text text=${this.note.text}></truncated-text>
-            `}
-          </p>
-        </div>  
-      
-        <div slot="content" class="note-content">
-          <p class="note-description">
-            <truncated-text text=${this.note.text} lines="7"></truncated-text>
-          </p>
-          <zui-button
-                data-autom="note-expander_button_view-more"
-                type="link" 
-              >
-              <a href=${`${this.notesUri}/account/${this.accountId}/note/${this.note.noteId}`}></a>
-                View more
-              </zui-button>
-        </div>    
-      </zui-expander>
+        <p class="note-short-description" @click=${this.redirectToDetails}>
+          <truncated-text 
+            .text=${this.note.text}>
+          </truncated-text>
+        </p>
+      </div>
     `;
@@ -124,2 +113,6 @@ }
   }
+
+  private redirectToDetails() {
+    window.location.href = this.notesUri + "/account/" + this.accountId + "/note/" + this.note.noteId;
+  }
 }
@@ -126,0 +119,0 @@

src/components/truncated-text.ts

@@ -25,3 +25,3 @@ import { LitElement, html, nothing, css } from 'lit';
   @property()
-  lines = 1;
+  lines = 2;
 
@@ -28,0 +28,0 @@ @state()

src/notes-widget.ts

@@ -32,2 +32,8 @@ import { LitElement, html, css } from 'lit';
 
+    .empty-add-note {
+      width: 35%;
+      display: block;
+      margin: auto;
+    }
+
     zui-table-row {
@@ -111,3 +117,10 @@ display: flex;
                 <zui-table-cell>
-                  <empty-state></empty-state>
+                  <empty-state .addNote="${this.openAddNoteDialog}"></empty-state>
+                  <zui-button
+                      class="empty-add-note"
+                      type="secondary" 
+                      @click=${this.openAddNoteDialog}
+                    >
+                      Add a note
+                  </zui-button>
                 </zui-table-cell>
@@ -135,15 +148,14 @@ </zui-table-row>
         <div class="topbar-actions">
-          <zui-button-dropdown type="secondary">
-              Manage notes
-              <button slot="option"             
-                data-autom="notes-widget_button_add-note"
-                @click=${this.openAddNoteDialog}>
-                  <zui-icon icon="zui-new-file" class="small"></zui-icon>
-                  <span>Add a note</span>
-              </button>
-              <a href=${`${this.notesUri}/account/${this.accountId}`} slot="option">
-                <zui-icon icon="zui-multiple-files" class="small"></zui-icon>
-                View all notes
-              </a>
-            </zui-button-dropdown>
+          <zui-button
+              type="secondary" 
+              @click=${this.openAddNoteDialog}
+            >
+              Add a note
+          </zui-button>
+          <zui-button
+            type="secondary"
+          >
+              <a href=${`${this.notesUri}/account/${this.accountId}`}></a>
+              View all notes
+          </zui-button>
         </div>
@@ -150,0 +162,0 @@ </zui-table-topbar>

No alert changes

Improved metrics

Total package byte prevSize

278713

increased by0.2%

Lines of code

3471

increased by1.37%

No dependency changes