Fix Designer News Story screen to support day/night theming.

amytang0 · Apr 26, 2019 · 0b9c7ea · 0b9c7ea
1 parent 68b59a5
commit 0b9c7ea
Show file tree

Hide file tree

Showing 30 changed files with 253 additions and 220 deletions.
diff --git a/about/src/main/java/io/plaidapp/about/ui/AboutStyler.kt b/about/src/main/java/io/plaidapp/about/ui/AboutStyler.kt
@@ -36,7 +36,6 @@ class AboutStyler @Inject constructor(activity: AboutActivity) {
     @ColorInt
     val highlightColor = ColorUtils.getThemeColor(
         activity,
-        coreR.attr.colorPrimary,
-        coreR.color.primary
+        coreR.attr.colorPrimary
     )
 }
diff --git a/app/src/main/java/io/plaidapp/ui/HomeActivity.java b/app/src/main/java/io/plaidapp/ui/HomeActivity.java
@@ -479,7 +479,7 @@ protected void fabClick() {
         if (viewModel.isDesignerNewsUserLoggedIn()) {
             Intent intent = ActivityHelper.intentTo(Activities.DesignerNews.PostStory.INSTANCE);
             FabTransform.addExtras(intent, ColorUtils.getThemeColor(
-                    this, R.attr.colorPrimary, -1), R.drawable.ic_add_dark);
+                    this, R.attr.colorPrimary), R.drawable.ic_add_dark);
             intent.putExtra(PostStoryService.EXTRA_BROADCAST_RESULT, true);
             registerPostStoryResultListener();
             ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, fab,
@@ -488,7 +488,7 @@ protected void fabClick() {
         } else {
             Intent intent = ActivityHelper.intentTo(Activities.DesignerNews.Login.INSTANCE);
             FabTransform.addExtras(intent, ColorUtils.getThemeColor(
-                    this, R.attr.colorPrimary, -1), R.drawable.ic_add_dark);
+                    this, R.attr.colorPrimary), R.drawable.ic_add_dark);
             ActivityOptions options = ActivityOptions.makeSceneTransitionAnimation(this, fab,
                     getString(R.string.transition_designer_news_login));
             startActivityForResult(intent, RC_NEW_DESIGNER_NEWS_LOGIN, options.toBundle());

diff --git a/app/src/main/res/animator/selected_comment.xml b/app/src/main/res/animator/selected_comment.xml
@@ -23,8 +23,8 @@
 
             <objectAnimator
                 android:propertyName="backgroundColor"
-                android:valueFrom="@color/background_light"
-                android:valueTo="@color/selected_comment_background"
+                android:valueFrom="@color/color_surface"
+                android:valueTo="@color/color_highlighted_surface"
                 android:duration="@android:integer/config_shortAnimTime"
                 android:valueType="colorType" />
 
@@ -45,8 +45,8 @@
 
             <objectAnimator
                 android:propertyName="backgroundColor"
-                android:valueFrom="@color/selected_comment_background"
-                android:valueTo="@color/background_light"
+                android:valueFrom="@color/color_highlighted_surface"
+                android:valueTo="@color/color_surface"
                 android:duration="@android:integer/config_shortAnimTime"
                 android:valueType="colorType" />
 

diff --git a/app/src/main/res/drawable/comment_background.xml b/app/src/main/res/drawable/comment_background.xml
@@ -21,7 +21,7 @@
     android:enterFadeDuration="@integer/comment_expand_collapse_duration"
     android:exitFadeDuration="@integer/comment_expand_collapse_duration">
 
-    <item android:state_activated="true" android:drawable="@color/selected_comment_background" />
-    <item android:drawable="@color/designer_news_story_comment_background" />
+    <item android:state_activated="true" android:drawable="@color/color_highlighted_surface" />
+    <item android:drawable="@color/color_surface" />
 
 </selector>
