purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-01-10 04:25:08 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'master' into skeleton

Browse Source
This commit is contained in:
Sercan Yemen 2018-07-12 11:09:48 +03:00
commit 2f0d1e406f
13 changed files with 149 additions and 110 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/@fuse/components/sidebar/sidebar.component.scss
View File

@ -1,3 +1,5 @@
@import "src/@fuse/scss/fuse";
fuse-sidebar {
display: flex;
flex-direction: column;
@ -14,6 +16,12 @@ fuse-sidebar {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
background: white;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
max-width: 80vw !important;
width: 80vw !important;
}
&.left-positioned {
left: 0;
transform: translateX(-100%);

16
src/app/app.component.ts
View File

@ -1,4 +1,6 @@
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Component, Inject, OnDestroy, OnInit } from '@angular/core';
import { DOCUMENT } from '@angular/common';
import { Platform } from '@angular/cdk/platform';
import { TranslateService } from '@ngx-translate/core';
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
/**
* Constructor
*
* @param {DOCUMENT} document
* @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService
* @param {FuseSplashScreenService} _fuseSplashScreenService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {Platform} _platform
* @param {TranslateService} _translateService
*/
constructor(
@Inject(DOCUMENT) private document: any,
private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService,
private _fuseSplashScreenService: FuseSplashScreenService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _translateService: TranslateService
private _translateService: TranslateService,
private _platform: Platform
)
{
// Get default navigation
@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
// Use a language
this._translateService.use('en');
// Add is-mobile class to the body if the platform is mobile
if ( this._platform.ANDROID || this._platform.IOS )
{
this.document.body.className += ' is-mobile';
}
// Set the private defaults
this._unsubscribeAll = new Subject();
}

22
src/app/layout/components/chat-panel/chat-panel.component.html
View File

@ -31,23 +31,23 @@
<div>
<!-- Contacts -->
<mat-list id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<div id="contacts-list" fusePerfectScrollbar [fusePerfectScrollbarOptions]="{suppressScrollX: true}">
<mat-list-item *ngFor="let contact of contacts"
[ngClass]="contact.status"
[class.active]="contact.id === selectedContact?.id"
(click)="goToChat(contact)"
[matTooltip]="contact.name"
matTooltipPosition="left"
matRipple>
<div *ngFor="let contact of contacts"
class="contacts-list-item"
[ngClass]="contact.status"
[class.active]="contact.id === selectedContact?.id"
(click)="goToChat(contact)">
<img matListAvatar [src]="contact.avatar">
<img class="avatar" [src]="contact.avatar"
[matTooltip]="contact.name"
matTooltipPosition="left">
<div class="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
<div class="status-icon" [ngClass]="contact.status"></div>
</mat-list-item>
</div>
</mat-list>
</div>
<!-- / Contacts -->
<!-- Chat -->

95
src/app/layout/components/chat-panel/chat-panel.component.scss
View File

@ -34,6 +34,7 @@ chat-panel {
width: 72px;
min-width: 72px;
max-width: 72px;
-webkit-overflow-scrolling: touch;
// Perfect scrollbar
.ps__rail-y {
@ -44,9 +45,14 @@ chat-panel {
}
}
.mat-list-item {
cursor: pointer;
.contacts-list-item {
position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
height: 56px;
cursor: pointer;
&.active {
background-color: mat-color(mat-palette($mat-grey, 300));
@ -68,50 +74,51 @@ chat-panel {
}
}
.mat-list-item-content {
.avatar {
margin: 0;
}
.unread-count {
position: absolute;
min-width: 18px;
height: 18px;
top: 4px;
left: 10px;
border-radius: 9px;
padding: 0 5px;
font-size: 11px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: mat-color(mat-palette($mat-indigo));
color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
.unread-count {
position: absolute;
min-width: 18px;
height: 18px;
top: 4px;
left: 10px;
border-radius: 9px;
padding: 0 5px;
font-size: 11px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
background-color: mat-color(mat-palette($mat-indigo));
color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35);
}
.status-icon {
position: absolute;
width: 12px;
height: 12px;
bottom: 3px;
left: 44px;
border: 2px solid white;
border-radius: 50%;
&.online {
background-color: #4CAF50;
}
.status-icon {
position: absolute;
width: 12px;
height: 12px;
bottom: 3px;
left: 44px;
border: 2px solid white;
border-radius: 50%;
&.do-not-disturb {
background-color: #F44336;
}
&.online {
background-color: #4CAF50;
}
&.away {
background-color: #FFC107;
}
&.do-not-disturb {
background-color: #F44336;
}
&.away {
background-color: #FFC107;
}
&.offline {
background-color: #646464;
}
&.offline {
background-color: #646464;
}
}
}
@ -337,6 +344,12 @@ fuse-sidebar {
min-width: 360px;
max-width: 360px;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
max-width: 100vw !important;
width: 100vw !important;
}
// Folded
&.folded {

2
src/app/layout/components/chat-panel/chat-panel.component.ts
View File

@ -124,7 +124,7 @@ export class ChatPanelComponent implements OnInit, AfterViewInit, OnDestroy
this._replyForm.reset();
// Focus to the reply input
this._replyInput.nativeElement.focus();
// this._replyInput.nativeElement.focus();
// Scroll to the bottom of the messages list
if ( this._chatViewScrollbar )

3
src/app/layout/components/chat-panel/chat-panel.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatListModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
import { MatButtonModule, MatFormFieldModule, MatIconModule, MatInputModule, MatRippleModule, MatTabsModule, MatTooltipModule } from '@angular/material';
import { FuseSharedModule } from '@fuse/shared.module';
@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
MatFormFieldModule,
MatIconModule,
MatInputModule,
MatListModule,
MatTabsModule,
MatTooltipModule,
MatRippleModule,

1
src/app/layout/components/navbar/navbar.component.scss
View File

@ -1,5 +1,6 @@
navbar {
display: flex;
flex-direction: column;
flex: 1 1 auto;
width: 100%;
}

75
src/app/layout/components/navbar/vertical/style-1/style-1.component.scss
View File

@ -1,60 +1,63 @@
@import "src/@fuse/scss/fuse";
fuse-sidebar {
overflow: hidden;
&.folded:not(.unfolded) {
&.navbar-fuse-sidebar {
overflow: hidden;
navbar {
&.folded:not(.unfolded) {
navbar-vertical-style-1 {
navbar {
.navbar-top {
padding: 12px 0;
justify-content: center;
navbar-vertical-style-1 {
.buttons {
display: none;
}
.navbar-top {
padding: 12px 0;
justify-content: center;
.logo {
.logo-icon {
width: 32px;
height: 32px;
}
.logo-text {
.buttons {
display: none;
}
.logo {
.logo-icon {
width: 32px;
height: 32px;
}
.logo-text {
display: none;
}
}
}
}
.navbar-scroll-container {
.navbar-scroll-container {
.user {
padding: 12px 0;
.user {
padding: 12px 0;
.avatar-container {
position: relative;
top: auto;
padding: 0;
.avatar-container {
position: relative;
top: auto;
padding: 0;
.avatar {
width: 40px;
height: 40px;
.avatar {
width: 40px;
height: 40px;
}
}
.username,
.email {
display: none;
}
}
.username,
.email {
display: none;
.navbar-content {
margin-top: 0;
}
}
.navbar-content {
margin-top: 0;
}
}
}
}

23
src/app/layout/components/navbar/vertical/style-2/style-2.component.scss
View File

@ -1,22 +1,25 @@
@import "src/@fuse/scss/fuse";
fuse-sidebar {
overflow: hidden;
&.folded:not(.unfolded) {
&.navbar-fuse-sidebar {
overflow: hidden;
navbar {
&.folded:not(.unfolded) {
navbar-vertical-style-2 {
navbar {
.navbar-header {
padding: 0 13px;
navbar-vertical-style-2 {
.logo {
.navbar-header {
padding: 0 13px;
.logo-text {
opacity: 0;
transition: opacity 200ms ease;
.logo {
.logo-text {
opacity: 0;
transition: opacity 200ms ease;
}
}
}
}

2
src/app/layout/horizontal/layout-1/layout-1.component.html
View File

@ -99,7 +99,7 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar name="navbar"
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant"

4
src/app/layout/vertical/layout-1/layout-1.component.html
View File

@ -101,7 +101,7 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar name="navbar"
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
@ -113,7 +113,7 @@
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right"
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">

4
src/app/layout/vertical/layout-2/layout-2.component.html
View File

@ -101,7 +101,7 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar name="navbar"
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
@ -113,7 +113,7 @@
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right"
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">

4
src/app/layout/vertical/layout-3/layout-3.component.html
View File

@ -87,7 +87,7 @@
<!-- LEFT NAVBAR -->
<ng-template #leftNavbar>
<fuse-sidebar name="navbar"
<fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">
@ -99,7 +99,7 @@
<!-- RIGHT NAVBAR -->
<ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right"
<fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden">