Fix the Slider

Remove the iOS back button in custom ActionBar examples Update CHANGELOG
NativeScript · Sep 12, 2019 · 06ea424 · 06ea424
1 parent a21ead8
commit 06ea424
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 54 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,7 @@
 ### Features
 
 * Apply a default skin over the Core theme, similar to core in 1.x
+* Add styling for custom ActionBar (GridLayout, Label and Buttons in the TitleView), check the example
 
 ### Fixes
 

diff --git a/app-compat/pages/custom-actionbar.xml b/app-compat/pages/custom-actionbar.xml
@@ -2,6 +2,7 @@
       navigatingTo="navigatingTo">
 
   <ActionBar loaded="onLoaded">
+        <NavigationButton visibility="collapsed" />
     <GridLayout rows="*" columns="*, auto, *">
         <Label row="0" col="1" text="Action Title" textWrap="true" />
         <Button text="Back" textWrap="true" row="0" col="0" tap="{{ goBack }}" />

diff --git a/app/pages/custom-actionbar.xml b/app/pages/custom-actionbar.xml
@@ -1,16 +1,17 @@
 <Page xmlns="http://schemas.nativescript.org/tns.xsd"
       navigatingTo="navigatingTo">
 
-  <ActionBar loaded="onLoaded">
-    <GridLayout rows="*" columns="*, auto, *">
-        <Label row="0" col="1" text="Action Title" textWrap="true" />
-        <Button text="Back" textWrap="true" row="0" col="0" tap="{{ goBack }}" />
-        <Button text="Something" textWrap="true" row="0" col="2" />
-    </GridLayout>
-  </ActionBar>
+    <ActionBar loaded="onLoaded">
+        <NavigationButton visibility="collapsed" />
+        <GridLayout rows="*" columns="*, auto, *">
+            <Label row="0" col="1" text="Action Title" textWrap="true"/>
+            <Button text="Back" textWrap="true" row="0" col="0" tap="{{ goBack }}"/>
+            <Button text="Something" textWrap="true" row="0" col="2"/>
+        </GridLayout>
+    </ActionBar>
 
-  <ScrollView class="page">
-    <StackLayout class="p-20">
-    </StackLayout>
-  </ScrollView>
+    <ScrollView class="page">
+        <StackLayout class="p-20">
+        </StackLayout>
+    </ScrollView>
 </Page>
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/scss/mixins/components/_action-bar.scss b/src/scss/mixins/components/_action-bar.scss
@@ -27,11 +27,6 @@
             text-transform: none;
             font-weight: normal;
 
-            .ns-ios &,
-            .ns-ios &:active {
-                @include colorize($background-color: transparent);
-            }
-
             &:active {
                 opacity: .7;
             }
@@ -118,6 +113,11 @@
                     $color: ab-color
                 );
             }
+
+            .ns-ios &,
+            .ns-ios &:active {
+                @include colorize($background-color: transparent);
+            }
         }
 
         @if not $compat {

diff --git a/src/scss/mixins/components/_controls.scss b/src/scss/mixins/components/_controls.scss
@@ -117,11 +117,10 @@
 
 @mixin slider-skin($selectors) {
     #{$selectors} {
-        @include colorize($background-color: accent);
-
-        .ns-android & {
-            @include colorize($color: accent);
-        }
+        @include colorize(
+            $color: accent,
+            $background-color: accent
+        );
 
         &[isEnabled=false],
         .ns-android &[isEnabled=false] {
@@ -162,11 +161,10 @@
         }
 
         .ns-ios & {
-            $off-background-color: transparent;
-
             @include colorize(
                 $color: background,
-                $background-color: accent
+                $background-color: accent,
+                $off-background-color: background-alt-10
             );
 
             &[isEnabled=false] {