ADHOC
/
replicant-packages_apps_Email
3
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

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
This commit is contained in:
Makoto Onuki 2011-06-22 14:55:15 -07:00
parent 69b50d46ec
commit 846763bd68
9 changed files with 257 additions and 211 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
res/drawable-hdpi/ic_menu_expander_maximized_holo_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
res/drawable-hdpi/ic_menu_expander_minimized_holo_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
res/drawable-mdpi/ic_menu_expander_maximized_holo_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

BIN
res/drawable-mdpi/ic_menu_expander_minimized_holo_light.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.5 KiB

9
res/layout-sw600dp/message_view_fragment.xml
View File

@ -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"

422
res/layout/message_view_fragment.xml
View File

@ -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"
>
<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"
android:orientation="vertical"
>
<!-- 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>

5
res/values-sw600dp/colors.xml
View File

@ -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>

20
res/values/styles.xml
View File

@ -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>

12
src/com/android/email/activity/MessageViewFragmentBase.java
View File

@ -120,7 +120,7 @@ public abstract class MessageViewFragmentBase extends Fragment implements View.O
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 @@ public abstract class MessageViewFragmentBase extends Fragment implements View.O
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 @@ public abstract class MessageViewFragmentBase extends Fragment implements View.O
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 @@ public abstract class MessageViewFragmentBase extends Fragment implements View.O
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);