Commit fde26724 authored by 2breakegg's avatar 2breakegg

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

parent f19ab53e
......@@ -165,3 +165,12 @@
display: inherit;
opacity: inherit;
}
.hover-color{
color:#a7a7a7;
padding:0 5px;
}
.hover-color:hover{
color:#000;
}
\ No newline at end of file
<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
......@@ -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;
}
}
}
......@@ -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>
......
......@@ -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');
}
}
});
document.addEventListener('mouseup', (event: MouseEvent) => {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment