Fix part of #40 #42: Highfi drag and drop (#3385)

* External margins UI * Internal non-recyclerview padding * Full UI * Full UI with accessibility * Nit fix Co-authored-by: Rajat Talesra <[email protected]>
oppia · Jun 29, 2021 · 10c3260 · 10c3260
1 parent 8dcd8de
commit 10c3260
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 263 deletions.
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
diff --git a/app/src/main/res/layout-sw600dp-land/drag_drop_interaction_item.xml b/app/src/main/res/layout-sw600dp-land/drag_drop_interaction_item.xml
diff --git a/app/src/main/res/layout-sw600dp-port/drag_drop_interaction_item.xml b/app/src/main/res/layout-sw600dp-port/drag_drop_interaction_item.xml
diff --git a/app/src/main/res/layout/drag_drop_interaction_item.xml b/app/src/main/res/layout/drag_drop_interaction_item.xml
@@ -10,11 +10,7 @@
       name="viewModel"
       type="org.oppia.android.app.player.state.itemviewmodel.DragAndDropSortInteractionViewModel" />
   </data>
-  <!--  Margins -->
-  <!--  Exploration Split View -> 32, 40, 32 ,0 -->
-  <!--  Exploration View -> 40, 24, 24, 0 -->
-  <!--  Question Split View -> 32, 40, 32 ,0 -->
-  <!--  Question View -> 32, 24, 32, 0 -->
+
   <LinearLayout
     android:id="@+id/interaction_container_linear_layout"
     android:layout_width="match_parent"
@@ -23,43 +19,46 @@
     android:descendantFocusability="beforeDescendants"
     android:focusableInTouchMode="true"
     android:orientation="vertical"
-    android:padding="0dp"
+    android:paddingStart="@dimen/drag_drop_interaction_item_padding_start"
+    android:paddingTop="@dimen/drag_drop_interaction_item_padding_top"
+    android:paddingEnd="@dimen/drag_drop_interaction_item_padding_end"
+    android:paddingBottom="@dimen/drag_drop_interaction_item_padding_bottom"
     app:explorationSplitViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:explorationSplitViewMarginBottom="@{@dimen/space_0dp}"
-    app:explorationSplitViewMarginEnd="@{@dimen/drag_drop_item_exploration_split_view_margin_end}"
-    app:explorationSplitViewMarginStart="@{@dimen/drag_drop_item_exploration_split_view_margin_start}"
-    app:explorationSplitViewMarginTop="@{@dimen/drag_drop_item_exploration_split_view_margin_top}"
+    app:explorationSplitViewMarginEnd="@{@dimen/interaction_item_split_view_margin_end}"
+    app:explorationSplitViewMarginStart="@{@dimen/interaction_item_split_view_margin_start}"
+    app:explorationSplitViewMarginTop="@{@dimen/interaction_item_split_view_margin_top}"
     app:explorationViewMarginApplicable="@{viewModel.hasConversationView &amp;&amp; !viewModel.splitView}"
     app:explorationViewMarginBottom="@{@dimen/space_0dp}"
-    app:explorationViewMarginEnd="@{@dimen/drag_drop_item_exploration_view_margin_end}"
-    app:explorationViewMarginStart="@{@dimen/drag_drop_item_exploration_view_margin_start}"
-    app:explorationViewMarginTop="@{@dimen/drag_drop_item_exploration_view_margin_top}"
+    app:explorationViewMarginEnd="@{@dimen/interaction_item_exploration_view_margin_end}"
+    app:explorationViewMarginStart="@{@dimen/interaction_item_exploration_view_margin_start}"
+    app:explorationViewMarginTop="@{@dimen/interaction_item_exploration_view_margin_top}"
     app:questionSplitViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; viewModel.splitView}"
     app:questionSplitViewMarginBottom="@{@dimen/space_0dp}"
-    app:questionSplitViewMarginEnd="@{@dimen/drag_drop_item_question_split_view_margin_end}"
-    app:questionSplitViewMarginStart="@{@dimen/drag_drop_item_question_split_view_margin_start}"
-    app:questionSplitViewMarginTop="@{@dimen/drag_drop_item_question_split_view_margin_top}"
+    app:questionSplitViewMarginEnd="@{@dimen/interaction_item_split_view_margin_end}"
+    app:questionSplitViewMarginStart="@{@dimen/interaction_item_split_view_margin_start}"
+    app:questionSplitViewMarginTop="@{@dimen/interaction_item_split_view_margin_top}"
     app:questionViewMarginApplicable="@{!viewModel.hasConversationView &amp;&amp; !viewModel.splitView}"
     app:questionViewMarginBottom="@{@dimen/space_0dp}"
-    app:questionViewMarginEnd="@{@dimen/drag_drop_item_question_view_margin_end}"
-    app:questionViewMarginStart="@{@dimen/drag_drop_item_question_view_margin_start}"
-    app:questionViewMarginTop="@{@dimen/drag_drop_item_question_view_margin_top}">
+    app:questionViewMarginEnd="@{@dimen/interaction_item_question_view_margin_end}"
+    app:questionViewMarginStart="@{@dimen/interaction_item_question_view_margin_start}"
+    app:questionViewMarginTop="@{@dimen/interaction_item_question_view_margin_top}">
 
     <TextView
       android:id="@+id/drag_drop_grouping_hint_text_view"
       android:layout_width="wrap_content"
       android:layout_height="wrap_content"
