UI improvements

- Manga order by title in library
- New chapter list item design
- Chapter item popup
- Color normalisation to Material Design pallets
- Theme and style fixes

app/src/main/java/eu/kanade/mangafeed/data/database/DatabaseHelper.java

@@ -67,14 +67,15 @@ public class DatabaseHelper {
     private final String favoriteMangasWithUnreadQuery = String.format(
             "SELECT %1$s.*, COUNT(C.%4$s) AS %5$s FROM %1$s LEFT JOIN " +
                     "(SELECT %4$s FROM %2$s WHERE %6$s = 0) AS C ON %3$s = C.%4$s " +
-                    "WHERE %7$s = 1 GROUP BY %3$s",
+                    "WHERE %7$s = 1 GROUP BY %3$s ORDER BY %1$s.%8$s",
             MangaTable.TABLE,
             ChapterTable.TABLE,
             MangaTable.TABLE + "." + MangaTable.COLUMN_ID,
             ChapterTable.COLUMN_MANGA_ID,
             MangaTable.COLUMN_UNREAD,
             ChapterTable.COLUMN_READ,
-            MangaTable.COLUMN_FAVORITE
+            MangaTable.COLUMN_FAVORITE,
+            MangaTable.COLUMN_TITLE
     );
 
     public PreparedGetListOfObjects<Manga> getMangas() {

app/src/main/java/eu/kanade/mangafeed/ui/manga/chapter/ChaptersFragment.java

@@ -6,6 +6,7 @@ import android.support.v4.content.ContextCompat;
 import android.support.v4.widget.SwipeRefreshLayout;
 import android.support.v7.view.ActionMode;
 import android.support.v7.widget.LinearLayoutManager;
+import android.support.v7.widget.PopupMenu;
 import android.support.v7.widget.RecyclerView;
 import android.support.v7.widget.Toolbar;
 import android.view.LayoutInflater;

app/src/main/java/eu/kanade/mangafeed/ui/manga/chapter/ChaptersHolder.java

@@ -2,7 +2,9 @@ package eu.kanade.mangafeed.ui.manga.chapter;
 
 import android.content.Context;
 import android.support.v4.content.ContextCompat;
+import android.support.v7.widget.PopupMenu;
 import android.support.v7.widget.RecyclerView;
+import android.view.MenuItem;
 import android.view.View;
 import android.widget.ImageView;
 import android.widget.TextView;
@@ -14,14 +16,18 @@ import butterknife.Bind;
 import butterknife.ButterKnife;
 import eu.kanade.mangafeed.R;
 import eu.kanade.mangafeed.data.database.models.Chapter;
+import eu.kanade.mangafeed.data.download.DownloadService;
+import rx.Observable;
 
 public class ChaptersHolder extends RecyclerView.ViewHolder implements
         View.OnClickListener, View.OnLongClickListener {
 
     private ChaptersAdapter adapter;
+    private Chapter item;
 
     @Bind(R.id.chapter_title) TextView title;
-    @Bind(R.id.chapter_download_image) ImageView download_icon;
+    @Bind(R.id.download_text) TextView downloadText;
+    @Bind(R.id.chapter_menu) ImageView chapterMenu;
     @Bind(R.id.chapter_pages) TextView pages;
     @Bind(R.id.chapter_date) TextView date;
 
@@ -38,9 +44,11 @@ public class ChaptersHolder extends RecyclerView.ViewHolder implements
         this.adapter = adapter;
         itemView.setOnClickListener(this);
         itemView.setOnLongClickListener(this);
+        chapterMenu.setOnClickListener(v -> v.post(() -> showPopupMenu(v)));
     }
 
     public void onSetValues(Context context, Chapter chapter) {
+        this.item = chapter;
         title.setText(chapter.name);
 
         if (chapter.read) {
@@ -58,10 +66,11 @@ public class ChaptersHolder extends RecyclerView.ViewHolder implements
         if (chapter.downloaded == Chapter.UNKNOWN) {
             adapter.getMangaChaptersFragment().getPresenter().checkIsChapterDownloaded(chapter);
         }
-        if (chapter.downloaded == Chapter.DOWNLOADED)
+        if (chapter.downloaded == Chapter.DOWNLOADED) {
-            download_icon.setImageResource(R.drawable.ic_action_delete_36dp);
+            downloadText.setVisibility(View.VISIBLE);
-        else if (chapter.downloaded == Chapter.NOT_DOWNLOADED)
+        } else if (chapter.downloaded == Chapter.NOT_DOWNLOADED) {
-            download_icon.setImageResource(R.drawable.ic_file_download_black_36dp);
+            downloadText.setVisibility(View.INVISIBLE);
+        }
 
         date.setText(sdf.format(new Date(chapter.date_upload)));
         toggleActivation();
@@ -83,4 +92,37 @@ public class ChaptersHolder extends RecyclerView.ViewHolder implements
         toggleActivation();
         return true;
     }
+
+
+    private void showPopupMenu(View view) {
+        // Create a PopupMenu, giving it the clicked view for an anchor
+        PopupMenu popup = new PopupMenu(adapter.getMangaChaptersFragment().getActivity(), view);
+
+        // Inflate our menu resource into the PopupMenu's Menu
+        popup.getMenuInflater().inflate(R.menu.chapter_single, popup.getMenu());
+
+        // Set a listener so we are notified if a menu item is clicked
+        popup.setOnMenuItemClickListener(menuItem -> {
+            switch (menuItem.getItemId()) {
+                case R.id.action_mark_as_read:
+                    adapter.getMangaChaptersFragment().getPresenter().markChaptersRead(Observable.just(item), true);
+                    return true;
+                case R.id.action_mark_as_unread:
+                    adapter.getMangaChaptersFragment().getPresenter().markChaptersRead(Observable.just(item), false);
+                    return true;
+                case R.id.action_download:
+                    DownloadService.start(adapter.getMangaChaptersFragment().getActivity());
+                    adapter.getMangaChaptersFragment().getPresenter().downloadChapters(Observable.just(item));
+                    return true;
+                case R.id.action_delete:
+                    adapter.getMangaChaptersFragment().getPresenter().deleteChapters(Observable.just(item));
+                    return true;
+            }
+            return false;
+        });
+
+        // Finally show the PopupMenu
+        popup.show();
+    }
+
 }

app/src/main/java/eu/kanade/mangafeed/ui/manga/chapter/ChaptersPresenter.java

@@ -169,7 +169,7 @@ public class ChaptersPresenter extends BasePresenter<ChaptersFragment> {
 
     public void initSortIcon() {
         if (getView() != null) {
-            getView().setSortIcon(sortOrderAToZ);//TODO do we need save order for manga?
+            getView().setSortIcon(sortOrderAToZ);//TODO manga.chapter_order
         }
     }
 

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

@@ -10,7 +10,7 @@
         android:id="@+id/appbar"
         android:layout_width="match_parent"
         android:layout_height="wrap_content"
-        android:theme="@style/AppTheme.ActionBar">
+        android:theme="@style/ThemeOverlay.AppTheme.Dark">
 
         <include
             android:id="@+id/toolbar"
@@ -20,9 +20,10 @@
             android:id="@+id/tabs"
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
-            android:theme="@style/AppTheme.TabLayout"
+            android:theme="@style/ThemeOverlay.AppTheme.Dark"
             app:tabGravity="fill"
-            app:tabIndicatorColor="@color/accent" />
+            android:background="@color/colorPrimary"
+            app:tabIndicatorColor="@color/white" />
 
     </android.support.design.widget.AppBarLayout>
 
@@ -31,6 +32,6 @@
         android:layout_width="match_parent"
         android:layout_height="0px"
         android:layout_weight="1"
-        android:background="@android:color/white" />
+        android:background="@color/white" />
 
 </LinearLayout>

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

@@ -13,14 +13,14 @@
         android:layout_width="wrap_content"
         android:layout_height="fill_parent"
         android:layout_gravity="center_vertical|center_horizontal"
-        android:visibility="gone" />
+        android:visibility="gone"/>
 
     <GridView
         android:id="@+id/gridView"
         style="@style/AppTheme.GridView"
         android:layout_height="0dp"
         android:layout_weight="1"
-        android:numColumns="2"
+        android:columnWidth="140dp"
         tools:listitem="@layout/item_catalogue" />
 
     <ProgressBar
@@ -29,6 +29,6 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="center_vertical|center_horizontal"
-        android:visibility="gone" />
+        android:visibility="gone"/>
 
 </LinearLayout>

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

@@ -7,7 +7,7 @@
         android:id="@+id/gridView"
         style="@style/AppTheme.GridView"
         android:choiceMode="multipleChoiceModal"
-        android:numColumns="2"
+        android:columnWidth="140dp"
         tools:listitem="@layout/item_catalogue" />
 
 </FrameLayout>

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

@@ -10,7 +10,7 @@
         android:id="@+id/swipe_refresh"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
-        android:layout_above="@+id/appbar_bottom"
+        android:layout_above="@+id/toolbar_bottom"
         android:orientation="vertical">
 
         <android.support.v7.widget.RecyclerView
@@ -25,23 +25,23 @@
 
     </android.support.v4.widget.SwipeRefreshLayout>
 
-    <android.support.design.widget.AppBarLayout
-        android:id="@+id/appbar_bottom"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_alignParentBottom="true"
-        android:theme="@style/AppTheme.ActionBar">
 
     <android.support.v7.widget.Toolbar
         android:id="@+id/toolbar_bottom"
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
+        android:layout_alignParentBottom="true"
         android:background="@color/colorPrimary"
         android:elevation="4dp"
         android:gravity="top|start"
         android:theme="@style/ThemeOverlay.AppTheme.Dark"
-            app:popupTheme="@style/AppTheme.Popup" />
+        app:popupTheme="@style/AppTheme.Popup">
+
+        <android.support.v7.widget.ActionMenuView
+            android:id="@+id/bottom_menu"
+            android:layout_width="wrap_content"
+            android:layout_height="?attr/actionBarSize"/>
+    </android.support.v7.widget.Toolbar>
 
-    </android.support.design.widget.AppBarLayout>
 
 </RelativeLayout>

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

@@ -20,7 +20,7 @@
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_gravity="end"
-        android:background="@color/md_red_300"
+        android:background="@color/manga_unread_bg"
         android:paddingBottom="1dp"
         android:paddingLeft="3dp"
         android:paddingRight="3dp"
@@ -59,7 +59,7 @@
             android:layout_width="match_parent"
             android:layout_height="wrap_content"
             android:layout_gravity="center_vertical"
-            android:ellipsize="middle"
+            android:ellipsize="end"
             android:maxLines="1"
             android:paddingLeft="8dp"
             android:paddingRight="8dp"

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

@@ -8,10 +8,11 @@
 
     <RelativeLayout
         android:layout_width="fill_parent"
-        android:layout_height="20dp"
+        android:layout_height="18dp"
+        android:id="@+id/relativeLayout"
         android:layout_alignParentBottom="true"
-        android:layout_toLeftOf="@+id/chapter_download_image"
+        android:layout_alignParentLeft="true"
-        android:layout_toStartOf="@+id/chapter_download_image">
+        android:layout_alignParentStart="true">
 
         <TextView
             android:id="@+id/chapter_pages"
@@ -20,7 +21,9 @@
             android:ellipsize="marquee"
             android:singleLine="true"
             android:textSize="12sp"
-            tools:text="Pages: 45" />
+            tools:text="Pages: 45"
+            android:layout_alignParentTop="true"
+            android:layout_centerHorizontal="true"/>
 
         <TextView
             android:id="@+id/chapter_date"
@@ -29,32 +32,54 @@
             android:ellipsize="marquee"
             android:singleLine="true"
             android:textSize="12sp"
-            tools:text="22/02/2016"
+            tools:text="22/02/2016"/>
-            android:layout_alignParentRight="true" />
-    </RelativeLayout>
 
+        <TextView
+            android:id="@+id/download_text"
+            android:layout_width="wrap_content"
+            android:layout_height="fill_parent"
+            android:textSize="12sp"
+            android:textColor="@color/accent_text"
+            android:text="@string/chapter_downloaded"
+            android:layout_centerVertical="true"
+            android:layout_alignParentRight="true"
+            android:layout_alignParentEnd="true"/>
+    </RelativeLayout>
 
     <TextView
         android:id="@+id/chapter_title"
         android:layout_width="fill_parent"
         android:layout_height="wrap_content"
-        android:layout_alignParentTop="true"
         android:layout_alignWithParentIfMissing="true"
         android:gravity="center_vertical"
         android:textSize="20sp"
+        android:ellipsize="end"
+        android:maxLines="1"
         tools:text="Title"
-        android:layout_toLeftOf="@+id/chapter_download_image"
+        android:layout_alignParentTop="true"
-        android:layout_toStartOf="@+id/chapter_download_image" />
+        android:layout_alignParentLeft="true"
+        android:layout_alignParentStart="true"
+        android:layout_toStartOf="@+id/relativeLayout2"
+        android:layout_toLeftOf="@+id/relativeLayout2"/>
 
-    <ImageView
+    <RelativeLayout
-        android:id="@+id/chapter_download_image"
+        android:layout_width="30dp"
-        android:layout_width="wrap_content"
+        android:layout_height="30dp"
-        android:layout_height="wrap_content"
+        android:layout_alignParentTop="true"
+        android:layout_alignParentRight="true"
+        android:layout_alignParentEnd="true"
         android:layout_gravity="center_vertical"
         android:gravity="center"
-        android:layout_alignParentRight="true"
+        android:id="@+id/relativeLayout2"
-        tools:src="@drawable/ic_file_download_black_48dp"
+        android:layout_above="@+id/relativeLayout">
-        />
+        <ImageView
+            android:id="@+id/chapter_menu"
+            android:layout_width="fill_parent"
+            android:layout_height="fill_parent"
+            android:scaleType="fitXY"
+            android:src="@drawable/ic_more_horiz_black_36dp"
+            android:background="?android:selectableItemBackground"/>
+    </RelativeLayout>
 
 
 </RelativeLayout>

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

@@ -13,8 +13,8 @@
         android:layout_width="match_parent"
         android:layout_height="?attr/actionBarSize"
         android:background="@color/reader_menu_background"
-        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
+        android:theme="@style/ThemeOverlay.AppTheme.Dark"
-        app:popupTheme="@style/ThemeOverlay.AppCompat.Light"
+        app:popupTheme="@style/AppTheme.Popup"
         android:elevation="4dp" />
 
     <LinearLayout
@@ -46,7 +46,9 @@
                 android:layout_width="0dp"
                 android:layout_height="wrap_content"
                 android:layout_weight="1"
-                android:layout_gravity="center_vertical" />
+                android:layout_gravity="center_vertical"
+                android:theme="@style/ThemeOverlay.AppTheme.Dark"
+                />
 
             <TextView
                 android:id="@+id/total_pages"

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

@@ -2,7 +2,7 @@
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     android:orientation="vertical" android:layout_width="match_parent"
     android:layout_height="match_parent"
-    android:background="#333333"
+    android:background="@color/reader_menu_background"
     android:paddingRight="10dp"
     android:paddingLeft="5dp"
     android:paddingTop="5dp"

app/src/main/res/menu/chapter_single.xml

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<menu xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto">
+
+    <item android:id="@+id/action_download"
+        android:title="@string/action_download"
+        android:icon="@drawable/ic_file_download"
+        app:showAsAction="ifRoom"/>
+
+    <item android:id="@+id/action_delete"
+        android:title="@string/action_delete"
+        android:icon="@drawable/ic_action_delete"
+        app:showAsAction="ifRoom"/>
+
+    <item android:id="@+id/action_mark_as_read"
+        android:title="@string/action_mark_as_read"
+        android:icon="@drawable/ic_action_done_all"
+        app:showAsAction="ifRoom"/>
+
+    <item android:id="@+id/action_mark_as_unread"
+        android:title="@string/action_mark_as_unread"
+        android:icon="@drawable/ic_action_undone_all"
+        app:showAsAction="ifRoom"/>
+</menu>

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

@@ -1,34 +1,32 @@
 <?xml version="1.0" encoding="utf-8"?>
 <resources>
-    <color name="colorAccent">#FFEA00</color>
+    <color name="colorAccent">@color/md_blue_A400</color>
-    <color name="colorPrimary">#607D8B</color>
+    <color name="colorPrimary">@color/md_blue_grey_500</color>
-    <color name="colorPrimaryDark">#455A64</color>
+    <color name="colorPrimaryDark">@color/md_blue_grey_700</color>
-    <color name="colorPrimarySuperDark">#263238</color>
+    <color name="colorPrimarySuperDark">@color/md_blue_grey_900</color>
-    <color name="colorPrimaryLight">#CFD8DC</color>
+    <color name="colorPrimaryLight">@color/md_blue_grey_100</color>
 
-    <color name="colorBackgroundLight">#ECEFF1</color>
+    <color name="colorBackgroundLight">@color/md_blue_grey_50</color>
 
     <color name="primary">@color/colorPrimary</color>
     <color name="primary_dark">@color/colorPrimaryDark</color>
     <color name="primary_light">@color/colorPrimaryLight</color>
 
-    <color name="divider">#CFD8DC</color>
+    <color name="divider">@color/md_light_dividers</color>
-
-    <color name="white">#FFFFFF</color>
-    <color name="primary_text">#DD000000</color>
-    <color name="secondary_text">#8B000000</color>
-    <color name="hint_text">#64000000</color>
-
-    <color name="icons">#FFFFFF</color>
 
+    <color name="white">@color/md_white_1000</color>
+    <color name="primary_text">@color/md_light_primary_text</color>
+    <color name="secondary_text">@color/md_light_secondary</color>
+    <color name="hint_text">@color/md_light_disabled</color>
+    <color name="accent_text">@color/md_green_900</color>
 
     <color name="list_choice_pressed_bg_light">@color/colorPrimaryLight</color>
 
-    <color name="super_light_grey">#FAFAFA</color>
+    <color name="manga_unread_bg">@color/colorAccent</color>
-    <color name="line_grey">#D7D7D7</color>
+
-    <color name="light_grey">#D4D4D4</color>
+    <color name="super_light_grey">@color/md_grey_50</color>
-    <color name="bg_light_grey">#E9E9E9</color>
+    <color name="line_grey">@color/md_light_dividers</color>
-    <color name="library_text_background">#E8E8E8</color>
+    <color name="light_grey">@color/md_grey_300</color>
     <color name="page_number_background">#AAE9E9E9</color>
-    <color name="reader_menu_background">#333333</color>
+    <color name="reader_menu_background">@color/colorPrimarySuperDark</color>
 </resources>

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

@@ -85,6 +85,7 @@
     <string name="manga_chapters_tab">Chapters</string>
     <string name="selected_chapters_title">Selected: %1$d</string>
     <string name="manga_chapter_no_title">No title</string>
+    <string name="chapter_downloaded">DOWNLOADED</string>
 
     <!-- Reader activity -->
     <string name="downloading">Downloading…</string>

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

@@ -17,21 +17,17 @@
 
     </style>
 
-    <style name="ThemeOverlay.AppTheme.Dark" parent="ThemeOverlay.AppCompat.Dark">
+    <style name="ThemeOverlay.AppTheme.Dark" parent="ThemeOverlay.AppCompat.Dark.ActionBar">
+        <item name="colorAccent">@color/white</item>
         <item name="android:windowActionModeOverlay">true</item>
         <item name="windowActionModeOverlay">true</item>
-    </style>
 
-    <style name="AppTheme.Popup" parent="@style/ThemeOverlay.AppTheme.Dark">
-        <item name="android:background">@color/colorPrimary</item>
-        <item name="android:textColor">@color/white</item>
-    </style>
-
-    <style name="AppTheme.ActionBar" parent="@style/ThemeOverlay.AppTheme.Dark">
         <item name="android:actionModeBackground">@color/colorPrimarySuperDark</item>
         <item name="actionModeBackground">@color/colorPrimarySuperDark</item>
     </style>
-    <style name="AppTheme.TabLayout" parent="@style/ThemeOverlay.AppTheme.Dark">
+
+    <style name="AppTheme.Popup" parent="@style/ThemeOverlay.AppTheme.Dark">
+        <item name="colorAccent">@color/white</item>
         <item name="android:background">@color/colorPrimary</item>
         <item name="android:textColor">@color/white</item>
     </style>
@@ -84,6 +80,6 @@
     </style>
 
     <style name="grey_text">
-        <item name="android:textColor">#e0e0e0</item>
+        <item name="android:textColor">@color/md_grey_300</item>
     </style>
 </resources>