添加聊天窗口的最大化,最小化功能

app/candy.component.css

@@ -164,4 +164,13 @@
 .roster-pane .user {
     display: inherit;
     opacity: inherit;
+}
+
+.hover-color{
+    color:#a7a7a7;
+    padding:0 5px;
+}
+
+.hover-color:hover{
+    color:#000;
 }
\ No newline at end of file

app/candy.component.html

-<div id="candy"></div>
\ No newline at end of file
+<div id="candy" data-MinOrMax="default">
+
+</div>
+<div style="position:absolute; top:5px; right:10px;">
+    <i id="minimized" class="fa fa-minus hover-color" (click)="minimized()" data-size=""></i>
+    <i id="maximized" class="fa fa-expand hover-color"  (click)="maximized()"  onclick=""></i>
+</div>
\ No newline at end of file

app/candy.component.ts

@@ -219,6 +219,9 @@ export class CandyComponent implements OnInit, OnChanges {
     jid: string;
     password: string;
     nickname: string;
+    // ismin_window:Boolean=false;
+    // ismax_window:Boolean=false;
+    height_default_window:string="230px";
 
     constructor(private loginService: LoginService, private settingsService: SettingsService, private element: ElementRef) {
     }
@@ -234,11 +237,12 @@ export class CandyComponent implements OnInit, OnChanges {
         // 很 Tricky 的加载 Candy 的 css，这里涉及图片等资源的相对路径引用问题，如果丢给 Angular 去加载，会让相对路径找不到
         const element = document.createElement('style');
         element.innerHTML = `
+            @import "node_modules/font-awesome/css/font-awesome.min.css";
             @import "node_modules/candy/libs.min.css";
             @import "node_modules/candy/res/default.css";
             @import "node_modules/candy-shop/notifyme/candy.css";
             @import "node_modules/candy-shop/namecomplete/candy.css";
-            @import "node_modules/candy-shop/modify-role/candy.css"
+            @import "node_modules/candy-shop/modify-role/candy.css";
         `;
         shadow.insertBefore(element, shadow.firstChild);
 
@@ -310,9 +314,60 @@ export class CandyComponent implements OnInit, OnChanges {
         }
     }
 
-    // ngOnDestroy () {
-    //     if (Candy.Core.getConnection()) {
-    //         Candy.Core.disconnect();
-    //     }
-    // }
+    minimized():void{
+        let minimized:HTMLElement = $('#minimized')[0];
+        let maximized:HTMLElement = $('#maximized')[0];
+        if($('#candy').attr('data-minormax')!='min'){
+            $('#candy').attr('data-minormax','min');
+            document.getElementById('candy-wrapper')!.style.height='31px';
+            $('#mobile-roster-icon').css('display','none');
+            $('#chat-toolbar').css('display','none');
+            $('#chat-rooms').css('display','none');
+            $('#context-menu').css('display','none');
+            $('#mobile-roster-icon').css('display','none');
+            $(minimized).addClass('fa-clone');
+            $(minimized).removeClass('fa-minus');
+            $(maximized).removeClass('fa-clone');
+            $(maximized).addClass('fa-expand');
+        }else{
+            $('#candy').attr('data-minormax','default');
+            document.getElementById('candy-wrapper')!.style!.height=this.height_default_window;
+            $('#mobile-roster-icon').css('display','block');
+            $('#chat-toolbar').css('display','block');
+            $('#chat-rooms').css('display','block');
+            $('#context-menu').css('display','block');
+            $('#mobile-roster-icon').css('display','block');
+            $(minimized).removeClass('fa-clone');
+            $(minimized).addClass('fa-minus');
+        }
+    }
+
+    maximized():void{
+        let minimized:HTMLElement = $('#minimized')[0];
+        let maximized:HTMLElement = $('#maximized')[0];
+        if($('#candy').attr('data-minormax')!='max'){
+            $('#candy').attr('data-minormax','max');
+            document.getElementById('candy-wrapper')!.style!.height="calc( 100% - 180px )";
+            $('#mobile-roster-icon').css('display','block');
+            $('#chat-toolbar').css('display','block');
+            $('#chat-rooms').css('display','block');
+            $('#context-menu').css('display','block');
+            $('#mobile-roster-icon').css('display','block');
+            $(minimized).removeClass('fa-clone');
+            $(minimized).addClass('fa-minus');
+            $(maximized).removeClass('fa-expand');
+            $(maximized).addClass('fa-clone');
+        }else{
+            $('#candy').attr('data-minormax','default');
+            $(maximized).removeClass('fa-clone');
+            $(maximized).addClass('fa-expand');
+            document.getElementById('candy-wrapper')!.style!.height=this.height_default_window;
+        }
+    }
 }
+
+
+
+
+
+

app/lobby.component.html

@@ -79,7 +79,7 @@
         <roster class="scroll"></roster>
     </div>
 
-    <div id="candy-wrapper" class="resize-wrapper resize-top">
+    <div id="candy-wrapper" class="resize-wrapper resize-top" style="max-height: calc( 100% - 180px )">
         <div class="resize" (mousedown)="mousedown($event)"></div>
         <candy *ngIf="currentApp" [currentApp]="currentApp"></candy>
     </div>

app/lobby.component.ts

@@ -85,13 +85,48 @@ export class LobbyComponent implements OnInit {
                 this.resizing.style.width = `${width}px`;
             } else {
                 let height = this.offset - event.clientY;
-                if (height < 236) {
-                    height = 236;
-                }
-                if (height > 540) {
-                    height = 540;
+                let main_height=event.clientY-document.getElementById('navbar')!.clientHeight;
+
+                let minimized: HTMLElement = $('#minimized')[0];
+                let maximized: HTMLElement = $('#maximized')[0];
+                console.log(event.clientY);
+                if (height > 150 && main_height>180) {
+                    if (height < 230) {
+                        height = 230;
+                    }
+                    this.resizing.style.height = `${height}px`;
+                    if($('#candy').attr('data-minormax')!='default') {
+                        $('#candy').attr('data-minormax', 'default');
+                        $('#mobile-roster-icon').css('display', 'block');
+                        $('#chat-toolbar').css('display', 'block');
+                        $('#chat-rooms').css('display', 'block');
+                        $('#context-menu').css('display', 'block');
+                        $('#mobile-roster-icon').css('display', 'block');
+                        $(minimized).removeClass('fa-clone');
+                        $(minimized).addClass('fa-minus');
+                        $(maximized).removeClass('fa-clone');
+                        $(maximized).addClass('fa-expand');
+                    }
+                }else if(height<=150){
+                    $('#candy').attr('data-minormax','min');
+                    this.resizing.style.height='31px';
+                    $('#mobile-roster-icon').css('display','none');
+                    $('#chat-toolbar').css('display','none');
+                    $('#chat-rooms').css('display','none');
+                    $('#context-menu').css('display','none');
+                    $('#mobile-roster-icon').css('display','none');
+                    $(minimized).addClass('fa-clone');
+                    $(minimized).removeClass('fa-minus');
+                    $(maximized).removeClass('fa-clone');
+                    $(maximized).addClass('fa-expand');
+                }else if(main_height<=180){
+                    $('#candy').attr('data-minormax','max');
+                    this.resizing.style.height='calc( 100% - 180px )';
+                    $(minimized).removeClass('fa-clone');
+                    $(minimized).addClass('fa-minus');
+                    $(maximized).removeClass('fa-expand');
+                    $(maximized).addClass('fa-clone');
                 }
-                this.resizing.style.height = `${height}px`;
             }
         });
         document.addEventListener('mouseup', (event: MouseEvent) => {