use optgroup tag for grouped select boxes

3 files changed, 22 insertions, 12 deletions

diff --git a/modules/pref-feeds.php b/modules/pref-feeds.php
index fae1fbe2f..cffcff3d8 100644
--- a/modules/pref-feeds.php
+++ b/modules/pref-feeds.php
@@ -1369,8 +1369,7 @@
 
 			print "<select id=\"feedActionChooser\" onchange=\"feedActionChange()\">
 				<option value=\"facDefault\" selected>".__('Actions...')."</option>
-				<option disabled>--------</option>
-				<option style=\"color : #5050aa\" disabled>".__('Selection:')."</option>
+				<optgroup label=\"".__('Selection:')."\">
 				<option value=\"facEdit\">&nbsp;&nbsp;".__('Edit')."</option>";
 
 			if (FORCE_ARTICLE_PURGE == 0) {
@@ -1383,12 +1382,15 @@
 				<option value=\"facRescore\">&nbsp;&nbsp;".__('Rescore articles')."</option>
 				<option value=\"facUnsubscribe\">&nbsp;&nbsp;".__('Unsubscribe')."</option>";
 
+			print "</optgroup>";
+
 				if (get_pref($link, 'ENABLE_FEED_CATS')) {
 
-					print "<option disabled>--------</option>
-					<option style=\"color : #5050aa\" disabled>".__('Other:')."</option>
-					<option value=\"facEditCats\">&nbsp;&nbsp;".__('Edit categories')."
-					</option>";
+					print "<optgroup label=\"".__('Other:')."\">
+						<option value=\"facEditCats\">&nbsp;&nbsp;".__('Edit categories')."
+							</option>
+					</optgroup>";
+
 				}
 
 			print "</select>";
diff --git a/tt-rss.css b/tt-rss.css
index 22c8a40c6..d6360b21c 100644
--- a/tt-rss.css
+++ b/tt-rss.css
@@ -2160,3 +2160,11 @@ div#offlineModeDrop {
 	color : #909090;
 }
 
+optgroup {
+	color : #5050aa;
+	font-style : normal;
+}
+
+option {
+	color : black;
+}
diff --git a/tt-rss.php b/tt-rss.php
index 7a492f84c..b963cd150 100644
--- a/tt-rss.php
+++ b/tt-rss.php
@@ -189,25 +189,25 @@ window.onload = init;
 					<option value="qmcDefault" selected="selected"><?php echo __('Actions...') ?></option>
 					<option value="qmcSearch"><?php echo __('Search...') ?></option>
 					<!-- <option value="qmcPrefs"><?php echo __('Preferences') ?></option> -->
-					<option disabled="disabled">--------</option>
-					<option style="color : #5050aa" disabled="disabled"><?php echo __('Feed actions:') ?></option>
+					<optgroup label="<?php echo __('Feed actions:') ?>">
 					<option value="qmcAddFeed">&nbsp;&nbsp;<?php echo __('Subscribe to feed...') ?></option>
 					<option value="qmcEditFeed">&nbsp;&nbsp;<?php echo __('Edit this feed...') ?></option>
 					<!-- <option value="qmcClearFeed">&nbsp;&nbsp;<?php echo __('Clear articles') ?></option> -->
 					<option value="qmcRescoreFeed">&nbsp;&nbsp;<?php echo __('Rescore feed') ?></option>
 					<option value="qmcRemoveFeed">&nbsp;&nbsp;<?php echo __('Unsubscribe') ?></option>
-					<option disabled="disabled">--------</option>
-					<option style="color : #5050aa" disabled="disabled"><?php echo __('All feeds:') ?></option>
+					</optgroup>
+					<optgroup label="<?php echo __('All feeds:') ?>">
 					<option value="qmcCatchupAll">&nbsp;&nbsp;<?php echo __('Mark as read') ?></option>
 					<option value="qmcShowOnlyUnread">&nbsp;&nbsp;<?php echo __('(Un)hide read feeds') ?></option>
-					<option disabled="disabled">--------</option>
-					<option style="color : #5050aa" disabled="disabled"><?php echo __('Other actions:') ?></option>				
+					</optgroup>
+					<optgroup label="<?php echo __('Other actions:') ?>">
 
 					<option value="qmcAddLabel">&nbsp;&nbsp;<?php echo __('Create label...') ?></option>
 					<option value="qmcAddFilter">&nbsp;&nbsp;<?php echo __('Create filter...') ?></option>
 					<option value="qmcResetUI">&nbsp;&nbsp;<?php echo __('Reset UI layout') ?></option>
 					<option value="qmcResetCats">&nbsp;&nbsp;<?php echo __('Reset category order') ?></option>
 					<option value="qmcHKhelp"><?php echo __('&nbsp;&nbsp;Keyboard shortcuts') ?></option>
+					</optgroup>
 
 			</select>
 		</div>