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

fix(buttons): improve actions group styles

Browse source
This commit is contained in:
Alexander Zhukov 2017-07-24 12:47:40 +03:00
parent 931dfea84e
commit 40129f50fa
8 changed files with 51 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/app/pages/ui-features/buttons/action-groups/action-groups.component.html Normal file
View file

@ -0,0 +1,17 @@
<div class="action-groups">
<div class="action-groups-header">
<span>Action Groups</span>
</div>
<nga-actions size="medium">
<nga-action icon="ion-navicon"></nga-action>
<nga-action>
<nga-search type="rotate-layout"></nga-search>
</nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
</nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions>
</div>

14
src/app/pages/ui-features/buttons/action-groups/action-groups.component.scss Normal file
View file

@ -0,0 +1,14 @@
@import '../../../../@theme/styles/variables';
@import '~@akveo/nga-theme/components/card/card.component.theme';
@include nga-install-component() {
.action-groups {
display: flex;
}
.action-groups-header {
flex: 1;
@include nga-card-header();
}
}

15
src/app/pages/ui-features/buttons/action-groups/action-groups.component.ts Normal file
View file

@ -0,0 +1,15 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-action-groups',
styleUrls: ['./action-groups.component.scss'],
templateUrl: './action-groups.component.html',
})
export class ActionGroupsComponent {
userMenu = [{
title: 'Profile',
}, {
title: 'Log out',
}];
}

21
src/app/pages/ui-features/buttons/actions-groups/actions-groups.component.html
View file

@ -1,21 +0,0 @@
<nga-card>
<nga-card-body>
<div class="actions-groups">
<div class="container-title">
<span>Action Groups</span>
</div>
<nga-actions size="medium">
<nga-action icon="ion-navicon"></nga-action>
<nga-action>
<nga-search type="rotate-layout"></nga-search>
</nga-action>
<nga-action icon="ion-ios-email-outline"></nga-action>
<nga-action disabled icon="ion-ios-bell-outline"></nga-action>
<nga-action>
<nga-user [menu]="userMenu" name="Han Solo"></nga-user>
</nga-action>
<nga-action icon="ion-ios-gear-outline"></nga-action>
</nga-actions>
</div>
</nga-card-body>
</nga-card>

18
src/app/pages/ui-features/buttons/actions-groups/actions-groups.component.ts
View file

@ -1,18 +0,0 @@
import { Component } from '@angular/core';
@Component({
selector: 'ngx-actions-groups',
templateUrl: './actions-groups.component.html',
})
export class ActionsGroupsComponent {
userMenu = [
{
title: 'Profile',
},
{
title: 'Log out',
},
];
}

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

@ -4,7 +4,9 @@
</div>
<div class="col-lg-6">
<ngx-shape-buttons></ngx-shape-buttons>
<ngx-actions-groups></ngx-actions-groups>
<nga-card>
<ngx-action-groups></ngx-action-groups>
</nga-card>
<nga-card>
<nga-card-body>
<ngx-labeled-actions-group></ngx-labeled-actions-group>

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

@ -59,18 +59,6 @@
margin-bottom: 1.5rem;
}
.actions-groups {
display: flex !important;
}
.actions-groups .container-title {
display: flex;
flex: 1;
flex-direction: column;
justify-content: center;
color: white;
}
.block-level-buttons .btn-group {
margin-bottom: 1rem;
}

4
src/app/pages/ui-features/buttons/buttons.module.ts
View file

@ -8,7 +8,7 @@ import { HeroButtonComponent } from './hero-buttons/hero-buttons.component';
import { ShapeButtonsComponent } from './shape-buttons/shape-buttons.component';
import { SizeButtonsComponent } from './size-buttons/size-buttons.component';
import { ButtonsComponent } from './buttons.component';
import { ActionsGroupsComponent } from './actions-groups/actions-groups.component';
import { ActionGroupsComponent } from './action-groups/action-groups.component';
import { DropdownButtonsComponent } from './dropdown-buttons/dropdown-button.component';
import { BlockLevelButtonsComponent } from './block-level-buttons/block-level-buttons.component';
import { ButtonGroupsComponent } from './button-groups/button-groups.component';
@ -21,7 +21,7 @@ const components = [
HeroButtonComponent,
ShapeButtonsComponent,
SizeButtonsComponent,
ActionsGroupsComponent,
ActionGroupsComponent,
DropdownButtonsComponent,
BlockLevelButtonsComponent,
ButtonGroupsComponent,