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

fix(UI): Add help and preferences links to GUIs #253

Merged
merged 11 commits into from
Jan 18, 2019

Conversation

matatk
Copy link
Owner

@matatk matatk commented Jan 18, 2019

This makes Help and Preferences more discoverable. It involved renaming some messages for clarity, factoring out translation and also improving the styles somewhat, including having slight differences on the sidebar styles (to make it fill height). The links don't show up in the DevTools panel.

When the stand-alone options page is done, there should be a big refactoring and harmonisation of styles across options, GUIs and help.

Fixes #250, which was suggested in a review of the extension (more details in the issue)—thanks for the feedback :-).

* Add Help and Options buttons to the pop-up (non-functional so far).
* Have the buttons appear always at the bottom of the sidebar.
* Ensure the pop-up has a pleasant minimum width on Chrome-like browsers.
* More comfortable spacing in the GUIs.
* Split the gui.css into gui.css and sidebar.css, and only include the
  sidebar in the sidebar HTML panel (achieved by running the existing replace
  function on the GUI HTML file after copying, and unlinking the sidebar.css
  file where appropriate).
* Add outlines to things in the CSS so the alignment can be tested.
* Remove debugging outlines.
* Streamline a bit; remove un-needed rules.
* Simplify markup by using the <label> as a block.
* Remove border-box as it seems unnecessary.
* Rename "splash-*" messages to remove the "splash-" prefix.
* Respond to open-settings and open-help messages from GUI listeners.
...as well as options HTML.

Also make the title for the options page more consistent.
@matatk matatk changed the title Add help and preferences buttons to GUIs fix(UI): Add help and preferences buttons to GUIs Jan 18, 2019
* Make the buttons links, to be consistent with the help page.
* Rename parts of the GUI HTML to make more sense.
* Move styles relating to the flexbox for the sidebar into sidebar.css
The original plan was to harmonise these with the help page action
links, but: (a) the rounded links look a bit naff in the sidebar/pop-up
and (b) the action links are actually not very user-friendly—they need
to be styled more like actual links (as that's how they behave) but
still have a prominent call to action, maybe thicker text/underline and
an arrow shape preceding them?
@matatk matatk changed the title fix(UI): Add help and preferences buttons to GUIs fix(UI): Add help and preferences links to GUIs Jan 18, 2019
@matatk matatk merged commit da628f9 into master Jan 18, 2019
@matatk matatk deleted the add-help-and-options-links-to-guis branch January 18, 2019 23:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant