Greg Sheremeta has uploaded a new change for review.
Change subject: userportal, webadmin: fix popup dialog header text spacing
......................................................................
userportal, webadmin: fix popup dialog header text spacing
Changed popup dialog header text to be spaced with CSS only.
Popup dialog header text was shifting left over the icon. This
was a regression. Hopefully permanently fixed by restructuring
the layout of the dialog header bar. Now when an icon is present,
CSS takes care of moving the header text over.
Also cleaned up some CSS class names for the dialog header.
Change-Id: I28ffde8e344b1bedc10310f6eb814a37a7aecefe
Signed-off-by: Greg Sheremeta <gsher...@redhat.com>
---
M
frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.java
M
frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml
M
frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/guide/GuidePopupView.ui.xml
M packaging/branding/ovirt.brand/common.css
R packaging/branding/ovirt.brand/images/dialog/dialog_header_TL.png
A packaging/branding/ovirt.brand/images/dialog/dialog_header_TR.png
R
packaging/branding/ovirt.brand/images/dialog/dialog_header_background_repetitive.png
D packaging/branding/ovirt.brand/images/dialog/dialog_header_image.png
M packaging/branding/ovirt.brand/images/dialog/error.png
M packaging/branding/ovirt.brand/images/dialog/guide.png
M packaging/branding/ovirt.brand/ovirt-patternfly-compat.css
M packaging/branding/ovirt.brand/web_admin.css
12 files changed, 94 insertions(+), 85 deletions(-)
git pull ssh://gerrit.ovirt.org:29418/ovirt-engine refs/changes/44/31844/1
diff --git
a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.java
b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.java
index 28233be..f63b584 100644
---
a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.java
+++
b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.java
@@ -3,9 +3,6 @@
import org.ovirt.engine.ui.uicommonweb.UICommand;
import com.google.gwt.core.client.GWT;
-import com.google.gwt.core.client.Scheduler;
-import com.google.gwt.core.client.Scheduler.ScheduledCommand;
-import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.HasClickHandlers;
@@ -20,8 +17,6 @@
public class SimpleDialogPanel extends AbstractDialogPanel {
- private static final int IMAGE_MARGIN = 10;
-
interface WidgetUiBinder extends UiBinder<Widget, SimpleDialogPanel> {
WidgetUiBinder uiBinder = GWT.create(WidgetUiBinder.class);
}
@@ -31,8 +26,6 @@
String footerButton();
String contentWidget();
-
- String headerTitleFloat();
}
@UiField
@@ -70,14 +63,12 @@
@Override
@UiChild(tagname = "header", limit = 1)
public void setHeader(Widget widget) {
- widget.addStyleName(style.headerTitleFloat());
headerTitlePanel.insert(widget, 0); //Put the label at the front.
}
@UiChild(tagname = "logo", limit = 1)
public void setLogo(Widget widget) {
logoPanel.setWidget(widget);
- updateTitlePadding();
}
@Override
@@ -85,19 +76,6 @@
public void setContent(Widget widget) {
contentPanel.setWidget(widget);
widget.addStyleName(style.contentWidget());
- }
-
- void updateTitlePadding() {
- Scheduler.get().scheduleDeferred(new ScheduledCommand() {
- @Override
- public void execute() {
- int logoWidth = logoPanel.getOffsetWidth();
- if (logoWidth > 0) {
- logoWidth += IMAGE_MARGIN; //Add some pixels to account
for margins/left style of the image div.
-
headerTitlePanel.getParent().getElement().getStyle().setMarginLeft(logoWidth,
Unit.PX);
- }
- }
- });
}
@Override
diff --git
a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml
b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml
index d2e80c6..720107e 100644
---
a/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml
+++
b/frontend/webadmin/modules/gwt-common/src/main/java/org/ovirt/engine/ui/common/widget/dialog/SimpleDialogPanel.ui.xml
@@ -17,17 +17,16 @@
right: 5px;
}
- .headerLeftPanel {
- position: absolute;
- left: 5px;
+ @external obrand_dialogHeaderLeftPanel;
+ .obrand_dialogHeaderLeftPanel {
}
- @external obrand_headerCenterPanel;
- .obrand_headerCenterPanel {
+ @external obrand_dialogHeaderCenterPanel;
+ .obrand_dialogHeaderCenterPanel {
}
- @external obrand_headerTitle;
- .obrand_headerTitle {
+ @external obrand_dialogHeaderTitle;
+ .obrand_dialogHeaderTitle {
}
.content {
@@ -61,10 +60,6 @@
position: absolute;
}
- .headerTitleFloat {
- float: left;
- }
-
.helpIconButton {
background: transparent;
border: 1px solid transparent;
@@ -91,8 +86,18 @@
z-index: 1;
}
- @external obrand_dialogHeaderImage;
- .obrand_dialogHeaderImage {
+ .logoPanel {
+ float: left;
+ position: relative;
+ left: -5px;
+ }
+
+ @external obrand_dialogHeaderRightPanel;
+ .obrand_dialogHeaderRightPanel {
+ }
+
+ @external obrand_dialogLogoImageWrapper;
+ .obrand_dialogLogoImageWrapper {
}
@external obrand_dialogLogoImage;
@@ -102,13 +107,25 @@
<g:FlowPanel>
<g:FlowPanel addStyleNames="{style.header}">
- <g:SimplePanel ui:field="logoPanel"
addStyleNames="{style.headerLeftPanel}">
- <g:Image styleName='obrand_dialogLogoImage'
url="clear.cache.gif" />
- </g:SimplePanel>
- <g:SimplePanel addStyleNames="{style.obrand_headerCenterPanel}" />
+ <g:Image styleName="obrand_dialogHeaderLeftPanel"
url="clear.cache.gif" />
+ <g:FlowPanel
addStyleNames="{style.obrand_dialogHeaderCenterPanel}" >
+ <g:SimplePanel ui:field="logoPanel"
addStyleNames="{style.logoPanel}">
+ <g:Image styleName="obrand_dialogLogoImage"
url="clear.cache.gif" />
+ </g:SimplePanel>
+ <g:FlowPanel addStyleNames="{style.obrand_dialogHeaderTitle}">
+ <g:FlowPanel ui:field="headerTitlePanel">
+ <g:PushButton ui:field="helpIconButton"
addStyleNames="{style.helpIconButton} sdp_helpIconButton_pfly_fix"
visible="false">
+ <g:upFace image='{resources.dialogIconHelp}' />
+ <g:downFace image='{resources.dialogIconHelpDown}'
/>
+ <g:upHoveringFace
image='{resources.dialogIconHelpRollover}' />
+ </g:PushButton>
+ </g:FlowPanel>
+ </g:FlowPanel>
+ </g:FlowPanel>
<g:SimplePanel addStyleNames="{style.headerRightPanel}">
<g:FlowPanel>
- <g:Image styleName='obrand_dialogHeaderImage'
url="clear.cache.gif" />
+ <g:Image styleName='obrand_dialogHeaderRightPanel'
url="clear.cache.gif" />
+ <g:Image
styleName='obrand_dialogHeaderRightPanelDecoration' url="clear.cache.gif" />
<g:PushButton ui:field='closeIconButton'
addStyleNames="{style.closeIconButton} closeIconButton_fix">
<g:upFace image='{resources.dialogIconClose}' />
<g:downFace image='{resources.dialogIconCloseDown}' />
@@ -116,15 +133,6 @@
</g:PushButton>
</g:FlowPanel>
</g:SimplePanel>
- <g:FlowPanel addStyleNames="{style.obrand_headerTitle}">
- <g:FlowPanel ui:field="headerTitlePanel">
- <g:PushButton ui:field="helpIconButton"
addStyleNames="{style.helpIconButton} sdp_helpIconButton_pfly_fix"
visible="false">
- <g:upFace image='{resources.dialogIconHelp}' />
- <g:downFace image='{resources.dialogIconHelpDown}' />
- <g:upHoveringFace
image='{resources.dialogIconHelpRollover}' />
- </g:PushButton>
- </g:FlowPanel>
- </g:FlowPanel>
</g:FlowPanel>
<g:SimplePanel ui:field="contentPanel" addStyleNames="{style.content}
contentPanel_pfly_fix" />
diff --git
a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/guide/GuidePopupView.ui.xml
b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/guide/GuidePopupView.ui.xml
index ca940b2..8a2a6f4 100644
---
a/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/guide/GuidePopupView.ui.xml
+++
b/frontend/webadmin/modules/webadmin/src/main/java/org/ovirt/engine/ui/webadmin/section/main/view/popup/guide/GuidePopupView.ui.xml
@@ -36,6 +36,10 @@
padding-bottom: 15px;
}
+ @external obrand_dialogLogoGuideImageWrapper;
+ .obrand_dialogLogoGuideImageWrapper {
+ }
+
@external obrand_dialogLogoGuideImage;
.obrand_dialogLogoGuideImage {
}
diff --git a/packaging/branding/ovirt.brand/common.css
b/packaging/branding/ovirt.brand/common.css
index 542b891..99cc818 100644
--- a/packaging/branding/ovirt.brand/common.css
+++ b/packaging/branding/ovirt.brand/common.css
@@ -13,54 +13,72 @@
display: block;
}
-
/* SimpleDialogPanel:
These classes allow you to modify the header of all the popup windows
in the user portal and web admin. The border is defined in gwt-common.css */
-.obrand_dialogHeaderImage {
- background-image: url(images/dialog/dialog_header_image.png);
- width: 118px;
- height: 27px;
- border: 0px;
- display: block;
+
+/* left */
+.obrand_dialogHeaderLeftPanel {
+ position: absolute;
+ left: 5px;
+ width: 27px;
+ line-height: 27px;
+ background: url(images/dialog/dialog_header_TL.png);
}
-.obrand_dialogLogoImage {
- background-image: url(images/dialog/blank.png);
+/* center */
+.obrand_dialogHeaderCenterPanel {
+ position: absolute;
+ background: url(images/dialog/dialog_header_background_repetitive.png)
repeat-x;
+ height: 27px;
+ line-height: 27px;
+ width: auto;
+ left: 20px;
+ right: 30px;
+}
+
+.obrand_dialogHeaderTitle {
+ text-align: left;
+ font-size: 14px;
+ font-weight: bold;
+ color: white;
+ position: relative;
+ height: 27px;
+ overflow: hidden;
+ z-index: 2;
+ margin-top: 1px;
+ left: -5px;
+}
+
+/* right */
+.obrand_dialogHeaderRightPanel {
+ background-image: url(images/dialog/dialog_header_TR.png);
width: 27px;
height: 27px;
border: 0px;
display: block;
}
-.obrand_headerCenterPanel {
- position: absolute;
- background: url(images/dialog_header_background_repetitive.png) repeat-x;
- height: 27px;
- line-height: 27px;
- width: auto;
- left: 32px;
- right: 123px;
+.obrand_dialogHeaderRightPanelDecoration {
+ /* hook for adding a decorative image to the far right of dialog headers.
/*
+ /* currently not used. */
}
-.obrand_headerTitle {
- text-align: left;
- font-size: 14px;
- font-weight: bold;
- color: white;
- margin-left: 14px;
- float: left;
- position: relative;
- margin-top: 1px;
+/* SimpleDialogPanel.ui.xml:
+This class allows you to change the default icon on popup windows.
+Currently no icon for most windows. */
+.obrand_dialogLogoImage {
+ border: 0px;
}
-
/* ErrorPopupView.ui.xml:
This class allows you to change the error icon on the error popup window. */
.obrand_dialogLogoErrorImage {
background: url(images/dialog/error.png);
- width: 27px;
- height: 27px;
+ background-repeat: no-repeat;
+ background-position: 0 5px;
+ width: 16px;
+ height: 14px;
border: 0px;
}
diff --git a/packaging/branding/ovirt.brand/images/dialog/blank.png
b/packaging/branding/ovirt.brand/images/dialog/dialog_header_TL.png
similarity index 100%
rename from packaging/branding/ovirt.brand/images/dialog/blank.png
rename to packaging/branding/ovirt.brand/images/dialog/dialog_header_TL.png
Binary files differ
diff --git a/packaging/branding/ovirt.brand/images/dialog/dialog_header_TR.png
b/packaging/branding/ovirt.brand/images/dialog/dialog_header_TR.png
new file mode 100644
index 0000000..7afc2c4
--- /dev/null
+++ b/packaging/branding/ovirt.brand/images/dialog/dialog_header_TR.png
Binary files differ
diff --git
a/packaging/branding/ovirt.brand/images/dialog_header_background_repetitive.png
b/packaging/branding/ovirt.brand/images/dialog/dialog_header_background_repetitive.png
similarity index 100%
rename from
packaging/branding/ovirt.brand/images/dialog_header_background_repetitive.png
rename to
packaging/branding/ovirt.brand/images/dialog/dialog_header_background_repetitive.png
Binary files differ
diff --git
a/packaging/branding/ovirt.brand/images/dialog/dialog_header_image.png
b/packaging/branding/ovirt.brand/images/dialog/dialog_header_image.png
deleted file mode 100644
index c9751f7..0000000
--- a/packaging/branding/ovirt.brand/images/dialog/dialog_header_image.png
+++ /dev/null
Binary files differ
diff --git a/packaging/branding/ovirt.brand/images/dialog/error.png
b/packaging/branding/ovirt.brand/images/dialog/error.png
index 2e90622..3a10a6e 100644
--- a/packaging/branding/ovirt.brand/images/dialog/error.png
+++ b/packaging/branding/ovirt.brand/images/dialog/error.png
Binary files differ
diff --git a/packaging/branding/ovirt.brand/images/dialog/guide.png
b/packaging/branding/ovirt.brand/images/dialog/guide.png
index aac84d2..09bdeb8 100644
--- a/packaging/branding/ovirt.brand/images/dialog/guide.png
+++ b/packaging/branding/ovirt.brand/images/dialog/guide.png
Binary files differ
diff --git a/packaging/branding/ovirt.brand/ovirt-patternfly-compat.css
b/packaging/branding/ovirt.brand/ovirt-patternfly-compat.css
index 93816f6..a5c76d8 100644
--- a/packaging/branding/ovirt.brand/ovirt-patternfly-compat.css
+++ b/packaging/branding/ovirt.brand/ovirt-patternfly-compat.css
@@ -393,10 +393,6 @@
.epv_closeButton_pfly_fix {
line-height: 12px !important;
}
-.epv_titleLabel_pfly_fix {
- position: relative !important;
- left: 12px !important;
-}
.gpv_flowPanel_pfly_fix {
padding: 4px;
}
diff --git a/packaging/branding/ovirt.brand/web_admin.css
b/packaging/branding/ovirt.brand/web_admin.css
index 28de1ae..0ef6d39 100644
--- a/packaging/branding/ovirt.brand/web_admin.css
+++ b/packaging/branding/ovirt.brand/web_admin.css
@@ -58,9 +58,14 @@
padding-right: 10px;
}
-/* guide me dialogs */
+/* GuidePopupView.ui.xml:
+This class allows you to change the error icon on the guide popup window. */
.obrand_dialogLogoGuideImage {
- background-image: url(images/dialog/guide.png);
- width: 27px;
+ background: url(images/dialog/guide.png);
+ background-repeat: no-repeat;
+ width: 24px;
height: 27px;
+ position: relative;
+ left: -7px;
+ border: 0px;
}
--
To view, visit http://gerrit.ovirt.org/31844
To unsubscribe, visit http://gerrit.ovirt.org/settings
Gerrit-MessageType: newchange
Gerrit-Change-Id: I28ffde8e344b1bedc10310f6eb814a37a7aecefe
Gerrit-PatchSet: 1
Gerrit-Project: ovirt-engine
Gerrit-Branch: ovirt-engine-3.5
Gerrit-Owner: Greg Sheremeta <gsher...@redhat.com>
_______________________________________________
Engine-patches mailing list
Engine-patches@ovirt.org
http://lists.ovirt.org/mailman/listinfo/engine-patches
