UX improvements #23

dgrammatiko · 2015-05-23T14:48:07Z

Few improvements for better UX

What is changed:

Removed from the javascript all the static styling and put it in the relative css/class
Added css class body.ifw-busy to prevent scrolling of the page
Apply and remove the class ifw-busy when a request is made and an answer is received
this PR also replaces Hide the animation when changing tab #7 with the suggestion of @gunjanpatel! Thanks!

Testing

Make sure you have web installer installed!
Download and replace:
plugins/installer/webinstaller/css/client.css
plugins/installer/webinstaller/css/client.min.css
plugins/installer/webinstaller/js/client.js
plugins/installer/webinstaller/js/client.min.js

Whenever you click on any link in the iframe you should see an overlay and a spinner
Try to scroll when spinner is shown, (no scrolling should happen)
Try to change tab when the spinner is shown (the new tab should show up correctly)

Preview

gunjanpatel · 2015-05-25T04:39:31Z

plugins/installer/webinstaller/js/client.js

-			.css("z-index", "1000")
-			.css("opacity", "0.80")
-			.css("-ms-filter", "progid:DXImageTransform.Microsoft.Alpha(Opacity = 80)")
-			.css("filter", "alpha(opacity = 80)")
 			.appendTo('#myTabContent');


Thanks @dgt41
Tested:
It's not working like expected. Joomla loader is not hiding on other tabs.

It seems that you missed to include #web in following code.

.appendTo('#myTabContent #web');

damn copy paste, will push it now, Thanks!

gunjanpatel · 2015-05-25T04:52:13Z

@dgt41 I sent PR https://github.com/dgt41/install-from-web-client/pull/1 to fix it.

peterlose · 2015-05-25T15:39:34Z

@dgt41 Just tested it. I'm getting an error: client.js:62 Uncaught ReferenceError: apps_j25 is not defined

dgrammatiko · 2015-05-25T15:44:39Z

@losedk Thats strange as apps_j25 is declared elsewhere, in the plugin itself https://github.com/joomla-extensions/install-from-web-client/blob/master/plugins/installer/webinstaller/webinstaller.php#L103

gunjanpatel · 2015-05-26T05:23:13Z

may be not because syntax is wrong? I guess should be

var apps_j25 = $j25;

dgrammatiko · 2015-05-26T11:51:06Z

@gunjanpatel You are right, vars should be declared properly

gunjanpatel · 2015-05-26T11:54:09Z

👍

peterlose · 2015-05-26T13:32:49Z

That fixed the js issue. I'm just gonna do some more testing

nicksavov · 2015-06-01T02:35:29Z

@dgt41 , looks like there are some merge conflicts. Could you re-sync?

dgrammatiko · 2015-06-01T09:46:19Z

@nicksavov resynced

beat · 2015-06-11T10:22:54Z

Re-synced code-changes look ok to me.
We need 1-2 testers for the resynced PR here before merging.

dgrammatiko · 2015-06-11T10:25:09Z

@gunjanpatel @losedk @nicksavov Can you retest this, so it can finally gets merged?

nicksavov · 2015-06-11T17:13:02Z

I think we should just merge it, since it's a resync.

gunjanpatel · 2015-06-12T05:34:11Z

plugins/installer/webinstaller/webinstaller.php

+apps_updateavail1 = '$updatestr1',
+apps_updateavail2 = '$updatestr2',
+apps_obsolete = '$obsoletestr',
+apps_j25 = $j25;


It seems this line is generating issue. It is look like that heredoc is not able to understand that this is JS variable.
Having issue like below with the latest changes.

Looks like it's because https://github.com/joomla-extensions/install-from-web-client/pull/18/files#diff-cc215dbf1ed448beb9f785b4a2f56531L87 was removed. The PR needs updating and retesting, unfortunately.

beat · 2015-07-04T17:52:11Z

@dgt41 It looks that this one is not ready for merging according to latest tests from @nicksavov ?

Can you please check ?

dgrammatiko · 2015-07-08T22:18:57Z

@beat Everything should be synced and ready to go now!

beat · 2015-07-08T23:28:32Z

@dgt41 Thanks for the latest commit

We now need 1-2 successful tests and confirmation that it now fixes the issue reported by @gunjanpatel above. Any takers ? @gunjanpatel @nicksavov @losedk

gunjanpatel · 2015-07-09T04:32:26Z

Tested Successfully.
Working nice with latest patch.
Tested on FF and Chrome on Ubuntu.
Need 1 more test.
Thanks @dgt41 and @beat

smz · 2015-07-11T14:01:24Z

#test OK, everything as expected.

Thanks!

beat · 2015-07-12T11:22:03Z

I wanted to merge this PR, and did a last third test on it, but I found an issue: The nice Joomla spinning wheel doesn't display anymore during initial loading.

