Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: add NcAppNavigationSettingsButton #5866

Draft
wants to merge 3 commits into
base: master
Choose a base branch
from

Conversation

ShGKme
Copy link
Contributor

@ShGKme ShGKme commented Jul 24, 2024

☑️ Resolves

  • Add a common component to be used as a Settings button in apps for consistency
  • Looks like NcAppNavigationItem, has padding.
  • Has no additional logic

More advanced component is coming soon ✨

🖼️ Screenshots

🏚️ Before 🏡 After
image image
image image
image image
image image
image image

🚧 Tasks

  • Mark old NcAppNavigationSettings as deprecated
  • Add new NcAPpNavigationSettingsButton

🏁 Checklist

  • ⛑️ Tests are included or are not applicable
  • 📘 Component documentation has been extended, updated or is not applicable
  • 3️⃣ Backport to next requested with a Vue 3 upgrade

@ShGKme ShGKme added enhancement New feature or request 3. to review Waiting for reviews feature: app-navigation Related to the app-navigation component labels Jul 24, 2024
@ShGKme ShGKme added this to the 8.16.0 milestone Jul 24, 2024
@ShGKme ShGKme self-assigned this Jul 24, 2024

&__text {
// Make the settings button less presentative, like app navigation items
font-weight: normal;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels every different to all other elements and is different to all current implementations, I would like to ask @nextcloud-libraries/designers first

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This feels every different to all other elements and is different to all current implementations

I actually agree, and that's exactly what we were discussing yesterday.

But from yesterday's design review call:

  • It should not be bold or secondary, otherwise it is too presentive, more than other items in the menu.
  • It should be the same in all navigation menus, no matter if NcAppNavigationItem or NcListItem is used
  • It should be aligned with navigation items (NcAppNavigationItem)

cc @jancborchardt

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

To confirm – what @ShGKme listed is what I said the requirements are. The design in this PR fulfills all those requirements and looks most consistent of the possible solutions.

<docs>
⚠️ This component is deprecated and will be removed in v9.

Use `<NcAppNavigationSettingsButton>` with `<NcAppSettingsButton>` instead.
Copy link
Contributor

@susnux susnux Jul 24, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NcAppSettingsButton ? You mean NcAppSettingsDialog?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes

Copy link
Contributor

@jancborchardt jancborchardt left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Design-wise this looks very nice and consistent! Just some details:

  • In Files it looked great previously, with same spacing between the 3 elements on the bottom (quota, deleted files and settings), now Settings moved a bit down, leaving a gap instead of being equidistant.
  • The placement does not look exactly the same in all of the apps, if you compare all the "After" screenshots. In Files, Photos and Talk it is further down than in Calendar and Contacts (is this cause they don’t use the new 34px yet?)

@ShGKme ShGKme added 2. developing Work in progress and removed 3. to review Waiting for reviews labels Jul 29, 2024
@Antreesy Antreesy modified the milestones: 8.16.0, 8.17.0 Aug 5, 2024
@susnux susnux modified the milestones: 8.17.0, 8.18.0 Aug 21, 2024
@susnux susnux marked this pull request as draft August 30, 2024 12:04
@Antreesy Antreesy modified the milestones: 8.18.0, 8.19.0 Sep 12, 2024
@susnux susnux modified the milestones: 8.19.0, 8.20.0 Sep 17, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
2. developing Work in progress enhancement New feature or request feature: app-navigation Related to the app-navigation component
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants