Skip to content

Commit f73a852

Browse files
nielslyngsoenielslyngsoe
committed
correct card selection area
1 parent 0e26ecf commit f73a852

File tree

2 files changed

+150
-47
lines changed

2 files changed

+150
-47
lines changed

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

Lines changed: 74 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,15 @@ 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

@@ -41,18 +50,37 @@ export class UUICardContentNodeElement extends UUICardElement {
4150
return html`<uui-icon .svg="${this.fallbackIcon}"></uui-icon>`;
4251
}
4352

53+
protected renderDetail() {
54+
return html`<small id="detail"
55+
>${this.detail}<slot name="detail"></slot></small
56+
><slot id="default"></slot>`;
57+
}
58+
59+
#renderContent() {
60+
return html`
61+
<span id="content">
62+
<span id="item">
63+
<span id="icon">
64+
<slot name="icon" @slotchange=${this._onSlotIconChange}></slot>
65+
${this._iconSlotHasContent === false
66+
? this._renderFallbackIcon()
67+
: ''}
68+
</span>
69+
<div id="name">${this.name}<slot name="name"></slot></div>
70+
</span>
71+
${this.renderDetail()}
72+
</span>
73+
`;
74+
}
75+
4476
#renderButton() {
45-
return html`<div
77+
return html`<button
4678
id="open-part"
4779
tabindex=${this.disabled ? (nothing as any) : 0}
4880
@click=${this.handleOpenClick}
4981
@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>`;
82+
${this.#renderContent()}
83+
</button>`;
5684
}
5785

