Skip to content

Commit

Permalink
Feat: larger open area (#957)
Browse files Browse the repository at this point in the history 
* correct uui file symbol

* make open-part grow when not selectable

* revert lines

* correct card selection area

* correct ref-node selection area

* make uui text style available without use of uui-text

* update symbols

* revert

* update media card

* adapt user card

* always grow content node card open area

* adjust user card
  • Loading branch information
@nielslyngsoe
nielslyngsoe committed Nov 20, 2024
1 parent c825f26 commit a4a0edc
Show file tree
Hide file tree
Showing 9 changed files with 406 additions and 162 deletions.
111 changes: 85 additions & 26 deletions packages/uui-card-content-node/lib/uui-card-content-node.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,11 +24,30 @@ export class UUICardContentNodeElement extends UUICardElement {
@property({ type: String })
name = '';

/**
* Node details
* @type {string}
* @attr
* @default ''
*/
@property({ type: String })
detail = '';

@state()
private _iconSlotHasContent = false;

protected fallbackIcon =
'<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M396.441 138.878l-83.997-83.993-7.331-7.333H105.702v416.701h298.071V146.214l-7.332-7.336zM130.74 439.217V72.591h141.613c37.201 0 19.274 88.18 19.274 88.18s86-20.901 87.104 18.534v259.912H130.74z"></path></svg>';
protected fallbackIcon = `<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="1.75"
stroke-linecap="round"
stroke-linejoin="round"
id="icon">
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
</svg>`;

private _onSlotIconChange(event: Event) {
this._iconSlotHasContent =
Expand All @@ -41,18 +60,37 @@ export class UUICardContentNodeElement extends UUICardElement {
return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
}

protected renderDetail() {
return html`<small id="detail"
>${this.detail}<slot name="detail"></slot></small
><slot id="default"></slot>`;
}

#renderContent() {
return html`
<span id="content">
<span id="item">
<span id="icon">
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
${this._iconSlotHasContent === false
? this._renderFallbackIcon()
: ''}
</span>
<div id="name">${this.name}<slot name="name"></slot></div>
</span>
${this.renderDetail()}
</span>
`;
}

#renderButton() {
return html`<div
return html`<button
id="open-part"
tabindex=${this.disabled ? (nothing as any) : 0}
@click=${this.handleOpenClick}
@keydown=${this.handleOpenKeydown}>
<span id="icon">
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ''}
</span>
<span id="name"> ${this.name} </span>
</div>`;
${this.#renderContent()}
</button>`;
}

