Skip to content

Commit 5d86915

Browse files
mrholekmrholek
committed
v1.0.0
1 parent d9b88a0 commit 5d86915

39 files changed

+302
-78
lines changed

‎Angular4_CLI_Full_Project/.angular-cli.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
"$schema": "./node_modules/@angular/cli/lib/config/schema.json",
33
"project": {
44
"version": "1.0.0",
5-
"name": "coreui-angular"
5+
"name": "@coreui/angular"
66
},
77
"apps": [
88
{

‎Angular4_CLI_Full_Project/package.json

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
{
2-
"name": "coreui-angular",
2+
"name": "@coreui/angular",
33
"version": "1.0.0",
4-
"description": "Open Source Bootstrap Admin Template",
4+
"description": "",
55
"author": "",
66
"url": "http://coreui.io",
77
"copyright": "Copyright 2017 creativeLabs Łukasz Holeczek",

‎Angular4_CLI_Full_Project/src/app/app.module.ts

+4-2
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@ import {
2424
AppSidebar,
2525
AppSidebarFooter,
2626
AppSidebarForm,
27-
AppSidebarHeader
27+
AppSidebarHeader,
28+
AppSidebarMinimizer
2829
} from './components';
2930

3031
const APP_COMPONENTS = [
@@ -35,7 +36,8 @@ const APP_COMPONENTS = [
3536
AppSidebar,
3637
AppSidebarFooter,
3738
AppSidebarForm,
38-
AppSidebarHeader
39+
AppSidebarHeader,
40+
AppSidebarMinimizer
3941
]
4042

4143
// Import directives

‎Angular4_CLI_Full_Project/src/app/components/app-header/app-header.component.html

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<header class="app-header navbar">
22
<button class="navbar-toggler d-lg-none" type="button" appMobileSidebarToggler>&#9776;</button>
33
<a class="navbar-brand" href="#"></a>
4-
<button class="navbar-toggler d-md-down-none" type="button" appSidebarMinimizer>&#9776;</button>
4+
<button class="navbar-toggler d-md-down-none" type="button" appSidebarToggler>&#9776;</button>
55
<ul class="nav navbar-nav d-md-down-none">
66
<li class="nav-item px-3">
77
<a class="nav-link" href="#">Dashboard</a>

‎Angular4_CLI_Full_Project/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.html

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<button class="sidebar-minimizer" type="button" appSidebarMinimizer appBrandMinimizer></button>

‎Angular4_CLI_Full_Project/src/app/components/app-sidebar-minimizer/app-sidebar-minimizer.component.ts

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import { Component, ElementRef } from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-sidebar-minimizer',
5+
templateUrl: './app-sidebar-minimizer.component.html'
6+
})
7+
export class AppSidebarMinimizer {
8+
9+
constructor(private el: ElementRef) { }
10+
11+
//wait for the component to render completely
12+
ngOnInit(): void {
13+
var nativeElement: HTMLElement = this.el.nativeElement,
14+
parentElement: HTMLElement = nativeElement.parentElement;
15+
// move all children out of the element
16+
while (nativeElement.firstChild) {
17+
parentElement.insertBefore(nativeElement.firstChild, nativeElement);
18+
}
19+
// remove the empty element(the host)
20+
parentElement.removeChild(nativeElement);
21+
}
22+
}

‎Angular4_CLI_Full_Project/src/app/components/app-sidebar-minimizer/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export * from './app-sidebar-minimizer.component';

‎Angular4_CLI_Full_Project/src/app/components/app-sidebar/app-sidebar.component.html

+7
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,14 @@
7777
</li>
7878
</ul>
7979
</li>
80+
<li class="nav-item mt-auto">
81+
<a class="nav-link nav-link-success" href="http://coreui.io/angular/"><i class="icon-cloud-download"></i> Download CoreUI</a>
82+
</li>
83+
<li class="nav-item">
84+
<a class="nav-link nav-link-danger" href="http://coreui.io/pro/angular/"><i class="icon-layers"></i> Try CoreUI <strong>PRO</strong></a>
85+
</li>
8086
</ul>
8187
</nav>
8288
<app-sidebar-footer></app-sidebar-footer>
89+
<app-sidebar-minimizer></app-sidebar-minimizer>
8390
</div>

‎Angular4_CLI_Full_Project/src/app/components/index.ts

+1
Original file line numberDiff line numberDiff line change
@@ -6,3 +6,4 @@ export * from './app-sidebar';
66
export * from './app-sidebar-footer';
77
export * from './app-sidebar-form';
88
export * from './app-sidebar-header';
9+
export * from './app-sidebar-minimizer';

‎Angular4_CLI_Full_Project/src/app/directives/sidebar/sidebar.directive.ts

+14
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,19 @@ export class SidebarMinimizeDirective {
2929
}
3030
}
3131

32+
@Directive({
33+
selector: '[appBrandMinimizer]'
34+
})
35+
export class BrandMinimizeDirective {
36+
constructor() { }
37+
38+
@HostListener('click', ['$event'])
39+
toggleOpen($event: any) {
40+
$event.preventDefault();
41+
document.querySelector('body').classList.toggle('brand-minimized');
42+
}
43+
}
44+
3245
@Directive({
3346
selector: '[appMobileSidebarToggler]'
3447
})
@@ -87,6 +100,7 @@ export class SidebarOffCanvasCloseDirective {
87100
export const SIDEBAR_TOGGLE_DIRECTIVES = [
88101
SidebarToggleDirective,
89102
SidebarMinimizeDirective,
103+
BrandMinimizeDirective,
90104
SidebarOffCanvasCloseDirective,
91105
MobileSidebarToggleDirective
92106
];

‎Angular4_CLI_Full_Project/src/assets/img/logo-symbol.png

7.02 KB
Loading

‎Angular4_CLI_Full_Project/src/img/logo-symbol.png

7.02 KB
Loading

‎Angular4_CLI_Full_Project/src/index.html

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,9 @@
1717
// Header options
1818
1. '.header-fixed' - Fixed Header
1919
20+
// Brand options
21+
1. '.brand-minimized' - Minimized brand (Only symbol)
22+
2023
// Sidebar options
2124
1. '.sidebar-fixed' - Fixed Sidebar
2225
2. '.sidebar-hidden' - Hidden Sidebar
@@ -33,7 +36,7 @@
3336
1. '.breadcrumb-fixed' - Fixed Breadcrumb
3437
3538
// Footer options
36-
1. 'footer-fixed' - Fixed footer
39+
1. '.footer-fixed' - Fixed footer
3740
3841
-->
3942

‎Angular4_CLI_Full_Project/src/scss/core/_animate.scss

+1-18
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,17 @@
11
// scss-lint:disable all
2-
@charset "UTF-8";
3-
42
.animated {
5-
-webkit-animation-duration: 1s;
63
animation-duration: 1s;
7-
-webkit-animation-fill-mode: both;
8-
animation-fill-mode: both;
4+
// animation-fill-mode: both;
95
}
106

117
.animated.infinite {
12-
-webkit-animation-iteration-count: infinite;
138
animation-iteration-count: infinite;
149
}
1510

1611
.animated.hinge {
17-
-webkit-animation-duration: 2s;
1812
animation-duration: 2s;
1913
}
2014

21-
@-webkit-keyframes fadeIn {
22-
from {
23-
opacity: 0;
24-
}
25-
26-
to {
27-
opacity: 1;
28-
}
29-
}
30-
3115
@keyframes fadeIn {
3216
from {
3317
opacity: 0;
@@ -39,6 +23,5 @@
3923
}
4024

4125
.fadeIn {
42-
-webkit-animation-name: fadeIn;
4326
animation-name: fadeIn;
4427
}

‎Angular4_CLI_Full_Project/src/scss/core/_layout.scss

+7-8
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@
1111
app-dashboard,
1212
app-root {
1313
display: flex;
14-
min-height: 100vh;
1514
flex-direction: column;
15+
min-height: 100vh;
1616
}
1717

1818
.app-header {
@@ -26,12 +26,12 @@ app-root {
2626
.app-body {
2727
display: flex;
2828
flex-direction: row;
29-
overflow-x: hidden;
3029
flex-grow: 1;
30+
overflow-x: hidden;
3131

3232
.main {
33-
min-width: 0;
3433
flex: 1;
34+
min-width: 0;
3535
}
3636

3737
.sidebar {
@@ -134,11 +134,6 @@ app-root {
134134
.sidebar-minimized {
135135
.sidebar {
136136
flex: 0 0 $sidebar-minimized-width;
137-
.sidebar-header,
138-
.sidebar-form,
139-
.sidebar-footer {
140-
display: none;
141-
}
142137
}
143138

144139
&.sidebar-hidden {
@@ -344,6 +339,10 @@ app-root {
344339
.nav {
345340
width: $mobile-sidebar-width !important;
346341
}
342+
343+
.sidebar-minimizer {
344+
display: none;
345+
}
347346
}
348347

349348
.main, .app-footer {

‎Angular4_CLI_Full_Project/src/scss/core/_navbar.scss

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
.app-header.navbar {
22
position: relative;
3-
height: $navbar-height;
43
flex-direction: row;
4+
height: $navbar-height;
55
padding: 0;
66
margin: 0;
77
background-color: $navbar-bg;
@@ -101,3 +101,14 @@
101101
.navbar-divider {
102102
background-color: rgba(0,0,0,.075);
103103
}
104+
105+
.brand-minimized {
106+
.app-header.navbar {
107+
.navbar-brand {
108+
width: $navbar-brand-minimized-width;
109+
background-color: $navbar-brand-minimized-bg;
110+
background-image: $navbar-brand-minimized-logo;
111+
background-size: $navbar-brand-minimized-logo-size;
112+
}
113+
}
114+
}

‎Angular4_CLI_Full_Project/src/scss/core/_sidebar.scss

+57-3
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,8 @@
7878

7979
.nav {
8080
@include sidebar-width($sidebar-borders, $sidebar-width);
81-
flex-direction: column !important;
81+
flex-direction: column;
82+
min-height: 100%;
8283
}
8384

8485
.nav-title {
@@ -148,8 +149,8 @@
148149
}
149150

150151
&:hover {
151-
color: $sidebar-nav-link-hover-color !important;
152-
background: $sidebar-nav-link-hover-bg !important;
152+
color: $sidebar-nav-link-hover-color;
153+
background: $sidebar-nav-link-hover-bg;
153154
@include borders($sidebar-nav-link-hover-borders);
154155

155156
i {
@@ -160,6 +161,21 @@
160161
background-image: $sidebar-nav-dropdown-indicator-hover;
161162
}
162163
}
164+
165+
@each $color, $value in $theme-colors {
166+
&.nav-link-#{$color} {
167+
background: $value;
168+
i {
169+
color: rgba(255,255,255,.7);
170+
}
171+
&:hover {
172+
background: darken($value,5%) !important;
173+
i {
174+
color: #fff;
175+
}
176+
}
177+
}
178+
}
163179
}
164180

165181
// ex. <a class="nav-link nav-dropdown-toggle" href="#">Components</a>
@@ -239,6 +255,39 @@
239255
padding: $sidebar-footer-padding-y $sidebar-footer-padding-x;
240256
background: $sidebar-footer-bg;
241257
}
258+
259+
.sidebar-minimizer {
260+
position: relative;
261+
flex: 0 0 $sidebar-minimizer-height;
262+
background-color: $sidebar-minimizer-bg;
263+
border: 0;
264+
265+
&::before {
266+
position: absolute;
267+
top: 0;
268+
right: 0;
269+
width: $sidebar-minimizer-height;
270+
height: $sidebar-minimizer-height;
271+
content: "";
272+
background-image: $sidebar-minimizer-indicator;
273+
background-repeat: no-repeat;
274+
background-position: center;
275+
background-size: $sidebar-minimizer-height / 4;
276+
transition: .3s;
277+
}
278+
279+
&:focus,
280+
&.focus {
281+
outline: 0;
282+
}
283+
284+
&:hover {
285+
background-color: $sidebar-minimizer-hover-bg;
286+
&::before {
287+
background-image: $sidebar-minimizer-hover-indicator;
288+
}
289+
}
290+
}
242291
}
243292

244293
@include media-breakpoint-up(lg) {
@@ -312,6 +361,11 @@
312361
display: none;
313362
}
314363

364+
.sidebar-minimizer::before {
365+
width: 100%;
366+
transform: rotate(-180deg);
367+
}
368+
315369
.nav-item {
316370
width: $sidebar-minimized-width;
317371
overflow: hidden;

‎Angular4_CLI_Full_Project/src/scss/core/_variables.scss

+17
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
// scss-lint:disable all
12
// Core Admin Variables
23

34
$enable-sidebar-nav-rounded: false !default;
@@ -57,6 +58,11 @@ $navbar-brand-border: (
5758
)
5859
) !default;
5960

61+
$navbar-brand-minimized-width: 50px !default
62+
$navbar-brand-minimized-bg: #fff !default;
63+
$navbar-brand-minimized-logo: url('../img/logo-symbol.png') !default;
64+
$navbar-brand-minimized-logo-size: 24px !default;
65+
6066
$navbar-color: $gray-600 !default;
6167
$navbar-hover-color: $gray-800 !default;
6268
$navbar-active-color: $gray-800 !default;
@@ -127,6 +133,17 @@ $sidebar-footer-bg: rgba(0,0,0,.2) !default;
127133
$sidebar-footer-padding-y: .75rem !default;
128134
$sidebar-footer-padding-x: 1rem !default;
129135

136+
// Sidebar Minimizer
137+
138+
$sidebar-minimizer-height: 50px !default;
139+
$sidebar-minimizer-bg: rgba(0,0,0,.2) !default;
140+
$sidebar-minimizer-indicator-color: $gray-600 !default;
141+
$sidebar-minimizer-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
142+
$sidebar-minimizer-hover-bg: rgba(0,0,0,.3) !default;
143+
$sidebar-minimizer-hover-indicator-color:$sidebar-nav-link-hover-color !default;
144+
$sidebar-minimizer-hover-indicator: str-replace(url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 11 14'%3E%3Cpath fill='#{$sidebar-minimizer-hover-indicator-color}' d='M9.148 2.352l-4.148 4.148 4.148 4.148q0.148 0.148 0.148 0.352t-0.148 0.352l-1.297 1.297q-0.148 0.148-0.352 0.148t-0.352-0.148l-5.797-5.797q-0.148-0.148-0.148-0.352t0.148-0.352l5.797-5.797q0.148-0.148 0.352-0.148t0.352 0.148l1.297 1.297q0.148 0.148 0.148 0.352t-0.148 0.352z'/%3E%3C/svg%3E"), "#", "%23") !default;
145+
146+
130147
// Top Navigation
131148

132149
$top-nav-bg: #fff !default;

‎Angular4_CLI_Full_Project/src/scss/style.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/**
1+
/*!
22
* CoreUI - Open Source Bootstrap Admin Template
33
* @version v1.0.0
44
* @link http://coreui.io

0 commit comments

Comments
 (0)