[ticket/11241] Add dropdown control button.

PHPBB3-11241

phpBB/assets/javascript/core.js

@@ -931,6 +931,14 @@ phpbb.toggleDropdown = function() {
 	return false;
 };
 
+/**
+* Toggle dropdown submenu
+*/
+phpbb.toggleSubmenu = function(e) {
+	$(this).siblings('.dropdown-submenu').toggle();
+	e.preventDefault();
+}
+
 /**
 * Register dropdown menu
 * Shows/hides dropdown, decides which side to open to
@@ -962,6 +970,7 @@ phpbb.registerDropdown = function(toggle, dropdown, options)
 	toggle.data('dropdown-options', ops);
 
 	toggle.click(phpbb.toggleDropdown);
+	$('.dropdown-toggle-submenu', ops.parent).click(phpbb.toggleSubmenu);
 };
 
 /**

phpBB/styles/prosilver/theme/buttons.css

@@ -11,13 +11,13 @@
 }
 
 /* Rollover state */
-.buttons div {
+.buttons div, .dropdown-select {
 	float: left;
 	margin: 0 5px 0 0;
 }
 
 /* Rolloff state */
-.buttons div a {
+.buttons div a, .dropdown-select {
 	display: inline-block;
 	line-height: 17.5px;
 	height: 18px;
@@ -38,7 +38,7 @@
 
 .buttons div span { display: none; }
 
-.buttons div a:after {
+.buttons div a:after, .dropdown-select:after {
 	content: '';
 	display: block;
 	position: absolute;
@@ -54,6 +54,35 @@
 	background-position: 0 -20px;
 }
 
+.dropdown-select {
+	cursor: pointer;
+	font-family: inherit;
+	font-size: 1em;
+	font-weight: normal;
+}
+
+.dropdown-select:after {
+	background-position: -103px 10px;
+	border-left: 1px solid;
+	margin-top: 0;
+	top: 0;
+	right: 0;
+	height: 21px;
+	width: 15px;
+}
+
+.dropdown-visible .dropdown-select:after, .nojs .dropdown-container:hover .dropdown-select:after {
+	background-position: -103px -10px;
+}
+
+.dropdown-select-icon:before {
+	content: '';
+	display: block;
+	float: left;
+	margin-right: 4px;
+	margin-top: 2px;
+}
+
 /* Big button images */
 .buttons div.reply-icon a:after, .buttons div.pmreply-icon a:after { background-position: -20px 0; }
 .buttons div.reply-icon a:hover:after, .buttons div.pmreply-icon a:hover:after	{ background-position: -20px -20px; }
@@ -67,6 +96,11 @@
 .buttons div.forwardpm-icon a:after	{ background-position: -40px 0; }
 .buttons div.forwardpm-icon a:hover:after	{ background-position: -40px -20px; }
 
+.dropdown-select.tools-icon:before { background-position: -80px 0; height: 16px; width: 16px; }
+
+.dropdown-visible .dropdown-select.tools-icon:before,
+.nojs .dropdown-container:hover .dropdown-select.tools-icon:before { background-position: -80px -20px; }
+
 /* Sub-header (navigation bar)
 --------------------------------------------- */
 a.print, a.sendemail {

phpBB/styles/prosilver/theme/colours.css

@@ -231,7 +231,6 @@ p.post-notice.reported:before, p.post-notice.error:before {
 	background-image: url("./images/icon_topic_reported.gif");
 }
 
-
 /*
 --------------------------------------------------------------
 Colours and backgrounds for links.css
@@ -655,7 +654,7 @@ a.sendemail {
 	background-image: url("./images/icon_sendemail.gif");
 }
 
-.buttons div a {
+.buttons div a, .dropdown-select {
 	border-color: #C7C3BF;
 	background-color: #FFFFFF;
 	background-image: -moz-linear-gradient(top, #FFFFFF, #E9E9E9);
@@ -668,7 +667,15 @@ a.sendemail {
 	color: #BC2A4D !important;
 }
 
-.buttons div a:hover {
+.dropdown-select {
+	color: #5C6482 !important;
+}
+
+.dropdown-select:after {
+	border-color: #DADADA;
+}
+
+.buttons div a:hover, .dropdown-select:hover {
 	border-color: #0a8ed0;
 	background-image: -moz-linear-gradient(top, #E9E9E9, #FFFFFF);
 	background-image: -webkit-linear-gradient(top, #E9E9E9, #FFFFFF);
@@ -678,7 +685,18 @@ a.sendemail {
 	text-shadow: 1px 1px 0 #FFFFFF, -1px -1px 0 #FFFFFF, -1px -1px 0 rgba(188, 42, 77, 0.2);
 }
 
-.buttons div a:after {
+.dropdown-select:hover {
+	border-color: #C7C3BF; 
+}
+
+.dropdown-visible .dropdown-select, .dropdown-visible .dropdown-select:hover, .nojs .dropdown-container:hover .dropdown-select {
+	background-color: #FFFFFF;
+	background-image: none;
+	border-color: #A6B2BA;
+	color: #105289 !important;
+}
+
+.buttons div a:after, .dropdown-select-icon:before, .dropdown-select:after {
 	background-image: url("images/buttons.png");
 }
 
@@ -698,6 +716,7 @@ a.sendemail {
 .icon-search, .responsive-search a	{ background-image: url("./images/icon_search.gif"); }
 .icon-notification				{ background-image: url("./images/icon_notification.gif"); }
 .icon-pm						{ background-image: url("./images/icon_pm.gif"); }
+.icon-download					{ background-image: url("./images/icon_download.gif"); }
 
 /* Profile & navigation icons */
 .email-icon, .email-icon a		{ background-image: url("./images/icon_contact_email.gif"); }

phpBB/styles/prosilver/theme/common.css

@@ -463,6 +463,10 @@ ul.linklist.bulletin li.no-bulletin:before {
 	padding: 9px 0 0;
 }
 
+.dropdown-container.topic-tools {
+	float: left;
+}
+
 .dropdown-up .dropdown {
 	top: auto;
 	bottom: 1.2em;
@@ -474,6 +478,15 @@ ul.linklist.bulletin li.no-bulletin:before {
 	right: 0;
 }
 
+.dropdown-button-control .dropdown {
+	top: 24px;
+}
+
+.dropdown-button-control.dropdown-up .dropdown {
+	top: auto;
+	bottom: 24px;
+}
+
 .dropdown .pointer, .dropdown .pointer-inner {
 	position: absolute;
 	width: 0;
@@ -536,11 +549,16 @@ ul.linklist.bulletin li.no-bulletin:before {
 
 .dropdown li {
 	float: none;
+	list-style: none;
 	margin: 0;
 	white-space: nowrap;
 	text-align: left;
 }
 
+.dropdown li li {
+	padding-left: 10px;
+}
+
 .wrap .dropdown li, .dropdown.wrap li, #notification_list li {
 	white-space: normal;
 }