Hesham/wireguard-android
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

ui: introduce a fresh set of Material3 themes and migrate to them

Browse Source 
Signed-off-by: Harsh Shandilya <me@msfjarvis.dev>
This commit is contained in:
Harsh Shandilya 2023-03-27 16:22:40 +05:30 committed by Jason A. Donenfeld
parent fb05b358c0
commit 4fcb8c4792
15 changed files with 147 additions and 111 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui/src/main/java/com/wireguard/android/activity/LogViewerActivity.kt
View File

@ -40,6 +40,7 @@ import com.wireguard.android.R
import com.wireguard.android.databinding.LogViewerActivityBinding
import com.wireguard.android.util.DownloadsFileSaver
import com.wireguard.android.util.ErrorMessages
import com.wireguard.android.util.resolveAttribute
import com.wireguard.crypto.KeyPair
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch
@ -70,7 +71,7 @@ class LogViewerActivity : AppCompatActivity() {
yearFormatter.format(Date())
}
private val defaultColor by lazy { ResourcesCompat.getColor(resources, R.color.primary_text_color, theme) }
private val defaultColor by lazy { ResourcesCompat.getColor(resources, resolveAttribute(com.google.android.material.R.attr.colorOnSurface), theme) }
private val debugColor by lazy { ResourcesCompat.getColor(resources, R.color.debug_tag_color, theme) }

6
ui/src/main/java/com/wireguard/android/fragment/AddTunnelsSheet.kt
View File

@ -34,10 +34,6 @@ class AddTunnelsSheet : BottomSheetDialogFragment() {
}
}
override fun getTheme(): Int {
return R.style.BottomSheetDialogTheme
}
override fun onCreateView(inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle?): View? {
if (savedInstanceState != null) dismiss()
val view = inflater.inflate(R.layout.add_tunnels_bottom_sheet, container, false)
@ -76,7 +72,7 @@ class AddTunnelsSheet : BottomSheetDialogFragment() {
}
})
val gradientDrawable = GradientDrawable().apply {
setColor(requireContext().resolveAttribute(R.attr.colorBackground))
setColor(requireContext().resolveAttribute(com.google.android.material.R.attr.colorSurface))
}
view.background = gradientDrawable
}

2
ui/src/main/res/layout/tunnel_detail_fragment.xml
View File

@ -25,7 +25,7 @@
<ScrollView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorBackground"
android:background="?attr/colorSurface"
android:clickable="true"
android:focusable="true">

2
ui/src/main/res/layout/tunnel_editor_fragment.xml
View File

@ -28,7 +28,7 @@
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/colorBackground">
android:background="?attr/colorSurface">
<ScrollView
android:layout_width="match_parent"

2
ui/src/main/res/layout/tunnel_list_fragment.xml
View File

@ -24,7 +24,7 @@
android:id="@+id/main_container"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="?attr/colorBackground"
android:background="?attr/colorSurface"
android:clipChildren="false">
<androidx.recyclerview.widget.RecyclerView

4
ui/src/main/res/layout/tv_tunnel_list_item.xml
View File

@ -34,10 +34,10 @@
android:layout_margin="8dp"
android:layout_marginTop="4dp"
android:layout_marginBottom="0dp"
android:backgroundTint="@{(item.state == State.UP &amp;&amp; !isDeleting) ? @color/secondary_dark_color : (isDeleting &amp;&amp; isFocused) ? @color/tv_card_delete_background : @color/tv_card_background}"
android:checkable="true"
android:focusable="true"
app:contentPadding="8dp">
app:contentPadding="8dp"
android:backgroundTint="@{(item.state == State.UP &amp;&amp; !isDeleting) ? @color/tv_secondary_dark_color : (isDeleting &amp;&amp; isFocused) ? @color/tv_card_delete_background : @color/tv_card_background}">
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"

23
ui/src/main/res/values-night/colors.xml
View File

