purchasing/fuse-angular
3
0
Fork 0
mirror of https://github.com/richard-loafle/fuse-angular.git synced 2025-11-04 09:23:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

helpers page done...

Browse Source
This commit is contained in:
Sercan Yemen 2017-08-03 14:34:33 +03:00
parent 09cd8b497b
commit c02856396f
12 changed files with 551 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/app/core/components/navigation/navigation.model.ts
View File

@ -258,6 +258,12 @@ export class FuseNavigation
'icon' : 'text_fields',
'url' : '/ui/typography'
},
{
'title': 'Helper Classes',
'type' : 'nav-item',
'icon' : 'help',
'url' : '/ui/helper-classes'
},
{
'title' : 'Page Layouts',
'type' : 'nav-collapse',

38
src/app/main/content/ui/helper-classes/helper-classes.component.html Normal file
View File

@ -0,0 +1,38 @@
<div id="helper-classes" class="page-layout simple tabbed" fxLayout="column">
<!-- HEADER -->
<div class="header md-accent-bg p-24 h-160" fxLayout="row" fxLayoutAlign="start center">
<div fxLayout="column" fxLayoutAlign="center start">
<div class="black-fg" fxLayout="row" fxLayoutAlign="start center">
<md-icon class="secondary-text s-16">home</md-icon>
<md-icon class="secondary-text s-16">chevron_right</md-icon>
<span class="secondary-text">User Interface</span>
</div>
<div class="h2 mt-16">Helper Classes</div>
</div>
</div>
<!-- / HEADER -->
<!-- CONTENT -->
<div class="content">
<md-tab-group md-dynamic-height="true">
<md-tab label="Padding & Margin Helpers">
<fuse-helper-classes-padding-margin></fuse-helper-classes-padding-margin>
</md-tab>
<md-tab label="Width & Height Helpers">
<fuse-helper-classes-width-height></fuse-helper-classes-width-height>
</md-tab>
</md-tab-group>
</div>
<!-- / CONTENT -->
</div>

3
src/app/main/content/ui/helper-classes/helper-classes.component.scss Normal file
View File

@ -0,0 +1,3 @@
:host {
}

14
src/app/main/content/ui/helper-classes/helper-classes.component.ts Normal file
View File

@ -0,0 +1,14 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-helper-classes',
templateUrl: './helper-classes.component.html',
styleUrls : ['./helper-classes.component.scss']
})
export class HelperClassesComponent
{
constructor()
{
}
}

29
src/app/main/content/ui/helper-classes/helper-classes.module.ts Normal file
View File

@ -0,0 +1,29 @@
import { NgModule } from '@angular/core';
import { SharedModule } from '../../../../core/modules/shared.module';
import { RouterModule, Routes } from '@angular/router';
import { HelperClassesComponent } from './helper-classes.component';
import { HelperClassesPaddingMarginComponent } from './tabs/padding-margin/padding-margin.component';
import { HelperClassesWidthHeightComponent } from './tabs/width-height/width-height.component';
const routes: Routes = [
{
path : 'ui/helper-classes',
component: HelperClassesComponent
}
];
@NgModule({
imports : [
SharedModule,
RouterModule.forChild(routes)
],
declarations: [
HelperClassesComponent,
HelperClassesPaddingMarginComponent,
HelperClassesWidthHeightComponent
]
})
export class UIHelperClassesModule
{
}

225
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.html Normal file
View File

