mnalis/apps-android-commons
1
0
Fork 0
mirror of https://github.com/commons-app/apps-android-commons.git synced 2025-10-26 20:33:53 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Fixes #3436 and #2881: Media Detail design Overhaul (#3505)

Browse source 
* ic_map_dark_24dp: map icon for white background

* ic_info_outline_dark_24dp: info icon for dark background

* MediaDetailFragment: update the spacer as per image aspect ratio

* fragment_media_detail: design overhaul

* fragment_media_detail: remove redundant background color statements

* make requested changes

* add dark mode support

* minor ui tweak

* white map icon in dark mode

* make rquested changes

* make requested changes to layout

* fix misalignment of category list

* subtle amendments

* convert comments to javadocs

* minor amendments

* minor changes

* add styles for media detail

* Media detail fragment refactored

* make suggested changes

* minor name fix

* fix the delete button border
This commit is contained in:
Kshitij Bhardwaj 2020-04-19 18:24:17 -04:00 • committed by GitHub
parent fcd2867d26
commit 81e12a9e1f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
10 changed files with 194 additions and 178 deletions
Download patch file Download diff file Expand all files Collapse all files

13
app/src/main/java/fr/free/nrw/commons/media/MediaDetailFragment.java
View file

@ -104,6 +104,8 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
@BindView(R.id.mediaDetailImageView)
SimpleDraweeView image;
@BindView(R.id.mediaDetailImageViewSpacer)
LinearLayout imageSpacer;
@BindView(R.id.mediaDetailTitle)
TextView title;
@BindView(R.id.mediaDetailDesc)
@ -204,7 +206,7 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
return view;
}
@OnClick(R.id.mediaDetailImageView)
@OnClick(R.id.mediaDetailImageViewSpacer)
public void launchZoomActivity(View view) {
Context ctx = view.getContext();
ctx.startActivity(
@ -248,13 +250,22 @@ public class MediaDetailFragment extends CommonsDaggerSupportFragment {
compositeDisposable.add(disposable);
}
/**
* The imageSpacer is Basically a transparent overlay for the SimpleDraweeView
* which holds the image to be displayed( moreover this image is out of
* the scroll view )
* @param imageInfo used to calculate height of the ImageSpacer
*/
private void updateAspectRatio(ImageInfo imageInfo) {
if (imageInfo != null) {
int screenWidth = scrollView.getWidth();
int finalHeight = (screenWidth*imageInfo.getHeight()) / imageInfo.getWidth();
ViewGroup.LayoutParams params = image.getLayoutParams();
ViewGroup.LayoutParams spacerParams = imageSpacer.getLayoutParams();
params.height = finalHeight;
spacerParams.height = finalHeight;
image.setLayoutParams(params);
imageSpacer.setLayoutParams(spacerParams);
}
}

9
app/src/main/res/drawable/bg_copy_wikitext_button.xml Normal file
View file

@ -0,0 +1,9 @@
<?xml version="1.0" encoding="utf-8"?>
<shape
xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid
android:color="@color/button_blue" />
<corners
android:radius="@dimen/progressbar_stroke" />
</shape>

5
app/src/main/res/drawable/bg_delete_button.xml
View file

@ -9,12 +9,9 @@
<shape
android:shape="rectangle">
<solid
android:color="@color/deleteButton"/>
android:color="?attr/mediaDetailNominationBackground"/>
<corners
android:radius="@dimen/progressbar_stroke" />
<stroke
android:width="5px"
android:color="@color/deleteRed" />
</shape>
</item>

9
app/src/main/res/drawable/ic_info_outline_dark_24dp.xml Normal file
View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="@dimen/half_standard_height"
android:height="@dimen/half_standard_height"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="@color/button_background_dark"
android:pathData="M11,17h2v-6h-2v6zM12,2C6.48,2 2,6.48 2,12s4.48,10 10,10 10,-4.48 10,-10S17.52,2 12,2zM12,20c-4.41,0 -8,-3.59 -8,-8s3.59,-8 8,-8 8,3.59 8,8 -3.59,8 -8,8zM11,9h2L13,7h-2v2z"/>
</vector>

9
app/src/main/res/drawable/ic_map_dark_24dp.xml Normal file
View file

@ -0,0 +1,9 @@
<vector xmlns:android="http://schemas.android.com/apk/res/android"
android:width="@dimen/half_standard_height"
android:height="@dimen/half_standard_height"
android:viewportWidth="24.0"
android:viewportHeight="24.0">
<path
android:fillColor="@color/button_background_dark"
android:pathData="M20.5,3l-0.16,0.03L15,5.1 9,3 3.36,4.9c-0.21,0.07 -0.36,0.25 -0.36,0.48V20.5c0,0.28 0.22,0.5 0.5,0.5l0.16,-0.03L9,18.9l6,2.1 5.64,-1.9c0.21,-0.07 0.36,-0.25 0.36,-0.48V3.5c0,-0.28 -0.22,-0.5 -0.5,-0.5zM15,19l-6,-2.11V5l6,2.11V19z"/>
</vector>

10
app/src/main/res/layout/detail_category_item.xml
View file

@ -10,15 +10,15 @@
android:id="@+id/mediaDetailCategoryItemText"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:background="?attr/mainBackground"
android:foreground="?attr/selectableItemBackground"
android:gravity="center_vertical"
android:minHeight="@dimen/overflow_button_dimen"
android:padding="@dimen/quarter_standard_height"
android:textColor="@android:color/white"
android:padding="@dimen/small_gap"
android:textColor="?attr/mediaDetailsText"
android:textSize="@dimen/description_text_size"
app:drawablePadding="@dimen/small_gap"
app:drawableStart="@drawable/ic_info_outline_24dp"
app:drawablePadding="@dimen/tiny_gap"
app:drawableStart="?attr/iconInfo24"
/>
</LinearLayout>

265
app/src/main/res/layout/fragment_media_detail.xml
View file

@ -19,11 +19,10 @@
/>
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/mediaDetailImage"
android:id="@+id/mediaDetailImageView"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:actualImageScaleType="centerCrop"
/>
android:layout_height="@dimen/dimen_250"
app:actualImageScaleType="none" />
<ScrollView
android:id="@+id/mediaDetailScrollView"
@ -40,257 +39,200 @@
<!-- Placeholder. Height gets set at runtime based on container size; the initial value is a hack to keep
the detail info offscreen until it's placed properly. May be a better way to do this. -->
<com.facebook.drawee.view.SimpleDraweeView
android:id="@+id/mediaDetailImageView"
<LinearLayout
android:layout_width="match_parent"
android:layout_height="@dimen/dimen_250"
app:actualImageScaleType="none" />
android:orientation="vertical"
android:background="@android:color/transparent"
android:id="@+id/mediaDetailImageViewSpacer"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/fragmentCategorisationBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:background="?attr/mainBackground"
android:orientation="vertical">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:background="@color/primaryDarkColor"
android:orientation="horizontal"
android:padding="@dimen/quarter_standard_height">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_title"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelTitle"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_title" />
<TextView
style="@style/MediaDetailTextBody"
android:id="@+id/mediaDetailTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:padding="@dimen/small_gap"
android:layout_width="@dimen/widget_margin"
android:textColor="@android:color/white"
android:textSize="@dimen/description_text_size"
android:layout_height="match_parent"
tools:text="Title of the media" />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:id="@+id/authorLinearLayout"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_author"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_author" />
<TextView
style="@style/MediaDetailTextBody"
android:id="@+id/mediaDetailAuthor"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:padding="@dimen/small_gap"
android:textColor="@android:color/white"
android:textSize="@dimen/description_text_size"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
tools:text="Media author user name goes here." />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_description"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_description" />
<fr.free.nrw.commons.ui.widget.HtmlTextView
android:id="@+id/mediaDetailDesc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:layout_weight="70"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:padding="@dimen/small_gap"
android:textColor="@android:color/white"
android:textColor="?attr/mediaDetailsText"
android:textSize="@dimen/description_text_size"
tools:text="Description of the media goes here. This can potentially be fairly long, and will need to wrap across multiple lines. We hope it looks nice though." />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
<View
android:background="?attr/mediaDetailSpacerColor"
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
android:layout_height="@dimen/tiny_gap"/>
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_license"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_license" />
<fr.free.nrw.commons.ui.widget.CompatTextView
android:id="@+id/mediaDetailLicense"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:layout_weight="70"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:foreground="?attr/selectableItemBackground"
android:gravity="center_vertical"
android:padding="@dimen/small_gap"
android:textColor="@android:color/white"
android:textColor="?attr/mediaDetailsText"
android:textSize="@dimen/description_text_size"
app:drawablePadding="@dimen/tiny_gap"
app:drawableStart="@drawable/ic_info_outline_24dp"
app:drawableStart="?attr/iconInfo24"
tools:text="License link" />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_coordinates"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_coordinates" />
<fr.free.nrw.commons.ui.widget.CompatTextView
android:id="@+id/mediaDetailCoordinates"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:layout_weight="70"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:foreground="?attr/selectableItemBackground"
android:gravity="center_vertical"
android:padding="@dimen/small_gap"
android:textColor="@android:color/white"
android:textColor="?attr/mediaDetailsText"
android:textSize="@dimen/description_text_size"
app:drawablePadding="@dimen/tiny_gap"
app:drawableStart="@drawable/ic_map_white_24dp"
app:drawableStart="?attr/iconMap24"
tools:text="Coordinates link" />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap"
android:orientation="horizontal"
android:textStyle="bold">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/detail_panel_cats_label"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/detail_panel_cats_label" />
<LinearLayout
android:id="@+id/mediaDetailCategoryContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:layout_weight="70"
android:orientation="vertical" />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_uploaded_date"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_uploaded_date" />
<TextView
style="@style/MediaDetailTextBody"
android:id="@+id/mediaDetailuploadeddate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:padding="@dimen/small_gap"
android:textColor="@android:color/white"
android:textSize="@dimen/description_text_size"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
tools:text="Uploaded date" />
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
android:id="@+id/nominatedDeletionBanner"
android:background="@color/deleteRed"
android:background="?attr/mediaDetailNominationBackground"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical"
android:padding="@dimen/standard_gap"
android:padding="@dimen/quarter_standard_height"
android:visibility="gone">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
@ -299,6 +241,7 @@
android:textColor="@color/primaryTextColor"
android:textSize="@dimen/normal_text"
android:textStyle="bold"/>
<TextView
android:id="@+id/seeMore"
android:layout_width="match_parent"
@ -310,35 +253,23 @@
android:textStyle="bold"/>
</LinearLayout>
<fr.free.nrw.commons.media.MediaDetailSpacer
android:layout_width="match_parent"
android:layout_height="@dimen/small_gap" />
<LinearLayout
style="@style/MediaDetailContainer"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="?attr/subBackground"
android:orientation="vertical"
android:padding="@dimen/standard_gap">
android:orientation="horizontal">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="@dimen/tiny_gap"
android:text="@string/media_detail_discussion"
android:textColor="@android:color/white"
android:textSize="@dimen/normal_text"
android:textStyle="bold" />
style="@style/MediaDetailTextLabelGeneric"
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent"
android:text="@string/media_detail_discussion" />
<TextView
style="@style/MediaDetailTextBody"
android:id="@+id/mediaDetailDisc"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_gravity="start"
android:background="?attr/subBackground"
android:padding="@dimen/small_gap"
android:textColor="@android:color/white"
android:textSize="@dimen/description_text_size" />
android:layout_width="@dimen/widget_margin"
android:layout_height="match_parent" />
</LinearLayout>
<Button
@ -346,7 +277,7 @@
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_margin="@dimen/standard_gap"
android:background="@color/button_blue"
android:background="@drawable/bg_copy_wikitext_button"
android:text="@string/copy_wikicode"
android:textColor="@color/primaryTextColor" />

6
app/src/main/res/values/attrs.xml
View file

@ -26,6 +26,12 @@
<attr name="mainTabBackground" format="reference"/>
<attr name="mainCardBackground" format="reference"/>
<attr name="mainScreenNearbyPermissionbutton" format="reference"/>
<attr name="iconInfo24" format="reference" />
<attr name="iconMap24" format="reference" />
<attr name="mediaDetailsText" format="reference" />
<attr name="mediaDetailsHeadingText" format="reference" />
<attr name="mediaDetailNominationBackground" format="reference" />
<attr name="mediaDetailSpacerColor" format="reference" />
<attr name="icon" format="reference"/>
<attr name="aboutIconsColor" format="reference"/>

3
app/src/main/res/values/colors.xml
View file

@ -24,7 +24,8 @@
<color name="primaryTextColor">#ffffff</color>
<color name="secondaryTextColor">#000000</color>
<color name="deleteRed">#90960a0a</color>
<color name="deleteRed">#D32F2F</color>
<color name="deleteRedDark">#90960a0a</color>
<color name="deleteButton">#44000000</color>
<color name="deleteButtonDark">#88000000</color>
<color name="deleteButtonLight">#44ffffff</color>

43
app/src/main/res/values/styles.xml
View file

@ -34,6 +34,12 @@
<item name="textEnabled">@color/enabled_button_text_color_dark</item>
<item name="mainCardBackground">@color/main_background_dark</item>
<item name="mainScreenNearbyPermissionbutton">@style/DarkFlatNearbyPermissionButton</item>
<item name="iconInfo24">@drawable/ic_info_outline_24dp</item>
<item name="iconMap24" >@drawable/ic_map_white_24dp</item>
<item name="mediaDetailsText" >@color/white</item>
<item name="mediaDetailsHeadingText">@color/layout_light_grey</item>
<item name="mediaDetailNominationBackground">@color/deleteRedDark</item>
<item name="mediaDetailSpacerColor">@color/browser_actions_divider_color</item>
</style>
<style name="LightAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
@ -69,6 +75,12 @@
<item name="textEnabled">@color/enabled_button_text_color_light</item>
<item name="mainCardBackground">@color/primaryDarkColor</item>
<item name="mainScreenNearbyPermissionbutton">@style/LightFlatNearbyPermissionButton</item>
<item name="iconInfo24">@drawable/ic_info_outline_dark_24dp</item>
<item name="iconMap24">@drawable/ic_map_dark_24dp</item>
<item name="mediaDetailsText">@color/enabled_button_text_color_light</item>
<item name="mediaDetailsHeadingText">@color/primaryDarkColor</item>
<item name="mediaDetailNominationBackground">@color/deleteRed</item>
<item name="mediaDetailSpacerColor">@color/divider_grey</item>
</style>
<style name="WhiteSearchBarTheme" parent="DarkAppTheme">
@ -129,4 +141,35 @@
<item name="centerRegion">#906078</item>
</style>
<style name="MediaDetailContainer">
<item name="android:paddingLeft">@dimen/quarter_standard_height</item>
<item name="android:paddingRight">@dimen/quarter_standard_height</item>
<item name="android:paddingTop">@dimen/tiny_gap</item>
<item name="android:paddingBottom">@dimen/tiny_gap</item>
</style>
<style name="MediaDetailTextLabel">
<item name="android:layout_weight">30</item>
<item name="android:paddingTop">@dimen/dimen_6</item>
<item name="android:paddingLeft">@dimen/tiny_gap</item>
<item name="android:textSize">@dimen/normal_text</item>
<item name="android:textStyle">bold</item>
</style>
<style name="MediaDetailTextLabelTitle" parent="@style/MediaDetailTextLabel">
<item name="android:textColor">@android:color/white</item>
</style>
<style name="MediaDetailTextLabelGeneric" parent="@style/MediaDetailTextLabel">
<item name="android:textColor">?attr/mediaDetailsHeadingText</item>
</style>
<style name="MediaDetailTextBody">
<item name="android:layout_weight">70</item>
<item name="android:layout_gravity">start</item>
<item name="android:padding">@dimen/small_gap</item>
<item name="android:textColor">?attr/mediaDetailsText</item>
<item name="android:textSize">@dimen/description_text_size</item>
</style>
</resources>