Fix attachments #RB-413 #RB-414 #RB-416

app/elements/file-gallery/file-gallery.html

@@ -7,29 +7,34 @@
                 width: 100%;
             }
 
-            .imgView {
-                width: 100%;
-                margin: 0 auto;
-            }
         </style>
 
-        <div>
+        <!--SHOW IMAGE THUMBNAILS; AT THE MOMENT THE SAME URL AS IMAGES; ADDED DYNAMICALLY-->
+        <div id="icons"></div>
+
+        <!--SHOW IMAGES IN THE LIST VIEW-->
+        <iron-collapse id="collapseImg" hidden$="[[grid]]">
+            <img id="expandedImg">
+        </iron-collapse>
+
+        <!--LOAD ALL IMAGES AT ONCE IN GRID VIEW AND SHOW THEM IN PAPER-DIALOG ON CLICK - DOM-IF USED DO MAKE THE LOAD ONLY ON GRID VIEW-->
+        <template is="dom-if" if="[[grid]]">
             <template is="dom-repeat" items="{{attachments}}">
-                <img style="width:50px; height:50px;" src="[[item.fileUrl]]" on-tap="toggle" att="[[item.title]]">
+                <iron-image
+                        class="imgIcons"
+                        src="[[item.fileUrl]]"
+                        att="[[item.title]]"
+                        sizing="cover"
+                        preload="true"
+                        placeholder="../../images/loading.svg"
+                        on-tap="toggle"></iron-image>
             </template>
-        </div>
 
-        <template is="dom-if" if="{{!grid}}">
-            <iron-collapse id="collapseImg">
-                <img id="expandedImg" on-tap="toggle">
-            </iron-collapse>
-        </template>
-
-        <template is="dom-if" if="{{grid}}">
-            <paper-dialog id="imgPopup" with-backdrop entry-animation="fade-in-animation" exit-animation="fade-out-animation">
+            <!--SHOW CLICKED IMAGE IN DIALOG WINDOW-->
+            <paper-dialog id="imgPopupDialog" with-backdrop entry-animation="fade-in-animation" exit-animation="fade-out-animation">
                 <h2 id="imgTitle"></h2>
                 <div>
-                    <img id="popupImg"class="imgView">
+                    <img id="popupImg" height="500">
                 </div>
             </paper-dialog>
         </template>
