e93f195d59
* Reorders actions, adds tooltip - All copy buttons on the collection share dialog are now on the right side - Adds a tooltip to tell the user the button opens the link in a new tab * Make vertical `dec-list` items fill 100% width of their parent container - Allows for better placement of items within the container - Adds horizontal padding to info bars * Right align copy button in item details page
108 lines
2.3 KiB
TypeScript
108 lines
2.3 KiB
TypeScript
/**
|
|
* Styled <dl>, <dt> and <dd> for displaying data
|
|
* as a list of key-value pair.
|
|
*
|
|
* Usage example:
|
|
* ```ts
|
|
* <btrix-desc-list>
|
|
* <btrix-desc-list-item label="Color">
|
|
* Red
|
|
* </btrix-desc-list-item>
|
|
* <btrix-desc-list-item label="Size">
|
|
* Large
|
|
* </btrix-desc-list-item>
|
|
* </btrix-desc-list>
|
|
* ```
|
|
*/
|
|
import { LitElement, html, css } from "lit";
|
|
import { property } from "lit/decorators.js";
|
|
import { classMap } from "lit/directives/class-map.js";
|
|
|
|
export class DescListItem extends LitElement {
|
|
static styles = css`
|
|
:host {
|
|
display: contents;
|
|
}
|
|
|
|
dt {
|
|
color: var(--sl-color-neutral-500);
|
|
font-size: var(--sl-font-size-x-small);
|
|
line-height: 1rem;
|
|
margin: var(--sl-spacing-3x-small) 0;
|
|
}
|
|
|
|
dd {
|
|
margin: 0;
|
|
padding: 0 0 var(--sl-spacing-2x-small);
|
|
color: var(--sl-color-neutral-700);
|
|
font-size: var(--sl-font-size-medium);
|
|
font-family: var(--font-monostyle-family);
|
|
font-variation-settings: var(--font-monostyle-variation);
|
|
line-height: 1rem;
|
|
}
|
|
|
|
.item {
|
|
display: flex;
|
|
justify-content: var(--justify-item, initial);
|
|
border-right: var(--border-right, 0px);
|
|
}
|
|
|
|
.content {
|
|
width: var(--width-full, initial);
|
|
}
|
|
`;
|
|
|
|
@property({ type: String })
|
|
label: string = "";
|
|
|
|
render() {
|
|
return html`<div class="item">
|
|
<div class="content">
|
|
<dt>${this.label}</dt>
|
|
<dd><slot></slot></dd>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
}
|
|
|
|
export class DescList extends LitElement {
|
|
static styles = css`
|
|
dl {
|
|
display: grid;
|
|
margin: 0;
|
|
}
|
|
|
|
.vertical {
|
|
grid-template-columns: 100%;
|
|
gap: 1rem;
|
|
--width-full: 100%;
|
|
}
|
|
|
|
.horizontal {
|
|
--justify-item: center;
|
|
--border-right: 1px solid var(--sl-panel-border-color);
|
|
grid-auto-flow: column;
|
|
}
|
|
|
|
/* Although this only applies to .horizontal, apply to any last child
|
|
since we can't do complex selectors with ::slotted */
|
|
::slotted(*:last-of-type) {
|
|
--border-right: 0px;
|
|
}
|
|
`;
|
|
|
|
@property({ type: Boolean })
|
|
horizontal = false;
|
|
|
|
render() {
|
|
return html`<dl
|
|
class=${classMap({
|
|
vertical: !this.horizontal,
|
|
horizontal: this.horizontal,
|
|
})}
|
|
>
|
|
<slot></slot>
|
|
</dl>`;
|
|
}
|
|
}
|