finn/forgejo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Modify OAuth login ui and fix display name, iconurl related logic (#25030)

Browse source 
Close #24808 

Co-Authour @wxiaoguang @silverwind 

1. Most svgs are found from https://worldvectorlogo.com/ , and some are
from conversion of png to svg. (facebook and nextcloud). And also
changed `templates/user/settings/security/accountlinks.tmpl`.

2. Fixed display name and iconurl related logic

# After

<img width="1436" alt="Screen Shot 2023-06-05 at 14 09 05"
src="a5db39d8-1ab0-4676-82a4-fba60a1d1f84">

On mobile

<img width="378" alt="Screen Shot 2023-06-05 at 14 09 46"
src="71d0f51b-baac-4f48-8ca2-ae0e013bd62e">


user/settings/security/accountlinks (The dropdown might be improved
later)

<img width="973" alt="Screen Shot 2023-06-01 at 10 01 44"
src="27010e7e-2785-4fc5-8c49-b06621898f37">

---------

Co-authored-by: silverwind <me@silverwind.io>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
HesterG 2023-06-09 00:35:29 +08:00 • committed by GitHub
parent 9aaaf980f0
commit 63a429581c
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 80 additions and 270 deletions
Download patch file Download diff file Expand all files Collapse all files

4
web_src/css/base.css
View file

@ -468,6 +468,10 @@ a.label,
padding-bottom: 7.42px !important;
}
.ui.divider {
color: var(--color-text);
}
.ui.divider:not(.vertical,.horizontal) {
border-top-color: var(--color-secondary) !important;
border-bottom: none !important;

6
web_src/css/form.css
View file

@ -309,7 +309,8 @@ textarea:focus,
.user.reset.password form .inline.field > textarea,
.user.link-account form .inline.field > textarea,
.user.signin form .inline.field > textarea,
.user.signup form .inline.field > textarea {
.user.signup form .inline.field > textarea,
.oauth-login-link {
width: 50%;
}
}
@ -364,7 +365,8 @@ textarea:focus,
.user.reset.password form input,
.user.link-account form input,
.user.signin form input,
.user.signup form input {
.user.signup form input,
.oauth-login-link {
width: 100% !important;
}
}

1
web_src/fomantic/_site/globals/site.variables
View file

@ -7,3 +7,4 @@
@disabledOpacity: var(--opacity-disabled);
@variationPopupTooltip: false;
@linkHoverUnderline: underline;
@variationButtonSocial: false;

213
web_src/fomantic/build/semantic.css generated
View file

@ -439,219 +439,6 @@
border-bottom-right-radius: 0;
}
/*-------------------
Social
--------------------*/
/* Facebook */
.ui.facebook.button {
background-color: #3B5998;
color: #FFFFFF;
text-shadow: none;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.facebook.button:hover {
background-color: #304d8a;
color: #FFFFFF;
text-shadow: none;
}
.ui.facebook.button:active {
background-color: #2d4373;
color: #FFFFFF;
text-shadow: none;
}
/* Twitter */
.ui.twitter.button {
background-color: #1DA1F2;
color: #FFFFFF;
text-shadow: none;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.twitter.button:hover {
background-color: #0298f3;
color: #FFFFFF;
text-shadow: none;
}
.ui.twitter.button:active {
background-color: #0c85d0;
color: #FFFFFF;
text-shadow: none;
}
/* Google Plus */
.ui.google.plus.button {
background-color: #DD4B39;
color: #FFFFFF;
text-shadow: none;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.google.plus.button:hover {
background-color: #e0321c;
color: #FFFFFF;
text-shadow: none;
}
.ui.google.plus.button:active {
background-color: #c23321;
color: #FFFFFF;
text-shadow: none;
}
/* Linked In */
.ui.linkedin.button {
background-color: #0077B5;
color: #FFFFFF;
text-shadow: none;
}
.ui.linkedin.button:hover {
background-color: #00669c;
color: #FFFFFF;
text-shadow: none;
}
.ui.linkedin.button:active {
background-color: #005582;
color: #FFFFFF;
text-shadow: none;
}
/* YouTube */
.ui.youtube.button {
background-color: #FF0000;
color: #FFFFFF;
text-shadow: none;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.youtube.button:hover {
background-color: #e60000;
color: #FFFFFF;
text-shadow: none;
}
.ui.youtube.button:active {
background-color: #cc0000;
color: #FFFFFF;
text-shadow: none;
}
/* Instagram */
.ui.instagram.button {
background-color: #49769C;
color: #FFFFFF;
text-shadow: none;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.instagram.button:hover {
background-color: #3d698e;
color: #FFFFFF;
text-shadow: none;
}
.ui.instagram.button:active {
background-color: #395c79;
color: #FFFFFF;
text-shadow: none;
}
/* Pinterest */
.ui.pinterest.button {
background-color: #BD081C;
color: #FFFFFF;
text-shadow: none;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.pinterest.button:hover {
background-color: #ac0013;
color: #FFFFFF;
text-shadow: none;
}
.ui.pinterest.button:active {
background-color: #8c0615;
color: #FFFFFF;
text-shadow: none;
}
/* VK */
.ui.vk.button {
background-color: #45668E;
color: #FFFFFF;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.vk.button:hover {
background-color: #395980;
color: #FFFFFF;
}
.ui.vk.button:active {
background-color: #344d6c;
color: #FFFFFF;
}
/* WhatsApp */
.ui.whatsapp.button {
background-color: #25D366;
color: #FFFFFF;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.whatsapp.button:hover {
background-color: #19c55a;
color: #FFFFFF;
}
.ui.whatsapp.button:active {
background-color: #1da851;
color: #FFFFFF;
}
/* Telegram */
.ui.telegram.button {
background-color: #0088CC;
color: #FFFFFF;
background-image: none;
box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
}
.ui.telegram.button:hover {
background-color: #0077b3;
color: #FFFFFF;
}
.ui.telegram.button:active {
background-color: #006699;
color: #FFFFFF;
}
/*--------------
Icon
---------------*/