Css is added to the standard bootstrap-modal's style in order to let different modals (with their own styles) to be present in the same page
git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/widgets/image-previewer-widget@126993 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante
parent
eaa167b3bf
commit
c5197ef775
|
|
@ -88,6 +88,10 @@ public class Carousel extends Composite{
|
|||
|
||||
initWidget(uiBinder.createAndBindUi(this));
|
||||
|
||||
// add custom styles to gwt-bootstrap-modal (just once)
|
||||
mainModalPanel.addStyleName("modal-custom");
|
||||
((Element)mainModalPanel.getElement().getChildNodes().getItem(1)).addClassName("modal-body-custom");
|
||||
|
||||
// set vertical alignment
|
||||
commands.setCellVerticalAlignment(nextButton, VerticalPanel.ALIGN_MIDDLE);
|
||||
commands.setCellVerticalAlignment(prevButton, VerticalPanel.ALIGN_MIDDLE);
|
||||
|
|
@ -126,6 +130,12 @@ public class Carousel extends Composite{
|
|||
downloadButton.setHideOn(Device.PHONE);
|
||||
closeButton.setHideOn(Device.PHONE);
|
||||
|
||||
// add some other css style
|
||||
downloadButton.addStyleName("buttons-style");
|
||||
closeButton.addStyleName("buttons-style");
|
||||
downloadButtonSmart.addStyleName("buttons-style");
|
||||
closeButtonSmart.addStyleName("buttons-style");
|
||||
|
||||
//on user click on the image, go on
|
||||
shownImage.addClickHandler(new ClickHandler() {
|
||||
|
||||
|
|
@ -145,6 +155,22 @@ public class Carousel extends Composite{
|
|||
@UiHandler("closeButton")
|
||||
public void hideOnClick(ClickEvent e){
|
||||
|
||||
closeButtonClickHanderBody();
|
||||
|
||||
}
|
||||
|
||||
@UiHandler("closeButtonSmart")
|
||||
public void hideOnClickSmart(ClickEvent e){
|
||||
|
||||
closeButtonClickHanderBody();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Close button click handler body
|
||||
*/
|
||||
private void closeButtonClickHanderBody(){
|
||||
|
||||
mainModalPanel.hide();
|
||||
|
||||
}
|
||||
|
|
@ -156,6 +182,26 @@ public class Carousel extends Composite{
|
|||
*/
|
||||
public void downloadOnClick(ClickEvent e){
|
||||
|
||||
downloadButtonClickHanderBody();
|
||||
|
||||
}
|
||||
|
||||
@UiHandler("downloadButtonSmart")
|
||||
/**
|
||||
* When the user pushes this button, try to download the file.
|
||||
* @param e
|
||||
*/
|
||||
public void downloadOnClickSmart(ClickEvent e){
|
||||
|
||||
downloadButtonClickHanderBody();
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* Download button click handler body
|
||||
*/
|
||||
public void downloadButtonClickHanderBody(){
|
||||
|
||||
String downloadUrl = listOfAttachmentsToShow.get(currentPreviewPosition).getDownloadUrl();
|
||||
|
||||
if(downloadUrl != null){
|
||||
|
|
@ -309,6 +355,8 @@ public class Carousel extends Composite{
|
|||
NodeList<Element> list = mainModalPanel.getElement().getElementsByTagName("h3");
|
||||
list.getItem(0).setTitle(listOfAttachmentsToShow.get(currentPreviewPosition).getTitleToShow());
|
||||
|
||||
// change header style
|
||||
((Element)mainModalPanel.getElement().getChildNodes().getItem(0)).addClassName("modal-header-custom");
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,27 +1,48 @@
|
|||
@media screen and (min-width: 1024px) {
|
||||
.modal {
|
||||
.modal-custom {
|
||||
width: 950px !important;
|
||||
margin-left: -480px !important;
|
||||
}
|
||||
.modal-body {
|
||||
.modal-body-custom {
|
||||
height: 400px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 800px) and (max-width: 1024px) {
|
||||
.modal-body {
|
||||
.modal-body-custom {
|
||||
height: 350px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 300px) and (max-width: 800px) {
|
||||
.modal-body {
|
||||
.modal-body-custom {
|
||||
height: 280px !important;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
min-width: 300px;
|
||||
.modal-custom {
|
||||
min-width: 300px !important;
|
||||
}
|
||||
|
||||
.modal-body-custom {
|
||||
background: black;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.modal-header-custom {
|
||||
background: black;
|
||||
border-bottom: black !important;
|
||||
padding: 5px 5px 5px 5px !important;
|
||||
}
|
||||
|
||||
.modal-header-custom>.close {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.modal-header-custom>h3 {
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.body-container {
|
||||
|
|
@ -81,23 +102,7 @@
|
|||
color: white !important;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
background: black;
|
||||
overflow-y: hidden !important;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
background: black;
|
||||
border-bottom: black !important;
|
||||
padding: 5px 5px 5px 5px !important;
|
||||
}
|
||||
|
||||
.modal-header>.close {
|
||||
color: white !important;
|
||||
}
|
||||
|
||||
.modal-header>h3 {
|
||||
font-size: 15px;
|
||||
color: white;
|
||||
word-wrap: break-word;
|
||||
.buttons-style {
|
||||
padding: 4px 12px 4px 12px !important;
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
|
@ -16,4 +16,7 @@
|
|||
<source path='client' />
|
||||
<source path='shared' />
|
||||
|
||||
<!-- Specify the application specific style sheet. -->
|
||||
<stylesheet src='ImagePreviewer.css' />
|
||||
|
||||
</module>
|
||||
|
|
|
|||
Loading…
Reference in New Issue