From e1341b1d9c4831a1c35b0ced136978ba136b4a02 Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 6 Jun 2023 17:19:51 +0800 Subject: [PATCH 1/6] add details --- 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/index.css | 1 + web_src/css/shared/settings.css | 15 +++++++++++++++ 6 files changed, 31 insertions(+), 15 deletions(-) create mode 100644 web_src/css/shared/settings.css diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl index 777fe29924395..1aab91626a885 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 fcce43f914a21..50c3aef6d7c3d 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 b1beda7c944c1..4f5e43ee42534 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 26f49820293b1..a3397052f9ed5 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/index.css b/web_src/css/index.css index 90ee41f52462a..689c3f4a2970d 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 0000000000000..21cef2e28da5a --- /dev/null +++ b/web_src/css/shared/settings.css @@ -0,0 +1,15 @@ +summary { + display: flex; + justify-content: space-between; + align-items: center; +} + +summary::after { + transition: 0.2s; + content: '\203A'; /* chevron right */ + font-size: 20px; +} + +details[open] summary::after { + transform: rotate(90deg); +} From 73a161c6582b1c297a81ef2d736022668c53ffba Mon Sep 17 00:00:00 2001 From: HesterG Date: Tue, 6 Jun 2023 18:08:52 +0800 Subject: [PATCH 2/6] update classes --- templates/admin/navbar.tmpl | 4 ++-- templates/org/settings/navbar.tmpl | 2 +- templates/repo/settings/navbar.tmpl | 2 +- templates/user/settings/navbar.tmpl | 2 +- web_src/css/shared/settings.css | 13 +++++++++---- 5 files changed, 14 insertions(+), 9 deletions(-) diff --git a/templates/admin/navbar.tmpl b/templates/admin/navbar.tmpl index 1aab91626a885..641d3fad81f8f 100644 --- a/templates/admin/navbar.tmpl +++ b/templates/admin/navbar.tmpl @@ -35,7 +35,7 @@ {{end}} {{if .EnableActions}} -
+
{{.locale.Tr "actions.actions"}}
@@ -50,7 +50,7 @@ {{.locale.Tr "admin.notices"}} -
+
{{.locale.Tr "admin.monitor"}}
diff --git a/templates/org/settings/navbar.tmpl b/templates/org/settings/navbar.tmpl index 50c3aef6d7c3d..6bea9f5f60eae 100644 --- a/templates/org/settings/navbar.tmpl +++ b/templates/org/settings/navbar.tmpl @@ -23,7 +23,7 @@ {{end}} {{if .EnableActions}} -
+
{{.locale.Tr "actions.actions"}}
diff --git a/templates/repo/settings/navbar.tmpl b/templates/repo/settings/navbar.tmpl index 4f5e43ee42534..e21f23f6a0963 100644 --- a/templates/repo/settings/navbar.tmpl +++ b/templates/repo/settings/navbar.tmpl @@ -34,7 +34,7 @@ {{end}} {{if and .EnableActions (not .UnitActionsGlobalDisabled) (.Permission.CanRead $.UnitTypeActions)}} -
+
{{.locale.Tr "actions.actions"}}
diff --git a/templates/user/settings/navbar.tmpl b/templates/user/settings/navbar.tmpl index a3397052f9ed5..4ef2abeaab107 100644 --- a/templates/user/settings/navbar.tmpl +++ b/templates/user/settings/navbar.tmpl @@ -20,7 +20,7 @@ {{.locale.Tr "settings.ssh_gpg_keys"}} {{if .EnableActions}} -
+
{{.locale.Tr "actions.actions"}}
diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css index 21cef2e28da5a..2ef60c3b6b797 100644 --- a/web_src/css/shared/settings.css +++ b/web_src/css/shared/settings.css @@ -1,15 +1,20 @@ -summary { +details.toggleable-item summary { display: flex; justify-content: space-between; align-items: center; } - -summary::after { + +/* for specificity to outweigh the rule in base.css */ +.ui.menu details.toggleable-item { + user-select: none; +} + +details.toggleable-item summary::after { transition: 0.2s; content: '\203A'; /* chevron right */ font-size: 20px; } -details[open] summary::after { +details.toggleable-item[open] summary::after { transform: rotate(90deg); } From 607de2026c2aaf99477e85cb06341942d45b971f Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 6 Jun 2023 20:35:18 +0200 Subject: [PATCH 3/6] use a svg mask --- web_src/css/base.css | 1 + web_src/css/shared/settings.css | 20 ++++++++++++-------- 2 files changed, 13 insertions(+), 8 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index b352e6d98e18c..01f27962acf43 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; diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css index 2ef60c3b6b797..2bc31f7727a8b 100644 --- a/web_src/css/shared/settings.css +++ b/web_src/css/shared/settings.css @@ -1,20 +1,24 @@ details.toggleable-item summary { - display: flex; - justify-content: space-between; - align-items: center; + display: flex; + justify-content: space-between; + align-items: center; } /* for specificity to outweigh the rule in base.css */ .ui.menu details.toggleable-item { - user-select: none; + user-select: none; } details.toggleable-item summary::after { - transition: 0.2s; - content: '\203A'; /* chevron right */ - font-size: 20px; + transition: transform 0.25s ease; + content: ''; + width: 16px; + height: 16px; + mask-image: var(--octicon-chevron-right); + -webkit-mask-image: var(--octicon-chevron-right); + background: currentcolor; } details.toggleable-item[open] summary::after { - transform: rotate(90deg); + transform: rotate(90deg); } From e39ed1b8a3c9eeb52ec46868775128119f70a27f Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 6 Jun 2023 20:56:48 +0200 Subject: [PATCH 4/6] reduce to 14px --- web_src/css/shared/settings.css | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css index 2bc31f7727a8b..428f22639fd1e 100644 --- a/web_src/css/shared/settings.css +++ b/web_src/css/shared/settings.css @@ -12,8 +12,10 @@ details.toggleable-item summary { details.toggleable-item summary::after { transition: transform 0.25s ease; content: ''; - width: 16px; - height: 16px; + 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; From 2c16e561bd5fa599fdcd73dabec88202defc779f Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 6 Jun 2023 21:37:15 +0200 Subject: [PATCH 5/6] add hover effect over summary, workaround firefox bug --- web_src/css/base.css | 3 ++- web_src/css/shared/settings.css | 16 +++++++++++----- 2 files changed, 13 insertions(+), 6 deletions(-) diff --git a/web_src/css/base.css b/web_src/css/base.css index 01f27962acf43..a35eccb26beaa 100644 --- a/web_src/css/base.css +++ b/web_src/css/base.css @@ -535,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/shared/settings.css b/web_src/css/shared/settings.css index 428f22639fd1e..84ee1eb84cea6 100644 --- a/web_src/css/shared/settings.css +++ b/web_src/css/shared/settings.css @@ -1,12 +1,17 @@ +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; -} - -/* for specificity to outweigh the rule in base.css */ -.ui.menu details.toggleable-item { - user-select: none; + padding: 0.92857143em 1.14285714em; } details.toggleable-item summary::after { @@ -19,6 +24,7 @@ details.toggleable-item summary::after { 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 { From 4ee68adb36e108bf47fcf436bac1197d9f4a03c2 Mon Sep 17 00:00:00 2001 From: silverwind Date: Tue, 6 Jun 2023 21:44:03 +0200 Subject: [PATCH 6/6] hide the marker in safari --- web_src/css/shared/settings.css | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/web_src/css/shared/settings.css b/web_src/css/shared/settings.css index 84ee1eb84cea6..297b691a48f6c 100644 --- a/web_src/css/shared/settings.css +++ b/web_src/css/shared/settings.css @@ -14,6 +14,11 @@ details.toggleable-item summary { 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: '';