To reproduce (i did it on Firefox 39 (latest):

checkout master, go to install from web page, refresh page: Text "Loading..." and Joomla spinning logo shows.
checkout UX branch of dgt41, clear cache, refresh page: Only text "Loading..." shows up.

@dgt41 can you please check what happened to the spinning Joomla logo ?

gunjanpatel · 2015-07-13T05:34:16Z

@beat On FF 39 linux. Tried to clear catch and reproduce the issue which you mention. But not able to reproduce it. I am getting "Loading..." and Joomla spinning logo both.

beat · 2015-07-13T17:12:14Z

@gunjanpatel just checked with 2 different servers (http localhost and remote https server) and 2 different browsers (Firefox 39 and WebKit 2.4.8-based Epiphany 3.10.3): The spinning Joomla logo does not display with "Loading..." when initially loading the install-from-web page. So not ready for merging yet.

gunjanpatel · 2015-07-14T04:42:27Z

Agree if it not working for different environment then definitely need fix.
Cleared catch. Installed new staging site and get patch from this PR. Only I am not able to reproduce it so far. :( weird.

dgrammatiko · 2015-08-10T13:30:51Z

@gunjanpatel @beat I’ve updated this one so that the spinner is visible, by simplifying part of the script and with some css additions. Should work flawlessly now for every browser

beat · 2016-02-17T15:44:18Z

Found the reasons I was not seeing the spinner: There are 2 reasons!

My Joomla install is in a subfolder, and that case doesn't get taken in account by this PR.
I was on Joomla 3.5 master which has probably by mistake moved the ajax spinner image to a new folder!

Commented here:
joomla/joomla-cms@87db28b#commitcomment-16148637

For reason number 2, I believe it's a Joomla master issue, will do a separate PR to joomla-cms.

For reason number 1, it is a fool-proof easy fix for which i'm making a separate PR.

So: Good to merge for me too! so, I'm merging.

UX improvements

beat · 2016-02-17T15:48:18Z

@dgt41 @gunjanpatel @nicksavov Can any of you also please quick-review and comment on my PR #41 ? should take less than a minute as it's obvious (I tested it here already in a subfolder install)

beat · 2016-02-17T17:10:13Z

Thanks to 2 reviews, merged #41 too.

This was referenced May 23, 2015

Hide the animation when changing tab #7

Closed

Please freeze the page when the animated gif is displayed #22

Closed

gunjanpatel reviewed May 25, 2015
View reviewed changes

nicksavov mentioned this pull request Jun 1, 2015

For Next Release #21

Closed

dgrammatiko added 3 commits June 1, 2015 11:42

UX

111953d

ooops, copy/paste

359e452

declare vars properly

fc7e514

gunjanpatel reviewed Jun 12, 2015
View reviewed changes

update

2415005

fix the disappearing spinner

b9f5a5a

dgrammatiko mentioned this pull request Aug 19, 2015

when Install From Web is installed, and slow, the overlay blocks other tabs joomla/joomla-cms#7730

Closed

dgrammatiko mentioned this pull request Oct 18, 2015

allow to use other tabs in Installer while Install From Web is busy joomla/joomla-cms#8110

Closed

beat added a commit that referenced this pull request Feb 17, 2016

Merge pull request #23 from dgt41/UX

8b30737

UX improvements

beat merged commit 8b30737 into joomla-extensions:master Feb 17, 2016

beat mentioned this pull request Feb 17, 2016

Fixed Ajax spinning image for sites in sub-folders #41

Merged

dgrammatiko deleted the UX branch February 17, 2016 17:17

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

UX improvements #23

UX improvements #23

dgrammatiko commented May 23, 2015

gunjanpatel May 25, 2015

dgrammatiko May 25, 2015

gunjanpatel commented May 25, 2015

peterlose commented May 25, 2015

dgrammatiko commented May 25, 2015

gunjanpatel commented May 26, 2015

dgrammatiko commented May 26, 2015

gunjanpatel commented May 26, 2015

peterlose commented May 26, 2015

nicksavov commented Jun 1, 2015

dgrammatiko commented Jun 1, 2015

beat commented Jun 11, 2015

dgrammatiko commented Jun 11, 2015

nicksavov commented Jun 11, 2015

gunjanpatel Jun 12, 2015

nicksavov Jun 12, 2015

beat commented Jul 4, 2015

dgrammatiko commented Jul 8, 2015

beat commented Jul 8, 2015

gunjanpatel commented Jul 9, 2015

smz commented Jul 11, 2015

beat commented Jul 12, 2015

gunjanpatel commented Jul 13, 2015

beat commented Jul 13, 2015

gunjanpatel commented Jul 14, 2015

dgrammatiko commented Aug 10, 2015

beat commented Feb 17, 2016

beat commented Feb 17, 2016

beat commented Feb 17, 2016

UX improvements #23

UX improvements #23

Conversation

dgrammatiko commented May 23, 2015

Few improvements for better UX

Testing

Preview

gunjanpatel May 25, 2015

Choose a reason for hiding this comment

dgrammatiko May 25, 2015

Choose a reason for hiding this comment

gunjanpatel commented May 25, 2015

peterlose commented May 25, 2015

dgrammatiko commented May 25, 2015

gunjanpatel commented May 26, 2015

dgrammatiko commented May 26, 2015

gunjanpatel commented May 26, 2015

peterlose commented May 26, 2015

nicksavov commented Jun 1, 2015

dgrammatiko commented Jun 1, 2015

beat commented Jun 11, 2015

dgrammatiko commented Jun 11, 2015

nicksavov commented Jun 11, 2015

gunjanpatel Jun 12, 2015

Choose a reason for hiding this comment

nicksavov Jun 12, 2015

Choose a reason for hiding this comment

beat commented Jul 4, 2015

dgrammatiko commented Jul 8, 2015

beat commented Jul 8, 2015

gunjanpatel commented Jul 9, 2015

smz commented Jul 11, 2015

beat commented Jul 12, 2015

gunjanpatel commented Jul 13, 2015

beat commented Jul 13, 2015

gunjanpatel commented Jul 14, 2015

dgrammatiko commented Aug 10, 2015

beat commented Feb 17, 2016

beat commented Feb 17, 2016

beat commented Feb 17, 2016