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

* External margins UI * Internal non-recyclerview padding * Full UI * Full UI with accessibility * Nit fix Co-authored-by: Rajat Talesra <[email protected]>
kritigupta45 · 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"