Merge pull request #388 from wordpress-mobile/issue/370-add-toolbar-t…

…oggle Issue/370 add toolbar toggle
wordpress-mobile · Jun 19, 2017 · 7411754 · 7411754
2 parents d94be69 + f86c299
commit 7411754
Show file tree

Hide file tree

Showing 14 changed files with 504 additions and 76 deletions.
diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt
@@ -9,11 +9,10 @@ import android.view.KeyEvent
 import android.view.LayoutInflater
 import android.view.MenuItem
 import android.view.View
-import android.widget.FrameLayout
-import android.widget.PopupMenu
+import android.view.animation.Animation
+import android.view.animation.AnimationUtils
+import android.widget.*
 import android.widget.PopupMenu.OnMenuItemClickListener
-import android.widget.Toast
-import android.widget.ToggleButton
 import org.wordpress.aztec.AztecText
 import org.wordpress.aztec.R
 import org.wordpress.aztec.TextFormat
@@ -27,18 +26,29 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
     private var listMenu: PopupMenu? = null
     private var sourceEditor: SourceViewEditText? = null
     private var dialogShortcuts: AlertDialog? = null
+    private var isAdvanced: Boolean = false
+    private var isExpanded: Boolean = false
     private var isMediaModeEnabled: Boolean = false
 
+    private lateinit var buttonScroll: HorizontalScrollView
+    private lateinit var buttonEllipsisCollapse: RippleToggleButton
+    private lateinit var buttonEllipsisExpand: RippleToggleButton
+    private lateinit var layoutExpandedTranslateInRight: Animation
+    private lateinit var layoutExpandedTranslateOutLeft: Animation
+    private lateinit var ellipsisSpinLeft: Animation
+    private lateinit var ellipsisSpinRight: Animation
+    private lateinit var layoutExpanded: LinearLayout
+
     constructor(context: Context) : super(context) {
-        initView()
+        initView(null)
     }
 
     constructor(context: Context, attrs: AttributeSet) : super(context, attrs) {
-        initView()
+        initView(attrs)
     }
 
     constructor(context: Context, attrs: AttributeSet, defStyleAttr: Int) : super(context, attrs, defStyleAttr) {
-        initView()
+        initView(attrs)
     }
 
     fun setToolbarListener(listener: AztecToolbarClickListener) {
@@ -255,6 +265,8 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         val restoredState = savedState.state
         toggleHtmlMode(restoredState.getBoolean("isSourceVisible"))
         enableMediaMode(restoredState.getBoolean("isMediaMode"))
+        isExpanded = restoredState.getBoolean("isExpanded")
+        setAdvancedState()
     }
 
     override fun onSaveInstanceState(): Parcelable {
@@ -263,6 +275,7 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         val bundle = Bundle()
         bundle.putBoolean("isSourceVisible", sourceEditor?.visibility == View.VISIBLE)
         bundle.putBoolean("isMediaMode", isMediaModeEnabled)
+        bundle.putBoolean("isExpanded", isExpanded)
         savedState.state = bundle
         return savedState
     }
@@ -283,8 +296,14 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         })
     }
 
