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

Updated Flex Layout package

Browse Source 
+ Fixed: Fuse sidebar doesn't scroll when the custom scrollbars disabled
+ Fixed: Expanded search bar style
This commit is contained in:
Sercan Yemen 2018-03-31 12:03:21 +03:00
parent 174789930d
commit bd67b660c8
5 changed files with 69 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
package-lock.json generated
View File

@ -185,9 +185,9 @@
} }
}, },
"@angular/flex-layout": { "@angular/flex-layout": {
"version": "5.0.0-beta.13", "version": "5.0.0-beta.14",
"resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.13.tgz", "resolved": "https://registry.npmjs.org/@angular/flex-layout/-/flex-layout-5.0.0-beta.14.tgz",
"integrity": "sha1-ga1q1GEAOUbnxSKSCCGla6cpKoU=", "integrity": "sha512-/fsOqXFUKdCmzzZx0bZ0HCYwcV+BSbVuIgOhaCrZKHj2rqiWKKPgj1ErU3HMT68bBBGag0u0skTdLGtrBorRIA==",
"requires": { "requires": {
"tslib": "1.9.0" "tslib": "1.9.0"
} }
@ -578,7 +578,7 @@
"requires": { "requires": {
"angular-draggable-droppable": "2.0.0", "angular-draggable-droppable": "2.0.0",
"angular-resizable-element": "2.0.0", "angular-resizable-element": "2.0.0",
"calendar-utils": "0.1.1", "calendar-utils": "0.1.2",
"date-fns": "1.29.0", "date-fns": "1.29.0",
"positioning": "1.3.1", "positioning": "1.3.1",
"tslib": "1.9.0" "tslib": "1.9.0"
@ -1678,9 +1678,9 @@
"dev": true "dev": true
}, },
"calendar-utils": { "calendar-utils": {
"version": "0.1.1", "version": "0.1.2",
"resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.1.1.tgz", "resolved": "https://registry.npmjs.org/calendar-utils/-/calendar-utils-0.1.2.tgz",
"integrity": "sha512-75JPgUK7l7OTg4ZptJMuuIoQzLndc4tcGhBCFtEONr0AMlD7zFVZthOC6Sf29K8r81A1+BJ/tDIFlElgY4XFFw==" "integrity": "sha512-9j4Zd1itopNYTSWzFU4MqD2IDHMqznfxsGr8UWGh7hWv+lKzjRJz0LS29iAg5rHtP6+6x3ikQnhoMGqFUzoD2Q=="
}, },
"callsite": { "callsite": {
"version": "1.0.0", "version": "1.0.0",
@ -2145,7 +2145,7 @@
}, },
"compression": { "compression": {
"version": "1.7.2", "version": "1.7.2",
"resolved": "https://registry.npmjs.org/compression/-/compression-1.7.2.tgz", "resolved": "http://registry.npmjs.org/compression/-/compression-1.7.2.tgz",
"integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=", "integrity": "sha1-qv+81qr4VLROuygDU9WtFlH1mmk=",
"dev": true, "dev": true,
"requires": { "requires": {
@ -11161,7 +11161,7 @@
"minimist": "1.2.0", "minimist": "1.2.0",
"mkdirp": "0.5.1", "mkdirp": "0.5.1",
"source-map": "0.6.1", "source-map": "0.6.1",
"source-map-support": "0.5.3" "source-map-support": "0.5.4"
}, },
"dependencies": { "dependencies": {
"minimist": { "minimist": {
@ -11177,9 +11177,9 @@
"dev": true "dev": true
}, },
"source-map-support": { "source-map-support": {
"version": "0.5.3", "version": "0.5.4",
"resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.3.tgz", "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.4.tgz",
"integrity": "sha512-eKkTgWYeBOQqFGXRfKabMFdnWepo51vWqEdoeikaEPFiJC7MCU5j2h4+6Q8npkZTeLGbSyecZvRxiSoWl3rh+w==", "integrity": "sha512-PETSPG6BjY1AHs2t64vS2aqAgu6dMIMXJULWFBGbh2Gr8nVLbCFDo6i/RMMvviIQ2h1Z8+5gQhVKSn2je9nmdg==",
"dev": true, "dev": true,
"requires": { "requires": {
"source-map": "0.6.1" "source-map": "0.6.1"

2
package.json
View File

@ -24,7 +24,7 @@
"@angular/common": "5.2.8", "@angular/common": "5.2.8",
"@angular/compiler": "5.2.8", "@angular/compiler": "5.2.8",
"@angular/core": "5.2.8", "@angular/core": "5.2.8",
"@angular/flex-layout": "5.0.0-beta.13", "@angular/flex-layout": "5.0.0-beta.14",
"@angular/forms": "5.2.8", "@angular/forms": "5.2.8",
"@angular/http": "5.2.8", "@angular/http": "5.2.8",
"@angular/material": "5.2.4", "@angular/material": "5.2.4",

10
src/@fuse/components/search-bar/search-bar.component.html
View File

@ -1,5 +1,7 @@
<div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}" fxFlex="0 1 auto"> <div class="fuse-search-bar" [ngClass]="{'expanded':!collapsed}">
<div [ngClass]="toolbarColor" fxLayout="row" fxLayoutAlign="start center" fxFlex>
<div class="fuse-search-bar-content" [ngClass]="toolbarColor">
<label for="fuse-search-bar-input"> <label for="fuse-search-bar-input">
<button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()" <button mat-icon-button class="fuse-search-bar-expander" aria-label="Expand Search Bar" (click)="expand()"
*ngIf="collapsed"> *ngIf="collapsed">
@ -10,7 +12,8 @@
</span>--> </span>-->
</label> </label>
<input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)" fxFlex> <input id="fuse-search-bar-input" class="ml-24" type="text" placeholder="Search" (input)="search($event)"
fxFlex>
<button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()" <button mat-icon-button class="fuse-search-bar-collapser mat-icon-button" (click)="collapse()"
aria-label="Collapse Search Bar"> aria-label="Collapse Search Bar">
@ -18,4 +21,5 @@
</button> </button>
</div> </div>
</div> </div>

80
src/@fuse/components/search-bar/search-bar.component.scss
View File

@ -3,6 +3,8 @@
:host { :host {
.fuse-search-bar { .fuse-search-bar {
display: flex;
flex: 0 1 auto;
min-width: 64px; min-width: 64px;
height: 64px; height: 64px;
font-size: 13px; font-size: 13px;
@ -11,40 +13,49 @@
height: 56px; height: 56px;
} }
.fuse-search-bar-expander, .fuse-search-bar-content {
.fuse-search-bar-collapser { display: flex;
cursor: pointer; flex: 1 1 auto;
padding: 0 20px; align-items: center;
margin: 0; justify-content: flex-start;
width: 64px !important;
height: 64px !important;
line-height: 64px !important;
@include media-breakpoint-down('sm') { .fuse-search-bar-expander,
height: 56px !important; .fuse-search-bar-collapser {
line-height: 56px !important; cursor: pointer;
padding: 0 20px;
margin: 0;
width: 64px !important;
height: 64px !important;
line-height: 64px !important;
@include media-breakpoint-down('sm') {
height: 56px !important;
line-height: 56px !important;
}
} }
}
.fuse-search-bar-loader { .fuse-search-bar-loader {
width: 64px !important; width: 64px !important;
height: 64px !important; height: 64px !important;
line-height: 64px !important; line-height: 64px !important;
@include media-breakpoint-down('sm') {
height: 56px !important; @include media-breakpoint-down('sm') {
line-height: 56px !important; height: 56px !important;
line-height: 56px !important;
}
} }
}
.fuse-search-bar-collapser { .fuse-search-bar-collapser {
display: none; display: none;
} }
#fuse-search-bar-input { #fuse-search-bar-input {
display: none; display: none;
min-height: 64px; flex: 1 0 auto;
background-color: transparent; min-height: 64px;
font-size: 16px; background-color: transparent;
font-size: 16px;
}
} }
&.expanded { &.expanded {
@ -55,12 +66,15 @@
left: 0; left: 0;
z-index: 10; z-index: 10;
#fuse-search-bar-input { .fuse-search-bar-content {
display: block;
}
.fuse-search-bar-collapser { #fuse-search-bar-input {
display: block; display: flex;
}
.fuse-search-bar-collapser {
display: flex;
}
} }
} }
} }

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

@ -5,7 +5,8 @@ fuse-sidebar {
position: absolute; position: absolute;
top: 0; top: 0;
bottom: 0; bottom: 0;
overflow: hidden; overflow-x: hidden;
overflow-y: auto;
width: 280px; width: 280px;
min-width: 280px; min-width: 280px;
max-width: 280px; max-width: 280px;