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] Optimize the UI of OpenDigger labels #885

Open
frank-zsy opened this issue Oct 8, 2024 · 2 comments · May be fixed by #886
Open

[Refactor] Optimize the UI of OpenDigger labels #885

frank-zsy opened this issue Oct 8, 2024 · 2 comments · May be fixed by #886
Assignees
@tyn1998
Milestone
1.9.10

Comments

@frank-zsy
Copy link
Contributor

Description

In the new version of HyperCRX, the OpenDigger labels in the sidebar receives some feedbacks in the WeChat group.

I think we can optimize the UI according to the discussion, the new UI may look like this:
image

The modification includes:

  • Remove the OpenDigger logo and Labels text.
  • Append the labels behind the original tags of GitHub repos. Should also consider the repos without tags on GitHub.
  • Add a small logo in front of every OpenDigger label. The image should not be the image of OpenDigger original logo which is really large like 10KB, we could convert the image to a 18px image and embed the base64 code to reduce the network calls.
  • Add a hyperlink to every label to OpenDigger's website, which is https://open-digger.cn

A reference of the styles of the item:

The image should have a style: width: 18px; vertical-align: middle; border-radius: 50% and should remove the padding-left of the parent span.
@frank-zsy
Copy link
Contributor Author

Here is a 36px logo in base64 encoding:

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAkCAMAAADW3miqAAABtlBMVEX///8eof8boP8coP8an/8dof8aoP+Kzv8eof8eof8eof8eof8eof8eof8doP+Dy/8jo/8io/9Zuv+Mz/8eof+FzP/1+//A5f/D5v/9/v9du/8hov/8/v8ko/81q//4/P8mpP+Y1P8tp/8opf/F5/+Lz//Y7/+Nz//d8f8Yn/9pwP88rv9auv+U0v+64v8gov+R0f+w3v8yqf+j2P/c8P+a1f+Lzv/+//9Otf/7/f+34f+e1v9Ntf/0+v+x3v8+rv8fov/T7f/n9f8Zn/9jvv/u+P9/yv+S0f/z+v+t3f9Rtv8xqf+Byv9evP/W7v8sp/8rpv/I6P+44f9Gsv83rP8ppv8npf/+/v/y+f9swv9qwf/L6f+Ey/+By//6/f+24P/x+f/k9P+j2f/g8v+d1v9VuP9Fsf8zqv8wqP+GzP+Cy/9UuP8wqf+Jzv/2+//0+/9fvP+EzP+/5P+24f+r3P9Tt/86rf/o9f85rP+u3f+q2/8Ynv9Js/9/yf88rf9uwv+P0P/5/P/m9f/l9P/i8/+f1/8Xnv9Qtv9Ks/9Hsv9Br/93xv9zxP9uw/9kvv8kpP9gvf9HcEysAMmpAAAAknRSTlP//////////8b0+KIMZv///////xn/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////AMUw4HUAAAHcSURBVDjLjZT1VxtBEMdn5eI57hJSYoSEBAlepHiB0uJWwaVI0Rp1AQoVisv9x+xy5CV5IWTnh307e5/bnd35zoCm2ewmM0pjZpPdpmmgZVst6A6zWLM1sFlRBrPawG7JBFnsYEIZzQTmzJAZkIAlQtiAuVFK0kJSbpnLaCwocnY9blNxGii3/B4APCks7vE8euhVyG0QdnCmoyW/v6/XD601ASJJKZDBxRhwdsp4S+1uBHCXBkd9GEvJOz3g0Ab1/fLufH7Hps+mIi+rvCMkCTJyKIuqX7e/bK5PAIxX5QDkuRvkVMiACHsEhX2Hwpk5Nj4dlmIQiUPXfzjZvHF2mo1LAVmHiPK9PQmiJR7mhFoWAF5V6seRN81ZRA88tpMjjzn3UQ00reoxydVNEMJ0IBXyhZrXbm5XWQfw7yB69DfxOD9z6pQVVdbfSa6uZQvFZ+HBIYAPNB64ZzKWaUBSmN8XfrtPBo0fd/9TTJAU5Eu1L0g8LeR5xXuO1X+L/Nw7PXccBunreea65MTckbHltz8ifzg4tD9weewLf2LTivzkBEsYt6sFHCqK0s7oRbefJ5ikSsWgS6XhRiqLAXKb6BQB0YnJV6gQ7iopoeIUKnOhhiHUeoSamEg7vAIbGEZaYScUbgAAAABJRU5ErkJggg==

Just use image tag with above content as src, the image should show.

@tyn1998 tyn1998 added this to the 1.9.10 milestone Oct 8, 2024
@tyn1998
Copy link
Member

tyn1998 commented Oct 8, 2024

I would like a try :)

@tyn1998 tyn1998 self-assigned this Oct 8, 2024
@tyn1998 tyn1998 linked a pull request Oct 8, 2024 that will close this issue
Open
10 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@tyn1998 tyn1998

Labels
None yet
Projects
None yet
Milestone
1.9.10
Development

Successfully merging a pull request may close this issue.

feat: improve side label UI tyn1998/hypertrons-crx
2 participants
@frank-zsy @tyn1998