5886
#renderLink() {
@@ -67,11 +95,7 @@ export class UUICardContentNodeElement extends UUICardElement {
6795
this.target === '_blank' ? 'noopener noreferrer' : undefined,
6896
),
6997
)}>
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>
98+
${this.#renderContent()}
7599
</a>`;
76100
}
77101

@@ -81,7 +105,6 @@ export class UUICardContentNodeElement extends UUICardElement {
81105
<!-- Select border must be right after #open-part -->
82106
<div id="select-border"></div>
83107
84-
<slot></slot>
85108
<slot name="tag"></slot>
86109
<slot name="actions"></slot>
87110
`;
@@ -94,7 +117,6 @@ export class UUICardContentNodeElement extends UUICardElement {
94117
min-width: 250px;
95118
flex-direction: column;
96119
justify-content: space-between;
97-
padding: var(--uui-size-3) var(--uui-size-4);
98120
}
99121
100122
slot[name='tag'] {
@@ -132,30 +154,58 @@ export class UUICardContentNodeElement extends UUICardElement {
132154
line-height: calc(2 * var(--uui-size-3));
133155
}
134156
135-
#icon {
136-
font-size: 1.2em;
137-
margin-right: var(--uui-size-1);
138-
}
139-
140157
#open-part {
141158
display: flex;
142159
position: relative;
143160
font-weight: 700;
144161
align-items: center;
145162
cursor: pointer;
163+
flex-grow: 1;
164+
padding: var(--uui-size-space-4) var(--uui-size-space-5);
165+
}
166+
167+
#content {
168+
align-self: stretch;
169+
display: flex;
170+
flex-direction: column;
146171
}
147172
148-
:host([disabled]) #open-part {
173+
#item {
174+
position: relative;
175+
display: flex;
176+
align-self: stretch;
177+
line-height: normal;
178+
align-items: center;
179+
margin-top: var(--uui-size-1);
180+
}
181+
182+
#icon {
183+
font-size: 1.2em;
184+
margin-right: var(--uui-size-1);
185+
}
186+
187+
:host([selectable]) #open-part {
188+
flex-grow: 0;
189+
padding: 0;
190+
margin: var(--uui-size-space-4) var(--uui-size-space-5);
191+
}
192+
193+
:host([disabled]) #name {
149194
pointer-events: none;
150195
}
151196
152-
#open-part:hover {
197+
:host(:not([disabled])) #open-part:hover #icon {
198+
color: var(--uui-color-interactive-emphasis);
199+
}
200+
:host(:not([disabled])) #open-part:hover #name {
153201
text-decoration: underline;
154202
color: var(--uui-color-interactive-emphasis);
155203
}
156-
157-
#name {
158-
margin-top: 4px;
204+
:host(:not([disabled])) #open-part:hover #detail {
205+
color: var(--uui-color-interactive-emphasis);
206+
}
207+
:host(:not([disabled])) #open-part:hover #default {
208+
color: var(--uui-color-interactive-emphasis);
159209
}
160210
`,
161211
];

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

Lines changed: 76 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -133,48 +133,101 @@ export class UUICardElement extends SelectOnlyMixin(
133133
border-radius: var(--uui-border-radius);
134134
}
135135
136-
:host([selectable]) {
137-
cursor: pointer;
136+
button {
137+
font-size: inherit;
138+
font-family: inherit;
139+
border: 0;
140+
padding: 0;
141+
background-color: transparent;
142+
text-align: left;
143+
color: var(--uui-color-text);
138144
}
139145
140-
:host([disabled]) {
141-
background: var(--uui-color-disabled);
142-
color: var(--uui-color-disabled-contrast);
146+
a {
147+
text-decoration: none;
148+
color: inherit;
143149
}
144150
145-
:host([selectable])::after {
146-
content: '';
151+
:host([selectable]) {
152+
cursor: pointer;
153+
}
154+
:host([selectable]) #select-border {
147155
position: absolute;
156+
z-index: 2;
157+
top: -2px;
158+
left: -2px;
159+
right: -2px;
160+
bottom: -2px;
148161
pointer-events: none;
149-
inset: calc(var(--uui-card-border-width) * -1);
150-
width: calc(100% + calc(var(--uui-card-border-width) * 2));
151-
height: calc(100% + calc(var(--uui-card-border-width) * 2));
152-
box-sizing: border-box;
153-
border: var(--uui-card-border-width) solid var(--uui-color-selected);
154-
border-radius: calc(
155-
var(--uui-border-radius) + var(--uui-card-border-width)
156-
);
157-
transition: opacity 100ms ease-out;
158162
opacity: 0;
163+
transition: opacity 120ms;
164+
}
165+
:host([selectable]) #select-border::after {
166+
content: '';
167+
position: absolute;
168+
width: 100%;
169+
height: 100%;
170+
box-sizing: border-box;
171+
border: 2px solid var(--uui-color-selected);
172+
border-radius: calc(var(--uui-border-radius) + 2px);
173+
box-shadow:
174+
0 0 4px 0 var(--uui-color-selected),
175+
inset 0 0 2px 0 var(--uui-color-selected);
159176
}
160-
:host([selectable]:hover)::after {
177+
:host([selected]) #select-border {
178+
opacity: 1;
179+
}
180+
:host([selectable]:not([selected]):hover) #select-border {
161181
opacity: 0.33;
162182
}
163-
:host([selectable][selected]:hover)::after {
164-
opacity: 0.66;
183+
:host([selectable][selected]:hover) #select-border {
184+
opacity: 0.8;
185+
}
186+
187+
:host([selectable]:not([selected])) #open-part:hover + #select-border {
188+
opacity: 0;
165189
}
166-
:host([selectable][selected])::after {
190+
:host([selectable][selected]) #open-part:hover + #select-border {
167191
opacity: 1;
168192
}
169193
194+
:host([selectable]:not([selected]):hover) #select-border::after {
195+
animation: not-selected--hover 1.2s infinite;
196+
}
197+
@keyframes not-selected--hover {
198+
0%,
199+
100% {
200+
opacity: 0.66;
201+
}
202+
50% {
203+
opacity: 1;
204+
}
205+
}
206+
207+
:host([selectable][selected]:hover) #select-border::after {
208+
animation: selected--hover 1.4s infinite;
209+
}
210+
@keyframes selected--hover {
211+
0%,
212+
100% {
213+
opacity: 1;
214+
}
215+
50% {
216+
opacity: 0.66;
217+
}
218+
}
219+
:host([selectable]) #open-part:hover + #select-border::after {
220+
animation: none;
221+
}
222+
170223
:host([select-only]) *,
171224
:host([select-only]) ::slotted(*) {
172225
pointer-events: none;
173226
}
174227
175-
a {
176-
text-decoration: none;
177-
color: inherit;
228+
:host([disabled]) {
229+
background: var(--uui-color-disabled);
230+
color: var(--uui-color-disabled-contrast);
178231
}
179232
`,
180233
];

0 commit comments

Comments
 (0)