[ui] make more icon types onto the time-line like github

[a1012112796]

• Gitea version (or commit ref):
• Git version:
• Operating system:
• Database (use [x]):
  • PostgreSQL
  • MySQL
  • MSSQL
  • SQLite
• Can you reproduce the bug at https://try.gitea.io:
  • Yes (provide example URL)
  • No
  • Not relevant
• Log gist:

Description

Hello! I found a problem that now on gitea's time-line , we can only make x, eye circle-slash on it , but lock , key , and many other types can't on it. which is doesn't look good enough. I think It will be fun if we can make them onto the time-line. also it will be more good if we can make them style like github , which means all icons except dot combine whith a circle. but I have no idea about how to do them , so add this issue to find help. Thanks.

Screenshots

---

[silverwind]

Yes, they need to move to the left and have a background added in the same color as the line but so far I've been unable to figure out what is causing some of these timeline entries to offset around 40px to the right.

[Sorien]

@silverwind nothing, just green dots (svg.octicon-primitive-dot) are moved 35px to left

.svg.octicon-primitive-dot {
    margin-top: -1px;
    margin-left: -35.5px;
    margin-right: -1px;
    height: 30px;
    color: #6cc644;

@a1012112796

adding this offset to .svg will fix timeline

.repository.view.issue .comment-list .event .svg {
    width: 30px;
    float: left;
    text-align: center;
    margin-left: -35.5px; // this line
}

background can be added with

.repository.view.issue .comment-list .event::before {
    content: "";
    margin-left: -36px;
    float: left;
    border-radius: 15px;
    line-height: 30px;
    background-color: whitesmoke;
}

you will have to center svg icons with

.repository.view.issue .comment-list .event .svg {
    width: 30px;
    height: 30px;
    float: left;
    text-align: center;
    line-height: 30px;
    margin-left: -36px;
    padding: 7px;
}

and remove changed hight of some other svg icons like

.repository.view.issue .comment-list .event .svg.octicon-bookmark {
    margin-top: 2px;
    margin-left: -35.5px;
    margin-right: -1px;
    /* height: 25px; */
}

and it will looks like

[silverwind]

@Sorien ah, I totally missed that rule, thanks. Those screenshots do look great, exactly what I had in mind.

[a1012112796]

@Sorien Hello, Thanks for your work. I think it's so great although I can't fully understand because of my knowledge lack. please make a PR to change it, then we can use more type icons on it, which is a very attractive thing. Thanks for your works again.

[Sorien]

@a1012112796 pls can you look at opened PR #10890 couse i can't test it right now :/