Adds more obvious display for limited connection mode (#4094)

* Limited connection is enabled layout is added

* Add a layout to indicate limited connection is active

* fix string

Author: neslihanturan

app/src/main/java/fr/free/nrw/commons/contributions/ContributionsFragment.java

@@ -22,6 +22,7 @@
 import android.view.View.OnClickListener;
 import android.view.ViewGroup;
 import android.widget.CheckBox;
+import android.widget.LinearLayout;
 import android.widget.TextView;
 import android.widget.Toast;
 import androidx.annotation.NonNull;
@@ -102,6 +103,7 @@ public class ContributionsFragment
 
     @BindView(R.id.card_view_nearby) public NearbyNotificationCardView nearbyNotificationCardView;
     @BindView(R.id.campaigns_view) CampaignView campaignView;
+    @BindView(R.id.limited_connection_enabled_layout) LinearLayout limitedConnectionEnabledLayout;
 
     @Inject ContributionsPresenter contributionsPresenter;
 
@@ -236,14 +238,22 @@ public void updateLimitedConnectionToggle(Menu menu) {
             .getBoolean(CommonsApplication.IS_LIMITED_CONNECTION_MODE_ENABLED, false);
 
         checkable.setChecked(isEnabled);
-        /*final SwitchCompat switchToggleLimitedConnectionMode = checkable.getActionView()
-            .findViewById(R.id.switch_toggle_limited_connection_mode);*/
+        if (isEnabled) {
+            limitedConnectionEnabledLayout.setVisibility(View.VISIBLE);
+        } else {
+            limitedConnectionEnabledLayout.setVisibility(View.GONE);
+        }
         checkable.setIcon((isEnabled) ? R.drawable.ic_baseline_cloud_off_24:R.drawable.ic_baseline_cloud_queue_24);
         checkable.setOnMenuItemClickListener(new OnMenuItemClickListener() {
             @Override
             public boolean onMenuItemClick(MenuItem item) {
                 ((MainActivity) getActivity()).toggleLimitedConnectionMode();
                 boolean isEnabled = store.getBoolean(CommonsApplication.IS_LIMITED_CONNECTION_MODE_ENABLED, false);
+                if (isEnabled) {
+                    limitedConnectionEnabledLayout.setVisibility(View.VISIBLE);
+                } else {
+                    limitedConnectionEnabledLayout.setVisibility(View.GONE);
+                }
                 checkable.setIcon((isEnabled) ? R.drawable.ic_baseline_cloud_off_24:R.drawable.ic_baseline_cloud_queue_24);
                 return false;
             }

app/src/main/res/drawable/ic_baseline_cloud_off_72.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="72dp"
+    android:height="72dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="@color/white">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M19.35,10.04C18.67,6.59 15.64,4 12,4c-1.48,0 -2.85,0.43 -4.01,1.17l1.46,1.46C10.21,6.23 11.08,6 12,6c3.04,0 5.5,2.46 5.5,5.5v0.5H19c1.66,0 3,1.34 3,3 0,1.13 -0.64,2.11 -1.56,2.62l1.45,1.45C23.16,18.16 24,16.68 24,15c0,-2.64 -2.05,-4.78 -4.65,-4.96zM3,5.27l2.75,2.74C2.56,8.15 0,10.77 0,14c0,3.31 2.69,6 6,6h11.73l2,2L21,20.73 4.27,4 3,5.27zM7.73,10l8,8H6c-2.21,0 -4,-1.79 -4,-4s1.79,-4 4,-4h1.73z"/>
+</vector>

app/src/main/res/layout/fragment_contributions.xml

@@ -18,6 +18,34 @@
       android:layout_marginTop="@dimen/miniscule_margin"
       android:layout_margin="@dimen/very_tiny_gap"/>
 
+  <LinearLayout
+    android:id="@+id/limited_connection_enabled_layout"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="@dimen/miniscule_margin"
+    android:padding="@dimen/standard_gap"
+    android:orientation="vertical"
+    android:background="@color/wikimedia_green">
+    <ImageView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:layout_marginBottom="@dimen/small_gap"
+      app:srcCompat="@drawable/ic_baseline_cloud_off_72"/>
+    <TextView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:textColor="@android:color/white"
+      android:layout_marginBottom="@dimen/tiny_gap"
+      android:textSize="@dimen/subheading_text_size"
+      android:text="@string/limited_connection_is_on"/>
+    <TextView
+      android:layout_width="wrap_content"
+      android:layout_height="wrap_content"
+      android:textColor="@android:color/white"
+      android:textSize="@dimen/description_text_size"
+      android:text="@string/limited_connection_explanation"/>
+  </LinearLayout>
+
   <FrameLayout
       android:id="@+id/root_frame"
       android:layout_width="match_parent"

app/src/main/res/values/colors.xml

@@ -78,4 +78,6 @@
     <color name="nav_tab_icon_unselected_color">#61000000</color>
     <color name="card_light_grey">#EDEDED</color>
 
+    <color name="wikimedia_green">#339966</color>
+
 </resources>

app/src/main/res/values/strings.xml

@@ -701,6 +701,8 @@ Upload your first media by tapping on the add button.</string>
   <string name="quality_images_info">Quality images are diagrams or photographs that meet certain quality standards (which are mostly technical in nature) and are valuable for Wikimedia projects</string>
   <string name="resuming_upload">Resuming upload…</string>
   <string name="pausing_upload">Pausing upload…</string>
+  <string name="limited_connection_explanation">You have enabled limited connection mode. All uploads are paused and will resume once you disable this mode.</string>
+  <string name="limited_connection_is_on">Limited connection mode is on.</string>
 
   <string name="media_details_tooltip">Please write a short caption that says what your picture shows. In the description, say what makes the picture interesting or typical or rare, and explain the context, visible or not. Use exact terminology as much as you can.</string>
   <string name="depicts_tooltip">Please find and select all concepts that this image portrays. Be as specific as you can. If the image portrays multiple items, choose them all within reason. Do not choose generic tags if more specific tags are available.</string>