Add details summary for vertical menus in settings to allow toggling (#25098)
Close #25051 [referenced answer](https://stackoverflow.com/questions/10813581/can-i-replace-the-expand-icon-of-the-details-element/69722686#69722686) for marker overwrite. One limitation is that fomantic does not have hover and active effects for the vertical submenu ([reference](https://fomantic-ui.com/collections/menu.html#sub-menu)). And we might need to overwrite some styles if hover and active effects are needed. Update: Used `data:image/svg` instead of `marker` content. And adjusted styles for hover effect. Take admin settings as an example: https://github.com/go-gitea/gitea/assets/17645053/63f69823-ef43-47d5-a518-544b5ea35ba6 --------- Co-authored-by: silverwind <me@silverwind.io>
This commit is contained in:
HesterG
GitHub
parent
379ec13030
commit
58536093b3
|
|
@ -35,14 +35,14 @@
|
|||
</a>
|
||||
{{end}}
|
||||
{{if .EnableActions}}
|
||||
<div class="item">
|
||||
{{.locale.Tr "actions.actions"}}
|
||||
<details class="item toggleable-item" {{if .PageIsSharedSettingsRunners}}open{{end}}>
|
||||
<summary>{{.locale.Tr "actions.actions"}}</summary>
|
||||
<div class="menu">
|
||||
<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{AppSubUrl}}/admin/actions/runners">
|
||||
{{.locale.Tr "actions.runners"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{{end}}
|
||||
<a class="{{if .PageIsAdminConfig}}active {{end}}item" href="{{AppSubUrl}}/admin/config">
|
||||
{{.locale.Tr "admin.config"}}
|
||||
|
|
@ -50,8 +50,8 @@
|
|||
<a class="{{if .PageIsAdminNotices}}active {{end}}item" href="{{AppSubUrl}}/admin/notices">
|
||||
{{.locale.Tr "admin.notices"}}
|
||||
</a>
|
||||
<div class="item">
|
||||
{{.locale.Tr "admin.monitor"}}
|
||||
<details class="item toggleable-item" {{if or .PageIsAdminMonitorStats .PageIsAdminMonitorCron .PageIsAdminMonitorQueue .PageIsAdminMonitorStacktrace}}open{{end}}>
|
||||
<summary>{{.locale.Tr "admin.monitor"}}</summary>
|
||||
<div class="menu">
|
||||
<a class="{{if .PageIsAdminMonitorStats}}active {{end}}item" href="{{AppSubUrl}}/admin/monitor/stats">
|
||||
{{.locale.Tr "admin.monitor.stats"}}
|
||||
|
|
@ -66,6 +66,6 @@
|
|||
{{.locale.Tr "admin.monitor.stacktrace"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -23,8 +23,8 @@
|
|||
</a>
|
||||
{{end}}
|
||||
{{if .EnableActions}}
|
||||
<div class="item">
|
||||
{{.locale.Tr "actions.actions"}}
|
||||
<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets}}open{{end}}>
|
||||
<summary>{{.locale.Tr "actions.actions"}}</summary>
|
||||
<div class="menu">
|
||||
<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{.OrgLink}}/settings/actions/runners">
|
||||
{{.locale.Tr "actions.runners"}}
|
||||
|
|
@ -33,7 +33,7 @@
|
|||
{{.locale.Tr "secrets.secrets"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{{end}}
|
||||
<a class="{{if .PageIsSettingsDelete}}active {{end}}item" href="{{.OrgLink}}/settings/delete">
|
||||
{{.locale.Tr "org.settings.delete"}}
|
||||
|
|
|
|||
|
|
@ -34,8 +34,8 @@
|
|||
</a>
|
||||
{{end}}
|
||||
{{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}}
|
||||
<div class="item">
|
||||
{{.locale.Tr "actions.actions"}}
|
||||
<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets}}open{{end}}>
|
||||
<summary>{{.locale.Tr "actions.actions"}}</summary>
|
||||
<div class="menu">
|
||||
<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{.RepoLink}}/settings/actions/runners">
|
||||
{{.locale.Tr "actions.runners"}}
|
||||
|
|
@ -44,7 +44,7 @@
|
|||
{{.locale.Tr "secrets.secrets"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{{end}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -20,8 +20,8 @@
|
|||
{{.locale.Tr "settings.ssh_gpg_keys"}}
|
||||
</a>
|
||||
{{if .EnableActions}}
|
||||
<div class="item">
|
||||
{{.locale.Tr "actions.actions"}}
|
||||
<details class="item toggleable-item" {{if or .PageIsSharedSettingsRunners .PageIsSharedSettingsSecrets}}open{{end}}>
|
||||
<summary>{{.locale.Tr "actions.actions"}}</summary>
|
||||
<div class="menu">
|
||||
<a class="{{if .PageIsSharedSettingsRunners}}active {{end}}item" href="{{AppSubUrl}}/user/settings/actions/runners">
|
||||
{{.locale.Tr "actions.runners"}}
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
{{.locale.Tr "secrets.secrets"}}
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</details>
|
||||
{{end}}
|
||||
{{if .EnablePackages}}
|
||||
<a class="{{if .PageIsSettingsPackages}}active {{end}}item" href="{{AppSubUrl}}/user/settings/packages">
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
/* backgrounds */
|
||||
--checkbox-mask-checked: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="-1 -1 18 18" width="16" height="16"><path fill-rule="evenodd" d="M13.78 4.22a.75.75 0 010 1.06l-7.25 7.25a.75.75 0 01-1.06 0L2.22 9.28a.75.75 0 011.06-1.06L6 10.94l6.72-6.72a.75.75 0 011.06 0z"></path></svg>');
|
||||
--checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path fill-rule="evenodd" d="M2 7.75A.75.75 0 012.75 7h10a.75.75 0 010 1.5h-10A.75.75 0 012 7.75z"></path></svg>');
|
||||
--octicon-chevron-right: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="16" height="16"><path d="M6.22 3.22a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.751.751 0 0 1-1.042-.018.751.751 0 0 1-.018-1.042L9.94 8 6.22 4.28a.75.75 0 0 1 0-1.06Z"></path></svg>');
|
||||
/* non-color variables */
|
||||
--border-radius: 0.28571429rem;
|
||||
--opacity-disabled: 0.55;
|
||||
|
|
@ -534,7 +535,8 @@ a.label,
|
|||
}
|
||||
|
||||
.ui.menu .dropdown.item:hover,
|
||||
.ui.menu a.item:hover {
|
||||
.ui.menu a.item:hover,
|
||||
.ui.menu details.item summary:hover {
|
||||
color: var(--color-text);
|
||||
background: var(--color-hover);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -9,6 +9,7 @@
|
|||
|
||||
@import "./shared/issuelist.css";
|
||||
@import "./shared/repoorg.css";
|
||||
@import "./shared/settings.css";
|
||||
|
||||
@import "./features/dropzone.css";
|
||||
@import "./features/gitgraph.css";
|
||||
|
|
|
|||
37
web_src/css/shared/settings.css
Normal file
37
web_src/css/shared/settings.css
Normal file
|
|
@ -0,0 +1,37 @@
|
|||
details.toggleable-item {
|
||||
user-select: none !important;
|
||||
padding: 0 !important;
|
||||
}
|
||||
|
||||
details.toggleable-item .menu {
|
||||
margin: 4px 0 10px !important;
|
||||
}
|
||||
|
||||
details.toggleable-item summary {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 0.92857143em 1.14285714em;
|
||||
}
|
||||
|
||||
details.toggleable-item summary::marker, /* Chrome, Edge, Firefox */
|
||||
details.toggleable-item summary::-webkit-details-marker /* Safari */ {
|
||||
display: none;
|
||||
}
|
||||
|
||||
details.toggleable-item summary::after {
|
||||
transition: transform 0.25s ease;
|
||||
content: '';
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
mask-size: cover;
|
||||
-webkit-mask-size: cover;
|
||||
mask-image: var(--octicon-chevron-right);
|
||||
-webkit-mask-image: var(--octicon-chevron-right);
|
||||
background: currentcolor;
|
||||
border: 1px solid var(--color-body); /* workaround https://bugzilla.mozilla.org/show_bug.cgi?id=1671784 */
|
||||
}
|
||||
|
||||
details.toggleable-item[open] summary::after {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
Loading…
Reference in a new issue