@ -0,0 +1,225 @@
<div id="helper-classes-padding-margin" class="p-24">
<div class="mat-title">Padding Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>p-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-0">No padding</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>p-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-4">4px padding</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>p-12</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="p-12">12px padding</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Direction Specific Padding Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>pt-0</span>
<span>pr-0</span>
<span>pb-0</span>
<span>pl-0</span>
<span>px-0</span>
<span>py-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="pt-0">0 padding from top</span>
<span class="pr-0">0 padding from right</span>
<span class="pb-0">0 padding from bottom</span>
<span class="pl-0">0 padding from left</span>
<span class="px-0">0 padding from left and right</span>
<span class="py-0">0 padding from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>pt-4</span>
<span>pr-4</span>
<span>pb-4</span>
<span>pl-4</span>
<span>px-4</span>
<span>py-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="pt-4">4px padding from top</span>
<span class="pr-4">4px padding from right</span>
<span class="pb-4">4px padding from bottom</span>
<span class="pl-4">4px padding from left</span>
<span class="px-4">4px padding from left and right</span>
<span class="py-4">4px padding from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Margin Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>m-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-0">No margin</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>m-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-4">4px margin</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>m-12</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="m-12">12px margin</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Direction Specific Margin Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>mt-0</span>
<span>mr-0</span>
<span>mb-0</span>
<span>ml-0</span>
<span>mx-0</span>
<span>my-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mt-0">0 margin from top</span>
<span class="mr-0">0 margin from right</span>
<span class="mb-0">0 margin from bottom</span>
<span class="ml-0">0 margin from left</span>
<span class="mx-0">0 margin from left and right</span>
<span class="my-0">0 margin from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:256, Multiples of 4</div>
<span>mt-4</span>
<span>mr-4</span>
<span>mb-4</span>
<span>ml-4</span>
<span>mx-4</span>
<span>my-4</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="mt-4">4px margin from top</span>
<span class="mr-4">4px margin from right</span>
<span class="mb-4">4px margin from bottom</span>
<span class="ml-4">4px margin from left</span>
<span class="mx-4">4px margin from left and right</span>
<span class="my-4">4px margin from top and bottom</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.scss Normal file
View File

@ -0,0 +1,31 @@
:host {
#helper-classes-padding-margin {
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;
code {
background: none !important;
}
}
.preview {
font-size: 16px;
padding: 16px;
margin-bottom: 24px;
min-height: 180px;
&:last-child {
margin-bottom: 0;
}
.mat-caption {
margin-bottom: 16px;
}
}
}
}

15
src/app/main/content/ui/helper-classes/tabs/padding-margin/padding-margin.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-helper-classes-padding-margin',
templateUrl: './padding-margin.component.html',
styleUrls : ['./padding-margin.component.scss']
})
export class HelperClassesPaddingMarginComponent
{
constructor()
{
}
}

141
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.html Normal file
View File

@ -0,0 +1,141 @@
<div id="helper-classes-width-height" class="p-24">
<div class="mat-title">Width Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>w-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-0">0px width</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
<span>w-100</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-100">100px width</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>w-25-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-25-p">25% width</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>w-100-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="w-100-p">100% width</span>
</textarea>
</fuse-hljs>
</div>
</div>
<div class="mat-title mt-20">Height Helpers</div>
<div class="md-white-bg mat-elevation-z4 p-24" fxLayout="column">
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<span>h-0</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-0">0px height</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:512, Multiples of 4</div>
<span>h-100</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-100">100px height</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>h-25-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-25-p">25% height</span>
</textarea>
</fuse-hljs>
</div>
<div fxLayout="column" fxLayout.gt-md="row">
<div class="preview" fxLayout="column" fxLayoutAlign="center" fxFlex="50">
<div class="mat-caption mb-16">Min:0 - Max:100, Multiples of 5</div>
<span>h-100-p</span>
</div>
<fuse-hljs lang="html" class="source-code" fxLayout="column" fxLayoutAlign="center"
fxFlex="50">
<textarea #source hidden="hidden">
<span class="h-100-p">100% height</span>
</textarea>
</fuse-hljs>
</div>
</div>
</div>

31
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.scss Normal file
View File

@ -0,0 +1,31 @@
:host {
#helper-classes-width-height {
.source-code {
position: relative;
background: #F3F4F6;
margin-bottom: 24px;
min-height: 180px;
code {
background: none !important;
}
}
.preview {
font-size: 16px;
padding: 16px;
margin-bottom: 24px;
min-height: 180px;
&:last-child {
margin-bottom: 0;
}
.mat-caption {
margin-bottom: 16px;
}
}
}
}

15
src/app/main/content/ui/helper-classes/tabs/width-height/width-height.component.ts Normal file
View File

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector : 'fuse-helper-classes-width-height',
templateUrl: './width-height.component.html',
styleUrls : ['./width-height.component.scss']
})
export class HelperClassesWidthHeightComponent
{
constructor()
{
}
}

4
src/app/main/content/ui/ui.module.ts
View File

@ -3,12 +3,14 @@ import { NgModule } from '@angular/core';
import { UIPageLayoutsModule } from './page-layouts/page-layouts.module';
import { UIColorsModule } from './colors/colors.module';
import { UITypographyModule } from './typography/typography.module';
import { UIHelperClassesModule } from './helper-classes/helper-classes.module';
@NgModule({
imports: [
UIColorsModule,
UIPageLayoutsModule,
UITypographyModule
UITypographyModule,
UIHelperClassesModule
]
})
export class UIModule