URL Bar styles fixes (#2517)

* Fixes url bar icons private mode style * Keep the url bar outline with children are pressed
MozillaReality · Dec 20, 2019 · d6412fa · d6412fa
1 parent f624a4f
commit d6412fa
Show file tree

Hide file tree

Showing 10 changed files with 126 additions and 15 deletions.
diff --git a/app/src/common/shared/org/mozilla/vrbrowser/ui/views/NavigationURLBar.java b/app/src/common/shared/org/mozilla/vrbrowser/ui/views/NavigationURLBar.java
@@ -418,6 +418,10 @@ private void setIsBookmarked(boolean aValue) {
     }
 
     public void setPrivateMode(boolean isEnabled) {
+        mBinding.bookmarkButton.setPrivateMode(isEnabled);
+        mBinding.microphoneButton.setPrivateMode(isEnabled);
+        mBinding.clearButton.setPrivateMode(isEnabled);
+
         mBinding.setIsPrivateMode(isEnabled);
     }
 

diff --git a/app/src/main/res/drawable/url_background_outline.xml b/app/src/main/res/drawable/url_background_outline.xml
@@ -38,6 +38,22 @@
             </item>
         </layer-list>
     </item>
+    <item android:state_pressed="true">
+        <layer-list>
+            <item>
+                <shape android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <stroke android:width="@dimen/blur_radius" android:color="@color/azure_blur" />
+                </shape>
+            </item>
+            <item android:start="@dimen/blur_radius_half" android:end="@dimen/blur_radius_half" android:top="@dimen/blur_radius_half" android:bottom="@dimen/blur_radius_half">
+                <shape android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <stroke android:width="2dp" android:color="@color/azure" />
+                </shape>
+            </item>
+        </layer-list>
+    </item>
     <item android:state_hovered="false" android:state_pressed="false">
         <shape android:shape="rectangle">
             <corners android:radius="20dp" />

diff --git a/app/src/main/res/drawable/url_background_private_outline.xml b/app/src/main/res/drawable/url_background_private_outline.xml
@@ -38,6 +38,22 @@
             </item>
         </layer-list>
     </item>
+    <item android:state_pressed="true">
+        <layer-list>
+            <item>
+                <shape android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <stroke android:width="@dimen/blur_radius" android:color="@color/azure_blur" />
+                </shape>
+            </item>
+            <item android:start="@dimen/blur_radius_half" android:end="@dimen/blur_radius_half" android:top="@dimen/blur_radius_half" android:bottom="@dimen/blur_radius_half">
+                <shape android:shape="rectangle">
+                    <corners android:radius="20dp" />
+                    <stroke android:width="2dp" android:color="@color/azure" />
+                </shape>
+            </item>
+        </layer-list>
+    </item>
     <item android:state_hovered="false" android:state_pressed="false">
         <shape android:shape="rectangle">
             <corners android:radius="20dp" />

diff --git a/app/src/main/res/drawable/url_button_end_private.xml b/app/src/main/res/drawable/url_button_end_private.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="false">
+        <shape android:shape="rectangle">
+            <corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
+            <solid android:color="@android:color/transparent"/>
+        </shape>
+    </item>
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
+            <solid android:color="@color/blackberry"/>
+            <stroke android:width="@dimen/blur_radius" android:color="@color/blackberry_blur" />
+        </shape>
+    </item>
+    <item android:state_hovered="true" android:state_pressed="false">
+        <shape android:shape="rectangle">
+            <corners android:bottomRightRadius="20dp" android:topRightRadius="20dp" />
+            <solid android:color="@color/fog"/>
+            <stroke android:width="@dimen/blur_radius" android:color="@color/fog_blur" />
+        </shape>
+    </item>
+    <item android:state_hovered="false" android:state_pressed="false" android:drawable="@android:color/transparent" >
+    </item>
+</selector>
diff --git a/app/src/main/res/drawable/url_button_icon_color.xml b/app/src/main/res/drawable/url_button_icon_color.xml
diff --git a/app/src/main/res/drawable/url_button_private.xml b/app/src/main/res/drawable/url_button_private.xml
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="false">
+        <shape android:shape="rectangle">
+            <solid android:color="@android:color/transparent" />
+        </shape>
+    </item>
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/blackberry"/>
+            <stroke android:width="@dimen/blur_radius" android:color="@color/blackberry_blur" />
+        </shape>
+    </item>
+    <item android:state_hovered="true" android:state_pressed="false">
+        <shape android:shape="rectangle">
+            <solid android:color="@color/fog"/>
+            <stroke android:width="@dimen/blur_radius" android:color="@color/fog_blur" />
+        </shape>
+    </item>
+    <item android:state_hovered="false" android:state_pressed="false" android:drawable="@android:color/transparent" >
+    </item>
+</selector>
diff --git a/app/src/main/res/drawable/url_button_start_private.xml b/app/src/main/res/drawable/url_button_start_private.xml
@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="false">
+        <shape android:shape="rectangle">
+            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
+            <solid android:color="@android:color/transparent"/>
+        </shape>
+    </item>
+    <item android:state_pressed="true">
+        <shape android:shape="rectangle">
+            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
+            <solid android:color="@color/blackberry"/>
+            <stroke android:width="@dimen/blur_radius" android:color="@color/blackberry_blur" />
+        </shape>
+    </item>
+    <item android:state_hovered="true" android:state_pressed="false">
+        <shape android:shape="rectangle">
+            <corners android:bottomLeftRadius="20dp" android:topLeftRadius="20dp" />
+            <solid android:color="@color/fog"/>
+            <stroke android:width="@dimen/blur_radius" android:color="@color/fog_blur" />
+        </shape>
+    </item>
+    <item android:state_hovered="false" android:state_pressed="false" android:drawable="@android:color/transparent" >
+    </item>
+</selector>
diff --git a/app/src/main/res/layout/keyboard.xml b/app/src/main/res/layout/keyboard.xml
@@ -21,7 +21,7 @@
                     android:layout_height="@dimen/keyboard_key_width"
                     android:layout_marginStart="0dp"
                     android:layout_marginEnd="@dimen/keyboard_layout_padding"
-                    app:tintColorList="@drawable/url_button_icon_color"
+                    app:tintColorList="@drawable/main_button_icon_color"
                     android:padding="10dp"
                     android:src="@drawable/ic_icon_exit"
                     android:scaleType="fitCenter"
@@ -33,7 +33,7 @@
                     android:layout_marginStart="0dp"
                     android:layout_marginEnd="@dimen/keyboard_layout_padding"
                     android:layout_marginTop="4dp"
-                    app:tintColorList="@drawable/url_button_icon_color"
+                    app:tintColorList="@drawable/main_button_icon_color"
                     android:padding="10dp"
                     android:src="@drawable/ic_icon_move"
                     android:scaleType="fitCenter"

diff --git a/app/src/main/res/layout/navigation_url.xml b/app/src/main/res/layout/navigation_url.xml
@@ -84,7 +84,7 @@
                     android:id="@+id/microphoneButton"
                     style="@style/urlBarIconTheme"
                     android:layout_width="@{(isLibraryVisible || isSpecialUrl) ? @dimen/url_bar_last_item_width : @dimen/url_bar_item_width}"
-                    android:background="@{(isLibraryVisible || isSpecialUrl) ? @drawable/url_button_end : @drawable/url_button}"
+                    android:background="@{(isLibraryVisible || isSpecialUrl) ? (isPrivateMode ? @drawable/url_button_end_private : @drawable/url_button_end) : (isPrivateMode ? @drawable/url_button_private : @drawable/url_button)}"
                     android:src="@drawable/ic_icon_microphone"
                     android:tint="@color/fog"
                     android:tooltipText="@string/voice_search_tooltip"

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -174,29 +174,41 @@
 
     <style name="urlBarIconTheme">
         <item name="android:background">@drawable/url_button</item>
-        <item name="tintColorList">@drawable/url_button_icon_color</item>
         <item name="android:layout_width">@dimen/url_bar_item_width</item>
         <item name="android:layout_height">match_parent</item>
         <item name="android:scaleType">centerInside</item>
         <item name="android:gravity">center</item>
+        <item name="privateModeBackground">@drawable/url_button_private</item>
+        <item name="tintColorList">@drawable/main_button_icon_color</item>
+        <item name="privateModeTintColorList">@drawable/main_button_icon_color_private</item>
+        <item name="activeModeTintColorList">@drawable/main_button_icon_color_active</item>
+        <item name="notificationModeTintColorList">@drawable/main_button_icon_color_notification</item>
     </style>
 
     <style name="urlBarIconThemeStart">
         <item name="android:background">@drawable/url_button_start</item>
-        <item name="tintColorList">@drawable/url_button_icon_color</item>
         <item name="android:layout_width">@dimen/url_bar_first_item_width</item>
         <item name="android:layout_height">match_parent</item>
         <item name="android:scaleType">centerInside</item>
         <item name="android:gravity">center</item>
+        <item name="privateModeBackground">@drawable/url_button_start_private</item>
+        <item name="tintColorList">@drawable/main_button_icon_color</item>
+        <item name="privateModeTintColorList">@drawable/main_button_icon_color_private</item>
+        <item name="activeModeTintColorList">@drawable/main_button_icon_color_active</item>
+        <item name="notificationModeTintColorList">@drawable/main_button_icon_color_notification</item>
     </style>
 
     <style name="urlBarIconThemeEnd">
         <item name="android:background">@drawable/url_button_end</item>
-        <item name="tintColorList">@drawable/url_button_icon_color</item>
         <item name="android:layout_width">@dimen/url_bar_last_item_width</item>
         <item name="android:layout_height">match_parent</item>
         <item name="android:scaleType">centerInside</item>
         <item name="android:gravity">center</item>
+        <item name="privateModeBackground">@drawable/url_button_end_private</item>
+        <item name="tintColorList">@drawable/main_button_icon_color</item>
+        <item name="privateModeTintColorList">@drawable/main_button_icon_color_private</item>
+        <item name="activeModeTintColorList">@drawable/main_button_icon_color_active</item>
+        <item name="notificationModeTintColorList">@drawable/main_button_icon_color_notification</item>
     </style>
 
     <style name="scrollbar">