Greg Sheremeta has uploaded a new change for review. Change subject: userportal, webadmin: refactor login pages to use gwtbootstrap3 widgets ......................................................................
userportal, webadmin: refactor login pages to use gwtbootstrap3 widgets Cleaned up the login pages by removing HTML code and using the gwtbootstrap3 widgets (b:Row, b:Column, etc.) instead. Change-Id: Idf7e0b9e07e3a60506691ce44c6dc2b25d623239 Signed-off-by: Greg Sheremeta <[email protected]> --- M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/utils/PatternflyConstants.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/view/AbstractLoginFormView.java M frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseEntityModelCheckboxEditor.java M frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.java M frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.ui.xml M frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.java M frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.ui.xml 7 files changed, 82 insertions(+), 86 deletions(-) git pull ssh://gerrit.ovirt.org:29418/ovirt-engine refs/changes/30/37530/1 diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/utils/PatternflyConstants.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/utils/PatternflyConstants.java index 85f9dd8..702db22 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/utils/PatternflyConstants.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/utils/PatternflyConstants.java @@ -4,6 +4,8 @@ public static final String FORM_CONTROL = "form-control"; //$NON-NLS-1$ public static final String FORM_GROUP = "form-group"; //$NON-NLS-1$ public static final String CONTROL_LABEL = "control-label"; //$NON-NLS-1$ + public static final String BRAND = "brand"; //$NON-NLS-1$ + // bootstrap grid classes diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/view/AbstractLoginFormView.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/view/AbstractLoginFormView.java index 1860f39..31987aa 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/view/AbstractLoginFormView.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/view/AbstractLoginFormView.java @@ -2,6 +2,7 @@ import java.util.Arrays; +import org.gwtbootstrap3.client.ui.Column; import org.gwtbootstrap3.client.ui.Label; import org.gwtbootstrap3.client.ui.ListBox; import org.gwtbootstrap3.client.ui.Well; @@ -45,6 +46,9 @@ private static MotdAnchorTemplate template; + @UiField + public Column brandColumn; + @UiField(provided = true) @Ignore @WithElementId("localeBox") diff --git a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseEntityModelCheckboxEditor.java b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseEntityModelCheckboxEditor.java index 7a4a87f..92e72fc 100644 --- a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseEntityModelCheckboxEditor.java +++ b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/editor/BaseEntityModelCheckboxEditor.java @@ -2,7 +2,6 @@ import java.util.List; -import org.ovirt.engine.ui.common.utils.PatternflyConstants; import org.ovirt.engine.ui.common.widget.AbstractValidatedWidgetWithLabel; import org.ovirt.engine.ui.common.widget.Align; import org.ovirt.engine.ui.common.widget.VisibilityRenderer; @@ -73,8 +72,7 @@ getCheckboxWidgetLabel().getStyle().setPaddingLeft(10, Unit.PX); getCheckboxWidgetLabel().getStyle().setPosition(Position.RELATIVE); getCheckboxWidgetLabel().getStyle().setTop(-3, Unit.PX); - // checkboxes don't use form-control - getContentWidgetElement().removeClassName(PatternflyConstants.FORM_CONTROL); + getContentWidgetElement().removeClassName("cbe_checkbox_pfly_fix"); //$NON-NLS-1$ } } diff --git a/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.java b/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.java index 7ab1b1c..42fc8ab 100644 --- a/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.java +++ b/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.java @@ -3,6 +3,7 @@ import org.gwtbootstrap3.client.ui.Label; import org.ovirt.engine.ui.common.idhandler.ElementIdHandler; import org.ovirt.engine.ui.common.idhandler.WithElementId; +import org.ovirt.engine.ui.common.utils.PatternflyConstants; import org.ovirt.engine.ui.common.view.AbstractLoginFormView; import org.ovirt.engine.ui.common.widget.Align; import org.ovirt.engine.ui.common.widget.editor.generic.EntityModelCheckBoxEditor; @@ -79,6 +80,9 @@ ViewIdHandler.idHandler.generateAndSetIds(this); driver.initialize(this); + + brandColumn.setId(PatternflyConstants.BRAND); + connectAutomaticallyEditor.setContentWidgetStyleName(""); //$NON-NLS-1$ } @Override diff --git a/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.ui.xml b/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.ui.xml index 4484e96..9f60c7d 100644 --- a/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.ui.xml +++ b/frontend/webadmin/modules/userportal-gwtp/src/main/java/org/ovirt/engine/ui/userportal/section/login/view/LoginFormView.ui.xml @@ -70,59 +70,60 @@ <g:FocusPanel ui:field="loginForm" styleName="login-pf {style.loginForm}"> <g:HTMLPanel styleName="container {style.container}"> - <div class="row"> + <b:Row> - <div class="col-sm-12"> - <div id="brand"> - <g:Image styleName="obrand_loginFormLogoImage" url="clear.cache.gif" /> - </div> - </div> + <b:Column size="SM_12" ui:field="brandColumn"> + <g:Image styleName="obrand_loginFormLogoImage" url="clear.cache.gif" /> + </b:Column> <b:Well size="SMALL" addStyleNames="col-sm-11 {style.login-error}" ui:field="errorMessagePanel"> <b:Label ui:field="errorMessage" addStyleNames="{style.login-message-error} temp-link-color"/> </b:Well> - <div class="col-sm-7 col-md-6 col-lg-5 login"> - <form class="form-horizontal" role="form"> + <b:Column size="SM_7 MD_6 LG_5" addStyleNames="login"> + <g:FormPanel addStyleNames="form-horizontal"> - <div class="form-group"> - <div class="col-sm-8 col-md-8"></div> - <div class="col-sm-4 col-md-4"> - <b:ListBox ui:field="localeBox" tabIndex="1" /> - </div> - </div> + <g:FlowPanel> + <g:FlowPanel addStyleNames="form-group"> + <b:Column size="SM_8"></b:Column> + <b:Column size="SM_4"> + <b:ListBox ui:field="localeBox" tabIndex="1" /> + </b:Column> + </g:FlowPanel> - <ge:StringEntityModelTextBoxEditor ui:field="userNameEditor" usePatternFly="true" tabIndex="2" /> + <ge:StringEntityModelTextBoxEditor ui:field="userNameEditor" usePatternFly="true" tabIndex="2" /> - <ge:StringEntityModelPasswordBoxEditor ui:field="passwordEditor" usePatternFly="true" tabIndex="3" /> + <ge:StringEntityModelPasswordBoxEditor ui:field="passwordEditor" usePatternFly="true" tabIndex="3" /> - <e:ListModelListBoxEditor ui:field="profileEditor" usePatternFly="true" tabIndex="4" /> + <e:ListModelListBoxEditor ui:field="profileEditor" usePatternFly="true" tabIndex="4" /> - <div> - <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6"> - <ge:EntityModelCheckBoxEditor ui:field="connectAutomaticallyEditor" usePatternFly="true" tabIndex="5" /> - </div> - <div class="col-xs-4 col-sm-4 col-md-4 submit {style.loginButtonContainer}"> - <w:PatternflyUiCommandButton ui:field="loginButton" addStyleNames="btn-primary btn-lg" tabIndex="6" /> - </div> - </div> - </form> - </div> + <g:FlowPanel> + <b:Column size="XS_8 SM_6" offset="SM_2"> + <ge:EntityModelCheckBoxEditor ui:field="connectAutomaticallyEditor" usePatternFly="true" tabIndex="5" /> + </b:Column> + <b:Column size="XS_4" addStyleNames="submit {style.loginButtonContainer}"> + <w:PatternflyUiCommandButton ui:field="loginButton" addStyleNames="btn-primary btn-lg" tabIndex="6" /> + </b:Column> + </g:FlowPanel> + </g:FlowPanel> - <div class="col-sm-5 col-md-6 col-lg-7 details"> + </g:FormPanel> + </b:Column> + + <b:Column size="SM_5 MD_6 LG_7" addStyleNames="details"> <g:HTMLPanel ui:field="informationMessagePanel"> - <span class="pficon-layered {style.information-triangle}"> - <span class="pficon pficon-warning-triangle"></span> - <span class="pficon pficon-warning-exclamation"></span> - </span> + <g:HTMLPanel tag="span" addStyleNames="pficon-layered {style.information-triangle}"> + <g:HTMLPanel tag="span" addStyleNames="pficon pficon-warning-triangle"></g:HTMLPanel> + <g:HTMLPanel tag="span" addStyleNames="pficon pficon-warning-exclamation"></g:HTMLPanel> + </g:HTMLPanel> <b:Label ui:field="informationMessage" addStyleNames="{style.label-default} {style.information-message} temp-link-color"/> </g:HTMLPanel> <g:HTMLPanel ui:field="motdPanel" addStyleNames="{style.label-default}"> <b:Label ui:field="motdHeaderLabel" styleName="{style.motd-header}" /> <g:HTMLPanel ui:field="motdMessagePanel" addStyleNames="temp-link-color" /> </g:HTMLPanel> - </div> - </div> + </b:Column> + </b:Row> </g:HTMLPanel> </g:FocusPanel> diff --git a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.java b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.java index e0a9d68..e3e8d91 100644 --- a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.java +++ b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.java @@ -1,6 +1,7 @@ package org.ovirt.engine.ui.webadmin.section.login.view; import org.ovirt.engine.ui.common.idhandler.ElementIdHandler; +import org.ovirt.engine.ui.common.utils.PatternflyConstants; import org.ovirt.engine.ui.common.view.AbstractLoginFormView; import org.ovirt.engine.ui.uicommonweb.models.LoginModel; import org.ovirt.engine.ui.webadmin.ApplicationConstants; @@ -50,6 +51,8 @@ informationMessage.setText(constants.browserNotSupported()); informationMessagePanel.setVisible(true); } + + brandColumn.setId(PatternflyConstants.BRAND); } private void localize(ApplicationConstants constants, diff --git a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.ui.xml b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.ui.xml index 4b2643e..e645db8 100644 --- a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.ui.xml +++ b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/login/view/LoginFormView.ui.xml @@ -59,70 +59,54 @@ <g:FocusPanel ui:field="loginForm" styleName="login-pf {style.loginForm}"> <g:HTMLPanel styleName="container {style.container}"> - <div class="row"> + <b:Row> - <div class="col-sm-12"> - <div id="brand"> - <g:Image styleName="obrand_loginFormLogoImage" url="clear.cache.gif" /> - </div> - </div> + <b:Column size="SM_12" ui:field="brandColumn"> + <g:Image styleName="obrand_loginFormLogoImage" url="clear.cache.gif" /> + </b:Column> <b:Well size="SMALL" addStyleNames="col-sm-11 {style.login-error}" ui:field="errorMessagePanel"> <b:Label ui:field="errorMessage" addStyleNames="{style.login-message-error} temp-link-color"/> </b:Well> - <div class="col-sm-7 col-md-6 col-lg-5 login"> - <form class="form-horizontal" role="form"> + <b:Column size="SM_7 MD_6 LG_5" addStyleNames="login"> + <g:FormPanel addStyleNames="form-horizontal"> - <div class="form-group"> - <div class="col-sm-8 col-md-8"></div> - <div class="col-sm-4 col-md-4"> - <b:ListBox ui:field="localeBox" tabIndex="1" /> - </div> - </div> + <g:FlowPanel> + <g:FlowPanel addStyleNames="form-group"> + <b:Column size="SM_8"></b:Column> + <b:Column size="SM_4"> + <b:ListBox ui:field="localeBox" tabIndex="1" /> + </b:Column> + </g:FlowPanel> - <ge:StringEntityModelTextBoxEditor ui:field="userNameEditor" usePatternFly="true" tabIndex="2" /> + <ge:StringEntityModelTextBoxEditor ui:field="userNameEditor" usePatternFly="true" tabIndex="2" /> - <ge:StringEntityModelPasswordBoxEditor ui:field="passwordEditor" usePatternFly="true" tabIndex="3" /> + <ge:StringEntityModelPasswordBoxEditor ui:field="passwordEditor" usePatternFly="true" tabIndex="3" /> - <e:ListModelListBoxEditor ui:field="profileEditor" usePatternFly="true" tabIndex="4" /> + <e:ListModelListBoxEditor ui:field="profileEditor" usePatternFly="true" tabIndex="4" /> - <div class="form-group"> - <div class="col-xs-8 col-sm-offset-2 col-sm-6 col-md-offset-2 col-md-6"> - <!-- - TODO: might need this someday - <div class="checkbox"> - <label> - <input type="checkbox" tabindex="3" /> - Remember Username - </label> - </div> - <span class="help-block"> - Forgot - <g:Anchor href="javascript:;" tabIndex="5" addStyleNames="{style.login-link}">Username</g:Anchor> - or - <g:Anchor href="javascript:;" tabIndex="6" addStyleNames="{style.login-link}">Password</g:Anchor> - ? - </span> - --> - </div> - <div class="col-xs-4 col-sm-4 col-md-4 submit"> - <w:PatternflyUiCommandButton ui:field="loginButton" addStyleNames="btn-primary btn-lg" tabIndex="5" /> - </div> - </div> - </form> - </div> + <g:FlowPanel addStyleNames="form-group"> + <b:Column size="XS_8 SM_6" offset="SM_2"></b:Column> + <b:Column size="XS_4" addStyleNames="submit"> + <w:PatternflyUiCommandButton ui:field="loginButton" addStyleNames="btn-primary btn-lg" tabIndex="5" /> + </b:Column> + </g:FlowPanel> + </g:FlowPanel> - <div class="col-sm-5 col-md-6 col-lg-7 details"> + </g:FormPanel> + </b:Column> + + <b:Column size="SM_5 MD_6 LG_7" addStyleNames="details"> <g:HTMLPanel ui:field="informationMessagePanel"> - <span class="pficon-layered {style.information-triangle}"> - <span class="pficon pficon-warning-triangle"></span> - <span class="pficon pficon-warning-exclamation"></span> - </span> + <g:HTMLPanel tag="span" addStyleNames="pficon-layered {style.information-triangle}"> + <g:HTMLPanel tag="span" addStyleNames="pficon pficon-warning-triangle"></g:HTMLPanel> + <g:HTMLPanel tag="span" addStyleNames="pficon pficon-warning-exclamation"></g:HTMLPanel> + </g:HTMLPanel> <b:Label ui:field="informationMessage" addStyleNames="{style.label-default} {style.information-message} temp-link-color"/> </g:HTMLPanel> - </div> - </div> + </b:Column> + </b:Row> </g:HTMLPanel> </g:FocusPanel> -- To view, visit http://gerrit.ovirt.org/37530 To unsubscribe, visit http://gerrit.ovirt.org/settings Gerrit-MessageType: newchange Gerrit-Change-Id: Idf7e0b9e07e3a60506691ce44c6dc2b25d623239 Gerrit-PatchSet: 1 Gerrit-Project: ovirt-engine Gerrit-Branch: master Gerrit-Owner: Greg Sheremeta <[email protected]> _______________________________________________ Engine-patches mailing list [email protected] http://lists.ovirt.org/mailman/listinfo/engine-patches
