Skip to content

Commit 88c2c1a

Browse files
nielslyngsoenielslyngsoe
authored
Feat: larger open area (#957)
* 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
1 parent 16eea44 commit 88c2c1a

File tree

9 files changed

+406
-162
lines changed

9 files changed

+406
-162
lines changed

‎packages/uui-card-content-node/lib/uui-card-content-node.element.ts‎

Lines changed: 85 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -24,11 +24,30 @@ export class UUICardContentNodeElement extends UUICardElement {
2424
@property({ type: String })
2525
name = '';
2626

27+
/**
28+
* Node details
29+
* @type {string}
30+
* @attr
31+
* @default ''
32+
*/
33+
@property({ type: String })
34+
detail = '';
35+
2736
@state()
2837
private _iconSlotHasContent = false;
2938

30-
protected fallbackIcon =
31-
'<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>';
39+
protected fallbackIcon = `<svg
40+
xmlns="http://www.w3.org/2000/svg"
41+
viewBox="0 0 24 24"
42+
fill="none"
43+
stroke="currentColor"
44+
stroke-width="1.75"
45+
stroke-linecap="round"
46+
stroke-linejoin="round"
47+
id="icon">
48+
<path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z" />
49+
<path d="M14 2v4a2 2 0 0 0 2 2h4" />
50+
</svg>`;
3251

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

63+
protected renderDetail() {
64+
return html`<small id="detail"
65+
>${this.detail}<slot name="detail"></slot></small
66+
><slot id="default"></slot>`;
67+
}
68+
69+
#renderContent() {
70+
return html`
71+
<span id="content">
72+
<span id="item">
73+
<span id="icon">
74+
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
75+
${this._iconSlotHasContent === false
76+
? this._renderFallbackIcon()
77+
: ''}
78+
</span>
79+
<div id="name">${this.name}<slot name="name"></slot></div>
80+
</span>
81+
${this.renderDetail()}
82+
</span>
83+
`;
84+
}
85+
4486
#renderButton() {
45-
return html`<div
87+
return html`<button
4688
id="open-part"
4789
tabindex=${this.disabled ? (nothing as any) : 0}
4890
@click=${this.handleOpenClick}
4991
@keydown=${this.handleOpenKeydown}>
50-
<span id="icon">
51-
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
52-
${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ''}
53-
</span>
54-
<span id="name"> ${this.name} </span>
55-
</div>`;
92+
${this.#renderContent()}
93+
</button>`;
5694
}
5795