@ -1,23 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Base palette -->
<color name="primary_color">#ff212121</color>
<color name="primary_light_color">#ff484848</color>
<color name="primary_dark_color">#ff000000</color>
<color name="secondary_color">#ff4285f4</color>
<color name="secondary_light_color">#ff80b4ff</color>
<color name="secondary_dark_color">#ff0059c1</color>
<color name="primary_text_color">#ffffffff</color>
<color name="secondary_text_color">#ffffffff</color>
<!-- Theme variables -->
<color name="list_multiselect_background">#1aeeeeee</color>
<color name="status_bar_color">@color/primary_color</color>
<color name="navigation_bar_color">#aa212121</color>
<!-- Log viewer tag colors -->
<color name="debug_tag_color">#aaaaaa</color>
<color name="error_tag_color">#ff0000</color>
<color name="info_tag_color">#00ff00</color>
<color name="warning_tag_color">#ffff00</color>
</resources>

31
ui/src/main/res/values-night/themes.xml Normal file
View File

@ -0,0 +1,31 @@
<resources>
<style name="WireGuardTheme" parent="Theme.Material3.Dark">
<item name="colorPrimary">@color/md_theme_dark_primary</item>
<item name="colorOnPrimary">@color/md_theme_dark_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_dark_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_dark_onPrimaryContainer</item>
<item name="colorSecondary">@color/md_theme_dark_secondary</item>
<item name="colorOnSecondary">@color/md_theme_dark_onSecondary</item>
<item name="colorSecondaryContainer">@color/md_theme_dark_secondaryContainer</item>
<item name="colorOnSecondaryContainer">@color/md_theme_dark_onSecondaryContainer</item>
<item name="colorTertiary">@color/md_theme_dark_tertiary</item>
<item name="colorOnTertiary">@color/md_theme_dark_onTertiary</item>
<item name="colorTertiaryContainer">@color/md_theme_dark_tertiaryContainer</item>
<item name="colorOnTertiaryContainer">@color/md_theme_dark_onTertiaryContainer</item>
<item name="colorError">@color/md_theme_dark_error</item>
<item name="colorErrorContainer">@color/md_theme_dark_errorContainer</item>
<item name="colorOnError">@color/md_theme_dark_onError</item>
<item name="colorOnErrorContainer">@color/md_theme_dark_onErrorContainer</item>
<item name="android:colorBackground">@color/md_theme_dark_background</item>
<item name="colorOnBackground">@color/md_theme_dark_onBackground</item>
<item name="colorSurface">@color/md_theme_dark_surface</item>
<item name="colorOnSurface">@color/md_theme_dark_onSurface</item>
<item name="colorSurfaceVariant">@color/md_theme_dark_surfaceVariant</item>
<item name="colorOnSurfaceVariant">@color/md_theme_dark_onSurfaceVariant</item>
<item name="colorOutline">@color/md_theme_dark_outline</item>
<item name="colorOnSurfaceInverse">@color/md_theme_dark_inverseOnSurface</item>
<item name="colorSurfaceInverse">@color/md_theme_dark_inverseSurface</item>
<item name="colorPrimaryInverse">@color/md_theme_dark_inversePrimary</item>
</style>
</resources>

9
ui/src/main/res/values-v27/styles.xml
View File

@ -1,9 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="AppTheme" parent="WireGuardTheme">
<item name="android:navigationBarColor">@color/navigation_bar_color</item>
<item name="android:windowLightNavigationBar">@bool/light_navigation_bar</item>
<item name="android:windowLightStatusBar">@bool/light_status_bar</item>
</style>
</resources>

4
ui/src/main/res/values/attrs.xml
View File

@ -4,8 +4,4 @@
<attr name="state_multiselected" format="boolean" />
<attr name="colorMultiselectActiveBackground" format="reference|color" />
</declare-styleable>
<declare-styleable name="custom_color">
<attr name="colorBackground" format="reference|color" />
</declare-styleable>
</resources>

81
ui/src/main/res/values/colors.xml
View File