diff --git a/app/src/main/res/drawable/ic_no_comments.xml b/app/src/main/res/drawable/ic_no_comments.xml
@@ -20,7 +20,9 @@
     android:width="36dp"
     android:height="36dp"
     android:viewportWidth="48"
-    android:viewportHeight="48">
+    android:viewportHeight="48"
+    android:alpha="0.7"
+    android:tint="?attr/colorControlNormal">
 
     <path
         android:pathData="M40.3797458,8.85523799 C41.1769296,9.52771558 41.6811165,10.5373723 41.6811165,11.6666667 L41.6994499,44.6666667 L34.3661165,37.3333333 L11.9016504,37.3333333 L7.63388348,41.6011003 L4.86611652,38.8333333 L40.3661165,3.33333333 L43.1338835,6.10110029 L40.3797458,8.85523799 Z M19.2349838,30 L34.3661165,30 L34.3661165,26.3333333 L22.9016504,26.3333333 L19.2349838,30 Z M24.7349838,24.5 L34.3661165,24.5 L34.3661165,20.8333333 L28.4016504,20.8333333 L24.7349838,24.5 Z M30.2349838,19 L34.3661165,19 L34.3661165,15.3333333 L33.9016504,15.3333333 L30.2349838,19 Z M30.2994498,8 L8.69944986,8 C6.67361652,8 5.03278319,9.64083333 5.03278319,11.6666667 L5.03278319,33.2666666 L13.7994498,24.5 L12.3661165,24.5 L12.3661165,20.8333333 L17.4661164,20.8333333 L19.2994498,19 L12.3661165,19 L12.3661165,15.3333333 L22.9661164,15.3333333 L30.2994498,8 L30.2994498,8 Z"

diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml
@@ -104,27 +104,26 @@
         <item name="lineHeightHint">28sp</item>
     </style>
 
-    <style name="TextAppearance.CommentAuthor" parent="@android:style/TextAppearance.Material.Caption">
+    <style name="TextAppearance.CommentAuthor" parent="@style/TextAppearance.MaterialComponents.Caption">
         <item name="android:fontFamily">sans-serif-medium</item>
         <item name="android:textSize">14sp</item>
+        <item name="android:textColor">@color/original_poster_text_color</item>
         <item name="android:fontFeatureSettings">smcp, onum</item>
         <item name="android:letterSpacing">0.02</item>
     </style>
 
-    <!-- todo revert to material styles? -->
-    <style name="TextAppearance.Comment" parent="@android:style/TextAppearance.Material.Body1">
+    <style name="TextAppearance.Comment" parent="@style/TextAppearance.MaterialComponents.Body1">
         <item name="android:textSize">15sp</item>
-        <item name="android:textColor">@color/text_secondary_dark</item>
+        <item name="android:textColor">?android:textColorSecondary</item>
         <item name="lineHeightHint">24sp</item>
-        <!--<item name="android:letterSpacing">0.01</item>-->
     </style>
 
     <style name="TextAppearance.Comment.None">
         <item name="android:textColor">@color/grey_300</item>
     </style>
 
-    <style name="TextAppearance.CommentTimestamp" parent="@android:style/TextAppearance.Material.Caption">
-        <item name="android:textColor">@color/hint_disabled_dark</item>
+    <style name="TextAppearance.CommentTimestamp" parent="@style/TextAppearance.MaterialComponents.Caption">
+        <item name="android:textColor">?android:textColorTertiary</item>
         <item name="android:textSize">14sp</item>
         <item name="android:fontFeatureSettings">onum, smcp</item>
         <item name="android:letterSpacing">0.02</item>

