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 { fuse-sidebar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -14,6 +16,12 @@ fuse-sidebar {
box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35); box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.35);
background: white; background: white;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
max-width: 80vw !important;
width: 80vw !important;
}
&.left-positioned { &.left-positioned {
left: 0; left: 0;
transform: translateX(-100%); 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 { TranslateService } from '@ngx-translate/core';
import { Subject } from 'rxjs'; import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators'; import { takeUntil } from 'rxjs/operators';
@ -29,20 +31,24 @@ export class AppComponent implements OnInit, OnDestroy
/** /**
* Constructor * Constructor
* *
* @param {DOCUMENT} document
* @param {FuseConfigService} _fuseConfigService * @param {FuseConfigService} _fuseConfigService
* @param {FuseNavigationService} _fuseNavigationService * @param {FuseNavigationService} _fuseNavigationService
* @param {FuseSidebarService} _fuseSidebarService * @param {FuseSidebarService} _fuseSidebarService
* @param {FuseSplashScreenService} _fuseSplashScreenService * @param {FuseSplashScreenService} _fuseSplashScreenService
* @param {FuseTranslationLoaderService} _fuseTranslationLoaderService * @param {FuseTranslationLoaderService} _fuseTranslationLoaderService
* @param {Platform} _platform
* @param {TranslateService} _translateService * @param {TranslateService} _translateService
*/ */
constructor( constructor(
@Inject(DOCUMENT) private document: any,
private _fuseConfigService: FuseConfigService, private _fuseConfigService: FuseConfigService,
private _fuseNavigationService: FuseNavigationService, private _fuseNavigationService: FuseNavigationService,
private _fuseSidebarService: FuseSidebarService, private _fuseSidebarService: FuseSidebarService,
private _fuseSplashScreenService: FuseSplashScreenService, private _fuseSplashScreenService: FuseSplashScreenService,
private _fuseTranslationLoaderService: FuseTranslationLoaderService, private _fuseTranslationLoaderService: FuseTranslationLoaderService,
private _translateService: TranslateService private _translateService: TranslateService,
private _platform: Platform
) )
{ {
// Get default navigation // Get default navigation
@ -66,6 +72,12 @@ export class AppComponent implements OnInit, OnDestroy
// Use a language // Use a language
this._translateService.use('en'); 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 // Set the private defaults
this._unsubscribeAll = new Subject(); this._unsubscribeAll = new Subject();
} }

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

@ -31,23 +31,23 @@
<div> <div>
<!-- Contacts --> <!-- 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" <div *ngFor="let contact of contacts"
[ngClass]="contact.status" class="contacts-list-item"
[class.active]="contact.id === selectedContact?.id" [ngClass]="contact.status"
(click)="goToChat(contact)" [class.active]="contact.id === selectedContact?.id"
[matTooltip]="contact.name" (click)="goToChat(contact)">
matTooltipPosition="left"
matRipple>
<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="unread-count" *ngIf="contact.unread">{{contact.unread}}</div>
<div class="status-icon" [ngClass]="contact.status"></div> <div class="status-icon" [ngClass]="contact.status"></div>
</mat-list-item> </div>
</mat-list> </div>
<!-- / Contacts --> <!-- / Contacts -->
<!-- Chat --> <!-- Chat -->

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

@ -34,6 +34,7 @@ chat-panel {
width: 72px; width: 72px;
min-width: 72px; min-width: 72px;
max-width: 72px; max-width: 72px;
-webkit-overflow-scrolling: touch;
// Perfect scrollbar // Perfect scrollbar
.ps__rail-y { .ps__rail-y {
@ -44,9 +45,14 @@ chat-panel {
} }
} }
.mat-list-item { .contacts-list-item {
cursor: pointer;
position: relative; position: relative;
display: flex;
align-items: center;
justify-content: center;
padding: 0 16px;
height: 56px;
cursor: pointer;
&.active { &.active {
background-color: mat-color(mat-palette($mat-grey, 300)); background-color: mat-color(mat-palette($mat-grey, 300));
@ -68,50 +74,51 @@ chat-panel {
} }
} }
.mat-list-item-content { .avatar {
margin: 0;
}
.unread-count { .unread-count {
position: absolute; position: absolute;
min-width: 18px; min-width: 18px;
height: 18px; height: 18px;
top: 4px; top: 4px;
left: 10px; left: 10px;
border-radius: 9px; border-radius: 9px;
padding: 0 5px; padding: 0 5px;
font-size: 11px; font-size: 11px;
text-align: center; text-align: center;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: mat-color(mat-palette($mat-indigo)); background-color: mat-color(mat-palette($mat-indigo));
color: white; color: white;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.35); 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 { &.do-not-disturb {
position: absolute; background-color: #F44336;
width: 12px; }
height: 12px;
bottom: 3px;
left: 44px;
border: 2px solid white;
border-radius: 50%;
&.online { &.away {
background-color: #4CAF50; background-color: #FFC107;
} }
&.do-not-disturb { &.offline {
background-color: #F44336; background-color: #646464;
}
&.away {
background-color: #FFC107;
}
&.offline {
background-color: #646464;
}
} }
} }
} }
@ -337,6 +344,12 @@ fuse-sidebar {
min-width: 360px; min-width: 360px;
max-width: 360px; max-width: 360px;
@include media-breakpoint-down('xs') {
min-width: 0 !important;
max-width: 100vw !important;
width: 100vw !important;
}
// Folded // Folded
&.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(); this._replyForm.reset();
// Focus to the reply input // Focus to the reply input
this._replyInput.nativeElement.focus(); // this._replyInput.nativeElement.focus();
// Scroll to the bottom of the messages list // Scroll to the bottom of the messages list
if ( this._chatViewScrollbar ) 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 { 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'; import { FuseSharedModule } from '@fuse/shared.module';
@ -18,7 +18,6 @@ import { ChatPanelService } from 'app/layout/components/chat-panel/chat-panel.se
MatFormFieldModule, MatFormFieldModule,
MatIconModule, MatIconModule,
MatInputModule, MatInputModule,
MatListModule,
MatTabsModule, MatTabsModule,
MatTooltipModule, MatTooltipModule,
MatRippleModule, MatRippleModule,

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

@ -1,5 +1,6 @@
navbar { navbar {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1 1 auto;
width: 100%; 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"; @import "src/@fuse/scss/fuse";
fuse-sidebar { fuse-sidebar {
overflow: hidden;
&.folded:not(.unfolded) { &.navbar-fuse-sidebar {
overflow: hidden;
navbar { &.folded:not(.unfolded) {
navbar-vertical-style-1 { navbar {
.navbar-top { navbar-vertical-style-1 {
padding: 12px 0;
justify-content: center;
.buttons { .navbar-top {
display: none; padding: 12px 0;
} justify-content: center;
.logo { .buttons {
.logo-icon {
width: 32px;
height: 32px;
}
.logo-text {
display: none; display: none;
} }
.logo {
.logo-icon {
width: 32px;
height: 32px;
}
.logo-text {
display: none;
}
}
} }
}
.navbar-scroll-container { .navbar-scroll-container {
.user { .user {
padding: 12px 0; padding: 12px 0;
.avatar-container { .avatar-container {
position: relative; position: relative;
top: auto; top: auto;
padding: 0; padding: 0;
.avatar { .avatar {
width: 40px; width: 40px;
height: 40px; height: 40px;
}
}
.username,
.email {
display: none;
} }
} }
.username, .navbar-content {
.email { margin-top: 0;
display: none;
} }
} }
.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"; @import "src/@fuse/scss/fuse";
fuse-sidebar { fuse-sidebar {
overflow: hidden;
&.folded:not(.unfolded) { &.navbar-fuse-sidebar {
overflow: hidden;
navbar { &.folded:not(.unfolded) {
navbar-vertical-style-2 { navbar {
.navbar-header { navbar-vertical-style-2 {
padding: 0 13px;
.logo { .navbar-header {
padding: 0 13px;
.logo-text { .logo {
opacity: 0;
transition: opacity 200ms ease; .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 --> <!-- LEFT NAVBAR -->
<ng-template #leftNavbar> <ng-template #leftNavbar>
<fuse-sidebar name="navbar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
<navbar [variant]="fuseConfig.layout.navbar.variant" <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 --> <!-- LEFT NAVBAR -->
<ng-template #leftNavbar> <ng-template #leftNavbar>
<fuse-sidebar name="navbar" <fuse-sidebar name="navbar" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">
@ -113,7 +113,7 @@
<!-- RIGHT NAVBAR --> <!-- RIGHT NAVBAR -->
<ng-template #rightNavbar> <ng-template #rightNavbar>
<fuse-sidebar name="navbar" position="right" <fuse-sidebar name="navbar" position="right" class="navbar-fuse-sidebar"
[folded]="fuseConfig.layout.navbar.folded" [folded]="fuseConfig.layout.navbar.folded"
lockedOpen="gt-md" lockedOpen="gt-md"
*ngIf="!fuseConfig.layout.navbar.hidden"> *ngIf="!fuseConfig.layout.navbar.hidden">

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

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

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

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