@ -1,24 +1,67 @@
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Base palette -->
<color name="primary_color">#ffffffff</color>
<color name="primary_light_color">#ffffffff</color>
<color name="primary_dark_color">#ffcccccc</color>
<color name="secondary_color">#ff1a73e8</color>
<color name="secondary_light_color">#ff1a73e8</color>
<color name="secondary_dark_color">#ff1a73e8</color>
<color name="primary_text_color">#ff000000</color>
<color name="secondary_text_color">#ffffffff</color>
<resources>
<color name="seed">#1a73e8</color>
<color name="md_theme_light_primary">#005BC0</color>
<color name="md_theme_light_onPrimary">#FFFFFF</color>
<color name="md_theme_light_primaryContainer">#D8E2FF</color>
<color name="md_theme_light_onPrimaryContainer">#001A41</color>
<color name="md_theme_light_secondary">#565E71</color>
<color name="md_theme_light_onSecondary">#FFFFFF</color>
<color name="md_theme_light_secondaryContainer">#DBE2F9</color>
<color name="md_theme_light_onSecondaryContainer">#131B2C</color>
<color name="md_theme_light_tertiary">#715574</color>
<color name="md_theme_light_onTertiary">#FFFFFF</color>
<color name="md_theme_light_tertiaryContainer">#FBD7FC</color>
<color name="md_theme_light_onTertiaryContainer">#29132D</color>
<color name="md_theme_light_error">#BA1A1A</color>
<color name="md_theme_light_errorContainer">#FFDAD6</color>
<color name="md_theme_light_onError">#FFFFFF</color>
<color name="md_theme_light_onErrorContainer">#410002</color>
<color name="md_theme_light_background">#FEFBFF</color>
<color name="md_theme_light_onBackground">#1B1B1F</color>
<color name="md_theme_light_surface">#FEFBFF</color>
<color name="md_theme_light_onSurface">#1B1B1F</color>
<color name="md_theme_light_surfaceVariant">#E1E2EC</color>
<color name="md_theme_light_onSurfaceVariant">#44474F</color>
<color name="md_theme_light_outline">#74777F</color>
<color name="md_theme_light_inverseOnSurface">#F2F0F4</color>
<color name="md_theme_light_inverseSurface">#303033</color>
<color name="md_theme_light_inversePrimary">#ADC7FF</color>
<color name="md_theme_light_shadow">#000000</color>
<color name="md_theme_light_surfaceTint">#005BC0</color>
<color name="md_theme_light_outlineVariant">#C4C6D0</color>
<color name="md_theme_light_scrim">#000000</color>
<color name="md_theme_dark_primary">#ADC7FF</color>
<color name="md_theme_dark_onPrimary">#002E68</color>
<color name="md_theme_dark_primaryContainer">#004493</color>
<color name="md_theme_dark_onPrimaryContainer">#D8E2FF</color>
<color name="md_theme_dark_secondary">#BFC6DC</color>
<color name="md_theme_dark_onSecondary">#283041</color>
<color name="md_theme_dark_secondaryContainer">#3F4759</color>
<color name="md_theme_dark_onSecondaryContainer">#DBE2F9</color>
<color name="md_theme_dark_tertiary">#DEBCDF</color>
<color name="md_theme_dark_onTertiary">#402843</color>
<color name="md_theme_dark_tertiaryContainer">#583E5B</color>
<color name="md_theme_dark_onTertiaryContainer">#FBD7FC</color>
<color name="md_theme_dark_error">#FFB4AB</color>
<color name="md_theme_dark_errorContainer">#93000A</color>
<color name="md_theme_dark_onError">#690005</color>
<color name="md_theme_dark_onErrorContainer">#FFDAD6</color>
<color name="md_theme_dark_background">#1B1B1F</color>
<color name="md_theme_dark_onBackground">#E3E2E6</color>
<color name="md_theme_dark_surface">#1B1B1F</color>
<color name="md_theme_dark_onSurface">#E3E2E6</color>
<color name="md_theme_dark_surfaceVariant">#44474F</color>
<color name="md_theme_dark_onSurfaceVariant">#C4C6D0</color>
<color name="md_theme_dark_outline">#8E9099</color>
<color name="md_theme_dark_inverseOnSurface">#1B1B1F</color>
<color name="md_theme_dark_inverseSurface">#E3E2E6</color>
<color name="md_theme_dark_inversePrimary">#005BC0</color>
<color name="md_theme_dark_shadow">#000000</color>
<color name="md_theme_dark_surfaceTint">#ADC7FF</color>
<color name="md_theme_dark_outlineVariant">#44474F</color>
<color name="md_theme_dark_scrim">#000000</color>
<!-- Theme variables -->
<color name="color_control_normal">@color/primary_text_color</color>
<color name="status_bar_color">@color/primary_color</color>
<color name="navigation_bar_color">#aaffffff</color>
<color name="list_multiselect_background">#ffeeeeee</color>
<color name="mtrl_textinput_default_box_stroke_color" tools:override="true">
@color/secondary_color
</color>
<color name="white">#ffffffff</color>
<!-- Log viewer tag colors -->
<color name="debug_tag_color">#444444</color>