@@ -38,39 +43,93 @@ <h2 id="imgTitle"></h2>
 
     <script>
         (function () {
-//            'use strict';
 
             Polymer({
                 is: 'file-gallery',
                 properties: {
+                    /** Attachments array passed as parameter from requirements-list */
                     attachments: {
                         type: Array,
                         notify: true
                     },
+                    /** Prepares to show images into popups or dialogs. True for grid view, else false. */
                     grid: {
                         type: Boolean,
                         value: false,
                         notify: true
                     }
                 },
 
+                /**
+                 * Toggles the collapse menu to show the full image or opens the dialog.
+                 * Triggered by clicking on an image icon.
+                 *
+                 * @param e - click event on image icon
+                 */
                 toggle: function(e){
-                    if (this.grid){
-                        document.getElementById("popupImg").src = e.currentTarget.src;
-                        document.getElementById("imgTitle").innerHTML = e.currentTarget.att;
-                        document.getElementById("imgPopup").open();
-                    } else {
-                        if (!document.getElementById("collapseImg").opened){
-                            document.getElementById("expandedImg").src = e.currentTarget.src;
-                            document.getElementById("collapseImg").show();
+                    // loads the target for different browser types
+                    var target = e.target || e.srcElement;
+                    // saves that clicked image url
+                    var clickedImgUrl = target.style.backgroundImage.slice(5, -2) || target.src;
+                    if (clickedImgUrl !== "../../images/loading.svg" && clickedImgUrl) {
+                        // work on click only if the images are clicked and not the load image
+                        if (this.grid){
+                            // Show dialog with image content if grid view.
+                            this.$$('#popupImg').src = clickedImgUrl;
+                            this.$$('#imgPopupDialog').open();
                         } else {
-                            if (document.getElementById("expandedImg").src === e.currentTarget.src){
-                                document.getElementById("collapseImg").toggle();
+                            if (!this.$.collapseImg.opened) {
+                                // Open the collapse and display the full image.
+                                this.$.expandedImg.src = clickedImgUrl;
+                                this.$.collapseImg.show();
                             } else {
-                                document.getElementById("expandedImg").src = e.currentTarget.src;
+                                // Toggle the collapse if the same image clicked like before or change to new image content
+                                if (this.$.expandedImg.src === clickedImgUrl){
+                                    this.$.collapseImg.toggle();
+                                } else {
+                                    this.$.expandedImg.src = clickedImgUrl;
+                                }
                             }
                         }
                     }
+
+                },
+
+                /**
+                 * Loads the icons and adds the image elements to the DOM.
+                 * Uses iron-image polymer element for showing also feedback.
+                 */
+                loadIcons: function() {
+                    var iconsPlaceholder = Polymer.dom(this.$.icons);
+                    // Remove the old icons, in case a new image is added. Atm not applicable because requirements images
+                    // can't yet be edited.
+                    this.removeIcons(iconsPlaceholder);
+
+                    for (var i = 0; i < this.attachments.length; i++) {
+                        var imgNode = document.createElement("iron-image");
+                        Polymer.dom(imgNode).setAttribute("class", "imgIcons");
+                        Polymer.dom(imgNode).setAttribute("sizing", "cover");
+                        Polymer.dom(imgNode).setAttribute("preload", "true");
+                        Polymer.dom(imgNode).setAttribute("placeholder", "../../images/loading.svg");
+                        Polymer.dom(imgNode).setAttribute("src", this.attachments[i].fileUrl);
+                        Polymer.dom(imgNode).setAttribute("att", this.attachments[i].title);
+                        this.addEventListener("tap", this.toggle);
+                        iconsPlaceholder.appendChild(imgNode);
+                        Polymer.dom.flush();
+                    }
+                },
+
+                /**
+                 * Removes child elements of the element given from the DOM. Used to avoid duplication of icons
+                 * everytime they are loaded. In the future can be used to update icons when a new image is added
+                 * to the requirement.
+                 *
+                 * @param parentNode - DOM element
+                 */
+                removeIcons: function(parentNode) {
+                    while (parentNode.firstChild) {
+                        parentNode.removeChild(parentNode.firstChild);
+                    }
                 }
 
             });

app/elements/requirements-list/requirements-list.html

@@ -677,9 +677,11 @@ <h4 style="margin:0px;padding:10px 0px 10px 0px;"><i18n-msg msgid="comments"></i
             }
             if (!contentNode.opened) {
               // since we are about to open it, trigger loading the comments
-              data.parentNode.querySelector('comments-list').load();
+              data.parentNode.querySelector("comments-list").load();
+              // and load the images
+              data.parentNode.querySelector("file-gallery").loadIcons();
             } else {
-              page.redirect('/projects/' + app.params.projectId + "/components/" + app.params.componentId);
+              page.redirect("/projects/" + app.params.projectId + "/components/" + app.params.componentId);
             }
             contentNode.toggle();
           }

app/index.html

@@ -622,7 +622,7 @@ <h2><i18n-msg msgid="createRequirement"></i18n-msg></h2>
                                         method="POST"
                                         timeout="300000"
                                         files="{{files}}"
-                                        max-file-size="10000000"
+                                        max-file-size="1000000"
                                         accept="image/*">
                                 </vaadin-upload>
 

app/styles/main.css

@@ -96,6 +96,11 @@ paper-icon-button {
     text-overflow: ellipsis;
 }
 
+.imgIcons {
+    width:50px;
+    height:50px;
+}
+
 .editFormComp{
     display: none;
 }