redesign, upgrade to Bootstrap 4 and Fork Awesome

[thetric]

Upgrades to Bootstrap 4. BS4 dropped Glyphicons so I've replace them with Font Awesome Fork Awesome (which also contains more icons).

TODOs:

• apply styling to inputs
• apply styling for Bootstrap's custom forms (radio and check boxes)
• bug(options/nav): "general" stays active after tab switch
• redesign "connected databases" with cards? (later, future PR)
• refactor(icons): replace font awesome web fonts + css with svg&js (smaller bundle?) (use ForkAwesome instead)
• refactor(icons): replace FontAwesome icons with ForkAwesome (see redesign, upgrade to Bootstrap 4 and Fork Awesome #322 (comment))
• use old green color theme (redesign, upgrade to Bootstrap 4 and Fork Awesome #322 (comment))

files:

• options/options.html
• popups/popup.html
• popups/popup_httpauth.html
• popups/popup_multiple-fields.html
• popups/popup_remember.html
• options/shortcuts.html

bugs:

• options/site-prefs: no warnings displayed if value is invalid
• options/site prefs: cannot change "Username-only Detection" on freshly added entry, although the changes are reflected to the model after a reload
• option/general: "Default group for saving new passwords:" displays "Default: null KeePassXC-Browser Passwords" with null?

Previews:

[thetric]

WIP of the "General" tab

[phoerious]

I like it. I've always wanted to give it a slight makeover myself, but never had the time.

[droidmonkey]

Oh sexy!

[varjolintu]

Looks very nice! Btw, are we going to keep the older green color sheme? The new navbar is bright green.

[varjolintu]

Some things to keep eye on:
twbs/bootstrap#23586
https://forkawesome.github.io/Fork-Awesome/

[thetric]

@varjolintu now with a custom bootstrap with the old green color as primary and Fork Awesome:

[thetric]

This is mostly done (except the navbar bug).

Due to the change the primary color to the old green the 'success' color was redefined as light purple. Does this look okay? (E.g. in the popup after KeepassXC is connected)

[sebast889]

Shouldn't the auto-fill warning come under the "Automatically fill in single-credential entries"? In the above screenshot it looks like it is for the Automatically retrieve credentials" option.

Also, can the main header tabs like "General" be a darker green color when it is the active tab (just like it is for the current layout)?

[thetric]

Shouldn't the auto-fill warning come under the "Automatically fill in single-credential entries"? In the above screenshot it looks like it is for the Automatically retrieve credentials" option.

Done:

Also, can the main header tabs like "General" be a darker green color when it is the active tab (just like it is for the current layout)?

Or how do you like this: (The nav bar entries should have the same width)

[sebast889]

First one looks better to me, second has too much white. Is it not possible to match the current navbar layout?

[droidmonkey]

I like the constrained width, especially on wide screen monitors. If you don't have any information to fill in the space, don't stretch it out.

[thetric]

Remaining bugs:

• no form validation (blink timeout, site prefs > add url)
• site prefs/table: cannot change "Username-only Detection" on freshly added entry, although the changes are reflected to the model after a reload

[varjolintu]

We had a discussion and we would like to have this PR in the same release with #351. The only changes concerning this PR are in the options page where the timeout settings have been removed totally. You should do the same. I'll modify the content script buttons to match the themes in this PR, because we cannot use Bootstrap there.

[thetric]

The timeout related settings UI + code is removed. The only remaining bug is the appearance of the checkbox in the "Site preferences" tab

[thetric]

I'm afraid I have no clue why the checkboxes don't toggle correctly. In my version in the change handler of the checkbox the url is always undefined because $(this) refers to the original tr.clone but not to the appended row.

Might somebody point out the failure?

[varjolintu]

@thetric I'll look into this tomorrow and see if I can find the reason.

[varjolintu]

#772 replaces this. Closing the PR.