Merge branch 'master' of http://10.81.13.221:6990/Web/next-ucap-messenger
This commit is contained in:
leejh
commit
667e5ea5cc
|
|
@ -65,7 +65,7 @@
|
|||
#messageBoxContainer
|
||||
ucapUiFileUploadFor
|
||||
(fileSelected)="onFileSelected($event)"
|
||||
(fileDragEnter)="onFileDragEnter()"
|
||||
(fileDragEnter)="onFileDragEnter($event)"
|
||||
(fileDragOver)="onFileDragOver()"
|
||||
(fileDragLeave)="onFileDragLeave()"
|
||||
>
|
||||
|
|
@ -95,11 +95,6 @@
|
|||
</ucap-chat-messages>
|
||||
</perfect-scrollbar>
|
||||
<!-- CHAT MESSAGES -->
|
||||
</div>
|
||||
<!-- / CHAT CONTENT -->
|
||||
|
||||
<!-- CHAT FOOTER -->
|
||||
<div fxFlex="0 0 auto" fxLayout="column">
|
||||
<div
|
||||
*ngIf="fileDragOver || (files && 0 < files.length)"
|
||||
class="file-drop-zone-container"
|
||||
|
|
@ -107,10 +102,15 @@
|
|||
<div class="file-drop-zone">
|
||||
<ucap-ui-file-upload-queue
|
||||
[(files)]="files"
|
||||
[items]="fileItems"
|
||||
></ucap-ui-file-upload-queue>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- / CHAT CONTENT -->
|
||||
|
||||
<!-- CHAT FOOTER -->
|
||||
<div fxFlex="0 0 auto" fxLayout="column">
|
||||
<!-- REPLY FORM -->
|
||||
<ucap-chat-form
|
||||
(send)="onSendMessage($event)"
|
||||
|
|
|
|||
|
|
@ -55,24 +55,27 @@ $line-basic: 1px solid #dddddd;
|
|||
}
|
||||
|
||||
.chat-content {
|
||||
position: relative;
|
||||
background: transparent;
|
||||
overflow: auto;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
.file-drop-zone-container {
|
||||
position: relative;
|
||||
|
||||
.file-drop-zone {
|
||||
.file-drop-zone-container {
|
||||
position: absolute;
|
||||
border: 2px solid gray;
|
||||
background-color: white;
|
||||
width: 600px;
|
||||
height: 150px;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: rgba(255, 255, 255, 0.95);
|
||||
|
||||
.file-drop-zone {
|
||||
position: absolute;
|
||||
|
||||
top: 10%;
|
||||
left: 10%;
|
||||
width: 80%;
|
||||
height: 80%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -100,6 +100,7 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
|
|||
|
||||
fileDragOver = false;
|
||||
files: File[];
|
||||
fileItems: DataTransferItemList;
|
||||
|
||||
constructor(
|
||||
private store: Store<any>,
|
||||
|
|
@ -324,9 +325,10 @@ export class MessagesComponent implements OnInit, OnDestroy, AfterViewChecked {
|
|||
this.logger.debug('fileSave', value);
|
||||
}
|
||||
|
||||
onFileDragEnter() {
|
||||
this.logger.debug('onFileDragEnter');
|
||||
onFileDragEnter(items: DataTransferItemList) {
|
||||
this.logger.debug('onFileDragEnter', items);
|
||||
this.fileDragOver = true;
|
||||
this.fileItems = items;
|
||||
}
|
||||
|
||||
onFileDragOver() {
|
||||
|
|
|
|||
198
projects/ucap-webmessenger-core/src/lib/utils/mime.util.ts
Normal file
198
projects/ucap-webmessenger-core/src/lib/utils/mime.util.ts
Normal file
|
|
@ -0,0 +1,198 @@
|
|||
const MimeExtensions: {
|
||||
[param: string]: string;
|
||||
} = {
|
||||
'application/envoy': 'evy',
|
||||
'application/fractals': 'fif',
|
||||
'application/futuresplash': 'spl',
|
||||
'application/hta': 'hta',
|
||||
'application/internet-property-stream': 'acx',
|
||||
'application/mac-binhex40': 'hqx',
|
||||
'application/msword': 'doc',
|
||||
'application/msword': 'dot',
|
||||
'application/octet-stream': '*',
|
||||
'application/octet-stream': 'bin',
|
||||
'application/octet-stream': 'class',
|
||||
'application/octet-stream': 'dms',
|
||||
'application/octet-stream': 'exe',
|
||||
'application/octet-stream': 'lha',
|
||||
'application/octet-stream': 'lzh',
|
||||
'application/oda': 'oda',
|
||||
'application/olescript': 'axs',
|
||||
'application/pdf': 'pdf',
|
||||
'application/pics-rules': 'prf',
|
||||
'application/pkcs10': 'p10',
|
||||
'application/pkix-crl': 'crl',
|
||||
'application/postscript': 'ai',
|
||||
'application/postscript': 'eps',
|
||||
'application/postscript': 'ps',
|
||||
'application/rtf': 'rtf',
|
||||
'application/set-payment-initiation': 'setpay',
|
||||
'application/set-registration-initiation': 'setreg',
|
||||
'application/vnd.ms-excel': 'xla',
|
||||
'application/vnd.ms-excel': 'xlc',
|
||||
'application/vnd.ms-excel': 'xlm',
|
||||
'application/vnd.ms-excel': 'xls',
|
||||
'application/vnd.ms-excel': 'xlt',
|
||||
'application/vnd.ms-excel': 'xlw',
|
||||
'application/vnd.ms-outlook': 'msg',
|
||||
'application/vnd.ms-pkicertstore': 'sst',
|
||||
'application/vnd.ms-pkiseccat': 'cat',
|
||||
'application/vnd.ms-pkistl': 'stl',
|
||||
'application/vnd.ms-powerpoint': 'pot',
|
||||
'application/vnd.ms-powerpoint': 'pps',
|
||||
'application/vnd.ms-powerpoint': 'ppt',
|
||||
'application/vnd.ms-project': 'mpp',
|
||||
'application/vnd.ms-works': 'wcm',
|
||||
'application/vnd.ms-works': 'wdb',
|
||||
'application/vnd.ms-works': 'wks',
|
||||
'application/vnd.ms-works': 'wps',
|
||||
'application/winhlp': 'hlp',
|
||||
'application/x-bcpio': 'bcpio',
|
||||
'application/x-cdf': 'cdf',
|
||||
'application/x-compress': 'z',
|
||||
'application/x-compressed': 'tgz',
|
||||
'application/x-cpio': 'cpio',
|
||||
'application/x-csh': 'csh',
|
||||
'application/x-director': 'dcr',
|
||||
'application/x-director': 'dir',
|
||||
'application/x-director': 'dxr',
|
||||
'application/x-dvi': 'dvi',
|
||||
'application/x-gtar': 'gtar',
|
||||
'application/x-gzip': 'gz',
|
||||
'application/x-hdf': 'hdf',
|
||||
'application/x-internet-signup': 'ins',
|
||||
'application/x-internet-signup': 'isp',
|
||||
'application/x-iphone': 'iii',
|
||||
'application/x-javascript': 'js',
|
||||
'application/x-latex': 'latex',
|
||||
'application/x-msaccess': 'mdb',
|
||||
'application/x-mscardfile': 'crd',
|
||||
'application/x-msclip': 'clp',
|
||||
'application/x-msdownload': 'dll',
|
||||
'application/x-msmediaview': 'm13',
|
||||
'application/x-msmediaview': 'm14',
|
||||
'application/x-msmediaview': 'mvb',
|
||||
'application/x-msmetafile': 'wmf',
|
||||
'application/x-msmoney': 'mny',
|
||||
'application/x-mspublisher': 'pub',
|
||||
'application/x-msschedule': 'scd',
|
||||
'application/x-msterminal': 'trm',
|
||||
'application/x-mswrite': 'wri',
|
||||
'application/x-netcdf': 'cdf',
|
||||
'application/x-netcdf': 'nc',
|
||||
'application/x-perfmon': 'pma',
|
||||
'application/x-perfmon': 'pmc',
|
||||
'application/x-perfmon': 'pml',
|
||||
'application/x-perfmon': 'pmr',
|
||||
'application/x-perfmon': 'pmw',
|
||||
'application/x-pkcs12': 'p12',
|
||||
'application/x-pkcs12': 'pfx',
|
||||
'application/x-pkcs7-certificates': 'p7b',
|
||||
'application/x-pkcs7-certificates': 'spc',
|
||||
'application/x-pkcs7-certreqresp': 'p7r',
|
||||
'application/x-pkcs7-mime': 'p7c',
|
||||
'application/x-pkcs7-mime': 'p7m',
|
||||
'application/x-pkcs7-signature': 'p7s',
|
||||
'application/x-sh': 'sh',
|
||||
'application/x-shar': 'shar',
|
||||
'application/x-shockwave-flash': 'swf',
|
||||
'application/x-stuffit': 'sit',
|
||||
'application/x-sv4cpio': 'sv4cpio',
|
||||
'application/x-sv4crc': 'sv4crc',
|
||||
'application/x-tar': 'tar',
|
||||
'application/x-tcl': 'tcl',
|
||||
'application/x-tex': 'tex',
|
||||
'application/x-texinfo': 'texi',
|
||||
'application/x-texinfo': 'texinfo',
|
||||
'application/x-troff': 'roff',
|
||||
'application/x-troff': 't',
|
||||
'application/x-troff': 'tr',
|
||||
'application/x-troff-man': 'man',
|
||||
'application/x-troff-me': 'me',
|
||||
'application/x-troff-ms': 'ms',
|
||||
'application/x-ustar': 'ustar',
|
||||
'application/x-wais-source': 'src',
|
||||
'application/x-x509-ca-cert': 'cer',
|
||||
'application/x-x509-ca-cert': 'crt',
|
||||
'application/x-x509-ca-cert': 'der',
|
||||
'application/ynd.ms-pkipko': 'pko',
|
||||
'application/zip': 'zip',
|
||||
'audio/basic': 'au',
|
||||
'audio/basic': 'snd',
|
||||
'audio/mid': 'mid',
|
||||
'audio/mid': 'rmi',
|
||||
'audio/mpeg': 'mp3',
|
||||
'audio/x-aiff': 'aif',
|
||||
'audio/x-aiff': 'aifc',
|
||||
'audio/x-aiff': 'aiff',
|
||||
'audio/x-mpegurl': 'm3u',
|
||||
'audio/x-pn-realaudio': 'ra',
|
||||
'audio/x-pn-realaudio': 'ram',
|
||||
'audio/x-wav': 'wav',
|
||||
'image/bmp': 'bmp',
|
||||
'image/cis-cod': 'cod',
|
||||
'image/gif': 'gif',
|
||||
'image/ief': 'ief',
|
||||
'image/jpeg': 'jpe',
|
||||
'image/jpeg': 'jpeg',
|
||||
'image/jpeg': 'jpg',
|
||||
'image/pipeg': 'jfif',
|
||||
'image/svg+xml': 'svg',
|
||||
'image/tiff': 'tif',
|
||||
'image/tiff': 'tiff',
|
||||
'image/x-cmu-raster': 'ras',
|
||||
'image/x-cmx': 'cmx',
|
||||
'image/x-icon': 'ico',
|
||||
'image/x-portable-anymap': 'pnm',
|
||||
'image/x-portable-bitmap': 'pbm',
|
||||
'image/x-portable-graymap': 'pgm',
|
||||
'image/x-portable-pixmap': 'ppm',
|
||||
'image/x-rgb': 'rgb',
|
||||
'image/x-xbitmap': 'xbm',
|
||||
'image/x-xpixmap': 'xpm',
|
||||
'image/x-xwindowdump': 'xwd',
|
||||
'message/rfc822': 'mht',
|
||||
'message/rfc822': 'mhtml',
|
||||
'message/rfc822': 'nws',
|
||||
'text/css': 'css',
|
||||
'text/h323': '323',
|
||||
'text/html': 'htm',
|
||||
'text/html': 'html',
|
||||
'text/html': 'stm',
|
||||
'text/iuls': 'uls',
|
||||
'text/plain': 'bas',
|
||||
'text/plain': 'c',
|
||||
'text/plain': 'h',
|
||||
'text/plain': 'txt',
|
||||
'text/richtext': 'rtx',
|
||||
'text/scriptlet': 'sct',
|
||||
'text/tab-separated-values': 'tsv',
|
||||
'text/webviewhtml': 'htt',
|
||||
'text/x-component': 'htc',
|
||||
'text/x-setext': 'etx',
|
||||
'text/x-vcard': 'vcf',
|
||||
'video/mpeg': 'mp2',
|
||||
'video/mpeg': 'mpa',
|
||||
'video/mpeg': 'mpe',
|
||||
'video/mpeg': 'mpeg',
|
||||
'video/mpeg': 'mpg',
|
||||
'video/mpeg': 'mpv2',
|
||||
'video/mp4': 'mp4',
|
||||
'video/quicktime': 'mov',
|
||||
'video/quicktime': 'qt',
|
||||
'video/x-la-asf': 'lsf',
|
||||
'video/x-la-asf': 'lsx',
|
||||
'video/x-ms-asf': 'asf',
|
||||
'video/x-ms-asf': 'asr',
|
||||
'video/x-ms-asf': 'asx',
|
||||
'video/x-msvideo': 'avi',
|
||||
'video/x-sgi-movie': 'movie',
|
||||
'x-world/x-vrml': 'flr',
|
||||
'x-world/x-vrml': 'vrml',
|
||||
'x-world/x-vrml': 'wrl',
|
||||
'x-world/x-vrml': 'wrz',
|
||||
'x-world/x-vrml': 'xaf',
|
||||
'x-world/x-vrml': 'xof'
|
||||
};
|
||||
|
||||
export class MimeUtil {}
|
||||
|
|
@ -1,6 +1,9 @@
|
|||
<div class="bubble-main">
|
||||
<!--파일명에 따라 doc exe hwp ppt xls zip 으로 추가되고 나머지 파일 명은 file로 기간이 만료된 파일은 그뒤에 disable도 추가-->
|
||||
<div class="file-img" [ngClass]="fileInfo.FileExt"></div>
|
||||
<!-- <div class="file-img" [ngClass]="fileInfo.FileExt"></div> -->
|
||||
<div [ngClass]="['mime-icon', 'light', 'ico-' + fileInfo.FileExt]">
|
||||
<div class="ico"></div>
|
||||
</div>
|
||||
<ul class="file-info">
|
||||
<li class="file-name">
|
||||
{{ fileInfo.FileName }}
|
||||
|
|
|
|||
|
|
@ -15,3 +15,5 @@
|
|||
@import 'partials/presence.scss';
|
||||
@import 'partials/list-item';
|
||||
@import 'partials/dialogs';
|
||||
|
||||
@import 'file-icon/icons';
|
||||
|
|
|
|||
|
|
@ -0,0 +1,27 @@
|
|||
//
|
||||
// Import icons
|
||||
//
|
||||
|
||||
@font-face {
|
||||
font-family: 'Material Icons';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: url(https://fonts.gstatic.com/s/materialicons/v29/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)
|
||||
format('woff2');
|
||||
}
|
||||
|
||||
.material-icons {
|
||||
font-family: 'Material Icons';
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-size: 24px;
|
||||
line-height: 1;
|
||||
letter-spacing: normal;
|
||||
text-transform: none;
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
direction: ltr;
|
||||
-webkit-font-feature-settings: 'liga';
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
@function colorEncode($color) {
|
||||
@if (
|
||||
str-index(ie-hex-str($color), '#') ==
|
||||
1 and
|
||||
str-length(ie-hex-str($color)) ==
|
||||
9 and
|
||||
type-of($color) ==
|
||||
'color'
|
||||
) {
|
||||
@return '%23' + str-slice(ie-hex-str($color), 4, 9);
|
||||
}
|
||||
|
||||
@return $color;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
//
|
||||
// Colors (used when another color isn't specified)
|
||||
//
|
||||
$icon-colours: #b1375e, #db4f42, #f29b00, #bfcb3e, #8db157, #50abb5, #5277de,
|
||||
#6963c5;
|
||||
|
|
@ -0,0 +1,41 @@
|
|||
//
|
||||
// Icons (the corrispong ascii)
|
||||
//
|
||||
|
||||
$settings: '\E8B8';
|
||||
$locked: '\E88D';
|
||||
$flag: '\E3A0';
|
||||
$work: '\E8F9';
|
||||
$build: '\E869';
|
||||
$malware: '\E868';
|
||||
$map: '\E8B4';
|
||||
$coffee: '\EB44';
|
||||
$apk: '\E859';
|
||||
$usb: '\E1E0';
|
||||
$cloud: '\E2BD';
|
||||
$attachment: '\E2BC';
|
||||
$world: '\E80B';
|
||||
|
||||
$zip: '\E3E7';
|
||||
|
||||
$music: '\E3A1';
|
||||
$mic: '\E029';
|
||||
$radio: '\E03E';
|
||||
$audio: '\E050';
|
||||
$lp: '\E019';
|
||||
|
||||
$photo: '\E3B0';
|
||||
$picture: '\E3B7';
|
||||
$pict: '\E251';
|
||||
|
||||
$play: '\E037';
|
||||
$movie: '\E02C';
|
||||
$cam: '\E04B';
|
||||
|
||||
$text: '\E262';
|
||||
$stylez: '\E91D';
|
||||
$app: '\E051';
|
||||
$code: '\E86F';
|
||||
|
||||
$calendar: '\E8DF';
|
||||
$epub: '\E54B';
|
||||
|
|
@ -0,0 +1,150 @@
|
|||
// HARDCODED styles
|
||||
// This part serves for the demo and can be safely canceled
|
||||
// However, if you need a particular icon you can write the code like in the examples below
|
||||
//
|
||||
|
||||
.mime-icon {
|
||||
.ico.ico-magenta:after {
|
||||
@include do-icon(#d9006c);
|
||||
}
|
||||
.ico.ico-yellow:after {
|
||||
@include do-icon(#f9ca15);
|
||||
}
|
||||
.ico.ico-blue:after {
|
||||
@include do-icon(#0d75dd);
|
||||
}
|
||||
|
||||
&.abc .ico:after {
|
||||
@include do-icon(desaturate(hsla(15, 90%, 55%, 1), 15%), '', 'ABC');
|
||||
}
|
||||
&.def .ico:after {
|
||||
@include do-icon(desaturate(hsla(80, 75%, 47%, 1), 15%), '', 'DEF');
|
||||
}
|
||||
&.ghi .ico:after {
|
||||
@include do-icon(desaturate(hsla(270, 60%, 55%, 1), 15%), '', 'GHI');
|
||||
}
|
||||
|
||||
&.light {
|
||||
&.ico-mp3 .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#05ad9d, 15%), 'MP3', #888, '');
|
||||
}
|
||||
&.ico-pcm .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#8bc34a, 15%), 'PCM', #888, '');
|
||||
}
|
||||
&.ico-ogg .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#cddc39, 15%), 'OGG', #888, '');
|
||||
}
|
||||
&.ico-wav .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#ffc107, 15%), 'WAV', #888, '');
|
||||
}
|
||||
&.ico-aac .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#f44336, 15%), 'AAC', #888, '');
|
||||
}
|
||||
&.ico-aiff .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#e91e63, 15%), 'AIFF', #888, '');
|
||||
}
|
||||
&.ico-wma .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'WMA', #888, '');
|
||||
}
|
||||
&.ico-html .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#3f51b5, 15%), 'HTML', #888, '');
|
||||
}
|
||||
&.ico-js .ico:after {
|
||||
@include do-icon(#f1f2f2, desaturate(#9c27b0, 15%), 'JS', #888, '');
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
&.ico-csv .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#05ad9d, 15%), 'CSV', #ddd, '');
|
||||
}
|
||||
&.ico-txt .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#8bc34a, 15%), 'TXT', #ddd, '');
|
||||
}
|
||||
&.ico-rtf .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#cddc39, 15%), 'RTF', #ddd, '');
|
||||
}
|
||||
&.ico-doc .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#ffc107, 15%), 'DOC', #ddd, '');
|
||||
}
|
||||
&.ico-docx .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#f44336, 15%), 'DOCX', #ddd, '');
|
||||
}
|
||||
&.ico-flac .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#e91e63, 15%), 'FLAC', #ddd, '');
|
||||
}
|
||||
&.ico-js .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#9c27b0, 15%), 'JS', #ddd, '');
|
||||
}
|
||||
&.ico-php .ico:after {
|
||||
@include do-icon($dark-color, desaturate(#3f51b5, 15%), 'PHP', #ddd, '');
|
||||
}
|
||||
}
|
||||
|
||||
&.double {
|
||||
&.ico-avi .ico {
|
||||
&:before {
|
||||
color: #f44336 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #f44336, 'AVI', #f44336, '');
|
||||
}
|
||||
}
|
||||
&.ico-mp4 .ico {
|
||||
&:before {
|
||||
color: #8bc34a !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #8bc34a, 'MP4', #8bc34a, '');
|
||||
}
|
||||
}
|
||||
&.ico-mkv .ico {
|
||||
&:before {
|
||||
color: #bdcc2b !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #bdcc2b, 'MKV', #bdcc2b, '');
|
||||
}
|
||||
}
|
||||
&.ico-mpeg .ico {
|
||||
&:before {
|
||||
color: #ffc107 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #ffc107, 'MPEG', #ffc107, '');
|
||||
}
|
||||
}
|
||||
&.ico-mov .ico {
|
||||
&:before {
|
||||
color: #05ad9d !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #05ad9d, 'MOV', #05ad9d, '');
|
||||
}
|
||||
}
|
||||
&.ico-flv .ico {
|
||||
&:before {
|
||||
color: #e91e63 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #e91e63, 'FLV', #e91e63, '');
|
||||
}
|
||||
}
|
||||
&.ico-swf .ico {
|
||||
&:before {
|
||||
color: #9c27b0 !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #9c27b0, 'SWF', #9c27b0, '');
|
||||
}
|
||||
}
|
||||
&.ico-wmv .ico {
|
||||
&:before {
|
||||
color: #8bc34a !important;
|
||||
}
|
||||
&:after {
|
||||
@include do-icon($dark-color, #8bc34a, 'WMV', #8bc34a, '');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
// CONFIGURATION
|
||||
$icon-container-size: 70px; // the size of the icons
|
||||
$icon-edge-color: ''; // the default edge color of the icon
|
||||
$font-size: 38; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
|
||||
$font-family: 'Myriad, Tahoma-Bold, sans-serif'; // the font size of the text incapsulated inside the svg icon relative to the 200px height of the original svg
|
||||
|
||||
// ATTENTION write hex in extended notation
|
||||
$shape-color: #f1f2f2; // the color of the shape inside the icon (if any)
|
||||
$shape-color-positive: #666666; // the color of the shape when the icon have a positive background (es. white)
|
||||
$dark-color: #3a3b3c; // background color of the icons in the dark theme (or the ribbon color in the "double" $style theme )
|
||||
$icon-shadow: ''; // or "drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );" without quotes
|
||||
$font-color: $shape-color; // default
|
||||
|
||||
// CHOOSE YOUR THEME
|
||||
//
|
||||
//
|
||||
$style: ''; // icon theme -> possible values: default || dark || light || double
|
||||
|
||||
// Import hex color conversion function
|
||||
@import 'functions';
|
||||
|
||||
// Import icons
|
||||
@import 'fonts';
|
||||
|
||||
// Colors (used when another color isn't specified)
|
||||
@import 'generator-colors';
|
||||
|
||||
// Icons (the corrispong ascii)
|
||||
@import 'generator-vars';
|
||||
|
||||
// DO-ICON MIXIN
|
||||
@import 'mixin';
|
||||
|
||||
// HARDCODED styles
|
||||
// This part serves for the demo and can be safely canceled
|
||||
// However, if you need a particular icon you can write the code like in the examples below
|
||||
//
|
||||
@import 'hardcoded';
|
||||
|
||||
//
|
||||
// LOOP CONFIG
|
||||
// The loop will generate icons as in the configuration below
|
||||
//
|
||||
$icon-list: ('3dm', '', $world), ('3dmf', '', $world), ('7z', '', $zip),
|
||||
('a', '', $zip), ('aab', '', $app), ('aac', '', $mic), ('aam', '', $app),
|
||||
('aas', '', $app), ('abc', '', $text), ('acgi', '', $text), ('afl', '', $play),
|
||||
('ai', '', $app), ('aif', '', $music), ('aifc', '', $radio), ('aiff', '', $lp),
|
||||
('aim', '', $app), ('aip', '', $text), ('ani', '', $app), ('aos', '', $app),
|
||||
('aps', '', $app), ('arc', '', $app), ('arj', '', $app), ('art', '', $photo),
|
||||
('asf', '', $movie), ('asm', '', $text), ('asp', '', $code), ('asx', '', $app),
|
||||
('au', '', $mic), ('avi', '', $app), ('avs', '', $movie), ('bcpio', '', $app),
|
||||
('bin', '', $app), ('bm', '', $picture), ('bmp', '', $pict), ('boo', '', $app),
|
||||
('book', '', $app), ('boz', '', $app), ('bsh', '', $app), ('bz', '', $zip),
|
||||
('bz2', '', $app), ('c', '', $code), ('cat', '', $app), ('cc', '', $code),
|
||||
('ccad', '', $app), ('cco', '', $app), ('cdf', '', $app), ('cer', '', $app),
|
||||
('cha', '', $app), ('chat', '', $app), ('class', '', $app), ('com', '', $app),
|
||||
('conf', '', $text), ('cpio', '', $app), ('cpp', '', $text), ('cpt', '', $app),
|
||||
('crl', '', $app), ('crt', '', $app), ('csh', '', $app), ('css', '', $app),
|
||||
('csv', '', $text), ('cxx', '', $text), ('dcr', '', $app), ('deepv', '', $app),
|
||||
('def', '', $text), ('der', '', $app), ('dif', '', $cam), ('dir', '', $app),
|
||||
('dl', '', $play), ('doc', '', $app), ('docx', '', $text), ('dot', '', $app),
|
||||
('dp', '', $app), ('drw', '', $app), ('dump', '', $app), ('dv', '', $cam),
|
||||
('dvi', '', $app), ('dwf', '', $picture), ('dwg', '', $app), ('dxf', '', $app),
|
||||
('dxr', '', $app), ('el', '', $text), ('elc', '', $app), ('env', '', $app),
|
||||
('eps', '', $app), ('es', '', $app), ('etx', '', $text), ('evy', '', $app),
|
||||
('exe', '', $app), ('f', '', $text), ('f77', '', $text), ('f90', '', $text),
|
||||
('fdf', '', $app), ('fif', '', $app), ('flac', '', $lp), ('fli', '', $play),
|
||||
('flo', '', $photo), ('flv', '', $malware), ('flx', '', $text),
|
||||
('fmf', '', $cam), ('for', '', $text), ('fpx', '', $picture),
|
||||
('frl', '', $app), ('funk', '', $audio), ('g', '', $text), ('g3', '', $pict),
|
||||
('gif', '', $photo), ('gl', '', $play), ('gsd', '', $lp), ('gsm', '', $music),
|
||||
('gsp', '', $app), ('gss', '', $app), ('gtar', '', $app), ('gz', '', $app),
|
||||
('gzip', '', $app), ('h', '', $text), ('hdf', '', $app), ('help', '', $app),
|
||||
('hgl', '', $app), ('hh', '', $text), ('hlb', '', $text), ('hlp', '', $app),
|
||||
('hpg', '', $app), ('hpgl', '', $app), ('hqx', '', $app), ('hta', '', $app),
|
||||
('htc', '', $text), ('htm', '', $code), ('html', '', $code),
|
||||
('htmls', '', $code), ('htt', '', $code), ('htx', '', $code),
|
||||
('ice', '', $text), ('ico', '', $picture), ('idc', '', $text),
|
||||
('ief', '', $pict), ('iefs', '', $photo), ('iges', '', $app),
|
||||
('igs', '', $app), ('ima', '', $app), ('imap', '', $app), ('inf', '', $app),
|
||||
('ins', '', $app), ('ip', '', $app), ('isu', '', $cam), ('it', '', $mic),
|
||||
('iv', '', $app), ('ivr', '', $flag), ('ivy', '', $app), ('jam', '', $radio),
|
||||
('jav', '', $code), ('java', '', $code), ('jcm', '', $app),
|
||||
('jfif', '', $picture), ('jfif-tbnl', '', $pict), ('jpe', '', $photo),
|
||||
('jpeg', '', $picture), ('jpg', '', $pict), ('jps', '', $photo),
|
||||
('js', '', $malware), ('jut', '', $picture), ('kar', '', $audio),
|
||||
('ksh', '', $app), ('la', '', $lp), ('lam', '', $mic), ('latex', '', $app),
|
||||
('lha', '', $app), ('lhx', '', $app), ('list', '', $text), ('lma', '', $radio),
|
||||
('log', '', $text), ('lsp', '', $app), ('lst', '', $text), ('lsx', '', $text),
|
||||
('ltx', '', $app), ('lzh', '', $app), ('lzx', '', $app), ('m', '', $text),
|
||||
('m1v', '', $play), ('m2a', '', $lp), ('m2v', '', $movie), ('m3u', '', $music),
|
||||
('m4a', '', $audio), ('man', '', $app), ('map', '', $app), ('mar', '', $text),
|
||||
('mbd', '', $app), ('mcd', '', $app), ('mcf', '', $pict), ('mcp', '', $app),
|
||||
('me', '', $app), ('mht', '', $work), ('mhtml', '', $work), ('mid', '', $app),
|
||||
('midi', '', $app), ('mif', '', $app), ('mime', '', $work),
|
||||
('mjf', '', $radio), ('mjpg', '', $cam), ('mkv', '', $play), ('mm', '', $app),
|
||||
('mme', '', $app), ('mod', '', $audio), ('moov', '', $play),
|
||||
('mov', '', $movie), ('movie', '', $cam), ('mp2', '', $music),
|
||||
('mp3', '', $lp), ('mp4', '', $movie), ('mpa', '', $lp), ('mpc', '', $app),
|
||||
('mpe', '', $play), ('mpeg', '', $movie), ('mpg', '', $music),
|
||||
('mpga', '', $mic), ('mpp', '', $app), ('mpt', '', $app), ('mpv', '', $app),
|
||||
('mpx', '', $app), ('mrc', '', $app), ('ms', '', $app), ('mv', '', $play),
|
||||
('my', '', $radio), ('mzz', '', $app), ('nap', '', $photo),
|
||||
('naplps', '', $picture), ('nc', '', $app), ('ncm', '', $app),
|
||||
('nif', '', $pict), ('niff', '', $photo), ('nix', '', $app), ('nsc', '', $app),
|
||||
('nvd', '', $app), ('o', '', $app), ('oda', '', $app), ('ogg', '', $audio),
|
||||
('omc', '', $app), ('omcd', '', $app), ('omcr', '', $app), ('p', '', $text),
|
||||
('p10', '', $app), ('p12', '', $app), ('p7a', '', $app), ('p7c', '', $app),
|
||||
('p7m', '', $app), ('p7r', '', $app), ('p7s', '', $app), ('part', '', $app),
|
||||
('pas', '', $text), ('pbm', '', $picture), ('pcl', '', $app),
|
||||
('pcm', '', $radio), ('pct', '', $pict), ('pcx', '', $photo),
|
||||
('pdb', '', $coffee), ('pdf', '', $app), ('pfunk', '', $audio),
|
||||
('pgm', '', $picture), ('php', '', $code), ('pic', '', $pict),
|
||||
('pict', '', $photo), ('pkg', '', $app), ('pko', '', $app), ('pl', '', $code),
|
||||
('plx', '', $app), ('pm', '', $picture), ('pm4', '', $app), ('pm5', '', $app),
|
||||
('png', '', $pict), ('pnm', '', $app), ('pot', '', $app),
|
||||
('pov', '', $settings), ('ppa', '', $app), ('ppm', '', $photo),
|
||||
('pps', '', $app), ('ppt', '', $app), ('pptx', '', $app), ('ppz', '', $app),
|
||||
('pre', '', $app), ('prt', '', $app), ('ps', '', $app), ('psd', '', $app),
|
||||
('pvu', '', $lp), ('pwz', '', $app), ('py', '', $code), ('pyc', '', $app),
|
||||
('qcp', '', $music), ('qd3', '', $world), ('qd3d', '', $world),
|
||||
('qif', '', $picture), ('qt', '', $movie), ('qtc', '', $cam),
|
||||
('qti', '', $pict), ('qtif', '', $photo), ('ram', '', $lp), ('rar', '', $zip),
|
||||
('ras', '', $app), ('rast', '', $picture), ('rexx', '', $text),
|
||||
('rf', '', $pict), ('rgb', '', $photo), ('rm', '', $app), ('rmi', '', $mic),
|
||||
('rmm', '', $radio), ('rmp', '', $audio), ('rng', '', $app), ('rnx', '', $app),
|
||||
('roff', '', $app), ('rp', '', $picture), ('rpm', '', $music),
|
||||
('rt', '', $text), ('rtf', '', $app), ('rtx', '', $app), ('rv', '', $play),
|
||||
('s', '', $text), ('s3m', '', $mic), ('saveme', '', $app), ('sbk', '', $app),
|
||||
('scm', '', $app), ('sdml', '', $text), ('sdp', '', $app), ('sdr', '', $app),
|
||||
('sea', '', $app), ('set', '', $app), ('sgm', '', $text), ('sgml', '', $text),
|
||||
('sh', '', $app), ('shar', '', $app), ('shtml', '', $code),
|
||||
('sid', '', $radio), ('sit', '', $app), ('skd', '', $app), ('skm', '', $app),
|
||||
('skp', '', $app), ('skt', '', $app), ('sl', '', $app), ('smi', '', $app),
|
||||
('smil', '', $app), ('snd', '', $audio), ('sol', '', $app), ('spc', '', $app),
|
||||
('spl', '', $app), ('spr', '', $app), ('sprite', '', $app), ('src', '', $app),
|
||||
('ssi', '', $text), ('ssm', '', $app), ('sst', '', $app), ('step', '', $app),
|
||||
('stl', '', $app), ('stp', '', $app), ('sv4cpio', '', $app),
|
||||
('sv4crc', '', $app), ('svf', '', $pict), ('svr', '', $app), ('swf', '', $app),
|
||||
('t', '', $app), ('talk', '', $text), ('tar', '', $app), ('tbk', '', $app),
|
||||
('tcl', '', $app), ('tcsh', '', $text), ('tex', '', $app), ('texi', '', $app),
|
||||
('texinfo', '', $app), ('tgz', '', $app), ('tif', '', $photo),
|
||||
('tiff', '', $picture), ('tr', '', $app), ('tsi', '', $music),
|
||||
('tsp', '', $app), ('tsv', '', $text), ('turbot', '', $pict),
|
||||
('txt', '', $text), ('uil', '', $text), ('uni', '', $text),
|
||||
('unis', '', $text), ('unv', '', $app), ('uri', '', $text),
|
||||
('uris', '', $text), ('ustar', '', $app), ('uu', '', $app), ('uue', '', $text),
|
||||
('vcd', '', $app), ('vcs', '', $text), ('vda', '', $app), ('vdo', '', $cam),
|
||||
('vew', '', $app), ('viv', '', $play), ('vivo', '', $cam), ('vmd', '', $app),
|
||||
('vmf', '', $app), ('voc', '', $radio), ('vos', '', $movie), ('vox', '', $lp),
|
||||
('vqe', '', $music), ('vqf', '', $mic), ('vql', '', $radio),
|
||||
('vrml', '', $app), ('vrt', '', $world), ('vsd', '', $app), ('vst', '', $app),
|
||||
('vsw', '', $app), ('wav', '', $audio), ('wb1', '', $app),
|
||||
('wbmp', '', $photo), ('web', '', $app), ('wiz', '', $app), ('wk1', '', $app),
|
||||
('wma', '', $music), ('wmf', '', $app), ('wml', '', $app), ('wmlc', '', $app),
|
||||
('wmls', '', $app), ('wmlsc', '', $app), ('wmv', '', $play),
|
||||
('word', '', $app), ('wp', '', $app), ('wp5', '', $app), ('wp6', '', $app),
|
||||
('wpd', '', $app), ('wq1', '', $app), ('wri', '', $app), ('wrl', '', $app),
|
||||
('wrz', '', $app), ('wsc', '', $app), ('wsrc', '', $app), ('wtk', '', $app),
|
||||
('x-png', '', $picture), ('xbm', '', $pict), ('xdr', '', $cam),
|
||||
('xgz', '', $app), ('xif', '', $photo), ('xl', '', $app), ('xla', '', $app),
|
||||
('xlb', '', $app), ('xlc', '', $app), ('xld', '', $app), ('xlk', '', $app),
|
||||
('xll', '', $app), ('xlm', '', $app), ('xls', '', $app), ('xlt', '', $app),
|
||||
('xlv', '', $app), ('xlw', '', $app), ('xm', '', $lp), ('xml', '', $app),
|
||||
('xmz', '', $text), ('xpix', '', $app), ('xpm', '', $picture),
|
||||
('xsr', '', $play), ('xwd', '', $pict), ('xyz', '', $app), ('z', '', $zip),
|
||||
('zip', '', $zip), ('zoo', '', $app), ('zsh', '', $text);
|
||||
|
||||
////// basic style
|
||||
//////
|
||||
|
||||
.mime-icon {
|
||||
margin: 0;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
position: relative;
|
||||
|
||||
.ico {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
top: $icon-container-size / 2.7;
|
||||
display: block;
|
||||
width: 100%;
|
||||
overflow: visible;
|
||||
z-index: 9;
|
||||
content: '';
|
||||
font-family: 'Material Icons';
|
||||
font-size: $icon-container-size / 4.2;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
&:after {
|
||||
width: $icon-container-size;
|
||||
height: $icon-container-size;
|
||||
display: inline-block;
|
||||
content: '';
|
||||
|
||||
background-size: 80%;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
@include do-icon();
|
||||
}
|
||||
}
|
||||
|
||||
&.light {
|
||||
.ico:before {
|
||||
color: $shape-color-positive !important;
|
||||
}
|
||||
.ico:after {
|
||||
filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
&.dark {
|
||||
.ico:before {
|
||||
color: #f1f2f2 !important;
|
||||
}
|
||||
.ico:after {
|
||||
filter: inherit;
|
||||
}
|
||||
}
|
||||
|
||||
&.double {
|
||||
.ico:after {
|
||||
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
|
||||
}
|
||||
}
|
||||
|
||||
i.material-icons {
|
||||
position: absolute;
|
||||
top: 33%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
font-size: 28px;
|
||||
color: $shape-color;
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
////// "Each" n°1 icon with Google font icon
|
||||
//////
|
||||
|
||||
@import 'loop';
|
||||
|
|
@ -0,0 +1,78 @@
|
|||
////// "Each" loop with font icon
|
||||
//////
|
||||
//////
|
||||
$colors-number: length($icon-colours);
|
||||
$actual-icon-color: 1;
|
||||
|
||||
@each $filetype, $icon-primary-color, $icon in $icon-list {
|
||||
@if (type-of($icon-primary-color) != 'color' and ($icon-primary-color)) {
|
||||
// if background isn't a color or is null
|
||||
|
||||
@if ($style == 'dark') {
|
||||
$icon-edge-color: nth(
|
||||
$icon-colours,
|
||||
$actual-icon-color
|
||||
); // the color is a color from the $icon-colours array
|
||||
$icon-primary-color: $dark-color;
|
||||
} @else if ($style == 'light') {
|
||||
$icon-edge-color: nth($icon-colours, $actual-icon-color);
|
||||
$icon-primary-color: #f1f2f2;
|
||||
} @else if ($style == 'double') {
|
||||
$icon-primary-color: $dark-color;
|
||||
$icon-edge-color: nth($icon-colours, $actual-icon-color);
|
||||
} @else {
|
||||
$icon-primary-color: nth($icon-colours, $actual-icon-color);
|
||||
$icon-edge-color: '';
|
||||
}
|
||||
|
||||
@if ($actual-icon-color < $colors-number) {
|
||||
// Prepare the next color then increase the index counter
|
||||
$actual-icon-color: $actual-icon-color + 1;
|
||||
} @else {
|
||||
$actual-icon-color: 1;
|
||||
}
|
||||
} @else {
|
||||
// else background is a color or isn't null
|
||||
|
||||
@if ($style == 'dark') {
|
||||
$icon-edge-color: $icon-primary-color;
|
||||
$icon-primary-color: $dark-color;
|
||||
} @else if ($style == 'light') {
|
||||
$icon-edge-color: $icon-primary-color;
|
||||
$icon-primary-color: #f1f2f2;
|
||||
} @else if ($style == 'double') {
|
||||
$icon-edge-color: $icon-primary-color;
|
||||
$icon-primary-color: $dark-color;
|
||||
} @else {
|
||||
$icon-primary-color: $icon-primary-color;
|
||||
$icon-edge-color: '';
|
||||
}
|
||||
}
|
||||
|
||||
@if ($style == 'light') {
|
||||
$font-color: $shape-color-positive;
|
||||
$icon-shadow: 'drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );';
|
||||
} @else if ($style == 'double') {
|
||||
$font-color: $icon-edge-color;
|
||||
$icon-shadow: 'drop-shadow( 0 2px 2px rgba(0, 0, 0, 0.25) );';
|
||||
} @else {
|
||||
$font-color: $shape-color;
|
||||
$icon-shadow: inherit;
|
||||
}
|
||||
|
||||
// APPLY STYLE
|
||||
.mime-icon.ico-#{$filetype} .ico:before {
|
||||
content: $icon;
|
||||
color: $font-color;
|
||||
}
|
||||
.mime-icon.ico-#{$filetype} .ico:after {
|
||||
@include do-icon(
|
||||
$icon-primary-color,
|
||||
$icon-edge-color,
|
||||
str-slice(to-upper-case($filetype), 0, 5),
|
||||
$font-color,
|
||||
$icon
|
||||
);
|
||||
filter: #{$icon-shadow};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,43 @@
|
|||
////// DO-ICON MIXIN USAGE
|
||||
/////
|
||||
///// -> do-icon($background-color, $edge-color, $text, $text-color, $icon, $shape-color);
|
||||
///// +> @include do-icon(#009688, lighten(#009688, 20%), "", "");
|
||||
///
|
||||
// $background-color: the background of the document image (A color is expected - REQUIRED)
|
||||
// $edge-color: the color of corner edge
|
||||
// $text: the type of mime type
|
||||
// $text-color: the color of the text containing file extension (A color is expected)
|
||||
// $icon: inject an icon inside the document model
|
||||
|
||||
// IF WOU WANT CHANGE THE DEFAULT ICON
|
||||
// #{$background-color} -> the icon main color
|
||||
// #{$edge-color} -> the icon secondary color
|
||||
// #{$font-size} -> the size of the file extension text (exe, jpg, gif, etc)
|
||||
// #{$icon} -> the ascii code of the icon font
|
||||
// #{$text} -> the file extension variable
|
||||
|
||||
@mixin do-icon(
|
||||
$background-color: #888,
|
||||
$edge-color: null,
|
||||
$text: null,
|
||||
$text-color: #f1f2f2,
|
||||
$icon: null
|
||||
) {
|
||||
@if (type-of($edge-color) != 'color') {
|
||||
$edge-color: lighten($background-color, 15%);
|
||||
}
|
||||
@if (type-of($text-color) != 'color') {
|
||||
$text-color: '#F1F2F2';
|
||||
}
|
||||
@if (type-of($text) != 'string') and ($text) {
|
||||
$text: '@#!';
|
||||
}
|
||||
|
||||
$background-color: colorEncode($background-color);
|
||||
$text-color: colorEncode($text-color);
|
||||
$edge-color: colorEncode($edge-color);
|
||||
|
||||
$ico: '<svg xmlns="http://www.w3.org/2000/svg" class="icon-model" viewBox="0 0 200 200">#{$icon} <path d="M171 192.4V58.2l-58.4 0V0H36.5C32.4 0 29 3.4 29 7.6h0v184.9h0c0 4.2 3.4 7.6 7.6 7.6h126.9C167.6 200 171 196.6 171 192.4z" fill="#{$background-color}"/><text class="icon-text" transform="translate(100 171)" width="120" height="50" font-family="#{$font-family}" font-size="#{$font-size}" style="fill:#{$text-color};font-weight:bold;text-anchor:middle;text-shadow:0">#{$text}</text><polygon points="112.6 0 171 58.3 112.6 58.3" fill="#{$edge-color}"/><polygon points="170.9 116.5 112.6 58.3 170.9 58.3" style="fill:%23010202;opacity:0.1"/></svg>';
|
||||
|
||||
background-image: url('data:image/svg+xml;utf8,#{$ico}');
|
||||
}
|
||||
|
|
@ -6,7 +6,7 @@
|
|||
<div
|
||||
fxLayout="column"
|
||||
fxFlex="100"
|
||||
fxFlex.gt-xs="50"
|
||||
fxFlex.gt-xs="100"
|
||||
fxFlex.gt-md="25"
|
||||
*ngFor="let file of uploadFiles"
|
||||
>
|
||||
|
|
@ -23,4 +23,19 @@
|
|||
<mat-progress-bar mode="determinate" value="40"> </mat-progress-bar>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div *ngIf="uploadItems" fxLayout="column">
|
||||
<div>여기에 파일을 Drop하시면 업로드 됩니다.</div>
|
||||
<div>
|
||||
<div
|
||||
fxLayout="row"
|
||||
fxFlex="100"
|
||||
fxFlex.gt-xs="20"
|
||||
fxFlex.gt-md="25"
|
||||
*ngFor="let item of uploadItems"
|
||||
>
|
||||
<mat-icon>image</mat-icon>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -10,12 +10,23 @@ import { NGXLogger } from 'ngx-logger';
|
|||
export class FileUploadQueueComponent implements OnInit {
|
||||
@Output()
|
||||
filesChange = new EventEmitter<File[]>();
|
||||
|
||||
@Input() set files(files: File[]) {
|
||||
this.uploadFiles = files;
|
||||
this.uploadItems = undefined;
|
||||
}
|
||||
|
||||
uploadFiles: File[];
|
||||
|
||||
@Input() set items(items: DataTransferItemList) {
|
||||
const uploadItems: DataTransferItem[] = [];
|
||||
// tslint:disable-next-line: prefer-for-of
|
||||
for (let i = 0; i < items.length; i++) {
|
||||
uploadItems.push(items[i]);
|
||||
}
|
||||
this.uploadItems = [...uploadItems];
|
||||
}
|
||||
uploadItems: DataTransferItem[];
|
||||
|
||||
constructor(private logger: NGXLogger) {}
|
||||
|
||||
ngOnInit() {}
|
||||
|
|
|
|||
|
|
@ -13,37 +13,53 @@ import { NGXLogger } from 'ngx-logger';
|
|||
})
|
||||
export class FileUploadForDirective {
|
||||
@Output()
|
||||
public fileDragEnter: EventEmitter<any> = new EventEmitter();
|
||||
public fileDragEnter = new EventEmitter<DataTransferItemList>();
|
||||
|
||||
@Output()
|
||||
public fileDragOver: EventEmitter<any> = new EventEmitter();
|
||||
public fileDragOver = new EventEmitter<void>();
|
||||
|
||||
@Output()
|
||||
public fileDragLeave: EventEmitter<any> = new EventEmitter();
|
||||
public fileDragLeave = new EventEmitter<void>();
|
||||
|
||||
@Output()
|
||||
public fileSelected: EventEmitter<File[]> = new EventEmitter<File[]>();
|
||||
public fileSelected = new EventEmitter<File[]>();
|
||||
|
||||
dragOver = false;
|
||||
|
||||
constructor(private elementRef: ElementRef, private logger: NGXLogger) {}
|
||||
|
||||
@HostListener('window:dragenter', ['$event'])
|
||||
public onDragEnter(event: any): any {
|
||||
const files = event.dataTransfer.files;
|
||||
public onDragEnter(event: DragEvent): any {
|
||||
if (!this.isFileDrag(event.dataTransfer)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (!this.dragOver) {
|
||||
this.fileDragEnter.emit(files);
|
||||
this.fileDragEnter.emit(event.dataTransfer.items);
|
||||
this.dragOver = true;
|
||||
}
|
||||
}
|
||||
|
||||
@HostListener('window:dragover', ['$event'])
|
||||
public onDragOver(event: any): any {
|
||||
public onDragOver(event: DragEvent): any {
|
||||
if (!this.isFileDrag(event.dataTransfer)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.isEventInElement(event)) {
|
||||
event.dataTransfer.dropEffect = 'copy';
|
||||
} else {
|
||||
event.dataTransfer.dropEffect = 'none';
|
||||
}
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
@HostListener('window:dragleave', ['$event'])
|
||||
public onDragLeave(event: any): any {
|
||||
public onDragLeave(event: DragEvent): any {
|
||||
if (!this.isFileDrag(event.dataTransfer)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event && event.pageX === 0 && event.pageY === 0) {
|
||||
this.fileDragLeave.emit();
|
||||
this.dragOver = false;
|
||||
|
|
@ -59,6 +75,9 @@ export class FileUploadForDirective {
|
|||
|
||||
@HostListener('window:drop', ['$event'])
|
||||
public onDrop(event: any): any {
|
||||
if (!this.isFileDrag(event.dataTransfer)) {
|
||||
return;
|
||||
}
|
||||
const files = event.dataTransfer.files;
|
||||
this.fileSelected.emit(files);
|
||||
event.preventDefault();
|
||||
|
|
@ -66,4 +85,34 @@ export class FileUploadForDirective {
|
|||
this.elementRef.nativeElement.value = '';
|
||||
this.dragOver = false;
|
||||
}
|
||||
|
||||
private isFileDrag(dataTransfer: DataTransfer): boolean {
|
||||
if (0 >= dataTransfer.items.length) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// tslint:disable-next-line: prefer-for-of
|
||||
for (let i = 0; i < dataTransfer.items.length; i++) {
|
||||
const element = dataTransfer.items[i];
|
||||
if ('file' !== element.kind) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
private isEventInElement(event: DragEvent): boolean {
|
||||
const rect: DOMRect = this.elementRef.nativeElement.getBoundingClientRect();
|
||||
|
||||
if (
|
||||
event.pageX >= rect.left &&
|
||||
event.pageX <= rect.left + rect.width &&
|
||||
event.pageY >= rect.top &&
|
||||
event.pageY <= rect.top + rect.height
|
||||
) {
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user