From cdb9683a1c6e98abb2b54858d33df7d7fdc73626 Mon Sep 17 00:00:00 2001
From: ElenaMetelitsa <ami96@list.ru>
Date: Thu, 9 Jul 2015 14:28:51 +0300
Subject: [PATCH] Finally! PopUp preview window

---
 media/css/load.css                            |  33 ++++++++++++------
 media/js/supportDialog.js                     |  29 ++++++++++++---
 .../application/views/popup/support.twig      |   7 +++-
 ~dev_rating/static/img/close-img.png          | Bin 0 -> 277 bytes
 4 files changed, 53 insertions(+), 16 deletions(-)
 create mode 100644 ~dev_rating/static/img/close-img.png

diff --git a/media/css/load.css b/media/css/load.css
index ea5d768f4..2f02cbac7 100644
--- a/media/css/load.css
+++ b/media/css/load.css
@@ -7,7 +7,7 @@
     height: 37px;
     margin: 0;
     padding: 0;
-    border: 0;
+    border: none;
     background-image: url("../img/load.png");
     text-indent: -1000em;
     background-position: center;
@@ -19,24 +19,34 @@
     pointer-events: none;
     visibility: hidden;
 }
-.imagePreviewContainer{
-    overflow: hidden;
-    float: left;
-    width: 100px;
-    height: 100px;
-    border: 5px solid #FFFFFF;
-}
 
 .button-delete {
-    width: 37px;
-    height: 37px;
-    background-image: url("../img/cancel.png");
+    width: 10px;
+    height: 10px;
+    float: left;
+    margin-left: 5px;
+    background-image: url("../img/close.png");
     background-color: #ffffff;
     background-position: center;
     background-repeat: no-repeat;
     cursor: pointer;
 }
+.imagePreviewContainer{
+    /*overflow: hidden;
+    float: left;
+    width: 100px;
+    height: 100px;*/
+    border: 5px solid #FFFFFF;
+    display:none;
+    position:absolute;
+}
 
+.messagePrev{
+    margin-top: -5px;
+    margin-left: 5px;
+    float: left;
+    cursor:pointer;
+}
 .loading {
     background-image: url("../img/loading.gif");
     pointer-events: none;
@@ -54,4 +64,5 @@
     pointer-events: none;
 }
 
+
 /*url(‘http://i.imgur.com/8BgaE65.png’) no-repeat center top;*/
diff --git a/media/js/supportDialog.js b/media/js/supportDialog.js
index 3a4e821b8..39f37f6dc 100644
--- a/media/js/supportDialog.js
+++ b/media/js/supportDialog.js
@@ -12,18 +12,39 @@ $(function () {
         if (this.isInit) {
             return;
         }
+        $('#messagePrev').hover(
+            function(){
+                $('#imagePreviewContainer').css({'display': 'block'}).stop().animate({bottom: 75, left: 20 ,opacity: 1},300);
+                console.log("on");},
+            function(){
+                console.log("out");
+                $('#imagePreviewContainer').stop().animate({bottom: '80px',left: 20,opacity: 0}, 200,
+                    function(){
+                        $('.imagePreviewContainer').css({'display': 'none'});
+                    });
+            }
+
+        );
         $("#hiddenframe").load(function () {
             var data = this.contentWindow.document.body.innerHTML;
             console.log(data);
             data = $.parseJSON(data);
             if (data.success === true) {
                 requestID = data.requestID;
-                $('#imageFile').addClass("successful-load");
+                $('#imageFile').hide();
                 $('#button-delete').removeClass("button-delete-none");
                 $('#button-delete').addClass("button-delete");
-                $('#imagePreview').show();
+                $('.Preview').show();
                 $('#imagePreview').attr('src', data.previewBase64);
 
+                /*$('#Preview').mouseenter(function(){
+                    $('#imagePreviewContainer').fadeIn("slow");
+                });
+
+                $('#Preview').mouseleave(function(){
+                    $('#imagePreviewContainer').fadeOut("slow");
+                });*/
+
             }
             else {
                 EventInspector_ShowMsg(data.error, 'error');
@@ -36,7 +57,6 @@ $(function () {
             }
 
 
-
         });
         $('#imageFile').change(function () {
             document.forms["loadPicture"].submit();
@@ -49,7 +69,8 @@ $(function () {
             $("#imageFile").removeClass("successful-load loading");
             requestID = NULLrequestID;
             $('#imagePreview').removeAttr('src');
-            $('#imagePreview').hide();
+            $('.Preview').hide();
+            $('#imageFile').show();
 
         });
         this.isInit = true;
diff --git a/~dev_rating/application/views/popup/support.twig b/~dev_rating/application/views/popup/support.twig
index 0843b3cb6..06c52baf5 100644
--- a/~dev_rating/application/views/popup/support.twig
+++ b/~dev_rating/application/views/popup/support.twig
@@ -25,7 +25,12 @@
     </form>
 
     <iframe id="hiddenframe" name="hiddenframe" style="width:0px; height:0px; border:0px"></iframe>
-    <div class="imagePreviewContainer"><img id="imagePreview"  ></div>
+
+    <div class="Preview" style="display:none;">
+        <a href='#' class="messagePrev" id="messagePrev">Файл прикреплен</a>
+    <div class="imagePreviewContainer" id="imagePreviewContainer"><img id="imagePreview"></div>
+    </div>
+
     <button id="button-delete" class="button-delete-none"></button>
     <button class="defaultForm BlueButton marginBetween SendButton" id="dialogSendButton" style="float:right; width: 170px">Отправить сообщение</button>
 </div>
diff --git a/~dev_rating/static/img/close-img.png b/~dev_rating/static/img/close-img.png
new file mode 100644
index 0000000000000000000000000000000000000000..220f50c3ba2bc800990002628322a3afc1939741
GIT binary patch
literal 277
zcmeAS@N?(olHy`uVBq!ia0vp^93afW1|*O0@9PFqoCO|{#S9F5M?jcysy3fAP*AMI
zHKHUqKdq!Zu_%?HATcwqL@zJ3M8QPQ!1~44OrVOTo-U3d6}No*eYp-9h_oEv-)(Yp
zDa$S8i1Kx!+;Xa!<+@LvGi^;5xzqh)S=SDU9~H)x`Az%Y3pzP?amHSMt6`LWD8eDz
zHZuEmqJ+c5sX^v!6N}pnpYc41481y0X?kj9m*Khxd+&b=jlIrpC?_)0`1ze*_7^%T
zm$!W1f8hI((4OgQ@-;Ti$#{BX`4W*?OK+sgxCcC0r15O2%6_MWsB^g*M&_5RnIrxM
VF?io)xejzNgQu&X%Q~loCIFz*YQg{j

literal 0
HcmV?d00001

-- 
GitLab