Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit f486be70 authored by George Lin's avatar George Lin
Browse files

[TP] Use design clock colors

Use the clock colors approved from the designers. For each color, we
have its min and max tone to tune.
1. Create ClockColorViewModel to represents a clock color config
2. Use string id to identify the selected color
3. Rename COLOR_TONE to COLOR_TONE_PROGRESS

Test: manually test that the color tone works as expected
Bug: 241966062
Change-Id: Iadb9ae773478008137413ad5873bb88f9a63b4b1
parent 55a924db
Loading
Loading
Loading
Loading
+73 −0
Original line number Diff line number Diff line
<?xml version="1.0" encoding="utf-8"?>
<!--
     Copyright (C) 2023 The Android Open Source Project

     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.
-->
<resources>
    <string-array name="clock_color_ids">
        <item>RED</item>
        <item>ORANGE</item>
        <item>YELLOW</item>
        <item>GREEN</item>
        <item>BLUE</item>
        <item>INDIGO</item>
        <item>VIOLET</item>
        <item>GRAY</item>
        <item>TEAL</item>
    </string-array>
    <array name="clock_color_names">
        <item>@string/clock_color_red</item>
        <item>@string/clock_color_orange</item>
        <item>@string/clock_color_yellow</item>
        <item>@string/clock_color_green</item>
        <item>@string/clock_color_blue</item>
        <item>@string/clock_color_indigo</item>
        <item>@string/clock_color_violet</item>
        <item>@string/clock_color_gray</item>
        <item>@string/clock_color_teal</item>
    </array>
    <array name="clock_colors">
        <item>#FFA3A7</item>
        <item>#F7AC69</item>
        <item>#FFC951</item>
        <item>#88D86A</item>
        <item>#8EC8FF</item>
        <item>#B9AAFF</item>
        <item>#F6A2FF</item>
        <item>#B9B9B9</item>
        <item>#40D9CF</item>
    </array>
    <array name="clock_color_tone_min">
        <item>20</item>
        <item>20</item>
        <item>50</item>
        <item>20</item>
        <item>20</item>
        <item>10</item>
        <item>20</item>
        <item>0</item>
        <item>20</item>
    </array>
    <array name="clock_color_tone_max">
        <item>95</item>
        <item>95</item>
        <item>95</item>
        <item>99</item>
        <item>95</item>
        <item>95</item>
        <item>97</item>
        <item>100</item>
        <item>99</item>
    </array>
</resources>
 No newline at end of file
+27 −0
Original line number Diff line number Diff line
@@ -45,6 +45,33 @@
    <!-- Title of a tab to change the clock color. [CHAR LIMIT=15] -->
    <string name="clock_color">Color</string>

    <!-- Title of a clock color red option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_red">Red</string>

    <!-- Title of a clock color orange option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_orange">Orange</string>

    <!-- Title of a clock color yellow option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_yellow">Yellow</string>

    <!-- Title of a clock color green option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_green">Green</string>

    <!-- Title of a clock color blue option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_blue">Blue</string>

    <!-- Title of a clock color indigo option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_indigo">Indigo</string>

    <!-- Title of a clock color violet option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_violet">Violet</string>

    <!-- Title of a clock color grey option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_gray">Grey</string>

    <!-- Title of a clock color teal option that will appear in the description of the custom clock section. [CHAR LIMIT=15] -->
    <string name="clock_color_teal">Teal</string>

    <!-- Title of a tab to change the clock size. [CHAR LIMIT=15] -->
    <string name="clock_size">Size</string>

