Fixes part of #40 & #42: Generalisation Highfi Mobile Portrait + Land…

…scape - Buttons (#1653) * Continue/ Previous button margins * Next button margins added * Submit button margin added * Removed start/end margin from error * Reply button margins * Topic button margin top changed * Nit fix * Bottom padding added * Question Progress * Changed congratulations margins * Updated drag and drop margins Co-authored-by: Rajat Talesra <[email protected]>
oppia · Aug 17, 2020 · 1bb1ffa · 1bb1ffa
1 parent 3fb2b1a
commit 1bb1ffa
Show file tree

Hide file tree

Showing 47 changed files with 614 additions and 833 deletions.
diff --git a/app/src/main/res/layout-land/continue_interaction_item.xml b/app/src/main/res/layout-land/continue_interaction_item.xml
@@ -10,12 +10,35 @@
       name="viewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueInteractionViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="16dp"
-    android:padding="16dp">
+    app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -27,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> viewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{viewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -38,6 +61,7 @@
       android:id="@+id/continue_button"
       style="@style/StateButtonActive"
       android:layout_height="0dp"
+      android:layout_margin="4dp"
       android:button="@drawable/state_button_primary_background"
       android:clickable="true"
       android:elevation="2dp"

diff --git a/app/src/main/res/layout-land/continue_navigation_button_item.xml b/app/src/main/res/layout-land/continue_navigation_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.ContinueNavigationButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,12 +50,12 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
-      app:layout_constraintTop_toTopOf="parent"
+      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"
-      android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE: View.GONE, default=gone}" />
+      app:layout_constraintTop_toTopOf="parent" />
 
     <Button
       android:id="@+id/continue_navigation_button"
@@ -46,9 +66,9 @@
       android:onClick="@{(v) -> buttonViewModel.continueNavigationButtonListener.onContinueButtonClicked()}"
       android:text="@string/state_continue_button"
       android:textColor="@color/white"
-      app:layout_constraintHeight_min="48dp"
-      app:layout_constraintTop_toTopOf="parent"
       app:layout_constraintBottom_toBottomOf="parent"
-      app:layout_constraintEnd_toEndOf="parent" />
+      app:layout_constraintEnd_toEndOf="parent"
+      app:layout_constraintHeight_min="48dp"
+      app:layout_constraintTop_toTopOf="parent" />
   </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/app/src/main/res/layout-land/drag_drop_interaction_item.xml b/app/src/main/res/layout-land/drag_drop_interaction_item.xml
@@ -23,7 +23,10 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
-    android:padding="0dp"
+    android:paddingStart="8dp"
+    android:paddingTop="16dp"
+    android:paddingEnd="8dp"
+    android:paddingBottom="20dp"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
     app:explorationSplitViewMarginEnd="@{@dimen/margin_32}"
@@ -49,8 +52,9 @@
       android:id="@+id/drag_drop_grouping_hint_text_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
-      android:layout_marginStart="12dp"
-      android:layout_marginTop="8dp"
+      android:layout_marginStart="16dp"
+      android:layout_marginEnd="16dp"
+      android:layout_marginBottom="8dp"
       android:text="@string/drag_and_drop_interaction_group_merge_hint"
       android:textSize="14sp"
       android:textStyle="italic"

diff --git a/app/src/main/res/layout-land/fraction_interaction_item.xml b/app/src/main/res/layout-land/fraction_interaction_item.xml
@@ -51,8 +51,6 @@
       android:id="@+id/fraction_input_error"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"

diff --git a/app/src/main/res/layout-land/next_button_item.xml b/app/src/main/res/layout-land/next_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.NextButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       android:visibility="@{buttonViewModel.hasPreviousButton ? View.VISIBLE : View.GONE, default=gone}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -46,7 +66,7 @@
       android:contentDescription="@string/next_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.nextNavigationButtonListener.onNextButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_forward_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toEndOf="parent"

diff --git a/app/src/main/res/layout-land/numeric_input_interaction_item.xml b/app/src/main/res/layout-land/numeric_input_interaction_item.xml
@@ -50,8 +50,6 @@
     <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
-      android:layout_marginStart="16dp"
-      android:layout_marginEnd="8dp"
       android:fontFamily="sans-serif"
       android:minHeight="32dp"
       android:text="@{viewModel.errorMessage}"

diff --git a/app/src/main/res/layout-land/previous_button_item.xml b/app/src/main/res/layout-land/previous_button_item.xml
@@ -10,16 +10,36 @@
       name="buttonViewModel"
       type="org.oppia.app.player.state.itemviewmodel.PreviousButtonViewModel" />
   </data>
-
+  <!-- Margins -->
+  <!-- Exploration Split View: 24, 72, 64, 0 -->
+  <!-- Exploration View: 48, 24, 48, 0 -->
+  <!-- Question Split View: 24, 72, 64, 0 -->
+  <!-- Question View: 64, 24, 64, 0 -->
+  <!-- Note: Start/End margins are 4dp less which is getting adjusted in child views. -->
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
-    android:layout_marginBottom="@dimen/divider_margin_bottom"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="28dp">
+    app:explorationSplitViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:explorationSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:explorationSplitViewMarginStart="@{@dimen/margin_20}"
+    app:explorationSplitViewMarginTop="@{@dimen/margin_72}"
+    app:explorationViewMarginApplicable="@{buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:explorationViewMarginBottom="@{@dimen/margin_0}"
+    app:explorationViewMarginEnd="@{@dimen/margin_44}"
+    app:explorationViewMarginStart="@{@dimen/margin_44}"
+    app:explorationViewMarginTop="@{@dimen/margin_24}"
+    app:questionSplitViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; buttonViewModel.isSplitView}"
+    app:questionSplitViewMarginBottom="@{@dimen/margin_0}"
+    app:questionSplitViewMarginEnd="@{@dimen/margin_60}"
+    app:questionSplitViewMarginStart="@{@dimen/margin_20}"
+    app:questionSplitViewMarginTop="@{@dimen/margin_72}"
+    app:questionViewMarginApplicable="@{!buttonViewModel.hasConversationView &amp;&amp; !buttonViewModel.isSplitView}"
+    app:questionViewMarginBottom="@{@dimen/margin_0}"
+    app:questionViewMarginEnd="@{@dimen/margin_60}"
+    app:questionViewMarginStart="@{@dimen/margin_60}"
+    app:questionViewMarginTop="@{@dimen/margin_24}">
 
     <ImageButton
       android:id="@+id/previous_state_navigation_button"
