Skip to content

Commit

Permalink
More cssVar customization on summary card (#2073)
Browse files Browse the repository at this point in the history
* remove extra div & handle gap on summary-card component with cssVar

* remove </div>
  • Loading branch information
lucaslyl authored Jan 22, 2025
1 parent 0fa1e68 commit 0503d9f
Show file tree
Hide file tree
Showing 3 changed files with 92 additions and 119 deletions.
31 changes: 21 additions & 10 deletions packages/experiments-realm/components/summary-card.gts
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,24 @@ export default class SummaryCard extends GlimmerComponent<SummaryCardArgs> {
<template>
<article class='summary-card' ...attributes>
<header class='summary-card-header'>
<div class='summary-card-title'>
{{yield to='title'}}
</div>
<div class='summary-card-icon'>
{{yield to='icon'}}
</div>
{{#if (has-block 'title')}}
<div class='summary-card-title'>
{{yield to='title'}}
</div>
{{/if}}

{{#if (has-block 'icon')}}
<div class='summary-card-icon'>
{{yield to='icon'}}
</div>
{{/if}}
</header>
<div class='summary-card-content'>
{{#if (has-block 'content')}}

{{#if (has-block 'content')}}
<div class='summary-card-content'>
{{yield to='content'}}
{{/if}}
</div>
</div>
{{/if}}
</article>

<style scoped>
Expand Down Expand Up @@ -64,6 +70,11 @@ export default class SummaryCard extends GlimmerComponent<SummaryCardArgs> {
.summary-card-icon {
flex-shrink: 0;
}
.summary-card-content {
display: var(--summary-card-content-display, flex);
flex-direction: var(--summary-card-content-direction, column);
gap: var(--summary-card-content-gap, var(--boxel-sp-xxs));
}
</style>
</template>
}
87 changes: 33 additions & 54 deletions packages/experiments-realm/crm/account.gts
Original file line number Diff line number Diff line change
Expand Up @@ -396,19 +396,17 @@ class IsolatedTemplate extends Component<typeof Account> {
{{/if}}
</:name>
<:content>
<div class='description content-container'>
{{#if @model.primaryContact}}
<@fields.primaryContact
@format='atom'
@displayContainer={{false}}
class='primary-contact'
/>
<div class='tag-container'>
<@fields.statusTag @format='atom' />
<@fields.urgencyTag @format='atom' />
</div>
{{/if}}
</div>
{{#if @model.primaryContact}}
<@fields.primaryContact
@format='atom'
@displayContainer={{false}}
class='primary-contact'
/>
<div class='tag-container'>
<@fields.statusTag @format='atom' />
<@fields.urgencyTag @format='atom' />
</div>
{{/if}}
</:content>
</AccountHeader>
</:header>
Expand All @@ -423,16 +421,14 @@ class IsolatedTemplate extends Component<typeof Account> {
<BuildingIcon class='header-icon' />
</:icon>
<:content>
<div class='description content-container'>
{{#if this.hasCompanyInfo}}
<@fields.headquartersAddress @format='atom' />
<@fields.website @format='atom' />
{{else}}
<div class='default-value'>
Missing Company Info
</div>
{{/if}}
</div>
{{#if this.hasCompanyInfo}}
<@fields.headquartersAddress @format='atom' />
<@fields.website @format='atom' />
{{else}}
<div class='default-value'>
Missing Company Info
</div>
{{/if}}
</:content>
</SummaryCard>

Expand All @@ -444,28 +440,23 @@ class IsolatedTemplate extends Component<typeof Account> {
<ContactIcon class='header-icon' />
</:icon>
<:content>
<div class='description content-container'>
{{#if this.hasContacts}}
<div class='primary-contact-group'>
<@fields.primaryContact
@format='atom'
@displayContainer={{false}}
/>
<Pill class='primary-tag' @pillBackgroundColor='#e8e8e8'>
Primary
</Pill>
</div>

<@fields.contacts
{{#if this.hasContacts}}
<div class='primary-contact-group'>
<@fields.primaryContact
@format='atom'
@displayContainer={{false}}
/>
{{else}}
<div class='default-value'>
Missing Contacts
</div>
{{/if}}
</div>
<Pill class='primary-tag' @pillBackgroundColor='#e8e8e8'>
Primary
</Pill>
</div>

<@fields.contacts @format='atom' @displayContainer={{false}} />
{{else}}
<div class='default-value'>
Missing Contacts
</div>
{{/if}}
</:content>
</SummaryCard>

Expand Down Expand Up @@ -641,12 +632,6 @@ class IsolatedTemplate extends Component<typeof Account> {
font: 500 var(--boxel-font-sm);
letter-spacing: var(--boxel-lsp-xs);
}
.content-container {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--boxel-sp-xs);
}
.tag-container {
display: flex;
flex-wrap: wrap;
Expand Down Expand Up @@ -779,12 +764,6 @@ class FittedTemplate extends Component<typeof Account> {
font: 500 var(--boxel-font-sm);
letter-spacing: var(--boxel-lsp-xs);
}
.content-container {
margin: 0;
display: flex;
flex-direction: column;
gap: var(--boxel-sp-xs);
}
.tag-container {
margin-top: auto;
display: flex;
Expand Down
93 changes: 38 additions & 55 deletions packages/experiments-realm/crm/deal.gts
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,6 @@ import FilePen from '@cardstack/boxel-icons/file-pen';
import ArrowLeftRight from '@cardstack/boxel-icons/arrow-left-right';
import Award from '@cardstack/boxel-icons/award';
import AwardOff from '@cardstack/boxel-icons/award-off';
import { Document } from './document';
import { AmountWithCurrency as AmountWithCurrencyField } from '../fields/amount-with-currency';
import BooleanField from 'https://cardstack.com/base/boolean';
import { getCards } from '@cardstack/runtime-common';
Expand Down Expand Up @@ -394,16 +393,14 @@ class IsolatedTemplate extends Component<typeof Deal> {
<World class='header-icon' />
</:icon>
<:content>
<div class='description'>
{{#if this.hasCompanyInfo}}
<@fields.headquartersAddress @format='atom' />
<@fields.website @format='atom' />
{{else}}
<div class='default-value'>
Missing Company Info
</div>
{{/if}}
</div>
{{#if this.hasCompanyInfo}}
<@fields.headquartersAddress @format='atom' />
<@fields.website @format='atom' />
{{else}}
<div class='default-value'>
Missing Company Info
</div>
{{/if}}
</:content>
</SummaryCard>

Expand All @@ -415,31 +412,28 @@ class IsolatedTemplate extends Component<typeof Deal> {
<Users class='header-icon' />
</:icon>
<:content>
<div class='description'>
{{#if this.hasStakeholders}}
{{#if @model.primaryStakeholder}}
<ContactRow
@userID={{@model.primaryStakeholder.id}}
@name={{@model.primaryStakeholder.name}}
@thumbnailURL={{@model.primaryStakeholder.thumbnailURL}}
@tagLabel='primary'
/>
{{/if}}
{{#each @model.stakeholders as |stakeholder|}}
<ContactRow
@userID={{stakeholder.id}}
@name={{stakeholder.name}}
@thumbnailURL={{stakeholder.thumbnailURL}}
@tagLabel={{stakeholder.position}}
/>
{{/each}}
{{else}}
<div class='default-value'>
No Stakeholders
</div>
{{#if this.hasStakeholders}}
{{#if @model.primaryStakeholder}}
<ContactRow
@userID={{@model.primaryStakeholder.id}}
@name={{@model.primaryStakeholder.name}}
@thumbnailURL={{@model.primaryStakeholder.thumbnailURL}}
@tagLabel='primary'
/>
{{/if}}

</div>
{{#each @model.stakeholders as |stakeholder|}}
<ContactRow
@userID={{stakeholder.id}}
@name={{stakeholder.name}}
@thumbnailURL={{stakeholder.thumbnailURL}}
@tagLabel={{stakeholder.position}}
/>
{{/each}}
{{else}}
<div class='default-value'>
No Stakeholders
</div>
{{/if}}
</:content>
</SummaryCard>

Expand All @@ -449,7 +443,6 @@ class IsolatedTemplate extends Component<typeof Deal> {
</:title>
<:icon>
<BoxelButton
class='sidebar-create-button content-header-row-1'
@kind='primary'
@size='extra-small'
@disabled={{this.activeTasks.isLoading}}
Expand All @@ -460,20 +453,17 @@ class IsolatedTemplate extends Component<typeof Deal> {
</BoxelButton>
</:icon>
<:content>
<div>
{{#if this.activeTasks.isLoading}}
Loading...
{{else if this.activeTasks.instances}}
{{this.activeTasks.instances.length}}
{{else}}
<div class='default-value'>
No Active Tasks
</div>
{{/if}}
</div>
{{#if this.activeTasks.isLoading}}
Loading...
{{else if this.activeTasks.instances}}
{{this.activeTasks.instances.length}}
{{else}}
<div class='default-value'>
No Active Tasks
</div>
{{/if}}
</:content>
</SummaryCard>

</SummaryGridContainer>
</:summary>
</DealPageLayout>
Expand Down Expand Up @@ -592,12 +582,6 @@ class IsolatedTemplate extends Component<typeof Deal> {
gap: var(--boxel-sp-sm);
font-weight: 600;
}
.view-document-btn {
font-weight: 600;
padding: 2px 5px;
min-width: 0px;
min-height: 0px;
}
@container (max-width: 447px) {
.progress-container {
flex-direction: column-reverse;
Expand Down Expand Up @@ -1128,7 +1112,6 @@ export class Deal extends CardDef {
});
@field healthScore = contains(PercentageField);
@field notes = contains(MarkdownField);
@field document = linksTo(() => Document);
@field primaryStakeholder = linksTo(() => Contact);
@field stakeholders = linksToMany(() => Contact);
@field valueBreakdown = containsMany(ValueLineItem);
Expand Down

0 comments on commit 0503d9f

Please sign in to comment.