public/gitea
1
0
Fork 0
mirror of https://github.com/go-gitea/gitea.git synced 2026-04-16 16:01:02 +09:00
Code Issues Packages Projects Releases Wiki Activity

Indicate form field readonly via background (#37175)

Browse Source 
The `Run As Username` field on the install page was a `readonly` input
that looked editable but wasn't, confusing users. Style `readonly`
inputs with a subtle background, matching other frameworks.

Fixes: #37174
Signed-off-by: wxiaoguang <wxiaoguang@gmail.com>
Signed-off-by: silverwind <me@silverwind.io>
Co-authored-by: Claude (Opus 4.6) <noreply@anthropic.com>
Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>
This commit is contained in:
silverwind
2026-04-11 16:38:56 +02:00
committed by GitHub
parent d913fae237
commit ba9258c478
4 changed files with 118 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
options/locale/locale_en-US.json
View File

@@ -269,7 +269,7 @@
"install.lfs_path": "Git LFS Root Path",
"install.lfs_path_helper": "Files tracked by Git LFS will be stored in this directory. Leave empty to disable.",
"install.run_user": "Run As Username",
"install.run_user_helper": "The operating system username that Gitea runs as. Note that this user must have access to the repository root path.",
"install.run_user_helper": "The operating system username that Gitea runs as, it must have write access to the data paths. This value is auto-detected and cannot be changed here. To use a different user, restart Gitea under that account.",
"install.domain": "Server Domain",
"install.domain_helper": "Domain or host address for the server.",
"install.ssh_port": "SSH Server Port",

109
templates/devtest/form-fields.tmpl Normal file
View File

@@ -0,0 +1,109 @@
{{template "devtest/devtest-header"}}
<div class="page-content devtest ui container">
<form class="ui form left-right-form">
<h4 class="ui dividing header">Input</h4>
<div class="inline field">
<label>Normal</label>
<input type="text" value="value">
</div>
<div class="inline field">
<label>Readonly</label>
<input type="text" value="value" readonly>
</div>
<div class="inline disabled field">
<label>Disabled</label>
<input type="text" value="value" disabled>
</div>
<div class="inline field error">
<label>Error</label>
<input type="text" value="value">
</div>
<h4 class="ui dividing header">Textarea</h4>
<div class="inline field">
<label>Normal</label>
<textarea rows="2">value</textarea>
</div>
<div class="inline field">
<label>Readonly</label>
<textarea rows="2" readonly>value</textarea>
</div>
<div class="inline disabled field">
<label>Disabled</label>
<textarea rows="2" disabled>value</textarea>
</div>
<div class="inline field error">
<label>Error</label>
<textarea rows="2">value</textarea>
</div>
<h4 class="ui dividing header">Dropdown</h4>
<div class="inline field">
<label>Normal</label>
<div class="ui selection dropdown">
<input type="hidden" value="a">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text">Option A</div>
<div class="menu">
<div class="item" data-value="a">Option A</div>
<div class="item" data-value="b">Option B</div>
</div>
</div>
</div>
<div class="inline field">
<label>Readonly</label>
<div class="ui selection dropdown" readonly>
<input type="hidden" value="a">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text">Option A</div>
<div class="menu">
<div class="item" data-value="a">Option A</div>
<div class="item" data-value="b">Option B</div>
</div>
</div>
</div>
<div class="inline disabled field">
<label>Disabled</label>
<div class="ui selection dropdown">
<input type="hidden" value="a">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text">Option A</div>
<div class="menu">
<div class="item" data-value="a">Option A</div>
<div class="item" data-value="b">Option B</div>
</div>
</div>
</div>
<div class="inline field error">
<label>Error</label>
<div class="ui selection dropdown">
<input type="hidden" value="a">
{{svg "octicon-triangle-down" 14 "dropdown icon"}}
<div class="text">Option A</div>
<div class="menu">
<div class="item" data-value="a">Option A</div>
<div class="item" data-value="b">Option B</div>
</div>
</div>
</div>
<h4 class="ui dividing header">Required</h4>
<div class="inline required field">
<label>Normal</label>
<input type="text" value="value">
</div>
<div class="inline required field">
<label>Readonly</label>
<input type="text" value="value" readonly>
</div>
<div class="inline required disabled field">
<label>Disabled</label>
<input type="text" value="value" disabled>
</div>
<div class="inline required field error">
<label>Error</label>
<input type="text" value="value">
</div>
</form>
</div>
{{template "devtest/devtest-footer"}}

2
templates/install.tmpl
View File

@@ -117,7 +117,7 @@
<input id="lfs_root_path" name="lfs_root_path" value="{{.lfs_root_path}}">
<span class="help">{{ctx.Locale.Tr "install.lfs_path_helper"}}</span>
</div>
<div class="inline required field {{if .Err_RunUser}}error{{end}}">
<div class="inline field">
<label for="run_user">{{ctx.Locale.Tr "install.run_user"}}</label>
<input id="run_user" name="run_user" value="{{.run_user}}" readonly>
<span class="help">{{ctx.Locale.Tr "install.run_user_helper"}}</span>

8
web_src/css/modules/form.css
View File

@@ -99,6 +99,13 @@ textarea:focus,
color: var(--color-input-text);
}
.ui.form input:not([type="checkbox"], [type="radio"])[readonly],
.ui.form textarea[readonly],
.ui.form select[readonly],
.ui.form .ui.selection.dropdown[readonly] {
background: var(--color-secondary-bg);
}
.ui.input {
color: var(--color-input-text);
}
@@ -198,7 +205,6 @@ textarea:focus,
background-color: var(--color-error-bg);
border-color: var(--color-error-border);
color: var(--color-error-text);
border-radius: 0;
}
.ui.form .field.error textarea:focus,
.ui.form .field.error select:focus,