Merge pull request #651 from esensar/feature/641-open-note-ui

Update UI of OpenNodeDialog

app/build.gradle

@@ -66,7 +66,7 @@ android {
 }
 
 dependencies {
-    implementation 'com.github.SimpleMobileTools:Simple-Commons:91763fe00f'
+    implementation 'com.github.SimpleMobileTools:Simple-Commons:2a2c17151e'
     implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
     implementation 'androidx.documentfile:documentfile:1.0.1'
 

app/src/main/kotlin/com/simplemobiletools/notes/pro/adapters/OpenNoteAdapter.kt

@@ -0,0 +1,140 @@
+package com.simplemobiletools.notes.pro.adapters
+
+import android.content.Context
+import android.graphics.Color
+import android.text.SpannableString
+import android.text.style.StrikethroughSpan
+import android.view.Menu
+import android.view.View
+import android.view.ViewGroup
+import com.google.gson.Gson
+import com.google.gson.reflect.TypeToken
+import com.simplemobiletools.commons.activities.BaseSimpleActivity
+import com.simplemobiletools.commons.adapters.MyRecyclerViewAdapter
+import com.simplemobiletools.commons.extensions.beGoneIf
+import com.simplemobiletools.commons.extensions.getColoredDrawableWithColor
+import com.simplemobiletools.commons.extensions.isBlackAndWhiteTheme
+import com.simplemobiletools.commons.helpers.LOWER_ALPHA_INT
+import com.simplemobiletools.commons.helpers.SORT_BY_CUSTOM
+import com.simplemobiletools.commons.views.MyRecyclerView
+import com.simplemobiletools.notes.pro.R
+import com.simplemobiletools.notes.pro.extensions.config
+import com.simplemobiletools.notes.pro.models.ChecklistItem
+import com.simplemobiletools.notes.pro.models.Note
+import com.simplemobiletools.notes.pro.models.NoteType
+import kotlinx.android.synthetic.main.open_note_item.view.open_note_item_holder
+import kotlinx.android.synthetic.main.open_note_item.view.open_note_item_text
+import kotlinx.android.synthetic.main.open_note_item.view.open_note_item_title
+
+class OpenNoteAdapter(
+    activity: BaseSimpleActivity, var items: List<Note>,
+    recyclerView: MyRecyclerView, itemClick: (Any) -> Unit
+) : MyRecyclerViewAdapter(activity, recyclerView, itemClick) {
+    override fun getActionMenuId() = 0
+
+    override fun actionItemPressed(id: Int) {}
+
+    override fun getSelectableItemCount() = itemCount
+
+    override fun getIsItemSelectable(position: Int) = false
+
+    override fun getItemSelectionKey(position: Int) = items.getOrNull(position)?.id?.toInt()
+
+    override fun getItemKeyPosition(key: Int) = items.indexOfFirst { it.id?.toInt() == key }
+
+    override fun onActionModeCreated() {}
+
+    override fun onActionModeDestroyed() {}
+
+    override fun prepareActionMode(menu: Menu) {}
+
+    override fun onCreateViewHolder(parent: ViewGroup, viewType: Int): ViewHolder {
+        return createViewHolder(R.layout.open_note_item, parent)
+    }
+
+    override fun onBindViewHolder(holder: ViewHolder, position: Int) {
+        val item = items[position]
+        holder.bindView(item, true, false) { itemView, layoutPosition ->
+            setupView(itemView, item)
+        }
+        bindViewHolder(holder)
+    }
+
+    override fun getItemCount() = items.size
+
+    private fun setupView(view: View, note: Note) {
+        view.apply {
+            setupCard(open_note_item_holder)
+            open_note_item_title.apply {
+                text = note.title
+                setTextColor(properPrimaryColor)
+            }
+            val formattedText = note.getFormattedValue(context)
+            open_note_item_text.beGoneIf(formattedText.isNullOrBlank())
+            open_note_item_text.apply {
+                text = formattedText
+                setTextColor(textColor)
+            }
+        }
+    }
+
+    private fun View.setupCard(holder: View) {
+        if (context.isBlackAndWhiteTheme()) {
+            holder.setBackgroundResource(R.drawable.black_dialog_background)
+        } else {
+            val cardBackgroundColor = if (backgroundColor == Color.BLACK) {
+                Color.WHITE
+            } else {
+                Color.BLACK
+            }
+            val cardBackground = if (context.config.isUsingSystemTheme) {
+                R.drawable.dialog_you_background
+            } else {
+                R.drawable.dialog_bg
+            }
+            holder.background =
+                activity.resources.getColoredDrawableWithColor(cardBackground, cardBackgroundColor, LOWER_ALPHA_INT)
+        }
+    }
+
+    private fun Note.getFormattedValue(context: Context): CharSequence? {
+        return when (type) {
+            NoteType.TYPE_TEXT -> getNoteStoredValue(context)
+            NoteType.TYPE_CHECKLIST -> {
+                val checklistItemType = object : TypeToken<List<ChecklistItem>>() {}.type
+                var items = Gson().fromJson<List<ChecklistItem>>(getNoteStoredValue(context), checklistItemType) ?: listOf()
+                items = items.filter { it.title != null }.let {
+                    val sorting = context.config.sorting
+                    ChecklistItem.sorting = sorting
+                    if (ChecklistItem.sorting and SORT_BY_CUSTOM == 0) {
+                        it.sorted().let {
+                            if (context.config.moveDoneChecklistItems) {
+                                it.sortedBy { it.isDone }
+                            } else {
+                                it
+                            }
+                        }
+                    } else {
+                        it
+                    }
+                }
+                val linePrefix = "• "
+                val stringifiedItems = items.joinToString(separator = System.lineSeparator()) {
+                    "${linePrefix}${it.title}"
+                }
+
+                val formattedText = SpannableString(stringifiedItems)
+                var currentPos = 0
+                items.forEach { item ->
+                    currentPos += linePrefix.length
+                    if (item.isDone) {
+                        formattedText.setSpan(StrikethroughSpan(), currentPos, currentPos + item.title.length, 0)
+                    }
+                    currentPos += item.title.length
+                    currentPos += System.lineSeparator().length
+                }
+                formattedText
+            }
+        }
+    }
+}

app/src/main/kotlin/com/simplemobiletools/notes/pro/dialogs/OpenNoteDialog.kt

@@ -1,66 +1,53 @@
 package com.simplemobiletools.notes.pro.dialogs
 
-import android.app.Activity
 import android.view.View
-import android.view.ViewGroup
-import android.widget.RadioGroup
 import androidx.appcompat.app.AlertDialog
-import com.simplemobiletools.commons.extensions.*
+import androidx.recyclerview.widget.StaggeredGridLayoutManager
+import com.simplemobiletools.commons.activities.BaseSimpleActivity
+import com.simplemobiletools.commons.extensions.getAlertDialogBuilder
+import com.simplemobiletools.commons.extensions.setupDialogStuff
+import com.simplemobiletools.commons.views.AutoStaggeredGridLayoutManager
 import com.simplemobiletools.notes.pro.R
-import com.simplemobiletools.notes.pro.extensions.config
+import com.simplemobiletools.notes.pro.adapters.OpenNoteAdapter
 import com.simplemobiletools.notes.pro.helpers.NotesHelper
 import com.simplemobiletools.notes.pro.models.Note
-import kotlinx.android.synthetic.main.dialog_open_note.view.*
-import kotlinx.android.synthetic.main.open_note_item.view.*
+import kotlinx.android.synthetic.main.dialog_open_note.view.dialog_open_note_list
+import kotlinx.android.synthetic.main.dialog_open_note.view.new_note_fab
 
-class OpenNoteDialog(val activity: Activity, val callback: (checkedId: Long, newNote: Note?) -> Unit) {
+class OpenNoteDialog(val activity: BaseSimpleActivity, val callback: (checkedId: Long, newNote: Note?) -> Unit) {
     private var dialog: AlertDialog? = null
 
     init {
         val view = activity.layoutInflater.inflate(R.layout.dialog_open_note, null)
+
+        val noteItemWidth = activity.resources.getDimensionPixelSize(R.dimen.grid_note_item_width)
+        view.dialog_open_note_list.layoutManager = AutoStaggeredGridLayoutManager(noteItemWidth, StaggeredGridLayoutManager.VERTICAL)
+
         NotesHelper(activity).getNotes {
             initDialog(it, view)
         }
+    }
 
-        view.dialog_open_note_new_radio.setOnClickListener {
-            view.dialog_open_note_new_radio.isChecked = false
+    private fun initDialog(notes: List<Note>, view: View) {
+        view.dialog_open_note_list.adapter = OpenNoteAdapter(activity, notes, view.dialog_open_note_list) {
+            it as Note
+            callback(it.id!!, null)
+            dialog?.dismiss()
+        }
+
+        view.new_note_fab.setOnClickListener {
             NewNoteDialog(activity, setChecklistAsDefault = false) {
                 callback(0, it)
                 dialog?.dismiss()
             }
         }
-    }
 
-    private fun initDialog(notes: List<Note>, view: View) {
-        val textColor = activity.getProperTextColor()
-        notes.forEach {
-            activity.layoutInflater.inflate(R.layout.open_note_item, null).apply {
-                val note = it
-                open_note_item_radio_button.apply {
-                    text = note.title
-                    isChecked = note.id == activity.config.currentNoteId
-                    id = note.id!!.toInt()
-
-                    setOnClickListener {
-                        callback(note.id!!, null)
-                        dialog?.dismiss()
-                    }
+        activity.getAlertDialogBuilder()
+            .setNegativeButton(R.string.cancel, null)
+            .apply {
+                activity.setupDialogStuff(view, this, R.string.open_note) { alertDialog ->
+                    dialog = alertDialog
                 }
-                open_note_item_icon.apply {
-                    beVisibleIf(note.path.isNotEmpty())
-                    applyColorFilter(textColor)
-                    setOnClickListener {
-                        activity.toast(note.path)
-                    }
-                }
-                view.dialog_open_note_linear.addView(this, RadioGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.WRAP_CONTENT))
             }
-        }
-
-        activity.getAlertDialogBuilder().apply {
-            activity.setupDialogStuff(view, this, R.string.open_note) { alertDialog ->
-                dialog = alertDialog
-            }
-        }
     }
 }

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

@@ -1,45 +1,36 @@
 <?xml version="1.0" encoding="utf-8"?>
-<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
+<androidx.coordinatorlayout.widget.CoordinatorLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:app="http://schemas.android.com/apk/res-auto"
+    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/dialog_open_note_holder"
     android:layout_width="match_parent"
     android:layout_height="wrap_content">
 
-    <RelativeLayout
-        android:id="@+id/dialog_open_note_wrapper"
+    <androidx.core.widget.NestedScrollView
         android:layout_width="match_parent"
-        android:layout_height="wrap_content">
+        android:layout_height="match_parent"
+        android:layout_marginStart="@dimen/small_margin"
+        android:layout_marginTop="@dimen/medium_margin"
+        android:layout_marginEnd="@dimen/small_margin"
+        android:minHeight="@dimen/min_open_note_popup_height"
+        app:layout_constraintHeight_max="@dimen/max_open_note_popup_height">
 
-        <LinearLayout
-            android:id="@+id/dialog_open_note_linear"
+        <com.simplemobiletools.commons.views.MyRecyclerView
+            android:id="@+id/dialog_open_note_list"
             android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_marginTop="@dimen/medium_margin"
-            android:orientation="vertical" />
+            android:layout_height="match_parent"
+            tools:itemCount="10"
+            android:paddingBottom="@dimen/open_note_popup_bottom_extra_padding"
+            tools:listitem="@layout/open_note_item" />
 
-        <ImageView
-            android:id="@+id/dialog_open_note_divider"
-            android:layout_width="match_parent"
-            android:layout_height="1px"
-            android:layout_below="@+id/dialog_open_note_linear"
-            android:background="@color/divider_grey"
-            android:importantForAccessibility="no" />
+    </androidx.core.widget.NestedScrollView>
 
-        <RadioGroup
-            android:id="@+id/dialog_open_note_create_new"
-            android:layout_width="match_parent"
-            android:layout_height="wrap_content"
-            android:layout_below="@+id/dialog_open_note_divider"
-            android:paddingStart="@dimen/normal_margin"
-            android:paddingTop="@dimen/small_margin"
-            android:paddingEnd="@dimen/normal_margin"
-            android:paddingBottom="@dimen/small_margin">
+    <com.simplemobiletools.commons.views.MyFloatingActionButton
+        android:id="@+id/new_note_fab"
+        android:layout_width="@dimen/fab_size"
+        android:layout_height="@dimen/fab_size"
+        android:layout_gravity="bottom|end"
+        android:layout_margin="@dimen/activity_margin"
+        android:src="@drawable/ic_plus_vector" />
 
-            <com.simplemobiletools.commons.views.MyCompatRadioButton
-                android:id="@+id/dialog_open_note_new_radio"
-                android:layout_width="match_parent"
-                android:layout_height="wrap_content"
-                android:text="@string/create_new_note" />
-
-        </RadioGroup>
-    </RelativeLayout>
-</ScrollView>
+</androidx.coordinatorlayout.widget.CoordinatorLayout>

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

@@ -0,0 +1,31 @@
+<?xml version="1.0" encoding="utf-8"?>
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    android:id="@+id/open_new_note_item_holder"
+    android:layout_width="match_parent"
+    android:layout_height="wrap_content"
+    android:layout_margin="@dimen/medium_margin"
+    android:background="@drawable/widget_round_background"
+    android:orientation="vertical"
+    android:padding="@dimen/normal_margin">
+
+    <com.simplemobiletools.commons.views.MyTextView
+        android:id="@+id/open_new_note_item_title"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:ellipsize="end"
+        android:maxLines="2"
+        android:textSize="@dimen/big_text_size"
+        android:textStyle="bold"
+        android:layout_gravity="center"
+        android:textAlignment="center"
+        android:text="@string/create_new_note" />
+
+    <ImageView
+        android:id="@+id/open_new_note_icon"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:src="@drawable/ic_plus_vector"
+        android:layout_gravity="center"
+        android:importantForAccessibility="no" />
+
+</LinearLayout>

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

@@ -1,24 +1,31 @@
 <?xml version="1.0" encoding="utf-8"?>
-<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
+<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
+    xmlns:tools="http://schemas.android.com/tools"
     android:id="@+id/open_note_item_holder"
     android:layout_width="match_parent"
-    android:layout_height="match_parent"
-    android:paddingStart="@dimen/normal_margin"
-    android:paddingEnd="@dimen/normal_margin">
+    android:layout_height="wrap_content"
+    android:layout_margin="@dimen/medium_margin"
+    android:background="@drawable/widget_round_background"
+    android:orientation="vertical"
+    android:padding="@dimen/normal_margin">
 
-    <com.simplemobiletools.commons.views.MyCompatRadioButton
-        android:id="@+id/open_note_item_radio_button"
-        android:layout_width="match_parent"
-        android:layout_height="wrap_content"
-        android:layout_toStartOf="@+id/open_note_item_icon" />
-
-    <ImageView
-        android:id="@+id/open_note_item_icon"
+    <com.simplemobiletools.commons.views.MyTextView
+        android:id="@+id/open_note_item_title"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
-        android:layout_alignParentEnd="true"
-        android:layout_marginEnd="@dimen/small_margin"
-        android:padding="@dimen/small_margin"
-        android:src="@drawable/ic_attach_file_vector" />
+        android:ellipsize="end"
+        android:lines="1"
+        android:textSize="@dimen/big_text_size"
+        android:textStyle="bold"
+        tools:text="Title" />
 
-</RelativeLayout>
+    <com.simplemobiletools.commons.views.MyTextView
+        android:id="@+id/open_note_item_text"
+        android:layout_width="wrap_content"
+        android:layout_height="wrap_content"
+        android:layout_marginTop="@dimen/medium_margin"
+        android:ellipsize="end"
+        android:maxHeight="@dimen/grid_note_item_max_height"
+        tools:text="text" />
+
+</LinearLayout>

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

@@ -1,3 +1,8 @@
 <resources>
     <dimen name="checklist_image_size">56dp</dimen>
+    <dimen name="grid_note_item_width">150dp</dimen>
+    <dimen name="grid_note_item_max_height">300dp</dimen>
+    <dimen name="max_open_note_popup_height">500dp</dimen>
+    <dimen name="min_open_note_popup_height">200dp</dimen>
+    <dimen name="open_note_popup_bottom_extra_padding">76dp</dimen>
 </resources>