From fa87a67ebb9b8868774d8d4ded7c875048fa3c0c Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Thu, 18 Jan 2018 17:22:46 +0800
Subject: [PATCH] feat(torrents): reorganize torrents images

---
 .../torrent-image-list.client.directive.js    |  27 ++++++++--
 .../torrents/client/img/film-strip-black.png  | Bin 0 -> 39747 bytes
 modules/torrents/client/img/film-strip.png    | Bin 0 -> 39747 bytes
 modules/torrents/client/less/torrents.less    |  48 ++++++++++++++++++
 .../views/view-torrent.client.view.html       |   2 +-
 5 files changed, 73 insertions(+), 4 deletions(-)
 create mode 100644 modules/torrents/client/img/film-strip-black.png
 create mode 100644 modules/torrents/client/img/film-strip.png

diff --git a/modules/core/client/directives/torrent-image-list.client.directive.js b/modules/core/client/directives/torrent-image-list.client.directive.js
index 15215366..890fa78b 100644
--- a/modules/core/client/directives/torrent-image-list.client.directive.js
+++ b/modules/core/client/directives/torrent-image-list.client.directive.js
@@ -17,7 +17,7 @@
 
     function link(scope, element, attrs) {
       scope.$watch(attrs.torrentImageList, function (til) {
-        hideImage();
+        organizeImage();
 
         var targetNode = document.getElementById(attrs.torrentImageList);
 
@@ -26,7 +26,7 @@
         var callback = function (mutationsList) {
           for (var mutation of mutationsList) {
             if (mutation.type === 'childList') {
-              hideImage();
+              organizeImage();
             }
           }
         };
@@ -36,9 +36,14 @@
 
         //observer.disconnect();
 
-        function hideImage() {
+        /**
+         * organizeImage
+         */
+        function organizeImage() {
           var imgs = element[0].querySelectorAll('img:not(.emoji)');
           console.log(imgs);
+
+          //remove
           angular.forEach(imgs, function (i) {
             if (i.previousSibling && i.previousSibling.tagName.toUpperCase() === 'BR') {
               i.previousSibling.remove();
@@ -49,6 +54,22 @@
               angular.element(i).remove();
             }
           });
+          //reorganize
+          if (imgs.length > 0) {
+            var imgDiv = angular.element('.torrent-img-list');
+            imgDiv.remove();
+
+            var imgCap = angular.element('<div class="list-caption">{{}}</div>');
+            var imgList = angular.element('<div class="torrent-img-list film-strip"></div>');
+
+            angular.forEach(imgs, function (i) {
+              var item = angular.element(i);
+              item.addClass('img-item');
+              imgList.append(item);
+            });
+
+            element.after(imgList);
+          }
         }
       });
     }
diff --git a/modules/torrents/client/img/film-strip-black.png b/modules/torrents/client/img/film-strip-black.png
new file mode 100644
index 0000000000000000000000000000000000000000..bd4e701e85c602732adcad5170e847c1296a44e6
GIT binary patch
literal 39747
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
Sz2)y~(bGA5vRKRZ#(w~!(qF&;

literal 0
HcmV?d00001

diff --git a/modules/torrents/client/img/film-strip.png b/modules/torrents/client/img/film-strip.png
new file mode 100644
index 0000000000000000000000000000000000000000..a058511c6dd3e862570b8efa75c47878bec70c9c
GIT binary patch
literal 39747
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
LzHp{Q(<<VBjv!sf

literal 0
HcmV?d00001

diff --git a/modules/torrents/client/less/torrents.less b/modules/torrents/client/less/torrents.less
index 7a0c0bd0..321c060f 100644
--- a/modules/torrents/client/less/torrents.less
+++ b/modules/torrents/client/less/torrents.less
@@ -45,4 +45,52 @@
     border-radius: 5px;
     border: solid 1px #efefef;
     padding: 10px;
+}
+
+.torrent-img-list {
+    margin-top: 30px;
+    overflow-x: auto;
+    height: auto;
+    display: inline-flex;
+    width: 100% !important;
+    .img-item {
+        max-height: 160px;
+        cursor: pointer;
+        opacity: 0.8;
+        margin-left: 8px !important;
+        width: auto !important;
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.film-strip {
+    border-top: solid 26px;
+    border-bottom: solid 26px;
+    border-left: none;
+    border-right: none;
+    border-image: url("../img/film-strip-black.png") 42 30;
+    border-image-repeat: repeat;
+    background-color: #2a2a2a;
+    background-color: rgba(0, 0, 0, 0.5);
+    padding-bottom: 1px;
+    &:hover {
+        &::-webkit-scrollbar-track {
+            background-color: darken(@brand-primary, 30%);
+        }
+        &::-webkit-scrollbar-thumb {
+            background-color: @brand-primary;
+        }
+    }
+    &::-webkit-scrollbar {
+        height: 5px;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: #333;
+        background-color: rgba(0, 0, 0, 0.5);
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #444;
+    }
 }
\ No newline at end of file
diff --git a/modules/torrents/client/views/view-torrent.client.view.html b/modules/torrents/client/views/view-torrent.client.view.html
index 67f1c42f..ab4f389e 100644
--- a/modules/torrents/client/views/view-torrent.client.view.html
+++ b/modules/torrents/client/views/view-torrent.client.view.html
@@ -2,7 +2,7 @@
     <div class="backdrop" ng-show="vm.torrentLocalInfo">
         <div class="filter">
             <div class="container">
-                <div class="topone">
+                <div class="topone row">
                     <div class="col-md-3 text-center">
                         <div class="topone-logo" ng-class="{'img-thumbnail center-block torrent-logo': vm.torrentLocalInfo.torrent_type!='music'}">
                             <img torrent-logo="vm.torrentLocalInfo"