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

(E-Commerce) Matched search fields styles to the rest of the apps

Browse Source 
(Contacts) Search field doesn't span to the full width of its container
This commit is contained in:
sercan 2018-10-11 19:27:38 +03:00
parent 06c8903f91
commit eeed00b30e
11 changed files with 122 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app/app.theme.scss
View File

@ -86,6 +86,8 @@ $typography: mat-typography-config(
@import "src/app/main/apps/chat/chat.theme"; @import "src/app/main/apps/chat/chat.theme";
@import "src/app/main/apps/contacts/contacts.theme"; @import "src/app/main/apps/contacts/contacts.theme";
@import "src/app/main/apps/dashboards/project/project.theme"; @import "src/app/main/apps/dashboards/project/project.theme";
@import "src/app/main/apps/e-commerce/orders/orders.theme";
@import "src/app/main/apps/e-commerce/products/products.theme";
@import "src/app/main/apps/file-manager/file-manager.theme"; @import "src/app/main/apps/file-manager/file-manager.theme";
@import "src/app/main/apps/mail/mail.theme"; @import "src/app/main/apps/mail/mail.theme";
@import "src/app/main/apps/mail-ngrx/mail.theme"; @import "src/app/main/apps/mail-ngrx/mail.theme";
@ -134,6 +136,8 @@ $typography: mat-typography-config(
@include chat-theme($theme); @include chat-theme($theme);
@include contacts-theme($theme); @include contacts-theme($theme);
@include dashboards-project-theme($theme); @include dashboards-project-theme($theme);
@include e-commerce-orders-theme($theme);
@include e-commerce-products-theme($theme);
@include file-manager-theme($theme); @include file-manager-theme($theme);
@include mail-theme($theme); @include mail-theme($theme);
@include mail-ngrx-theme($theme); @include mail-ngrx-theme($theme);

2
src/app/main/apps/contacts/contacts.component.html
View File

@ -29,7 +29,7 @@
<div class="search-wrapper mt-16 mt-sm-0"> <div class="search-wrapper mt-16 mt-sm-0">
<div class="search" flex fxLayout="row" fxLayoutAlign="start center"> <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon>search</mat-icon> <mat-icon>search</mat-icon>
<input [formControl]="searchInput" placeholder="Search for a contact"> <input [formControl]="searchInput" placeholder="Search for a contact">
</div> </div>

3
src/app/main/apps/contacts/contacts.component.scss
View File

@ -18,6 +18,7 @@
padding: 0 18px; padding: 0 18px;
input { input {
width: 100%;
height: 48px; height: 48px;
min-height: 48px; min-height: 48px;
max-height: 48px; max-height: 48px;
@ -39,4 +40,4 @@
} }
} }
} }
} }

12
src/app/main/apps/e-commerce/orders/orders.component.html
View File

@ -15,7 +15,7 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div class="logo mb-24 mb-sm-0" <div class="logo mb-24 mb-sm-0"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}"> <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
shopping_basket shopping_basket
</mat-icon> </mat-icon>
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span> <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">Orders</span>
@ -23,11 +23,11 @@
<!-- / APP TITLE --> <!-- / APP TITLE -->
<!-- SEARCH --> <!-- SEARCH -->
<div class="search-input-wrapper ml-sm-32" fxFlex="1 0 auto" fxLayout="row" fxLayoutAlign="start center"> <div class="search-wrapper ml-sm-32">
<label for="search" class="mr-8"> <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="secondary-text s-18">search</mat-icon> <mat-icon>search</mat-icon>
</label> <input #filter placeholder="Search for an order">
<input id="search" #filter placeholder="Search"> </div>
</div> </div>
<!-- / SEARCH --> <!-- / SEARCH -->