-    private fun initView() {
-        View.inflate(context, R.layout.aztec_format_bar, this)
+    private fun initView(attrs: AttributeSet?) {
+        val styles = context.obtainStyledAttributes(attrs, R.styleable.AztecToolbar, 0, R.style.AztecToolbarStyle)
+        isAdvanced = styles.getBoolean(R.styleable.AztecToolbar_advanced, false)
+        styles.recycle()
+
+        val layout = if (isAdvanced) R.layout.aztec_format_bar_advanced else R.layout.aztec_format_bar_basic
+        View.inflate(context, layout, this)
+        setAdvancedState()
 
         for (toolbarAction in ToolbarAction.values()) {
             val button = findViewById(toolbarAction.buttonId)
@@ -314,8 +333,11 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         val actions = ArrayList<ToolbarAction>()
 
         for (action in ToolbarAction.values()) {
-            val view = findViewById(action.buttonId) as ToggleButton
-            if (view.isChecked) actions.add(action)
+            if (action != ToolbarAction.ELLIPSIS_COLLAPSE &&
+                action != ToolbarAction.ELLIPSIS_EXPAND) {
+                val view = findViewById(action.buttonId) as ToggleButton
+                if (view.isChecked) actions.add(action)
+            }
         }
 
         return actions
@@ -375,6 +397,8 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
             ToolbarAction.LIST -> listMenu?.show()
             ToolbarAction.LINK -> editor!!.showLinkDialog()
             ToolbarAction.HTML -> aztecToolbarListener?.onToolbarHtmlModeClicked()
+            ToolbarAction.ELLIPSIS_COLLAPSE -> animateToolbarCollapse()
+            ToolbarAction.ELLIPSIS_EXPAND -> animateToolbarExpand()
             else -> {
                 Toast.makeText(context, "Unsupported action", Toast.LENGTH_SHORT).show()
             }
@@ -424,6 +448,34 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         return null
     }
 
+    fun setExpanded(expanded: Boolean) {
+        isExpanded = expanded
+        setAdvancedState()
+    }
+
+    private fun animateToolbarCollapse() {
+        buttonEllipsisCollapse.startAnimation(ellipsisSpinLeft)
+        isExpanded = false
+    }
+
+    private fun animateToolbarExpand() {
+        buttonEllipsisExpand.startAnimation(ellipsisSpinRight)
+        isExpanded = true
+    }
+
+    private fun setAdvancedState() {
+        if (isAdvanced) {
+            setButtonViews()
+            setAnimations()
+
+            if (isExpanded) {
+                showExpandedToolbar()
+            } else {
+                showCollapsedToolbar()
+            }
+        }
+    }
+
     private fun selectHeadingMenuItem(textFormats: ArrayList<TextFormat>) {
         if (textFormats.size == 0) {
             // Select paragraph by default.
@@ -478,6 +530,68 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         }
     }
 
+    private fun setAnimations() {
+        layoutExpandedTranslateInRight = AnimationUtils.loadAnimation(context, R.anim.translate_in_right)
+
+        layoutExpandedTranslateOutLeft = AnimationUtils.loadAnimation(context, R.anim.translate_out_left)
+        layoutExpandedTranslateOutLeft.setAnimationListener(
+            object : Animation.AnimationListener {
+                override fun onAnimationEnd(animation: Animation) {
+                    layoutExpanded.visibility = View.GONE
+                }
+
+                override fun onAnimationRepeat(animation: Animation) {
+                }
+
+                override fun onAnimationStart(animation: Animation) {
+                }
+            }
+        )
+
+        ellipsisSpinLeft = AnimationUtils.loadAnimation(context, R.anim.spin_left_90)
+        ellipsisSpinLeft.setAnimationListener(
+            object : Animation.AnimationListener {
+                override fun onAnimationEnd(animation: Animation) {
+                    buttonEllipsisCollapse.visibility = View.GONE
+                    buttonEllipsisExpand.visibility = View.VISIBLE
+                }
+
+                override fun onAnimationRepeat(animation: Animation) {
+                }
+
+                override fun onAnimationStart(animation: Animation) {
+                    buttonScroll.smoothScrollTo(0, 0)
+                    layoutExpanded.startAnimation(layoutExpandedTranslateOutLeft)
+                }
+            }
+        )
+
+        ellipsisSpinRight = AnimationUtils.loadAnimation(context, R.anim.spin_right_90)
+        ellipsisSpinRight.setAnimationListener(
+            object : Animation.AnimationListener {
+                override fun onAnimationEnd(animation: Animation) {
+                    buttonEllipsisCollapse.visibility = View.VISIBLE
+                    buttonEllipsisExpand.visibility = View.GONE
+                }
+
+                override fun onAnimationRepeat(animation: Animation) {
+                }
+
+                override fun onAnimationStart(animation: Animation) {
+                    layoutExpanded.visibility = View.VISIBLE
+                    layoutExpanded.startAnimation(layoutExpandedTranslateInRight)
+                }
+            }
+        )
+    }
+
+    private fun setButtonViews() {
+        layoutExpanded = findViewById(R.id.format_bar_button_layout_expanded) as LinearLayout
+        buttonScroll = findViewById(R.id.format_bar_button_scroll) as HorizontalScrollView
+        buttonEllipsisCollapse = findViewById(R.id.format_bar_button_ellipsis_collapse) as RippleToggleButton
+        buttonEllipsisExpand = findViewById(R.id.format_bar_button_ellipsis_expand) as RippleToggleButton
+    }
+
     private fun setHeadingMenu(view: View) {
         headingMenu = PopupMenu(context, view)
         headingMenu?.setOnMenuItemClickListener(this)
@@ -517,6 +631,18 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
         }
     }
 
+    private fun showCollapsedToolbar() {
+        layoutExpanded.visibility = View.GONE
+        buttonEllipsisCollapse.visibility = View.GONE
+        buttonEllipsisExpand.visibility = View.VISIBLE
+    }
+
+    private fun showExpandedToolbar() {
+        layoutExpanded.visibility = View.VISIBLE
+        buttonEllipsisCollapse.visibility = View.VISIBLE
+        buttonEllipsisExpand.visibility = View.GONE
+    }
+
     private fun toggleHtmlMode(isHtmlMode: Boolean) {
         ToolbarAction.values().forEach { action ->
             if (action == ToolbarAction.HTML) {

diff --git a/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt b/aztec/src/main/kotlin/org/wordpress/aztec/toolbar/ToolbarAction.kt
@@ -20,7 +20,9 @@ enum class ToolbarAction constructor(val buttonId: Int, val actionType: ToolbarA
     HORIZONTAL_RULE(R.id.format_bar_button_horizontal_rule, ToolbarActionType.LINE_BLOCK, TextFormat.FORMAT_HORIZONTAL_RULE),
     MORE(R.id.format_bar_button_more, ToolbarActionType.LINE_BLOCK, TextFormat.FORMAT_MORE),
     PAGE(R.id.format_bar_button_page, ToolbarActionType.LINE_BLOCK, TextFormat.FORMAT_PAGE),
-    HTML(R.id.format_bar_button_html, ToolbarActionType.OTHER, null);
+    HTML(R.id.format_bar_button_html, ToolbarActionType.OTHER, null),
+    ELLIPSIS_COLLAPSE(R.id.format_bar_button_ellipsis_collapse, ToolbarActionType.OTHER, null),
+    ELLIPSIS_EXPAND(R.id.format_bar_button_ellipsis_expand, ToolbarActionType.OTHER, null);
 
     companion object {
         fun getToolbarActionForStyle(style: TextFormat): ToolbarAction? {

diff --git a/aztec/src/main/res/anim/interpolator_overshoot.xml b/aztec/src/main/res/anim/interpolator_overshoot.xml
@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<overshootInterpolator
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:tension="3.5" >
+</overshootInterpolator>
diff --git a/aztec/src/main/res/anim/spin_left_90.xml b/aztec/src/main/res/anim/spin_left_90.xml
@@ -0,0 +1,13 @@
+<set
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:interpolator="@android:anim/overshoot_interpolator" >
+
+    <rotate
+        android:fromDegrees="0"
+        android:pivotX="50%"
+        android:pivotY="50%"
+        android:toDegrees="-90" >
+    </rotate>
+
+</set>
diff --git a/aztec/src/main/res/anim/spin_right_90.xml b/aztec/src/main/res/anim/spin_right_90.xml
@@ -0,0 +1,13 @@
+<set
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_shortAnimTime"
+    android:interpolator="@android:anim/overshoot_interpolator" >
+
+    <rotate
+        android:fromDegrees="0"
+        android:pivotX="50%"
+        android:pivotY="50%"
+        android:toDegrees="90" >
+    </rotate>
+
+</set>
diff --git a/aztec/src/main/res/anim/translate_in_right.xml b/aztec/src/main/res/anim/translate_in_right.xml
@@ -0,0 +1,13 @@
+<set
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_mediumAnimTime"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
+
+    <translate
+        android:fromXDelta="-100%"
+        android:fromYDelta="0%"
+        android:toXDelta="0%"
+        android:toYDelta="0%" >
+    </translate>
+
+</set>
diff --git a/aztec/src/main/res/anim/translate_out_left.xml b/aztec/src/main/res/anim/translate_out_left.xml
@@ -0,0 +1,13 @@
+<set
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:duration="@android:integer/config_mediumAnimTime"
+    android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
+
+    <translate
+        android:fromXDelta="0%"
+        android:fromYDelta="0%"
+        android:toXDelta="-100%"
+        android:toYDelta="0%" >
+    </translate>
+
+</set>
diff --git a/aztec/src/main/res/drawable/format_bar_button_ellipsis_horizontal.xml b/aztec/src/main/res/drawable/format_bar_button_ellipsis_horizontal.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="48dp"
+    android:width="48dp"
+    android:viewportHeight="48"
+    android:viewportWidth="48" >
+
+    <!-- @color/grey_darken_20 -->
+    <path
+        android:fillColor="#ff4f748e"
+        android:pathData="M18.5,24c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2s1-2.2,2.2-2.2S18.5,22.8,18.5,24z M31.6,21.8c-1.2,0-2.2,1-2.2,2.2 s1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2S32.8,21.8,31.6,21.8z M24,21.8c-1.2,0-2.2,1-2.2,2.2s1,2.2,2.2,2.2c1.2,0,2.2-1,2.2-2.2 S25.2,21.8,24,21.8z" >
+    </path>
+
+</vector>
diff --git a/aztec/src/main/res/drawable/format_bar_button_ellipsis_vertical.xml b/aztec/src/main/res/drawable/format_bar_button_ellipsis_vertical.xml
@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="utf-8"?>
+
+<vector
+    xmlns:android="http://schemas.android.com/apk/res/android"
+    android:height="48dp"
+    android:width="48dp"
+    android:viewportHeight="48"
+    android:viewportWidth="48" >
+
+    <!-- @color/grey_darken_20 -->
+    <path
+        android:fillColor="#ff4f748e"
+        android:pathData="M23.9,29.4c1.2,0,2.2,1,2.2,2.2c0,1.2-1,2.2-2.2,2.2s-2.2-1-2.2-2.2C21.7,30.4,22.7,29.4,23.9,29.4z M21.7,16.3 c0,1.2,1,2.2,2.2,2.2s2.2-1,2.2-2.2c0-1.2-1-2.2-2.2-2.2S21.7,15.1,21.7,16.3z M21.7,23.9c0,1.2,1,2.2,2.2,2.2s2.2-1,2.2-2.2 s-1-2.2-2.2-2.2S21.7,22.7,21.7,23.9z" >
+    </path>
+
+</vector>