From 28f20af9dce742f6ece748c4f6d64da752b01df0 Mon Sep 17 00:00:00 2001
From: OldHawk <taobataoma@gmail.com>
Date: Sun, 16 Jul 2017 16:42:28 +0800
Subject: [PATCH] feat(forums): attach file upload add manual-file-chooser.

---
 modules/core/client/app/trans-string-en.js      |  4 +++-
 modules/core/client/app/trans-string-zh.js      |  4 +++-
 .../mt-markdown-editor.client.directive.js      | 17 ++++++++++++-----
 modules/forums/client/less/forum.less           | 15 +++++++++++++++
 4 files changed, 33 insertions(+), 7 deletions(-)

diff --git a/modules/core/client/app/trans-string-en.js b/modules/core/client/app/trans-string-en.js
index ecf25d02..e3dc78dc 100644
--- a/modules/core/client/app/trans-string-en.js
+++ b/modules/core/client/app/trans-string-en.js
@@ -688,7 +688,9 @@
       TODAY_NEW_COUNT_REPLY: '(Today: <mark class="text-danger">{{reply}}</mark> replies)',
       UPLOAD_ATTACH_SUCCESSFULLY: 'Upload attach file successfully',
       UPLOAD_ATTACH_FAILED: 'Upload attach file failed',
-      ATTACH_UPLOAD_TOOLTIP: 'Attach files by dragging & dropping to here, The picture file will be displayed automatically, Others file can only be downloaded.',
+      ATTACH_UPLOAD_TOOLTIP1: 'Attach files by dragging & dropping or ',
+      ATTACH_UPLOAD_TOOLTIP2: 'select them',
+      ATTACH_UPLOAD_TOOLTIP3: ', The picture file will be displayed automatically, Others file can only be downloaded.',
       ATTACH_UPLOADING: 'Uploading',
       ATTACH_LIST_HEADER: 'Attach files list:',
       ATTACH_FILE_SIZE: 'Size:',
diff --git a/modules/core/client/app/trans-string-zh.js b/modules/core/client/app/trans-string-zh.js
index b22bb00c..ae5da140 100644
--- a/modules/core/client/app/trans-string-zh.js
+++ b/modules/core/client/app/trans-string-zh.js
@@ -688,7 +688,9 @@
       TODAY_NEW_COUNT_REPLY: '(今日: <mark class="text-danger">{{reply}}</mark> 回复)',
       UPLOAD_ATTACH_SUCCESSFULLY: '文件上传成功',
       UPLOAD_ATTACH_FAILED: '文件上传失败',
-      ATTACH_UPLOAD_TOOLTIP: '上传附件请将文件拖到这里面, 图片文件将会被自动显示, 其它类文件只能被下载.',
+      ATTACH_UPLOAD_TOOLTIP1: '上传附件请将文件拖到这里或者',
+      ATTACH_UPLOAD_TOOLTIP2: '选择文件',
+      ATTACH_UPLOAD_TOOLTIP3: ', 图片文件将会被自动显示, 其它类文件只能被下载.',
       ATTACH_UPLOADING: '正在上传',
       ATTACH_LIST_HEADER: '附件清单:',
       ATTACH_FILE_SIZE: '文件大小:',
diff --git a/modules/core/client/directives/mt-markdown-editor.client.directive.js b/modules/core/client/directives/mt-markdown-editor.client.directive.js
index 4380a67b..674821ba 100644
--- a/modules/core/client/directives/mt-markdown-editor.client.directive.js
+++ b/modules/core/client/directives/mt-markdown-editor.client.directive.js
@@ -33,7 +33,7 @@
           scope.uFiles = [];
           scope.uImages = [];
 
-          var eleUploadTip = angular.element('<div class="attach-info" ng-show="!uFile"><div class="attach-upload-tooltip text-long"><span>{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP\' | translate}}</span></div></div>');
+          var eleUploadTip = angular.element('<div class="attach-info" ng-show="!uFile"><div class="attach-upload-tooltip text-long"><span>{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP1\' | translate}}</span><input type="file" class="manual-file-chooser" ng-model="selectedFile" ngf-select="onFileSelected($event);"><span class="btn-link manual-file-chooser-text">{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP2\' | translate}}</span>{{\'FORUMS.ATTACH_UPLOAD_TOOLTIP3\' | translate}}</div></div>');
           var eleUploadBegin = angular.element('<div class="upload-info" ng-show="uFile"><i class="fa fa-cog fa-spin fa-lg fa-fw"></i> <div class="attach-upload-progress" style="width: {{uProgress}}%"></div><div class="attach-upload-filename">{{\'FORUMS.ATTACH_UPLOADING\' | translate}}: {{uFile.name}}</div></div>');
           var eleUploadList = angular.element('<div class="attach-list" ng-show="uFiles.length"><div><ol><li ng-repeat="f in uFiles track by $index">{{f.name}}　<i class="fa fa-times" ng-click="removeAttach($index)"></i></li></ol></div></div>');
 
@@ -49,6 +49,10 @@
             scope.uFiles.splice(idx, 1);
           };
 
+          scope.onFileSelected = function(evt){
+            doUpload(scope.selectedFile);
+          };
+
           $('.md-editor').bind('dragenter', function (evt) {
             evt.stopPropagation();
             evt.preventDefault();
@@ -62,8 +66,13 @@
             evt.stopPropagation();
             evt.preventDefault();
 
+            doUpload(evt.originalEvent.dataTransfer.files[0]);
+            return false;
+          });
+
+          function doUpload(sFile){
             if (attrs.uploadMethod) {
-              scope.uFile = evt.originalEvent.dataTransfer.files[0];
+              scope.uFile = sFile;
               scope.uProgress = 0;
 
               scope.$eval(attrs.uploadMethod, {
@@ -99,9 +108,7 @@
                 }
               });
             }
-            return false;
-          });
-
+          }
           $compile($('.md-editor').contents())(scope);
         }
       });
diff --git a/modules/forums/client/less/forum.less b/modules/forums/client/less/forum.less
index cb016f42..9fa11632 100644
--- a/modules/forums/client/less/forum.less
+++ b/modules/forums/client/less/forum.less
@@ -508,6 +508,21 @@
         .attach-upload-tooltip {
             margin: 8px;
         }
+        .manual-file-chooser {
+            position: absolute;
+            width: 240px;
+            padding: 5px;
+            margin-left: 200px;
+            margin-top: -23px;
+            cursor: pointer;
+            opacity: 0.00001;
+        }
+        .manual-file-chooser-text {
+            cursor: pointer;
+            &:hover {
+                color: @mt-base-color;
+            }
+        }
     }
     .attach-list {
         color: #666;