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

Redesign of install process and screens for improved branding and consistency. #265

Merged
merged 25 commits into from Feb 20, 2019

Conversation

@johnalarcon
Copy link
Contributor

johnalarcon commented Dec 8, 2018

This PR pertains to issue #210 and implements a redesign of the installation process and views.
It adds consistency and brand recognition to the entire process and cleans up the related code.

Description

The goals achieved with this PR are several:

  1. create a faster install process, akin to an "Amazing 60 Second Install" (or something)
  2. replace coin-style logo with wordmark logo
  3. brand primary install screens with logo, CP color, and CTA-style buttons
  4. brand secondary (error) screens with logo and secondary-style buttons (or links, as appropriate)
  5. remove verbosity from texts; link to help-docs to avoid lengthy in-place descriptions
  6. improve font sizes
  7. remove needless steps
  8. cascade in CSS rules for button colors; avoid changing rules affecting entire admin

About the Install Process

This update breaks the install process into several main views, each of which have a CTA-stlye button:

  1. Choose language
  2. Setup database
  3. Setup admin
  4. Enjoy success

There are also quite a few supporting views for the many various errors that might occur during installation. These are handled and branded, as well.

About the Logo File

I've added png/svg logo files to ./wp-admin/images/ as they're install-related - perhaps these should be moved to ./wp-includes/images/ where there are other brand assets. The filenames should be reviewed and a naming schema decided.

About the Texts

Most of the install and error texts have been rewritten. The goal was to remove verbosity, yet remain informative. I feel a nice balance has been struck, but am open to suggestions as few of these have been discussed. A notable exception is in the case of database errors - this markup is provided to the install process, not generated within it, so it is used as-is.

Additional

Probably the biggest change code-wise is the removal of the on/off PHP tags. My syntax highlighting was ineffective with it and my IDE's code collapse was "dancing"... I hope this is not a problem. In some places, I've outputted tabs and newlines to make the source markup readable; these aren't really needed and can be removed.

Bonus

The "Alright Sparky" step is removed in support of this petition. This petition has decent support, but does not reach the 50 vote threshold. As we are pre-1.0, perhaps a committee decision can be made to allow it. This step can be added back in, if absolutely necessary.

How has this been tested?

Manual, localhost, painstakingly. That said, it will be good to get a bunch of eyes on it.

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to change)
  • Non-breaking enhancement.

Checklist:

  • My code follows the code style of this project.
  • It is not clear if this change will require documentation updates.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.

Screenshots:

Primary Views

Choose Language
main-choose-language

Database Setup
main-database-setup

Admin Setup
main-admin-setup

Install Success when user chose own password
main-success-1

Install Success when system chose the password
main-success-2

Secondary Views

Warning config file exists in install
warning-config-file-found-1

Warning config file exists 1 level up from install
warning-config-file-found-2

Error selecting database
error-database-selection

Error connecting to database
error-database-connection

Error missing table prefix
error-table-prefix-missing

Error invalid table prefix
error-table-prefix-invalid

Error invalid username
error-admin-username

Error invalid email
error-admin-email

Error insufficient MySQL version
error-mysql-insufficient

Error insufficient PHP version
error-php-insufficient

Error insufficient PHP and MySQL version
error-php-mysql-insufficient

Error config file permissions
error-config-file-permissions

Error empty table prefix
error-table-prefix-empty

Error preventative constant set
error-prevented-by-constant

Error already installed
error-already-installed

Error sample config file missing
error-missing-sample-config

There are more views, as well, such as when the user tries to add wonky characters to the table prefix... or uses unsupported characters in their email address. Those are also accounted for. I've just run short on time and need to get this posted.

@octoxan

This comment has been minimized.

Copy link

octoxan commented Dec 8, 2018

Looks fantastic!

src/wp-admin/install.php Outdated Show resolved Hide resolved
src/wp-admin/install.php Outdated Show resolved Hide resolved
src/wp-admin/install.php Outdated Show resolved Hide resolved
src/wp-admin/install.php Outdated Show resolved Hide resolved
@nylen

This comment has been minimized.

Copy link
Member

nylen commented Dec 8, 2018

Excellent work @johnalarcon! I will test this out more thoroughly, but for now I've left a few minor comments on the code.

The build failure is because a new image was added without being minified:

2018-12-08t11 47 51-05 00

If you can run npm install and grunt precommit that will minify the images. Then you should be able to commit the changes.