5896
#renderLink() {
@@ -67,11 +105,7 @@ export class UUICardContentNodeElement extends UUICardElement {
67105
this.target === '_blank' ? 'noopener noreferrer' : undefined,
68106
),
69107
)}>
70-
<span id="icon">
71-
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
72-
${this._iconSlotHasContent === false ? this._renderFallbackIcon() : ''}
73-
</span>
74-
<span id="name"> ${this.name} </span>
108+
${this.#renderContent()}
75109
</a>`;
76110
}
77111

@@ -81,7 +115,6 @@ export class UUICardContentNodeElement extends UUICardElement {
81115
<!-- Select border must be right after #open-part -->
82116
<div id="select-border"></div>
83117
84-
<slot></slot>
85118
<slot name="tag"></slot>
86119
<slot name="actions"></slot>
87120
`;
@@ -94,7 +127,6 @@ export class UUICardContentNodeElement extends UUICardElement {
94127
min-width: 250px;
95128
flex-direction: column;
96129
justify-content: space-between;
97-
padding: var(--uui-size-3) var(--uui-size-4);
98130
}
99131
100132
slot[name='tag'] {
@@ -132,30 +164,57 @@ export class UUICardContentNodeElement extends UUICardElement {
132164
line-height: calc(2 * var(--uui-size-3));
133165
}
134166
135-
#icon {
136-
font-size: 1.2em;
137-
margin-right: var(--uui-size-1);
138-
}
139-
140167
#open-part {
141168
display: flex;
142169
position: relative;
143170
font-weight: 700;
144171
align-items: center;
145172
cursor: pointer;
173+
flex-grow: 1;
174+
padding: var(--uui-size-space-4) var(--uui-size-space-5);
175+
}
176+
177+
#content {
178+
align-self: stretch;
179+
display: flex;
180+
flex-direction: column;
146181
}
147182
148-
:host([disabled]) #open-part {
183+
#item {
184+
position: relative;
185+
display: flex;
186+
align-self: stretch;
187+
line-height: normal;
188+
align-items: center;
189+
margin-top: var(--uui-size-1);
190+
}
191+
192+
#icon {
193+
font-size: 1.2em;
194+
margin-right: var(--uui-size-1);
195+
}
196+
197+
:host([selectable]) #open-part {
198+
padding: 0;
199+
margin: var(--uui-size-space-4) var(--uui-size-space-5);
200+
}
201+
202+
:host([disabled]) #name {
149203
pointer-events: none;
150204
}
151205
152-
#open-part:hover {
206+
:host(:not([disabled])) #open-part:hover #icon {
207+
color: var(--uui-color-interactive-emphasis);
208+
}
209+
:host(:not([disabled])) #open-part:hover #name {
153210
text-decoration: underline;
154211
color: var(--uui-color-interactive-emphasis);
155212
}
156-
157-
#name {
158-
margin-top: 4px;
213+
:host(:not([disabled])) #open-part:hover #detail {
214+
color: var(--uui-color-interactive-emphasis);
215+
}
216+
:host(:not([disabled])) #open-part:hover #default {
217+
color: var(--uui-color-interactive-emphasis);
159218
}
160219
`,
161220
];

‎packages/uui-card-media/lib/uui-card-media.element.ts‎

Lines changed: 67 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,15 @@ export class UUICardMediaElement extends UUICardElement {
2323
@property({ type: String })
2424
name = '';
2525

26+
/**
27+
* Media detail
28+
* @type {string}
29+
* @attr detail
30+
* @default ''
31+
*/
32+
@property({ type: String })
33+
detail?: string;
34+
2635
/**
2736
* Media file extension, without "."
2837
* @type {string}
@@ -68,15 +77,7 @@ export class UUICardMediaElement extends UUICardElement {
6877
tabindex=${this.disabled ? (nothing as any) : '0'}
6978
@click=${this.handleOpenClick}
7079
@keydown=${this.handleOpenKeydown}>
71-
<!--
72-
TODO: Implement when pop-out is ready
73-
<uui-icon
74-
id="info-icon"
75-
name="info"
76-
style="color: currentColor">
77-
</uui-icon>
78-
-->
79-
<span>${this.name}</span>
80+
${this.#renderContent()}
8081
</button>
8182
`;
8283
}
@@ -94,16 +95,20 @@ export class UUICardMediaElement extends UUICardElement {
9495
this.target === '_blank' ? 'noopener noreferrer' : undefined,
9596
),
9697
)}>
98+
${this.#renderContent()}
99+
</a>
100+
`;
101+
}
102+
103+
#renderContent() {
104+
return html`
105+
<div id="content">
97106
<!--
98-
TODO: Implement when pop-out is ready
99-
<uui-icon
100-
id="info-icon"
101-
name="info"
102-
style="color: currentColor">
103-
</uui-icon>
107+
TODO: Implement info box when pop-out is ready
104108
-->
105-
<span>${this.name}</span>
106-
</a>
109+
<span id="name">${this.name}</span>
110+
${this.detail}<slot name="detail"></slot>
111+
</div>
107112
`;
108113
}
109114

@@ -162,28 +167,18 @@ export class UUICardMediaElement extends UUICardElement {
162167
163168
#open-part {
164169
position: absolute;
165-
bottom: 0;
166-
width: 100%;
167-
background-color: var(--uui-color-surface);
170+
z-index: 1;
171+
inset: 0;
168172
color: var(--uui-color-interactive);
169173
border: none;
170174
cursor: pointer;
171-
border-top: 1px solid var(--uui-color-divider);
172-
border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
173175
display: flex;
174-
justify-content: flex-start;
175-
align-items: center;
176-
font-family: inherit;
177-
font-size: var(--uui-type-small-size);
178-
box-sizing: border-box;
179-
padding: var(--uui-size-2) var(--uui-size-4);
180-
text-align: left;
181-
word-break: break-word;
176+
flex-direction: column;
177+
justify-content: flex-end;
182178
}
183179
184180
:host([disabled]) #open-part {
185181
pointer-events: none;
186-
background: var(--uui-color-disabled);
187182
color: var(--uui-color-contrast-disabled);
188183
}
189184
@@ -197,6 +192,35 @@ export class UUICardMediaElement extends UUICardElement {
197192
opacity: 0;
198193
}
199194
195+
#content {
196+
position: relative;
197+
display: flex;
198+
width: 100%;
199+
align-items: center;
200+
font-family: inherit;
201+
font-size: var(--uui-type-small-size);
202+
box-sizing: border-box;
203+
text-align: left;
204+
word-break: break-word;
205+
padding-top: var(--uui-size-space-3);
206+
}
207+
208+
#content::before {
209+
content: '';
210+
position: absolute;
211+
inset: 0;
212+
z-index: -1;
213+
border-top: 1px solid var(--uui-color-divider);
214+
border-radius: 0 0 var(--uui-border-radius) var(--uui-border-radius);
215+
background-color: var(--uui-color-surface);
216+
pointer-events: none;
217+
opacity: 0.96;
218+
}
219+
220+
#name {
221+
font-weight: 700;
222+
}
223+
200224
:host(
201225
[image]:not([image='']):hover,
202226
[image]:not([image='']):focus,
@@ -210,6 +234,18 @@ export class UUICardMediaElement extends UUICardElement {
210234
transition-delay: 0s;
211235
}
212236
237+
:host([selectable]) #open-part {
238+
inset: var(--uui-size-space-3) var(--uui-size-space-4);
239+
}
240+
:host(:not([selectable])) #content {
241+
padding: var(--uui-size-space-3) var(--uui-size-space-4);
242+
}
243+
:host([selectable]) #content::before {
244+
inset: calc(var(--uui-size-space-3) * -1)
245+
calc(var(--uui-size-space-4) * -1);
246+
top: 0;
247+
}
248+
213249
/*
214250
#info-icon {
215251
margin-right: var(--uui-size-2);

0 commit comments

Comments
 (0)