otter-browser icon indicating copy to clipboard operation
otter-browser copied to clipboard

Appearance settings page

Open Emdek opened this issue 8 years ago • 10 comments

Currently Appearance options are hidden in Advanced tab of Preferences, we should make them more accessible and more attractive to users by creating new special page similar to customization interface used by Firefox (which is quite similar to Appearance dialog from classic Opera, but without dialog and also allowing to customize main menu). It could contain stuff like:

  1. [ ] list of available actions (defaulting most handy ones, with ability to show all and filter);
  2. [ ] drag and drop menus editor (needs ideas on how to properly visualize submenus, special menus etc.);
  3. [ ] drag and drop toolbars editor (simply showing all of them and switching into special editing mode, complementing or partially replacing existing dialog to configure them);
  4. [ ] list of available icon themes with previews;
  5. [ ] list of available styles with previews.

Emdek avatar Feb 03 '17 18:02 Emdek

I was considering to open an issue about this very thing. Indeed, the customisation interface of Firefox is appealing despite its incompleteness and I believe that having a visual tool to configure the visual aspect of the browser is more practical.

About the menu editor, maybe we should copy how Firefox does it. Our menu is more compact (it doesn’t have big icons) yet it may change quite a bit if make progress on #1112. Thus it may not need as much room, and the display of sub-menus could be made one by one by clicking on the parent action.

How would we access this settings page? Something like about:appearance?

pierreporte avatar Feb 03 '17 19:02 pierreporte

@pierreporte, yes, about:appearance but also some menu and context menu actions of course. ;-)

Emdek avatar Feb 03 '17 20:02 Emdek

It went without saying.

To make a remark, perhaps a bit out of the subject, albeit linked, I am wondering that now we would have the settings disseminated into three different places: the preferences window, about:config, about:appearance, and some minor dialogue boxes. It’s starting to be a little confusing. Why don’t we move everything to special pages? With #1240 we could still have independant windows for such things. It is what Vivaldi does. To go further, about:config would be the home page of all configuration, displaying a menu linking to about:config/general (current settings window), about:config/appearance, and of course about:config/advanced (the current about:config), plus maybe several others as needed.

pierreporte avatar Feb 03 '17 21:02 pierreporte

@pierreporte, no, Advanced Configuration has to stay as it is, it's called Advanced for a reason. ;-) And yes, I've already considered moving Preferences dialog into special page, like in Firefox (related ticket: #531). But not all stuff should be special page, the only other thing that makes sense to become one (when talking about existing dialogs) is session management (#577).

BTW, I don't care much about what Vivaldi does. :-P

Emdek avatar Feb 04 '17 08:02 Emdek

I made a mockup:

s lection_558

There is both interface customisation and theme chooser on the same page. This could change.

The appearance settings page is divided into 3 main zones:

  • The main menu, the menu button, and the toolbars are recreated (but non-functional). You can click on everything to open menu. When a menu is open, it pushes the other things to let the place clear. In the picture, for example, the File menu pushed the menu button and the toolbar. Everything can be moved and deleted.
  • The list of available actions is like what Firefox has, but more organized and nicely aligned. I don’t know if it should look like widgets (like Firefox) or not (like the current solution). You can drag icon from the list to the menus, toolbars, etc.
  • The theme selector. There is one selector for the interface theme and one for the icon theme. For both, hovering the theme shows a popup containing the preview. Maybe it would be better to have the breview directly in the main interface.

All actions have a context menu that must be used to delete the action. If the action has settings, they can be accessed this way (a dialogue box then appears).

All this is very rough and must be refined.

pierreporte avatar Feb 04 '17 13:02 pierreporte

Well, EVERYTHING could be a special page, just like in Chrome. I've never understood the advantage over dialogs/windows though. Maybe the more-integrated look and feel?! Hmm ...

Either way is fine with me.

beastie1 avatar Feb 04 '17 19:02 beastie1

@pierreporte, interesting mockup, but in case of toolbars they would be edited in situ, no need to duplicate them inside window itself (especially that in edge cases they would fill it completely themselves... you can have unlimited number of toolbars after all). Idea of such big previews is interesting but might be hard to implement without requiring screenshots.

Emdek avatar Feb 06 '17 17:02 Emdek

A menu structure like old Firefox would for sure be great :)

Sa-Ja-Di avatar Feb 19 '17 19:02 Sa-Ja-Di

@pierreporte I think the second mention of the word menu is redundant. How about:

Main menu:
Bar             Button

Possibly it could show the button clicked over on the right hand side underneath that option.

comradekingu avatar Sep 28 '17 03:09 comradekingu

in 2021 it's still dark icons with a dark system theme...

Flashwalker avatar Jan 24 '21 21:01 Flashwalker