New settings page - mockup

[Secret-chest]

@WorldLanguages I suppose I should ping you, since you gave me a rocket emoji

Open it in a new tab, make sure to have 100% zoom and go fullscreen to get a better idea

I didn't add more cards, but all lists scroll vertically

Desktop

Settings page - default view

Settings page - compact view

"Mobile" / popup

Settings page - large view	Settings page - medium/default view	Settings page - compact/list view
Search bar in settings page	Addon settings in settings page	Sidenav (collapsible)
Messaging page	** **	** **

To open addon settings on mobile / popup, click the addon card. To close, click outside of the panel.

Yes it's material design, but we're talking about the layout, not style

Main Changes

• material design :)
• changed font to roboto
• made the background a cooler grey and not completely dark
• top bar is now grey to allow for better focus (only in dark mode)
• sidenav: provides access to popup tabs as well as links (feedback, contribute etc.)
  • on mobile/popup it is collapsible
• new card layout:
  • no more expand / collapse
  • shows addon image (thanks placekitten!)
  • shows a wiki button next to the switch
  • still shows description + notices
• settings are now accessed in the setting panel, only for the currently selected addon:
  • on desktop the panel is to the right and always.visible
  • on mobile/popup it opens in a bottom sheet over the page, only after clicking on an addon. To close it, click outside
  • also shows description and notes
  • addons can still be toggled directly from their card
