[infinispan-issues] [JBoss JIRA] (ISPN-6464) Possibility to get black (login) background in all console pages

[Martin Sosic (JIRA)]

    [ https://issues.jboss.org/browse/ISPN-6464?page=com.atlassian.jira.plugin.system.issuetabpanels:comment-tabpanel&focusedCommentId=13190171#comment-13190171 ] 

Martin Sosic edited comment on ISPN-6464 at 4/11/16 6:52 PM:
-------------------------------------------------------------

This is happening because main class of the html element is being set explicitly in the code, and in this case it is not set so background remains black.
We can see here https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/index.html#L2 that variable page.htmlClass is being used to set the class on html element, therefore also defining the background.

This variable is set in login controller and main angular js file:
- https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/login/login.controller.js#L18
- https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/management-console.js#L400

I think that this is not good approach for two reasons:
1. setting this variable explicitly is prone to errors (as we can see in this issue)
2. setting class on html element is not a good practice

I am suggesting following:
- remove the current approach -> do not set class on html element and do not use page.htmlClass variable at all
- what we want instead, is for each angular view (e.g. view is login.html) to define it's own background. In order to have that possible, css has to be adjusted accordingly, so that most outer div of each angular view spans through the whole screen. This should be done by adjusting css of outer elements, that are out of views. Those would be parent elements of element with ui-view attribute in index.html. Finally, now we can add appropriate classes to each angular view and define css for them. For example, for login.html we can set class="login" to it's most outer element/div and define in css that black background image is used. For the rest, we can set default css to have white background. In this approach, there is no explicit setting of classes through javascript - instead, they are defined in views (html), and there is no way for errors like this issue to happen.

Small guidance: angular views are render here https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/index.html#L31, inside of tag with ui-view attribute.


was (Author: martinsos):
This is happening because main class of the html element is being set explicitly in the code, and in this case it is not set so background remains black.
We can see here https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/index.html#L2 that variable page.htmlClass is being used to set the class on html element, therefore also defining the background.

This variable is set in login controller and main angular js file:
- https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/login/login.controller.js#L18
- https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/management-console.js#L400

I think that this is not good approach for two reasons:
1. setting this variable explicitly is prone to errors (as we can see in this issue)
2. setting class on html element is not a good practice

I am suggesting following:
- remove the current approach -> do not set class on html element and do not use page.htmlClass variable at all
- what we want instead, is for each angular view (e.g. view is login.html) to define it's own background. In order to have that possible, css has to be adjusted accordingly, so that most outer div of each angular view spans through the whole screen. This should be done by adjusting css of outer elements, that are out of views. Finally, now we can add appropriate classes to each angular view and define css for them. For example, for login.html we can set class="login" to it's most outer element/div and define in css that black background image is used. For the rest, we can set default css to have white background. In this approach, there is no explicit setting of classes through javascript - instead, they are defined in views (html), and there is no way for errors like this issue to happen.

Small guidance: angular views are render here https://github.com/infinispan/infinispan-management-console/blob/master/src/main/webapp/index.html#L31, inside of tag with ui-view attribute.

> Possibility to get black (login) background in all console pages 
> -----------------------------------------------------------------
>
>                 Key: ISPN-6464
>                 URL: https://issues.jboss.org/browse/ISPN-6464
>             Project: Infinispan
>          Issue Type: Bug
>          Components: Console
>            Reporter: Martin Vrabel
>            Assignee: Vladimir Blagojevic
>            Priority: Minor
>         Attachments: Screenshot from 2016-03-24 15-22-35.png, Screenshot from 2016-03-24 15-22-42.png, Screenshot from 2016-03-24 15-22-47.png
>
>
> Way to reproduce:
> 1. Log into console: 
> 2. press back button (pic. 1 , navbar should not be shown )
> 3. press forward button (background from this point on is the same as at login)



--
This message was sent by Atlassian JIRA
(v6.4.11#64026)