Merge pull request #19 from cyberpirate92/feature-add-footer

Feature: add footer
cyberpirate92 · Jul 18, 2018 · 1191519 · 1191519
2 parents 675ad10 + 715d55f
commit 1191519
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 6 deletions.
diff --git a/README.md b/README.md
@@ -10,15 +10,15 @@ A simplistic blade component for Angular with minimize/maximize and a close butt
 
 ## Installation
 
-Step 1: Install NPM package
+**Step 1**: Install NPM package
 
 ```bash
 
 npm i ngx-blade --save
 
 ```
 
-Step 2: Import `NgxBladeModule` into in your module
+**Step 2**: Import `NgxBladeModule` into in your module
 
 ```typescript
 
@@ -31,7 +31,7 @@ import { NgxBladeModule } from 'ngx-blade';
 
 ```
 
-Step 3: Then add the default theme to **src/styles.scss** file.
+**Step 3**: Add the default theme to **src/styles.scss** file.
 
 ```scss
 
@@ -83,7 +83,8 @@ If a config is not provided as input, all properties default to `true`.
 The following directives should be used within the `ngx-blade` element.
 
 * `ngxBladeHeader` - Blade Header element
-* `ngxBladeBody`- Blade body element
+* `ngxBladeBody` - Blade body element
+* `ngxBladeFooter` - Blade footer element
 
 ## Sample Usage
 
@@ -101,6 +102,9 @@ The following directives should be used within the `ngx-blade` element.
     <!-- Not only normal html entities, but components can also be used -->
     <my-component></my-component>
   </div>
+  <div ngxBladeFooter>
+    Blade Footer
+  </div>
 </ngx-blade>
 
 ```

diff --git a/package.json b/package.json
@@ -11,7 +11,7 @@
   "bugs": {
     "url": "https://github.com/cyberpirate92/ngx-blade/issues"
   },
-  "version": "0.3.1",
+  "version": "0.3.2",
   "author": {
     "name": "Ravi Theja",
     "url": "https://ngravi.com"

diff --git a/src/app/app.component.css b/src/app/app.component.css
@@ -3,4 +3,10 @@
 }
 pre {
     background-color: #EEE;
+}
+.text-center {
+    text-align: center;
+    color: #FFF;
+    background-color: #444;
+    padding: 5px;
 }
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -29,4 +29,7 @@
 
     <button type="button" (click)="blade.close()">Close blade</button>
   </div>
+  <div ngxBladeFooter class="text-center">
+    A footer can be created by using the <code>ngxBladeFooter</code> directive
+  </div>
 </ngx-blade>
diff --git a/src/app/modules/ngx-blade/ngx-blade.component.html b/src/app/modules/ngx-blade/ngx-blade.component.html
@@ -25,5 +25,11 @@
         </ng-content>
       </div>
     </div>
+    <div class="blade-footer">
+      <div class="blade-footer-wrapper">
+        <ng-content select="[ngxBladeFooter]">
+        </ng-content>
+      </div>
+    </div>
   </div>
 </div>
diff --git a/src/app/modules/ngx-blade/ngx-blade.component.scss b/src/app/modules/ngx-blade/ngx-blade.component.scss
@@ -63,5 +63,14 @@
         overflow-y: auto;
       }
     }
+    .blade-footer {
+      display: flex;
+      color: $ngxBladeFooterTextColor;
+      .blade-footer-wrapper {
+        width: 100%;
+        height: 100%;
+        background-color: $ngxBladeFooterBackground;
+      }
+    }
   }
 }
diff --git a/src/app/modules/ngx-blade/variables.scss b/src/app/modules/ngx-blade/variables.scss
@@ -11,4 +11,8 @@ $ngxBladeBodyTextColor: rgba(255, 255, 255, 1) !default;
 
 // header action button (Minimize/Maximize, Close) defaults 
 $ngxBladeActionButtonBackground: rgba(255, 255, 255, 0.3) !default;
-$ngxBladeCloseButtonHoverBackground: rgba(170, 0, 0, 1) !default;
+$ngxBladeCloseButtonHoverBackground: rgba(170, 0, 0, 1) !default;
+
+// footer defaults
+$ngxBladeFooterBackground: rgba(238, 238, 238, 1) !default;
+$ngxBladeFooterTextColor: rgba(0, 0, 0, 1) !default;