Skip to content

Commit f86c299

Browse files
committed
Update animations for format buttons to slide
1 parent 4c8e423 commit f86c299

File tree

7 files changed

+193
-340
lines changed

7 files changed

+193
-340
lines changed

aztec/src/main/kotlin/org/wordpress/aztec/toolbar/AztecToolbar.kt

Lines changed: 17 additions & 173 deletions
Original file line numberDiff line numberDiff line change
@@ -11,11 +11,8 @@ import android.view.MenuItem
1111
import android.view.View
1212
import android.view.animation.Animation
1313
import android.view.animation.AnimationUtils
14-
import android.widget.FrameLayout
15-
import android.widget.PopupMenu
14+
import android.widget.*
1615
import android.widget.PopupMenu.OnMenuItemClickListener
17-
import android.widget.Toast
18-
import android.widget.ToggleButton
1916
import org.wordpress.aztec.AztecText
2017
import org.wordpress.aztec.R
2118
import org.wordpress.aztec.TextFormat
@@ -33,40 +30,14 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
3330
private var isExpanded: Boolean = false
3431
private var isMediaModeEnabled: Boolean = false
3532

33+
private lateinit var buttonScroll: HorizontalScrollView
3634
private lateinit var buttonEllipsisCollapse: RippleToggleButton
3735
private lateinit var buttonEllipsisExpand: RippleToggleButton
38-
private lateinit var buttonHtml: RippleToggleButton
39-
private lateinit var buttonLink: RippleToggleButton
40-
private lateinit var buttonMore: RippleToggleButton
41-
// TODO: Uncomment when Page Break is to be added back as a feature.
42-
// private lateinit var buttonPage: RippleToggleButton
43-
private lateinit var buttonRule: RippleToggleButton
44-
private lateinit var buttonStrikethrough: RippleToggleButton
45-
private lateinit var buttonUnderline: RippleToggleButton
46-
private lateinit var buttonScaleInHtml: Animation
47-
private lateinit var buttonScaleOutHtml: Animation
48-
private lateinit var buttonScaleInLink: Animation
49-
private lateinit var buttonScaleOutLink: Animation
50-
private lateinit var buttonScaleInMore: Animation
51-
private lateinit var buttonScaleOutMore: Animation
52-
// TODO: Uncomment when Page Break is to be added back as a feature.
53-
// private lateinit var buttonScaleInPage: Animation
54-
// private lateinit var buttonScaleOutPage: Animation
55-
private lateinit var buttonScaleInRule: Animation
56-
private lateinit var buttonScaleOutRule: Animation
57-
private lateinit var buttonScaleInStrikethrough: Animation
58-
private lateinit var buttonScaleOutStrikethrough: Animation
59-
private lateinit var buttonScaleInUnderline: Animation
60-
private lateinit var buttonScaleOutUnderline: Animation
36+
private lateinit var layoutExpandedTranslateInRight: Animation
37+
private lateinit var layoutExpandedTranslateOutLeft: Animation
6138
private lateinit var ellipsisSpinLeft: Animation
6239
private lateinit var ellipsisSpinRight: Animation
63-
64-
private val DELAY_ANIM_IN_BUTTON_0: Long = 0 // value in milliseconds
65-
private val DELAY_ANIM_IN_BUTTON_1: Long = 100 // value in milliseconds
66-
private val DELAY_ANIM_IN_BUTTON_2: Long = 200 // value in milliseconds
67-
private val DELAY_ANIM_IN_BUTTON_3: Long = 300 // value in milliseconds
68-
private val DELAY_ANIM_IN_BUTTON_4: Long = 400 // value in milliseconds
69-
private val DELAY_ANIM_IN_BUTTON_5: Long = 500 // value in milliseconds
40+
private lateinit var layoutExpanded: LinearLayout
7041

7142
constructor(context: Context) : super(context) {
7243
initView(null)
@@ -560,106 +531,13 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
560531
}
561532

