added modalDialogue with content of NEWS.md (#44)

* added modalDialogue with content of NEWS.md

* improve style NEWS.md in pop-up

* Refine header and modal style (#43, #38)

* Also updated NEWS.md with dates and development version

Co-authored-by: riccardoporreca <riccardo.porreca@mirai-solutions.com>

DESCRIPTION

@@ -14,7 +14,8 @@ Imports:
     plotly,
     DT,
     RColorBrewer,
-    grid
+    grid,
+    markdown
 Encoding: UTF-8
 LazyData: true
 RoxygenNote: 7.1.0

NAMESPACE

@@ -17,6 +17,7 @@ export(fix_legend_position)
 export(from_contagion_day_bar_facet_plot)
 export(from_contagion_day_bar_plot)
 export(getTableOptions)
+export(get_Covid19_version)
 export(get_daily_data)
 export(get_date_data)
 export(get_timeseries_by_contagion_day_data)
@@ -36,6 +37,7 @@ export(time_evol_line_facet_plot)
 export(time_evol_line_plot)
 import(RColorBrewer)
 import(ggplot2)
+import(markdown)
 import(shiny)
 importFrom(DT,DTOutput)
 importFrom(DT,datatable)

NEWS.md

@@ -1,7 +1,12 @@
-# Covid19 1.0.0
+### Covid19 1.0.0.9000 (development version)
 
-## First versioned release of Covid19
+- The app header was improved: it now shows the app version and change-log in a modal dialog (#38, #43).
 
-Covid19  is a Shiny App for understanding the coronavirus spread and compare their perverse effects between countries.
+
+### Covid19 1.0.0 (2020-03-20)
+
+#### First versioned release of Covid19
+
+Covid19 is a Shiny App for understanding the COVID-19 spread and compare their perverse effects between countries.
 
 The application uses data from the [Johns Hopkins CSSE Repository.](https://github.com/CSSEGISandData/COVID-19)

R/app_server.R

@@ -5,6 +5,8 @@
 #' @import shiny
 #' @importFrom dplyr select
 #' @importFrom tidyr ends_with
+#' @import markdown
+#'
 #' @noRd
 app_server <- function(input, output, session) {
 
@@ -24,4 +26,16 @@ app_server <- function(input, output, session) {
   callModule(mod_global_server, "global", orig_data = orig_data)
   callModule(mod_country_server, "country", orig_data = orig_data)
   callModule(mod_country_comparison_server, "country_comparison", orig_data = orig_data)
+
+  # what is new pop-up
+  observeEvent(input$btn_whatsnew, {
+    showModal(modalDialog(
+      title = "What's New:",
+      includeMarkdown("./NEWS.md"),
+      footer = modalButton("Dismiss"),
+      size = "l",
+      easyClose = TRUE,
+      fade = FALSE
+    ))
+  })
 }

R/app_ui.R

@@ -20,23 +20,27 @@ app_ui <- function(request) {
             a(
               href = "https://github.com/miraisolutions/Covid19",
               target = "_blank",
-              h1("Covid19")
+              span(id = "app-name", "Covid19")
             ),
             a(
               href = "https://github.com/miraisolutions/Covid19/blob/master/NEWS.md",
               target = "_blank",
               span(id = "version", get_Covid19_version())
+            ),
+            actionButton(
+              inputId = "btn_whatsnew",
+              label = "",
+              icon = icon("exclamation-circle")
+              # style = "color: white; background-color: transparent; border-color: transparent; padding: 0px 10px !important; margin: -10px!important; vertical-align: baseline !important;"
             )
           ),
           a(
             href = "https://github.com/CSSEGISandData/COVID-19",
             target = "_blank",
-            div(
+            span(
               id = "subtitle",
-              h3(
-                "Data Repository by Johns Hopkins CSSE:",
-                textOutput("last_update", inline = TRUE)
-              )
+              "Data Repository by Johns Hopkins CSSE:",
+              textOutput("last_update", inline = TRUE)
             )
           )
         ), # end header-left

inst/app/www/style.css

@@ -8,7 +8,7 @@ body {
 
 #header {
   padding-top: 25px;
-  padding-bottom: 5px;
+  padding-bottom: 10px;
   padding-left: 25px;
   padding-right: 25px;
   margin-bottom: 10px;
@@ -23,15 +23,35 @@ body {
   float: left;
 }
 
+#title {
+  margin-top: 0;
+}
+
+#app-name {
+  font-family: inherit;
+  color: white;
+  font-size: 36px;
+  line-height: normal;
+}
+
+
+#version {
+  font-family: inherit;
+  color: white;
+  font-size: 16px;
+}
+
+#subtitle {
+  margin-top: 3px;
+  margin-bottom: 10px;
+  font-size: 16px;
+  color: black;
+}
+
 #header-right {
   float: right;
 }
 
-#sticker-header {
-  float: left;
-  margin-right: 15px;
-  height: 90px;
-}
 
 #footer {
   padding-top: 15px;
@@ -44,6 +64,7 @@ body {
 
 #git-footer {
   float: left;
+  font-size: 16px;
 }
 
 #mirai-logo-header{
@@ -59,13 +80,19 @@ body {
   padding: 0;
 }
 
-#title {
-  margin-top: 0;
+
+
+.modal-body p {
+  margin: 0;
 }
 
-#subtitle{
-  margin-top: 3px;
-  margin-bottom: 10px;
+#btn_whatsnew{
+  color: white;
+  background-color: transparent;
+  border-color: transparent;
+  padding: 0px 10px !important;
+  margin: -10px!important;
+  vertical-align: baseline !important;
 }
 
 h5 {
@@ -81,13 +108,6 @@ h4 {
   color: black;
 }
 
-h1 {
-  font-family: inherit;
-  color: white;
-  text-align: left;
-  display: inline;
-}
-
 h2 {
   font-family: inherit;
   color: #ea8b5b;
@@ -97,26 +117,19 @@ h2 {
   display: inline;
 }
 
-#version {
-  font-family: inherit;
-  color: white;
-  font-size: 16px;
-}
-
 h3 {
   font-family: inherit;
+  margin-top: 0;
   color: #000000;
   font-size: 16px;
   text-align: left;
-  display: inline;
 }
 
 #title a:hover, #title a:visited, #title a:link, #title a:active {
   text-decoration: none;
 }
 
 a {
-  font-size: 16px;
   color: #008cc3;
   text-align: left;
   font-weight: normal;