fix(settings): apps list layout by ShGKme · Pull Request #44236 · nextcloud/server

ShGKme · 2024-03-16T01:12:33Z

Summary

Fix Apps Settings layout:

Store apps layout on mobile: show less columns when sidebar is open
- Regression from feat: Refactor app & account management UI code #44092
List apps layout on mobile: hide app-level
- Regression from feat: Make the app-level a component (AppLevelBadge) #43770
Refactor apps list settings styles:
- Remove unused styles used 4..7 years ago
- Move styles from global settings.scss to components
- Rename classes, follow BEM. Especially with classes like .section that were used for both settings sections on other pages and table row
- Required for the following fix
Make the search results a valid HTML table
Resolves: [Bug]: Apps UI not working in WebKit browsers (Safari, iOS/iPadOS, GNOME/Epiphany) #42249
- Regression from Add link for opening app details #41439
- position: relative doesn't work on <tr> on Safari
- See: https://bugs.webkit.org/show_bug.cgi?id=240961

Screenshots

Safari bug

Before	After
Safari-before.mp4	Safari-after.mp4

Other screenshots

Before	After
Your apps	top

Your apps	bottom

Your apps (regression - level is shown)	600px

Your apps (regression - level is shown)	320px (new - actions are hidden)

App bundles	.

Store View	1440px

Store View (regression - no change with sidebar)	1440px with sidebar

Store View	1280px

Store View (regression - no change with sidebar)	1280px with sidebar

Store View	600px

Store View (regression - no change with sidebar)	600px with sidebar

Store View	320px

Search	no results
	.
Search (invalid HTML)	Your apps

Checklist

Code is properly formatted
Sign-off message is added to all commits
Tests (unit, integration, api and/or acceptance) are included
Screenshots before/after for front-end changes
Documentation (manuals or wiki) has been updated or is not required
Backports requested where applicable (ex: critical bugfixes)

ShGKme · 2024-03-18T21:03:51Z

dron is not related

susnux · 2024-03-19T11:47:55Z

apps/settings/src/components/AppList/AppItem.vue

 </script>

 <style scoped lang="scss">
+@use '../../../../../core/css/variables.scss' as variables;


They are deprecated it feels not right to still use them as we probably want to get rid of them soon.

Without PostCSS, would you prefer to use just constant numbers in @media queries?

susnux

Finally the overflow issue is fixed, thank you!

susnux · 2024-03-19T14:32:59Z

BTW I think we should in the future separate the table and grid components. That are two different designs and currently the grid one looks a bit "sad".

ShGKme · 2024-03-19T14:37:26Z

BTW I think we should in the future separate the table and grid components. That are two different designs and currently the grid one looks a bit "sad".

Yeah. A lot place for further refactoring here. I kept myself from not doing it, to not overload one PR with the fix by refactoring 🙈

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

ShGKme · 2024-03-19T14:41:12Z

Rebased onto master

ShGKme · 2024-03-19T15:36:09Z

/backport to stable28

ShGKme added bug 2. developing Work in progress feature: settings regression labels Mar 16, 2024

ShGKme added this to the Nextcloud 29 milestone Mar 16, 2024

ShGKme self-assigned this Mar 16, 2024

Altahrim mentioned this pull request Mar 18, 2024

29.0.0 beta 4 #44275

Merged

ShGKme force-pushed the fix/settings--app-list-scrolling-on-safari branch 4 times, most recently from e4aec63 to 04af997 Compare March 18, 2024 20:45

ShGKme changed the title ~~fix(settings ): apps list layout~~ fix(settings): apps list layout Mar 18, 2024

ShGKme requested review from JuliaKirschenheuter, Pytal, joshtrichards, solracsf and susnux March 18, 2024 20:56

ShGKme marked this pull request as ready for review March 18, 2024 20:57

ShGKme added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Mar 18, 2024

susnux reviewed Mar 19, 2024

View reviewed changes

susnux approved these changes Mar 19, 2024

View reviewed changes

susnux requested a review from artonge March 19, 2024 11:56

artonge approved these changes Mar 19, 2024

View reviewed changes

ShGKme added 3 commits March 19, 2024 15:38

fix(settings): use correct dynamic component load for apps/users

af61611

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

fix(settings): apps list layout on mobile

295b7cb

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

refactor(settings): remove unneeded classes from hidden header

31baf8d

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

ShGKme added 8 commits March 19, 2024 15:38

refactor(settings): remove unused styles from apps settings

eac928a

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

refactor(settings): move apps list styles to components

d181a82

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

refactor(settings): use more BEM styles in apps settings

17c865d

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

refactor(settings): move AppItem styles to AppItem component

73dec20

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

fix(settings): app list scroll on Safari

a173f90

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

fix(settings): make apps list search result valid table

9397599

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

test(settings): adjust e2e tests selectors to new structure

127e361

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

chore(assets): Recompile assets

3ff6211

Signed-off-by: Grigorii K. Shartsev <me@shgk.me>

ShGKme force-pushed the fix/settings--app-list-scrolling-on-safari branch from 04af997 to 3ff6211 Compare March 19, 2024 14:40

ShGKme enabled auto-merge March 19, 2024 14:41

ShGKme mentioned this pull request Mar 19, 2024

[Bug]: Apps UI not working in WebKit browsers (Safari, iOS/iPadOS, GNOME/Epiphany) #42249

Closed

8 tasks

skjnldsv disabled auto-merge March 19, 2024 15:16

skjnldsv merged commit 174c10a into master Mar 19, 2024

skjnldsv deleted the fix/settings--app-list-scrolling-on-safari branch March 19, 2024 15:16

skjnldsv added 4. to release Ready to be released and/or waiting for tests to finish and removed 3. to review Waiting for reviews labels Mar 19, 2024

backportbot bot added the backport-request label Mar 19, 2024

backportbot bot mentioned this pull request Mar 19, 2024

[stable28] fix(settings): apps list layout #44327

Merged

backportbot bot removed the backport-request label Mar 19, 2024

ShGKme mentioned this pull request Mar 19, 2024

fix app management scrolling for Safari/WebKit browsers #44096

Closed

4 tasks

susnux mentioned this pull request Mar 29, 2024

feat: Refactor app & account management UI code #44092

Merged

4 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(settings): apps list layout#44236

fix(settings): apps list layout#44236
skjnldsv merged 11 commits intomasterfrom
fix/settings--app-list-scrolling-on-safari

ShGKme commented Mar 16, 2024 •

edited

Loading

Uh oh!

ShGKme commented Mar 18, 2024

Uh oh!

susnux Mar 19, 2024

Uh oh!

ShGKme Mar 19, 2024

Uh oh!

susnux left a comment

Uh oh!

susnux commented Mar 19, 2024

Uh oh!

ShGKme commented Mar 19, 2024

Uh oh!

ShGKme commented Mar 19, 2024

Uh oh!

ShGKme commented Mar 19, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Uh oh!

Conversation

ShGKme commented Mar 16, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Safari bug

Other screenshots

Checklist

Uh oh!

ShGKme commented Mar 18, 2024

Uh oh!

susnux Mar 19, 2024

Choose a reason for hiding this comment

Uh oh!

ShGKme Mar 19, 2024

Choose a reason for hiding this comment

Uh oh!

susnux left a comment

Choose a reason for hiding this comment

Uh oh!

susnux commented Mar 19, 2024

Uh oh!

ShGKme commented Mar 19, 2024

Uh oh!

ShGKme commented Mar 19, 2024

Uh oh!

ShGKme commented Mar 19, 2024

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ShGKme commented Mar 16, 2024 •

edited

Loading