For #85 - update look and feel of marker images preview panel

vitalidze · May 26, 2015 · f101e7f · f101e7f
1 parent 2dd88db
commit f101e7f
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 32 deletions.
diff --git a/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.java b/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.java
@@ -29,6 +29,7 @@
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.uibinder.client.UiHandler;
 import com.google.gwt.user.client.rpc.AsyncCallback;
+import com.google.gwt.user.client.ui.HTML;
 import com.google.gwt.user.client.ui.Image;
 import com.google.gwt.user.client.ui.Widget;
 import com.sencha.gxt.cell.core.client.SimpleSafeHtmlCell;
@@ -93,6 +94,9 @@ interface MarkerListItemTemplate extends XTemplates {
 
         @XTemplates.XTemplate("<div class='{style.thumb}' style='background: url(\"{marker.offlineURL}\") no-repeat center center;'></div>")
         SafeHtml listCell(Style style, Marker marker);
+
+        @XTemplates.XTemplate("<div class='{style.thumbWrap}' style='background: #ffffff;'><span class=\"x-editable\">{text}</span><div class='{style.thumb}' style='background: url(\"{pictureURL}\") no-repeat center center;'></div></div>")
+        SafeHtml pictureView(Style style, String text, String pictureURL);
     }
 
     public interface DeviceMarkerHandler {
@@ -118,13 +122,13 @@ public interface DeviceMarkerHandler {
     VerticalLayoutContainer panelImages;
 
     @UiField
-    Image defaultImage;
+    HTML defaultImage;
 
     @UiField
-    Image selectedImage;
+    HTML selectedImage;
 
     @UiField
-    Image offlineImage;
+    HTML offlineImage;
 
     @UiField
     FormPanel form;
@@ -250,6 +254,9 @@ public void load(Object loadConfig, AsyncCallback<List<Marker>> callback) {
 
     final ListStore<Marker> store;
 
+    final Resources resources = GWT.create(Resources.class);
+    final MarkerListItemTemplate renderer = GWT.create(MarkerListItemTemplate.class);
+
     public DeviceMarkersDialog(final DeviceIconType selectedIcon, DeviceMarkerHandler handler) {
         this.handler = handler;
 
@@ -260,13 +267,9 @@ public String getKey(Marker item) {
             }
         };
 
-        final Resources resources = GWT.create(Resources.class);
         resources.css().ensureInjected();
-
         final Style style = resources.css();
 
-        final MarkerListItemTemplate renderer = GWT.create(MarkerListItemTemplate.class);
-
         ListViewCustomAppearance<Marker> appearance = new ListViewCustomAppearance<Marker>("." + style.thumbWrap(), style.over(), style.select()) {
             @Override
             public void renderEnd(SafeHtmlBuilder builder) {
@@ -304,7 +307,7 @@ public void onSelection(SelectionEvent<Marker> event) {
             }
         });
 
-        eastData = new BorderLayoutContainer.BorderLayoutData(85);
+        eastData = new BorderLayoutContainer.BorderLayoutData(100);
         eastData.setSplit(false);
         eastData.setMargins(new Margins(5, 0, 0, 0));
 
@@ -364,13 +367,13 @@ public void onUploadClicked(SelectEvent event) {
     private void updateImages() {
         Marker marker = view.getSelectionModel().getSelectedItem();
         if (marker == null) {
-            defaultImage.setUrl("");
-            selectedImage.setUrl("");
-            offlineImage.setUrl("");
+            defaultImage.setHTML("");
+            selectedImage.setHTML("");
+            offlineImage.setHTML("");
         } else {
-            defaultImage.setUrl(marker.getDefaultURL());
-            selectedImage.setUrl(marker.getSelectedURL());
-            offlineImage.setUrl(marker.getOfflineURL());
+            defaultImage.setHTML(renderer.pictureView(resources.css(), i18n.defaultIcon(), marker.getDefaultURL()));
+            selectedImage.setHTML(renderer.pictureView(resources.css(), i18n.selectedIcon(), marker.getSelectedURL()));
+            offlineImage.setHTML(renderer.pictureView(resources.css(), i18n.offlineIcon(), marker.getOfflineURL()));
         }
         panelImages.forceLayout();
     }

diff --git a/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.ui.xml b/src/main/java/org/traccar/web/client/view/DeviceMarkersDialog.ui.xml
@@ -11,12 +11,8 @@
     <ui:attributes width="1" height="-1" />
   </ui:with>
 
-  <ui:with type="com.sencha.gxt.core.client.util.Margins" field="imageMargins">
-    <ui:attributes top="5" right="0" bottom="5" left="0" />
-  </ui:with>
-
   <ui:with type="com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData" field="imageLayoutData">
-    <ui:attributes width="-1" height="-1" margins="{imageMargins}" />
+    <ui:attributes width="-1" height="-1" />
   </ui:with>
 
   <ui:with type="com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData" field="horizontalLayoutData">
@@ -29,30 +25,21 @@
 
   <ui:with field='i18n' type='org.traccar.web.client.i18n.Messages' />
 
-  <gxt:Window ui:field="window" pixelSize="386, 310" modal="true" headingText="{i18n.markers}" focusWidget="{saveButton}">
+  <gxt:Window ui:field="window" pixelSize="494, 340" modal="true" headingText="{i18n.markers}" focusWidget="{saveButton}">
     <container:BorderLayoutContainer ui:field="con" borders="true">
       <container:center layoutData="{centerData}">
         <gxt:ListView ui:field="view"/>
       </container:center>
       <container:east layoutData="{eastData}">
         <container:VerticalLayoutContainer ui:field="panelImages">
             <container:child layoutData="{verticalLayoutData}">
-                <g:Label text="{i18n.defaultIcon}" />
+                <g:HTML ui:field="defaultImage" />
             </container:child>
             <container:child layoutData="{imageLayoutData}">
-                <g:Image ui:field="defaultImage" />
-            </container:child>
-            <container:child layoutData="{verticalLayoutData}">
-                <g:Label text="{i18n.selectedIcon}" />
-            </container:child>
-            <container:child layoutData="{imageLayoutData}">
-                <g:Image ui:field="selectedImage" />
-            </container:child>
-            <container:child layoutData="{verticalLayoutData}">
-                <g:Label text="{i18n.offlineIcon}"/>
+                <g:HTML ui:field="selectedImage" />
             </container:child>
             <container:child layoutData="{imageLayoutData}">
-                <g:Image ui:field="offlineImage" />
+                <g:HTML ui:field="offlineImage" />
             </container:child>
         </container:VerticalLayoutContainer>
       </container:east>

diff --git a/src/main/resources/org/traccar/web/client/view/PicturesListView.css b/src/main/resources/org/traccar/web/client/view/PicturesListView.css
@@ -13,6 +13,12 @@
     font: 11px Arial, Helvetica, sans-serif;
 }
 
+.thumbWrap span {
+    display: block;
+    overflow: hidden;
+    text-align: center;
+}
+
 .over {
     background: repeat-x scroll left top #EFEFEF;
     border: 1px solid #ddd !important;