From 3ea34ddeb5c8b4bd60d30957d96ddf57207254a5 Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Thu, 7 Nov 2019 13:00:50 -0800 Subject: [PATCH 01/15] navbar compatibility --- R/themes.R | 10 +- inst/bs3compat/_post_variables.scss | 107 +++++++++++++++---- inst/bs3compat/js/bs3compat.js | 31 ++++++ inst/bs3compat/js/tabs.js | 155 ++++++++++++++++++++++++++++ 4 files changed, 283 insertions(+), 20 deletions(-) create mode 100644 inst/bs3compat/js/bs3compat.js create mode 100644 inst/bs3compat/js/tabs.js diff --git a/R/themes.R b/R/themes.R index a5e421bac..1844a31c5 100644 --- a/R/themes.R +++ b/R/themes.R @@ -69,7 +69,15 @@ bs4_theme_bootswatch <- function(theme = "") { bs4_theme_bs3compat <- function() { bs4_theme( pre = sass_file(system.file("bs3compat", "_pre_variables.scss", package = "bootscss")), - post = sass_file(system.file("bs3compat", "_post_variables.scss", package = "bootscss")) + post = sass_file(system.file("bs3compat", "_post_variables.scss", package = "bootscss")), + deps = list( + htmltools::htmlDependency( + "bs3compat", packageVersion("bootscss"), + package = "bootscss", + src = "bs3compat/js", + script = c("tabs.js", "bs3compat.js") + ) + ) ) } diff --git a/inst/bs3compat/_post_variables.scss b/inst/bs3compat/_post_variables.scss index 048db5aee..47910d31c 100644 --- a/inst/bs3compat/_post_variables.scss +++ b/inst/bs3compat/_post_variables.scss @@ -16,25 +16,6 @@ pre.shiny-code { @extend .form-text; @extend .text-muted; } -/* -/ Shim for navbarMenu() inside tabsetPanel() (or navlistPanel()) -/ Note that the additional CSS intentionally makes it virtually impossible -/ to click the
  • tag, so we have "one source of truth" when we clean up -/ active tags in shiny's tab showing logic -/ https://github.com/rstudio/shiny/blob/2d979d0/srcjs/input_binding_tabinput.js#L41-L63 -*/ -.nav .dropdown-menu li:not(.divider) { - @extend .nav-pills, .dropdown-item; - padding: 0; - a.nav-link { - border: none; - border-radius: 0; - } - a.nav-link:not(.active):hover { - background-color: $light !important; - } -} - .shiny-input-checkboxgroup, .shiny-input-radiogroup { .checkbox, .radio { @extend .form-check; @@ -77,3 +58,91 @@ pre.shiny-code { background: $component-active-bg; color: $component-active-color; } + +// bs4 navbars require .navbar-expand[-sm|-md|-lg|-xl], but bs3 navbars +// don't have them. This selector matches .navbar without .navbar-expand +// and defaults it to .navbar-expand-sm. +.navbar:not(.navbar-expand):not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg):not(.navbar-expand-xl) { + @extend .navbar-expand-sm; +} + +ul.nav.navbar-nav { + flex: 1; + min-width: map-get($container-max-widths, sm) - 30px; +} + +ul.nav.navbar-nav>li:not(.dropdown) { + @extend .nav-item; +} +ul.nav.navbar-nav>li>a { + @extend .nav-link; +} +.navbar.navbar-default { + @extend .navbar-light; + @extend .bg-light; +} +.navbar.navbar-inverse { + color: $navbar-dark-color; + @extend .navbar-dark; + @extend .bg-dark; +} + +// Implement bs3 navbar toggler; used in Rmd websites, i.e. +// https://github.com/rstudio/rmarkdown-website/blob/453e1802b32b5baf1c8a67f80947adcc53e49b7f/_navbar.html +.navbar-toggle { + @extend .navbar-toggler; +} +.navbar-toggle>.icon-bar+.icon-bar { + display: none; +} +.navbar-toggle>.icon-bar:first-child { + @extend .navbar-toggler-icon; +} + +// Fix tab selector borders in bs3. +.nav-tabs>li, +.nav-pills>li { + @extend .nav-item; +} +.nav-tabs>li>a, +.nav-pills>li>a { + @extend .nav-link; +} + +// Active tab/pill. +// +// bs3 uses .nav>li.active>a, bs4 uses .nav>li>a.active or .nav>li.show>a. +// +// My original approach to this was making .nav>li.active @extend .show, but +// after a lot of trial and error I could not get it to fully work. +.nav-tabs>li.active>a { + color: $nav-tabs-link-active-color; + background-color: $nav-tabs-link-active-bg; + border-color: $nav-tabs-link-active-border-color; +} +.nav-pills>li.active>a { + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; +} + +// # DROPDOWNS +// +// In bs3, dropdown menus are .dropdown-menu>li.active>a +// In bs4, dropdown menus are .dropdown-menu>.dropdown-item.active +// +// Also, bs3 dropdowns within tabs/pills are interfered with in bs4 by +// selectors like `.bs-tabs li>a`, making menu items look like tabs. + +.dropdown-menu>li { + @extend .dropdown-item; + a { + display: block; + color: inherit; + border: 0 !important; + border-radius: 0 !important; + } +} +.dropdown-menu>li.divider { + @extend .dropdown-divider; +} + diff --git a/inst/bs3compat/js/bs3compat.js b/inst/bs3compat/js/bs3compat.js new file mode 100644 index 000000000..5aedd4b94 --- /dev/null +++ b/inst/bs3compat/js/bs3compat.js @@ -0,0 +1,31 @@ +(function($) { + if ($.fn.tab.Constructor.VERSION !== "3.4.1") { + (console.warn || console.error || console.log)("bs3compat.js couldn't find bs3 tab impl; bs3 tabs will not be properly supported"); + return; + } + + var bs3TabPlugin = $.fn.tab.noConflict(); + + var EVENT_KEY = "click.bs.tab.data-api"; + var SELECTOR = '[data-toggle="tab"], [data-toggle="pill"]'; + + $(document).off(EVENT_KEY); + $(document).on(EVENT_KEY, SELECTOR, function(event) { + event.preventDefault(); + + var previous = $(this).closest(".nav").find(".active"); + if (previous[0] && previous[0].nodeName === "LI") { + // Bootstrap 3 tabs detected + bs3TabPlugin.call($(this), "show"); + } else { + // Bootstrap 4 tabs detected + $(this).tab("show"); + } + }); + +})(jQuery); + +// bs3 navbar: li.active > a +// bs4 navbar: li > a.active +// bs3 tabset: li.active > a +// bs4 tabset: li > a.active diff --git a/inst/bs3compat/js/tabs.js b/inst/bs3compat/js/tabs.js new file mode 100644 index 000000000..74495dffc --- /dev/null +++ b/inst/bs3compat/js/tabs.js @@ -0,0 +1,155 @@ +/* ======================================================================== + * Bootstrap: tab.js v3.4.1 + * https://getbootstrap.com/docs/3.4/javascript/#tabs + * ======================================================================== + * Copyright 2011-2019 Twitter, Inc. + * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE) + * ======================================================================== */ + + ++function ($) { + 'use strict'; + + // TAB CLASS DEFINITION + // ==================== + + var Tab = function (element) { + // jscs:disable requireDollarBeforejQueryAssignment + this.element = $(element) + // jscs:enable requireDollarBeforejQueryAssignment + } + + Tab.VERSION = '3.4.1' + + Tab.TRANSITION_DURATION = 150 + + Tab.prototype.show = function () { + var $this = this.element + var $ul = $this.closest('ul:not(.dropdown-menu)') + var selector = $this.data('target') + + if (!selector) { + selector = $this.attr('href') + selector = selector && selector.replace(/.*(?=#[^\s]*$)/, '') // strip for ie7 + } + + if ($this.parent('li').hasClass('active')) return + + var $previous = $ul.find('.active:last a') + var hideEvent = $.Event('hide.bs.tab', { + relatedTarget: $this[0] + }) + var showEvent = $.Event('show.bs.tab', { + relatedTarget: $previous[0] + }) + + $previous.trigger(hideEvent) + $this.trigger(showEvent) + + if (showEvent.isDefaultPrevented() || hideEvent.isDefaultPrevented()) return + + var $target = $(document).find(selector) + + this.activate($this.closest('li'), $ul) + this.activate($target, $target.parent(), function () { + $previous.trigger({ + type: 'hidden.bs.tab', + relatedTarget: $this[0] + }) + $this.trigger({ + type: 'shown.bs.tab', + relatedTarget: $previous[0] + }) + }) + } + + Tab.prototype.activate = function (element, container, callback) { + var $active = container.find('> .active') + var transition = callback + && $.support.transition + && ($active.length && $active.hasClass('fade') || !!container.find('> .fade').length) + + function next() { + $active + .removeClass('active') + .find('> .dropdown-menu > .active') + .removeClass('active') + .end() + .find('[data-toggle="tab"]') + .attr('aria-expanded', false) + + element + .addClass('active') + .find('[data-toggle="tab"]') + .attr('aria-expanded', true) + + if (transition) { + element[0].offsetWidth // reflow for transition + element.addClass('in') + } else { + element.removeClass('fade') + } + + if (element.parent('.dropdown-menu').length) { + element + .closest('li.dropdown') + .addClass('active') + .end() + .find('[data-toggle="tab"]') + .attr('aria-expanded', true) + } + + callback && callback() + } + + $active.length && transition ? + $active + .one('bsTransitionEnd', next) + .emulateTransitionEnd(Tab.TRANSITION_DURATION) : + next() + + $active.removeClass('in') + } + + + // TAB PLUGIN DEFINITION + // ===================== + + function Plugin(option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.tab') + + if (!data) $this.data('bs.tab', (data = new Tab(this))) + if (typeof option == 'string') data[option]() + }) + } + + var old = $.fn.tab + + $.fn.tab = Plugin + $.fn.tab.Constructor = Tab + + + // TAB NO CONFLICT + // =============== + + $.fn.tab.noConflict = function () { + $.fn.tab = old + return this + } + + + // TAB DATA-API + // ============ + + var clickHandler = function (e) { + e.preventDefault() + Plugin.call($(this), 'show') + } + + $(document) + .on('click.bs.tab.data-api', '[data-toggle="tab"]', clickHandler) + .on('click.bs.tab.data-api', '[data-toggle="pill"]', clickHandler) + +}(jQuery); From 9a1612b6138260334c672bd3374a18c8dbb42bce Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 8 Nov 2019 12:38:41 -0600 Subject: [PATCH 02/15] Map BS3 navbar positioning class to BS4 positioning utility classes --- inst/bs3compat/_post_variables.scss | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/inst/bs3compat/_post_variables.scss b/inst/bs3compat/_post_variables.scss index 47910d31c..37081921d 100644 --- a/inst/bs3compat/_post_variables.scss +++ b/inst/bs3compat/_post_variables.scss @@ -66,6 +66,18 @@ pre.shiny-code { @extend .navbar-expand-sm; } +// Map BS3 navbar positioning to general utilities +.navbar-fixed-top { + @extend .fixed-top +} +.navbar-fixed-bottom { + @extend .fixed-bottom +} +.navbar-sticky-top { + @extend .sticky-top +} + + ul.nav.navbar-nav { flex: 1; min-width: map-get($container-max-widths, sm) - 30px; From 533ddb6c7a481a06de21ff763651dd4a6c01e247 Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Fri, 8 Nov 2019 11:03:03 -0800 Subject: [PATCH 03/15] Split bs3compat/_post_variables into smaller files --- inst/bs3compat/_components_compat.scss | 7 ++ inst/bs3compat/_dropdown_compat.scss | 20 +++ inst/bs3compat/_nav_compat.scss | 25 ++++ inst/bs3compat/_navbar_compat.scss | 50 ++++++++ inst/bs3compat/_post_variables.scss | 165 +------------------------ inst/bs3compat/_shiny_input.scss | 42 +++++++ inst/bs3compat/_shiny_misc.scss | 9 ++ 7 files changed, 159 insertions(+), 159 deletions(-) create mode 100644 inst/bs3compat/_components_compat.scss create mode 100644 inst/bs3compat/_dropdown_compat.scss create mode 100644 inst/bs3compat/_nav_compat.scss create mode 100644 inst/bs3compat/_navbar_compat.scss create mode 100644 inst/bs3compat/_shiny_input.scss create mode 100644 inst/bs3compat/_shiny_misc.scss diff --git a/inst/bs3compat/_components_compat.scss b/inst/bs3compat/_components_compat.scss new file mode 100644 index 000000000..97ee261cd --- /dev/null +++ b/inst/bs3compat/_components_compat.scss @@ -0,0 +1,7 @@ +.well { + @extend .bg-light; @extend .card; @extend .p-3; +} + +.help-text, .help-block { + @extend .form-text; @extend .text-muted; +} diff --git a/inst/bs3compat/_dropdown_compat.scss b/inst/bs3compat/_dropdown_compat.scss new file mode 100644 index 000000000..d4000ac66 --- /dev/null +++ b/inst/bs3compat/_dropdown_compat.scss @@ -0,0 +1,20 @@ +// # DROPDOWNS +// +// In bs3, dropdown menus are .dropdown-menu>li.active>a +// In bs4, dropdown menus are .dropdown-menu>.dropdown-item.active +// +// Also, bs3 dropdowns within tabs/pills are interfered with in bs4 by +// selectors like `.bs-tabs li>a`, making menu items look like tabs. + +.dropdown-menu>li { + @extend .dropdown-item; + a { + display: block; + color: inherit; + border: 0 !important; + border-radius: 0 !important; + } +} +.dropdown-menu>li.divider { + @extend .dropdown-divider; +} diff --git a/inst/bs3compat/_nav_compat.scss b/inst/bs3compat/_nav_compat.scss new file mode 100644 index 000000000..c337023c0 --- /dev/null +++ b/inst/bs3compat/_nav_compat.scss @@ -0,0 +1,25 @@ +// Fix tab selector borders in bs3. +.nav-tabs>li, +.nav-pills>li { + @extend .nav-item; +} +.nav-tabs>li>a, +.nav-pills>li>a { + @extend .nav-link; +} + +// Active tab/pill. +// +// bs3 uses .nav>li.active>a, bs4 uses .nav>li>a.active or .nav>li.show>a. +// +// My original approach to this was making .nav>li.active @extend .show, but +// after a lot of trial and error I could not get it to fully work. +.nav-tabs>li.active>a { + color: $nav-tabs-link-active-color; + background-color: $nav-tabs-link-active-bg; + border-color: $nav-tabs-link-active-border-color; +} +.nav-pills>li.active>a { + color: $nav-pills-link-active-color; + background-color: $nav-pills-link-active-bg; +} diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss new file mode 100644 index 000000000..72614ae61 --- /dev/null +++ b/inst/bs3compat/_navbar_compat.scss @@ -0,0 +1,50 @@ +// bs4 navbars require .navbar-expand[-sm|-md|-lg|-xl], but bs3 navbars +// don't have them. This selector matches .navbar without .navbar-expand +// and defaults it to .navbar-expand-sm. +.navbar:not(.navbar-expand):not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg):not(.navbar-expand-xl) { + @extend .navbar-expand-sm; +} + +// Map BS3 navbar positioning to general utilities +.navbar-fixed-top { + @extend .fixed-top +} +.navbar-fixed-bottom { + @extend .fixed-bottom +} +.navbar-sticky-top { + @extend .sticky-top +} + +ul.nav.navbar-nav { + flex: 1; + min-width: map-get($container-max-widths, sm) - 30px; +} + +ul.nav.navbar-nav>li:not(.dropdown) { + @extend .nav-item; +} +ul.nav.navbar-nav>li>a { + @extend .nav-link; +} +.navbar.navbar-default { + @extend .navbar-light; + @extend .bg-light; +} +.navbar.navbar-inverse { + color: $navbar-dark-color; + @extend .navbar-dark; + @extend .bg-dark; +} + +// Implement bs3 navbar toggler; used in Rmd websites, i.e. +// https://github.com/rstudio/rmarkdown-website/blob/453e1802b32b5baf1c8a67f80947adcc53e49b7f/_navbar.html +.navbar-toggle { + @extend .navbar-toggler; +} +.navbar-toggle>.icon-bar+.icon-bar { + display: none; +} +.navbar-toggle>.icon-bar:first-child { + @extend .navbar-toggler-icon; +} diff --git a/inst/bs3compat/_post_variables.scss b/inst/bs3compat/_post_variables.scss index 37081921d..a4ba449a0 100644 --- a/inst/bs3compat/_post_variables.scss +++ b/inst/bs3compat/_post_variables.scss @@ -1,160 +1,7 @@ -.well { - @extend .bg-light; @extend .card; @extend .p-3; -} - -// For verbatimTextOutput() -pre.shiny-text-output { - @extend .bg-light; @extend .card; @extend .p-2; -} - -// For code inside of showcase mode -pre.shiny-code { - padding: 0.5rem; -} - -.help-text, .help-block { - @extend .form-text; @extend .text-muted; -} - -.shiny-input-checkboxgroup, .shiny-input-radiogroup { - .checkbox, .radio { - @extend .form-check; - label { - @extend .form-check-label; - } - label > input { - @extend .form-check-input; - } - } - - // Since these inline classes don't have a proper div container - // (they're labels), we borrow just the styling we need from - // .form-check-inline - // https://github.com/rstudio/bs4/blob/7aadd19/inst/node_modules/bootstrap/scss/_forms.scss#L227-L240 - .checkbox-inline, .radio-inline { - padding-left: 0; - margin-right: $form-check-inline-margin-x; - - label > input { - margin-top: 0; - margin-right: $form-check-inline-input-margin-x; - margin-bottom: 0; - } - } -} - -.input-daterange .input-group-addon.input-group-prepend.input-group-append { - padding: inherit; - line-height: inherit; - text-shadow: inherit; - border-width: 0; -} - -.selectize-input.focus { - @extend .form-control:focus; -} - -.selectize-control.multi .selectize-input > div.active { - background: $component-active-bg; - color: $component-active-color; -} - -// bs4 navbars require .navbar-expand[-sm|-md|-lg|-xl], but bs3 navbars -// don't have them. This selector matches .navbar without .navbar-expand -// and defaults it to .navbar-expand-sm. -.navbar:not(.navbar-expand):not(.navbar-expand-sm):not(.navbar-expand-md):not(.navbar-expand-lg):not(.navbar-expand-xl) { - @extend .navbar-expand-sm; -} - -// Map BS3 navbar positioning to general utilities -.navbar-fixed-top { - @extend .fixed-top -} -.navbar-fixed-bottom { - @extend .fixed-bottom -} -.navbar-sticky-top { - @extend .sticky-top -} - - -ul.nav.navbar-nav { - flex: 1; - min-width: map-get($container-max-widths, sm) - 30px; -} - -ul.nav.navbar-nav>li:not(.dropdown) { - @extend .nav-item; -} -ul.nav.navbar-nav>li>a { - @extend .nav-link; -} -.navbar.navbar-default { - @extend .navbar-light; - @extend .bg-light; -} -.navbar.navbar-inverse { - color: $navbar-dark-color; - @extend .navbar-dark; - @extend .bg-dark; -} - -// Implement bs3 navbar toggler; used in Rmd websites, i.e. -// https://github.com/rstudio/rmarkdown-website/blob/453e1802b32b5baf1c8a67f80947adcc53e49b7f/_navbar.html -.navbar-toggle { - @extend .navbar-toggler; -} -.navbar-toggle>.icon-bar+.icon-bar { - display: none; -} -.navbar-toggle>.icon-bar:first-child { - @extend .navbar-toggler-icon; -} - -// Fix tab selector borders in bs3. -.nav-tabs>li, -.nav-pills>li { - @extend .nav-item; -} -.nav-tabs>li>a, -.nav-pills>li>a { - @extend .nav-link; -} - -// Active tab/pill. -// -// bs3 uses .nav>li.active>a, bs4 uses .nav>li>a.active or .nav>li.show>a. -// -// My original approach to this was making .nav>li.active @extend .show, but -// after a lot of trial and error I could not get it to fully work. -.nav-tabs>li.active>a { - color: $nav-tabs-link-active-color; - background-color: $nav-tabs-link-active-bg; - border-color: $nav-tabs-link-active-border-color; -} -.nav-pills>li.active>a { - color: $nav-pills-link-active-color; - background-color: $nav-pills-link-active-bg; -} - -// # DROPDOWNS -// -// In bs3, dropdown menus are .dropdown-menu>li.active>a -// In bs4, dropdown menus are .dropdown-menu>.dropdown-item.active -// -// Also, bs3 dropdowns within tabs/pills are interfered with in bs4 by -// selectors like `.bs-tabs li>a`, making menu items look like tabs. - -.dropdown-menu>li { - @extend .dropdown-item; - a { - display: block; - color: inherit; - border: 0 !important; - border-radius: 0 !important; - } -} -.dropdown-menu>li.divider { - @extend .dropdown-divider; -} +@import "components_compat"; +@import "dropdown_compat"; +@import "navbar_compat"; +@import "nav_compat"; +@import "shiny_input"; +@import "shiny_misc"; diff --git a/inst/bs3compat/_shiny_input.scss b/inst/bs3compat/_shiny_input.scss new file mode 100644 index 000000000..f27e06ad1 --- /dev/null +++ b/inst/bs3compat/_shiny_input.scss @@ -0,0 +1,42 @@ +.shiny-input-checkboxgroup, .shiny-input-radiogroup { + .checkbox, .radio { + @extend .form-check; + label { + @extend .form-check-label; + } + label > input { + @extend .form-check-input; + } + } + + // Since these inline classes don't have a proper div container + // (they're labels), we borrow just the styling we need from + // .form-check-inline + // https://github.com/rstudio/bs4/blob/7aadd19/inst/node_modules/bootstrap/scss/_forms.scss#L227-L240 + .checkbox-inline, .radio-inline { + padding-left: 0; + margin-right: $form-check-inline-margin-x; + + label > input { + margin-top: 0; + margin-right: $form-check-inline-input-margin-x; + margin-bottom: 0; + } + } +} + +.input-daterange .input-group-addon.input-group-prepend.input-group-append { + padding: inherit; + line-height: inherit; + text-shadow: inherit; + border-width: 0; +} + +.selectize-input.focus { + @extend .form-control:focus; +} + +.selectize-control.multi .selectize-input > div.active { + background: $component-active-bg; + color: $component-active-color; +} diff --git a/inst/bs3compat/_shiny_misc.scss b/inst/bs3compat/_shiny_misc.scss new file mode 100644 index 000000000..3762c2253 --- /dev/null +++ b/inst/bs3compat/_shiny_misc.scss @@ -0,0 +1,9 @@ +// For verbatimTextOutput() +pre.shiny-text-output { + @extend .bg-light; @extend .card; @extend .p-2; +} + +// For code inside of showcase mode +pre.shiny-code { + padding: 0.5rem; +} From 96db89c517a33a042115c43ff05314fbbc131b23 Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Fri, 8 Nov 2019 11:09:50 -0800 Subject: [PATCH 04/15] Add navbar test app --- test-apps/bs3-navs/app.R | 91 +++++++++++++++++++++++++ test-apps/bs3-navs/navbar-bs4.html | 41 +++++++++++ test-apps/bs3-navs/navbar-bs4pills.html | 23 +++++++ test-apps/bs3-navs/navbar-bs4tabs.html | 23 +++++++ test-apps/bs3-navs/navbar-rmdsite.html | 24 +++++++ 5 files changed, 202 insertions(+) create mode 100644 test-apps/bs3-navs/app.R create mode 100644 test-apps/bs3-navs/navbar-bs4.html create mode 100644 test-apps/bs3-navs/navbar-bs4pills.html create mode 100644 test-apps/bs3-navs/navbar-bs4tabs.html create mode 100644 test-apps/bs3-navs/navbar-rmdsite.html diff --git a/test-apps/bs3-navs/app.R b/test-apps/bs3-navs/app.R new file mode 100644 index 000000000..2428c576e --- /dev/null +++ b/test-apps/bs3-navs/app.R @@ -0,0 +1,91 @@ +library(bootscss) +library(shiny) + +ui <- fluidPage( + bs4_sass(), + tags$style( + "h4 { margin-top: 48px; text-align: center; }" + ), + + tags$br(), + tags$br(), + tags$br(), + tags$br(), + tags$br(), + + h4("bs3 navbarPage"), + navbarPage("Test", inverse = TRUE, + tabPanel("One", + "One" + ), + tabPanel("Two", + icon = icon("download"), + "Two" + ), + navbarMenu("A submenu", + tabPanel("Five", "Five"), + "---", + tabPanel("Six", "Six"), + tabPanel("Seven", "Seven") + ) + ), + + h4("bs4 navbar"), + includeHTML("navbar-bs4.html"), + + h4("bs3 rmarkdown site navbar"), + p(class = "text-center", "(pinned to top of page)"), + includeHTML("navbar-rmdsite.html"), + + h4("bs3 tabsetPanel"), + tabsetPanel( + tabPanel("Three", + "Three" + ), + tabPanel("Four", + "Four", + icon = icon("cloud") + ), + navbarMenu("Dropdown", + tabPanel("Five", + "Five" + ) + ) + ), + + h4("bs4 tabs"), + includeHTML("navbar-bs4tabs.html"), + + h4("bs3 tabsetPanel(type=\"pills\")"), + tabsetPanel(type = "pills", + tabPanel("Three", + "Three" + ), + tabPanel("Four", + "Four", + icon = icon("cloud") + ), + navbarMenu("Dropdown", + tabPanel("Five", + "Five" + ) + ) + ), + + h4("bs4 pills"), + includeHTML("navbar-bs4pills.html"), + + tags$br(), + tags$br(), + tags$br(), + tags$br() +) + +# .navbar-expand .navbar-nav .nav-link +# .navbar-expand ul.nav.navbar-nav > li > a + +server <- function(input, output, session) { + +} + +shinyApp(ui, server) diff --git a/test-apps/bs3-navs/navbar-bs4.html b/test-apps/bs3-navs/navbar-bs4.html new file mode 100644 index 000000000..3c2e84d7c --- /dev/null +++ b/test-apps/bs3-navs/navbar-bs4.html @@ -0,0 +1,41 @@ + +
    +
    Home
    + +
    diff --git a/test-apps/bs3-navs/navbar-bs4pills.html b/test-apps/bs3-navs/navbar-bs4pills.html new file mode 100644 index 000000000..9231be52d --- /dev/null +++ b/test-apps/bs3-navs/navbar-bs4pills.html @@ -0,0 +1,23 @@ + + +
    +
    Pill 1
    +
    Pill 2
    +
    Pill 3
    +
    diff --git a/test-apps/bs3-navs/navbar-bs4tabs.html b/test-apps/bs3-navs/navbar-bs4tabs.html new file mode 100644 index 000000000..b1edf3d62 --- /dev/null +++ b/test-apps/bs3-navs/navbar-bs4tabs.html @@ -0,0 +1,23 @@ + + +
    +
    Tab 1
    +
    Tab 2
    +
    Tab 3
    +
    diff --git a/test-apps/bs3-navs/navbar-rmdsite.html b/test-apps/bs3-navs/navbar-rmdsite.html new file mode 100644 index 000000000..50de57914 --- /dev/null +++ b/test-apps/bs3-navs/navbar-rmdsite.html @@ -0,0 +1,24 @@ + + From a09e3c6f35f54aefd6423f78ae9eeaebc3d92569 Mon Sep 17 00:00:00 2001 From: Carson Date: Fri, 8 Nov 2019 17:28:21 -0600 Subject: [PATCH 05/15] semi-colons --- inst/bs3compat/_navbar_compat.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/inst/bs3compat/_navbar_compat.scss b/inst/bs3compat/_navbar_compat.scss index 72614ae61..34ba8e429 100644 --- a/inst/bs3compat/_navbar_compat.scss +++ b/inst/bs3compat/_navbar_compat.scss @@ -7,13 +7,13 @@ // Map BS3 navbar positioning to general utilities .navbar-fixed-top { - @extend .fixed-top + @extend .fixed-top; } .navbar-fixed-bottom { - @extend .fixed-bottom + @extend .fixed-bottom; } .navbar-sticky-top { - @extend .sticky-top + @extend .sticky-top; } ul.nav.navbar-nav { From 3112b26177f5284154c67438792a06750c10f629 Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Fri, 8 Nov 2019 16:17:09 -0800 Subject: [PATCH 06/15] Don't include test-apps dir in r package; fix pills example --- .Rbuildignore | 1 + test-apps/bs3-navs/navbar-bs4pills.html | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/.Rbuildignore b/.Rbuildignore index cdadbc29d..70da815c8 100644 --- a/.Rbuildignore +++ b/.Rbuildignore @@ -2,3 +2,4 @@ ^\.Rproj\.user$ inst/node_modules/.yarn-integrity inst/node_modules/bootswatch/.github +^test-apps$ diff --git a/test-apps/bs3-navs/navbar-bs4pills.html b/test-apps/bs3-navs/navbar-bs4pills.html index 9231be52d..d146c5005 100644 --- a/test-apps/bs3-navs/navbar-bs4pills.html +++ b/test-apps/bs3-navs/navbar-bs4pills.html @@ -8,7 +8,7 @@
  • - Link 3 + Link 3
  • From a22e73cbaf2ba25cc29bae6081ac68da8369b671 Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Fri, 8 Nov 2019 16:25:06 -0800 Subject: [PATCH 07/15] Implement $(el).tab("show") for both bs3 and bs4 --- inst/bs3compat/js/bs3compat.js | 29 ++++++++++++++++++++++------- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/inst/bs3compat/js/bs3compat.js b/inst/bs3compat/js/bs3compat.js index 5aedd4b94..50e469473 100644 --- a/inst/bs3compat/js/bs3compat.js +++ b/inst/bs3compat/js/bs3compat.js @@ -1,27 +1,42 @@ (function($) { - if ($.fn.tab.Constructor.VERSION !== "3.4.1") { + if (!$.fn.tab.Constructor.VERSION.match(/^3\./)) { (console.warn || console.error || console.log)("bs3compat.js couldn't find bs3 tab impl; bs3 tabs will not be properly supported"); return; } - var bs3TabPlugin = $.fn.tab.noConflict(); + if (!$.fn.tab.Constructor.VERSION.match(/^4\./)) { + (console.warn || console.error || console.log)("bs3compat.js couldn't find bs4 tab impl; bs3 tabs will not be properly supported"); + return; + } + var bs4TabPlugin = $.fn.tab.noConflict(); + var EVENT_KEY = "click.bs.tab.data-api"; var SELECTOR = '[data-toggle="tab"], [data-toggle="pill"]'; $(document).off(EVENT_KEY); $(document).on(EVENT_KEY, SELECTOR, function(event) { event.preventDefault(); + $(this).tab("show"); + }); - var previous = $(this).closest(".nav").find(".active"); - if (previous[0] && previous[0].nodeName === "LI") { + function TabPlugin(config) { + if ($(this).closest(".nav").find(".nav-item, .nav-link").length === 0) { // Bootstrap 3 tabs detected - bs3TabPlugin.call($(this), "show"); + bs3TabPlugin.call($(this), config); } else { // Bootstrap 4 tabs detected - $(this).tab("show"); + bs4TabPlugin.call($(this), config); } - }); + } + + var noconflict = $.fn.tab; + $.fn.tab = TabPlugin; + $.fn.tab.Constructor = bs4TabPlugin.Constructor; + $.fn.tab.noConflict = function() { + $.fn.tab = noconflict; + return TabPlugin; + ;} })(jQuery); From d93f56eef1cbf0b6bef5f485d9f3f5ea98ec370e Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Fri, 8 Nov 2019 16:48:14 -0800 Subject: [PATCH 08/15] Fix issue where bs3 dropdown
  • can be clicked on instead of --- inst/bs3compat/_dropdown_compat.scss | 17 ++++++++++------- test-apps/bs3-navs/navbar-bs4.html | 6 +++--- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/inst/bs3compat/_dropdown_compat.scss b/inst/bs3compat/_dropdown_compat.scss index d4000ac66..0f4d19585 100644 --- a/inst/bs3compat/_dropdown_compat.scss +++ b/inst/bs3compat/_dropdown_compat.scss @@ -6,14 +6,17 @@ // Also, bs3 dropdowns within tabs/pills are interfered with in bs4 by // selectors like `.bs-tabs li>a`, making menu items look like tabs. -.dropdown-menu>li { +.dropdown-menu>li>a { @extend .dropdown-item; - a { - display: block; - color: inherit; - border: 0 !important; - border-radius: 0 !important; - } +} +.dropdown-menu>li.active>a { + // This @extend works, but it litters `.dropdown-menu>li.active>a` all over + // the bootstrap.css output because it's such a common class. Instead, we + // copy these few properties from from _dropdown.scss. + // @extend .active; + color: $dropdown-link-active-color; + text-decoration: none; + @include gradient-bg($dropdown-link-active-bg); } .dropdown-menu>li.divider { @extend .dropdown-divider; diff --git a/test-apps/bs3-navs/navbar-bs4.html b/test-apps/bs3-navs/navbar-bs4.html index 3c2e84d7c..ac214d89f 100644 --- a/test-apps/bs3-navs/navbar-bs4.html +++ b/test-apps/bs3-navs/navbar-bs4.html @@ -17,10 +17,9 @@ Dropdown
    - Action - Another action + Another link
    - Something else here + A disabled item
  • @@ -38,4 +37,5 @@
    Home
    +
    From 19b59b3aea99ac7d97f21df7c909421b9032a855 Mon Sep 17 00:00:00 2001 From: Joe Cheng Date: Mon, 18 Nov 2019 13:41:03 -0800 Subject: [PATCH 09/15] Fix navbarList; improve dropdowns - navbarList is now supported - navbarPage(position="fixed-bottom") dropdown menus now use poppler - added more test cases to test-apps/bs3-navs --- inst/bs3compat/_nav_compat.scss | 7 + inst/bs3compat/js/bs3compat.js | 26 +++ test-apps/bs3-navs/app.R | 207 ++++++++++++++++++------ test-apps/bs3-navs/navbar-bs4.html | 41 ----- test-apps/bs3-navs/navbar-bs4pills.html | 23 --- test-apps/bs3-navs/navbar-bs4tabs.html | 23 --- test-apps/bs3-navs/navbar-rmdsite.html | 8 +- 7 files changed, 197 insertions(+), 138 deletions(-) delete mode 100644 test-apps/bs3-navs/navbar-bs4.html delete mode 100644 test-apps/bs3-navs/navbar-bs4pills.html delete mode 100644 test-apps/bs3-navs/navbar-bs4tabs.html diff --git a/inst/bs3compat/_nav_compat.scss b/inst/bs3compat/_nav_compat.scss index c337023c0..25ee4e530 100644 --- a/inst/bs3compat/_nav_compat.scss +++ b/inst/bs3compat/_nav_compat.scss @@ -23,3 +23,10 @@ color: $nav-pills-link-active-color; background-color: $nav-pills-link-active-bg; } + +// Support vertical pills +.nav-stacked { + // Don't extend the .flex-column utility, it uses !important + // @extend .flex-column; + flex-direction: column; +} diff --git a/inst/bs3compat/js/bs3compat.js b/inst/bs3compat/js/bs3compat.js index 50e469473..b5257ecc5 100644 --- a/inst/bs3compat/js/bs3compat.js +++ b/inst/bs3compat/js/bs3compat.js @@ -44,3 +44,29 @@ // bs4 navbar: li > a.active // bs3 tabset: li.active > a // bs4 tabset: li > a.active + + +(function($) { + /* + * Bootstrap 4 uses poppler.js to choose what direction to show dropdown + * menus, except in the case of navbars; they assume that navbars are always + * at the top of the page, so this isn't necessary. However, Bootstrap 3 + * explicitly supported bottom-positioned navbars via .navbar-fixed-bottom, + * and .fixed-bottom works on Bootstrap 4 as well. + * + * We monkeypatch the dropdown plugin's _detectNavbar method to return false + * if we're in a bottom-positioned navbar. + */ + if (!$.fn.dropdown.Constructor.prototype._detectNavbar) { + // If we get here, the dropdown plugin's implementation must've changed. + // Someone will need to go into Bootstrap's dropdown.js. + (console.warn || console.error || console.log)("bs3compat.js couldn't detect the dropdown plugin's _detectNavbar method"); + return; + } + + var oldDetectNavbar = $.fn.dropdown.Constructor.prototype._detectNavbar; + $.fn.dropdown.Constructor.prototype._detectNavbar = function() { + return oldDetectNavbar.apply(this, this.arguments) && + !($(this._element).closest('.navbar').filter('.navbar-fixed-bottom, .fixed-bottom').length > 0); + }; +})(jQuery); diff --git a/test-apps/bs3-navs/app.R b/test-apps/bs3-navs/app.R index 2428c576e..aec5f7437 100644 --- a/test-apps/bs3-navs/app.R +++ b/test-apps/bs3-navs/app.R @@ -1,10 +1,123 @@ library(bootscss) library(shiny) +make_bs3_tabs <- function() { + list( + tabPanel("One", + "One" + ), + tabPanel("Two", + icon = icon("download"), + "Two" + ), + navbarMenu("A submenu", + tabPanel("Three", "Three"), + "---", + tabPanel("Four", "Four"), + tabPanel("Five", "Five") + ) + ) +} + + +make_bs4_tabs <- function(id, type = "nav-tabs") { + ns <- NS(paste0("#", id)) + withTags( + ul(class = "nav", + class = type, + li(class = "nav-item", + a("data-toggle" = "tab", + class = "nav-link active", + href = ns("1"), + "Link 1" + ) + ), + li(class = "nav-item", + a("data-toggle" = "tab", + class = "nav-link", + href = ns("2"), + + icon("download"), + "Link 2" + ) + ), + li(class = "nav-item dropdown", + a(class = "nav-link dropdown-toggle", + "data-toggle" = "dropdown", + href = "#", + role = "button", + "aria-haspopup" = "true", + "aria-expanded" = "false", + "Dropdown" + ), + div(class = "dropdown-menu", + a("data-toggle" = "tab", + class = "dropdown-item", + href = ns("3"), + "Link 3" + ), + a("data-toggle" = "tab", + class = "dropdown-item", + href = ns("4"), + "Link 4" + ), + div(class = "dropdown-divider"), + a("data-toggle" = "tab", + class = "dropdown-item disabled", + href = ns("dis-1"), + tabindex = "-1", + "aria-disabled" = "true", + "Disabled Link" + ), + a("data-toggle" = "tab", + class = "dropdown-item disabled", + href = ns("dis-2"), + tabindex = "-1", + "aria-disabled" = "true", + "Another Disabled Link" + ) + ) + ), + li(class = "nav-item", + a("data-toggle" = "tab", + class = "nav-link disabled", + href = ns("dis-3"), + tabindex = "-1", + "aria-disabled" = "true", + "Disabled Link" + ) + ) + ) + ) +} + +make_bs4_tab_contents <- function(id) { + ns <- NS(id) + div(class = "tab-content", + div(class = "tab-pane fade show active", + id = ns("1"), + "Panel 1" + ), + div(class = "tab-pane fade", + id = ns("2"), + "Panel 2" + ), + div(class = "tab-pane fade", + id = ns("3"), + "Panel 3" + ), + div(class = "tab-pane fade", + id = ns("4"), + "Panel 4" + ) + ) +} + + ui <- fluidPage( bs4_sass(), tags$style( - "h4 { margin-top: 48px; text-align: center; }" + "h4 { margin-top: 120px; }" ), tags$br(), @@ -14,66 +127,66 @@ ui <- fluidPage( tags$br(), h4("bs3 navbarPage"), - navbarPage("Test", inverse = TRUE, - tabPanel("One", - "One" - ), - tabPanel("Two", - icon = icon("download"), - "Two" - ), - navbarMenu("A submenu", - tabPanel("Five", "Five"), - "---", - tabPanel("Six", "Six"), - tabPanel("Seven", "Seven") - ) + do.call(navbarPage, rlang::list2( + "bs3 navbarPage", inverse = FALSE, + !!!make_bs3_tabs() + )), + + h4("bs3 navbarPage (inverse)"), + helpText("(Fixed to bottom of page)"), + do.call(navbarPage, rlang::list2( + "bs4 navbarPage (inverse)", inverse = TRUE, position = "fixed-bottom", + !!!make_bs3_tabs() + )), + + h4("bs4 navbar - default"), + tags$nav(class="navbar navbar-expand-sm navbar-light bg-light", + tags$a(class="navbar-brand", href="#", "Navbar"), + make_bs4_tabs("bs4nav", "navbar-nav mr-auto"), ), + make_bs4_tab_contents("bs4nav"), - h4("bs4 navbar"), - includeHTML("navbar-bs4.html"), + h4("bs4 navbar (dark)"), + tags$nav(class="navbar navbar-expand-sm navbar-dark bg-dark", + tags$a(class="navbar-brand", href="#", "Navbar"), + make_bs4_tabs("bs4nav", "navbar-nav mr-auto"), + ), + make_bs4_tab_contents("bs4nav"), + + h4("bs4 navbar (.bg-success)"), + tags$nav(class="navbar navbar-expand-sm navbar-dark bg-success", + tags$a(class="navbar-brand", href="#", "Navbar"), + make_bs4_tabs("bs4nav", "navbar-nav mr-auto"), + ), + make_bs4_tab_contents("bs4nav"), h4("bs3 rmarkdown site navbar"), p(class = "text-center", "(pinned to top of page)"), includeHTML("navbar-rmdsite.html"), h4("bs3 tabsetPanel"), - tabsetPanel( - tabPanel("Three", - "Three" - ), - tabPanel("Four", - "Four", - icon = icon("cloud") - ), - navbarMenu("Dropdown", - tabPanel("Five", - "Five" - ) - ) - ), + do.call(tabsetPanel, rlang::list2( + !!!make_bs3_tabs() + )), h4("bs4 tabs"), - includeHTML("navbar-bs4tabs.html"), + make_bs4_tabs("bs4tabs", "nav-tabs"), + make_bs4_tab_contents("bs4tabs"), h4("bs3 tabsetPanel(type=\"pills\")"), - tabsetPanel(type = "pills", - tabPanel("Three", - "Three" - ), - tabPanel("Four", - "Four", - icon = icon("cloud") - ), - navbarMenu("Dropdown", - tabPanel("Five", - "Five" - ) - ) - ), + do.call(tabsetPanel, rlang::list2( + type = "pills", + !!!make_bs3_tabs() + )), h4("bs4 pills"), - includeHTML("navbar-bs4pills.html"), + make_bs4_tabs("bs4pills", "nav-pills"), + make_bs4_tab_contents("bs4pills"), + + h4("bs3 navlist panel"), + do.call(navlistPanel, rlang::list2( + !!!make_bs3_tabs() + )), tags$br(), tags$br(), diff --git a/test-apps/bs3-navs/navbar-bs4.html b/test-apps/bs3-navs/navbar-bs4.html deleted file mode 100644 index ac214d89f..000000000 --- a/test-apps/bs3-navs/navbar-bs4.html +++ /dev/null @@ -1,41 +0,0 @@ - -
    -
    Home
    - - -
    diff --git a/test-apps/bs3-navs/navbar-bs4pills.html b/test-apps/bs3-navs/navbar-bs4pills.html deleted file mode 100644 index d146c5005..000000000 --- a/test-apps/bs3-navs/navbar-bs4pills.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
    -
    Pill 1
    -
    Pill 2
    -
    Pill 3
    -
    diff --git a/test-apps/bs3-navs/navbar-bs4tabs.html b/test-apps/bs3-navs/navbar-bs4tabs.html deleted file mode 100644 index b1edf3d62..000000000 --- a/test-apps/bs3-navs/navbar-bs4tabs.html +++ /dev/null @@ -1,23 +0,0 @@ - - -
    -
    Tab 1
    -
    Tab 2
    -
    Tab 3
    -
    diff --git a/test-apps/bs3-navs/navbar-rmdsite.html b/test-apps/bs3-navs/navbar-rmdsite.html index 50de57914..dbd24e882 100644 --- a/test-apps/bs3-navs/navbar-rmdsite.html +++ b/test-apps/bs3-navs/navbar-rmdsite.html @@ -8,13 +8,13 @@ - RMarkdown Website + RMarkdown Website