Eco 172 fixed crm (#2194)

* reorganize import for acc,contact,deal and task

* account-header-cssvar-control

* more deal-event cssvar control

* handle-all-account-fitted-format-aspect-ratio

* handle-all-deal-fitted-format-aspect-ratio

* Revert "reorganize import for acc,contact,deal and task"

This reverts commit 4dcfa15.

* enhance account-header, priotize to block name always

* reorganize and optimze fitted format for account and deal

* enhance entity display

* enhance components

* add overflow to deal-event

* enhance fitted format

* fix logo size on account fitted

* update summary-card component and related file

* create page layout component

* renabled back deal embedded format

* reorganize import

* test fix lint

* test fix-lint

* Design tweaks

* Update icons and display names

* ignore glint

* fix lint

---------

Co-authored-by: Burcu Noyan <burcunoyan@gmail.com>

Author: lucaslyl

packages/experiments-realm/components/account-header.gts

@@ -26,43 +26,72 @@ class AccountHeader extends GlimmerComponent<AccountHeaderArgs> {
       <div class='account-header-info'>
         {{#if (has-block 'name')}}
           {{yield to='name'}}
+        {{else}}
+          <h3 class='account-header-name'>{{@name}}</h3>
         {{/if}}
+
         {{#if (has-block 'content')}}
-          {{yield to='content'}}
+          <div class='account-header-info-content'>
+            {{yield to='content'}}
+          </div>
         {{/if}}
       </div>
     </header>
 
     <style scoped>
       .account-header {
-        display: flex;
-        align-items: start;
-        gap: var(--boxel-sp);
+        display: var(--account-header-display, flex);
+        align-items: var(--account-header-align-items, start);
+        gap: var(--account-header-gap, var(--boxel-sp));
         min-width: 0;
       }
       .account-header-logo {
         flex-shrink: 0;
         width: var(--account-header-logo-size, 60px);
         height: var(--account-header-logo-size, 60px);
-        object-fit: cover;
-        border-radius: var(--boxel-border-radius-xl);
+        object-fit: var(--account-header-logo-object-fit, cover);
+        border-radius: var(
+          --account-header-logo-border-radius,
+          var(--boxel-border-radius-xl)
+        );
       }
       .default-icon-container {
         display: var(--account-header-logo-display, flex);
-        align-items: center;
-        justify-content: center;
-        background-color: var(--boxel-200);
-        color: var(--boxel-400);
-        padding: 5px;
+        align-items: var(--account-header-logo-align-items, center);
+        justify-content: var(--account-header-logo-justify-content, center);
+        background-color: var(
+          --account-header-logo-background-color,
+          var(--boxel-200)
+        );
+        color: var(--account-header-logo-color, var(--boxel-400));
+        padding: var(--account-header-logo-padding, 5px);
       }
       .account-header-info {
-        display: flex;
-        flex-direction: column;
-        gap: var(--boxel-sp-xxs);
+        display: var(--account-header-info-display, flex);
+        flex-direction: var(--account-header-info-flex-direction, column);
+        gap: var(--account-header-info-gap, var(--boxel-sp-xxs));
         min-width: 0;
         width: 100%;
         overflow: hidden;
       }
+      .account-header-name {
+        margin: 0;
+        font: var(--account-header-name-font, 600 var(--boxel-font-med));
+        letter-spacing: var(
+          --account-header-name-letter-spacing,
+          var(--boxel-lsp-sm)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--account-header-name-line-clamp, 1);
+      }
+      .account-header-info-content {
+        display: var(--account-header-info-content-display, flex);
+        flex-direction: var(--account-header-info-content-flex-direction, row);
+        gap: var(--account-header-info-content-gap, var(--boxel-sp-xxs));
+      }
     </style>
   </template>
 }

packages/experiments-realm/components/avatar-group.gts

@@ -8,7 +8,10 @@ interface AvatarGroupSignature {
     name?: string;
     userId?: string | null;
   };
-  Blocks: { content: [] };
+  Blocks: {
+    name: [];
+    content: [];
+  };
   Element: HTMLElement;
 }
 
@@ -28,39 +31,52 @@ export default class AvatarGroup extends GlimmerComponent<AvatarGroupSignature>
       />
 
       <div class='avatar-info'>
-        <h3 class='name'>
-          {{if @name @name 'No Name Assigned'}}
-        </h3>
+        {{#if (has-block 'name')}}
+          {{yield to='name'}}
+        {{else}}
+          <h3 class='avatar-name'>{{@name}}</h3>
+        {{/if}}
 
-        {{yield to='content'}}
+        {{#if (has-block 'content')}}
+          <div class='avatar-info-content'>
+            {{yield to='content'}}
+          </div>
+        {{/if}}
       </div>
     </div>
 
     <style scoped>
       .avatar-group {
-        display: flex;
-        align-items: center;
-        gap: var(--boxel-sp-sm);
+        display: var(--avatar-group-display, flex);
+        flex-direction: var(--avatar-group-flex-direction, row);
+        align-items: var(--avatar-group-align-items, center);
+        gap: var(--avatar-group-gap, var(--boxel-sp-sm));
         min-width: 0;
       }
       .avatar-thumbnail {
         flex-shrink: 0;
-        --profile-avatar-icon-size: 60px;
+        --profile-avatar-icon-size: var(--avatar-thumbnail-size, 60px);
+        --profile-avatar-icon-border: var(--avatar-thumbnail-border, 0px);
       }
       .avatar-info {
         min-width: 0;
         width: 100%;
         overflow: hidden;
       }
-      .name {
-        -webkit-line-clamp: 1;
-        text-wrap: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
+      .avatar-name {
         margin: 0;
-        font-size: var(--boxel-font-size);
-        font-weight: 600;
-        letter-spacing: var(--boxel-lsp-sm);
+        font: var(--avatar-name-font, 600 var(--boxel-font-med));
+        letter-spacing: var(--avatar-name-letter-spacing, var(--boxel-lsp-sm));
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--avatar-name-line-clamp, 1);
+      }
+      .avatar-info-content {
+        display: var(--avatar-info-content-display, flex);
+        flex-direction: var(--avatar-info-content-flex-direction, row);
+        gap: var(--avatar-info-content-gap, var(--boxel-sp-xxs));
       }
     </style>
   </template>

packages/experiments-realm/components/entity-icon-display.gts

@@ -73,63 +73,74 @@ export default class EntityDisplayWithIcon extends GlimmerComponent<EntityDispla
     </div>
     <style scoped>
       .entity-icon-display {
-        --icon-size: var(--entity-display-icon-size, var(--boxel-icon-sm));
-        --title-font-size: var(
-          --entity-display-title-font-size,
-          var(--boxel-font-size-sm)
-        );
-        --title-color: var(--entity-display-title-color, var(--boxel-dark));
-        --title-font-weight: var(--entity-display-title-font-weight, 600);
-        --content-font-size: var(
-          --entity-display-content-font-size,
-          var(--boxel-font-size-xs)
-        );
-        --content-font-weight: var(
-          --entity-display-content-font-weight,
-          var(--boxel-font-weight-normal)
-        );
-        --content-color: var(--entity-display-content-color, var(--boxel-400));
-        --content-gap: var(--entity-display-content-gap, var(--boxel-sp-xxxs));
-        display: flex;
-        align-items: flex-start;
-        gap: var(--content-gap);
+        display: var(--entity-display-display, flex);
+        align-items: var(--entity-display-align-items, flex-start);
+        flex-direction: var(--entity-display-flex-direction, row);
+        gap: var(--entity-display-gap, var(--boxel-sp-xxxs));
       }
       .entity-icon-display.center {
         align-items: center;
       }
       .entity-icon {
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
+        display: var(--entity-display-icon-display, inline-flex);
+        align-items: var(--entity-display-icon-align-items, center);
+        justify-content: var(--entity-display-icon-justify-content, center);
         flex-shrink: 0;
-        width: var(--icon-size);
-        height: var(--icon-size);
+        width: var(--entity-display-icon-size, var(--boxel-icon-sm));
+        height: var(--entity-display-icon-size, var(--boxel-icon-sm));
       }
       .entity-info {
-        display: flex;
-        flex-direction: column;
-        gap: var(--content-gap);
+        display: var(--entity-display-info-display, flex);
+        flex-direction: var(--entity-display-info-flex-direction, column);
+        gap: var(--entity-display-info-gap, var(--boxel-sp-xxxs));
       }
       .entity-title-tag-container {
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
-        gap: var(--content-gap);
+        display: var(--entity-display-title-tag-container-display, flex);
+        flex-wrap: var(--entity-display-title-tag-container-flex-wrap, wrap);
+        align-items: var(
+          --entity-display-title-tag-container-align-items,
+          center
+        );
+        gap: var(
+          --entity-display-title-tag-container-gap,
+          var(--boxel-sp-xxxs)
+        );
       }
       .entity-title {
-        word-break: break-word;
-        color: var(--title-color);
-        font-size: var(--title-font-size);
-        font-weight: var(--title-font-weight);
+        color: var(--entity-display-title-color, var(--boxel-dark));
+        font-size: var(
+          --entity-display-title-font-size,
+          var(--boxel-font-size-sm)
+        );
+        font-weight: var(--entity-display-title-font-weight, 600);
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entity-display-title-line-clamp, 1);
+        margin: var(--entity-display-title-margin, 0);
+        word-break: var(--entity-display-title-word-break, break-word);
       }
       .entity-title.underline {
-        text-decoration: underline;
+        text-decoration: var(--entity-display-title-underline, underline);
       }
       .entity-content {
-        margin: 0;
-        font-size: var(--content-font-size);
-        font-weight: var(--content-font-weight);
-        color: var(--content-color);
+        color: var(--entity-display-content-color, var(--boxel-400));
+        font-size: var(
+          --entity-display-content-font-size,
+          var(--boxel-font-size-xs)
+        );
+        font-weight: var(
+          --entity-display-content-font-weight,
+          var(--boxel-font-weight-normal)
+        );
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--entity-display-content-line-clamp, 1);
+        margin: var(--entity-display-content-margin, 0);
+        word-break: var(--entity-display-content-word-break, break-word);
       }
     </style>
   </template>