realaravinth/forgejo-federation
1
0
Fork 0
Code Issues Pull requests 6 Projects Releases Packages Wiki Activity

Rename ".button-link" to ".button-ghost" (#24670)

Browse source 
Mainstream frameworks:

* https://getbootstrap.com/docs/5.0/components/buttons/
* https://primer.style/css/components/buttons#link-button
* https://nextui.org/docs/components/button#light
* https://coreui.io/react/docs/components/button/
* https://design-system.hpe.design/components/button
* https://chakra-ui.com/docs/components/button/usage#button-variants
* https://mui.com/material-ui/react-button/

All (at least most?) of them make "link" button have "underline" when
hovering.

So, a "link" is a "link", when it's hovered, it should have the
underline by default. To be strict, Gitea's "button-link" is not
link-style, so it needs a better name.

Actually, for the "plain" button, there are some different approaches:

* Some frameworks just make "default" button as no style (not feasible
in Gitea/Fomantic UI)
* Primer uses "btn-invisible", which is not a proper word
* NextUI uses "light", which is not a proper word, either ...
* CoreUI / ChakraUI uses "ghost", I think this name is acceptable.


Welcome to suggest better name for such button.

Or, we just call it ".button-plain" or ".button-simple", in fact I
prefer such simple and clear name.
This commit is contained in:
wxiaoguang 2023-05-12 22:58:44 +08:00 committed by GitHub
parent bfa0fc2c98
commit ec8ea58dbe
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 5 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
templates/user/notification/notification_div.tmpl
View file

@ -82,7 +82,7 @@
{{$.CsrfTokenHtml}} {{$.CsrfTokenHtml}}
<input type="hidden" name="notification_id" value="{{.ID}}"> <input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="pinned"> <input type="hidden" name="status" value="pinned">
<button class="ui mini button button-link" title='{{$.locale.Tr "notification.pin"}}' <button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.pin"}}'
data-url="{{AppSubUrl}}/notifications/status" data-url="{{AppSubUrl}}/notifications/status"
data-status="pinned" data-status="pinned"
data-page="{{$.Page.Paginater.Current}}" data-page="{{$.Page.Paginater.Current}}"
@ -100,7 +100,7 @@
<input type="hidden" name="notification_id" value="{{.ID}}"> <input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="read"> <input type="hidden" name="status" value="read">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}"> <input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_read"}}' <button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_read"}}'
data-url="{{AppSubUrl}}/notifications/status" data-url="{{AppSubUrl}}/notifications/status"
data-status="read" data-status="read"
data-page="{{$.Page.Paginater.Current}}" data-page="{{$.Page.Paginater.Current}}"
@ -115,7 +115,7 @@
<input type="hidden" name="notification_id" value="{{.ID}}"> <input type="hidden" name="notification_id" value="{{.ID}}">
<input type="hidden" name="status" value="unread"> <input type="hidden" name="status" value="unread">
<input type="hidden" name="page" value="{{$.Page.Paginater.Current}}"> <input type="hidden" name="page" value="{{$.Page.Paginater.Current}}">
<button class="ui mini button button-link" title='{{$.locale.Tr "notification.mark_as_unread"}}' <button class="ui mini button button-ghost" title='{{$.locale.Tr "notification.mark_as_unread"}}'
data-url="{{AppSubUrl}}/notifications/status" data-url="{{AppSubUrl}}/notifications/status"
data-status="unread" data-status="unread"
data-page="{{$.Page.Paginater.Current}}" data-page="{{$.Page.Paginater.Current}}"

4
web_src/css/base.css
View file

@ -2238,13 +2238,13 @@ a.ui.active.label:hover {
border-left: none; border-left: none;
} }
.ui.button.button-link { .ui.button.button-ghost {
background: transparent; background: transparent;
border: none; border: none;
color: inherit; color: inherit;
} }
.ui.button.button-link:hover { .ui.button.button-ghost:hover {
color: var(--color-primary); color: var(--color-primary);
} }