Skip to content

Commit acd42bd

Browse files
BrayanDSOBrayanDSO
committed
feat(new reviewer): tablet style
1 parent be3d917 commit acd42bd

File tree

7 files changed

+397
-152
lines changed

7 files changed

+397
-152
lines changed

‎AnkiDroid/src/main/java/com/ichi2/anki/ui/windows/reviewer/ReviewerFragment.kt

Lines changed: 17 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -27,12 +27,12 @@ import android.view.ViewGroup.MarginLayoutParams
2727
import android.view.inputmethod.EditorInfo
2828
import android.view.inputmethod.InputMethodManager
2929
import android.webkit.WebView
30-
import android.widget.FrameLayout
3130
import android.widget.LinearLayout
3231
import androidx.activity.result.contract.ActivityResultContracts
3332
import androidx.annotation.StringRes
3433
import androidx.appcompat.view.menu.SubMenuBuilder
3534
import androidx.appcompat.widget.ActionMenuView
35+
import androidx.appcompat.widget.AppCompatImageButton
3636
import androidx.core.content.getSystemService
3737
import androidx.core.view.ViewCompat
3838
import androidx.core.view.WindowInsetsCompat
@@ -43,7 +43,6 @@ import androidx.core.view.updatePadding
4343
import androidx.fragment.app.viewModels
4444
import androidx.lifecycle.flowWithLifecycle
4545
import androidx.lifecycle.lifecycleScope
46-
import com.google.android.material.appbar.MaterialToolbar
4746
import com.google.android.material.button.MaterialButton
4847
import com.google.android.material.card.MaterialCardView
4948
import com.google.android.material.shape.ShapeAppearanceModel
@@ -125,7 +124,7 @@ class ReviewerFragment :
125124
if (typeAnswerContainer?.isVisible == true) {
126125
typeAnswerContainer
127126
} else {
128-
this@ReviewerFragment.view?.findViewById(R.id.buttons_area)
127+
this@ReviewerFragment.view?.findViewById(R.id.answer_buttons)
129128
}
130129
}
131130

@@ -142,8 +141,8 @@ class ReviewerFragment :
142141
) {
143142
super.onViewCreated(view, savedInstanceState)
144143

145-
view.findViewById<MaterialToolbar>(R.id.toolbar).apply {
146-
setNavigationOnClickListener { requireActivity().onBackPressedDispatcher.onBackPressed() }
144+
view.findViewById<AppCompatImageButton>(R.id.back_button).setOnClickListener {
145+
requireActivity().finish()
147146
}
148147

149148
setupImmersiveMode(view)
@@ -173,6 +172,10 @@ class ReviewerFragment :
173172
viewModel.onStateMutationCallback()
174173
}
175174
}
175+
176+
viewModel.showingAnswer.collectIn(lifecycleScope) {
177+
resetZoom()
178+
}
176179
}
177180

178181
// TODO
@@ -265,10 +268,9 @@ class ReviewerFragment :
265268

266269
private fun setupAnswerButtons(view: View) {
267270
val prefs = sharedPrefs()
268-
val hideAnswerButtons = prefs.getBoolean(getString(R.string.hide_answer_buttons_key), false)
269-
val buttonsAreaLayout = view.findViewById<FrameLayout>(R.id.buttons_area)
270-
if (hideAnswerButtons) {
271-
buttonsAreaLayout.isVisible = false
271+
val answerButtonsLayout = view.findViewById<LinearLayout>(R.id.answer_buttons)
272+
if (prefs.getBoolean(getString(R.string.hide_answer_buttons_key), false)) {
273+
answerButtonsLayout.isVisible = false
272274
return
273275
}
274276

@@ -314,19 +316,15 @@ class ReviewerFragment :
314316
viewModel.onShowAnswer(typedAnswer = typedAnswer)
315317
}
316318
}
317-
val answerButtonsLayout = view.findViewById<LinearLayout>(R.id.answer_buttons)
318319