+      android:paddingBottom="8dp"
       android:text="@string/drag_and_drop_interaction_group_merge_hint"
       android:textSize="14sp"
       android:textStyle="italic"
-      android:visibility="@{viewModel.getGroupingStatus()? View.VISIBLE : View.GONE}"
-      app:layoutMarginStart="@{viewModel.isSplitView ? @dimen/drag_drop_grouping_hint_split_text_view_margin_start : @dimen/drag_drop_grouping_hint_non_split_text_view_margin_start}"
-      app:layoutMarginTop="@{viewModel.isSplitView ? @dimen/drag_drop_grouping_hint_split_text_view_margin_top : @dimen/drag_drop_grouping_hint_non_split_text_view_margin_top}" />
+      android:visibility="@{viewModel.getGroupingStatus()? View.VISIBLE : View.GONE}" />
 
     <org.oppia.android.app.player.state.DragDropSortInteractionView
       android:id="@+id/drag_drop_interaction_recycler_view"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
+      android:layout_marginTop="@dimen/drag_drop_interaction_item_recycler_view_margin_top"
       android:overScrollMode="never"
       app:allowMultipleItemsInSamePosition="@{viewModel.getGroupingStatus()}"
       app:entityId="@{viewModel.entityId}"

diff --git a/app/src/main/res/layout/drag_drop_interaction_items.xml b/app/src/main/res/layout/drag_drop_interaction_items.xml
@@ -16,18 +16,14 @@
   <androidx.constraintlayout.widget.ConstraintLayout
     android:id="@+id/drag_drop_item_container"
     android:layout_width="match_parent"
-    android:layout_height="wrap_content"
-    android:layout_margin="4dp">
+    android:layout_height="wrap_content">
 
     <LinearLayout
       android:layout_width="0dp"
       android:layout_height="wrap_content"
-      android:layout_marginTop="8dp"
+      android:layout_marginTop="@dimen/drag_drop_interaction_items_margin_top"
+      android:layout_marginBottom="@dimen/drag_drop_interaction_items_margin_bottom"
       android:background="@drawable/rounded_rect_grey_border_gradient_white_background"
-      android:paddingStart="16dp"
-      android:paddingEnd="16dp"
-      app:layoutMarginEnd="@{viewModel.dragAndDropSortInteractionViewModel.isSplitView ? @dimen/space_0dp : @dimen/drag_drop_container_parent_non_split_margin_end}"
-      app:layoutMarginStart="@{viewModel.dragAndDropSortInteractionViewModel.isSplitView ? @dimen/space_0dp : @dimen/drag_drop_container_parent_non_split_margin_start}"
       app:layout_constraintBottom_toBottomOf="parent"
       app:layout_constraintEnd_toStartOf="@+id/drag_drop_content_group_item"
       app:layout_constraintStart_toStartOf="parent"
@@ -75,6 +71,8 @@
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
         android:overScrollMode="never"
+        android:paddingStart="16dp"
+        android:paddingEnd="16dp"
         app:itemDecorator="@{@drawable/divider}"
         app:layoutManager="androidx.recyclerview.widget.LinearLayoutManager"
         app:list="@{viewModel.computeStringList().htmlList}"
@@ -84,17 +82,15 @@
 
     <ImageButton
       android:id="@+id/drag_drop_content_group_item"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_margin="@dimen/drag_drop_content_group_item_margin"
-      android:layout_marginEnd="8dp"
-      android:layout_marginBottom="8dp"
+      android:layout_width="48dp"
+      android:layout_height="48dp"
       android:background="?attr/selectableItemBackground"
       android:clickable="true"
       android:contentDescription="@string/link_to_item_below"
       android:enabled="@{viewModel.itemIndex != viewModel.listSize-1}"
       android:focusable="true"
       android:onClick="@{(v) -> viewModel.handleGrouping(adapter)}"
+      android:padding="16dp"
       android:src="@drawable/ic_merge_icon_24"
       android:tint="@{dragDropContentGroupItem.enabled? @color/mergeIconEnabled : @color/mergeIconDisabled}"
       app:layout_constraintBottom_toBottomOf="parent"
@@ -103,15 +99,14 @@
 
     <ImageButton
       android:id="@+id/drag_drop_content_unlink_items"
-      android:layout_width="wrap_content"
-      android:layout_height="wrap_content"
-      android:layout_marginTop="8dp"
-      android:layout_marginEnd="8dp"
+      android:layout_width="48dp"
+      android:layout_height="48dp"
       android:background="?attr/selectableItemBackground"
       android:clickable="true"
       android:contentDescription="@string/unlink_items"
       android:focusable="true"
       android:onClick="@{(v) -> viewModel.handleUnlinking(adapter)}"
+      android:padding="16dp"
       android:src="@drawable/ic_unlink_icon_24"
       app:layout_constraintBottom_toTopOf="@+id/drag_drop_content_group_item"
       app:layout_constraintEnd_toEndOf="parent"