This can also wait until we organize the images a bit better.

I will give this some more thought, but for now, one consideration is that we need to keep the filenames of the old WordPress logo images the same, so that plugins/themes/sites can reference them the same way.

This means we either need to fit new images into the existing naming scheme, or make copies of any new images. I'm not sure which is the best way, but so far we have been fitting things in as best we can.

Update spacing and comment clarity.
@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Dec 8, 2018

Excellent work @johnalarcon! I will test this out more thoroughly, but for now I've left a few minor comments on the code.

Thanks! I've addressed some of the comments and updated the PR accordingly. I'll get to the remaining items soon.

The build failure is because a new image was added without being minified:
The irony...

If you can run npm install and grunt precommit that will minify the images. Then you should be able to commit the changes.

Ok.

This can also wait until we organize the images a bit better.

I will give this some more thought, but for now, one consideration is that we need to keep the filenames of the old WordPress logo images the same, so that plugins/themes/sites can reference them the same way.

This means we either need to fit new images into the existing naming scheme, or make copies of any new images. I'm not sure which is the best way, but so far we have been fitting things in as best we can.

I've created issue #266 with a proposal to get this in order.

Get version from global $cp_version. Assemble download url based on $cp_version. Add untranslated URL to error messages.
@nylen

This comment has been minimized.

Copy link
Member

nylen commented Dec 14, 2018

From https://www.classicpress.net/democracy/#democracy-exceptions:

As you can imagine, if every decision required a Petition or Referendum, the community would be bogged down with an unmanageable bureaucratic process that would stifle progress. As a result, there are a number of processes and tasks that don’t need to go through the Petition or Referendum process. These include:

Minor modifications to existing functionality or processes

I think removing the Alright Sparky step qualifies, and it's a clear improvement with (as far as I know) no backwards compatibility implications.

It's also already implemented, so even better.

The code looks good at a glance, but I agree this needs a thorough review. I haven't forgotten about it, and we'll get to it as soon as we can.

@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Dec 14, 2018

Thanks for the update.

Minor modifications to existing functionality or processes

I think removing the Alright Sparky step qualifies, and it's a clear improvement with (as far as I know) no backwards compatibility implications.

Great!

The code looks good at a glance, but I agree this needs a thorough review. I haven't forgotten about it, and we'll get to it as soon as we can.

No worries.

@nylen nylen mentioned this pull request Dec 17, 2018
2 of 6 tasks complete
johnalarcon and others added 4 commits Dec 17, 2018
Update URL for logo image.
Test Merging in Upstream Changes
@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Dec 27, 2018

After reviewing Beta2, I notice the initial step of the installation – the language picker – is showing a lot of white space due to there being fewer languages. I think there were 11 of them. It's not clear when there will be additional languages added, so I was thinking it should be reduced in height to fit, so it doesn't give the impression that something is missing. What say you?

@nylen

This comment has been minimized.

Copy link
Member

nylen commented Dec 27, 2018

I was thinking [the language picker in the installation] should be reduced in height to fit, so it doesn't give the impression that something is missing. What say you?

Sounds good to me.

Update language selector size (height) to reflect current language offerings.
@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Jan 5, 2019

I changed the size a few days back... forgot to drop a comment.

@nylen nylen added this to the v1.0.0-beta3 milestone Jan 8, 2019
@johnalarcon johnalarcon mentioned this pull request Jan 9, 2019
src/wp-admin/install.php Outdated Show resolved Hide resolved
@nylen

This comment has been minimized.

Copy link
Member

nylen commented Feb 19, 2019

Thanks for doing this @johnalarcon, it took a while but we are finishing it.

There were more button styles and colors here than you might expect, so I've modified them to look like the buttons in #223:

This darker color scheme also has a better contrast ratio, and I've added some fixes for disabled buttons and other edge cases.

I was able to test this including all the progress / error / secondary screens. Tomorrow I'll merge #366 first and then update this PR to use the new filename.

@johnalarcon

This comment has been minimized.

Copy link
Contributor Author

johnalarcon commented Feb 19, 2019

Sounds good; thanks for the update.

@nylen
nylen approved these changes Feb 20, 2019
Copy link
Member

nylen left a comment

📆 🎉

@nylen nylen merged commit ab36b5f into ClassicPress:develop Feb 20, 2019
1 check passed
1 check passed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
nylen added a commit that referenced this pull request Feb 20, 2019
Follow-up to #265. See #223.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.