budibase/packages/bbui/src/List/ListItem.svelte

94 lines
2.1 KiB
Svelte
Raw Normal View History

<script>
import Body from "../Typography/Body.svelte"
import IconAvatar from "../Icon/IconAvatar.svelte"
import Label from "../Label/Label.svelte"
import Avatar from "../Avatar/Avatar.svelte"
export let icon = null
export let iconBackground = null
export let iconColor = null
export let avatar = false
export let title = null
export let subtitle = null
export let hoverable = false
$: initials = avatar ? title?.[0] : null
</script>
<div class="list-item" class:hoverable on:click>
<div class="left">
{#if icon}
<IconAvatar {icon} color={iconColor} background={iconBackground} />
{/if}
{#if avatar}
<Avatar {initials} />
{/if}
{#if title}
<Body>{title}</Body>
{/if}
{#if subtitle}
<Label>{subtitle}</Label>
{/if}
</div>
Portal redesign (#9336) * Update BB logo to black * Update top nav bar and core layout * Add redesign for apps pages * Update user and groups pages * More WIP portal redesign! * Fix top nav colours and fix selected tab not updating * Remove log * Update copy on settings pages * Update and standardise page headers and subtitles, and remove side nav titles * Update font styles to allow for easy customisation * Update button styles to always use newStyles, update auth page styles * Update settings pages to new designs * Update structure for account pages * Add initial rewrite of app overview section * Update config checklist to properly center * Update app overview version and name/url screens * Add tooltip to explain why URL cannot be changed until unpublishing * Update overview automation history tab * Update overview backups page * Rewrite app overview access tab * Update table hover colours * Remove scrolling from tables when not required and stop selects from updating their own state locally * Update table styles to support flexible column widths much better * Fix extremely long strings in breadcrumbs not wrapping * Fix multiple issues with long text overflow * Fix flashing in version settings page * Fix loading bugs in app backups page * Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues * Tidy up * Update user details page to use tables and match designs * Update users detail page * Update user and group details pages with new tables * Fix automation error linking from apps page and improve automation fetching logic in automation history * Move theme and API key into user profile dropdown instead of settings * Move settings before account and show plugins for devs * Convert plugins page to table and update components and modals * Update links when going back from the builder * Update plugin search placeholder * Fix URLs in app overview * Properly handle text overflow in plugins table * Remove getting started checklist * Fix checklist removal and fix profile modal * Update email details page to match new designs * Cleanup * Add licensing and env logic to determine which account links to show * Update upgrade button URL for cloud accounts * Update app list to use a more compact style * Make core page layout responsive and update apps list to be responsive * Update mobile design of apps page * Update more pages to be responsive and add mobile specific components * Refactor main portal page into multiple components * Update multiple pages to be responsive and improve loading experience * Make automation history page responsive * Update backups page to be responsive * Update pickers to use absolutely positioned root popover so that overflow does not matter * Fix some responsive styles * Fix update link in app overview * Improve dropdown logic * Lint * Update click outside handler to handle modals properly * Remove log * Fix mobile menu upgrade button not closing menu * Hide groups page if disabled at tenant level * Centralise menu logic and show full menu on mobile * Update app access assignment and fix backups table * Ensure avatars cannot be squished * Standardise disabled field text colour * Allow developer users to access users, groups and usage pages * Allow readonly access to users and groups for developer users * Remove logs * Improve users page loading experience * Improve responsiveness on apps list page and fix discussions link styles * Update spacing on user and group detail page and fix usage page showing wrong copy * Fix logo override not working * Pin minio version to an old one that supports the fs backend in dev * Shrink upgrade button * Shrink user dropdown * Update assignment modal text * Remove clickable visual styles from plugins * Always show groups section in app access page * Update app overview button styles to include more CTAs * Hide edit and view links in more menu on overview page unless on mobile * Make usage stats responsive and fix layout issues * Add comment to docker-compose config
2023-01-18 14:56:53 +01:00
{#if $$slots.default}
<div class="right">
<slot />
</div>
{/if}
</div>
<style>
.list-item {
padding: 0 16px;
height: 56px;
background: var(--spectrum-global-color-gray-50);
display: flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid var(--spectrum-global-color-gray-300);
transition: background 130ms ease-out;
Portal redesign (#9336) * Update BB logo to black * Update top nav bar and core layout * Add redesign for apps pages * Update user and groups pages * More WIP portal redesign! * Fix top nav colours and fix selected tab not updating * Remove log * Update copy on settings pages * Update and standardise page headers and subtitles, and remove side nav titles * Update font styles to allow for easy customisation * Update button styles to always use newStyles, update auth page styles * Update settings pages to new designs * Update structure for account pages * Add initial rewrite of app overview section * Update config checklist to properly center * Update app overview version and name/url screens * Add tooltip to explain why URL cannot be changed until unpublishing * Update overview automation history tab * Update overview backups page * Rewrite app overview access tab * Update table hover colours * Remove scrolling from tables when not required and stop selects from updating their own state locally * Update table styles to support flexible column widths much better * Fix extremely long strings in breadcrumbs not wrapping * Fix multiple issues with long text overflow * Fix flashing in version settings page * Fix loading bugs in app backups page * Add sidebar for portal and use it for automation history. Fix multiple overflow and scrolling issues * Tidy up * Update user details page to use tables and match designs * Update users detail page * Update user and group details pages with new tables * Fix automation error linking from apps page and improve automation fetching logic in automation history * Move theme and API key into user profile dropdown instead of settings * Move settings before account and show plugins for devs * Convert plugins page to table and update components and modals * Update links when going back from the builder * Update plugin search placeholder * Fix URLs in app overview * Properly handle text overflow in plugins table * Remove getting started checklist * Fix checklist removal and fix profile modal * Update email details page to match new designs * Cleanup * Add licensing and env logic to determine which account links to show * Update upgrade button URL for cloud accounts * Update app list to use a more compact style * Make core page layout responsive and update apps list to be responsive * Update mobile design of apps page * Update more pages to be responsive and add mobile specific components * Refactor main portal page into multiple components * Update multiple pages to be responsive and improve loading experience * Make automation history page responsive * Update backups page to be responsive * Update pickers to use absolutely positioned root popover so that overflow does not matter * Fix some responsive styles * Fix update link in app overview * Improve dropdown logic * Lint * Update click outside handler to handle modals properly * Remove log * Fix mobile menu upgrade button not closing menu * Hide groups page if disabled at tenant level * Centralise menu logic and show full menu on mobile * Update app access assignment and fix backups table * Ensure avatars cannot be squished * Standardise disabled field text colour * Allow developer users to access users, groups and usage pages * Allow readonly access to users and groups for developer users * Remove logs * Improve users page loading experience * Improve responsiveness on apps list page and fix discussions link styles * Update spacing on user and group detail page and fix usage page showing wrong copy * Fix logo override not working * Pin minio version to an old one that supports the fs backend in dev * Shrink upgrade button * Shrink user dropdown * Update assignment modal text * Remove clickable visual styles from plugins * Always show groups section in app access page * Update app overview button styles to include more CTAs * Hide edit and view links in more menu on overview page unless on mobile * Make usage stats responsive and fix layout issues * Add comment to docker-compose config
2023-01-18 14:56:53 +01:00
gap: var(--spacing-m);
}
.list-item:not(:first-child) {
border-top: none;
}
.list-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-item:last-child {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.hoverable:hover {
cursor: pointer;
background: var(--spectrum-global-color-gray-75);
}
.left,
.right {
display: flex;
flex-direction: row;
align-items: center;
gap: var(--spacing-xl);
}
.left {
width: 0;
flex: 1 1 auto;
}
.right {
flex: 0 0 auto;
}
.list-item :global(.spectrum-Icon),
.list-item :global(.spectrum-Avatar) {
flex: 0 0 auto;
}
.list-item :global(.spectrum-Body) {
color: var(--spectrum-global-color-gray-900);
}
.list-item :global(.spectrum-Body) {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
</style>