Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Styling refresh of disconnect dialogue #61

Merged
merged 6 commits into from
Oct 25, 2024
Merged

Styling refresh of disconnect dialogue #61

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
211ddc4
Styling refresh of disconnect dialogue
rmbielby Oct 25, 2024
f3d65a8
Added aria label to disconnect message
rmbielby Oct 25, 2024
6ae05a8
Removed use of important from disconnect dialogue css
rmbielby Oct 25, 2024
5254859
Adjusted some line lengths and switched to using external_links funct…
rmbielby Oct 25, 2024
5be49b5
Merge branch 'main' into enhancement/disconnect-gds-restyle
rmbielby Oct 25, 2024
10b68a2
Updated version
rmbielby Oct 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion DESCRIPTION
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
Package: dfeshiny
Title: DfE R Shiny Standards
Version: 0.5.0
Version: 0.5.1
Authors@R: c(
person("Rich", "Bielby", , "[email protected]", role = c("aut", "cre"),
comment = c(ORCID = "0000-0001-9070-9969")),
Expand Down
4 changes: 4 additions & 0 deletions NEWS.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,7 @@
# dfeshiny 0.5.1

* Refresh of disconnect dialogue message and styling

# dfeshiny 0.5.0

## New features
Expand Down
114 changes: 68 additions & 46 deletions R/custom_disconnect_message.R
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,36 +2,49 @@
#'
#'
#' @description
#' Create the HTML overlay panel to appear when RSConnect disconnects
#' Create the HTML overlay panel to appear when a user loses connection to a dashboard.
#'
#' @param refresh the text to appear that will refresh the page when clicked
#' @param links A list of mirrors or alternative links to the dashboard
#' @param links A vector of possible URLs for the public site. Should mostly just be a single URL,
#' but can be two URLs if an overflow site has been set up
#' @param publication_name The parent publication name
cjrace marked this conversation as resolved.
Show resolved Hide resolved
#' @param publication_link The link to the publication on Explore Education
#' Statistics
#' @param dashboard_title Title of the dashboard
#'
#' @importFrom htmltools tags tagList
#'
#' @return A HTML overlay panel that appears when RSConnect disconnects for a
#' public R Shiny dashboard in DfE
#' @return A HTML overlay panel that appears when a user loses connection to a DfE R Shiny
#' dashboard.
#' @export
#'
#' @examples
cjrace marked this conversation as resolved.
Show resolved Hide resolved
#' custom_disconnect_message(
#' dashboard_title = "DfE Shiny Template",
#' refresh = "Refresh page",
#' links = c(
#' "https://department-for-education.shinyapps.io/dfe-shiny-template/",
#' "https://department-for-education.shinyapps.io/dfe-shiny-template",
#' "https://department-for-education.shinyapps.io/dfe-shiny-template-overflow/"
#' ),
#' publication_name = "Explore Education Statistics Publication",
#' publication_link =
#' "https://explore-education-statistics.service.gov.uk/find-statistics/apprenticeships"
#' )
#'
custom_disconnect_message <- function(refresh = "Refresh page",
links = NULL,
publication_name = NULL,
publication_link = NULL) {
#' custom_disconnect_message(
#' dashboard_title = "DfE Shiny Template",
#' refresh = "Refresh page",
#' links = c(
#' "https://department-for-education.shinyapps.io/dfe-shiny-template"
#' )
#' )
#'
custom_disconnect_message <- function(
refresh = "Refresh page",
dashboard_title = NULL,
links = NULL,
publication_name = NULL,
publication_link = NULL) {
# Check links are valid

is_valid_sites_list <- function(sites) {
Expand All @@ -46,25 +59,37 @@ custom_disconnect_message <- function(refresh = "Refresh page",
stop("You have entered an invalid site link in the links argument.")
}


pub_prefix <- c(
"https://explore-education-statistics.service.gov.uk/find-statistics/",
"https://www.explore-education-statistics.service.gov.uk/find-statistics/",
"https://www.gov.uk/",
"https://gov.uk/"
)

is_valid_publication_link <- function(link) {
startsWith(stringr::str_trim(link), pub_prefix)
}
if (!is.null(publication_link)) {
is_valid_publication_link <- function(link) {
startsWith(stringr::str_trim(link), pub_prefix)
}

if (RCurl::url.exists(publication_link) == FALSE ||
(TRUE %in% is_valid_publication_link(publication_link)) == FALSE || # nolint: [indentation_linter]
publication_link %in% pub_prefix) {
stop("You have entered an invalid publication link in the publication_link
if (RCurl::url.exists(publication_link) == FALSE ||
(TRUE %in% is_valid_publication_link(publication_link)) == FALSE || # nolint: [indentation_linter]
publication_link %in% pub_prefix) {
stop("You have entered an invalid publication link in the publication_link
argument.")
}
}

checkmate::assert_string(refresh)

# Attach CSS from inst/www/css/visually-hidden.css
dependency <- htmltools::htmlDependency(
name = "disconnect-dialogue",
version = as.character(utils::packageVersion("dfeshiny")[[1]]),
src = c(href = "dfeshiny/css"),
stylesheet = "disconnect-dialogue.css"
)

tagList(
tags$script(
paste0(
Expand All @@ -81,48 +106,44 @@ custom_disconnect_message <- function(refresh = "Refresh page",
style = "display: none !important;",
tags$div(
id = "ss-connect-refresh",
tags$p("You've lost connection to the dashboard server - please try
refreshing the page:"),
tags$p(tags$a(
id = "ss-reload-link",
href = "#", "Refresh page",
onclick = "window.location.reload(true);"
)),
role = "alert",
tags$p(
"Sorry, you have lost connection to the",
dashboard_title,
"dashboard at the moment, please ",
tags$a(
id = "ss-reload-link",
href = "#", "refresh the page",
onclick = "window.location.reload(true);",
.noWS = c("after")
),
"."
),
if (length(links) > 1) {
tags$p(
"If this persists, you can also view the dashboard at one of our
mirror sites:",
tags$p(
tags$a(href = links[1], "Site 1"),
" - ",
tags$a(href = links[2], "Site 2"),
if (length(links) == 3) {
"-"
},
if (length(links) == 3) {
tags$a(href = links[3], "Site 3")
}
)
cjrace marked this conversation as resolved.
Show resolved Hide resolved
"If you are still experiencing issues, please try our",
tags$a(href = links[2], "alternative site", .noWS = c("after")),
". Apologies for the inconvenience."
)
},
if (!is.null(publication_name)) {
tags$p(
"All the data used in this dashboard can also be viewed or
downloaded via the ",
tags$a(
"All the data used in this dashboard can also be viewed or downloaded via the ",
dfeshiny::external_link(
href = publication_link,
publication_name
),
"on Explore Education Statistics."
" on Explore Education Statistics."
)
},
tags$p(
"Please contact",
tags$a(
href = "mailto:[email protected]",
"[email protected]"
"Feel free to contact ",
dfeshiny::external_link(
href = "mailto:[email protected]",
"[email protected]",
add_warning = FALSE
),
"with details of any problems with this resource."
" if you require further support."
)
)
),
Expand All @@ -138,5 +159,6 @@ custom_disconnect_message <- function(refresh = "Refresh page",
}"
)
))
)
) |>
htmltools::attachDependencies(dependency, append = TRUE)
}
36 changes: 36 additions & 0 deletions inst/www/css/disconnect-dialogue.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
#ss-connect-dialog { display: none; }
#shiny-disconnected-overlay { display: none; }

#ss-overlay {
background-color: #000000;
opacity: 0.6;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 99998;
overflow: hidden;
cursor: not-allowed;
}

#custom-disconnect-dialog {
background: #ffffff;
color: #000000;
width: full;
transform: translateX(-50%) translateY(-50%);
font-size: 16px;
top: 50%;
position: fixed;
bottom: auto;
left: 50%;
padding: 0.8em 1.5em;
text-align: left;
height: auto;
opacity: 1;
z-index: 99999;
border-style: solid;
border-color: #ffdd00;
border-width: 0.25em;
box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px;
}
23 changes: 18 additions & 5 deletions man/custom_disconnect_message.Rd
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

35 changes: 0 additions & 35 deletions tests/test_dashboard/www/dfe_shiny_gov_style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,41 +231,6 @@ template. 80% works well here to reduce white space on the right hand side.*/
color: #ffffff;
}

#ss-connect-dialog { display: none !important; }
#shiny-disconnected-overlay { display: none !important; }

#ss-overlay {
background-color: #000000 !important;
opacity: 0.6 !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
bottom: 0 !important;
right: 0 !important;
z-index: 99998 !important;
overflow: hidden !important;
cursor: not-allowed !important;
}

#custom-disconnect-dialog {
background: #000000 !important;
color: #FFFFFF !important;
width: full !important;
transform: translateX(-50%) translateY(-50%) !important;
font-size: 16px !important;
top: 50% !important;
position: fixed !important;
bottom: auto !important;
left: 50% !important;
padding: 0.8em 1.5em !important;
text-align: center !important;
height: auto !important;
opacity: 1 !important;
z-index: 99999 !important;
border-radius: 3px !important;
box-shadow: rgba(0, 0, 0, 0.3) 3px 3px 10px !important;
}

.govuk-width-container {
width: 100% !important;
max-width: 100% !important;
Expand Down
Loading