Merge pull request #14 from jeneser/platform-separately

Platform separately and code harmless: Each platform does not affect each other

README.md

@@ -42,7 +42,19 @@ import android.os.Build;
 import android.view.View;
 ```
 
-* Last set `StatusBarBackgroundColor` in `config.xml`from the project root.
+* Last set `StatusBarBackgroundColor` in `app.component.ts` from the project folder `src/app/app.component.ts`. 
+If you want use this option for Android and native status bar plugin for iOS devices on the same project. We advise you to do so. The code is harmless!
+
+```javascript
+// #AARRGGBB where AA is an alpha value
+if (this.platform.is('android')) {
+	this.statusBar.backgroundColorByHexString("#33000000");
+}
+```
+
+* In the same way. You can set `StatusBarBackgroundColor` in `config.xml` from the project root.
+But, When you build an Ionic project for IOS platform. You may need to remove it. Pick one you like.
+
 ```
 <preference name="StatusBarBackgroundColor" value="#33000000"/>
 ```
@@ -61,7 +73,7 @@ import android.view.View;
 │   │   ├── app.component.ts
 │   │   ├── app.html
 │   │   ├── app.module.ts
-│   │   ├── app.scss                  * transparent statusBar and SuperBar
+│   │   ├── app.scss                  * transparent statusBar and SuperBar style
 │   │   └── main.ts
 │   ├── assets
 │   │   ├── icon
@@ -117,6 +129,10 @@ System:
 
 ## ChangeLog
 
+- June 28, 2017:
+  - PR #14 Platform separately:
+  - Each platform does not affect each other
+  - Make code harmless
 - June 25, 2017:
   - Upgrade this project to Ionic 3 Fix issue#12
   - Rename repertory: `ionic-super-bar`

config.xml

@@ -3,9 +3,10 @@
     <name>ionic-super-bar</name>
     <description>A transparent statusBar and toolBar DEMO in ionic</description>
     <author email="jeneserwang@gmail.com" href="https://github.com/jeneser">jeneser</author>
-    <content src="index.html" />
+    <content original-src="index.html" src="http://192.168.0.104:8100" />
     <access origin="*" />
     <allow-navigation href="http://ionic.local/*" />
+    <allow-navigation href="http://192.168.0.104:8100" />
     <allow-intent href="http://*/*" />
     <allow-intent href="https://*/*" />
     <allow-intent href="tel:*" />
@@ -22,7 +23,6 @@
     <preference name="SplashShowOnlyFirstTime" value="false" />
     <preference name="SplashScreen" value="screen" />
     <preference name="SplashScreenDelay" value="3000" />
-    <preference name="StatusBarBackgroundColor" value="#33000000" />
     <platform name="android">
         <allow-intent href="market:*" />
         <icon density="ldpi" src="resources/android/icon/drawable-ldpi-icon.png" />

src/app/app.component.ts

@@ -32,6 +32,13 @@ export class MyApp {
       // Okay, so the platform is ready and our plugins are available.
       // Here you can do any higher level native things you might need.
       // this.statusBar.styleDefault();
+
+      // Transparent status bar for android
+      // #AARRGGBB where AA is an alpha value
+      if (this.platform.is('android')) {
+        this.statusBar.backgroundColorByHexString("#33000000");
+      }
+
       this.splashScreen.hide();
     });
   }

src/app/app.scss

@@ -1,6 +1,9 @@
 // App Global Sass
 // --------------------------------------------------
 
+// Transparent status bar and awesome tool bar style
+// --------------------------------------------------
+
 // Feat android transparent status bar
 // Set padding-top and default bg-color for status bar
 
@@ -14,6 +17,7 @@
 }
 
 // Super bar placeholder
+// Work in tool bar with transparent status bar
 
 %super-bar {
   .scroll-content {
@@ -42,7 +46,16 @@
   }
 }
 
+// Extend super bar placeholder for android
+
+.platform-android {
+  page-home, page-language-details {
+    @extend %super-bar;
+  }
+}
+
 // Other custom Sass
+// You don't have to care about it
 // --------------------------------------------------
 
 .menu-content {

src/pages/home/home.scss

@@ -1,6 +1,3 @@
 page-home {
 
-  // Extend super bar placeholder
-  @extend %super-bar;
-
 }

src/pages/language-details/language-details.html

@@ -11,7 +11,7 @@
   <div class="cover header-md">
     <img class="cover" [src]="'assets/img/cover_' + item.title + '.jpg'" alt="cover">
   </div>
-  <div class="article-content" margin-top>
+  <div style="background-color: #f4f4f4" margin-top>
     <ion-card>
       <ion-card-content>
         <ion-icon [name]="'logo-' + item.icon" [ngStyle]="{'color': item.color}"></ion-icon>

src/pages/language-details/language-details.scss

@@ -1,11 +1,3 @@
 page-language-details {
 
-  // Extend super bar placeholder
-  @extend %super-bar;
-
-  // Other custom Sass
-  .content {
-    background-color: color($colors, light);
-  }
-
 }