+3 −3
Original line number Diff line number Diff line
@@ -39,12 +39,12 @@ interface ClockPickerRepository {
     * Set clock color to the settings.
     *
     * @param selectedColor selected color in the color option list.
     * @param colorTone color tone from 0 to 100 to apply to the selected color
     * @param colorToneProgress color tone from 0 to 100 to apply to the selected color
     * @param seedColor the actual clock color after blending the selected color and color tone
     */
    fun setClockColor(
        @ColorInt selectedColor: Int?,
        @IntRange(from = 0, to = 100) colorTone: Int,
        selectedColorId: String?,
        @IntRange(from = 0, to = 100) colorToneProgress: Int,
        @ColorInt seedColor: Int?,
    )

+18 −15
Original line number Diff line number Diff line
@@ -86,9 +86,9 @@ class ClockPickerRepositoryImpl(
                            .getClocks()
                            .find { clockMetadata -> clockMetadata.clockId == currentClockId }
                            ?.toModel(
                                selectedColor = metadata?.getSelectedColor(),
                                selectedColorId = metadata?.getSelectedColorId(),
                                colorTone = metadata?.getColorTone()
                                        ?: ClockMetadataModel.DEFAULT_COLOR_TONE,
                                        ?: ClockMetadataModel.DEFAULT_COLOR_TONE_PROGRESS,
                                seedColor = registry.seedColor
                            )
                    trySend(model)
@@ -119,16 +119,16 @@ class ClockPickerRepositoryImpl(
    }

    override fun setClockColor(
        @ColorInt selectedColor: Int?,
        @IntRange(from = 0, to = 100) colorTone: Int,
        selectedColorId: String?,
        @IntRange(from = 0, to = 100) colorToneProgress: Int,
        @ColorInt seedColor: Int?,
    ) {
        registry.mutateSetting { oldSettings ->
            val newSettings = oldSettings.copy(seedColor = seedColor)
            newSettings.metadata =
                oldSettings.metadata
                    .put(KEY_METADATA_SELECTED_COLOR, selectedColor)
                    .put(KEY_METADATA_COLOR_TONE, colorTone)
                    .put(KEY_METADATA_SELECTED_COLOR_ID, selectedColorId)
                    .put(KEY_METADATA_COLOR_TONE_PROGRESS, colorToneProgress)
            newSettings
        }
    }
@@ -153,38 +153,41 @@ class ClockPickerRepositoryImpl(
        )
    }

    private fun JSONObject.getSelectedColor(): Int? {
        return if (this.isNull(KEY_METADATA_SELECTED_COLOR)) {
    private fun JSONObject.getSelectedColorId(): String? {
        return if (this.isNull(KEY_METADATA_SELECTED_COLOR_ID)) {
            null
        } else {
            this.getInt(KEY_METADATA_SELECTED_COLOR)
            this.getString(KEY_METADATA_SELECTED_COLOR_ID)
        }
    }

    private fun JSONObject.getColorTone(): Int {
        return this.optInt(KEY_METADATA_COLOR_TONE, ClockMetadataModel.DEFAULT_COLOR_TONE)
        return this.optInt(
            KEY_METADATA_COLOR_TONE_PROGRESS,
            ClockMetadataModel.DEFAULT_COLOR_TONE_PROGRESS
        )
    }

    /** By default, [ClockMetadataModel] has no color information unless specified. */
    private fun ClockMetadata.toModel(
        @ColorInt selectedColor: Int? = null,
        selectedColorId: String? = null,
        @IntRange(from = 0, to = 100) colorTone: Int = 0,
        @ColorInt seedColor: Int? = null,
    ): ClockMetadataModel {
        return ClockMetadataModel(
            clockId = clockId,
            name = name,
            selectedColor = selectedColor,
            colorTone = colorTone,
            selectedColorId = selectedColorId,
            colorToneProgress = colorTone,
            seedColor = seedColor,
        )
    }

    companion object {
        // The selected color in the color option list
        private const val KEY_METADATA_SELECTED_COLOR = "metadataSelectedColor"
        private const val KEY_METADATA_SELECTED_COLOR_ID = "metadataSelectedColorId"

        // The color tone to apply to the selected color
        private const val KEY_METADATA_COLOR_TONE = "metadataColorTone"
        private const val KEY_METADATA_COLOR_TONE_PROGRESS = "metadataColorToneProgress"
    }
}
+12 −5
Original line number Diff line number Diff line
@@ -17,6 +17,8 @@

package com.android.customization.picker.clock.domain.interactor

import androidx.annotation.ColorInt
import androidx.annotation.IntRange
import com.android.customization.picker.clock.data.repository.ClockPickerRepository
import com.android.customization.picker.clock.shared.ClockSize
import com.android.customization.picker.clock.shared.model.ClockMetadataModel
@@ -35,10 +37,11 @@ class ClockPickerInteractor(private val repository: ClockPickerRepository) {
    val selectedClockId: Flow<String> =
        repository.selectedClock.map { clock -> clock.clockId }.distinctUntilChanged()

    val selectedColor: Flow<Int?> =
        repository.selectedClock.map { clock -> clock.selectedColor }.distinctUntilChanged()
    val selectedColorId: Flow<String?> =
        repository.selectedClock.map { clock -> clock.selectedColorId }.distinctUntilChanged()

    val colorTone: Flow<Int> = repository.selectedClock.map { clock -> clock.colorTone }
    val colorToneProgress: Flow<Int> =
        repository.selectedClock.map { clock -> clock.colorToneProgress }

    val seedColor: Flow<Int?> = repository.selectedClock.map { clock -> clock.seedColor }

@@ -48,8 +51,12 @@ class ClockPickerInteractor(private val repository: ClockPickerRepository) {
        repository.setSelectedClock(clockId)
    }

    fun setClockColor(selectedColor: Int?, colorTone: Int, seedColor: Int?) {
        repository.setClockColor(selectedColor, colorTone, seedColor)
    fun setClockColor(
        selectedColorId: String?,
        @IntRange(from = 0, to = 100) colorToneProgress: Int,
        @ColorInt seedColor: Int?,
    ) {
        repository.setClockColor(selectedColorId, colorToneProgress, seedColor)
    }

    suspend fun setClockSize(size: ClockSize) {
Loading