update note ui impr

client/res/templates/stream/notes/update.tpl

@@ -25,9 +25,11 @@
             role="button"
             tabindex="0"
             data-action="expandDetails"
-            class="text-soft"
-        ><span class="fas fa-chevron-down"></span></a><span style="user-select: none"> </span>
-        <span class="fields text-muted small">{{fieldsString}}</span>
+            class="text-muted no-underline"
+        ><span class="fas fa-chevron-down text-soft" data-role="icon"></span>
+            <span style="user-select: none"> </span>
+            <span class="fields small">{{fieldsString}}</span>
+        </a>
     </div>
 {{/if}}
 

client/src/views/stream/notes/update.js

@@ -179,12 +179,14 @@ class UpdateNoteStreamView extends NoteStreamView {
     toggleDetails() {
         const target = this.element.querySelector('[data-action="expandDetails"]');
 
-        const $details = this.$el.find('> .details');
-        const $fields = this.$el.find('> .stream-details-container > .fields');
+        const detailsElement = this.element.querySelector(':scope > .details');
+        const fieldElement = this.element.querySelector(':scope > .stream-details-container > .fields');
+
+        const iconElement = target.querySelector('[data-role="icon"]');
 
         if (!this.isExpanded) {
-            $details.removeClass('hidden');
-            $fields.addClass('hidden');
+            detailsElement.classList.remove('hidden');
+            fieldElement?.classList.add('hidden');
 
             this.fieldList.forEach(field => {
                 const wasField = this.getView(field + 'Was');
@@ -196,21 +198,19 @@ class UpdateNoteStreamView extends NoteStreamView {
                 }
             });
 
-            $(target).find('span')
-                .removeClass('fa-chevron-down')
-                .addClass('fa-chevron-up');
+            iconElement.classList.remove('fa-chevron-down');
+            iconElement.classList.add('fa-chevron-up');
 
             this.isExpanded = true;
 
             return;
         }
 
-        $details.addClass('hidden');
-        $fields.removeClass('hidden');
+        detailsElement.classList.add('hidden');
+        fieldElement?.classList.remove('hidden');
 
-        $(target).find('span')
-            .addClass('fa-chevron-down')
-            .removeClass('fa-chevron-up');
+        iconElement.classList.remove('fa-chevron-up');
+        iconElement.classList.add('fa-chevron-down');
 
         this.isExpanded = false;
     }

frontend/less/espo/elements/type.less

@@ -270,6 +270,13 @@ a.text-default {
     }
 }
 
+a.no-underline {
+    &:hover,
+    &:focus {
+        text-decoration: none;
+    }
+}
+
 .nowrap {
     white-space: nowrap;
 }