Improve 1-pane message visual
Also fixed the text alignment in the tabs on the 2-pane message view.
We don't yet to have the full-spec for this, so it's still temporary.
Now we again wrap the webview in a scroll view, so we'll have the "message
keeps growing" issue again. I'll file a bug for this.
It's still temporary, so I didn't remove the scroll views for the
each section (e.g. the attachment tab). Also I had to make up some
colors/dimensions which were unspecified. Also I didn't always define
styles when I should. Let's clean up these things later when we
get more detailed spec.
Change-Id: Ibdb78543f5ec7300f92091d1f8b800ca5edc74b2
diff --git a/res/drawable-hdpi/ic_menu_expander_maximized_holo_light.png b/res/drawable-hdpi/ic_menu_expander_maximized_holo_light.png
new file mode 100644
index 0000000..eb836a7
--- /dev/null
+++ b/res/drawable-hdpi/ic_menu_expander_maximized_holo_light.png
Binary files differ
diff --git a/res/drawable-hdpi/ic_menu_expander_minimized_holo_light.png b/res/drawable-hdpi/ic_menu_expander_minimized_holo_light.png
new file mode 100644
index 0000000..5c82dbb
--- /dev/null
+++ b/res/drawable-hdpi/ic_menu_expander_minimized_holo_light.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_menu_expander_maximized_holo_light.png b/res/drawable-mdpi/ic_menu_expander_maximized_holo_light.png
new file mode 100644
index 0000000..eb836a7
--- /dev/null
+++ b/res/drawable-mdpi/ic_menu_expander_maximized_holo_light.png
Binary files differ
diff --git a/res/drawable-mdpi/ic_menu_expander_minimized_holo_light.png b/res/drawable-mdpi/ic_menu_expander_minimized_holo_light.png
new file mode 100644
index 0000000..5c82dbb
--- /dev/null
+++ b/res/drawable-mdpi/ic_menu_expander_minimized_holo_light.png
Binary files differ
diff --git a/res/layout-sw600dp/message_view_fragment.xml b/res/layout-sw600dp/message_view_fragment.xml
index 88d8ab6..003319a 100644
--- a/res/layout-sw600dp/message_view_fragment.xml
+++ b/res/layout-sw600dp/message_view_fragment.xml
@@ -197,7 +197,6 @@
/>
<TextView
- android:text="@string/message_view_show_details"
android:id="@+id/datetime"
android:layout_width="wrap_content"
android:layout_height="48dip"
@@ -268,7 +267,7 @@
android:id="@+id/show_message"
android:layout_width="128dip"
android:layout_height="match_parent"
- android:layout_gravity="center"
+ android:gravity="center"
android:text="@string/message_view_show_message_action"
android:textSize="14dip"
android:textColor="@color/text_primary_color"
@@ -280,7 +279,7 @@
android:id="@+id/show_invite"
android:layout_width="128dip"
android:layout_height="match_parent"
- android:layout_gravity="center"
+ android:gravity="center"
android:text="@string/message_view_show_invite_action"
android:textSize="14dip"
android:textColor="@color/text_primary_color"
@@ -292,7 +291,7 @@
android:id="@+id/show_attachments"
android:layout_width="128dip"
android:layout_height="match_parent"
- android:layout_gravity="center"
+ android:gravity="center"
android:textSize="14dip"
android:textColor="@color/text_primary_color"
android:singleLine="true"
@@ -309,7 +308,7 @@
android:id="@+id/show_pictures"
android:layout_width="wrap_content"
android:layout_height="match_parent"
- android:layout_gravity="right"
+ android:gravity="center"
style="@android:style/Widget.Holo.Button.Borderless"
android:padding="0dip"
android:text="@string/message_view_show_pictures_action"
diff --git a/res/layout/message_view_fragment.xml b/res/layout/message_view_fragment.xml
index a2732c5..4cc5a68 100644
--- a/res/layout/message_view_fragment.xml
+++ b/res/layout/message_view_fragment.xml
@@ -28,231 +28,259 @@
android:layout_gravity="center"
style="?android:attr/progressBarStyleLarge"
/>
- <LinearLayout
+ <ScrollView
android:id="@+id/main_panel"
- android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent"
>
- <!-- header area -->
<LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
android:orientation="vertical"
- android:paddingTop="3dip"
- android:paddingBottom="3dip"
- android:paddingLeft="3dip"
- android:paddingRight="6dip"
+ android:layout_width="match_parent"
+ android:layout_height="match_parent"
>
+ <!-- header area -->
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:baselineAligned="true"
+ android:orientation="vertical"
>
- <ImageView
- android:id="@+id/badge"
- android:layout_width="32dip"
- android:layout_height="32dip"
- android:layout_gravity="center_vertical"
- android:layout_marginRight="2dip"
- android:layout_marginLeft="2dip"
- />
- <ImageView
- android:id="@+id/presence"
- android:src="@android:drawable/presence_offline"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginRight="2dip"
- android:layout_gravity="center_vertical"
- />
- <RelativeLayout
- android:layout_width="0dip"
- android:layout_height="wrap_content"
- android:layout_weight="1.0"
- android:paddingRight="6dip"
- >
- <TextView
- android:id="@+id/from_name"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:textAppearance="?android:attr/textAppearanceSmall"
- android:textStyle="bold"
- android:singleLine="true"
- android:ellipsize="end"
- />
- <TextView
- android:id="@+id/from_address"
- android:layout_below="@+id/from_name"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:textAppearance="?android:attr/textAppearanceSmall"
- android:singleLine="true"
- android:ellipsize="end"
- />
- </RelativeLayout>
- <!-- Reply/Forward buttons are default gone for MessageFileView -->
- <ImageView
- android:id="@+id/reply"
- android:src="@drawable/reply"
- android:layout_width="32dip"
- android:layout_height="24dip"
- android:layout_margin="6dip"
- android:baselineAlignBottom="true"
- android:visibility="gone"
- />
- <ImageView
- android:id="@+id/favorite"
- android:layout_width="32dip"
- android:layout_height="24dip"
- android:layout_margin="6dip"
- android:src="@drawable/btn_star_off_normal_email_holo_light"
- />
- </LinearLayout>
-
- <!-- To, Cc, Bcc addresses -->
- <TextView
- android:id="@+id/addresses"
- android:textAppearance="?android:attr/textAppearanceSmall"
- android:textColor="?android:attr/textColorSecondary"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:ellipsize="end"
- />
- <LinearLayout
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- >
+ <!-- Subject. TODO: Move this to the action bar -->
<TextView
android:id="@+id/subject"
+ android:layout_width="match_parent"
+ android:layout_height="32dip"
+ android:layout_marginLeft="8dip"
+ android:layout_marginRight="8dip"
android:textAppearance="?android:attr/textAppearanceSmall"
android:textColor="?android:attr/textColorSecondary"
android:textStyle="bold"
- android:layout_width="0dip"
- android:layout_weight="1.0"
- android:layout_height="wrap_content"
+ android:gravity="center_vertical"
android:singleLine="true"
android:ellipsize="end"
/>
- <TextView
- android:id="@+id/datetime"
- android:textAppearance="?android:attr/textAppearanceSmall"
- android:textColor="?android:attr/textColorPrimary"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:layout_marginLeft="4dip"
- android:singleLine="true"
- />
- <Button
- android:id="@+id/show_details"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- android:padding="0dip"
+ <LinearLayout
+ android:layout_width="match_parent"
+ android:layout_height="48dip"
+ android:baselineAligned="true"
+ android:background="#3cb8e6"
android:gravity="center_vertical"
- android:text="@string/message_view_show_details"
- android:textSize="14dip"
- android:textColor="@color/text_ternary_color"
- android:textStyle="bold"
- android:singleLine="true"
+ >
+ <ImageView
+ android:id="@+id/badge"
+ android:layout_width="48dip"
+ android:layout_height="48dip"
+ />
+ <View
+ android:layout_width="1dip"
+ android:layout_height="match_parent"
+ android:background="#fff"
+ />
+ <ImageView
+ android:id="@+id/presence"
+ android:src="@android:drawable/presence_offline"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_marginRight="2dip"
+ />
+ <RelativeLayout
+ android:layout_width="0dip"
+ android:layout_height="wrap_content"
+ android:layout_weight="1.0"
+ >
+ <TextView
+ android:id="@+id/from_name"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:textSize="16dip"
+ android:textColor="#ffffff"
+ android:singleLine="true"
+ android:ellipsize="end"
+ />
+ <TextView
+ android:id="@+id/from_address"
+ android:layout_below="@+id/from_name"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:textSize="14dip"
+ android:textColor="#eeeeee"
+ android:singleLine="true"
+ android:ellipsize="end"
+ />
+ </RelativeLayout>
+ <!-- Reply/Forward buttons are default gone for MessageFileView -->
+ <ImageView
+ android:id="@+id/reply"
+ android:src="@drawable/reply"
+ android:layout_width="32dip"
+ android:layout_height="24dip"
+ android:layout_margin="6dip"
+ android:baselineAlignBottom="true"
+ android:visibility="gone"
+ />
+ <ImageView
+ android:id="@+id/favorite"
+ android:layout_width="32dip"
+ android:layout_height="24dip"
+ android:layout_margin="6dip"
+ android:src="@drawable/btn_star_off_normal_email_holo_light"
+ />
+ </LinearLayout>
+
+ <!-- Addresses, timestamp, "show details" -->
+ <LinearLayout
+ android:layout_width="match_parent"
+ android:layout_height="48dip"
+ android:gravity="center_vertical"
+ >
+ <!-- To, Cc, Bcc addresses -->
+ <TextView
+ android:id="@+id/addresses"
+ android:layout_width="0dip"
+ android:layout_height="wrap_content"
+ android:layout_weight="1"
+ android:layout_marginLeft="24dip"
+ android:singleLine="true"
+ android:ellipsize="end"
+ style="@style/message_view_text"
+ />
+ <TextView
+ android:id="@+id/datetime"
+ android:layout_width="wrap_content"
+ android:layout_height="wrap_content"
+ android:layout_marginLeft="16dip"
+ android:singleLine="true"
+ style="@style/message_view_text"
+ />
+ <!-- Set proper background to reflect selected state -->
+ <ImageView
+ android:id="@+id/show_details"
+ android:src="@drawable/ic_menu_expander_minimized_holo_light"
+ android:layout_width="32dip"
+ android:layout_height="32dip"
+ android:layout_marginLeft="4dip"
+ android:layout_marginRight="16dip"
+ android:gravity="center"
+ android:background="?android:attr/selectableItemBackground"
+ />
+ </LinearLayout>
+
+ <!-- divider -->
+ <View
+ android:layout_width="match_parent"
+ android:layout_marginLeft="16dip"
+ android:layout_marginRight="16dip"
+ style="@style/message_view_horizontal_divider"
/>
+
</LinearLayout>
+ <!-- end of header area -->
-
- </LinearLayout>
- <!-- end of header area -->
-
- <!-- tab area -->
- <LinearLayout
- android:id="@+id/message_tabs_section"
- android:layout_width="match_parent"
- android:layout_height="wrap_content"
- android:orientation="horizontal"
- android:paddingLeft="6dip"
- android:paddingRight="6dip"
- android:paddingTop="6dip"
- android:paddingBottom="6dip"
- >
- <Button
- android:id="@+id/show_message"
- android:text="@string/message_view_show_message_action"
- android:layout_gravity="center"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
<!--
- Even though the "invite" section is only for MessageViewFragment, it's managed
- by MessageViewFragmentBase for simplicity.
+ tab area TODO: Need visual spec
-->
- <Button
- android:id="@+id/show_invite"
- android:text="@string/message_view_show_invite_action"
- android:layout_gravity="center"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <Button
- android:id="@+id/show_attachments"
- android:layout_gravity="center"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- <View
- android:layout_width="0dip"
- android:layout_height="0dip"
- android:layout_weight="1"
- />
- <Button
- android:id="@+id/show_pictures"
- android:text="@string/message_view_show_pictures_action"
- android:layout_gravity="center"
- android:layout_width="wrap_content"
- android:layout_height="wrap_content"
- />
- </LinearLayout>
- <!-- end of tab area -->
- <!--
- content area - only one of them is visible at a time.
- -->
- <WebView
- android:id="@+id/message_content"
- android:layout_width="match_parent"
- android:layout_height="0dip"
- android:layout_weight="1"
- android:background="#ffffff"
- android:visibility="gone"
- />
- <!--
- Even though the "invite" section is only for MessageViewFragment,
- Its visibility is controlled by MessageViewFragmentBase for simplicity.
- -->
- <ScrollView
- android:id="@+id/invite_scroll"
- android:layout_width="match_parent"
- android:layout_height="0dip"
- android:layout_weight="1"
- android:visibility="gone"
- >
- <!--
- Invite section - the views in it are controlled only by MessageViewFragment.
- MessageViewFragment shouldn't know what's inside it.
- -->
- <include layout="@layout/message_view_invitation" />
- </ScrollView>
- <ScrollView
- android:id="@+id/attachments_scroll"
- android:layout_width="match_parent"
- android:layout_height="0dip"
- android:layout_weight="1"
- android:visibility="gone"
- >
<LinearLayout
- android:id="@+id/attachments"
- android:orientation="vertical"
+ android:id="@+id/message_tabs_section"
android:layout_width="match_parent"
android:layout_height="wrap_content"
- android:padding="4dip"
+ android:layout_marginLeft="16dip"
+ android:layout_marginRight="16dip"
+ android:orientation="vertical"
+ >
+ <LinearLayout
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:orientation="horizontal"
+ >
+ <Button
+ android:id="@+id/show_message"
+ android:text="@string/message_view_show_message_action"
+ android:layout_width="wrap_content"
+ style="@style/message_view_tab"
+ />
+ <!--
+ Even though the "invite" section is only for MessageViewFragment, it's managed
+ by MessageViewFragmentBase for simplicity.
+ -->
+ <Button
+ android:id="@+id/show_invite"
+ android:text="@string/message_view_show_invite_action"
+ android:layout_width="wrap_content"
+ style="@style/message_view_tab"
+ />
+ <Button
+ android:id="@+id/show_attachments"
+ android:layout_width="wrap_content"
+ style="@style/message_view_tab"
+ />
+ <View
+ android:layout_width="0dip"
+ android:layout_height="0dip"
+ android:layout_weight="1"
+ />
+ <Button
+ android:id="@+id/show_pictures"
+ android:text="@string/message_view_show_pictures_action"
+ android:layout_width="wrap_content"
+ style="@style/message_view_tab"
+ />
+ </LinearLayout>
+ <View
+ android:layout_width="match_parent"
+ style="@style/message_view_horizontal_divider"
+ />
+ </LinearLayout>
+ <!-- end of tab area -->
+ <!--
+ content area - only one of them is visible at a time.
+
+ TODO Decide what to do with the scrollview+webview issue, and remove the scrollviews
+ below if we go with the outer scrollview.
+ -->
+ <WebView
+ android:id="@+id/message_content"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginLeft="16dip"
+ android:layout_marginRight="16dip"
android:background="#ffffff"
+ android:visibility="gone"
/>
- </ScrollView>
- <!-- end of content area -->
- </LinearLayout>
+ <!--
+ Even though the "invite" section is only for MessageViewFragment,
+ Its visibility is controlled by MessageViewFragmentBase for simplicity.
+ -->
+ <ScrollView
+ android:id="@+id/invite_scroll"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginLeft="16dip"
+ android:layout_marginRight="16dip"
+ android:visibility="gone"
+ >
+ <!--
+ Invite section - the views in it are controlled only by MessageViewFragment.
+ MessageViewFragment shouldn't know what's inside it.
+ -->
+ <include layout="@layout/message_view_invitation" />
+ </ScrollView>
+ <ScrollView
+ android:id="@+id/attachments_scroll"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:layout_marginLeft="16dip"
+ android:layout_marginRight="16dip"
+ android:visibility="gone"
+ >
+ <LinearLayout
+ android:id="@+id/attachments"
+ android:orientation="vertical"
+ android:layout_width="match_parent"
+ android:layout_height="wrap_content"
+ android:padding="4dip"
+ android:background="#ffffff"
+ />
+ </ScrollView>
+ <!-- end of content area -->
+ </LinearLayout>
+ </ScrollView>
</FrameLayout>
diff --git a/res/values-sw600dp/colors.xml b/res/values-sw600dp/colors.xml
index 9607459..63d5943 100644
--- a/res/values-sw600dp/colors.xml
+++ b/res/values-sw600dp/colors.xml
@@ -15,10 +15,5 @@
-->
<resources>
-
<color name="message_view_fogged_glass_color">#00000000</color>
-
- <!-- Standard text colors -->
- <color name="text_primary_color">#000000</color>
- <color name="text_secondary_color">#666666</color>
</resources>
diff --git a/res/values/styles.xml b/res/values/styles.xml
index c6b1f3b..e8e33a5 100644
--- a/res/values/styles.xml
+++ b/res/values/styles.xml
@@ -14,7 +14,7 @@
limitations under the License.
-->
-<!-- See also values-xlarge for specializations for xlarge screens -->
+<!-- non-xlarge. See also values-xlarge for specializations for xlarge screens -->
<resources>
<style name="EmailTheme" parent="@android:style/Theme.Holo.Light">
</style>
@@ -121,5 +121,23 @@
<item name="android:layout_width">match_parent</item>
<item name="android:layout_height">match_parent</item>
</style>
+
+ <style name="message_view_text">
+ <item name="android:textSize">14dip</item>
+ <item name="android:textColor">@color/text_secondary_color</item>
+ </style>
+
+ <style name="message_view_horizontal_divider">
+ <item name="android:layout_height">1dip</item>
+ <item name="android:background">?android:attr/dividerHorizontal</item>
+ </style>
+
+ <style name="message_view_tab" parent="@android:style/Widget.Holo.Light.Tab">
+ <item name="android:layout_height">32dip</item>
+ <item name="android:gravity">center</item>
+ <item name="android:textSize">14dip</item>
+ <item name="android:textColor">@color/text_secondary_color</item>
+ </style>
+
</resources>
diff --git a/src/com/android/email/activity/MessageViewFragmentBase.java b/src/com/android/email/activity/MessageViewFragmentBase.java
index 7a37d46..b2e950f 100644
--- a/src/com/android/email/activity/MessageViewFragmentBase.java
+++ b/src/com/android/email/activity/MessageViewFragmentBase.java
@@ -120,7 +120,7 @@
private ImageView mSenderPresenceView;
private View mMainView;
private View mLoadingProgress;
- private Button mShowDetailsButton;
+ private View mShowDetailsButton;
private TextView mMessageTab;
private TextView mAttachmentTab;
@@ -299,7 +299,7 @@
mSenderPresenceView = (ImageView) UiUtilities.getView(view, R.id.presence);
mMainView = UiUtilities.getView(view, R.id.main_panel);
mLoadingProgress = UiUtilities.getView(view, R.id.loading_progress);
- mShowDetailsButton = (Button) UiUtilities.getView(view, R.id.show_details);
+ mShowDetailsButton = UiUtilities.getView(view, R.id.show_details);
mFromNameView.setOnClickListener(this);
mFromAddressView.setOnClickListener(this);
@@ -1519,7 +1519,8 @@
mFromNameView.setText(" ");
mFromAddressView.setText(" ");
}
- mDateTimeView.setText(formatDate(message.mTimeStamp, false));
+ mDateTimeView.setText(DateUtils.getRelativeTimeSpanString(mContext, message.mTimeStamp)
+ .toString());
// To/Cc/Bcc
final Resources res = mContext.getResources();
@@ -1548,6 +1549,11 @@
mAddressesView.setText(ssb);
}
+ /**
+ * @return the given date/time in a human readable form. The returned string always have
+ * month and day (and year if {@code withYear} is set), so is usually long.
+ * Use {@link DateUtils#getRelativeTimeSpanString} instead to save the screen real estate.
+ */
private String formatDate(long millis, boolean withYear) {
StringBuilder sb = new StringBuilder();
Formatter formatter = new Formatter(sb);
