Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2025-12-16 15:40:11 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat(ui-features): add the buttons page

Browse source
This commit is contained in:
Alexander Zhukov 2017-05-02 19:28:27 +03:00
parent 3d4cf8754f
commit 44318d9e25
9 changed files with 112 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

1
.angular-cli.json
View file

@ -18,6 +18,7 @@
"tsconfig": "tsconfig.app.json",
"testTsconfig": "tsconfig.spec.json",
"styles": [
"../node_modules/roboto-fontface/css/roboto/sass/roboto-fontface.scss",
"../node_modules/normalize.css/normalize.css",
"../node_modules/font-awesome/scss/font-awesome.scss",
"../node_modules/ionicons/scss/ionicons.scss",

1
package.json
View file

@ -43,6 +43,7 @@
"ionicons": "2.0.1",
"ng2-ckeditor": "1.1.6",
"normalize.css": "6.0.0",
"roboto-fontface": "0.7.0",
"rxjs": "5.1.1",
"tether": "1.4.0",
"tinymce": "4.5.7",

4
src/app/@shared/shared.module.ts
View file

@ -3,7 +3,7 @@ import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { NgaCardModule } from '@nga/theme';
import { CKEditorModule } from 'ng2-ckeditor';
import { NgaBootstrapModule } from '@nga/bootstrap';
@NgModule ({
exports: [
@ -12,7 +12,7 @@ import { CKEditorModule } from 'ng2-ckeditor';
ReactiveFormsModule,
RouterModule,
NgaCardModule,
CKEditorModule,
NgaBootstrapModule,
],
})
export class NgxSharedModule { }

11
src/app/@theme/styles/gorgeous/gorgeous.theme.scss
View file

@ -1,3 +1,8 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import '../components';
@import 'variables';
@ -5,7 +10,13 @@
@import 'overrides/all';
$theme-name: 'gorgeous';
// @nga/theme module styles
@include nga-theme($theme-name) {
@include nga-theme-overrides($theme-name);
@include custom-components-theme($theme-name);
}
// @nga/bootstrap module styles
@import '~@nga/bootstrap/styles/themes/nga.theme.default';
@include nga-bootstrap($theme-name);

11
src/app/@theme/styles/pure/pure.theme.scss
View file

@ -1,3 +1,8 @@
/**
* @license
* Copyright Akveo. All Rights Reserved.
* Licensed under the MIT License. See License.txt in the project root for license information.
*/
@import 'variables';
@import '../components';
@import 'overrides/all';
@ -5,7 +10,13 @@
@import '~@nga/theme/styles/themes/nga.theme.default';
$theme-name: 'pure';
// @nga/theme module styles
@include nga-theme($theme-name) {
@include nga-theme-overrides($theme-name);
@include custom-components-theme($theme-name);
}
// @nga/bootstrap module styles
@import '~@nga/bootstrap/styles/themes/nga.theme.default';
@include nga-bootstrap($theme-name);

2
src/app/pages/editors/editors.module.ts
View file

@ -1,4 +1,5 @@
import { NgModule } from '@angular/core';
import { CKEditorModule } from 'ng2-ckeditor';
import { NgxSharedModule } from '../../@shared/shared.module';
@ -8,6 +9,7 @@ import { NgxEditorsRoutingModule, routedComponents } from './editors-routing.mod
imports: [
NgxSharedModule,
NgxEditorsRoutingModule,
CKEditorModule,
],
declarations: [
...routedComponents,

10
src/app/pages/ui-features/buttons/buttons.component.html
View file

@ -5,7 +5,7 @@
Flat buttons
</nga-card-header>
<nga-card-body>
<ngx-flat-buttons></ngx-flat-buttons>
<ngx-flat-buttons class="button-panel"></ngx-flat-buttons>
</nga-card-body>
</nga-card>
</div>
@ -15,7 +15,7 @@
Raised buttons
</nga-card-header>
<nga-card-body>
<ngx-raised-buttons></ngx-raised-buttons>
<ngx-raised-buttons class="button-panel"></ngx-raised-buttons>
</nga-card-body>
</nga-card>
</div>
@ -25,7 +25,7 @@
Different sizes
</nga-card-header>
<nga-card-body>
<ngx-sized-buttons></ngx-sized-buttons>
<ngx-sized-buttons class="button-panel df-size-button-panel"></ngx-sized-buttons>
</nga-card-body>
</nga-card>
</div>
@ -35,7 +35,7 @@
Disabled
</nga-card-header>
<nga-card-body>
<ngx-disabled-buttons></ngx-disabled-buttons>
<ngx-disabled-buttons class="button-panel"></ngx-disabled-buttons>
</nga-card-body>
</nga-card>
</div>
@ -69,7 +69,7 @@
Large buttons
</nga-card-header>
<nga-card-body>
<ngx-large-buttons></ngx-large-buttons>
<ngx-large-buttons class="large-buttons-panel"></ngx-large-buttons>
</nga-card-body>
</nga-card>
</div>

112
src/app/pages/ui-features/buttons/buttons.component.scss
View file

@ -1,63 +1,79 @@
:host {
display: block;
font-size: 1rem;
/deep/ {
.basic-btns {
padding-top: 8px;
margin-bottom: -8px;
h5 {
line-height: 35px;
font-size: 12px;
&.row-sm {
line-height: 30px;
}
&.row-xs {
line-height: 22px;
}
}
& {
.row {
padding-bottom: 4px;
}
}
}
.btns-row {
& {
div {
margin-bottom: 12px;
}
}
}
.btns-same-width-sm {
.btn {
width: 48px;
}
}
.btns-same-width-md {
.btn {
width: 79px;
}
}
.btns-same-width-lg {
.btn {
width: 112px;
}
}
ul.btn-list {
margin: 0 0 0 -18px;
padding: 0;
padding-top: 6px;
clear: both;
li {
margin: 0 0 12px 18px;
ul {
&.btn-list {
margin: 0 0 0 -18px;
padding: 0;
list-style: none;
float: left;
padding-top: 6px;
clear: both;
li {
margin: 0 0 12px 18px;
padding: 0;
list-style: none;
float: left;
}
}
}
.btn-group-wrapper {
margin-bottom: 12px;
}
$btn-icon-size: 34px;
.btn-icon {
width: $btn-icon-size;
height: $btn-icon-size;
@ -65,64 +81,84 @@
padding: 0;
text-align: center;
}
.btn-group-example {
float: left;
margin-right: 30px;
margin-bottom: 12px;
}
.btn-toolbar-example {
float: left;
}
.progress-buttons-container {
text-align: center;
font-size: 16px;
span.button-title {
display: inline-block;
width: 100%;
line-height: 1;
font-size: 14px;
margin-bottom: 10px;
margin-top: 10px;
span {
.button-title {
display: inline-block;
width: 100%;
line-height: 1;
margin-bottom: 10px;
margin-top: 10px;
}
}
.row + .row {
margin-top: 30px;
}
}
.button-panel {
height: 315px;
.btn {
width: 150px;
}
}
.large-buttons-panel {
height: 202px;
}
.button-panel.df-size-button-panel {
.btn-xs {
width: 60px;
}
.btn-sm {
width: 90px;
}
.btn-mm {
width: 120px;
}
.btn-md {
width: 150px;
}
.btn-xm {
width: 175px;
}
.btn-lg {
width: 200px;
.button-panel {
&.df-size-button-panel {
.btn-xs {
width: 60px;
}
.btn-sm {
width: 90px;
}
.btn-mm {
width: 120px;
}
.btn-md {
width: 150px;
}
.btn-xm {
width: 175px;
}
.btn-lg {
width: 200px;
}
}
}
.button-wrapper {
text-align: center;
margin: 5px 0;
}
.btn-group.flex-dropdown {
display: flex;
.btn-group {
&.flex-dropdown {
display: flex;
}
}
}
}

13
yarn.lock
View file

@ -4662,6 +4662,10 @@ ripemd160@^1.0.0:
version "1.0.1"
resolved "https://registry.yarnpkg.com/ripemd160/-/ripemd160-1.0.1.tgz#93a4bbd4942bc574b69a8fa57c71de10ecca7d6e"
roboto-fontface@0.7.0:
version "0.7.0"
resolved "https://registry.yarnpkg.com/roboto-fontface/-/roboto-fontface-0.7.0.tgz#2f36464e5c99353e8427f55f1fca7be1a8a417d9"
rsvp@^3.0.17:
version "3.5.0"
resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-3.5.0.tgz#a62c573a4ae4e1dfd0697ebc6242e79c681eaa34"
@ -5928,20 +5932,13 @@ write-file-stdout@0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/write-file-stdout/-/write-file-stdout-0.0.2.tgz#c252d7c7c5b1b402897630e3453c7bfe690d9ca1"
ws@1.1.1:
ws@1.1.1, ws@^1.0.1:
version "1.1.1"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.1.tgz#082ddb6c641e85d4bb451f03d52f06eabdb1f018"
dependencies:
options ">=0.0.5"
ultron "1.0.x"
ws@^1.0.1:
version "1.1.4"
resolved "https://registry.yarnpkg.com/ws/-/ws-1.1.4.tgz#57f40d036832e5f5055662a397c4de76ed66bf61"
dependencies:
options ">=0.0.5"
ultron "1.0.x"
wtf-8@1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/wtf-8/-/wtf-8-1.0.0.tgz#392d8ba2d0f1c34d1ee2d630f15d0efb68e1048a"