Refactor footer icon with animation by sli1989 · Pull Request #195 · theme-next/hexo-theme-next

sli1989 · 2018-03-21T05:18:13Z

PR Checklist

Please check if your PR fulfills the following requirements:

The commit message follows our guidelines.
Tests for the changes have been added (for bug fixes / features).
- Muse | Mist have been tested.
- Pisces | Gemini have been tested.
Docs have been added / updated (for bug fixes / features).

PR Type

What kind of change does this PR introduce?

What is the new behavior?

thanks @reuixiy at first.

before:

after:

Add the enable option icon_animated of icon animation.
Add the selection of icon's color.

   # Icon between year and copyright info.
-  icon: user
+  icon: 
+    # Icon name in fontawesome, see: https://fontawesome.com/v4.7.0/icons
+    # `heart` is recommended with animation in red (#ff0000).
+    name: heart
+    # If you want to animate the icon, set it to true.
+    animated: true
+    # Change the color of icon, using Hex Code.
+    color: "#ff0000"

Screens with this changes: N/A
Link to demo site with this changes: http://test.saili.science/posts/codeblock-test/

How to use?

In NexT _config.yml:

...

Does this PR introduce a breaking change?

Yes.
No.

ivan-nginx · 2018-03-21T08:14:09Z

hexo-theme-next/_config.yml

Lines 60 to 66 in 52d3c02

    
           footer: 
        
             # Specify the date when the site was setup. 
        
             # If not defined, current year will be used. 
        
             #since: 2015 
        
             # Icon between year and copyright info. 
        
             icon: user

Can we add new setting here? footer.icon.animated for example.

sli1989 · 2018-03-21T08:22:46Z

Yes, it canbe moved.
The default is icon: heart still? I think it's weird animated with user.

ivan-nginx · 2018-03-21T08:28:59Z

I think need to set default to heart. But, animation will work with other icons? With user, for example?

And it is important to use red color in this icon? MB better to use gray for standart vision?

sli1989 · 2018-03-21T10:12:57Z

~~Any~~ Every icon can be animated. So, set it to heart in black?

ivan-nginx · 2018-03-21T10:13:59Z

I think need to see it, how it will in standart gray style?

sli1989 · 2018-03-21T10:17:44Z

updated in http://test.saili.science/posts/codeblock-test/ .

ivan-nginx · 2018-03-21T10:19:51Z

Yeah, i think it's better when red color. Are u agree with this?

sli1989 · 2018-03-21T10:22:15Z

Yeah, red heart, such seductive... it's rgb(255, 113, 168) above, not red...just use it or pick another color?

it's hard to choose, all seem fine.

ivan-nginx · 2018-03-21T10:38:45Z

source/css/_common/components/footer/footer.styl

 .with-love {
  display: inline-block;
  margin: 0 5px;
+  color: rgb(255, 113, 168);


I think need just to remove any color.

Or like border-radius offer a custom define...haha

Maybe, yeah. Why not?

#195 (comment)

footer: # Specify the date when the site was setup. # If not defined, current year will be used. #since: 2015 # Icon between year and copyright info. icon: user animated: true ...

I don't know how to get rgb string...
i just remove the color setting?

About color — this is another talk.

I'm talking for now about animated option: to turn off/on it. So, i think by default it must set on false, but if anybody want, he can to enable this option and icon will animate.

Add animated under icon need to refactor the footer.icon, so i just add paralleling setting.

ivan-nginx · 2018-03-21T11:52:35Z

_config.yml

@@ -64,6 +64,10 @@ footer:

  # Icon between year and copyright info.
  icon: user


2 spaces indents here, please:

footer: ... # Icon between year and copyright info. icon: heart # If you want to animate the Icon, set it to true. animated: false # Change the color of icon, using Hex Code. color: "#808080" ...

I do it many times, and bad indent still.

footer.icon.animated not work or what u mean?

footer: # Specify the date when the site was setup. # If not defined, current year will be used. #since: 2015 # Icon between year and copyright info. icon: heart # If you want to animate the icon, set it to true. animated: false # Change the color of icon, using Hex Code. color: "#808080"

YAMLException: bad indentation of a mapping entry at line 68, column 5:
animated: false

Now that user can change the icon & it's animation, I think it's better to set icon: user as default officially.

YAMLException: bad indentation of a mapping entry at line 68, column 5:
animated: false

Oh, of course it will be error, because icon: heart already setted up. Need to something like this:

footer: ... # Icon between year and copyright info. icon: image: heart # If you want to animate the Icon, set it to true. animated: false # Change the color of icon, using Hex Code. color: "#808080" ...

think it's better to set icon: user as default officially.

Default was always heart. Later i changed it to user. 😄

In this way, need to refactor footer.icon in footer.swig, are you sure?

Yes, need to refactor and it then will breaking changes. So, version must be 6.1 in next NexT release.

* Replace footer icon with beating heart * Add enable option in footer icon animation * Refactor footer icon * Rename the Animate class * Update _config.yml * Change `Animate` to lowercase. * Change `Animate` to lowercase.

Replace footer icon with beating heart

233bca9

ivan-nginx approved these changes Mar 21, 2018

View reviewed changes

ivan-nginx reviewed Mar 21, 2018

View reviewed changes

ivan-nginx added this to the v6.0.7 milestone Mar 21, 2018

ivan-nginx added the ⭐ Feature label Mar 21, 2018

Add enable option in footer icon animation

c4cbdf0

ivan-nginx reviewed Mar 21, 2018

View reviewed changes

Refactor footer icon

fcf4c10

sli1989 changed the title ~~Replace footer icon with beating heart~~ Refactor footer icon with animation Mar 21, 2018

Rename the Animate class

9fc4156

ivan-nginx modified the milestones: v6.0.7, v6.1.0 Mar 21, 2018

ivan-nginx added 3 commits March 21, 2018 16:07

Update _config.yml

a3b6912

Change Animate to lowercase.

fefd38f

Change Animate to lowercase.

8d83028

ivan-nginx added the 💥 Breaking Change label Mar 21, 2018

sli1989 merged commit 089d00e into theme-next:master Mar 21, 2018

sli1989 deleted the footer-icon branch March 21, 2018 13:39

		@@ -64,6 +64,10 @@ footer:

		# Icon between year and copyright info.
		icon: user

Conversation

sli1989 commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

PR Checklist

PR Type

What is the new behavior?

How to use?

Does this PR introduce a breaking change?

Uh oh!

ivan-nginx commented Mar 21, 2018

Uh oh!

sli1989 commented Mar 21, 2018

Uh oh!

ivan-nginx commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sli1989 commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ivan-nginx commented Mar 21, 2018

Uh oh!

sli1989 commented Mar 21, 2018

Uh oh!

ivan-nginx commented Mar 21, 2018

Uh oh!

sli1989 commented Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivan-nginx Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sli1989 Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ivan-nginx Mar 21, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

sli1989 commented Mar 21, 2018 •

edited

Loading

ivan-nginx commented Mar 21, 2018 •

edited

Loading

sli1989 commented Mar 21, 2018 •

edited

Loading

sli1989 commented Mar 21, 2018 •

edited

Loading

ivan-nginx Mar 21, 2018 •

edited

Loading

sli1989 Mar 21, 2018 •

edited

Loading

ivan-nginx Mar 21, 2018 •

edited

Loading