diff --git a/build.gradle b/build.gradle
@@ -17,6 +17,9 @@
 buildscript { scriptHandler ->
     apply from: 'repositories.gradle',
             to: scriptHandler
+    repositories {
+        google()
+    }
     ext.versions = [
             'compileSdk'         : 28,
             'minSdk'             : 23,
@@ -61,7 +64,7 @@ buildscript { scriptHandler ->
     ]
 
     dependencies {
-        classpath 'com.android.tools.build:gradle:3.4.0-beta05'
+        classpath 'com.android.tools.build:gradle:3.4.0-rc02'
         classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:${versions.kotlin}"
         classpath "com.google.gms:google-services:${versions.googleServices}"
         classpath "io.fabric.tools:gradle:${versions.fabric}"

diff --git a/core/src/main/java/io/plaidapp/core/ui/filter/FilterViewHolder.kt b/core/src/main/java/io/plaidapp/core/ui/filter/FilterViewHolder.kt
@@ -85,7 +85,7 @@ class FilterViewHolder(itemView: View) : RecyclerView.ViewHolder(itemView) {
     }
 
     fun createHighlightAnimator(): Animator {
-        val highlightColor = ColorUtils.getThemeColor(itemView.context, R.attr.colorPrimary, -1)
+        val highlightColor = ColorUtils.getThemeColor(itemView.context, R.attr.colorPrimary)
         val fadeFromTo = ColorUtils.modifyAlpha(highlightColor, 0)
 
         return ObjectAnimator.ofArgb(

diff --git a/core/src/main/java/io/plaidapp/core/util/ColorUtils.java b/core/src/main/java/io/plaidapp/core/util/ColorUtils.java
@@ -18,20 +18,19 @@
 package io.plaidapp.core.util;
 
 import android.content.Context;
+import android.content.res.TypedArray;
 import android.graphics.Bitmap;
+import android.graphics.Color;
 import androidx.annotation.AttrRes;
 import androidx.annotation.CheckResult;
 import androidx.annotation.ColorInt;
-import androidx.annotation.ColorRes;
 import androidx.annotation.FloatRange;
 import androidx.annotation.IntDef;
 import androidx.annotation.IntRange;
 import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
-import androidx.core.content.ContextCompat;
 import androidx.core.math.MathUtils;
 import androidx.palette.graphics.Palette;
-import android.util.TypedValue;
 
 import java.lang.annotation.Retention;
 import java.lang.annotation.RetentionPolicy;
@@ -41,7 +40,8 @@
  */
 public class ColorUtils {
 
-    private ColorUtils() { }
+    private ColorUtils() {
+    }
 
     public static final int IS_LIGHT = 0;
     public static final int IS_DARK = 1;
@@ -50,16 +50,20 @@ private ColorUtils() { }
     /**
      * Set the alpha component of {@code color} to be {@code alpha}.
      */
-    public static @CheckResult @ColorInt int modifyAlpha(@ColorInt int color,
-                                                         @IntRange(from = 0, to = 255) int alpha) {
+    public static @CheckResult
+    @ColorInt
+    int modifyAlpha(@ColorInt int color,
+                    @IntRange(from = 0, to = 255) int alpha) {
         return (color & 0x00ffffff) | (alpha << 24);
     }
 
     /**
      * Set the alpha component of {@code color} to be {@code alpha}.
      */
-    public static @CheckResult @ColorInt int modifyAlpha(@ColorInt int color,
-                                                      @FloatRange(from = 0f, to = 1f) float alpha) {
+    public static @CheckResult
+    @ColorInt
+    int modifyAlpha(@ColorInt int color,
+                    @FloatRange(from = 0f, to = 1f) float alpha) {
         return modifyAlpha(color, (int) (255f * alpha));
     }
 
@@ -69,13 +73,15 @@ private ColorUtils() { }
      * Annoyingly we have to return this Lightness 'enum' rather than a boolean as palette isn't
      * guaranteed to find the most populous color.
      */
-    public static @Lightness int isDark(Palette palette) {
+    public static @Lightness
+    int isDark(Palette palette) {
         Palette.Swatch mostPopulous = getMostPopulousSwatch(palette);
         if (mostPopulous == null) return LIGHTNESS_UNKNOWN;
         return isDark(mostPopulous.getRgb()) ? IS_DARK : IS_LIGHT;
     }
 
-    public static @Nullable Palette.Swatch getMostPopulousSwatch(Palette palette) {
+    public static @Nullable
+    Palette.Swatch getMostPopulousSwatch(Palette palette) {
         Palette.Swatch mostPopulous = null;
         if (palette != null) {
             for (Palette.Swatch swatch : palette.getSwatches()) {
@@ -123,14 +129,15 @@ public static boolean isDark(@ColorInt int color) {
      * Calculate a variant of the color to make it more suitable for overlaying information. Light
      * colors will be lightened and dark colors will be darkened
      *
-     * @param color the color to adjust
-     * @param isDark whether {@code color} is light or dark
+     * @param color               the color to adjust
+     * @param isDark              whether {@code color} is light or dark
      * @param lightnessMultiplier the amount to modify the color e.g. 0.1f will alter it by 10%
      * @return the adjusted color
      */
-    public static @ColorInt int scrimify(@ColorInt int color,
-                                        boolean isDark,
-                                        @FloatRange(from = 0f, to = 1f) float lightnessMultiplier) {
+    public static @ColorInt
+    int scrimify(@ColorInt int color,
+                 boolean isDark,
+                 @FloatRange(from = 0f, to = 1f) float lightnessMultiplier) {
         float[] hsl = new float[3];
         androidx.core.graphics.ColorUtils.colorToHSL(color, hsl);
 
@@ -140,32 +147,29 @@ public static boolean isDark(@ColorInt int color) {
             lightnessMultiplier = 1f - lightnessMultiplier;
         }
 
-        hsl[2] = MathUtils.clamp(hsl[2] * lightnessMultiplier,0f, 1f);
+        hsl[2] = MathUtils.clamp(hsl[2] * lightnessMultiplier, 0f, 1f);
         return androidx.core.graphics.ColorUtils.HSLToColor(hsl);
     }
 
-    public static @ColorInt int scrimify(@ColorInt int color,
-                                        @FloatRange(from = 0f, to = 1f) float lightnessMultiplier) {
+    public static @ColorInt
+    int scrimify(@ColorInt int color,
+                 @FloatRange(from = 0f, to = 1f) float lightnessMultiplier) {
         return scrimify(color, isDark(color), lightnessMultiplier);
     }
 
     /**
      * Queries the theme of the given {@code context} for a theme color.
      *
-     * @param context            the context holding the current theme.
-     * @param attrResId          the theme color attribute to resolve.
-     * @param fallbackColorResId a color resource id tto fallback to if the theme color cannot be
-     *                           resolved.
-     * @return the theme color or the fallback color.
+     * @param context   the context holding the current theme.
+     * @param attrResId the theme color attribute to resolve.
+     * @return the theme color
      */
     @ColorInt
-    public static int getThemeColor(@NonNull Context context, @AttrRes int attrResId,
-            @ColorRes int fallbackColorResId) {
-        final TypedValue tv = new TypedValue();
-        if (context.getTheme().resolveAttribute(attrResId, tv, true)) {
-            return tv.data;
-        }
-        return ContextCompat.getColor(context, fallbackColorResId);
+    public static int getThemeColor(@NonNull Context context, @AttrRes int attrResId) {
+        TypedArray a = context.obtainStyledAttributes(null, new int[]{attrResId});
+        final int color = a.getColor(0, Color.MAGENTA);
+        a.recycle();
+        return color;
     }
 
     @Retention(RetentionPolicy.SOURCE)

diff --git a/core/src/main/res/color/original_poster_text_color.xml b/core/src/main/res/color/original_poster_text_color.xml
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) 2019 Google Inc.
+
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+  in compliance with the License. You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software distributed under the License
+  is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+  or implied. See the License for the specific language governing permissions and limitations under
+  the License.
+  -->
+
+<selector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <item app:state_original_poster="true" android:color="?attr/colorPrimary" />
+    <item android:color="?android:textColorPrimary" />
+
+</selector>
diff --git a/core/src/main/res/color/text_color_tertiary.xml b/core/src/main/res/color/text_color_tertiary.xml
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+  Copyright (c) 2019 Google Inc.
+
+  Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+  in compliance with the License. You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+  Unless required by applicable law or agreed to in writing, software distributed under the License
+  is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+  or implied. See the License for the specific language governing permissions and limitations under
+  the License.
+  -->
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item
+        android:color="?attr/colorOnSurface"
+        android:alpha="0.38" />
+</selector>
diff --git a/core/src/main/res/values-night/colors.xml b/core/src/main/res/values-night/colors.xml
@@ -17,5 +17,7 @@
 
     <!-- app palette -->
     <color name="color_surface">@color/background_dark</color>
+    <color name="color_highlighted_surface">#ff404040</color>
+    <color name="color_background">#ff292929</color>
 
 </resources>
diff --git a/core/src/main/res/values/colors.xml b/core/src/main/res/values/colors.xml
@@ -22,6 +22,8 @@
     <color name="primary">#69F0AE</color>
     <color name="primary_dark">#4aa87a</color>
     <color name="color_surface">@color/background_light</color>
+    <color name="color_highlighted_surface">#ffffff</color>
+    <color name="color_background">#e0e0e0</color>
 
     <!-- common colours -->
     <color name="text_primary_dark">#de000000</color> <!-- 87% -->
@@ -33,7 +35,6 @@
     <color name="ripple_light">#99ffffff</color>
     <color name="ripple_dark">@color/mid_grey</color>
     <color name="background_light">#fafafa</color> <!-- grey 50 -->
-    <color name="background_lightish">#e0e0e0</color> <!-- grey 300 -->
     <color name="background_card">#ffffff</color>
     <color name="background_dark">#ff333333</color>
     <color name="immersive_bars">#99000000</color>
@@ -56,7 +57,6 @@
     <color name="divider">#1f000000</color> <!-- 12% black -->
     <color name="page_indicator_dark">#80333333</color>
     <color name="page_indicator_dark_selected">#ff333333</color>
-    <color name="selected_comment_background">#ffffffff</color>
     <color name="error">#ffdd2c00</color>
     <color name="delete">#fff44336</color>
     <color name="shadow">#4c000000</color>
@@ -76,8 +76,6 @@
     <color name="designer_news_story_comment_background">@android:color/transparent</color>
 
     <color name="designer_news_super_dark">#000133</color>
-    <color name="designer_news_quote_line">#ffeceef1</color>
-    <color name="designer_news_quote">#73000000</color>
 
     <!-- product hunt-->
     <color name="product_hunt">#ffff9800</color>
@@ -87,4 +85,5 @@
         <item>#ff212121</item>
         <item>#ff232323</item>
     </array>
+
 </resources>
diff --git a/core/src/main/res/values/styles.xml b/core/src/main/res/values/styles.xml
@@ -28,10 +28,11 @@
         <item name="colorError">@color/error</item>
         <item name="colorOnError">#ffffff</item>
         <item name="colorSurface">@color/color_surface</item>
-        <item name="android:colorBackground">@color/color_surface</item>
+        <item name="android:colorBackground">@color/color_background</item>
         <item name="android:navigationBarColor">@color/background_super_dark</item>
         <item name="android:statusBarColor">@color/background_super_dark</item>
         <item name="android:textColorHint">@color/hint_disabled_dark</item>
+        <item name="android:textColorTertiary">@color/text_color_tertiary</item>
         <item name="android:windowBackground">@color/background_light</item>
         <item name="android:windowAllowEnterTransitionOverlap">true</item>
         <item name="android:windowAllowReturnTransitionOverlap">true</item>