51
ui/src/main/res/values/styles.xml
View File

@ -1,49 +1,28 @@
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
<style name="WireGuardTheme" parent="Theme.Material3.DayNight">
<item name="colorPrimary">@color/primary_color</item>
<item name="colorOnPrimary">@color/color_control_normal</item>
<item name="colorPrimaryDark">@color/primary_color</item>
<item name="colorPrimaryVariant">@color/primary_light_color</item>
<item name="colorSecondary">@color/secondary_color</item>
<item name="colorOnSecondary">@color/secondary_text_color</item>
<item name="colorSurface">@color/primary_color</item>
<item name="colorOnSurface">@color/color_control_normal</item>
<item name="colorBackground">@color/primary_color</item>
<item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
<item name="colorControlNormal">@color/color_control_normal</item>
<item name="elevationOverlayColor">@color/primary_light_color</item>
<item name="elevationOverlayEnabled">true</item>
<item name="android:statusBarColor">@color/status_bar_color</item>
<item name="android:windowBackground">@color/primary_color</item>
<style name="WireGuardTheme.Toolbar" parent="Widget.Material3.Toolbar">
<item name="android:background">?attr/colorSurface</item>
</style>
<style name="AppTheme" parent="WireGuardTheme">
<item name="android:statusBarColor">?android:colorBackground</item>
<item name="android:navigationBarColor">?android:colorBackground</item>
<item name="android:windowLightNavigationBar">@bool/light_navigation_bar</item>
<item name="android:windowLightStatusBar">@bool/light_status_bar</item>
<item name="materialCardViewStyle">@style/AppTheme.MaterialCardView</item>
<item name="toolbarStyle">@style/WireGuardTheme.Toolbar</item>
<item name="bottomSheetDialogTheme">@style/WireGuardTheme.BottomSheetDialog</item>
</style>
<style name="WireGuardTheme.Toolbar" parent="Widget.Material3.Toolbar">
<item name="android:background">?attr/colorBackground</item>
</style>
<style name="AppTheme" parent="WireGuardTheme" />
<style name="AppTheme.MaterialCardView" parent="Widget.MaterialComponents.CardView">
<style name="AppTheme.MaterialCardView" parent="Widget.Material3.CardView.Elevated">
<item name="cornerRadius">4dp</item>
<item name="cardElevation">4dp</item>
<item name="contentPadding">8dp</item>
<item name="cardBackgroundColor">?attr/elevationOverlayColor</item>
</style>
<style name="BottomSheetDialogTheme" parent="ThemeOverlay.MaterialComponents.BottomSheetDialog">
<style name="WireGuardTheme.BottomSheetDialog" parent="ThemeOverlay.Material3.BottomSheetDialog">
<item name="android:windowIsFloating">false</item>
<item name="android:navigationBarColor">?attr/colorBackground</item>
<item name="android:statusBarColor">@android:color/transparent</item>
<item name="android:windowTranslucentNavigation">false</item>
<item name="android:windowIsTranslucent">false</item>
<item name="android:backgroundDimEnabled">true</item>
<item name="android:backgroundDimAmount">0.5</item>
<item name="android:windowTranslucentStatus">false</item>
<item name="android:colorBackground">@android:color/transparent</item>
<item name="android:navigationBarColor">@android:color/transparent</item>
</style>
<style name="NoBackgroundTheme" parent="AppTheme">
@ -62,8 +41,4 @@
<style name="DetailText" parent="TextAppearance.MaterialComponents.Body1" />
<style name="SectionText" parent="TextAppearance.MaterialComponents.Subtitle1" />
<style name="ThemeOverlay.AppTheme.TextInputEditText.OutlinedBox" parent="ThemeOverlay.MaterialComponents.TextInputEditText.OutlinedBox">
<item name="colorControlActivated">@color/color_control_normal</item>
</style>
</resources>