562533
private fun setAnimations() {
563-
// TODO: Use programmatic or better approach to button animations.
564-
565-
buttonScaleInHtml = AnimationUtils.loadAnimation(context, R.anim.scale_in)
566-
buttonScaleInHtml.startOffset = DELAY_ANIM_IN_BUTTON_5
567-
568-
buttonScaleOutHtml = AnimationUtils.loadAnimation(context, R.anim.scale_out)
569-
buttonScaleOutHtml.setAnimationListener(
570-
object : Animation.AnimationListener {
571-
override fun onAnimationEnd(animation: Animation) {
572-
buttonHtml.visibility = View.GONE
573-
}
574-
575-
override fun onAnimationRepeat(animation: Animation) {
576-
}
577-
578-
override fun onAnimationStart(animation: Animation) {
579-
}
580-
}
581-
)
582-
583-
buttonScaleInLink = AnimationUtils.loadAnimation(context, R.anim.scale_in)
584-
buttonScaleInLink.startOffset = DELAY_ANIM_IN_BUTTON_0
585-
586-
buttonScaleOutLink = AnimationUtils.loadAnimation(context, R.anim.scale_out)
587-
buttonScaleOutLink.setAnimationListener(
588-
object : Animation.AnimationListener {
589-
override fun onAnimationEnd(animation: Animation) {
590-
buttonLink.visibility = View.GONE
591-
}
592-
593-
override fun onAnimationRepeat(animation: Animation) {
594-
}
595-
596-
override fun onAnimationStart(animation: Animation) {
597-
}
598-
}
599-
)
600-
601-
buttonScaleInRule = AnimationUtils.loadAnimation(context, R.anim.scale_in)
602-
buttonScaleInRule.startOffset = DELAY_ANIM_IN_BUTTON_3
603-
604-
buttonScaleOutRule = AnimationUtils.loadAnimation(context, R.anim.scale_out)
605-
buttonScaleOutRule.setAnimationListener(
606-
object : Animation.AnimationListener {
607-
override fun onAnimationEnd(animation: Animation) {
608-
buttonRule.visibility = View.GONE
609-
}
610-
611-
override fun onAnimationRepeat(animation: Animation) {
612-
}
613-
614-
override fun onAnimationStart(animation: Animation) {
615-
}
616-
}
617-
)
618-
619-
buttonScaleInMore = AnimationUtils.loadAnimation(context, R.anim.scale_in)
620-
buttonScaleInMore.startOffset = DELAY_ANIM_IN_BUTTON_4
621-
622-
buttonScaleOutMore = AnimationUtils.loadAnimation(context, R.anim.scale_out)
623-
buttonScaleOutMore.setAnimationListener(
624-
object : Animation.AnimationListener {
625-
override fun onAnimationEnd(animation: Animation) {
626-
buttonMore.visibility = View.GONE
627-
}
628-
629-
override fun onAnimationRepeat(animation: Animation) {
630-
}
631-
632-
override fun onAnimationStart(animation: Animation) {
633-
}
634-
}
635-
)
636-
637-
buttonScaleInStrikethrough = AnimationUtils.loadAnimation(context, R.anim.scale_in)
638-
buttonScaleInStrikethrough.startOffset = DELAY_ANIM_IN_BUTTON_2
639-
640-
buttonScaleOutStrikethrough = AnimationUtils.loadAnimation(context, R.anim.scale_out)
641-
buttonScaleOutStrikethrough.setAnimationListener(
642-
object : Animation.AnimationListener {
643-
override fun onAnimationEnd(animation: Animation) {
644-
buttonStrikethrough.visibility = View.GONE
645-
}
646-
647-
override fun onAnimationRepeat(animation: Animation) {
648-
}
649-
650-
override fun onAnimationStart(animation: Animation) {
651-
}
652-
}
653-
)
654-
655-
buttonScaleInUnderline = AnimationUtils.loadAnimation(context, R.anim.scale_in)
656-
buttonScaleInUnderline.startOffset = DELAY_ANIM_IN_BUTTON_1
534+
layoutExpandedTranslateInRight = AnimationUtils.loadAnimation(context, R.anim.translate_in_right)
657535

658-
buttonScaleOutUnderline = AnimationUtils.loadAnimation(context, R.anim.scale_out)
659-
buttonScaleOutUnderline.setAnimationListener(
536+
layoutExpandedTranslateOutLeft = AnimationUtils.loadAnimation(context, R.anim.translate_out_left)
537+
layoutExpandedTranslateOutLeft.setAnimationListener(
660538
object : Animation.AnimationListener {
661539
override fun onAnimationEnd(animation: Animation) {
662-
buttonUnderline.visibility = View.GONE
540+
layoutExpanded.visibility = View.GONE
663541
}
664542

665543
override fun onAnimationRepeat(animation: Animation) {
@@ -682,12 +560,8 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
682560
}
683561

684562
override fun onAnimationStart(animation: Animation) {
685-
buttonLink.startAnimation(buttonScaleOutLink)
686-
buttonUnderline.startAnimation(buttonScaleOutUnderline)
687-
buttonStrikethrough.startAnimation(buttonScaleOutStrikethrough)
688-
buttonRule.startAnimation(buttonScaleOutRule)
689-
buttonMore.startAnimation(buttonScaleOutMore)
690-
buttonHtml.startAnimation(buttonScaleOutHtml)
563+
buttonScroll.smoothScrollTo(0, 0)
564+
layoutExpanded.startAnimation(layoutExpandedTranslateOutLeft)
691565
}
692566
}
693567
)
@@ -704,32 +578,16 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
704578
}
705579

706580
override fun onAnimationStart(animation: Animation) {
707-
buttonLink.visibility = View.VISIBLE
708-
buttonLink.startAnimation(buttonScaleInLink)
709-
buttonUnderline.visibility = View.VISIBLE
710-
buttonUnderline.startAnimation(buttonScaleInUnderline)
711-
buttonStrikethrough.visibility = View.VISIBLE
712-
buttonStrikethrough.startAnimation(buttonScaleInStrikethrough)
713-
buttonRule.visibility = View.VISIBLE
714-
buttonRule.startAnimation(buttonScaleInRule)
715-
buttonMore.visibility = View.VISIBLE
716-
buttonMore.startAnimation(buttonScaleInMore)
717-
buttonHtml.visibility = View.VISIBLE
718-
buttonHtml.startAnimation(buttonScaleInHtml)
581+
layoutExpanded.visibility = View.VISIBLE
582+
layoutExpanded.startAnimation(layoutExpandedTranslateInRight)
719583
}
720584
}
721585
)
722586
}
723587

