From e8fdbac2ee55bdae5c695a3fe7f29d3c1f93dbe6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Piskorski?= Date: Sun, 6 Dec 2020 19:45:27 +0100 Subject: [PATCH] buttons fix --- app/about_module.R | 15 +++++---------- app/app.R | 44 +++++++++++++++++++++++++++++++++++++++++++- app/home_module.R | 12 +++--------- app/profil_module.R | 16 +++------------- app/www/style.css | 17 ++++++++++++++--- 5 files changed, 68 insertions(+), 36 deletions(-) diff --git a/app/about_module.R b/app/about_module.R index 31e3da6..f0216d2 100644 --- a/app/about_module.R +++ b/app/about_module.R @@ -12,20 +12,15 @@ aboutUI <- function(id) { @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); @import url('//fonts.googleapis.com/css2?family=Fjalla+One'); + .tab-link-3{ + background-color: #008375; + color: #FFFFFF !important; + font-family: Fjalla One;} "))), theme = "style.css", - - fluidRow( - column(12, - navbarPage("", - tabPanel("TakeCareApp"), - tabPanel("Firmy"), - tabPanel("O nas"), - tabPanel("Zaloguj")), - - )), + # App title ---- fluidRow(column(12," ABOUT")%>% tagAppendAttributes(id = 'column-content') diff --git a/app/app.R b/app/app.R index f2e3bc7..5e36f1d 100644 --- a/app/app.R +++ b/app/app.R @@ -4,6 +4,7 @@ library(magrittr) library(ggplot2) library(plotly) library(DT) +library(shinyjs) #source(".R/home_module.R",encoding="utf-8") #source(".R/about_module.R",encoding="utf-8") @@ -12,11 +13,52 @@ library(DT) source("routing_module.R",encoding="utf-8") -ui <- router$ui +ui <- fluidPage( + + fluidRow( + useShinyjs(), + inlineCSS(list(.clicked = "background-color: #008375 !important")), + column(12, + navbarPage("", + tabPanel(a("TakeCareApp",id='takeCareApp',class = "tab-link", href = route_link("home"))), + tabPanel(a("Firmy",id="tab1",class = "tab-link", href = route_link("home"))), + tabPanel(a("O nas",id="tab2",class = "tab-link", href = route_link("about"))), + tabPanel(a("Zaloguj",id="tab3",class="tab-link", href = route_link("profil")))), + + )), + router$ui) server <- shinyServer(function(input, output, session){ + + shinyjs::onclick(id="takeCareApp",expr = { + shinyjs::removeCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab2",class = "clicked") + shinyjs::removeCssClass(id="tab3",class = "clicked") + }) + +shinyjs::onclick(id="tab1",expr = { + shinyjs::addCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab2",class = "clicked") + shinyjs::removeCssClass(id="tab3",class = "clicked") +}) + + shinyjs::onclick(id="tab2",expr = { + shinyjs::addCssClass(id="tab2",class = "clicked") + shinyjs::removeCssClass(id="tab1",class = "clicked") + shinyjs::removeCssClass(id="tab3",class = "clicked") + }) + + shinyjs::onclick(id="tab3",expr = { + shinyjs::addCssClass(id="tab3",class = "clicked") + shinyjs::removeCssClass(id="tab2",class = "clicked") + shinyjs::removeCssClass(id="tab1",class = "clicked") + }) + + + + router$server(input, output, session) }) diff --git a/app/home_module.R b/app/home_module.R index 2b4f4ac..add67b9 100644 --- a/app/home_module.R +++ b/app/home_module.R @@ -11,21 +11,15 @@ homeUI <- function(id) { tags$style(HTML(" @import url('//fonts.googleapis.com/css?family=Lobster|Cabin:400,700'); @import url('//fonts.googleapis.com/css2?family=Fjalla+One'); + + "))), theme = "style.css", - fluidRow( - column(12, - navbarPage("", - tabPanel(title="TakeCareApp", a(class = "item", href = "home")), - tabPanel("Firmy"), - tabPanel(title= "O nas", a(class = "item", href = "about")), - tabPanel(title="Zaloguj", a(class="item", href = "profil"))), - - )), + # App title ---- # App title ---- titlePanel(h1("TakeCareApp", align = "center")), diff --git a/app/profil_module.R b/app/profil_module.R index c066588..8cb10ff 100644 --- a/app/profil_module.R +++ b/app/profil_module.R @@ -17,15 +17,7 @@ profilUI <- function(id) { theme = "style.css", - fluidRow( - column(12, - navbarPage("", - tabPanel("TakeCareApp"), - tabPanel("Firmy"), - tabPanel("O nas"), - tabPanel("Zaloguj")), - - )), + # App title ---- fluidRow( @@ -39,8 +31,8 @@ profilUI <- function(id) { tabPanel("Zakładka 2", tags$div(plotlyOutput("plot2",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')), tabPanel("Zakładka 3", tags$div(plotlyOutput("plot3",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')), tabPanel("Zakładka 4", tags$div(plotlyOutput("plot4",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')), - tabPanel("Zakładka 5", tags$div(DT::dataTableOutput("table1",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')), - tabPanel("Zakładka 6", tags$div(DT::dataTableOutput("table2",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')) + tabPanel("Zakładka 5", tags$div(DT::dataTableOutput("table1",height = "auto"))%>% tagAppendAttributes(class = 'content-wrapper')) + ))%>% tagAppendAttributes(id = 'column-content') ) %>% tagAppendAttributes(id = 'row-content'), @@ -117,8 +109,6 @@ profilServer <- function(input, output) { output$table1 <- DT::renderDataTable(iris,options = list(scrollX = TRUE,language=pl)) - table<-DT::renderDataTable(mpg,options = list(scrollX = TRUE,language=pl)) - output$table2 <- table diff --git a/app/www/style.css b/app/www/style.css index 204bf09..78417e3 100644 --- a/app/www/style.css +++ b/app/www/style.css @@ -77,9 +77,9 @@ background-color:#00A896; } .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:focus, .navbar-default .navbar-nav > .active > a:hover { - background-color: #008375; - color: #FFFFFF !important; - font-family: Fjalla One; + #background-color: #008375; + #color: #FFFFFF !important; + #font-family: Fjalla One; } .navbar-default .navbar-nav > li > a{ @@ -88,6 +88,8 @@ background-color:#00A896; text-align: center; } + + .navbar-nav >li:first-child.active >a, .navbar-nav >li:first-child.active >a:hover, .navbar-nav >li:first-child.active >a:focus,.navbar-nav >li:first-child >a:focus,.navbar-nav >li:first-child >a:hover,.navbar-nav >li:first-child >a { background-color: #028090; color: #FFFFFF !important; @@ -99,6 +101,15 @@ background-color:#00A896; font-size: 20px; } + + + +.navbar-nav >li >a:first-child { + display:none; + +} + + #row-content{ margin-left:0; margin-right:0;