MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fix multiple issues with long text overflow

This commit is contained in:
Andrew Kingston 2022-12-21 08:45:54 +00:00
parent a4aea23bf9
commit d684ab95f2
6 changed files with 42 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
packages/bbui/src/Icon/IconAvatar.svelte
View File

@ -19,6 +19,7 @@
.icon { .icon {
width: 28px; width: 28px;
height: 28px; height: 28px;
flex: 0 0 28px;
display: grid; display: grid;
place-items: center; place-items: center;
border-radius: 50%; border-radius: 50%;
@ -34,6 +35,7 @@
.icon.size--S { .icon.size--S {
width: 22px; width: 22px;
height: 22px; height: 22px;
flex: 0 0 22px;
} }
.icon.size--S :global(.spectrum-Icon) { .icon.size--S :global(.spectrum-Icon) {
width: 16px; width: 16px;
@ -46,6 +48,7 @@
.icon.size--L { .icon.size--L {
width: 40px; width: 40px;
height: 40px; height: 40px;
flex: 0 0 40px;
} }
.icon.size--L :global(.spectrum-Icon) { .icon.size--L :global(.spectrum-Icon) {
width: 28px; width: 28px;

9
packages/bbui/src/List/ListItem.svelte
View File

@ -30,9 +30,11 @@
<Label>{subtitle}</Label> <Label>{subtitle}</Label>
{/if} {/if}
</div> </div>
<div class="right"> {#if $$slots.default}
<slot /> <div class="right">
</div> <slot />
</div>
{/if}
</div> </div>
<style> <style>
@ -45,6 +47,7 @@
justify-content: space-between; justify-content: space-between;
border: 1px solid var(--spectrum-global-color-gray-300); border: 1px solid var(--spectrum-global-color-gray-300);
transition: background 130ms ease-out; transition: background 130ms ease-out;
gap: var(--spacing-m);
} }
.list-item:not(:first-child) { .list-item:not(:first-child) {
border-top: none; border-top: none;

41
packages/builder/src/pages/builder/portal/users/groups/[groupId].svelte
View File

@ -111,25 +111,19 @@
</Breadcrumbs> </Breadcrumbs>
<div class="header"> <div class="header">
<div class="title"> <GroupIcon {group} size="L" />
<GroupIcon {group} size="L" /> <Heading>{group?.name}</Heading>
<div class="text-padding"> <ActionMenu align="right">
<Heading>{group?.name}</Heading> <span slot="control">
</div> <Icon hoverable name="More" />
</div> </span>
<div> <MenuItem icon="Refresh" on:click={() => editModal.show()}>
<ActionMenu align="right"> Edit
<span slot="control"> </MenuItem>
<Icon hoverable name="More" /> <MenuItem icon="Delete" on:click={() => deleteModal.show()}>
</span> Delete
<MenuItem icon="Refresh" on:click={() => editModal.show()}> </MenuItem>
Edit </ActionMenu>
</MenuItem>
<MenuItem icon="Delete" on:click={() => deleteModal.show()}>
Delete
</MenuItem>
</ActionMenu>
</div>
</div> </div>
<Layout noPadding gap="S"> <Layout noPadding gap="S">
@ -243,13 +237,12 @@
<style> <style>
.header { .header {
display: flex; display: flex;
justify-content: space-between; flex-direction: row;
align-items: flex-end;
}
.title {
display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
gap: var(--spacing-m); gap: var(--spacing-m);
} }
.header :global(.spectrum-Heading) {
flex: 1 1 auto;
}
</style> </style>

11
packages/builder/src/pages/builder/portal/users/groups/_components/GroupNameTableRenderer.svelte
View File

@ -8,7 +8,9 @@
<div class="align"> <div class="align">
{#if value} {#if value}
<GroupIcon group={row} /> <GroupIcon group={row} />
{value} <div class="text">
{value}
</div>
{:else} {:else}
<div class="text">-</div> <div class="text">-</div>
{/if} {/if}
@ -20,8 +22,13 @@
align-items: center; align-items: center;
overflow: hidden; overflow: hidden;
gap: var(--spacing-m); gap: var(--spacing-m);
max-width: var(--max-cell-width);
flex: 1 1 auto;
width: 0;
} }
.text { .text {
opacity: 0.8; overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
} }
</style> </style>

6
packages/builder/src/pages/builder/portal/users/groups/index.svelte
View File

@ -40,9 +40,9 @@
] ]
$: schema = { $: schema = {
name: { displayName: "Group" }, name: { displayName: "Group", width: "2fr" },
users: { sortable: false }, users: { sortable: false, width: "1fr" },
roles: { sortable: false, displayName: "Apps" }, roles: { sortable: false, displayName: "Apps", width: "1fr" },
} }
$: filteredGroups = filterGroups($groups, searchString) $: filteredGroups = filterGroups($groups, searchString)

5
packages/builder/src/pages/builder/portal/users/users/index.svelte
View File

@ -56,15 +56,18 @@
$: schema = { $: schema = {
email: { email: {
sortable: false, sortable: false,
width: "2fr",
}, },
role: { role: {
sortable: false, sortable: false,
width: "1fr",
}, },
...($licensing.groupsEnabled && { ...($licensing.groupsEnabled && {
userGroups: { sortable: false, displayName: "Groups" }, userGroups: { sortable: false, displayName: "Groups", width: "1fr" },
}), }),
apps: { apps: {
sortable: false, sortable: false,
width: "1fr",
}, },
} }
$: userData = [] $: userData = []