724588
private fun setButtonViews() {
725-
buttonLink = findViewById(R.id.format_bar_button_link) as RippleToggleButton
726-
buttonUnderline = findViewById(R.id.format_bar_button_underline) as RippleToggleButton
727-
buttonStrikethrough = findViewById(R.id.format_bar_button_strikethrough) as RippleToggleButton
728-
buttonRule = findViewById(R.id.format_bar_button_horizontal_rule) as RippleToggleButton
729-
buttonMore = findViewById(R.id.format_bar_button_more) as RippleToggleButton
730-
// TODO: Uncomment when Page Break is to be added back as a feature.
731-
// buttonPage = findViewById(R.id.format_bar_button_page) as RippleToggleButton
732-
buttonHtml = findViewById(R.id.format_bar_button_html) as RippleToggleButton
589+
layoutExpanded = findViewById(R.id.format_bar_button_layout_expanded) as LinearLayout
590+
buttonScroll = findViewById(R.id.format_bar_button_scroll) as HorizontalScrollView
733591
buttonEllipsisCollapse = findViewById(R.id.format_bar_button_ellipsis_collapse) as RippleToggleButton
734592
buttonEllipsisExpand = findViewById(R.id.format_bar_button_ellipsis_expand) as RippleToggleButton
735593
}
@@ -774,27 +632,13 @@ class AztecToolbar : FrameLayout, OnMenuItemClickListener {
774632
}
775633

776634
private fun showCollapsedToolbar() {
777-
buttonLink.visibility = View.GONE
778-
buttonUnderline.visibility = View.GONE
779-
buttonStrikethrough.visibility = View.GONE
780-
buttonRule.visibility = View.GONE
781-
buttonMore.visibility = View.GONE
782-
// TODO: Uncomment when Page Break is to be added back as a feature.
783-
// buttonPage.visibility = View.GONE
784-
buttonHtml.visibility = View.GONE
635+
layoutExpanded.visibility = View.GONE
785636
buttonEllipsisCollapse.visibility = View.GONE
786637
buttonEllipsisExpand.visibility = View.VISIBLE
787638
}
788639

789640
private fun showExpandedToolbar() {
790-
buttonLink.visibility = View.VISIBLE
791-
buttonUnderline.visibility = View.VISIBLE
792-
buttonStrikethrough.visibility = View.VISIBLE
793-
buttonRule.visibility = View.VISIBLE
794-
buttonMore.visibility = View.VISIBLE
795-
// TODO: Uncomment when Page Break is to be added back as a feature.
796-
// buttonPage.visibility = View.VISIBLE
797-
buttonHtml.visibility = View.VISIBLE
641+
layoutExpanded.visibility = View.VISIBLE
798642
buttonEllipsisCollapse.visibility = View.VISIBLE
799643
buttonEllipsisExpand.visibility = View.GONE
800644
}

aztec/src/main/res/anim/scale_in.xml

Lines changed: 0 additions & 15 deletions
This file was deleted.

aztec/src/main/res/anim/scale_out.xml

Lines changed: 0 additions & 15 deletions
This file was deleted.
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<set
2+
xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:duration="@android:integer/config_mediumAnimTime"
4+
android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
5+
6+
<translate
7+
android:fromXDelta="-100%"
8+
android:fromYDelta="0%"
9+
android:toXDelta="0%"
10+
android:toYDelta="0%" >
11+
</translate>
12+
13+
</set>
Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<set
2+
xmlns:android="http://schemas.android.com/apk/res/android"
3+
android:duration="@android:integer/config_mediumAnimTime"
4+
android:interpolator="@android:anim/accelerate_decelerate_interpolator" >
5+
6+
<translate
7+
android:fromXDelta="0%"
8+
android:fromYDelta="0%"
9+
android:toXDelta="-100%"
10+
android:toYDelta="0%" >
11+
</translate>
12+
13+
</set>

0 commit comments

Comments
 (0)