• setting names are no longer uppercase
• replaced categories and groups with filters
• More Settings is now called Extension Settings
• icons are now filled Community Material Icons for more clarity (also available on iconify
• view options:
  • list / compact: small cards, shows only name, tags on desktop only, help button, switch
  • medium (mobile/popup-only, default): same as large, but without images
  • large (default on desktop): shows everything (image, name, tags, help button, switch, description, notes and credits)
    • on desktop image is to the left and tags are in the header
    • on mobile/popup it is all stacked

[Secret-chest]

The 3 search bar icons are:

• view
  • (default) list (shown)
  • compact list (no images and descriptions, similar to @DNin01 's design)
  • grid (uses cards with large images and descriptions)
• sort
  • relevance (the one we have now)
  • relative popularity (based on usage data from feedback page)
  • alphabetical
• filters - replaces categories, groups, subgroups, uses tags (they still exist, but not shown in the example)
  • applies to: editor, project player, project page, studio, website, forums, etc.
  • recommandation: recommended, featured, all
  • type: addition, tweak, fix, theme
  • possibly more

[Secret-chest]

I'm open to implement at least part of this, but first let's reach a consensus

[WorldLanguages]

Before implementation, we'd probably have to discuss whether to continue using Vue v1 or use a build step.
Please let's avoid discussing the above within this discussion.

[Secret-chest]

Before implementation, we'd probably have to discuss whether to continue using Vue v1 or use a build step. Please let's avoid discussing the above within this discussion.

Fair enough. Let's keep this discussion about design.

[Secret-chest]

Help button would go to the addon's wiki page

[Secret-chest]

"My Stuff" is a hypothetical new popup tab that would act as a quick project manager

[Samq64]

I like the idea of tags, but I also categories need to stay. Maybe not all of them, but at least editor, website and themes.

[WorldLanguages]

I think we should preserve clear and reasonably sized buttons for "Scratch editor features" and "Scratch website features" that are always visible.

[Secret-chest]

I think we should preserve clear and reasonably sized buttons for "Scratch editor features" and "Scratch website features" that are always visible.

So I should add a third pane with filters, maybe to the right of the sidenav?

[WorldLanguages]

@Secret-chest Not sure where it would fit

[Secret-chest]

@Secret-chest Not sure where it would fit

@WorldLanguages if pinging you becomes a problem, tell me

Collapsible, but shown by default. There's quite a lot of free space

[WorldLanguages]

It could be collapsible, yeah

[BroJac5246]

Very nice! I would love to see separate "Hotkeys" and perhaps "Tweaks" sections, though that might be more specific to SA 2.0 in general.

[Secret-chest]

What does Tweaks mean? Aren't they just addons?

[Secret-chest]

I also suggested a new grouping, type: fix, tweak, theme, addition

[BroJac5246]

What does Tweaks mean? Aren't they just addons?

Yes, but it's a term I created for those small addons that tweak tiny things. This would allow us to add useful changes that might have been previously rejected or been considered borderline too-small but still added, such as Remove Search Bar Autocomplete or the proposed Compact Buttons addon. This could even include the Easter egg addon that capitalizes "Account settings."

[Secret-chest]

What does Tweaks mean? Aren't they just addons?

Yes, but it's a term I created for those small addons that tweak tiny things. This would allow us to add useful changes that might have been previously rejected or been considered borderline too-small but still added, such as Remove Search Bar Autocomplete or the proposed Compact Buttons addon. This could even include the Easter egg addon that capitalizes "Account settings."

It's pretty subjective. I'd argue compact buttons isn't a tweak.

[BroJac5246]

What does Tweaks mean? Aren't they just addons?

Yes, but it's a term I created for those small addons that tweak tiny things. This would allow us to add useful changes that might have been previously rejected or been considered borderline too-small but still added, such as Remove Search Bar Autocomplete or the proposed Compact Buttons addon. This could even include the Easter egg addon that capitalizes "Account settings."

It's pretty subjective. I'd argue compact buttons isn't a tweak.

I could see a few different definitions for tweaks, it could be things that make small changes, or it could be modifications to vanilla Scratch behavior. The two are similar, but, as you pointed out, different.

[WorldLanguages]

Just a reminder that we plan to add setting descriptions to some settings. It would be great if you could consider that for your redesign.

I'm also wondering how this settings page would behave when the window is resized to closely match a mobile device's landscape mode. That "responsive" version of the settings page is pretty much the one used in the extension popup.

[Secret-chest]

IMO the popup UI should stay more or less like it is now - all addons are collapsed by default (with no big images) and you can expand them to change the settings right from the popup.

So basically the third view?

[Secret-chest]

What about the messaging @WorldLanguages ? It's a bit different. Also please ping me if you can, so I get notifications

[WorldLanguages]

@Secret-chest You should subscribe to your own forum thread.

[WorldLanguages]

So basically the third view?

Yes, I assume in that view addons would continue to expand like they currently do, and when expanded it would look like the second view.

[Secret-chest]

@Secret-chest You should subscribe to your own forum thread.

@WorldLanguages I'm already subscribed to the whole repo. If you mention me I also get mobile notifications.

[DNin01]

I think that layout makes it a lot easier to find addons you're looking for. Playing with those view options would be interesting, too.

[Secret-chest]

Thanks for the compliment.

[Secret-chest]

I now have 2 view options for desktop and 3 for mobile/popup.

[Samq64]

I know the mockup isn't really about the style, but please don't use that color sheme in the actual thing.

[WorldLanguages]

Of course not.
We probably aren't going to use material design UI elements either.

[Secret-chest]

Of course not. We probably aren't going to use material design UI elements either.

But maybe we could borrow some things, such as shadows instead of borders?

[Secret-chest]

Regarding the colour scheme, maybe we could get more colour modes, and this could be one of them.

[WorldLanguages]

I find it unlikely we'll ever add customizable color modes to our UIs.

[WorldLanguages]

Of course not. We probably aren't going to use material design UI elements either.

But maybe we could borrow some things, such as shadows instead of borders?

I guess we could

[Secret-chest]

@WorldLanguages Would it be worthwhile to try it out in a fork (after the switch to Vue 3)?

[WorldLanguages]

I would suggest waiting until both Vue 3 and a cleanup are merged (they are done separately to avoid bugs). I can have this redesign in mind when cleaning up the settings code to possibly make this easier to implement.

[Secret-chest]

I would suggest waiting until both Vue 3 and a cleanup are merged (they are done separately to avoid bugs). I can have this redesign in mind when cleaning up the settings code to possibly make this easier to implement.

I might need some Vue help since it's pretty hard. But JavaScript I already understand @WorldLanguages

[DNin01]

I would suggest waiting until both Vue 3 and a cleanup are merged (they are done separately to avoid bugs). I can have this redesign in mind when cleaning up the settings code to possibly make this easier to implement.

I might need some Vue help since it's pretty hard. But JavaScript I already understand @WorldLanguages

Learning the Node.js commands needed for compilation might be a change, but it's not too bad.

[Secret-chest]

Is there any consensus?

[BroJac5246]

I don't think anyone is seriously against this. But I also don't think anyone is ready to say that they want this specific proposal since there's a few of them.

[Secret-chest]

So it's too early to decide?

[BroJac5246]

So it's too early to decide?

There's currently no pressure to do so, so that appears to be the case. Once Scratch Addons 2.0 or some other major overhaul at some point in the future starts being made, that's when this is realistically likely to be discussed again (to my understanding).

[Samq64]

There's also the Vue 3 port that's kind of holding the settings page back.

[WorldLanguages]

Yeah, I find it likely we'll begin by porting the current settings page to Vue 3 and changing the font, then we can discuss another overhaul