319-
// TODO add some kind of feedback/animation after tapping show answer or the answer buttons
320-
viewModel.showingAnswer.collectLatestIn(lifecycleScope) { shouldShowAnswer ->
321-
// use INVISIBLE instead of GONE to keep the same button height
322-
if (shouldShowAnswer) {
320+
viewModel.showingAnswer.collectLatestIn(lifecycleScope) { isAnswerShown ->
321+
if (isAnswerShown) {
323322
showAnswerButton.visibility = View.INVISIBLE
324323
answerButtonsLayout.visibility = View.VISIBLE
325324
} else {
326325
showAnswerButton.visibility = View.VISIBLE
327326
answerButtonsLayout.visibility = View.INVISIBLE
328327
}
329-
resetZoom()
330328
}
331329

332330
if (prefs.getBoolean(getString(R.string.hide_hard_and_easy_key), false)) {
@@ -336,9 +334,9 @@ class ReviewerFragment :
336334

337335
val buttonsHeight = Prefs.answerButtonsSize
338336
if (buttonsHeight != 100) {
339-
buttonsAreaLayout.post {
340-
buttonsAreaLayout.updateLayoutParams {
341-
height = buttonsAreaLayout.measuredHeight * buttonsHeight / 100
337+
answerButtonsLayout.post {
338+
answerButtonsLayout.updateLayoutParams {
339+
height = answerButtonsLayout.measuredHeight * buttonsHeight / 100
342340
}
343341
}
344342
}
@@ -491,6 +489,7 @@ class ReviewerFragment :
491489
if (Prefs.frameStyle == FrameStyle.BOX) {
492490
view.findViewById<MaterialCardView>(R.id.webview_container).apply {
493491
updateLayoutParams<MarginLayoutParams> {
492+
topMargin = 0
494493
leftMargin = 0
495494
rightMargin = 0
496495
}

‎AnkiDroid/src/main/res/layout-sw600dp/reviewer2.xml

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
<?xml version="1.0" encoding="utf-8"?>
2+
3+
<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
4+
xmlns:app="http://schemas.android.com/apk/res-auto"
5+
xmlns:tools="http://schemas.android.com/tools"
6+
android:layout_width="match_parent"
7+
android:layout_height="match_parent"
8+
android:background="?attr/alternativeBackgroundColor"
9+
android:fitsSystemWindows="true"
10+
tools:context=".ui.windows.reviewer.ReviewerFragment">
11+
12+
<androidx.constraintlayout.widget.ConstraintLayout
13+
android:layout_width="match_parent"
14+
android:layout_height="match_parent"
15+
android:layout_marginHorizontal="@dimen/reviewer_side_margin"
16+
>
17+
18+
<com.google.android.material.card.MaterialCardView
19+
android:id="@+id/webview_container"
20+
style="@style/CardView.ViewerStyle"
21+
android:layout_width="match_parent"
22+
android:layout_height="0dp"
23+
android:layout_marginBottom="8dp"
24+
android:layout_marginTop="@dimen/reviewer_side_margin"
25+
app:layout_constraintBottom_toTopOf="@id/type_answer_container"
26+
app:layout_constraintTop_toTopOf="parent">
27+
28+
<WebView
29+
android:id="@+id/webview"
30+
android:layout_width="match_parent"
31+
android:layout_height="match_parent"
32+
tools:backgroundTint="@color/white" />
33+
</com.google.android.material.card.MaterialCardView>
34+
35+
<!-- Use the same card style of the WebView -->
36+
<com.google.android.material.card.MaterialCardView
37+
android:id="@+id/type_answer_container"
38+
style="@style/CardView.ViewerStyle"
39+
android:layout_width="match_parent"
40+
android:layout_height="wrap_content"
41+
android:layout_marginBottom="8dp"
42+
app:layout_constraintTop_toBottomOf="@id/webview_container"
43+
app:layout_constraintBottom_toTopOf="@id/bottom_bar"
44+
android:visibility="gone"
45+
tools:visibility="visible">
46+
47+
<com.google.android.material.textfield.TextInputLayout
48+
android:layout_width="match_parent"
49+
android:layout_height="wrap_content"
50+
android:hint="@string/type_answer_hint"
51+
app:boxBackgroundMode="filled"
52+
app:boxStrokeWidth="0dp"
53+
app:endIconMode="clear_text">
54+
55+
<com.google.android.material.textfield.TextInputEditText
56+
android:id="@+id/type_answer_edit_text"
57+
android:layout_width="match_parent"
58+
android:layout_height="wrap_content"
59+
android:imeOptions="actionDone"
60+
android:inputType="text|textNoSuggestions"
61+
/>
62+
</com.google.android.material.textfield.TextInputLayout>
63+
</com.google.android.material.card.MaterialCardView>
64+
65+
<androidx.constraintlayout.widget.Guideline
66+
android:id="@+id/guideline_answer_buttons_start"
67+
android:layout_width="wrap_content"
68+
android:layout_height="wrap_content"
69+
android:orientation="vertical"
70+
app:layout_constraintGuide_begin="160dp" />
71+
72+
<androidx.constraintlayout.widget.Guideline
73+
android:id="@+id/guideline_answer_buttons_end"
74+
android:layout_width="wrap_content"
75+
android:layout_height="wrap_content"
76+
android:orientation="vertical"
77+
app:layout_constraintGuide_end="160dp" />
78+
79+
<androidx.constraintlayout.widget.Barrier
80+
android:id="@+id/bottom_bar"
81+
android:layout_width="wrap_content"
82+
android:layout_height="wrap_content"
83+
app:barrierDirection="top"
84+
app:constraint_referenced_ids="answer_buttons, back_button, reviewer_menu_view"
85+
/>
86+
87+
<androidx.appcompat.widget.AppCompatImageButton
88+
android:id="@+id/back_button"
89+
style="?actionButtonStyle"
90+
android:layout_width="?minTouchTargetSize"
91+
android:layout_height="?actionBarSize"
92+
android:src="?attr/homeAsUpIndicator"
93+
android:contentDescription="@string/abc_action_bar_up_description"
94+
android:tooltipText="@string/abc_action_bar_up_description"
95+
app:layout_constraintTop_toBottomOf="@id/bottom_bar"
96+
app:layout_constraintBottom_toBottomOf="parent"
97+
/>
98+
99+
<com.google.android.material.textview.MaterialTextView
100+
android:id="@+id/new_count"
101+
android:layout_width="wrap_content"
102+
android:layout_height="wrap_content"
103+
android:textColor="?attr/newCountColor"
104+
android:paddingEnd="4dp"
105+
app:layout_constraintTop_toTopOf="@id/back_button"
106+
app:layout_constraintBottom_toBottomOf="@id/back_button"
107+
app:layout_constraintStart_toEndOf="@id/back_button"
108+
app:layout_constraintEnd_toStartOf="@id/lrn_count"
109+
app:layout_constraintHorizontal_chainStyle="packed"
110+
tools:text="127"
111+
/>
112+
113+
<com.google.android.material.textview.MaterialTextView
114+
android:id="@+id/lrn_count"
115+
android:layout_width="wrap_content"
116+
android:layout_height="wrap_content"
117+
android:textColor="?attr/learnCountColor"
118+
android:paddingHorizontal="4dp"
119+
app:layout_constraintTop_toTopOf="@id/back_button"
120+
app:layout_constraintBottom_toBottomOf="@id/back_button"
121+
app:layout_constraintStart_toEndOf="@id/new_count"
122+
app:layout_constraintEnd_toStartOf="@id/rev_count"
123+
app:layout_constraintHorizontal_chainStyle="packed"
124+
tools:text="381"
125+
/>
126+
127+
<com.google.android.material.textview.MaterialTextView
128+
android:id="@+id/rev_count"
129+
android:layout_width="wrap_content"
130+
android:layout_height="wrap_content"
131+
android:textColor="?attr/reviewCountColor"
132+
android:paddingStart="4dp"
133+
app:layout_constraintTop_toTopOf="@id/back_button"
134+
app:layout_constraintBottom_toBottomOf="@id/back_button"
135+
app:layout_constraintStart_toEndOf="@id/lrn_count"
136+
app:layout_constraintEnd_toStartOf="@id/guideline_answer_buttons_start"
137+
android:layout_marginEnd="12dp"
138+
tools:text="954"
139+
/>
140+
141+
<com.google.android.material.button.MaterialButton
142+
android:id="@+id/show_answer"
143+
style="@style/Widget.Material3.Button.TextButton"
144+
android:layout_width="0dp"
145+
android:layout_height="0dp"
146+
android:minHeight="?actionBarSize"
147+
android:text="@string/show_answer"
148+
android:textSize="@dimen/reviewer_text_size"
149+
app:layout_constraintBottom_toBottomOf="parent"
150+
app:layout_constraintEnd_toEndOf="@id/answer_buttons"
151+
app:layout_constraintStart_toStartOf="@id/answer_buttons"
152+
app:layout_constraintTop_toTopOf="@id/answer_buttons"
153+
tools:visibility="invisible"
154+
/>
155+
156+
<LinearLayout
157+
android:id="@+id/answer_buttons"
158+
android:layout_height="wrap_content"
159+
android:layout_width="0dp"
160+
android:minHeight="?actionBarSize"
161+
android:visibility="invisible"
162+
tools:visibility="visible"
163+
app:layout_constraintStart_toStartOf="@id/guideline_answer_buttons_start"
164+
app:layout_constraintEnd_toStartOf="@id/guideline_answer_buttons_end"
165+
app:layout_constraintBottom_toBottomOf="parent"
166+
>
167+
168+
<com.google.android.material.button.MaterialButton
169+
android:id="@+id/again_button"
170+
style="@style/AnswerButton"
171+
android:layout_width="0dp"
172+
android:layout_height="match_parent"
173+
android:layout_marginHorizontal="@dimen/answer_button_margin_horizontal"
174+
android:backgroundTint="@color/again_button_bg"
175+
android:text="@string/ease_button_again"
176+
android:textColor="@color/again_button_text"
177+
android:layout_weight="1"
178+
/>
179+
180+
<com.google.android.material.button.MaterialButton
181+
android:id="@+id/hard_button"
182+
style="@style/AnswerButton"
183+
android:layout_width="0dp"
184+
android:layout_height="match_parent"
185+
android:layout_marginHorizontal="@dimen/answer_button_margin_horizontal"
186+
android:backgroundTint="@color/hard_button_bg"
187+
android:text="@string/ease_button_hard"
188+
android:textColor="@color/hard_button_text"
189+
android:layout_weight="1"
190+
/>
191+
192+
<com.google.android.material.button.MaterialButton
193+
android:id="@+id/good_button"
194+
style="@style/AnswerButton"
195+
android:layout_width="0dp"
196+
android:layout_height="match_parent"
197+
android:layout_marginHorizontal="@dimen/answer_button_margin_horizontal"
198+
android:backgroundTint="@color/good_button_bg"
199+
android:text="@string/ease_button_good"
200+
android:textColor="@color/good_button_text"
201+
android:layout_weight="1"
202+
/>
203+
204+
<com.google.android.material.button.MaterialButton
205+
android:id="@+id/easy_button"
206+
style="@style/AnswerButton"
207+
android:layout_width="0dp"
208+
android:layout_height="match_parent"
209+
android:layout_marginHorizontal="@dimen/answer_button_margin_horizontal"
210+
android:backgroundTint="@color/easy_button_bg"
211+
android:text="@string/ease_button_easy"
212+
android:textColor="@color/easy_button_text"
213+
android:layout_weight="1"
214+
/>
215+
</LinearLayout>
216+
217+
<com.ichi2.anki.preferences.reviewer.ReviewerMenuView
218+
android:id="@+id/reviewer_menu_view"
219+
android:layout_width="0dp"
220+
android:layout_height="?actionBarSize"
221+
app:layout_constraintStart_toStartOf="@id/guideline_answer_buttons_end"
222+
app:layout_constraintEnd_toEndOf="parent"
223+
app:layout_constraintTop_toBottomOf="@id/bottom_bar"
224+
app:layout_constraintBottom_toBottomOf="parent"
225+
android:layout_marginStart="12dp"
226+
/>
227+
228+
</androidx.constraintlayout.widget.ConstraintLayout>
229+
</androidx.coordinatorlayout.widget.CoordinatorLayout>

0 commit comments

Comments
 (0)