From 4b0410a9d9ab9a405722f0d14d659ab3b7096f11 Mon Sep 17 00:00:00 2001 From: Cesar G Date: Fri, 8 Nov 2013 11:32:42 -0800 Subject: [PATCH] [ticket/11241] Add dropdown control button. PHPBB3-11241 --- phpBB/assets/javascript/core.js | 9 ++++ phpBB/styles/prosilver/theme/buttons.css | 40 ++++++++++++++++-- phpBB/styles/prosilver/theme/colours.css | 27 ++++++++++-- phpBB/styles/prosilver/theme/common.css | 18 ++++++++ .../styles/prosilver/theme/images/buttons.png | Bin 2563 -> 2923 bytes .../prosilver/theme/images/icon_download.gif | Bin 0 -> 198 bytes 6 files changed, 87 insertions(+), 7 deletions(-) mode change 100644 => 100755 phpBB/styles/prosilver/theme/images/buttons.png create mode 100644 phpBB/styles/prosilver/theme/images/icon_download.gif diff --git a/phpBB/assets/javascript/core.js b/phpBB/assets/javascript/core.js index 8d0db5da1a..5b8331bdce 100644 --- a/phpBB/assets/javascript/core.js +++ b/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); }; /** diff --git a/phpBB/styles/prosilver/theme/buttons.css b/phpBB/styles/prosilver/theme/buttons.css index cdd325fb13..89fdcd85a8 100644 --- a/phpBB/styles/prosilver/theme/buttons.css +++ b/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 { diff --git a/phpBB/styles/prosilver/theme/colours.css b/phpBB/styles/prosilver/theme/colours.css index 55b01f1269..8258262276 100644 --- a/phpBB/styles/prosilver/theme/colours.css +++ b/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"); } diff --git a/phpBB/styles/prosilver/theme/common.css b/phpBB/styles/prosilver/theme/common.css index 3cc3ce1afe..8d65c96a72 100644 --- a/phpBB/styles/prosilver/theme/common.css +++ b/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; } diff --git a/phpBB/styles/prosilver/theme/images/buttons.png b/phpBB/styles/prosilver/theme/images/buttons.png old mode 100644 new mode 100755 index a19abdc2b8aeb3b344a1718d78314104082fa2ba..3a8c2f2f65bd3d409a4e6cfec3969ac7fd74389b GIT binary patch literal 2923 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 VkxM=;tZ)DT002ovPDHLkV1nhACdU8( literal 2563 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 diff --git a/phpBB/styles/prosilver/theme/images/icon_download.gif b/phpBB/styles/prosilver/theme/images/icon_download.gif new file mode 100644 index 0000000000000000000000000000000000000000..70cd61caf2dbe1af64969b183e7ce9c31a37ba15 GIT binary patch literal 198 zcmZ?wbhEHbz6NIK7IQ1_U+qe&z{}8ckk}qyEks!c=P!?ST_Me@h1x-1A{Pw4oDryP6k%z2PV8u znOw~pT#m2VnyfYk#vV4(ers(vjj