Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Refactor footer icon with animation #195

Merged
merged 7 commits into from
Mar 21, 2018
Merged

Refactor footer icon with animation #195

merged 7 commits into from
Mar 21, 2018

Conversation

sli1989
Copy link
Collaborator

@sli1989 sli1989 commented Mar 21, 2018 •
edited
Loading

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?

  • Bugfix.
  • Feature.
  • Code style update (formatting, local variables).
  • Refactoring (no functional changes, no api changes).
  • Build related changes.
  • CI related changes.
  • Documentation content changes.
  • Other... Please describe:

What is the new behavior?

thanks @reuixiy at first.

before:

1

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"

2

How to use?

In NexT _config.yml:

...

Does this PR introduce a breaking change?

  • Yes.
  • No.

@ivan-nginx
Copy link
Member

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
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018

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

@ivan-nginx
Copy link
Member

ivan-nginx commented Mar 21, 2018 •
edited
Loading

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
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018 •
edited
Loading

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

@ivan-nginx
Copy link
Member

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

@sli1989
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018

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

@ivan-nginx
Copy link
Member

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

@sli1989
Copy link
Collaborator Author

sli1989 commented Mar 21, 2018 •
edited
Loading

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

1

it's hard to choose, all seem fine.

ivan-nginx
ivan-nginx reviewed Mar 21, 2018
View reviewed changes
source/css/_common/components/footer/footer.styl Outdated
.with-love {
display: inline-block;
margin: 0 5px;
color: rgb(255, 113, 168);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think need just to remove any color.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Maybe, yeah. Why not?

Copy link
Member

@ivan-nginx ivan-nginx Mar 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#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 
...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@ivan-nginx ivan-nginx added this to the v6.0.7 milestone Mar 21, 2018
ivan-nginx
ivan-nginx reviewed Mar 21, 2018
View reviewed changes
_config.yml Outdated
@@ -64,6 +64,10 @@ footer:

# Icon between year and copyright info.
icon: user
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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"
...

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I do it many times, and bad indent still.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more. 

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

Copy link
Collaborator Author

@sli1989 sli1989 Mar 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

@ivan-nginx ivan-nginx Mar 21, 2018 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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. 😄

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

@sli1989 sli1989 changed the title Replace footer icon with beating heart Refactor footer icon with animation Mar 21, 2018
@ivan-nginx ivan-nginx modified the milestones: v6.0.7, v6.1.0 Mar 21, 2018
@sli1989 sli1989 merged commit 089d00e into theme-next:master Mar 21, 2018
@sli1989 sli1989 deleted the footer-icon branch March 21, 2018 13:39
geekrainy pushed a commit to geekrainy/theme-next-geekrainy that referenced this pull request Apr 28, 2018
@geekrainy
Refactor footer icon with animation (theme-next#195)
82687a4 
* 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.
tongluyang pushed a commit to tongluyang/hexo-theme-next that referenced this pull request Nov 19, 2019
Refactor footer icon with animation (theme-next#195)
1903c53 
* 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.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ivan-nginx ivan-nginx ivan-nginx approved these changes

Assignees
No one assigned
Labels
💥 Breaking Change ⭐ Feature
Projects
None yet
Milestone
v6.1.0
Development

Successfully merging this pull request may close these issues.
2 participants
@sli1989 @ivan-nginx