From 58536093b3112841bc69edb542189893b57e7a47 Mon Sep 17 00:00:00 2001 From: HesterG Date: Wed, 7 Jun 2023 10:49:48 +0800 Subject: [PATCH] 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 --- templates/admin/navbar.tmpl | 12 +++++----- templates/org/settings/navbar.tmpl | 6 ++--- templates/repo/settings/navbar.tmpl | 6 ++--- templates/user/settings/navbar.tmpl | 6 ++--- web_src/css/base.css | 4 +++- web_src/css/index.css | 1 + web_src/css/shared/settings.css | 37 +++++++++++++++++++++++++++++ 7 files changed, 56 insertions(+), 16 deletions(-) create mode 100644 web_src/css/shared/settings.css diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl index 777fe29924..641d3fad81 100644 --- a/templates/admin/navbar.tmpl +++ b/templates/admin/navbar.tmpl @@ -35,14 +35,14 @@ {{end}} {{if .EnableActions}} -
- {{.locale.Tr "actions.actions"}} +
+ {{.locale.Tr "actions.actions"}}
{{.locale.Tr "actions.runners"}}
-
+ {{end}} {{.locale.Tr "admin.config"}} @@ -50,8 +50,8 @@ {{.locale.Tr "admin.notices"}} -
- {{.locale.Tr "admin.monitor"}} +
+ {{.locale.Tr "admin.monitor"}}
{{.locale.Tr "admin.monitor.stats"}} @@ -66,6 +66,6 @@ {{.locale.Tr "admin.monitor.stacktrace"}}
-
+ diff --git a/templates/org/settings/navbar.tmpl b/templates/org/settings/navbar.tmpl index fcce43f914..6bea9f5f60 100644 --- a/templates/org/settings/navbar.tmpl +++ b/templates/org/settings/navbar.tmpl @@ -23,8 +23,8 @@ {{end}} {{if .EnableActions}} -
- {{.locale.Tr "actions.actions"}} +
+ {{.locale.Tr "actions.actions"}}
{{.locale.Tr "actions.runners"}} @@ -33,7 +33,7 @@ {{.locale.Tr "secrets.secrets"}}
-
+ {{end}} {{.locale.Tr "org.settings.delete"}} diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl index b1beda7c94..e21f23f6a0 100644 --- a/templates/repo/settings/navbar.tmpl +++ b/templates/repo/settings/navbar.tmpl @@ -34,8 +34,8 @@ {{end}} {{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}} -
- {{.locale.Tr "actions.actions"}} +
+ {{.locale.Tr "actions.actions"}}
{{.locale.Tr "actions.runners"}} @@ -44,7 +44,7 @@ {{.locale.Tr "secrets.secrets"}}
-
+ {{end}} diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl index 26f4982029..4ef2abeaab 100644 --- a/templates/user/settings/navbar.tmpl +++ b/templates/user/settings/navbar.tmpl @@ -20,8 +20,8 @@ {{.locale.Tr "settings.ssh_gpg_keys"}} {{if .EnableActions}} -
- {{.locale.Tr "actions.actions"}} +
+ {{.locale.Tr "actions.actions"}}
{{.locale.Tr "actions.runners"}} @@ -30,7 +30,7 @@ {{.locale.Tr "secrets.secrets"}}
-
+ {{end}} {{if .EnablePackages}} diff --git a/web_src/css/base.css b/web_src/css/base.css index b352e6d98e..a35eccb26b 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -12,6 +12,7 @@ /* backgrounds */ --checkbox-mask-checked: url('data:image/svg+xml;utf8,'); --checkbox-mask-indeterminate: url('data:image/svg+xml;utf8,'); + --octicon-chevron-right: url('data:image/svg+xml;utf8,'); /* 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); } diff --git a/web_src/css/index.css b/web_src/css/index.css index 90ee41f524..689c3f4a29 100644 --- a/web_src/css/index.css +++ b/web_src/css/index.css @@ -9,6 +9,7 @@ @import "./shared/issuelist.css"; @import "./shared/repoorg.css"; +@import "./shared/settings.css"; @import "./features/dropzone.css"; @import "./features/gitgraph.css"; diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css new file mode 100644 index 0000000000..297b691a48 --- /dev/null +++ b/web_src/css/shared/settings.css @@ -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); +}