started making responsive the widget
git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126948 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
parent
081ae35712
commit
e0ded15b43
|
@ -3,5 +3,4 @@ encoding//src/main/java=UTF-8
|
||||||
encoding//src/main/resources=UTF-8
|
encoding//src/main/resources=UTF-8
|
||||||
encoding//src/test/java=UTF-8
|
encoding//src/test/java=UTF-8
|
||||||
encoding//src/test/resources=UTF-8
|
encoding//src/test/resources=UTF-8
|
||||||
encoding//target/generated-sources/gwt=UTF-8
|
|
||||||
encoding/<project>=UTF-8
|
encoding/<project>=UTF-8
|
||||||
|
|
|
@ -21,7 +21,7 @@ public class ImagePreviewer implements EntryPoint {
|
||||||
public void onModuleLoad() {
|
public void onModuleLoad() {
|
||||||
|
|
||||||
// decomment for testing purpose
|
// decomment for testing purpose
|
||||||
// test();
|
test();
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -53,6 +53,8 @@ public class ImagePreviewer implements EntryPoint {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
b.setText("Show preview");
|
b.setText("Show preview");
|
||||||
|
|
||||||
|
c.show();
|
||||||
|
|
||||||
RootPanel.get("image-previewer-div").add(b);
|
RootPanel.get("image-previewer-div").add(b);
|
||||||
}
|
}
|
||||||
|
|
|
@ -13,7 +13,6 @@ import com.github.gwtbootstrap.client.ui.constants.IconType;
|
||||||
import com.google.gwt.core.client.GWT;
|
import com.google.gwt.core.client.GWT;
|
||||||
import com.google.gwt.dom.client.Element;
|
import com.google.gwt.dom.client.Element;
|
||||||
import com.google.gwt.dom.client.NodeList;
|
import com.google.gwt.dom.client.NodeList;
|
||||||
import com.google.gwt.dom.client.Style.Cursor;
|
|
||||||
import com.google.gwt.event.dom.client.ClickEvent;
|
import com.google.gwt.event.dom.client.ClickEvent;
|
||||||
import com.google.gwt.event.dom.client.ClickHandler;
|
import com.google.gwt.event.dom.client.ClickHandler;
|
||||||
import com.google.gwt.event.dom.client.LoadEvent;
|
import com.google.gwt.event.dom.client.LoadEvent;
|
||||||
|
@ -23,8 +22,6 @@ import com.google.gwt.uibinder.client.UiField;
|
||||||
import com.google.gwt.uibinder.client.UiHandler;
|
import com.google.gwt.uibinder.client.UiHandler;
|
||||||
import com.google.gwt.user.client.Window;
|
import com.google.gwt.user.client.Window;
|
||||||
import com.google.gwt.user.client.ui.Composite;
|
import com.google.gwt.user.client.ui.Composite;
|
||||||
import com.google.gwt.user.client.ui.HorizontalPanel;
|
|
||||||
import com.google.gwt.user.client.ui.VerticalPanel;
|
|
||||||
import com.google.gwt.user.client.ui.Widget;
|
import com.google.gwt.user.client.ui.Widget;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
@ -62,9 +59,6 @@ public class Carousel extends Composite{
|
||||||
@UiField
|
@UiField
|
||||||
Image loadingImage;
|
Image loadingImage;
|
||||||
|
|
||||||
@UiField
|
|
||||||
HorizontalPanel horizontaFooterPanel;
|
|
||||||
|
|
||||||
// list of enhanced images to show
|
// list of enhanced images to show
|
||||||
private List<EnhancedImage> listOfAttachmentsToShow;
|
private List<EnhancedImage> listOfAttachmentsToShow;
|
||||||
|
|
||||||
|
@ -81,23 +75,11 @@ public class Carousel extends Composite{
|
||||||
public Carousel() {
|
public Carousel() {
|
||||||
|
|
||||||
initWidget(uiBinder.createAndBindUi(this));
|
initWidget(uiBinder.createAndBindUi(this));
|
||||||
|
|
||||||
// set alignment of the horizontal panel's children
|
|
||||||
horizontaFooterPanel.setCellHorizontalAlignment(closeButton, HorizontalPanel.ALIGN_CENTER);
|
|
||||||
horizontaFooterPanel.setCellHorizontalAlignment(downloadButton, HorizontalPanel.ALIGN_CENTER);
|
|
||||||
horizontaFooterPanel.setCellHorizontalAlignment(prevButton, HorizontalPanel.ALIGN_LEFT);
|
|
||||||
horizontaFooterPanel.setCellHorizontalAlignment(nextButton, HorizontalPanel.ALIGN_RIGHT);
|
|
||||||
|
|
||||||
// set central buttons' cell widths to be equal as well as their widths
|
|
||||||
horizontaFooterPanel.setCellWidth(downloadButton, "200px");
|
|
||||||
horizontaFooterPanel.setCellWidth(closeButton, "200px");
|
|
||||||
downloadButton.setWidth("140px");
|
|
||||||
closeButton.setWidth("140px");
|
|
||||||
|
|
||||||
// set vertical alignment
|
// set buttons width
|
||||||
horizontaFooterPanel.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
|
closeButton.setWidth("100px");
|
||||||
horizontaFooterPanel.setCellVerticalAlignment(prevButton, VerticalPanel.ALIGN_MIDDLE);
|
downloadButton.setWidth("100px");
|
||||||
|
|
||||||
// set icons
|
// set icons
|
||||||
downloadButton.setIcon(IconType.DOWNLOAD);
|
downloadButton.setIcon(IconType.DOWNLOAD);
|
||||||
closeButton.setIcon(IconType.COLLAPSE);
|
closeButton.setIcon(IconType.COLLAPSE);
|
||||||
|
@ -107,7 +89,7 @@ public class Carousel extends Composite{
|
||||||
// set icons'size
|
// set icons'size
|
||||||
prevButton.setIconSize(IconSize.LARGE);
|
prevButton.setIconSize(IconSize.LARGE);
|
||||||
nextButton.setIconSize(IconSize.LARGE);
|
nextButton.setIconSize(IconSize.LARGE);
|
||||||
|
|
||||||
//on user click on the image, go on
|
//on user click on the image, go on
|
||||||
shownImage.addClickHandler(new ClickHandler() {
|
shownImage.addClickHandler(new ClickHandler() {
|
||||||
|
|
||||||
|
@ -122,9 +104,6 @@ public class Carousel extends Composite{
|
||||||
|
|
||||||
// set url of the loading image
|
// set url of the loading image
|
||||||
loadingImage.setResource(resources.loadingImage());
|
loadingImage.setResource(resources.loadingImage());
|
||||||
|
|
||||||
// set shownImage mouse icon to pointer
|
|
||||||
shownImage.getElement().getStyle().setCursor(Cursor.POINTER);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
@UiHandler("closeButton")
|
@UiHandler("closeButton")
|
||||||
|
|
|
@ -1,110 +1,35 @@
|
||||||
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
|
||||||
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
|
||||||
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
|
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
|
||||||
<ui:style>
|
|
||||||
.image {
|
|
||||||
margin: 0;
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-right: -50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
-ms-transform: translate(-50%, -50%); /* IE 9 */
|
|
||||||
-webkit-transform: translate(-50%, -50%); /* Safari */
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.image-loading {
|
|
||||||
position: relative;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
margin-right: -50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
}
|
|
||||||
|
|
||||||
.arrow {
|
|
||||||
color: #3B5998;
|
|
||||||
}
|
|
||||||
|
|
||||||
@external .modal;
|
|
||||||
.modal {
|
|
||||||
position: fixed;
|
|
||||||
top: 10%;
|
|
||||||
left: 15%;
|
|
||||||
margin-left: -5%;
|
|
||||||
width: 80%;
|
|
||||||
height: 80%;
|
|
||||||
min-width: 450px;
|
|
||||||
min-height: 400px;
|
|
||||||
background-color: #fff;
|
|
||||||
border: 1px solid #999;
|
|
||||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
|
||||||
-webkit-border-radius: 6px;
|
|
||||||
-moz-border-radius: 6px;
|
|
||||||
border-radius: 6px;
|
|
||||||
outline: 0;
|
|
||||||
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
||||||
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
||||||
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
|
|
||||||
-webkit-background-clip: padding-box;
|
|
||||||
-moz-background-clip: padding-box;
|
|
||||||
background-clip: padding-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
@external .modal-header;
|
|
||||||
.modal-header {
|
|
||||||
font-family: "Helvetica Neue", Arial, sans-serif;
|
|
||||||
height: 5%;
|
|
||||||
color: #3B5998 !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modal-header>h3 {
|
|
||||||
font-size: 15px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@external .modal-body;
|
|
||||||
.modal-body {
|
|
||||||
position: relative;
|
|
||||||
height: 90%;
|
|
||||||
max-height: 100%;
|
|
||||||
max-width: 100%;
|
|
||||||
padding: 0;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
@external .modal-footer;
|
|
||||||
.modal-footer {
|
|
||||||
padding: 10px 10px 10px;
|
|
||||||
margin-bottom: 0px;
|
|
||||||
height: 5%;
|
|
||||||
background-color: #F5F5F5;
|
|
||||||
border-top: 1px solid #DDD;
|
|
||||||
border-radius: 0px 0px 6px 6px;
|
|
||||||
box-shadow: 0px 1px 0px #FFF inset;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
|
|
||||||
.style-horizontal-panel {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
</ui:style>
|
|
||||||
<g:HTMLPanel>
|
<g:HTMLPanel>
|
||||||
<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
|
<b:Modal ui:field="mainModalPanel" backdrop="NORMAL" keyboard="true"
|
||||||
closeVisible="true" animation="true" dynamicSafe="true">
|
closeVisible="true" animation="true" dynamicSafe="true">
|
||||||
<b:Image styleName="{style.image-loading}" ui:field="loadingImage"></b:Image>
|
|
||||||
<b:Image styleName="{style.image}" ui:field="shownImage"></b:Image>
|
<g:HTMLPanel styleName="body-container">
|
||||||
<b:ModalFooter>
|
|
||||||
<g:HorizontalPanel styleName="{style.style-horizontal-panel}"
|
<g:HTMLPanel styleName="image-container">
|
||||||
ui:field="horizontaFooterPanel">
|
<b:Image styleName="image-loading" ui:field="loadingImage"></b:Image>
|
||||||
<b:Button title="Previous" ui:field="prevButton"
|
<b:Image styleName="shown-image" ui:field="shownImage"></b:Image>
|
||||||
styleName="{style.arrow}"></b:Button>
|
</g:HTMLPanel>
|
||||||
<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
|
|
||||||
<b:Button title="Close" ui:field="closeButton">Close</b:Button>
|
<g:HTMLPanel styleName="command-container">
|
||||||
<b:Button title="Next" ui:field="nextButton" styleName="{style.arrow}"></b:Button>
|
<b:Row>
|
||||||
</g:HorizontalPanel>
|
<b:Column size="1">
|
||||||
</b:ModalFooter>
|
<b:Button title="Previous" ui:field="prevButton"
|
||||||
|
styleName="arrow"></b:Button>
|
||||||
|
</b:Column>
|
||||||
|
<b:Column offset="2" size="1">
|
||||||
|
<b:Button title="Download" ui:field="downloadButton">Download</b:Button>
|
||||||
|
</b:Column>
|
||||||
|
<b:Column offset="1" size="1">
|
||||||
|
<b:Button title="Close" ui:field="closeButton">Close</b:Button>
|
||||||
|
</b:Column>
|
||||||
|
<b:Column offset="2" size="1">
|
||||||
|
<b:Button title="Next" ui:field="nextButton" styleName="arrow"></b:Button>
|
||||||
|
</b:Column>
|
||||||
|
</b:Row>
|
||||||
|
</g:HTMLPanel>
|
||||||
|
</g:HTMLPanel>
|
||||||
</b:Modal>
|
</b:Modal>
|
||||||
</g:HTMLPanel>
|
</g:HTMLPanel>
|
||||||
</ui:UiBinder>
|
</ui:UiBinder>
|
|
@ -1,15 +1,19 @@
|
||||||
<?xml version="1.0" encoding="UTF-8"?>
|
<?xml version="1.0" encoding="UTF-8"?>
|
||||||
<module rename-to='ImagePreviewer'>
|
<module rename-to='ImagePreviewer'>
|
||||||
<!-- Inherit the core Web Toolkit stuff. -->
|
<!-- Inherit the core Web Toolkit stuff. -->
|
||||||
<inherits name='com.google.gwt.user.User' />
|
<inherits name='com.google.gwt.user.User' />
|
||||||
<!-- Other module inherits -->
|
<!-- Other module inherits -->
|
||||||
<inherits name="com.github.gwtbootstrap.Bootstrap" />
|
<inherits name="com.github.gwtbootstrap.Bootstrap" />
|
||||||
|
|
||||||
<!-- Specify the app entry point class. -->
|
<!-- Specify the app entry point class. -->
|
||||||
<entry-point class='org.gcube.portlets.widgets.imagepreviewerwidget.client.ImagePreviewer' />
|
<entry-point
|
||||||
|
class='org.gcube.portlets.widgets.imagepreviewerwidget.client.ImagePreviewer' />
|
||||||
|
|
||||||
<!-- Specify the paths for translatable code -->
|
<!-- Responsive design -->
|
||||||
<source path='client' />
|
<set-property name="bootstrap.responsiveDesign" value="true" />
|
||||||
<source path='shared' />
|
|
||||||
|
<!-- Specify the paths for translatable code -->
|
||||||
|
<source path='client' />
|
||||||
|
<source path='shared' />
|
||||||
|
|
||||||
</module>
|
</module>
|
||||||
|
|
|
@ -0,0 +1,89 @@
|
||||||
|
@media screen and (min-width: 1024px) {
|
||||||
|
.modal {
|
||||||
|
width: 950px !important;
|
||||||
|
margin-left: -480px !important;
|
||||||
|
}
|
||||||
|
.modal-body {
|
||||||
|
height: 400px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 800px) and (max-width: 1024px) {
|
||||||
|
.modal-body {
|
||||||
|
height: 350px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: 200px) and (max-width: 800px) {
|
||||||
|
.modal-body {
|
||||||
|
height: 280px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-container {
|
||||||
|
height: 100% !important;
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-container {
|
||||||
|
height: 90%;
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.command-container {
|
||||||
|
height: 5%;
|
||||||
|
width: 100%;
|
||||||
|
vertical-align: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shown-image {
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
-ms-transform: translate(-50%, -50%); /* IE 9 */
|
||||||
|
-webkit-transform: translate(-50%, -50%); /* Safari */
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.image-loading {
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
margin-right: -50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
-ms-transform: translate(-50%, -50%); /* IE 9 */
|
||||||
|
-webkit-transform: translate(-50%, -50%); /* Safari */
|
||||||
|
max-height: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
width: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-body {
|
||||||
|
background: black;
|
||||||
|
overflow-y: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header {
|
||||||
|
background: black;
|
||||||
|
border-bottom: black !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header>.close {
|
||||||
|
color: white !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.modal-header>h3 {
|
||||||
|
font-size: 15px;
|
||||||
|
color: white;
|
||||||
|
}
|
Loading…
Reference in New Issue