troldspejlet/forgejo
troldspejlet/forgejo
1
0
Fork 0
mirror of https://codeberg.org/forgejo/forgejo.git synced 2024-11-10 20:59:31 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions 4

use dropdown for pronoun input

Browse source
This commit is contained in:
hazycora 2023-09-26 00:34:09 -05:00
parent f8e48e066a
commit a6f068a93b
No known key found for this signature in database
GPG key ID: 215AF1F81F86940E
3 changed files with 52 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
options/locale/locale_en-US.ini
View file

@ -702,6 +702,7 @@ full_name = Full name
website = Website
location = Location
pronouns = Pronouns
pronouns_custom = Custom
update_theme = Change theme
update_profile = Update profile
update_language = Change language

2
routers/web/user/setting/profile.go
View file

@ -46,6 +46,7 @@ func Profile(ctx *context.Context) {
ctx.Data["PageIsSettingsProfile"] = true
ctx.Data["AllowedUserVisibilityModes"] = setting.Service.AllowedUserVisibilityModesSlice.ToVisibleTypeSlice()
ctx.Data["DisableGravatar"] = setting.Config().Picture.DisableGravatar.Value(ctx)
ctx.Data["PronounsAreCustom"] = ctx.Doer.Pronouns != "he/him" && ctx.Doer.Pronouns != "she/her" && ctx.Doer.Pronouns != "they/them" && ctx.Doer.Pronouns != "it/its"
ctx.HTML(http.StatusOK, tplSettingsProfile)
}
@ -56,6 +57,7 @@ func ProfilePost(ctx *context.Context) {
ctx.Data["PageIsSettingsProfile"] = true
ctx.Data["AllowedUserVisibilityModes"] = setting.Service.AllowedUserVisibilityModesSlice.ToVisibleTypeSlice()
ctx.Data["DisableGravatar"] = setting.Config().Picture.DisableGravatar.Value(ctx)
ctx.Data["PronounsAreCustom"] = ctx.Doer.Pronouns != "he/him" && ctx.Doer.Pronouns != "she/her" && ctx.Doer.Pronouns != "they/them" && ctx.Doer.Pronouns != "it/its"
if ctx.HasError() {
ctx.HTML(http.StatusOK, tplSettingsProfile)

52
templates/user/settings/profile.tmpl
View file

@ -37,9 +37,55 @@
<label for="location">{{ctx.Locale.Tr "settings.location"}}</label>
<input id="location" name="location" placeholder="{{ctx.Locale.Tr "settings.location_placeholder"}}" value="{{.SignedUser.Location}}" maxlength="50">
</div>
<div class="field">
<label for="pronouns">{{.locale.Tr "settings.pronouns"}}</label>
<input id="pronouns" name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50">
<div class="inline field">
<span class="inline field"><label for="pronouns">{{.locale.Tr "settings.pronouns"}}</label></span>
<div id="pronouns-dropdown" style="display: none" class="ui selection dropdown">
<input type="hidden" name="pronouns" value="{{.SignedUser.Pronouns}}">
<div class="text">
{{if .PronounsAreCustom}}
{{.locale.Tr "settings.pronouns_custom"}}
{{else}}
{{.SignedUser.Pronouns}}
{{end}}
</div>
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="menu">
<div class="item{{if eq "he/him" .SignedUser.Pronouns}} active selected{{end}}" data-value="he/him">he/him</div>
<div class="item{{if eq "she/her" .SignedUser.Pronouns}} active selected{{end}}" data-value="she/her">she/her</div>
<div class="item{{if eq "they/them" .SignedUser.Pronouns}} active selected{{end}}" data-value="they/them">they/them</div>
<div class="item{{if eq "it/its" .SignedUser.Pronouns}} active selected{{end}}" data-value="it/its">it/its</div>
{{if .PronounsAreCustom}}
<div class="item active selected" data-value="{{.SignedUser.Pronouns}}">{{.locale.Tr "settings.pronouns_custom"}}</div>
{{else}}
<div class="item" data-value="">{{.locale.Tr "settings.pronouns_custom"}}</div>
{{end}}
</div>
</div>
<input id="pronouns-custom" name="pronouns" value="{{.SignedUser.Pronouns}}" maxlength="50">
<script>
(() => {
const pronounsDropdown = document.getElementById('pronouns-dropdown')
const pronounsCustom = document.getElementById('pronouns-custom')
const pronounsInput = pronounsDropdown.querySelector('input')
pronounsCustom.removeAttribute('name')
pronounsDropdown.style.display = ''
function onPronounsDropdownUpdate() {
const isCustom = !(pronounsInput.value == 'he/him' || pronounsInput.value == 'she/her' || pronounsInput.value == 'they/them' || pronounsInput.value == 'it/its')
if (isCustom) {
pronounsCustom.value = pronounsInput.value
pronounsCustom.style.display = ''
} else {
pronounsCustom.style.display = 'none'
}
}
function onPronounsCustomUpdate() {
pronounsInput.value = pronounsCustom.value
}
onPronounsDropdownUpdate()
pronounsInput.addEventListener('change', onPronounsDropdownUpdate)
pronounsCustom.addEventListener('input', onPronounsCustomUpdate)
})()
</script>
</div>
<div class="divider"></div>