├── .gitignore
├── README.md
├── app.R
├── code
    ├── functions
    │   └── appStart.R
    └── modules
    │   ├── Appearance
    │       ├── moduleChangeTheme.R
    │       ├── moduleColourInputFlat.R
    │       └── moduleNumericInput.R
    │   └── Home
    │       ├── moduleHome.R
    │       └── moduleSidebarMenu.R
├── dashboardThemeDesigner.Rproj
└── doc
    └── live_theme_designer.png


/.gitignore:
--------------------------------------------------------------------------------
 1 | # History files
 2 | .Rhistory
 3 | .Rapp.history
 4 | 
 5 | # Session Data files
 6 | .RData
 7 | 
 8 | # User-specific files
 9 | .Ruserdata
10 | 
11 | # Example code in package build process
12 | *-Ex.R
13 | 
14 | # Output files from R CMD build
15 | /*.tar.gz
16 | 
17 | # Output files from R CMD check
18 | /*.Rcheck/
19 | 
20 | # RStudio files
21 | .Rproj.user/
22 | 
23 | # produced vignettes
24 | vignettes/*.html
25 | vignettes/*.pdf
26 | 
27 | # OAuth2 token, see https://github.com/hadley/httr/releases/tag/v0.3
28 | .httr-oauth
29 | 
30 | # knitr and R markdown default cache directories
31 | *_cache/
32 | /cache/
33 | 
34 | # Temporary files created by R markdown
35 | *.utf8.md
36 | *.knit.md
37 | 
38 | # R Environment Variables
39 | .Renviron
40 | 
41 | # RSConnect
42 | /rsconnect/


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # dashboardThemeDesigner
 2 | 
 3 | Live shinydashboard theme designer, using the <a href="https://github.com/nik01010/dashboardthemes" target="_blank">dashboardthemes</a> package.
 4 | 
 5 | ## How to access:
 6 | https://nik01010.shinyapps.io/dashboardThemeDesigner/
 7 | 
 8 | ![live_theme_designer](doc/live_theme_designer.png)
 9 | 
10 | ## Note:
11 | - This user interface is still in experimental status.
12 | - Not all parameters of dashboardthemes are available in the GUI - several have been hard-coded but these can be changed manually in the resulting theme object.
13 | 


--------------------------------------------------------------------------------
/app.R:
--------------------------------------------------------------------------------
  1 | # Loading packages --------------------------------------------------------
  2 | library(shiny)
  3 | library(shinydashboard)
  4 | library(dashboardthemes)
  5 | library(colourpicker)
  6 | library(shinyalert)
  7 | library(shinyAce)
  8 | library(DT)
  9 | library(glue)
 10 | 
 11 | 
 12 | # Source functions --------------------------------------------------------
 13 | source("./code/functions/appStart.R")
 14 | importShinyModules()
 15 | 
 16 | # Ui ----------------------------------------------------------------------
 17 | ui <- dashboardPage(
 18 |   
 19 |   # Browser window title
 20 |   title = "Theme Designer",
 21 |   
 22 |   # Header ------------------------------------------------------------------
 23 |   header = dashboardHeader(
 24 |     
 25 |     # Shiny app title
 26 |     title = shinyDashboardLogoDIY(
 27 |       boldText = paste(icon("bookmark"), "Theme"),
 28 |       mainText = "Designer",
 29 |       textSize = 16,
 30 |       badgeText = "BETA",
 31 |       badgeTextColor = "white",
 32 |       badgeTextSize = 2,
 33 |       badgeBackColor = "#40E0D0",
 34 |       badgeBorderRadius = 3
 35 |     )
 36 |     
 37 |   ),
 38 |   
 39 |   # Sidebar -----------------------------------------------------------------
 40 |   sidebar = dashboardSidebar(
 41 |     
 42 |     sidebarMenu(
 43 |       
 44 |       id = "tbsSidebar",
 45 |       
 46 |       # Allowing the shinyalert package to be used
 47 |       useShinyalert(),
 48 |       
 49 |       ### sidebar tab links -------------------------------------------------------
 50 |       uiSidebarMenuItems()
 51 |       
 52 |     )
 53 |     
 54 |   ),
 55 |   
 56 |   # Body --------------------------------------------------------------------
 57 |   body = dashboardBody(
 58 |     
 59 |     # Custom theme ------------------------------------------------------------
 60 |     # Starting theme
 61 |     shinyDashboardThemes(theme = "grey_light"),
 62 |     
 63 |     # Default theme
 64 |     uiChangeThemeOutput(),
 65 |     
 66 |     # New theme
 67 |     uiOutput("uiUpdatedTheme"),
 68 |     
 69 |     # Sidebar fix
 70 |     tags$head(
 71 |       tags$style(
 72 |         HTML(
 73 |           "section.sidebar .shiny-bound-input.action-button, section.sidebar .shiny-bound-input.action-link { 
 74 |             margin: 0px; 
 75 |           }"
 76 |         )
 77 |       )
 78 |     ),
 79 |     
 80 |     # Ui tabs -----------------------------------------------------------------
 81 |     tabItems(
 82 |       
 83 |       tabItem(tabName = "tabHome", uiHome()),
 84 |       
 85 |       tabItem(tabName = "tabThemeOutput", uiOutput("uiThemeOutput"))
 86 |       
 87 |     )
 88 |     
 89 |   )
 90 |   
 91 | )
 92 | 
 93 | # Server ------------------------------------------------------------------
 94 | server <- function(input, output, session) 
 95 | {
 96 |   # Loading modules ---------------------------------------------------------
 97 |   callModule(module = serverHome, id = "moduleHome")
 98 | 
 99 |   # Theme settings ----------------------------------------------------------
100 |   # General
101 |   appFontColor <- callModule(module = serverColourInputFlat, id = "appFontColor")
102 |   primaryFontColor <- callModule(module = serverColourInputFlat, id = "primaryFontColor")
103 |   infoFontColor <- callModule(module = serverColourInputFlat, id = "infoFontColor")
104 |   successFontColor <- callModule(module = serverColourInputFlat, id = "successFontColor")  
105 |   warningFontColor <- callModule(module = serverColourInputFlat, id = "warningFontColor")  
106 |   dangerFontColor <- callModule(module = serverColourInputFlat, id = "dangerFontColor")  
107 |   bodyBackColor <- callModule(module = serverColourInputFlat, id = "bodyBackColor")  
108 |   
109 |   # Header
110 |   logoBackColor <- callModule(module = serverColourInputFlat, id = "logoBackColor")
111 |   headerButtonBackColor <- callModule(module = serverColourInputFlat, id = "headerButtonBackColor")
112 |   headerButtonIconColor <- callModule(module = serverColourInputFlat, id = "headerButtonIconColor")
113 |   headerButtonBackColorHover <- callModule(module = serverColourInputFlat, id = "headerButtonBackColorHover")
114 |   headerButtonIconColorHover <- callModule(module = serverColourInputFlat, id = "headerButtonIconColorHover")
115 |   headerBackColor <- callModule(module = serverColourInputFlat, id = "headerBackColor")
116 |   
117 |   # Sidebar
118 |   sidebarBackColor <- callModule(module = serverColourInputFlat, id = "sidebarBackColor")
119 |   sidebarPadding <- callModule(module = serverNumericInput, id = "sidebarPadding")
120 |   sidebarMenuPadding <- callModule(module = serverNumericInput, id = "sidebarMenuPadding")
121 |   sidebarUserTextColor <- callModule(module = serverColourInputFlat, id = "sidebarUserTextColor")
122 |   sidebarSearchBackColor <- callModule(module = serverColourInputFlat, id = "sidebarSearchBackColor")
123 |   sidebarSearchIconColor <- callModule(module = serverColourInputFlat, id = "sidebarSearchIconColor")
124 |   sidebarSearchBorderColor <- callModule(module = serverColourInputFlat, id = "sidebarSearchBorderColor")
125 |   sidebarTabTextColor <- callModule(module = serverColourInputFlat, id = "sidebarTabTextColor")
126 |   sidebarTabTextSize <- callModule(module = serverNumericInput, id = "sidebarTabTextSize")
127 |   sidebarTabBorderWidth <- callModule(module = serverNumericInput, id = "sidebarTabBorderWidth")
128 |   sidebarTabBackColorSelected <- callModule(module = serverColourInputFlat, id = "sidebarTabBackColorSelected")
129 |   sidebarTabTextColorSelected <- callModule(module = serverColourInputFlat, id = "sidebarTabTextColorSelected")
130 |   sidebarTabBackColorHover <- callModule(module = serverColourInputFlat, id = "sidebarTabBackColorHover")
131 |   sidebarTabTextColorHover <- callModule(module = serverColourInputFlat, id = "sidebarTabTextColorHover")
132 |   sidebarTabBorderColorHover <- callModule(module = serverColourInputFlat, id = "sidebarTabBorderColorHover")
133 |   sidebarTabBorderWidthHover <- callModule(module = serverNumericInput, id = "sidebarTabBorderWidthHover")
134 |   
135 |   # Boxes
136 |   boxBackColor <- callModule(module = serverColourInputFlat, id = "boxBackColor")
137 |   boxBorderRadius <- callModule(module = serverNumericInput, id = "boxBorderRadius")
138 |   boxTitleSize <- callModule(module = serverNumericInput, id = "boxTitleSize")
139 |   boxDefaultColor <- callModule(module = serverColourInputFlat, id = "boxDefaultColor") 
140 |   boxPrimaryColor <- callModule(module = serverColourInputFlat, id = "boxPrimaryColor") 
141 |   boxInfoColor <- callModule(module = serverColourInputFlat, id = "boxInfoColor")
142 |   boxSuccessColor <- callModule(module = serverColourInputFlat, id = "boxSuccessColor") 
143 |   boxWarningColor <- callModule(module = serverColourInputFlat, id = "boxWarningColor") 
144 |   boxDangerColor <- callModule(module = serverColourInputFlat, id = "boxDangerColor")
145 |   tabBoxTabColor <- callModule(module = serverColourInputFlat, id = "tabBoxTabColor") 
146 |   tabBoxTabTextSize <- callModule(module = serverNumericInput, id = "tabBoxTabTextSize")
147 |   tabBoxTabTextColor <- callModule(module = serverColourInputFlat, id = "tabBoxTabTextColor")
148 |   tabBoxTabTextColorSelected <- callModule(module = serverColourInputFlat, id = "tabBoxTabTextColorSelected")
149 |   tabBoxBackColor <- callModule(module = serverColourInputFlat, id = "tabBoxBackColor")
150 |   tabBoxHighlightColor <- callModule(module = serverColourInputFlat, id = "tabBoxHighlightColor")
151 |   tabBoxBorderRadius <- callModule(module = serverNumericInput, id = "tabBoxBorderRadius")
152 |   
153 |   # Inputs
154 |   buttonBackColor <- callModule(module = serverColourInputFlat, id = "buttonBackColor")
155 |   buttonTextColor <- callModule(module = serverColourInputFlat, id = "buttonTextColor") 
156 |   buttonBorderColor <- callModule(module = serverColourInputFlat, id = "buttonBorderColor") 
157 |   buttonBorderRadius <- callModule(module = serverNumericInput, id = "buttonBorderRadius")
158 |   buttonBackColorHover <- callModule(module = serverColourInputFlat, id = "buttonBackColorHover")  
159 |   buttonTextColorHover <- callModule(module = serverColourInputFlat, id = "buttonTextColorHover")  
160 |   buttonBorderColorHover <- callModule(module = serverColourInputFlat, id = "buttonBorderColorHover") 
161 |   textboxBackColor <- callModule(module = serverColourInputFlat, id = "textboxBackColor")  
162 |   textboxBorderColor <- callModule(module = serverColourInputFlat, id = "textboxBorderColor") 
163 |   textboxBorderRadius <- callModule(module = serverNumericInput, id = "textboxBorderRadius")
164 |   textboxBackColorSelect <- callModule(module = serverColourInputFlat, id = "textboxBackColorSelect")  
165 |   textboxBorderColorSelect <- callModule(module = serverColourInputFlat, id = "textboxBorderColorSelect") 
166 |   
167 |   # Tables
168 |   tableBackColor <- callModule(module = serverColourInputFlat, id = "tableBackColor") 
169 |   tableBorderColor <- callModule(module = serverColourInputFlat, id = "tableBorderColor") 
170 |   tableBorderTopSize <- callModule(module = serverNumericInput, id = "tableBorderTopSize")
171 |   tableBorderRowSize <- callModule(module = serverNumericInput, id = "tableBorderRowSize")
172 |   
173 |   observe({
174 | 
175 |     themeSettings <- shinyDashboardThemeDIY(
176 |       
177 |       ### general
178 |       appFontFamily = "Arial"
179 |       ,appFontColor = appFontColor$colourValue
180 |       ,primaryFontColor = primaryFontColor$colourValue
181 |       ,infoFontColor = infoFontColor$colourValue
182 |       ,successFontColor = successFontColor$colourValue
183 |       ,warningFontColor = warningFontColor$colourValue
184 |       ,dangerFontColor = dangerFontColor$colourValue
185 |       ,bodyBackColor = bodyBackColor$colourValue
186 |       
187 |       ### header
188 |       ,logoBackColor = logoBackColor$colourValue
189 |       
190 |       ,headerButtonBackColor = headerButtonBackColor$colourValue
191 |       ,headerButtonIconColor = headerButtonIconColor$colourValue
192 |       ,headerButtonBackColorHover = headerButtonBackColorHover$colourValue
193 |       ,headerButtonIconColorHover = headerButtonIconColorHover$colourValue
194 |       
195 |       ,headerBackColor = headerBackColor$colourValue
196 |       ,headerBoxShadowColor = ""                               # TODO: FIX
197 |       ,headerBoxShadowSize = "0px 0px 0px"                     # TODO: FIX
198 |       
199 |       ### sidebar
200 |       ,sidebarBackColor = sidebarBackColor$colourValue
201 |       ,sidebarPadding = sidebarPadding$numericValue
202 |       
203 |       ,sidebarMenuBackColor = "transparent"            # TODO: FIX
204 |       ,sidebarMenuPadding = sidebarMenuPadding$numberValue
205 |       ,sidebarMenuBorderRadius = 0                     # TODO: FIX
206 |       
207 |       ,sidebarShadowRadius = ""                            # TODO: FIX
208 |       ,sidebarShadowColor = "0px 0px 0px"                  # TODO: FIX
209 |       
210 |       ,sidebarUserTextColor = sidebarUserTextColor$colourvalue
211 |       
212 |       ,sidebarSearchBackColor = sidebarSearchBackColor$colourValue
213 |       ,sidebarSearchIconColor = sidebarSearchIconColor$colourValue
214 |       ,sidebarSearchBorderColor = sidebarSearchBorderColor$colourValue
215 |       
216 |       ,sidebarTabTextColor = sidebarTabTextColor$colourValue
217 |       ,sidebarTabTextSize = sidebarTabTextSize$numberValue
218 |       ,sidebarTabBorderStyle = "none"                  # TODO: FIX
219 |       ,sidebarTabBorderColor = "none"                  # TODO: FIX
220 |       ,sidebarTabBorderWidth = sidebarTabBorderWidth$numberValue
221 |       
222 |       ,sidebarTabBackColorSelected = sidebarTabBackColorSelected$colourValue
223 |       ,sidebarTabTextColorSelected = sidebarTabTextColorSelected$colourValue
224 |       ,sidebarTabRadiusSelected = "0px"                # TODO: FIX
225 |       
226 |       ,sidebarTabBackColorHover = sidebarTabBackColorHover$colourValue
227 |       ,sidebarTabTextColorHover = sidebarTabTextColorHover$colourValue
228 |       ,sidebarTabBorderStyleHover = "none solid none none"   # TODO: FIX
229 |       ,sidebarTabBorderColorHover = sidebarTabBorderColorHover$colourValue
230 |       ,sidebarTabBorderWidthHover = sidebarTabBorderWidthHover$numberValue
231 |       ,sidebarTabRadiusHover = "0px"                   # TODO: FIX
232 |       
233 |       ,boxBackColor = boxBackColor$colourValue
234 |       ,boxBorderRadius = boxBorderRadius$numberValue
235 |       ,boxShadowSize = "none"                          # TODO: FIX 
236 |       ,boxShadowColor = ""                             # TODO: FIX 
237 |       ,boxTitleSize = boxTitleSize$numberValue
238 |       ,boxDefaultColor = boxDefaultColor$colourValue
239 |       ,boxPrimaryColor = boxPrimaryColor$colourValue
240 |       ,boxInfoColor = boxInfoColor$colourValue
241 |       ,boxSuccessColor = boxSuccessColor$colourValue
242 |       ,boxWarningColor = boxWarningColor$colourValue
243 |       ,boxDangerColor = boxDangerColor$colourValue
244 |       
245 |       ,tabBoxTabColor = tabBoxTabColor$colourValue
246 |       ,tabBoxTabTextSize = tabBoxTabTextSize$numberValue
247 |       ,tabBoxTabTextColor = tabBoxTabTextColor$colourValue
248 |       ,tabBoxTabTextColorSelected = tabBoxTabTextColorSelected$colourValue
249 |       ,tabBoxBackColor = tabBoxBackColor$colourValue
250 |       ,tabBoxHighlightColor = tabBoxHighlightColor$colourValue
251 |       ,tabBoxBorderRadius = tabBoxBorderRadius$numberValue
252 |       
253 |       ### inputs
254 |       ,buttonBackColor = buttonBackColor$colourValue
255 |       ,buttonTextColor = buttonTextColor$colourValue
256 |       ,buttonBorderColor = buttonBorderColor$colourValue
257 |       ,buttonBorderRadius = buttonBorderRadius$numberValue
258 |       
259 |       ,buttonBackColorHover = buttonBackColorHover$colourValue
260 |       ,buttonTextColorHover = buttonTextColorHover$colourValue
261 |       ,buttonBorderColorHover = buttonBorderColorHover$colourValue
262 |       
263 |       ,textboxBackColor = textboxBackColor$colourValue
264 |       ,textboxBorderColor = textboxBorderColor$colourValue
265 |       ,textboxBorderRadius = textboxBorderRadius$numberValue
266 |       ,textboxBackColorSelect = textboxBackColorSelect$colourValue
267 |       ,textboxBorderColorSelect = textboxBorderColorSelect$colourValue
268 |       
269 |       ### tables
270 |       ,tableBackColor = tableBackColor$colourValue
271 |       ,tableBorderColor = tableBorderColor$colourValue
272 |       ,tableBorderTopSize = tableBorderTopSize$numberValue
273 |       ,tableBorderRowSize = tableBorderRowSize$numberValue
274 |       
275 |     )
276 |     
277 |     themeSettingsText <- glue(
278 |       'customTheme <- shinyDashboardThemeDIY(
279 |         ### general
280 |         appFontFamily = "Arial"
281 |         ,appFontColor = "{appFontColor$colourValue}"
282 |         ,primaryFontColor = "{primaryFontColor$colourValue}"
283 |         ,infoFontColor = "{infoFontColor$colourValue}"
284 |         ,successFontColor = "{successFontColor$colourValue}"
285 |         ,warningFontColor = "{warningFontColor$colourValue}"
286 |         ,dangerFontColor = "{dangerFontColor$colourValue}"
287 |         ,bodyBackColor = "{bodyBackColor$colourValue}"
288 |         
289 |         ### header
290 |         ,logoBackColor = "{logoBackColor$colourValue}"
291 |         
292 |         ,headerButtonBackColor = "{headerButtonBackColor$colourValue}"
293 |         ,headerButtonIconColor = "{headerButtonIconColor$colourValue}"
294 |         ,headerButtonBackColorHover = "{headerButtonBackColorHover$colourValue}"
295 |         ,headerButtonIconColorHover = "{headerButtonIconColorHover$colourValue}"
296 |         
297 |         ,headerBackColor = "{headerBackColor$colourValue}"
298 |         ,headerBoxShadowColor = ""
299 |         ,headerBoxShadowSize = "0px 0px 0px"
300 |         
301 |         ### sidebar
302 |         ,sidebarBackColor = "{sidebarBackColor$colourValue}"
303 |         ,sidebarPadding = "{sidebarPadding$numberValue}"
304 |         
305 |         ,sidebarMenuBackColor = "transparent"
306 |         ,sidebarMenuPadding = "{sidebarMenuPadding$numberValue}"
307 |         ,sidebarMenuBorderRadius = 0
308 |         
309 |         ,sidebarShadowRadius = ""
310 |         ,sidebarShadowColor = "0px 0px 0px"
311 |         
312 |         ,sidebarUserTextColor = "{sidebarUserTextColor$colourValue}"
313 |         
314 |         ,sidebarSearchBackColor = "{sidebarSearchBackColor$colourValue}"
315 |         ,sidebarSearchIconColor = "{sidebarSearchIconColor$colourValue}"
316 |         ,sidebarSearchBorderColor = "{sidebarSearchBorderColor$colourValue}"
317 |         
318 |         ,sidebarTabTextColor = "{sidebarTabTextColor$colourValue}"
319 |         ,sidebarTabTextSize = "{sidebarTabTextSize$numberValue}"
320 |         ,sidebarTabBorderStyle = "none"
321 |         ,sidebarTabBorderColor = "none"
322 |         ,sidebarTabBorderWidth = "{sidebarTabBorderWidth$numberValue}"
323 |         
324 |         ,sidebarTabBackColorSelected = "{sidebarTabBackColorSelected$colourValue}"
325 |         ,sidebarTabTextColorSelected = "{sidebarTabTextColorSelected$colourValue}"
326 |         ,sidebarTabRadiusSelected = "0px"
327 |         
328 |         ,sidebarTabBackColorHover = "{sidebarTabBackColorHover$colourValue}"
329 |         ,sidebarTabTextColorHover = "{sidebarTabTextColorHover$colourValue}"
330 |         ,sidebarTabBorderStyleHover = "none solid none none"
331 |         ,sidebarTabBorderColorHover = "{sidebarTabBorderColorHover$colourValue}"
332 |         ,sidebarTabBorderWidthHover = "{sidebarTabBorderWidthHover$numberValue}"
333 |         ,sidebarTabRadiusHover = "0px"
334 |         
335 |         ### boxes
336 |         ,boxBackColor = "{boxBackColor$colourValue}"
337 |         ,boxBorderRadius = "{boxBorderRadius$numberValue}"
338 |         ,boxShadowSize = "none"
339 |         ,boxShadowColor = ""
340 |         ,boxTitleSize = "{boxTitleSize$numberValue}"
341 |         ,boxDefaultColor = "{boxDefaultColor$colourValue}"
342 |         ,boxPrimaryColor = "{boxPrimaryColor$colourValue}"
343 |         ,boxInfoColor = "{boxInfoColor$colourValue}"
344 |         ,boxSuccessColor = "{boxSuccessColor$colourValue}"
345 |         ,boxWarningColor = "{boxWarningColor$colourValue}"
346 |         ,boxDangerColor = "{boxDangerColor$colourValue}"
347 |         
348 |         ,tabBoxTabColor = "{tabBoxTabColor$colourValue}"
349 |         ,tabBoxTabTextSize = "{tabBoxTabTextSize$numberValue}"
350 |         ,tabBoxTabTextColor = "{tabBoxTabTextColor$colourValue}"
351 |         ,tabBoxTabTextColorSelected = "{tabBoxTabTextColorSelected$colourValue}"
352 |         ,tabBoxBackColor = "{tabBoxBackColor$colourValue}"
353 |         ,tabBoxHighlightColor = "{tabBoxHighlightColor$colourValue}"
354 |         ,tabBoxBorderRadius = "{tabBoxBorderRadius$numberValue}"
355 |         
356 |         ### inputs
357 |         ,buttonBackColor = "{buttonBackColor$colourValue}"
358 |         ,buttonTextColor = "{buttonTextColor$colourValue}"
359 |         ,buttonBorderColor = "{buttonBorderColor$colourValue}"
360 |         ,buttonBorderRadius = "{buttonBorderRadius$numberValue}"
361 |         
362 |         ,buttonBackColorHover = "{buttonBackColorHover$colourValue}"
363 |         ,buttonTextColorHover = "{buttonTextColorHover$colourValue}"
364 |         ,buttonBorderColorHover = "{buttonBorderColorHover$colourValue}"
365 |         
366 |         ,textboxBackColor = "{textboxBackColor$colourValue}"
367 |         ,textboxBorderColor = "{textboxBorderColor$colourValue}"
368 |         ,textboxBorderRadius = "{textboxBorderRadius$numberValue}"
369 |         ,textboxBackColorSelect = "{textboxBackColorSelect$colourValue}"
370 |         ,textboxBorderColorSelect = "{textboxBorderColorSelect$colourValue}"
371 |         
372 |         ### tables
373 |         ,tableBackColor = "{tableBackColor$colourValue}"
374 |         ,tableBorderColor = "{tableBorderColor$colourValue}"
375 |         ,tableBorderTopSize = "{tableBorderTopSize$numberValue}"
376 |         ,tableBorderRowSize = "{tableBorderRowSize$numberValue}"
377 |       )'
378 |     )
379 |     
380 |     output$uiUpdatedTheme <- renderUI({
381 |       themeSettings
382 |     })
383 | 
384 |     output$uiThemeOutput <- renderUI({
385 |       fluidRow(
386 |         
387 |         tabBox(
388 |           id = "tbxThemeOutput",
389 |           selected = "Selected Settings",
390 |           title = "Theme Output",
391 |           width = 12,
392 |           
393 |           tabPanel(
394 |             title = "Selected Settings",
395 |             
396 |             fluidRow(
397 |               
398 |               column(
399 |                 
400 |                 width = 4,
401 |                 
402 |                 br(),
403 |                 
404 |                 h5("Once your choices are finalised, copy the below generated customTheme code and include it in your project."),
405 |                 h5("You will also need to have the dashboardthemes package installed."),
406 |                 
407 |                 aceEditor(
408 |                   outputId = "tbxThemeSettingsOutput",
409 |                   value = as.character(themeSettingsText),
410 |                   mode = "r",
411 |                   theme = "chrome",
412 |                   readOnly = TRUE,
413 |                   height = "350px"
414 |                 ),
415 |                 
416 |                 br(),
417 |                 
418 |                 h5("Then call the object in shinydashboard to apply the custom theme settings."),
419 |                 
420 |                 aceEditor(
421 |                   outputId = "tbxThemeSettingsOutputInstructions",
422 |                   value = "
423 |                     ...
424 |                     ### ui body
425 |                       dashboardBody(
426 |                     
427 |                         ### changing theme
428 |                         customTheme
429 |                     
430 |                         ### ui tabs
431 |                         ,tabItems(
432 |                           tabItem(
433 |                           ...",
434 |                   mode = "r",
435 |                   theme = "chrome",
436 |                   readOnly = TRUE,
437 |                   height = "170px"
438 |                 )
439 |                 
440 |               )
441 |               
442 |             )
443 |             
444 |           )
445 |           
446 |         )
447 |         
448 |       )
449 |       
450 |     })
451 |     
452 |   })
453 |   
454 |   observeEvent(
455 |     input$cmdSidebarSearch,
456 |     {
457 |       shinyalert(
458 |         title = "Oops!",
459 |         text = "This button does not do anything!",
460 |         type = "info"
461 |       )
462 |     }
463 |   )
464 | 
465 | }
466 | 
467 | # Dashboard launcher ------------------------------------------------------
468 | shinyApp(ui = ui, server = server)
469 | 


--------------------------------------------------------------------------------
/code/functions/appStart.R:
--------------------------------------------------------------------------------
 1 | # Import all Shiny module files -------------------------------------------
 2 | importShinyModules <- function(path = "./code/modules/")
 3 | {
 4 |   moduleFiles <- list.files(path = path, pattern = "\\.[Rr]", recursive = TRUE)
 5 |   
 6 |   for(i in 1:length(moduleFiles))
 7 |   {
 8 |     moduleFilePath <- paste0(path, moduleFiles[i])
 9 |     source(moduleFilePath)
10 |   }
11 | }
12 | 


--------------------------------------------------------------------------------
/code/modules/Appearance/moduleChangeTheme.R:
--------------------------------------------------------------------------------
 1 | # Ui functions ------------------------------------------------------------
 2 | uiChangeThemeDropdown <- function(dropDownLabel = "Change Theme", defaultTheme = "grey_light")
 3 | {
 4 |   changeThemeChoices <- c(
 5 |     "Blue gradient" = "blue_gradient",
 6 |     "Flat Red" = "flat_red",
 7 |     "Grey light" = "grey_light",
 8 |     "Grey dark" = "grey_dark",
 9 |     "OneNote" = "onenote",
10 |     "Poor man's Flatly" = "poor_mans_flatly"
11 |     # "Purple gradient" = "purple_gradient"
12 |   )
13 |   
14 |   ns <- NS("moduleChangeTheme")
15 |   dropdown <- tagList(
16 |     selectizeInput(
17 |       inputId = ns("dbxChangeTheme"),
18 |       label = dropDownLabel,
19 |       choices = changeThemeChoices,
20 |       selected = defaultTheme
21 |     )
22 |   )
23 |   
24 |   return(dropdown)
25 | }
26 | 
27 | uiChangeThemeOutput <- function()
28 | {
29 |   ns <- NS("moduleChangeTheme")
30 |   themeOutput <- tagList(
31 |     uiOutput(ns("uiChangeTheme"))
32 |   )
33 |   
34 |   return(themeOutput)
35 | }
36 | 
37 | 
38 | # Server functions --------------------------------------------------------
39 | serverChangeTheme <- function(input, output, session)
40 | {
41 |   observeEvent(
42 |     input$dbxChangeTheme, 
43 |     {
44 |       output$uiChangeTheme <- renderUI({
45 |         shinyDashboardThemes(theme = input$dbxChangeTheme)
46 |       })
47 |     }
48 |   )
49 | }


--------------------------------------------------------------------------------
/code/modules/Appearance/moduleColourInputFlat.R:
--------------------------------------------------------------------------------
 1 | uiColourInputFlat <- function(namespaceId, label, default) {
 2 |   ns <- NS(namespaceId)
 3 |   
 4 |   ui <- tagList(
 5 |     colourInput(
 6 |       inputId = ns("colourValue"),
 7 |       label = label,
 8 |       value = default,
 9 |       showColour = "both"
10 |     )
11 |   )
12 |   
13 |   return(ui)
14 | }
15 | 
16 | serverColourInputFlat <- function(input, output, session) {
17 |   settings <- reactiveValues()
18 |   
19 |   observe({
20 |     settings$colourValue = input$colourValue
21 |   })
22 |   
23 |   return(settings)
24 | }
25 | 


--------------------------------------------------------------------------------
/code/modules/Appearance/moduleNumericInput.R:
--------------------------------------------------------------------------------
 1 | uiNumericInput <- function(namespaceId, label, default) {
 2 |   ns <- NS(namespaceId)
 3 |   
 4 |   ui <- tagList(
 5 |     numericInput(
 6 |       inputId = ns("numberValue"),
 7 |       label = label,
 8 |       value = default,
 9 |       min = 0,
10 |       max = 1000,
11 |       step = 1
12 |     )
13 |   )
14 |   
15 |   return(ui)
16 | }
17 | 
18 | serverNumericInput <- function(input, output, session) {
19 |   settings <- reactiveValues()
20 |   
21 |   observe({
22 |     settings$numberValue = input$numberValue
23 |   })
24 |   
25 |   return(settings)
26 | }
27 | 


--------------------------------------------------------------------------------
/code/modules/Home/moduleHome.R:
--------------------------------------------------------------------------------
  1 | # Ui functions ------------------------------------------------------------
  2 | uiHome <- function()
  3 | {
  4 |   ns <- NS("moduleHome")
  5 |   userInterfaceOutput <- tagList(
  6 |     uiOutput(ns("uiHome"))
  7 |   )
  8 |   
  9 |   return(userInterfaceOutput)
 10 | }
 11 | 
 12 | 
 13 | # Server functions --------------------------------------------------------
 14 | serverHome <- function(input, output, session)
 15 | {
 16 |   ns <- NS("moduleHome")
 17 |   
 18 |   # Tab Ui
 19 |   output$uiHome <- renderUI({
 20 |     
 21 |     tagList(
 22 | 
 23 |       tabBox(
 24 |         id = "tbxThemeSettings",
 25 |         selected = "General",
 26 |         title = "Theme Settings",
 27 |         width = 12,
 28 |         
 29 |         tabPanel(
 30 |           title = "General",
 31 |           
 32 |           fluidRow(
 33 |             
 34 |             column(
 35 |               
 36 |               width = 2,
 37 |               
 38 |               br(),
 39 |               
 40 |               div(
 41 |                 style = "font-size: 80%;",
 42 |                 
 43 |                 verbatimTextOutput(ns("appFontFamily")),
 44 |                 
 45 |                 uiColourInputFlat(namespaceId = "appFontColor", label = "App Font Colour", default = "rgb(45,45,45)"),
 46 |                 uiColourInputFlat(namespaceId = "primaryFontColor", label = "Primary Font Colour", default = "rgb(15,15,15)"),
 47 |                 uiColourInputFlat(namespaceId = "infoFontColor", label = "Info Font Colour", default = "rgb(15,15,15)"),
 48 |                 uiColourInputFlat(namespaceId = "successFontColor", label = "Success Font Colour", default = "rgb(15,15,15)"),
 49 |                 uiColourInputFlat(namespaceId = "warningFontColor", label = "Warning Font Colour", default = "rgb(15,15,15)"),
 50 |                 uiColourInputFlat(namespaceId = "dangerFontColor", label = "Danger Font Colour", default = "rgb(15,15,15)"),
 51 |                 uiColourInputFlat(namespaceId = "bodyBackColor", label = "Body Background Colour", default = "rgb(240,240,240)")
 52 |               )
 53 | 
 54 |             ),
 55 |             
 56 |             column(
 57 |               
 58 |               width = 9,
 59 |               offset = 1,
 60 |               
 61 |               h3("Examples:"),
 62 |               hr(),
 63 |               
 64 |               h1("Text size: h1"),
 65 |               h2("Text size: h1"),
 66 |               h3("Text size: h1"),
 67 |               h4("Text size: h1"),
 68 |               h5("Text size: h1"),
 69 |               h6("Text size: h6")
 70 |               
 71 |             )#,
 72 |             
 73 |             # column(
 74 |             #   
 75 |             #   width = 2,
 76 |             #   
 77 |             #   h3("Primary text", class = "text-primary"),
 78 |             #   h3("Info text", class = "text-info"),
 79 |             #   h3("Success text", class = "text-success"),
 80 |             #   h3("Warning text", class = "text-warning"),
 81 |             #   h3("Danger text", class = "text-danger")
 82 |             #   
 83 |             # )
 84 |             
 85 |           )
 86 |           
 87 |         ),
 88 |         
 89 |         tabPanel(
 90 |           title = "Header",
 91 |           
 92 |           fluidRow(
 93 |             
 94 |             column(
 95 |               
 96 |               width = 2,
 97 |               
 98 |               br(),
 99 |               
100 |               div(
101 |                 style = "font-size: 80%;",
102 |                 
103 |                 uiColourInputFlat(namespaceId = "logoBackColor", label = "Logo Background Colour", default = "rgb(120,120,120)"),
104 |                 uiColourInputFlat(namespaceId = "headerButtonBackColor", label = "Header Button Background Colour", default = "rgb(120,120,120)"),
105 |                 uiColourInputFlat(namespaceId = "headerButtonIconColor", label = "Header Button Icon Colour", default = "rgb(220,220,220)"),
106 |                 uiColourInputFlat(namespaceId = "headerButtonBackColorHover", label = "Header Button Background Colour Hover", default = "rgb(100,100,100)"),
107 |                 uiColourInputFlat(namespaceId = "headerButtonIconColorHover", label = "Header Button Icon Colour Hover", default = "rgb(60,60,60)"),
108 |                 uiColourInputFlat(namespaceId = "headerBackColor", label = "Header Background Colour", default = "rgb(120,120,120)")
109 |                 
110 |                 # TODO: FIX THESE
111 |                 # headerBoxShadowColor
112 |                 # headerBoxShadowSize
113 |               )
114 |               
115 |             )
116 |             
117 |           )
118 | 
119 |         ),
120 |         
121 |         tabPanel(
122 |           title = "Sidebar",
123 |           
124 |           fluidRow(
125 |             
126 |             column(
127 |               
128 |               width = 2,
129 |               
130 |               br(),
131 |               
132 |               div(
133 |                 style = "font-size: 80%;",
134 |               
135 |                 uiColourInputFlat(namespaceId = "sidebarBackColor", label = "Sidebar Background Colour", default = "rgb(255,255,255)"),
136 |                 uiNumericInput(namespaceId = "sidebarPadding", label = "Sidebar Padding", default = 0),
137 |                 uiNumericInput(namespaceId = "sidebarMenuPadding", label = "Sidebar Menu Padding", default = 0),
138 |                 uiColourInputFlat(namespaceId = "sidebarUserTextColor", label = "Sidebar User Text Colour", default = "rgb(115,115,115)"),
139 |                 uiColourInputFlat(namespaceId = "sidebarSearchBackColor", label = "Sidebar Search Background Colour", default = "rgb(240,240,240)"),
140 |                 uiColourInputFlat(namespaceId = "sidebarSearchIconColor", label = "Sidebar Search Icon Colour", default = "rgb(100,100,100)"),
141 |                 uiColourInputFlat(namespaceId = "sidebarSearchBorderColor", label = "Sidebar Search Border Colour", default = "rgb(220,220,220)")
142 |                 
143 |                 # TODO: FIX THESE
144 |                 # sidebarMenuBorderRadius
145 |               )
146 |               
147 |             ),
148 |             
149 |             column(
150 |               
151 |               width = 2,
152 |               
153 |               br(),
154 |               
155 |               div(
156 |                 style = "font-size: 80%;",
157 |                 
158 |                 uiColourInputFlat(namespaceId = "sidebarTabTextColor", label = "Sidebar Tab Text Colour", default = "rgb(100,100,100)"),
159 |                 uiNumericInput(namespaceId = "sidebarTabTextSize", label = "Sidebar Tab Text Size", default = 14),
160 |                 uiNumericInput(namespaceId = "sidebarTabBorderWidth", label = "Sidebar Tab Border Width", default = 0),
161 |                 uiColourInputFlat(namespaceId = "sidebarTabBackColorSelected", label = "Sidebar Tab Background Colour Selected", default = "rgb(230,230,230)"),
162 |                 uiColourInputFlat(namespaceId = "sidebarTabTextColorSelected", label = "Sidebar Tab Text Colour Selected", default = "rgb(0,0,0)"),
163 |                 uiColourInputFlat(namespaceId = "sidebarTabBackColorHover", label = "Sidebar Tab Background Colour Hover", default = "rgb(245,245,245)"),
164 |                 uiColourInputFlat(namespaceId = "sidebarTabTextColorHover", label = "Sidebar Tab Text Colour Hover", default = "rgb(0,0,0)"),
165 |                 uiColourInputFlat(namespaceId = "sidebarTabBorderColorHover", label = "Sidebar Tab Border Colour Hover", default = "rgb(200,200,200)"),
166 |                 uiNumericInput(namespaceId = "sidebarTabBorderWidthHover", label = "Sidebar Tab Border Width Hover", default = 4)
167 |                 
168 |                 
169 |                 # TODO: FIX THESE:
170 |                 # sidebarMenuBackColor
171 |                 # sidebarShadowRadius
172 |                 # sidebarShadowColor 
173 |                 # sidebarTabBorderStyle 
174 |                 # sidebarTabBorderColor 
175 |                 # sidebarTabRadiusSelected 
176 |                 # sidebarTabBorderStyleHover
177 |                 # sidebarTabRadiusHover
178 |               )
179 | 
180 |             )
181 |             
182 |           )
183 |           
184 |         ),
185 |         
186 |         tabPanel(
187 |           title = "Boxes",
188 |           
189 |           fluidRow(
190 |             
191 |             column(
192 |               
193 |               width = 2,
194 |               
195 |               br(),
196 |               
197 |               div(
198 |                 style = "font-size: 80%;",
199 |                 
200 |                 uiColourInputFlat(namespaceId = "boxBackColor", label = "Box Background Colour", default = "rgb(255,255,255)"),
201 |                 uiNumericInput(namespaceId = "boxBorderRadius", label = "Box Border Radius", default = 5),
202 |                 uiNumericInput(namespaceId = "boxTitleSize", label = "Box Title Size", default = 18),
203 |                 uiColourInputFlat(namespaceId = "boxDefaultColor", label = "Box Default Colour", default = "rgb(225,225,225)"),
204 |                 uiColourInputFlat(namespaceId = "boxPrimaryColor", label = "Box Primary Colour", default = "rgb(95,155,213)"),
205 |                 uiColourInputFlat(namespaceId = "boxInfoColor", label = "Box Info Colour", default = "rgb(180,180,180)"),
206 |                 uiColourInputFlat(namespaceId = "boxSuccessColor", label = "Box Success Colour", default = "rgb(112,173,71)"),
207 |                 uiColourInputFlat(namespaceId = "boxWarningColor", label = "Box Warning Colour", default = "rgb(237,125,49)"),
208 |                 uiColourInputFlat(namespaceId = "boxDangerColor", label = "Box Danger Colour", default = "rgb(232,76,34)")
209 |               )
210 |               
211 |               
212 |             ),
213 |             
214 |             column(
215 |               
216 |               width = 2,
217 |               
218 |               br(),
219 |               
220 |               div(
221 |                 style = "font-size: 80%;",
222 |                 
223 |                 uiColourInputFlat(namespaceId = "tabBoxTabColor", label = "TabBox Tab Colour", default = "rgb(248,248,248)"),
224 |                 uiNumericInput(namespaceId = "tabBoxTabTextSize", label = "TabBox Tab Text Size", default = 14),
225 |                 uiColourInputFlat(namespaceId = "tabBoxTabTextColor", label = "TabBox Tab Text Colour", default = "rgb(100,100,100)"),
226 |                 uiColourInputFlat(namespaceId = "tabBoxTabTextColorSelected", label = "TabBox Tab Text Colour Selected", default = "rgb(45,45,45)"),
227 |                 uiColourInputFlat(namespaceId = "tabBoxBackColor", label = "TabBox Background Colour", default = "rgb(248,248,248)"),
228 |                 uiColourInputFlat(namespaceId = "tabBoxHighlightColor", label = "TabBox Highlight Colour", default = "rgb(200,200,200)"),
229 |                 uiNumericInput(namespaceId = "tabBoxBorderRadius", label = "TabBox Border Radius", default = 5)
230 |                 
231 |                 # TODO: FIX THESE
232 |                 # boxShadowSize
233 |                 # boxShadowColor
234 |               )
235 |               
236 |             ),
237 |             
238 |             column(
239 |               
240 |               width = 7,
241 |               offset = 1,
242 |               
243 |               h3("Examples:"),
244 |               hr(),
245 |               
246 |               fluidRow(
247 |                 
248 |                 box(
249 |                   title = "Box: default",
250 |                   height = 90,
251 |                   width = 2
252 |                 ),
253 |                 
254 |                 box(
255 |                   title = "Box: no header",
256 |                   height = 90,
257 |                   width = 2,
258 |                   solidHeader = TRUE,
259 |                 )
260 |                 
261 |               ),
262 |               
263 |               fluidRow(
264 |                 
265 |                 box(
266 |                   title = "Box: primary",
267 |                   height = 90,
268 |                   status = "primary",
269 |                   width = 2
270 |                 ),
271 |                 
272 |                 box(
273 |                   title = "Box: info",
274 |                   height = 90,
275 |                   status = "info",
276 |                   width = 2
277 |                 ),
278 |                 
279 |                 box(
280 |                   title = "Box: success",
281 |                   height = 90,
282 |                   status = "success",
283 |                   width = 2
284 |                 ),
285 |                 
286 |                 box(
287 |                   title = "Box: warning",
288 |                   height = 90,
289 |                   status = "warning",
290 |                   width = 2
291 |                 ),
292 |                 
293 |                 box(
294 |                   title = "Box: danger",
295 |                   height = 90,
296 |                   status = "danger",
297 |                   width = 2
298 |                 )
299 |                 
300 |               ),
301 |               
302 |               fluidRow(
303 |                 
304 |                 box(
305 |                   title = "Box: primary",
306 |                   height = 90,
307 |                   status = "primary",
308 |                   width = 2,
309 |                   solidHeader = TRUE
310 |                 ),
311 |                 
312 |                 box(
313 |                   title = "Box: info",
314 |                   height = 90,
315 |                   status = "info",
316 |                   width = 2,
317 |                   solidHeader = TRUE
318 |                 ),
319 |                 
320 |                 box(
321 |                   title = "Box: success",
322 |                   height = 90,
323 |                   status = "success",
324 |                   width = 2,
325 |                   solidHeader = TRUE
326 |                 ),
327 |                 
328 |                 box(
329 |                   title = "Box: warning",
330 |                   height = 90,
331 |                   status = "warning",
332 |                   width = 2,
333 |                   solidHeader = TRUE
334 |                 ),
335 |                 
336 |                 box(
337 |                   title = "Box: danger",
338 |                   height = 90,
339 |                   status = "danger",
340 |                   width = 2,
341 |                   solidHeader = TRUE
342 |                 )
343 |                 
344 |               ),
345 |               
346 |               fluidRow(
347 |                 
348 |                 box(
349 |                   title = "Box: collapsible",
350 |                   h5("Content row"),
351 |                   h5("Additional content row"),
352 |                   solidHeader = TRUE,
353 |                   collapsible = TRUE,
354 |                   collapsed = FALSE,
355 |                   width = 4
356 |                 ),
357 |                 
358 |                 box(
359 |                   title = "Box: collapsible",
360 |                   h5("Content row"),
361 |                   h5("Additional content row"),
362 |                   collapsible = TRUE,
363 |                   collapsed = FALSE,
364 |                   width = 4
365 |                 )
366 |                 
367 |               ),
368 |               
369 |               fluidRow(
370 |                 
371 |                 box(
372 |                   title = "Box: collapsed",
373 |                   h5("Content row"),
374 |                   collapsible = TRUE,
375 |                   collapsed = TRUE,
376 |                   status = "warning",
377 |                   width =  4
378 |                 ),
379 |                 
380 |                 box(
381 |                   title = "Box: collapsed",
382 |                   h5("Content row"),
383 |                   collapsible = TRUE,
384 |                   collapsed = TRUE,
385 |                   status = "danger",
386 |                   width =  4
387 |                 )
388 |                 
389 |               ),
390 |               
391 |               fluidRow(
392 |                 
393 |                 box(
394 |                   title = "Box: collapsed (coloured)",
395 |                   h5("Content row"),
396 |                   h5("Additional content row"),
397 |                   collapsible = TRUE,
398 |                   collapsed = TRUE,
399 |                   solidHeader = TRUE,
400 |                   status = "warning",
401 |                   width =  4
402 |                 ),
403 |                 
404 |                 box(
405 |                   title = "Box: collapsed (coloured)",
406 |                   h5("Content row"),
407 |                   h5("Additional content row"),
408 |                   collapsible = TRUE,
409 |                   collapsed = TRUE,
410 |                   solidHeader = TRUE,
411 |                   status = "danger",
412 |                   width =  4
413 |                 )
414 |                 
415 |               )
416 |               
417 |             )
418 |             
419 |           )
420 |           
421 |         ),
422 |         
423 |         tabPanel(
424 |           title = "Inputs",
425 |           
426 |           fluidRow(
427 |             
428 |             column(
429 |               
430 |               width = 2,
431 |               
432 |               br(),
433 |               
434 |               div(
435 |                 style = "font-size: 80%;",
436 |                 
437 |                 uiColourInputFlat(namespaceId = "buttonBackColor", label = "Button Background Colour", default = "rgb(215,215,215)"),
438 |                 uiColourInputFlat(namespaceId = "buttonTextColor", label = "Button Text Colour", default = "rgb(45,45,45)"),
439 |                 uiColourInputFlat(namespaceId = "buttonBorderColor", label = "Button Border Colour", default = "rgb(150,150,150)"),
440 |                 uiNumericInput(namespaceId = "buttonBorderRadius", label = "Button Border Radius", default = 5),
441 |                 uiColourInputFlat(namespaceId = "buttonBackColorHover", label = "Button Background Colour Hover", default = "rgb(190,190,190)"),
442 |                 uiColourInputFlat(namespaceId = "buttonTextColorHover", label = "Button Text Colour Hover", default = "rgb(0,0,0)"),
443 |                 uiColourInputFlat(namespaceId = "buttonBorderColorHover", label = "Button Border Colour Hover", default = "rgb(150,150,150)")
444 |               )
445 |               
446 |             ),
447 |             
448 |             column(
449 |               
450 |               width = 2,
451 |               
452 |               br(),
453 |               
454 |               div(
455 |                 style = "font-size: 80%;",
456 |                 
457 |                 uiColourInputFlat(namespaceId = "textboxBackColor", label = "Textbox Background Colour", default = "rgb(255,255,255)"),
458 |                 uiColourInputFlat(namespaceId = "textboxBorderColor", label = "Textbox Border Colour", default = "rgb(118,118,118)"),
459 |                 uiNumericInput(namespaceId = "textboxBorderRadius", label = "Textbox Border Radius", default = 5),
460 |                 uiColourInputFlat(namespaceId = "textboxBackColorSelect", label = "Textbox Background Colour Selected", default = "rgb(245,245,245)"),
461 |                 uiColourInputFlat(namespaceId = "textboxBorderColorSelect", label = "Textbox Border Colour Selected", default = "rgb(108,108,108)")
462 |               )
463 | 
464 |             ),
465 |             
466 |             column(
467 |               
468 |               width = 7,
469 |               offset = 1,
470 |               
471 |               h3("Examples:"),
472 |               hr(),
473 |               
474 |               column(
475 |                 
476 |                 width = 3,
477 |                 
478 |                 selectInput(
479 |                   inputId = ns("dbxSelectInput"),
480 |                   label = "Select Input",
481 |                   choices = c(
482 |                     "Option 1",
483 |                     "Option 2",
484 |                     "Option 3",
485 |                     "Option 4",
486 |                     "Option 5"
487 |                   ),
488 |                   selected = TRUE,
489 |                   multiple = FALSE
490 |                 ),
491 |                 
492 |                 selectizeInput(
493 |                   inputId = ns("dbxSelectizeInput"),
494 |                   label = "Selectize Input (Multiple)",
495 |                   choices = c(
496 |                     "Option 1", "Option 2", "Option 3", "Option 4", "Option 5", "Option 6", "Option 7", "Option 8"
497 |                   ),
498 |                   selected = c(
499 |                     "Option 1", "Option 2", "Option 3", "Option 4", "Option 5"
500 |                   ),
501 |                   multiple = TRUE
502 |                 ),
503 |                 
504 |                 textInput(
505 |                   inputId = ns("txtTextInput"),
506 |                   label = "Text Input",
507 |                   value = NULL,
508 |                   placeholder = "Write here..."
509 |                 ),
510 |                 
511 |                 dateInput(
512 |                   inputId = ns("dteDateInput"),
513 |                   label = "Date Input",
514 |                   value = Sys.Date(),
515 |                   weekstart = 1
516 |                 )
517 |                 
518 |               ),
519 |               
520 |               column(
521 |                 
522 |                 width = 3,
523 |                 offset = 1,
524 |                
525 |                 h5(strong("Button: Plain")),
526 |                 actionButton(
527 |                   inputId = ns("cmdActionButton"),
528 |                   label = "Press to Start",
529 |                   width = 198
530 |                 ),
531 |                 
532 |                 h5(strong("Button: Icon")),
533 |                 actionButton(
534 |                   inputId = ns("cmdActionButtonIcon"),
535 |                   label = "Press to Start",
536 |                   icon = icon("gear"),
537 |                   width = 198
538 |                 ),
539 |                 
540 |                 h5(strong("Button: no label")),
541 |                 actionButton(
542 |                   inputId = ns("cmdActionButtonNoLabel1"),
543 |                   label = NULL,
544 |                   icon = icon("envelope"),
545 |                   width = 97
546 |                 ),
547 |                 actionButton(
548 |                   inputId = ns("cmdActionButtonNoLabel2"),
549 |                   label = NULL,
550 |                   icon = icon("trash"),
551 |                   width = 97
552 |                 )
553 |                  
554 |               )
555 |               
556 |             )
557 |             
558 |           )
559 |           
560 |         ),
561 |         
562 |         tabPanel(
563 |           title = "Tables",
564 |           
565 |           fluidRow(
566 |             
567 |             column(
568 |               
569 |               width = 2,
570 |               
571 |               br(),
572 |               
573 |               div(
574 |                 style = "font-size: 80%;",
575 |                 
576 |                 uiColourInputFlat(namespaceId = "tableBackColor", label = "Table Background Colour", default = "rgb(248,248,248)"),
577 |                 uiColourInputFlat(namespaceId = "tableBorderColor", label = "Table Border Colour", default = "rgb(238,238,238)"),
578 |                 uiNumericInput(namespaceId = "tableBorderTopSize", label = "Table Border Top Size", default = 1),
579 |                 uiNumericInput(namespaceId = "tableBorderRowSize", label = "Table Border Row Size", default = 1)
580 |               )
581 |               
582 |             ),
583 |             
584 |             column(
585 |               
586 |               width = 9,
587 |               offset = 1,
588 |               
589 |               h3("Examples:"),
590 |               hr(),
591 |               
592 |               column(
593 |                 
594 |                 width = 4,
595 |                 
596 |                 h4("Table"),
597 |                 tableOutput(ns("tblTable"))
598 |                 
599 |               ),
600 |               
601 |               column(
602 |                 
603 |                 width = 8,
604 |                 
605 |                 h4("DataTable"),
606 |                 div(
607 |                   style = "font-size: 80%;",
608 |                   dataTableOutput(ns("tblDataTable"))
609 |                 )
610 |                 
611 |               )
612 |               
613 |             )
614 |             
615 |           )
616 |           
617 |         ),
618 |         
619 |         tabPanel(
620 |           title = "Other Examples",
621 |           
622 |           fluidRow(
623 |             
624 |             column(
625 |               
626 |               width = 3,
627 |              
628 |               br(),
629 |               br(),
630 |               actionButton(
631 |                 inputId = ns("cmdNotification"),
632 |                 label = "Notification",
633 |                 icon = icon("clock-o"),
634 |                 width = "100%"
635 |               ),
636 | 
637 |               br(),
638 |               br(),
639 |               actionButton(
640 |                 inputId = ns("cmdProgressBar"),
641 |                 label = "Progress Bar",
642 |                 icon = icon("spinner"),
643 |                 width = "100%"
644 |               ),
645 |               
646 |               br(),
647 |               br(),
648 |               actionButton(
649 |                 inputId = ns("cmdModalPopup"),
650 |                 label = "Modal pop-up",
651 |                 icon = icon("square-o"),
652 |                 width = "100%"
653 |               )
654 |                
655 |             )
656 |             
657 |           )
658 |           
659 |         )
660 |         
661 |       )
662 |           
663 |     )
664 |     
665 |   })
666 | 
667 |   output$appFontFamily <- renderText({
668 |     "App Font Family: Arial"
669 |   })
670 |   
671 |   output$tblTable <- renderTable({
672 |     data.frame(
673 |       String = c("Item A", "Item B", "Item C", "Item D", "Item E"),
674 |       Numeric = c(1.10, 1.20, 1.30, 1.40, 1.50),
675 |       Date = c("2014-01-01", "2015-01-01", "2016-01-01", "2017-01-01", "2018-01-01"),
676 |       ..... = c(".....", ".....", ".....", ".....", ".....")
677 |     )
678 |   })
679 |   
680 |   output$tblDataTable <- renderDataTable({
681 |     datatable(
682 |       # Table data
683 |       data = EuStockMarkets,
684 |       
685 |       # Hiding row names
686 |       rownames = FALSE,
687 |       
688 |       # Single row can be selected
689 |       selection = "single",
690 |       
691 |       # Enabling buttons on top of table and scrollbar
692 |       extensions = c("Buttons", "Scroller"),
693 |       
694 |       # Filter
695 |       filter = "bottom",
696 |       
697 |       options = list(
698 |         # Table components can be added/removed here
699 |         dom = "Blfrtip",
700 |         
701 |         # Freezing panes
702 |         fixedHeader = TRUE,
703 |         
704 |         # Specify buttons on top of table
705 |         buttons = c("copy", "excel", I("colvis")),
706 |         
707 |         # Scroll heights
708 |         scrollY = 300,
709 |         scrollX = 500,
710 |         
711 |         # Page length and menu
712 |         paging = TRUE,
713 |         pageLength = 50,
714 |         lengthMenu = list(
715 |           c(50, 100, 500, -1),
716 |           list("50", "100", "500", "All")
717 |         )
718 |       )
719 |       
720 |     )
721 |   })
722 |   
723 |   observeEvent(
724 |     input$cmdNotification, 
725 |     {
726 |     
727 |       showNotification(
728 |         ui = "This is an example notification!",
729 |         duration = NULL,
730 |         closeButton = TRUE
731 |       )
732 |     
733 |     }
734 |   )
735 |   
736 |   observeEvent(
737 |     input$cmdProgressBar, 
738 |     {
739 |       withProgress(
740 |         message = "Example task",
741 |         value = 0,
742 |         min = 0,
743 |         max = 4,
744 |         {
745 |           incProgress(amount = 1, detail = "Sub-task 1")
746 |           Sys.sleep(2)
747 |           
748 |           incProgress(amount = 1, detail = "Sub-task 2")
749 |           withProgress(
750 |             message = "Sub-task 2 detail",
751 |             value = 0,
752 |             min = 1,
753 |             max = 5,
754 |             {
755 |               for (i in 1:5) {
756 |                 incProgress(amount = 1, detail = glue("Processing item {i}"))
757 |                 Sys.sleep(2)
758 |               }
759 |             }
760 |           )
761 |           
762 |           incProgress(amount = 1, detail = "Sub-task 3")
763 |           Sys.sleep(2)
764 |         }
765 |       )
766 |     }
767 |   )
768 |   
769 |   observeEvent(input$cmdModalPopup, {
770 |     
771 |     output$tblModalDataTable <- renderDataTable({
772 |         head(mtcars)
773 |     })
774 |     
775 |     mdlExample <- modalDialog(
776 |       
777 |       title = "Example Modal",
778 |       size = "l",
779 |       {
780 |         
781 |         fluidPage(
782 |           
783 |           fluidRow(
784 |             
785 |             h5(strong("Example content")),
786 |             hr(),
787 |             h5("Example wording..."),
788 |             br(),
789 |             
790 |             textInput(
791 |               inputId = "txtModalInput",
792 |               label = "Example text input",
793 |               placeholder = "Write here..."
794 |             ),
795 |             
796 |             dataTableOutput(ns("tblModalDataTable"))
797 |             
798 |           )
799 |           
800 |         )
801 |         
802 |       }
803 |       
804 |     )
805 |     
806 |     showModal(mdlExample)
807 |     
808 |   })
809 | }


--------------------------------------------------------------------------------
/code/modules/Home/moduleSidebarMenu.R:
--------------------------------------------------------------------------------
 1 | # Ui functions ------------------------------------------------------------
 2 | uiSidebarMenuItems <- function()
 3 | {
 4 |   userInterfaceOutput <- tagList(
 5 |     
 6 |     # sidebarUserPanel(
 7 |     #   name = "Anonymous user",
 8 |     #   subtitle = Sys.Date()
 9 |     # ),
10 | 
11 |     sidebarSearchForm(
12 |       textId = "txtSidebarSearch",
13 |       buttonId = "cmdSidebarSearch",
14 |       label = "Search"
15 |     ),
16 |     
17 |     menuItem(text = "Create Theme", tabName = "tabHome", icon = icon("cog")),
18 |     
19 |     menuItem(text = "Theme Output", tabName = "tabThemeOutput", icon = icon("list"))
20 | 
21 |   )
22 |   
23 |   return(userInterfaceOutput)
24 | }
25 | 


--------------------------------------------------------------------------------
/dashboardThemeDesigner.Rproj:
--------------------------------------------------------------------------------
 1 | Version: 1.0
 2 | 
 3 | RestoreWorkspace: Default
 4 | SaveWorkspace: Default
 5 | AlwaysSaveHistory: Default
 6 | 
 7 | EnableCodeIndexing: Yes
 8 | UseSpacesForTab: Yes
 9 | NumSpacesForTab: 2
10 | Encoding: UTF-8
11 | 
12 | RnwWeave: Sweave
13 | LaTeX: pdfLaTeX
14 | 


--------------------------------------------------------------------------------
/doc/live_theme_designer.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nik01010/dashboardThemeDesigner/4f3f3c4f6d06f356446a880d35b87aafd1912f57/doc/live_theme_designer.png


--------------------------------------------------------------------------------