37
src/app/main/apps/e-commerce/orders/orders.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
:host { e-commerce-orders {
#orders { #orders {
@ -15,32 +15,33 @@
> .header { > .header {
.search-input-wrapper { .search-wrapper {
width: 100%;
max-width: 480px; max-width: 480px;
height: 42px; border-radius: 28px;
max-height: 42px; overflow: hidden;
min-height: 42px; @include mat-elevation(1);
border-radius: 21px;
padding: 0 16px;
background: white;
@include media-breakpoint('xs') { @include media-breakpoint('xs') {
width: 100%; width: 100%;
} }
label { .search {
width: 18px; width: 100%;
height: 18px; height: 48px;
line-height: 48px;
padding: 0 18px;
mat-icon { input {
color: rgba(0, 0, 0, 0.54) !important; width: 100%;
height: 48px;
min-height: 48px;
max-height: 48px;
padding: 0 16px;
border: none;
outline: none;
} }
} }
#search {
border: none;
background: none;
}
} }
@include media-breakpoint('xs') { @include media-breakpoint('xs') {

13
src/app/main/apps/e-commerce/orders/orders.component.ts
View File

@ -1,7 +1,7 @@
import { Component, ElementRef, OnDestroy, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, OnDestroy, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material'; import { MatPaginator, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { merge, Observable, BehaviorSubject, fromEvent, Subject } from 'rxjs'; import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators'; import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
import { fuseAnimations } from '@fuse/animations'; import { fuseAnimations } from '@fuse/animations';
@ -11,10 +11,11 @@ import { EcommerceOrdersService } from 'app/main/apps/e-commerce/orders/orders.s
import { takeUntil } from 'rxjs/internal/operators'; import { takeUntil } from 'rxjs/internal/operators';
@Component({ @Component({
selector : 'e-commerce-orders', selector : 'e-commerce-orders',
templateUrl: './orders.component.html', templateUrl : './orders.component.html',
styleUrls : ['./orders.component.scss'], styleUrls : ['./orders.component.scss'],
animations : fuseAnimations animations : fuseAnimations,
encapsulation: ViewEncapsulation.None
}) })
export class EcommerceOrdersComponent implements OnInit, OnDestroy export class EcommerceOrdersComponent implements OnInit, OnDestroy
{ {

27
src/app/main/apps/e-commerce/orders/orders.theme.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin e-commerce-orders-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
e-commerce-orders {
.header {
.search-wrapper {
background: map-get($background, card);
.search {
.mat-icon {
color: map-get($foreground, icon);
}
input {
background: map-get($background, card);
color: map-get($foreground, text);
}
}
}
}
}
}

13
src/app/main/apps/e-commerce/products/products.component.html
View File

@ -15,7 +15,7 @@
<!-- APP TITLE --> <!-- APP TITLE -->
<div class="logo mb-24 mb-md-0" <div class="logo mb-24 mb-md-0"
fxLayout="row" fxLayoutAlign="start center"> fxLayout="row" fxLayoutAlign="start center">
<mat-icon class="logo-icon s-40 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}"> <mat-icon class="logo-icon s-32 mr-16" [@animate]="{value:'*',params:{delay:'50ms',scale:'0.2'}}">
shopping_basket shopping_basket
</mat-icon> </mat-icon>
<span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}"> <span class="logo-text h1" [@animate]="{value:'*',params:{delay:'100ms',x:'-25px'}}">
@ -25,12 +25,11 @@
<!-- / APP TITLE --> <!-- / APP TITLE -->
<!-- SEARCH --> <!-- SEARCH -->
<div class="search-input-wrapper mx-32 mx-md-0" fxFlex="1 0 auto" fxLayout="row" <div class="search-wrapper mx-32 mx-md-0">
fxLayoutAlign="start center"> <div class="search" fxFlex fxLayout="row" fxLayoutAlign="start center">
<label for="search" class="mr-8"> <mat-icon>search</mat-icon>
<mat-icon class="secondary-text s-18">search</mat-icon> <input #filter placeholder="Search for a product">
</label> </div>
<input id="search" #filter placeholder="Search">
</div> </div>
<!-- / SEARCH --> <!-- / SEARCH -->

39
src/app/main/apps/e-commerce/products/products.component.scss
View File

@ -1,6 +1,6 @@
@import "src/@fuse/scss/fuse"; @import "src/@fuse/scss/fuse";
:host { e-commerce-products {
#products { #products {
@ -15,32 +15,33 @@
> .header { > .header {
.search-input-wrapper { .search-wrapper {
width: 100%;
max-width: 480px; max-width: 480px;
height: 42px; border-radius: 28px;
max-height: 42px; overflow: hidden;
min-height: 42px; @include mat-elevation(1);
border-radius: 21px;
padding: 0 16px;
background: white;
@include media-breakpoint('lt-md') { @include media-breakpoint('xs') {
width: 100%; width: 100%;
} }
label { .search {
width: 18px; width: 100%;
height: 18px; height: 48px;
line-height: 48px;
padding: 0 18px;
mat-icon { input {
color: rgba(0, 0, 0, 0.54) !important; width: 100%;
height: 48px;
min-height: 48px;
max-height: 48px;
padding: 0 16px;
border: none;
outline: none;
} }
} }
#search {
border: none;
background: none;
}
} }
@include media-breakpoint('lt-md') { @include media-breakpoint('lt-md') {

5
src/app/main/apps/e-commerce/products/products.component.ts
View File

@ -1,4 +1,4 @@
import { Component, ElementRef, OnInit, ViewChild } from '@angular/core'; import { Component, ElementRef, OnInit, ViewChild, ViewEncapsulation } from '@angular/core';
import { MatPaginator, MatSort } from '@angular/material'; import { MatPaginator, MatSort } from '@angular/material';
import { DataSource } from '@angular/cdk/collections'; import { DataSource } from '@angular/cdk/collections';
import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs'; import { BehaviorSubject, fromEvent, merge, Observable, Subject } from 'rxjs';
@ -14,7 +14,8 @@ import { takeUntil } from 'rxjs/internal/operators';
selector : 'e-commerce-products', selector : 'e-commerce-products',
templateUrl : './products.component.html', templateUrl : './products.component.html',
styleUrls : ['./products.component.scss'], styleUrls : ['./products.component.scss'],
animations : fuseAnimations animations : fuseAnimations,
encapsulation: ViewEncapsulation.None
}) })
export class EcommerceProductsComponent implements OnInit export class EcommerceProductsComponent implements OnInit
{ {

27
src/app/main/apps/e-commerce/products/products.theme.scss Normal file
View File

@ -0,0 +1,27 @@
@mixin e-commerce-products-theme($theme) {
$background: map-get($theme, background);
$foreground: map-get($theme, foreground);
e-commerce-products {
.header {
.search-wrapper {
background: map-get($background, card);
.search {
.mat-icon {
color: map-get($foreground, icon);
}
input {
background: map-get($background, card);
color: map-get($foreground, text);
}
}
}
}
}
}