#renderLink() {
Expand All @@ -67,11 +105,7 @@ export class UUICardContentNodeElement extends UUICardElement {
this.target === '_blank' ? 'noopener noreferrer' : undefined,
),
)}>
<span id="icon">
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ''}
</span>
<span id="name"> ${this.name} </span>
${this.#renderContent()}
</a>`;
}

Expand All @@ -81,7 +115,6 @@ export class UUICardContentNodeElement extends UUICardElement {
<!-- Select border must be right after #open-part -->
<div id="select-border"></div>
<slot></slot>
<slot name="tag"></slot>
<slot name="actions"></slot>
`;
Expand All @@ -94,7 +127,6 @@ export class UUICardContentNodeElement extends UUICardElement {
min-width: 250px;
flex-direction: column;
justify-content: space-between;
padding: var(--uui-size-3) var(--uui-size-4);
}
slot[name='tag'] {
Expand Down Expand Up @@ -132,30 +164,57 @@ export class UUICardContentNodeElement extends UUICardElement {
line-height: calc(2 * var(--uui-size-3));
}
#icon {
font-size: 1.2em;
margin-right: var(--uui-size-1);
}
#open-part {
display: flex;
position: relative;
font-weight: 700;
align-items: center;
cursor: pointer;
flex-grow: 1;
padding: var(--uui-size-space-4) var(--uui-size-space-5);
}
#content {
align-self: stretch;
display: flex;
flex-direction: column;
}
:host([disabled]) #open-part {
#item {
position: relative;
display: flex;
align-self: stretch;
line-height: normal;
align-items: center;
margin-top: var(--uui-size-1);
}
#icon {
font-size: 1.2em;
margin-right: var(--uui-size-1);
}
:host([selectable]) #open-part {
padding: 0;
margin: var(--uui-size-space-4) var(--uui-size-space-5);
}
:host([disabled]) #name {
pointer-events: none;
}
#open-part:hover {
:host(:not([disabled])) #open-part:hover #icon {
color: var(--uui-color-interactive-emphasis);
}
:host(:not([disabled])) #open-part:hover #name {
text-decoration: underline;
color: var(--uui-color-interactive-emphasis);
}
#name {
margin-top: 4px;
:host(:not([disabled])) #open-part:hover #detail {
color: var(--uui-color-interactive-emphasis);
}
:host(:not([disabled])) #open-part:hover #default {
color: var(--uui-color-interactive-emphasis);
}
`,
];
Expand Down
98 changes: 67 additions & 31 deletions packages/uui-card-media/lib/uui-card-media.element.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,15 @@ export class UUICardMediaElement extends UUICardElement {
@property({ type: String })
name = '';

/**
* Media detail
* @type {string}
* @attr detail
* @default ''
*/
@property({ type: String })
detail?: string;

/**
* Media file extension, without "."
* @type {string}
Expand Down Expand Up @@ -68,15 +77,7 @@ export class UUICardMediaElement extends UUICardElement {
tabindex=${this.disabled ? (nothing as any) : '0'}
@click=${this.handleOpenClick}
@keydown=${this.handleOpenKeydown}>
<!--
TODO: Implement when pop-out is ready
<uui-icon
id="info-icon"
name="info"
style="color: currentColor">
</uui-icon>
-->
<span>${this.name}</span>
${this.#renderContent()}
</button>
`;
}
Expand All @@ -94,16 +95,20 @@ export class UUICardMediaElement extends UUICardElement {
this.target === '_blank' ? 'noopener noreferrer' : undefined,
),
)}>
${this.#renderContent()}
</a>
`;
}

#renderContent() {
return html`
<div id="content">
<!--
TODO: Implement when pop-out is ready
<uui-icon
id="info-icon"
name="info"
style="color: currentColor">
</uui-icon>
TODO: Implement info box when pop-out is ready
-->
<span>${this.name}</span>
</a>
<span id="name">${this.name}</span>
${this.detail}<slot name="detail"></slot>
</div>
`;
}

Expand Down Expand Up @@ -162,28 +167,18 @@ export class UUICardMediaElement extends UUICardElement {
#open-part {
position: absolute;
bottom: 0;
width: 100%;
background-color: var(--uui-color-surface);
z-index: 1;
inset: 0;
color: var(--uui-color-interactive);
border: none;
cursor: pointer;
border-top: 1px solid var(--uui-color-divider);
border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
display: flex;
justify-content: flex-start;
align-items: center;
font-family: inherit;
font-size: var(--uui-type-small-size);
box-sizing: border-box;
padding: var(--uui-size-2) var(--uui-size-4);
text-align: left;
word-break: break-word;
flex-direction: column;
justify-content: flex-end;
}
:host([disabled]) #open-part {
pointer-events: none;
background: var(--uui-color-disabled);
color: var(--uui-color-contrast-disabled);
}
Expand All @@ -197,6 +192,35 @@ export class UUICardMediaElement extends UUICardElement {
opacity: 0;
}
#content {
position: relative;
display: flex;
width: 100%;
align-items: center;
font-family: inherit;
font-size: var(--uui-type-small-size);
box-sizing: border-box;
text-align: left;
word-break: break-word;
padding-top: var(--uui-size-space-3);
}
#content::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-top: 1px solid var(--uui-color-divider);
border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
background-color: var(--uui-color-surface);
pointer-events: none;
opacity: 0.96;
}
#name {
font-weight: 700;
}
:host(
[image]:not([image='']):hover,
[image]:not([image='']):focus,
Expand All @@ -210,6 +234,18 @@ export class UUICardMediaElement extends UUICardElement {
transition-delay: 0s;
}
:host([selectable]) #open-part {
inset: var(--uui-size-space-3) var(--uui-size-space-4);
}
:host(:not([selectable])) #content {
padding: var(--uui-size-space-3) var(--uui-size-space-4);
}
:host([selectable]) #content::before {
inset: calc(var(--uui-size-space-3) * -1)
calc(var(--uui-size-space-4) * -1);
top: 0;
}
/*
#info-icon {
margin-right: var(--uui-size-2);
Expand Down
Loading

0 comments on commit a4a0edc

Please sign in to comment.