mirror of
https://github.com/richard-loafle/fuse-angular.git
synced 2025-12-23 18:27:07 +00:00
Compare commits
8 Commits
v6.2.1-ske
...
v6.2.3
| Author | SHA1 | Date | |
|---|---|---|---|
|
b2ceb02709 | ||
|
|
ffbd000fe2 | ||
|
|
b6ebd2b839 | ||
|
|
4d4d52ba05 | ||
|
|
251732f221 | ||
|
|
1c34a65034 | ||
|
|
b8803a055f | ||
|
|
6b8cd41d5e |
2
package-lock.json
generated
2
package-lock.json
generated
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fuse",
|
||||
"version": "6.2.1",
|
||||
"version": "6.2.3",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"dependencies": {
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "fuse",
|
||||
"version": "6.2.1",
|
||||
"version": "6.2.3",
|
||||
"license": "https://themeforest.net/licenses/terms/regular",
|
||||
"scripts": {
|
||||
"ng": "ng",
|
||||
|
||||
@@ -132,6 +132,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- VERTICAL LAYOUT #2 -->
|
||||
@@ -226,6 +243,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- VERTICAL LAYOUT #3 -->
|
||||
@@ -318,6 +352,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<!-- HORIZONTAL LAYOUT #1 -->
|
||||
@@ -405,6 +456,23 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- SIDE PANEL -->
|
||||
<div class="group" formGroupName="sidepanel">
|
||||
|
||||
<h2>Side Panel</h2>
|
||||
|
||||
<mat-slide-toggle formControlName="hidden">
|
||||
Hide
|
||||
</mat-slide-toggle>
|
||||
|
||||
<h3 class="mt-24">Position:</h3>
|
||||
<mat-radio-group fxLayout="column" fxLayoutAlign="start start" formControlName="position">
|
||||
<mat-radio-button class="mb-12" value="left">Left</mat-radio-button>
|
||||
<mat-radio-button class="mb-12" value="right">Right</mat-radio-button>
|
||||
</mat-radio-group>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</ng-container>
|
||||
|
||||
@@ -71,7 +71,7 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
position : new FormControl(),
|
||||
variant : new FormControl()
|
||||
}),
|
||||
toolbar: this._formBuilder.group({
|
||||
toolbar : this._formBuilder.group({
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl()
|
||||
@@ -80,6 +80,10 @@ export class FuseThemeOptionsComponent implements OnInit, OnDestroy
|
||||
background: new FormControl(),
|
||||
hidden : new FormControl(),
|
||||
position : new FormControl()
|
||||
}),
|
||||
sidepanel: this._formBuilder.group({
|
||||
hidden: new FormControl(),
|
||||
position : new FormControl()
|
||||
})
|
||||
}),
|
||||
customScrollbars: new FormControl()
|
||||
|
||||
@@ -19,6 +19,10 @@ export interface FuseConfig
|
||||
background: string,
|
||||
hidden: boolean,
|
||||
position: 'above' | 'above-static' | 'above-fixed' | 'below' | 'below-static' | 'below-fixed'
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: boolean,
|
||||
position: 'left' | 'right'
|
||||
}
|
||||
};
|
||||
customScrollbars: boolean;
|
||||
|
||||
@@ -20,6 +20,8 @@
|
||||
|
||||
<!-- THEME OPTIONS PANEL -->
|
||||
<button mat-icon-button class="mat-primary-bg mat-elevation-z2 theme-options-button"
|
||||
[ngClass]="{'right-side-panel': fuseConfig.layout.sidepanel.position === 'right',
|
||||
'side-panel-hidden': fuseConfig.layout.sidepanel.hidden === true}"
|
||||
(click)="toggleSidebarOpen('themeOptionsPanel')">
|
||||
<mat-icon>settings</mat-icon>
|
||||
</button>
|
||||
|
||||
@@ -11,7 +11,7 @@
|
||||
.theme-options-button {
|
||||
position: absolute;
|
||||
top: 160px;
|
||||
right: 70px;
|
||||
right: 0;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
line-height: 48px;
|
||||
@@ -23,8 +23,15 @@
|
||||
opacity: .90;
|
||||
z-index: 998;
|
||||
|
||||
@include media-breakpoint-down('md') {
|
||||
right: 0;
|
||||
&.right-side-panel {
|
||||
|
||||
@include media-breakpoint-up('lg') {
|
||||
right: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
&.side-panel-hidden {
|
||||
right: 0 !important;
|
||||
}
|
||||
|
||||
mat-icon {
|
||||
|
||||
@@ -19,7 +19,7 @@ export const fuseConfig: FuseConfig = {
|
||||
position : 'left',
|
||||
variant : 'vertical-style-1'
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
background: 'mat-white-500-bg',
|
||||
hidden : false,
|
||||
position : 'below-static'
|
||||
@@ -28,6 +28,10 @@ export const fuseConfig: FuseConfig = {
|
||||
background: 'mat-fuse-dark-900-bg',
|
||||
hidden : false,
|
||||
position : 'below-fixed'
|
||||
},
|
||||
sidepanel: {
|
||||
hidden : false,
|
||||
position: 'right'
|
||||
}
|
||||
},
|
||||
customScrollbars: true
|
||||
|
||||
@@ -2,7 +2,8 @@
|
||||
|
||||
<ng-container *ngIf="selectedContact === null">
|
||||
|
||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center">
|
||||
<div class="title ml-16" fxLayout="row" fxLayoutAlign="start center"
|
||||
(click)="unfoldSidebarTemporarily()">
|
||||
<mat-icon class="s-32 white-fg">chat</mat-icon>
|
||||
<h3 class="ml-12">Team Chat</h3>
|
||||
</div>
|
||||
@@ -18,17 +19,19 @@
|
||||
|
||||
</ng-container>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily()" fxHide fxShow.gt-md>
|
||||
<mat-icon class="secondary-text s-20">arrow_forward</mat-icon>
|
||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="foldSidebarTemporarily();resetChat();"
|
||||
fxHide fxShow.gt-md>
|
||||
<mat-icon class="secondary-text s-20">close</mat-icon>
|
||||
</button>
|
||||
|
||||
<button mat-icon-button class="toggle-sidebar-folded mr-8" (click)="toggleSidebarOpen()" fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">arrow_forward</mat-icon>
|
||||
<button mat-icon-button class="toggle-sidebar-open mr-8" (click)="toggleSidebarOpen();resetChat();"
|
||||
fxHide.gt-md>
|
||||
<mat-icon class="secondary-text">close</mat-icon>
|
||||
</button>
|
||||
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="content">
|
||||
|
||||
<!-- Contacts -->
|
||||
<div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
|
||||
@@ -37,7 +40,7 @@
|
||||
class="contacts-list-item"
|
||||
[ngClass]="contact.status"
|
||||
[class.active]="contact.id === selectedContact?.id"
|
||||
(click)="goToChat(contact)">
|
||||
(click)="toggleChat(contact)">
|
||||
|
||||
<img class="avatar" [src]="contact.avatar"
|
||||
[matTooltip]="contact.name"
|
||||
@@ -78,7 +81,7 @@
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="chat && chat.dialog && chat.dialog.length === 0">
|
||||
<ng-container *ngIf="selectedContact && chat && chat.dialog && chat.dialog.length === 0">
|
||||
|
||||
<div class="no-messages-icon">
|
||||
<mat-icon class="s-128">chat</mat-icon>
|
||||
@@ -87,11 +90,29 @@
|
||||
<div class="no-messages secondary-text">
|
||||
Start a conversation by typing your message below.
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngIf="!selectedContact">
|
||||
|
||||
<div class="no-contact-selected">
|
||||
|
||||
<div class="no-contact-icon">
|
||||
<mat-icon class="s-128">chat</mat-icon>
|
||||
</div>
|
||||
|
||||
<div class="no-contact secondary-text">
|
||||
Select a contact to start a conversation.
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</ng-container>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center">
|
||||
<div class="reply-form" fxFlex="0 0 auto" fxLayout="row" fxLayoutAlign="center center"
|
||||
*ngIf="selectedContact">
|
||||
|
||||
<form #replyForm="ngForm"
|
||||
(ngSubmit)="reply($event)"
|
||||
|
||||
@@ -10,12 +10,20 @@ chat-panel {
|
||||
z-index: 99;
|
||||
overflow: hidden;
|
||||
|
||||
@include media-breakpoint-down('xs') {
|
||||
max-width: none !important;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.header {
|
||||
position: relative;
|
||||
height: 64px;
|
||||
max-height: 64px;
|
||||
min-height: 64px;
|
||||
z-index: 10;
|
||||
|
||||
.title {
|
||||
cursor: pointer;
|
||||
|
||||
mat-icon {
|
||||
margin-left: 4px;
|
||||
@@ -26,14 +34,23 @@ chat-panel {
|
||||
transition: opacity 300ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.content {
|
||||
flex: 1 1 100%;
|
||||
min-height: 0;
|
||||
}
|
||||
|
||||
#contacts-list {
|
||||
padding: 8px 0;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
padding: 16px 0;
|
||||
overflow: auto;
|
||||
width: 72px;
|
||||
min-width: 72px;
|
||||
max-width: 72px;
|
||||
background-color: #F9F9F9;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
// Perfect scrollbar
|
||||
@@ -55,8 +72,24 @@ chat-panel {
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
@include mat-elevation(2);
|
||||
position: relative;
|
||||
background-color: mat-color(mat-palette($mat-indigo, 50));
|
||||
|
||||
.status-icon {
|
||||
border-color: mat-color(mat-palette($mat-indigo, 50));
|
||||
}
|
||||
|
||||
&:after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 0;
|
||||
bottom: 8px;
|
||||
content: "";
|
||||
width: 4px;
|
||||
border-top-left-radius: 4px;
|
||||
border-bottom-left-radius: 4px;
|
||||
background-color: mat-color(mat-palette($mat-indigo));
|
||||
}
|
||||
}
|
||||
|
||||
&.offline {
|
||||
@@ -76,14 +109,17 @@ chat-panel {
|
||||
|
||||
.avatar {
|
||||
margin: 0;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
min-width: 32px;
|
||||
}
|
||||
|
||||
.unread-count {
|
||||
position: absolute;
|
||||
min-width: 18px;
|
||||
height: 18px;
|
||||
top: 4px;
|
||||
left: 10px;
|
||||
top: 8px;
|
||||
left: 12px;
|
||||
border-radius: 9px;
|
||||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
@@ -100,9 +136,9 @@ chat-panel {
|
||||
position: absolute;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
bottom: 3px;
|
||||
bottom: 10px;
|
||||
left: 44px;
|
||||
border: 2px solid white;
|
||||
border: 2px solid #F9F9F9;
|
||||
border-radius: 50%;
|
||||
|
||||
&.online {
|
||||
@@ -125,7 +161,11 @@ chat-panel {
|
||||
}
|
||||
|
||||
#chat {
|
||||
background-color: mat-color(mat-palette($mat-grey, 300));
|
||||
position: relative;
|
||||
z-index: 7;
|
||||
flex: 1 1 100%;
|
||||
background-color: white;
|
||||
box-shadow: -1px 0 2px 0 rgba(0, 0, 0, 0.25);
|
||||
|
||||
.messages {
|
||||
position: relative;
|
||||
@@ -152,6 +192,7 @@ chat-panel {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 12px;
|
||||
max-width: 100%;
|
||||
|
||||
.message {
|
||||
white-space: pre-wrap;
|
||||
@@ -165,6 +206,7 @@ chat-panel {
|
||||
font-size: 11px;
|
||||
margin-top: 8px;
|
||||
top: 100%;
|
||||
left: 0;
|
||||
color: $black-87-opacity;
|
||||
white-space: nowrap;
|
||||
}
|
||||
@@ -212,7 +254,7 @@ chat-panel {
|
||||
|
||||
.bubble {
|
||||
margin-left: auto;
|
||||
background-color: #FFFFFF;
|
||||
background-color: #E0E0E0;
|
||||
color: $black-87-opacity;
|
||||
|
||||
border-top-left-radius: 20px;
|
||||
@@ -292,12 +334,34 @@ chat-panel {
|
||||
padding: 0 16px 24px 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.no-contact-selected {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transform: translateY(-50%);
|
||||
padding: 0 24px;
|
||||
text-align: center;
|
||||
|
||||
.no-contact-icon {
|
||||
|
||||
mat-icon {
|
||||
color: rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
}
|
||||
|
||||
.no-contact {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.reply-form {
|
||||
position: relative;
|
||||
|
||||
.message-text {
|
||||
background-color: #E0E0E0;
|
||||
padding: 16px 8px;
|
||||
|
||||
.mat-form-field-wrapper {
|
||||
@@ -350,6 +414,20 @@ fuse-sidebar {
|
||||
width: 100vw !important;
|
||||
}
|
||||
|
||||
&.left-chat-panel {
|
||||
|
||||
.header {
|
||||
|
||||
.toggle-sidebar-folded,
|
||||
.toggle-sidebar-open {
|
||||
|
||||
mat-icon {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Folded
|
||||
&.folded {
|
||||
|
||||
|
||||
@@ -142,14 +142,6 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
// @ Public methods
|
||||
// -----------------------------------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* Toggle sidebar folded status
|
||||
*/
|
||||
toggleSidebarFolded(): void
|
||||
{
|
||||
this._fuseSidebarService.getSidebar('chatPanel').toggleFold();
|
||||
}
|
||||
|
||||
/**
|
||||
* Fold the temporarily unfolded sidebar back
|
||||
*/
|
||||
@@ -214,11 +206,23 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
}
|
||||
|
||||
/**
|
||||
* Go to chat with the contact
|
||||
* Toggle chat with the contact
|
||||
*
|
||||
* @param contact
|
||||
*/
|
||||
goToChat(contact): void
|
||||
toggleChat(contact): void
|
||||
{
|
||||
// If the contact equals to the selectedContact,
|
||||
// that means we will deselect the contact and
|
||||
// unload the chat
|
||||
if ( this.selectedContact && contact.id === this.selectedContact.id )
|
||||
{
|
||||
// Reset
|
||||
this.resetChat();
|
||||
}
|
||||
// Otherwise, we will select the contact, open
|
||||
// the sidebar and start the chat
|
||||
else
|
||||
{
|
||||
// Unfold the sidebar temporarily
|
||||
this.unfoldSidebarTemporarily();
|
||||
@@ -236,6 +240,19 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
|
||||
this._prepareChatForReplies();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Remove the selected contact and unload the chat
|
||||
*/
|
||||
resetChat(): void
|
||||
{
|
||||
// Set the selected contact as null
|
||||
this.selectedContact = null;
|
||||
|
||||
// Set the chat as null
|
||||
this.chat = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Reply
|
||||
|
||||
@@ -3,4 +3,5 @@ navbar {
|
||||
flex-direction: column;
|
||||
flex: 1 1 auto;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
@@ -41,6 +41,8 @@ fuse-sidebar {
|
||||
position: relative;
|
||||
top: auto;
|
||||
padding: 0;
|
||||
transform: translateX(0);
|
||||
left: auto;
|
||||
|
||||
.avatar {
|
||||
width: 40px;
|
||||
@@ -79,11 +81,13 @@ navbar {
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 64px;
|
||||
max-height: 64px;
|
||||
height: 64px;
|
||||
padding: 12px 12px 12px 20px;
|
||||
|
||||
@include media-breakpoint('xs') {
|
||||
min-height: 56px;
|
||||
max-height: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
@@ -134,6 +138,8 @@ navbar {
|
||||
top: 92px;
|
||||
border-radius: 50%;
|
||||
padding: 8px;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
|
||||
.avatar {
|
||||
width: 72px;
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above -->
|
||||
@@ -55,13 +69,19 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above -->
|
||||
@@ -67,13 +81,19 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above fixed -->
|
||||
@@ -67,13 +81,19 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
|
||||
@@ -1,3 +1,17 @@
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'left'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="left" class="chat-panel left-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<div id="main" [ngClass]="{'boxed':fuseConfig.layout.width === 'boxed'}">
|
||||
|
||||
<!-- TOOLBAR: Above fixed -->
|
||||
@@ -53,13 +67,19 @@
|
||||
|
||||
</div>
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar class="chat-panel" name="chatPanel" position="right"
|
||||
<!-- SIDE PANEL -->
|
||||
<ng-container *ngIf="!fuseConfig.layout.sidepanel.hidden && fuseConfig.layout.sidepanel.position === 'right'">
|
||||
|
||||
<!-- CHAT PANEL -->
|
||||
<fuse-sidebar name="chatPanel" position="right" class="chat-panel right-chat-panel"
|
||||
[folded]="true" [foldedWidth]="70" [foldedAutoTriggerOnHover]="false"
|
||||
lockedOpen="gt-md">
|
||||
<chat-panel></chat-panel>
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
</fuse-sidebar>
|
||||
<!-- / CHAT PANEL -->
|
||||
|
||||
</ng-container>
|
||||
<!-- / SIDE PANEL -->
|
||||
|
||||
<!-- QUICK PANEL -->
|
||||
<fuse-sidebar name="quickPanel" position="right" class="quick-panel">
|
||||
|
||||
@@ -19,6 +19,75 @@
|
||||
|
||||
<div class="changelog">
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<!-- @ v6.2.3 -->
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<div class="entry">
|
||||
|
||||
<div class="title">
|
||||
<span class="version">v6.2.3</span>
|
||||
<span class="date">(2018-07-13)</span>
|
||||
</div>
|
||||
|
||||
<div class="groups">
|
||||
|
||||
<div class="fixed">
|
||||
<span class="title">Fixed</span>
|
||||
<ul>
|
||||
<li>(Navbar) Doesn't scroll on Firefox, IE & Edge</li>
|
||||
<li>(Navbar) IE11 style fixes</li>
|
||||
<li>(Chat Panel) IE11 style fixes</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="improved">
|
||||
<span class="title">Improved</span>
|
||||
<ul>
|
||||
<li>(Chat Panel) Style and logic tweaks</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<!-- @ v6.2.2 -->
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<div class="entry">
|
||||
|
||||
<div class="title">
|
||||
<span class="version">v6.2.2</span>
|
||||
<span class="date">(2018-07-12)</span>
|
||||
</div>
|
||||
|
||||
<div class="groups">
|
||||
|
||||
<div class="fixed">
|
||||
<span class="title">Fixed</span>
|
||||
<ul>
|
||||
<li>Added the missing 'is-mobile' check back to the AppComponent</li>
|
||||
<li>Scrollbar styles are being modified in some mobile devices</li>
|
||||
<li>(Chat Panel) Mobile scrolling and layout issues</li>
|
||||
<li>
|
||||
(Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
|
||||
prevent style leak
|
||||
</li>
|
||||
<li>(Toolbar) Removed unnecessary chat panel toggle method</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="improved">
|
||||
<span class="title">Improved</span>
|
||||
<ul>
|
||||
<li>(Skeleton) Removed chat panel from skeleton as it's more like an app</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
<!-- @ v6.2.1 -->
|
||||
<!-- --------------------------------------------------------------------------------------------- -->
|
||||
@@ -31,26 +100,27 @@
|
||||
|
||||
<div class="groups">
|
||||
|
||||
<div class="new">
|
||||
<span class="title">New</span>
|
||||
<ul>
|
||||
<li>
|
||||
(Layout) Added SidePanel position to the layout for controlling Chat Panel and possible
|
||||
other panels
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="fixed">
|
||||
<span class="title">Fixed</span>
|
||||
<ul>
|
||||
<ul>
|
||||
<li>Added the missing 'is-mobile' check back to the AppComponent</li>
|
||||
<li>Scrollbar styles are being modified in some mobile devices</li>
|
||||
<li>(Chat Panel) Mobile scrolling and layout issues</li>
|
||||
<li>
|
||||
(Navbar) Added classes to the Fuse Sidebar components that contains the navbar to
|
||||
prevent style leak
|
||||
</li>
|
||||
<li>(Toolbar) Removed unnecessary chat panel toggle method</li>
|
||||
</ul>
|
||||
<li>(Chat Panel) Mobile width issues</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<div class="improved">
|
||||
<span class="title">Improved</span>
|
||||
<ul>
|
||||
<li>(Skeleton) Removed chat panel from skeleton as it's more like an app</li>
|
||||
<li>Removed chat panel from auth pages using layout options</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
@@ -31,11 +31,14 @@ export class ForgotPassword2Component implements OnInit
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -31,11 +31,14 @@ export class ForgotPasswordComponent implements OnInit
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -31,11 +31,14 @@ export class LockComponent implements OnInit
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -31,11 +31,14 @@ export class Login2Component implements OnInit
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -31,11 +31,14 @@ export class LoginComponent implements OnInit
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -26,11 +26,14 @@ export class MailConfirmComponent
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -30,11 +30,14 @@ export class Register2Component implements OnInit, OnDestroy
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -30,11 +30,14 @@ export class RegisterComponent implements OnInit, OnDestroy
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -30,11 +30,14 @@ export class ResetPassword2Component implements OnInit, OnDestroy
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -30,11 +30,14 @@ export class ResetPasswordComponent implements OnInit, OnDestroy
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -37,11 +37,14 @@ export class ComingSoonComponent implements OnInit, OnDestroy
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -24,11 +24,14 @@ export class Error404Component
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -24,11 +24,14 @@ export class Error500Component
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -26,11 +26,14 @@ export class MaintenanceComponent
|
||||
navbar : {
|
||||
hidden: true
|
||||
},
|
||||
toolbar: {
|
||||
toolbar : {
|
||||
hidden: true
|
||||
},
|
||||
footer : {
|
||||
hidden: true
|
||||
},
|
||||
sidepanel: {
|
||||
hidden: true
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
@@ -849,7 +849,7 @@ export const navigation: FuseNavigation[] = [
|
||||
icon : 'update',
|
||||
url : '/documentation/changelog',
|
||||
badge: {
|
||||
title: '6.2.0',
|
||||
title: '6.2.3',
|
||||
bg : '#EC0C8E',
|
||||
fg : '#FFFFFF'
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user