Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
  ayushyaandClaude Sonnet 5
|
c18fc98dc3 | ||
|
ayushyaandClaude Sonnet 5
|
b73f451fff | ||
|
ayushyaandClaude Sonnet 5
|
f9653bc0f2 | ||
|
ayushyaandClaude Sonnet 5
|
4e6477a3ae | ||
|
ayushya
|
a127d72d56 | ||
|
ayushya
|
0abea46b1c | ||
|
ayushya
|
c0f702b00e | ||
|
ayushya
|
8d17ae1f4b | ||
|
ayushya
|
1b8bbaa22f | ||
|
ayushya
|
72472c771a | ||
|
ayushya
|
c9889c69b8 | ||
|
ayushya
|
254db255a7 | ||
|
ayushya
|
800e8ebf44 | ||
|
ayushya
|
d2c34b000f | ||
|
ayushyaandClaude Opus 5.5
|
c2540ec2ce | ||
|
ayushyaandClaude Opus 5.5
|
56784ef212 | ||
|
ayushyaandClaude Sonnet 5
|
51682a901d |
@@ -0,0 +1,70 @@
|
||||
---
|
||||
name: flutter-kgp-doctor
|
||||
description: Diagnoses and fixes Flutter's "plugin applies Kotlin Gradle Plugin (KGP)" build warning - the one that names specific plugins (e.g. "Your app uses the following plugins that apply Kotlin Gradle Plugin (KGP): file_saver, pdfx") and links to the Built-in Kotlin migration guide. Use whenever `flutter build`/`flutter run` prints this warning, or when checking whether it's safe to upgrade a plugin that previously triggered it.
|
||||
tools: Read, Edit, Grep, Glob, Bash, WebFetch, WebSearch
|
||||
---
|
||||
|
||||
You fix Flutter's Kotlin Gradle Plugin (KGP) migration warning, which looks
|
||||
like:
|
||||
|
||||
```
|
||||
WARNING: Your app uses the following plugins that apply Kotlin Gradle Plugin (KGP): file_saver, pdfx
|
||||
Future versions of Flutter will fail to build if your app uses plugins that apply KGP.
|
||||
```
|
||||
|
||||
## Background
|
||||
|
||||
Flutter is moving to a model where the Flutter Gradle plugin applies Kotlin
|
||||
itself ("Built-in Kotlin"), rather than each Android plugin applying its own
|
||||
copy of the Kotlin Gradle Plugin in its `android/build.gradle`. Plugins that
|
||||
haven't migrated yet trigger this warning today and will hard-fail the build
|
||||
in a future Flutter release. The fix lives upstream, in the plugin's own
|
||||
`android/build.gradle` (removing its own `apply plugin:
|
||||
'kotlin-android'`/`id("kotlin-android")` in favor of Flutter's built-in
|
||||
support) - not in this app.
|
||||
|
||||
Reference: https://docs.flutter.dev/release/breaking-changes/migrate-to-built-in-kotlin/for-app-developers
|
||||
|
||||
## What to do
|
||||
|
||||
1. Run `flutter build apk --release` (faster than `appbundle`) or use the
|
||||
warning text the user already has, to get the exact list of named
|
||||
plugins.
|
||||
2. For each plugin, find its current pinned version in `pubspec.yaml` and
|
||||
the resolved version in `pubspec.lock`.
|
||||
3. Check whether a newer published version has migrated:
|
||||
- Check the plugin's CHANGELOG.md (pub.dev shows it, or the package's
|
||||
GitHub repo) for entries mentioning "Built-in Kotlin", "KGP", or
|
||||
removing `kotlin-android` from its `android/build.gradle`.
|
||||
- If unsure from the changelog alone, fetch the candidate version's
|
||||
`android/build.gradle` from pub.dev/GitHub directly and check whether
|
||||
it still applies the Kotlin Gradle Plugin itself.
|
||||
4. If a migrated version exists and satisfies (or can reasonably relax) the
|
||||
app's other constraints:
|
||||
- Bump the version constraint in `pubspec.yaml`.
|
||||
- Run `flutter pub get`.
|
||||
- Rebuild (`flutter build apk --release` is enough to confirm) and
|
||||
verify that specific plugin no longer appears in the warning's list.
|
||||
- Run `flutter analyze` and skim for anything the upgrade broke (API
|
||||
changes) before calling it done.
|
||||
5. If no migrated version exists yet:
|
||||
- Do not attempt to silence the warning (no Gradle flags, no
|
||||
suppressing build output) - it is telling the truth about a real
|
||||
future break.
|
||||
- Do not fork or hand-patch the plugin's Android Gradle files inside
|
||||
`pub-cache` - that gets overwritten on the next `flutter pub get` and
|
||||
isn't tracked by the repo anyway.
|
||||
- Report which plugin(s) are still blocked, their current version, and
|
||||
whether the upstream issue tracker already has an open issue for this
|
||||
(search it) - file a note for the user rather than opening the issue
|
||||
yourself.
|
||||
|
||||
## Reporting
|
||||
|
||||
For each plugin named in the original warning, state one of:
|
||||
- **Fixed**: upgraded from `X` to `Y` in `pubspec.yaml`, confirmed the
|
||||
warning no longer names it.
|
||||
- **Blocked**: still on `X`, no migrated release exists yet, link to the
|
||||
changelog/issue you checked.
|
||||
|
||||
Keep the report short - a couple of lines per plugin is enough.
|
||||
+161
-46
@@ -13,20 +13,34 @@ lib/
|
||||
# ItemOperations, a plain cross-domain coordinator
|
||||
services/ # network/IO: NextcloudService, LoginFlowService,
|
||||
# AccountStore, AppLockService
|
||||
theme/ # AppTheme (Material 3 ThemeData)
|
||||
theme/ # AppTheme (Material 3 ThemeData, pre-rework
|
||||
# screens) + design_tokens.dart (NooColors/NooText/
|
||||
# NooSpace/NooRadii/NooSizes/NooMotion - see
|
||||
# styling.md's "Noo design-system components")
|
||||
views/ # one screen each (FilesView, PhotosView, TrashView,
|
||||
# SharesView, RecentView, ActivityView, SearchView,
|
||||
# AccountView, LoginView, FileViewerScreen,
|
||||
# ShareUploadView, LockScreenView)
|
||||
widgets/ # reusable pieces shared across views
|
||||
noo/ # the Noo design-system component kit - see
|
||||
# styling.md's catalog
|
||||
details/ # the file-details bottom sheet and its tabs
|
||||
shell/ # pieces shared by the mobile/desktop app shell
|
||||
settings/ # Settings' section widgets
|
||||
tabs/ # loading/error/empty slivers + grouping helpers
|
||||
# shared by Recent/Activity/Trash/Shares
|
||||
files/ # pieces split out of FilesView (e.g. the
|
||||
# breadcrumb row)
|
||||
```
|
||||
|
||||
`views/` files are screens routed to directly (a tab, or pushed via
|
||||
`Navigator`). `widgets/` files are building blocks used by more than one
|
||||
view (or complex enough to warrant their own file) — nothing in `widgets/`
|
||||
owns app state itself; it reads whichever controller(s) it needs via
|
||||
`context.watch`/`context.read`.
|
||||
`context.watch`/`context.read`. Most tabs, the app shell, and Settings are
|
||||
now built from `widgets/noo/` rather than raw Material widgets - see
|
||||
`styling.md`'s "Noo design-system components" for the token/component
|
||||
catalog and the current rebuild status.
|
||||
|
||||
## State management
|
||||
|
||||
@@ -100,8 +114,9 @@ new provider instance):
|
||||
mirror, not a second view. `offline` only swaps the data source, reads
|
||||
images from the local file (`localFileFor`) instead of a server preview,
|
||||
and turns off what needs the server: selection and bulk actions, swipe
|
||||
actions, sync badges, "+" (replaced by "Manage synced folders"), pick
|
||||
mode. The two `FilesView`s are keyed in `buildAppTabView` so the
|
||||
actions, per-item sync status icons, "+" (replaced by "Manage synced
|
||||
folders"), pick mode. The two `FilesView`s are keyed in `buildAppTabView`
|
||||
so the
|
||||
`IndexedStack` never hands one's State to the other.
|
||||
- [`OfflineController`](../../lib/providers/offline_controller.dart) — the
|
||||
Files tab's folder listing read from local storage instead of the
|
||||
@@ -138,6 +153,42 @@ new provider instance):
|
||||
(shares/activity/versions/restore) — stateless, so they don't need a
|
||||
controller of their own.
|
||||
|
||||
**Guardrail - the "empty list on first load" failure class.** This bug has
|
||||
recurred more than once, always the same shape: a tab's list is empty after
|
||||
login even though the account is fine, because the controller behind it
|
||||
never ran its initial fetch. The cause is a race, not a network bug:
|
||||
`addAccountActivatedListener`/`addAccountReadyListener` fire *once*, at the
|
||||
moment login is verified/ready, to whichever listeners are registered at
|
||||
that exact instant - and most per-domain controllers (`FilesController`,
|
||||
`PhotosController`, `FavoritesController`, `TrashController`,
|
||||
`SharesController`, `RecentController`) are lazy `ChangeNotifierProvider`s,
|
||||
only constructed (and so only registering their listener) whenever
|
||||
something first reads them. If that first read happens to land *after*
|
||||
the one-shot event already fired - e.g. `ConnectivityController`
|
||||
misreporting offline for its first couple of seconds after a cold Android
|
||||
start (see its own doc comment) collapses `main.dart`'s bottom nav to just
|
||||
the Offline tab, delaying construction of every other tab's controller
|
||||
until connectivity corrects itself and login has already finished
|
||||
verifying - that controller's listener registers too late and its initial
|
||||
fetch simply never happens. `SessionController.addAccountActivatedListener`/
|
||||
`addAccountReadyListener` now close this at the root: registering either
|
||||
one calls back **immediately** if the account is already in the state
|
||||
being subscribed to, not just on the next fresh event, so a late-registering
|
||||
controller always gets its initial fetch regardless of when its lazy
|
||||
`Provider` happens to be built. Some views (`FilesView`/`PhotosView`, not
|
||||
`FavoritesView` - see `FavoritesController`'s own doc comment) additionally
|
||||
carry a build-time fallback (`_requestedInitialLoad` et al.: reload if
|
||||
items are empty and not loading, once, after first build) predating this
|
||||
fix; they're now redundant but harmless, and not worth touching for
|
||||
cleanup alone. **Guardrail for new code:** any new network-fetching
|
||||
controller that needs a one-time fetch on login must register through
|
||||
`addAccountActivatedListener`/`addAccountReadyListener` in its constructor
|
||||
and rely on their catch-up behavior - don't reach for a per-view
|
||||
build-time "fetch if empty" fallback as the primary mechanism, since that
|
||||
pattern is exactly what let this bug keep recurring silently (three
|
||||
near-duplicate, slightly-diverging implementations, none of them fixing
|
||||
the actual race).
|
||||
|
||||
`sessionGeneration` (on `SessionController`, read by every other
|
||||
controller) is incremented on every account switch so an in-flight fetch
|
||||
from the account just left can recognize it's stale and discard its result
|
||||
@@ -175,15 +226,18 @@ directly, which call `NextcloudService`/`LoginFlowService`/`AccountStore`/
|
||||
- else `session.needsUnlock` → `LockScreenView` (login lock — see above)
|
||||
- else `MainShellView`
|
||||
|
||||
`MainShellView` is a bottom-nav `IndexedStack` over up to 8 tabs — Files,
|
||||
Photos, Favorites, Activity, Trash, Shares, Recent, Offline — user-configurable
|
||||
`MainShellView` is an `IndexedStack` over up to 8 tabs — Files, Photos,
|
||||
Favorites, Activity, Trash, Shares, Recent, Offline — user-configurable
|
||||
(order, visibility up to `maxVisibleTabs`, default tab) via
|
||||
`AppTab`/`SettingsController` and rendered through `buildAppTabView`
|
||||
(`widgets/app_tab_view_builder.dart`). `maxVisibleTabs` (5) is less than the
|
||||
total tab count, and `SettingsController._enforceMaxVisibleTabs` already
|
||||
auto-hides overflow on load (fresh install, or - as when Favorites was
|
||||
added - an existing saved tab order from before a new tab existed), so
|
||||
adding a tab to the `AppTab` enum needs no extra migration.
|
||||
adding a tab to the `AppTab` enum needs no extra migration. Only the (up
|
||||
to) 5 pinned tabs (`settings.visibleTabs`) become bottom-nav/sidebar
|
||||
destinations; the rest sit in the "More" section of the drawer (mobile) or
|
||||
sidebar (desktop) - see below.
|
||||
Each tab keeps its own `ScrollController` (survives tab switches via
|
||||
`IndexedStack`'s built-but-hidden trees) and tapping the already-active tab
|
||||
scrolls it back to top (`tapTabToScrollTop` setting). `MainShellView` also
|
||||
@@ -206,40 +260,85 @@ only two that make sense as external "choose a file" sources. The same
|
||||
override mechanism restricts the visible tabs to just Offline while
|
||||
`ConnectivityController.isOffline` - see `server.md`'s "Working offline"
|
||||
section for the full story, including why session restore itself has to
|
||||
avoid making a network request in that case. `MoreTabsButton` hides
|
||||
entirely in both cases (picking, offline) for the same reason - there's
|
||||
nothing it could usefully open.
|
||||
avoid making a network request in that case. The drawer/sidebar's "More"
|
||||
section is empty in both cases (picking, offline) for the same reason -
|
||||
there's nothing useful in it to switch to - and the mobile drawer doesn't
|
||||
open at all while picking (`Scaffold.drawer` is null).
|
||||
`MainShellView` also fires a one-time notification-permission prompt on
|
||||
its first mount (`_maybeRequestNotificationPermission`, gated by a plain
|
||||
`shared_preferences` flag so it only ever asks once, not on every
|
||||
launch): a plain-language `AlertDialog` explaining why Noo wants it
|
||||
(upload/download progress notifications - see `ShareUploadService.kt`/
|
||||
`DownloadService.kt`) before the OS's own `permission_handler`-driven
|
||||
`Permission.notification.request()`, since the bare system prompt gives
|
||||
no context on its own.
|
||||
launch): a plain-language dialog (`showNooDialog`, two `NooButton`s)
|
||||
explaining why Noo wants it (upload/download progress notifications - see
|
||||
`ShareUploadService.kt`/`DownloadService.kt`) before the OS's own
|
||||
`permission_handler`-driven `Permission.notification.request()`, since the
|
||||
bare system prompt gives no context on its own.
|
||||
|
||||
`FloatingBottomNavBar` (`widgets/floating_bottom_bar.dart`) wraps its
|
||||
pill's item row in a horizontal `SingleChildScrollView` rather than a
|
||||
plain `Row`, so a wide selected-item label plus several icon-only tabs
|
||||
scrolls instead of overflowing on narrower screens.
|
||||
`MainShellView` builds its chrome from the Noo nav kit
|
||||
(`widgets/noo/nav/`) and switches between two layouts on
|
||||
`NooLayout.isDesktop`:
|
||||
|
||||
All eight tabs, plus `ShareUploadView` (the share-to-upload destination
|
||||
picker, pushed rather than a tab - see below), share
|
||||
[`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) — a
|
||||
- **Mobile:** `AppTopBar` (`widgets/app_top_bar.dart`) wraps `NooTopBar`
|
||||
for *every* tab (previously only Files had shell-level top chrome, with
|
||||
the rest building their own via `SyncedHeaderScaffold`) - iOS gets a
|
||||
large title, an inline search field, a `plus` action on Files only (no
|
||||
other tab has a create/upload flow), and the account avatar; Android
|
||||
gets a compact title row with `search`/avatar actions, relying on an
|
||||
extended `NooFab` ("Upload", Files/Photos only) instead of a top-bar
|
||||
icon for upload. `BottomNavBar` (`widgets/bottom_nav_bar.dart`) adapts
|
||||
the pinned `AppTab`s onto `NooBottomBar`. `AppDrawer`
|
||||
(`widgets/app_drawer.dart`) builds a `NooDrawer`: account block, storage
|
||||
meter, a "More" list of the hidden tabs, Settings, and an "Edit tabs"
|
||||
link (opens Settings - there's no in-page anchor to scroll to its Tabs
|
||||
section yet).
|
||||
- **Desktop:** a `NooSidebar` (account card, pinned tabs, divider,
|
||||
remaining tabs, storage meter, Settings) sits beside a `NooToolbar`
|
||||
(tab title, search, an "Upload" action on Files/Photos) over the same
|
||||
`IndexedStack`, both built inline in `main.dart` rather than as separate
|
||||
widgets.
|
||||
|
||||
Both layouts share one detail: tapping a hidden ("More") tab calls
|
||||
`SettingsController.requestTab` - the same one-shot request
|
||||
`SearchView`/`FavoritesView`/`ShareUploadView` already use to jump the
|
||||
shell to a tab from outside it - instead of pushing that tab as its own
|
||||
screen. `MainShellView` then shows it as the active tab (still just an
|
||||
entry in the `IndexedStack`) with no bottom-bar/sidebar destination
|
||||
highlighted, since it isn't one of the pinned five, until the user taps a
|
||||
pinned or another "More" tab. `widgets/shell/shell_common.dart` holds the
|
||||
pieces both layouts share: account/storage formatting, `openSettings`/
|
||||
`openSearch`, `showAccountSwitcher` (the saved-accounts list behind the
|
||||
drawer's chevron and the sidebar's account card - a sheet on mobile, a
|
||||
dialog on desktop), `ShellAvatarButton` and `ShellSearchLauncher`.
|
||||
|
||||
All eight tabs used to share
|
||||
[`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) - a
|
||||
`CustomScrollView` with a pull-down "sync status" header (Google
|
||||
Photos-style) and a classic Material refresh spinner shown during a
|
||||
pull-triggered sync. `ShareUploadView` mirrors the Files tab's own
|
||||
controls-row/breadcrumbs sticky header almost exactly, so arriving via
|
||||
another app's "Share to..." sheet still lands on the same top chrome
|
||||
instead of a plain `AppBar` - its `actions` are `[ProfileAvatarButton()]`
|
||||
only (no `MoreTabsButton`: there's nowhere useful for it to go mid-upload,
|
||||
since jumping to another tab would abandon the destination picker);
|
||||
backing out is the system back gesture/button, not a bespoke close icon in
|
||||
the app bar. Its bottom action - "Upload to
|
||||
{folder}" - and the uploading-file-name summary above it (single line,
|
||||
auto-scrolling via `MarqueeTitle` if it doesn't fit) live together in one
|
||||
rounded-top, elevated `Material` bar as `bottomNavigationBar`, reading as a
|
||||
sheet peeking up from the bottom edge rather than a plain flat bar.
|
||||
pull-triggered sync. Now that every tab is rebuilt on Noo, each renders its
|
||||
own content directly in a plain `RefreshIndicator` + `CustomScrollView`
|
||||
instead (`ColoredBox(colors.bg)` background, no shared header widget);
|
||||
device-sync status shows per-row (`NooFileRow`/`NooFileTableRow`'s
|
||||
`NooStatusIcon`s) or in the Offline tab's `NooSummaryCard`, not a shared
|
||||
pinned chip. `SyncedHeaderScaffold` is now unused - the last two screens on
|
||||
it, `ShareUploadView` (the share-to-upload destination picker, pushed
|
||||
rather than a tab - see below) and `MoveCopyDestinationPicker`, are
|
||||
rebuilt too: both are a `Scaffold` with a `NooTopBar`+`NooTopBarBack`
|
||||
(mobile) / `NooToolbar` (desktop) top bar, a noo-styled
|
||||
[`Breadcrumbs`](../../lib/widgets/breadcrumbs.dart) row + folder list
|
||||
(`NooFileRow` mobile, `NooFileTableRow` desktop - both pickers only ever
|
||||
browse *folders*, so the old dimmed-but-visible file rows are gone; a
|
||||
`RefreshIndicator`+`CustomScrollView`) for a body, and a `colors.surface`
|
||||
bottom bar with a top `line` (no more rounded-top elevated `Material`
|
||||
sheet) holding the primary CTA. `ShareUploadView` is pushed from outside
|
||||
`MainShellView` (a cold share-intent launch, or Files' "+" → "Upload
|
||||
file"), so it builds its own top bar rather than relying on the shell's -
|
||||
its `actions` are `[ShellAvatarButton()]` only (no `MoreTabsButton`:
|
||||
there's nowhere useful for it to go mid-upload, since jumping to another
|
||||
tab would abandon the destination picker); `ShellAvatarButton` is the same
|
||||
tap-to-Settings/swipe-to-cycle-accounts widget the shell itself uses, and a
|
||||
straight replacement for the old `ProfileAvatarButton` (now unused
|
||||
anywhere, since this was its last call site). Its bottom bar holds the
|
||||
uploading-file-name summary (single line, auto-scrolling via
|
||||
`MarqueeTitle` if it doesn't fit) above the "Upload to {folder}" CTA.
|
||||
[`MarqueeTitle`](../../lib/widgets/marquee_title.dart) (`package:marquee`) is
|
||||
shared with `FileViewerScreen`'s title - falls back to a plain ellipsized
|
||||
`Text` when the content already fits, so short text never marquees.
|
||||
@@ -259,16 +358,32 @@ no prior browsing session to preserve. The Move/Copy picker is pushed
|
||||
*while the user is actively browsing a specific Files-tab folder*, so
|
||||
reusing the shared state would strand that folder's `pathStack` under it;
|
||||
its local state means popping back always lands the user exactly where
|
||||
they were, untouched.
|
||||
`SearchView`, `AccountView` (Settings), the file-details sheet, and the
|
||||
share sheet are pushed on top via
|
||||
`Navigator`/`showModalBottomSheet`/`showGradualBottomSheet` rather than
|
||||
being tabs. `ProfileAvatarButton` (top-right on every tab) opens Settings on
|
||||
tap and cycles between saved accounts on a vertical swipe.
|
||||
they were, untouched. Unlike `ShareUploadView`, it keeps `MoreTabsButton`
|
||||
in its top bar: that button pushes a hidden tab as its own stacked screen
|
||||
rather than jumping the shell there, so it doesn't abandon this picker the
|
||||
way jumping tabs would. Its bottom bar shows a "Moving/Copying N item(s)"
|
||||
summary line (replaced by a danger-colored warning when the current folder
|
||||
is an invalid destination) above a "Move here"/"Copy here" CTA - the
|
||||
per-item conflict follow-up, if any, is
|
||||
[`MoveCopyConflictSheet`](../../lib/widgets/move_copy_conflict_sheet.dart).
|
||||
`SearchView`, `AccountView` (Settings), the file-details sheet
|
||||
(`DetailsSheet`), and the share sheet (`ShareSheet`) are pushed on top via
|
||||
`Navigator`/`showNooSheet`/`showNooDialog` rather than being tabs (the two
|
||||
per-item sheets pick between the mobile sheet and the desktop dialog via
|
||||
`NooLayout.isDesktop`, same as every other overlay in the app;
|
||||
`showGradualBottomSheet`, the custom drag-to-resize sheet they used before,
|
||||
has no remaining callers). On mobile, `ShellAvatarButton`
|
||||
(`widgets/shell/shell_common.dart`,
|
||||
shown in `AppTopBar`'s trailing actions on every tab, and reused directly by
|
||||
`ShareUploadView`) opens Settings on tap and cycles between saved accounts
|
||||
on a vertical swipe. Desktop has no avatar in the
|
||||
toolbar; `NooSidebarAccount`'s account card opens the full switcher instead
|
||||
(`showAccountSwitcher`, the same one behind the mobile drawer's chevron).
|
||||
|
||||
Files and Photos (the two tabs with multi-select) pass their selection
|
||||
toolbar into `SyncedHeaderScaffold`'s `selectionBar` param rather than
|
||||
rendering it as a second sliver app bar inside their own content: while
|
||||
non-null, it fully takes over the pinned top bar in place of the
|
||||
sync-status chip/`actions`/pull-to-reveal quota panel, so selecting reads
|
||||
as replacing the whole top chrome rather than adding a strip beneath it.
|
||||
Files and Photos (the two tabs with multi-select) render their selection
|
||||
bar as a `pinned: true` sliver at the top of their own `CustomScrollView`,
|
||||
swapped in for the controls row/type-chips row while `_isSelecting` -
|
||||
selecting reads as replacing that row in place, not adding a strip
|
||||
beneath it. (An earlier version of this routed the selection bar through
|
||||
`SyncedHeaderScaffold`'s `selectionBar` param; that's gone along with the
|
||||
scaffold itself in these two tabs.)
|
||||
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 27 KiB |
@@ -0,0 +1,433 @@
|
||||
# Noo Design System
|
||||
|
||||
Noo is a Nextcloud client for iOS, Android, macOS and Windows. ("Noo" is a placeholder name.)
|
||||
Its visual language is warm neutrals with one violet accent, flat surfaces, pill-shaped controls, and no gradients.
|
||||
|
||||
**Platform rule:** keep one visual language everywhere. Adapt only the navigation chrome (status bar, top bar, bottom bar, window controls) to each platform. Content components look the same on every platform.
|
||||
|
||||
Reference files in this project:
|
||||
- `Noo Screens.dc.html` has every screen on every platform, in light and dark.
|
||||
- `Noo Design System.dc.html` is the visual component sheet.
|
||||
- `noo-kit.js` holds the tokens (`TH`), the icon set (`SVG`/`ic`), file-type mapping (`KIND`) and mock data.
|
||||
- `Mobile Screen.dc.html` and `Desktop Screen.dc.html` are the reference builds for each screen.
|
||||
- [Noo — Missing Screens](https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4) is a live design canvas (Claude Design, not a static file in this repo) covering pieces this doc originally had no recipe for: Media viewer, Search, the Upload/Move/Copy destination picker, the Details sheet's tab switch, and the Selection action bar (mobile + desktop). It has both an iOS row (built first, ready for later) and an Android row (built to match right now) - same content, chrome adapted per the platform rule above. §4 below is the written-up version of what's approved there; go back to the canvas for pixel-level layout, not just the summary.
|
||||
|
||||
---
|
||||
|
||||
## 1. Tokens
|
||||
|
||||
### 1.1 Color (semantic). Use these names in code.
|
||||
|
||||
| Token | Role | Light | Dark |
|
||||
|---|---|---|---|
|
||||
| `bg` | App background, desktop sidebar | `#F3EFE6` warm off-white | `#0E0D0B` |
|
||||
| `surface` (`sf`) | Cards, rows, bars, sheets, desktop main pane | `#FFFFFF` | `#25241F` |
|
||||
| `surface-2` (`sf2`) | Inputs, inset panels, secondary buttons | `#F6F5F2` | `#3D3C38` |
|
||||
| `surface-3` (`sf3`) | Progress tracks, toggle off, grabbers | `#EAE8E2` | `#5A5852` |
|
||||
| `line` (`ln`) | Dividers, 1px borders | `#EAE8E2` | `#3D3C38` |
|
||||
| `fg-1` | Primary text | `#0E0D0B` | `#F3EFE6` |
|
||||
| `fg-2` | Secondary text, idle icons | `#5A5852` | `#BDBAB1` |
|
||||
| `fg-3` | Meta text, placeholders, trailing icons | `#7C7A72` | `#9E9B92` |
|
||||
| `accent` (`ac`) | Primary fills (buttons, FAB, toggle on, progress) | `#8D0DE3` | `#8D0DE3` |
|
||||
| `accent-text` (`act`) | Accent text and icons, active nav | `#8D0DE3` | `#CBA5FD` |
|
||||
| `accent-soft` (`acs`) | Selected and active backgrounds, tonal buttons | `#ECDFFF` | `#2F0454` |
|
||||
| `danger` / `danger-soft` | Destructive text / bg | `#A8202A` / `#FDE7E7` | `#F49E9E` / `#560F18` |
|
||||
| `danger-fill` | Swipe-delete background (white text) | `#A8202A` | `#A8202A` |
|
||||
| `success` / `success-soft` | Synced, connected | `#3E7A23` / `#EAF5DF` | `#B7DD9F` / `#1E3F10` |
|
||||
| `warning` / `warning-soft` | Video file type | `#8C5A0E` / `#FBEFD0` | `#F0C26C` / `#4A3208` |
|
||||
| `info` / `info-soft` | Docs, images | `#2940A8` / `#E6ECFE` | `#B6C3FB` / `#1C2B73` |
|
||||
| `scrim` | Behind sheets, drawers, dialogs | `rgba(14,13,11,.45)` | `rgba(0,0,0,.6)` |
|
||||
|
||||
Rules:
|
||||
- Text on `accent` is always `#FFFFFF`. Accent-colored text uses `accent-text`, never `accent` in dark mode.
|
||||
- On-color text always uses the matching pair: `accent-text` on `accent-soft`, `danger` on `danger-soft`, and so on.
|
||||
- Don't use gradients. Don't add new colors. Avatar and photo placeholder fills use the secondary palette: `#8DCDE2 #96B0FD #E5D8BD #EEEDB3 #DA9AC7 #A7D296 #E9A6A7 #85D1BD #CBA5FD`, always with `#0E0D0B` text.
|
||||
|
||||
### 1.2 File-type tiles (`KIND`)
|
||||
| Kind | Background | Icon color | Lucide icon |
|
||||
|---|---|---|---|
|
||||
| folder | accent-soft | accent-text | `folder` |
|
||||
| pdf | danger-soft | danger | `file-text` |
|
||||
| doc / text | info-soft | info | `file-text` |
|
||||
| sheet | success-soft | success | `sheet` |
|
||||
| video | warning-soft | warning | `film` |
|
||||
| image | info-soft | info | `image` |
|
||||
| archive | surface-3 | fg-2 | `file-archive` |
|
||||
|
||||
Tile sizes: 40px/r12 for mobile rows, 30px/r9 for desktop rows, 44px/r12 for the share header, 32px/r10 for activity. The icon is half the tile size (20, 16, 24, 16).
|
||||
|
||||
### 1.3 Typography
|
||||
Fonts (Google Fonts): **Schibsted Grotesk** for headings (weights 500/600) and **Instrument Sans** for UI (weights 400/500/600). Load them with `https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap`. Don't use italics, all-caps or wide tracking.
|
||||
|
||||
| Style | Font | Size / line-height | Tracking | Use |
|
||||
|---|---|---|---|---|
|
||||
| Large title | Schibsted 600 | 34 / 0.9 | −3% | iOS large title |
|
||||
| Stat | Schibsted 600 | 32 (mobile) · 28 (desktop) / 0.9 | −3% | Offline GB, counters |
|
||||
| Title | Schibsted 500 | 22 / 1 | −2% | Android top bar, desktop toolbar |
|
||||
| Card title | Schibsted 500 | 17–20 / 1 | −2% | Settings cards, sheet sections, account name |
|
||||
| Group heading | Schibsted 500 | 18 / 1 | −2% | Photos month |
|
||||
| Body L | Instrument 400/500 | 16 / 1.2 | 0 | Mobile row title, settings label |
|
||||
| Body | Instrument 400/500 | 14–15 / 1.3 | 0 | Desktop rows, activity text, banners |
|
||||
| Label | Instrument 600 | 13 / 1 | 0 | Section labels (fg-2), chips, table headers (12, fg-3) |
|
||||
| Meta | Instrument 400 | 13 (mobile) · 12–13 (desktop) / 1.2 | 0 | Size · date, subtitles (fg-3) |
|
||||
| Nav label | Instrument 500 / 600 (active) | 12 Android · 10 iOS | 0 | Bottom bars |
|
||||
| Button | Instrument 600 | 14–16 / 1 | 0 | All buttons |
|
||||
| Mono | ui-monospace 400 | 13–14 | 0 | Share URLs, local paths |
|
||||
|
||||
### 1.4 Space, radius, elevation, motion
|
||||
- **Spacing** uses a 4px base: 4, 8, 12, 14, 16, 20, 24, 32. Mobile screen gutter is **12px** (cards) and 16px (bars). Desktop content gutter is **24px**.
|
||||
- **Radius:**
|
||||
- pills (`999px`) for every button, chip, segmented control, toggle, search field and badge
|
||||
- 20px for cards and grouped lists
|
||||
- 18px for grid cards and stat cards
|
||||
- 14px for inputs and inset panels
|
||||
- 12px for desktop sidebar items and selected table rows
|
||||
- 28px for the sheet top and drawer edge
|
||||
- 24px for desktop dialogs
|
||||
- screen corners are 48 on iOS and 36 on Android
|
||||
- **Elevation:** product UI is flat, with no shadows on buttons or cards. The only shadow is `0 24px 48px rgba(30,0,47,.14)`, and only on floating desktop dialogs. Separate things by surface color, not by shadow.
|
||||
- **Motion:** use `cubic-bezier(.7,0,.15,1)` with durations of 180, 280 and 480ms. Nothing bounces. Pressing a button scales it to 0.98.
|
||||
|
||||
### 1.5 Icons
|
||||
Use **Lucide** (pinned to `lucide-static@0.460.0`) at a 1.8 stroke. Sizes are 14, 16, 18, 20, 24 and 32. Icons render in the current text color. Tab icons: Files `folder`, Photos `images`, Favorites `star`, Offline `hard-drive-download`, Shares `share-2`, Recent `clock`, Activity `activity`, Trash `trash-2`, Settings `settings`.
|
||||
|
||||
---
|
||||
|
||||
## 2. Components
|
||||
|
||||
**Button**
|
||||
- Always a pill. Heights: 52 (sheet CTA), 44 (mobile card), 40 (inline in a field), 36 (desktop toolbar), 28–32 (compact).
|
||||
- Variants:
|
||||
- *Primary*: accent fill, white text.
|
||||
- *Tonal*: accent-soft fill, accent-text.
|
||||
- *Secondary*: surface-2 fill, fg-1.
|
||||
- *Danger*: danger-soft fill, danger text.
|
||||
- *Outline*: 1.5px surface-3 border.
|
||||
- An icon goes on the left, with a 6–10px gap.
|
||||
|
||||
**FAB** (Android only)
|
||||
- An extended pill: 56px tall, accent fill, labelled "Upload".
|
||||
- Sits 16px from the right and bottom edges of the content area.
|
||||
- Stays mounted on every tab; it's only the extended label that's tied to
|
||||
Files/Photos. Elsewhere it collapses to an icon-only 56px circle (still
|
||||
tappable - it always targets the Files tab's current folder), animating
|
||||
the width/label change rather than the button popping fully in/out as
|
||||
the Scaffold's default FAB transition would on every tab switch.
|
||||
|
||||
**Chip**
|
||||
- A pill, 32–34px tall, 12px horizontal padding, Label 13–14.
|
||||
- Idle: surface fill on mobile, or a 1px line border on desktop.
|
||||
- Selected: accent-soft fill with accent-text.
|
||||
- A trailing `chevron-down` means it opens a menu. A trailing `x` means it's an active filter.
|
||||
|
||||
**Segmented control**
|
||||
- A pill track (surface or surface-2) with 3px padding.
|
||||
- The active segment gets an accent-soft fill with accent-text at weight 600. Idle segments use fg-2 at weight 500.
|
||||
- Use it for the List/Grid toggle (icons only, 36×28), Shares scope, Theme, and default view.
|
||||
|
||||
**Toggle**
|
||||
- 48×28 on mobile, 44×26 on desktop, with a white knob 3px inset.
|
||||
- On: accent track. Off: surface-3 track. It looks the same on every platform.
|
||||
|
||||
**Search field**
|
||||
- A pill (radius 12 on the iOS inline field), 36–38px tall.
|
||||
- Surface fill on bg, or surface-2 fill on surface. Leading search icon and placeholder in fg-3.
|
||||
- Placement:
|
||||
- iOS: below the large title.
|
||||
- Android: an icon in the top bar that expands.
|
||||
- Desktop: 260px wide in the toolbar.
|
||||
|
||||
**Grouped list (card)**
|
||||
- A surface card with radius 20 and 1px gaps showing `line`, which draws the dividers.
|
||||
- An optional group label above it: 13/600 in fg-2, inset 8px.
|
||||
- Each group is 18px from the next.
|
||||
|
||||
**File row**
|
||||
- Mobile: 64px tall.
|
||||
- Left to right: tile 40, then a column with the name (16/500, one line, ellipsis) above a meta line (13, fg-3), then optional trailing icons, then the overflow menu (`ellipsis` on iOS, `ellipsis-vertical` on Android).
|
||||
- The meta line is `[status icon][shared icon] size · modified`.
|
||||
- A favorite shows an accent-text star before the overflow menu.
|
||||
- Trailing icon by screen: star in Favorites, `rotate-ccw` in Trash.
|
||||
- Desktop: a table row 52px tall.
|
||||
- Columns are `minmax(0,1fr) 180px 160px 120px`: Name, two data columns, then status icons and the overflow menu.
|
||||
- The header row is 36px, 12/600 in fg-3, with a sort arrow on the active column.
|
||||
- A selected row gets an accent-soft fill with radius 12.
|
||||
|
||||
**Status icons (14px)**
|
||||
- Synced: `circle-check` in success.
|
||||
- Syncing: `refresh-cw` in accent-text.
|
||||
- Error: `circle-alert` in danger, and the meta text says what to do ("Couldn't sync · Tap to retry").
|
||||
- Shared: `users` in fg-3.
|
||||
|
||||
**Swipe action**
|
||||
- The row slides and uncovers a 96px action block. Delete is white on danger-fill; Favorite is white on accent.
|
||||
- The block has a 20px icon above a 12/600 label.
|
||||
- Swipe actions are set in Settings → Swipe on a file.
|
||||
|
||||
**Selection action bar** (Files, Photos, Favorites - anywhere with
|
||||
multi-select)
|
||||
- Replaces that screen's own sort/filter row in place while selecting -
|
||||
never a second bar stacked underneath it, and never the shell's own top
|
||||
bar/toolbar, which don't change for selection.
|
||||
- A `surface` card, radius 20, in the screen's usual gutter (12 mobile, 24
|
||||
desktop) - selection reads as a distinct mode, not a bare row of buttons
|
||||
on `bg`.
|
||||
- Left to right: a 36px `surface-2` close circle (`x`), then "N selected"
|
||||
(17/500), then the bulk actions, trailing-anchored. Fixed width, never
|
||||
scrolls: only the first few actions show inline (3 on mobile, 4 on
|
||||
desktop - there can be up to 9: favorite, share, download, delete, copy,
|
||||
move, rename, sync, details); the rest sit behind a trailing "More"
|
||||
button that opens the same grouped-list sheet a file row's own overflow
|
||||
menu (`ellipsis`/`ellipsis-vertical`) already uses. Which actions land in
|
||||
the inline slots vs. "More" is the user's own priority order (Settings
|
||||
→ Action bar, §4's 9-part list), not a fixed per-kind assignment.
|
||||
- Mobile: inline actions are plain 20px accent-text icons, no fill; "More"
|
||||
is the same 40px `NooOverflowButton` treatment (`ellipsis`/
|
||||
`ellipsis-vertical`, fg-3) file rows use for their own overflow menu.
|
||||
- Desktop: inline actions are labelled tonal pills (accent-soft/
|
||||
accent-text), danger-soft/danger for the one labelled "Delete" - desktop
|
||||
has the room for labels, and the app's other toolbar actions are already
|
||||
labelled buttons rather than bare icons. "More" is a secondary pill
|
||||
(surface-2/fg-1) with a trailing `chevron-down`, so it reads as "opens a
|
||||
menu" rather than another bulk action.
|
||||
|
||||
**Grid card**
|
||||
- Surface fill, radius 18. Mobile uses 2 columns with a 10px gap; desktop uses 5 columns with a 16px gap.
|
||||
- The thumbnail area is 104–118px tall, filled with the file-type soft color and a 32px icon. Real thumbnails replace it when they exist.
|
||||
- Below it: the name (14/500) with an overflow menu, then the meta (12).
|
||||
|
||||
**Photo grid**
|
||||
- Square tiles with a 2px gap on mobile (3 columns, edge to edge) and a 4px gap on desktop (8 columns).
|
||||
- Tiles are grouped by month, with the group heading on the left and the count on the right.
|
||||
- Videos get a badge in the bottom-right: a `play` icon and the duration on `rgba(14,13,11,.7)`.
|
||||
|
||||
**Activity item**
|
||||
- Avatar 36 (initials on a secondary-palette color), then a sentence: **Actor** verb **object** tail.
|
||||
- Time in meta style. The file tile (32) goes on the right.
|
||||
|
||||
**Banner / summary card**
|
||||
- A surface card with radius 20 (surface-2 on desktop) and padding of 14–18.
|
||||
- The action sits on its own row below the description text, not squeezed
|
||||
onto the same line - a long retention message/caption and the action
|
||||
used to fight for the same row's width.
|
||||
- Trash: an info icon, the retention text, then "Empty trash" as a
|
||||
right-aligned danger text button on the row below.
|
||||
- Offline: the stat and caption, then a "Sync now" tonal button on the row
|
||||
below, then the 6px progress bar and the last-sync meta.
|
||||
|
||||
**Progress bar**
|
||||
- 6px tall pill. Surface-3 track with an accent fill.
|
||||
- Used for storage quota, cache use and the offline limit.
|
||||
|
||||
**Avatar**
|
||||
- A circle with initials, weight 600, at 0.36× the avatar size.
|
||||
- Sizes: 30–32 in bars, 36 in lists, 48 in the drawer, 52–56 on the account card.
|
||||
- The current user gets an accent-soft fill with accent-text.
|
||||
|
||||
**Settings row**
|
||||
- 52px tall, or 60px with a subtitle.
|
||||
- Left to right: an optional 20px icon in fg-2, then the label (16) with an optional subtitle (13, fg-3), then a trailing control.
|
||||
- Trailing control is one of: a toggle, a value in fg-3 with a chevron (desktop uses a 32px dropdown with radius 10), a segmented control, a pill button, or a status badge.
|
||||
- A destructive row uses danger text.
|
||||
- Exception: a segmented control with 3+ labelled segments (Theme's
|
||||
System/Light/Dark) gets its own row below the label instead of a
|
||||
trailing slot - three icon+label segments crammed in next to the label
|
||||
left each one too cramped to read. Label row, then the full-width
|
||||
segmented control on the row below, both on one continuous surface (no
|
||||
divider between them) - same shape the sort sheet's Ascending/Descending
|
||||
control and Photos' filter-sheet type control already use.
|
||||
|
||||
**Tab order row**
|
||||
- A grip icon (`grip-vertical`, fg-3), the tab icon, the label, then a pin button: a 36px circle (30 on desktop) that is accent-soft with `pin` when pinned, or surface-2 with `pin-off` when not.
|
||||
- Allow at most 5 pinned tabs.
|
||||
|
||||
**Sheet** (mobile)
|
||||
- Surface fill, radius 28 at the top. A 36×5 grabber in surface-3. Padding 20, with 22px between sections.
|
||||
- It sits on a scrim.
|
||||
|
||||
**Dialog** (desktop)
|
||||
- 540px wide, radius 24, padding 24, sitting on a scrim.
|
||||
- Header: file tile, title "Share "<name>"", and a close button (32px circle, surface-2).
|
||||
|
||||
**Drawer** (mobile)
|
||||
- 316px wide, surface fill, radius 28 on the trailing edge, on a scrim.
|
||||
- Top to bottom:
|
||||
- account block with a chevron to switch accounts
|
||||
- storage bar
|
||||
- "More" label, then the unpinned tabs as 52px pill items (icon 24, label 16/500, trailing count)
|
||||
- Settings
|
||||
- an "Edit tabs" link at the bottom, in accent-text
|
||||
|
||||
---
|
||||
|
||||
## 3. Navigation & platform mapping
|
||||
|
||||
**Tabs** (the user sets the order): Files, Photos, Favorites, Offline, Shares, Recent, Activity, Trash. Settings is always separate.
|
||||
|
||||
### Mobile
|
||||
|
||||
Mobile always has **5 pinned tabs in the bottom bar**. The rest go in the drawer, which opens from the top-left menu icon.
|
||||
|
||||
| Element | iOS | Android |
|
||||
|---|---|---|
|
||||
| Status bar | 54px, Dynamic Island | 40px |
|
||||
| Top bar | 44px row: `menu` on the left; `plus` and avatar on the right (all accent-text). Then a 34px large title, then the search field. | 64px: `menu`, 22px title, `search`, avatar |
|
||||
| Bottom bar | Surface fill, 1px top line. Icon 24 above a 10px label. Active: accent-text. Idle: fg-3. 34px home indicator below. | Surface fill, 80px. Icon 24 above a 12px label (label space is always reserved, just invisible when idle, so nothing shifts on selection). The active icon sits inside a 56×32 accent-soft pill that slides between tabs as one shared indicator, rather than popping in/out per tab. 20px gesture bar below. |
|
||||
| Upload | `plus` in the nav bar | Extended FAB |
|
||||
| Overflow icon | `ellipsis` | `ellipsis-vertical` |
|
||||
| Settings | Pushed screen with a "‹ Files" back button and a large title. No bottom bar. | Pushed screen with a back arrow and a title. No bottom bar. |
|
||||
| Biometric label | "Lock with Face ID" | "Lock with fingerprint" |
|
||||
|
||||
### Desktop
|
||||
|
||||
Desktop has a 256px sidebar in `bg` and a main pane in `surface`, separated by a 1px line.
|
||||
|
||||
**Sidebar**, top to bottom:
|
||||
- account switcher card
|
||||
- the 5 pinned tabs
|
||||
- a divider
|
||||
- the remaining tabs
|
||||
- a spacer
|
||||
- the storage meter
|
||||
- Settings
|
||||
|
||||
Sidebar items are 38px tall with radius 12, an 18px icon and a 14/500 label. The active item gets an accent-soft fill with accent-text at weight 600. Counts sit on the right: Trash 12, Offline errors, new shares.
|
||||
|
||||
**Toolbar** is 64px tall:
|
||||
- the title (22px Schibsted Grotesk), with a breadcrumb in Files
|
||||
- a spacer
|
||||
- the search field
|
||||
- context actions: List/Grid toggle and Upload in Files, Upload in Photos, Empty trash in Trash, Sync now in Offline
|
||||
|
||||
| Element | macOS | Windows |
|
||||
|---|---|---|
|
||||
| Window | Radius 12 | Radius 8 |
|
||||
| Controls | Traffic lights at the top of the sidebar | 40px title bar with the app mark and name; minimize, maximize and close buttons 46px wide |
|
||||
| Navigation | Back and forward chevrons at the start of the toolbar | Not shown in the toolbar |
|
||||
| Biometric | "Touch ID" | "Windows Hello" |
|
||||
| Local path | `~/Noo/…` | `C:\Users\…\Noo` |
|
||||
| Swipe setting | "Trackpad swipe on a file" | "Touch swipe on a file" |
|
||||
|
||||
---
|
||||
|
||||
## 4. Screen recipes
|
||||
|
||||
- **Files:**
|
||||
- Toolbar: sort chip (`Name ↑`), type filter chip, List/Grid segmented toggle.
|
||||
- Desktop adds Modified and Shared filter chips, an active-filter chip, and an item count.
|
||||
- Content: a list, or a grid when the toggle is set.
|
||||
- **Photos:** a sort chip and a filter chip (mirroring Files' own controls
|
||||
row - no List/Grid toggle, the grid is the only view). The type filter
|
||||
(All, Photos, Videos - Camera isn't backed by real data, see the view's
|
||||
doc comment) lives inside the filter sheet as a full-width segmented
|
||||
control, the same "label, then the control on its own row below" shape
|
||||
Settings' Theme row uses, not its own row of chips. Every icon (All,
|
||||
Photos, Videos in the filter sheet; All, Files, Folders in Files' own
|
||||
filter sheet, same treatment) always shows; only the *selected* segment
|
||||
also shows its label (`NooSegmentedControl`'s `labelOnlySelected`) - the
|
||||
same List/Grid-toggle-style pill both screens' filter sheets use, not
|
||||
Files' old checkmark list or Photos' own always-labelled track. Then the
|
||||
photo grid grouped by month.
|
||||
- **Favorites:** a file list with a star as the trailing icon.
|
||||
- **Offline:** a summary card (or 4 stat cards on desktop), then a list whose rows show sync status icons and status meta.
|
||||
- **Shares:** a segmented control (With you, By you, Links), then a list. The
|
||||
meta reads "Owner · Permission". No per-row overflow menu on any of the
|
||||
three scopes - tapping a row (file or folder) opens the full Share sheet
|
||||
for that item (fetched fresh via `FilesController.fetchItemAtPath`, since
|
||||
a share only carries enough metadata for its own row), the same sheet
|
||||
Files/Photos open from their own Share action - that's already where
|
||||
copying a link or removing access lives, so a second, row-local menu here
|
||||
was redundant.
|
||||
- **Recent:** a list grouped into Today, Yesterday and This week. The meta is the action plus the location.
|
||||
- **Activity:** the feed grouped by day. Desktop limits it to 760px wide.
|
||||
- **Trash:** a retention banner, then a list. Mobile rows get a restore icon; desktop rows get a tonal "Restore" pill.
|
||||
- **Settings:** sections in this order:
|
||||
1. Account card
|
||||
2. Accounts (list, then "Add account")
|
||||
3. Security
|
||||
4. File sync
|
||||
5. Files cache
|
||||
6. Appearance
|
||||
7. Tabs
|
||||
8. Action bar - a reorder-only list (no pin/hide, unlike Tabs): the
|
||||
priority order for the Selection action bar's bulk actions (favorite,
|
||||
share, download, delete, copy, move, rename, sync, details) - the
|
||||
first few (3 mobile / 4 desktop) land in the bar's fixed inline
|
||||
slots, the rest sit behind "More". See §2 "Selection action bar".
|
||||
9. Swipe on a file
|
||||
|
||||
Mobile uses one column of grouped lists, each individually collapsible
|
||||
(tap its label, expanded by default - `NooGroupedList`'s `collapsible`
|
||||
param) so the full list can be collapsed down instead of needing a
|
||||
separate way to navigate it; an earlier version had a trailing jump rail
|
||||
(one small icon per section, pinned where the scrollbar would sit)
|
||||
instead, dropped for adding a second, redundant navigation method without
|
||||
shortening the page. Desktop uses a 2-column grid of cards with a 1px
|
||||
line and radius 20, wide enough to see most sections without scrolling,
|
||||
so it gets neither.
|
||||
- **Share sheet / dialog:** sections in this order:
|
||||
1. Header: file tile, name, size · folder, and close.
|
||||
2. **Share with people:** an input ("Name, email or group"), then the people with access. The owner comes first; the others each have a permission pill ("Can edit ▾").
|
||||
3. **Share link:** a toggle, then the URL field in mono with a primary "Copy link" button, then option chips (permission, expiry, password, allow download).
|
||||
4. **Send file directly:** an outline button, with a caption saying that link settings don't apply.
|
||||
- **Details sheet:** header (file tile, name, size · folder, close) as in the
|
||||
Share sheet above, then a segmented control switching Info/Versions/Activity
|
||||
in place below it - there's no separate tab-strip component, so the
|
||||
segmented control (already used for List/Grid and the Shares scope) is the
|
||||
one that does this job too. Info is a flat label/value list (Size, Type,
|
||||
Location, Modified, Created, ...). Versions and Activity reuse their own
|
||||
row/feed treatment. Same on every platform - this sheet has no iOS/Android
|
||||
split.
|
||||
- **Media viewer** (the full-screen photo/video viewer): the stage is `bg`,
|
||||
following the app's own theme rather than a fixed black - a black stage
|
||||
in light mode read as jarringly out of place. A translucent, blurred top
|
||||
bar (back, filename, meta) and bottom bar float over the media in a
|
||||
`surface`-tinted panel (also theme-following, at a higher opacity than a
|
||||
typical blur so it stays legible over arbitrary photo/video brightness
|
||||
underneath - icons/text are `fg1`, matching); this is the one deliberate
|
||||
exception to "no blur" in product UI, since it's chrome over photo/video
|
||||
content, not over the app's own surfaces. A short edge gradient outside
|
||||
each panel (toward `surface`, not a fixed black) extends that same
|
||||
contrast a little past the panel's hard edge. Both bars' background
|
||||
extends edge-to-edge behind the status bar/gesture area, with only their
|
||||
content padded clear of it. Back is a plain arrow (`arrow-left`), not the iOS
|
||||
chevron+label pushed-screen pattern - platform split still to do. The
|
||||
bottom bar holds every action in one row (share, favorite, open
|
||||
externally, download, delete, details) on every platform; don't add a
|
||||
top-bar overflow menu for the same actions. Video adds a transport row
|
||||
above the action row: time · seek bar · time, then play/pause and mute
|
||||
centered below it. A photo can be pinch-zoomed; while zoomed in, the
|
||||
gallery's own left/right swipe between items is disabled so panning
|
||||
around the zoomed photo doesn't also swipe to the next one - it comes
|
||||
back the moment the photo returns to its un-zoomed scale. A PDF preview
|
||||
stays at its fit-width scale as its floor rather than letting the user
|
||||
zoom out past it, since going below 1.0 scale removes any limit on how
|
||||
far the page can be panned, including off-screen entirely.
|
||||
- **Search:** pushed from the shell's search entry point (`menu`/`search`
|
||||
icon in the top bar, or the inline field below an iOS large title -
|
||||
DESIGN_SYSTEM §2 "Search field" placement). The destination screen is one
|
||||
shared recipe for both platforms: back arrow + the pill `NooSearchField`
|
||||
(not the inset-panel text-field shape - a search field is always the pill,
|
||||
except the one named iOS-inline exception) taking over the top row,
|
||||
autofocus, a clear button once there's a query. Below it: a file list
|
||||
(mobile rows / desktop table, same as Files), or a centered icon + short
|
||||
sentence-case message for the empty ("Search your files") and no-results
|
||||
states.
|
||||
- **Upload / Move / Copy destination picker:** a pushed screen (outside the
|
||||
tab shell, so it carries its own complete top bar) titled "Upload to" /
|
||||
"Move to" / "Copy to". Back arrow (Android) or "Cancel" text (iOS) leading,
|
||||
no trailing action. The same `FilesControlsRow` (sort chip, filter chip,
|
||||
List/Grid toggle right-anchored) Files itself uses, then a breadcrumb row,
|
||||
then a folder-only list/grid (no files: this screen only browses folders)
|
||||
using the standard file row/tile/grid-card at the folder kind. Bottom bar:
|
||||
a centered meta line ("Moving 3 items") above a full-width 52px primary
|
||||
CTA ("Upload here" / "Move here" / "Copy here") - a count, never a
|
||||
filename, even for a single item.
|
||||
|
||||
---
|
||||
|
||||
## 5. Copy
|
||||
- Use plain, active and short sentences, under 15 words. Say "you".
|
||||
- Name the problem and the fix: "Couldn't sync · Tap to retry", not "An error occurred".
|
||||
- Use sentence case everywhere and no all-caps. Use a middle dot ( · ) to separate meta values.
|
||||
- Don't use emoji in the product UI.
|
||||
@@ -0,0 +1,340 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<script src="noo-kit.js"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
|
||||
<style>
|
||||
body{margin:0}
|
||||
a{color:#8D0DE3;text-decoration:none}
|
||||
a:hover{color:#6E08B3}
|
||||
</style>
|
||||
</helmet>
|
||||
<sc-if value="{{ ready }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="{{ root }}">
|
||||
|
||||
<sc-if value="{{ win }}">
|
||||
<div style="height:40px;flex:none;display:flex;align-items:center;background:var(--bg);color:var(--fg2)">
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:0 16px;flex:1;font:400 12px/1 var(--ft)"><div style="width:16px;height:16px;border-radius:4px;background:var(--ac)"></div>Noo</div>
|
||||
<div style="width:46px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ i16.minus }}"></span></div>
|
||||
<div style="width:46px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ i14.square }}"></span></div>
|
||||
<div style="width:46px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ i16.x }}"></span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<div style="flex:1;min-height:0;display:flex">
|
||||
<div style="width:256px;flex:none;background:var(--bg);display:flex;flex-direction:column;padding:12px 12px 16px;box-sizing:border-box;gap:2px">
|
||||
<sc-if value="{{ mac }}">
|
||||
<div style="height:32px;display:flex;align-items:center;gap:8px;padding:0 8px 8px"><div style="width:12px;height:12px;border-radius:999px;background:#FF5F57"></div><div style="width:12px;height:12px;border-radius:999px;background:#FEBC2E"></div><div style="width:12px;height:12px;border-radius:999px;background:#28C840"></div></div>
|
||||
</sc-if>
|
||||
<div style="display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:14px;background:var(--sf);margin-bottom:14px">
|
||||
<div style="width:32px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft);flex:none">MR</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px"><div style="font:600 14px/1 var(--ft)">Marina Rocha</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div>
|
||||
<span style="{{ chevG }}"></span>
|
||||
</div>
|
||||
<sc-for list="{{ navA }}" as="n" hint-placeholder-count="5">
|
||||
<sc-if value="{{ n.on }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft)"><span style="{{ n.ico }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft)">{{ n.count }}</div></div></sc-if>
|
||||
<sc-if value="{{ n.off }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;color:var(--fg1);font:500 14px/1 var(--ft)"><span style="{{ n.icoG }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft);color:var(--fg3)">{{ n.count }}</div></div></sc-if>
|
||||
</sc-for>
|
||||
<div style="height:1px;background:var(--ln);margin:8px 12px"></div>
|
||||
<sc-for list="{{ navB }}" as="n" hint-placeholder-count="3">
|
||||
<sc-if value="{{ n.on }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft)"><span style="{{ n.ico }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft)">{{ n.count }}</div></div></sc-if>
|
||||
<sc-if value="{{ n.off }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;color:var(--fg1);font:500 14px/1 var(--ft)"><span style="{{ n.icoG }}"></span><div style="flex:1">{{ n.label }}</div><div style="font:500 12px/1 var(--ft);color:var(--fg3)">{{ n.count }}</div></div></sc-if>
|
||||
</sc-for>
|
||||
<div style="flex:1"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;padding:12px 12px 14px">
|
||||
<div style="display:flex;justify-content:space-between;font:400 12px/1 var(--ft);color:var(--fg2)"><span style="font-weight:500;color:var(--fg1)">Storage</span><span>38.2 of 100 GB</span></div>
|
||||
<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div>
|
||||
</div>
|
||||
<sc-if value="{{ setOn }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft)"><span style="{{ i18.settings }}"></span>Settings</div></sc-if>
|
||||
<sc-if value="{{ setOff }}"><div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;color:var(--fg1);font:500 14px/1 var(--ft)"><span style="{{ setIcoG }}"></span>Settings</div></sc-if>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;min-width:0;background:var(--sf);display:flex;flex-direction:column;position:relative;border-left:1px solid var(--ln)">
|
||||
<div style="height:64px;flex:none;display:flex;align-items:center;gap:12px;padding:0 20px 0 24px;border-bottom:1px solid var(--ln)">
|
||||
<sc-if value="{{ mac }}"><div style="display:flex;gap:4px;color:var(--fg3);margin-right:4px"><span style="{{ i20.chevL }}"></span><span style="{{ i20.chevR }}"></span></div></sc-if>
|
||||
<div style="display:flex;align-items:center;gap:8px;font:500 22px/1 var(--fd);letter-spacing:-0.02em">{{ title }}<sc-if value="{{ s.files }}"><span style="{{ chevG }}"></span><span style="font:400 15px/1 var(--ft);letter-spacing:0;color:var(--fg2);white-space:nowrap">All files</span></sc-if></div>
|
||||
<div style="flex:1"></div>
|
||||
<sc-if value="{{ notSettings }}"><div style="width:260px;height:36px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;gap:8px;padding:0 14px;color:var(--fg3);font:400 14px/1 var(--ft)"><span style="{{ i16.search }}"></span>Search in {{ title }}</div></sc-if>
|
||||
<sc-if value="{{ s.files }}">
|
||||
<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="{{ segL }}"><span style="{{ i16.list }}"></span></div><div style="{{ segG }}"><span style="{{ i16.grid }}"></span></div></div>
|
||||
<div style="height:36px;padding:0 16px 0 12px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i18.plus }}"></span>Upload</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.photos }}"><div style="height:36px;padding:0 16px 0 12px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i18.upload }}"></span>Upload</div></sc-if>
|
||||
<sc-if value="{{ s.trash }}"><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.trash }}"></span>Empty trash</div></sc-if>
|
||||
<sc-if value="{{ s.offline }}"><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sync }}"></span>Sync now</div></sc-if>
|
||||
</div>
|
||||
|
||||
<div style="flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;padding:0 24px">
|
||||
|
||||
<sc-if value="{{ s.files }}">
|
||||
<div style="flex:none;display:flex;align-items:center;gap:8px;padding:14px 0 10px">
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.filter }}"></span>All types<span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap">Modified<span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap">Shared<span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.offline }}"></span>Available offline<span style="{{ i14.x }}"></span></div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="font:400 13px/1 var(--ft);color:var(--fg3)">10 items · 440 MB</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.trash }}">
|
||||
<div style="flex:none;margin:16px 0 4px;padding:12px 16px;border-radius:14px;background:var(--sf2);display:flex;gap:10px;align-items:center;color:var(--fg2);font:400 14px/1.2 var(--ft)"><span style="{{ i18.info }}"></span>Items here are deleted for good after 30 days.</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.offline }}">
|
||||
<div style="flex:none;display:grid;grid-template-columns:minmax(0,2fr) repeat(3,minmax(0,1fr));gap:12px;padding:18px 0 8px">
|
||||
<div style="padding:16px 18px;border-radius:18px;background:var(--sf2);display:flex;flex-direction:column;gap:10px"><div style="display:flex;justify-content:space-between;align-items:baseline"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em">2.4 GB</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">of 5 GB limit</div></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:48%;height:100%;background:var(--ac)"></div></div></div>
|
||||
<div style="padding:16px 18px;border-radius:18px;background:var(--sf2);display:flex;flex-direction:column;gap:8px"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em">142</div><div style="font:400 13px/1 var(--ft);color:var(--fg2)">Files up to date</div></div>
|
||||
<div style="padding:16px 18px;border-radius:18px;background:var(--sf2);display:flex;flex-direction:column;gap:8px"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--act)">6</div><div style="font:400 13px/1 var(--ft);color:var(--fg2)">Syncing now</div></div>
|
||||
<div style="padding:16px 18px;border-radius:18px;background:var(--dgs);display:flex;flex-direction:column;gap:8px"><div style="font:600 28px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--dg)">1</div><div style="font:400 13px/1 var(--ft);color:var(--dg)">Needs attention</div></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ s.shares }}">
|
||||
<div style="flex:none;display:flex;padding:14px 0 8px"><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px">
|
||||
<div style="height:32px;padding:0 16px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">With you</div>
|
||||
<div style="height:32px;padding:0 16px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">By you</div>
|
||||
<div style="height:32px;padding:0 16px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Links</div>
|
||||
</div></div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ showTable }}">
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="1">
|
||||
<sc-if value="{{ g.hasLabel }}"><div style="padding:18px 12px 6px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div></sc-if>
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) 180px 160px 120px;align-items:center;height:36px;padding:0 12px;border-bottom:1px solid var(--ln);font:600 12px/1 var(--ft);color:var(--fg3)">
|
||||
<div style="display:flex;align-items:center;gap:4px">{{ c0 }}<sc-if value="{{ sortable }}"><span style="{{ i14.up }}"></span></sc-if></div><div>{{ c1 }}</div><div>{{ c2 }}</div><div></div>
|
||||
</div>
|
||||
<sc-for list="{{ g.rows }}" as="f" hint-placeholder-count="8">
|
||||
<div style="{{ f.rs }}">
|
||||
<div style="display:flex;align-items:center;gap:12px;min-width:0"><div style="{{ f.tile }}"><span style="{{ f.ico }}"></span></div><div style="font:500 14px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div></div>
|
||||
<div style="font:400 13px/1.2 var(--ft);color:var(--fg2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.a }}</div>
|
||||
<div style="display:flex;align-items:center;gap:6px;font:400 13px/1.2 var(--ft);color:var(--fg2);white-space:nowrap;overflow:hidden"><sc-if value="{{ f.bInline }}"><span style="{{ f.badge }}"></span></sc-if>{{ f.b }}</div>
|
||||
<div style="display:flex;align-items:center;justify-content:flex-end;gap:10px;color:var(--fg3)">
|
||||
<sc-if value="{{ f.bIcon }}"><span style="{{ f.badge }}"></span></sc-if>
|
||||
<sc-if value="{{ f.shared }}"><span style="{{ i16.users }}"></span></sc-if>
|
||||
<sc-if value="{{ f.fav }}"><span style="{{ starSm }}"></span></sc-if>
|
||||
<sc-if value="{{ restore }}"><div style="height:28px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.restore }}"></span>Restore</div></sc-if>
|
||||
<span style="{{ i18.moreH }}"></span>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</sc-for>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ showGrid }}">
|
||||
<div style="display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px;padding-top:6px">
|
||||
<sc-for list="{{ gridRows }}" as="f" hint-placeholder-count="10">
|
||||
<div style="border:1px solid var(--ln);border-radius:18px;overflow:hidden;display:flex;flex-direction:column;background:var(--sf)">
|
||||
<div style="{{ f.thumb }}"><span style="{{ f.icoL }}"></span></div>
|
||||
<div style="padding:10px 10px 12px 14px;display:flex;flex-direction:column;gap:5px">
|
||||
<div style="display:flex;align-items:center;gap:4px"><div style="flex:1;min-width:0;font:500 14px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div><span style="{{ moreSm }}"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:5px;font:400 12px/1.2 var(--ft);color:var(--fg3)"><sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if>{{ f.meta }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.photos }}">
|
||||
<div style="flex:none;display:flex;gap:8px;padding:14px 0 4px">
|
||||
<div style="height:32px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">All</div>
|
||||
<div style="height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;font:500 13px/1 var(--ft);white-space:nowrap">Photos</div>
|
||||
<div style="height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;font:500 13px/1 var(--ft);white-space:nowrap">Videos</div>
|
||||
<div style="height:32px;padding:0 14px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.camera }}"></span>Camera uploads</div>
|
||||
</div>
|
||||
<sc-for list="{{ photoGroups }}" as="g" hint-placeholder-count="2">
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline;padding:16px 0 10px"><div style="font:500 18px/1 var(--fd);letter-spacing:-0.02em">{{ g.label }}</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">{{ g.count }}</div></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px">
|
||||
<sc-for list="{{ g.tiles }}" as="t" hint-placeholder-count="16">
|
||||
<div style="{{ t.s }}"><sc-if value="{{ t.vid }}"><div style="position:absolute;right:6px;bottom:6px;height:20px;padding:0 7px 0 5px;border-radius:999px;background:rgba(14,13,11,0.7);color:#FFFFFF;display:flex;align-items:center;gap:3px;font:600 11px/1 var(--ft)"><span style="{{ i14.play }}"></span>{{ t.dur }}</div></sc-if></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-for>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.activity }}">
|
||||
<div style="max-width:760px;width:100%;display:flex;flex-direction:column">
|
||||
<sc-for list="{{ act }}" as="g" hint-placeholder-count="2">
|
||||
<div style="padding:20px 0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div>
|
||||
<sc-for list="{{ g.items }}" as="a" hint-placeholder-count="3">
|
||||
<div style="display:flex;gap:14px;padding:14px 0;align-items:center;border-bottom:1px solid var(--ln)">
|
||||
<div style="{{ a.av }}">{{ a.who }}</div>
|
||||
<div style="flex:1;min-width:0;font:400 14px/1.3 var(--ft)"><span style="font-weight:600">{{ a.name }}</span> {{ a.verb }} <span style="font-weight:600">{{ a.obj }}</span> {{ a.tail }}</div>
|
||||
<div style="{{ a.tile }}"><span style="{{ a.ico }}"></span></div>
|
||||
<div style="width:48px;text-align:right;font:400 13px/1 var(--ft);color:var(--fg3)">{{ a.time }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.settings }}">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:20px 0;align-items:start">
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="padding:20px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;gap:14px;align-items:center"><div style="width:52px;height:52px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 18px/1 var(--ft);flex:none">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:5px"><div style="font:500 20px/1 var(--fd);letter-spacing:-0.02em">Marina Rocha</div><div style="font:400 14px/1 var(--ft);color:var(--fg2)">marina@rocha.family</div></div><div style="height:24px;padding:0 10px;border-radius:999px;background:var(--oks);color:var(--ok);display:flex;align-items:center;font:600 12px/1 var(--ft);white-space:nowrap">Connected</div></div>
|
||||
<div style="display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 16px;font:400 14px/1.2 var(--ft)"><span style="color:var(--fg3)">Server</span><span>cloud.rocha.family</span><span style="color:var(--fg3)">Version</span><span>Nextcloud 30.0.2</span><span style="color:var(--fg3)">Storage</span><div style="display:flex;align-items:center;gap:10px"><div style="flex:1;height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div><span style="color:var(--fg2)">38.2 of 100 GB</span></div></div>
|
||||
<div style="display:flex;gap:8px"><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i14.external }}"></span>Manage on web</div><div style="height:36px;padding:0 16px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i14.logout }}"></span>Log out</div></div>
|
||||
</div>
|
||||
<div style="padding:8px 20px 12px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Accounts</div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--ln)"><div style="width:32px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Marina Rocha</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div><span style="{{ checkA }}"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:56px;border-bottom:1px solid var(--ln)"><div style="width:32px;height:32px;border-radius:999px;background:#85D1BD;color:#0E0D0B;display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Marina · Work</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">files.acme-studio.com</div></div><div style="font:600 13px/1 var(--ft);color:var(--act)">Switch</div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:48px;color:var(--act);font:600 14px/1 var(--ft)"><div style="width:32px;display:flex;justify-content:center"><span style="{{ i18.plus }}"></span></div>Add account</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Security</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--ln)"><span style="{{ bioIco }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 14px/1.1 var(--ft)">{{ bioLabel }}</div><div style="font:400 12px/1.2 var(--ft);color:var(--fg3)">Needed every time you open Noo</div></div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.timer }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Lock after</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft)">5 minutes idle<span style="{{ i14.chevD }}"></span></div></div>
|
||||
</div>
|
||||
<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">File sync</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;min-height:60px;border-bottom:1px solid var(--ln)"><span style="{{ i18.folder }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 14px/1.1 var(--ft)">Local sync folder</div><div style="font:400 12px/1.2 var(--ft);color:var(--fg3);font-family:ui-monospace,Menlo,monospace">{{ syncPath }}</div></div><div style="height:32px;padding:0 12px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">Change</div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.sync }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Sync automatically</div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.download }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Download files on demand</div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.wifi }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Pause on metered networks</div><div style="width:44px;height:26px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.settings2 }}">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;padding:20px 0;align-items:start">
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Files cache</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;padding:10px 0 14px;border-bottom:1px solid var(--ln)"><div style="display:flex;justify-content:space-between;font:400 14px/1 var(--ft)"><span>Cache in use</span><span style="color:var(--fg2)">1.2 of 2 GB</span></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:60%;height:100%;background:var(--ac)"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.database }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Cache limit</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft)">2 GB<span style="{{ i14.chevD }}"></span></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.trash }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Clear cached files</div><div style="height:32px;padding:0 14px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">Clear cache</div></div>
|
||||
</div>
|
||||
<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">Appearance</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:56px;border-bottom:1px solid var(--ln)"><span style="{{ i18.palette }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Theme</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:28px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">System</div><div style="height:28px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Light</div><div style="height:28px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Dark</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:56px;border-bottom:1px solid var(--ln)"><span style="{{ i18.grid }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Default file view</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:28px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.list }}"></span>List</div><div style="height:28px;padding:0 12px;display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--fg2)"><span style="{{ i14.grid }}"></span>Grid</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.hidden }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Show hidden files</div><div style="width:44px;height:26px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="padding:8px 20px 12px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 4px;display:flex;justify-content:space-between;align-items:baseline"><div style="font:500 17px/1 var(--fd);letter-spacing:-0.02em">Sidebar tabs</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">Drag to reorder</div></div>
|
||||
<div style="padding:4px 0 8px;font:400 12px/1.3 var(--ft);color:var(--fg3)">Pinned tabs show at the top of the sidebar, and in the bottom bar on mobile.</div>
|
||||
<sc-for list="{{ tabRows }}" as="t" hint-placeholder-count="8">
|
||||
<div style="display:flex;align-items:center;gap:12px;height:44px;border-bottom:1px solid var(--ln)"><span style="{{ gripS }}"></span><span style="{{ t.ico }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">{{ t.label }}</div><div style="{{ t.pinS }}"><span style="{{ t.pinI }}"></span></div></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="padding:8px 20px 8px;border-radius:20px;border:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="padding:12px 0 8px;font:500 17px/1 var(--fd);letter-spacing:-0.02em">{{ swipeTitle }}</div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px;border-bottom:1px solid var(--ln)"><span style="{{ i18.swipe }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Swipe left</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--dg)"><span style="{{ i14.trash }}"></span>Delete<span style="{{ i14.chevD }}"></span></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;height:52px"><span style="{{ i18.swipe }}"></span><div style="flex:1;font:400 14px/1 var(--ft)">Swipe right</div><div style="height:32px;padding:0 10px 0 12px;border-radius:10px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--act)"><span style="{{ i14.star }}"></span>Favorite<span style="{{ i14.chevD }}"></span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
|
||||
<sc-if value="{{ share }}">
|
||||
<div style="position:absolute;inset:0;background:var(--scrim);display:flex;align-items:center;justify-content:center">
|
||||
<div style="width:540px;background:var(--sf);border-radius:24px;padding:24px;box-sizing:border-box;display:flex;flex-direction:column;gap:20px;box-shadow:0 24px 48px rgba(30,0,47,0.14)">
|
||||
<div style="display:flex;gap:12px;align-items:center">
|
||||
<div style="{{ shareTile }}"><span style="{{ i20.doc }}"></span></div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"><div style="font:500 19px/1 var(--fd);letter-spacing:-0.02em">Share “Q3 Planning.pdf”</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">2.4 MB · Documents</div></div>
|
||||
<div style="width:32px;height:32px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center"><span style="{{ i16.x }}"></span></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:500 16px/1 var(--fd);letter-spacing:-0.02em">Share with people</div>
|
||||
<div style="display:flex;gap:8px"><div style="flex:1;height:42px;border-radius:12px;background:var(--sf2);display:flex;align-items:center;gap:10px;padding:0 12px;color:var(--fg3);font:400 14px/1 var(--ft)"><span style="{{ i18.userPlus }}"></span>Name, email or group</div><div style="height:42px;padding:0 10px 0 14px;border-radius:12px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft)">Can edit<span style="{{ i14.chevD }}"></span></div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:44px"><div style="{{ avYou }}">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">You</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">marina@rocha.family</div></div><div style="font:500 13px/1 var(--ft);color:var(--fg3)">Owner</div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:44px"><div style="{{ avAna }}">AS</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Ana Souza</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">ana@rocha.family</div></div><div style="height:28px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 12px/1 var(--ft);white-space:nowrap">Can edit<span style="{{ i14.chevD }}"></span></div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;height:44px"><div style="width:32px;height:32px;border-radius:999px;background:var(--sf2);color:var(--fg2);display:flex;align-items:center;justify-content:center;flex:none"><span style="{{ i16.users }}"></span></div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 14px/1 var(--ft)">Design team</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">Group · 6 people</div></div><div style="height:28px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 12px/1 var(--ft);white-space:nowrap">Can view<span style="{{ i14.chevD }}"></span></div></div>
|
||||
</div>
|
||||
<div style="height:1px;background:var(--ln)"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center"><div style="display:flex;flex-direction:column;gap:5px"><div style="font:500 16px/1 var(--fd);letter-spacing:-0.02em">Share link</div><div style="font:400 12px/1 var(--ft);color:var(--fg3)">Anyone with the link can view</div></div><div style="width:44px;height:26px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:20px;height:20px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="border-radius:14px;background:var(--sf2);padding:5px 5px 5px 14px;display:flex;gap:10px;align-items:center;color:var(--fg2)"><span style="{{ i16.link }}"></span><div style="flex:1;min-width:0;font:400 13px/1 ui-monospace,Menlo,monospace;color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">https://cloud.rocha.family/s/k7Pq2xW</div><div style="height:34px;padding:0 14px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.copy }}"></span>Copy link</div></div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
||||
<div style="height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.eye }}"></span>Can view<span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="height:30px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.calendar }}"></span>Expires Oct 24</div>
|
||||
<div style="height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.lock }}"></span>Add password</div>
|
||||
<div style="height:30px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 12px/1 var(--ft);white-space:nowrap"><span style="{{ i14.download }}"></span>Allow download</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:1px;background:var(--ln)"></div>
|
||||
<div style="display:flex;align-items:center;gap:12px">
|
||||
<div style="flex:1;font:400 12px/1.3 var(--ft);color:var(--fg3)">Sends a copy through another app. Link settings don’t apply.</div>
|
||||
<div style="height:38px;padding:0 16px;border-radius:999px;border:1.5px solid var(--sf3);display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.send }}"></span>Send file directly</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":1280,"height":800},"os":{"editor":"enum","options":["mac","windows"],"default":"mac","tsType":"'mac'|'windows'"},"screen":{"editor":"enum","options":["files","filesGrid","photos","favorites","offline","shares","recent","activity","trash","share","settings","settings2"],"default":"files","tsType":"string"},"theme":{"editor":"enum","options":["light","dark"],"default":"light","tsType":"'light'|'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
componentDidMount() {
|
||||
if (!window.NK) this._t = setInterval(() => { if (window.NK) { clearInterval(this._t); this.forceUpdate(); } }, 40);
|
||||
}
|
||||
componentWillUnmount() { clearInterval(this._t); }
|
||||
renderVals() {
|
||||
const K = window.NK;
|
||||
if (!K) return { ready: false };
|
||||
const { I, ic, D, row, TH, tile, tiles, avatar } = K;
|
||||
const mac = this.props.os !== 'windows', win = !mac;
|
||||
const sc = this.props.screen || 'files';
|
||||
const theme = this.props.theme === 'dark' ? 'dark' : 'light';
|
||||
const share = sc === 'share', grid = sc === 'filesGrid';
|
||||
const base = (share || grid) ? 'files' : sc;
|
||||
const settings = base.startsWith('settings');
|
||||
const s = {}; ['files','photos','activity','trash','favorites','offline','shares','recent','settings','settings2'].forEach(k => s[k] = base === k);
|
||||
const RS = sel => ({ display: 'grid', gridTemplateColumns: 'minmax(0,1fr) 180px 160px 120px', alignItems: 'center', height: 52, padding: '0 12px', borderBottom: '1px solid var(--ln)', background: sel ? 'var(--acs)' : 'transparent', borderRadius: sel ? 12 : 0 });
|
||||
const mk = (list, fn, o = {}) => list.map((f, i) => { const r = row(f, { tile: 30, r: 9, ico: 16, ...o }); Object.assign(r, fn(f)); r.rs = RS(o.sel === i); return r; });
|
||||
let groups = [], cols = ['Name', 'Size', 'Modified'];
|
||||
const split = f => { const p = (f.meta || '').split(' · '); return { a: p[0], b: p[1] || '' }; };
|
||||
if (base === 'files') groups = [{ rows: mk(D.files, f => ({ a: f.size, b: f.mod, bIcon: !!f.off }), { noSwipe: 1, sel: 3 }) }];
|
||||
if (base === 'favorites') groups = [{ rows: mk(D.favorites, f => ({ a: f.size, b: f.mod, bIcon: !!f.off, fav: true })) }];
|
||||
if (base === 'offline') { cols = ['Name', 'Size', 'Status']; groups = [{ rows: mk(D.offline, f => ({ a: f.size, b: split(f).a, bInline: true })) }]; }
|
||||
if (base === 'shares') { cols = ['Name', 'Shared by', 'Permission']; groups = [{ rows: mk(D.shares, f => ({ a: f.by, b: f.perm })) }]; }
|
||||
if (base === 'recent') { cols = ['Name', 'Activity', 'Location']; groups = D.recent.map(g => ({ label: g.label, rows: mk(g.rows, f => ({ ...split(f), bIcon: !!f.off })) })); }
|
||||
if (base === 'trash') { cols = ['Name', 'Original location', 'Deleted']; groups = [{ rows: mk(D.trash, f => ({ a: f.from, b: f.del })) }]; }
|
||||
groups = groups.map(g => ({ ...g, hasLabel: !!g.label }));
|
||||
const title = settings ? 'Settings' : D.titles[base];
|
||||
const seg = on => ({ width: 34, height: 30, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? 'var(--acs)' : 'transparent', color: on ? 'var(--act)' : 'var(--fg3)' });
|
||||
const counts = { trash: '12', offline: '1', shares: '3' };
|
||||
const navItem = ([label, ico, key]) => ({ label, ico: I[18][ico], icoG: ic(ico, 18, 'var(--fg2)'), on: key === base, off: key !== base, count: counts[key] || '' });
|
||||
return {
|
||||
ready: true, mac, win, s, title, groups, c0: cols[0], c1: cols[1], c2: cols[2], share, notSettings: !settings,
|
||||
sortable: base === 'files' || base === 'favorites',
|
||||
restore: base === 'trash',
|
||||
root: { ...TH[theme], width: 1280, height: 800, borderRadius: mac ? 12 : 8, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column', background: 'var(--bg)', color: 'var(--fg1)', fontFamily: 'var(--ft)', border: '1px solid var(--ln)', boxSizing: 'border-box' },
|
||||
i14: I[14], i16: I[16], i18: I[18], i20: I[20], i24: I[24],
|
||||
showTable: groups.length > 0 && !grid, showGrid: grid,
|
||||
gridRows: D.files.map(f => row(f, { noSwipe: 1, thumbH: 118 })).map(r => ({ ...r, meta: `${r.size} · ${r.mod}` })),
|
||||
segL: seg(!grid), segG: seg(grid),
|
||||
navA: D.pinned.map(navItem), navB: D.menu.map(navItem),
|
||||
setOn: settings, setOff: !settings, setIcoG: ic('settings', 18, 'var(--fg2)'),
|
||||
starSm: ic('star', 16, 'var(--act)'), moreSm: ic('moreH', 16, 'var(--fg3)'),
|
||||
checkA: ic('check', 18, 'var(--act)'), chevG: ic('chevR', 16, 'var(--fg3)'), gripS: ic('grip', 16, 'var(--fg3)'),
|
||||
photoGroups: [{ label: 'September 2026', count: '38 items', tiles: tiles(24, 0, [2, 9, 13, 20]) }, { label: 'August 2026', count: '112 items', tiles: tiles(16, 3, [4, 11]) }],
|
||||
act: D.activity.map(g => ({ label: g.label, items: g.items.map(a => ({ ...a, av: avatar(a.col, 36), tile: tile(a.kind, 30, 9), ico: I[16][K.KIND[a.kind][2]] })) })),
|
||||
tabRows: [...D.pinned.map(([label, ico]) => ({ label, ico: I[18][ico], p: 1 })), ...D.menu.map(([label, ico]) => ({ label, ico: I[18][ico], p: 0 }))].map(t => ({ ...t,
|
||||
pinS: { width: 30, height: 30, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: t.p ? 'var(--acs)' : 'var(--sf2)', color: t.p ? 'var(--act)' : 'var(--fg3)' },
|
||||
pinI: I[14][t.p ? 'pin' : 'pinOff'] })),
|
||||
bioLabel: mac ? 'Lock with Touch ID' : 'Lock with Windows Hello', bioIco: I[18][mac ? 'fingerprint' : 'face'],
|
||||
syncPath: mac ? '~/Noo/rocha.family' : 'C:\\Users\\Marina\\Noo',
|
||||
swipeTitle: mac ? 'Trackpad swipe on a file' : 'Touch swipe on a file',
|
||||
shareTile: tile('pdf', 40, 12), avYou: avatar('#CBA5FD', 32), avAna: avatar('#DA9AC7', 32)
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,433 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<script src="noo-kit.js"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
|
||||
<style>
|
||||
body{margin:0}
|
||||
a{color:#8D0DE3;text-decoration:none}
|
||||
a:hover{color:#6E08B3}
|
||||
</style>
|
||||
</helmet>
|
||||
<sc-if value="{{ ready }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="{{ root }}">
|
||||
|
||||
<sc-if value="{{ ios }}">
|
||||
<div style="height:54px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 30px 0 46px;position:relative;font:600 17px/1 var(--ft);color:var(--fg1)">
|
||||
<span>9:41</span>
|
||||
<div style="position:absolute;left:50%;top:11px;width:124px;height:36px;margin-left:-62px;border-radius:20px;background:#000000"></div>
|
||||
<div style="display:flex;gap:6px;align-items:center"><span style="{{ i16.signal }}"></span><span style="{{ i16.wifi }}"></span><span style="{{ i24.battery }}"></span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ android }}">
|
||||
<div style="height:40px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 24px;font:500 14px/1 var(--ft);color:var(--fg1)">
|
||||
<span>9:41</span>
|
||||
<div style="display:flex;gap:6px;align-items:center"><span style="{{ i16.wifi }}"></span><span style="{{ i16.signal }}"></span><span style="{{ i16.battery }}"></span></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ aBar }}">
|
||||
<div style="height:64px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;color:var(--fg1)">
|
||||
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><span style="{{ i24.menu }}"></span></div>
|
||||
<div style="flex:1;font:500 22px/1 var(--fd);letter-spacing:-0.02em">{{ title }}</div>
|
||||
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><span style="{{ i24.search }}"></span></div>
|
||||
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><div style="width:32px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ aSet }}">
|
||||
<div style="height:64px;flex:none;display:flex;align-items:center;gap:4px;padding:0 8px 0 4px;color:var(--fg1)">
|
||||
<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center"><span style="{{ i24.back }}"></span></div>
|
||||
<div style="flex:1;font:500 22px/1 var(--fd);letter-spacing:-0.02em">Settings</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ iBar }}">
|
||||
<div style="height:44px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 16px;color:var(--act)">
|
||||
<span style="{{ i24.menu }}"></span>
|
||||
<div style="display:flex;gap:18px;align-items:center"><span style="{{ i24.plus }}"></span><div style="width:30px;height:30px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 12px/1 var(--ft)">MR</div></div>
|
||||
</div>
|
||||
<div style="flex:none;padding:2px 16px 12px;font:600 34px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--fg1)">{{ title }}</div>
|
||||
<div style="flex:none;margin:0 16px 12px;height:38px;border-radius:12px;background:var(--sf);display:flex;align-items:center;gap:8px;padding:0 10px;color:var(--fg3);font:400 16px/1 var(--ft)"><span style="{{ i18.search }}"></span>Search</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ iSet }}">
|
||||
<div style="height:44px;flex:none;display:flex;align-items:center;gap:2px;padding:0 10px;color:var(--act);font:400 17px/1 var(--ft)"><span style="{{ i24.chevL }}"></span>Files</div>
|
||||
<div style="flex:none;padding:2px 16px 14px;font:600 34px/0.9 var(--fd);letter-spacing:-0.03em;color:var(--fg1)">Settings</div>
|
||||
</sc-if>
|
||||
|
||||
<div style="flex:1;min-height:0;position:relative;overflow:hidden;display:flex;flex-direction:column">
|
||||
|
||||
<sc-if value="{{ s.files }}">
|
||||
<div style="flex:none;display:flex;align-items:center;gap:8px;padding:4px 12px 12px 12px">
|
||||
<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);color:var(--fg1);white-space:nowrap"><span style="{{ i16.sort }}"></span>Name<span style="{{ i14.up }}"></span></div>
|
||||
<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);color:var(--fg1);white-space:nowrap"><span style="{{ i16.filter }}"></span><span style="white-space:nowrap">All types</span><span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px">
|
||||
<div style="{{ segL }}"><span style="{{ i18.list }}"></span></div>
|
||||
<div style="{{ segG }}"><span style="{{ i18.grid }}"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.trash }}">
|
||||
<div style="flex:none;margin:0 12px 16px;padding:14px 16px;border-radius:20px;background:var(--sf);display:flex;gap:12px;align-items:center;color:var(--fg2)">
|
||||
<span style="{{ i20.info }}"></span>
|
||||
<div style="flex:1;font:400 14px/1.3 var(--ft);text-wrap:pretty">Items here are deleted for good after 30 days.</div>
|
||||
<div style="font:600 14px/1 var(--ft);color:var(--dg);white-space:nowrap">Empty trash</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.offline }}">
|
||||
<div style="flex:none;margin:0 12px 16px;padding:18px;border-radius:20px;background:var(--sf);display:flex;flex-direction:column;gap:14px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:flex-end;gap:12px">
|
||||
<div style="display:flex;flex-direction:column;gap:6px"><div style="font:600 32px/0.9 var(--fd);letter-spacing:-0.03em">2.4 GB</div><div style="font:400 14px/1.2 var(--ft);color:var(--fg2)">of your 5 GB offline limit</div></div>
|
||||
<div style="height:36px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sync }}"></span>Sync now</div>
|
||||
</div>
|
||||
<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:48%;height:100%;background:var(--ac)"></div></div>
|
||||
<div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">Last synced 2 minutes ago · 1 file needs attention</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.shares }}">
|
||||
<div style="flex:none;margin:0 12px 16px;display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px">
|
||||
<div style="flex:1;height:34px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 14px/1 var(--ft)">With you</div>
|
||||
<div style="flex:1;height:34px;border-radius:999px;color:var(--fg2);display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--ft)">By you</div>
|
||||
<div style="flex:1;height:34px;border-radius:999px;color:var(--fg2);display:flex;align-items:center;justify-content:center;font:500 14px/1 var(--ft)">Links</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ showList }}">
|
||||
<div style="display:flex;flex-direction:column;gap:18px;padding:0 12px 16px">
|
||||
<sc-for list="{{ groups }}" as="g" hint-placeholder-count="1">
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<sc-if value="{{ g.hasLabel }}"><div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div></sc-if>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<sc-for list="{{ g.rows }}" as="f" hint-placeholder-count="6">
|
||||
<div style="position:relative;background:var(--dgf)">
|
||||
<sc-if value="{{ f.swiped }}"><div style="position:absolute;right:0;top:0;bottom:0;width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#FFFFFF;font:600 12px/1 var(--ft)"><span style="{{ i20.trash }}"></span>Delete</div></sc-if>
|
||||
<div style="{{ f.rs }}">
|
||||
<div style="{{ f.tile }}"><span style="{{ f.ico }}"></span></div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px">
|
||||
<div style="font:500 16px/1.2 var(--ft);color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div>
|
||||
<div style="display:flex;align-items:center;gap:5px;font:400 13px/1.2 var(--ft);color:var(--fg3);white-space:nowrap;overflow:hidden">
|
||||
<sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if>
|
||||
<sc-if value="{{ f.shared }}"><span style="{{ i14.users }}"></span></sc-if>
|
||||
<span style="flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis">{{ f.meta }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<sc-if value="{{ f.fav }}"><span style="{{ starSm }}"></span></sc-if>
|
||||
<div style="width:32px;height:40px;display:flex;align-items:center;justify-content:center"><span style="{{ trail }}"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ showGrid }}">
|
||||
<div style="display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px;padding:0 12px 16px">
|
||||
<sc-for list="{{ gridRows }}" as="f" hint-placeholder-count="6">
|
||||
<div style="background:var(--sf);border-radius:18px;overflow:hidden;display:flex;flex-direction:column">
|
||||
<div style="{{ f.thumb }}"><span style="{{ f.icoL }}"></span></div>
|
||||
<div style="padding:10px 8px 12px 12px;display:flex;flex-direction:column;gap:5px">
|
||||
<div style="display:flex;align-items:center;gap:4px"><div style="flex:1;min-width:0;font:500 14px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div><span style="{{ moreSm }}"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:4px;font:400 12px/1.2 var(--ft);color:var(--fg3);white-space:nowrap"><sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if><sc-if value="{{ f.fav }}"><span style="{{ starXs }}"></span></sc-if>{{ f.size }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.photos }}">
|
||||
<div style="flex:none;display:flex;gap:8px;padding:4px 12px 4px">
|
||||
<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 14px/1 var(--ft);white-space:nowrap">All</div>
|
||||
<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--sf);display:flex;align-items:center;font:500 14px/1 var(--ft);white-space:nowrap">Photos</div>
|
||||
<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--sf);display:flex;align-items:center;font:500 14px/1 var(--ft);white-space:nowrap">Videos</div>
|
||||
<div style="height:34px;padding:0 14px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.camera }}"></span>Camera</div>
|
||||
</div>
|
||||
<sc-for list="{{ photoGroups }}" as="g" hint-placeholder-count="2">
|
||||
<div style="display:flex;justify-content:space-between;align-items:baseline;padding:16px 16px 10px"><div style="font:500 18px/1 var(--fd);letter-spacing:-0.02em">{{ g.label }}</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">{{ g.count }}</div></div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px">
|
||||
<sc-for list="{{ g.tiles }}" as="t" hint-placeholder-count="9">
|
||||
<div style="{{ t.s }}"><sc-if value="{{ t.vid }}"><div style="position:absolute;right:6px;bottom:6px;height:20px;padding:0 7px 0 5px;border-radius:999px;background:rgba(14,13,11,0.7);color:#FFFFFF;display:flex;align-items:center;gap:3px;font:600 11px/1 var(--ft)"><span style="{{ i14.play }}"></span>{{ t.dur }}</div></sc-if></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-for>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.activity }}">
|
||||
<div style="display:flex;flex-direction:column;gap:18px;padding:0 12px 16px">
|
||||
<sc-for list="{{ act }}" as="g" hint-placeholder-count="2">
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">{{ g.label }}</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<sc-for list="{{ g.items }}" as="a" hint-placeholder-count="3">
|
||||
<div style="display:flex;gap:12px;padding:14px;background:var(--sf);align-items:flex-start">
|
||||
<div style="{{ a.av }}">{{ a.who }}</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px">
|
||||
<div style="font:400 15px/1.3 var(--ft);color:var(--fg1);text-wrap:pretty"><span style="font-weight:600">{{ a.name }}</span> {{ a.verb }} <span style="font-weight:600">{{ a.obj }}</span> {{ a.tail }}</div>
|
||||
<div style="font:400 13px/1 var(--ft);color:var(--fg3)">{{ a.time }}</div>
|
||||
</div>
|
||||
<div style="{{ a.tile }}"><span style="{{ a.ico }}"></span></div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.settings }}">
|
||||
<div style="display:flex;flex-direction:column;gap:20px;padding:0 12px 16px">
|
||||
<div style="padding:18px;border-radius:20px;background:var(--sf);display:flex;flex-direction:column;gap:16px">
|
||||
<div style="display:flex;gap:14px;align-items:center">
|
||||
<div style="width:56px;height:56px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 20px/1 var(--ft);flex:none">MR</div>
|
||||
<div style="display:flex;flex-direction:column;gap:5px;flex:1;min-width:0"><div style="font:500 20px/1 var(--fd);letter-spacing:-0.02em">Marina Rocha</div><div style="font:400 14px/1 var(--ft);color:var(--fg2)">marina@rocha.family</div></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:14px;background:var(--sf2)">
|
||||
<span style="{{ i18.server }}"></span>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1.1 var(--ft)">cloud.rocha.family</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">Nextcloud 30.0.2</div></div>
|
||||
<div style="height:24px;padding:0 10px;border-radius:999px;background:var(--oks);color:var(--ok);display:flex;align-items:center;font:600 12px/1 var(--ft);white-space:nowrap">Connected</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="display:flex;justify-content:space-between;font:400 14px/1 var(--ft)"><span style="font-weight:500">Storage</span><span style="color:var(--fg2)">38.2 of 100 GB</span></div>
|
||||
<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:8px">
|
||||
<div style="flex:1;height:44px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--ft)"><span style="{{ i16.external }}"></span>Manage on web</div>
|
||||
<div style="flex:1;height:44px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;justify-content:center;gap:8px;font:600 15px/1 var(--ft)"><span style="{{ i16.logout }}"></span>Log out</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Accounts</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:60px;background:var(--sf)"><div style="width:36px;height:36px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 16px/1 var(--ft)">Marina Rocha</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div><span style="{{ checkA }}"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:60px;background:var(--sf)"><div style="width:36px;height:36px;border-radius:999px;background:#85D1BD;color:#0E0D0B;display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 16px/1 var(--ft)">Marina · Work</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">files.acme-studio.com</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf);color:var(--act);font:600 15px/1 var(--ft)"><div style="width:36px;display:flex;justify-content:center"><span style="{{ i20.plus }}"></span></div>Add account</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Security</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;box-sizing:border-box;background:var(--sf)"><span style="{{ bioIco }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 16px/1.1 var(--ft)">{{ bioLabel }}</div><div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">Needed every time you open the app</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.timer }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Lock after</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">1 minute<span style="{{ i18.chevR }}"></span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.settings2 }}">
|
||||
<div style="display:flex;flex-direction:column;gap:20px;padding:0 12px 16px">
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">File sync</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;box-sizing:border-box;background:var(--sf)"><span style="{{ i20.camera }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 16px/1.1 var(--ft)">Auto-upload photos</div><div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">To /Photos/Camera</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.wifi }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Wi-Fi only</div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.charging }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Only while charging</div><div style="width:48px;height:28px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.sync }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Refresh offline files</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">Every 15 min<span style="{{ i18.chevR }}"></span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Files cache</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--sf)"><div style="display:flex;justify-content:space-between;font:400 16px/1 var(--ft)"><span>Cache in use</span><span style="color:var(--fg3);font-size:15px">1.2 of 2 GB</span></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:60%;height:100%;background:var(--ac)"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.database }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Cache limit</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">2 GB<span style="{{ i18.chevR }}"></span></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf);color:var(--dg)"><span style="{{ i20.trash }}"></span><div style="flex:1;font:500 16px/1 var(--ft)">Clear cache</div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Appearance</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;height:56px;background:var(--sf)"><div style="flex:1;font:400 16px/1 var(--ft)">Theme</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:30px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft);white-space:nowrap">System</div><div style="height:30px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Light</div><div style="height:30px;padding:0 12px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Dark</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:0 12px 0 16px;height:56px;background:var(--sf)"><div style="flex:1;font:400 16px/1 var(--ft)">Default view</div><div style="display:flex;padding:3px;border-radius:999px;background:var(--sf2);gap:2px"><div style="height:30px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.list }}"></span>List</div><div style="height:30px;padding:0 12px;display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);color:var(--fg2)"><span style="{{ i14.grid }}"></span>Grid</div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><div style="flex:1;font:400 16px/1 var(--ft)">Show hidden files</div><div style="width:48px;height:28px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ s.settings3 }}">
|
||||
<div style="display:flex;flex-direction:column;gap:20px;padding:0 12px 16px">
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;display:flex;justify-content:space-between;font:600 13px/1 var(--ft);color:var(--fg2)"><span>Tabs</span><span style="font-weight:500;color:var(--fg3)">5 of 5 pinned</span></div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<sc-for list="{{ tabRows }}" as="t" hint-placeholder-count="8">
|
||||
<div style="display:flex;align-items:center;gap:12px;padding:0 10px 0 10px;height:52px;background:var(--sf)">
|
||||
<span style="{{ gripS }}"></span>
|
||||
<span style="{{ t.ico }}"></span>
|
||||
<div style="flex:1;font:400 16px/1 var(--ft)">{{ t.label }}</div>
|
||||
<div style="{{ t.pinS }}"><span style="{{ t.pinI }}"></span></div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="padding:0 8px;font:400 13px/1.3 var(--ft);color:var(--fg3);text-wrap:pretty">Pinned tabs sit in the bottom bar. The rest live in the menu. Drag to reorder.</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px">
|
||||
<div style="padding:0 8px;font:600 13px/1 var(--ft);color:var(--fg2)">Swipe on a file</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.swipe }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Swipe left</div><div style="height:28px;padding:0 10px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:5px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.trash }}"></span>Delete</div><span style="{{ chevG }}"></span></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.swipe }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Swipe right</div><div style="height:28px;padding:0 10px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:5px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.star }}"></span>Favorite</div><span style="{{ chevG }}"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ fab }}">
|
||||
<div style="position:absolute;right:16px;bottom:16px;height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:10px;font:600 16px/1 var(--ft)"><span style="{{ i24.plus }}"></span>Upload</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
|
||||
<sc-if value="{{ aNav }}">
|
||||
<div style="flex:none;background:var(--sf);display:flex;flex-direction:column">
|
||||
<div style="display:flex;height:80px;align-items:center">
|
||||
<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px">
|
||||
<sc-if value="{{ n.on }}"><div style="width:56px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:600 12px/1 var(--ft);color:var(--fg1)">{{ n.label }}</div></sc-if>
|
||||
<sc-if value="{{ n.off }}"><div style="width:56px;height:32px;color:var(--fg2);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:500 12px/1 var(--ft);color:var(--fg2)">{{ n.label }}</div></sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="height:20px;display:flex;align-items:center;justify-content:center"><div style="width:108px;height:4px;border-radius:999px;background:var(--fg3)"></div></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ iNav }}">
|
||||
<div style="flex:none;background:var(--sf);border-top:1px solid var(--ln);display:flex;flex-direction:column">
|
||||
<div style="display:flex;padding-top:8px;height:50px;box-sizing:border-box">
|
||||
<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
|
||||
<sc-if value="{{ n.on }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--act);font:600 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
|
||||
<sc-if value="{{ n.off }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg3);font:500 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="height:34px;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;box-sizing:border-box"><div style="width:134px;height:5px;border-radius:999px;background:var(--fg1)"></div></div>
|
||||
</div>
|
||||
</sc-if>
|
||||
<sc-if value="{{ aGesture }}"><div style="height:24px;flex:none;display:flex;align-items:center;justify-content:center"><div style="width:108px;height:4px;border-radius:999px;background:var(--fg3)"></div></div></sc-if>
|
||||
<sc-if value="{{ iGesture }}"><div style="height:34px;flex:none;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;box-sizing:border-box"><div style="width:134px;height:5px;border-radius:999px;background:var(--fg1)"></div></div></sc-if>
|
||||
|
||||
<sc-if value="{{ drawer }}">
|
||||
<div style="position:absolute;inset:0;background:var(--scrim)"></div>
|
||||
<div style="position:absolute;left:0;top:0;bottom:0;width:316px;background:var(--sf);border-radius:0 28px 28px 0;display:flex;flex-direction:column;padding:64px 12px 28px;box-sizing:border-box;gap:4px">
|
||||
<div style="display:flex;gap:12px;align-items:center;padding:0 12px 14px">
|
||||
<div style="width:48px;height:48px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 17px/1 var(--ft);flex:none">MR</div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"><div style="font:500 18px/1 var(--fd);letter-spacing:-0.02em">Marina Rocha</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">cloud.rocha.family</div></div>
|
||||
<div style="width:36px;height:36px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center"><span style="{{ i18.chevD }}"></span></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:8px;padding:0 12px 16px">
|
||||
<div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:38%;height:100%;background:var(--ac)"></div></div>
|
||||
<div style="font:400 13px/1 var(--ft);color:var(--fg3)">38.2 GB of 100 GB used</div>
|
||||
</div>
|
||||
<div style="height:1px;background:var(--ln);margin:0 12px 8px"></div>
|
||||
<div style="padding:8px 16px;font:600 13px/1 var(--ft);color:var(--fg2)">More</div>
|
||||
<sc-for list="{{ menuRows }}" as="m" hint-placeholder-count="3">
|
||||
<div style="height:52px;border-radius:999px;padding:0 16px;display:flex;align-items:center;gap:14px;font:500 16px/1 var(--ft)"><span style="{{ m.ico }}"></span><div style="flex:1">{{ m.label }}</div><div style="font:500 14px/1 var(--ft);color:var(--fg3)">{{ m.count }}</div></div>
|
||||
</sc-for>
|
||||
<div style="height:1px;background:var(--ln);margin:8px 12px"></div>
|
||||
<div style="height:52px;border-radius:999px;padding:0 16px;display:flex;align-items:center;gap:14px;font:500 16px/1 var(--ft)"><span style="{{ i24.settings }}"></span>Settings</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="padding:0 16px;display:flex;align-items:center;gap:8px;font:600 14px/1 var(--ft);color:var(--act)"><span style="{{ i16.pencil }}"></span>Edit tabs</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
<sc-if value="{{ share }}">
|
||||
<div style="position:absolute;inset:0;background:var(--scrim)"></div>
|
||||
<div style="position:absolute;left:0;right:0;bottom:0;background:var(--sf);border-radius:28px 28px 0 0;padding:10px 20px 40px;display:flex;flex-direction:column;gap:22px">
|
||||
<div style="align-self:center;width:36px;height:5px;border-radius:999px;background:var(--sf3)"></div>
|
||||
<div style="display:flex;gap:12px;align-items:center">
|
||||
<div style="{{ shareTile }}"><span style="{{ i24.doc }}"></span></div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:5px"><div style="font:500 19px/1 var(--fd);letter-spacing:-0.02em">Q3 Planning.pdf</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">2.4 MB · Documents</div></div>
|
||||
<div style="width:36px;height:36px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;justify-content:center"><span style="{{ i18.x }}"></span></div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:500 17px/1 var(--fd);letter-spacing:-0.02em">Share with people</div>
|
||||
<div style="height:48px;border-radius:14px;background:var(--sf2);display:flex;align-items:center;gap:10px;padding:0 14px;color:var(--fg3);font:400 15px/1 var(--ft)"><span style="{{ i20.userPlus }}"></span>Name, email or group</div>
|
||||
<div style="display:flex;flex-direction:column;gap:14px;padding-top:4px">
|
||||
<div style="display:flex;align-items:center;gap:12px"><div style="{{ avYou }}">MR</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1 var(--ft)">You</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">marina@rocha.family</div></div><div style="font:500 13px/1 var(--ft);color:var(--fg3);padding-right:4px">Owner</div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px"><div style="{{ avAna }}">AS</div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1 var(--ft)">Ana Souza</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">ana@rocha.family</div></div><div style="height:30px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 13px/1 var(--ft);white-space:nowrap">Can edit<span style="{{ i14.chevD }}"></span></div></div>
|
||||
<div style="display:flex;align-items:center;gap:12px"><div style="width:36px;height:36px;border-radius:999px;background:var(--sf2);color:var(--fg2);display:flex;align-items:center;justify-content:center;flex:none"><span style="{{ i18.users }}"></span></div><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:500 15px/1 var(--ft)">Design team</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">Group · 6 people</div></div><div style="height:30px;padding:0 8px 0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:4px;font:500 13px/1 var(--ft);white-space:nowrap">Can view<span style="{{ i14.chevD }}"></span></div></div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="height:1px;background:var(--ln)"></div>
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="display:flex;justify-content:space-between;align-items:center"><div style="display:flex;flex-direction:column;gap:5px"><div style="font:500 17px/1 var(--fd);letter-spacing:-0.02em">Share link</div><div style="font:400 13px/1 var(--ft);color:var(--fg3)">Anyone with the link can view</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="border-radius:16px;background:var(--sf2);padding:6px 6px 6px 14px;display:flex;gap:10px;align-items:center;color:var(--fg2)"><span style="{{ i18.link }}"></span><div style="flex:1;min-width:0;font:400 14px/1 ui-monospace,Menlo,monospace;color:var(--fg1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">cloud.rocha.family/s/k7Pq2xW</div><div style="height:40px;padding:0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:6px;font:600 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.copy }}"></span>Copy link</div></div>
|
||||
<div style="display:flex;gap:8px;flex-wrap:wrap">
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.eye }}"></span>Can view<span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.calendar }}"></span>Expires Oct 24</div>
|
||||
<div style="height:32px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 13px/1 var(--ft);white-space:nowrap"><span style="{{ i14.lock }}"></span>Add password</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px">
|
||||
<div style="height:52px;border-radius:999px;border:1.5px solid var(--sf3);display:flex;align-items:center;justify-content:center;gap:10px;font:600 16px/1 var(--ft)"><span style="{{ i20.send }}"></span>Send file directly</div>
|
||||
<div style="font:400 13px/1.3 var(--ft);color:var(--fg3);text-align:center">Sends a copy through another app. Link settings don’t apply.</div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-if>
|
||||
|
||||
</div>
|
||||
</sc-if>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"$preview":{"width":390,"height":844},"platform":{"editor":"enum","options":["ios","android"],"default":"ios","tsType":"'ios'|'android'"},"screen":{"editor":"enum","options":["files","filesGrid","photos","favorites","offline","shares","recent","activity","trash","drawer","share","settings","settings2","settings3"],"default":"files","tsType":"string"},"theme":{"editor":"enum","options":["light","dark"],"default":"light","tsType":"'light'|'dark'"}}">
|
||||
class Component extends DCLogic {
|
||||
componentDidMount() {
|
||||
if (!window.NK) this._t = setInterval(() => { if (window.NK) { clearInterval(this._t); this.forceUpdate(); } }, 40);
|
||||
}
|
||||
componentWillUnmount() { clearInterval(this._t); }
|
||||
renderVals() {
|
||||
const K = window.NK;
|
||||
if (!K) return { ready: false };
|
||||
const { I, ic, D, row, TH, tile, tiles, avatar } = K;
|
||||
const ios = this.props.platform !== 'android', android = !ios;
|
||||
const sc = this.props.screen || 'files';
|
||||
const theme = this.props.theme === 'dark' ? 'dark' : 'light';
|
||||
const drawer = sc === 'drawer', share = sc === 'share';
|
||||
const grid = sc === 'filesGrid';
|
||||
const base = (drawer || share || grid) ? 'files' : sc;
|
||||
const settings = base.startsWith('settings');
|
||||
const s = {}; ['files','photos','activity','trash','favorites','offline','shares','recent','settings','settings2','settings3'].forEach(k => s[k] = base === k);
|
||||
const ROW = { display: 'flex', alignItems: 'center', gap: 14, padding: '0 6px 0 14px', height: 64, background: 'var(--sf)', position: 'relative' };
|
||||
const mk = (list, o = {}) => list.map(f => { const r = row(f, o); r.rs = { ...ROW, transform: r.swiped ? 'translateX(-96px)' : 'none' }; return r; });
|
||||
const noSwipe = drawer || share;
|
||||
let groups = [], trail = ic(ios ? 'moreH' : 'moreV', 20, 'var(--fg3)');
|
||||
if (base === 'files') groups = [{ rows: mk(D.files, { noSwipe }) }];
|
||||
if (base === 'favorites') { groups = [{ rows: mk(D.favorites, { noFav: 1 }) }]; trail = ic('star', 20, 'var(--act)'); }
|
||||
if (base === 'offline') groups = [{ rows: mk(D.offline) }];
|
||||
if (base === 'shares') groups = [{ rows: mk(D.shares) }];
|
||||
if (base === 'recent') groups = D.recent.map(g => ({ label: g.label, rows: mk(g.rows) }));
|
||||
if (base === 'trash') { groups = [{ rows: mk(D.trash) }]; trail = ic('restore', 20, 'var(--act)'); }
|
||||
groups = groups.map(g => ({ ...g, hasLabel: !!g.label }));
|
||||
const title = settings ? 'Settings' : D.titles[base];
|
||||
const seg = on => ({ width: 36, height: 28, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: on ? 'var(--acs)' : 'transparent', color: on ? 'var(--act)' : 'var(--fg3)' });
|
||||
return {
|
||||
ready: true, ios, android, s, title, groups, trail, drawer, share,
|
||||
root: { ...TH[theme], width: 390, height: 844, borderRadius: ios ? 48 : 36, overflow: 'hidden', position: 'relative', display: 'flex', flexDirection: 'column', background: 'var(--bg)', color: 'var(--fg1)', fontFamily: 'var(--ft)' },
|
||||
i14: I[14], i16: I[16], i18: I[18], i20: I[20], i24: I[24],
|
||||
aBar: android && !settings, aSet: android && settings, iBar: ios && !settings, iSet: ios && settings,
|
||||
aNav: android && !settings, iNav: ios && !settings, aGesture: android && settings, iGesture: ios && settings,
|
||||
showList: groups.length > 0 && !grid, showGrid: grid,
|
||||
gridRows: D.files.slice(0, 8).map(f => row(f, { noSwipe: 1 })),
|
||||
segL: seg(!grid), segG: seg(grid),
|
||||
fab: android && (base === 'files' || base === 'photos'),
|
||||
starSm: ic('star', 16, 'var(--act)'), starXs: ic('star', 12, 'var(--act)'), moreSm: ic(ios ? 'moreH' : 'moreV', 16, 'var(--fg3)'),
|
||||
checkA: ic('check', 20, 'var(--act)'), chevG: ic('chevR', 18, 'var(--fg3)'), gripS: ic('grip', 18, 'var(--fg3)'),
|
||||
photoGroups: [{ label: 'September 2026', count: '38 items', tiles: tiles(18, 0, [2, 9, 13]) }, { label: 'August 2026', count: '112 items', tiles: tiles(9, 3, [4]) }],
|
||||
act: D.activity.map(g => ({ label: g.label, items: g.items.map(a => ({ ...a, av: avatar(a.col, 36), tile: tile(a.kind, 32, 10), ico: I[16][K.KIND[a.kind][2]] })) })),
|
||||
nav: D.pinned.map(([label, ico, key]) => ({ label, ico: I[24][ico], on: key === base, off: key !== base })),
|
||||
menuRows: D.menu.map(([label, ico, key, count]) => ({ label, ico: I[24][ico], count })),
|
||||
tabRows: [...D.pinned.map(([label, ico]) => ({ label, ico: I[20][ico], p: 1 })), ...D.menu.map(([label, ico]) => ({ label, ico: I[20][ico], p: 0 }))].map(t => ({ ...t,
|
||||
pinS: { width: 36, height: 36, borderRadius: 999, display: 'flex', alignItems: 'center', justifyContent: 'center', background: t.p ? 'var(--acs)' : 'var(--sf2)', color: t.p ? 'var(--act)' : 'var(--fg3)' },
|
||||
pinI: I[16][t.p ? 'pin' : 'pinOff'] })),
|
||||
bioLabel: ios ? 'Lock with Face ID' : 'Lock with fingerprint', bioIco: I[20][ios ? 'face' : 'fingerprint'],
|
||||
shareTile: tile('pdf', 44, 12), avYou: { ...avatar('#CBA5FD', 36) }, avAna: avatar('#DA9AC7', 36)
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,202 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<script src="noo-kit.js"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
|
||||
<style>
|
||||
body{margin:0;background:#F3EFE6}
|
||||
a{color:#8D0DE3;text-decoration:none}
|
||||
a:hover{color:#6E08B3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="max-width:1440px;margin:0 auto;padding:64px 40px 96px;display:flex;flex-direction:column;gap:48px;font-family:'Instrument Sans',system-ui,sans-serif;color:#0E0D0B">
|
||||
<div style="display:flex;flex-direction:column;gap:16px">
|
||||
<div style="font:600 64px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">Noo design system</div>
|
||||
<div style="font:400 18px/1.35 'Instrument Sans',system-ui,sans-serif;color:#5A5852;max-width:760px;text-wrap:pretty">Every component is shown in light and dark. The full rules for code are in <a href="DESIGN_SYSTEM.md">DESIGN_SYSTEM.md</a>. You can see every screen in <a href="Noo Screens.dc.html">Noo Screens</a>.</div>
|
||||
</div>
|
||||
|
||||
<sc-if value="{{ ready }}" hint-placeholder-val="{{ false }}">
|
||||
<div style="display:flex;flex-direction:column;gap:14px">
|
||||
<div style="font:500 28px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.02em">Type</div>
|
||||
<div style="background:#FFFFFF;border-radius:20px;padding:8px 24px">
|
||||
<sc-for list="{{ type }}" as="t" hint-placeholder-count="9">
|
||||
<div style="display:grid;grid-template-columns:200px minmax(0,1fr);gap:24px;align-items:center;padding:16px 0;border-bottom:1px solid #EAE8E2">
|
||||
<div style="font:400 13px/1.3 ui-monospace,Menlo,monospace;color:#7C7A72">{{ t.spec }}</div>
|
||||
<div style="{{ t.s }}">{{ t.sample }}</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,600px),1fr));gap:24px">
|
||||
<sc-for list="{{ themes }}" as="th" hint-placeholder-count="2">
|
||||
<div style="{{ th.vars }}">
|
||||
<div style="display:flex;flex-direction:column;gap:28px;padding:28px;border-radius:28px;background:var(--bg);color:var(--fg1);font-family:var(--ft)">
|
||||
<div style="font:600 32px/0.9 var(--fd);letter-spacing:-0.03em">{{ th.label }}</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Color</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:8px">
|
||||
<sc-for list="{{ th.swatches }}" as="c" hint-placeholder-count="16">
|
||||
<div style="display:flex;flex-direction:column;gap:6px;padding:6px;border-radius:14px;background:var(--sf)">
|
||||
<div style="{{ c.s }}"></div>
|
||||
<div style="padding:0 4px 4px;display:flex;flex-direction:column;gap:3px"><div style="font:600 12px/1 var(--ft)">{{ c.name }}</div><div style="font:400 11px/1 ui-monospace,Menlo,monospace;color:var(--fg3)">{{ c.hex }}</div></div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">File-type tiles</div>
|
||||
<div style="display:flex;gap:14px;flex-wrap:wrap">
|
||||
<sc-for list="{{ kinds }}" as="k" hint-placeholder-count="7">
|
||||
<div style="display:flex;flex-direction:column;align-items:center;gap:6px"><div style="{{ k.tile }}"><span style="{{ k.ico }}"></span></div><div style="font:500 12px/1 var(--ft);color:var(--fg2)">{{ k.name }}</div></div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Buttons</div>
|
||||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
|
||||
<div style="height:44px;padding:0 20px 0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i18.plus }}"></span>Primary</div>
|
||||
<div style="height:44px;padding:0 20px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sync }}"></span>Tonal</div>
|
||||
<div style="height:44px;padding:0 20px;border-radius:999px;background:var(--sf2);display:flex;align-items:center;font:600 15px/1 var(--ft);white-space:nowrap">Secondary</div>
|
||||
<div style="height:44px;padding:0 20px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i16.logout }}"></span>Danger</div>
|
||||
<div style="height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--sf3);display:flex;align-items:center;gap:8px;font:600 15px/1 var(--ft);white-space:nowrap"><span style="{{ i16.send }}"></span>Outline</div>
|
||||
<div style="height:56px;padding:0 20px 0 16px;border-radius:999px;background:var(--ac);color:#FFFFFF;display:flex;align-items:center;gap:10px;font:600 16px/1 var(--ft);white-space:nowrap"><span style="{{ i24.plus }}"></span>FAB · Android</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Chips, segmented, toggles, search</div>
|
||||
<div style="display:flex;gap:10px;flex-wrap:wrap;align-items:center">
|
||||
<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--sf);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);white-space:nowrap"><span style="{{ i16.sort }}"></span>Name<span style="{{ i14.up }}"></span></div>
|
||||
<div style="height:34px;padding:0 12px;border-radius:999px;border:1px solid var(--ln);display:flex;align-items:center;gap:6px;font:500 14px/1 var(--ft);white-space:nowrap">Modified<span style="{{ i14.chevD }}"></span></div>
|
||||
<div style="height:34px;padding:0 12px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;gap:6px;font:600 14px/1 var(--ft);white-space:nowrap">Available offline<span style="{{ i14.x }}"></span></div>
|
||||
<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px"><div style="width:36px;height:28px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center"><span style="{{ i18.list }}"></span></div><div style="width:36px;height:28px;color:var(--fg3);display:flex;align-items:center;justify-content:center"><span style="{{ i18.grid }}"></span></div></div>
|
||||
<div style="display:flex;padding:3px;border-radius:999px;background:var(--sf);gap:2px"><div style="height:30px;padding:0 14px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;font:600 13px/1 var(--ft)">With you</div><div style="height:30px;padding:0 14px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">By you</div><div style="height:30px;padding:0 14px;display:flex;align-items:center;font:500 13px/1 var(--ft);color:var(--fg2)">Links</div></div>
|
||||
<div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div>
|
||||
<div style="width:48px;height:28px;border-radius:999px;background:var(--sf3);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-start"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div>
|
||||
</div>
|
||||
<div style="height:38px;border-radius:12px;background:var(--sf);display:flex;align-items:center;gap:8px;padding:0 12px;color:var(--fg3);font:400 16px/1 var(--ft)"><span style="{{ i18.search }}"></span>Search</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Grouped list · file rows · swipe</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<sc-for list="{{ rows }}" as="f" hint-placeholder-count="4">
|
||||
<div style="position:relative;background:var(--dgf)">
|
||||
<sc-if value="{{ f.swiped }}"><div style="position:absolute;right:0;top:0;bottom:0;width:96px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:#FFFFFF;font:600 12px/1 var(--ft)"><span style="{{ i20.trash }}"></span>Delete</div></sc-if>
|
||||
<div style="{{ f.rs }}">
|
||||
<div style="{{ f.tile }}"><span style="{{ f.ico }}"></span></div>
|
||||
<div style="flex:1;min-width:0;display:flex;flex-direction:column;gap:4px">
|
||||
<div style="font:500 16px/1.2 var(--ft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{{ f.name }}</div>
|
||||
<div style="display:flex;align-items:center;gap:5px;font:400 13px/1.2 var(--ft);color:var(--fg3);white-space:nowrap"><sc-if value="{{ f.hasBadge }}"><span style="{{ f.badge }}"></span></sc-if><sc-if value="{{ f.shared }}"><span style="{{ i14.users }}"></span></sc-if>{{ f.meta }}</div>
|
||||
</div>
|
||||
<sc-if value="{{ f.fav }}"><span style="{{ starSm }}"></span></sc-if>
|
||||
<div style="width:32px;display:flex;justify-content:center"><span style="{{ moreT }}"></span></div>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Settings rows · progress · badges · avatars</div>
|
||||
<div style="display:flex;flex-direction:column;gap:1px;background:var(--ln);border-radius:20px;overflow:hidden">
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:12px 16px;min-height:60px;box-sizing:border-box;background:var(--sf)"><span style="{{ i20.fingerprint }}"></span><div style="flex:1;display:flex;flex-direction:column;gap:4px"><div style="font:400 16px/1.1 var(--ft)">Toggle row</div><div style="font:400 13px/1.2 var(--ft);color:var(--fg3)">With a subtitle</div></div><div style="width:48px;height:28px;border-radius:999px;background:var(--ac);padding:3px;box-sizing:border-box;display:flex;justify-content:flex-end;flex:none"><div style="width:22px;height:22px;border-radius:999px;background:#FFFFFF"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf)"><span style="{{ i20.timer }}"></span><div style="flex:1;font:400 16px/1 var(--ft)">Value row</div><div style="display:flex;align-items:center;gap:4px;font:400 15px/1 var(--ft);color:var(--fg3)">1 minute<span style="{{ i18.chevR }}"></span></div></div>
|
||||
<div style="display:flex;flex-direction:column;gap:10px;padding:14px 16px;background:var(--sf)"><div style="display:flex;justify-content:space-between;font:400 16px/1 var(--ft)"><span>Progress row</span><span style="color:var(--fg3);font-size:15px">1.2 of 2 GB</span></div><div style="height:6px;border-radius:999px;background:var(--sf3);overflow:hidden"><div style="width:60%;height:100%;background:var(--ac)"></div></div></div>
|
||||
<div style="display:flex;align-items:center;gap:14px;padding:0 16px;height:52px;background:var(--sf);color:var(--dg)"><span style="{{ i20.trash }}"></span><div style="flex:1;font:500 16px/1 var(--ft)">Destructive row</div></div>
|
||||
</div>
|
||||
<div style="display:flex;gap:10px;align-items:center;flex-wrap:wrap">
|
||||
<div style="height:24px;padding:0 10px;border-radius:999px;background:var(--oks);color:var(--ok);display:flex;align-items:center;font:600 12px/1 var(--ft)">Connected</div>
|
||||
<div style="height:24px;padding:0 10px;border-radius:999px;background:var(--dgs);color:var(--dg);display:flex;align-items:center;font:600 12px/1 var(--ft)">Couldn’t sync</div>
|
||||
<div style="display:flex;align-items:center;gap:5px;font:400 13px/1 var(--ft);color:var(--fg3)"><span style="{{ bOk }}"></span>Synced</div>
|
||||
<div style="display:flex;align-items:center;gap:5px;font:400 13px/1 var(--ft);color:var(--fg3)"><span style="{{ bSync }}"></span>Syncing</div>
|
||||
<div style="display:flex;align-items:center;gap:5px;font:400 13px/1 var(--ft);color:var(--fg3)"><span style="{{ bErr }}"></span>Error</div>
|
||||
<div style="flex:1"></div>
|
||||
<div style="width:36px;height:36px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center;font:600 13px/1 var(--ft)">MR</div>
|
||||
<div style="{{ avA }}">AS</div>
|
||||
<div style="{{ avB }}">LP</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="display:flex;flex-direction:column;gap:12px">
|
||||
<div style="font:600 13px/1 var(--ft);color:var(--fg2)">Navigation · iOS tab bar / Android navigation bar / desktop sidebar</div>
|
||||
<div style="display:flex;background:var(--sf);border-radius:20px;padding:10px 0">
|
||||
<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
|
||||
<sc-if value="{{ n.on }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--act);font:600 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
|
||||
<sc-if value="{{ n.off }}"><div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;color:var(--fg3);font:500 10px/1 var(--ft)"><span style="{{ n.ico }}"></span>{{ n.label }}</div></sc-if>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="display:flex;background:var(--sf);border-radius:20px;padding:14px 0">
|
||||
<sc-for list="{{ nav }}" as="n" hint-placeholder-count="5">
|
||||
<div style="flex:1;display:flex;flex-direction:column;align-items:center;gap:4px">
|
||||
<sc-if value="{{ n.on }}"><div style="width:56px;height:32px;border-radius:999px;background:var(--acs);color:var(--act);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:600 12px/1 var(--ft)">{{ n.label }}</div></sc-if>
|
||||
<sc-if value="{{ n.off }}"><div style="width:56px;height:32px;color:var(--fg2);display:flex;align-items:center;justify-content:center"><span style="{{ n.ico }}"></span></div><div style="font:500 12px/1 var(--ft);color:var(--fg2)">{{ n.label }}</div></sc-if>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
<div style="display:flex;gap:4px;flex-wrap:wrap">
|
||||
<div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;background:var(--acs);color:var(--act);font:600 14px/1 var(--ft);width:220px;box-sizing:border-box"><span style="{{ i18.folder }}"></span>Files</div>
|
||||
<div style="height:38px;border-radius:12px;padding:0 12px;display:flex;align-items:center;gap:12px;font:500 14px/1 var(--ft);width:220px;box-sizing:border-box"><span style="{{ i18.trash }}"></span><div style="flex:1">Trash</div><div style="font:500 12px/1 var(--ft);color:var(--fg3)">12</div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</sc-if>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script>
|
||||
class Component extends DCLogic {
|
||||
componentDidMount() {
|
||||
if (!window.NK) this._t = setInterval(() => { if (window.NK) { clearInterval(this._t); this.forceUpdate(); } }, 40);
|
||||
}
|
||||
componentWillUnmount() { clearInterval(this._t); }
|
||||
renderVals() {
|
||||
const K = window.NK;
|
||||
if (!K) return { ready: false };
|
||||
const { I, ic, D, row, TH, tile, avatar } = K;
|
||||
const FD = "'Schibsted Grotesk',system-ui,sans-serif", FT = "'Instrument Sans',system-ui,sans-serif";
|
||||
const t = (spec, sample, s) => ({ spec, sample, s: { ...s, color: '#0E0D0B' } });
|
||||
const names = [['bg','--bg'],['surface','--sf'],['surface-2','--sf2'],['surface-3','--sf3'],['line','--ln'],['fg-1','--fg1'],['fg-2','--fg2'],['fg-3','--fg3'],['accent','--ac'],['accent-text','--act'],['accent-soft','--acs'],['danger','--dg'],['danger-soft','--dgs'],['success','--ok'],['success-soft','--oks'],['warning','--wn'],['warning-soft','--wns'],['info','--in'],['info-soft','--ins']];
|
||||
const ROW = { display: 'flex', alignItems: 'center', gap: 14, padding: '0 6px 0 14px', height: 64, background: 'var(--sf)', position: 'relative' };
|
||||
const demo = [D.files[2], D.files[3], D.offline[2], D.offline[4], { ...D.files[4] }].map(f => { const r = row(f); r.rs = { ...ROW, transform: r.swiped ? 'translateX(-96px)' : 'none' }; return r; });
|
||||
return {
|
||||
ready: true,
|
||||
i14: I[14], i16: I[16], i18: I[18], i20: I[20], i24: I[24],
|
||||
type: [
|
||||
t('Display 600 · 34/0.9 · −3%', 'Large title', { font: `600 34px/0.9 ${FD}`, letterSpacing: '-0.03em' }),
|
||||
t('Display 600 · 32/0.9 · −3%', '2.4 GB', { font: `600 32px/0.9 ${FD}`, letterSpacing: '-0.03em' }),
|
||||
t('Display 500 · 22/1 · −2%', 'Top bar title', { font: `500 22px/1 ${FD}`, letterSpacing: '-0.02em' }),
|
||||
t('Display 500 · 18/1 · −2%', 'Card title · September 2026', { font: `500 18px/1 ${FD}`, letterSpacing: '-0.02em' }),
|
||||
t('Text 500 · 16/1.2', 'Q3 Planning.pdf', { font: `500 16px/1.2 ${FT}` }),
|
||||
t('Text 400 · 15/1.3', 'Ana Souza shared Q3 Planning.pdf with you', { font: `400 15px/1.3 ${FT}` }),
|
||||
t('Text 600 · 13/1', 'Section label', { font: `600 13px/1 ${FT}` }),
|
||||
t('Text 400 · 13/1.2 · fg-3', '2.4 MB · Yesterday', { font: `400 13px/1.2 ${FT}`, opacity: 0.62 }),
|
||||
t('Mono 400 · 14', 'cloud.rocha.family/s/k7Pq2xW', { font: '400 14px/1 ui-monospace,Menlo,monospace' })
|
||||
],
|
||||
themes: ['light', 'dark'].map(id => ({ label: id === 'light' ? 'Light' : 'Dark', vars: TH[id],
|
||||
swatches: names.map(([name, v]) => ({ name, hex: TH[id][v], s: { height: 44, borderRadius: 10, background: `var(${v})`, boxShadow: 'inset 0 0 0 1px var(--ln)' } })) })),
|
||||
kinds: Object.keys(K.KIND).map(k => ({ name: k, tile: tile(k, 40, 12), ico: I[20][K.KIND[k][2]] })),
|
||||
rows: demo, starSm: ic('star', 16, 'var(--act)'), moreT: ic('moreH', 20, 'var(--fg3)'),
|
||||
bOk: ic('ok', 14, 'var(--ok)'), bSync: ic('sync', 14, 'var(--act)'), bErr: ic('alert', 14, 'var(--dg)'),
|
||||
avA: avatar('#DA9AC7', 36), avB: avatar('#8DCDE2', 36),
|
||||
nav: D.pinned.map(([label, ico], i) => ({ label, ico: I[24][ico], on: i === 0, off: i !== 0 }))
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,93 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script src="./support.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<x-dc>
|
||||
<helmet>
|
||||
<meta name="design_doc_mode" content="canvas">
|
||||
<script src="noo-kit.js"></script>
|
||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Schibsted+Grotesk:wght@500;600&display=swap">
|
||||
<style>
|
||||
body{margin:0;background:#EAE8E2}
|
||||
a{color:#8D0DE3;text-decoration:none}
|
||||
a:hover{color:#6E08B3}
|
||||
</style>
|
||||
</helmet>
|
||||
<div style="padding:96px;display:flex;flex-direction:column;gap:120px;font-family:'Instrument Sans',system-ui,sans-serif;color:#0E0D0B;width:max-content">
|
||||
<div style="display:flex;flex-direction:column;gap:20px;max-width:1100px">
|
||||
<div style="font:600 96px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">Noo</div>
|
||||
<div style="font:400 28px/1.3 'Instrument Sans',system-ui,sans-serif;color:#5A5852;text-wrap:pretty">A Nextcloud client for iOS, Android, macOS and Windows. One brand language, navigation adapted per platform. Light and dark shown for every screen.</div>
|
||||
<div style="display:flex;gap:12px;font:600 20px/1 'Instrument Sans',system-ui,sans-serif"><a href="Noo Design System.dc.html" style="height:52px;padding:0 24px;border-radius:999px;background:#8D0DE3;color:#FFFFFF;display:flex;align-items:center;white-space:nowrap">Open the design system</a><a href="DESIGN_SYSTEM.md" style="height:52px;padding:0 24px;border-radius:999px;background:#FFFFFF;display:flex;align-items:center;white-space:nowrap">DESIGN_SYSTEM.md</a></div>
|
||||
</div>
|
||||
|
||||
<sc-for list="{{ mobile }}" as="p" hint-placeholder-count="2">
|
||||
<section style="display:flex;flex-direction:column;gap:40px">
|
||||
<div style="display:flex;align-items:baseline;gap:24px;border-bottom:2px solid #0E0D0B;padding-bottom:20px"><div style="font:600 72px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">{{ p.name }}</div><div style="font:400 24px/1.2 'Instrument Sans',system-ui,sans-serif;color:#5A5852;white-space:nowrap">{{ p.note }}</div></div>
|
||||
<div style="display:flex;gap:120px">
|
||||
<sc-for list="{{ p.themes }}" as="t" hint-placeholder-count="2">
|
||||
<div style="display:flex;flex-direction:column;gap:32px">
|
||||
<div style="font:500 36px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.02em">{{ t.label }}</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(7,390px);gap:72px 48px">
|
||||
<sc-for list="{{ screensM }}" as="sc" hint-placeholder-count="14">
|
||||
<div style="display:flex;flex-direction:column;gap:14px">
|
||||
<div style="display:flex;gap:10px;align-items:baseline;font:500 18px/1 'Instrument Sans',system-ui,sans-serif"><span style="color:#7C7A72">{{ sc.n }}</span><span style="white-space:nowrap">{{ sc.label }}</span></div>
|
||||
<div style="width:390px;height:844px;border-radius:48px;box-shadow:0 0 0 1px rgba(14,13,11,0.08),0 24px 48px rgba(30,0,47,0.10)">
|
||||
<dc-import name="Mobile Screen" platform="{{ p.id }}" screen="{{ sc.id }}" theme="{{ t.id }}" hint-size="390px,844px"></dc-import>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
</sc-for>
|
||||
|
||||
<sc-for list="{{ desktop }}" as="p" hint-placeholder-count="2">
|
||||
<section style="display:flex;flex-direction:column;gap:40px">
|
||||
<div style="display:flex;align-items:baseline;gap:24px;border-bottom:2px solid #0E0D0B;padding-bottom:20px"><div style="font:600 72px/0.9 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.03em">{{ p.name }}</div><div style="font:400 24px/1.2 'Instrument Sans',system-ui,sans-serif;color:#5A5852;white-space:nowrap">{{ p.note }}</div></div>
|
||||
<div style="display:flex;gap:160px">
|
||||
<sc-for list="{{ p.themes }}" as="t" hint-placeholder-count="2">
|
||||
<div style="display:flex;flex-direction:column;gap:32px">
|
||||
<div style="font:500 36px/1 'Schibsted Grotesk',system-ui,sans-serif;letter-spacing:-0.02em">{{ t.label }}</div>
|
||||
<div style="display:grid;grid-template-columns:repeat(3,1280px);gap:72px 64px">
|
||||
<sc-for list="{{ screensD }}" as="sc" hint-placeholder-count="12">
|
||||
<div style="display:flex;flex-direction:column;gap:14px">
|
||||
<div style="display:flex;gap:10px;align-items:baseline;font:500 20px/1 'Instrument Sans',system-ui,sans-serif"><span style="color:#7C7A72">{{ sc.n }}</span><span style="white-space:nowrap">{{ sc.label }}</span></div>
|
||||
<div style="width:1280px;height:800px;border-radius:12px;box-shadow:0 24px 48px rgba(30,0,47,0.12)">
|
||||
<dc-import name="Desktop Screen" os="{{ p.id }}" screen="{{ sc.id }}" theme="{{ t.id }}" hint-size="1280px,800px"></dc-import>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</div>
|
||||
</sc-for>
|
||||
</div>
|
||||
</section>
|
||||
</sc-for>
|
||||
</div>
|
||||
</x-dc>
|
||||
<script type="text/x-dc" data-dc-script data-props="{"platforms":{"editor":"enum","options":["all","ios","android","mac","windows"],"default":"all","tsType":"string"},"themes":{"editor":"enum","options":["both","light","dark"],"default":"both","tsType":"string"}}">
|
||||
class Component extends DCLogic {
|
||||
renderVals() {
|
||||
const pf = this.props.platforms || 'all';
|
||||
const th = this.props.themes || 'both';
|
||||
const themes = [{ id: 'light', label: 'Light' }, { id: 'dark', label: 'Dark' }].filter(t => th === 'both' || th === t.id);
|
||||
const M = [['files','Files · list'],['filesGrid','Files · grid'],['photos','Photos'],['favorites','Favorites'],['offline','Offline'],['shares','Shares'],['recent','Recent'],['activity','Activity'],['trash','Trash'],['drawer','Menu (unpinned tabs)'],['share','Share sheet'],['settings','Settings · account & security'],['settings2','Settings · sync, cache, appearance'],['settings3','Settings · tabs & swipe']];
|
||||
const Dk = [['files','Files · list'],['filesGrid','Files · grid'],['photos','Photos'],['favorites','Favorites'],['offline','Offline'],['shares','Shares'],['recent','Recent'],['activity','Activity'],['trash','Trash'],['share','Share dialog'],['settings','Settings · account, security, sync'],['settings2','Settings · cache, appearance, tabs, swipe']];
|
||||
const num = a => a.map(([id, label], i) => ({ id, label, n: String(i + 1).padStart(2, '0') }));
|
||||
const keep = id => pf === 'all' || pf === id;
|
||||
return {
|
||||
screensM: num(M), screensD: num(Dk),
|
||||
mobile: [{ id: 'ios', name: 'iOS', note: 'Large titles, tab bar, “+” upload in the nav bar.', themes }, { id: 'android', name: 'Android', note: 'Top app bar, navigation bar with pill indicator, Upload FAB.', themes }].filter(p => keep(p.id)),
|
||||
desktop: [{ id: 'mac', name: 'macOS', note: 'Traffic lights in the sidebar, back/forward in the toolbar.', themes }, { id: 'windows', name: 'Windows', note: 'Title bar with caption buttons, same sidebar and toolbar.', themes }].filter(p => keep(p.id))
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
@@ -73,6 +73,15 @@ rather than needing a rewrite for multi-account support.
|
||||
there is no WebDAV client dependency. `_parseDavDate`/`_davPath` in this
|
||||
file exist because WebDAV responses use RFC 1123 dates and either bare
|
||||
paths or full URLs for `href`; reuse them rather than re-deriving.
|
||||
`creationdate` specifically needs `_parseDavCreationDate`, not
|
||||
`_parseDavDate` directly - Nextcloud has no real per-file creation-time
|
||||
tracking for most setups, so that property routinely comes back as a
|
||||
placeholder Unix-epoch date rather than being omitted, which
|
||||
`_parseDavDate` alone parses "successfully" into a real (if bogus)
|
||||
January 1970 `DateTime`. `_parseDavCreationDate` treats that placeholder
|
||||
as absent instead, so `NextcloudItem.dateCreated` falls back to
|
||||
`lastModified` (its constructor's default) the same as it would for a
|
||||
missing/unparseable value.
|
||||
- **Everything else** (shares, activity, trash, favorites, quota, user info,
|
||||
file versions) goes through Nextcloud's OCS APIs (`/ocs/v2.php/...`), JSON
|
||||
in, with the `OCS-APIRequest: true` header required on every OCS call.
|
||||
@@ -197,13 +206,26 @@ rather than needing a rewrite for multi-account support.
|
||||
Dio from a separate process lifecycle - `UploadService.startUpload` passes
|
||||
everything the Kotlin side needs (the pre-built `Authorization` header
|
||||
from `NextcloudService.authHeaders`, not the raw password) as Intent
|
||||
extras, a one-way handoff with no channel back to Dart afterward. Keep
|
||||
the two upload implementations in sync manually if upload semantics
|
||||
change. Progress/cancellation is entirely notification-driven (one
|
||||
ongoing, updatable notification for the whole batch; its Cancel action
|
||||
re-delivers an Intent to the same running service instance, which an
|
||||
`AtomicBoolean` the copy/upload loops poll) - there's no plumbing back to
|
||||
the Dart UI, by design, since the app may not even be running.
|
||||
extras, a one-way handoff for the start of the upload - the Kotlin side
|
||||
never asks Dart anything mid-upload, since the app may not even be
|
||||
running by then. Keep the two upload implementations in sync manually if
|
||||
upload semantics change. Progress/cancellation is entirely notification-
|
||||
driven (one ongoing, updatable notification for the whole batch; its
|
||||
Cancel action re-delivers an Intent to the same running service instance,
|
||||
which an `AtomicBoolean` the copy/upload loops poll) - the notification is
|
||||
the only UI a closed app gets.
|
||||
There is one thing that *does* come back, when the app is still running:
|
||||
once a batch finishes with at least one success, `ShareUploadService.kt`
|
||||
publishes into `UploadEventBus` (an in-process pub/sub, same shape as
|
||||
`SyncStatusBus` below), which `MainActivity.kt` forwards to Dart over the
|
||||
`dev.ayushya.noo/upload_service/status` `EventChannel` -
|
||||
`UploadService.completions`. `FilesController` subscribes in its own
|
||||
constructor and calls `refreshData()` when the event's folder matches
|
||||
`currentFolderPath`, so a file uploaded into the folder currently on
|
||||
screen shows up without a manual pull-to-refresh. Follows
|
||||
`SyncService.statusStream`'s "one shared `static final` stream" rule (see
|
||||
its own doc comment) - a second `receiveBroadcastStream()` subscriber
|
||||
would silently steal the single native-side listener from the first.
|
||||
|
||||
## Being picked by other apps (photo/file picker)
|
||||
|
||||
|
||||
@@ -75,8 +75,47 @@ class/method already makes obvious.
|
||||
never completes) and the app stays on `_SplashView`'s indeterminate
|
||||
spinner, which makes `pumpAndSettle()` hang until its own timeout instead
|
||||
of failing fast. See `test/widget_test.dart` for the reference setup.
|
||||
- Design-system components (`lib/widgets/noo/`) are tested in
|
||||
`test/widgets/noo/`, one file per component folder. Use the helpers in
|
||||
`noo_test_utils.dart`:
|
||||
- `setUpNooTests()` turns off font fetching.
|
||||
- `testNooWidgets(...)` runs a body once per theme, light and dark, built
|
||||
through the real `AppTheme`, and hands it the `NooColors`.
|
||||
- `pumpNoo(...)` mounts the widget.
|
||||
|
||||
Build themes inside the test body, not at file level, because `AppTheme`
|
||||
touches Google Fonts before the test binding exists. `pumpNoo` centers
|
||||
the child, which loosens its constraints. To catch a widget stretching to
|
||||
fill its parent, put it in a bounded box (for example, `SizedBox` +
|
||||
`Align`).
|
||||
- Run with `flutter test`.
|
||||
|
||||
## Play Store screenshots
|
||||
|
||||
`bash tool/screenshots.sh` (Git Bash is fine on Windows) regenerates the store
|
||||
listing screenshots **without any real data**: it runs the real, unmodified app
|
||||
against a throwaway Docker Nextcloud (`tool/demo_server/`) seeded with invented
|
||||
content, on a wiped 1080x1920 emulator with a demo-mode status bar, and drives
|
||||
it with `integration_test/store_screenshots_test.dart` (host-side driver:
|
||||
`test_driver/integration_test.dart`, which saves `adb screencap` images).
|
||||
Output lands in `store_listing/screenshots/` (gitignored) after
|
||||
`tool/finalize_screenshots.py` flattens alpha and checks Play's size/aspect
|
||||
limits (each side 320-3840 px, long side at most 2x the short side - a stock
|
||||
1080x2400 phone screen is 2.22:1 and would be rejected).
|
||||
|
||||
- The test logs in by writing the demo user's account/app password into
|
||||
storage via `AccountStore` before calling `main()`, so it skips the browser
|
||||
login flow; it also fixes the theme (light, non-dynamic colour), the visible
|
||||
tabs and the first-run notification prompt so shots are reproducible.
|
||||
- It finds things by tab icon (`AppTab.icon` inside `FloatingBottomNavBar`),
|
||||
tooltips, the `ValueKey('files')`/`ValueKey('offline')` on the two
|
||||
`FilesView`s, and the fake content's names (defined in
|
||||
`tool/demo_server/seed.py`) - keep those in sync if you rename either side.
|
||||
- `flutter test` only runs `test/`, so this never runs as part of the normal
|
||||
suite; `integration_test` is a dev-only dependency.
|
||||
- Always review the images before uploading - see
|
||||
`tool/demo_server/README.md` for the known places real data could appear.
|
||||
|
||||
## Local install/deploy
|
||||
|
||||
Never use `flutter install` to push a build to a test device — it always
|
||||
@@ -99,15 +138,18 @@ on the device. `android/app/build.gradle.kts` picks a release signing key
|
||||
in this order: a local `android/key.properties` (gitignored — points at a
|
||||
gitignored keystore file, e.g. `android/app/release-keystore.jks`), then
|
||||
CI env vars (`RELEASE_KEYSTORE_PATH`/`_PASSWORD`, `RELEASE_KEY_ALIAS`/
|
||||
`_PASSWORD`, set by `.gitea/workflows/build.yml` from repo secrets), then
|
||||
falls back to the debug key if neither is configured. As long as the same
|
||||
dedicated release keystore backs both `key.properties` locally and the
|
||||
Gitea secrets, local release builds and CI-built release APKs share one
|
||||
signature, so `adb install -r` works cleanly either way. A local checkout
|
||||
with no `key.properties` set up falls back to the (per-machine, ungitted)
|
||||
debug key, which won't match a CI-signed APK — installing one over the
|
||||
other still forces a full uninstall, since there's no way around Android's
|
||||
signature check from the tooling side.
|
||||
`_PASSWORD`, set from the same repo secrets by both `.gitea/workflows/
|
||||
build.yml`, triggered by `RC*` tags and producing a sideloadable APK, and
|
||||
`.gitea/workflows/release.yml`, triggered by `Release-*` tags and producing
|
||||
the `.aab` Play Console wants), then falls back to the debug key if neither
|
||||
is configured. As long as the same dedicated release keystore backs both
|
||||
`key.properties` locally and the Gitea secrets, local release builds and
|
||||
CI-built release APKs share one signature, so `adb install -r` works
|
||||
cleanly either way. A local checkout with no `key.properties` set up falls
|
||||
back to the (per-machine, ungitted) debug key, which won't match a
|
||||
CI-signed APK — installing one over the other still forces a full
|
||||
uninstall, since there's no way around Android's signature check from the
|
||||
tooling side.
|
||||
|
||||
## Dependencies
|
||||
|
||||
|
||||
+177
-51
@@ -1,5 +1,21 @@
|
||||
# Styling
|
||||
|
||||
**Migration in progress:** the target look is
|
||||
[`design-system/DESIGN_SYSTEM.md`](design-system/DESIGN_SYSTEM.md) — warm
|
||||
neutrals, one violet accent, pill controls, Schibsted Grotesk/Instrument
|
||||
Sans, no gradients/shadows — built from the `widgets/noo/` component kit
|
||||
(see "Noo design-system components" below). Rebuilt so far: the app shell
|
||||
(top/bottom bars, drawer, sidebar, toolbar), Files/Offline, Photos,
|
||||
Favorites, Recent, Activity, Trash, Shares, Settings, the lock screen,
|
||||
login, `ShareUploadView`, `MoveCopyDestinationPicker`,
|
||||
`MoveCopyConflictSheet`, the shared `Breadcrumbs` widget, and the file
|
||||
details/share bottom sheets/dialogs (`DetailsSheet`/`ShareSheet`). **Still on
|
||||
the pre-rework Material 3 theme** documented in "Theme" and "Reusable
|
||||
chrome" below: `FileViewerScreen` (the media viewer), `SearchView`, and
|
||||
`LoginWebviewView`. Update this file to describe each area as it gets
|
||||
reworked, rather than leaving stale Material 3 guidance next to a design
|
||||
system that's already superseded it.
|
||||
|
||||
## Theme
|
||||
|
||||
All theming goes through [`AppTheme`](../../lib/theme/app_theme.dart)
|
||||
@@ -34,62 +50,168 @@ widgets. Key points:
|
||||
and no `scrollbarTheme` override (tried once, explicitly reverted). Don't
|
||||
reintroduce one without being asked.
|
||||
|
||||
## Noo design-system components
|
||||
|
||||
The rebuilt UI is assembled from `lib/widgets/noo/`, which implements
|
||||
`DESIGN_SYSTEM.md` §2–3. Build new screens from these rather than from raw
|
||||
Material widgets or the pre-rework chrome below.
|
||||
|
||||
- **Tokens** live in [`design_tokens.dart`](../../lib/theme/design_tokens.dart):
|
||||
colors via `context.nooColors` (a `NooColors` `ThemeExtension`), plus
|
||||
`NooText`, `NooSpace`, `NooRadii`, `NooSizes`, `NooMotion` and
|
||||
`nooDialogShadow`. `NooText` styles set no color; callers add it with
|
||||
`copyWith(color: ...)`. Flutter's `TextStyle.height` is a multiple of font
|
||||
size, so the spec's CSS line-height maps to it directly (for example,
|
||||
0.9 → `height: 0.9`).
|
||||
- **Icons are Lucide** (`lucide_icons_flutter`, `LucideIcons.*`) inside
|
||||
`noo/`, never Material `Icons.*`.
|
||||
- **Components are data-agnostic.** They take strings, icons, colors and
|
||||
callbacks, not `NextcloudItem`/`AppTab`, so the screen layer maps models
|
||||
onto them.
|
||||
- **Platform differences** are chosen with a flag rather than by reading the
|
||||
platform inside the widget: `NooNavStyle` (`ios`/`android`, with
|
||||
`NooNavStyle.fromPlatform`) for nav chrome, and `iosStyle` on rows and
|
||||
cards for the ellipsis vs. vertical-ellipsis overflow icon.
|
||||
|
||||
Catalog:
|
||||
|
||||
| Folder | Components |
|
||||
|---|---|
|
||||
| `core/` | `NooButton`, `NooFab`, `NooChip`, `NooSegmentedControl`, `NooToggle`, `NooSearchField`, `NooAvatar`, `NooBadge`, `NooProgressBar` |
|
||||
| `lists/` | `NooGroupedList`, `NooSettingsRow`, `NooTabOrderRow`, `NooBanner`, `NooSummaryCard`, `NooSelectionBar` |
|
||||
| `files/` | `NooFileKind` (spec §1.2 tiles; `NooFileKind.from(name:, mimeType:, isDirectory:)`), `NooFileTile`, `NooStatusIcon`/`NooSyncStatus`, `NooFileRow` (mobile 64px), `NooFileTableHeader`/`NooFileTableRow` (desktop), `NooSwipeAction` |
|
||||
| `media/` | `NooGridCard`, `NooPhotoTile` (video badge, selection), `NooPhotoGroupHeader`/`NooPhotoGrid` (sliver, or `.box`), `NooActivityItem`, `NooStatCard` |
|
||||
| `nav/` | `NooBottomBar`, `NooTopBar` (a `PreferredSizeWidget`) with `NooTopBarButton`/`NooTopBarBack`, `NooDrawer` with its `Account`/`Storage`/`Item`/`Link` parts, `NooSidebar` with `NooSidebarItem`/`Divider`/`Account`/`Storage`, `NooToolbar` |
|
||||
| `overlays/` | `showNooSheet`, `showNooDialog`/`NooDialog`, `NooOverlayHeader`, `NooTextField`, and the share parts `NooShareSection`, `NooPersonAccessRow`, `NooPermissionPill` |
|
||||
|
||||
Gotchas:
|
||||
- `NooDrawer` can't set its own scrim. The host `Scaffold` needs
|
||||
`drawerScrimColor: context.nooColors.scrim`.
|
||||
- `NooGroupedList` draws dividers by showing `line` through 1px gaps, so each
|
||||
child must paint its own surface (`NooSettingsRow` and `NooTabOrderRow`
|
||||
do). Its `collapsible`/`initiallyExpanded` params (off by default) make
|
||||
`label` a tap target that shows/hides the card - `SettingsSection` is the
|
||||
only caller that opts in, for Settings' mobile sections.
|
||||
- `NooSwipeAction` only reveals its action. The user has to tap the block to
|
||||
trigger it; a full swipe never deletes.
|
||||
- Window chrome (macOS traffic lights, the Windows 40px title bar) isn't
|
||||
built yet. `NooSidebar.windowControls` is the slot for it.
|
||||
- Always read colors through `context.nooColors`, never
|
||||
`Theme.of(context).colorScheme` - the latter is Flutter's own Material 3
|
||||
scheme, reseeded by the user's accent color choice (`AppTheme.light`/
|
||||
`.dark`), so anything painted from it carries a faint hue of whatever
|
||||
accent is picked instead of the app's neutral palette. `sticky_header_delegate.dart`
|
||||
shipped with this bug once already (a pinned controls-row header tinted
|
||||
by the accent instead of matching its screen's plain `colors.bg`).
|
||||
- `NooSegmentedControl` defaults to `onSurface: false` (`colors.surface`
|
||||
fill) - right when it's sitting directly on `colors.bg` (List/Grid
|
||||
toggle, Shares' scope switcher), but pass `onSurface: true` for one
|
||||
placed inside a sheet or dialog (already `colors.surface`), or its pill
|
||||
track blends invisibly into the sheet instead of reading as a grouped
|
||||
control (Files'/Photos' sort and type-filter sheets do this).
|
||||
- Any `RefreshIndicator` needs `physics: const AlwaysScrollableScrollPhysics()`
|
||||
on its scrollable child, or pull-to-refresh silently can't be triggered
|
||||
once the list is short enough to fit the viewport (empty, or one item) -
|
||||
every tab's `CustomScrollView` sets this explicitly for exactly that
|
||||
reason.
|
||||
|
||||
## Reusable chrome
|
||||
|
||||
- `MediaGridTile` (`lib/widgets/media_grid_tile.dart`): the full-bleed image/video
|
||||
grid card with name/size scrim, shared by Files (server preview) and Offline
|
||||
(local `FileImage`, images only - no video frame-extraction plugin, so offline
|
||||
videos use the plain icon card). `ItemThumbnail` takes an optional `localFile`
|
||||
for the same offline-image case in list tiles.
|
||||
- `FilesControlsRow` (`lib/widgets/files_controls_row.dart`): the
|
||||
sort/hidden/scope/type-filter/view-mode row, shared by the Files and
|
||||
Offline tabs (`showStorageScope: false` for Offline).
|
||||
**Rebuilt on the Noo design system** (Files/Offline, Photos, Favorites,
|
||||
Recent, Activity, Trash, Shares, Settings, the app shell, lock screen,
|
||||
login, `ShareUploadView`, `MoveCopyDestinationPicker`, `DetailsSheet` and
|
||||
`ShareSheet`): these no longer use the pieces below. Their own building
|
||||
blocks are noted where they matter:
|
||||
|
||||
- `FilesControlsRow` (`lib/widgets/files_controls_row.dart`) — now built from
|
||||
`NooChip`/`NooSegmentedControl`; still the sort/hidden/scope/type-filter/
|
||||
view-mode row shared by Files and Offline (`showStorageScope: false` for
|
||||
Offline), and reused as-is by Favorites.
|
||||
- `lib/widgets/files/file_breadcrumb_row.dart` — the noo-styled breadcrumb
|
||||
trail Files uses in place of the shared
|
||||
[`Breadcrumbs`](../../lib/widgets/breadcrumbs.dart) widget. `Breadcrumbs`
|
||||
is now also noo-styled (same tokens, private-widget-turned-shared) — it's
|
||||
used only by `ShareUploadView`/`MoveCopyDestinationPicker`, which is why
|
||||
it was safe to restyle directly instead of forking another
|
||||
`FileBreadcrumbRow`-style copy; don't move Files back onto it.
|
||||
`lib/widgets/tabs/` (`tab_state_slivers.dart`, `tab_day_groups.dart`,
|
||||
`tab_location.dart`) — the loading/error/empty-state slivers and
|
||||
day/month grouping helpers shared by Recent/Activity/Trash/Shares.
|
||||
`lib/widgets/settings/` — Settings' 8 section widgets plus
|
||||
`settings_section.dart`'s `SettingsSection`/`showSettingsPicker` and
|
||||
`settings_dialogs.dart`'s `confirmRemoveAccount`.
|
||||
`lib/widgets/shell/shell_common.dart` — account/storage formatting,
|
||||
`openSettings`/`openSearch`, `showAccountSwitcher`, `ShellAvatarButton`,
|
||||
`ShellSearchLauncher`, shared by the mobile and desktop shell chrome.
|
||||
- [`getItemIcon`/`getIconColor`/`ItemThumbnail`](../../lib/widgets/item_icon.dart)
|
||||
— the icon/color/thumbnail treatment for a file or folder, shared by any
|
||||
screen that lists `NextcloudItem`s the way the Files tab does (currently
|
||||
`files_view.dart` and `share_upload_view.dart`'s destination picker).
|
||||
Extend this rather than re-deriving per-type icons/colors at a new call
|
||||
site.
|
||||
- [`DetailsHeader`](../../lib/widgets/details/details_sheet.dart) — the
|
||||
icon-box/name/meta row every per-item bottom sheet opens on
|
||||
(`DetailsSheet`, the media viewer's collapsed peek state, and
|
||||
`ShareSheet`). Takes a `padding` override for callers whose own scroll
|
||||
view already applies horizontal insets (`ShareSheet`'s `ListView`), so it
|
||||
doesn't get doubled up. Reuse this instead of a bare title `Text` for any
|
||||
new per-item sheet - a plain title reads as under-designed next to the
|
||||
other sheets (a real instance: `ShareSheet` used to be just that).
|
||||
— `getItemIcon`/`getIconColor` are superseded by `NooFileKind` in
|
||||
rebuilt screens; `ItemThumbnail` is still reused as-is, fed into
|
||||
`NooFileTile`/`NooFileRow`/`NooFileTableRow`/`NooGridCard`'s `thumbnail`
|
||||
slot. `ShareUploadView`/`MoveCopyDestinationPicker` don't use any of the
|
||||
three any more - both destination pickers now list folders only (see
|
||||
below), and a folder never gets a real thumbnail (only image/video do),
|
||||
so a plain `NooFileTile(kind: NooFileKind.folder)` covers every row.
|
||||
- `DetailsSheet`/`ShareSheet` (`lib/widgets/details/details_sheet.dart`,
|
||||
`lib/widgets/share_sheet.dart`) are rebuilt: `showNooSheet`/`showNooDialog`
|
||||
per `NooLayout.isDesktop`, with the header built from `detailsFileTile`
|
||||
(a `NooFileTile` keyed by `NooFileKind.from`) and `detailsMetaLine` -
|
||||
shared top-level helpers in `details_sheet.dart` so both sheets open on
|
||||
the same header, replacing the old `DetailsHeader` widget. Neither sheet
|
||||
uses `showGradualBottomSheet`'s drag-to-resize any more: `DetailsSheet`
|
||||
swaps Info/Versions/Activity with a `NooSegmentedControl` (there's no
|
||||
tab-strip component in the noo kit) instead of a `TabBar`/`TabBarView`,
|
||||
and both sheets' content sits in one `Column` so `showNooSheet`'s/
|
||||
`showNooDialog`'s own `SingleChildScrollView` handles overflow - a fixed
|
||||
page per tab no longer needs a resizable sheet to see the rest.
|
||||
`showGradualBottomSheet` (`lib/widgets/gradual_bottom_sheet.dart`) has no
|
||||
remaining callers as a result.
|
||||
`ShareSheet`'s "Share with people"/"Share link"/"Send file directly"
|
||||
sections follow `DESIGN_SYSTEM.md` §4 via `NooShareSection`/
|
||||
`NooPersonAccessRow`/`NooPermissionPill`; the permission pill and the
|
||||
link's permission/expiry chips are read-only display (no
|
||||
`ItemOperations` call updates a share's permission/expiry/password/
|
||||
hide-download yet) - promote those to real controls once that exists.
|
||||
Removing a person/group/email share is reachable by tapping their
|
||||
permission pill, which opens a small "Remove access" menu.
|
||||
[`MoveCopyConflictSheet`](../../lib/widgets/move_copy_conflict_sheet.dart)
|
||||
is rebuilt: `showNooDialog`/`showNooSheet` (per `NooLayout.isDesktop`), a
|
||||
`NooGroupedList` of file-tile rows with an inline
|
||||
`NooSegmentedControl<ConflictChoice>` once "Decide per item" is picked,
|
||||
and `NooButton`s for overwrite-all/keep-both/decide-per-item/confirm. Its
|
||||
`show(BuildContext, List<MoveCopyConflict>)` API is unchanged.
|
||||
- [`FrostedGlassContainer`](../../lib/widgets/frosted_glass_container.dart) —
|
||||
the blurred/translucent pill background shared by all floating chrome
|
||||
(bottom nav bar, media-viewer top/bottom bars and video transport
|
||||
controls). Reuse this for any new floating overlay instead of building a
|
||||
new blur/shadow combo.
|
||||
- [`FloatingBottomNavBar`](../../lib/widgets/floating_bottom_bar.dart) — the
|
||||
main tab bar; opacity/blur are user-adjustable settings
|
||||
(`SettingsController.bottomBarOpacity`/`bottomBarBlur`), not constants —
|
||||
pull new adjustable visual knobs from `SettingsController` the same way
|
||||
rather than hardcoding them.
|
||||
the blurred/translucent pill background for the media viewer's top/bottom
|
||||
bars and video transport controls (its other former user, the floating
|
||||
bottom nav bar, is gone - see below). Reuse this for any new floating
|
||||
overlay instead of building a new blur/shadow combo.
|
||||
- `SettingsController.bottomBarOpacity`/`bottomBarBlur` and
|
||||
`lib/widgets/floating_bottom_bar.dart`/`media_grid_tile.dart`/
|
||||
`swipeable_item.dart`/`sync_status_badge.dart`/`selectable_thumbnail.dart`
|
||||
are gone: the bottom bar is now the flat, non-blurred `NooBottomBar` (no
|
||||
opacity/blur knob - flat surfaces per the design system), grid tiles are
|
||||
`NooGridCard`, swipe actions are `NooSwipeAction`, and per-item sync
|
||||
status is `NooFileRow`/`NooFileTableRow`'s built-in `NooStatusIcon` list
|
||||
instead of a corner badge.
|
||||
- [`SyncedHeaderScaffold`](../../lib/widgets/synced_header_scaffold.dart) —
|
||||
the pull-to-sync `CustomScrollView` header shared by all 8 tabs (see
|
||||
`architecture.md`); also where the pull-to-refresh gesture thresholds and
|
||||
the classic Material refresh spinner live. Its persistent compact chip
|
||||
(icon + "Sync off"/"Syncing…"/"Synced"/"Sync issue") reflects device-sync
|
||||
status (`SyncStatusController.syncHeaderStatus`), not the WebDAV-refresh
|
||||
loading state the pull gesture itself triggers - that has its own,
|
||||
separate floating spinner bubble, so nothing was lost by handing the
|
||||
persistent text/icon over. The expanded panel's headline is a separate,
|
||||
more detailed string (`_syncSummary` in `synced_header_scaffold.dart`) -
|
||||
counts of what's actually configured to sync ("2 folders & 1 file
|
||||
synced") rather than just repeating the chip's generic label.
|
||||
Deliberately doesn't add up the individual files inside a synced folder
|
||||
("1 folder synced", not "1 folder & 4 items synced") - once a folder's
|
||||
synced, its file count is an implementation detail, not something the
|
||||
user picked.
|
||||
- [`SyncStatusBadge`](../../lib/widgets/sync_status_badge.dart) — the small
|
||||
corner badge over a thumbnail showing per-item device-sync status
|
||||
(`cloud_done`/`sync`, nothing for not-synced/conflict); used in Files'
|
||||
list and grid tiles today. Reuse this rather than a new ad hoc badge if
|
||||
another view starts showing sync status per item.
|
||||
the pull-to-sync `CustomScrollView` header with the persistent sync-status
|
||||
chip and pull-to-refresh gesture/spinner. Every screen (including
|
||||
`ShareUploadView`/`MoveCopyDestinationPicker`, its last two users) has
|
||||
dropped it for a plain `RefreshIndicator` + `CustomScrollView`
|
||||
(device-sync status now shows per-row via `NooStatusIcon`/the Offline
|
||||
`NooSummaryCard`, not a shared header chip), so the `SyncedHeaderScaffold`
|
||||
class itself is now dead code - kept only because the same file's
|
||||
top-level `formatBytes` helper is still widely used
|
||||
(`files_view.dart`/`favorites_view.dart`/`shell_common.dart`/
|
||||
`widgets/details/*`).
|
||||
- [`SegmentedIconGroup`/`ToggleIconButton`](../../lib/widgets/segmented_icon_toggle.dart)
|
||||
and [`SortMenuButton`](../../lib/widgets/sort_menu_button.dart) — the
|
||||
Material sort/filter-chip pieces `ShareUploadView`/
|
||||
`MoveCopyDestinationPicker` used to mirror Files' old controls row with.
|
||||
Both destination pickers dropped that whole row (they only ever browse
|
||||
folders, so sort/hidden/scope/type-filter/grid controls don't apply), so
|
||||
these two files are now dead code too - `Breadcrumbs` is the only shared
|
||||
widget promoted to noo styling instead of removed, since Files' own
|
||||
`FileBreadcrumbRow` proved the same trail is still wanted elsewhere.
|
||||
- [`SeekBarPainter`/`SeekBarPreview`](../../lib/widgets/seek_bar_painter.dart)
|
||||
— the four `MediaProgressBarStyle` presets (Default/Wavy/Slim/Squiggly)
|
||||
for the video player's seek bar, plus a perpetually-animated
|
||||
@@ -127,4 +249,8 @@ widgets. Key points:
|
||||
ColorFilter.mode(colorScheme.onSurface, BlendMode.srcIn), ...)` so it
|
||||
reads correctly in both light and dark mode. Never the full-color
|
||||
`app_icon.png`/adaptive-icon assets for in-app UI — those are for the
|
||||
launcher icon only (`flutter_launcher_icons` in `pubspec.yaml`).
|
||||
launcher icon only. The launcher icon is maintained by hand from an
|
||||
IconKitchen export (`mipmap-*` in `android/app/src/main/res`); there is no
|
||||
generator step. `assets/icon/app_icon_monochrome.png` is deliberately a
|
||||
tightly-cropped glyph (unlike the launcher's safe-zone-padded monochrome
|
||||
layer), so it renders at a sensible size at 72-80px.
|
||||
|
||||
@@ -0,0 +1,103 @@
|
||||
name: Build App Bundle
|
||||
|
||||
# Deliberately not "on every push" - only when a real release tag (Release-1.0.0,
|
||||
# Release-1.2.3, ...) is pushed. Tag the commit you want built:
|
||||
# git tag Release-1.0.0 && git push origin Release-1.0.0
|
||||
# Unlike the RC* flow (build.yml), this builds the .aab Play Console wants,
|
||||
# not a sideloadable .apk.
|
||||
on:
|
||||
push:
|
||||
tags:
|
||||
- "Release-*"
|
||||
|
||||
jobs:
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- name: Check out code
|
||||
uses: actions/checkout@v4
|
||||
|
||||
- name: Set up JDK 17
|
||||
uses: actions/setup-java@v4
|
||||
with:
|
||||
distribution: temurin
|
||||
java-version: "17"
|
||||
|
||||
- name: Set up Flutter
|
||||
uses: subosito/flutter-action@v2
|
||||
with:
|
||||
channel: stable
|
||||
|
||||
- name: Set up Android SDK
|
||||
uses: android-actions/setup-android@v3
|
||||
with:
|
||||
# Google removed the legacy standalone "tools" package from the
|
||||
# SDK repository (~Sep 2026); the action's own default packages
|
||||
# list ("tools platform-tools") now makes its internal sdkmanager
|
||||
# call fail for everyone. platform-tools is all this step needs
|
||||
# to install itself - flutter build fetches whatever
|
||||
# platform/build-tools versions it actually needs on its own.
|
||||
packages: "platform-tools"
|
||||
|
||||
- name: Install dependencies
|
||||
run: flutter pub get
|
||||
|
||||
- name: Analyze
|
||||
run: flutter analyze
|
||||
|
||||
- name: Decode release keystore
|
||||
# Same key as the RC* APK builds, so a Play Store upload's signature
|
||||
# matches anything sideloaded from a release build. See
|
||||
# android/app/build.gradle.kts.
|
||||
run: echo "$RELEASE_KEYSTORE_BASE64" | base64 -d > "${{ runner.temp }}/release-keystore.jks"
|
||||
env:
|
||||
RELEASE_KEYSTORE_BASE64: ${{ secrets.RELEASE_KEYSTORE_BASE64 }}
|
||||
|
||||
- name: Build release App Bundle
|
||||
run: flutter build appbundle --release
|
||||
env:
|
||||
RELEASE_KEYSTORE_PATH: ${{ runner.temp }}/release-keystore.jks
|
||||
RELEASE_KEYSTORE_PASSWORD: ${{ secrets.RELEASE_KEYSTORE_PASSWORD }}
|
||||
RELEASE_KEY_ALIAS: ${{ secrets.RELEASE_KEY_ALIAS }}
|
||||
RELEASE_KEY_PASSWORD: ${{ secrets.RELEASE_KEY_PASSWORD }}
|
||||
|
||||
- name: Rename bundle to Noo-<version>.aab
|
||||
run: |
|
||||
VERSION=$(grep '^version:' pubspec.yaml | sed 's/version: //' | cut -d'+' -f1)
|
||||
mkdir -p release
|
||||
cp build/app/outputs/bundle/release/app-release.aab "release/Noo-${VERSION}.aab"
|
||||
echo "AAB_PATH=release/Noo-${VERSION}.aab" >> "$GITHUB_ENV"
|
||||
|
||||
- name: Publish Gitea release with App Bundle attached
|
||||
# Gitea-native release action (not GitHub's) - authenticates and
|
||||
# talks to this same Gitea instance automatically via the
|
||||
# `github.token`/`github.server_url` context Gitea Actions
|
||||
# provides for compatibility. Release is named/tagged after
|
||||
# whatever tag triggered this run (e.g. "Release-1.0.0").
|
||||
uses: akkuman/gitea-release-action@v1
|
||||
with:
|
||||
files: ${{ env.AAB_PATH }}
|
||||
|
||||
- name: Decode Play Console service account key
|
||||
# Skipped (rather than failing the whole run) until the secret is
|
||||
# set up - see tool/upload_play_bundle.py's doc comment for what
|
||||
# that setup involves and its one hard prerequisite: Google won't
|
||||
# accept API calls for an app that's never had a single manual
|
||||
# upload through the Play Console web UI.
|
||||
if: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64 != '' }}
|
||||
run: echo "$SERVICE_ACCOUNT_JSON_BASE64" | base64 -d > "${{ runner.temp }}/play-service-account.json"
|
||||
env:
|
||||
SERVICE_ACCOUNT_JSON_BASE64: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64 }}
|
||||
|
||||
- name: Upload App Bundle to Play Console library
|
||||
# Deliberately doesn't touch any release track - see
|
||||
# tool/upload_play_bundle.py. Uploaded bundles show up under
|
||||
# Release > App bundle explorer in Play Console, ready to promote
|
||||
# to a track by hand whenever it's actually time to ship.
|
||||
if: ${{ secrets.GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_BASE64 != '' }}
|
||||
run: |
|
||||
pip install --quiet google-api-python-client google-auth
|
||||
python3 tool/upload_play_bundle.py "${{ env.AAB_PATH }}"
|
||||
env:
|
||||
GOOGLE_PLAY_PACKAGE_NAME: dev.ayushya.noo
|
||||
GOOGLE_PLAY_SERVICE_ACCOUNT_JSON_PATH: ${{ runner.temp }}/play-service-account.json
|
||||
@@ -44,3 +44,7 @@ app.*.map.json
|
||||
/android/app/debug
|
||||
/android/app/profile
|
||||
/android/app/release
|
||||
|
||||
# Play Store screenshot tooling (tool/screenshots.sh)
|
||||
/store_listing/screenshots/
|
||||
/tool/demo_server/.venv/
|
||||
|
||||
@@ -15,6 +15,11 @@ relevant file(s) before working in that area rather than loading all of them:
|
||||
conventions, fonts, reusable chrome widgets
|
||||
- [`standards.md`](.claude/context/standards.md) — code style, comment
|
||||
conventions, linting, testing
|
||||
- [`design-system/DESIGN_SYSTEM.md`](.claude/context/design-system/DESIGN_SYSTEM.md)
|
||||
— the target visual/component spec (tokens, components, platform
|
||||
mapping, screen recipes) for the in-progress UI rework; the sibling
|
||||
`.dc.html`/`noo-kit.js` files it references are the visual/token
|
||||
reference builds, not something to read directly
|
||||
|
||||
## Common commands
|
||||
|
||||
|
||||
@@ -56,6 +56,7 @@ class MainActivity : FlutterFragmentActivity() {
|
||||
private val newPickChannelName = "dev.ayushya.noo/pick_intent/new"
|
||||
private val syncServiceChannelName = "dev.ayushya.noo/sync_service"
|
||||
private val syncStatusChannelName = "dev.ayushya.noo/sync_service/status"
|
||||
private val uploadStatusChannelName = "dev.ayushya.noo/upload_service/status"
|
||||
private val notificationPermissionRequestCode = 4202
|
||||
// Lazy, not a field initializer - `packageName` reads through the
|
||||
// Activity's base Context, which isn't attached yet while this class's
|
||||
@@ -66,6 +67,7 @@ class MainActivity : FlutterFragmentActivity() {
|
||||
private var newShareSink: EventChannel.EventSink? = null
|
||||
private var newPickSink: EventChannel.EventSink? = null
|
||||
private var syncStatusListener: ((SyncStatusBus.Status) -> Unit)? = null
|
||||
private var uploadCompletedListener: ((UploadEventBus.Completed) -> Unit)? = null
|
||||
|
||||
override fun configureFlutterEngine(flutterEngine: FlutterEngine) {
|
||||
super.configureFlutterEngine(flutterEngine)
|
||||
@@ -157,6 +159,29 @@ class MainActivity : FlutterFragmentActivity() {
|
||||
syncStatusListener = null
|
||||
}
|
||||
})
|
||||
|
||||
EventChannel(flutterEngine.dartExecutor.binaryMessenger, uploadStatusChannelName)
|
||||
.setStreamHandler(object : EventChannel.StreamHandler {
|
||||
override fun onListen(arguments: Any?, events: EventChannel.EventSink) {
|
||||
val listener: (UploadEventBus.Completed) -> Unit = { completed ->
|
||||
mainHandler.post {
|
||||
events.success(
|
||||
mapOf(
|
||||
"remoteFolder" to completed.remoteFolder,
|
||||
"succeeded" to completed.succeeded,
|
||||
"failed" to completed.failed,
|
||||
),
|
||||
)
|
||||
}
|
||||
}
|
||||
uploadCompletedListener = listener
|
||||
UploadEventBus.subscribe(listener)
|
||||
}
|
||||
override fun onCancel(arguments: Any?) {
|
||||
uploadCompletedListener?.let { UploadEventBus.unsubscribe(it) }
|
||||
uploadCompletedListener = null
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
/// [accountIdOverride] is the account Dart is asking about - needed
|
||||
|
||||
@@ -185,6 +185,13 @@ class ShareUploadService : Service() {
|
||||
else -> "Uploaded $succeeded of ${batch.files.size} files - $failed failed"
|
||||
}
|
||||
manager().notify(NOTIFICATION_ID, buildFinalNotification(finalText))
|
||||
// batch.remoteFolder, not the locally-normalized cleanFolder - Dart's
|
||||
// FilesController.currentFolderPath never carries the trailing
|
||||
// slash cleanFolder adds, so publishing the original value lets the
|
||||
// Dart side compare them directly with no reformatting of its own.
|
||||
if (succeeded > 0) {
|
||||
UploadEventBus.publishCompleted(batch.remoteFolder, succeeded, failed)
|
||||
}
|
||||
|
||||
if (queue.pendingCount == 0) {
|
||||
stopForeground(STOP_FOREGROUND_DETACH)
|
||||
|
||||
@@ -0,0 +1,39 @@
|
||||
package dev.ayushya.noo
|
||||
|
||||
/**
|
||||
* In-memory, in-process pub/sub for "an upload batch just finished" -
|
||||
* [ShareUploadService] publishes into this, `MainActivity`'s
|
||||
* `dev.ayushya.noo/upload_service/status` EventChannel forwards it to Dart
|
||||
* so `FilesController` can refresh the destination folder if it's the one
|
||||
* currently on screen, without a manual pull-to-refresh. See
|
||||
* [SyncStatusBus]'s identical shape/rationale - the service and the
|
||||
* Activity always run in the same process, so plain in-memory pub/sub is
|
||||
* enough. Unlike that bus, this only ever carries discrete "just finished"
|
||||
* events, not ongoing state, so there's nothing to replay to a listener
|
||||
* that subscribes late.
|
||||
*/
|
||||
object UploadEventBus {
|
||||
data class Completed(
|
||||
val remoteFolder: String,
|
||||
val succeeded: Int,
|
||||
val failed: Int,
|
||||
)
|
||||
|
||||
private val listeners = mutableListOf<(Completed) -> Unit>()
|
||||
|
||||
@Synchronized
|
||||
fun subscribe(listener: (Completed) -> Unit) {
|
||||
listeners.add(listener)
|
||||
}
|
||||
|
||||
@Synchronized
|
||||
fun unsubscribe(listener: (Completed) -> Unit) {
|
||||
listeners.remove(listener)
|
||||
}
|
||||
|
||||
@Synchronized
|
||||
fun publishCompleted(remoteFolder: String, succeeded: Int, failed: Int) {
|
||||
val event = Completed(remoteFolder, succeeded, failed)
|
||||
listeners.toList().forEach { it(event) }
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 37 KiB |
@@ -0,0 +1,325 @@
|
||||
// Drives the real app through its tabs and states against the fake-data demo
|
||||
// server and captures the Play Store screenshots. Not part of the normal test
|
||||
// suite (`flutter test` only runs `test/`) - run it through
|
||||
// `tool/screenshots.sh`, which starts the demo server, an emulator and the
|
||||
// driver in `test_driver/integration_test.dart` that saves the images.
|
||||
//
|
||||
// The app starts already logged in: the demo user's credentials are written
|
||||
// straight into storage before `main()` runs, so Login Flow v2's browser
|
||||
// step is skipped.
|
||||
import 'dart:io';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_secure_storage/flutter_secure_storage.dart';
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
import 'package:integration_test/integration_test.dart';
|
||||
import 'package:noo/main.dart' as app;
|
||||
import 'package:noo/models/app_tab.dart';
|
||||
import 'package:noo/models/saved_account.dart';
|
||||
import 'package:noo/providers/files_controller.dart';
|
||||
import 'package:noo/providers/settings_controller.dart';
|
||||
import 'package:noo/providers/sync_status_controller.dart';
|
||||
import 'package:noo/services/account_store.dart';
|
||||
import 'package:noo/theme/design_tokens.dart';
|
||||
import 'package:noo/widgets/bottom_nav_bar.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
|
||||
const _serverUrl = String.fromEnvironment(
|
||||
'DEMO_SERVER_URL',
|
||||
defaultValue: 'http://localhost',
|
||||
);
|
||||
const _username = String.fromEnvironment('DEMO_USERNAME', defaultValue: 'Alex');
|
||||
const _appPassword = String.fromEnvironment('DEMO_APP_PASSWORD');
|
||||
|
||||
void main() {
|
||||
final binding = IntegrationTestWidgetsFlutterBinding.ensureInitialized();
|
||||
|
||||
testWidgets(
|
||||
'Play Store screenshots',
|
||||
(tester) async {
|
||||
expect(
|
||||
_appPassword,
|
||||
isNotEmpty,
|
||||
reason: 'Pass the demo user\'s app password via '
|
||||
'--dart-define=DEMO_APP_PASSWORD=... (tool/screenshots.sh does).',
|
||||
);
|
||||
await _seedLoggedInStorage();
|
||||
|
||||
app.main();
|
||||
await tester.pump();
|
||||
await _pumpUntil(tester, find.byType(app.MainShellView));
|
||||
|
||||
// Android only: required before `takeScreenshot()` can capture
|
||||
// anything at all.
|
||||
if (Platform.isAndroid) await binding.convertFlutterSurfaceToImage();
|
||||
|
||||
Future<void> shoot(String name) async {
|
||||
// Let scroll/transition animations and image fades finish first.
|
||||
await tester.pump(const Duration(seconds: 1));
|
||||
await binding.takeScreenshot(name);
|
||||
}
|
||||
|
||||
// ---- 01 Files (list) ------------------------------------------------
|
||||
final filesTab = find.byKey(const ValueKey('files'));
|
||||
await _pumpUntil(
|
||||
tester,
|
||||
find.descendant(of: filesTab, matching: find.text('Documents')),
|
||||
);
|
||||
await shoot('01_Files');
|
||||
|
||||
// ---- 02 Files (grid, inside a folder of photos) --------------------
|
||||
final files = _read<FilesController>(tester);
|
||||
await files.navigateToAbsoluteFolder('/Trips');
|
||||
await _pumpUntil(
|
||||
tester,
|
||||
find.descendant(of: filesTab, matching: find.text('Lake sunrise.jpg')),
|
||||
);
|
||||
// The controls row scrolls horizontally and doesn't fit every control
|
||||
// on a narrow screen, so "Grid view" can start off past the clipped
|
||||
// edge - not just off the *current* tab (which `.hitTestable()` alone
|
||||
// would handle), but off the *visible part of this tab's own row*.
|
||||
// `_tapInTab` scrolls it into view first.
|
||||
await _tapInTab(tester, filesTab, find.byTooltip('Grid view'));
|
||||
await tester.pump(const Duration(seconds: 4)); // thumbnails
|
||||
await shoot('02_Files_Grid');
|
||||
|
||||
// ---- 07 File viewer -------------------------------------------------
|
||||
await _tapInTab(tester, filesTab, find.text('Lake sunrise.jpg'));
|
||||
await tester.pump(const Duration(seconds: 4));
|
||||
await shoot('07_Viewer');
|
||||
tester.state<NavigatorState>(find.byType(Navigator).first).pop();
|
||||
await tester.pump(const Duration(seconds: 1));
|
||||
|
||||
// Back to the root folder, list view.
|
||||
await _tapInTab(tester, filesTab, find.byTooltip('List view'));
|
||||
await files.navigateToAbsoluteFolder('/');
|
||||
await tester.pump(const Duration(seconds: 2));
|
||||
|
||||
// ---- 03 Photos ------------------------------------------------------
|
||||
await _goToTab(tester, AppTab.photos);
|
||||
await tester.pump(const Duration(seconds: 5)); // grid + thumbnails
|
||||
await shoot('03_Photos');
|
||||
|
||||
// ---- 04 Favorites ---------------------------------------------------
|
||||
await _goToTab(tester, AppTab.favorites);
|
||||
await _pumpUntil(tester, find.text('Project brief.pdf'));
|
||||
await shoot('04_Favorites');
|
||||
|
||||
// ---- 05 Activity ----------------------------------------------------
|
||||
await _goToTab(tester, AppTab.activity);
|
||||
await tester.pump(const Duration(seconds: 3));
|
||||
await shoot('05_Activity');
|
||||
|
||||
// ---- 06 Shares ------------------------------------------------------
|
||||
await _goToTab(tester, AppTab.shares);
|
||||
await tester.pump(const Duration(seconds: 3));
|
||||
await shoot('06_Shares');
|
||||
|
||||
// ---- 08 Sync status panel ------------------------------------------
|
||||
// Sync two folders to the device; the header chip flips to "Synced"
|
||||
// once the native worker has finished, and tapping it opens the panel.
|
||||
await _goToTab(tester, AppTab.files);
|
||||
await _read<SyncStatusController>(
|
||||
tester,
|
||||
).addSyncedPaths({'/Documents': true, '/Trips': true});
|
||||
await _pumpUntil(tester, find.text('Synced'), timeout: 180);
|
||||
await _tapInTab(tester, filesTab, find.text('Synced'));
|
||||
await tester.pump(const Duration(seconds: 1));
|
||||
await shoot('08_Sync_Status');
|
||||
await _tapInTab(tester, filesTab, find.byTooltip('Collapse'));
|
||||
|
||||
// ---- 09 Offline -----------------------------------------------------
|
||||
_setVisibleTabs(tester, [
|
||||
AppTab.files,
|
||||
AppTab.photos,
|
||||
AppTab.favorites,
|
||||
AppTab.shares,
|
||||
AppTab.offline,
|
||||
]);
|
||||
await tester.pump(const Duration(milliseconds: 500));
|
||||
await _goToTab(tester, AppTab.offline);
|
||||
await _pumpUntil(
|
||||
tester,
|
||||
find.descendant(
|
||||
of: find.byKey(const ValueKey('offline')),
|
||||
matching: find.text('Documents'),
|
||||
),
|
||||
timeout: 120,
|
||||
);
|
||||
await shoot('09_Offline');
|
||||
|
||||
// ---- 10/11 Settings -------------------------------------------------
|
||||
await _tap(tester, find.byTooltip('Settings').hitTestable().first);
|
||||
await _pumpUntil(tester, find.text('Accounts'));
|
||||
await shoot('10_Settings');
|
||||
// Wait for it, rather than assuming it's already built - ensureVisible
|
||||
// itself has no retry/timeout, so on any transient delay (e.g. still
|
||||
// mid-route-transition) it fails immediately instead of giving the
|
||||
// frame a moment to catch up.
|
||||
await _pumpUntil(tester, find.text('Files Cache'));
|
||||
await tester.ensureVisible(find.text('Files Cache'));
|
||||
await tester.pump(const Duration(milliseconds: 300));
|
||||
await shoot('11_Settings_Sync');
|
||||
tester.state<NavigatorState>(find.byType(Navigator).first).pop();
|
||||
await tester.pump(const Duration(seconds: 1));
|
||||
|
||||
// ---- 12/13 Dark theme -------------------------------------------------
|
||||
final settings = _read<SettingsController>(tester);
|
||||
settings.setThemeMode(ThemeMode.dark);
|
||||
await _goToTab(tester, AppTab.files);
|
||||
await tester.pump(const Duration(seconds: 2));
|
||||
await shoot('12_Files_Dark');
|
||||
await _goToTab(tester, AppTab.photos);
|
||||
await tester.pump(const Duration(seconds: 3));
|
||||
await shoot('13_Photos_Dark');
|
||||
|
||||
// ---- 14/15 Dark theme, AMOLED (pure black) -----------------------------
|
||||
settings.setAmoledDark(true);
|
||||
await tester.pump(const Duration(seconds: 1));
|
||||
await _goToTab(tester, AppTab.files);
|
||||
await tester.pump(const Duration(seconds: 2));
|
||||
await shoot('14_Files_Dark_Amoled');
|
||||
await _goToTab(tester, AppTab.photos);
|
||||
await tester.pump(const Duration(seconds: 3));
|
||||
await shoot('15_Photos_Dark_Amoled');
|
||||
},
|
||||
timeout: const Timeout(Duration(minutes: 15)),
|
||||
);
|
||||
}
|
||||
|
||||
/// Starts from empty storage, then writes exactly one saved account (the
|
||||
/// demo user, with the app password from `--dart-define`) and the settings
|
||||
/// that make screenshots reproducible: light theme, a fixed brand colour
|
||||
/// (dynamic colour would pick up the emulator's wallpaper), five bottom-nav
|
||||
/// tabs, and no first-run notification prompt.
|
||||
Future<void> _seedLoggedInStorage() async {
|
||||
await const FlutterSecureStorage().deleteAll();
|
||||
final prefs = await SharedPreferences.getInstance();
|
||||
await prefs.clear();
|
||||
|
||||
final store = AccountStore();
|
||||
final account = SavedAccount(
|
||||
id: SavedAccount.makeId(_serverUrl, _username),
|
||||
serverUrl: _serverUrl,
|
||||
username: _username,
|
||||
);
|
||||
await store.saveAccounts(prefs, [account]);
|
||||
await store.saveActiveAccountId(prefs, account.id);
|
||||
await store.writePassword(account.id, _appPassword);
|
||||
|
||||
await prefs.setBool('notification_permission_asked', true);
|
||||
await prefs.setString('ui_theme_mode', ThemeMode.light.name);
|
||||
await prefs.setBool('ui_use_dynamic_color', false);
|
||||
await prefs.setStringList('ui_tab_order', [
|
||||
for (final t in AppTab.values) t.name,
|
||||
]);
|
||||
await prefs.setStringList('ui_hidden_tabs', [
|
||||
AppTab.trash.name,
|
||||
AppTab.recent.name,
|
||||
AppTab.offline.name,
|
||||
]);
|
||||
}
|
||||
|
||||
T _read<T>(WidgetTester tester) => Provider.of<T>(
|
||||
tester.element(find.byType(app.MainShellView)),
|
||||
listen: false,
|
||||
);
|
||||
|
||||
Future<void> _tap(WidgetTester tester, Finder finder) async {
|
||||
await tester.tap(finder);
|
||||
await tester.pump(const Duration(milliseconds: 600));
|
||||
}
|
||||
|
||||
/// Taps the one widget matching [matching] inside [tab] (e.g. `filesTab`) -
|
||||
/// for chrome that's duplicated across tabs (`IndexedStack` keeps every
|
||||
/// visible tab's widget tree mounted, not just the active one) and/or can be
|
||||
/// scrolled out of its own row's clipped viewport (the controls row,
|
||||
/// `FilesControlsRow`, doesn't fit every control on a narrow screen).
|
||||
/// Scoping to [tab] picks the right one of several identical matches;
|
||||
/// `ensureVisible` scrolls it into view before tapping, which plain
|
||||
/// `.hitTestable()` can't distinguish from "on the wrong tab" - both look
|
||||
/// like "zero hit-testable matches" and throw the same unhelpful
|
||||
/// `Bad state: No element`.
|
||||
Future<void> _tapInTab(WidgetTester tester, Finder tab, Finder matching) async {
|
||||
final target = find.descendant(of: tab, matching: matching).first;
|
||||
await tester.ensureVisible(target);
|
||||
await tester.pump(const Duration(milliseconds: 300));
|
||||
await tester.tap(target, warnIfMissed: false);
|
||||
await tester.pump(const Duration(milliseconds: 600));
|
||||
}
|
||||
|
||||
Future<void> _goToTab(WidgetTester tester, AppTab tab) async {
|
||||
// Only one bottom nav bar exists (outside the IndexedStack), so no
|
||||
// cross-tab duplicate to worry about - but it can itself overflow a
|
||||
// narrow screen, so still scroll the target into view rather than relying
|
||||
// on hitTestable() alone (see `_tapInTab`'s doc comment).
|
||||
final target = find
|
||||
.descendant(
|
||||
of: find.byType(BottomNavBar),
|
||||
matching: find.byIcon(tab.icon),
|
||||
)
|
||||
.first;
|
||||
await tester.ensureVisible(target);
|
||||
await tester.pump(const Duration(milliseconds: 300));
|
||||
await tester.tap(target, warnIfMissed: false);
|
||||
await tester.pump(const Duration(milliseconds: 600));
|
||||
|
||||
// Confirm the tap actually landed, rather than trusting it silently - a
|
||||
// scroll-imprecise tap (see above) that misses its target doesn't throw,
|
||||
// it just does nothing, which would otherwise leave every later
|
||||
// screenshot quietly showing whatever tab was already selected instead of
|
||||
// failing loudly. Every destination shows its label all the time now (see
|
||||
// `BottomNavBar`'s doc comment), so label presence can't signal selection
|
||||
// - the icon's color can: it's `accentText` only for the active tab.
|
||||
await _pumpUntilTrue(tester, () {
|
||||
if (target.evaluate().isEmpty) return false;
|
||||
final icon = tester.widget<Icon>(target);
|
||||
final colors = tester.element(target).nooColors;
|
||||
return icon.color == colors.accentText;
|
||||
}, timeout: 10);
|
||||
}
|
||||
|
||||
/// Shows exactly [tabs] in the bottom nav (hiding the rest first, so the
|
||||
/// five-tab cap is never hit).
|
||||
void _setVisibleTabs(WidgetTester tester, List<AppTab> tabs) {
|
||||
final settings = _read<SettingsController>(tester);
|
||||
for (final tab in AppTab.values) {
|
||||
if (!tabs.contains(tab)) settings.setTabHidden(tab, true);
|
||||
}
|
||||
for (final tab in tabs) {
|
||||
settings.setTabHidden(tab, false);
|
||||
}
|
||||
}
|
||||
|
||||
/// Waits (in real time - this is a live binding, and the app is talking to a
|
||||
/// real server) until [finder] matches something.
|
||||
Future<void> _pumpUntil(
|
||||
WidgetTester tester,
|
||||
Finder finder, {
|
||||
int timeout = 60,
|
||||
}) async {
|
||||
final deadline = DateTime.now().add(Duration(seconds: timeout));
|
||||
while (finder.evaluate().isEmpty) {
|
||||
if (DateTime.now().isAfter(deadline)) {
|
||||
throw TestFailure('Timed out after ${timeout}s waiting for $finder');
|
||||
}
|
||||
await tester.pump(const Duration(milliseconds: 250));
|
||||
}
|
||||
}
|
||||
|
||||
/// Like [_pumpUntil], but for a condition that isn't just "does a finder
|
||||
/// match something" (e.g. a widget property).
|
||||
Future<void> _pumpUntilTrue(
|
||||
WidgetTester tester,
|
||||
bool Function() predicate, {
|
||||
int timeout = 60,
|
||||
}) async {
|
||||
final deadline = DateTime.now().add(Duration(seconds: timeout));
|
||||
while (!predicate()) {
|
||||
if (DateTime.now().isAfter(deadline)) {
|
||||
throw TestFailure('Timed out after ${timeout}s waiting for condition');
|
||||
}
|
||||
await tester.pump(const Duration(milliseconds: 250));
|
||||
}
|
||||
}
|
||||
+227
-76
@@ -1,6 +1,7 @@
|
||||
import 'dart:async';
|
||||
import 'package:dynamic_color/dynamic_color.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:permission_handler/permission_handler.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
@@ -22,12 +23,24 @@ import 'providers/trash_controller.dart';
|
||||
import 'services/pick_intent_service.dart';
|
||||
import 'services/share_intent_service.dart';
|
||||
import 'theme/app_theme.dart';
|
||||
import 'theme/design_tokens.dart';
|
||||
import 'views/lock_screen_view.dart';
|
||||
import 'views/login_view.dart';
|
||||
import 'views/search_view.dart';
|
||||
import 'views/share_upload_view.dart';
|
||||
import 'widgets/app_drawer.dart';
|
||||
import 'widgets/app_tab_view_builder.dart';
|
||||
import 'widgets/floating_bottom_bar.dart';
|
||||
import 'widgets/app_top_bar.dart';
|
||||
import 'widgets/bottom_nav_bar.dart';
|
||||
import 'widgets/create_menu.dart';
|
||||
import 'widgets/noo/core/noo_avatar.dart';
|
||||
import 'widgets/noo/core/noo_button.dart';
|
||||
import 'widgets/noo/core/noo_fab.dart';
|
||||
import 'widgets/noo/nav/noo_nav_style.dart';
|
||||
import 'widgets/noo/nav/noo_sidebar.dart';
|
||||
import 'widgets/noo/nav/noo_toolbar.dart';
|
||||
import 'widgets/noo/noo_layout.dart';
|
||||
import 'widgets/noo/overlays/noo_dialog.dart';
|
||||
import 'widgets/shell/shell_common.dart';
|
||||
|
||||
void main() {
|
||||
WidgetsFlutterBinding.ensureInitialized();
|
||||
@@ -61,8 +74,7 @@ void main() {
|
||||
SyncStatusController(context.read(), context.read()),
|
||||
),
|
||||
ChangeNotifierProvider(
|
||||
create: (context) =>
|
||||
PhotosController(context.read(), context.read()),
|
||||
create: (context) => PhotosController(context.read(), context.read()),
|
||||
),
|
||||
ChangeNotifierProvider(
|
||||
create: (context) =>
|
||||
@@ -143,21 +155,19 @@ class _SplashView extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final colors = context.nooColors;
|
||||
return Scaffold(
|
||||
backgroundColor: colors.bg,
|
||||
body: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
// The monochrome adaptive-icon layer is a plain white silhouette
|
||||
// on transparent, meant to be tinted rather than shown as-is -
|
||||
// srcIn recolors it to the theme's foreground so it reads
|
||||
// correctly in both light and dark mode.
|
||||
// srcIn recolors it to fg-1 so it reads correctly in both light
|
||||
// and dark mode.
|
||||
ColorFiltered(
|
||||
colorFilter: ColorFilter.mode(
|
||||
colorScheme.onSurface,
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
colorFilter: ColorFilter.mode(colors.fg1, BlendMode.srcIn),
|
||||
child: Image.asset(
|
||||
'assets/icon/app_icon_monochrome.png',
|
||||
width: 72,
|
||||
@@ -170,7 +180,7 @@ class _SplashView extends StatelessWidget {
|
||||
height: 22,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2.5,
|
||||
color: colorScheme.primary,
|
||||
color: colors.accent,
|
||||
),
|
||||
),
|
||||
],
|
||||
@@ -246,26 +256,34 @@ class _MainShellViewState extends State<MainShellView> {
|
||||
if (status.isGranted || status.isPermanentlyDenied) return;
|
||||
if (!mounted) return;
|
||||
|
||||
final shouldRequest = await showDialog<bool>(
|
||||
context: context,
|
||||
final colors = context.nooColors;
|
||||
final shouldRequest = await showNooDialog<bool>(
|
||||
context,
|
||||
title: 'Allow notifications?',
|
||||
barrierDismissible: false,
|
||||
builder: (context) => AlertDialog(
|
||||
title: const Text('Allow notifications?'),
|
||||
content: const Text(
|
||||
children: [
|
||||
Text(
|
||||
'Noo shows upload and download progress as a notification, so '
|
||||
'you can track transfers that keep running in the background.',
|
||||
style: NooText.body.copyWith(color: colors.fg2),
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.of(context).pop(false),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
spacing: 10,
|
||||
children: [
|
||||
NooButton(
|
||||
variant: NooButtonVariant.secondary,
|
||||
onTap: () => Navigator.of(context).pop(false),
|
||||
child: const Text('Not now'),
|
||||
),
|
||||
FilledButton(
|
||||
onPressed: () => Navigator.of(context).pop(true),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
onTap: () => Navigator.of(context).pop(true),
|
||||
child: const Text('Allow'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
if (shouldRequest == true) {
|
||||
await Permission.notification.request();
|
||||
@@ -294,9 +312,15 @@ class _MainShellViewState extends State<MainShellView> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final settings = context.watch<SettingsController>();
|
||||
final pick = context.watch<PickController>();
|
||||
final connectivity = context.watch<ConnectivityController>();
|
||||
final session = context.watch<SessionController>();
|
||||
final quota = context.watch<FilesController>().quota;
|
||||
// Cheap and already loaded once the Trash tab has been visited this
|
||||
// session - not worth adding a fetch just to populate a nav badge.
|
||||
final trashCount = context.watch<TrashController>().items.length;
|
||||
|
||||
// A one-shot request (e.g. tapping a search result) to switch tabs -
|
||||
// consumed here so it only fires once, then cleared after this frame
|
||||
@@ -317,58 +341,177 @@ class _MainShellViewState extends State<MainShellView> {
|
||||
// user's own hidden/reordered tab settings rather than respecting
|
||||
// them, since picking is a separate mode from normal browsing. With
|
||||
// no network at all, every other tab would just show its own loading
|
||||
// spinner forever/an error state, so the bottom nav collapses to just
|
||||
// Offline - the one tab that works without a connection (see
|
||||
// spinner forever/an error state, so the nav collapses to just Offline
|
||||
// - the one tab that works without a connection (see
|
||||
// `FilesView(offline: true)`/`ConnectivityController`).
|
||||
final visible = pickRequest != null
|
||||
final overrideActive = pickRequest != null || connectivity.isOffline;
|
||||
final pinnedTabs = pickRequest != null
|
||||
? [AppTab.files, AppTab.photos]
|
||||
: connectivity.isOffline
|
||||
? [AppTab.offline]
|
||||
: settings.visibleTabs;
|
||||
final selectedTab = visible.contains(_currentTab)
|
||||
? _currentTab
|
||||
: (visible.isNotEmpty ? visible.first : AppTab.files);
|
||||
final selectedIndex = visible
|
||||
.indexOf(selectedTab)
|
||||
.clamp(0, visible.isEmpty ? 0 : visible.length - 1);
|
||||
|
||||
final navItems = visible
|
||||
.map((tab) => FloatingNavItem(label: tab.label, icon: tab.icon))
|
||||
// The drawer/sidebar's "More" section - hidden while an override above
|
||||
// is active, same as the drawer itself being unavailable during pick.
|
||||
final hiddenTabs = overrideActive
|
||||
? const <AppTab>[]
|
||||
: settings.tabOrder
|
||||
.where((t) => settings.hiddenTabs.contains(t))
|
||||
.toList();
|
||||
|
||||
return PopScope(
|
||||
// While picking, system back cancels the pick (and tells the caller
|
||||
// nothing was chosen) instead of exiting the app from under it -
|
||||
// there's no Navigator route to pop at this, the root screen.
|
||||
canPop: pickRequest == null,
|
||||
onPopInvokedWithResult: (didPop, result) {
|
||||
if (!didPop && pickRequest != null) pick.cancelPick();
|
||||
},
|
||||
child: Scaffold(
|
||||
body: Stack(
|
||||
// A tab opened from "More" isn't one of the pinned destinations, but
|
||||
// should stay shown and selected (with no destination highlighted in
|
||||
// the bottom bar/sidebar) until the user taps a pinned or another
|
||||
// "More" tab.
|
||||
final displayTabs = !overrideActive && !pinnedTabs.contains(_currentTab)
|
||||
? [...pinnedTabs, _currentTab]
|
||||
: pinnedTabs;
|
||||
final selectedTab = displayTabs.contains(_currentTab)
|
||||
? _currentTab
|
||||
: (displayTabs.isNotEmpty ? displayTabs.first : AppTab.files);
|
||||
final selectedIndex = displayTabs
|
||||
.indexOf(selectedTab)
|
||||
.clamp(0, displayTabs.isEmpty ? 0 : displayTabs.length - 1);
|
||||
final pinnedIndex = pinnedTabs.indexOf(selectedTab);
|
||||
|
||||
void selectTab(AppTab tab) {
|
||||
if (tab == _currentTab) return;
|
||||
setState(() => _currentTab = tab);
|
||||
}
|
||||
|
||||
String? trashBadge(AppTab tab) =>
|
||||
tab == AppTab.trash && trashCount > 0 ? '$trashCount' : null;
|
||||
|
||||
// Each tab renders its own sticky selection toolbar inline (right under
|
||||
// its sort/filter row) instead of the shell swapping in a shared one,
|
||||
// so the nav chrome stays put and usable regardless of selection state.
|
||||
final tabStack = Stack(
|
||||
children: [
|
||||
IndexedStack(
|
||||
index: selectedIndex,
|
||||
children: visible
|
||||
children: displayTabs
|
||||
.map((tab) => buildAppTabView(tab, _scrollControllers[tab]!))
|
||||
.toList(),
|
||||
),
|
||||
if (pick.isDownloadingForPick) const _PickingProgressOverlay(),
|
||||
// Each tab now renders its own sticky selection toolbar inline
|
||||
// (right under its sort/filter row) instead of this shell
|
||||
// swapping in a shared floating bar - the bottom nav stays put
|
||||
// and usable regardless of selection state.
|
||||
FloatingBottomNavBar(
|
||||
selectedIndex: selectedIndex,
|
||||
items: navItems,
|
||||
opacity: settings.bottomBarOpacity,
|
||||
blurSigma: settings.bottomBarBlur,
|
||||
],
|
||||
);
|
||||
|
||||
final canUpload =
|
||||
pickRequest == null &&
|
||||
(selectedTab == AppTab.files || selectedTab == AppTab.photos);
|
||||
|
||||
Widget scaffold;
|
||||
if (NooLayout.isDesktop(context)) {
|
||||
scaffold = Scaffold(
|
||||
backgroundColor: colors.bg,
|
||||
body: Row(
|
||||
children: [
|
||||
NooSidebar(
|
||||
account: NooSidebarAccount(
|
||||
avatar: NooAvatar(
|
||||
initials: accountInitial(session.username),
|
||||
current: true,
|
||||
size: 32,
|
||||
),
|
||||
name: session.username,
|
||||
subtitle: serverHost(session.serverUrl),
|
||||
onTap: () => showAccountSwitcher(context),
|
||||
),
|
||||
items: [
|
||||
for (final tab in pinnedTabs)
|
||||
NooSidebarItem(
|
||||
icon: tab.icon,
|
||||
label: tab.label,
|
||||
count: trashBadge(tab),
|
||||
selected: tab == selectedTab,
|
||||
onTap: () => selectTab(tab),
|
||||
),
|
||||
if (hiddenTabs.isNotEmpty) const NooSidebarDivider(),
|
||||
for (final tab in hiddenTabs)
|
||||
NooSidebarItem(
|
||||
icon: tab.icon,
|
||||
label: tab.label,
|
||||
count: trashBadge(tab),
|
||||
selected: tab == selectedTab,
|
||||
onTap: () => selectTab(tab),
|
||||
),
|
||||
],
|
||||
storage: NooSidebarStorage(
|
||||
value: quotaFraction(quota),
|
||||
detail: quotaDetail(quota),
|
||||
),
|
||||
settings: NooSidebarItem(
|
||||
icon: LucideIcons.settings,
|
||||
label: 'Settings',
|
||||
onTap: () => openSettings(context),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Column(
|
||||
children: [
|
||||
NooToolbar(
|
||||
title: selectedTab.label,
|
||||
search: const ShellSearchLauncher(onSurface: true),
|
||||
actions: [
|
||||
if (canUpload)
|
||||
NooButton(
|
||||
icon: LucideIcons.upload,
|
||||
onTap: () => showCreateMenu(context),
|
||||
child: const Text('Upload'),
|
||||
),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: ColoredBox(color: colors.surface, child: tabStack),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
} else {
|
||||
final navStyle = NooLayout.navStyle(context);
|
||||
scaffold = Scaffold(
|
||||
backgroundColor: colors.bg,
|
||||
drawerScrimColor: colors.scrim,
|
||||
appBar: pickRequest == null
|
||||
? AppTopBar(style: navStyle, tab: selectedTab)
|
||||
: null,
|
||||
drawer: pickRequest == null ? const AppDrawer() : null,
|
||||
// Android-only extended Upload FAB - iOS uses the top bar's `plus`
|
||||
// instead (see AppTopBar). Stays mounted across every tab (picking
|
||||
// aside) and collapses to an icon-only circle off Files/Photos,
|
||||
// rather than the Scaffold popping it fully in/out on every tab
|
||||
// switch - see NooFab's [collapsed].
|
||||
floatingActionButton:
|
||||
pickRequest == null && navStyle == NooNavStyle.android
|
||||
? NooFab(
|
||||
collapsed: !canUpload,
|
||||
onTap: () => showCreateMenu(context),
|
||||
)
|
||||
: null,
|
||||
body: tabStack,
|
||||
bottomNavigationBar: BottomNavBar(
|
||||
style: navStyle,
|
||||
tabs: pinnedTabs,
|
||||
selectedIndex: pinnedIndex,
|
||||
onDestinationSelected: (index) {
|
||||
final tappedTab = visible[index];
|
||||
final tappedTab = pinnedTabs[index];
|
||||
if (tappedTab == _currentTab) {
|
||||
if (settings.tapTabToScrollTop) {
|
||||
final controller = _scrollControllers[tappedTab];
|
||||
if (controller != null && controller.hasClients) {
|
||||
// `hasClients` only means a position is attached - not that
|
||||
// it's finished its first layout. Calling animateTo before
|
||||
// that throws deep inside Flutter's ballistic-scroll code
|
||||
// (min/maxScrollExtent are still null), and since this
|
||||
// fires synchronously from the nav bar's tap handler, the
|
||||
// exception corrupts that tab's scroll view instead of
|
||||
// just being logged - a real crash seen in the wild
|
||||
// (Files rendering empty after re-tapping its own tab).
|
||||
if (controller != null &&
|
||||
controller.hasClients &&
|
||||
controller.position.hasContentDimensions) {
|
||||
controller.animateTo(
|
||||
0,
|
||||
duration: const Duration(milliseconds: 300),
|
||||
@@ -378,19 +521,21 @@ class _MainShellViewState extends State<MainShellView> {
|
||||
}
|
||||
return;
|
||||
}
|
||||
setState(() {
|
||||
_currentTab = tappedTab;
|
||||
});
|
||||
},
|
||||
onSearchTap: () {
|
||||
Navigator.of(
|
||||
context,
|
||||
).push(MaterialPageRoute(builder: (_) => const SearchView()));
|
||||
selectTab(tappedTab);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return PopScope(
|
||||
// While picking, system back cancels the pick (and tells the caller
|
||||
// nothing was chosen) instead of exiting the app from under it -
|
||||
// there's no Navigator route to pop at this, the root screen.
|
||||
canPop: pickRequest == null,
|
||||
onPopInvokedWithResult: (didPop, result) {
|
||||
if (!didPop && pickRequest != null) pick.cancelPick();
|
||||
},
|
||||
child: scaffold,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -403,21 +548,27 @@ class _PickingProgressOverlay extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Positioned.fill(
|
||||
child: ColoredBox(
|
||||
color: Colors.black.withValues(alpha: 0.35),
|
||||
child: const Center(
|
||||
child: Card(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(24),
|
||||
color: colors.scrim,
|
||||
child: Center(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(24),
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
borderRadius: BorderRadius.circular(NooRadii.dialog),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
CircularProgressIndicator(),
|
||||
SizedBox(height: 16),
|
||||
Text('Preparing file...'),
|
||||
],
|
||||
CircularProgressIndicator(color: colors.accent),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Preparing file…',
|
||||
style: NooText.body.copyWith(color: colors.fg1),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
|
||||
+11
-9
@@ -1,5 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
|
||||
/// Every destination the bottom nav bar can show. Order here is only the
|
||||
/// fallback default — actual order/visibility/default-tab are user
|
||||
@@ -41,24 +41,26 @@ extension AppTabInfo on AppTab {
|
||||
}
|
||||
}
|
||||
|
||||
// Lucide icon mapping per DESIGN_SYSTEM.md 1.5 - the Lucide icon slug is
|
||||
// named in a comment where it doesn't match the Dart identifier.
|
||||
IconData get icon {
|
||||
switch (this) {
|
||||
case AppTab.files:
|
||||
return Icons.folder_rounded;
|
||||
return LucideIcons.folder;
|
||||
case AppTab.photos:
|
||||
return Icons.photo_library_rounded;
|
||||
return LucideIcons.images;
|
||||
case AppTab.favorites:
|
||||
return Icons.favorite_rounded;
|
||||
return LucideIcons.star;
|
||||
case AppTab.activity:
|
||||
return Icons.electric_bolt_rounded;
|
||||
return LucideIcons.activity;
|
||||
case AppTab.trash:
|
||||
return Icons.delete_outline_rounded;
|
||||
return LucideIcons.trash2; // trash-2
|
||||
case AppTab.shares:
|
||||
return Icons.groups_rounded;
|
||||
return LucideIcons.share2; // share-2
|
||||
case AppTab.recent:
|
||||
return Symbols.search_activity_rounded;
|
||||
return LucideIcons.clock;
|
||||
case AppTab.offline:
|
||||
return Icons.offline_pin_rounded;
|
||||
return LucideIcons.hardDriveDownload; // hard-drive-download
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,16 +1,91 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
|
||||
/// A bulk action's identity, stable across the dynamic icon/label a
|
||||
/// [SelectionAction] actually renders (e.g. `favorite` covers both
|
||||
/// "Favorite" and "Remove from favorites"). This is what the user's
|
||||
/// configured [order] - Settings' "Action bar" reorder list - and
|
||||
/// [NooSelectionBar]'s inline/overflow split key off, since the live
|
||||
/// [SelectionAction] list is rebuilt fresh on every selection change and
|
||||
/// can't be compared by icon/label alone.
|
||||
///
|
||||
/// Not every screen offers every kind (e.g. Favorites has no `rename` or
|
||||
/// `sync`) - [orderSelectionActions] just skips whatever kind a screen
|
||||
/// didn't build.
|
||||
enum SelectionActionKind {
|
||||
favorite,
|
||||
share,
|
||||
download,
|
||||
delete,
|
||||
copy,
|
||||
move,
|
||||
rename,
|
||||
sync,
|
||||
details;
|
||||
|
||||
/// Generic label for the Settings reorder row - the live bar uses each
|
||||
/// screen's own contextual label (e.g. "Remove from favorites") instead.
|
||||
String get label => switch (this) {
|
||||
SelectionActionKind.favorite => 'Favorite',
|
||||
SelectionActionKind.share => 'Share',
|
||||
SelectionActionKind.download => 'Download',
|
||||
SelectionActionKind.delete => 'Delete',
|
||||
SelectionActionKind.copy => 'Copy',
|
||||
SelectionActionKind.move => 'Move',
|
||||
SelectionActionKind.rename => 'Rename',
|
||||
SelectionActionKind.sync => 'Sync to device',
|
||||
SelectionActionKind.details => 'Details',
|
||||
};
|
||||
|
||||
IconData get icon => switch (this) {
|
||||
SelectionActionKind.favorite => LucideIcons.star,
|
||||
SelectionActionKind.share => LucideIcons.share2,
|
||||
SelectionActionKind.download => LucideIcons.download,
|
||||
SelectionActionKind.delete => LucideIcons.trash2,
|
||||
SelectionActionKind.copy => LucideIcons.copy,
|
||||
SelectionActionKind.move => LucideIcons.folderInput,
|
||||
SelectionActionKind.rename => LucideIcons.filePen,
|
||||
SelectionActionKind.sync => LucideIcons.hardDriveDownload,
|
||||
SelectionActionKind.details => LucideIcons.info,
|
||||
};
|
||||
}
|
||||
|
||||
/// One bulk action available for the current multi-selection (e.g. favorite,
|
||||
/// download, delete), shown as an icon button in the sticky selection
|
||||
/// toolbar each tab (Files, Photos, ...) renders inline in its own content.
|
||||
class SelectionAction {
|
||||
final SelectionActionKind kind;
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const SelectionAction({
|
||||
required this.kind,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
required this.onTap,
|
||||
});
|
||||
}
|
||||
|
||||
/// Reorders [actions] to match the user's configured [order] (Settings'
|
||||
/// "Action bar" section, [SelectionActionKind] values) - this is what makes
|
||||
/// that setting take effect, since it's [order] that decides which actions
|
||||
/// land in `NooSelectionBar`'s inline slots vs. behind "More". A kind in
|
||||
/// [order] the caller didn't build (e.g. `rename` on a multi-item
|
||||
/// selection) is just skipped; a kind [actions] has that [order] doesn't
|
||||
/// mention (e.g. a kind added in a later app update, before the saved
|
||||
/// order is migrated - see [SettingsController.selectionActionOrder]) is
|
||||
/// appended at the end in its original position.
|
||||
List<SelectionAction> orderSelectionActions(
|
||||
List<SelectionAction> actions,
|
||||
List<SelectionActionKind> order,
|
||||
) {
|
||||
final byKind = {for (final a in actions) a.kind: a};
|
||||
final ordered = <SelectionAction>[];
|
||||
for (final kind in order) {
|
||||
final action = byKind.remove(kind);
|
||||
if (action != null) ordered.add(action);
|
||||
}
|
||||
ordered.addAll(byKind.values);
|
||||
return ordered;
|
||||
}
|
||||
|
||||
@@ -3,6 +3,7 @@ import 'dart:convert';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../services/upload_service.dart';
|
||||
import 'folder_browser.dart';
|
||||
import 'session_controller.dart';
|
||||
|
||||
@@ -107,6 +108,22 @@ class FilesController extends ChangeNotifier
|
||||
session.addAccountClearedListener(_onAccountCleared);
|
||||
session.addAccountActivatedListener(_onAccountActivated);
|
||||
session.addAccountReadyListener(_restoreDisplayPrefs);
|
||||
// Refreshes automatically once an upload finishes, so a file shared/
|
||||
// uploaded into the folder currently on screen shows up without a
|
||||
// manual pull-to-refresh - uploads run in an Android foreground
|
||||
// service (see UploadService's doc comment) with no other way back to
|
||||
// this controller.
|
||||
_uploadSub = UploadService.completions.listen(_onUploadCompleted);
|
||||
}
|
||||
|
||||
StreamSubscription<UploadCompletion>? _uploadSub;
|
||||
|
||||
void _onUploadCompleted(UploadCompletion completion) {
|
||||
// refreshData() always hits the network regardless of cache freshness
|
||||
// (see its own doc comment), so there's nothing to invalidate first -
|
||||
// it overwrites this folder's cache entry once the fetch lands.
|
||||
if (completion.remoteFolder != _currentFolderPath) return;
|
||||
refreshData();
|
||||
}
|
||||
|
||||
// Getters
|
||||
@@ -266,7 +283,8 @@ class FilesController extends ChangeNotifier
|
||||
/// sort, cache policy) - hooked to `addAccountReadyListener` as well as
|
||||
/// activation so the Offline tab, which reads these same prefs, respects
|
||||
/// them even on a provisional/offline login where activation never fires.
|
||||
Future<void> _restoreDisplayPrefs() => _prefsRestore ??= _doRestoreDisplayPrefs();
|
||||
Future<void> _restoreDisplayPrefs() =>
|
||||
_prefsRestore ??= _doRestoreDisplayPrefs();
|
||||
|
||||
/// Completes once this account's cache policy/display prefs have been
|
||||
/// loaded from storage - lets `SyncStatusController` schedule background
|
||||
@@ -334,7 +352,9 @@ class FilesController extends ChangeNotifier
|
||||
defaultCacheIntervalMinutes;
|
||||
notifyListeners();
|
||||
} catch (e) {
|
||||
debugPrint('[FilesController] Account-activation prefs restore failed: $e');
|
||||
debugPrint(
|
||||
'[FilesController] Account-activation prefs restore failed: $e',
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -401,7 +421,9 @@ class FilesController extends ChangeNotifier
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
debugPrint('[FilesController] Refreshing data for path: $_currentFolderPath');
|
||||
debugPrint(
|
||||
'[FilesController] Refreshing data for path: $_currentFolderPath',
|
||||
);
|
||||
|
||||
try {
|
||||
final items = await service.fetchDirectory(_currentFolderPath);
|
||||
@@ -549,6 +571,20 @@ class FilesController extends ChangeNotifier
|
||||
return session.service?.fetchDirectory(path) ?? Future.value([]);
|
||||
}
|
||||
|
||||
/// Finds the single item at [path] by listing its parent folder and
|
||||
/// matching on the exact path - there's no WebDAV call here for stat'ing
|
||||
/// one path directly outside a directory PROPFIND. Used by the Shares tab
|
||||
/// to open the full Share sheet for a [NextcloudShare], which only carries
|
||||
/// enough metadata for its own row, not the size/dates `ShareSheet`'s
|
||||
/// header needs.
|
||||
Future<NextcloudItem?> fetchItemAtPath(String path) async {
|
||||
final normalized = path.startsWith('/') ? path : '/$path';
|
||||
final lastSlash = normalized.lastIndexOf('/');
|
||||
final parent = lastSlash <= 0 ? '/' : normalized.substring(0, lastSlash);
|
||||
final items = await fetchFolderListing(parent);
|
||||
return items.where((i) => i.path == normalized).firstOrNull;
|
||||
}
|
||||
|
||||
void invalidateCache() => _directoryCache.clear();
|
||||
|
||||
/// Persists a per-account browsing pref under its `acct_<id>_`-namespaced
|
||||
@@ -692,6 +728,7 @@ class FilesController extends ChangeNotifier
|
||||
void dispose() {
|
||||
WidgetsBinding.instance.removeObserver(this);
|
||||
_cacheRefreshTimer?.cancel();
|
||||
_uploadSub?.cancel();
|
||||
super.dispose();
|
||||
}
|
||||
}
|
||||
|
||||
@@ -27,8 +27,7 @@ enum LoginFlowStatus { idle, initiating, awaitingBrowser, error }
|
||||
/// full rationale.
|
||||
class SessionController extends ChangeNotifier with WidgetsBindingObserver {
|
||||
final ConnectivityController connectivity;
|
||||
final Future<SharedPreferences> prefsFuture =
|
||||
SharedPreferences.getInstance();
|
||||
final Future<SharedPreferences> prefsFuture = SharedPreferences.getInstance();
|
||||
final AccountStore accountStore = AccountStore();
|
||||
|
||||
// True from the moment a saved session is restored (or a network
|
||||
@@ -96,10 +95,32 @@ class SessionController extends ChangeNotifier with WidgetsBindingObserver {
|
||||
final List<VoidCallback> _accountReadyListeners = [];
|
||||
void addAccountClearedListener(VoidCallback cb) =>
|
||||
_accountClearedListeners.add(cb);
|
||||
void addAccountActivatedListener(VoidCallback cb) =>
|
||||
|
||||
// Both `activated` and `ready` are one-shot, fire-and-forget calls, not a
|
||||
// replayable stream - so a controller isn't guaranteed to be *listening*
|
||||
// yet when the real event fires. Most controllers are registered with
|
||||
// `lazy: false` in main.dart specifically so they exist before that can
|
||||
// happen, but one that isn't (built lazily, on first read, like
|
||||
// FilesController) can lose the race if nothing reads it until after
|
||||
// login already finished verifying - e.g. `ConnectivityController`
|
||||
// misreporting offline right at cold start collapses the bottom nav to
|
||||
// just the Offline tab (see `main.dart`), so Files' tab, and the
|
||||
// `FilesController` it lazily creates, never gets built during that
|
||||
// window. Calling back immediately here if the account is *already* in
|
||||
// the state being subscribed to closes that race for every current and
|
||||
// future subscriber, without each one needing its own view-level
|
||||
// fallback reload - see `.claude/context/architecture.md`'s "State
|
||||
// management" section for the guardrail this exists to enforce.
|
||||
void addAccountActivatedListener(VoidCallback cb) {
|
||||
_accountActivatedListeners.add(cb);
|
||||
void addAccountReadyListener(VoidCallback cb) =>
|
||||
if (_isLoggedIn && !_isProvisionalLogin) cb();
|
||||
}
|
||||
|
||||
void addAccountReadyListener(VoidCallback cb) {
|
||||
_accountReadyListeners.add(cb);
|
||||
if (_isLoggedIn) cb();
|
||||
}
|
||||
|
||||
void _notifyAccountCleared() {
|
||||
for (final cb in _accountClearedListeners) {
|
||||
cb();
|
||||
@@ -141,9 +162,7 @@ class SessionController extends ChangeNotifier with WidgetsBindingObserver {
|
||||
// one-time unlock at cold start would give the feature no real
|
||||
// security value, since the realistic threat is someone else picking
|
||||
// up an already-running, unlocked phone.
|
||||
if (state == AppLifecycleState.paused &&
|
||||
_loginLockEnabled &&
|
||||
_isUnlocked) {
|
||||
if (state == AppLifecycleState.paused && _loginLockEnabled && _isUnlocked) {
|
||||
_isUnlocked = false;
|
||||
notifyListeners();
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:shared_preferences/shared_preferences.dart';
|
||||
import '../models/app_tab.dart';
|
||||
import '../models/selection_action.dart';
|
||||
import '../theme/app_theme.dart';
|
||||
|
||||
/// What swiping a Files list-view item left/right does, user-configurable
|
||||
@@ -23,9 +24,8 @@ class SettingsController extends ChangeNotifier {
|
||||
static const _prefThemeMode = 'ui_theme_mode';
|
||||
static const _prefUseDynamicColor = 'ui_use_dynamic_color';
|
||||
static const _prefSeedColor = 'ui_seed_color';
|
||||
static const _prefBottomBarOpacity = 'ui_bottom_bar_opacity';
|
||||
static const _prefBottomBarBlur = 'ui_bottom_bar_blur';
|
||||
static const _prefTabOrder = 'ui_tab_order';
|
||||
static const _prefSelectionActionOrder = 'ui_selection_action_order';
|
||||
static const _prefHiddenTabs = 'ui_hidden_tabs';
|
||||
static const _prefDefaultTab = 'ui_default_tab';
|
||||
static const _prefSwipeLeftAction = 'ui_swipe_left_action';
|
||||
@@ -37,20 +37,21 @@ class SettingsController extends ChangeNotifier {
|
||||
final Future<SharedPreferences> _prefsFuture =
|
||||
SharedPreferences.getInstance();
|
||||
|
||||
Color _seedColor = AppTheme.defaultNextcloudBlue;
|
||||
Color _seedColor = AppTheme.defaultAccent;
|
||||
ThemeMode _themeMode = ThemeMode.system;
|
||||
bool _useDynamicColor = true;
|
||||
bool _amoledDark = false;
|
||||
MediaProgressBarStyle _mediaProgressBarStyle = MediaProgressBarStyle.wavy;
|
||||
|
||||
double _bottomBarOpacity = 0.55;
|
||||
double _bottomBarBlur = 28;
|
||||
bool _tapTabToScrollTop = true;
|
||||
|
||||
List<AppTab> _tabOrder = AppTab.values.toList();
|
||||
Set<AppTab> _hiddenTabs = {};
|
||||
AppTab _defaultTab = AppTab.files;
|
||||
|
||||
List<SelectionActionKind> _selectionActionOrder = SelectionActionKind.values
|
||||
.toList();
|
||||
|
||||
SwipeAction _swipeLeftAction = SwipeAction.delete;
|
||||
SwipeAction _swipeRightAction = SwipeAction.favorite;
|
||||
|
||||
@@ -82,8 +83,6 @@ class SettingsController extends ChangeNotifier {
|
||||
bool get useDynamicColor => _useDynamicColor;
|
||||
bool get amoledDark => _amoledDark;
|
||||
MediaProgressBarStyle get mediaProgressBarStyle => _mediaProgressBarStyle;
|
||||
double get bottomBarOpacity => _bottomBarOpacity;
|
||||
double get bottomBarBlur => _bottomBarBlur;
|
||||
bool get tapTabToScrollTop => _tapTabToScrollTop;
|
||||
|
||||
/// Every tab in the user's configured order, including hidden ones — used
|
||||
@@ -92,6 +91,12 @@ class SettingsController extends ChangeNotifier {
|
||||
Set<AppTab> get hiddenTabs => _hiddenTabs;
|
||||
AppTab get defaultTab => _defaultTab;
|
||||
|
||||
/// The priority order bulk actions (favorite, share, download, ...) show
|
||||
/// in on the multi-select action bar - see [orderSelectionActions]. Every
|
||||
/// [SelectionActionKind] is always present here (nothing is hidden, only
|
||||
/// reordered), so [NooSelectionBar]'s fixed inline slots are always full.
|
||||
List<SelectionActionKind> get selectionActionOrder => _selectionActionOrder;
|
||||
|
||||
/// The tabs the bottom nav bar should actually show, in order.
|
||||
List<AppTab> get visibleTabs =>
|
||||
_tabOrder.where((t) => !_hiddenTabs.contains(t)).toList();
|
||||
@@ -122,9 +127,6 @@ class SettingsController extends ChangeNotifier {
|
||||
}
|
||||
final seedColorValue = prefs.getInt(_prefSeedColor);
|
||||
if (seedColorValue != null) _seedColor = Color(seedColorValue);
|
||||
_bottomBarOpacity =
|
||||
prefs.getDouble(_prefBottomBarOpacity) ?? _bottomBarOpacity;
|
||||
_bottomBarBlur = prefs.getDouble(_prefBottomBarBlur) ?? _bottomBarBlur;
|
||||
_tapTabToScrollTop =
|
||||
prefs.getBool(_prefTapTabToScrollTop) ?? _tapTabToScrollTop;
|
||||
|
||||
@@ -143,6 +145,25 @@ class SettingsController extends ChangeNotifier {
|
||||
_tabOrder = order;
|
||||
}
|
||||
|
||||
final savedActionOrderNames = prefs.getStringList(
|
||||
_prefSelectionActionOrder,
|
||||
);
|
||||
if (savedActionOrderNames != null) {
|
||||
final order = <SelectionActionKind>[];
|
||||
for (final name in savedActionOrderNames) {
|
||||
final match = SelectionActionKind.values
|
||||
.where((k) => k.name == name)
|
||||
.firstOrNull;
|
||||
if (match != null) order.add(match);
|
||||
}
|
||||
// Forward-compat: a kind added in a later app update won't be in an
|
||||
// older saved order yet, so append anything missing.
|
||||
for (final kind in SelectionActionKind.values) {
|
||||
if (!order.contains(kind)) order.add(kind);
|
||||
}
|
||||
_selectionActionOrder = order;
|
||||
}
|
||||
|
||||
final savedHiddenNames = prefs.getStringList(_prefHiddenTabs);
|
||||
if (savedHiddenNames != null) {
|
||||
_hiddenTabs = savedHiddenNames
|
||||
@@ -223,18 +244,6 @@ class SettingsController extends ChangeNotifier {
|
||||
);
|
||||
}
|
||||
|
||||
void setBottomBarOpacity(double value) {
|
||||
_bottomBarOpacity = value;
|
||||
notifyListeners();
|
||||
_prefsFuture.then((p) => p.setDouble(_prefBottomBarOpacity, value));
|
||||
}
|
||||
|
||||
void setBottomBarBlur(double value) {
|
||||
_bottomBarBlur = value;
|
||||
notifyListeners();
|
||||
_prefsFuture.then((p) => p.setDouble(_prefBottomBarBlur, value));
|
||||
}
|
||||
|
||||
void setTapTabToScrollTop(bool value) {
|
||||
_tapTabToScrollTop = value;
|
||||
notifyListeners();
|
||||
@@ -255,6 +264,17 @@ class SettingsController extends ChangeNotifier {
|
||||
);
|
||||
}
|
||||
|
||||
void setSelectionActionOrder(List<SelectionActionKind> order) {
|
||||
_selectionActionOrder = order;
|
||||
notifyListeners();
|
||||
_prefsFuture.then(
|
||||
(p) => p.setStringList(
|
||||
_prefSelectionActionOrder,
|
||||
order.map((k) => k.name).toList(),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Shows or hides a tab in the bottom nav bar. Refuses to hide the last
|
||||
/// remaining visible tab. If the tab being hidden is the current default,
|
||||
/// the default falls back to the next visible tab.
|
||||
|
||||
@@ -8,7 +8,16 @@ import 'session_controller.dart';
|
||||
class SharesController extends ChangeNotifier {
|
||||
final SessionController session;
|
||||
|
||||
List<NextcloudShare> _shares = [];
|
||||
/// Each scope's own cache - switching `sharedWithMe` no longer refetches
|
||||
/// on every switch, only the first time a scope is visited (or on a
|
||||
/// pull-to-refresh/retry), since `By you`/`Links` (see shares_view.dart's
|
||||
/// client-side split of this same list) and `With you` used to hit the
|
||||
/// network again on every single toggle, even switching straight back to
|
||||
/// a scope just fetched seconds ago.
|
||||
List<NextcloudShare> _withMeShares = [];
|
||||
List<NextcloudShare> _byMeShares = [];
|
||||
bool _withMeLoaded = false;
|
||||
bool _byMeLoaded = false;
|
||||
bool _isLoading = false;
|
||||
String? _errorMessage;
|
||||
bool _sharedWithMe = false;
|
||||
@@ -18,13 +27,17 @@ class SharesController extends ChangeNotifier {
|
||||
session.addAccountActivatedListener(_onAccountActivated);
|
||||
}
|
||||
|
||||
List<NextcloudShare> get shares => _shares;
|
||||
List<NextcloudShare> get shares =>
|
||||
_sharedWithMe ? _withMeShares : _byMeShares;
|
||||
bool get isLoading => _isLoading;
|
||||
String? get errorMessage => _errorMessage;
|
||||
bool get sharedWithMe => _sharedWithMe;
|
||||
|
||||
void _onAccountCleared() {
|
||||
_shares = [];
|
||||
_withMeShares = [];
|
||||
_byMeShares = [];
|
||||
_withMeLoaded = false;
|
||||
_byMeLoaded = false;
|
||||
_isLoading = false;
|
||||
_errorMessage = null;
|
||||
_sharedWithMe = false;
|
||||
@@ -35,19 +48,29 @@ class SharesController extends ChangeNotifier {
|
||||
unawaited(fetchAll());
|
||||
}
|
||||
|
||||
/// Fetches the *current* scope fresh, ignoring its cache - the initial
|
||||
/// load, pull-to-refresh, and the error-retry button all want a real
|
||||
/// round-trip regardless of whether this scope was already loaded.
|
||||
Future<void> fetchAll() async {
|
||||
final service = session.service;
|
||||
if (!session.isLoggedIn || service == null) return;
|
||||
final gen = session.sessionGeneration;
|
||||
final wantsWithMe = _sharedWithMe;
|
||||
|
||||
_isLoading = true;
|
||||
_errorMessage = null;
|
||||
notifyListeners();
|
||||
|
||||
try {
|
||||
final shares = await service.fetchShares(sharedWithMe: _sharedWithMe);
|
||||
final shares = await service.fetchShares(sharedWithMe: wantsWithMe);
|
||||
if (gen != session.sessionGeneration) return;
|
||||
_shares = shares;
|
||||
if (wantsWithMe) {
|
||||
_withMeShares = shares;
|
||||
_withMeLoaded = true;
|
||||
} else {
|
||||
_byMeShares = shares;
|
||||
_byMeLoaded = true;
|
||||
}
|
||||
} catch (e) {
|
||||
if (gen != session.sessionGeneration) return;
|
||||
debugPrint('[SharesController] Error fetching shares: $e');
|
||||
@@ -60,12 +83,14 @@ class SharesController extends ChangeNotifier {
|
||||
}
|
||||
}
|
||||
|
||||
/// Switches between "shared by me" and "shared with me" and refetches.
|
||||
/// Switches between "shared by me" and "shared with me". Only fetches
|
||||
/// when the target scope hasn't been loaded yet - switching back to one
|
||||
/// already cached just swaps which list [shares] reads from.
|
||||
void setSharedWithMe(bool value) {
|
||||
if (_sharedWithMe == value) return;
|
||||
_sharedWithMe = value;
|
||||
notifyListeners();
|
||||
fetchAll();
|
||||
if (!(value ? _withMeLoaded : _byMeLoaded)) fetchAll();
|
||||
}
|
||||
|
||||
Future<bool> deleteShare(NextcloudShare share) async {
|
||||
@@ -73,7 +98,11 @@ class SharesController extends ChangeNotifier {
|
||||
if (service == null) return false;
|
||||
final success = await service.deleteShare(share.id);
|
||||
if (success) {
|
||||
_shares = _shares.where((s) => s.id != share.id).toList();
|
||||
if (_sharedWithMe) {
|
||||
_withMeShares = _withMeShares.where((s) => s.id != share.id).toList();
|
||||
} else {
|
||||
_byMeShares = _byMeShares.where((s) => s.id != share.id).toList();
|
||||
}
|
||||
notifyListeners();
|
||||
}
|
||||
return success;
|
||||
|
||||
@@ -44,6 +44,19 @@ DateTime? _parseDavDate(String? raw) {
|
||||
}
|
||||
}
|
||||
|
||||
/// Nextcloud's WebDAV server has no real per-file creation-time tracking
|
||||
/// for most setups, so its `creationdate` property routinely comes back as
|
||||
/// a placeholder Unix-epoch date ("Thu, 01 Jan 1970 00:00:00 GMT") instead
|
||||
/// of being omitted - [_parseDavDate] parses that "successfully" into a
|
||||
/// real (if bogus) `DateTime`, so every item's created date read January
|
||||
/// 1970. Treat it as absent instead, the same as a missing/unparseable
|
||||
/// value: `NextcloudItem`'s constructor then falls back to `lastModified`.
|
||||
DateTime? _parseDavCreationDate(String? raw) {
|
||||
final parsed = _parseDavDate(raw);
|
||||
if (parsed != null && parsed.millisecondsSinceEpoch <= 0) return null;
|
||||
return parsed;
|
||||
}
|
||||
|
||||
/// The OCS Activity API reports each event's time as an ISO 8601 string in
|
||||
/// a `datetime` field (e.g. "2025-09-15T12:34:56+00:00") - there is no
|
||||
/// numeric `timestamp` field despite that being a very easy name to guess.
|
||||
@@ -356,7 +369,7 @@ class NextcloudService {
|
||||
|
||||
final size = int.tryParse(sizeStr ?? '0') ?? 0;
|
||||
final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
|
||||
final created = _parseDavDate(createdStr);
|
||||
final created = _parseDavCreationDate(createdStr);
|
||||
final itemType = NextcloudItem.deduceType(name, isCollection, mimeType);
|
||||
final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
|
||||
|
||||
@@ -671,7 +684,7 @@ class NextcloudService {
|
||||
|
||||
final size = int.tryParse(sizeStr ?? '0') ?? 0;
|
||||
final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
|
||||
final created = _parseDavDate(createdStr);
|
||||
final created = _parseDavCreationDate(createdStr);
|
||||
final itemType = NextcloudItem.deduceType(name, false, mimeType);
|
||||
final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
|
||||
|
||||
@@ -835,7 +848,7 @@ class NextcloudService {
|
||||
|
||||
final size = int.tryParse(sizeStr ?? '0') ?? 0;
|
||||
final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
|
||||
final created = _parseDavDate(createdStr);
|
||||
final created = _parseDavCreationDate(createdStr);
|
||||
final itemType = NextcloudItem.deduceType(name, isCollection, mimeType);
|
||||
final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
|
||||
|
||||
@@ -1000,7 +1013,7 @@ class NextcloudService {
|
||||
|
||||
final size = int.tryParse(sizeStr ?? '0') ?? 0;
|
||||
final lastMod = _parseDavDate(lastModStr) ?? DateTime.now();
|
||||
final created = _parseDavDate(createdStr);
|
||||
final created = _parseDavCreationDate(createdStr);
|
||||
final itemType = NextcloudItem.deduceType(name, false, mimeType);
|
||||
final validId = (fileId != null && fileId.isNotEmpty) ? fileId : name;
|
||||
|
||||
@@ -1458,28 +1471,17 @@ class NextcloudService {
|
||||
final rawList = data['ocs']?['data'];
|
||||
if (rawList is! List) return [];
|
||||
|
||||
return rawList.map<NextcloudShare>((raw) {
|
||||
final path = (raw['path'] ?? '/').toString();
|
||||
final segments = path.split('/').where((s) => s.isNotEmpty).toList();
|
||||
final name = segments.isNotEmpty ? segments.last : path;
|
||||
final isFolder = (raw['item_type'] ?? '').toString() == 'folder';
|
||||
final mimeType = raw['mimetype'] as String?;
|
||||
|
||||
return NextcloudShare(
|
||||
id: (raw['id'] ?? '').toString(),
|
||||
path: path,
|
||||
name: name,
|
||||
itemType: NextcloudItem.deduceType(name, isFolder, mimeType),
|
||||
shareType: _mapShareType((raw['share_type'] as num?)?.toInt() ?? -1),
|
||||
ownerDisplayName: (raw['displayname_owner'] ?? raw['uid_owner'] ?? '')
|
||||
.toString(),
|
||||
sharedWithDisplayName: raw['share_with_displayname'] as String?,
|
||||
sharedAt: DateTime.fromMillisecondsSinceEpoch(
|
||||
((raw['stime'] as num?)?.toInt() ?? 0) * 1000,
|
||||
),
|
||||
sharedWithMe: sharedWithMe,
|
||||
);
|
||||
}).toList();
|
||||
// Shares out to `_shareFromJson` (the same parser `fetchSharesForPath`/
|
||||
// `fetchInheritedShares` use) rather than its own duplicated, thinner
|
||||
// inline parsing - that copy never set `url`/`token`/`permissions`/
|
||||
// `expireDate` at all, so a public-link share always came back with
|
||||
// `url: null` here and the Shares tab's own "Copy link" action could
|
||||
// never show up for it.
|
||||
return rawList
|
||||
.map<NextcloudShare>(
|
||||
(raw) => _shareFromJson(raw, sharedWithMe: sharedWithMe),
|
||||
)
|
||||
.toList();
|
||||
}
|
||||
|
||||
/// Creates a public link share for [path] and returns its share URL.
|
||||
|
||||
@@ -5,6 +5,27 @@ import '../providers/session_controller.dart';
|
||||
import 'native_channel.dart';
|
||||
import 'share_intent_service.dart';
|
||||
|
||||
/// One upload batch finishing - see [UploadService.completions].
|
||||
class UploadCompletion {
|
||||
final String remoteFolder;
|
||||
final int succeeded;
|
||||
final int failed;
|
||||
|
||||
const UploadCompletion({
|
||||
required this.remoteFolder,
|
||||
required this.succeeded,
|
||||
required this.failed,
|
||||
});
|
||||
|
||||
factory UploadCompletion.fromMap(Map<dynamic, dynamic> map) {
|
||||
return UploadCompletion(
|
||||
remoteFolder: map['remoteFolder'] as String? ?? '/',
|
||||
succeeded: (map['succeeded'] as num?)?.toInt() ?? 0,
|
||||
failed: (map['failed'] as num?)?.toInt() ?? 0,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Hands a "Share to Noo" upload off to `ShareUploadService.kt`'s Android
|
||||
/// foreground service, which does the actual prepare+upload entirely on its
|
||||
/// own from there - including surviving the app being closed - with a
|
||||
@@ -14,11 +35,15 @@ import 'share_intent_service.dart';
|
||||
/// real Android Service does.
|
||||
class UploadService {
|
||||
static const _channel = MethodChannel('dev.ayushya.noo/upload_service');
|
||||
static const _statusChannel = EventChannel(
|
||||
'dev.ayushya.noo/upload_service/status',
|
||||
);
|
||||
|
||||
/// Starts uploading [files] into the active account's current folder.
|
||||
/// Fire-and-forget from Dart's perspective - once this returns, the
|
||||
/// service owns the rest and reports progress/completion/cancellation
|
||||
/// through its own notification, not back to the app.
|
||||
/// through its own notification, not back to the app. [completions] is
|
||||
/// the one thing it does report back, for `FilesController` to act on.
|
||||
static Future<void> startUpload(
|
||||
SessionController session,
|
||||
FilesController files,
|
||||
@@ -37,4 +62,15 @@ class UploadService {
|
||||
'remoteFolder': files.currentFolderPath,
|
||||
});
|
||||
}
|
||||
|
||||
/// Fires once per finished batch (at least one file uploaded) from
|
||||
/// `UploadEventBus` (Kotlin) - lets `FilesController` refresh the
|
||||
/// destination folder if it's the one currently on screen, instead of the
|
||||
/// list only updating on a manual pull-to-refresh. One shared stream,
|
||||
/// deliberately: see `SyncService.statusStream`'s identical doc comment -
|
||||
/// `EventChannel.receiveBroadcastStream()` opens its own native
|
||||
/// subscription per call, and the native side only keeps the latest one.
|
||||
static final Stream<UploadCompletion> completions = _statusChannel
|
||||
.receiveBroadcastStream()
|
||||
.map((event) => UploadCompletion.fromMap(event as Map<dynamic, dynamic>));
|
||||
}
|
||||
|
||||
+67
-26
@@ -1,9 +1,19 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import 'design_tokens.dart';
|
||||
|
||||
class AppTheme {
|
||||
static const Color defaultNextcloudBlue = Color(0xFF0082C9);
|
||||
|
||||
/// The design system's own fixed violet - [NooColors.light]/`.dark`'s
|
||||
/// `accent`, and the accent picker's "Default" swatch. Also
|
||||
/// [SettingsController]'s initial [SettingsController.seedColor], so a
|
||||
/// fresh install (or any device without Material You dynamic color) keeps
|
||||
/// today's violet look rather than picking up the leftover
|
||||
/// [defaultNextcloudBlue] default from before seed colors actually did
|
||||
/// anything to the Noo-styled UI (see [NooColors.fromSeed]).
|
||||
static const Color defaultAccent = Color(0xFF8D0DE3);
|
||||
|
||||
// Flutter's Material 3 default (ZoomPageTransitionsBuilder) doesn't
|
||||
// implement Android's predictive-back gesture at all. Opting into
|
||||
// PredictiveBackPageTransitionsBuilder here (Android only) is required —
|
||||
@@ -23,6 +33,7 @@ class AppTheme {
|
||||
static const _sliderTheme = SliderThemeData(year2023: false);
|
||||
|
||||
static const List<Color> seedColors = [
|
||||
defaultAccent, // Default (Noo Violet)
|
||||
Color(0xFF0082C9), // Nextcloud Blue
|
||||
Color(0xFF009688), // Ocean Teal
|
||||
Color(0xFF6750A4), // Deep Purple
|
||||
@@ -30,6 +41,49 @@ class AppTheme {
|
||||
Color(0xFF2E7D32), // Emerald Green
|
||||
];
|
||||
|
||||
// Design-system typefaces (DESIGN_SYSTEM.md 1.3): Schibsted Grotesk for
|
||||
// headings, Instrument Sans for UI/body text. Applied over Flutter's
|
||||
// default TextTheme slots app-wide - screens not yet reworked to the
|
||||
// design system's own named type scale (`NooText`) still benefit from
|
||||
// the new typefaces immediately instead of staying on Inter until their
|
||||
// turn comes.
|
||||
static TextTheme _textTheme(Brightness brightness) {
|
||||
final base = brightness == Brightness.light
|
||||
? ThemeData.light().textTheme
|
||||
: ThemeData.dark().textTheme;
|
||||
return GoogleFonts.instrumentSansTextTheme(base).copyWith(
|
||||
displayLarge: GoogleFonts.schibstedGrotesk(
|
||||
textStyle: base.displayLarge,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
displayMedium: GoogleFonts.schibstedGrotesk(
|
||||
textStyle: base.displayMedium,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
displaySmall: GoogleFonts.schibstedGrotesk(
|
||||
textStyle: base.displaySmall,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
headlineLarge: GoogleFonts.schibstedGrotesk(
|
||||
textStyle: base.headlineLarge,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
headlineMedium: GoogleFonts.schibstedGrotesk(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
headlineSmall: GoogleFonts.schibstedGrotesk(
|
||||
textStyle: base.headlineSmall,
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
titleLarge: GoogleFonts.schibstedGrotesk(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
),
|
||||
titleMedium: GoogleFonts.schibstedGrotesk(fontWeight: FontWeight.w500),
|
||||
);
|
||||
}
|
||||
|
||||
static ThemeData light(
|
||||
Color seedColor, {
|
||||
ColorScheme? dynamicScheme,
|
||||
@@ -41,26 +95,19 @@ class AppTheme {
|
||||
seedColor: seedColor,
|
||||
brightness: Brightness.light,
|
||||
);
|
||||
final nooColors = (useDynamicColor && dynamicScheme != null)
|
||||
? NooColors.fromDynamicScheme(dynamicScheme)
|
||||
: NooColors.fromSeed(seedColor, Brightness.light);
|
||||
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.light,
|
||||
colorScheme: colorScheme,
|
||||
extensions: [nooColors],
|
||||
scaffoldBackgroundColor: colorScheme.surface,
|
||||
pageTransitionsTheme: _pageTransitionsTheme,
|
||||
sliderTheme: _sliderTheme,
|
||||
textTheme: GoogleFonts.interTextTheme(ThemeData.light().textTheme)
|
||||
.copyWith(
|
||||
headlineMedium: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
titleLarge: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
),
|
||||
titleMedium: GoogleFonts.inter(fontWeight: FontWeight.w500),
|
||||
),
|
||||
textTheme: _textTheme(Brightness.light),
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
||||
@@ -71,7 +118,7 @@ class AppTheme {
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: false,
|
||||
titleTextStyle: GoogleFonts.inter(
|
||||
titleTextStyle: GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
@@ -92,6 +139,9 @@ class AppTheme {
|
||||
seedColor: seedColor,
|
||||
brightness: Brightness.dark,
|
||||
);
|
||||
var nooColors = (useDynamicColor && dynamicScheme != null)
|
||||
? NooColors.fromDynamicScheme(dynamicScheme)
|
||||
: NooColors.fromSeed(seedColor, Brightness.dark);
|
||||
|
||||
if (amoled) {
|
||||
// True OLED black across every surface tone Material 3 hands out -
|
||||
@@ -106,27 +156,18 @@ class AppTheme {
|
||||
surfaceContainerHighest: Colors.black,
|
||||
surfaceDim: Colors.black,
|
||||
);
|
||||
nooColors = nooColors.withAmoled();
|
||||
}
|
||||
|
||||
return ThemeData(
|
||||
useMaterial3: true,
|
||||
brightness: Brightness.dark,
|
||||
colorScheme: colorScheme,
|
||||
extensions: [nooColors],
|
||||
scaffoldBackgroundColor: colorScheme.surface,
|
||||
pageTransitionsTheme: _pageTransitionsTheme,
|
||||
sliderTheme: _sliderTheme,
|
||||
textTheme: GoogleFonts.interTextTheme(ThemeData.dark().textTheme)
|
||||
.copyWith(
|
||||
headlineMedium: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
titleLarge: GoogleFonts.inter(
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -0.2,
|
||||
),
|
||||
titleMedium: GoogleFonts.inter(fontWeight: FontWeight.w500),
|
||||
),
|
||||
textTheme: _textTheme(Brightness.dark),
|
||||
cardTheme: CardThemeData(
|
||||
elevation: 0,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)),
|
||||
@@ -137,7 +178,7 @@ class AppTheme {
|
||||
elevation: 0,
|
||||
scrolledUnderElevation: 0,
|
||||
centerTitle: false,
|
||||
titleTextStyle: GoogleFonts.inter(
|
||||
titleTextStyle: GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.onSurface,
|
||||
|
||||
@@ -0,0 +1,459 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
|
||||
/// Semantic color tokens from `.claude/context/design-system/DESIGN_SYSTEM.md`
|
||||
/// section 1.1 - read that file before changing any value here. Registered
|
||||
/// on [ThemeData.extensions], so call sites reach these via
|
||||
/// `Theme.of(context).extension<NooColors>()!` (or a `context.nooColors`
|
||||
/// getter, once one exists) instead of the Material [ColorScheme] roles.
|
||||
///
|
||||
/// Three sources feed this, matching the app's color settings: the fixed
|
||||
/// [light]/[dark] palettes below (the design system's own default look,
|
||||
/// also what the accent picker's "Default" violet swatch selects),
|
||||
/// [NooColors.fromDynamicScheme] when the user has Material You dynamic
|
||||
/// color turned on, or [NooColors.fromSeed] for a custom accent-picker
|
||||
/// swatch. [withAmoled] layers on top of any of the three when the user's
|
||||
/// AMOLED toggle is on.
|
||||
@immutable
|
||||
class NooColors extends ThemeExtension<NooColors> {
|
||||
final Color bg;
|
||||
final Color surface;
|
||||
final Color surface2;
|
||||
final Color surface3;
|
||||
final Color line;
|
||||
final Color fg1;
|
||||
final Color fg2;
|
||||
final Color fg3;
|
||||
final Color accent;
|
||||
final Color accentText;
|
||||
final Color accentSoft;
|
||||
final Color danger;
|
||||
final Color dangerSoft;
|
||||
final Color dangerFill;
|
||||
final Color success;
|
||||
final Color successSoft;
|
||||
final Color warning;
|
||||
final Color warningSoft;
|
||||
final Color info;
|
||||
final Color infoSoft;
|
||||
final Color scrim;
|
||||
|
||||
const NooColors({
|
||||
required this.bg,
|
||||
required this.surface,
|
||||
required this.surface2,
|
||||
required this.surface3,
|
||||
required this.line,
|
||||
required this.fg1,
|
||||
required this.fg2,
|
||||
required this.fg3,
|
||||
required this.accent,
|
||||
required this.accentText,
|
||||
required this.accentSoft,
|
||||
required this.danger,
|
||||
required this.dangerSoft,
|
||||
required this.dangerFill,
|
||||
required this.success,
|
||||
required this.successSoft,
|
||||
required this.warning,
|
||||
required this.warningSoft,
|
||||
required this.info,
|
||||
required this.infoSoft,
|
||||
required this.scrim,
|
||||
});
|
||||
|
||||
static const light = NooColors(
|
||||
bg: Color(0xFFF3EFE6),
|
||||
surface: Color(0xFFFFFFFF),
|
||||
surface2: Color(0xFFF6F5F2),
|
||||
surface3: Color(0xFFEAE8E2),
|
||||
line: Color(0xFFEAE8E2),
|
||||
fg1: Color(0xFF0E0D0B),
|
||||
fg2: Color(0xFF5A5852),
|
||||
fg3: Color(0xFF7C7A72),
|
||||
accent: Color(0xFF8D0DE3),
|
||||
accentText: Color(0xFF8D0DE3),
|
||||
accentSoft: Color(0xFFECDFFF),
|
||||
danger: Color(0xFFA8202A),
|
||||
dangerSoft: Color(0xFFFDE7E7),
|
||||
dangerFill: Color(0xFFA8202A),
|
||||
success: Color(0xFF3E7A23),
|
||||
successSoft: Color(0xFFEAF5DF),
|
||||
warning: Color(0xFF8C5A0E),
|
||||
warningSoft: Color(0xFFFBEFD0),
|
||||
info: Color(0xFF2940A8),
|
||||
infoSoft: Color(0xFFE6ECFE),
|
||||
scrim: Color(0x730E0D0B),
|
||||
);
|
||||
|
||||
static const dark = NooColors(
|
||||
bg: Color(0xFF0E0D0B),
|
||||
surface: Color(0xFF25241F),
|
||||
surface2: Color(0xFF3D3C38),
|
||||
surface3: Color(0xFF5A5852),
|
||||
line: Color(0xFF3D3C38),
|
||||
fg1: Color(0xFFF3EFE6),
|
||||
fg2: Color(0xFFBDBAB1),
|
||||
fg3: Color(0xFF9E9B92),
|
||||
accent: Color(0xFF8D0DE3),
|
||||
accentText: Color(0xFFCBA5FD),
|
||||
accentSoft: Color(0xFF2F0454),
|
||||
danger: Color(0xFFF49E9E),
|
||||
dangerSoft: Color(0xFF560F18),
|
||||
dangerFill: Color(0xFFA8202A),
|
||||
success: Color(0xFFB7DD9F),
|
||||
successSoft: Color(0xFF1E3F10),
|
||||
warning: Color(0xFFF0C26C),
|
||||
warningSoft: Color(0xFF4A3208),
|
||||
info: Color(0xFFB6C3FB),
|
||||
infoSoft: Color(0xFF1C2B73),
|
||||
scrim: Color(0x99000000),
|
||||
);
|
||||
|
||||
/// Avatar/photo-placeholder fills (`DESIGN_SYSTEM.md` 1.1) - a fixed
|
||||
/// secondary palette, same in light and dark, always paired with
|
||||
/// [avatarTextColor]. Content-identity colors, not theme, so they don't
|
||||
/// change with brightness or dynamic color (same reasoning as file-type
|
||||
/// tinting in `styling.md`).
|
||||
static const avatarPalette = [
|
||||
Color(0xFF8DCDE2),
|
||||
Color(0xFF96B0FD),
|
||||
Color(0xFFE5D8BD),
|
||||
Color(0xFFEEEDB3),
|
||||
Color(0xFFDA9AC7),
|
||||
Color(0xFFA7D296),
|
||||
Color(0xFFE9A6A7),
|
||||
Color(0xFF85D1BD),
|
||||
Color(0xFFCBA5FD),
|
||||
];
|
||||
static const avatarTextColor = Color(0xFF0E0D0B);
|
||||
|
||||
/// Maps a Material You dynamic [ColorScheme] onto these roles for users
|
||||
/// who've turned dynamic color on, instead of the fixed [light]/[dark]
|
||||
/// palettes. `success`/`successSoft`/`warning`/`warningSoft`/`info`/
|
||||
/// `infoSoft` have no Material dynamic equivalent and are content-identity
|
||||
/// colors regardless (file-type tiles) rather than brand colors, so they
|
||||
/// always come from the fixed palette matching [cs]'s brightness. Same
|
||||
/// for `scrim`: Material 3's `ColorScheme.scrim` role is fully *opaque*
|
||||
/// black (`0xFF000000`), meant to be used at reduced opacity by whoever
|
||||
/// paints it, not painted directly - using it as-is for a sheet/dialog's
|
||||
/// `barrierColor` hid the screen behind completely instead of dimming it,
|
||||
/// so this uses the fixed palette's already-translucent scrim instead.
|
||||
factory NooColors.fromDynamicScheme(ColorScheme cs) {
|
||||
final fixed = cs.brightness == Brightness.dark ? dark : light;
|
||||
return NooColors(
|
||||
bg: cs.surface,
|
||||
surface: cs.surfaceContainerLow,
|
||||
surface2: cs.surfaceContainerHigh,
|
||||
surface3: cs.surfaceContainerHighest,
|
||||
line: cs.outlineVariant,
|
||||
fg1: cs.onSurface,
|
||||
fg2: cs.onSurfaceVariant,
|
||||
fg3: cs.onSurfaceVariant,
|
||||
accent: cs.primary,
|
||||
accentText: cs.primary,
|
||||
accentSoft: cs.primaryContainer,
|
||||
danger: cs.error,
|
||||
dangerSoft: cs.errorContainer,
|
||||
dangerFill: cs.error,
|
||||
success: fixed.success,
|
||||
successSoft: fixed.successSoft,
|
||||
warning: fixed.warning,
|
||||
warningSoft: fixed.warningSoft,
|
||||
info: fixed.info,
|
||||
infoSoft: fixed.infoSoft,
|
||||
scrim: fixed.scrim,
|
||||
);
|
||||
}
|
||||
|
||||
/// Derives an accent-only variant of the fixed [light]/[dark] palette for
|
||||
/// a user-chosen custom seed color (Settings' accent-color picker) -
|
||||
/// unlike [fromDynamicScheme], only the accent roles change; bg/surface/
|
||||
/// fg etc. stay the Noo warm-neutral palette, since picking a named
|
||||
/// accent ("Ocean Teal") is meant to retint the brand color, not reshape
|
||||
/// the whole surface to match a wallpaper the way dynamic color does.
|
||||
/// [seedColor] equal to the fixed palette's own accent (the picker's
|
||||
/// "Default" violet swatch) returns the untouched fixed palette, so the
|
||||
/// out-of-box look stays pixel-identical rather than going through
|
||||
/// [ColorScheme.fromSeed]'s tonal-palette math for no reason.
|
||||
factory NooColors.fromSeed(Color seedColor, Brightness brightness) {
|
||||
final fixed = brightness == Brightness.dark ? dark : light;
|
||||
if (seedColor == light.accent) return fixed;
|
||||
final cs = ColorScheme.fromSeed(
|
||||
seedColor: seedColor,
|
||||
brightness: brightness,
|
||||
);
|
||||
return fixed.copyWith(
|
||||
accent: seedColor,
|
||||
// Light accentText matches accent exactly, same as the fixed
|
||||
// palette - dark needs a lighter, desaturated tint for contrast
|
||||
// against a dark surface, which is exactly what Material's tonal
|
||||
// primary (tone ~80 in dark mode) is designed to give.
|
||||
accentText: brightness == Brightness.dark ? cs.primary : seedColor,
|
||||
accentSoft: cs.primaryContainer,
|
||||
);
|
||||
}
|
||||
|
||||
/// True OLED black across every surface tone - not just [bg] - so cards,
|
||||
/// bars and sheets all go black too instead of the dark palette's warm
|
||||
/// dark-grey tones. Mirrors the AMOLED handling this replaces in
|
||||
/// `AppTheme.dark` (see git history), just against these tokens instead
|
||||
/// of Material [ColorScheme] roles.
|
||||
NooColors withAmoled() => copyWith(
|
||||
bg: Colors.black,
|
||||
surface: Colors.black,
|
||||
surface2: Colors.black,
|
||||
surface3: Colors.black,
|
||||
);
|
||||
|
||||
@override
|
||||
NooColors copyWith({
|
||||
Color? bg,
|
||||
Color? surface,
|
||||
Color? surface2,
|
||||
Color? surface3,
|
||||
Color? line,
|
||||
Color? fg1,
|
||||
Color? fg2,
|
||||
Color? fg3,
|
||||
Color? accent,
|
||||
Color? accentText,
|
||||
Color? accentSoft,
|
||||
Color? danger,
|
||||
Color? dangerSoft,
|
||||
Color? dangerFill,
|
||||
Color? success,
|
||||
Color? successSoft,
|
||||
Color? warning,
|
||||
Color? warningSoft,
|
||||
Color? info,
|
||||
Color? infoSoft,
|
||||
Color? scrim,
|
||||
}) {
|
||||
return NooColors(
|
||||
bg: bg ?? this.bg,
|
||||
surface: surface ?? this.surface,
|
||||
surface2: surface2 ?? this.surface2,
|
||||
surface3: surface3 ?? this.surface3,
|
||||
line: line ?? this.line,
|
||||
fg1: fg1 ?? this.fg1,
|
||||
fg2: fg2 ?? this.fg2,
|
||||
fg3: fg3 ?? this.fg3,
|
||||
accent: accent ?? this.accent,
|
||||
accentText: accentText ?? this.accentText,
|
||||
accentSoft: accentSoft ?? this.accentSoft,
|
||||
danger: danger ?? this.danger,
|
||||
dangerSoft: dangerSoft ?? this.dangerSoft,
|
||||
dangerFill: dangerFill ?? this.dangerFill,
|
||||
success: success ?? this.success,
|
||||
successSoft: successSoft ?? this.successSoft,
|
||||
warning: warning ?? this.warning,
|
||||
warningSoft: warningSoft ?? this.warningSoft,
|
||||
info: info ?? this.info,
|
||||
infoSoft: infoSoft ?? this.infoSoft,
|
||||
scrim: scrim ?? this.scrim,
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
NooColors lerp(ThemeExtension<NooColors>? other, double t) {
|
||||
if (other is! NooColors) return this;
|
||||
return NooColors(
|
||||
bg: Color.lerp(bg, other.bg, t)!,
|
||||
surface: Color.lerp(surface, other.surface, t)!,
|
||||
surface2: Color.lerp(surface2, other.surface2, t)!,
|
||||
surface3: Color.lerp(surface3, other.surface3, t)!,
|
||||
line: Color.lerp(line, other.line, t)!,
|
||||
fg1: Color.lerp(fg1, other.fg1, t)!,
|
||||
fg2: Color.lerp(fg2, other.fg2, t)!,
|
||||
fg3: Color.lerp(fg3, other.fg3, t)!,
|
||||
accent: Color.lerp(accent, other.accent, t)!,
|
||||
accentText: Color.lerp(accentText, other.accentText, t)!,
|
||||
accentSoft: Color.lerp(accentSoft, other.accentSoft, t)!,
|
||||
danger: Color.lerp(danger, other.danger, t)!,
|
||||
dangerSoft: Color.lerp(dangerSoft, other.dangerSoft, t)!,
|
||||
dangerFill: Color.lerp(dangerFill, other.dangerFill, t)!,
|
||||
success: Color.lerp(success, other.success, t)!,
|
||||
successSoft: Color.lerp(successSoft, other.successSoft, t)!,
|
||||
warning: Color.lerp(warning, other.warning, t)!,
|
||||
warningSoft: Color.lerp(warningSoft, other.warningSoft, t)!,
|
||||
info: Color.lerp(info, other.info, t)!,
|
||||
infoSoft: Color.lerp(infoSoft, other.infoSoft, t)!,
|
||||
scrim: Color.lerp(scrim, other.scrim, t)!,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Reads the app's [NooColors] - registered on every [ThemeData] built by
|
||||
/// `AppTheme`, so this is never actually null in a running app.
|
||||
extension NooColorsContext on BuildContext {
|
||||
NooColors get nooColors => Theme.of(this).extension<NooColors>()!;
|
||||
}
|
||||
|
||||
/// The 4px spacing scale from the Noo Design System project's
|
||||
/// `tokens/spacing.css` (claude.ai/design, project id
|
||||
/// bb69c00d-f400-445c-9683-355668c0bfe1 - the authoritative source now;
|
||||
/// `.claude/context/design-system/` is the earlier, less precise mockup
|
||||
/// export).
|
||||
class NooSpace {
|
||||
const NooSpace._();
|
||||
static const double xxs = 4;
|
||||
static const double xs = 8;
|
||||
static const double sm = 12;
|
||||
static const double smd = 14;
|
||||
static const double md = 16;
|
||||
static const double lg = 20;
|
||||
static const double xl = 24;
|
||||
static const double xxl = 32;
|
||||
}
|
||||
|
||||
/// Corner radii from `tokens/spacing.css`. `pill` covers every button,
|
||||
/// chip, segmented control, toggle, search field and badge.
|
||||
class NooRadii {
|
||||
const NooRadii._();
|
||||
static const double pill = 999;
|
||||
static const double card = 20;
|
||||
static const double gridCard = 18;
|
||||
static const double input = 14;
|
||||
static const double sidebarItem = 12;
|
||||
static const double sheetTop = 28;
|
||||
static const double dialog = 24;
|
||||
static const double dropdown = 10;
|
||||
static const double screenCornerAndroid = 36;
|
||||
static const double screenCornerIOS = 48;
|
||||
static const double windowMac = 12;
|
||||
static const double windowWin = 8;
|
||||
}
|
||||
|
||||
/// Fixed heights/widths from `tokens/spacing.css` - button sizes, row
|
||||
/// heights, the desktop sidebar width. Named to match the component that
|
||||
/// uses each one (`NooButton`'s `size` picks from the `button*` set).
|
||||
class NooSizes {
|
||||
const NooSizes._();
|
||||
static const double buttonCta = 52;
|
||||
static const double buttonCard = 44;
|
||||
static const double buttonField = 40;
|
||||
static const double buttonToolbar = 36;
|
||||
static const double buttonCompact = 32;
|
||||
static const double buttonXs = 28;
|
||||
static const double rowMobile = 64;
|
||||
static const double rowDesktop = 52;
|
||||
static const double settingsRow = 52;
|
||||
static const double sidebarItem = 38;
|
||||
static const double toolbar = 64;
|
||||
static const double sidebarWidth = 256;
|
||||
}
|
||||
|
||||
/// Motion constants from `tokens/spacing.css`'s `--ease`/`--dur-*`/
|
||||
/// `--press-scale`.
|
||||
class NooMotion {
|
||||
const NooMotion._();
|
||||
static const Curve ease = Cubic(0.7, 0, 0.15, 1);
|
||||
static const Duration fast = Duration(milliseconds: 180);
|
||||
static const Duration base = Duration(milliseconds: 280);
|
||||
static const Duration slow = Duration(milliseconds: 480);
|
||||
static const double pressScale = 0.98;
|
||||
}
|
||||
|
||||
/// The one shadow the design system allows, from `tokens/spacing.css`'s
|
||||
/// `--shadow-dialog` - desktop dialogs only. Nothing else in the app should
|
||||
/// use a `BoxShadow`.
|
||||
const nooDialogShadow = BoxShadow(
|
||||
color: Color(0x241E002F), // rgba(30,0,47,.14)
|
||||
blurRadius: 48,
|
||||
offset: Offset(0, 24),
|
||||
);
|
||||
|
||||
/// The named type scale from `DESIGN_SYSTEM.md` 1.3 - mobile sizes only for
|
||||
/// now (desktop rework hasn't started). Schibsted Grotesk for headings,
|
||||
/// Instrument Sans for UI text, per the spec. Color is deliberately not set
|
||||
/// here - callers pull it from [NooColors] since the same style (e.g.
|
||||
/// `meta`) is reused across surfaces with different foreground colors.
|
||||
class NooText {
|
||||
const NooText._();
|
||||
|
||||
static TextStyle get largeTitle => GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 34,
|
||||
height: 0.9,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -34 * 0.03,
|
||||
);
|
||||
|
||||
static TextStyle get stat => GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 32,
|
||||
height: 0.9,
|
||||
fontWeight: FontWeight.w600,
|
||||
letterSpacing: -32 * 0.03,
|
||||
);
|
||||
|
||||
static TextStyle get title => GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 22,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: -22 * 0.02,
|
||||
);
|
||||
|
||||
static TextStyle get cardTitle => GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 20,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: -20 * 0.02,
|
||||
);
|
||||
|
||||
/// Desktop `GroupedList` title / share dialog headings - 17px, between
|
||||
/// [cardTitle] and [groupHeading].
|
||||
static TextStyle get sectionTitle => GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 17,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: -17 * 0.02,
|
||||
);
|
||||
|
||||
static TextStyle get groupHeading => GoogleFonts.schibstedGrotesk(
|
||||
fontSize: 18,
|
||||
fontWeight: FontWeight.w500,
|
||||
letterSpacing: -18 * 0.02,
|
||||
);
|
||||
|
||||
static TextStyle get bodyL => GoogleFonts.instrumentSans(
|
||||
fontSize: 16,
|
||||
height: 1.2,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
static TextStyle get body => GoogleFonts.instrumentSans(
|
||||
fontSize: 15,
|
||||
height: 1.3,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
static TextStyle get label =>
|
||||
GoogleFonts.instrumentSans(fontSize: 13, fontWeight: FontWeight.w600);
|
||||
|
||||
static TextStyle get meta => GoogleFonts.instrumentSans(
|
||||
fontSize: 13,
|
||||
height: 1.2,
|
||||
fontWeight: FontWeight.w400,
|
||||
);
|
||||
|
||||
/// Bottom-nav label, idle state (Android: 12/500 fg-2 - see
|
||||
/// `Mobile Screen.dc.html`'s `aNav` block). Use [navLabelActive] for the
|
||||
/// selected destination.
|
||||
static TextStyle get navLabel =>
|
||||
GoogleFonts.instrumentSans(fontSize: 12, fontWeight: FontWeight.w500);
|
||||
|
||||
/// Bottom-nav label, active state (Android: 12/600 fg-1, not accent-text -
|
||||
/// only the icon's pill uses accent-soft/accent-text).
|
||||
static TextStyle get navLabelActive =>
|
||||
GoogleFonts.instrumentSans(fontSize: 12, fontWeight: FontWeight.w600);
|
||||
|
||||
static TextStyle get button =>
|
||||
GoogleFonts.instrumentSans(fontSize: 15, fontWeight: FontWeight.w600);
|
||||
|
||||
static TextStyle get buttonSm =>
|
||||
GoogleFonts.instrumentSans(fontSize: 14, fontWeight: FontWeight.w600);
|
||||
|
||||
static const mono = TextStyle(
|
||||
fontFamily: 'monospace',
|
||||
fontFamilyFallback: ['ui-monospace', 'Menlo'],
|
||||
fontSize: 14,
|
||||
height: 1,
|
||||
);
|
||||
}
|
||||
+99
-1488
File diff suppressed because it is too large
Load Diff
+94
-109
@@ -1,11 +1,31 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/lists/noo_grouped_list.dart';
|
||||
import '../widgets/noo/media/noo_activity_item.dart';
|
||||
import '../widgets/noo/media/noo_photo_tile.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/tabs/tab_day_groups.dart';
|
||||
import '../widgets/tabs/tab_state_slivers.dart';
|
||||
|
||||
/// The whole-account activity feed - lives on [FilesController] (fetched
|
||||
/// alongside the current Files folder) rather than its own controller, see
|
||||
/// `FilesController.refreshData`. Grouped by calendar day per
|
||||
/// `DESIGN_SYSTEM.md` §4; desktop centers the feed at 760px.
|
||||
///
|
||||
/// [NextcloudActivity] only carries a rendered `title`/`subject` string
|
||||
/// pair plus an `author` username - the server response has no structured
|
||||
/// actor/verb/object breakdown or file reference, so the bold "actor"
|
||||
/// segment is the author and the rest of the sentence (already fully
|
||||
/// formed server-side) rides as one plain run rather than being split
|
||||
/// further, and there's no reliable file to show in the trailing file
|
||||
/// tile slot - see this screen's rebuild report for what a richer feed
|
||||
/// would need from the service layer.
|
||||
class ActivityView extends StatelessWidget {
|
||||
final ScrollController scrollController;
|
||||
|
||||
@@ -13,129 +33,94 @@ class ActivityView extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final files = context.watch<FilesController>();
|
||||
final session = context.watch<SessionController>();
|
||||
final activities = files.activities;
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
final groups = groupByCalendarDay<NextcloudActivity>(
|
||||
activities,
|
||||
(a) => a.timestamp,
|
||||
);
|
||||
|
||||
final List<Widget> contentSlivers = [
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
||||
|
||||
if (files.isLoading && activities.isEmpty)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
)
|
||||
else if (activities.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Text(
|
||||
'No recent activity',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
Widget feed;
|
||||
if (files.isLoading && activities.isEmpty) {
|
||||
feed = tabLoadingSliver;
|
||||
} else if (activities.isEmpty) {
|
||||
feed = tabEmptySliver(
|
||||
context,
|
||||
icon: LucideIcons.activity,
|
||||
message: 'No recent activity',
|
||||
);
|
||||
} else {
|
||||
feed = SliverPadding(
|
||||
padding: EdgeInsets.symmetric(horizontal: NooLayout.gutter(context)),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final act = activities[index];
|
||||
|
||||
final group = groups[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.2),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
padding: const EdgeInsets.only(bottom: 18),
|
||||
child: NooGroupedList(
|
||||
label: group.label,
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primaryContainer,
|
||||
shape: BoxShape.circle,
|
||||
for (final act in group.items)
|
||||
Material(
|
||||
color: colors.surface,
|
||||
child: NooActivityItem(
|
||||
actor: act.author,
|
||||
verb: act.title,
|
||||
tail: act.subject.isNotEmpty && act.subject != act.title
|
||||
? act.subject
|
||||
: null,
|
||||
time: DateFormat.jm().format(act.timestamp),
|
||||
avatarColor: NooPhotoTile.paletteColor(
|
||||
act.author.hashCode,
|
||||
),
|
||||
child: Icon(
|
||||
act.icon,
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
act.title,
|
||||
style: theme.textTheme.titleMedium
|
||||
?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
DateFormat.jm().format(act.timestamp),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
currentUser:
|
||||
act.author.toLowerCase() ==
|
||||
session.username.toLowerCase(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
act.subject,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'By ${act.author} • ${DateFormat.MMMd().format(act.timestamp)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.primary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}, childCount: activities.length),
|
||||
),
|
||||
}, childCount: groups.length),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
||||
const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
|
||||
final List<Widget> contentSlivers = [
|
||||
const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
|
||||
feed,
|
||||
...tabBottomInsetSlivers,
|
||||
];
|
||||
|
||||
return SyncedHeaderScaffold(
|
||||
scrollController: scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
contentSlivers: contentSlivers,
|
||||
final scrollView = CustomScrollView(
|
||||
controller: scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-item feed.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: contentSlivers,
|
||||
);
|
||||
|
||||
return ColoredBox(
|
||||
color: colors.bg,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: () => context.read<FilesController>().refreshData(),
|
||||
// "Desktop limits it to 760px wide" (DESIGN_SYSTEM.md §4) - centered
|
||||
// rather than left-aligned, so a wide window doesn't stretch the
|
||||
// feed's short sentences edge to edge.
|
||||
child: isDesktop
|
||||
? Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 760),
|
||||
child: scrollView,
|
||||
),
|
||||
)
|
||||
: scrollView,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+259
-365
@@ -1,7 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:share_plus/share_plus.dart';
|
||||
import '../models/app_tab.dart';
|
||||
@@ -13,16 +13,23 @@ import '../providers/item_operations.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../providers/settings_controller.dart';
|
||||
import '../services/download_service.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/details/details_sheet.dart';
|
||||
import '../widgets/item_icon.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/segmented_icon_toggle.dart';
|
||||
import '../widgets/selectable_thumbnail.dart';
|
||||
import '../widgets/files_controls_row.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/files/noo_file_tile.dart';
|
||||
import '../widgets/noo/lists/noo_grouped_list.dart';
|
||||
import '../widgets/noo/lists/noo_selection_bar.dart';
|
||||
import '../widgets/noo/lists/noo_settings_row.dart';
|
||||
import '../widgets/noo/media/noo_grid_card.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/noo/overlays/noo_sheet.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
import '../widgets/share_sheet.dart';
|
||||
import '../widgets/sort_menu_button.dart';
|
||||
import '../widgets/sticky_header_delegate.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import '../widgets/synced_header_scaffold.dart' show formatBytes;
|
||||
import 'file_viewer_screen.dart';
|
||||
import 'move_copy_destination_picker.dart';
|
||||
|
||||
@@ -35,9 +42,11 @@ import 'move_copy_destination_picker.dart';
|
||||
/// wide list also means the breadcrumb-vs-content mismatch a filter
|
||||
/// toggle had - the trail showing wherever Files was last browsing while
|
||||
/// the content showed something else entirely - simply can't happen).
|
||||
/// Shares Files' own sort/hidden/storage-scope/grid-list display prefs
|
||||
/// (via `FilesController.applyFilesDisplayPrefs`) rather than a separate
|
||||
/// parallel settings dimension.
|
||||
/// Shares Files' own sort/hidden/type-filter/storage-scope/grid-list
|
||||
/// display prefs (via `FilesController.applyFilesDisplayPrefs`, and
|
||||
/// `FilesControlsRow` for the controls themselves) rather than a separate
|
||||
/// parallel settings dimension. Renders content only - the shell owns the
|
||||
/// top bar, bottom bar, drawer and FAB.
|
||||
class FavoritesView extends StatefulWidget {
|
||||
final ScrollController scrollController;
|
||||
|
||||
@@ -47,85 +56,23 @@ class FavoritesView extends StatefulWidget {
|
||||
State<FavoritesView> createState() => _FavoritesViewState();
|
||||
}
|
||||
|
||||
class _FavoritesViewState extends State<FavoritesView>
|
||||
with SingleTickerProviderStateMixin {
|
||||
class _FavoritesViewState extends State<FavoritesView> {
|
||||
bool _requested = false;
|
||||
final Set<String> _selectedIds = {};
|
||||
final ScrollController _selectionActionsScrollController = ScrollController();
|
||||
final List<AnimationController> _scrollHintControllers = [];
|
||||
|
||||
bool get _isSelecting => _selectedIds.isNotEmpty;
|
||||
|
||||
void _toggleSelection(NextcloudItem item) {
|
||||
HapticFeedback.selectionClick();
|
||||
final enteringSelection = _selectedIds.isEmpty;
|
||||
setState(() {
|
||||
if (!_selectedIds.remove(item.id)) _selectedIds.add(item.id);
|
||||
});
|
||||
if (enteringSelection && _isSelecting) {
|
||||
WidgetsBinding.instance.addPostFrameCallback(
|
||||
(_) => _playScrollHint(_selectionActionsScrollController),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void _clearSelection() {
|
||||
setState(_selectedIds.clear);
|
||||
}
|
||||
|
||||
/// Mirrors `FilesView`/`PhotosView`'s identical scroll-hint - see their
|
||||
/// doc comment: nudges the selection actions row right and back, once,
|
||||
/// the first time a selection starts. No-ops if there's nothing to
|
||||
/// scroll (row already fits).
|
||||
Future<void> _playScrollHint(ScrollController scrollController) async {
|
||||
await Future.delayed(const Duration(milliseconds: 500));
|
||||
if (!mounted || !scrollController.hasClients) return;
|
||||
final maxExtent = scrollController.position.maxScrollExtent;
|
||||
if (maxExtent <= 0) return;
|
||||
final double peak = maxExtent < 36 ? maxExtent : 36;
|
||||
final controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 900),
|
||||
);
|
||||
_scrollHintControllers.add(controller);
|
||||
final hint = TweenSequence<double>([
|
||||
TweenSequenceItem(
|
||||
tween: Tween(
|
||||
begin: 0.0,
|
||||
end: peak,
|
||||
).chain(CurveTween(curve: Curves.easeInOutSine)),
|
||||
weight: 50,
|
||||
),
|
||||
TweenSequenceItem(
|
||||
tween: Tween(
|
||||
begin: peak,
|
||||
end: 0.0,
|
||||
).chain(CurveTween(curve: Curves.easeInOutSine)),
|
||||
weight: 50,
|
||||
),
|
||||
]).animate(controller);
|
||||
void onTick() {
|
||||
if (scrollController.hasClients) {
|
||||
scrollController.jumpTo(hint.value);
|
||||
}
|
||||
}
|
||||
|
||||
hint.addListener(onTick);
|
||||
await controller.forward();
|
||||
hint.removeListener(onTick);
|
||||
_scrollHintControllers.remove(controller);
|
||||
controller.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
for (final controller in _scrollHintControllers) {
|
||||
controller.dispose();
|
||||
}
|
||||
_selectionActionsScrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
/// A favorited folder switches to the Files tab, navigated there; a
|
||||
/// favorited file just opens directly from here, like Files/Photos do -
|
||||
/// no need to reposition Files first since dismissing the viewer lands
|
||||
@@ -149,46 +96,57 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
/// The bulk actions shown in the sticky selection toolbar for the
|
||||
/// currently-selected items - same set Files/Photos offer.
|
||||
List<SelectionAction> _buildSelectionActions(List<NextcloudItem> selected) {
|
||||
return [
|
||||
final actions = [
|
||||
SelectionAction(
|
||||
icon: Icons.favorite_border_rounded,
|
||||
kind: SelectionActionKind.favorite,
|
||||
icon: LucideIcons.starOff,
|
||||
label: 'Remove from favorites',
|
||||
onTap: () => _unfavoriteSelected(selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.share_rounded,
|
||||
kind: SelectionActionKind.share,
|
||||
icon: LucideIcons.share2,
|
||||
label: 'Share',
|
||||
onTap: () => selected.length == 1
|
||||
? ShareSheet.show(context, selected.single)
|
||||
: _shareSelected(context, selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.download_rounded,
|
||||
kind: SelectionActionKind.download,
|
||||
icon: LucideIcons.download,
|
||||
label: 'Download',
|
||||
onTap: () => _downloadSelected(context, selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.delete_outline_rounded,
|
||||
kind: SelectionActionKind.delete,
|
||||
icon: LucideIcons.trash2,
|
||||
label: 'Delete',
|
||||
onTap: () => _confirmDeleteSelected(context, selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.copy_rounded,
|
||||
kind: SelectionActionKind.copy,
|
||||
icon: LucideIcons.copy,
|
||||
label: 'Copy',
|
||||
onTap: () => _moveOrCopySelected(selected, copy: true),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.drive_file_move_rounded,
|
||||
kind: SelectionActionKind.move,
|
||||
icon: LucideIcons.folderInput,
|
||||
label: 'Move',
|
||||
onTap: () => _moveOrCopySelected(selected, copy: false),
|
||||
),
|
||||
if (selected.length == 1)
|
||||
SelectionAction(
|
||||
icon: Icons.info_outline_rounded,
|
||||
kind: SelectionActionKind.details,
|
||||
icon: LucideIcons.info,
|
||||
label: 'Details',
|
||||
onTap: () => DetailsSheet.show(context, selected.single),
|
||||
),
|
||||
];
|
||||
return orderSelectionActions(
|
||||
actions,
|
||||
context.read<SettingsController>().selectionActionOrder,
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _unfavoriteSelected(List<NextcloudItem> items) async {
|
||||
@@ -348,98 +306,87 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildControlsRow(FilesController files) {
|
||||
return SizedBox(
|
||||
height: 44,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
/// A single item's actions (the same list the multi-select bar offers,
|
||||
/// just for one item) - mirrors `FilesView._showItemActionsSheet`.
|
||||
void _showItemActionsSheet(BuildContext context, NextcloudItem item) {
|
||||
final actions = _buildSelectionActions([item]);
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
files.filesSortAscending
|
||||
? Icons.arrow_upward_rounded
|
||||
: Icons.arrow_downward_rounded,
|
||||
size: 20,
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
tooltip: files.filesSortAscending ? 'Ascending' : 'Descending',
|
||||
onPressed: files.toggleFilesSortOrder,
|
||||
),
|
||||
SizedBox(
|
||||
width: 130,
|
||||
child: SortMenuButton(
|
||||
field: files.filesSortField,
|
||||
onChanged: files.setFilesSortField,
|
||||
),
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: files.showHiddenFiles
|
||||
? Icons.visibility_rounded
|
||||
: Icons.visibility_off_rounded,
|
||||
isSelected: files.showHiddenFiles,
|
||||
onTap: () => files.toggleShowHiddenFiles(),
|
||||
tooltip: 'Show hidden files',
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
SegmentedIconGroup(
|
||||
NooGroupedList(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Symbols.circles_rounded,
|
||||
isSelected: files.storageScope == StorageScope.cloud,
|
||||
onTap: () => files.setStorageScope(StorageScope.cloud),
|
||||
tooltip: 'Cloud storage',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Symbols.hard_drive_rounded,
|
||||
isSelected: files.storageScope == StorageScope.external,
|
||||
onTap: () => files.setStorageScope(StorageScope.external),
|
||||
tooltip: 'External storage',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Icons.view_list_rounded,
|
||||
isSelected: !files.isGridView,
|
||||
onTap: () => files.setGridView(false),
|
||||
tooltip: 'List view',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.grid_view_rounded,
|
||||
isSelected: files.isGridView,
|
||||
onTap: () => files.setGridView(true),
|
||||
tooltip: 'Grid view',
|
||||
for (final action in actions)
|
||||
NooSettingsRow(
|
||||
icon: action.icon,
|
||||
label: Text(action.label),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
action.onTap();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildListTile(
|
||||
/// A real image/video thumbnail for [item]'s file tile/card, sized so
|
||||
/// `NooFileTile`'s `FittedBox` (which needs a concretely-sized child to
|
||||
/// scale) always has one to work with; null when there's nothing to show
|
||||
/// (falls back to the kind's soft-color tile).
|
||||
Widget? _thumbnailFor(
|
||||
BuildContext context,
|
||||
NextcloudItem item, {
|
||||
required double extent,
|
||||
}) {
|
||||
final isMedia =
|
||||
(item.type == NextcloudItemType.image ||
|
||||
item.type == NextcloudItemType.video) &&
|
||||
item.previewUrl != null;
|
||||
if (!isMedia) return null;
|
||||
final session = context.watch<SessionController>();
|
||||
return Image.network(
|
||||
item.previewUrl!,
|
||||
width: extent,
|
||||
height: extent,
|
||||
headers: session.service?.authHeaders,
|
||||
fit: BoxFit.cover,
|
||||
filterQuality: FilterQuality.low,
|
||||
gaplessPlayback: true,
|
||||
errorBuilder: (ctx, err, stack) => const SizedBox.shrink(),
|
||||
);
|
||||
}
|
||||
|
||||
String _metaFor(NextcloudItem item) {
|
||||
return item.isFolder
|
||||
? 'Folder'
|
||||
: '${formatBytes(item.size)} · ${DateFormat.yMMMd().format(item.lastModified)}';
|
||||
}
|
||||
|
||||
Widget _buildRow(
|
||||
BuildContext context,
|
||||
NextcloudItem item,
|
||||
List<NextcloudItem> siblings,
|
||||
) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final session = context.watch<SessionController>();
|
||||
final isSelected = _selectedIds.contains(item.id);
|
||||
final kind = NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
);
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Material(
|
||||
color: isSelected
|
||||
? colorScheme.primaryContainer.withValues(alpha: 0.5)
|
||||
: colorScheme.surfaceContainerLow,
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
child: NooFileRow(
|
||||
kind: kind,
|
||||
name: item.name,
|
||||
meta: _metaFor(item),
|
||||
favorite: item.isFavorite,
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
selected: isSelected,
|
||||
thumbnail: _thumbnailFor(context, item, extent: NooSizes.rowMobile),
|
||||
onTap: () {
|
||||
if (_isSelecting) {
|
||||
_toggleSelection(item);
|
||||
@@ -448,52 +395,47 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
}
|
||||
},
|
||||
onLongPress: () => _toggleSelection(item),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
SelectableThumbnail(
|
||||
isSelected: isSelected,
|
||||
size: 44,
|
||||
checkmarkSize: 24,
|
||||
child: ItemThumbnail(
|
||||
item: item,
|
||||
service: session.service,
|
||||
size: 44,
|
||||
borderRadius: 12,
|
||||
iconSize: 22,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
item.isFolder
|
||||
? 'Folder'
|
||||
: '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
onMore: () => _showItemActionsSheet(context, item),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTableRow(
|
||||
BuildContext context,
|
||||
NextcloudItem item,
|
||||
List<NextcloudItem> siblings,
|
||||
) {
|
||||
final isSelected = _selectedIds.contains(item.id);
|
||||
final kind = NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
);
|
||||
|
||||
return NooFileTableRow(
|
||||
kind: kind,
|
||||
name: item.name,
|
||||
col2: item.isFolder ? null : DateFormat.yMMMd().format(item.lastModified),
|
||||
col3: item.isFolder ? null : formatBytes(item.size),
|
||||
favorite: item.isFavorite,
|
||||
selected: isSelected,
|
||||
thumbnail: _thumbnailFor(
|
||||
context,
|
||||
item,
|
||||
extent: NooFileTileSize.desktop.extent,
|
||||
),
|
||||
onTap: () {
|
||||
if (_isSelecting) {
|
||||
_toggleSelection(item);
|
||||
} else {
|
||||
_openFavorite(context, item, siblings);
|
||||
}
|
||||
},
|
||||
// Desktop has no long-press gesture; right-click is this row's
|
||||
// equivalent entry point into multi-select.
|
||||
onSecondaryTap: () => _toggleSelection(item),
|
||||
onMore: () => _showItemActionsSheet(context, item),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -501,21 +443,27 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
BuildContext context,
|
||||
NextcloudItem item,
|
||||
List<NextcloudItem> siblings,
|
||||
bool isDesktop,
|
||||
) {
|
||||
final theme = Theme.of(context);
|
||||
final session = context.watch<SessionController>();
|
||||
final colors = context.nooColors;
|
||||
final isSelected = _selectedIds.contains(item.id);
|
||||
final isMedia =
|
||||
(item.type == NextcloudItemType.image ||
|
||||
item.type == NextcloudItemType.video) &&
|
||||
item.previewUrl != null;
|
||||
final iconColor = getIconColor(context, item.type);
|
||||
final kind = NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
);
|
||||
final thumbnailHeight = isDesktop ? 118.0 : 104.0;
|
||||
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
child: Material(
|
||||
color: theme.colorScheme.surfaceContainerLow,
|
||||
child: InkWell(
|
||||
return NooGridCard(
|
||||
name: item.name,
|
||||
meta: item.isFolder ? 'Folder' : formatBytes(item.size),
|
||||
placeholderColor: kind.background(colors),
|
||||
icon: kind.icon,
|
||||
iconColor: kind.foreground(colors),
|
||||
thumbnailHeight: thumbnailHeight,
|
||||
thumbnail: _thumbnailFor(context, item, extent: thumbnailHeight),
|
||||
selected: isSelected,
|
||||
verticalOverflowIcon: !NooLayout.iosStyle(context),
|
||||
onTap: () {
|
||||
if (_isSelecting) {
|
||||
_toggleSelection(item);
|
||||
@@ -524,66 +472,14 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
}
|
||||
},
|
||||
onLongPress: () => _toggleSelection(item),
|
||||
child: SelectableThumbnail(
|
||||
isSelected: isSelected,
|
||||
checkmarkSize: 32,
|
||||
child: isMedia
|
||||
? Image.network(
|
||||
item.previewUrl!,
|
||||
headers: session.service?.authHeaders,
|
||||
fit: BoxFit.cover,
|
||||
filterQuality: FilterQuality.low,
|
||||
gaplessPlayback: true,
|
||||
errorBuilder: (ctx, err, stack) => Container(
|
||||
color: theme.colorScheme.secondaryContainer,
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
color: theme.colorScheme.onSecondaryContainer,
|
||||
size: 32,
|
||||
),
|
||||
),
|
||||
)
|
||||
: Padding(
|
||||
padding: const EdgeInsets.all(14),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
color: iconColor,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
item.name,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
onMore: () => _showItemActionsSheet(context, item),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
final favoritesController = context.watch<FavoritesController>();
|
||||
final filesController = context.watch<FilesController>();
|
||||
|
||||
@@ -600,18 +496,26 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
.where((i) => _selectedIds.contains(i.id))
|
||||
.toList();
|
||||
|
||||
final controlsRow = Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.sm,
|
||||
NooSpace.sm,
|
||||
NooSpace.sm,
|
||||
NooSpace.xs,
|
||||
),
|
||||
child: FilesControlsRow(folderPath: filesController.currentFolderPath),
|
||||
);
|
||||
|
||||
final contentSlivers = <Widget>[
|
||||
SliverPersistentHeader(
|
||||
pinned: !_isSelecting,
|
||||
delegate: StickyHeaderDelegate(
|
||||
height: 60,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
|
||||
child: _buildControlsRow(filesController),
|
||||
height: _isSelecting ? 56 : 64,
|
||||
child: _isSelecting
|
||||
? _buildSelectionBar(context, selectedItems)
|
||||
: controlsRow,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 8)),
|
||||
if (favoritesController.isLoading && favorites.isEmpty)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
@@ -626,32 +530,25 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
Icon(LucideIcons.circleAlert, size: 56, color: colors.danger),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Could not load favorites',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.error,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
style: NooText.cardTitle.copyWith(color: colors.danger),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
favoritesController.errorMessage!,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
FilledButton.icon(
|
||||
onPressed: favoritesController.fetchAll,
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
label: const Text('Retry'),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.secondary,
|
||||
size: NooButtonSize.field,
|
||||
icon: LucideIcons.refreshCw,
|
||||
onTap: favoritesController.fetchAll,
|
||||
child: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -665,17 +562,11 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.favorite_border_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.outlineVariant,
|
||||
),
|
||||
Icon(LucideIcons.star, size: 56, color: colors.fg3),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'No favorites yet',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
style: NooText.cardTitle.copyWith(color: colors.fg2),
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -683,30 +574,71 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
)
|
||||
else if (filesController.isGridView)
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: NooLayout.gutter(context),
|
||||
vertical: NooSpace.xs,
|
||||
),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
childAspectRatio: 1.1,
|
||||
crossAxisSpacing: 12,
|
||||
mainAxisSpacing: 12,
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: isDesktop ? 5 : 2,
|
||||
crossAxisSpacing: isDesktop ? 16 : 10,
|
||||
mainAxisSpacing: isDesktop ? 16 : 10,
|
||||
childAspectRatio: isDesktop ? 0.92 : 0.85,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
return _buildGridCard(context, favorites[index], siblings);
|
||||
return _buildGridCard(
|
||||
context,
|
||||
favorites[index],
|
||||
siblings,
|
||||
isDesktop,
|
||||
);
|
||||
}, childCount: favorites.length),
|
||||
),
|
||||
)
|
||||
else if (isDesktop)
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.symmetric(horizontal: NooLayout.gutter(context)),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
if (index == 0) {
|
||||
return NooFileTableHeader(
|
||||
col2Label: 'Modified',
|
||||
col3Label: 'Size',
|
||||
sortColumn: switch (filesController.filesSortField) {
|
||||
FileSortField.name => 0,
|
||||
FileSortField.dateModified => 1,
|
||||
FileSortField.size => 2,
|
||||
FileSortField.dateCreated => null,
|
||||
},
|
||||
sortAscending: filesController.filesSortAscending,
|
||||
onSort: (column) {
|
||||
final field = [
|
||||
FileSortField.name,
|
||||
FileSortField.dateModified,
|
||||
FileSortField.size,
|
||||
][column];
|
||||
if (field == filesController.filesSortField) {
|
||||
filesController.toggleFilesSortOrder();
|
||||
} else {
|
||||
filesController.setFilesSortField(field);
|
||||
}
|
||||
},
|
||||
);
|
||||
}
|
||||
return _buildTableRow(context, favorites[index - 1], siblings);
|
||||
}, childCount: favorites.length + 1),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: EdgeInsets.symmetric(horizontal: NooLayout.gutter(context)),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
return _buildListTile(context, favorites[index], siblings);
|
||||
return _buildRow(context, favorites[index], siblings);
|
||||
}, childCount: favorites.length),
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
||||
const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
|
||||
];
|
||||
|
||||
return PopScope(
|
||||
@@ -714,74 +646,36 @@ class _FavoritesViewState extends State<FavoritesView>
|
||||
onPopInvokedWithResult: (didPop, result) {
|
||||
if (!didPop && _isSelecting) _clearSelection();
|
||||
},
|
||||
child: SyncedHeaderScaffold(
|
||||
scrollController: widget.scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
child: ColoredBox(
|
||||
color: colors.bg,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: favoritesController.fetchAll,
|
||||
selectionBar: _isSelecting
|
||||
? _buildSelectionBar(context, theme, selectedItems)
|
||||
: null,
|
||||
contentSlivers: contentSlivers,
|
||||
child: CustomScrollView(
|
||||
controller: widget.scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-item list.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: contentSlivers,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Replaces the top bar entirely while selecting (see
|
||||
/// `SyncedHeaderScaffold.selectionBar`) - mirrors Files/Photos' identical
|
||||
/// selection bar.
|
||||
/// Replaces the controls row's own sticky slot while selecting - mirrors
|
||||
/// Files/Photos' identical selection bar.
|
||||
Widget _buildSelectionBar(
|
||||
BuildContext context,
|
||||
ThemeData theme,
|
||||
List<NextcloudItem> selectedItems,
|
||||
) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width * 0.5,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close_rounded, size: 20),
|
||||
tooltip: 'Cancel selection',
|
||||
onPressed: _clearSelection,
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'${selectedItems.length} selected',
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
controller: _selectionActionsScrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (final action in _buildSelectionActions(selectedItems))
|
||||
IconButton(
|
||||
icon: Icon(action.icon, size: 20),
|
||||
tooltip: action.label,
|
||||
onPressed: action.onTap,
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
return NooSelectionBar(
|
||||
count: selectedItems.length,
|
||||
actions: _buildSelectionActions(selectedItems),
|
||||
onClose: _clearSelection,
|
||||
isDesktop: NooLayout.isDesktop(context),
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+216
-870
File diff suppressed because it is too large
Load Diff
+668
-580
File diff suppressed because it is too large
Load Diff
@@ -1,6 +1,9 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
|
||||
/// Shown in place of the main shell whenever [SessionController.needsUnlock] is
|
||||
/// true - a fresh app launch with login lock configured, or returning to the
|
||||
@@ -48,10 +51,10 @@ class _LockScreenViewState extends State<LockScreenView>
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: colors.bg,
|
||||
body: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(32),
|
||||
@@ -63,10 +66,7 @@ class _LockScreenViewState extends State<LockScreenView>
|
||||
// silhouette on transparent, meant to be recolored rather
|
||||
// than shown as-is.
|
||||
ColorFiltered(
|
||||
colorFilter: ColorFilter.mode(
|
||||
colorScheme.onSurface,
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
colorFilter: ColorFilter.mode(colors.fg1, BlendMode.srcIn),
|
||||
child: Image.asset(
|
||||
'assets/icon/app_icon_monochrome.png',
|
||||
width: 80,
|
||||
@@ -77,35 +77,22 @@ class _LockScreenViewState extends State<LockScreenView>
|
||||
Text(
|
||||
'Noo is locked',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.headlineSmall?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
style: NooText.title.copyWith(color: colors.fg1),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
'Unlock with your PIN or biometrics to continue',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
),
|
||||
const SizedBox(height: 32),
|
||||
SizedBox(
|
||||
height: 54,
|
||||
child: FilledButton.icon(
|
||||
onPressed: _authenticating ? null : _attemptUnlock,
|
||||
icon: _authenticating
|
||||
? SizedBox(
|
||||
width: 20,
|
||||
height: 20,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2.5,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
)
|
||||
: const Icon(Icons.lock_open_rounded),
|
||||
label: Text(_authenticating ? 'Unlocking…' : 'Unlock'),
|
||||
),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
size: NooButtonSize.cta,
|
||||
icon: LucideIcons.lockOpen,
|
||||
disabled: _authenticating,
|
||||
onTap: _attemptUnlock,
|
||||
child: Text(_authenticating ? 'Unlocking…' : 'Unlock'),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
+132
-202
@@ -1,13 +1,22 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/saved_account.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/core/noo_avatar.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
import '../widgets/noo/nav/noo_top_bar.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/noo/overlays/noo_text_field.dart';
|
||||
import '../widgets/settings/settings_dialogs.dart';
|
||||
import '../widgets/shell/shell_common.dart';
|
||||
import 'login_webview_view.dart';
|
||||
|
||||
class LoginView extends StatefulWidget {
|
||||
/// True when this is pushed from Settings ("Add account") on top of an
|
||||
/// already-logged-in session, rather than shown as the app's root screen
|
||||
/// with no account yet. Adds an AppBar/back affordance and auto-pops once
|
||||
/// with no account yet. Adds a top bar/back affordance and auto-pops once
|
||||
/// the new account becomes active.
|
||||
final bool isAddingAccount;
|
||||
|
||||
@@ -18,9 +27,9 @@ class LoginView extends StatefulWidget {
|
||||
}
|
||||
|
||||
class _LoginViewState extends State<LoginView> {
|
||||
final _formKey = GlobalKey<FormState>();
|
||||
final _urlController = TextEditingController();
|
||||
String? _originalActiveAccountId;
|
||||
String? _localError;
|
||||
bool _popped = false;
|
||||
bool _webViewPushed = false;
|
||||
|
||||
@@ -39,12 +48,14 @@ class _LoginViewState extends State<LoginView> {
|
||||
}
|
||||
|
||||
void _handleContinue() {
|
||||
if (!_formKey.currentState!.validate()) return;
|
||||
final url = _urlController.text.trim();
|
||||
if (url.isEmpty) {
|
||||
setState(() => _localError = 'Please enter your Nextcloud server address');
|
||||
return;
|
||||
}
|
||||
setState(() => _localError = null);
|
||||
FocusScope.of(context).unfocus();
|
||||
context.read<SessionController>().startLoginFlow(
|
||||
_urlController.text.trim(),
|
||||
addAccount: widget.isAddingAccount,
|
||||
);
|
||||
context.read<SessionController>().startLoginFlow(url, addAccount: widget.isAddingAccount);
|
||||
}
|
||||
|
||||
/// Resumes a saved account with one tap (see [SessionController.switchAccount]).
|
||||
@@ -68,47 +79,25 @@ class _LoginViewState extends State<LoginView> {
|
||||
);
|
||||
}
|
||||
|
||||
/// Mirrors AccountView's `_AccountsCard._confirmRemove` - same
|
||||
/// destructive-action gate, just reached from the login screen instead of
|
||||
/// Settings.
|
||||
/// Mirrors Settings' own account removal - same confirm/remove gate, just
|
||||
/// reached from the login screen instead of the saved-accounts list.
|
||||
Future<void> _confirmRemoveAccount(SavedAccount account) async {
|
||||
final host = Uri.tryParse(account.serverUrl)?.host ?? account.serverUrl;
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (dialogContext) {
|
||||
return AlertDialog(
|
||||
title: const Text('Remove Account'),
|
||||
content: Text(
|
||||
'Remove ${account.username} ($host)? You can add it again later.',
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: Theme.of(dialogContext).colorScheme.error,
|
||||
),
|
||||
onPressed: () => Navigator.pop(dialogContext, true),
|
||||
child: const Text('Remove'),
|
||||
),
|
||||
],
|
||||
await confirmRemoveAccount(
|
||||
context,
|
||||
context.read<SessionController>(),
|
||||
accountId: account.id,
|
||||
username: account.username,
|
||||
host: serverHost(account.serverUrl),
|
||||
isActive: false,
|
||||
);
|
||||
},
|
||||
);
|
||||
if (confirmed != true || !mounted) return;
|
||||
await context.read<SessionController>().removeAccount(account.id);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final session = context.watch<SessionController>();
|
||||
|
||||
final isAwaitingBrowser =
|
||||
session.loginFlowStatus == LoginFlowStatus.awaitingBrowser;
|
||||
final isAwaitingBrowser = session.loginFlowStatus == LoginFlowStatus.awaitingBrowser;
|
||||
final isInitiating = session.loginFlowStatus == LoginFlowStatus.initiating;
|
||||
|
||||
// A new/refreshed account has just become active - pop back to
|
||||
@@ -128,9 +117,7 @@ class _LoginViewState extends State<LoginView> {
|
||||
// SessionController.startLoginFlow's doc comment for why. Push it the
|
||||
// moment there's a URL to show; _webViewPushed resets once that route
|
||||
// pops (cancelled or done) so a retry after cancelling pushes it again.
|
||||
if (!_webViewPushed &&
|
||||
isAwaitingBrowser &&
|
||||
session.pendingLoginUrl != null) {
|
||||
if (!_webViewPushed && isAwaitingBrowser && session.pendingLoginUrl != null) {
|
||||
_webViewPushed = true;
|
||||
final url = session.pendingLoginUrl!;
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) async {
|
||||
@@ -154,9 +141,17 @@ class _LoginViewState extends State<LoginView> {
|
||||
});
|
||||
}
|
||||
|
||||
final errorMessage =
|
||||
_localError ?? (session.loginFlowStatus == LoginFlowStatus.error ? session.errorMessage : null);
|
||||
|
||||
final body = Scaffold(
|
||||
backgroundColor: colors.bg,
|
||||
appBar: widget.isAddingAccount
|
||||
? AppBar(title: const Text('Add Account'))
|
||||
? NooTopBar(
|
||||
style: NooLayout.navStyle(context),
|
||||
title: 'Add account',
|
||||
leading: const NooTopBarBack(),
|
||||
)
|
||||
: null,
|
||||
body: SafeArea(
|
||||
child: Center(
|
||||
@@ -172,8 +167,7 @@ class _LoginViewState extends State<LoginView> {
|
||||
// deleting it, specifically so it can be resumed
|
||||
// from here with one tap - no need to repeat
|
||||
// Login Flow v2.
|
||||
if (!widget.isAddingAccount &&
|
||||
session.accounts.isNotEmpty) ...[
|
||||
if (!widget.isAddingAccount && session.accounts.isNotEmpty) ...[
|
||||
_SavedAccountsSection(
|
||||
accounts: session.accounts,
|
||||
onSelect: (account) => _continueAsAccount(account),
|
||||
@@ -182,33 +176,21 @@ class _LoginViewState extends State<LoginView> {
|
||||
const SizedBox(height: 28),
|
||||
Row(
|
||||
children: [
|
||||
const Expanded(child: Divider()),
|
||||
Expanded(child: Divider(color: colors.line)),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Text(
|
||||
'or',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
child: Text('or', style: NooText.meta.copyWith(color: colors.fg3)),
|
||||
),
|
||||
),
|
||||
),
|
||||
const Expanded(child: Divider()),
|
||||
Expanded(child: Divider(color: colors.line)),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
],
|
||||
_ServerForm(
|
||||
formKey: _formKey,
|
||||
urlController: _urlController,
|
||||
isLoading:
|
||||
isInitiating || session.isLoading || isAwaitingBrowser,
|
||||
errorMessage:
|
||||
session.loginFlowStatus == LoginFlowStatus.error
|
||||
? session.errorMessage
|
||||
: null,
|
||||
isLoading: isInitiating || session.isLoading || isAwaitingBrowser,
|
||||
errorMessage: errorMessage,
|
||||
onContinue: _handleContinue,
|
||||
theme: theme,
|
||||
colorScheme: colorScheme,
|
||||
),
|
||||
],
|
||||
),
|
||||
@@ -236,29 +218,23 @@ class _LoginViewState extends State<LoginView> {
|
||||
}
|
||||
|
||||
class _ServerForm extends StatelessWidget {
|
||||
final GlobalKey<FormState> formKey;
|
||||
final TextEditingController urlController;
|
||||
final bool isLoading;
|
||||
final String? errorMessage;
|
||||
final VoidCallback onContinue;
|
||||
final ThemeData theme;
|
||||
final ColorScheme colorScheme;
|
||||
|
||||
const _ServerForm({
|
||||
required this.formKey,
|
||||
required this.urlController,
|
||||
required this.isLoading,
|
||||
required this.errorMessage,
|
||||
required this.onContinue,
|
||||
required this.theme,
|
||||
required this.colorScheme,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Form(
|
||||
key: formKey,
|
||||
child: Column(
|
||||
final colors = context.nooColors;
|
||||
|
||||
return Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
@@ -269,33 +245,17 @@ class _ServerForm extends StatelessWidget {
|
||||
// shown as-is. Used everywhere the app shows its own icon
|
||||
// in-app, rather than the full-color launcher icon.
|
||||
child: ColorFiltered(
|
||||
colorFilter: ColorFilter.mode(
|
||||
Theme.of(context).colorScheme.onSurface,
|
||||
BlendMode.srcIn,
|
||||
),
|
||||
child: Image.asset(
|
||||
'assets/icon/app_icon_monochrome.png',
|
||||
width: 80,
|
||||
height: 80,
|
||||
),
|
||||
colorFilter: ColorFilter.mode(colors.fg1, BlendMode.srcIn),
|
||||
child: Image.asset('assets/icon/app_icon_monochrome.png', width: 80, height: 80),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
'Noo',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.headlineMedium?.copyWith(
|
||||
fontWeight: FontWeight.w800,
|
||||
letterSpacing: -0.5,
|
||||
),
|
||||
),
|
||||
Text('Noo', textAlign: TextAlign.center, style: NooText.largeTitle.copyWith(color: colors.fg1)),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'Connect to your self-hosted server',
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
),
|
||||
const SizedBox(height: 36),
|
||||
if (errorMessage != null)
|
||||
@@ -303,90 +263,49 @@ class _ServerForm extends StatelessWidget {
|
||||
margin: const EdgeInsets.only(bottom: 20),
|
||||
padding: const EdgeInsets.all(14),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.errorContainer,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
color: colors.dangerSoft,
|
||||
borderRadius: BorderRadius.circular(NooRadii.input),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline_rounded,
|
||||
color: colorScheme.onErrorContainer,
|
||||
size: 20,
|
||||
),
|
||||
Icon(LucideIcons.circleAlert, color: colors.danger, size: 20),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
errorMessage!,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onErrorContainer,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.danger,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
TextFormField(
|
||||
NooTextField(
|
||||
controller: urlController,
|
||||
placeholder: 'cloud.example.com',
|
||||
leadingIcon: LucideIcons.server,
|
||||
keyboardType: TextInputType.url,
|
||||
autofillHints: const [AutofillHints.url],
|
||||
decoration: InputDecoration(
|
||||
labelText: 'Server Address',
|
||||
hintText: 'cloud.example.com',
|
||||
prefixIcon: const Icon(Icons.dns_outlined),
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
),
|
||||
filled: true,
|
||||
fillColor: colorScheme.surfaceContainerLow,
|
||||
),
|
||||
validator: (val) {
|
||||
if (val == null || val.trim().isEmpty) {
|
||||
return 'Please enter your Nextcloud server address';
|
||||
}
|
||||
return null;
|
||||
},
|
||||
onFieldSubmitted: (_) => onContinue(),
|
||||
onSubmitted: (_) => onContinue(),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
SizedBox(
|
||||
height: 54,
|
||||
child: FilledButton(
|
||||
onPressed: isLoading ? null : onContinue,
|
||||
style: FilledButton.styleFrom(
|
||||
shape: RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.circular(27),
|
||||
),
|
||||
),
|
||||
child: isLoading
|
||||
? SizedBox(
|
||||
width: 24,
|
||||
height: 24,
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2.5,
|
||||
color: colorScheme.onPrimary,
|
||||
),
|
||||
)
|
||||
: const Text(
|
||||
'Continue',
|
||||
style: TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
size: NooButtonSize.cta,
|
||||
fullWidth: true,
|
||||
disabled: isLoading,
|
||||
onTap: onContinue,
|
||||
child: Text(isLoading ? 'Connecting…' : 'Continue'),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
Text(
|
||||
"You'll finish signing in on the page that opens. This app never sees your password.",
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
),
|
||||
style: NooText.meta.copyWith(color: colors.fg3, fontSize: 11),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -398,46 +317,37 @@ class _SavedAccountsSection extends StatelessWidget {
|
||||
final ValueChanged<SavedAccount> onSelect;
|
||||
final ValueChanged<SavedAccount> onRemove;
|
||||
|
||||
const _SavedAccountsSection({
|
||||
required this.accounts,
|
||||
required this.onSelect,
|
||||
required this.onRemove,
|
||||
});
|
||||
const _SavedAccountsSection({required this.accounts, required this.onSelect, required this.onRemove});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(left: 4, bottom: 8),
|
||||
child: Text(
|
||||
'Continue as',
|
||||
style: theme.textTheme.labelLarge?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w600,
|
||||
child: Text('Continue as', style: NooText.label.copyWith(color: colors.fg2)),
|
||||
),
|
||||
),
|
||||
),
|
||||
Card(
|
||||
margin: EdgeInsets.zero,
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(color: colors.line),
|
||||
child: Column(
|
||||
children: [
|
||||
for (final account in accounts) ...[
|
||||
for (var i = 0; i < accounts.length; i++) ...[
|
||||
if (i > 0) const SizedBox(height: 1),
|
||||
_SavedAccountRow(
|
||||
account: account,
|
||||
onTap: () => onSelect(account),
|
||||
onRemove: () => onRemove(account),
|
||||
account: accounts[i],
|
||||
onTap: () => onSelect(accounts[i]),
|
||||
onRemove: () => onRemove(accounts[i]),
|
||||
),
|
||||
if (account != accounts.last)
|
||||
const Divider(height: 1, indent: 16, endIndent: 16),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
@@ -448,40 +358,60 @@ class _SavedAccountRow extends StatelessWidget {
|
||||
final VoidCallback onTap;
|
||||
final VoidCallback onRemove;
|
||||
|
||||
const _SavedAccountRow({
|
||||
required this.account,
|
||||
required this.onTap,
|
||||
required this.onRemove,
|
||||
});
|
||||
const _SavedAccountRow({required this.account, required this.onTap, required this.onRemove});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
final host = Uri.tryParse(account.serverUrl)?.host ?? account.serverUrl;
|
||||
final initial = account.username.isNotEmpty
|
||||
? account.username[0].toUpperCase()
|
||||
: '?';
|
||||
final colors = context.nooColors;
|
||||
|
||||
return ListTile(
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: colorScheme.primary,
|
||||
child: Text(
|
||||
initial,
|
||||
style: TextStyle(
|
||||
color: colorScheme.onPrimary,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
title: Text(account.username),
|
||||
subtitle: Text(host),
|
||||
trailing: IconButton(
|
||||
icon: const Icon(Icons.close_rounded),
|
||||
tooltip: 'Remove account',
|
||||
visualDensity: VisualDensity.compact,
|
||||
onPressed: onRemove,
|
||||
),
|
||||
return Material(
|
||||
color: colors.surface,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: NooSpace.md, vertical: 10),
|
||||
child: Row(
|
||||
spacing: 12,
|
||||
children: [
|
||||
NooAvatar(initials: accountInitial(account.username), size: 36),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
spacing: 2,
|
||||
children: [
|
||||
Text(
|
||||
account.username,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.bodyL.copyWith(
|
||||
height: 1.1,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
serverHost(account.serverUrl),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
GestureDetector(
|
||||
onTap: onRemove,
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(color: colors.surface2, shape: BoxShape.circle),
|
||||
child: Icon(LucideIcons.x, size: 16, color: colors.fg2),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,11 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:webview_flutter/webview_flutter.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/nav/noo_top_bar.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
|
||||
/// Every Login Flow v2 page - first login or an additional account -
|
||||
/// rendered in Flutter's own WebView rather than a Chrome Custom Tab or
|
||||
@@ -63,6 +67,7 @@ class _LoginWebViewViewState extends State<LoginWebViewView> {
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final session = context.watch<SessionController>();
|
||||
final colors = context.nooColors;
|
||||
|
||||
// The login flow finished (success or error) or was cancelled
|
||||
// elsewhere - close this screen automatically rather than leaving it
|
||||
@@ -81,18 +86,24 @@ class _LoginWebViewViewState extends State<LoginWebViewView> {
|
||||
if (!didPop) _cancel();
|
||||
},
|
||||
child: Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text('Sign in'),
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.close_rounded),
|
||||
backgroundColor: colors.bg,
|
||||
appBar: NooTopBar(
|
||||
style: NooLayout.navStyle(context),
|
||||
title: 'Log in',
|
||||
leading: NooTopBarButton(
|
||||
icon: LucideIcons.x,
|
||||
tooltip: 'Cancel',
|
||||
onPressed: _cancel,
|
||||
onTap: _cancel,
|
||||
),
|
||||
),
|
||||
body: Stack(
|
||||
children: [
|
||||
WebViewWidget(controller: _controller),
|
||||
if (_pageLoading) const LinearProgressIndicator(),
|
||||
if (_pageLoading)
|
||||
LinearProgressIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface3,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
|
||||
@@ -1,21 +1,24 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/move_copy_result.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import '../providers/item_operations.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/breadcrumbs.dart';
|
||||
import '../widgets/item_icon.dart';
|
||||
import '../widgets/files_controls_row.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/move_copy_conflict_sheet.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/segmented_icon_toggle.dart';
|
||||
import '../widgets/sort_menu_button.dart';
|
||||
import '../widgets/sticky_header_delegate.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/media/noo_grid_card.dart';
|
||||
import '../widgets/noo/nav/noo_top_bar.dart';
|
||||
import '../widgets/noo/nav/noo_toolbar.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/tabs/tab_state_slivers.dart';
|
||||
|
||||
/// Destination-folder browser for moving/copying [items] (a multi-select
|
||||
/// batch from Files or Photos). Visually mirrors `ShareUploadView`'s
|
||||
@@ -85,9 +88,7 @@ class _MoveCopyDestinationPickerState extends State<MoveCopyDestinationPicker> {
|
||||
|
||||
Future<void> _fetch(String path) async {
|
||||
setState(() => _isLoading = true);
|
||||
final raw = await context.read<FilesController>().fetchFolderListing(
|
||||
path,
|
||||
);
|
||||
final raw = await context.read<FilesController>().fetchFolderListing(path);
|
||||
if (!mounted) return;
|
||||
setState(() {
|
||||
_rawItems = raw;
|
||||
@@ -175,230 +176,87 @@ class _MoveCopyDestinationPickerState extends State<MoveCopyDestinationPicker> {
|
||||
).pop(MoveCopyResult(succeeded: succeeded, failed: failed));
|
||||
}
|
||||
|
||||
Widget _buildControlsRow(FilesController files) {
|
||||
return SizedBox(
|
||||
height: 44,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
// Only folders are valid Move/Copy destinations, so the listing - unlike
|
||||
// Files' own - never shows plain files at all.
|
||||
Widget _buildRow(NextcloudItem item, int index, int count) {
|
||||
final colors = context.nooColors;
|
||||
final row = NooFileRow(
|
||||
kind: NooFileKind.folder,
|
||||
name: item.name,
|
||||
meta: 'Folder',
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
onTap: () => _navigateToFolder(item.path),
|
||||
);
|
||||
|
||||
final isFirst = index == 0;
|
||||
final isLast = index == count - 1;
|
||||
return Column(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
files.filesSortAscending
|
||||
? Icons.arrow_upward_rounded
|
||||
: Icons.arrow_downward_rounded,
|
||||
size: 20,
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: isFirst ? const Radius.circular(NooRadii.card) : Radius.zero,
|
||||
bottom: isLast ? const Radius.circular(NooRadii.card) : Radius.zero,
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
tooltip: files.filesSortAscending ? 'Ascending' : 'Descending',
|
||||
onPressed: files.toggleFilesSortOrder,
|
||||
),
|
||||
SizedBox(
|
||||
width: 130,
|
||||
child: SortMenuButton(
|
||||
field: files.filesSortField,
|
||||
onChanged: files.setFilesSortField,
|
||||
),
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: files.showHiddenFiles
|
||||
? Icons.visibility_rounded
|
||||
: Icons.visibility_off_rounded,
|
||||
isSelected: files.showHiddenFiles,
|
||||
onTap: () => files.toggleShowHiddenFiles(),
|
||||
tooltip: 'Show hidden files',
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Symbols.circles_rounded,
|
||||
isSelected: files.storageScope == StorageScope.cloud,
|
||||
onTap: () => files.setStorageScope(StorageScope.cloud),
|
||||
tooltip: 'Cloud storage',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Symbols.hard_drive_rounded,
|
||||
isSelected: files.storageScope == StorageScope.external,
|
||||
onTap: () => files.setStorageScope(StorageScope.external),
|
||||
tooltip: 'External storage',
|
||||
child: row,
|
||||
),
|
||||
if (!isLast) Container(height: 1, color: colors.line),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Icons.view_list_rounded,
|
||||
isSelected: !files.isGridView,
|
||||
onTap: () => files.setGridView(false),
|
||||
tooltip: 'List view',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.grid_view_rounded,
|
||||
isSelected: files.isGridView,
|
||||
onTap: () => files.setGridView(true),
|
||||
tooltip: 'Grid view',
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Only folders are valid Move/Copy destinations - files still show (so
|
||||
// the listing matches what the Files tab itself would show for this
|
||||
// folder) but are visually dimmed and inert, same treatment as
|
||||
// ShareUploadView's own destination browser.
|
||||
Widget _buildListTile(NextcloudItem item) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final session = context.watch<SessionController>();
|
||||
final isFolder = item.isFolder;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Opacity(
|
||||
opacity: isFolder ? 1 : 0.5,
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
child: InkWell(
|
||||
onTap: isFolder ? () => _navigateToFolder(item.path) : null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 12,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
ItemThumbnail(
|
||||
item: item,
|
||||
service: session.service,
|
||||
size: 44,
|
||||
borderRadius: 12,
|
||||
iconSize: 22,
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
isFolder
|
||||
? 'Folder'
|
||||
: '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (isFolder) const Icon(Icons.chevron_right_rounded),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
Widget _buildDesktopRow(NextcloudItem item) {
|
||||
return NooFileTableRow(
|
||||
kind: NooFileKind.folder,
|
||||
name: item.name,
|
||||
onTap: () => _navigateToFolder(item.path),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildGridCard(NextcloudItem item) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final isFolder = item.isFolder;
|
||||
final iconColor = getIconColor(context, item.type);
|
||||
|
||||
return Opacity(
|
||||
opacity: isFolder ? 1 : 0.5,
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: isFolder ? () => _navigateToFolder(item.path) : null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(14),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
color: iconColor,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
isFolder ? 'Folder' : formatBytes(item.size),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
final colors = context.nooColors;
|
||||
return NooGridCard(
|
||||
name: item.name,
|
||||
meta: 'Folder',
|
||||
placeholderColor: colors.accentSoft,
|
||||
icon: LucideIcons.folder,
|
||||
iconColor: colors.accentText,
|
||||
thumbnailHeight: NooLayout.isDesktop(context) ? 118 : 104,
|
||||
onTap: () => _navigateToFolder(item.path),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final desktop = NooLayout.isDesktop(context);
|
||||
final files = context.watch<FilesController>();
|
||||
final ops = context.read<ItemOperations>();
|
||||
final hasBreadcrumbs = _pathStack.length > 1;
|
||||
final currentLabel = _currentPath == '/'
|
||||
? 'Home'
|
||||
: _currentPath.split('/').where((s) => s.isNotEmpty).last;
|
||||
final items = files.applyFilesDisplayPrefs(_rawItems);
|
||||
final folders = files
|
||||
.applyFilesDisplayPrefs(_rawItems)
|
||||
.where((item) => item.isFolder)
|
||||
.toList();
|
||||
final invalidDestination = _destinationIsInvalid();
|
||||
final gutter = NooLayout.gutter(context);
|
||||
final verb = widget.copy ? 'Copying' : 'Moving';
|
||||
final itemCount = widget.items.length;
|
||||
|
||||
final controlsColumn = Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
|
||||
final slivers = <Widget>[
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
gutter,
|
||||
NooSpace.md,
|
||||
gutter,
|
||||
NooSpace.sm,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildControlsRow(files),
|
||||
SizedBox(
|
||||
height: 44,
|
||||
child: FilesControlsRow(folderPath: _currentPath),
|
||||
),
|
||||
if (hasBreadcrumbs) ...[
|
||||
const SizedBox(height: 10),
|
||||
SizedBox(
|
||||
@@ -411,116 +269,156 @@ class _MoveCopyDestinationPickerState extends State<MoveCopyDestinationPicker> {
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
final contentSlivers = <Widget>[
|
||||
SliverPersistentHeader(
|
||||
pinned: true,
|
||||
delegate: StickyHeaderDelegate(
|
||||
height: hasBreadcrumbs ? 114 : 72,
|
||||
child: controlsColumn,
|
||||
),
|
||||
),
|
||||
if (_isLoading)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
)
|
||||
else if (items.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Text(
|
||||
'Folder is empty',
|
||||
style: TextStyle(color: colorScheme.onSurfaceVariant),
|
||||
),
|
||||
),
|
||||
tabLoadingSliver
|
||||
else if (folders.isEmpty)
|
||||
tabEmptySliver(
|
||||
context,
|
||||
icon: LucideIcons.folder,
|
||||
message: 'No folders here',
|
||||
)
|
||||
else if (files.isGridView)
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
childAspectRatio: 1.1,
|
||||
crossAxisSpacing: 12,
|
||||
mainAxisSpacing: 12,
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: desktop ? 5 : 2,
|
||||
childAspectRatio: desktop ? 1.05 : 0.92,
|
||||
crossAxisSpacing: desktop ? 16 : 10,
|
||||
mainAxisSpacing: desktop ? 16 : 10,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) => _buildGridCard(folders[index]),
|
||||
childCount: folders.length,
|
||||
),
|
||||
),
|
||||
)
|
||||
else if (desktop)
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) => _buildDesktopRow(folders[index]),
|
||||
childCount: folders.length,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
return _buildGridCard(items[index]);
|
||||
}, childCount: items.length),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
return _buildListTile(items[index]);
|
||||
}, childCount: items.length),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) =>
|
||||
_buildRow(folders[index], index, folders.length),
|
||||
childCount: folders.length,
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 24)),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: NooSpace.xl)),
|
||||
];
|
||||
|
||||
final title = widget.copy ? 'Copy to...' : 'Move to...';
|
||||
|
||||
return PopScope(
|
||||
canPop: _pathStack.length <= 1,
|
||||
onPopInvokedWithResult: (didPop, result) {
|
||||
if (!didPop) _navigateUp();
|
||||
},
|
||||
child: Scaffold(
|
||||
body: SyncedHeaderScaffold(
|
||||
scrollController: _scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
contentSlivers: contentSlivers,
|
||||
backgroundColor: colors.bg,
|
||||
appBar: desktop
|
||||
? NooToolbar(
|
||||
title: title,
|
||||
actions: [
|
||||
const MoreTabsButton(),
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.secondary,
|
||||
size: NooButtonSize.toolbar,
|
||||
onTap: () => Navigator.maybePop(context),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
bottomNavigationBar: Material(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
elevation: 8,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
||||
],
|
||||
)
|
||||
: NooTopBar(
|
||||
style: NooLayout.navStyle(context),
|
||||
title: title,
|
||||
leading: const NooTopBarBack(label: 'Cancel'),
|
||||
// Stacks a hidden tab's own screen on top rather than
|
||||
// jumping the shell there, so it doesn't abandon this
|
||||
// picker - safe to keep, unlike ShareUploadView's chrome.
|
||||
actions: const [MoreTabsButton()],
|
||||
),
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: () => _fetch(_currentPath),
|
||||
child: CustomScrollView(
|
||||
controller: _scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-
|
||||
// to-refresh can't be triggered on an empty or single-folder
|
||||
// listing.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: slivers,
|
||||
),
|
||||
),
|
||||
),
|
||||
bottomNavigationBar: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
border: Border(top: BorderSide(color: colors.line)),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.lg,
|
||||
NooSpace.md,
|
||||
NooSpace.lg,
|
||||
NooSpace.md,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (invalidDestination) ...[
|
||||
Text(
|
||||
"Can't ${widget.copy ? 'copy' : 'move'} a folder into "
|
||||
"itself or one of its own subfolders",
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.error,
|
||||
invalidDestination
|
||||
? "Can't ${widget.copy ? 'copy' : 'move'} a folder into "
|
||||
"itself or one of its own subfolders"
|
||||
: '$verb $itemCount item${itemCount == 1 ? '' : 's'}',
|
||||
textAlign: TextAlign.center,
|
||||
style: NooText.meta.copyWith(
|
||||
color: invalidDestination ? colors.danger : colors.fg3,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton.icon(
|
||||
onPressed: invalidDestination || _isSubmitting
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
size: NooButtonSize.cta,
|
||||
fullWidth: true,
|
||||
disabled: invalidDestination || _isSubmitting,
|
||||
icon: _isSubmitting
|
||||
? null
|
||||
: (widget.copy
|
||||
? LucideIcons.copy
|
||||
: LucideIcons.folderInput),
|
||||
onTap: invalidDestination || _isSubmitting
|
||||
? null
|
||||
: () => _confirm(ops),
|
||||
icon: _isSubmitting
|
||||
child: _isSubmitting
|
||||
? const SizedBox(
|
||||
width: 18,
|
||||
height: 18,
|
||||
child: CircularProgressIndicator(strokeWidth: 2),
|
||||
child: CircularProgressIndicator(
|
||||
strokeWidth: 2,
|
||||
color: Colors.white,
|
||||
),
|
||||
)
|
||||
: Icon(
|
||||
widget.copy
|
||||
? Icons.copy_rounded
|
||||
: Icons.drive_file_move_rounded,
|
||||
),
|
||||
label: Text(
|
||||
'${widget.copy ? 'Copy' : 'Move'} ${widget.items.length} '
|
||||
'item(s) to $currentLabel',
|
||||
),
|
||||
),
|
||||
: Text(widget.copy ? 'Copy here' : 'Move here'),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
+412
-332
@@ -1,6 +1,7 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter/services.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:share_plus/share_plus.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
@@ -10,19 +11,45 @@ import '../providers/item_operations.dart';
|
||||
import '../providers/photos_controller.dart';
|
||||
import '../providers/pick_controller.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../providers/settings_controller.dart';
|
||||
import '../services/download_service.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/details/details_sheet.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/segmented_icon_toggle.dart';
|
||||
import '../widgets/selectable_thumbnail.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
import '../widgets/noo/core/noo_chip.dart';
|
||||
import '../widgets/noo/core/noo_segmented_control.dart';
|
||||
import '../widgets/noo/core/noo_toggle.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/lists/noo_grouped_list.dart';
|
||||
import '../widgets/noo/lists/noo_selection_bar.dart';
|
||||
import '../widgets/noo/lists/noo_settings_row.dart';
|
||||
import '../widgets/noo/media/noo_photo_group.dart';
|
||||
import '../widgets/noo/media/noo_photo_tile.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/noo/overlays/noo_sheet.dart';
|
||||
import '../widgets/share_sheet.dart';
|
||||
import '../widgets/sort_menu_button.dart';
|
||||
import '../widgets/sort_menu_button.dart' show sortFieldLabel;
|
||||
import '../widgets/sticky_header_delegate.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import 'file_viewer_screen.dart';
|
||||
import 'move_copy_destination_picker.dart';
|
||||
|
||||
/// The type chips PhotosController actually has data for (DESIGN_SYSTEM.md
|
||||
/// section 4 also lists "Camera", but there's no camera-upload/EXIF source
|
||||
/// to distinguish that from any other photo - see the view's doc comment).
|
||||
enum _PhotoTypeFilter { all, image, video }
|
||||
|
||||
/// A contiguous run of [PhotosController.items] that shares a calendar
|
||||
/// month, in whatever order the controller already sorted them - see
|
||||
/// [_PhotosViewState._groupByMonth].
|
||||
class _MonthGroup {
|
||||
final DateTime month;
|
||||
final List<NextcloudItem> items;
|
||||
_MonthGroup(this.month, this.items);
|
||||
}
|
||||
|
||||
/// The Photos tab: every image/video across the account, grouped by month
|
||||
/// (DESIGN_SYSTEM.md section 4). Renders content only - the shell
|
||||
/// (`MainShellView`) owns the top bar, bottom bar, drawer and FAB.
|
||||
class PhotosView extends StatefulWidget {
|
||||
final ScrollController scrollController;
|
||||
|
||||
@@ -32,85 +59,29 @@ class PhotosView extends StatefulWidget {
|
||||
State<PhotosView> createState() => _PhotosViewState();
|
||||
}
|
||||
|
||||
class _PhotosViewState extends State<PhotosView>
|
||||
with SingleTickerProviderStateMixin {
|
||||
class _PhotosViewState extends State<PhotosView> {
|
||||
bool _requested = false;
|
||||
final Set<String> _selectedIds = {};
|
||||
final ScrollController _selectionActionsScrollController = ScrollController();
|
||||
final List<AnimationController> _scrollHintControllers = [];
|
||||
|
||||
// Session-local only (not one of PhotosController's persisted display
|
||||
// prefs) - a pure narrowing of the already-fetched/filtered/sorted list,
|
||||
// same way the type chips narrow Files' listing without touching the
|
||||
// controller.
|
||||
_PhotoTypeFilter _typeFilter = _PhotoTypeFilter.all;
|
||||
|
||||
bool get _isSelecting => _selectedIds.isNotEmpty;
|
||||
|
||||
void _toggleSelection(NextcloudItem item) {
|
||||
HapticFeedback.selectionClick();
|
||||
final enteringSelection = _selectedIds.isEmpty;
|
||||
setState(() {
|
||||
if (!_selectedIds.remove(item.id)) _selectedIds.add(item.id);
|
||||
});
|
||||
if (enteringSelection && _isSelecting) {
|
||||
WidgetsBinding.instance.addPostFrameCallback(
|
||||
(_) => _playScrollHint(_selectionActionsScrollController),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
void _clearSelection() {
|
||||
setState(_selectedIds.clear);
|
||||
}
|
||||
|
||||
/// A one-shot hint that the selection actions row actually scrolls -
|
||||
/// mirrors `FilesView`'s identical controls-row hint (see its doc
|
||||
/// comment): nudges it right and back, once, the first time a selection
|
||||
/// starts. No-ops if there's nothing to scroll (row already fits).
|
||||
Future<void> _playScrollHint(ScrollController scrollController) async {
|
||||
await Future.delayed(const Duration(milliseconds: 500));
|
||||
if (!mounted || !scrollController.hasClients) return;
|
||||
final maxExtent = scrollController.position.maxScrollExtent;
|
||||
if (maxExtent <= 0) return;
|
||||
final double peak = maxExtent < 36 ? maxExtent : 36;
|
||||
final controller = AnimationController(
|
||||
vsync: this,
|
||||
duration: const Duration(milliseconds: 900),
|
||||
);
|
||||
_scrollHintControllers.add(controller);
|
||||
final hint = TweenSequence<double>([
|
||||
TweenSequenceItem(
|
||||
tween: Tween(
|
||||
begin: 0.0,
|
||||
end: peak,
|
||||
).chain(CurveTween(curve: Curves.easeInOutSine)),
|
||||
weight: 50,
|
||||
),
|
||||
TweenSequenceItem(
|
||||
tween: Tween(
|
||||
begin: peak,
|
||||
end: 0.0,
|
||||
).chain(CurveTween(curve: Curves.easeInOutSine)),
|
||||
weight: 50,
|
||||
),
|
||||
]).animate(controller);
|
||||
void onTick() {
|
||||
if (scrollController.hasClients) {
|
||||
scrollController.jumpTo(hint.value);
|
||||
}
|
||||
}
|
||||
|
||||
hint.addListener(onTick);
|
||||
await controller.forward();
|
||||
hint.removeListener(onTick);
|
||||
_scrollHintControllers.remove(controller);
|
||||
controller.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
for (final controller in _scrollHintControllers) {
|
||||
controller.dispose();
|
||||
}
|
||||
_selectionActionsScrollController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
/// Mirrors `FilesView._handlePickTap` - Photos has no folders, so this is
|
||||
/// just the matching/toggle/immediate-confirm branch.
|
||||
void _handlePickTap(
|
||||
@@ -143,62 +114,103 @@ class _PhotosViewState extends State<PhotosView>
|
||||
if (pick.isPicking) {
|
||||
return [
|
||||
SelectionAction(
|
||||
icon: Icons.check_rounded,
|
||||
kind: SelectionActionKind.favorite,
|
||||
icon: LucideIcons.check,
|
||||
label: 'Use ${selected.length} item(s)',
|
||||
onTap: () => pick.confirmPick(selected),
|
||||
),
|
||||
];
|
||||
}
|
||||
return [
|
||||
// Matches the star/star-off convention Files' own selection toolbar
|
||||
// uses for favorite/unfavorite (see `files_view.dart`) rather than a
|
||||
// filled heart.
|
||||
final allFavorited = selected.every((i) => i.isFavorite);
|
||||
final actions = [
|
||||
SelectionAction(
|
||||
icon: selected.every((i) => i.isFavorite)
|
||||
? Icons.favorite_rounded
|
||||
: Icons.favorite_border_rounded,
|
||||
label: selected.every((i) => i.isFavorite)
|
||||
? 'Remove from favorites'
|
||||
: 'Favorite',
|
||||
kind: SelectionActionKind.favorite,
|
||||
icon: allFavorited ? LucideIcons.starOff : LucideIcons.star,
|
||||
label: allFavorited ? 'Remove from favorites' : 'Favorite',
|
||||
onTap: () => _favoriteSelected(selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.share_rounded,
|
||||
kind: SelectionActionKind.share,
|
||||
icon: LucideIcons.share2,
|
||||
label: 'Share',
|
||||
onTap: () => selected.length == 1
|
||||
? ShareSheet.show(context, selected.single)
|
||||
: _shareSelected(context, selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.download_rounded,
|
||||
kind: SelectionActionKind.download,
|
||||
icon: LucideIcons.download,
|
||||
label: 'Download',
|
||||
onTap: () => _downloadSelected(context, selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.delete_outline_rounded,
|
||||
kind: SelectionActionKind.delete,
|
||||
icon: LucideIcons.trash2,
|
||||
label: 'Delete',
|
||||
onTap: () => _confirmDeleteSelected(context, selected),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.copy_rounded,
|
||||
kind: SelectionActionKind.copy,
|
||||
icon: LucideIcons.copy,
|
||||
label: 'Copy',
|
||||
onTap: () => _moveOrCopySelected(selected, copy: true),
|
||||
),
|
||||
SelectionAction(
|
||||
icon: Icons.drive_file_move_rounded,
|
||||
kind: SelectionActionKind.move,
|
||||
icon: LucideIcons.folderInput,
|
||||
label: 'Move',
|
||||
onTap: () => _moveOrCopySelected(selected, copy: false),
|
||||
),
|
||||
if (selected.length == 1)
|
||||
SelectionAction(
|
||||
icon: Icons.info_outline_rounded,
|
||||
kind: SelectionActionKind.details,
|
||||
icon: LucideIcons.info,
|
||||
label: 'Details',
|
||||
onTap: () => DetailsSheet.show(context, selected.single),
|
||||
),
|
||||
];
|
||||
return orderSelectionActions(
|
||||
actions,
|
||||
context.read<SettingsController>().selectionActionOrder,
|
||||
);
|
||||
}
|
||||
|
||||
/// Splits an already-filtered/sorted list into contiguous month runs
|
||||
/// (`dateCreated`) in list order - deliberately not a global re-sort by
|
||||
/// date, so a "Name"/"Size" sort chip still governs the order shown
|
||||
/// (see the group header row it feeds).
|
||||
List<_MonthGroup> _groupByMonth(List<NextcloudItem> items) {
|
||||
final groups = <_MonthGroup>[];
|
||||
for (final item in items) {
|
||||
final d = item.dateCreated;
|
||||
final month = DateTime(d.year, d.month);
|
||||
if (groups.isNotEmpty && groups.last.month == month) {
|
||||
groups.last.items.add(item);
|
||||
} else {
|
||||
groups.add(_MonthGroup(month, [item]));
|
||||
}
|
||||
}
|
||||
return groups;
|
||||
}
|
||||
|
||||
bool _matchesTypeFilter(NextcloudItem item) {
|
||||
switch (_typeFilter) {
|
||||
case _PhotoTypeFilter.all:
|
||||
return true;
|
||||
case _PhotoTypeFilter.image:
|
||||
return item.type == NextcloudItemType.image;
|
||||
case _PhotoTypeFilter.video:
|
||||
return item.type == NextcloudItemType.video;
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
final photosController = context.watch<PhotosController>();
|
||||
final filesController = context.watch<FilesController>();
|
||||
final pick = context.watch<PickController>();
|
||||
@@ -210,89 +222,44 @@ class _PhotosViewState extends State<PhotosView>
|
||||
);
|
||||
}
|
||||
|
||||
final photos = photosController.items;
|
||||
final selectedItems = photos
|
||||
final allPhotos = photosController.items;
|
||||
final visiblePhotos = allPhotos.where(_matchesTypeFilter).toList();
|
||||
// Selection tracks the full (favorites/hidden-filtered) list, not just
|
||||
// the type-filtered view, so switching the type chip mid-selection
|
||||
// never silently drops a selected item from the bulk actions.
|
||||
final selectedItems = allPhotos
|
||||
.where((i) => _selectedIds.contains(i.id))
|
||||
.toList();
|
||||
final groups = _groupByMonth(visiblePhotos);
|
||||
|
||||
final controlsRow = Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 0),
|
||||
child: SizedBox(
|
||||
height: 44,
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
photosController.sortAscending
|
||||
? Icons.arrow_upward_rounded
|
||||
: Icons.arrow_downward_rounded,
|
||||
size: 20,
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
tooltip: photosController.sortAscending
|
||||
? 'Ascending'
|
||||
: 'Descending',
|
||||
onPressed: photosController.toggleSortOrder,
|
||||
),
|
||||
Expanded(
|
||||
child: SortMenuButton(
|
||||
field: photosController.sortField,
|
||||
onChanged: photosController.setSortField,
|
||||
),
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: photosController.showFavoritesOnly
|
||||
? Icons.favorite_rounded
|
||||
: Icons.favorite_border_rounded,
|
||||
isSelected: photosController.showFavoritesOnly,
|
||||
onTap: photosController.toggleFavoritesFilter,
|
||||
tooltip: 'Favorites only',
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
ToggleIconButton(
|
||||
icon: photosController.showHidden
|
||||
? Icons.visibility_rounded
|
||||
: Icons.visibility_off_rounded,
|
||||
isSelected: photosController.showHidden,
|
||||
onTap: () => photosController.toggleShowHidden(),
|
||||
tooltip: 'Show hidden files',
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Symbols.circles_rounded,
|
||||
isSelected: filesController.storageScope == StorageScope.cloud,
|
||||
onTap: () =>
|
||||
filesController.setStorageScope(StorageScope.cloud),
|
||||
tooltip: 'Cloud storage',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Symbols.hard_drive_rounded,
|
||||
isSelected:
|
||||
filesController.storageScope == StorageScope.external,
|
||||
onTap: () =>
|
||||
filesController.setStorageScope(StorageScope.external),
|
||||
tooltip: 'External storage',
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
final controlsRow = _buildControlsRow(
|
||||
context,
|
||||
photosController,
|
||||
filesController,
|
||||
);
|
||||
|
||||
final List<Widget> contentSlivers = [
|
||||
// Sticky while browsing; once selecting, the selection bar takes over
|
||||
// the very top of the screen instead (see `selectionBar` below), so
|
||||
// this is free to scroll away rather than staying pinned under it.
|
||||
// the same slot instead.
|
||||
SliverPersistentHeader(
|
||||
pinned: !_isSelecting,
|
||||
delegate: StickyHeaderDelegate(height: 60, child: controlsRow),
|
||||
delegate: StickyHeaderDelegate(
|
||||
height: _isSelecting ? 56 : 64,
|
||||
child: _isSelecting
|
||||
? _buildSelectionBar(context, pick, selectedItems)
|
||||
: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.sm,
|
||||
NooSpace.sm,
|
||||
NooSpace.sm,
|
||||
NooSpace.xs,
|
||||
),
|
||||
child: controlsRow,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 8)),
|
||||
|
||||
if (photosController.isLoading && photos.isEmpty)
|
||||
if (photosController.isLoading && allPhotos.isEmpty)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
@@ -306,85 +273,82 @@ class _PhotosViewState extends State<PhotosView>
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
Icon(LucideIcons.circleAlert, size: 56, color: colors.danger),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Could not load photos',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.error,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
style: NooText.cardTitle.copyWith(color: colors.danger),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
photosController.errorMessage!,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
FilledButton.icon(
|
||||
onPressed: photosController.fetchAllMedia,
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
label: const Text('Retry'),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.secondary,
|
||||
size: NooButtonSize.field,
|
||||
icon: LucideIcons.refreshCw,
|
||||
onTap: photosController.fetchAllMedia,
|
||||
child: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
)
|
||||
else if (photos.isEmpty)
|
||||
else if (visiblePhotos.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.photo_library_outlined,
|
||||
size: 64,
|
||||
color: colorScheme.outlineVariant,
|
||||
),
|
||||
Icon(LucideIcons.image, size: 56, color: colors.fg3),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'No photos found in Nextcloud library',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
allPhotos.isEmpty
|
||||
? 'No photos found in Nextcloud library'
|
||||
: 'No photos match this filter',
|
||||
style: NooText.cardTitle.copyWith(color: colors.fg2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 3,
|
||||
crossAxisSpacing: 8,
|
||||
mainAxisSpacing: 8,
|
||||
childAspectRatio: 1.0,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final photo = photos[index];
|
||||
return _buildPhotoTile(context, photo);
|
||||
}, childCount: photos.length),
|
||||
for (final group in groups) ...[
|
||||
SliverToBoxAdapter(
|
||||
child: NooPhotoGroupHeader(
|
||||
title: DateFormat('MMMM yyyy').format(group.month),
|
||||
count:
|
||||
'${group.items.length} ${group.items.length == 1 ? 'item' : 'items'}',
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
NooLayout.gutter(context),
|
||||
NooSpace.lg,
|
||||
NooLayout.gutter(context),
|
||||
NooSpace.sm,
|
||||
),
|
||||
),
|
||||
),
|
||||
NooPhotoGrid(
|
||||
itemCount: group.items.length,
|
||||
columns: isDesktop
|
||||
? NooPhotoGrid.desktopColumns
|
||||
: NooPhotoGrid.mobileColumns,
|
||||
gap: isDesktop ? NooPhotoGrid.desktopGap : NooPhotoGrid.mobileGap,
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: isDesktop ? NooLayout.gutter(context) : 0,
|
||||
),
|
||||
itemBuilder: (context, index) =>
|
||||
_buildPhotoTile(context, group.items[index], visiblePhotos),
|
||||
),
|
||||
],
|
||||
|
||||
// Fixed clearance so the last row isn't hidden behind the floating
|
||||
// nav bar, regardless of grid length.
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
||||
// For a short grid this stretches the white card's background down to
|
||||
// the screen edge (matching the empty state above); for a long grid
|
||||
// that already fills the viewport it contributes nothing extra.
|
||||
const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
|
||||
];
|
||||
|
||||
return PopScope(
|
||||
@@ -392,121 +356,272 @@ class _PhotosViewState extends State<PhotosView>
|
||||
onPopInvokedWithResult: (didPop, result) {
|
||||
if (!didPop && _isSelecting) _clearSelection();
|
||||
},
|
||||
child: SyncedHeaderScaffold(
|
||||
scrollController: widget.scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
child: ColoredBox(
|
||||
color: colors.bg,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: photosController.fetchAllMedia,
|
||||
selectionBar: _isSelecting
|
||||
? _buildSelectionBar(context, theme, pick, selectedItems)
|
||||
: null,
|
||||
contentSlivers: contentSlivers,
|
||||
child: CustomScrollView(
|
||||
controller: widget.scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-item list.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: contentSlivers,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Replaces the top bar entirely while selecting (see
|
||||
/// `SyncedHeaderScaffold.selectionBar`) - a close button, the "N
|
||||
/// selected" count, and the horizontally-scrollable bulk actions.
|
||||
/// Type chips (All/Photos/Videos - "Camera" from the spec has no data
|
||||
/// source, see the view's doc comment), a sort chip and a filter chip for
|
||||
/// favorites-only/hidden/external-storage, mirroring `FilesControlsRow`'s
|
||||
/// layout/pattern.
|
||||
Widget _buildControlsRow(
|
||||
BuildContext context,
|
||||
PhotosController photos,
|
||||
FilesController files,
|
||||
) {
|
||||
final filtersActive =
|
||||
_typeFilter != _PhotoTypeFilter.all ||
|
||||
photos.showFavoritesOnly ||
|
||||
photos.showHidden ||
|
||||
files.storageScope != StorageScope.cloud;
|
||||
|
||||
// A plain Row, not a horizontally-scrolling one - see
|
||||
// `FilesControlsRow`'s identical fix/doc comment: a `SingleChildScrollView`
|
||||
// gives its child unbounded width for no benefit here (two chips never
|
||||
// need to scroll), and it's actively harmful for a row with a trailing
|
||||
// `Spacer`/flex child.
|
||||
return SizedBox(
|
||||
height: 44,
|
||||
child: Row(
|
||||
children: [
|
||||
NooChip(
|
||||
icon: photos.sortAscending
|
||||
? LucideIcons.arrowUp
|
||||
: LucideIcons.arrowDown,
|
||||
onTap: () => _showSortSheet(context, photos),
|
||||
child: Text(sortFieldLabel(photos.sortField)),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
NooChip(
|
||||
icon: LucideIcons.filter,
|
||||
trailing: NooChipTrailing.menu,
|
||||
selected: filtersActive,
|
||||
onTap: () => _showFilterSheet(context, photos, files),
|
||||
child: const Text('Filters'),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showSortSheet(BuildContext context, PhotosController photos) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
// `showNooSheet`'s `children` are built once, up front - a bare
|
||||
// checkmark here would freeze at whatever it was when the sheet
|
||||
// opened, since tapping a row calls `photos.set...`/notifies the
|
||||
// controller, not this already-built widget tree. `ListenableBuilder`
|
||||
// re-runs its `builder` on every notification instead, so the
|
||||
// selection updates live.
|
||||
ListenableBuilder(
|
||||
listenable: photos,
|
||||
builder: (context, _) => Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
NooSegmentedControl<bool>(
|
||||
fill: true,
|
||||
onSurface: true,
|
||||
value: photos.sortAscending,
|
||||
onChanged: (asc) {
|
||||
if (asc != photos.sortAscending) photos.toggleSortOrder();
|
||||
},
|
||||
options: const [
|
||||
NooSegmentOption(
|
||||
value: true,
|
||||
icon: LucideIcons.arrowUp,
|
||||
label: 'Ascending',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: false,
|
||||
icon: LucideIcons.arrowDown,
|
||||
label: 'Descending',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 22),
|
||||
NooGroupedList(
|
||||
children: [
|
||||
for (final field in FileSortField.values)
|
||||
NooSettingsRow(
|
||||
label: Text(sortFieldLabel(field)),
|
||||
trailing: field == photos.sortField
|
||||
? Icon(
|
||||
LucideIcons.check,
|
||||
size: 18,
|
||||
color: context.nooColors.accentText,
|
||||
)
|
||||
: null,
|
||||
onTap: () {
|
||||
photos.setSortField(field);
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _showFilterSheet(
|
||||
BuildContext context,
|
||||
PhotosController photos,
|
||||
FilesController files,
|
||||
) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
// `_typeFilter` lives on this State, not a ChangeNotifier, so
|
||||
// `Listenable.merge([photos, files])` alone doesn't rebuild this
|
||||
// sheet when it changes - it used to only visibly move once the
|
||||
// sheet was closed and reopened. `StatefulBuilder` gives it a
|
||||
// rebuild trigger of its own; see `_showSortSheet`'s comment for
|
||||
// why the two controllers still need `ListenableBuilder`.
|
||||
StatefulBuilder(
|
||||
builder: (context, setSheetState) => ListenableBuilder(
|
||||
listenable: Listenable.merge([photos, files]),
|
||||
builder: (context, _) => Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Same "icon always, label only when selected" pill as
|
||||
// Files' own type filter - not a fully-labelled track, so
|
||||
// the two screens' filter sheets look and behave the same.
|
||||
NooSegmentedControl<_PhotoTypeFilter>(
|
||||
fill: true,
|
||||
onSurface: true,
|
||||
labelOnlySelected: true,
|
||||
value: _typeFilter,
|
||||
onChanged: (filter) => setState(() {
|
||||
_typeFilter = filter;
|
||||
setSheetState(() {});
|
||||
}),
|
||||
options: const [
|
||||
NooSegmentOption(
|
||||
value: _PhotoTypeFilter.all,
|
||||
icon: LucideIcons.layoutGrid,
|
||||
label: 'All',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: _PhotoTypeFilter.image,
|
||||
icon: LucideIcons.image,
|
||||
label: 'Photos',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: _PhotoTypeFilter.video,
|
||||
icon: LucideIcons.film,
|
||||
label: 'Videos',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 22),
|
||||
NooGroupedList(
|
||||
children: [
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.heart,
|
||||
label: const Text('Favorites only'),
|
||||
trailing: NooToggle(
|
||||
checked: photos.showFavoritesOnly,
|
||||
onChanged: (_) => photos.toggleFavoritesFilter(),
|
||||
),
|
||||
),
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.eye,
|
||||
label: const Text('Show hidden files'),
|
||||
trailing: NooToggle(
|
||||
checked: photos.showHidden,
|
||||
onChanged: (_) => photos.toggleShowHidden(),
|
||||
),
|
||||
),
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.hardDrive,
|
||||
label: const Text('External storage'),
|
||||
trailing: NooToggle(
|
||||
checked: files.storageScope == StorageScope.external,
|
||||
onChanged: (external) => files.setStorageScope(
|
||||
external ? StorageScope.external : StorageScope.cloud,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Replaces the controls row's own sticky slot while selecting - a close
|
||||
/// button, the "N selected" count, and the bulk actions. Mirrors
|
||||
/// `FilesView`'s identical selection bar.
|
||||
Widget _buildSelectionBar(
|
||||
BuildContext context,
|
||||
ThemeData theme,
|
||||
PickController pick,
|
||||
List<NextcloudItem> selectedItems,
|
||||
) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
children: [
|
||||
SizedBox(
|
||||
width: MediaQuery.of(context).size.width * 0.5,
|
||||
child: Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close_rounded, size: 20),
|
||||
tooltip: 'Cancel selection',
|
||||
onPressed: _clearSelection,
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
'${selectedItems.length} selected',
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: SingleChildScrollView(
|
||||
controller: _selectionActionsScrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
// Left-aligned (not anchored to the trailing edge) so the
|
||||
// first action's left edge sits at a fixed spot - lining up
|
||||
// with the controls row's own first icon directly below it -
|
||||
// regardless of how many actions there are.
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (final action in _buildSelectionActions(
|
||||
pick,
|
||||
selectedItems,
|
||||
))
|
||||
IconButton(
|
||||
icon: Icon(action.icon, size: 20),
|
||||
tooltip: action.label,
|
||||
onPressed: action.onTap,
|
||||
visualDensity: VisualDensity.compact,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
return NooSelectionBar(
|
||||
count: selectedItems.length,
|
||||
actions: _buildSelectionActions(pick, selectedItems),
|
||||
onClose: _clearSelection,
|
||||
isDesktop: NooLayout.isDesktop(context),
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPhotoTile(BuildContext context, NextcloudItem photo) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
Widget _buildPhotoTile(
|
||||
BuildContext context,
|
||||
NextcloudItem photo,
|
||||
List<NextcloudItem> siblings,
|
||||
) {
|
||||
final pick = context.watch<PickController>();
|
||||
final session = context.watch<SessionController>();
|
||||
final isSelected = _selectedIds.contains(photo.id);
|
||||
final isVideo = photo.type == NextcloudItemType.video;
|
||||
|
||||
// No border radius on the tile itself — the outer ClipRRect below is
|
||||
// the only place that rounds it, so a swipe doesn't reveal a stray
|
||||
// floating rounded corner mid-drag (see the same fix in files_view).
|
||||
final tile = GestureDetector(
|
||||
return NooPhotoTile(
|
||||
selected: isSelected,
|
||||
selectionMode: _isSelecting,
|
||||
// No real duration source (no video-metadata extraction anywhere in
|
||||
// the app) - an empty string still marks it as a video and shows the
|
||||
// icon-only badge (DESIGN_SYSTEM.md: "else icon-only").
|
||||
videoDuration: isVideo ? '' : null,
|
||||
placeholderColor: NooPhotoTile.paletteColor(photo.id.hashCode),
|
||||
onTap: () {
|
||||
if (pick.isPicking) {
|
||||
_handlePickTap(context, pick, photo);
|
||||
} else if (_isSelecting) {
|
||||
_toggleSelection(photo);
|
||||
} else {
|
||||
_openLightbox(context, photo);
|
||||
_openLightbox(context, photo, siblings);
|
||||
}
|
||||
},
|
||||
onLongPress: pick.isPicking && !pick.pickRequest!.allowMultiple
|
||||
? null
|
||||
: () => _toggleSelection(photo),
|
||||
child: ColoredBox(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
child: SelectableThumbnail(
|
||||
isSelected: isSelected,
|
||||
checkmarkSize: 32,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
photo.previewUrl != null
|
||||
child: photo.previewUrl != null
|
||||
? LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
// Decode at the tile's actual rendered size rather
|
||||
// than the full 500x500 preview the server returns —
|
||||
// cheaper to decode/cache while scrolling a grid.
|
||||
// Decode at the tile's actual rendered size rather than the
|
||||
// full 500x500 preview the server returns - cheaper to
|
||||
// decode/cache while scrolling a grid.
|
||||
final cachePixels =
|
||||
(constraints.maxWidth *
|
||||
MediaQuery.of(context).devicePixelRatio)
|
||||
@@ -525,63 +640,28 @@ class _PhotosViewState extends State<PhotosView>
|
||||
},
|
||||
)
|
||||
: _buildFallbackTile(context, photo),
|
||||
if (photo.type == NextcloudItemType.video)
|
||||
Positioned(
|
||||
bottom: 8,
|
||||
right: 8,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(4),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.black.withValues(alpha: 0.6),
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: const Icon(
|
||||
Icons.play_arrow_rounded,
|
||||
color: Colors.white,
|
||||
size: 16,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (photo.isFavorite)
|
||||
const Positioned(
|
||||
top: 8,
|
||||
right: 8,
|
||||
child: Icon(
|
||||
Icons.favorite_rounded,
|
||||
color: Colors.red,
|
||||
size: 18,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return ClipRRect(borderRadius: BorderRadius.circular(16), child: tile);
|
||||
}
|
||||
|
||||
Widget _buildFallbackTile(BuildContext context, NextcloudItem photo) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
return Container(
|
||||
color: colorScheme.secondaryContainer,
|
||||
final colors = context.nooColors;
|
||||
final kind = NooFileKind.from(name: photo.name, mimeType: photo.mimeType);
|
||||
return ColoredBox(
|
||||
color: kind.background(colors),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
photo.type == NextcloudItemType.video
|
||||
? Icons.movie_rounded
|
||||
: Icons.image_rounded,
|
||||
color: colorScheme.onSecondaryContainer,
|
||||
size: 32,
|
||||
),
|
||||
child: Icon(kind.icon, color: kind.foreground(colors), size: 32),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _openLightbox(BuildContext context, NextcloudItem photo) {
|
||||
final photos = context.read<PhotosController>().items;
|
||||
void _openLightbox(
|
||||
BuildContext context,
|
||||
NextcloudItem photo,
|
||||
List<NextcloudItem> siblings,
|
||||
) {
|
||||
Navigator.push(
|
||||
context,
|
||||
FileViewerScreen.route(item: photo, siblings: photos),
|
||||
FileViewerScreen.route(item: photo, siblings: siblings),
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
+167
-184
@@ -1,54 +1,29 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../providers/recent_controller.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/details/details_sheet.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/lists/noo_grouped_list.dart';
|
||||
import '../widgets/noo/lists/noo_settings_row.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/noo/overlays/noo_sheet.dart';
|
||||
import '../widgets/share_sheet.dart';
|
||||
import '../widgets/tabs/tab_day_groups.dart';
|
||||
import '../widgets/tabs/tab_location.dart';
|
||||
import '../widgets/tabs/tab_state_slivers.dart';
|
||||
import 'file_viewer_screen.dart';
|
||||
|
||||
IconData _recentItemIcon(NextcloudItemType type) {
|
||||
switch (type) {
|
||||
case NextcloudItemType.folder:
|
||||
return Icons.folder_rounded;
|
||||
case NextcloudItemType.image:
|
||||
return Icons.image_rounded;
|
||||
case NextcloudItemType.video:
|
||||
return Icons.movie_rounded;
|
||||
case NextcloudItemType.audio:
|
||||
return Icons.audiotrack_rounded;
|
||||
case NextcloudItemType.document:
|
||||
return Icons.description_rounded;
|
||||
case NextcloudItemType.archive:
|
||||
return Icons.folder_zip_rounded;
|
||||
case NextcloudItemType.file:
|
||||
return Icons.insert_drive_file_rounded;
|
||||
}
|
||||
}
|
||||
|
||||
Color _recentItemIconColor(BuildContext context, NextcloudItemType type) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
switch (type) {
|
||||
case NextcloudItemType.folder:
|
||||
return colorScheme.primary;
|
||||
case NextcloudItemType.image:
|
||||
return Colors.amber.shade700;
|
||||
case NextcloudItemType.video:
|
||||
return Colors.deepOrange.shade600;
|
||||
case NextcloudItemType.audio:
|
||||
return Colors.purple.shade600;
|
||||
case NextcloudItemType.document:
|
||||
return Colors.blue.shade700;
|
||||
case NextcloudItemType.archive:
|
||||
return Colors.teal.shade700;
|
||||
case NextcloudItemType.file:
|
||||
return colorScheme.outline;
|
||||
}
|
||||
}
|
||||
|
||||
/// Recently modified files across the whole account (not folders), newest
|
||||
/// first — see [RecentController.fetchAll].
|
||||
/// first - see [RecentController.fetchAll]. Grouped into Today/Yesterday/
|
||||
/// This week/Earlier per `DESIGN_SYSTEM.md` §4; meta is "Modified {time} ·
|
||||
/// {location}" since the server only ever reports a modification, not a
|
||||
/// distinct action per entry.
|
||||
class RecentView extends StatefulWidget {
|
||||
final ScrollController scrollController;
|
||||
|
||||
@@ -63,8 +38,7 @@ class _RecentViewState extends State<RecentView> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final recent = context.watch<RecentController>();
|
||||
|
||||
if (!_requested) {
|
||||
@@ -73,174 +47,172 @@ class _RecentViewState extends State<RecentView> {
|
||||
}
|
||||
|
||||
final items = recent.items;
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
final groups = groupByRecentBucket<NextcloudItem>(
|
||||
items,
|
||||
(item) => item.lastModified,
|
||||
);
|
||||
|
||||
final List<Widget> contentSlivers = [
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
|
||||
if (recent.isLoading && items.isEmpty)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
)
|
||||
tabLoadingSliver
|
||||
else if (recent.errorMessage != null)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Could not load recent files',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.error,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
recent.errorMessage!,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
FilledButton.icon(
|
||||
onPressed: recent.fetchAll,
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
tabErrorSliver(
|
||||
context,
|
||||
title: 'Could not load recent files',
|
||||
message: recent.errorMessage!,
|
||||
onRetry: recent.fetchAll,
|
||||
)
|
||||
else if (items.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.history_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.outlineVariant,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'No recent files',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
tabEmptySliver(
|
||||
context,
|
||||
icon: LucideIcons.clock,
|
||||
message: 'No recent files',
|
||||
)
|
||||
else if (isDesktop)
|
||||
_buildDesktopTable(context, groups)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final item = items[index];
|
||||
return _buildTile(context, item);
|
||||
}, childCount: items.length),
|
||||
),
|
||||
),
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
||||
const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
|
||||
_buildMobileGroups(context, groups),
|
||||
...tabBottomInsetSlivers,
|
||||
];
|
||||
|
||||
return SyncedHeaderScaffold(
|
||||
scrollController: widget.scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
return ColoredBox(
|
||||
color: colors.bg,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: recent.fetchAll,
|
||||
contentSlivers: contentSlivers,
|
||||
child: CustomScrollView(
|
||||
controller: widget.scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-item list.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: contentSlivers,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTile(BuildContext context, NextcloudItem item) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final iconColor = _recentItemIconColor(context, item.type);
|
||||
final folderPath = item.path.substring(
|
||||
0,
|
||||
item.path.length - item.name.length,
|
||||
);
|
||||
|
||||
Widget _buildMobileGroups(
|
||||
BuildContext context,
|
||||
List<TabDayGroup<NextcloudItem>> groups,
|
||||
) {
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final group = groups[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: InkWell(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
onTap: () => _openFile(context, item),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
padding: EdgeInsets.only(
|
||||
bottom: index == groups.length - 1 ? 0 : 18,
|
||||
),
|
||||
child: NooGroupedList(
|
||||
label: group.label,
|
||||
children: [
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
for (final item in group.items) _buildRow(context, item),
|
||||
],
|
||||
),
|
||||
child: Icon(
|
||||
_recentItemIcon(item.type),
|
||||
color: iconColor,
|
||||
size: 22,
|
||||
);
|
||||
}, childCount: groups.length),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDesktopTable(
|
||||
BuildContext context,
|
||||
List<TabDayGroup<NextcloudItem>> groups,
|
||||
) {
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.xl,
|
||||
vertical: NooSpace.xs,
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final group = groups[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 18),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
folderPath.isEmpty ? '/' : folderPath,
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
DateFormat.yMMMd().add_jm().format(item.lastModified),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.primary,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
TabGroupLabel(group.label),
|
||||
const NooFileTableHeader(
|
||||
col2Label: 'Modified',
|
||||
col3Label: 'Location',
|
||||
),
|
||||
for (final item in group.items) _buildDesktopRow(context, item),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}, childCount: groups.length),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildRow(BuildContext context, NextcloudItem item) {
|
||||
return NooFileRow(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
name: item.name,
|
||||
meta: 'Modified ${_metaTime(item.lastModified)} · ${_location(item)}',
|
||||
favorite: item.isFavorite,
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
onTap: () => _openFile(context, item),
|
||||
onMore: () => _showItemSheet(context, item),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDesktopRow(BuildContext context, NextcloudItem item) {
|
||||
return NooFileTableRow(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
name: item.name,
|
||||
col2: _metaTime(item.lastModified),
|
||||
col3: _location(item),
|
||||
favorite: item.isFavorite,
|
||||
onTap: () => _openFile(context, item),
|
||||
onMore: () => _showItemSheet(context, item),
|
||||
);
|
||||
}
|
||||
|
||||
void _showItemSheet(BuildContext context, NextcloudItem item) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
NooGroupedList(
|
||||
children: [
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.info,
|
||||
label: const Text('Details'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
DetailsSheet.show(context, item);
|
||||
},
|
||||
),
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.share2,
|
||||
label: const Text('Share'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
ShareSheet.show(context, item);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// Preserves the original screen's exact tap behavior: always opens the
|
||||
/// media viewer (the server's recent-files search only ever returns
|
||||
/// files, never folders, so there's no folder-navigation case to handle).
|
||||
void _openFile(BuildContext context, NextcloudItem item) {
|
||||
final recent = context.read<RecentController>();
|
||||
final siblings = recent.items.where((i) => i.isMedia).toList();
|
||||
@@ -250,3 +222,14 @@ class _RecentViewState extends State<RecentView> {
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
String _metaTime(DateTime dt) {
|
||||
final now = DateTime.now();
|
||||
if (dt.year == now.year && dt.month == now.month && dt.day == now.day) {
|
||||
return DateFormat.jm().format(dt);
|
||||
}
|
||||
if (dt.year == now.year) return DateFormat.MMMd().format(dt);
|
||||
return DateFormat.yMMMd().format(dt);
|
||||
}
|
||||
|
||||
String _location(NextcloudItem item) => tabLocationLabel(item.path, item.name);
|
||||
|
||||
+219
-72
@@ -1,14 +1,29 @@
|
||||
import 'dart:async';
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:path/path.dart' as p;
|
||||
import 'package:provider/provider.dart';
|
||||
|
||||
import '../models/app_tab.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import '../providers/settings_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/core/noo_search_field.dart';
|
||||
import '../widgets/noo/nav/noo_top_bar.dart';
|
||||
import '../widgets/noo/nav/noo_toolbar.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import 'file_viewer_screen.dart';
|
||||
|
||||
/// Full-text file search, pushed from the shell's search entry point
|
||||
/// (`openSearch` in `widgets/shell/shell_common.dart`). Debounces input,
|
||||
/// then lists matches as file rows - tapping one jumps to the result on the
|
||||
/// Files tab (see [_openResult]). Per DESIGN_SYSTEM.md §4 "Search".
|
||||
class SearchView extends StatefulWidget {
|
||||
const SearchView({super.key});
|
||||
|
||||
@@ -74,25 +89,6 @@ class _SearchViewState extends State<SearchView> {
|
||||
}
|
||||
}
|
||||
|
||||
IconData _iconFor(NextcloudItemType type) {
|
||||
switch (type) {
|
||||
case NextcloudItemType.folder:
|
||||
return Icons.folder_rounded;
|
||||
case NextcloudItemType.image:
|
||||
return Icons.image_rounded;
|
||||
case NextcloudItemType.video:
|
||||
return Icons.movie_rounded;
|
||||
case NextcloudItemType.audio:
|
||||
return Icons.audiotrack_rounded;
|
||||
case NextcloudItemType.document:
|
||||
return Icons.description_rounded;
|
||||
case NextcloudItemType.archive:
|
||||
return Icons.folder_zip_rounded;
|
||||
case NextcloudItemType.file:
|
||||
return Icons.insert_drive_file_rounded;
|
||||
}
|
||||
}
|
||||
|
||||
/// Navigates the Files tab to [item] (its own folder if it's a folder,
|
||||
/// its parent folder otherwise - rebuilding the whole breadcrumb trail
|
||||
/// from root rather than assuming it's under wherever the user was
|
||||
@@ -113,98 +109,249 @@ class _SearchViewState extends State<SearchView> {
|
||||
}
|
||||
}
|
||||
|
||||
void _clear() {
|
||||
_controller.clear();
|
||||
_focusNode.requestFocus();
|
||||
_onChanged('');
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final desktop = NooLayout.isDesktop(context);
|
||||
|
||||
return Scaffold(
|
||||
backgroundColor: colors.bg,
|
||||
appBar: desktop
|
||||
? NooToolbar(
|
||||
titleWidget: _buildField(onSurface: true),
|
||||
actions: [
|
||||
IconTheme.merge(
|
||||
data: IconThemeData(color: colors.fg1, size: 24),
|
||||
child: NooTopBarButton(
|
||||
icon: LucideIcons.x,
|
||||
tooltip: 'Close',
|
||||
onTap: () => Navigator.pop(context),
|
||||
),
|
||||
),
|
||||
],
|
||||
)
|
||||
: null,
|
||||
body: SafeArea(
|
||||
child: Column(
|
||||
top: !desktop,
|
||||
child: desktop
|
||||
? _buildBody(context, desktop)
|
||||
: Column(
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(12, 8, 12, 4),
|
||||
child: SearchBar(
|
||||
controller: _controller,
|
||||
focusNode: _focusNode,
|
||||
autoFocus: true,
|
||||
hintText: 'Search your files...',
|
||||
elevation: const WidgetStatePropertyAll(0),
|
||||
onChanged: _onChanged,
|
||||
leading: IconButton(
|
||||
icon: const Icon(Icons.arrow_back_rounded),
|
||||
onPressed: () => Navigator.pop(context),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.xs,
|
||||
NooSpace.xs,
|
||||
NooSpace.md,
|
||||
NooSpace.xs,
|
||||
),
|
||||
trailing: [
|
||||
if (_controller.text.isNotEmpty)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.close_rounded),
|
||||
onPressed: () {
|
||||
_controller.clear();
|
||||
_onChanged('');
|
||||
},
|
||||
child: Row(
|
||||
children: [
|
||||
IconTheme.merge(
|
||||
data: IconThemeData(color: colors.fg1, size: 24),
|
||||
child: NooTopBarButton(
|
||||
icon: LucideIcons.arrowLeft,
|
||||
tooltip: 'Back',
|
||||
onTap: () => Navigator.pop(context),
|
||||
),
|
||||
),
|
||||
Expanded(child: _buildField(onSurface: false)),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(child: _buildBody(context, colorScheme, theme)),
|
||||
Expanded(child: _buildBody(context, desktop)),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(
|
||||
BuildContext context,
|
||||
ColorScheme colorScheme,
|
||||
ThemeData theme,
|
||||
) {
|
||||
Widget _buildField({required bool onSurface}) {
|
||||
// The pill `NooSearchField`, not the inset-panel `NooTextField` - this
|
||||
// is a search field (DESIGN_SYSTEM.md's "Search field" component,
|
||||
// radius 999 outside the one iOS-inline exception), not a form input.
|
||||
// `ios: false` matches the Android shape we're building against now;
|
||||
// revisit once the iOS large-title/inline-field entry point is built.
|
||||
return NooSearchField(
|
||||
controller: _controller,
|
||||
focusNode: _focusNode,
|
||||
autofocus: true,
|
||||
placeholder: 'Search files',
|
||||
onChanged: _onChanged,
|
||||
onSurface: onSurface,
|
||||
ios: false,
|
||||
trailing: _controller.text.isEmpty
|
||||
? null
|
||||
: _ClearFieldButton(onTap: _clear),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildBody(BuildContext context, bool desktop) {
|
||||
final colors = context.nooColors;
|
||||
|
||||
if (_isSearching) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
return Center(child: CircularProgressIndicator(color: colors.accent));
|
||||
}
|
||||
if (_error != null) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Text(
|
||||
_error!,
|
||||
textAlign: TextAlign.center,
|
||||
style: TextStyle(color: colorScheme.error),
|
||||
),
|
||||
),
|
||||
return _buildMessage(
|
||||
context,
|
||||
icon: LucideIcons.circleAlert,
|
||||
iconColor: colors.danger,
|
||||
title: 'Couldn\'t search',
|
||||
message: _error,
|
||||
);
|
||||
}
|
||||
if (!_hasSearched) {
|
||||
return const SizedBox.shrink();
|
||||
return _buildMessage(
|
||||
context,
|
||||
icon: LucideIcons.search,
|
||||
iconColor: colors.fg3,
|
||||
title: 'Search your files',
|
||||
message: 'Find files and folders by name.',
|
||||
);
|
||||
}
|
||||
if (_results.isEmpty) {
|
||||
return _buildMessage(
|
||||
context,
|
||||
icon: LucideIcons.searchX,
|
||||
iconColor: colors.fg3,
|
||||
title: 'No results found',
|
||||
);
|
||||
}
|
||||
return desktop ? _buildDesktopResults(context) : _buildMobileResults(context);
|
||||
}
|
||||
|
||||
Widget _buildMessage(
|
||||
BuildContext context, {
|
||||
required IconData icon,
|
||||
required Color iconColor,
|
||||
required String title,
|
||||
String? message,
|
||||
}) {
|
||||
final colors = context.nooColors;
|
||||
return Center(
|
||||
child: Text(
|
||||
'No results found',
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(NooSpace.xl),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, size: 56, color: iconColor),
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
Text(
|
||||
title,
|
||||
textAlign: TextAlign.center,
|
||||
style: NooText.cardTitle.copyWith(color: colors.fg2),
|
||||
),
|
||||
if (message != null) ...[
|
||||
const SizedBox(height: NooSpace.xxs),
|
||||
Text(
|
||||
message,
|
||||
textAlign: TextAlign.center,
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildMobileResults(BuildContext context) {
|
||||
return ListView.builder(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.sm,
|
||||
NooSpace.xs,
|
||||
NooSpace.sm,
|
||||
NooSpace.xl,
|
||||
),
|
||||
physics: const BouncingScrollPhysics(),
|
||||
itemCount: _results.length,
|
||||
itemBuilder: (context, index) {
|
||||
final item = _results[index];
|
||||
return ListTile(
|
||||
leading: Icon(_iconFor(item.type), color: colorScheme.primary),
|
||||
title: Text(item.name, maxLines: 1, overflow: TextOverflow.ellipsis),
|
||||
subtitle: Text(
|
||||
item.isFolder
|
||||
? item.path
|
||||
: DateFormat.yMMMd().format(item.lastModified),
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
child: NooFileRow(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
name: item.name,
|
||||
meta: _mobileMeta(item),
|
||||
favorite: item.isFavorite,
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
onTap: () => _openResult(item),
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildDesktopResults(BuildContext context) {
|
||||
return SingleChildScrollView(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.xl,
|
||||
vertical: NooSpace.sm,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const NooFileTableHeader(col2Label: 'Modified', col3Label: 'Location'),
|
||||
for (final item in _results)
|
||||
NooFileTableRow(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
name: item.name,
|
||||
col2: DateFormat.yMMMd().format(item.lastModified),
|
||||
col3: item.isFolder ? item.path : p.dirname(item.path),
|
||||
favorite: item.isFavorite,
|
||||
onTap: () => _openResult(item),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// Mirrors the pre-rework screen's exact copy: a folder result shows its
|
||||
/// own full path (there's no separate "location" field to fall back to),
|
||||
/// a file result shows when it was last modified.
|
||||
String _mobileMeta(NextcloudItem item) =>
|
||||
item.isFolder ? item.path : DateFormat.yMMMd().format(item.lastModified);
|
||||
}
|
||||
|
||||
/// Small round "clear" button for [NooTextField.trailing] - clears the
|
||||
/// query and puts focus back in the field, same as the old `SearchBar`'s
|
||||
/// trailing close icon.
|
||||
class _ClearFieldButton extends StatelessWidget {
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _ClearFieldButton({required this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return SizedBox.square(
|
||||
dimension: 32,
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
shape: const CircleBorder(),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Icon(LucideIcons.x, size: 16, color: colors.fg3),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
+185
-355
@@ -1,6 +1,5 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/app_tab.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
@@ -9,24 +8,32 @@ import '../providers/session_controller.dart';
|
||||
import '../providers/settings_controller.dart';
|
||||
import '../services/share_intent_service.dart';
|
||||
import '../services/upload_service.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/breadcrumbs.dart';
|
||||
import '../widgets/item_icon.dart';
|
||||
import '../widgets/marquee_title.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/segmented_icon_toggle.dart';
|
||||
import '../widgets/sort_menu_button.dart';
|
||||
import '../widgets/sticky_header_delegate.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import '../widgets/files_controls_row.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/media/noo_grid_card.dart';
|
||||
import '../widgets/noo/nav/noo_top_bar.dart';
|
||||
import '../widgets/noo/nav/noo_toolbar.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/shell/shell_common.dart';
|
||||
import '../widgets/tabs/tab_state_slivers.dart';
|
||||
|
||||
/// Shown when another app shares one or more files to Noo (Android's
|
||||
/// "Share to..." sheet). Lets the user browse to a destination folder,
|
||||
/// mirroring the Files tab's own controls/filters/listing so this feels
|
||||
/// like the same browser rather than a stripped-down picker, then hands the
|
||||
/// actual prepare+upload off to [UploadService] - a real Android foreground
|
||||
/// reusing `FilesController`'s shared folder-browsing state so this feels
|
||||
/// like the same browser Files itself uses, then hands the actual
|
||||
/// prepare+upload off to [UploadService] - a real Android foreground
|
||||
/// service (see `ShareUploadService.kt`'s doc comment), not something this
|
||||
/// screen or even the app needs to stay open for. [files] only ever carry
|
||||
/// cheap Uri metadata (see [ShareIntentService]'s doc comment); that
|
||||
/// service is the only thing that ever reads their actual bytes.
|
||||
/// service is the only thing that ever reads their actual bytes. Pushed
|
||||
/// via `Navigator` from outside `MainShellView` (a cold share-intent
|
||||
/// launch, or Files' own "+" -> "Upload file"), so - unlike a tab - it
|
||||
/// builds its own complete top chrome rather than relying on the shell's.
|
||||
class ShareUploadView extends StatefulWidget {
|
||||
final List<SharedFileRef> files;
|
||||
|
||||
@@ -45,7 +52,9 @@ class _ShareUploadViewState extends State<ShareUploadView> {
|
||||
// Shared files have no relationship to wherever the user was last
|
||||
// browsing, so start the destination picker fresh at the root.
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||||
if (mounted) context.read<FilesController>().navigateToAbsoluteFolder('/');
|
||||
if (mounted) {
|
||||
context.read<FilesController>().navigateToAbsoluteFolder('/');
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@@ -86,243 +95,67 @@ class _ShareUploadViewState extends State<ShareUploadView> {
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildControlsRow(FilesController files) {
|
||||
return SizedBox(
|
||||
height: 44,
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
// Only folders are valid upload destinations, so the listing - unlike
|
||||
// Files' own - never shows plain files at all.
|
||||
Widget _buildRow(
|
||||
BuildContext context,
|
||||
NextcloudItem item,
|
||||
int index,
|
||||
int count,
|
||||
) {
|
||||
final colors = context.nooColors;
|
||||
final files = context.read<FilesController>();
|
||||
final row = NooFileRow(
|
||||
kind: NooFileKind.folder,
|
||||
name: item.name,
|
||||
meta: 'Folder',
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
onTap: () => files.navigateToFolder(item.path),
|
||||
);
|
||||
|
||||
final isFirst = index == 0;
|
||||
final isLast = index == count - 1;
|
||||
return Column(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
files.filesSortAscending
|
||||
? Icons.arrow_upward_rounded
|
||||
: Icons.arrow_downward_rounded,
|
||||
size: 20,
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: isFirst ? const Radius.circular(NooRadii.card) : Radius.zero,
|
||||
bottom: isLast ? const Radius.circular(NooRadii.card) : Radius.zero,
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
tooltip: files.filesSortAscending ? 'Ascending' : 'Descending',
|
||||
onPressed: files.toggleFilesSortOrder,
|
||||
),
|
||||
SizedBox(
|
||||
width: 130,
|
||||
child: SortMenuButton(
|
||||
field: files.filesSortField,
|
||||
onChanged: files.setFilesSortField,
|
||||
),
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: files.showHiddenFiles
|
||||
? Icons.visibility_rounded
|
||||
: Icons.visibility_off_rounded,
|
||||
isSelected: files.showHiddenFiles,
|
||||
onTap: () => files.toggleShowHiddenFiles(),
|
||||
tooltip: 'Show hidden files',
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Symbols.circles_rounded,
|
||||
isSelected: files.storageScope == StorageScope.cloud,
|
||||
onTap: () => files.setStorageScope(StorageScope.cloud),
|
||||
tooltip: 'Cloud storage',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Symbols.hard_drive_rounded,
|
||||
isSelected: files.storageScope == StorageScope.external,
|
||||
onTap: () => files.setStorageScope(StorageScope.external),
|
||||
tooltip: 'External storage',
|
||||
child: row,
|
||||
),
|
||||
if (!isLast) Container(height: 1, color: colors.line),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Icons.select_all_rounded,
|
||||
isSelected: files.filesTypeFilter == FilesTypeFilter.all,
|
||||
onTap: () => files.setFilesTypeFilter(FilesTypeFilter.all),
|
||||
tooltip: 'Files & folders',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.insert_drive_file_outlined,
|
||||
isSelected:
|
||||
files.filesTypeFilter == FilesTypeFilter.filesOnly,
|
||||
onTap: () =>
|
||||
files.setFilesTypeFilter(FilesTypeFilter.filesOnly),
|
||||
tooltip: 'Files only',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.folder_outlined,
|
||||
isSelected:
|
||||
files.filesTypeFilter == FilesTypeFilter.foldersOnly,
|
||||
onTap: () =>
|
||||
files.setFilesTypeFilter(FilesTypeFilter.foldersOnly),
|
||||
tooltip: 'Folders only',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Icons.view_list_rounded,
|
||||
isSelected: !files.isGridView,
|
||||
onTap: () => files.setGridView(false),
|
||||
tooltip: 'List view',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.grid_view_rounded,
|
||||
isSelected: files.isGridView,
|
||||
onTap: () => files.setGridView(true),
|
||||
tooltip: 'Grid view',
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// Only folders are valid upload destinations - files still show (so the
|
||||
// listing matches what the Files tab itself would show for this folder)
|
||||
// but are visually dimmed and inert rather than hidden outright.
|
||||
Widget _buildListTile(BuildContext context, NextcloudItem item) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
Widget _buildDesktopRow(BuildContext context, NextcloudItem item) {
|
||||
final files = context.read<FilesController>();
|
||||
final session = context.watch<SessionController>();
|
||||
final isFolder = item.isFolder;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Opacity(
|
||||
opacity: isFolder ? 1 : 0.5,
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
child: InkWell(
|
||||
onTap: isFolder ? () => files.navigateToFolder(item.path) : null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 16,
|
||||
vertical: 12,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
ItemThumbnail(
|
||||
item: item,
|
||||
service: session.service,
|
||||
size: 44,
|
||||
borderRadius: 12,
|
||||
iconSize: 22,
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
isFolder
|
||||
? 'Folder'
|
||||
: '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (isFolder) const Icon(Icons.chevron_right_rounded),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
return NooFileTableRow(
|
||||
kind: NooFileKind.folder,
|
||||
name: item.name,
|
||||
onTap: () => files.navigateToFolder(item.path),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildGridCard(BuildContext context, NextcloudItem item) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final files = context.read<FilesController>();
|
||||
final isFolder = item.isFolder;
|
||||
final iconColor = getIconColor(context, item.type);
|
||||
|
||||
return Opacity(
|
||||
opacity: isFolder ? 1 : 0.5,
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: isFolder ? () => files.navigateToFolder(item.path) : null,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(14),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Container(
|
||||
width: 40,
|
||||
height: 40,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
color: iconColor,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
maxLines: 2,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
isFolder ? 'Folder' : formatBytes(item.size),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
return NooGridCard(
|
||||
name: item.name,
|
||||
meta: 'Folder',
|
||||
placeholderColor: colors.accentSoft,
|
||||
icon: LucideIcons.folder,
|
||||
iconColor: colors.accentText,
|
||||
thumbnailHeight: NooLayout.isDesktop(context) ? 118 : 104,
|
||||
onTap: () => files.navigateToFolder(item.path),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final desktop = NooLayout.isDesktop(context);
|
||||
final files = context.watch<FilesController>();
|
||||
final session = context.watch<SessionController>();
|
||||
final hasBreadcrumbs = files.pathStack.length > 1;
|
||||
@@ -330,17 +163,25 @@ class _ShareUploadViewState extends State<ShareUploadView> {
|
||||
final currentLabel = currentPath == '/'
|
||||
? 'Home'
|
||||
: currentPath.split('/').where((s) => s.isNotEmpty).last;
|
||||
final items = files.items;
|
||||
final folders = files.items.where((item) => item.isFolder).toList();
|
||||
final gutter = NooLayout.gutter(context);
|
||||
|
||||
// Mirrors FilesView's own controls-row + breadcrumbs sticky header
|
||||
// exactly (padding, heights) so this reads as the same browser, just
|
||||
// reached from a share intent instead of the Files tab.
|
||||
final controlsColumn = Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 16, 16, 12),
|
||||
final slivers = <Widget>[
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
gutter,
|
||||
NooSpace.md,
|
||||
gutter,
|
||||
NooSpace.sm,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildControlsRow(files),
|
||||
SizedBox(
|
||||
height: 44,
|
||||
child: FilesControlsRow(folderPath: currentPath),
|
||||
),
|
||||
if (hasBreadcrumbs) ...[
|
||||
const SizedBox(height: 10),
|
||||
SizedBox(
|
||||
@@ -353,148 +194,137 @@ class _ShareUploadViewState extends State<ShareUploadView> {
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
final contentSlivers = <Widget>[
|
||||
SliverPersistentHeader(
|
||||
pinned: true,
|
||||
delegate: StickyHeaderDelegate(
|
||||
height: hasBreadcrumbs ? 114 : 72,
|
||||
child: controlsColumn,
|
||||
),
|
||||
),
|
||||
if (files.isLoading)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
)
|
||||
else if (items.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Text(
|
||||
'Folder is empty',
|
||||
style: TextStyle(color: colorScheme.onSurfaceVariant),
|
||||
),
|
||||
),
|
||||
tabLoadingSliver
|
||||
else if (folders.isEmpty)
|
||||
tabEmptySliver(
|
||||
context,
|
||||
icon: LucideIcons.folder,
|
||||
message: 'No folders here',
|
||||
)
|
||||
else if (files.isGridView)
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter),
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: 2,
|
||||
childAspectRatio: 1.1,
|
||||
crossAxisSpacing: 12,
|
||||
mainAxisSpacing: 12,
|
||||
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: desktop ? 5 : 2,
|
||||
childAspectRatio: desktop ? 1.05 : 0.92,
|
||||
crossAxisSpacing: desktop ? 16 : 10,
|
||||
mainAxisSpacing: desktop ? 16 : 10,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) => _buildGridCard(context, folders[index]),
|
||||
childCount: folders.length,
|
||||
),
|
||||
),
|
||||
)
|
||||
else if (desktop)
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) => _buildDesktopRow(context, folders[index]),
|
||||
childCount: folders.length,
|
||||
),
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
return _buildGridCard(context, items[index]);
|
||||
}, childCount: items.length),
|
||||
),
|
||||
)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 8),
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
return _buildListTile(context, items[index]);
|
||||
}, childCount: items.length),
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
(context, index) =>
|
||||
_buildRow(context, folders[index], index, folders.length),
|
||||
childCount: folders.length,
|
||||
),
|
||||
),
|
||||
// So the last row isn't hidden behind the bottom "Upload to..." bar.
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 24)),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: NooSpace.xl)),
|
||||
];
|
||||
|
||||
final title = 'Upload to...';
|
||||
|
||||
return Scaffold(
|
||||
body: SyncedHeaderScaffold(
|
||||
scrollController: _scrollController,
|
||||
// Same trailing actions as every other tab except "More tabs" -
|
||||
// there's nowhere useful for it to go while mid-upload (jumping to
|
||||
// Trash/Shares/etc. would abandon this destination picker), so the
|
||||
// top chrome is identical to every other tab minus that one entry.
|
||||
// Backing out is still the system back gesture/button, same as any
|
||||
// other pushed screen.
|
||||
actions: const [ProfileAvatarButton()],
|
||||
contentSlivers: contentSlivers,
|
||||
backgroundColor: colors.bg,
|
||||
appBar: desktop
|
||||
? NooToolbar(
|
||||
title: title,
|
||||
actions: [
|
||||
NooButton(
|
||||
variant: NooButtonVariant.secondary,
|
||||
size: NooButtonSize.toolbar,
|
||||
onTap: () => Navigator.of(context).maybePop(),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
// A rounded-top, elevated bar "peeking" up from the bottom edge - the
|
||||
// uploading-file summary (marqueed if it doesn't fit on one line)
|
||||
// sits directly above the destination button, both inside the one
|
||||
// sheet, rather than the summary living up in the scrolling content
|
||||
// far away from the action it describes.
|
||||
bottomNavigationBar: Material(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
elevation: 8,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(24)),
|
||||
],
|
||||
)
|
||||
: NooTopBar(
|
||||
style: NooLayout.navStyle(context),
|
||||
title: title,
|
||||
leading: const NooTopBarBack(label: 'Cancel'),
|
||||
// Same top-bar access as every tab (avatar -> Settings, swipe
|
||||
// to switch accounts) - nothing else belongs here: jumping to
|
||||
// another tab mid-upload would abandon this destination
|
||||
// picker, so there's no "more tabs" entry.
|
||||
actions: const [ShellAvatarButton()],
|
||||
),
|
||||
body: SafeArea(
|
||||
top: false,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: files.refreshData,
|
||||
child: CustomScrollView(
|
||||
controller: _scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-folder
|
||||
// listing.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: slivers,
|
||||
),
|
||||
),
|
||||
),
|
||||
// A flat surface bar with a top line, peeking up from the bottom edge -
|
||||
// a centered item-count meta line sits directly above the destination
|
||||
// button (DESIGN_SYSTEM.md's "Upload / Move / Copy destination
|
||||
// picker" recipe: "a meta line ... above a full-width ... primary
|
||||
// CTA" - matches MoveCopyDestinationPicker's identical bar). A count,
|
||||
// not a filename: this is the one-file case just as much as the
|
||||
// many-files case, and a long filename has no good fixed-width
|
||||
// treatment the way a short count always does.
|
||||
bottomNavigationBar: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
border: Border(top: BorderSide(color: colors.line)),
|
||||
),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 16, 20, 16),
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.lg,
|
||||
NooSpace.md,
|
||||
NooSpace.lg,
|
||||
NooSpace.md,
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
// Same pill/chip look and exact same duller background
|
||||
// color as the filter toggles' shared background
|
||||
// (SegmentedIconGroup's `surfaceContainerHigh`), so it reads
|
||||
// as part of the same visual language rather than a new
|
||||
// accent color. Sized to the text itself (like a real chip)
|
||||
// up to the row's available width - MarqueeTitle needs a
|
||||
// concrete (not just loose) width to know whether/how far
|
||||
// to scroll, so this measures the text once up front rather
|
||||
// than leaving the chip unconstrained.
|
||||
LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final uploadingText = widget.files.length == 1
|
||||
? 'Uploading ${widget.files.first.name}'
|
||||
: 'Uploading ${widget.files.length} files';
|
||||
final chipTextStyle = theme.textTheme.titleSmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontWeight: FontWeight.w700,
|
||||
);
|
||||
const horizontalPadding = 28.0;
|
||||
final painter = TextPainter(
|
||||
text: TextSpan(text: uploadingText, style: chipTextStyle),
|
||||
maxLines: 1,
|
||||
textDirection: Directionality.of(context),
|
||||
)..layout(maxWidth: double.infinity);
|
||||
final chipWidth = (painter.width + horizontalPadding).clamp(
|
||||
0.0,
|
||||
constraints.maxWidth,
|
||||
);
|
||||
|
||||
return Container(
|
||||
width: chipWidth,
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 14,
|
||||
vertical: 8,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHigh,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
),
|
||||
child: SizedBox(
|
||||
height: 20,
|
||||
child: MarqueeTitle(
|
||||
text: uploadingText,
|
||||
style: chipTextStyle,
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton.icon(
|
||||
onPressed: () => _uploadHere(session),
|
||||
icon: const Icon(Icons.upload_rounded),
|
||||
label: Text('Upload to $currentLabel'),
|
||||
Text(
|
||||
'Uploading ${widget.files.length} item${widget.files.length == 1 ? '' : 's'}',
|
||||
textAlign: TextAlign.center,
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
),
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
size: NooButtonSize.cta,
|
||||
fullWidth: true,
|
||||
icon: LucideIcons.upload,
|
||||
onTap: () => _uploadHere(session),
|
||||
child: Text('Upload to $currentLabel'),
|
||||
),
|
||||
],
|
||||
),
|
||||
|
||||
+208
-239
@@ -1,49 +1,55 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../models/nextcloud_share.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import '../providers/shares_controller.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/core/noo_segmented_control.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/share_sheet.dart';
|
||||
import '../widgets/tabs/tab_state_slivers.dart';
|
||||
|
||||
IconData _shareItemIcon(NextcloudItemType type) {
|
||||
switch (type) {
|
||||
case NextcloudItemType.folder:
|
||||
return Icons.folder_rounded;
|
||||
case NextcloudItemType.image:
|
||||
return Icons.image_rounded;
|
||||
case NextcloudItemType.video:
|
||||
return Icons.movie_rounded;
|
||||
case NextcloudItemType.audio:
|
||||
return Icons.audiotrack_rounded;
|
||||
case NextcloudItemType.document:
|
||||
return Icons.description_rounded;
|
||||
case NextcloudItemType.archive:
|
||||
return Icons.folder_zip_rounded;
|
||||
case NextcloudItemType.file:
|
||||
return Icons.insert_drive_file_rounded;
|
||||
}
|
||||
}
|
||||
/// Which slice of [SharesController.shares] is on screen - `With you` maps
|
||||
/// straight onto the controller's own `sharedWithMe: true` fetch, but the
|
||||
/// controller only ever exposes one boolean scope, so `By you` and `Links`
|
||||
/// both use its `sharedWithMe: false` fetch and are told apart client-side
|
||||
/// by [NextcloudShare.shareType] (see `_visibleShares`). `SharesController`
|
||||
/// caches each of its two scopes after its first fetch, so switching
|
||||
/// between any of the three - including back to `With you` after leaving
|
||||
/// it - only re-fetches a scope that's never been loaded yet, not on every
|
||||
/// single switch.
|
||||
enum _ShareScope { withYou, byYou, links }
|
||||
|
||||
IconData _shareTypeIcon(ShareType type) {
|
||||
switch (type) {
|
||||
case ShareType.user:
|
||||
return Icons.person_rounded;
|
||||
return LucideIcons.user;
|
||||
case ShareType.group:
|
||||
return Icons.groups_rounded;
|
||||
return LucideIcons.users;
|
||||
case ShareType.publicLink:
|
||||
return Icons.link_rounded;
|
||||
return LucideIcons.link;
|
||||
case ShareType.email:
|
||||
return Icons.email_rounded;
|
||||
return LucideIcons.mail;
|
||||
case ShareType.federated:
|
||||
return Icons.public_rounded;
|
||||
return LucideIcons.globe;
|
||||
case ShareType.other:
|
||||
return Icons.share_rounded;
|
||||
return LucideIcons.share2;
|
||||
}
|
||||
}
|
||||
|
||||
/// "Can edit" when any write bit (update/create/delete) is set on the OCS
|
||||
/// share permissions bitmask, "Can view" otherwise - kept to the two
|
||||
/// broad buckets the row's one-line meta has room for.
|
||||
String _permissionLabel(int permissions) {
|
||||
const update = 2, create = 4, delete = 8;
|
||||
final canWrite = permissions & (update | create | delete) != 0;
|
||||
return canWrite ? 'Can edit' : 'Can view';
|
||||
}
|
||||
|
||||
class SharesView extends StatefulWidget {
|
||||
final ScrollController scrollController;
|
||||
|
||||
@@ -55,11 +61,13 @@ class SharesView extends StatefulWidget {
|
||||
|
||||
class _SharesViewState extends State<SharesView> {
|
||||
bool _requested = false;
|
||||
// Mirrors `SharesController.sharedWithMe`'s own default (false, "shared
|
||||
// by me") so the first fetch this triggers matches what's shown.
|
||||
_ShareScope _scope = _ShareScope.byYou;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final sharesController = context.watch<SharesController>();
|
||||
|
||||
if (!_requested) {
|
||||
@@ -69,247 +77,208 @@ class _SharesViewState extends State<SharesView> {
|
||||
);
|
||||
}
|
||||
|
||||
final shares = sharesController.shares;
|
||||
final shares = _visibleShares(sharesController);
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
|
||||
final List<Widget> contentSlivers = [
|
||||
SliverToBoxAdapter(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 16, 20, 8),
|
||||
child: SegmentedButton<bool>(
|
||||
segments: const [
|
||||
ButtonSegment(value: false, label: Text('Shared by me')),
|
||||
ButtonSegment(value: true, label: Text('Shared with me')),
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
NooLayout.gutter(context),
|
||||
NooSpace.md,
|
||||
NooLayout.gutter(context),
|
||||
0,
|
||||
),
|
||||
sliver: SliverToBoxAdapter(
|
||||
child: NooSegmentedControl<_ShareScope>(
|
||||
value: _scope,
|
||||
options: const [
|
||||
NooSegmentOption(value: _ShareScope.withYou, label: 'With you'),
|
||||
NooSegmentOption(value: _ShareScope.byYou, label: 'By you'),
|
||||
NooSegmentOption(value: _ShareScope.links, label: 'Links'),
|
||||
],
|
||||
selected: {sharesController.sharedWithMe},
|
||||
onSelectionChanged: (set) =>
|
||||
sharesController.setSharedWithMe(set.first),
|
||||
onChanged: (scope) => _selectScope(sharesController, scope),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 8)),
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
|
||||
if (sharesController.isLoading && shares.isEmpty)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
)
|
||||
tabLoadingSliver
|
||||
else if (sharesController.errorMessage != null)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Could not load shares',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.error,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
sharesController.errorMessage!,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
FilledButton.icon(
|
||||
onPressed: sharesController.fetchAll,
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
tabErrorSliver(
|
||||
context,
|
||||
title: 'Could not load shares',
|
||||
message: sharesController.errorMessage!,
|
||||
onRetry: sharesController.fetchAll,
|
||||
)
|
||||
else if (shares.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.groups_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.outlineVariant,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
sharesController.sharedWithMe
|
||||
? 'Nothing has been shared with you'
|
||||
: 'You haven\'t shared anything yet',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
tabEmptySliver(
|
||||
context,
|
||||
icon: LucideIcons.share2,
|
||||
message: _emptyMessage(),
|
||||
)
|
||||
else if (isDesktop)
|
||||
_buildDesktopTable(context, shares)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
_buildMobileList(context, shares),
|
||||
...tabBottomInsetSlivers,
|
||||
];
|
||||
|
||||
return ColoredBox(
|
||||
color: colors.bg,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: sharesController.fetchAll,
|
||||
child: CustomScrollView(
|
||||
controller: widget.scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-item list.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: contentSlivers,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
List<NextcloudShare> _visibleShares(SharesController c) {
|
||||
switch (_scope) {
|
||||
case _ShareScope.withYou:
|
||||
return c.shares;
|
||||
case _ShareScope.byYou:
|
||||
return c.shares
|
||||
.where((s) => s.shareType != ShareType.publicLink)
|
||||
.toList();
|
||||
case _ShareScope.links:
|
||||
return c.shares
|
||||
.where((s) => s.shareType == ShareType.publicLink)
|
||||
.toList();
|
||||
}
|
||||
}
|
||||
|
||||
String _emptyMessage() {
|
||||
switch (_scope) {
|
||||
case _ShareScope.withYou:
|
||||
return 'Nothing has been shared with you';
|
||||
case _ShareScope.byYou:
|
||||
return "You haven't shared anything yet";
|
||||
case _ShareScope.links:
|
||||
return 'No share links yet';
|
||||
}
|
||||
}
|
||||
|
||||
void _selectScope(SharesController c, _ShareScope scope) {
|
||||
setState(() => _scope = scope);
|
||||
// No-ops (see `SharesController.setSharedWithMe`) when moving between
|
||||
// `byYou`/`links`, which share the same `sharedWithMe: false` fetch.
|
||||
c.setSharedWithMe(scope == _ShareScope.withYou);
|
||||
}
|
||||
|
||||
// A lazily-built `SliverList`, not `NooGroupedList` (its own `Column`
|
||||
// isn't lazy - see files_view.dart's `_buildMobileRow` doc comment, and
|
||||
// trash_view.dart's `_buildMobileList`, which had the same bug: a heavy
|
||||
// account's full share list built eagerly up front). Each row still
|
||||
// reads as one continuous radius-20 card via per-row corner rounding +
|
||||
// a 1px `line` divider.
|
||||
Widget _buildMobileList(BuildContext context, List<NextcloudShare> shares) {
|
||||
final colors = context.nooColors;
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final share = shares[index];
|
||||
return _buildShareTile(context, share);
|
||||
final row = NooFileRow(
|
||||
kind: NooFileKind.from(
|
||||
name: share.name,
|
||||
isDirectory: share.isFolder,
|
||||
),
|
||||
name: share.name,
|
||||
meta:
|
||||
'${share.ownerDisplayName} · ${_permissionLabel(share.permissions)}',
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
onTap: () => _openShareSheet(context, share),
|
||||
trailing: Icon(_shareTypeIcon(share.shareType), size: 16),
|
||||
);
|
||||
final isFirst = index == 0;
|
||||
final isLast = index == shares.length - 1;
|
||||
return Column(
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: isFirst
|
||||
? const Radius.circular(NooRadii.card)
|
||||
: Radius.zero,
|
||||
bottom: isLast
|
||||
? const Radius.circular(NooRadii.card)
|
||||
: Radius.zero,
|
||||
),
|
||||
child: row,
|
||||
),
|
||||
if (!isLast) Container(height: 1, color: colors.line),
|
||||
],
|
||||
);
|
||||
}, childCount: shares.length),
|
||||
),
|
||||
),
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
||||
const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
|
||||
];
|
||||
|
||||
return SyncedHeaderScaffold(
|
||||
scrollController: widget.scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
onRefresh: sharesController.fetchAll,
|
||||
contentSlivers: contentSlivers,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildShareTile(BuildContext context, NextcloudShare share) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final iconColor = colorScheme.primary;
|
||||
|
||||
final withWhom = share.sharedWithMe
|
||||
? 'From ${share.ownerDisplayName}'
|
||||
: (share.sharedWithDisplayName != null
|
||||
? 'With ${share.sharedWithDisplayName}'
|
||||
: 'Shared link');
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
_shareItemIcon(share.itemType),
|
||||
color: iconColor,
|
||||
size: 22,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
share.name,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(top: 2),
|
||||
child: Icon(
|
||||
_shareTypeIcon(share.shareType),
|
||||
size: 13,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Expanded(
|
||||
child: Text(
|
||||
'$withWhom • ${DateFormat.yMMMd().format(share.sharedAt)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(Icons.link_off_rounded, color: colorScheme.error),
|
||||
tooltip: share.sharedWithMe ? 'Remove' : 'Unshare',
|
||||
onPressed: () => _confirmUnshare(context, share),
|
||||
),
|
||||
],
|
||||
Widget _buildDesktopTable(BuildContext context, List<NextcloudShare> shares) {
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.xl,
|
||||
vertical: NooSpace.xs,
|
||||
),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
if (index == 0) {
|
||||
return const NooFileTableHeader(
|
||||
col2Label: 'Owner',
|
||||
col3Label: 'Permission',
|
||||
);
|
||||
}
|
||||
final share = shares[index - 1];
|
||||
return NooFileTableRow(
|
||||
kind: NooFileKind.from(
|
||||
name: share.name,
|
||||
isDirectory: share.isFolder,
|
||||
),
|
||||
name: share.name,
|
||||
col2: share.ownerDisplayName,
|
||||
col3: _permissionLabel(share.permissions),
|
||||
onTap: () => _openShareSheet(context, share),
|
||||
);
|
||||
}, childCount: shares.length + 1),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _confirmUnshare(
|
||||
/// Every row's whole-row tap - a share only carries enough metadata for
|
||||
/// its own row, not the size/dates the Share sheet's header needs, so
|
||||
/// this fetches the real item first (see `FilesController.fetchItemAtPath`)
|
||||
/// rather than opening the sheet straight from [share]. Reused by every
|
||||
/// scope (With you/By you/Links) - the Share sheet is the one place that
|
||||
/// already knows how to copy a link or remove access, so there's no
|
||||
/// separate overflow menu here any more.
|
||||
Future<void> _openShareSheet(
|
||||
BuildContext context,
|
||||
NextcloudShare share,
|
||||
) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (dialogContext) {
|
||||
return AlertDialog(
|
||||
title: Text(share.sharedWithMe ? 'Remove Share' : 'Unshare'),
|
||||
content: Text(
|
||||
share.sharedWithMe
|
||||
? 'Remove "${share.name}" shared with you by ${share.ownerDisplayName}?'
|
||||
: 'Stop sharing "${share.name}"?',
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: Theme.of(dialogContext).colorScheme.error,
|
||||
),
|
||||
onPressed: () => Navigator.pop(dialogContext, true),
|
||||
child: const Text('Remove'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
if (confirmed != true || !context.mounted) return;
|
||||
|
||||
final files = context.read<FilesController>();
|
||||
final messenger = ScaffoldMessenger.of(context);
|
||||
final success = await context.read<SharesController>().deleteShare(
|
||||
share,
|
||||
);
|
||||
final item = await files.fetchItemAtPath(share.path);
|
||||
if (!context.mounted) return;
|
||||
if (item == null) {
|
||||
messenger.showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(
|
||||
success
|
||||
? 'Removed share for ${share.name}'
|
||||
: 'Failed to remove share for ${share.name}',
|
||||
),
|
||||
const SnackBar(
|
||||
content: Text('Could not find this item - it may have moved'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
return;
|
||||
}
|
||||
await ShareSheet.show(context, item);
|
||||
// The sheet manages shares through `ItemOperations`, not this tab's own
|
||||
// `SharesController` (see its `deleteShare`'s doc comment) - refetch so
|
||||
// a share added/removed from inside it doesn't leave this list stale.
|
||||
if (context.mounted) context.read<SharesController>().fetchAll();
|
||||
}
|
||||
}
|
||||
|
||||
+329
-174
@@ -1,31 +1,27 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../providers/trash_controller.dart';
|
||||
import '../widgets/more_tabs_button.dart';
|
||||
import '../widgets/profile_avatar_button.dart';
|
||||
import '../widgets/synced_header_scaffold.dart';
|
||||
|
||||
IconData _trashItemIcon(NextcloudItemType type) {
|
||||
switch (type) {
|
||||
case NextcloudItemType.folder:
|
||||
return Icons.folder_rounded;
|
||||
case NextcloudItemType.image:
|
||||
return Icons.image_rounded;
|
||||
case NextcloudItemType.video:
|
||||
return Icons.movie_rounded;
|
||||
case NextcloudItemType.audio:
|
||||
return Icons.audiotrack_rounded;
|
||||
case NextcloudItemType.document:
|
||||
return Icons.description_rounded;
|
||||
case NextcloudItemType.archive:
|
||||
return Icons.folder_zip_rounded;
|
||||
case NextcloudItemType.file:
|
||||
return Icons.insert_drive_file_rounded;
|
||||
}
|
||||
}
|
||||
import '../theme/design_tokens.dart';
|
||||
import '../widgets/noo/core/noo_button.dart';
|
||||
import '../widgets/noo/files/noo_file_kind.dart';
|
||||
import '../widgets/noo/files/noo_file_row.dart';
|
||||
import '../widgets/noo/files/noo_file_table.dart';
|
||||
import '../widgets/noo/files/noo_file_tile.dart';
|
||||
import '../widgets/noo/lists/noo_banner.dart';
|
||||
import '../widgets/noo/noo_layout.dart';
|
||||
import '../widgets/tabs/tab_location.dart';
|
||||
import '../widgets/tabs/tab_state_slivers.dart';
|
||||
|
||||
/// The Trash tab: a retention banner (`NooBanner`, with "Empty trash" as
|
||||
/// its danger action) then the trashed-items list, per `DESIGN_SYSTEM.md`
|
||||
/// §4. There's no dedicated "empty trash" endpoint anywhere in
|
||||
/// [TrashController]/`NextcloudService` - [_emptyTrash] composes it from
|
||||
/// the existing per-item [TrashController.deleteForever], the same way
|
||||
/// `FavoritesView._confirmDeleteSelected` builds its bulk delete from a
|
||||
/// per-item call.
|
||||
class TrashView extends StatefulWidget {
|
||||
final ScrollController scrollController;
|
||||
|
||||
@@ -40,8 +36,7 @@ class _TrashViewState extends State<TrashView> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final trashController = context.watch<TrashController>();
|
||||
|
||||
if (!_requested) {
|
||||
@@ -52,176 +47,181 @@ class _TrashViewState extends State<TrashView> {
|
||||
}
|
||||
|
||||
final trash = trashController.items;
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
|
||||
final List<Widget> contentSlivers = [
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 16)),
|
||||
|
||||
SliverPadding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
NooLayout.gutter(context),
|
||||
NooSpace.md,
|
||||
NooLayout.gutter(context),
|
||||
0,
|
||||
),
|
||||
sliver: SliverToBoxAdapter(
|
||||
child: NooBanner(
|
||||
actionLabel: trash.isEmpty ? null : 'Empty trash',
|
||||
onAction: trash.isEmpty
|
||||
? null
|
||||
: () => _confirmEmptyTrash(context, trash),
|
||||
child: const Text(
|
||||
'Deleted items are kept for 30 days, then removed automatically.',
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SliverToBoxAdapter(child: SizedBox(height: NooSpace.md)),
|
||||
if (trashController.isLoading && trash.isEmpty)
|
||||
const SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
)
|
||||
tabLoadingSliver
|
||||
else if (trashController.errorMessage != null)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.error_outline_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
Text(
|
||||
'Could not load trash',
|
||||
style: theme.textTheme.titleLarge?.copyWith(
|
||||
color: colorScheme.error,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
Text(
|
||||
trashController.errorMessage!,
|
||||
textAlign: TextAlign.center,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 20),
|
||||
FilledButton.icon(
|
||||
onPressed: trashController.fetchAll,
|
||||
icon: const Icon(Icons.refresh_rounded),
|
||||
label: const Text('Retry'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
tabErrorSliver(
|
||||
context,
|
||||
title: 'Could not load trash',
|
||||
message: trashController.errorMessage!,
|
||||
onRetry: trashController.fetchAll,
|
||||
)
|
||||
else if (trash.isEmpty)
|
||||
SliverFillRemaining(
|
||||
hasScrollBody: false,
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Icon(
|
||||
Icons.delete_outline_rounded,
|
||||
size: 64,
|
||||
color: colorScheme.outlineVariant,
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
Text(
|
||||
'Trash is empty',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
tabEmptySliver(
|
||||
context,
|
||||
icon: LucideIcons.trash2,
|
||||
message: 'Trash is empty',
|
||||
)
|
||||
else if (isDesktop)
|
||||
_buildDesktopTable(context, trash)
|
||||
else
|
||||
SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 20),
|
||||
_buildMobileList(context, trash),
|
||||
...tabBottomInsetSlivers,
|
||||
];
|
||||
|
||||
return ColoredBox(
|
||||
color: colors.bg,
|
||||
child: RefreshIndicator(
|
||||
color: colors.accent,
|
||||
backgroundColor: colors.surface,
|
||||
onRefresh: trashController.fetchAll,
|
||||
child: CustomScrollView(
|
||||
controller: widget.scrollController,
|
||||
// See files_view.dart's identical fix - without this, pull-to-
|
||||
// refresh can't be triggered on an empty or single-item list.
|
||||
physics: const AlwaysScrollableScrollPhysics(),
|
||||
slivers: contentSlivers,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// A lazily-built `SliverList`, not `NooGroupedList` (its own `Column`
|
||||
// isn't lazy - see files_view.dart's `_buildMobileRow` doc comment for
|
||||
// the same reasoning): Trash can hold hundreds of items, and building
|
||||
// every row eagerly up front is what made this tab laggy. Each row still
|
||||
// reads as one continuous radius-20 card via per-row corner rounding +
|
||||
// a 1px `line` divider, matching `NooGroupedList`'s look.
|
||||
Widget _buildMobileList(BuildContext context, List<NextcloudItem> trash) {
|
||||
final colors = context.nooColors;
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
final item = trash[index];
|
||||
return _buildTrashTile(context, item);
|
||||
// The overflow menu's only action here is "Delete forever" - a
|
||||
// bare ellipsis obscures that behind an extra tap to discover it,
|
||||
// so this row shows the delete icon directly instead of going
|
||||
// through `NooFileRow.onMore`.
|
||||
final row = NooFileRow(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
name: item.name,
|
||||
meta: _meta(item),
|
||||
iosStyle: NooLayout.iosStyle(context),
|
||||
trailing: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Semantics(
|
||||
button: true,
|
||||
label: 'Restore',
|
||||
child: InkResponse(
|
||||
onTap: () => _restore(context, item),
|
||||
radius: 20,
|
||||
child: const Icon(LucideIcons.rotateCcw),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
Semantics(
|
||||
button: true,
|
||||
label: 'Delete forever',
|
||||
child: InkResponse(
|
||||
onTap: () => _confirmDeleteForever(context, item),
|
||||
radius: 20,
|
||||
child: Icon(LucideIcons.trash2, color: colors.danger),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
final isFirst = index == 0;
|
||||
final isLast = index == trash.length - 1;
|
||||
return Column(
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.vertical(
|
||||
top: isFirst
|
||||
? const Radius.circular(NooRadii.card)
|
||||
: Radius.zero,
|
||||
bottom: isLast
|
||||
? const Radius.circular(NooRadii.card)
|
||||
: Radius.zero,
|
||||
),
|
||||
child: row,
|
||||
),
|
||||
if (!isLast) Container(height: 1, color: colors.line),
|
||||
],
|
||||
);
|
||||
}, childCount: trash.length),
|
||||
),
|
||||
),
|
||||
|
||||
const SliverToBoxAdapter(child: SizedBox(height: 100)),
|
||||
const SliverFillRemaining(hasScrollBody: false, child: SizedBox()),
|
||||
];
|
||||
|
||||
return SyncedHeaderScaffold(
|
||||
scrollController: widget.scrollController,
|
||||
actions: const [MoreTabsButton(), ProfileAvatarButton()],
|
||||
onRefresh: trashController.fetchAll,
|
||||
contentSlivers: contentSlivers,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTrashTile(BuildContext context, NextcloudItem item) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final iconColor = colorScheme.outline;
|
||||
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8),
|
||||
child: Material(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(16),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
||||
child: Row(
|
||||
children: [
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Icon(
|
||||
_trashItemIcon(item.type),
|
||||
color: iconColor,
|
||||
size: 22,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
item.deletedAt != null
|
||||
? 'Deleted ${DateFormat.yMMMd().format(item.deletedAt!)}'
|
||||
: 'Deleted',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
IconButton(
|
||||
icon: const Icon(Icons.restore_rounded),
|
||||
tooltip: 'Restore',
|
||||
color: colorScheme.primary,
|
||||
onPressed: () => _restore(context, item),
|
||||
),
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
Icons.delete_forever_rounded,
|
||||
color: colorScheme.error,
|
||||
),
|
||||
tooltip: 'Delete forever',
|
||||
onPressed: () => _confirmDeleteForever(context, item),
|
||||
),
|
||||
],
|
||||
Widget _buildDesktopTable(BuildContext context, List<NextcloudItem> trash) {
|
||||
return SliverPadding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.xl,
|
||||
vertical: NooSpace.xs,
|
||||
),
|
||||
sliver: SliverList(
|
||||
delegate: SliverChildBuilderDelegate((context, index) {
|
||||
if (index == 0) {
|
||||
return const NooFileTableHeader(
|
||||
col2Label: 'Deleted',
|
||||
col3Label: 'Original location',
|
||||
);
|
||||
}
|
||||
final item = trash[index - 1];
|
||||
return _TrashDesktopRow(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
name: item.name,
|
||||
col2: _deletedLabel(item),
|
||||
col3: item.originalLocation ?? 'Unknown location',
|
||||
onRestore: () => _restore(context, item),
|
||||
onDelete: () => _confirmDeleteForever(context, item),
|
||||
);
|
||||
}, childCount: trash.length + 1),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
String _meta(NextcloudItem item) =>
|
||||
'Deleted ${_deletedLabel(item)} · ${tabLocationLabel(item.originalLocation ?? item.path, item.name)}';
|
||||
|
||||
String _deletedLabel(NextcloudItem item) => item.deletedAt != null
|
||||
? DateFormat.yMMMd().format(item.deletedAt!)
|
||||
: 'recently';
|
||||
|
||||
Future<void> _restore(BuildContext context, NextcloudItem item) async {
|
||||
final messenger = ScaffoldMessenger.of(context);
|
||||
final success = await context.read<TrashController>().restore(item);
|
||||
@@ -243,7 +243,7 @@ class _TrashViewState extends State<TrashView> {
|
||||
context: context,
|
||||
builder: (dialogContext) {
|
||||
return AlertDialog(
|
||||
title: const Text('Delete Forever'),
|
||||
title: const Text('Delete forever'),
|
||||
content: Text(
|
||||
'Permanently delete "${item.name}"? This cannot be undone.',
|
||||
),
|
||||
@@ -257,7 +257,7 @@ class _TrashViewState extends State<TrashView> {
|
||||
backgroundColor: Theme.of(dialogContext).colorScheme.error,
|
||||
),
|
||||
onPressed: () => Navigator.pop(dialogContext, true),
|
||||
child: const Text('Delete Forever'),
|
||||
child: const Text('Delete forever'),
|
||||
),
|
||||
],
|
||||
);
|
||||
@@ -276,4 +276,159 @@ class _TrashViewState extends State<TrashView> {
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _confirmEmptyTrash(
|
||||
BuildContext context,
|
||||
List<NextcloudItem> trash,
|
||||
) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (dialogContext) {
|
||||
return AlertDialog(
|
||||
title: const Text('Empty trash'),
|
||||
content: Text(
|
||||
'Permanently delete all ${trash.length} item(s) in trash? This cannot be undone.',
|
||||
),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, false),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: Theme.of(dialogContext).colorScheme.error,
|
||||
),
|
||||
onPressed: () => Navigator.pop(dialogContext, true),
|
||||
child: const Text('Empty trash'),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
if (confirmed != true || !context.mounted) return;
|
||||
|
||||
final controller = context.read<TrashController>();
|
||||
final messenger = ScaffoldMessenger.of(context);
|
||||
var succeeded = 0;
|
||||
for (final item in trash) {
|
||||
if (await controller.deleteForever(item)) succeeded++;
|
||||
}
|
||||
if (!context.mounted) return;
|
||||
messenger.showSnackBar(
|
||||
SnackBar(
|
||||
content: Text('Deleted $succeeded of ${trash.length} item(s)'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Desktop trash row: like `NooFileTableRow`, but its 120px last column
|
||||
/// holds a tonal "Restore" button plus a danger-tonal "Delete" button
|
||||
/// (permanent delete) instead of status icons - `NooFileTableRow` has no
|
||||
/// slot for screen-specific actions there. A labelled pill, not a bare
|
||||
/// overflow icon: it's the row's only destructive action, not a menu of
|
||||
/// several, and desktop already prefers labelled buttons to bare icons
|
||||
/// (see `NooSelectionBar`'s own desktop actions). Column widths
|
||||
/// (180/160/120) are matched by hand to `NooFileTableHeader`'s (private in
|
||||
/// `noo_file_table.dart`) so this still lines up under it; promoting an
|
||||
/// optional `actions` slot onto `NooFileTableRow` would let this fold back
|
||||
/// into the shared component.
|
||||
class _TrashDesktopRow extends StatelessWidget {
|
||||
final NooFileKind kind;
|
||||
final String name;
|
||||
final String col2;
|
||||
final String col3;
|
||||
final VoidCallback onRestore;
|
||||
final VoidCallback onDelete;
|
||||
|
||||
const _TrashDesktopRow({
|
||||
required this.kind,
|
||||
required this.name,
|
||||
required this.col2,
|
||||
required this.col3,
|
||||
required this.onRestore,
|
||||
required this.onDelete,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final metaStyle = NooText.meta.copyWith(color: colors.fg3);
|
||||
|
||||
return SizedBox(
|
||||
height: NooSizes.rowDesktop,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: NooSpace.sm),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Row(
|
||||
children: [
|
||||
NooFileTile(kind: kind, size: NooFileTileSize.desktop),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: NooSpace.md),
|
||||
],
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 180,
|
||||
child: Text(
|
||||
col2,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: metaStyle,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 160,
|
||||
child: Text(
|
||||
col3,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: metaStyle,
|
||||
),
|
||||
),
|
||||
SizedBox(
|
||||
width: 120,
|
||||
child: FittedBox(
|
||||
fit: BoxFit.scaleDown,
|
||||
alignment: Alignment.centerRight,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
NooButton(
|
||||
variant: NooButtonVariant.tonal,
|
||||
size: NooButtonSize.xs,
|
||||
onTap: onRestore,
|
||||
child: const Text('Restore'),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.danger,
|
||||
size: NooButtonSize.xs,
|
||||
onTap: onDelete,
|
||||
child: const Text('Delete'),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,83 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../models/app_tab.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import '../providers/session_controller.dart';
|
||||
import '../providers/settings_controller.dart';
|
||||
import '../providers/trash_controller.dart';
|
||||
import 'noo/core/noo_avatar.dart';
|
||||
import 'noo/nav/noo_drawer.dart';
|
||||
import 'shell/shell_common.dart';
|
||||
|
||||
/// The mobile drawer (DESIGN_SYSTEM.md 2 "Drawer" / 3; `drawer` in
|
||||
/// `Mobile Screen.dc.html`): account block, storage bar, the tabs not
|
||||
/// pinned to the bottom nav bar ("More"), Settings, and an "Edit tabs"
|
||||
/// link. Opened the same way as before (menu icon in [AppTopBar]), but
|
||||
/// built on [NooDrawer] instead of the old Material [Drawer] + ad hoc rows.
|
||||
///
|
||||
/// Tapping a "More" tab switches the shell straight to it (rather than
|
||||
/// pushing it as a standalone screen, like the pre-rework `MoreTabsButton`
|
||||
/// did) via `SettingsController.requestTab` - the same one-shot mechanism
|
||||
/// `SearchView`/`FavoritesView`/`ShareUploadView` already use to jump the
|
||||
/// shell to a tab from outside it, so `MainShellView` needs no extra
|
||||
/// plumbing to support it.
|
||||
class AppDrawer extends StatelessWidget {
|
||||
const AppDrawer({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final session = context.watch<SessionController>();
|
||||
final settings = context.watch<SettingsController>();
|
||||
final quota = context.watch<FilesController>().quota;
|
||||
// Cheap and already loaded when the Trash tab has been visited this
|
||||
// session - not worth a fetch just to populate a drawer badge.
|
||||
final trashCount = context.watch<TrashController>().items.length;
|
||||
final hiddenTabs = settings.tabOrder
|
||||
.where((t) => settings.hiddenTabs.contains(t))
|
||||
.toList();
|
||||
|
||||
void closeAndOpenSettings() {
|
||||
Navigator.pop(context);
|
||||
openSettings(context);
|
||||
}
|
||||
|
||||
return NooDrawer(
|
||||
account: NooDrawerAccount(
|
||||
avatar: NooAvatar(
|
||||
initials: accountInitial(session.username),
|
||||
current: true,
|
||||
size: 48,
|
||||
),
|
||||
name: session.username,
|
||||
subtitle: serverHost(session.serverUrl),
|
||||
onTap: closeAndOpenSettings,
|
||||
onSwitchAccount: () => showAccountSwitcher(context),
|
||||
),
|
||||
storage: NooDrawerStorage(
|
||||
value: quotaFraction(quota),
|
||||
label: quotaUsedLabel(quota),
|
||||
),
|
||||
moreItems: [
|
||||
for (final tab in hiddenTabs)
|
||||
NooDrawerItem(
|
||||
icon: tab.icon,
|
||||
label: tab.label,
|
||||
count: tab == AppTab.trash && trashCount > 0
|
||||
? '$trashCount'
|
||||
: null,
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
settings.requestTab(tab);
|
||||
},
|
||||
),
|
||||
],
|
||||
settings: NooDrawerItem(
|
||||
icon: LucideIcons.settings,
|
||||
label: 'Settings',
|
||||
onTap: closeAndOpenSettings,
|
||||
),
|
||||
footer: NooDrawerLink(onTap: closeAndOpenSettings),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../models/app_tab.dart';
|
||||
import 'create_menu.dart';
|
||||
import 'noo/nav/noo_top_bar.dart';
|
||||
import 'shell/shell_common.dart';
|
||||
|
||||
/// The shell's mobile top bar (DESIGN_SYSTEM.md 3, "Mobile"): every regular
|
||||
/// tab now gets the same chrome (this used to only wrap Files - the other
|
||||
/// tabs built their own via `SyncedHeaderScaffold`, which the rework drops).
|
||||
/// Built on [NooTopBar]:
|
||||
///
|
||||
/// - iOS: `menu` leading, `plus` (Files only - no tab besides Files has a
|
||||
/// create/upload flow) and the account avatar trailing, then the large
|
||||
/// title, then an inline search field that opens [SearchView].
|
||||
/// - Android: `menu`, title, `search` and avatar actions. Upload has no
|
||||
/// top-bar icon here - it's the [NooFab] `MainShellView` shows instead.
|
||||
///
|
||||
/// [style] is resolved by the caller (`NooLayout.navStyle`) rather than
|
||||
/// read from context here, since [preferredSize] is a plain getter with no
|
||||
/// BuildContext - the same reason [NooTopBar] itself takes it as a field.
|
||||
class AppTopBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final NooNavStyle style;
|
||||
final AppTab tab;
|
||||
|
||||
const AppTopBar({super.key, required this.style, required this.tab});
|
||||
|
||||
bool get _ios => style == NooNavStyle.ios;
|
||||
|
||||
@override
|
||||
Size get preferredSize => NooTopBar(
|
||||
style: style,
|
||||
title: tab.label,
|
||||
// A throwaway placeholder purely to make preferredSize's "is there a
|
||||
// search slot" check match what build() actually shows - never
|
||||
// inserted into the tree, so its content doesn't matter.
|
||||
search: _ios ? const SizedBox.shrink() : null,
|
||||
).preferredSize;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return NooTopBar(
|
||||
style: style,
|
||||
title: tab.label,
|
||||
onMenu: () => Scaffold.of(context).openDrawer(),
|
||||
actions: [
|
||||
if (!_ios)
|
||||
NooTopBarButton(
|
||||
icon: LucideIcons.search,
|
||||
tooltip: 'Search',
|
||||
onTap: () => openSearch(context),
|
||||
),
|
||||
if (_ios && tab == AppTab.files)
|
||||
NooTopBarButton(
|
||||
icon: LucideIcons.plus,
|
||||
tooltip: 'Create',
|
||||
onTap: () => showCreateMenu(context),
|
||||
),
|
||||
ShellAvatarButton(hitBox: _ios ? 44 : 48),
|
||||
],
|
||||
search: _ios ? const ShellSearchLauncher(ios: true) : null,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../models/app_tab.dart';
|
||||
import 'noo/nav/noo_bottom_bar.dart';
|
||||
|
||||
/// Adapts the app's [AppTab] model onto [NooBottomBar]'s generic
|
||||
/// [NooNavDestination] list, so `MainShellView` only deals in tabs and
|
||||
/// doesn't need to import `noo/nav` itself. [selectedIndex] may be -1 (no
|
||||
/// destination highlighted) when the shell is showing a tab opened from the
|
||||
/// drawer's "More" list that isn't one of the pinned [tabs].
|
||||
class BottomNavBar extends StatelessWidget {
|
||||
final NooNavStyle style;
|
||||
final List<AppTab> tabs;
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onDestinationSelected;
|
||||
|
||||
const BottomNavBar({
|
||||
super.key,
|
||||
required this.style,
|
||||
required this.tabs,
|
||||
required this.selectedIndex,
|
||||
required this.onDestinationSelected,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return NooBottomBar(
|
||||
style: style,
|
||||
destinations: [
|
||||
for (final tab in tabs)
|
||||
NooNavDestination(icon: tab.icon, label: tab.label),
|
||||
],
|
||||
selectedIndex: selectedIndex,
|
||||
onSelected: onDestinationSelected,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,7 +1,13 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
|
||||
/// Tappable "Home / Folder / Sub-folder" trail shown whenever the user has
|
||||
/// navigated below the root, in both the Files and Photos tabs.
|
||||
/// navigated below the root - now only used by `ShareUploadView` and
|
||||
/// `MoveCopyDestinationPicker` (Files/Photos moved to their own noo-styled
|
||||
/// `FileBreadcrumbRow`), so this is free to carry noo tokens directly rather
|
||||
/// than staying on the old Material look. Same behaviour: every crumb but
|
||||
/// the last is tappable, jumping back to that depth.
|
||||
class Breadcrumbs extends StatelessWidget {
|
||||
final List<String> pathStack;
|
||||
final ValueChanged<int> onTap;
|
||||
@@ -19,8 +25,7 @@ class Breadcrumbs extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final lastIndex = pathStack.length - 1;
|
||||
|
||||
return SingleChildScrollView(
|
||||
@@ -32,37 +37,42 @@ class Breadcrumbs extends StatelessWidget {
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 2),
|
||||
child: Icon(
|
||||
Icons.chevron_right_rounded,
|
||||
size: 16,
|
||||
color: colorScheme.outlineVariant,
|
||||
LucideIcons.chevronRight,
|
||||
size: 14,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
if (i == lastIndex)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: Text(
|
||||
_labelFor(i),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
color: colorScheme.onSurface,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
// A chip's whole pill is the tap target (not just the text),
|
||||
// so the previous plain-text crumbs were fiddly to hit.
|
||||
ActionChip(
|
||||
label: Text(_labelFor(i)),
|
||||
labelStyle: theme.textTheme.bodySmall?.copyWith(
|
||||
// The whole pill is the tap target, not just the text.
|
||||
InkWell(
|
||||
onTap: () => onTap(i),
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
child: Text(
|
||||
_labelFor(i),
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colorScheme.primary,
|
||||
color: colors.accentText,
|
||||
),
|
||||
),
|
||||
),
|
||||
onPressed: () => onTap(i),
|
||||
backgroundColor: colorScheme.surfaceContainerHigh,
|
||||
side: BorderSide.none,
|
||||
visualDensity: VisualDensity.compact,
|
||||
materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 4),
|
||||
),
|
||||
],
|
||||
],
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
import 'package:file_picker/file_picker.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import '../services/share_intent_service.dart';
|
||||
import '../views/share_upload_view.dart';
|
||||
import 'noo/core/noo_button.dart';
|
||||
import 'noo/lists/noo_grouped_list.dart';
|
||||
import 'noo/lists/noo_settings_row.dart';
|
||||
import 'noo/overlays/noo_dialog.dart';
|
||||
import 'noo/overlays/noo_sheet.dart';
|
||||
import 'noo/overlays/noo_text_field.dart';
|
||||
|
||||
/// The Files tab's "+"/FAB action: upload a file or create a folder into
|
||||
/// the current folder. Shared by `FilesView`'s own create button and
|
||||
/// `MainShellView`'s FAB (the Noo Design System project's FAB component),
|
||||
/// since both need to trigger the exact same flow.
|
||||
void showCreateMenu(BuildContext context) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
NooGroupedList(
|
||||
children: [
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.upload,
|
||||
label: const Text('Upload file'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_pickAndUploadFile(context);
|
||||
},
|
||||
),
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.folder,
|
||||
label: const Text('New folder'),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
_showCreateFolderDialog(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _showCreateFolderDialog(BuildContext context) {
|
||||
final files = context.read<FilesController>();
|
||||
final controller = TextEditingController();
|
||||
|
||||
Future<void> submit(BuildContext ctx) async {
|
||||
final name = controller.text.trim();
|
||||
if (name.isEmpty) return;
|
||||
Navigator.pop(ctx);
|
||||
final success = await files.createFolder(name);
|
||||
if (ctx.mounted) {
|
||||
ScaffoldMessenger.of(ctx).showSnackBar(
|
||||
SnackBar(
|
||||
content: Text(success ? 'Created folder $name' : 'Failed to create folder'),
|
||||
behavior: SnackBarBehavior.floating,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
showNooDialog<void>(
|
||||
context,
|
||||
title: 'New folder',
|
||||
children: [
|
||||
NooTextField(
|
||||
controller: controller,
|
||||
placeholder: 'e.g. Finance',
|
||||
autofocus: true,
|
||||
onSurface: false,
|
||||
onSubmitted: (_) => submit(context),
|
||||
),
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
spacing: 10,
|
||||
children: [
|
||||
NooButton(
|
||||
variant: NooButtonVariant.secondary,
|
||||
onTap: () => Navigator.pop(context),
|
||||
child: const Text('Cancel'),
|
||||
),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
onTap: () => submit(context),
|
||||
child: const Text('Create'),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
// Mirrors `main.dart`'s `_handleSharedFiles` exactly, so picking a file via
|
||||
// "+"/the FAB lands on the same destination-picker screen and background
|
||||
// foreground-service upload as receiving one via Android's "Share to..."
|
||||
// sheet does, rather than a separate in-app-only upload path.
|
||||
Future<void> _pickAndUploadFile(BuildContext context) async {
|
||||
final picked = await FilePicker.pickFiles();
|
||||
if (picked.isEmpty) return;
|
||||
final files = picked
|
||||
.where((f) => f.path != null)
|
||||
.map(
|
||||
(f) => SharedFileRef(
|
||||
uri: Uri.file(f.path!).toString(),
|
||||
name: f.name,
|
||||
size: f.lengthSync(),
|
||||
),
|
||||
)
|
||||
.toList();
|
||||
if (files.isEmpty || !context.mounted) return;
|
||||
|
||||
Navigator.of(
|
||||
context,
|
||||
).push(MaterialPageRoute(builder: (_) => ShareUploadView(files: files)));
|
||||
}
|
||||
@@ -1,11 +1,18 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../../providers/item_operations.dart';
|
||||
import '../../providers/session_controller.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../noo/lists/noo_grouped_list.dart';
|
||||
import '../noo/media/noo_activity_item.dart';
|
||||
import '../noo/media/noo_photo_tile.dart';
|
||||
|
||||
/// Per-file activity feed — same list-item look as the account-wide
|
||||
/// Activity tab (activity_view.dart), scoped to a single item.
|
||||
/// Per-file activity feed - the same actor/verb/tail mapping and
|
||||
/// avatar-palette convention as the account-wide Activity tab
|
||||
/// (`activity_view.dart`), scoped to a single item.
|
||||
class DetailsActivityTab extends StatefulWidget {
|
||||
final NextcloudItem item;
|
||||
|
||||
@@ -36,107 +43,52 @@ class _DetailsActivityTabState extends State<DetailsActivityTab> {
|
||||
_requested = true;
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => _load());
|
||||
}
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final colors = context.nooColors;
|
||||
final session = context.watch<SessionController>();
|
||||
|
||||
if (_isLoading) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 32),
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
);
|
||||
}
|
||||
if (_activities.isEmpty) {
|
||||
return Center(
|
||||
child: Text(
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 32),
|
||||
child: Center(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(LucideIcons.activity, size: 40, color: colors.fg3),
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
Text(
|
||||
'No recent activity',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
style: NooText.cardTitle.copyWith(fontSize: 16, color: colors.fg2),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView.builder(
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
|
||||
itemCount: _activities.length,
|
||||
itemBuilder: (context, index) {
|
||||
final act = _activities[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 12),
|
||||
child: Container(
|
||||
padding: const EdgeInsets.all(16),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerLow,
|
||||
borderRadius: BorderRadius.circular(20),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.2),
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
return NooGroupedList(
|
||||
children: [
|
||||
Container(
|
||||
padding: const EdgeInsets.all(10),
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primaryContainer,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
act.icon,
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
act.title,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 14,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
DateFormat.jm().format(act.timestamp),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 11,
|
||||
for (final act in _activities)
|
||||
ColoredBox(
|
||||
color: colors.surface,
|
||||
child: NooActivityItem(
|
||||
actor: act.author,
|
||||
verb: act.title,
|
||||
tail: act.subject.isNotEmpty && act.subject != act.title
|
||||
? act.subject
|
||||
: null,
|
||||
time: DateFormat.yMMMd().add_jm().format(act.timestamp),
|
||||
avatarColor: NooPhotoTile.paletteColor(act.author.hashCode),
|
||||
currentUser:
|
||||
act.author.toLowerCase() == session.username.toLowerCase(),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
act.subject,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
'By ${act.author} • ${DateFormat.MMMd().format(act.timestamp)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.primary,
|
||||
fontWeight: FontWeight.w500,
|
||||
fontSize: 11,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,21 +1,19 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../noo/lists/noo_grouped_list.dart';
|
||||
import '../synced_header_scaffold.dart' show formatBytes;
|
||||
|
||||
/// Plain metadata tab of the Details sheet — name, type, size, location,
|
||||
/// and dates. No network calls, so no loading state needed.
|
||||
/// Plain metadata list of the Details sheet/dialog - name, type, size,
|
||||
/// location, and dates. No network calls, so no loading state needed.
|
||||
class DetailsInfoTab extends StatelessWidget {
|
||||
final NextcloudItem item;
|
||||
final ScrollController? scrollController;
|
||||
|
||||
const DetailsInfoTab({super.key, required this.item, this.scrollController});
|
||||
const DetailsInfoTab({super.key, required this.item});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
final rows = <(String, String)>[
|
||||
('Name', item.name),
|
||||
('Type', item.isFolder ? 'Folder' : (item.mimeType ?? 'File')),
|
||||
@@ -26,15 +24,28 @@ class DetailsInfoTab extends StatelessWidget {
|
||||
('Favorite', item.isFavorite ? 'Yes' : 'No'),
|
||||
];
|
||||
|
||||
return ListView.separated(
|
||||
controller: scrollController,
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
|
||||
itemCount: rows.length,
|
||||
separatorBuilder: (context, index) => const Divider(height: 1),
|
||||
itemBuilder: (context, index) {
|
||||
final (label, value) = rows[index];
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
return NooGroupedList(
|
||||
children: [for (final row in rows) _InfoRow(label: row.$1, value: row.$2)],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _InfoRow extends StatelessWidget {
|
||||
final String label;
|
||||
final String value;
|
||||
|
||||
const _InfoRow({required this.label, required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return ColoredBox(
|
||||
color: colors.surface,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.md,
|
||||
vertical: NooSpace.sm,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
@@ -42,23 +53,22 @@ class DetailsInfoTab extends StatelessWidget {
|
||||
width: 96,
|
||||
child: Text(
|
||||
label,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
style: NooText.body.copyWith(fontSize: 14, color: colors.fg3),
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
value,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,160 +1,157 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:path/path.dart' as p;
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../gradual_bottom_sheet.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../noo/core/noo_segmented_control.dart';
|
||||
import '../noo/files/noo_file_kind.dart';
|
||||
import '../noo/files/noo_file_tile.dart';
|
||||
import '../noo/noo_layout.dart';
|
||||
import '../noo/overlays/noo_dialog.dart';
|
||||
import '../noo/overlays/noo_overlay_header.dart';
|
||||
import '../noo/overlays/noo_sheet.dart';
|
||||
import '../synced_header_scaffold.dart' show formatBytes;
|
||||
import 'details_activity_tab.dart';
|
||||
import 'details_info_tab.dart';
|
||||
import 'details_versions_tab.dart';
|
||||
|
||||
IconData _detailsItemIcon(NextcloudItemType type) {
|
||||
switch (type) {
|
||||
case NextcloudItemType.folder:
|
||||
return Icons.folder_rounded;
|
||||
case NextcloudItemType.image:
|
||||
return Icons.image_rounded;
|
||||
case NextcloudItemType.video:
|
||||
return Icons.movie_rounded;
|
||||
case NextcloudItemType.audio:
|
||||
return Icons.audiotrack_rounded;
|
||||
case NextcloudItemType.document:
|
||||
return Icons.description_rounded;
|
||||
case NextcloudItemType.archive:
|
||||
return Icons.folder_zip_rounded;
|
||||
case NextcloudItemType.file:
|
||||
return Icons.insert_drive_file_rounded;
|
||||
}
|
||||
/// The file-type tile every per-item sheet/dialog opens on
|
||||
/// (`DESIGN_SYSTEM.md` §1.2/§4) - shared by [DetailsSheet] and [ShareSheet]
|
||||
/// so both overlays for the same item use the same header tile.
|
||||
Widget detailsFileTile(
|
||||
NextcloudItem item, {
|
||||
NooFileTileSize size = NooFileTileSize.header,
|
||||
}) {
|
||||
return NooFileTile(
|
||||
kind: NooFileKind.from(
|
||||
name: item.name,
|
||||
mimeType: item.mimeType,
|
||||
isDirectory: item.isFolder,
|
||||
),
|
||||
size: size,
|
||||
);
|
||||
}
|
||||
|
||||
/// Reusable "Details" bottom sheet for a single file/folder — Info,
|
||||
/// Versions, and Activity tabs. Sharing lives in its own sheet
|
||||
/// ([ShareSheet]), triggered separately from wherever a "Share" action
|
||||
/// appears. Triggered from long-press selection (exactly one item), the
|
||||
/// media viewer's action bar, and the "open externally" flow for
|
||||
/// unsupported file types.
|
||||
/// The header's meta subtitle - "12.3 KB · Documents" for a file, "Folder"
|
||||
/// for a folder (`DESIGN_SYSTEM.md` §4: "size · folder").
|
||||
String detailsMetaLine(NextcloudItem item) {
|
||||
if (item.isFolder) return 'Folder';
|
||||
final parent = p.basename(p.dirname(item.path));
|
||||
final location = parent.isEmpty || parent == '.' || parent == '/'
|
||||
? 'Home'
|
||||
: parent;
|
||||
return '${formatBytes(item.size)} · $location';
|
||||
}
|
||||
|
||||
enum _DetailsTab { info, versions, activity }
|
||||
|
||||
/// Reusable "Details" bottom sheet/dialog for a single file/folder - Info,
|
||||
/// Versions and Activity switched by a segmented control (there's no
|
||||
/// tab-strip component in the noo kit, so this is the closest fit - see the
|
||||
/// rebuild report). Sharing lives in its own sheet ([ShareSheet]), triggered
|
||||
/// separately from wherever a "Share" action appears. Triggered from
|
||||
/// long-press selection (exactly one item), the media viewer's action bar,
|
||||
/// and the "open externally" flow for unsupported file types.
|
||||
///
|
||||
/// Only used directly on mobile (bundles its own [NooOverlayHeader]); the
|
||||
/// desktop path in [show] passes [_DetailsBody] straight to [showNooDialog],
|
||||
/// which renders the header itself via `leading`/`title`/`subtitle`.
|
||||
class DetailsSheet extends StatelessWidget {
|
||||
final NextcloudItem item;
|
||||
|
||||
const DetailsSheet({super.key, required this.item});
|
||||
|
||||
static Future<void> show(BuildContext context, NextcloudItem item) {
|
||||
return showGradualBottomSheet(
|
||||
if (NooLayout.isDesktop(context)) {
|
||||
return showNooDialog(
|
||||
context,
|
||||
builder: (context, scrollController) => DetailsSheet(item: item),
|
||||
leading: detailsFileTile(item),
|
||||
title: item.name,
|
||||
subtitle: detailsMetaLine(item),
|
||||
children: [_DetailsBody(item: item)],
|
||||
);
|
||||
}
|
||||
return showNooSheet(context, children: [DetailsSheet(item: item)]);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return DefaultTabController(
|
||||
length: 3,
|
||||
child: Column(
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
DetailsHeader(item: item),
|
||||
// Icon size matches the bottom nav bar's own tab icons
|
||||
// (FloatingBottomNavBar) rather than TabBar's oversized default,
|
||||
// so a "tabs" affordance reads the same size everywhere in the
|
||||
// app.
|
||||
const TabBar(
|
||||
tabs: [
|
||||
Tab(
|
||||
icon: Icon(Icons.info_outline_rounded, size: 22),
|
||||
text: 'Info',
|
||||
),
|
||||
Tab(
|
||||
icon: Icon(Icons.history_rounded, size: 22),
|
||||
text: 'Versions',
|
||||
),
|
||||
Tab(
|
||||
icon: Icon(Icons.electric_bolt_rounded, size: 22),
|
||||
text: 'Activity',
|
||||
NooOverlayHeader(
|
||||
leading: detailsFileTile(item),
|
||||
title: item.name,
|
||||
subtitle: detailsMetaLine(item),
|
||||
onClose: () => Navigator.pop(context),
|
||||
),
|
||||
const SizedBox(height: NooSpace.lg),
|
||||
_DetailsBody(item: item),
|
||||
],
|
||||
),
|
||||
Expanded(
|
||||
child: TabBarView(
|
||||
children: [
|
||||
DetailsInfoTab(item: item),
|
||||
DetailsVersionsTab(item: item),
|
||||
DetailsActivityTab(item: item),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Icon/name/size/date row shared by [DetailsSheet], the media viewer's
|
||||
/// collapsed "peek" state (which shows just this, before the user drags the
|
||||
/// sheet open far enough to reveal the tabs), and [ShareSheet]'s own title
|
||||
/// (so every per-item bottom sheet opens on the same header instead of
|
||||
/// [ShareSheet] alone using a bare title `Text`).
|
||||
class DetailsHeader extends StatelessWidget {
|
||||
/// The segmented control plus whichever tab's content it selects. A private
|
||||
/// [StatefulWidget] rather than three fields on [DetailsSheet] so the
|
||||
/// selection survives independently of how the header/container around it
|
||||
/// is built (mobile embeds this once, desktop hands it to [showNooDialog]
|
||||
/// directly). All three tabs are built once and kept mounted in an
|
||||
/// [IndexedStack] rather than swapped in/out of the tree - Versions and
|
||||
/// Activity each fetch on their own first build (see their `_requested`
|
||||
/// guard), so switching tabs via a bare `switch` on the selected type would
|
||||
/// tear down and rebuild whichever tab isn't showing, discarding its
|
||||
/// fetched data and re-requesting it every time the user switched back.
|
||||
class _DetailsBody extends StatefulWidget {
|
||||
final NextcloudItem item;
|
||||
|
||||
/// Defaults to this widget's own standalone inset ([DetailsSheet]); a
|
||||
/// caller whose surrounding scroll view already applies horizontal
|
||||
/// padding (e.g. [ShareSheet]'s `ListView`) should pass a padding with
|
||||
/// zero left/right to avoid doubling it up.
|
||||
final EdgeInsetsGeometry padding;
|
||||
const _DetailsBody({required this.item});
|
||||
|
||||
const DetailsHeader({
|
||||
super.key,
|
||||
required this.item,
|
||||
this.padding = const EdgeInsets.fromLTRB(20, 12, 20, 8),
|
||||
});
|
||||
@override
|
||||
State<_DetailsBody> createState() => _DetailsBodyState();
|
||||
}
|
||||
|
||||
class _DetailsBodyState extends State<_DetailsBody> {
|
||||
_DetailsTab _tab = _DetailsTab.info;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
return Padding(
|
||||
padding: padding,
|
||||
child: Row(
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Container(
|
||||
width: 44,
|
||||
height: 44,
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.primaryContainer,
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
NooSegmentedControl<_DetailsTab>(
|
||||
onSurface: true,
|
||||
fill: true,
|
||||
value: _tab,
|
||||
onChanged: (tab) => setState(() => _tab = tab),
|
||||
options: const [
|
||||
NooSegmentOption(
|
||||
value: _DetailsTab.info,
|
||||
icon: LucideIcons.info,
|
||||
label: 'Info',
|
||||
),
|
||||
child: Icon(
|
||||
_detailsItemIcon(item.type),
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
size: 22,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
item.isFolder
|
||||
? DateFormat.yMMMd().format(item.lastModified)
|
||||
: '${formatBytes(item.size)} • ${DateFormat.yMMMd().format(item.lastModified)}',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
NooSegmentOption(
|
||||
value: _DetailsTab.versions,
|
||||
icon: LucideIcons.history,
|
||||
label: 'Versions',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: _DetailsTab.activity,
|
||||
icon: LucideIcons.activity,
|
||||
label: 'Activity',
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: NooSpace.lg),
|
||||
IndexedStack(
|
||||
index: _tab.index,
|
||||
children: [
|
||||
DetailsInfoTab(item: widget.item),
|
||||
DetailsVersionsTab(item: widget.item),
|
||||
DetailsActivityTab(item: widget.item),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,20 @@
|
||||
import 'package:file_saver/file_saver.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:intl/intl.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:path/path.dart' as p;
|
||||
import 'package:path_provider/path_provider.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../../models/nextcloud_file_version.dart';
|
||||
import '../../models/nextcloud_item.dart';
|
||||
import '../../providers/item_operations.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
import '../noo/files/noo_file_kind.dart';
|
||||
import '../noo/files/noo_file_tile.dart';
|
||||
import '../noo/lists/noo_grouped_list.dart';
|
||||
import '../synced_header_scaffold.dart' show formatBytes;
|
||||
|
||||
/// File version history — a synthetic "Current version" row (from the
|
||||
/// File version history - a synthetic "Current version" row (from the
|
||||
/// item's own metadata) followed by whatever the DAV versions endpoint
|
||||
/// returns, each with Restore/Download actions.
|
||||
class DetailsVersionsTab extends StatefulWidget {
|
||||
@@ -75,7 +80,7 @@ class _DetailsVersionsTabState extends State<DetailsVersionsTab> {
|
||||
await FileSaver.instance.saveFile(
|
||||
name: baseName,
|
||||
filePath: tempPath,
|
||||
ext: ext,
|
||||
fileExtension: ext,
|
||||
);
|
||||
if (!mounted) return;
|
||||
messenger.showSnackBar(
|
||||
@@ -101,11 +106,12 @@ class _DetailsVersionsTabState extends State<DetailsVersionsTab> {
|
||||
_requested = true;
|
||||
WidgetsBinding.instance.addPostFrameCallback((_) => _load());
|
||||
}
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
|
||||
if (_isLoading) {
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
return const Padding(
|
||||
padding: EdgeInsets.symmetric(vertical: 32),
|
||||
child: Center(child: CircularProgressIndicator()),
|
||||
);
|
||||
}
|
||||
|
||||
final items = [
|
||||
@@ -117,44 +123,126 @@ class _DetailsVersionsTabState extends State<DetailsVersionsTab> {
|
||||
),
|
||||
..._versions,
|
||||
];
|
||||
|
||||
return ListView.separated(
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
|
||||
itemCount: items.length,
|
||||
separatorBuilder: (context, index) => const SizedBox(height: 4),
|
||||
itemBuilder: (context, index) {
|
||||
final version = items[index];
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: CircleAvatar(
|
||||
backgroundColor: colorScheme.primaryContainer,
|
||||
child: Icon(
|
||||
Icons.history_rounded,
|
||||
color: colorScheme.onPrimaryContainer,
|
||||
size: 20,
|
||||
),
|
||||
),
|
||||
title: Text(
|
||||
version.isCurrent
|
||||
? 'Current version'
|
||||
: DateFormat.yMMMd().add_jm().format(version.timestamp),
|
||||
),
|
||||
subtitle: Text(
|
||||
'${DateFormat.yMMMd().format(version.timestamp)} • ${formatBytes(version.size)}',
|
||||
),
|
||||
trailing: version.isCurrent
|
||||
? null
|
||||
: PopupMenuButton<String>(
|
||||
onSelected: (value) => value == 'restore'
|
||||
? _restore(version)
|
||||
: _download(version),
|
||||
itemBuilder: (context) => const [
|
||||
PopupMenuItem(value: 'restore', child: Text('Restore')),
|
||||
PopupMenuItem(value: 'download', child: Text('Download')),
|
||||
],
|
||||
),
|
||||
final kind = NooFileKind.from(
|
||||
name: widget.item.name,
|
||||
mimeType: widget.item.mimeType,
|
||||
isDirectory: false,
|
||||
);
|
||||
},
|
||||
|
||||
return NooGroupedList(
|
||||
children: [
|
||||
for (final version in items)
|
||||
_VersionRow(
|
||||
kind: kind,
|
||||
version: version,
|
||||
onRestore: () => _restore(version),
|
||||
onDownload: () => _download(version),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VersionRow extends StatelessWidget {
|
||||
final NooFileKind kind;
|
||||
final NextcloudFileVersion version;
|
||||
final VoidCallback onRestore;
|
||||
final VoidCallback onDownload;
|
||||
|
||||
const _VersionRow({
|
||||
required this.kind,
|
||||
required this.version,
|
||||
required this.onRestore,
|
||||
required this.onDownload,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return ColoredBox(
|
||||
color: colors.surface,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.md,
|
||||
vertical: NooSpace.sm,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
NooFileTile(kind: kind, size: NooFileTileSize.activity),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
version.isCurrent
|
||||
? 'Current version'
|
||||
: DateFormat.yMMMd().add_jm().format(version.timestamp),
|
||||
style: NooText.bodyL.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 2),
|
||||
Text(
|
||||
'${formatBytes(version.size)} · ${DateFormat.yMMMd().format(version.timestamp)}',
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (!version.isCurrent) ...[
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
_RowIconButton(
|
||||
icon: LucideIcons.rotateCcw,
|
||||
tooltip: 'Restore',
|
||||
onTap: onRestore,
|
||||
),
|
||||
const SizedBox(width: NooSpace.xxs),
|
||||
_RowIconButton(
|
||||
icon: LucideIcons.download,
|
||||
tooltip: 'Download',
|
||||
onTap: onDownload,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A small round icon button matching [NooCloseButton]'s visual language
|
||||
/// (surface-2 circle) but for an arbitrary action - promote this to `noo/`
|
||||
/// if another row-level icon action needs the same treatment.
|
||||
class _RowIconButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String tooltip;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _RowIconButton({
|
||||
required this.icon,
|
||||
required this.tooltip,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: 32,
|
||||
height: 32,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(color: colors.surface2, shape: BoxShape.circle),
|
||||
child: Icon(icon, size: 16, color: colors.fg2),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../theme/design_tokens.dart';
|
||||
|
||||
/// A noo-styled "Home / Folder / Sub-folder" trail for the Files/Offline
|
||||
/// tabs - a private restyle of the shared `Breadcrumbs` widget (which other
|
||||
/// screens still use in its old Material look), so this screen's crumbs use
|
||||
/// noo tokens without touching that shared file. Same behaviour: every
|
||||
/// crumb but the last is tappable, jumping back to that depth.
|
||||
class FileBreadcrumbRow extends StatelessWidget {
|
||||
final List<String> pathStack;
|
||||
final ValueChanged<int> onTap;
|
||||
|
||||
const FileBreadcrumbRow({
|
||||
super.key,
|
||||
required this.pathStack,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
String _labelFor(int index) {
|
||||
if (index == 0) return 'Home';
|
||||
final segments = pathStack[index]
|
||||
.split('/')
|
||||
.where((s) => s.isNotEmpty)
|
||||
.toList();
|
||||
return segments.isEmpty ? 'Home' : segments.last;
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final lastIndex = pathStack.length - 1;
|
||||
|
||||
return SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
for (var i = 0; i < pathStack.length; i++) ...[
|
||||
if (i > 0)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 2),
|
||||
child: Icon(
|
||||
LucideIcons.chevronRight,
|
||||
size: 14,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
if (i == lastIndex)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: Text(
|
||||
_labelFor(i),
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
)
|
||||
else
|
||||
// The whole pill is the tap target, not just the text.
|
||||
InkWell(
|
||||
onTap: () => onTap(i),
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: 8,
|
||||
vertical: 4,
|
||||
),
|
||||
child: Text(
|
||||
_labelFor(i),
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colors.accentText,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
+195
-103
@@ -1,136 +1,228 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:material_symbols_icons/symbols.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../providers/files_controller.dart';
|
||||
import 'segmented_icon_toggle.dart';
|
||||
import 'sort_menu_button.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import 'noo/core/noo_chip.dart';
|
||||
import 'noo/core/noo_segmented_control.dart';
|
||||
import 'noo/core/noo_toggle.dart';
|
||||
import 'noo/lists/noo_grouped_list.dart';
|
||||
import 'noo/lists/noo_settings_row.dart';
|
||||
import 'noo/overlays/noo_sheet.dart';
|
||||
import 'sort_menu_button.dart' show sortFieldLabel;
|
||||
|
||||
/// The Files tab's sort/hidden/scope/type-filter/view-mode controls row,
|
||||
/// shared with the Offline tab so both read and write the exact same
|
||||
/// [FilesController] prefs. [folderPath] picks which folder's sort applies
|
||||
/// (the Files tab's current folder, or the folder being browsed offline).
|
||||
/// [showStorageScope] is off for Offline - a local mirror has no
|
||||
/// cloud/external distinction.
|
||||
String _typeFilterLabel(FilesTypeFilter filter) {
|
||||
switch (filter) {
|
||||
case FilesTypeFilter.all:
|
||||
return 'Filters';
|
||||
case FilesTypeFilter.filesOnly:
|
||||
return 'Files only';
|
||||
case FilesTypeFilter.foldersOnly:
|
||||
return 'Folders only';
|
||||
}
|
||||
}
|
||||
|
||||
/// The Files tab's sort/filter/view-mode row (Noo Design System project's
|
||||
/// Files screen: a sort chip, a filter chip, a spacer, then the list/grid
|
||||
/// segmented toggle) - shared with the Offline tab, which reads and writes
|
||||
/// the exact same [FilesController] prefs. [folderPath] picks which
|
||||
/// folder's sort applies. [showStorageScope] is off for Offline - a local
|
||||
/// mirror has no cloud/external distinction.
|
||||
///
|
||||
/// Hidden-files and storage-scope, which have no home in the mockup's
|
||||
/// simple two-chip row, live inside the filter chip's sheet instead of as
|
||||
/// their own row controls.
|
||||
///
|
||||
/// A plain `Row`, not a horizontally-scrolling one - it used to wrap in a
|
||||
/// `SingleChildScrollView`, which gives its child unbounded width, silently
|
||||
/// breaking the trailing `Spacer` (a flex child needs a bounded width to
|
||||
/// size against) and leaving the List/Grid toggle sitting right after the
|
||||
/// filter chip instead of pinned to the row's right edge. The two chips
|
||||
/// plus an icon-only toggle never come close to needing to scroll anyway.
|
||||
class FilesControlsRow extends StatelessWidget {
|
||||
final String folderPath;
|
||||
final bool showStorageScope;
|
||||
final ScrollController? scrollController;
|
||||
|
||||
const FilesControlsRow({
|
||||
super.key,
|
||||
required this.folderPath,
|
||||
this.showStorageScope = true,
|
||||
this.scrollController,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final files = context.watch<FilesController>();
|
||||
final filtersActive =
|
||||
files.filesTypeFilter != FilesTypeFilter.all ||
|
||||
files.showHiddenFiles ||
|
||||
(showStorageScope && files.storageScope != StorageScope.cloud);
|
||||
|
||||
return SizedBox(
|
||||
height: 44,
|
||||
child: SingleChildScrollView(
|
||||
controller: scrollController,
|
||||
scrollDirection: Axis.horizontal,
|
||||
child: Row(
|
||||
children: [
|
||||
IconButton(
|
||||
icon: Icon(
|
||||
files.sortAscendingFor(folderPath)
|
||||
? Icons.arrow_upward_rounded
|
||||
: Icons.arrow_downward_rounded,
|
||||
size: 20,
|
||||
),
|
||||
visualDensity: VisualDensity.compact,
|
||||
tooltip: files.sortAscendingFor(folderPath)
|
||||
? 'Ascending'
|
||||
: 'Descending',
|
||||
onPressed: () => files.toggleSortOrderFor(folderPath),
|
||||
),
|
||||
// A plain width, not Expanded - this row scrolls horizontally,
|
||||
// which gives every control unbounded width to lay out in, so a
|
||||
// flex child would throw.
|
||||
SizedBox(
|
||||
width: 130,
|
||||
child: SortMenuButton(
|
||||
field: files.sortFieldFor(folderPath),
|
||||
onChanged: (field) => files.setSortFieldFor(folderPath, field),
|
||||
),
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: files.showHiddenFiles
|
||||
? Icons.visibility_rounded
|
||||
: Icons.visibility_off_rounded,
|
||||
isSelected: files.showHiddenFiles,
|
||||
onTap: () => files.toggleShowHiddenFiles(),
|
||||
tooltip: 'Show hidden files',
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
if (showStorageScope) ...[
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Symbols.circles_rounded,
|
||||
isSelected: files.storageScope == StorageScope.cloud,
|
||||
onTap: () => files.setStorageScope(StorageScope.cloud),
|
||||
tooltip: 'Cloud storage',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Symbols.hard_drive_rounded,
|
||||
isSelected: files.storageScope == StorageScope.external,
|
||||
onTap: () => files.setStorageScope(StorageScope.external),
|
||||
tooltip: 'External storage',
|
||||
),
|
||||
],
|
||||
NooChip(
|
||||
icon: files.sortAscendingFor(folderPath)
|
||||
? LucideIcons.arrowUp
|
||||
: LucideIcons.arrowDown,
|
||||
onTap: () => _showSortSheet(context, files),
|
||||
child: Text(sortFieldLabel(files.sortFieldFor(folderPath))),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
],
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Icons.select_all_rounded,
|
||||
isSelected: files.filesTypeFilter == FilesTypeFilter.all,
|
||||
onTap: () => files.setFilesTypeFilter(FilesTypeFilter.all),
|
||||
tooltip: 'Files & folders',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.insert_drive_file_outlined,
|
||||
isSelected:
|
||||
files.filesTypeFilter == FilesTypeFilter.filesOnly,
|
||||
onTap: () =>
|
||||
files.setFilesTypeFilter(FilesTypeFilter.filesOnly),
|
||||
tooltip: 'Files only',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.folder_outlined,
|
||||
isSelected:
|
||||
files.filesTypeFilter == FilesTypeFilter.foldersOnly,
|
||||
onTap: () =>
|
||||
files.setFilesTypeFilter(FilesTypeFilter.foldersOnly),
|
||||
tooltip: 'Folders only',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
SegmentedIconGroup(
|
||||
children: [
|
||||
ToggleIconButton(
|
||||
icon: Icons.view_list_rounded,
|
||||
isSelected: !files.isGridView,
|
||||
onTap: () => files.setGridView(false),
|
||||
tooltip: 'List view',
|
||||
),
|
||||
ToggleIconButton(
|
||||
icon: Icons.grid_view_rounded,
|
||||
isSelected: files.isGridView,
|
||||
onTap: () => files.setGridView(true),
|
||||
tooltip: 'Grid view',
|
||||
NooChip(
|
||||
icon: LucideIcons.filter,
|
||||
trailing: NooChipTrailing.menu,
|
||||
selected: filtersActive,
|
||||
onTap: () => _showFilterSheet(context, files),
|
||||
child: Text(_typeFilterLabel(files.filesTypeFilter)),
|
||||
),
|
||||
const Spacer(),
|
||||
NooSegmentedControl<bool>(
|
||||
iconOnly: true,
|
||||
value: files.isGridView,
|
||||
onChanged: files.setGridView,
|
||||
options: const [
|
||||
NooSegmentOption(value: false, icon: LucideIcons.list),
|
||||
NooSegmentOption(value: true, icon: LucideIcons.grid),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
void _showSortSheet(BuildContext context, FilesController files) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
// `showNooSheet`'s `children` are built once, up front - a bare
|
||||
// checkmark/value here would freeze at whatever it was when the
|
||||
// sheet opened, since tapping a row calls `files.set...` and
|
||||
// notifies the controller, not this already-built widget tree.
|
||||
// `ListenableBuilder` re-runs its `builder` on every
|
||||
// `FilesController.notifyListeners()` instead, so the selection
|
||||
// updates live - see the identical fix in `_showFilterSheet`.
|
||||
ListenableBuilder(
|
||||
listenable: files,
|
||||
builder: (context, _) => Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
NooSegmentedControl<bool>(
|
||||
fill: true,
|
||||
onSurface: true,
|
||||
value: files.sortAscendingFor(folderPath),
|
||||
onChanged: (asc) {
|
||||
if (asc != files.sortAscendingFor(folderPath)) {
|
||||
files.toggleSortOrderFor(folderPath);
|
||||
}
|
||||
},
|
||||
options: const [
|
||||
NooSegmentOption(
|
||||
value: true,
|
||||
icon: LucideIcons.arrowUp,
|
||||
label: 'Ascending',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: false,
|
||||
icon: LucideIcons.arrowDown,
|
||||
label: 'Descending',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 22),
|
||||
NooGroupedList(
|
||||
children: [
|
||||
for (final field in FileSortField.values)
|
||||
NooSettingsRow(
|
||||
label: Text(sortFieldLabel(field)),
|
||||
trailing: field == files.sortFieldFor(folderPath)
|
||||
? Icon(
|
||||
LucideIcons.check,
|
||||
size: 18,
|
||||
color: context.nooColors.accentText,
|
||||
)
|
||||
: null,
|
||||
onTap: () {
|
||||
files.setSortFieldFor(folderPath, field);
|
||||
Navigator.pop(context);
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _showFilterSheet(BuildContext context, FilesController files) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
// See `_showSortSheet`'s comment: without this, neither the type
|
||||
// filter's selected segment nor the toggles below would move until
|
||||
// the sheet is closed and reopened.
|
||||
ListenableBuilder(
|
||||
listenable: files,
|
||||
builder: (context, _) => Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
// Same "icon always, label only when selected" pill as
|
||||
// Photos' own type filter below - not a checkmark list, so
|
||||
// the two screens' filter sheets look and behave the same.
|
||||
NooSegmentedControl<FilesTypeFilter>(
|
||||
fill: true,
|
||||
onSurface: true,
|
||||
labelOnlySelected: true,
|
||||
value: files.filesTypeFilter,
|
||||
onChanged: files.setFilesTypeFilter,
|
||||
options: const [
|
||||
NooSegmentOption(
|
||||
value: FilesTypeFilter.all,
|
||||
icon: LucideIcons.layoutGrid,
|
||||
label: 'All',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: FilesTypeFilter.filesOnly,
|
||||
icon: LucideIcons.file,
|
||||
label: 'Files',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: FilesTypeFilter.foldersOnly,
|
||||
icon: LucideIcons.folder,
|
||||
label: 'Folders',
|
||||
),
|
||||
],
|
||||
),
|
||||
const SizedBox(height: 22),
|
||||
NooGroupedList(
|
||||
children: [
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.eye,
|
||||
label: const Text('Show hidden files'),
|
||||
trailing: NooToggle(
|
||||
checked: files.showHiddenFiles,
|
||||
onChanged: (_) => files.toggleShowHiddenFiles(),
|
||||
),
|
||||
),
|
||||
if (showStorageScope)
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.hardDrive,
|
||||
label: const Text('External storage'),
|
||||
trailing: NooToggle(
|
||||
checked: files.storageScope == StorageScope.external,
|
||||
onChanged: (external) => files.setStorageScope(
|
||||
external ? StorageScope.external : StorageScope.cloud,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,151 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'frosted_glass_container.dart';
|
||||
|
||||
class FloatingNavItem {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
|
||||
const FloatingNavItem({required this.label, required this.icon});
|
||||
}
|
||||
|
||||
/// A floating pill-shaped bottom navigation bar in the style of Google
|
||||
/// Photos' 2026 redesign: unselected destinations collapse to just their
|
||||
/// icon, the selected destination expands into an icon+label capsule, and
|
||||
/// a detached circular action (search) sits just outside the pill.
|
||||
class FloatingBottomNavBar extends StatelessWidget {
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onDestinationSelected;
|
||||
final List<FloatingNavItem> items;
|
||||
final VoidCallback? onSearchTap;
|
||||
final double opacity;
|
||||
final double blurSigma;
|
||||
|
||||
const FloatingBottomNavBar({
|
||||
super.key,
|
||||
required this.selectedIndex,
|
||||
required this.onDestinationSelected,
|
||||
required this.items,
|
||||
this.onSearchTap,
|
||||
this.opacity = 0.55,
|
||||
this.blurSigma = 28,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
return SafeArea(
|
||||
child: Align(
|
||||
alignment: Alignment.bottomCenter,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(bottom: 20, left: 20, right: 20),
|
||||
child: ConstrainedBox(
|
||||
constraints: const BoxConstraints(maxWidth: 480),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
_buildPill(context, colorScheme),
|
||||
const SizedBox(width: 10),
|
||||
_buildSearchButton(context, colorScheme),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildPill(BuildContext context, ColorScheme colorScheme) {
|
||||
return FrostedGlassContainer(
|
||||
opacity: opacity,
|
||||
blurSigma: blurSigma,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 6),
|
||||
// The selected item's label expands the pill, and with enough
|
||||
// tabs visible that can outgrow the available width (the
|
||||
// ConstrainedBox above caps it at 480, but the screen itself may
|
||||
// be narrower) - wrapped in a scroll view rather than a plain Row
|
||||
// so it degrades to a swipe instead of overflowing/clipping.
|
||||
child: SingleChildScrollView(
|
||||
scrollDirection: Axis.horizontal,
|
||||
physics: const BouncingScrollPhysics(),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: List.generate(items.length, (index) {
|
||||
final item = items[index];
|
||||
final isSelected = selectedIndex == index;
|
||||
|
||||
return InkWell(
|
||||
onTap: () => onDestinationSelected(index),
|
||||
borderRadius: BorderRadius.circular(26),
|
||||
splashColor: colorScheme.primary.withValues(alpha: 0.12),
|
||||
highlightColor: Colors.transparent,
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 250),
|
||||
curve: Curves.easeInOutCubic,
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: isSelected ? 16 : 12,
|
||||
vertical: 12,
|
||||
),
|
||||
decoration: BoxDecoration(
|
||||
color: isSelected
|
||||
? colorScheme.primary
|
||||
: Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(26),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(
|
||||
item.icon,
|
||||
size: 22,
|
||||
color: isSelected
|
||||
? colorScheme.onPrimary
|
||||
: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
if (isSelected) ...[
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
item.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: TextStyle(
|
||||
fontSize: 13,
|
||||
fontWeight: FontWeight.w700,
|
||||
color: colorScheme.onPrimary,
|
||||
letterSpacing: 0.1,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSearchButton(BuildContext context, ColorScheme colorScheme) {
|
||||
return FrostedGlassContainer(
|
||||
opacity: opacity,
|
||||
blurSigma: blurSigma,
|
||||
child: SizedBox(
|
||||
width: 52,
|
||||
height: 52,
|
||||
child: InkWell(
|
||||
onTap: onSearchTap,
|
||||
borderRadius: BorderRadius.circular(32),
|
||||
splashColor: colorScheme.primary.withValues(alpha: 0.12),
|
||||
child: Icon(
|
||||
Icons.search_rounded,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
size: 24,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,9 +1,18 @@
|
||||
import 'dart:ui';
|
||||
import 'package:flutter/material.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
|
||||
/// The frosted-glass pill background shared by all floating chrome in the
|
||||
/// app (bottom nav bar, media viewer action bar): blurred backdrop, a
|
||||
/// translucent tonal fill, a faint outline, and a soft drop shadow.
|
||||
/// The blurred/translucent chrome for the media viewer's overlay bars
|
||||
/// (`file_viewer_screen.dart`'s top bar, `MediaActionBar`, the video
|
||||
/// transport row) - the one deliberate exception to the design system's
|
||||
/// flat, no-shadow product UI (DESIGN_SYSTEM.md 1.4), since this chrome
|
||||
/// floats over photo/video content rather than over the app's own
|
||||
/// surfaces. No shadow, no outline: [color] defaults to the app's own
|
||||
/// `surface` token (so this panel reads as light or dark to match the
|
||||
/// active theme, like the rest of the media viewer, instead of a fixed
|
||||
/// dark tone regardless of theme) at a higher-than-usual [opacity], since
|
||||
/// a light tint needs denser coverage than a near-black one did to stay
|
||||
/// legible over arbitrary photo/video brightness underneath.
|
||||
class FrostedGlassContainer extends StatelessWidget {
|
||||
final Widget child;
|
||||
final double borderRadius;
|
||||
@@ -17,39 +26,31 @@ class FrostedGlassContainer extends StatelessWidget {
|
||||
/// adjustable.
|
||||
final double opacity;
|
||||
|
||||
/// The tint under the blur. Defaults to [NooColors.surface] (resolved at
|
||||
/// build time, so it always matches the active theme) - pass an explicit
|
||||
/// color only to override that, e.g. for a fixed-color panel elsewhere.
|
||||
final Color? color;
|
||||
|
||||
const FrostedGlassContainer({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.borderRadius = 32,
|
||||
this.blurSigma = 28,
|
||||
this.opacity = 0.55,
|
||||
this.borderRadius = 0,
|
||||
this.blurSigma = 20,
|
||||
this.opacity = 0.8,
|
||||
this.color,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
|
||||
final tint = color ?? context.nooColors.surface;
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
child: BackdropFilter(
|
||||
filter: ImageFilter.blur(sigmaX: blurSigma, sigmaY: blurSigma),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: colorScheme.surfaceContainerHighest.withValues(
|
||||
alpha: opacity,
|
||||
),
|
||||
color: tint.withValues(alpha: opacity),
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
border: Border.all(
|
||||
color: colorScheme.outlineVariant.withValues(alpha: 0.35),
|
||||
width: 1,
|
||||
),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.black.withValues(alpha: 0.14),
|
||||
blurRadius: 24,
|
||||
offset: const Offset(0, 8),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
|
||||
+53
-28
@@ -1,48 +1,73 @@
|
||||
import 'dart:io';
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import '../services/nextcloud_service.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
|
||||
/// The icon/color/thumbnail treatment for a file or folder, shared by any
|
||||
/// screen that lists [NextcloudItem]s the same way the Files tab does (see
|
||||
/// `files_view.dart`, and `share_upload_view.dart`'s destination picker).
|
||||
/// Matches DESIGN_SYSTEM.md 1.2's file-type tile table (`KIND`) - a pdf is
|
||||
/// its own kind there (distinct from a generic document), which is why
|
||||
/// these take the whole [NextcloudItem] rather than just its
|
||||
/// [NextcloudItemType]: the type alone can't tell a pdf from any other
|
||||
/// document.
|
||||
bool _isPdf(NextcloudItem item) => item.name.toLowerCase().endsWith('.pdf');
|
||||
|
||||
IconData getItemIcon(NextcloudItemType type) {
|
||||
switch (type) {
|
||||
IconData getItemIcon(NextcloudItem item) {
|
||||
switch (item.type) {
|
||||
case NextcloudItemType.folder:
|
||||
return Icons.folder_rounded;
|
||||
return LucideIcons.folder;
|
||||
case NextcloudItemType.image:
|
||||
return Icons.image_rounded;
|
||||
return LucideIcons.image;
|
||||
case NextcloudItemType.video:
|
||||
return Icons.movie_rounded;
|
||||
case NextcloudItemType.audio:
|
||||
return Icons.audiotrack_rounded;
|
||||
return LucideIcons.film;
|
||||
case NextcloudItemType.document:
|
||||
return Icons.description_rounded;
|
||||
return LucideIcons.fileText;
|
||||
case NextcloudItemType.archive:
|
||||
return Icons.folder_zip_rounded;
|
||||
return LucideIcons.fileArchive;
|
||||
case NextcloudItemType.audio:
|
||||
case NextcloudItemType.file:
|
||||
return Icons.insert_drive_file_rounded;
|
||||
return LucideIcons.file;
|
||||
}
|
||||
}
|
||||
|
||||
Color getIconColor(BuildContext context, NextcloudItemType type) {
|
||||
final colorScheme = Theme.of(context).colorScheme;
|
||||
switch (type) {
|
||||
Color getIconColor(BuildContext context, NextcloudItem item) {
|
||||
final colors = context.nooColors;
|
||||
switch (item.type) {
|
||||
case NextcloudItemType.folder:
|
||||
return colorScheme.primary;
|
||||
case NextcloudItemType.image:
|
||||
return Colors.amber.shade700;
|
||||
case NextcloudItemType.video:
|
||||
return Colors.deepOrange.shade600;
|
||||
case NextcloudItemType.audio:
|
||||
return Colors.purple.shade600;
|
||||
return colors.accentText;
|
||||
case NextcloudItemType.document:
|
||||
return Colors.blue.shade700;
|
||||
return _isPdf(item) ? colors.danger : colors.info;
|
||||
case NextcloudItemType.image:
|
||||
return colors.info;
|
||||
case NextcloudItemType.video:
|
||||
return colors.warning;
|
||||
case NextcloudItemType.archive:
|
||||
return Colors.teal.shade700;
|
||||
case NextcloudItemType.audio:
|
||||
case NextcloudItemType.file:
|
||||
return colorScheme.outline;
|
||||
return colors.fg2;
|
||||
}
|
||||
}
|
||||
|
||||
/// The tile's background (the soft-tinted square/circle behind the icon) -
|
||||
/// the other half of the [getIconColor] pair every call site pairs it with.
|
||||
Color getIconBackground(BuildContext context, NextcloudItem item) {
|
||||
final colors = context.nooColors;
|
||||
switch (item.type) {
|
||||
case NextcloudItemType.folder:
|
||||
return colors.accentSoft;
|
||||
case NextcloudItemType.document:
|
||||
return _isPdf(item) ? colors.dangerSoft : colors.infoSoft;
|
||||
case NextcloudItemType.image:
|
||||
return colors.infoSoft;
|
||||
case NextcloudItemType.video:
|
||||
return colors.warningSoft;
|
||||
case NextcloudItemType.archive:
|
||||
case NextcloudItemType.audio:
|
||||
case NextcloudItemType.file:
|
||||
return colors.surface3;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -74,7 +99,7 @@ class ItemThumbnail extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final iconColor = getIconColor(context, item.type);
|
||||
final iconColor = getIconColor(context, item);
|
||||
final isMedia =
|
||||
item.type == NextcloudItemType.image ||
|
||||
item.type == NextcloudItemType.video;
|
||||
@@ -91,7 +116,7 @@ class ItemThumbnail extends StatelessWidget {
|
||||
height: size,
|
||||
clipBehavior: Clip.antiAlias,
|
||||
decoration: BoxDecoration(
|
||||
color: iconColor.withValues(alpha: 0.12),
|
||||
color: getIconBackground(context, item),
|
||||
borderRadius: BorderRadius.circular(borderRadius),
|
||||
),
|
||||
child: useLocal || (isMedia && item.previewUrl != null)
|
||||
@@ -116,7 +141,7 @@ class ItemThumbnail extends StatelessWidget {
|
||||
if (progress == null) return child;
|
||||
return Center(
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
getItemIcon(item),
|
||||
color: iconColor,
|
||||
size: iconSize,
|
||||
),
|
||||
@@ -124,7 +149,7 @@ class ItemThumbnail extends StatelessWidget {
|
||||
},
|
||||
errorBuilder: (context, error, stack) => Center(
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
getItemIcon(item),
|
||||
color: iconColor,
|
||||
size: iconSize,
|
||||
),
|
||||
@@ -142,7 +167,7 @@ class ItemThumbnail extends StatelessWidget {
|
||||
)
|
||||
: Center(
|
||||
child: Icon(
|
||||
getItemIcon(item.type),
|
||||
getItemIcon(item),
|
||||
color: iconColor,
|
||||
size: iconSize,
|
||||
),
|
||||
|
||||
@@ -1,6 +1,11 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import 'package:provider/provider.dart';
|
||||
import '../providers/sync_status_controller.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import 'noo/lists/noo_grouped_list.dart';
|
||||
import 'noo/lists/noo_settings_row.dart';
|
||||
import 'noo/overlays/noo_sheet.dart';
|
||||
|
||||
/// The configured sync targets (folders/files) with a "stop syncing"
|
||||
/// action per target - what used to be Settings' Device Sync card's own
|
||||
@@ -14,16 +19,7 @@ class ManageSyncedFoldersSheet extends StatelessWidget {
|
||||
|
||||
static void show(BuildContext context) {
|
||||
final sync = context.read<SyncStatusController>();
|
||||
showModalBottomSheet(
|
||||
context: context,
|
||||
isScrollControlled: true,
|
||||
backgroundColor: Theme.of(context).colorScheme.surfaceContainerHigh,
|
||||
showDragHandle: true,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadius.vertical(top: Radius.circular(28)),
|
||||
),
|
||||
builder: (sheetContext) => ManageSyncedFoldersSheet(sync: sync),
|
||||
);
|
||||
showNooSheet(context, children: [ManageSyncedFoldersSheet(sync: sync)]);
|
||||
}
|
||||
|
||||
void _remove(BuildContext context, String path) {
|
||||
@@ -38,69 +34,52 @@ class ManageSyncedFoldersSheet extends StatelessWidget {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
// AnimatedBuilder, not a one-shot read: removing a target should update
|
||||
// this list in place without closing the sheet, and showNooSheet's
|
||||
// `children` is built once by the caller - this widget owns its own
|
||||
// rebuild instead.
|
||||
return AnimatedBuilder(
|
||||
animation: sync,
|
||||
builder: (context, _) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final everything = sync.syncEverything;
|
||||
final targets = sync.syncedPaths;
|
||||
|
||||
return SafeArea(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.fromLTRB(20, 4, 20, 20),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
'Synced to this device',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
style: NooText.cardTitle.copyWith(color: colors.fg1),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 12),
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
if (everything)
|
||||
Text(
|
||||
'Every folder in this account is being synced to this '
|
||||
'device.',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
'Every folder in this account is being synced to this device.',
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
)
|
||||
else if (targets.isEmpty)
|
||||
Text(
|
||||
'Nothing synced yet - select a folder or file in Files '
|
||||
'and use "Sync to device" to mirror it here for offline '
|
||||
'access.',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
'Nothing synced yet. Select a folder or file in Files and '
|
||||
'use "Sync to device" to mirror it here for offline access.',
|
||||
style: NooText.body.copyWith(color: colors.fg3),
|
||||
)
|
||||
else
|
||||
Flexible(
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
itemCount: targets.length,
|
||||
separatorBuilder: (_, _) => const Divider(height: 1),
|
||||
itemBuilder: (context, index) {
|
||||
final target = targets[index];
|
||||
return ListTile(
|
||||
contentPadding: EdgeInsets.zero,
|
||||
leading: const Icon(Icons.sync_rounded),
|
||||
title: Text(target),
|
||||
NooGroupedList(
|
||||
children: [
|
||||
for (final target in targets)
|
||||
NooSettingsRow(
|
||||
icon: LucideIcons.folderSync,
|
||||
label: Text(target),
|
||||
trailing: IconButton(
|
||||
icon: const Icon(Icons.close_rounded),
|
||||
icon: Icon(LucideIcons.x, size: 18, color: colors.fg3),
|
||||
tooltip: 'Stop syncing',
|
||||
onPressed: () => _remove(context, target),
|
||||
),
|
||||
);
|
||||
},
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
@@ -1,98 +0,0 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../models/nextcloud_item.dart';
|
||||
import 'synced_header_scaffold.dart' show formatBytes;
|
||||
|
||||
/// Grid content for an image/video: the actual preview fills the whole card
|
||||
/// as a background, with the name/size legible over a bottom scrim -
|
||||
/// matching a Google Photos-style grid instead of a small icon badge.
|
||||
/// Shared by the Files and Offline tabs; they differ only in where the
|
||||
/// pixels come from ([imageBuilder] - a server preview vs. the local
|
||||
/// mirror file) and what to show if that fails ([fallbackBuilder]).
|
||||
class MediaGridTile extends StatelessWidget {
|
||||
final NextcloudItem item;
|
||||
|
||||
/// Given the pixel width to decode at, returns the image to paint.
|
||||
/// Decoding straight to the painted size (rather than the full 500x500
|
||||
/// server preview / full-resolution local file) avoids a real source of
|
||||
/// scrolling jank.
|
||||
final ImageProvider Function(int cachePixels) imageBuilder;
|
||||
final WidgetBuilder fallbackBuilder;
|
||||
|
||||
const MediaGridTile({
|
||||
super.key,
|
||||
required this.item,
|
||||
required this.imageBuilder,
|
||||
required this.fallbackBuilder,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final cachePixels =
|
||||
(constraints.maxWidth * MediaQuery.of(context).devicePixelRatio)
|
||||
.round();
|
||||
return Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
Image(
|
||||
image: imageBuilder(cachePixels),
|
||||
fit: BoxFit.cover,
|
||||
filterQuality: FilterQuality.low,
|
||||
gaplessPlayback: true,
|
||||
errorBuilder: (ctx, err, stack) => fallbackBuilder(ctx),
|
||||
),
|
||||
if (item.type == NextcloudItemType.video)
|
||||
const Center(
|
||||
child: Icon(
|
||||
Icons.play_circle_fill_rounded,
|
||||
color: Colors.white,
|
||||
size: 36,
|
||||
),
|
||||
),
|
||||
Positioned(
|
||||
left: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
child: Container(
|
||||
padding: const EdgeInsets.fromLTRB(10, 20, 10, 8),
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topCenter,
|
||||
end: Alignment.bottomCenter,
|
||||
colors: [Colors.transparent, Colors.black87],
|
||||
),
|
||||
),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
item.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.titleSmall?.copyWith(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: 12,
|
||||
),
|
||||
),
|
||||
Text(
|
||||
formatBytes(item.size),
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: Colors.white70,
|
||||
fontSize: 10,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,15 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../models/move_copy_result.dart';
|
||||
import 'gradual_bottom_sheet.dart';
|
||||
import '../theme/design_tokens.dart';
|
||||
import 'noo/core/noo_button.dart';
|
||||
import 'noo/core/noo_segmented_control.dart';
|
||||
import 'noo/files/noo_file_kind.dart';
|
||||
import 'noo/files/noo_file_tile.dart';
|
||||
import 'noo/lists/noo_grouped_list.dart';
|
||||
import 'noo/noo_layout.dart';
|
||||
import 'noo/overlays/noo_dialog.dart';
|
||||
import 'noo/overlays/noo_overlay_header.dart';
|
||||
import 'noo/overlays/noo_sheet.dart';
|
||||
|
||||
/// Shown after a Move/Copy batch comes back with `MoveCopyResult.conflicts`
|
||||
/// non-empty (an item with the same name already exists at the
|
||||
@@ -8,27 +17,36 @@ import 'gradual_bottom_sheet.dart';
|
||||
/// per item as they're hit, and lets the user resolve them all the same
|
||||
/// way (overwrite/keep both) or open a per-item breakdown. Returns the
|
||||
/// `ConflictChoice` map `ItemOperations.resolveConflicts` expects, or null
|
||||
/// if dismissed without choosing.
|
||||
/// if dismissed without choosing. A `showNooDialog` (desktop) / `showNooSheet`
|
||||
/// (mobile) instead of the old `showGradualBottomSheet` - the content never
|
||||
/// grows past a couple of screens, so the drag-to-resize sheet that needed
|
||||
/// isn't worth it here.
|
||||
class MoveCopyConflictSheet extends StatefulWidget {
|
||||
final List<MoveCopyConflict> conflicts;
|
||||
final ScrollController? scrollController;
|
||||
|
||||
const MoveCopyConflictSheet({
|
||||
super.key,
|
||||
required this.conflicts,
|
||||
this.scrollController,
|
||||
});
|
||||
const MoveCopyConflictSheet({super.key, required this.conflicts});
|
||||
|
||||
static Future<Map<String, ConflictChoice>?> show(
|
||||
BuildContext context,
|
||||
List<MoveCopyConflict> conflicts,
|
||||
) {
|
||||
return showGradualBottomSheet<Map<String, ConflictChoice>>(
|
||||
final content = MoveCopyConflictSheet(conflicts: conflicts);
|
||||
final count = conflicts.length;
|
||||
final title = count == 1
|
||||
? '1 item already exists'
|
||||
: '$count items already exist';
|
||||
|
||||
if (NooLayout.isDesktop(context)) {
|
||||
return showNooDialog<Map<String, ConflictChoice>>(
|
||||
context,
|
||||
builder: (context, scrollController) => MoveCopyConflictSheet(
|
||||
conflicts: conflicts,
|
||||
scrollController: scrollController,
|
||||
),
|
||||
title: title,
|
||||
subtitle: 'Choose how to handle the conflicts',
|
||||
children: [content],
|
||||
);
|
||||
}
|
||||
return showNooSheet<Map<String, ConflictChoice>>(
|
||||
context,
|
||||
children: [content],
|
||||
);
|
||||
}
|
||||
|
||||
@@ -55,118 +73,151 @@ class _MoveCopyConflictSheetState extends State<MoveCopyConflictSheet> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final theme = Theme.of(context);
|
||||
final colorScheme = theme.colorScheme;
|
||||
final isDesktop = NooLayout.isDesktop(context);
|
||||
final count = widget.conflicts.length;
|
||||
|
||||
return ListView(
|
||||
controller: widget.scrollController,
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 24),
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Text(
|
||||
count == 1
|
||||
? '1 item already exists at the destination'
|
||||
: '$count items already exist at the destination',
|
||||
style: theme.textTheme.titleMedium?.copyWith(
|
||||
fontWeight: FontWeight.w700,
|
||||
// The dialog already renders this title/subtitle in its own header
|
||||
// (see `show` above); the sheet has no header of its own, so it
|
||||
// needs one here.
|
||||
if (!isDesktop) ...[
|
||||
NooOverlayHeader(
|
||||
title: count == 1
|
||||
? '1 item already exists'
|
||||
: '$count items already exist',
|
||||
subtitle: 'Choose how to handle the conflicts',
|
||||
onClose: () => Navigator.pop(context),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'Choose how to handle the conflicts.',
|
||||
style: theme.textTheme.bodySmall?.copyWith(
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const SizedBox(height: NooSpace.lg),
|
||||
],
|
||||
if (!_decidingPerItem) ...[
|
||||
FilledButton(
|
||||
onPressed: () => _resolveAll(ConflictChoice.overwrite),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
size: NooButtonSize.card,
|
||||
fullWidth: true,
|
||||
onTap: () => _resolveAll(ConflictChoice.overwrite),
|
||||
child: const Text('Overwrite all'),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
FilledButton.tonal(
|
||||
onPressed: () => _resolveAll(ConflictChoice.keepBoth),
|
||||
const SizedBox(height: NooSpace.xs),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.tonal,
|
||||
size: NooButtonSize.card,
|
||||
fullWidth: true,
|
||||
onTap: () => _resolveAll(ConflictChoice.keepBoth),
|
||||
child: const Text('Keep both (rename)'),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
OutlinedButton(
|
||||
onPressed: () => setState(() => _decidingPerItem = true),
|
||||
const SizedBox(height: NooSpace.xs),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.outline,
|
||||
size: NooButtonSize.card,
|
||||
fullWidth: true,
|
||||
onTap: () => setState(() => _decidingPerItem = true),
|
||||
child: const Text('Decide per item'),
|
||||
),
|
||||
const SizedBox(height: 16),
|
||||
const Divider(),
|
||||
const SizedBox(height: 8),
|
||||
const SizedBox(height: NooSpace.lg),
|
||||
],
|
||||
NooGroupedList(
|
||||
label: _decidingPerItem ? 'Items' : null,
|
||||
children: [
|
||||
for (final conflict in widget.conflicts)
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(vertical: 8),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Icon(
|
||||
conflict.item.isFolder
|
||||
? Icons.folder_rounded
|
||||
: Icons.insert_drive_file_rounded,
|
||||
color: colorScheme.onSurfaceVariant,
|
||||
size: 20,
|
||||
),
|
||||
const SizedBox(width: 10),
|
||||
Expanded(
|
||||
child: Text(
|
||||
conflict.item.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: theme.textTheme.bodyMedium?.copyWith(
|
||||
fontWeight: FontWeight.w600,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (_decidingPerItem) ...[
|
||||
const SizedBox(height: 6),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: SegmentedButton<ConflictChoice>(
|
||||
segments: const [
|
||||
ButtonSegment(
|
||||
value: ConflictChoice.overwrite,
|
||||
label: Text('Overwrite'),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: ConflictChoice.keepBoth,
|
||||
label: Text('Keep both'),
|
||||
),
|
||||
ButtonSegment(
|
||||
value: ConflictChoice.skip,
|
||||
label: Text('Skip'),
|
||||
),
|
||||
],
|
||||
selected: {_perItemChoices[conflict.item.id]!},
|
||||
showSelectedIcon: false,
|
||||
onSelectionChanged: (selection) => setState(() {
|
||||
_perItemChoices[conflict.item.id] = selection.first;
|
||||
_ConflictRow(
|
||||
conflict: conflict,
|
||||
decidingPerItem: _decidingPerItem,
|
||||
choice: _perItemChoices[conflict.item.id]!,
|
||||
onChoiceChanged: (choice) => setState(() {
|
||||
_perItemChoices[conflict.item.id] = choice;
|
||||
}),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (_decidingPerItem) ...[
|
||||
const SizedBox(height: 8),
|
||||
SizedBox(
|
||||
width: double.infinity,
|
||||
child: FilledButton(
|
||||
onPressed: _confirmPerItem,
|
||||
const SizedBox(height: NooSpace.lg),
|
||||
NooButton(
|
||||
variant: NooButtonVariant.primary,
|
||||
size: NooButtonSize.card,
|
||||
fullWidth: true,
|
||||
onTap: _confirmPerItem,
|
||||
child: const Text('Confirm'),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// One conflicting item: its file-type tile and name, plus (once "Decide
|
||||
/// per item" is active) a segmented overwrite/keep both/skip choice.
|
||||
class _ConflictRow extends StatelessWidget {
|
||||
final MoveCopyConflict conflict;
|
||||
final bool decidingPerItem;
|
||||
final ConflictChoice choice;
|
||||
final ValueChanged<ConflictChoice> onChoiceChanged;
|
||||
|
||||
const _ConflictRow({
|
||||
required this.conflict,
|
||||
required this.decidingPerItem,
|
||||
required this.choice,
|
||||
required this.onChoiceChanged,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final item = conflict.item;
|
||||
final kind = NooFileKind.from(name: item.name, isDirectory: item.isFolder);
|
||||
|
||||
return Material(
|
||||
color: colors.surface,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.md,
|
||||
vertical: NooSpace.sm,
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
NooFileTile(kind: kind),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.bodyL.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
if (decidingPerItem) ...[
|
||||
const SizedBox(height: NooSpace.xs),
|
||||
NooSegmentedControl<ConflictChoice>(
|
||||
fill: true,
|
||||
onSurface: true,
|
||||
value: choice,
|
||||
onChanged: onChoiceChanged,
|
||||
options: const [
|
||||
NooSegmentOption(
|
||||
value: ConflictChoice.overwrite,
|
||||
label: 'Overwrite',
|
||||
),
|
||||
NooSegmentOption(
|
||||
value: ConflictChoice.keepBoth,
|
||||
label: 'Keep both',
|
||||
),
|
||||
NooSegmentOption(value: ConflictChoice.skip, label: 'Skip'),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -0,0 +1,61 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:google_fonts/google_fonts.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Initials circle on a secondary-palette colour; the current user uses
|
||||
/// accent-soft (Noo Design System project, `components/core/Avatar.jsx`).
|
||||
/// Sizes: 30-32 in bars, 36 in lists, 48 in the drawer, 52-56 on the
|
||||
/// account card.
|
||||
class NooAvatar extends StatelessWidget {
|
||||
final String? initials;
|
||||
final double size;
|
||||
/// One of [NooColors.avatarPalette]; ignored when [current] or [icon] is set.
|
||||
final Color? color;
|
||||
final bool current;
|
||||
/// Show an icon instead of initials (e.g. a group share).
|
||||
final IconData? icon;
|
||||
|
||||
const NooAvatar({
|
||||
super.key,
|
||||
this.initials,
|
||||
this.size = 36,
|
||||
this.color,
|
||||
this.current = false,
|
||||
this.icon,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final Color bg;
|
||||
final Color fg;
|
||||
if (current) {
|
||||
bg = colors.accentSoft;
|
||||
fg = colors.accentText;
|
||||
} else if (icon != null) {
|
||||
bg = colors.surface2;
|
||||
fg = colors.fg2;
|
||||
} else {
|
||||
bg = color ?? NooColors.avatarPalette.first;
|
||||
fg = NooColors.avatarTextColor;
|
||||
}
|
||||
|
||||
return Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(color: bg, shape: BoxShape.circle),
|
||||
child: icon != null
|
||||
? Icon(icon, size: (size * 0.5).round().toDouble(), color: fg)
|
||||
: Text(
|
||||
initials ?? '',
|
||||
style: GoogleFonts.instrumentSans(
|
||||
fontWeight: FontWeight.w600,
|
||||
fontSize: (size * 0.36).round().toDouble(),
|
||||
height: 1,
|
||||
color: fg,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,47 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
enum NooBadgeTone { success, danger, accent, warning, info }
|
||||
|
||||
/// Small status pill, e.g. "Connected" in settings (Noo Design System
|
||||
/// project, `components/core/Badge.jsx`).
|
||||
class NooBadge extends StatelessWidget {
|
||||
final NooBadgeTone tone;
|
||||
final Widget child;
|
||||
|
||||
const NooBadge({super.key, this.tone = NooBadgeTone.success, required this.child});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final (bg, fg) = switch (tone) {
|
||||
NooBadgeTone.success => (colors.successSoft, colors.success),
|
||||
NooBadgeTone.danger => (colors.dangerSoft, colors.danger),
|
||||
NooBadgeTone.accent => (colors.accentSoft, colors.accentText),
|
||||
NooBadgeTone.warning => (colors.warningSoft, colors.warning),
|
||||
NooBadgeTone.info => (colors.infoSoft, colors.info),
|
||||
};
|
||||
return Container(
|
||||
height: 24,
|
||||
// Centering the text vertically within the fixed 24px height needs
|
||||
// *some* alignment mechanism, but Container's own `alignment:` (with
|
||||
// a height but no width) would expand to fill all available
|
||||
// *bounded* width instead of shrink-wrapping (see NooFab's doc
|
||||
// comment) - a Row with mainAxisSize.min sidesteps that entirely:
|
||||
// it shrink-wraps horizontally regardless of incoming constraints,
|
||||
// while its default crossAxisAlignment.center still centers the
|
||||
// text within the Container's tight 24px height.
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
decoration: BoxDecoration(color: bg, borderRadius: BorderRadius.circular(NooRadii.pill)),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
DefaultTextStyle(
|
||||
style: NooText.label.copyWith(fontSize: 12, height: 1, color: fg),
|
||||
child: child,
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,143 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
enum NooButtonVariant { primary, tonal, secondary, danger, outline, text, textDanger }
|
||||
|
||||
enum NooButtonSize { cta, card, field, toolbar, compact, xs }
|
||||
|
||||
class _SizeSpec {
|
||||
final double height;
|
||||
final double px;
|
||||
final double font;
|
||||
final double icon;
|
||||
final double gap;
|
||||
const _SizeSpec(this.height, this.px, this.font, this.icon, this.gap);
|
||||
}
|
||||
|
||||
const _sizes = {
|
||||
NooButtonSize.cta: _SizeSpec(52, 20, 16, 20, 10),
|
||||
NooButtonSize.card: _SizeSpec(44, 18, 15, 16, 8),
|
||||
NooButtonSize.field: _SizeSpec(40, 16, 14, 16, 6),
|
||||
NooButtonSize.toolbar: _SizeSpec(36, 16, 14, 16, 8),
|
||||
NooButtonSize.compact: _SizeSpec(32, 14, 13, 14, 6),
|
||||
NooButtonSize.xs: _SizeSpec(28, 12, 12, 14, 6),
|
||||
};
|
||||
|
||||
/// The pill button for every action in the design system
|
||||
/// (Noo Design System project, `components/core/Button.jsx`). Pick
|
||||
/// [NooButtonVariant] by emphasis and [NooButtonSize] by context - never
|
||||
/// build a bespoke `ElevatedButton`/`FilledButton` for app chrome; extend
|
||||
/// this instead.
|
||||
class NooButton extends StatefulWidget {
|
||||
final NooButtonVariant variant;
|
||||
final NooButtonSize size;
|
||||
final IconData? icon;
|
||||
final Widget? child;
|
||||
final bool fullWidth;
|
||||
final bool disabled;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooButton({
|
||||
super.key,
|
||||
this.variant = NooButtonVariant.primary,
|
||||
this.size = NooButtonSize.toolbar,
|
||||
this.icon,
|
||||
this.child,
|
||||
this.fullWidth = false,
|
||||
this.disabled = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
State<NooButton> createState() => _NooButtonState();
|
||||
}
|
||||
|
||||
class _NooButtonState extends State<NooButton> {
|
||||
bool _down = false;
|
||||
|
||||
(Color, Color, BoxBorder?) _colors(NooColors colors) {
|
||||
switch (widget.variant) {
|
||||
case NooButtonVariant.primary:
|
||||
return (colors.accent, Colors.white, null);
|
||||
case NooButtonVariant.tonal:
|
||||
return (colors.accentSoft, colors.accentText, null);
|
||||
case NooButtonVariant.secondary:
|
||||
return (colors.surface2, colors.fg1, null);
|
||||
case NooButtonVariant.danger:
|
||||
return (colors.dangerSoft, colors.danger, null);
|
||||
case NooButtonVariant.outline:
|
||||
return (
|
||||
Colors.transparent,
|
||||
colors.fg1,
|
||||
Border.all(color: colors.surface3, width: 1.5),
|
||||
);
|
||||
case NooButtonVariant.text:
|
||||
return (Colors.transparent, colors.accentText, null);
|
||||
case NooButtonVariant.textDanger:
|
||||
return (Colors.transparent, colors.danger, null);
|
||||
}
|
||||
}
|
||||
|
||||
bool get _isTextVariant =>
|
||||
widget.variant == NooButtonVariant.text ||
|
||||
widget.variant == NooButtonVariant.textDanger;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final s = _sizes[widget.size]!;
|
||||
final (bg, fg, border) = _colors(colors);
|
||||
final hasLeadingIcon = widget.icon != null && widget.child != null && !_isTextVariant;
|
||||
|
||||
final content = Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.icon != null) Icon(widget.icon, size: s.icon, color: fg),
|
||||
if (widget.icon != null && widget.child != null) SizedBox(width: s.gap),
|
||||
if (widget.child != null)
|
||||
DefaultTextStyle(
|
||||
style: NooText.buttonSm.copyWith(fontSize: s.font, color: fg),
|
||||
child: widget.child!,
|
||||
),
|
||||
],
|
||||
);
|
||||
|
||||
return Opacity(
|
||||
opacity: widget.disabled ? 0.45 : 1,
|
||||
child: GestureDetector(
|
||||
onTapDown: widget.disabled ? null : (_) => setState(() => _down = true),
|
||||
onTapUp: widget.disabled ? null : (_) => setState(() => _down = false),
|
||||
onTapCancel: widget.disabled ? null : () => setState(() => _down = false),
|
||||
onTap: widget.disabled ? null : widget.onTap,
|
||||
child: AnimatedScale(
|
||||
scale: _down && !widget.disabled ? NooMotion.pressScale : 1,
|
||||
duration: NooMotion.fast,
|
||||
curve: NooMotion.ease,
|
||||
child: Container(
|
||||
height: s.height,
|
||||
width: widget.fullWidth ? double.infinity : null,
|
||||
padding: _isTextVariant
|
||||
? EdgeInsets.zero
|
||||
: EdgeInsets.only(
|
||||
left: hasLeadingIcon ? s.px - 4 : s.px,
|
||||
right: s.px,
|
||||
),
|
||||
// Only align when fullWidth actually expands this Container -
|
||||
// otherwise (no width, alignment set) Container wraps the child
|
||||
// in an Align that fills all available *bounded* space instead
|
||||
// of shrink-wrapping to it, which is what stretched this button
|
||||
// edge-to-edge instead of sizing to its content (see NooFab's
|
||||
// doc comment for the same bug).
|
||||
alignment: widget.fullWidth ? Alignment.center : null,
|
||||
decoration: BoxDecoration(
|
||||
color: bg,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
border: border,
|
||||
),
|
||||
child: content,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,92 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
enum NooChipTrailing { none, menu, remove }
|
||||
|
||||
/// A pill filter/sort chip; selected = accent-soft (Noo Design System
|
||||
/// project, `components/core/Chip.jsx`).
|
||||
class NooChip extends StatelessWidget {
|
||||
final Widget child;
|
||||
final IconData? icon;
|
||||
final bool selected;
|
||||
final NooChipTrailing trailing;
|
||||
/// filled = mobile (surface fill, 34px); outline = desktop (1px line, 32px)
|
||||
final bool outline;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooChip({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.icon,
|
||||
this.selected = false,
|
||||
this.trailing = NooChipTrailing.none,
|
||||
this.outline = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final height = outline ? 32.0 : 34.0;
|
||||
final hasSideContent = icon != null || trailing != NooChipTrailing.none;
|
||||
|
||||
Color bg;
|
||||
Color fg;
|
||||
FontWeight weight;
|
||||
Border? border;
|
||||
if (selected) {
|
||||
bg = colors.accentSoft;
|
||||
fg = colors.accentText;
|
||||
weight = FontWeight.w600;
|
||||
} else if (outline) {
|
||||
bg = Colors.transparent;
|
||||
fg = colors.fg1;
|
||||
weight = FontWeight.w500;
|
||||
border = Border.all(color: colors.line, width: 1);
|
||||
} else {
|
||||
bg = colors.surface;
|
||||
fg = colors.fg1;
|
||||
weight = FontWeight.w500;
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
height: height,
|
||||
padding: EdgeInsets.symmetric(horizontal: hasSideContent ? 12 : 14),
|
||||
decoration: BoxDecoration(
|
||||
color: bg,
|
||||
border: border,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: outline ? 14 : 16, color: fg),
|
||||
const SizedBox(width: 6),
|
||||
],
|
||||
DefaultTextStyle(
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: outline ? 13 : 14,
|
||||
height: 1,
|
||||
fontWeight: weight,
|
||||
color: fg,
|
||||
),
|
||||
child: child,
|
||||
),
|
||||
if (trailing == NooChipTrailing.menu) ...[
|
||||
const SizedBox(width: 6),
|
||||
Icon(LucideIcons.chevronDown, size: 14, color: fg),
|
||||
],
|
||||
if (trailing == NooChipTrailing.remove) ...[
|
||||
const SizedBox(width: 6),
|
||||
Icon(LucideIcons.x, size: 14, color: fg),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,85 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Android-only extended Upload pill, bottom-right of Files and Photos (Noo
|
||||
/// Design System project, `components/core/FAB.jsx`). 56px tall, accent
|
||||
/// fill - iOS uses a `plus` in the nav bar instead (not yet built).
|
||||
///
|
||||
/// [collapsed] shrinks it to an icon-only circle (no label) on tabs that
|
||||
/// don't support upload, so the button stays in place and resizes as the
|
||||
/// user switches tabs instead of the Scaffold popping it fully in/out -
|
||||
/// the label's width animates away rather than the FAB disappearing.
|
||||
class NooFab extends StatelessWidget {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final VoidCallback? onTap;
|
||||
final bool collapsed;
|
||||
|
||||
const NooFab({
|
||||
super.key,
|
||||
this.label = 'Upload',
|
||||
this.icon = LucideIcons.plus,
|
||||
this.onTap,
|
||||
this.collapsed = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Material(
|
||||
color: colors.accent,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: AnimatedContainer(
|
||||
duration: NooMotion.base,
|
||||
curve: NooMotion.ease,
|
||||
height: 56,
|
||||
padding: EdgeInsetsDirectional.fromSTEB(
|
||||
16,
|
||||
0,
|
||||
collapsed ? 16 : 20,
|
||||
0,
|
||||
),
|
||||
// No `alignment:` here - Container without an explicit width
|
||||
// wraps its child in an Align when alignment is set, and Align
|
||||
// EXPANDS to fill all available bounded space (not just the
|
||||
// child's size) unless the incoming constraints are unbounded.
|
||||
// The Scaffold floating-action-button slot gives bounded
|
||||
// constraints, so this shipped as a full-width bar instead of a
|
||||
// compact pill. Row+mainAxisSize.min already sizes correctly on
|
||||
// its own; the fix is just not adding alignment back here.
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, size: 24, color: Colors.white),
|
||||
ClipRect(
|
||||
child: AnimatedSize(
|
||||
duration: NooMotion.base,
|
||||
curve: NooMotion.ease,
|
||||
alignment: AlignmentDirectional.centerStart,
|
||||
child: collapsed
|
||||
? const SizedBox(height: 24)
|
||||
: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const SizedBox(width: 10),
|
||||
Text(
|
||||
label,
|
||||
style: NooText.button.copyWith(
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// 6px pill meter for storage, cache and offline limits (Noo Design System
|
||||
/// project, `components/core/ProgressBar.jsx`).
|
||||
class NooProgressBar extends StatelessWidget {
|
||||
/// 0-1
|
||||
final double value;
|
||||
|
||||
const NooProgressBar({super.key, required this.value});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return ClipRRect(
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: SizedBox(
|
||||
height: 6,
|
||||
child: LinearProgressIndicator(
|
||||
value: value.clamp(0.0, 1.0),
|
||||
backgroundColor: colors.surface3,
|
||||
valueColor: AlwaysStoppedAnimation(colors.accent),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,84 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Pill search input with a leading icon (Noo Design System project,
|
||||
/// `components/core/SearchField.jsx`).
|
||||
class NooSearchField extends StatelessWidget {
|
||||
final String placeholder;
|
||||
final TextEditingController? controller;
|
||||
final FocusNode? focusNode;
|
||||
final ValueChanged<String>? onChanged;
|
||||
final ValueChanged<String>? onSubmitted;
|
||||
final bool autofocus;
|
||||
/// true = iOS inline field (radius 12, 38px, 16px text, below the large
|
||||
/// title); false = the generic 36px pill used everywhere else (also the
|
||||
/// Android "expands from a top-bar icon" search field once expanded).
|
||||
final bool ios;
|
||||
/// True when placed directly on a `surface` background (uses surface-2
|
||||
/// fill instead of surface, so it doesn't disappear against it).
|
||||
final bool onSurface;
|
||||
final double? width;
|
||||
/// A trailing widget (e.g. a clear button), shown after the input.
|
||||
final Widget? trailing;
|
||||
|
||||
const NooSearchField({
|
||||
super.key,
|
||||
this.placeholder = 'Search',
|
||||
this.controller,
|
||||
this.focusNode,
|
||||
this.onChanged,
|
||||
this.onSubmitted,
|
||||
this.autofocus = false,
|
||||
this.ios = false,
|
||||
this.onSurface = false,
|
||||
this.width,
|
||||
this.trailing,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Container(
|
||||
width: width,
|
||||
height: ios ? 38 : 36,
|
||||
padding: EdgeInsets.symmetric(horizontal: ios ? 10 : 14),
|
||||
decoration: BoxDecoration(
|
||||
color: onSurface ? colors.surface2 : colors.surface,
|
||||
borderRadius: BorderRadius.circular(ios ? 12 : NooRadii.pill),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Icon(LucideIcons.search, size: ios ? 18 : 16, color: colors.fg3),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: TextField(
|
||||
controller: controller,
|
||||
focusNode: focusNode,
|
||||
onChanged: onChanged,
|
||||
onSubmitted: onSubmitted,
|
||||
autofocus: autofocus,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: ios ? 16 : 14,
|
||||
height: 1,
|
||||
color: colors.fg1,
|
||||
),
|
||||
decoration: InputDecoration(
|
||||
isDense: true,
|
||||
border: InputBorder.none,
|
||||
contentPadding: EdgeInsets.zero,
|
||||
hintText: placeholder,
|
||||
hintStyle: NooText.body.copyWith(
|
||||
fontSize: ios ? 16 : 14,
|
||||
height: 1,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
?trailing,
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,117 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
class NooSegmentOption<T> {
|
||||
final T value;
|
||||
final String? label;
|
||||
final IconData? icon;
|
||||
|
||||
const NooSegmentOption({required this.value, this.label, this.icon});
|
||||
}
|
||||
|
||||
enum NooSegmentedSize { md, sm, xs }
|
||||
|
||||
const _heights = {
|
||||
NooSegmentedSize.md: 34.0,
|
||||
NooSegmentedSize.sm: 30.0,
|
||||
NooSegmentedSize.xs: 28.0,
|
||||
};
|
||||
|
||||
/// Pill track with an accent-soft active segment - List/Grid, Shares scope,
|
||||
/// Theme (Noo Design System project, `components/core/SegmentedControl.jsx`).
|
||||
/// Replaces the older `SegmentedIconGroup`/`ToggleIconButton` pair; migrate
|
||||
/// call sites to this as they're touched rather than adding new ones there.
|
||||
class NooSegmentedControl<T> extends StatelessWidget {
|
||||
final List<NooSegmentOption<T>> options;
|
||||
final T value;
|
||||
final ValueChanged<T>? onChanged;
|
||||
|
||||
/// Use surface on bg, surface-2 on surface.
|
||||
final bool onSurface;
|
||||
final NooSegmentedSize size;
|
||||
final bool fill;
|
||||
final bool iconOnly;
|
||||
|
||||
/// Every segment always shows its icon, but only the *selected* one also
|
||||
/// shows its label - a middle ground between `iconOnly` (no segment is
|
||||
/// ever distinguishable without a label) and the default (every segment's
|
||||
/// label always visible, crowding a 3+-option control). Used for Files'/
|
||||
/// Photos' type filter (All/Files/Folders, All/Photos/Videos) so both use
|
||||
/// the same List/Grid-toggle-style pill instead of Files' old checkmark
|
||||
/// list and Photos' own always-labelled control.
|
||||
final bool labelOnlySelected;
|
||||
|
||||
const NooSegmentedControl({
|
||||
super.key,
|
||||
required this.options,
|
||||
required this.value,
|
||||
this.onChanged,
|
||||
this.onSurface = false,
|
||||
this.size = NooSegmentedSize.md,
|
||||
this.fill = false,
|
||||
this.iconOnly = false,
|
||||
this.labelOnlySelected = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final h = iconOnly ? 28.0 : (_heights[size] ?? 34.0);
|
||||
final segments = options.map((o) {
|
||||
final on = o.value == value;
|
||||
final showLabel = labelOnlySelected ? on : !iconOnly;
|
||||
final child = Container(
|
||||
height: h,
|
||||
width: iconOnly ? 36 : null,
|
||||
padding: iconOnly || fill
|
||||
? EdgeInsets.zero
|
||||
: const EdgeInsets.symmetric(horizontal: 12),
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: on ? colors.accentSoft : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (o.icon != null)
|
||||
Icon(
|
||||
o.icon,
|
||||
size: iconOnly ? (size == NooSegmentedSize.md ? 18 : 16) : 14,
|
||||
color: on ? colors.accentText : colors.fg2,
|
||||
),
|
||||
if (o.icon != null && showLabel && o.label != null)
|
||||
const SizedBox(width: 6),
|
||||
if (showLabel && o.label != null)
|
||||
Text(
|
||||
o.label!,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: size == NooSegmentedSize.md ? 14 : 13,
|
||||
height: 1,
|
||||
fontWeight: on ? FontWeight.w600 : FontWeight.w500,
|
||||
color: on ? colors.accentText : colors.fg2,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
final tappable = GestureDetector(
|
||||
onTap: onChanged == null ? null : () => onChanged!(o.value),
|
||||
child: child,
|
||||
);
|
||||
return fill ? Expanded(child: tappable) : tappable;
|
||||
}).toList();
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(3),
|
||||
decoration: BoxDecoration(
|
||||
color: onSurface ? colors.surface2 : colors.surface,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: fill ? MainAxisSize.max : MainAxisSize.min,
|
||||
children: segments,
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,54 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// On/off switch; accent track on, surface-3 track off, white knob -
|
||||
/// identical on every platform, never a native iOS/Android switch (Noo
|
||||
/// Design System project, `components/core/Toggle.jsx`).
|
||||
class NooToggle extends StatelessWidget {
|
||||
final bool checked;
|
||||
final ValueChanged<bool>? onChanged;
|
||||
final bool desktop;
|
||||
|
||||
const NooToggle({
|
||||
super.key,
|
||||
required this.checked,
|
||||
this.onChanged,
|
||||
this.desktop = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final w = desktop ? 44.0 : 48.0;
|
||||
final h = desktop ? 26.0 : 28.0;
|
||||
final knob = h - 6;
|
||||
|
||||
return GestureDetector(
|
||||
onTap: onChanged == null ? null : () => onChanged!(!checked),
|
||||
child: AnimatedContainer(
|
||||
duration: NooMotion.fast,
|
||||
curve: NooMotion.ease,
|
||||
width: w,
|
||||
height: h,
|
||||
padding: const EdgeInsets.all(3),
|
||||
decoration: BoxDecoration(
|
||||
color: checked ? colors.accent : colors.surface3,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
child: AnimatedAlign(
|
||||
duration: NooMotion.fast,
|
||||
curve: NooMotion.ease,
|
||||
alignment: checked ? Alignment.centerRight : Alignment.centerLeft,
|
||||
child: Container(
|
||||
width: knob,
|
||||
height: knob,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.white,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,188 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// File-type buckets from `DESIGN_SYSTEM.md` 1.2 (`KIND` in `noo-kit.js`).
|
||||
/// Drives the tile tint + icon in `NooFileTile`, `NooFileRow` and
|
||||
/// `NooFileTableRow`. [other] isn't in the spec table - it's the neutral
|
||||
/// fallback (archive colors, plain `file` icon) for anything the table
|
||||
/// doesn't cover (audio, binaries, unknown extensions) so those don't
|
||||
/// masquerade as an archive or a document.
|
||||
enum NooFileKind {
|
||||
folder,
|
||||
pdf,
|
||||
doc,
|
||||
sheet,
|
||||
video,
|
||||
image,
|
||||
archive,
|
||||
other;
|
||||
|
||||
/// Lucide icon for this kind.
|
||||
IconData get icon {
|
||||
switch (this) {
|
||||
case NooFileKind.folder:
|
||||
return LucideIcons.folder;
|
||||
case NooFileKind.pdf:
|
||||
case NooFileKind.doc:
|
||||
return LucideIcons.fileText;
|
||||
case NooFileKind.sheet:
|
||||
return LucideIcons.sheet;
|
||||
case NooFileKind.video:
|
||||
return LucideIcons.film;
|
||||
case NooFileKind.image:
|
||||
return LucideIcons.image;
|
||||
case NooFileKind.archive:
|
||||
return LucideIcons.fileArchive;
|
||||
case NooFileKind.other:
|
||||
return LucideIcons.file;
|
||||
}
|
||||
}
|
||||
|
||||
/// Tile background - the soft half of the pair.
|
||||
Color background(NooColors colors) {
|
||||
switch (this) {
|
||||
case NooFileKind.folder:
|
||||
return colors.accentSoft;
|
||||
case NooFileKind.pdf:
|
||||
return colors.dangerSoft;
|
||||
case NooFileKind.doc:
|
||||
case NooFileKind.image:
|
||||
return colors.infoSoft;
|
||||
case NooFileKind.sheet:
|
||||
return colors.successSoft;
|
||||
case NooFileKind.video:
|
||||
return colors.warningSoft;
|
||||
case NooFileKind.archive:
|
||||
case NooFileKind.other:
|
||||
return colors.surface3;
|
||||
}
|
||||
}
|
||||
|
||||
/// Icon color - always the strong half of [background]'s pair.
|
||||
Color foreground(NooColors colors) {
|
||||
switch (this) {
|
||||
case NooFileKind.folder:
|
||||
return colors.accentText;
|
||||
case NooFileKind.pdf:
|
||||
return colors.danger;
|
||||
case NooFileKind.doc:
|
||||
case NooFileKind.image:
|
||||
return colors.info;
|
||||
case NooFileKind.sheet:
|
||||
return colors.success;
|
||||
case NooFileKind.video:
|
||||
return colors.warning;
|
||||
case NooFileKind.archive:
|
||||
case NooFileKind.other:
|
||||
return colors.fg2;
|
||||
}
|
||||
}
|
||||
|
||||
/// Derives a kind from whatever the caller has: [isDirectory] wins, then
|
||||
/// [mimeType] (e.g. WebDAV `getcontenttype`), then [name]'s extension.
|
||||
static NooFileKind from({
|
||||
String? name,
|
||||
String? mimeType,
|
||||
bool isDirectory = false,
|
||||
}) {
|
||||
final mime = mimeType?.toLowerCase().trim();
|
||||
if (isDirectory || mime == 'httpd/unix-directory') {
|
||||
return NooFileKind.folder;
|
||||
}
|
||||
if (mime != null && mime.isNotEmpty) {
|
||||
final byMime = _fromMime(mime);
|
||||
if (byMime != null) return byMime;
|
||||
}
|
||||
if (name != null) {
|
||||
final dot = name.lastIndexOf('.');
|
||||
if (dot >= 0 && dot < name.length - 1) {
|
||||
final byExt = _extensions[name.substring(dot + 1).toLowerCase()];
|
||||
if (byExt != null) return byExt;
|
||||
}
|
||||
}
|
||||
return NooFileKind.other;
|
||||
}
|
||||
|
||||
static NooFileKind? _fromMime(String mime) {
|
||||
if (mime == 'application/pdf') return NooFileKind.pdf;
|
||||
if (mime.startsWith('image/')) return NooFileKind.image;
|
||||
if (mime.startsWith('video/')) return NooFileKind.video;
|
||||
if (mime.contains('spreadsheet') ||
|
||||
mime.contains('ms-excel') ||
|
||||
mime == 'text/csv') {
|
||||
return NooFileKind.sheet;
|
||||
}
|
||||
if (mime.contains('zip') ||
|
||||
mime.contains('compressed') ||
|
||||
mime.contains('x-tar') ||
|
||||
mime.contains('x-7z') ||
|
||||
mime.contains('x-rar') ||
|
||||
mime.contains('gzip')) {
|
||||
return NooFileKind.archive;
|
||||
}
|
||||
if (mime.startsWith('text/') ||
|
||||
mime.contains('wordprocessing') ||
|
||||
mime.contains('msword') ||
|
||||
mime.contains('opendocument.text') ||
|
||||
mime.contains('presentation') ||
|
||||
mime.contains('powerpoint') ||
|
||||
mime == 'application/rtf') {
|
||||
return NooFileKind.doc;
|
||||
}
|
||||
// Generic types (application/octet-stream etc.) fall through to the
|
||||
// extension check.
|
||||
return null;
|
||||
}
|
||||
|
||||
static const _extensions = <String, NooFileKind>{
|
||||
'pdf': NooFileKind.pdf,
|
||||
// doc / text
|
||||
'doc': NooFileKind.doc,
|
||||
'docx': NooFileKind.doc,
|
||||
'odt': NooFileKind.doc,
|
||||
'rtf': NooFileKind.doc,
|
||||
'txt': NooFileKind.doc,
|
||||
'md': NooFileKind.doc,
|
||||
'ppt': NooFileKind.doc,
|
||||
'pptx': NooFileKind.doc,
|
||||
'odp': NooFileKind.doc,
|
||||
'pages': NooFileKind.doc,
|
||||
// sheet
|
||||
'xls': NooFileKind.sheet,
|
||||
'xlsx': NooFileKind.sheet,
|
||||
'ods': NooFileKind.sheet,
|
||||
'csv': NooFileKind.sheet,
|
||||
'numbers': NooFileKind.sheet,
|
||||
// video
|
||||
'mp4': NooFileKind.video,
|
||||
'mov': NooFileKind.video,
|
||||
'mkv': NooFileKind.video,
|
||||
'webm': NooFileKind.video,
|
||||
'avi': NooFileKind.video,
|
||||
'm4v': NooFileKind.video,
|
||||
'3gp': NooFileKind.video,
|
||||
// image
|
||||
'jpg': NooFileKind.image,
|
||||
'jpeg': NooFileKind.image,
|
||||
'png': NooFileKind.image,
|
||||
'gif': NooFileKind.image,
|
||||
'webp': NooFileKind.image,
|
||||
'heic': NooFileKind.image,
|
||||
'heif': NooFileKind.image,
|
||||
'bmp': NooFileKind.image,
|
||||
'svg': NooFileKind.image,
|
||||
'tif': NooFileKind.image,
|
||||
'tiff': NooFileKind.image,
|
||||
'dng': NooFileKind.image,
|
||||
// archive
|
||||
'zip': NooFileKind.archive,
|
||||
'tar': NooFileKind.archive,
|
||||
'gz': NooFileKind.archive,
|
||||
'tgz': NooFileKind.archive,
|
||||
'bz2': NooFileKind.archive,
|
||||
'xz': NooFileKind.archive,
|
||||
'7z': NooFileKind.archive,
|
||||
'rar': NooFileKind.archive,
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,193 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import 'noo_file_kind.dart';
|
||||
import 'noo_file_tile.dart';
|
||||
import 'noo_status_icon.dart';
|
||||
|
||||
/// Mobile 64px file row (`DESIGN_SYSTEM.md` 2, "File row"): 40px tile, name
|
||||
/// (16/500, one line) over a meta line (`[status][shared] size · modified`,
|
||||
/// 13 fg-3), an optional favorite star / [trailing] widget, then the
|
||||
/// overflow button. Paints its own `surface` background (accent-soft when
|
||||
/// [selected]), so it can sit directly in a list or inside a
|
||||
/// `NooSwipeAction`.
|
||||
class NooFileRow extends StatelessWidget {
|
||||
final NooFileKind kind;
|
||||
final String name;
|
||||
|
||||
/// Formatted size, e.g. "2.4 MB". Joined to [modified] with " · ".
|
||||
final String? size;
|
||||
|
||||
/// Formatted modified time, e.g. "Yesterday".
|
||||
final String? modified;
|
||||
|
||||
/// Replaces the "size · modified" text entirely - use it for the error
|
||||
/// hint ("Couldn't sync · Tap to retry") or screen-specific meta (Trash's
|
||||
/// "Deleted 3 days ago").
|
||||
final String? meta;
|
||||
|
||||
/// Leading meta-line icons, drawn in order (spec order is sync status,
|
||||
/// then shared). When this contains [NooSyncStatus.error] the meta text
|
||||
/// turns `danger`.
|
||||
final List<NooSyncStatus> statuses;
|
||||
|
||||
/// Shows the accent-text star before the overflow button.
|
||||
final bool favorite;
|
||||
|
||||
/// Screen-specific trailing icon (e.g. `rotate-ccw` in Trash), placed
|
||||
/// after the favorite star and before the overflow button.
|
||||
final Widget? trailing;
|
||||
|
||||
/// `ellipsis` on iOS, `ellipsis-vertical` everywhere else.
|
||||
final bool iosStyle;
|
||||
final bool selected;
|
||||
|
||||
/// Real image/video thumbnail for the tile; see [NooFileTile.thumbnail].
|
||||
final Widget? thumbnail;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onLongPress;
|
||||
|
||||
/// Overflow menu tap. The button is hidden when null.
|
||||
final VoidCallback? onMore;
|
||||
|
||||
const NooFileRow({
|
||||
super.key,
|
||||
required this.kind,
|
||||
required this.name,
|
||||
this.size,
|
||||
this.modified,
|
||||
this.meta,
|
||||
this.statuses = const [],
|
||||
this.favorite = false,
|
||||
this.trailing,
|
||||
this.iosStyle = false,
|
||||
this.selected = false,
|
||||
this.thumbnail,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
this.onMore,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final metaText =
|
||||
meta ??
|
||||
[
|
||||
size,
|
||||
modified,
|
||||
].whereType<String>().where((s) => s.isNotEmpty).join(' · ');
|
||||
final hasError = statuses.contains(NooSyncStatus.error);
|
||||
|
||||
return Material(
|
||||
color: selected ? colors.accentSoft : colors.surface,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
onLongPress: onLongPress,
|
||||
child: SizedBox(
|
||||
height: NooSizes.rowMobile,
|
||||
child: Padding(
|
||||
padding: EdgeInsets.only(
|
||||
left: NooSpace.md,
|
||||
right: onMore != null ? NooSpace.xxs : NooSpace.md,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
NooFileTile(kind: kind, thumbnail: thumbnail),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.bodyL.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
if (statuses.isNotEmpty || metaText.isNotEmpty) ...[
|
||||
const SizedBox(height: NooSpace.xxs),
|
||||
Row(
|
||||
children: [
|
||||
for (final s in statuses) ...[
|
||||
NooStatusIcon(s),
|
||||
const SizedBox(width: NooSpace.xxs),
|
||||
],
|
||||
Expanded(
|
||||
child: Text(
|
||||
metaText,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(
|
||||
color: hasError ? colors.danger : colors.fg3,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (favorite) ...[
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
Icon(LucideIcons.star, size: 18, color: colors.accentText),
|
||||
],
|
||||
if (trailing != null) ...[
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
IconTheme.merge(
|
||||
data: IconThemeData(size: 18, color: colors.fg3),
|
||||
child: trailing!,
|
||||
),
|
||||
],
|
||||
if (onMore != null)
|
||||
NooOverflowButton(iosStyle: iosStyle, onTap: onMore),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The 40px round overflow ("more") hit target used at the end of file
|
||||
/// rows - `ellipsis` when [iosStyle], `ellipsis-vertical` otherwise, 20px
|
||||
/// in fg-3.
|
||||
class NooOverflowButton extends StatelessWidget {
|
||||
final bool iosStyle;
|
||||
final double size;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooOverflowButton({
|
||||
super.key,
|
||||
this.iosStyle = false,
|
||||
this.size = 40,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return SizedBox.square(
|
||||
dimension: size,
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
shape: const CircleBorder(),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Icon(
|
||||
iosStyle ? LucideIcons.ellipsis : LucideIcons.ellipsisVertical,
|
||||
size: size >= 40 ? 20 : 18,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,243 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import 'noo_file_kind.dart';
|
||||
import 'noo_file_row.dart';
|
||||
import 'noo_file_tile.dart';
|
||||
import 'noo_status_icon.dart';
|
||||
|
||||
/// Fixed widths of the desktop file table's grid
|
||||
/// (`minmax(0,1fr) 180px 160px 120px`, `DESIGN_SYSTEM.md` 2 "File row").
|
||||
/// The first column takes the remaining width.
|
||||
const double _col2Width = 180;
|
||||
const double _col3Width = 160;
|
||||
const double _col4Width = 120;
|
||||
|
||||
/// Inset shared by header and rows so their columns line up; also the
|
||||
/// padding inside a selected row's r12 fill.
|
||||
const double _tableInset = NooSpace.sm;
|
||||
|
||||
/// Lays out the four table columns. Shared by [NooFileTableHeader] and
|
||||
/// [NooFileTableRow] so the grid can't drift between them.
|
||||
class _TableColumns extends StatelessWidget {
|
||||
final Widget name;
|
||||
final Widget col2;
|
||||
final Widget col3;
|
||||
final Widget col4;
|
||||
|
||||
const _TableColumns({
|
||||
required this.name,
|
||||
required this.col2,
|
||||
required this.col3,
|
||||
required this.col4,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: _tableInset),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(child: name),
|
||||
SizedBox(width: _col2Width, child: col2),
|
||||
SizedBox(width: _col3Width, child: col3),
|
||||
SizedBox(width: _col4Width, child: col4),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Desktop file table header: 36px, 12/600 fg-3 labels, and a sort arrow
|
||||
/// on the active column. The fourth (status/overflow) column is unlabelled.
|
||||
class NooFileTableHeader extends StatelessWidget {
|
||||
/// Label for the flexible Name column.
|
||||
final String nameLabel;
|
||||
|
||||
/// Labels for the 180px and 160px data columns, e.g. "Modified", "Size".
|
||||
final String col2Label;
|
||||
final String col3Label;
|
||||
|
||||
/// Active sort column - 0 = name, 1 = col2, 2 = col3 - or null for none.
|
||||
final int? sortColumn;
|
||||
final bool sortAscending;
|
||||
|
||||
/// Called with the tapped column's index; header cells aren't tappable
|
||||
/// when null.
|
||||
final ValueChanged<int>? onSort;
|
||||
|
||||
const NooFileTableHeader({
|
||||
super.key,
|
||||
this.nameLabel = 'Name',
|
||||
required this.col2Label,
|
||||
required this.col3Label,
|
||||
this.sortColumn,
|
||||
this.sortAscending = true,
|
||||
this.onSort,
|
||||
});
|
||||
|
||||
Widget _cell(BuildContext context, int index) {
|
||||
final colors = context.nooColors;
|
||||
final style = NooText.label.copyWith(
|
||||
fontSize: 12,
|
||||
height: 1,
|
||||
color: colors.fg3,
|
||||
);
|
||||
final active = sortColumn == index;
|
||||
final content = Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Flexible(
|
||||
child: Text(
|
||||
[nameLabel, col2Label, col3Label][index],
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: style,
|
||||
),
|
||||
),
|
||||
if (active) ...[
|
||||
const SizedBox(width: NooSpace.xxs),
|
||||
Icon(
|
||||
sortAscending ? LucideIcons.arrowUp : LucideIcons.arrowDown,
|
||||
size: 12,
|
||||
color: colors.fg3,
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
return Align(
|
||||
alignment: Alignment.centerLeft,
|
||||
child: onSort == null
|
||||
? content
|
||||
: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () => onSort!(index),
|
||||
child: MouseRegion(
|
||||
cursor: SystemMouseCursors.click,
|
||||
child: content,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
height: 36,
|
||||
child: _TableColumns(
|
||||
name: _cell(context, 0),
|
||||
col2: _cell(context, 1),
|
||||
col3: _cell(context, 2),
|
||||
col4: const SizedBox.shrink(),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Desktop file table row: 52px, 30px tile + name (14/500) in the flexible
|
||||
/// column, two meta-style data columns, then status icons and the overflow
|
||||
/// button right-aligned in the 120px column. Selected rows get an
|
||||
/// accent-soft r12 fill; otherwise the row is transparent over the pane.
|
||||
class NooFileTableRow extends StatelessWidget {
|
||||
final NooFileKind kind;
|
||||
final String name;
|
||||
|
||||
/// Second and third column contents, e.g. modified time and size.
|
||||
final String? col2;
|
||||
final String? col3;
|
||||
|
||||
/// Status icons in the last column, drawn before the favorite star.
|
||||
final List<NooSyncStatus> statuses;
|
||||
final bool favorite;
|
||||
final bool selected;
|
||||
final Widget? thumbnail;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onDoubleTap;
|
||||
final VoidCallback? onSecondaryTap;
|
||||
|
||||
/// Overflow menu tap. The button is hidden when null.
|
||||
final VoidCallback? onMore;
|
||||
|
||||
const NooFileTableRow({
|
||||
super.key,
|
||||
required this.kind,
|
||||
required this.name,
|
||||
this.col2,
|
||||
this.col3,
|
||||
this.statuses = const [],
|
||||
this.favorite = false,
|
||||
this.selected = false,
|
||||
this.thumbnail,
|
||||
this.onTap,
|
||||
this.onDoubleTap,
|
||||
this.onSecondaryTap,
|
||||
this.onMore,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final metaStyle = NooText.meta.copyWith(color: colors.fg3);
|
||||
Widget dataCell(String? text) => Text(
|
||||
text ?? '',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: metaStyle,
|
||||
);
|
||||
|
||||
return Material(
|
||||
color: selected ? colors.accentSoft : Colors.transparent,
|
||||
borderRadius: BorderRadius.circular(NooRadii.sidebarItem),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
onDoubleTap: onDoubleTap,
|
||||
onSecondaryTap: onSecondaryTap,
|
||||
child: SizedBox(
|
||||
height: NooSizes.rowDesktop,
|
||||
child: _TableColumns(
|
||||
name: Row(
|
||||
children: [
|
||||
NooFileTile(
|
||||
kind: kind,
|
||||
size: NooFileTileSize.desktop,
|
||||
thumbnail: thumbnail,
|
||||
),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: NooSpace.md),
|
||||
],
|
||||
),
|
||||
col2: dataCell(col2),
|
||||
col3: dataCell(col3),
|
||||
col4: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.end,
|
||||
children: [
|
||||
for (final s in statuses) ...[
|
||||
NooStatusIcon(s),
|
||||
const SizedBox(width: 6),
|
||||
],
|
||||
if (favorite) ...[
|
||||
Icon(LucideIcons.star, size: 14, color: colors.accentText),
|
||||
const SizedBox(width: 6),
|
||||
],
|
||||
if (onMore != null) NooOverflowButton(size: 32, onTap: onMore),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import 'noo_file_kind.dart';
|
||||
|
||||
/// The four tile sizes from `DESIGN_SYSTEM.md` 1.2 - pick by context; the
|
||||
/// icon is always half the tile.
|
||||
enum NooFileTileSize {
|
||||
/// 40px / r12 - mobile file rows.
|
||||
row(40, 12),
|
||||
|
||||
/// 30px / r9 - desktop table rows.
|
||||
desktop(30, 9),
|
||||
|
||||
/// 44px / r12 - share sheet/dialog header.
|
||||
header(44, 12),
|
||||
|
||||
/// 32px / r10 - activity items.
|
||||
activity(32, 10);
|
||||
|
||||
final double extent;
|
||||
final double radius;
|
||||
const NooFileTileSize(this.extent, this.radius);
|
||||
|
||||
double get iconSize => extent / 2;
|
||||
}
|
||||
|
||||
/// Rounded-square file-type tile: the kind's soft tint with its Lucide icon
|
||||
/// in the strong tint (`DESIGN_SYSTEM.md` 1.2). Pass [thumbnail] (e.g. an
|
||||
/// `Image`) to show real content instead - it's clipped to the same shape
|
||||
/// and cover-fit over the kind's tint, which shows while it loads.
|
||||
class NooFileTile extends StatelessWidget {
|
||||
final NooFileKind kind;
|
||||
final NooFileTileSize size;
|
||||
final Widget? thumbnail;
|
||||
|
||||
const NooFileTile({
|
||||
super.key,
|
||||
required this.kind,
|
||||
this.size = NooFileTileSize.row,
|
||||
this.thumbnail,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final radius = BorderRadius.circular(size.radius);
|
||||
return SizedBox.square(
|
||||
dimension: size.extent,
|
||||
child: thumbnail != null
|
||||
? ClipRRect(
|
||||
borderRadius: radius,
|
||||
child: ColoredBox(
|
||||
color: kind.background(colors),
|
||||
child: SizedBox.expand(
|
||||
child: FittedBox(fit: BoxFit.cover, child: thumbnail),
|
||||
),
|
||||
),
|
||||
)
|
||||
: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: kind.background(colors),
|
||||
borderRadius: radius,
|
||||
),
|
||||
child: Center(
|
||||
child: Icon(
|
||||
kind.icon,
|
||||
size: size.iconSize,
|
||||
color: kind.foreground(colors),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Per-file status markers for a file row's meta line or a table row's
|
||||
/// status column (`DESIGN_SYSTEM.md` 2, "Status icons").
|
||||
enum NooSyncStatus {
|
||||
synced,
|
||||
syncing,
|
||||
error,
|
||||
shared;
|
||||
|
||||
IconData get icon {
|
||||
switch (this) {
|
||||
case NooSyncStatus.synced:
|
||||
return LucideIcons.circleCheck;
|
||||
case NooSyncStatus.syncing:
|
||||
return LucideIcons.refreshCw;
|
||||
case NooSyncStatus.error:
|
||||
return LucideIcons.circleAlert;
|
||||
case NooSyncStatus.shared:
|
||||
return LucideIcons.users;
|
||||
}
|
||||
}
|
||||
|
||||
Color color(NooColors colors) {
|
||||
switch (this) {
|
||||
case NooSyncStatus.synced:
|
||||
return colors.success;
|
||||
case NooSyncStatus.syncing:
|
||||
return colors.accentText;
|
||||
case NooSyncStatus.error:
|
||||
return colors.danger;
|
||||
case NooSyncStatus.shared:
|
||||
return colors.fg3;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/// A single 14px status icon. For [NooSyncStatus.error] the row's meta
|
||||
/// text should say what to do ("Couldn't sync · Tap to retry") - this only
|
||||
/// draws the icon.
|
||||
class NooStatusIcon extends StatelessWidget {
|
||||
final NooSyncStatus status;
|
||||
final double size;
|
||||
|
||||
const NooStatusIcon(this.status, {super.key, this.size = 14});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Icon(
|
||||
status.icon,
|
||||
size: size,
|
||||
color: status.color(context.nooColors),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,242 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// The two swipe actions the design system defines (`DESIGN_SYSTEM.md` 2,
|
||||
/// "Swipe action"); which one sits on which side is a user setting
|
||||
/// (Settings -> Swipe on a file).
|
||||
enum NooSwipeActionKind { delete, favorite }
|
||||
|
||||
/// One side's action for [NooSwipeAction].
|
||||
class NooSwipeActionSpec {
|
||||
final NooSwipeActionKind kind;
|
||||
final VoidCallback onTriggered;
|
||||
|
||||
/// Overrides the default label ("Delete" / "Favorite"), e.g.
|
||||
/// "Unfavorite" for an already-starred file.
|
||||
final String? label;
|
||||
|
||||
/// Overrides the default icon (`trash-2` / `star`).
|
||||
final IconData? icon;
|
||||
|
||||
const NooSwipeActionSpec({
|
||||
required this.kind,
|
||||
required this.onTriggered,
|
||||
this.label,
|
||||
this.icon,
|
||||
});
|
||||
}
|
||||
|
||||
/// Wraps a row (normally a `NooFileRow`) so dragging it horizontally slides
|
||||
/// it aside to uncover a 96px action block: delete is white on
|
||||
/// `danger-fill`, favorite is white on `accent`, each a 20px icon over a
|
||||
/// 12/600 label. Releasing past half the block snaps it open, otherwise it
|
||||
/// springs shut - both on [NooMotion.base] / [NooMotion.ease], no bounce.
|
||||
/// Tapping the block fires the action and closes it; tapping the row while
|
||||
/// open just closes it.
|
||||
class NooSwipeAction extends StatefulWidget {
|
||||
final Widget child;
|
||||
|
||||
/// Revealed on the leading edge (swipe toward the trailing edge).
|
||||
final NooSwipeActionSpec? startAction;
|
||||
|
||||
/// Revealed on the trailing edge (swipe toward the leading edge).
|
||||
final NooSwipeActionSpec? endAction;
|
||||
|
||||
const NooSwipeAction({
|
||||
super.key,
|
||||
required this.child,
|
||||
this.startAction,
|
||||
this.endAction,
|
||||
});
|
||||
|
||||
/// Width of the uncovered action block.
|
||||
static const double actionWidth = 96;
|
||||
|
||||
@override
|
||||
State<NooSwipeAction> createState() => _NooSwipeActionState();
|
||||
}
|
||||
|
||||
class _NooSwipeActionState extends State<NooSwipeAction>
|
||||
with SingleTickerProviderStateMixin {
|
||||
/// -1 = end action fully revealed, 0 = closed, 1 = start action revealed
|
||||
/// (in visual left/right terms after [_dir] is applied).
|
||||
late final AnimationController _ctrl = AnimationController(
|
||||
vsync: this,
|
||||
lowerBound: -1,
|
||||
upperBound: 1,
|
||||
value: 0,
|
||||
);
|
||||
|
||||
double get _dir => Directionality.of(context) == TextDirection.rtl ? -1 : 1;
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_ctrl.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
void _animateTo(double target) {
|
||||
_ctrl.animateTo(target, duration: NooMotion.base, curve: NooMotion.ease);
|
||||
}
|
||||
|
||||
void _close() => _animateTo(0);
|
||||
|
||||
void _onDragUpdate(DragUpdateDetails d) {
|
||||
// Positive = revealing the start action.
|
||||
final delta = d.primaryDelta! * _dir / NooSwipeAction.actionWidth;
|
||||
final min = widget.endAction != null ? -1.0 : 0.0;
|
||||
final max = widget.startAction != null ? 1.0 : 0.0;
|
||||
_ctrl.value = (_ctrl.value + delta).clamp(min, max);
|
||||
}
|
||||
|
||||
void _onDragEnd(DragEndDetails d) {
|
||||
final v = _ctrl.value;
|
||||
final velocity = d.primaryVelocity! * _dir;
|
||||
double target;
|
||||
if (velocity.abs() > 700) {
|
||||
final opening = velocity.sign == v.sign || v == 0;
|
||||
target = opening ? velocity.sign : 0;
|
||||
} else {
|
||||
target = v.abs() >= 0.5 ? v.sign : 0;
|
||||
}
|
||||
if (target > 0 && widget.startAction == null) target = 0;
|
||||
if (target < 0 && widget.endAction == null) target = 0;
|
||||
_animateTo(target);
|
||||
}
|
||||
|
||||
void _trigger(NooSwipeActionSpec spec) {
|
||||
_close();
|
||||
spec.onTriggered();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
if (widget.startAction == null && widget.endAction == null) {
|
||||
return widget.child;
|
||||
}
|
||||
|
||||
return GestureDetector(
|
||||
onHorizontalDragUpdate: _onDragUpdate,
|
||||
onHorizontalDragEnd: _onDragEnd,
|
||||
child: ClipRect(
|
||||
child: AnimatedBuilder(
|
||||
animation: _ctrl,
|
||||
builder: (context, child) {
|
||||
final v = _ctrl.value;
|
||||
// Only the side being uncovered is painted, so the opposite
|
||||
// block never peeks out from behind a translucent row.
|
||||
final showing = v > 0
|
||||
? widget.startAction
|
||||
: (v < 0 ? widget.endAction : null);
|
||||
return Stack(
|
||||
children: [
|
||||
if (showing != null)
|
||||
Positioned.fill(
|
||||
child: Align(
|
||||
alignment: v > 0
|
||||
? AlignmentDirectional.centerStart
|
||||
: AlignmentDirectional.centerEnd,
|
||||
child: _ActionBlock(
|
||||
spec: showing,
|
||||
colors: colors,
|
||||
onTap: () => _trigger(showing),
|
||||
),
|
||||
),
|
||||
),
|
||||
Transform.translate(
|
||||
offset: Offset(v * NooSwipeAction.actionWidth * _dir, 0),
|
||||
child: child,
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
child: _OpenAwareChild(
|
||||
controller: _ctrl,
|
||||
onCloseTap: _close,
|
||||
child: widget.child,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Swallows taps on the row while it's swiped open (closing it instead),
|
||||
/// so an open row doesn't also navigate.
|
||||
class _OpenAwareChild extends AnimatedWidget {
|
||||
final Widget child;
|
||||
final VoidCallback onCloseTap;
|
||||
|
||||
const _OpenAwareChild({
|
||||
required AnimationController controller,
|
||||
required this.onCloseTap,
|
||||
required this.child,
|
||||
}) : super(listenable: controller);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final open = (listenable as AnimationController).value != 0;
|
||||
return Stack(
|
||||
children: [
|
||||
child,
|
||||
if (open)
|
||||
Positioned.fill(
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onCloseTap,
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _ActionBlock extends StatelessWidget {
|
||||
final NooSwipeActionSpec spec;
|
||||
final NooColors colors;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _ActionBlock({
|
||||
required this.spec,
|
||||
required this.colors,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final isDelete = spec.kind == NooSwipeActionKind.delete;
|
||||
final bg = isDelete ? colors.dangerFill : colors.accent;
|
||||
final icon =
|
||||
spec.icon ?? (isDelete ? LucideIcons.trash2 : LucideIcons.star);
|
||||
final label = spec.label ?? (isDelete ? 'Delete' : 'Favorite');
|
||||
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: NooSwipeAction.actionWidth,
|
||||
color: bg,
|
||||
alignment: Alignment.center,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(icon, size: 20, color: Colors.white),
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.label.copyWith(
|
||||
fontSize: 12,
|
||||
height: 1,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,72 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Inline info card with an optional text action, e.g. Trash's retention
|
||||
/// notice + "Empty trash" (Noo Design System project,
|
||||
/// `components/lists/Banner.jsx`, mobile variant).
|
||||
class NooBanner extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final Widget child;
|
||||
final String? actionLabel;
|
||||
final VoidCallback? onAction;
|
||||
final bool actionIsDanger;
|
||||
|
||||
const NooBanner({
|
||||
super.key,
|
||||
this.icon = LucideIcons.info,
|
||||
required this.child,
|
||||
this.actionLabel,
|
||||
this.onAction,
|
||||
this.actionIsDanger = true,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
Icon(icon, size: 20, color: colors.fg2),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: DefaultTextStyle(
|
||||
style: NooText.body.copyWith(color: colors.fg2),
|
||||
child: child,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
// Its own row below the description text, not squeezed onto the
|
||||
// same line - a long retention message and "Empty trash" used to
|
||||
// fight for the same row's width.
|
||||
if (actionLabel != null) ...[
|
||||
const SizedBox(height: 10),
|
||||
Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: GestureDetector(
|
||||
onTap: onAction,
|
||||
child: Text(
|
||||
actionLabel!,
|
||||
style: NooText.buttonSm.copyWith(
|
||||
fontSize: 14,
|
||||
color: actionIsDanger ? colors.danger : colors.accentText,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,145 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Radius-20 surface card of rows with 1px line dividers and an optional
|
||||
/// label above it (Noo Design System project,
|
||||
/// `components/lists/GroupedList.jsx`, mobile variant - desktop's bordered/
|
||||
/// titled card isn't built yet). Each child (`SettingsRow`, `FileRow`, ...)
|
||||
/// paints its own `surface` background; this only supplies the 1px `line`
|
||||
/// gaps between them and the rounded clip. Stack groups 18-20px apart.
|
||||
///
|
||||
/// [collapsible] makes [label] (required alongside it) a tap target that
|
||||
/// shows/hides the card and [footer] below it, with a trailing chevron -
|
||||
/// used by `SettingsSection` for Settings' mobile sections so a long
|
||||
/// Settings screen can be collapsed section by section instead of needing a
|
||||
/// separate jump rail. Every other call site leaves this false and renders
|
||||
/// exactly as before, always expanded and non-interactive.
|
||||
class NooGroupedList extends StatefulWidget {
|
||||
final String? label;
|
||||
|
||||
/// Right-aligned secondary text next to [label].
|
||||
final String? aside;
|
||||
final List<Widget> children;
|
||||
final Widget? footer;
|
||||
final bool collapsible;
|
||||
final bool initiallyExpanded;
|
||||
|
||||
const NooGroupedList({
|
||||
super.key,
|
||||
this.label,
|
||||
this.aside,
|
||||
required this.children,
|
||||
this.footer,
|
||||
this.collapsible = false,
|
||||
this.initiallyExpanded = true,
|
||||
});
|
||||
|
||||
@override
|
||||
State<NooGroupedList> createState() => _NooGroupedListState();
|
||||
}
|
||||
|
||||
class _NooGroupedListState extends State<NooGroupedList> {
|
||||
late bool _expanded = widget.initiallyExpanded;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final expanded = !widget.collapsible || _expanded;
|
||||
final label = widget.label;
|
||||
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
if (label != null) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: _buildLabelRow(label, colors, expanded),
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
],
|
||||
AnimatedCrossFade(
|
||||
duration: NooMotion.fast,
|
||||
sizeCurve: NooMotion.ease,
|
||||
crossFadeState: expanded
|
||||
? CrossFadeState.showFirst
|
||||
: CrossFadeState.showSecond,
|
||||
firstChild: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
ClipRRect(
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(color: colors.line),
|
||||
child: Column(
|
||||
children: [
|
||||
for (var i = 0; i < widget.children.length; i++) ...[
|
||||
if (i > 0) const SizedBox(height: 1),
|
||||
widget.children[i],
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.footer != null) ...[
|
||||
const SizedBox(height: 8),
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8),
|
||||
child: DefaultTextStyle(
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
child: widget.footer!,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
secondChild: const SizedBox(width: double.infinity),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLabelRow(String label, NooColors colors, bool expanded) {
|
||||
final row = Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Text(label, style: NooText.label.copyWith(color: colors.fg2)),
|
||||
Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (widget.aside != null)
|
||||
Padding(
|
||||
padding: EdgeInsets.only(right: widget.collapsible ? 8 : 0),
|
||||
child: Text(
|
||||
widget.aside!,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 13,
|
||||
height: 1,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (widget.collapsible)
|
||||
AnimatedRotation(
|
||||
turns: expanded ? 0.5 : 0,
|
||||
duration: NooMotion.fast,
|
||||
curve: NooMotion.ease,
|
||||
child: Icon(
|
||||
LucideIcons.chevronDown,
|
||||
size: 16,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
if (!widget.collapsible) return row;
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: () => setState(() => _expanded = !_expanded),
|
||||
child: row,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,308 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../models/selection_action.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../files/noo_file_row.dart' show NooOverflowButton;
|
||||
import '../overlays/noo_sheet.dart';
|
||||
import 'noo_grouped_list.dart';
|
||||
import 'noo_settings_row.dart';
|
||||
|
||||
/// Bulk actions shown inline before the rest collapse behind "More" - a
|
||||
/// fixed, non-scrolling width on every platform (design canvas
|
||||
/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4, "Selection action
|
||||
/// bar"). Mobile is tighter (icons share the bar with the close circle and
|
||||
/// count on a ~360dp phone); desktop's labelled pills have a wider toolbar
|
||||
/// to work with.
|
||||
const int _kMobileInlineActions = 3;
|
||||
const int _kDesktopInlineActions = 4;
|
||||
|
||||
/// The multi-select action bar Files/Photos/Favorites swap in for their own
|
||||
/// sort/filter row while selecting - design canvas
|
||||
/// https://claude.ai/artifact/3AGPqqMdkLSC2ypCh2CQs4 ("Selection action
|
||||
/// bar"), since DESIGN_SYSTEM.md has no §4 recipe of its own for this.
|
||||
/// Replaces the bare row of Material `IconButton`s each screen used to
|
||||
/// build ad hoc.
|
||||
///
|
||||
/// A `surface` card (radius 20) - selection reads as a distinct mode, not
|
||||
/// just a row of buttons floating on `bg` - with a close circle, the
|
||||
/// count, and the bulk actions. This sits in the *content* pane's own
|
||||
/// pinned header slot on every platform (the shell's desktop toolbar,
|
||||
/// built separately in `main.dart`, never changes for selection), so
|
||||
/// mobile and desktop share the same fixed 56px height; only the gutter
|
||||
/// ([isDesktop] ? 24 : 12, matching `NooLayout.gutter`) and the actions'
|
||||
/// presentation differ:
|
||||
/// - Mobile: the first [_kMobileInlineActions] actions as plain 20px
|
||||
/// accent-text icons, no fill.
|
||||
/// - Desktop: the first [_kDesktopInlineActions] as labelled tonal pills -
|
||||
/// danger-soft/danger for the one labelled "Delete", accent-soft/
|
||||
/// accent-text otherwise - since desktop has the room for labels.
|
||||
///
|
||||
/// Any actions beyond that inline count sit behind a trailing "More"
|
||||
/// button that opens the same grouped-list sheet a file row's own overflow
|
||||
/// menu already uses (see `FilesView._showItemActions`) - never a second
|
||||
/// scrolling row, which is what this replaced: with up to 9 bulk actions
|
||||
/// (favorite, share, download, delete, copy, move, rename, sync,
|
||||
/// details), a horizontally-scrolling row hid actions behind a swipe
|
||||
/// gesture with no visible cue that there was more to find.
|
||||
class NooSelectionBar extends StatelessWidget {
|
||||
final int count;
|
||||
final List<SelectionAction> actions;
|
||||
final VoidCallback onClose;
|
||||
final bool isDesktop;
|
||||
final bool iosStyle;
|
||||
|
||||
const NooSelectionBar({
|
||||
super.key,
|
||||
required this.count,
|
||||
required this.actions,
|
||||
required this.onClose,
|
||||
required this.isDesktop,
|
||||
this.iosStyle = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final gutter = isDesktop ? NooSpace.xl : NooSpace.sm;
|
||||
final inlineCount = isDesktop
|
||||
? _kDesktopInlineActions
|
||||
: _kMobileInlineActions;
|
||||
final inlineActions = actions.length > inlineCount
|
||||
? actions.sublist(0, inlineCount)
|
||||
: actions;
|
||||
final overflowActions = actions.length > inlineCount
|
||||
? actions.sublist(inlineCount)
|
||||
: const <SelectionAction>[];
|
||||
|
||||
// Every screen pins this into a fixed 56px sliver-header slot (the same
|
||||
// one the sort/filter row otherwise occupies) - the 4px top/bottom
|
||||
// margin plus the card's own 48px must add up to exactly that, or the
|
||||
// header overflows (see files_view.dart's `topRow` height comment for
|
||||
// the same warning about this exact number).
|
||||
return Padding(
|
||||
padding: EdgeInsets.symmetric(horizontal: gutter, vertical: NooSpace.xxs),
|
||||
child: Container(
|
||||
height: 48,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Semantics(
|
||||
button: true,
|
||||
label: 'Cancel selection',
|
||||
child: GestureDetector(
|
||||
onTap: onClose,
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface2,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(LucideIcons.x, size: 18, color: colors.fg1),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
Text(
|
||||
'$count selected',
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.cardTitle.copyWith(
|
||||
fontSize: 17,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: NooSpace.xs),
|
||||
Expanded(
|
||||
child: Align(
|
||||
alignment: Alignment.centerRight,
|
||||
child: isDesktop
|
||||
? _desktopActions(
|
||||
context,
|
||||
colors,
|
||||
inlineActions,
|
||||
overflowActions,
|
||||
)
|
||||
: _mobileActions(
|
||||
context,
|
||||
colors,
|
||||
inlineActions,
|
||||
overflowActions,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _mobileActions(
|
||||
BuildContext context,
|
||||
NooColors colors,
|
||||
List<SelectionAction> inline,
|
||||
List<SelectionAction> overflow,
|
||||
) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (final action in inline)
|
||||
Semantics(
|
||||
button: true,
|
||||
label: action.label,
|
||||
child: InkResponse(
|
||||
onTap: action.onTap,
|
||||
radius: 20,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(10),
|
||||
child: Icon(action.icon, size: 20, color: colors.accentText),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (overflow.isNotEmpty)
|
||||
NooOverflowButton(
|
||||
iosStyle: iosStyle,
|
||||
onTap: () => _showOverflowSheet(context, overflow),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _desktopActions(
|
||||
BuildContext context,
|
||||
NooColors colors,
|
||||
List<SelectionAction> inline,
|
||||
List<SelectionAction> overflow,
|
||||
) {
|
||||
return Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
for (final action in inline) ...[
|
||||
_DesktopActionPill(action: action, colors: colors),
|
||||
const SizedBox(width: 6),
|
||||
],
|
||||
if (overflow.isNotEmpty)
|
||||
_DesktopMorePill(
|
||||
colors: colors,
|
||||
onTap: () => _showOverflowSheet(context, overflow),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
void _showOverflowSheet(
|
||||
BuildContext context,
|
||||
List<SelectionAction> overflow,
|
||||
) {
|
||||
showNooSheet(
|
||||
context,
|
||||
children: [
|
||||
NooGroupedList(
|
||||
children: [
|
||||
for (final action in overflow)
|
||||
NooSettingsRow(
|
||||
icon: action.icon,
|
||||
label: Text(action.label),
|
||||
onTap: () {
|
||||
Navigator.pop(context);
|
||||
action.onTap();
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _DesktopActionPill extends StatelessWidget {
|
||||
final SelectionAction action;
|
||||
final NooColors colors;
|
||||
|
||||
const _DesktopActionPill({required this.action, required this.colors});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final danger = action.label == 'Delete';
|
||||
final bg = danger ? colors.dangerSoft : colors.accentSoft;
|
||||
final fg = danger ? colors.danger : colors.accentText;
|
||||
return Material(
|
||||
color: bg,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: InkWell(
|
||||
onTap: action.onTap,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: SizedBox(
|
||||
height: 32,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(action.icon, size: 15, color: fg),
|
||||
const SizedBox(width: 6),
|
||||
Text(
|
||||
action.label,
|
||||
style: NooText.buttonSm.copyWith(color: fg, fontSize: 13),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The desktop overflow trigger - a secondary pill (matching the Button
|
||||
/// component's "Secondary" variant) rather than a tonal one, so it reads
|
||||
/// as "opens a menu" and not as another bulk action next to it. The
|
||||
/// trailing `chevron-down` mirrors the same "opens a menu" cue `NooChip`
|
||||
/// uses.
|
||||
class _DesktopMorePill extends StatelessWidget {
|
||||
final NooColors colors;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _DesktopMorePill({required this.colors, required this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Semantics(
|
||||
button: true,
|
||||
label: 'More actions',
|
||||
child: Material(
|
||||
color: colors.surface2,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: SizedBox(
|
||||
height: 32,
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
'More',
|
||||
style: NooText.buttonSm.copyWith(
|
||||
color: colors.fg1,
|
||||
fontSize: 13,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Icon(LucideIcons.chevronDown, size: 14, color: colors.fg1),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,106 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// 52/60px settings row: icon, label, subtitle, trailing control (Noo
|
||||
/// Design System project, `components/lists/SettingsRow.jsx`, mobile
|
||||
/// variant). Goes inside a [NooGroupedList] - it paints its own `surface`
|
||||
/// background, the list only supplies the line gaps.
|
||||
class NooSettingsRow extends StatelessWidget {
|
||||
final IconData? icon;
|
||||
final Widget label;
|
||||
final Widget? subtitle;
|
||||
/// Renders as `value` text + a trailing chevron - mutually exclusive with
|
||||
/// [trailing] (a `NooToggle`, button, badge, etc.).
|
||||
final String? value;
|
||||
final Widget? trailing;
|
||||
final bool danger;
|
||||
/// Accent-text action row, e.g. "Add account".
|
||||
final bool accent;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooSettingsRow({
|
||||
super.key,
|
||||
this.icon,
|
||||
required this.label,
|
||||
this.subtitle,
|
||||
this.value,
|
||||
this.trailing,
|
||||
this.danger = false,
|
||||
this.accent = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final color = danger ? colors.danger : (accent ? colors.accentText : colors.fg1);
|
||||
final minHeight = subtitle != null ? 60.0 : 52.0;
|
||||
|
||||
Widget? trail = trailing;
|
||||
if (trail == null && value != null) {
|
||||
trail = Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(
|
||||
value!,
|
||||
style: NooText.body.copyWith(fontSize: 15, height: 1, color: colors.fg3),
|
||||
),
|
||||
const SizedBox(width: 4),
|
||||
Icon(LucideIcons.chevronRight, size: 18, color: colors.fg3),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
return Material(
|
||||
color: colors.surface,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(minHeight: minHeight),
|
||||
child: Padding(
|
||||
padding: EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.md,
|
||||
vertical: subtitle != null ? 11 : 0,
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: 20, color: danger || accent ? color : colors.fg2),
|
||||
const SizedBox(width: 14),
|
||||
],
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
DefaultTextStyle(
|
||||
style: NooText.bodyL.copyWith(
|
||||
height: 1.1,
|
||||
fontWeight: danger || accent
|
||||
? (accent ? FontWeight.w600 : FontWeight.w500)
|
||||
: FontWeight.w400,
|
||||
color: color,
|
||||
),
|
||||
child: label,
|
||||
),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 4),
|
||||
DefaultTextStyle(
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
child: subtitle!,
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
?trail,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,83 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../core/noo_progress_bar.dart';
|
||||
|
||||
enum NooSummaryCardTone { normal, danger, accent }
|
||||
|
||||
/// Stat card with optional progress, meta and action (Offline summary,
|
||||
/// desktop stats) - Noo Design System project,
|
||||
/// `components/lists/SummaryCard.jsx`, mobile variant.
|
||||
class NooSummaryCard extends StatelessWidget {
|
||||
final String stat;
|
||||
final String? caption;
|
||||
|
||||
/// 0-1; renders a [NooProgressBar].
|
||||
final double? progress;
|
||||
final String? meta;
|
||||
final Widget? action;
|
||||
final NooSummaryCardTone tone;
|
||||
|
||||
const NooSummaryCard({
|
||||
super.key,
|
||||
required this.stat,
|
||||
this.caption,
|
||||
this.progress,
|
||||
this.meta,
|
||||
this.action,
|
||||
this.tone = NooSummaryCardTone.normal,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final bg = tone == NooSummaryCardTone.danger
|
||||
? colors.dangerSoft
|
||||
: colors.surface;
|
||||
final statColor = switch (tone) {
|
||||
NooSummaryCardTone.danger => colors.danger,
|
||||
NooSummaryCardTone.accent => colors.accentText,
|
||||
NooSummaryCardTone.normal => colors.fg1,
|
||||
};
|
||||
final capColor = tone == NooSummaryCardTone.danger
|
||||
? colors.danger
|
||||
: colors.fg2;
|
||||
|
||||
return Container(
|
||||
padding: const EdgeInsets.all(18),
|
||||
decoration: BoxDecoration(
|
||||
color: bg,
|
||||
borderRadius: BorderRadius.circular(NooRadii.card),
|
||||
),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(stat, style: NooText.stat.copyWith(color: statColor)),
|
||||
if (caption != null) ...[
|
||||
const SizedBox(height: 6),
|
||||
Text(
|
||||
caption!,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
height: 1.2,
|
||||
color: capColor,
|
||||
),
|
||||
),
|
||||
],
|
||||
// Its own row below the description, not squeezed beside the
|
||||
// stat/caption - there wasn't room to grow the action (e.g. a
|
||||
// labelled "Sync now" button) without it colliding with a long
|
||||
// caption.
|
||||
if (action != null) ...[const SizedBox(height: 14), action!],
|
||||
if (progress != null) ...[
|
||||
const SizedBox(height: 14),
|
||||
NooProgressBar(value: progress!),
|
||||
],
|
||||
if (meta != null) ...[
|
||||
const SizedBox(height: 14),
|
||||
Text(meta!, style: NooText.meta.copyWith(color: colors.fg3)),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,81 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Reorderable tab row with a grip and pin toggle - max 5 pinned (Noo
|
||||
/// Design System project, `components/lists/TabOrderRow.jsx`, mobile
|
||||
/// variant).
|
||||
class NooTabOrderRow extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final bool pinned;
|
||||
final VoidCallback? onTogglePin;
|
||||
|
||||
/// False hides the trailing pin toggle entirely - for reorder-only lists
|
||||
/// (Settings' Action bar section) that have no "pinned" concept, just an
|
||||
/// order.
|
||||
final bool showPin;
|
||||
|
||||
/// This row's index inside its `ReorderableListView` - when set, only the
|
||||
/// grip icon starts a drag (`ReorderableDragStartListener` wraps just the
|
||||
/// icon, not the whole row), so a vertical drag/scroll starting anywhere
|
||||
/// else on the row reaches the surrounding settings page's own scroll
|
||||
/// view instead of being grabbed as a reorder. Null renders a plain,
|
||||
/// non-interactive grip icon (e.g. a standalone preview/test).
|
||||
final int? dragIndex;
|
||||
|
||||
const NooTabOrderRow({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
this.pinned = false,
|
||||
this.onTogglePin,
|
||||
this.showPin = true,
|
||||
this.dragIndex,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final grip = Icon(LucideIcons.gripVertical, size: 18, color: colors.fg3);
|
||||
return Container(
|
||||
height: 52,
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10),
|
||||
color: colors.surface,
|
||||
child: Row(
|
||||
children: [
|
||||
dragIndex == null
|
||||
? grip
|
||||
: ReorderableDragStartListener(index: dragIndex!, child: grip),
|
||||
const SizedBox(width: 12),
|
||||
Icon(icon, size: 20, color: colors.fg2),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
child: Text(
|
||||
label,
|
||||
style: NooText.bodyL.copyWith(height: 1, color: colors.fg1),
|
||||
),
|
||||
),
|
||||
if (showPin)
|
||||
GestureDetector(
|
||||
onTap: onTogglePin,
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: pinned ? colors.accentSoft : colors.surface2,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(
|
||||
pinned ? LucideIcons.pin : LucideIcons.pinOff,
|
||||
size: 16,
|
||||
color: pinned ? colors.accentText : colors.fg3,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,116 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../core/noo_avatar.dart';
|
||||
|
||||
/// Activity feed entry (`DESIGN_SYSTEM.md` section 2, "Activity item"):
|
||||
/// a 36px [NooAvatar], then the sentence **actor** verb **object** tail
|
||||
/// with the time below in meta style, and an optional [trailing] slot on
|
||||
/// the right for the 32px/r10 file tile (built by the caller, so this
|
||||
/// doesn't depend on the file-kind mapping).
|
||||
class NooActivityItem extends StatelessWidget {
|
||||
final String actor;
|
||||
|
||||
/// Plain text between actor and object, e.g. `"shared"`.
|
||||
final String verb;
|
||||
|
||||
/// Bold subject of the action, e.g. a file name.
|
||||
final String? object;
|
||||
|
||||
/// Plain text after the object, e.g. `"with you"`.
|
||||
final String? tail;
|
||||
|
||||
final String? time;
|
||||
|
||||
/// Avatar initials; defaults to the first letter of [actor].
|
||||
final String? initials;
|
||||
|
||||
/// One of [NooColors.avatarPalette].
|
||||
final Color? avatarColor;
|
||||
|
||||
/// Uses the accent-soft current-user avatar.
|
||||
final bool currentUser;
|
||||
|
||||
/// Right-aligned slot, typically a 32px file tile.
|
||||
final Widget? trailing;
|
||||
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooActivityItem({
|
||||
super.key,
|
||||
required this.actor,
|
||||
required this.verb,
|
||||
this.object,
|
||||
this.tail,
|
||||
this.time,
|
||||
this.initials,
|
||||
this.avatarColor,
|
||||
this.currentUser = false,
|
||||
this.trailing,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final base = NooText.body.copyWith(color: colors.fg1);
|
||||
const bold = TextStyle(fontWeight: FontWeight.w600);
|
||||
|
||||
final fallbackInitials = actor.trim().isEmpty
|
||||
? ''
|
||||
: actor.trim().characters.first.toUpperCase();
|
||||
|
||||
return Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(
|
||||
horizontal: NooSpace.md,
|
||||
vertical: NooSpace.sm,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
NooAvatar(
|
||||
initials: initials ?? fallbackInitials,
|
||||
size: 36,
|
||||
color: avatarColor,
|
||||
current: currentUser,
|
||||
),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text.rich(
|
||||
TextSpan(
|
||||
style: base,
|
||||
children: [
|
||||
TextSpan(text: actor, style: bold),
|
||||
TextSpan(text: ' $verb'),
|
||||
if (object != null) ...[
|
||||
const TextSpan(text: ' '),
|
||||
TextSpan(text: object, style: bold),
|
||||
],
|
||||
if (tail != null) TextSpan(text: ' $tail'),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (time != null) ...[
|
||||
const SizedBox(height: NooSpace.xxs),
|
||||
Text(time!, style: NooText.meta.copyWith(color: colors.fg3)),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (trailing != null) ...[
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
trailing!,
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,179 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Grid-view file card: a thumbnail area (file-type soft colour + 32px
|
||||
/// icon, or a real [thumbnail]) above the name, an overflow button and a
|
||||
/// meta line (`DESIGN_SYSTEM.md` section 2, "Grid card"). Mobile lays these
|
||||
/// out 2-up with a 10px gap, desktop 5-up with a 16px gap - the parent grid
|
||||
/// owns that, this card just fills its cell.
|
||||
///
|
||||
/// The placeholder colours/icon are plain parameters rather than a file
|
||||
/// kind so this stays independent of the file-kind mapping; callers pass
|
||||
/// e.g. `accentSoft`/`accentText`/`LucideIcons.folder` for a folder.
|
||||
class NooGridCard extends StatelessWidget {
|
||||
final String name;
|
||||
final String? meta;
|
||||
|
||||
/// Soft fill behind [icon] when there's no [thumbnail] (e.g. `infoSoft`).
|
||||
final Color? placeholderColor;
|
||||
final IconData? icon;
|
||||
|
||||
/// Icon colour on the placeholder (e.g. `info`).
|
||||
final Color? iconColor;
|
||||
|
||||
/// Real thumbnail (typically an `Image` with `BoxFit.cover`); replaces
|
||||
/// the placeholder and is clipped to the card's top corners.
|
||||
final Widget? thumbnail;
|
||||
|
||||
/// 104 (mobile) - 118 (desktop).
|
||||
final double thumbnailHeight;
|
||||
|
||||
final bool selected;
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onLongPress;
|
||||
|
||||
/// Shows the overflow button when non-null.
|
||||
final VoidCallback? onMore;
|
||||
|
||||
/// `ellipsis` on iOS/desktop, `ellipsis-vertical` on Android.
|
||||
final bool verticalOverflowIcon;
|
||||
|
||||
const NooGridCard({
|
||||
super.key,
|
||||
required this.name,
|
||||
this.meta,
|
||||
this.placeholderColor,
|
||||
this.icon,
|
||||
this.iconColor,
|
||||
this.thumbnail,
|
||||
this.thumbnailHeight = 104,
|
||||
this.selected = false,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
this.onMore,
|
||||
this.verticalOverflowIcon = false,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final radius = BorderRadius.circular(NooRadii.gridCard);
|
||||
|
||||
final thumb = SizedBox(
|
||||
height: thumbnailHeight,
|
||||
width: double.infinity,
|
||||
child:
|
||||
thumbnail ??
|
||||
ColoredBox(
|
||||
color: placeholderColor ?? colors.surface2,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
icon ?? LucideIcons.file,
|
||||
size: 32,
|
||||
color: iconColor ?? colors.fg2,
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
return Material(
|
||||
color: selected ? colors.accentSoft : colors.surface,
|
||||
borderRadius: radius,
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
onLongPress: onLongPress,
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
thumb,
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
NooSpace.sm,
|
||||
10,
|
||||
onMore != null ? NooSpace.xxs : NooSpace.sm,
|
||||
NooSpace.sm,
|
||||
),
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
height: 1.2,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: selected ? colors.accentText : colors.fg1,
|
||||
),
|
||||
),
|
||||
if (meta != null) ...[
|
||||
const SizedBox(height: NooSpace.xxs),
|
||||
Text(
|
||||
meta!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(
|
||||
fontSize: 12,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (onMore != null)
|
||||
_OverflowButton(
|
||||
icon: verticalOverflowIcon
|
||||
? LucideIcons.ellipsisVertical
|
||||
: LucideIcons.ellipsis,
|
||||
color: colors.fg3,
|
||||
onTap: onMore!,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Compact 28px circular hit target so the overflow button doesn't push
|
||||
/// the name/meta column taller than the text itself.
|
||||
class _OverflowButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final Color color;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _OverflowButton({
|
||||
required this.icon,
|
||||
required this.color,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return SizedBox(
|
||||
width: 28,
|
||||
height: 28,
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
shape: const CircleBorder(),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Icon(icon, size: 16, color: color),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,130 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Month group heading for the Photos grid (`DESIGN_SYSTEM.md` section 2,
|
||||
/// "Photo grid"): group heading (Schibsted 18/500, fg-1) on the left and
|
||||
/// the item count in meta style (fg-3) on the right.
|
||||
class NooPhotoGroupHeader extends StatelessWidget {
|
||||
final String title;
|
||||
|
||||
/// e.g. `"128 photos"`; hidden when null.
|
||||
final String? count;
|
||||
|
||||
/// Horizontal inset - 16 on mobile (the grid itself is edge to edge),
|
||||
/// 24 on desktop.
|
||||
final EdgeInsetsGeometry padding;
|
||||
|
||||
const NooPhotoGroupHeader({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.count,
|
||||
this.padding = const EdgeInsets.fromLTRB(
|
||||
NooSpace.md,
|
||||
NooSpace.lg,
|
||||
NooSpace.md,
|
||||
NooSpace.sm,
|
||||
),
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Padding(
|
||||
padding: padding,
|
||||
child: Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.baseline,
|
||||
textBaseline: TextBaseline.alphabetic,
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.groupHeading.copyWith(height: 1, color: colors.fg1),
|
||||
),
|
||||
),
|
||||
if (count != null) ...[
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Text(count!, style: NooText.meta.copyWith(color: colors.fg3)),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Square-tile photo grid (`DESIGN_SYSTEM.md` section 2, "Photo grid"):
|
||||
/// mobile is 3 columns with a 2px gap edge to edge ([NooPhotoGrid.mobile]
|
||||
/// defaults), desktop 8 columns with 4px ([NooPhotoGrid.desktop]).
|
||||
///
|
||||
/// Builds lazily from [itemBuilder] (typically returning a `NooPhotoTile`).
|
||||
/// Use the default constructor inside a `CustomScrollView` as a sliver
|
||||
/// (one per month group, after a `SliverToBoxAdapter(NooPhotoGroupHeader)`),
|
||||
/// or [NooPhotoGrid.box] for a non-scrolling box that sizes to its content
|
||||
/// (e.g. inside a `Column`/`ListView` item).
|
||||
class NooPhotoGrid extends StatelessWidget {
|
||||
final int itemCount;
|
||||
final IndexedWidgetBuilder itemBuilder;
|
||||
final int columns;
|
||||
final double gap;
|
||||
final EdgeInsetsGeometry padding;
|
||||
final bool _sliver;
|
||||
|
||||
/// Sliver form. Defaults are the mobile layout.
|
||||
const NooPhotoGrid({
|
||||
super.key,
|
||||
required this.itemCount,
|
||||
required this.itemBuilder,
|
||||
this.columns = 3,
|
||||
this.gap = 2,
|
||||
this.padding = EdgeInsets.zero,
|
||||
}) : _sliver = true;
|
||||
|
||||
/// Box form: a shrink-wrapped, non-scrolling grid.
|
||||
const NooPhotoGrid.box({
|
||||
super.key,
|
||||
required this.itemCount,
|
||||
required this.itemBuilder,
|
||||
this.columns = 3,
|
||||
this.gap = 2,
|
||||
this.padding = EdgeInsets.zero,
|
||||
}) : _sliver = false;
|
||||
|
||||
/// Mobile/desktop column + gap presets from the spec.
|
||||
static const mobileColumns = 3;
|
||||
static const mobileGap = 2.0;
|
||||
static const desktopColumns = 8;
|
||||
static const desktopGap = 4.0;
|
||||
|
||||
SliverGridDelegate get _delegate =>
|
||||
SliverGridDelegateWithFixedCrossAxisCount(
|
||||
crossAxisCount: columns,
|
||||
mainAxisSpacing: gap,
|
||||
crossAxisSpacing: gap,
|
||||
);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
if (_sliver) {
|
||||
return SliverPadding(
|
||||
padding: padding,
|
||||
sliver: SliverGrid(
|
||||
gridDelegate: _delegate,
|
||||
delegate: SliverChildBuilderDelegate(
|
||||
itemBuilder,
|
||||
childCount: itemCount,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
return GridView.builder(
|
||||
shrinkWrap: true,
|
||||
primary: false,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
padding: padding,
|
||||
gridDelegate: _delegate,
|
||||
itemCount: itemCount,
|
||||
itemBuilder: itemBuilder,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,164 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Video badge background from `DESIGN_SYSTEM.md` section 2 ("Photo
|
||||
/// grid"): `rgba(14,13,11,.7)` - not a [NooColors] token, it's a fixed
|
||||
/// overlay that sits on photo content in both themes.
|
||||
const _videoBadgeColor = Color(0xB30E0D0B);
|
||||
|
||||
/// Square photo tile for [NooPhotoGrid] (`DESIGN_SYSTEM.md` section 2,
|
||||
/// "Photo grid"): an image [child] (usually `Image` with `BoxFit.cover`)
|
||||
/// or, while loading/absent, a flat [placeholderColor] from
|
||||
/// [NooColors.avatarPalette]. Videos get a bottom-right badge with a `play`
|
||||
/// icon and [videoDuration].
|
||||
class NooPhotoTile extends StatelessWidget {
|
||||
final Widget? child;
|
||||
|
||||
/// Fill shown behind/instead of [child]; defaults to the first
|
||||
/// [NooColors.avatarPalette] entry. Use [NooPhotoTile.paletteColor] to
|
||||
/// pick a stable one per item.
|
||||
final Color? placeholderColor;
|
||||
|
||||
/// Non-null marks the tile as a video and shows the badge, e.g. `0:42`.
|
||||
/// Pass an empty string for a play-icon-only badge.
|
||||
final String? videoDuration;
|
||||
|
||||
final bool selected;
|
||||
|
||||
/// Shows the selection check circle even when not [selected] (i.e. the
|
||||
/// grid is in multi-select mode).
|
||||
final bool selectionMode;
|
||||
|
||||
final VoidCallback? onTap;
|
||||
final VoidCallback? onLongPress;
|
||||
|
||||
const NooPhotoTile({
|
||||
super.key,
|
||||
this.child,
|
||||
this.placeholderColor,
|
||||
this.videoDuration,
|
||||
this.selected = false,
|
||||
this.selectionMode = false,
|
||||
this.onTap,
|
||||
this.onLongPress,
|
||||
});
|
||||
|
||||
/// Stable secondary-palette colour for an item (e.g. from its id/path
|
||||
/// hash), so placeholders don't reshuffle between rebuilds.
|
||||
static Color paletteColor(int seed) =>
|
||||
NooColors.avatarPalette[seed.abs() % NooColors.avatarPalette.length];
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
|
||||
return AspectRatio(
|
||||
aspectRatio: 1,
|
||||
child: GestureDetector(
|
||||
onTap: onTap,
|
||||
onLongPress: onLongPress,
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
// Selected tiles inset so an accent-soft frame shows around
|
||||
// the photo, instead of covering it with a tint.
|
||||
ColoredBox(color: selected ? colors.accentSoft : Colors.transparent),
|
||||
AnimatedPadding(
|
||||
duration: NooMotion.fast,
|
||||
curve: NooMotion.ease,
|
||||
padding: EdgeInsets.all(selected ? 8 : 0),
|
||||
child: ClipRRect(
|
||||
borderRadius: BorderRadius.circular(selected ? 8 : 0),
|
||||
child: Stack(
|
||||
fit: StackFit.expand,
|
||||
children: [
|
||||
ColoredBox(
|
||||
color: placeholderColor ?? NooColors.avatarPalette.first,
|
||||
),
|
||||
?child,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
if (videoDuration != null)
|
||||
Positioned(
|
||||
right: 6,
|
||||
bottom: 6,
|
||||
child: _VideoBadge(duration: videoDuration!),
|
||||
),
|
||||
if (selected || selectionMode)
|
||||
Positioned(
|
||||
left: 6,
|
||||
top: 6,
|
||||
child: _SelectCheck(selected: selected),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _VideoBadge extends StatelessWidget {
|
||||
final String duration;
|
||||
|
||||
const _VideoBadge({required this.duration});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 20,
|
||||
padding: EdgeInsets.symmetric(horizontal: duration.isEmpty ? 4 : 6),
|
||||
decoration: BoxDecoration(
|
||||
color: _videoBadgeColor,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
const Icon(LucideIcons.play, size: 12, color: Colors.white),
|
||||
if (duration.isNotEmpty) ...[
|
||||
const SizedBox(width: 3),
|
||||
Text(
|
||||
duration,
|
||||
style: NooText.meta.copyWith(
|
||||
fontSize: 11,
|
||||
height: 1,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Colors.white,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 22px selection circle: accent fill + white check when selected, a
|
||||
/// white-outlined empty circle on the video-badge scrim otherwise.
|
||||
class _SelectCheck extends StatelessWidget {
|
||||
final bool selected;
|
||||
|
||||
const _SelectCheck({required this.selected});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Container(
|
||||
width: 22,
|
||||
height: 22,
|
||||
decoration: BoxDecoration(
|
||||
shape: BoxShape.circle,
|
||||
color: selected ? colors.accent : _videoBadgeColor,
|
||||
border: selected
|
||||
? null
|
||||
: Border.all(color: Colors.white, width: 1.5),
|
||||
),
|
||||
child: selected
|
||||
? const Icon(LucideIcons.check, size: 14, color: Colors.white)
|
||||
: null,
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,98 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../core/noo_progress_bar.dart';
|
||||
|
||||
/// Desktop stat card (`DESIGN_SYSTEM.md` sections 1.3/1.4): radius 18,
|
||||
/// Stat text (Schibsted 600, 28 on desktop), a label below and an optional
|
||||
/// 6px [NooProgressBar]. The mobile/Offline equivalent with an action
|
||||
/// button is `NooSummaryCard`.
|
||||
class NooStatCard extends StatelessWidget {
|
||||
final String stat;
|
||||
final String label;
|
||||
|
||||
/// 0-1; renders a [NooProgressBar] under the label.
|
||||
final double? progress;
|
||||
|
||||
/// Optional line under the progress bar, e.g. `"of 50 GB"`.
|
||||
final String? meta;
|
||||
|
||||
final IconData? icon;
|
||||
|
||||
/// Defaults to `surface`; pass `surface2` when the card sits on a
|
||||
/// `surface` pane.
|
||||
final Color? color;
|
||||
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooStatCard({
|
||||
super.key,
|
||||
required this.stat,
|
||||
required this.label,
|
||||
this.progress,
|
||||
this.meta,
|
||||
this.icon,
|
||||
this.color,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
/// Desktop Stat size (spec 1.3: 32 mobile / 28 desktop); [NooText.stat]
|
||||
/// only carries the mobile size.
|
||||
static const _desktopStatSize = 28.0;
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
|
||||
return Material(
|
||||
color: color ?? colors.surface,
|
||||
borderRadius: BorderRadius.circular(NooRadii.gridCard),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(18),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
if (icon != null) ...[
|
||||
Icon(icon, size: 18, color: colors.fg2),
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
],
|
||||
Text(
|
||||
stat,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.stat.copyWith(
|
||||
fontSize: _desktopStatSize,
|
||||
letterSpacing: -_desktopStatSize * 0.03,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
const SizedBox(height: NooSpace.xs),
|
||||
Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(color: colors.fg2),
|
||||
),
|
||||
if (progress != null) ...[
|
||||
const SizedBox(height: NooSpace.smd),
|
||||
NooProgressBar(value: progress!),
|
||||
],
|
||||
if (meta != null) ...[
|
||||
const SizedBox(height: NooSpace.xs),
|
||||
Text(
|
||||
meta!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(fontSize: 12, color: colors.fg3),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,229 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import 'noo_nav_style.dart';
|
||||
|
||||
export 'noo_nav_style.dart';
|
||||
|
||||
/// Android indicator geometry, shared between the sliding pill and each
|
||||
/// item's own icon box so they line up exactly.
|
||||
const double _kAndroidPillTop = 14;
|
||||
const double _kAndroidPillWidth = 56;
|
||||
const double _kAndroidPillHeight = 32;
|
||||
|
||||
/// The mobile bottom bar (DESIGN_SYSTEM.md 3, "Mobile"; `iNav`/`aNav` in
|
||||
/// `Mobile Screen.dc.html`). Shows the 5 pinned tabs - which ones, and in
|
||||
/// what order, is the caller's business; this only draws [destinations].
|
||||
///
|
||||
/// - [NooNavStyle.ios]: surface fill, 1px top `line`, a 50px row (8px top
|
||||
/// padding) of icon 24 over a 10px label. Active: accent-text, 600.
|
||||
/// Idle: fg-3, 500. No ripple.
|
||||
/// - [NooNavStyle.android]: surface fill, 80px. Every tab shows its 24px
|
||||
/// icon over a 12px label (label only visible - not removed from layout,
|
||||
/// so the row never resizes - once selected). The active icon sits in a
|
||||
/// 56x32 accent-soft pill that slides between tabs as selection moves,
|
||||
/// rather than popping in/out on the destination item itself.
|
||||
///
|
||||
/// The home indicator / gesture bar area below the row comes from the
|
||||
/// bottom safe-area inset rather than a fixed 34/20px spacer, so it's
|
||||
/// right on every device. Meant for `Scaffold.bottomNavigationBar`.
|
||||
class NooBottomBar extends StatelessWidget {
|
||||
final NooNavStyle style;
|
||||
final List<NooNavDestination> destinations;
|
||||
final int selectedIndex;
|
||||
final ValueChanged<int> onSelected;
|
||||
|
||||
const NooBottomBar({
|
||||
super.key,
|
||||
required this.style,
|
||||
required this.destinations,
|
||||
required this.selectedIndex,
|
||||
required this.onSelected,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final ios = style == NooNavStyle.ios;
|
||||
|
||||
final row = ios ? _buildIosRow() : _buildAndroidRow(colors);
|
||||
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
border: ios ? Border(top: BorderSide(color: colors.line)) : null,
|
||||
),
|
||||
child: SafeArea(
|
||||
top: false,
|
||||
child: SizedBox(height: ios ? 50 : 80, child: row),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIosRow() {
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
for (var i = 0; i < destinations.length; i++)
|
||||
Expanded(
|
||||
child: _IosItem(
|
||||
destination: destinations[i],
|
||||
selected: i == selectedIndex,
|
||||
onTap: () => onSelected(i),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAndroidRow(NooColors colors) {
|
||||
return LayoutBuilder(
|
||||
builder: (context, constraints) {
|
||||
final itemWidth = constraints.maxWidth / destinations.length;
|
||||
return Stack(
|
||||
children: [
|
||||
AnimatedPositioned(
|
||||
duration: NooMotion.base,
|
||||
curve: NooMotion.ease,
|
||||
top: _kAndroidPillTop,
|
||||
left:
|
||||
itemWidth * selectedIndex +
|
||||
(itemWidth - _kAndroidPillWidth) / 2,
|
||||
width: _kAndroidPillWidth,
|
||||
height: _kAndroidPillHeight,
|
||||
child: DecoratedBox(
|
||||
decoration: BoxDecoration(
|
||||
color: colors.accentSoft,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
),
|
||||
),
|
||||
Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
for (var i = 0; i < destinations.length; i++)
|
||||
Expanded(
|
||||
child: _AndroidItem(
|
||||
destination: destinations[i],
|
||||
selected: i == selectedIndex,
|
||||
onTap: () => onSelected(i),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _IosItem extends StatelessWidget {
|
||||
final NooNavDestination destination;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _IosItem({
|
||||
required this.destination,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final fg = selected ? colors.accentText : colors.fg3;
|
||||
return Semantics(
|
||||
button: true,
|
||||
selected: selected,
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: 8),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
Icon(destination.icon, size: 24, color: fg),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
destination.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.navLabel.copyWith(
|
||||
fontSize: 10,
|
||||
height: 1,
|
||||
fontWeight: selected ? FontWeight.w600 : FontWeight.w500,
|
||||
color: fg,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Icon (over the shared sliding pill, drawn separately by [NooBottomBar])
|
||||
/// with its label always below it - the label's space is reserved
|
||||
/// whether or not it's showing (only its opacity changes), so the icon
|
||||
/// never shifts vertically as selection changes, and stays aligned with
|
||||
/// the pill's fixed [_kAndroidPillTop]/[_kAndroidPillHeight].
|
||||
class _AndroidItem extends StatelessWidget {
|
||||
final NooNavDestination destination;
|
||||
final bool selected;
|
||||
final VoidCallback onTap;
|
||||
|
||||
const _AndroidItem({
|
||||
required this.destination,
|
||||
required this.selected,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Semantics(
|
||||
button: true,
|
||||
selected: selected,
|
||||
label: destination.label,
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.only(top: _kAndroidPillTop),
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.start,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: _kAndroidPillHeight,
|
||||
child: Center(
|
||||
child: Icon(
|
||||
destination.icon,
|
||||
size: 24,
|
||||
color: selected ? colors.accentText : colors.fg2,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 4),
|
||||
AnimatedOpacity(
|
||||
duration: NooMotion.base,
|
||||
curve: NooMotion.ease,
|
||||
opacity: selected ? 1 : 0,
|
||||
child: Text(
|
||||
destination.label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.navLabelActive.copyWith(
|
||||
height: 1,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,365 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../core/noo_progress_bar.dart';
|
||||
|
||||
/// The mobile drawer shell (DESIGN_SYSTEM.md 2 "Drawer" / 3; `drawer` in
|
||||
/// `Mobile Screen.dc.html`): 316px wide, `surface` fill, radius 28 on the
|
||||
/// trailing edge, flat (no elevation). Slots top to bottom:
|
||||
///
|
||||
/// 1. [account] - usually a [NooDrawerAccount]
|
||||
/// 2. [storage] - usually a [NooDrawerStorage]
|
||||
/// 3. a divider, then - only when [moreItems] isn't empty - the [moreLabel]
|
||||
/// heading and [moreItems] (the unpinned tabs, as [NooDrawerItem]s)
|
||||
/// 4. a divider, then [settings] (a [NooDrawerItem])
|
||||
/// 5. a spacer, then [footer] - the "Edit tabs" [NooDrawerLink]
|
||||
///
|
||||
/// Wraps Flutter's [Drawer], so pass it to `Scaffold.drawer` and the open/
|
||||
/// close gesture and semantics come for free. The scrim is the Scaffold's
|
||||
/// job, not the drawer's: set `Scaffold.drawerScrimColor` to
|
||||
/// `context.nooColors.scrim`. The content scrolls if it doesn't fit (e.g.
|
||||
/// landscape), keeping [footer] pinned to the bottom when it does.
|
||||
class NooDrawer extends StatelessWidget {
|
||||
final Widget? account;
|
||||
final Widget? storage;
|
||||
final String moreLabel;
|
||||
final List<Widget> moreItems;
|
||||
final Widget? settings;
|
||||
final Widget? footer;
|
||||
|
||||
const NooDrawer({
|
||||
super.key,
|
||||
this.account,
|
||||
this.storage,
|
||||
this.moreLabel = 'More',
|
||||
this.moreItems = const [],
|
||||
this.settings,
|
||||
this.footer,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final insets = MediaQuery.paddingOf(context);
|
||||
|
||||
Widget divider(EdgeInsets margin) =>
|
||||
Container(height: 1, margin: margin, color: colors.line);
|
||||
|
||||
final children = <Widget>[
|
||||
?account,
|
||||
?storage,
|
||||
if (account != null || storage != null)
|
||||
divider(const EdgeInsets.fromLTRB(12, 0, 12, 8)),
|
||||
if (moreItems.isNotEmpty) ...[
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
|
||||
child: Text(
|
||||
moreLabel,
|
||||
style: NooText.label.copyWith(height: 1, color: colors.fg2),
|
||||
),
|
||||
),
|
||||
...moreItems,
|
||||
if (settings != null)
|
||||
divider(const EdgeInsets.symmetric(horizontal: 12, vertical: 8)),
|
||||
],
|
||||
?settings,
|
||||
const Spacer(),
|
||||
?footer,
|
||||
];
|
||||
|
||||
return Drawer(
|
||||
width: 316,
|
||||
backgroundColor: colors.surface,
|
||||
surfaceTintColor: Colors.transparent,
|
||||
elevation: 0,
|
||||
shadowColor: Colors.transparent,
|
||||
shape: const RoundedRectangleBorder(
|
||||
borderRadius: BorderRadiusDirectional.horizontal(
|
||||
end: Radius.circular(NooRadii.sheetTop),
|
||||
),
|
||||
),
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) => SingleChildScrollView(
|
||||
// Reference: 64px from the screen top (= status bar + 10-24px),
|
||||
// 12px sides, 28px bottom.
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
NooSpace.sm,
|
||||
insets.top + NooSpace.md,
|
||||
NooSpace.sm,
|
||||
math.max(28, insets.bottom + NooSpace.sm),
|
||||
),
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: math.max(
|
||||
0,
|
||||
constraints.maxHeight -
|
||||
insets.top -
|
||||
NooSpace.md -
|
||||
math.max(28, insets.bottom + NooSpace.sm),
|
||||
),
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
spacing: 4,
|
||||
children: children,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The drawer's account block: 48px [avatar], the account [name] (18
|
||||
/// Schibsted) over a [subtitle] (usually the server host, 13 fg-3), and a
|
||||
/// 36px surface-2 circle with `chevron-down` to switch accounts.
|
||||
class NooDrawerAccount extends StatelessWidget {
|
||||
/// Usually `NooAvatar(size: 48, current: true, ...)`.
|
||||
final Widget avatar;
|
||||
final String name;
|
||||
final String? subtitle;
|
||||
|
||||
/// Tapping the block itself (e.g. open account settings).
|
||||
final VoidCallback? onTap;
|
||||
|
||||
/// The chevron button; hidden when null.
|
||||
final VoidCallback? onSwitchAccount;
|
||||
|
||||
const NooDrawerAccount({
|
||||
super.key,
|
||||
required this.avatar,
|
||||
required this.name,
|
||||
this.subtitle,
|
||||
this.onTap,
|
||||
this.onSwitchAccount,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.only(bottom: 14),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: BorderRadius.circular(NooRadii.input),
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Row(
|
||||
spacing: 12,
|
||||
children: [
|
||||
avatar,
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
spacing: 5,
|
||||
children: [
|
||||
Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.groupHeading.copyWith(
|
||||
height: 1,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
if (subtitle != null)
|
||||
Text(
|
||||
subtitle!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(
|
||||
height: 1,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
if (onSwitchAccount != null)
|
||||
Tooltip(
|
||||
message: 'Switch account',
|
||||
child: Material(
|
||||
color: colors.surface2,
|
||||
shape: const CircleBorder(),
|
||||
child: InkWell(
|
||||
customBorder: const CircleBorder(),
|
||||
onTap: onSwitchAccount,
|
||||
child: SizedBox.square(
|
||||
dimension: 36,
|
||||
child: Icon(
|
||||
LucideIcons.chevronDown,
|
||||
size: 18,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The drawer's storage meter: a 6px [NooProgressBar] over a meta line
|
||||
/// ("38.2 GB of 100 GB used").
|
||||
class NooDrawerStorage extends StatelessWidget {
|
||||
/// 0-1.
|
||||
final double value;
|
||||
final String label;
|
||||
|
||||
const NooDrawerStorage({super.key, required this.value, required this.label});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(12, 0, 12, 16),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
spacing: 8,
|
||||
children: [
|
||||
NooProgressBar(value: value),
|
||||
Text(
|
||||
label,
|
||||
style: NooText.meta.copyWith(height: 1, color: colors.fg3),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A 52px pill row in [NooDrawer]: 24px icon, 16/500 label, optional
|
||||
/// trailing [count] (14/500 fg-3). [selected] gives it an accent-soft fill
|
||||
/// with accent-text content (label at 600, matching the sidebar's active
|
||||
/// item).
|
||||
class NooDrawerItem extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final String? count;
|
||||
final bool selected;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooDrawerItem({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
this.count,
|
||||
this.selected = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final fg = selected ? colors.accentText : colors.fg1;
|
||||
return Semantics(
|
||||
button: true,
|
||||
selected: selected,
|
||||
child: Material(
|
||||
color: selected ? colors.accentSoft : Colors.transparent,
|
||||
shape: const StadiumBorder(),
|
||||
clipBehavior: Clip.antiAlias,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
child: SizedBox(
|
||||
height: 52,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||||
child: Row(
|
||||
spacing: 14,
|
||||
children: [
|
||||
Icon(icon, size: 24, color: fg),
|
||||
Expanded(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.bodyL.copyWith(
|
||||
height: 1,
|
||||
fontWeight: selected
|
||||
? FontWeight.w600
|
||||
: FontWeight.w500,
|
||||
color: fg,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (count != null && count!.isNotEmpty)
|
||||
Text(
|
||||
count!,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
height: 1,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: selected ? colors.accentText : colors.fg3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The accent-text link at the bottom of [NooDrawer] ("Edit tabs"): 16px
|
||||
/// icon, 14/600 label.
|
||||
class NooDrawerLink extends StatelessWidget {
|
||||
final String label;
|
||||
final IconData icon;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooDrawerLink({
|
||||
super.key,
|
||||
this.label = 'Edit tabs',
|
||||
this.icon = LucideIcons.pencil,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Align(
|
||||
alignment: AlignmentDirectional.centerStart,
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
customBorder: const StadiumBorder(),
|
||||
child: Padding(
|
||||
// Vertical padding only grows the hit target (to 44px); the
|
||||
// 16px sides match the reference inset.
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
spacing: 8,
|
||||
children: [
|
||||
Icon(icon, size: 16, color: colors.accentText),
|
||||
Text(
|
||||
label,
|
||||
style: NooText.buttonSm.copyWith(
|
||||
height: 1,
|
||||
color: colors.accentText,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,28 @@
|
||||
import 'package:flutter/widgets.dart';
|
||||
|
||||
/// Which platform's navigation chrome a mobile nav component draws
|
||||
/// (DESIGN_SYSTEM.md 3, "Mobile"). Only the chrome differs per platform -
|
||||
/// content components look the same everywhere, so this enum is only taken
|
||||
/// by the `nav/` widgets ([NooBottomBar], [NooTopBar]).
|
||||
enum NooNavStyle {
|
||||
ios,
|
||||
android;
|
||||
|
||||
/// iOS (and macOS, when a mobile layout is shown there) get the iOS
|
||||
/// chrome; everything else gets the Android chrome.
|
||||
static NooNavStyle fromPlatform(TargetPlatform platform) =>
|
||||
switch (platform) {
|
||||
TargetPlatform.iOS || TargetPlatform.macOS => NooNavStyle.ios,
|
||||
_ => NooNavStyle.android,
|
||||
};
|
||||
}
|
||||
|
||||
/// One destination in a [NooBottomBar]. Data-agnostic on purpose - the app
|
||||
/// maps its own tab model (e.g. `AppTab`) onto these.
|
||||
@immutable
|
||||
class NooNavDestination {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
|
||||
const NooNavDestination({required this.icon, required this.label});
|
||||
}
|
||||
@@ -0,0 +1,320 @@
|
||||
import 'dart:math' as math;
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import '../core/noo_progress_bar.dart';
|
||||
|
||||
/// The desktop sidebar (DESIGN_SYSTEM.md 3, "Desktop"; the 256px column in
|
||||
/// `Desktop Screen.dc.html`): `bg` fill, 12/12/16 padding, 2px between
|
||||
/// rows, and a 1px `line` on its trailing edge separating it from the
|
||||
/// `surface` main pane. Slots top to bottom:
|
||||
///
|
||||
/// 1. [windowControls] - e.g. macOS traffic lights (not built here)
|
||||
/// 2. [account] - usually a [NooSidebarAccount] (14px gap below it)
|
||||
/// 3. [items] - the pinned tabs, a [NooSidebarDivider], then the rest, as
|
||||
/// [NooSidebarItem]s
|
||||
/// 4. a spacer, then [storage] (usually a [NooSidebarStorage]) and
|
||||
/// [settings] (a [NooSidebarItem])
|
||||
///
|
||||
/// Scrolls when the window is too short, keeping the bottom slots pinned
|
||||
/// down when it isn't.
|
||||
class NooSidebar extends StatelessWidget {
|
||||
final Widget? windowControls;
|
||||
final Widget? account;
|
||||
final List<Widget> items;
|
||||
final Widget? storage;
|
||||
final Widget? settings;
|
||||
|
||||
/// Draw the 1px trailing-edge `line`. Turn off if the main pane draws
|
||||
/// its own leading border.
|
||||
final bool showDivider;
|
||||
|
||||
const NooSidebar({
|
||||
super.key,
|
||||
this.windowControls,
|
||||
this.account,
|
||||
this.items = const [],
|
||||
this.storage,
|
||||
this.settings,
|
||||
this.showDivider = true,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
const padding = EdgeInsets.fromLTRB(12, 12, 12, 16);
|
||||
|
||||
return Container(
|
||||
width: NooSizes.sidebarWidth,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.bg,
|
||||
border: showDivider
|
||||
? BorderDirectional(end: BorderSide(color: colors.line))
|
||||
: null,
|
||||
),
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: LayoutBuilder(
|
||||
builder: (context, constraints) => SingleChildScrollView(
|
||||
padding: padding,
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(
|
||||
minHeight: math.max(
|
||||
0,
|
||||
constraints.maxHeight - padding.vertical,
|
||||
),
|
||||
),
|
||||
child: IntrinsicHeight(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
spacing: 2,
|
||||
children: [
|
||||
?windowControls,
|
||||
if (account != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.only(bottom: 14),
|
||||
child: account,
|
||||
),
|
||||
...items,
|
||||
const Spacer(),
|
||||
?storage,
|
||||
?settings,
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A 38px sidebar row: 18px icon, 14/500 label, optional trailing [count]
|
||||
/// (12/500). Idle: fg-1 label, fg-2 icon, fg-3 count, `surface` on hover.
|
||||
/// Active ([selected]): accent-soft fill, everything accent-text, label at
|
||||
/// 600. Radius 12.
|
||||
class NooSidebarItem extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String label;
|
||||
final String? count;
|
||||
final bool selected;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooSidebarItem({
|
||||
super.key,
|
||||
required this.icon,
|
||||
required this.label,
|
||||
this.count,
|
||||
this.selected = false,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final radius = BorderRadius.circular(NooRadii.sidebarItem);
|
||||
return Semantics(
|
||||
button: true,
|
||||
selected: selected,
|
||||
child: Material(
|
||||
color: selected ? colors.accentSoft : Colors.transparent,
|
||||
borderRadius: radius,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: radius,
|
||||
hoverColor: selected ? Colors.transparent : colors.surface,
|
||||
splashFactory: NoSplash.splashFactory,
|
||||
child: SizedBox(
|
||||
height: NooSizes.sidebarItem,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 12),
|
||||
child: Row(
|
||||
spacing: 12,
|
||||
children: [
|
||||
Icon(
|
||||
icon,
|
||||
size: 18,
|
||||
color: selected ? colors.accentText : colors.fg2,
|
||||
),
|
||||
Expanded(
|
||||
child: Text(
|
||||
label,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
height: 1,
|
||||
fontWeight: selected
|
||||
? FontWeight.w600
|
||||
: FontWeight.w500,
|
||||
color: selected ? colors.accentText : colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
if (count != null && count!.isNotEmpty)
|
||||
Text(
|
||||
count!,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 12,
|
||||
height: 1,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: selected ? colors.accentText : colors.fg3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The 1px `line` between the pinned and remaining tabs, inset 12px with
|
||||
/// 8px above and below.
|
||||
class NooSidebarDivider extends StatelessWidget {
|
||||
const NooSidebarDivider({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
height: 1,
|
||||
margin: const EdgeInsets.symmetric(horizontal: 12, vertical: 8),
|
||||
color: context.nooColors.line,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The account switcher card at the top of [NooSidebar]: a `surface` card
|
||||
/// (radius 14, 8/10 padding) with a 32px [avatar], [name] (14/600) over
|
||||
/// [subtitle] (12, fg-3), and a `chevron-right` in fg-3.
|
||||
class NooSidebarAccount extends StatelessWidget {
|
||||
/// Usually `NooAvatar(size: 32, current: true, ...)`.
|
||||
final Widget avatar;
|
||||
final String name;
|
||||
final String? subtitle;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooSidebarAccount({
|
||||
super.key,
|
||||
required this.avatar,
|
||||
required this.name,
|
||||
this.subtitle,
|
||||
this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final radius = BorderRadius.circular(NooRadii.input);
|
||||
return Material(
|
||||
color: colors.surface,
|
||||
borderRadius: radius,
|
||||
child: InkWell(
|
||||
onTap: onTap,
|
||||
borderRadius: radius,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 8),
|
||||
child: Row(
|
||||
spacing: 10,
|
||||
children: [
|
||||
avatar,
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
spacing: 4,
|
||||
children: [
|
||||
Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.body.copyWith(
|
||||
fontSize: 14,
|
||||
height: 1,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
if (subtitle != null)
|
||||
Text(
|
||||
subtitle!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(
|
||||
fontSize: 12,
|
||||
height: 1,
|
||||
color: colors.fg3,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Icon(LucideIcons.chevronRight, size: 16, color: colors.fg3),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// The sidebar storage meter: "Storage" (12/500 fg-1) and a [detail]
|
||||
/// ("38.2 of 100 GB", 12 fg-2) on one line, over a 6px [NooProgressBar].
|
||||
class NooSidebarStorage extends StatelessWidget {
|
||||
/// 0-1.
|
||||
final double value;
|
||||
final String detail;
|
||||
final String label;
|
||||
|
||||
const NooSidebarStorage({
|
||||
super.key,
|
||||
required this.value,
|
||||
required this.detail,
|
||||
this.label = 'Storage',
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final meta = NooText.meta.copyWith(
|
||||
fontSize: 12,
|
||||
height: 1,
|
||||
color: colors.fg2,
|
||||
);
|
||||
return Padding(
|
||||
padding: const EdgeInsets.fromLTRB(12, 12, 12, 14),
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
spacing: 8,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Text(
|
||||
label,
|
||||
style: meta.copyWith(
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
Expanded(
|
||||
child: Text(
|
||||
detail,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
textAlign: TextAlign.end,
|
||||
style: meta,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
NooProgressBar(value: value),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,142 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// The desktop main-pane toolbar (DESIGN_SYSTEM.md 3, "Desktop"; the 64px
|
||||
/// header in `Desktop Screen.dc.html`): 24px leading / 20px trailing
|
||||
/// padding, 12px gaps, a 1px `line` along the bottom. Left to right:
|
||||
///
|
||||
/// - optional back/forward chevrons ([showHistoryNav] - macOS only; Windows
|
||||
/// doesn't show them), 20px, fg-3
|
||||
/// - the [title] (22 Schibsted) - or [titleWidget] instead, e.g. a
|
||||
/// breadcrumb in Files; it inherits the title [DefaultTextStyle]
|
||||
/// - flexible space
|
||||
/// - the [search] slot, 260px wide (pass a `NooSearchField(onSurface: true)`)
|
||||
/// - [actions] - `NooSegmentedControl`, `NooButton(size: toolbar)`, etc.
|
||||
///
|
||||
/// A [PreferredSizeWidget], so it can be the main pane's `Scaffold.appBar`.
|
||||
/// No [SafeArea]: it never sits under a status bar.
|
||||
class NooToolbar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final String? title;
|
||||
final Widget? titleWidget;
|
||||
final Widget? search;
|
||||
final List<Widget> actions;
|
||||
|
||||
final bool showHistoryNav;
|
||||
|
||||
/// Back/forward handlers for [showHistoryNav]; a null one draws that
|
||||
/// chevron disabled.
|
||||
final VoidCallback? onBack;
|
||||
final VoidCallback? onForward;
|
||||
|
||||
/// Defaults to `surface` - the toolbar belongs to the main pane.
|
||||
final Color? backgroundColor;
|
||||
|
||||
const NooToolbar({
|
||||
super.key,
|
||||
this.title,
|
||||
this.titleWidget,
|
||||
this.search,
|
||||
this.actions = const [],
|
||||
this.showHistoryNav = false,
|
||||
this.onBack,
|
||||
this.onForward,
|
||||
this.backgroundColor,
|
||||
}) : assert(
|
||||
title == null || titleWidget == null,
|
||||
'Pass either title or titleWidget, not both.',
|
||||
);
|
||||
|
||||
@override
|
||||
Size get preferredSize => const Size.fromHeight(NooSizes.toolbar);
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final titleStyle = NooText.title.copyWith(height: 1, color: colors.fg1);
|
||||
|
||||
return Material(
|
||||
color: backgroundColor ?? colors.surface,
|
||||
child: Container(
|
||||
height: NooSizes.toolbar,
|
||||
padding: const EdgeInsetsDirectional.only(start: 24, end: 20),
|
||||
decoration: BoxDecoration(
|
||||
border: Border(bottom: BorderSide(color: colors.line)),
|
||||
),
|
||||
child: Row(
|
||||
spacing: 12,
|
||||
children: [
|
||||
if (showHistoryNav)
|
||||
Padding(
|
||||
padding: const EdgeInsetsDirectional.only(end: 4),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
spacing: 4,
|
||||
children: [
|
||||
_HistoryButton(
|
||||
icon: LucideIcons.chevronLeft,
|
||||
tooltip: 'Back',
|
||||
onTap: onBack,
|
||||
),
|
||||
_HistoryButton(
|
||||
icon: LucideIcons.chevronRight,
|
||||
tooltip: 'Forward',
|
||||
onTap: onForward,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
Expanded(
|
||||
child: Align(
|
||||
alignment: AlignmentDirectional.centerStart,
|
||||
child: DefaultTextStyle(
|
||||
style: titleStyle,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
child: titleWidget ?? Text(title ?? ''),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (search != null) SizedBox(width: 260, child: search),
|
||||
...actions,
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// A 20px fg-3 chevron with a 28px hover/press target. Dimmed when
|
||||
/// [onTap] is null (nothing to go back/forward to).
|
||||
class _HistoryButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final String tooltip;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const _HistoryButton({
|
||||
required this.icon,
|
||||
required this.tooltip,
|
||||
required this.onTap,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Tooltip(
|
||||
message: tooltip,
|
||||
child: Opacity(
|
||||
opacity: onTap == null ? 0.45 : 1,
|
||||
child: InkResponse(
|
||||
onTap: onTap,
|
||||
radius: 16,
|
||||
splashFactory: NoSplash.splashFactory,
|
||||
hoverColor: colors.surface2,
|
||||
child: SizedBox.square(
|
||||
dimension: 28,
|
||||
child: Icon(icon, size: 20, color: colors.fg3),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,296 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
import 'noo_nav_style.dart';
|
||||
|
||||
export 'noo_nav_style.dart';
|
||||
|
||||
// iOS large-title block: 2px above, a 34/0.9 line box (30.6 -> 31), then
|
||||
// 12px below (14 when there's no search field under it, per the `iSet`
|
||||
// Settings header in `Mobile Screen.dc.html`).
|
||||
const double _iosRow = 44;
|
||||
const double _iosTitleTop = 2;
|
||||
const double _iosTitleBox = 31;
|
||||
const double _iosSearch = 38;
|
||||
const double _iosSearchBottom = 12;
|
||||
const double _androidRow = 64;
|
||||
|
||||
/// Mobile top bar (DESIGN_SYSTEM.md 3, "Mobile"; `iBar`/`aBar`/`iSet`/
|
||||
/// `aSet` in `Mobile Screen.dc.html`).
|
||||
///
|
||||
/// - [NooNavStyle.ios]: a 44px row with [leading] on the left and
|
||||
/// [actions] on the right, all in accent-text; then the 34px large
|
||||
/// [title]; then the optional [search] slot (laid out at 38px - pass a
|
||||
/// `NooSearchField(ios: true)`).
|
||||
/// - [NooNavStyle.android]: one 64px row: [leading], the 22px [title], then
|
||||
/// [actions] (fg-1). Android has no [search] slot - search is an action
|
||||
/// icon there, so [search] is ignored.
|
||||
///
|
||||
/// **Why a [PreferredSizeWidget] and not a sliver:** every part of it has a
|
||||
/// fixed height, so it drops straight into `Scaffold.appBar` (which adds
|
||||
/// the status-bar inset on top of [preferredSize]; the bar applies that
|
||||
/// inset itself via [SafeArea]). It's still a plain box widget, so a screen
|
||||
/// that wants the iOS large title to scroll away with content can put it in
|
||||
/// a `SliverToBoxAdapter` (or a `SliverPersistentHeader` with a fixed
|
||||
/// extent) instead - no sliver-specific variant needed. A collapsing
|
||||
/// large-title-to-inline-title animation isn't in the spec, so it isn't
|
||||
/// built here.
|
||||
///
|
||||
/// Use [NooTopBarButton] for icon actions and [NooTopBarBack] for a pushed
|
||||
/// screen's back button; both size themselves for the current [style].
|
||||
class NooTopBar extends StatelessWidget implements PreferredSizeWidget {
|
||||
final NooNavStyle style;
|
||||
final String title;
|
||||
|
||||
/// Replaces the default leading button - e.g. a [NooTopBarBack] on a
|
||||
/// pushed screen. When null, a `menu` [NooTopBarButton] calling [onMenu]
|
||||
/// is shown if [onMenu] is set; otherwise nothing.
|
||||
final Widget? leading;
|
||||
final VoidCallback? onMenu;
|
||||
|
||||
/// Trailing widgets, left to right: [NooTopBarButton]s, an avatar, etc.
|
||||
/// Icons inherit the bar's icon color (accent-text on iOS, fg-1 on
|
||||
/// Android) through [IconTheme].
|
||||
final List<Widget> actions;
|
||||
|
||||
/// iOS only: the search field shown below the large title.
|
||||
final Widget? search;
|
||||
|
||||
/// Defaults to `bg` - the top bar sits on the screen background.
|
||||
final Color? backgroundColor;
|
||||
|
||||
const NooTopBar({
|
||||
super.key,
|
||||
required this.style,
|
||||
required this.title,
|
||||
this.leading,
|
||||
this.onMenu,
|
||||
this.actions = const [],
|
||||
this.search,
|
||||
this.backgroundColor,
|
||||
});
|
||||
|
||||
bool get _ios => style == NooNavStyle.ios;
|
||||
|
||||
@override
|
||||
Size get preferredSize {
|
||||
if (!_ios) return const Size.fromHeight(_androidRow);
|
||||
return Size.fromHeight(
|
||||
_iosRow +
|
||||
_iosTitleTop +
|
||||
_iosTitleBox +
|
||||
(search != null ? 12 + _iosSearch + _iosSearchBottom : 14),
|
||||
);
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
final lead =
|
||||
leading ??
|
||||
(onMenu != null
|
||||
? NooTopBarButton(
|
||||
icon: LucideIcons.menu,
|
||||
tooltip: 'Menu',
|
||||
onTap: onMenu,
|
||||
)
|
||||
: null);
|
||||
|
||||
final Widget body = _ios
|
||||
? _buildIos(colors, lead)
|
||||
: _buildAndroid(colors, lead);
|
||||
|
||||
return _NooTopBarScope(
|
||||
style: style,
|
||||
child: IconTheme.merge(
|
||||
data: IconThemeData(
|
||||
size: 24,
|
||||
color: _ios ? colors.accentText : colors.fg1,
|
||||
),
|
||||
child: Material(
|
||||
color: backgroundColor ?? colors.bg,
|
||||
child: SafeArea(bottom: false, child: body),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildIos(NooColors colors, Widget? lead) {
|
||||
return Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
SizedBox(
|
||||
height: _iosRow,
|
||||
// 44px hit boxes around 24px icons add 10px each side, so 6px of
|
||||
// row padding puts the icons 16px from the screen edge.
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 6),
|
||||
child: Row(children: [?lead, const Spacer(), ...actions]),
|
||||
),
|
||||
),
|
||||
Padding(
|
||||
padding: EdgeInsets.fromLTRB(
|
||||
NooSpace.md,
|
||||
_iosTitleTop,
|
||||
NooSpace.md,
|
||||
search != null ? 12 : 14,
|
||||
),
|
||||
child: SizedBox(
|
||||
height: _iosTitleBox,
|
||||
child: Align(
|
||||
alignment: AlignmentDirectional.centerStart,
|
||||
child: Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.largeTitle.copyWith(
|
||||
leadingDistribution: TextLeadingDistribution.even,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (search != null)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(
|
||||
NooSpace.md,
|
||||
0,
|
||||
NooSpace.md,
|
||||
_iosSearchBottom,
|
||||
),
|
||||
child: SizedBox(height: _iosSearch, child: search),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildAndroid(NooColors colors, Widget? lead) {
|
||||
return SizedBox(
|
||||
height: _androidRow,
|
||||
child: Padding(
|
||||
padding: EdgeInsetsDirectional.only(
|
||||
start: lead != null ? 4 : 16,
|
||||
end: 8,
|
||||
),
|
||||
child: Row(
|
||||
spacing: 4,
|
||||
children: [
|
||||
?lead,
|
||||
Expanded(
|
||||
child: Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.title.copyWith(height: 1, color: colors.fg1),
|
||||
),
|
||||
),
|
||||
...actions,
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Lets [NooTopBarButton]/[NooTopBarBack] size themselves for the bar
|
||||
/// they're in without the caller repeating the style.
|
||||
class _NooTopBarScope extends InheritedWidget {
|
||||
final NooNavStyle style;
|
||||
|
||||
const _NooTopBarScope({required this.style, required super.child});
|
||||
|
||||
static NooNavStyle of(BuildContext context) =>
|
||||
context.dependOnInheritedWidgetOfExactType<_NooTopBarScope>()?.style ??
|
||||
NooNavStyle.android;
|
||||
|
||||
@override
|
||||
bool updateShouldNotify(_NooTopBarScope oldWidget) =>
|
||||
style != oldWidget.style;
|
||||
}
|
||||
|
||||
/// A 24px icon action for [NooTopBar] - a 44px (iOS) or 48px (Android)
|
||||
/// round hit box, colored by the bar's [IconTheme].
|
||||
class NooTopBarButton extends StatelessWidget {
|
||||
final IconData icon;
|
||||
final VoidCallback? onTap;
|
||||
final String? tooltip;
|
||||
|
||||
const NooTopBarButton({
|
||||
super.key,
|
||||
required this.icon,
|
||||
this.onTap,
|
||||
this.tooltip,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final box = _NooTopBarScope.of(context) == NooNavStyle.ios ? 44.0 : 48.0;
|
||||
Widget button = SizedBox.square(
|
||||
dimension: box,
|
||||
child: InkResponse(
|
||||
onTap: onTap,
|
||||
radius: box / 2,
|
||||
child: Center(child: Icon(icon)),
|
||||
),
|
||||
);
|
||||
if (tooltip != null) button = Tooltip(message: tooltip, child: button);
|
||||
return Semantics(button: true, label: tooltip, child: button);
|
||||
}
|
||||
}
|
||||
|
||||
/// Back button for a pushed screen's [NooTopBar.leading]. iOS: a
|
||||
/// `chevron-left` plus the previous screen's [label] in 17px accent-text
|
||||
/// ("‹ Files"). Android: an `arrow-left` icon button ([label] becomes its
|
||||
/// tooltip).
|
||||
class NooTopBarBack extends StatelessWidget {
|
||||
final String label;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooTopBarBack({super.key, this.label = 'Back', this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final onPressed = onTap ?? () => Navigator.maybePop(context);
|
||||
if (_NooTopBarScope.of(context) == NooNavStyle.android) {
|
||||
return NooTopBarButton(
|
||||
icon: LucideIcons.arrowLeft,
|
||||
tooltip: label,
|
||||
onTap: onPressed,
|
||||
);
|
||||
}
|
||||
final colors = context.nooColors;
|
||||
return Semantics(
|
||||
button: true,
|
||||
child: InkResponse(
|
||||
onTap: onPressed,
|
||||
highlightShape: BoxShape.rectangle,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
child: SizedBox(
|
||||
height: 44,
|
||||
child: Padding(
|
||||
// The row already has 6px padding; 4 more lands the chevron at
|
||||
// the reference's 10px inset.
|
||||
padding: const EdgeInsetsDirectional.only(start: 4, end: 8),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
spacing: 2,
|
||||
children: [
|
||||
Icon(LucideIcons.chevronLeft, color: colors.accentText),
|
||||
Text(
|
||||
label,
|
||||
style: NooText.bodyL.copyWith(
|
||||
fontSize: 17,
|
||||
height: 1,
|
||||
color: colors.accentText,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'nav/noo_nav_style.dart';
|
||||
|
||||
/// The one place screens decide mobile vs desktop layout and iOS vs Android
|
||||
/// chrome (DESIGN_SYSTEM.md 3), so every screen switches at the same point.
|
||||
class NooLayout {
|
||||
const NooLayout._();
|
||||
|
||||
/// Window width at which the shell swaps the bottom bar + drawer for the
|
||||
/// desktop sidebar + toolbar, and screens switch to desktop recipes
|
||||
/// (table rows, 5-column grids, 8-column photos, 24px gutter).
|
||||
static const double desktopBreakpoint = 900;
|
||||
|
||||
static bool isDesktop(BuildContext context) =>
|
||||
MediaQuery.sizeOf(context).width >= desktopBreakpoint;
|
||||
|
||||
static NooNavStyle navStyle(BuildContext context) =>
|
||||
NooNavStyle.fromPlatform(Theme.of(context).platform);
|
||||
|
||||
/// True where the spec calls for the iOS variant of a content detail
|
||||
/// (`ellipsis` rather than `ellipsis-vertical` overflow, etc.).
|
||||
static bool iosStyle(BuildContext context) =>
|
||||
navStyle(context) == NooNavStyle.ios;
|
||||
|
||||
/// Horizontal content gutter: 12 on mobile (cards), 24 on desktop.
|
||||
static double gutter(BuildContext context) => isDesktop(context) ? 24 : 12;
|
||||
}
|
||||
@@ -0,0 +1,214 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Desktop counterpart of `showNooSheet`: a 540px, radius-24 card on the
|
||||
/// scrim, carrying the design system's one allowed shadow
|
||||
/// ([nooDialogShadow]). `showGeneralDialog` is used instead of
|
||||
/// `showDialog` so the barrier takes the `scrim` token and the transition
|
||||
/// follows [NooMotion] (fade + 0.98 scale, no bounce) rather than
|
||||
/// Material's defaults.
|
||||
Future<T?> showNooDialog<T>(
|
||||
BuildContext context, {
|
||||
Widget? leading,
|
||||
required String title,
|
||||
String? subtitle,
|
||||
required List<Widget> children,
|
||||
bool barrierDismissible = true,
|
||||
}) {
|
||||
final colors = context.nooColors;
|
||||
return showGeneralDialog<T>(
|
||||
context: context,
|
||||
barrierDismissible: barrierDismissible,
|
||||
barrierLabel: MaterialLocalizations.of(context).modalBarrierDismissLabel,
|
||||
barrierColor: colors.scrim,
|
||||
transitionDuration: NooMotion.base,
|
||||
pageBuilder: (dialogContext, _, _) => NooDialog(
|
||||
leading: leading,
|
||||
title: title,
|
||||
subtitle: subtitle,
|
||||
onClose: () => Navigator.of(dialogContext).pop(),
|
||||
children: children,
|
||||
),
|
||||
transitionBuilder: (_, animation, _, child) {
|
||||
final curved = CurvedAnimation(parent: animation, curve: NooMotion.ease);
|
||||
return FadeTransition(
|
||||
opacity: curved,
|
||||
child: ScaleTransition(
|
||||
scale: Tween<double>(
|
||||
begin: NooMotion.pressScale,
|
||||
end: 1,
|
||||
).animate(curved),
|
||||
child: child,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
/// The dialog card itself, centered in whatever space it's given. Exposed
|
||||
/// separately from [showNooDialog] so it can be embedded/tested without a
|
||||
/// route. Sections are spaced 22px apart to match `showNooSheet`, so the
|
||||
/// same share-sheet parts lay out identically in both.
|
||||
class NooDialog extends StatelessWidget {
|
||||
final Widget? leading;
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final VoidCallback? onClose;
|
||||
final List<Widget> children;
|
||||
final double width;
|
||||
|
||||
const NooDialog({
|
||||
super.key,
|
||||
this.leading,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
this.onClose,
|
||||
required this.children,
|
||||
this.width = 540,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
// Padding (not MediaQuery maths) keeps a 24px margin on every side, so
|
||||
// the card shrinks to fit narrow windows and short content-heavy
|
||||
// dialogs scroll rather than overflow.
|
||||
return Padding(
|
||||
padding: const EdgeInsets.all(NooSpace.xl),
|
||||
child: Center(
|
||||
child: ConstrainedBox(
|
||||
constraints: BoxConstraints(maxWidth: width),
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface,
|
||||
borderRadius: BorderRadius.circular(NooRadii.dialog),
|
||||
boxShadow: const [nooDialogShadow],
|
||||
),
|
||||
// Material (not just a DecoratedBox) so TextFields/InkWells inside
|
||||
// the dialog have an ancestor to paint on.
|
||||
child: Material(
|
||||
type: MaterialType.transparency,
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(NooSpace.xl),
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
NooDialogHeader(
|
||||
leading: leading,
|
||||
title: title,
|
||||
subtitle: subtitle,
|
||||
onClose: onClose,
|
||||
),
|
||||
Flexible(
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
for (final child in children) ...[
|
||||
const SizedBox(height: 22),
|
||||
child,
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Desktop dialog header: leading slot (a 44px file tile for Share),
|
||||
/// title, optional meta subtitle, and a 32px surface-2 close circle.
|
||||
/// `NooOverlayHeader` is the mobile sheet variant (36px close).
|
||||
class NooDialogHeader extends StatelessWidget {
|
||||
final Widget? leading;
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final VoidCallback? onClose;
|
||||
|
||||
const NooDialogHeader({
|
||||
super.key,
|
||||
this.leading,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
this.onClose,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Row(
|
||||
children: [
|
||||
if (leading != null) ...[leading!, const SizedBox(width: NooSpace.sm)],
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.sectionTitle.copyWith(
|
||||
fontSize: 19,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 5),
|
||||
Text(
|
||||
subtitle!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (onClose != null) ...[
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
NooCloseButton(onTap: onClose!),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// 32px surface-2 circle with an `x` - the dialog close control.
|
||||
class NooCloseButton extends StatelessWidget {
|
||||
final VoidCallback onTap;
|
||||
final double size;
|
||||
|
||||
const NooCloseButton({super.key, required this.onTap, this.size = 32});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Semantics(
|
||||
button: true,
|
||||
label: MaterialLocalizations.of(context).closeButtonTooltip,
|
||||
child: GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
width: size,
|
||||
height: size,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface2,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Icon(LucideIcons.x, size: 16, color: colors.fg1),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,66 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
/// Sheet/dialog header: an optional leading tile, title, subtitle, close
|
||||
/// circle (Noo Design System project,
|
||||
/// `components/overlays/OverlayHeader.jsx`, mobile variant). [leading] is a
|
||||
/// plain [Widget] rather than a file kind so this stays decoupled from the
|
||||
/// file model - pass an `ItemThumbnail`/file-type tile for a file header.
|
||||
class NooOverlayHeader extends StatelessWidget {
|
||||
final Widget? leading;
|
||||
final String title;
|
||||
final String? subtitle;
|
||||
final VoidCallback? onClose;
|
||||
|
||||
const NooOverlayHeader({
|
||||
super.key,
|
||||
this.leading,
|
||||
required this.title,
|
||||
this.subtitle,
|
||||
this.onClose,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Row(
|
||||
crossAxisAlignment: CrossAxisAlignment.center,
|
||||
children: [
|
||||
if (leading != null) ...[leading!, const SizedBox(width: 12)],
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
title,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.sectionTitle.copyWith(fontSize: 19, color: colors.fg1),
|
||||
),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 5),
|
||||
Text(subtitle!, style: NooText.meta.copyWith(color: colors.fg3)),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
if (onClose != null)
|
||||
Semantics(
|
||||
button: true,
|
||||
label: 'Close',
|
||||
child: GestureDetector(
|
||||
onTap: onClose,
|
||||
child: Container(
|
||||
width: 36,
|
||||
height: 36,
|
||||
alignment: Alignment.center,
|
||||
decoration: BoxDecoration(color: colors.surface2, shape: BoxShape.circle),
|
||||
child: Icon(LucideIcons.x, size: 18, color: colors.fg1),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,158 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:lucide_icons_flutter/lucide_icons.dart';
|
||||
import '../../../theme/design_tokens.dart';
|
||||
|
||||
// Building blocks for the share sheet (mobile, via `showNooSheet`) and the
|
||||
// share dialog (desktop, via `showNooDialog`) - DESIGN_SYSTEM.md section 4,
|
||||
// "Share sheet / dialog". Both containers already space their children
|
||||
// 22px apart, so each [NooShareSection] is one of those children.
|
||||
|
||||
/// A titled share-sheet section ("Share with people", "Share link", "Send
|
||||
/// file directly"). [trailing] sits on the title row - the link section's
|
||||
/// `NooToggle`. [caption] is the meta line under the content (e.g. "Link
|
||||
/// settings don't apply").
|
||||
class NooShareSection extends StatelessWidget {
|
||||
final String title;
|
||||
final Widget? trailing;
|
||||
final Widget child;
|
||||
final String? caption;
|
||||
|
||||
const NooShareSection({
|
||||
super.key,
|
||||
required this.title,
|
||||
this.trailing,
|
||||
required this.child,
|
||||
this.caption,
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||||
children: [
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Text(title, style: NooText.sectionTitle.copyWith(color: colors.fg1)),
|
||||
),
|
||||
?trailing,
|
||||
],
|
||||
),
|
||||
const SizedBox(height: NooSpace.sm),
|
||||
child,
|
||||
if (caption != null) ...[
|
||||
const SizedBox(height: NooSpace.xs),
|
||||
Text(caption!, style: NooText.meta.copyWith(color: colors.fg3)),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// One person/group with access: avatar, name, subtitle, then either the
|
||||
/// owner label or a tappable permission pill ("Can edit ▾"). Owner rows
|
||||
/// aren't interactive, so they get plain fg-3 text instead of a pill - the
|
||||
/// pill shape is reserved for things that open a menu.
|
||||
class NooPersonAccessRow extends StatelessWidget {
|
||||
/// Typically a 36px `NooAvatar`.
|
||||
final Widget avatar;
|
||||
final String name;
|
||||
final String? subtitle;
|
||||
final bool owner;
|
||||
/// Pill label for non-owners, e.g. "Can edit" / "Can view".
|
||||
final String permission;
|
||||
final VoidCallback? onPermissionTap;
|
||||
final String ownerLabel;
|
||||
|
||||
const NooPersonAccessRow({
|
||||
super.key,
|
||||
required this.avatar,
|
||||
required this.name,
|
||||
this.subtitle,
|
||||
this.owner = false,
|
||||
this.permission = 'Can edit',
|
||||
this.onPermissionTap,
|
||||
this.ownerLabel = 'Owner',
|
||||
});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return ConstrainedBox(
|
||||
constraints: const BoxConstraints(minHeight: 52),
|
||||
child: Row(
|
||||
children: [
|
||||
avatar,
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
Expanded(
|
||||
child: Column(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
name,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.body.copyWith(
|
||||
height: 1.2,
|
||||
fontWeight: FontWeight.w500,
|
||||
color: colors.fg1,
|
||||
),
|
||||
),
|
||||
if (subtitle != null) ...[
|
||||
const SizedBox(height: 3),
|
||||
Text(
|
||||
subtitle!,
|
||||
maxLines: 1,
|
||||
overflow: TextOverflow.ellipsis,
|
||||
style: NooText.meta.copyWith(color: colors.fg3),
|
||||
),
|
||||
],
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(width: NooSpace.sm),
|
||||
if (owner)
|
||||
Text(ownerLabel, style: NooText.label.copyWith(color: colors.fg3))
|
||||
else
|
||||
NooPermissionPill(label: permission, onTap: onPermissionTap),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/// Surface-2 pill with a trailing chevron that opens a permission menu.
|
||||
/// Also used for the link section's permission option.
|
||||
class NooPermissionPill extends StatelessWidget {
|
||||
final String label;
|
||||
final VoidCallback? onTap;
|
||||
|
||||
const NooPermissionPill({super.key, required this.label, this.onTap});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final colors = context.nooColors;
|
||||
return GestureDetector(
|
||||
behavior: HitTestBehavior.opaque,
|
||||
onTap: onTap,
|
||||
child: Container(
|
||||
height: NooSizes.buttonCompact,
|
||||
padding: const EdgeInsets.only(left: NooSpace.sm, right: 10),
|
||||
decoration: BoxDecoration(
|
||||
color: colors.surface2,
|
||||
borderRadius: BorderRadius.circular(NooRadii.pill),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Text(label, style: NooText.label.copyWith(height: 1, color: colors.fg1)),
|
||||
const SizedBox(width: NooSpace.xxs),
|
||||
Icon(LucideIcons.chevronDown, size: 14, color: colors.fg2),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user