31
ui/src/main/res/values/themes.xml Normal file
View File

@ -0,0 +1,31 @@
<resources>
<style name="WireGuardTheme" parent="Theme.Material3.Light">
<item name="colorPrimary">@color/md_theme_light_primary</item>
<item name="colorOnPrimary">@color/md_theme_light_onPrimary</item>
<item name="colorPrimaryContainer">@color/md_theme_light_primaryContainer</item>
<item name="colorOnPrimaryContainer">@color/md_theme_light_onPrimaryContainer</item>
<item name="colorSecondary">@color/md_theme_light_secondary</item>
<item name="colorOnSecondary">@color/md_theme_light_onSecondary</item>
<item name="colorSecondaryContainer">@color/md_theme_light_secondaryContainer</item>
<item name="colorOnSecondaryContainer">@color/md_theme_light_onSecondaryContainer</item>
<item name="colorTertiary">@color/md_theme_light_tertiary</item>
<item name="colorOnTertiary">@color/md_theme_light_onTertiary</item>
<item name="colorTertiaryContainer">@color/md_theme_light_tertiaryContainer</item>
<item name="colorOnTertiaryContainer">@color/md_theme_light_onTertiaryContainer</item>
<item name="colorError">@color/md_theme_light_error</item>
<item name="colorErrorContainer">@color/md_theme_light_errorContainer</item>
<item name="colorOnError">@color/md_theme_light_onError</item>
<item name="colorOnErrorContainer">@color/md_theme_light_onErrorContainer</item>
<item name="android:colorBackground">@color/md_theme_light_background</item>
<item name="colorOnBackground">@color/md_theme_light_onBackground</item>
<item name="colorSurface">@color/md_theme_light_surface</item>
<item name="colorOnSurface">@color/md_theme_light_onSurface</item>
<item name="colorSurfaceVariant">@color/md_theme_light_surfaceVariant</item>
<item name="colorOnSurfaceVariant">@color/md_theme_light_onSurfaceVariant</item>
<item name="colorOutline">@color/md_theme_light_outline</item>
<item name="colorOnSurfaceInverse">@color/md_theme_light_inverseOnSurface</item>
<item name="colorSurfaceInverse">@color/md_theme_light_inverseSurface</item>
<item name="colorPrimaryInverse">@color/md_theme_light_inversePrimary</item>
</style>
</resources>

1
ui/src/main/res/values/tv_colors.xml
View File

@ -1,6 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<resources>
<color name="tv_primary_color">#ff212121</color>
<color name="tv_secondary_dark_color">#ff0059c1</color>
<color name="tv_card_background">@color/tv_primary_color</color>
<color name="tv_card_delete_background">#b00020</color>
</resources>

8
ui/src/main/res/values/tv_styles.xml
View File

@ -10,7 +10,6 @@
<item name="colorOnSecondary">#ff0059c1</item>
<item name="colorSurface">@color/tv_primary_color</item>
<item name="colorOnSurface">#fffafafa</item>
<item name="colorBackground">@color/tv_primary_color</item>
<item name="colorMultiselectActiveBackground">@color/list_multiselect_background</item>
<item name="colorControlNormal">#fffafafa</item>
<item name="elevationOverlayEnabled">false</item>
@ -25,15 +24,10 @@
<style name="TextInputLayoutBase" parent="@style/Widget.MaterialComponents.TextInputLayout.OutlinedBox">
<item name="boxStrokeColor">?attr/colorSecondary</item>
<item name="hintTextColor">?attr/colorOnPrimary</item>
<item name="materialThemeOverlay">
@style/ThemeOverlay.AppTheme.TextInputEditText.OutlinedBox
</item>
</style>
<style name="TvTheme.Dialog" parent="Theme.MaterialComponents.DayNight.Dialog.Alert">
<item name="colorPrimary">@color/secondary_color</item>
<item name="colorSecondary">@color/secondary_color</item>
<item name="android:windowBackground">?attr/colorBackground</item>
<item name="android:windowBackground">?attr/colorSurface</item>
</style>
<style name="TvTheme.MaterialCardView" parent="Widget.MaterialComponents.CardView">