d92f1a7097
* 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
93 lines
2.1 KiB
Svelte
93 lines
2.1 KiB
Svelte
<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>
|
|
{#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;
|
|
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>
|