diff --git a/app/app.android.scss b/app/app.android.scss
index bbe65211..6026ead7 100644
--- a/app/app.android.scss
+++ b/app/app.android.scss
@@ -17,7 +17,7 @@ button[variant='contained'] {
.cardChip {
background-color: var(--colorPrimaryContainer);
border-color: transparent;
- border-radius: 10;
+ border-radius: 11;
border-width: 1;
}
@@ -40,27 +40,27 @@ textfield[variant='outline'] {
stroke-inactive-color: var(--colorOutline);
}
-// the floating buttons are fully round
+// the floating buttons: a small tonal add button above the extended Scan button, both with the elevation of floating controls
.addFab {
background-color: var(--colorSecondaryContainer);
+ border-radius: 12;
color: var(--colorOnSecondaryContainer);
- elevation: 2;
+ elevation: 6;
font-size: 24;
- height: 48;
- margin: 8;
+ height: 40;
+ horizontal-align: right;
+ margin: 0 16 12 16;
padding: 0;
- shape: round;
- vertical-align: center;
- width: 48;
+ width: 40;
}
.scanFab {
- elevation: 3;
- font-size: 16;
- font-weight: 600;
+ border-radius: 18;
+ elevation: 6;
+ font-size: 14;
+ font-weight: 500;
height: 56;
- margin: 16;
+ horizontal-align: right;
+ margin: 0 16 16 16;
padding: 0 20;
- shape: round;
- vertical-align: center;
}
diff --git a/app/app.common.scss b/app/app.common.scss
index 28cf3c1f..1bf7dfc2 100644
--- a/app/app.common.scss
+++ b/app/app.common.scss
@@ -322,11 +322,11 @@ textfield,
}
.cardChip {
+ height: 22;
horizontal-align: left;
- min-height: 24;
- min-width: 24;
+ min-width: 22;
+ padding: 0;
vertical-align: middle;
- padding: 4 8;
}
.cardsEmptyIcon {
diff --git a/app/components/common/CardChip.svelte b/app/components/common/CardChip.svelte
index d4ea8933..14fdd1fa 100644
--- a/app/components/common/CardChip.svelte
+++ b/app/components/common/CardChip.svelte
@@ -2,22 +2,37 @@
import CardIcon from '~/components/common/CardIcon.svelte';
import { colors } from '~/variables';
+ interface ChipSegment {
+ icon?: string;
+ text?: string;
+ }
+
export let text: string = null;
export let icon: string = null;
+ /** several segments are one pill with a hairline between them */
+ export let segments: ChipSegment[] = null;
export let fontWeight: any = '600';
let { colorOnPrimaryContainer, colorOnSurface } = $colors;
$: ({ colorOnPrimaryContainer, colorOnSurface } = $colors);
$: color = __IOS__ ? colorOnSurface : colorOnPrimaryContainer;
+ $: parts = segments ?? [{ icon, text }];
- {#if icon}
-
- {/if}
- {#if text}
-
- {/if}
+ {#each parts as part, index}
+ {#if index > 0}
+
+ {/if}
+
+ {#if part.icon}
+
+ {/if}
+ {#if part.text}
+
+ {/if}
+
+ {/each}
diff --git a/app/components/list/CardListCell.svelte b/app/components/list/CardListCell.svelte
index e0c7566d..2ab3b979 100644
--- a/app/components/list/CardListCell.svelte
+++ b/app/components/list/CardListCell.svelte
@@ -25,8 +25,8 @@
-
+
{#if !tile}
-
+
{/if}
diff --git a/app/components/list/MainList.svelte b/app/components/list/MainList.svelte
index 013bbe8b..a055d942 100644
--- a/app/components/list/MainList.svelte
+++ b/app/components/list/MainList.svelte
@@ -1357,19 +1357,37 @@
$: primaryAction = actions.find((action) => action.primary);
$: secondaryActions = actions.filter((action) => !action.primary);
$: plusMenu = secondaryActions.map((action) => ({ title: action.text, icon: appIcon(action.icon), onSelect: action.onTap }));
+ // the main actions of the selection, in order: the rest goes to the more menu
+ function getSelectionActionIds() {
+ if (isTrash) {
+ return ['select_all', 'restore', 'delete_permanently'];
+ }
+ return CARD_APP ? (__IOS__ ? ['share', 'favorite', 'move_folder', 'delete'] : ['favorite', 'move_folder', 'delete']) : ['pdf', 'share', 'delete'];
+ }
+ function splitSelectionOptions(options: OptionType[]) {
+ const toolbarIds = getSelectionActionIds();
+ return {
+ main: toolbarIds.map((id) => options.find((option) => option.id === id)).filter(Boolean),
+ more: options.filter((option) => !toolbarIds.includes(option.id))
+ };
+ }
+ const onSelectionAction = (option: OptionType) => handleSelectionAction({ object: collectionView?.nativeView }, option);
+ // Android: the actions are in the top bar while selecting, iOS: in the bottom toolbar
+ $: selectionOptions = nbSelected > 0 ? splitSelectionOptions(getSelectionToolbarOptions()) : { main: [], more: [] };
+ $: selectionMoreMenu = optionsToMenuItems(selectionOptions.more, onSelectionAction);
function getSelectionBottomItems(options: OptionType[]) {
- const toolbarIds = isTrash ? options.map((option) => option.id) : ['pdf', 'share', 'delete'];
- const toolbarOptions = options.filter((option) => toolbarIds.includes(option.id));
- const menuOptions = options.filter((option) => !toolbarIds.includes(option.id));
- const onAction = (option: OptionType) => handleSelectionAction({ object: collectionView?.nativeView }, option);
- const items: any[] = toolbarOptions.flatMap((option) => [{ spacer: true }, { text: option.name, icon: appIcon(option.id), onTap: () => onAction(option) }]);
- if (menuOptions.length) {
+ if (__ANDROID__) {
+ return [];
+ }
+ const { main, more } = splitSelectionOptions(options);
+ const items: any[] = main.flatMap((option) => [{ spacer: true }, { text: option.name, icon: appIcon(option.id), onTap: () => onSelectionAction(option) }]);
+ if (more.length) {
items.push(
{ spacer: true },
{
text: lc('more_options'),
icon: appIcon('more'),
- menu: optionsToMenuItems(menuOptions, onAction)
+ menu: optionsToMenuItems(more, onSelectionAction)
}
);
}
@@ -1427,6 +1445,7 @@
0 ? colorPrimaryContainer : undefined}
scrollBehavior="lift"
searchable={!isTrash && !onlyForImport && nbSelected === 0}
scrollTargetId="documentsCollectionView"
@@ -1476,6 +1495,13 @@
{/if}
{:else if __IOS__}
+ {:else}
+ {#each selectionOptions.main as option (option.id)}
+ onSelectionAction(option)} />
+ {/each}
+ {#if selectionMoreMenu.length}
+
+ {/if}
{/if}