Skip to content

Commit

Permalink
First draft of changes to CSS for moving the buttons. Needs more thor…
Browse files Browse the repository at this point in the history 
…ough testing.
  • Loading branch information
@JodieM
JodieM committed Aug 17, 2024
1 parent 94563a5 commit 7932367
Showing 1 changed file with 71 additions and 55 deletions.
126 changes: 71 additions & 55 deletions force-app/main/default/lwc/indicatorBundle/indicatorBundle.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,61 +3,77 @@
<template if:false={errorOccurred}>
<!-- <lightning-card variant="narrow" icon-name={card.icon} title={card.title}> -->
<lightning-card variant="narrow">
<lightning-button-icon
variant="bare"
icon-name="utility:info_alt"
alternative-text="Indicator Value Key"
class="slds-var-m-left_xx-small"
title="Indicator Value Key"
slot="actions"
onclick={handleInfoKeyClick}
aria-haspopup="dialog"
></lightning-button-icon>
<template if:true={showRefresh}>
<lightning-button-icon
variant="bare"
icon-name="utility:refresh"
alternative-text="Refresh"
class="slds-var-m-left_xx-small"
title="Refresh"
slot="actions"
onclick={refreshCmdt}
></lightning-button-icon>
</template>
<template lwc:if={hasHeader} class="cardIcon">
<template lwc:if={showTitle}>
<h3 slot="title">
<lightning-icon
lwc:if={card.icon}
icon-name={card.icon}
size="small"
class={card.iconClass}
>
</lightning-icon>
{card.title}
</h3>
</template>
<template lwc:if={showDescription}>
<p class="slds-var-p-horizontal_medium slds-var-p-bottom_small">{card.body}</p>
</template>
</template>
<!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
<div class="slds-var-m-left_medium">
<template if:true={results}>
<template for:each={results} for:item="fld">
<c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fTextShown}
ind-size={indsSize}
ind-shape={indsShape}
ind-hover-text={fld.fHoverValue}
ind-icon={fld.fIconName}
ind-image={fld.fImageURL}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
>
</c-indicator-bundle-item>
</template>
</template>
<div class="slds-grid grid-wrap">
<div class="slds-col slds-grid slds-grid_vertical">
<template lwc:if={hasHeader} class="slds-icon_container slds-var-m-right_small">
<div class="slds-col slds-size_1-of-1">
<template lwc:if={showTitle}>
<div class="slds-var-p-left_medium slds-var-p-bottom_x-small">
<h2 slot="title" class="slds-card__header-title">
<lightning-icon
lwc:if={card.icon}
icon-name={card.icon}
size="small"
class={card.iconClass}
>
</lightning-icon>
{card.title}
</h2>
</div>
</template>
</div>
<div class="slds-col slds-size_1-of-1">
<template lwc:if={showDescription}>
<p class="slds-var-p-left_medium slds-var-p-right_x-small slds-var-p-bottom_small">{card.body}</p>
</template>
</div>
</template>
<div class="slds-col slds-size_1-of-1">
<!-- TODO: Do we put this in a Layout which would be responsive to the container, this could allow for empty slots too -->
<div class="slds-var-p-left_medium slds-clearfix">
<template if:true={results}>
<template for:each={results} for:item="fld">
<c-indicator-bundle-item if:true={fld.fShowAvatar} key={fld.fName}
ind-text={fld.fTextShown}
ind-size={indsSize}
ind-shape={indsShape}
ind-hover-text={fld.fHoverValue}
ind-icon={fld.fIconName}
ind-image={fld.fImageURL}
ind-background-color={fld.fIconBackground}
ind-foreground-color={fld.fIconForeground}
>
</c-indicator-bundle-item>
</template>
</template>
</div>
</div>
</div>
<div class="slds-var-p-right_medium slds-var-p-bottom_x-small" >
<div class="slds-button-group" role="group">
<lightning-button-icon
variant="base"
icon-name="utility:info_alt"
alternative-text="Indicator Value Key"
class="slds-var-m-left_xx-small"
title="Indicator Value Key"
slot="actions"
onclick={handleInfoKeyClick}
aria-haspopup="dialog"
></lightning-button-icon>
<template if:true={showRefresh}>
<lightning-button-icon
variant="base"
icon-name="utility:refresh"
alternative-text="Refresh"
class="slds-var-m-left_xx-small"
title="Refresh"
slot="actions"
onclick={refreshCmdt}
></lightning-button-icon>
</template>
</div>
</div>
</div>
</lightning-card>
</template>
Expand Down

0 comments on commit 7932367

Please sign in to comment.