Skip to content

M
moecube
Commit fde26724 authored by 2breakegg's avatar 2breakegg
Browse files
Options

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

parent f19ab53e
Hide whitespace changes
Inline Side-by-side
Showing with 119 additions and 14 deletions
app/candy.component.css
View file @ fde26724
...@@ -164,4 +164,13 @@ ...@@ -164,4 +164,13 @@
.roster-pane .user { .roster-pane .user {
display: inherit; display: inherit;
opacity: 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
View file @ fde26724
<div id="candy"></div> <div id="candy" data-MinOrMax="default">
\ No newline at end of file
</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
View file @ fde26724
...@@ -219,6 +219,9 @@ export class CandyComponent implements OnInit, OnChanges { ...@@ -219,6 +219,9 @@ export class CandyComponent implements OnInit, OnChanges {
jid: string; jid: string;
password: string; password: string;
nickname: 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) { constructor(private loginService: LoginService, private settingsService: SettingsService, private element: ElementRef) {
} }
...@@ -234,11 +237,12 @@ export class CandyComponent implements OnInit, OnChanges { ...@@ -234,11 +237,12 @@ export class CandyComponent implements OnInit, OnChanges {
// 很 Tricky 的加载 Candy 的 css，这里涉及图片等资源的相对路径引用问题，如果丢给 Angular 去加载，会让相对路径找不到 // 很 Tricky 的加载 Candy 的 css，这里涉及图片等资源的相对路径引用问题，如果丢给 Angular 去加载，会让相对路径找不到
const element = document.createElement('style'); const element = document.createElement('style');
element.innerHTML = ` element.innerHTML = `
@import "node_modules/font-awesome/css/font-awesome.min.css";
@import "node_modules/candy/libs.min.css"; @import "node_modules/candy/libs.min.css";
@import "node_modules/candy/res/default.css"; @import "node_modules/candy/res/default.css";
@import "node_modules/candy-shop/notifyme/candy.css"; @import "node_modules/candy-shop/notifyme/candy.css";
@import "node_modules/candy-shop/namecomplete/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); shadow.insertBefore(element, shadow.firstChild);
...@@ -310,9 +314,60 @@ export class CandyComponent implements OnInit, OnChanges { ...@@ -310,9 +314,60 @@ export class CandyComponent implements OnInit, OnChanges {
} }
} }
// ngOnDestroy () { minimized():void{
// if (Candy.Core.getConnection()) { let minimized:HTMLElement = $('#minimized')[0];
// Candy.Core.disconnect(); 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
View file @ fde26724
...@@ -79,7 +79,7 @@ ...@@ -79,7 +79,7 @@
<roster class="scroll"></roster> <roster class="scroll"></roster>
</div> </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> <div class="resize" (mousedown)="mousedown($event)"></div>
<candy *ngIf="currentApp" [currentApp]="currentApp"></candy> <candy *ngIf="currentApp" [currentApp]="currentApp"></candy>
</div> </div>
......
app/lobby.component.ts
View file @ fde26724
...@@ -85,13 +85,48 @@ export class LobbyComponent implements OnInit { ...@@ -85,13 +85,48 @@ export class LobbyComponent implements OnInit {
this.resizing.style.width = `${width}px`; this.resizing.style.width = `${width}px`;
} else { } else {
let height = this.offset - event.clientY; let height = this.offset - event.clientY;
if (height < 236) { let main_height=event.clientY-document.getElementById('navbar')!.clientHeight;
height = 236;
} let minimized: HTMLElement = $('#minimized')[0];
if (height > 540) { let maximized: HTMLElement = $('#maximized')[0];
height = 540; 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) => { 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