From 131826226557bc0c4699643ba08785994c03c2d6 Mon Sep 17 00:00:00 2001 From: Konstantin Ivanov <54908981+konstantiniiv@users.noreply.github.com> Date: Tue, 4 Apr 2023 13:22:35 +0200 Subject: [PATCH] DROID-1086 Design | Design system, Typography and buttons (#3067) * DROID-1086 typography, sample app * DROID-1086 design system text styles * DROID-1086 legacy * DROID-1086 buttons, sample * DROID-1086 design * DROID-1086 ibm font * DROID-1086 text color buttons * DROID-1086 button background primary * DROID-1086 design system styles, typography + buttons * DROID-1086 buttons secondary design * DROID-1086 sample app * DROID-1086 targetApi * DROID-1086 number button * DROID-1086 button number text * DROID-1086 move styles to theme * DROID-1086 number button * DROID-1086 styles * DROID-1086 style fix * DROID-1086 pr * DROID-1086 docs, sample app screens * DROID-1086 sample app, buttons * DROID-1086 pr fix --- .../res/layout/action_toolbar_page_icon.xml | 76 ---- .../layout/action_toolbar_profile_icon.xml | 60 --- app/src/main/res/values/styles.xml | 27 -- .../anytype/core_ui/widgets/NumberButton.kt | 16 + .../text_color_button_primary_selector.xml | 6 + .../text_color_button_secondary_selector.xml | 6 + ...=> button_background_primary_selector.xml} | 6 +- .../button_background_secondary_selector.xml | 25 ++ .../ds_button_with_number_text_bg.xml | 14 + core-ui/src/main/res/font/ibm_plex_mono.xml | 7 + .../src/main/res/layout/ds_button_number.xml | 34 ++ .../layout/layout_object_set_dv_header.xml | 3 +- core-ui/src/main/res/values/design_system.xml | 348 ++++++++++++++++++ core-ui/src/main/res/values/font_certs.xml | 17 + .../src/main/res/values/preloaded_fonts.xml | 6 + docs/screens.md | 9 + sample/build.gradle | 4 + sample/src/main/AndroidManifest.xml | 2 +- .../design_system/ButtonsPrimaryFragment.kt | 6 + .../design_system/ButtonsSecondaryFragment.kt | 6 + .../design_system/ContentStyleFragment.kt | 6 + .../design_system/ContentStyleMultiline.kt | 24 ++ .../design_system/DesignSystemActivity.kt | 66 ++++ .../sample/design_system/NavigateFragment.kt | 39 ++ .../sample/design_system/UxStyleFragment.kt | 6 + .../res/layout/activity_design_sysytem.xml | 6 + .../src/main/res/layout/fragment_buttons.xml | 176 +++++++++ .../res/layout/fragment_buttons_secondary.xml | 153 ++++++++ .../res/layout/fragment_content_style.xml | 185 ++++++++++ .../fragment_content_style_multiline.xml | 224 +++++++++++ .../src/main/res/layout/fragment_navigate.xml | 78 ++++ .../src/main/res/layout/fragment_ux_style.xml | 130 +++++++ sample/src/main/res/values/styles.xml | 29 +- 33 files changed, 1629 insertions(+), 171 deletions(-) delete mode 100644 app/src/main/res/layout/action_toolbar_page_icon.xml delete mode 100644 app/src/main/res/layout/action_toolbar_profile_icon.xml create mode 100644 core-ui/src/main/java/com/anytypeio/anytype/core_ui/widgets/NumberButton.kt create mode 100644 core-ui/src/main/res/color/text_color_button_primary_selector.xml create mode 100644 core-ui/src/main/res/color/text_color_button_secondary_selector.xml rename core-ui/src/main/res/drawable/{ds_button_primary_background_selector.xml => button_background_primary_selector.xml} (83%) create mode 100644 core-ui/src/main/res/drawable/button_background_secondary_selector.xml create mode 100644 core-ui/src/main/res/drawable/ds_button_with_number_text_bg.xml create mode 100644 core-ui/src/main/res/font/ibm_plex_mono.xml create mode 100644 core-ui/src/main/res/layout/ds_button_number.xml create mode 100644 core-ui/src/main/res/values/design_system.xml create mode 100644 core-ui/src/main/res/values/font_certs.xml create mode 100644 core-ui/src/main/res/values/preloaded_fonts.xml create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsPrimaryFragment.kt create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsSecondaryFragment.kt create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleFragment.kt create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleMultiline.kt create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt create mode 100644 sample/src/main/java/com/anytypeio/anytype/sample/design_system/UxStyleFragment.kt create mode 100644 sample/src/main/res/layout/activity_design_sysytem.xml create mode 100644 sample/src/main/res/layout/fragment_buttons.xml create mode 100644 sample/src/main/res/layout/fragment_buttons_secondary.xml create mode 100644 sample/src/main/res/layout/fragment_content_style.xml create mode 100644 sample/src/main/res/layout/fragment_content_style_multiline.xml create mode 100644 sample/src/main/res/layout/fragment_navigate.xml create mode 100644 sample/src/main/res/layout/fragment_ux_style.xml diff --git a/app/src/main/res/layout/action_toolbar_page_icon.xml b/app/src/main/res/layout/action_toolbar_page_icon.xml deleted file mode 100644 index f1f5858e79..0000000000 --- a/app/src/main/res/layout/action_toolbar_page_icon.xml +++ /dev/null @@ -1,76 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/src/main/res/layout/action_toolbar_profile_icon.xml b/app/src/main/res/layout/action_toolbar_profile_icon.xml deleted file mode 100644 index bc5caf5725..0000000000 --- a/app/src/main/res/layout/action_toolbar_profile_icon.xml +++ /dev/null @@ -1,60 +0,0 @@ - - - - - - - - - - - - - - - - - - \ No newline at end of file diff --git a/app/src/main/res/values/styles.xml b/app/src/main/res/values/styles.xml index b19962fe49..4fb86edd57 100644 --- a/app/src/main/res/values/styles.xml +++ b/app/src/main/res/values/styles.xml @@ -10,36 +10,9 @@ @color/colorPrimaryDark @color/orange @style/AppBottomSheetDialogTheme - @style/GraphikTextViewStyle - @style/GraphikButtonStyle @style/SearchViewStyle - - - - - - - - - - - - + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/core-ui/src/main/res/values/font_certs.xml b/core-ui/src/main/res/values/font_certs.xml new file mode 100644 index 0000000000..d2226ac01c --- /dev/null +++ b/core-ui/src/main/res/values/font_certs.xml @@ -0,0 +1,17 @@ + + + + @array/com_google_android_gms_fonts_certs_dev + @array/com_google_android_gms_fonts_certs_prod + + + + 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 + + + diff --git a/core-ui/src/main/res/values/preloaded_fonts.xml b/core-ui/src/main/res/values/preloaded_fonts.xml new file mode 100644 index 0000000000..326b4e61c6 --- /dev/null +++ b/core-ui/src/main/res/values/preloaded_fonts.xml @@ -0,0 +1,6 @@ + + + + @font/ibm_plex_mono + + diff --git a/docs/screens.md b/docs/screens.md index 7e3974f042..b0d37a7a24 100644 --- a/docs/screens.md +++ b/docs/screens.md @@ -14,3 +14,12 @@ - [RelationCreateFromScratchForDataViewFragment] creating a Relation for the Data View contained in this Set or this Collection // TODO + + +[Sample App] + - [DesignSystemActivity] activity for demonstration Anytype app design + - [ButtonsPrimaryFragment] screen with primary buttons + - [ButtonsSecondaryFragment] screen with secondary buttons + - [ContentStyleFragment] typography, content text styles + - [ContentStyleMultiline] typography, content text styles, large text sample + - [UxStyleFragment] typography, interface text styles \ No newline at end of file diff --git a/sample/build.gradle b/sample/build.gradle index b96cb6ccf2..8cf7c66589 100644 --- a/sample/build.gradle +++ b/sample/build.gradle @@ -37,6 +37,10 @@ android { kotlinOptions { jvmTarget = JavaVersion.VERSION_11 } + + buildFeatures { + viewBinding true + } } dependencies { diff --git a/sample/src/main/AndroidManifest.xml b/sample/src/main/AndroidManifest.xml index 0a1faada6f..6a13db23d6 100644 --- a/sample/src/main/AndroidManifest.xml +++ b/sample/src/main/AndroidManifest.xml @@ -20,7 +20,7 @@ android:usesCleartextTraffic="true" tools:ignore="GoogleAppIndexingWarning"> diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsPrimaryFragment.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsPrimaryFragment.kt new file mode 100644 index 0000000000..8ea790fc96 --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsPrimaryFragment.kt @@ -0,0 +1,6 @@ +package com.anytypeio.anytype.sample.design_system + +import androidx.fragment.app.Fragment +import com.anytypeio.anytype.sample.R + +class ButtonsPrimaryFragment : Fragment(R.layout.fragment_buttons) \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsSecondaryFragment.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsSecondaryFragment.kt new file mode 100644 index 0000000000..12a2876abe --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ButtonsSecondaryFragment.kt @@ -0,0 +1,6 @@ +package com.anytypeio.anytype.sample.design_system + +import androidx.fragment.app.Fragment +import com.anytypeio.anytype.sample.R + +class ButtonsSecondaryFragment : Fragment(R.layout.fragment_buttons_secondary) \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleFragment.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleFragment.kt new file mode 100644 index 0000000000..7f5aca8e42 --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleFragment.kt @@ -0,0 +1,6 @@ +package com.anytypeio.anytype.sample.design_system + +import androidx.fragment.app.Fragment +import com.anytypeio.anytype.sample.R + +class ContentStyleFragment: Fragment(R.layout.fragment_content_style) \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleMultiline.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleMultiline.kt new file mode 100644 index 0000000000..927b9cdaaa --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/ContentStyleMultiline.kt @@ -0,0 +1,24 @@ +package com.anytypeio.anytype.sample.design_system + +import android.os.Bundle +import android.view.View +import androidx.fragment.app.Fragment +import com.anytypeio.anytype.sample.R +import com.anytypeio.anytype.sample.databinding.FragmentButtonsBinding +import com.anytypeio.anytype.sample.databinding.FragmentContentStyleMultilineBinding + +class ContentStyleMultiline: Fragment(R.layout.fragment_content_style_multiline) { + + private var fragmentBinding: FragmentContentStyleMultilineBinding? = null + + override fun onViewCreated(view: View, savedInstanceState: Bundle?) { + super.onViewCreated(view, savedInstanceState) + val _binding = FragmentContentStyleMultilineBinding.bind(view) + fragmentBinding = _binding + } + + override fun onDestroy() { + super.onDestroy() + fragmentBinding = null + } +} \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt new file mode 100644 index 0000000000..b5c0991552 --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/DesignSystemActivity.kt @@ -0,0 +1,66 @@ +package com.anytypeio.anytype.sample.design_system + +import android.os.Bundle +import androidx.appcompat.app.AppCompatActivity +import com.anytypeio.anytype.sample.R + +class DesignSystemActivity : AppCompatActivity(), Navigate { + + override fun onCreate(savedInstanceState: Bundle?) { + super.onCreate(savedInstanceState) + setContentView(R.layout.activity_design_sysytem) + supportFragmentManager + .beginTransaction() + .add(R.id.root, NavigateFragment()) + .addToBackStack(null) + .commit() + } + + override fun toContentStyle() { + supportFragmentManager + .beginTransaction() + .replace(R.id.root, ContentStyleFragment()) + .addToBackStack(null) + .commit() + } + + override fun toContentStyleMultiline() { + supportFragmentManager + .beginTransaction() + .replace(R.id.root, ContentStyleMultiline()) + .addToBackStack(null) + .commit() + } + + override fun toUxStyle() { + supportFragmentManager + .beginTransaction() + .replace(R.id.root, UxStyleFragment()) + .addToBackStack(null) + .commit() + } + + override fun toButtons() { + supportFragmentManager + .beginTransaction() + .replace(R.id.root, ButtonsPrimaryFragment()) + .addToBackStack(null) + .commit() + } + + override fun toButtonsSecondary() { + supportFragmentManager + .beginTransaction() + .replace(R.id.root, ButtonsSecondaryFragment()) + .addToBackStack(null) + .commit() + } +} + +interface Navigate { + fun toContentStyle() + fun toContentStyleMultiline() + fun toUxStyle() + fun toButtons() + fun toButtonsSecondary() +} \ No newline at end of file diff --git a/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt new file mode 100644 index 0000000000..eafb905184 --- /dev/null +++ b/sample/src/main/java/com/anytypeio/anytype/sample/design_system/NavigateFragment.kt @@ -0,0 +1,39 @@ +package com.anytypeio.anytype.sample.design_system + +import android.os.Bundle +import android.view.View +import android.widget.Button +import android.widget.Switch +import androidx.appcompat.app.AppCompatDelegate +import androidx.fragment.app.Fragment +import com.anytypeio.anytype.sample.R + +class NavigateFragment : Fragment(R.layout.fragment_navigate) { + + override fun onViewCreated(view: View, savedInstanceState: Bundle?) { + super.onViewCreated(view, savedInstanceState) + view.findViewById