darkstudio icon indicating copy to clipboard operation
darkstudio copied to clipboard

Data View requires new work around

Open grcatlin opened this issue 1 year ago • 1 comments

Hi again! Viewing data with View() doesn't seem to create the intended results in newer versions of RStudio. Screen Shot 2022-08-16 at 4 26 46 PM I'm not sure how it was originally set up, but it seems that modifying index.htm is no longer sufficient to style the data view window. Instead, the following html file must be modified (in MacOS syntax): RStudio.app/Contents/Resources/resources/grid/gridviewer.html.

In much of the same way that darkstudio already copies the darkstudio.css file from the package over to the RStudio directory and adds the link to it in index.htm, a css file & directory can be created within resources/grid/ and a link to that css file added to the bottom of gridviewer.html (as well as the backup of the original, etc.).

I did implement this fix over on my end, however sloppily, in function form. Here is a zip containing the css file and the modded gridviewer.html I used.

darkstudio_grid.zip

Screen Shot 2022-08-16 at 4 48 09 PM

To do it in function form, I modded some of darkstudio's functions to include a logical that allows the functions to remain relatively unchanged. Anyway, whether function wise or just dragging and dropping the above files into the grid folder, here are the results: Screen Shot 2022-08-16 at 4 52 38 PM The css file only contains these two sections from the original darkstudio.css and nothing more:

/* JS This is the color of the data cells */
.rstudio-themes-flat.rstudio-themes-dark-grey #rsGridData_info,
.rstudio-themes-flat.rstudio-themes-dark-grey th,
.rstudio-themes-flat.rstudio-themes-dark-grey td.first-child,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable thead th {
  background-color: #2b2b2b;
}

/* JS This is the color of the border of the data cells */
.rstudio-themes-flat.rstudio-themes-dark-grey #rsGridData_info,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable thead th,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable thead td,
.rstudio-themes-flat.rstudio-themes-dark-grey table.dataTable tbody td {
  border-color: black;
}

At any rate, I'm sure there's a much easier way to do the function implementation than I did (which is why I didn't include it here). That being said, I hope this helps!

@rileytwo, I'm sure it's pretty obvious with the amount of issues and fixes I've been posting, but darkstudio has been super inspirational to me (I'm working on some different themes through this framework) and I really appreciate your work!

grcatlin avatar Aug 16 '22 23:08 grcatlin

Also regarding the Data View pane is the scrollbars on Windows. Can be fixed by adding the below to the new ds_grid.css above:

/* fix scrollbars for data view? */
.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar {
  background: var;
}

.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-track,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-track,
.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-corner,
.rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-corner {
  background: var;
}

.rstudio-themes-dark.rstudio-themes-scrollbars::-webkit-scrollbar-thumb, .rstudio-themes-dark.rstudio-themes-scrollbars ::-webkit-scrollbar-thumb {
    -webkit-border-radius: 10px;
    background: var;
    border: solid 3px var;
}

grcatlin avatar Aug 18 '22 16:08 grcatlin