gitea_admin/Styleguide
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Keep multiselect option pulldowns active in off state

Browse Source
This commit is contained in:
Mathias Gläser
2026-05-27 10:41:03 +02:00
parent ecf6f2afee
commit 341910b20b
1 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
patterns/multiselektions-pulldown.html
+13 -13
View File
@@ -216,7 +216,7 @@
</span> </span>
</label> </label>
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row"> <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 1: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -226,7 +226,7 @@
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 1</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 1</p>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 1 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 1 Auswahl">
<option selected>Option 1</option> <option selected>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
@@ -237,7 +237,7 @@
<section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-4"> <section class="sg-form-sections-card__chapter" aria-labelledby="multiselect-block-4">
<h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2> <h2 id="multiselect-block-4" class="sg-strong sg-form-sections-card__chapter-title">Block 4</h2>
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row"> <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 2: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -247,14 +247,14 @@
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 2</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 2</p>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 2 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 2 Auswahl">
<option selected>Option 1</option> <option selected>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
</select> </select>
</div> </div>
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row"> <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 3: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -264,14 +264,14 @@
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 3</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 3</p>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 3 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 3 Auswahl">
<option selected>Option 1</option> <option selected>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
</select> </select>
</div> </div>
<div class="sg-pulldown-panel__row sg-pulldown-panel__row--disabled" data-pulldown-filter-row data-active="false" data-component-part="pulldown-filter-row"> <div class="sg-pulldown-panel__row" data-pulldown-filter-row data-active="true" data-component-part="pulldown-filter-row">
<button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus"> <button class="sg-mode-toggle sg-mode-toggle--local sg-activation-mode-toggle" type="button" data-active="absolute" aria-label="Aktivierung Pulldown 4: aus">
<span class="sg-mode-toggle__switch" aria-hidden="true"> <span class="sg-mode-toggle__switch" aria-hidden="true">
<span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span> <span class="sg-activation-mode-toggle__switch-label sg-activation-mode-toggle__switch-label--left">aus</span>
@@ -281,7 +281,7 @@
</button> </button>
<p class="sg-pulldown-panel__label sg-body">Pulldown 4</p> <p class="sg-pulldown-panel__label sg-body">Pulldown 4</p>
<select class="sg-interaction-element sg-pulldown" aria-label="Pulldown 4 Auswahl" disabled> <select class="sg-interaction-element sg-pulldown sg-pulldown--selected" aria-label="Pulldown 4 Auswahl">
<option selected>Option 1</option> <option selected>Option 1</option>
<option>Option 2</option> <option>Option 2</option>
<option>Option 3</option> <option>Option 3</option>
@@ -337,11 +337,11 @@
if (!select) { if (!select) {
return; return;
} }
pulldownRow.dataset.active = isActive ? 'true' : 'false'; pulldownRow.dataset.active = 'true';
select.disabled = !isActive; select.disabled = false;
pulldownRow.classList.toggle('sg-pulldown-panel__row--disabled', !isActive); pulldownRow.classList.remove('sg-pulldown-panel__row--disabled');
select.classList.toggle('sg-pulldown--selected', isActive); select.classList.add('sg-pulldown--selected');
select.classList.toggle('sg-pulldown--inactive-selectable', !isActive); select.classList.remove('sg-pulldown--inactive-selectable');
} }
}; };