@@ -30,7 +50,7 @@
       android:contentDescription="@string/previous_state_description"
       android:elevation="2dp"
       android:onClick="@{(v) -> buttonViewModel.previousNavigationButtonListener.onPreviousButtonClicked()}"
-      android:padding="16dp"
+      android:padding="8dp"
       android:src="@drawable/ic_arrow_back_oppia_dark_blue_24dp"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintStart_toStartOf="parent"

diff --git a/app/src/main/res/layout-land/question_player_fragment.xml b/app/src/main/res/layout-land/question_player_fragment.xml
@@ -17,9 +17,7 @@
 
     <androidx.constraintlayout.widget.ConstraintLayout
       android:layout_width="match_parent"
-      android:layout_height="match_parent"
-      android:paddingStart="24dp"
-      android:paddingEnd="24dp">
+      android:layout_height="match_parent">
 
       <TextView
         android:id="@+id/end_session_header_text_view"
@@ -59,6 +57,7 @@
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
+        android:paddingBottom="108dp"
         app:data="@{viewModel.itemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:layout_constraintBottom_toTopOf="@id/question_progress_bar"
@@ -73,6 +72,7 @@
         android:divider="@android:color/transparent"
         android:dividerHeight="8dp"
         android:overScrollMode="never"
+        android:paddingBottom="108dp"
         android:visibility="@{viewModel.isSplitView ? View.VISIBLE : View.GONE}"
         app:data="@{viewModel.rightItemList}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
@@ -86,9 +86,9 @@
         style="@style/Widget.AppCompat.ProgressBar.Horizontal"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:layout_marginStart="30dp"
-        android:layout_marginEnd="30dp"
-        android:layout_marginBottom="5dp"
+        android:layout_marginStart="32dp"
+        android:layout_marginEnd="32dp"
+        android:layout_marginBottom="8dp"
         android:max="100"
         android:progress="@{viewModel.progressPercentage}"
         android:progressDrawable="@drawable/progress_bar"
@@ -100,7 +100,7 @@
         android:id="@+id/question_progress_text"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_marginEnd="30dp"
+        android:layout_marginEnd="32dp"
         android:layout_marginBottom="20dp"
         android:text="@{viewModel.isAtEndOfSession ? @string/question_training_session_progress_finished : @string/question_training_session_progress(viewModel.currentQuestion, viewModel.questionCount)}"
         android:textStyle="italic"
@@ -150,9 +150,9 @@
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:layout_gravity="bottom"
-      android:layout_marginStart="52dp"
+      android:layout_marginStart="64dp"
       android:layout_marginTop="8dp"
-      android:layout_marginEnd="52dp"
+      android:layout_marginEnd="64dp"
       android:layout_marginBottom="16dp"
       android:elevation="8dp"
       android:translationZ="4dp">

diff --git a/app/src/main/res/layout-land/replay_button_item.xml b/app/src/main/res/layout-land/replay_button_item.xml
@@ -12,20 +12,21 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
-    android:layout_marginTop="56dp"
+    android:layout_marginStart="60dp"
+    android:layout_marginTop="68dp"
+    android:layout_marginEnd="60dp"
+    android:layout_marginBottom="0dp"
     android:gravity="center_vertical"
-    android:paddingStart="24dp"
-    android:paddingEnd="24dp"
-    android:paddingBottom="12dp">
+    android:visibility="@{buttonViewModel.hasConversationView ? View.GONE : View.VISIBLE}">
 
     <Button
       android:id="@+id/replay_button"
       style="@style/StateButtonActive"
-      android:layout_height="48dp"
       android:layout_margin="4dp"
       android:background="@drawable/state_button_orange_background"
       android:drawableStart="@drawable/ic_refresh_white_24dp"
       android:drawablePadding="4dp"
+      android:minHeight="48dp"
       android:onClick="@{(v) -> buttonViewModel.replayButtonListener.onReplayButtonClicked()}"
       android:text="@string/lesson_replay_button_text"
       android:textColor="@color/white"