Modal that shows user's settings made responsive too

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/notifications@126890 82a268e6-3cf1-43bd-a215-b396298e98cf
Feature/23194
costantino.perciante 8 years ago
parent fd23914193
commit 15e810704a

@ -33,7 +33,6 @@ public class NotificationSettingsDialog extends Modal {
public static final String loading = GWT.getModuleBaseURL() + "../images/feeds-loader.gif";
public static final String mailSentOK = GWT.getModuleBaseURL() + "../images/yes.png";
public static final String mailSentNOK = GWT.getModuleBaseURL() + "../images/warning_blue.png";
public static final int WIDTH = 950;
ArrayList<CategoryWrapper> myCategories = new ArrayList<CategoryWrapper>();
private VerticalPanel placeholder = new VerticalPanel();
@ -44,11 +43,8 @@ public class NotificationSettingsDialog extends Modal {
public NotificationSettingsDialog(LinkedHashMap<String, ArrayList<NotificationPreference>> preferences, final NotificationsServiceAsync notificationService) {
super();
setAnimation(true);
setWidth(WIDTH);
setTitle("Notification Settings");
//this is needed cuz i didnt figure out
placeholder.setWidth(WIDTH+"px");
placeholder.setHorizontalAlignment(HasAlignment.ALIGN_CENTER);
add(placeholder);
@ -58,8 +54,6 @@ public class NotificationSettingsDialog extends Modal {
myCategories.add(cat);
}
save.setType(ButtonType.PRIMARY);
footer.add(save);
footer.add(cancel);

@ -65,7 +65,7 @@ public class NotificationsPanel extends Composite {
private VerticalPanel mainPanel;
private HTML notificationSettings = new HTML("<a style=\"padding-right: 15px;\" class=\"notification-btn\">Notification Settings</a>");
private HTML notificationSettings = new HTML("<a class=\"notification-btn\">Notification Settings</a>");
public NotificationsPanel() {
notificationSettings.setVisible(false);

@ -12,6 +12,7 @@ import org.gcube.portlets.user.notifications.shared.NotificationPreference;
import org.gcube.portlets.widgets.switchbutton.client.SwitchButton;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.uibinder.client.UiBinder;
@ -44,6 +45,8 @@ public class CategoryWrapper extends Composite {
public CategoryWrapper(String catName, ArrayList<NotificationPreference> preferences) {
initWidget(uiBinder.createAndBindUi(this));
categoryLabel.setText(catName);
getElement().getStyle().setMarginTop(10, Unit.PX);
//set the view depending on the model
boolean atLeastOnePreferenceOn = false;

@ -4,24 +4,21 @@
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<div class="day-wrapper">
<e:Span styleName="day-label" ui:field="categoryLabel" />
<div class="floatingRight">
<table>
<tr>
<td>
<b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox>
</td>
<td>
<b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox>
</td>
<td>
<w:SwitchButton ui:field="switchButton" styleName="paddingLeft" />
</td>
</tr>
</table>
</div>
</div>
<b:Row>
<b:Column size="2">
<e:Span styleName="day-label" ui:field="categoryLabel" />
</b:Column>
<b:Column offset="1" size="1">
<b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox>
</b:Column>
<b:Column size="1">
<b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox>
</b:Column>
<b:Column offset="1" size="2">
<w:SwitchButton ui:field="switchButton" />
</b:Column>
</b:Row>
<div class="day-wrapper"></div>
<g:VerticalPanel ui:field="categoryPanel"></g:VerticalPanel>
</g:HTMLPanel>

@ -6,16 +6,16 @@ import java.util.ArrayList;
import org.gcube.portal.databook.shared.NotificationChannelType;
import org.gcube.portal.databook.shared.NotificationType;
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
import org.gcube.portlets.user.notifications.shared.NotificationPreference;
import org.gcube.portlets.widgets.switchbutton.client.SwitchButton;
import com.github.gwtbootstrap.client.ui.CheckBox;
import com.github.gwtbootstrap.client.ui.Paragraph;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.logical.shared.ValueChangeEvent;
import com.google.gwt.event.logical.shared.ValueChangeHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.github.gwtbootstrap.client.ui.CheckBox;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.Widget;
@ -28,8 +28,8 @@ public class NotificationPreferenceView extends Composite {
UiBinder<Widget, NotificationPreferenceView> {
}
@UiField Span prefType;
@UiField Span prefDesc;
@UiField Paragraph prefType;
@UiField Paragraph prefDesc;
@UiField CheckBox portalCheckbox;
@UiField CheckBox emailCheckbox;
@ -41,8 +41,8 @@ public class NotificationPreferenceView extends Composite {
initWidget(uiBinder.createAndBindUi(this));
myPreference = toDisplay;
updateViewValues(toDisplay);
prefType.setHTML(toDisplay.getTypeLabel());
prefDesc.setHTML(toDisplay.getTypeDesc());
prefType.setText(toDisplay.getTypeLabel());
prefDesc.setText(toDisplay.getTypeDesc());
switchButton.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
@Override

@ -4,25 +4,22 @@
xmlns:w="urn:import:org.gcube.portlets.widgets.switchbutton.client"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<g:HTMLPanel>
<table class="single-notification-table">
<tr>
<td valign="TOP" style="width: 200px;" align="left">
<e:Span styleName="user-notification" ui:field="prefType" />
</td>
<td valign="TOP" style="width: 60px;">
<b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox>
</td>
<td valign="TOP" style="width: 60px;">
<b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox>
</td>
<td valign="TOP" style="width: 150px;">
<w:SwitchButton ui:field="switchButton"
styleName="floatingRight paddingRight" />
</td>
<td valign="TOP">
<e:Span styleName="user-notification-comment" ui:field="prefDesc" />
</td>
</tr>
</table>
<b:Row>
<b:Column size="2">
<b:Paragraph styleName="user-notification" ui:field="prefType" > </b:Paragraph>
</b:Column>
<b:Column size="1">
<b:CheckBox ui:field="portalCheckbox">Portal</b:CheckBox>
</b:Column>
<b:Column size="1">
<b:CheckBox ui:field="emailCheckbox">Email</b:CheckBox>
</b:Column>
<b:Column size="2">
<w:SwitchButton ui:field="switchButton" />
</b:Column>
<b:Column size="3">
<b:Paragraph styleName="user-notification-comment" ui:field="prefDesc" ></b:Paragraph>
</b:Column>
</b:Row>
</g:HTMLPanel>
</ui:UiBinder>

@ -5,15 +5,17 @@
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
<g:HTMLPanel ui:field="mainPanel">
<b:Row>
<b:Column size="1">
<b:Image styleName="notification-photo" url=""
ui:field="notificationImage" width="30" height="30" />
</b:Column>
<b:Column size="2">
<b:Image styleName="notification-photo" url=""
ui:field="notificationImage" width="30" height="30" />
<e:Span styleName="user-notification-time" ui:field="timeArea" />
<b:Column size="1">
<e:Span styleName="user-notification-time" ui:field="timeArea" />
</b:Column>
<b:Column size="8">
<e:Span styleName="user-notification" ui:field="notificationText" />
<b:Column size="10">
<e:Span styleName="user-notification-comment" ui:field="notificationText" />
<e:Span styleName="user-notification" ui:field="goApp" />
</b:Column>
</b:Row>

@ -93,7 +93,7 @@ public class NotificationsServiceImpl extends RemoteServiceServlet implements No
*/
public String getDevelopmentUser() {
String user = "test.user";
// user = "massimiliano.assante";
// user = "andrea.rossi";
return user;
}
public UserInfo getUserInfo() {

@ -1,8 +1,8 @@
table {
table {
border-collapse: separate !important;
border-spacing: 0;
}
div.portlet-content {
padding-top: 0px;
}
@ -36,7 +36,7 @@ div.portlet-content {
text-decoration: underline;
}
a.link,a.link:active,a.link:visited {
a.link, a.link:active, a.link:visited {
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif;
font-size: 12px;
@ -57,13 +57,13 @@ a.link:hover {
height: 38px;
}
.day-wrapper {
max-width: 100%;
border-bottom-color: #DADADA;
border-bottom-style: solid;
border-bottom-width: 1px;
padding: 15px 7px 3px;
margin-bottom: 10px;
}
.day-label {
@ -83,12 +83,10 @@ a.link:hover {
border-bottom: 1px solid #EFEFEF;
}
.unread-notification {
background-color: #e8effa;
}
.no-notification-message {
line-height: 40px;
font-family: 'Architects Daughter', arial, sans-serif;
@ -98,7 +96,7 @@ a.link:hover {
.notification-photo {
padding: 2px;
border: none;
margin-left: 5px;
margin-left: 20px;
}
.user-notification-time {
@ -106,7 +104,7 @@ a.link:hover {
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif;
font-size: 12px;
padding: 1px 10px;
padding: 1px;
white-space: nowrap;
}
@ -118,6 +116,7 @@ a.link:hover {
.gwt-CheckBox label {
padding: 5px;
}
.user-notification {
color: #333;
font-family: 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
@ -131,22 +130,24 @@ a.link:hover {
.user-notification-comment {
width: 99%;
color: #666;
font: italic 12px 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial, sans-serif;
font: italic 12px 'Lucida Grande', Verdana, 'Bitstream Vera Sans', Arial,
sans-serif;
border-color: #999;
border-width: 1px;
letter-spacing: normal;
}
.gwt-CheckBox {
margin-right: 0;
padding-right: 0;
margin-right: 0;
padding-right: 0;
}
.floatingLeft {
float:left;
float: left;
}
.floatingRight {
float:right;
float: right;
}
.paddingRight {
@ -160,3 +161,10 @@ a.link:hover {
.displayInline {
display: inline;
}
@media screen and (min-width: 1024px) {
.modal {
width: 950px !important;
margin-left: -480px !important;
}
}
Loading…
Cancel
Save