Fix CSS styling; Change floating toolbar styling

When in dark mode, the page preview background would still be light.
The preview's background is now styled with CSS. Selectors including
GtkButton and GtkWindow seemed to do nothing. These have been replaced
with button, window, etc. selectors.

src/control/Control.cpp

@@ -1928,6 +1928,7 @@ void Control::showSettings() {
     this->zoom->setZoom100Value(settings->getDisplayDpi() / Util::DPI_NORMALIZATION_FACTOR);
 
     getWindow()->getXournal()->getHandRecognition()->reload();
+    getWindow()->updateColorscheme();
 
     TextView::setDpi(settings->getDisplayDpi());
 

src/control/jobs/PreviewJob.cpp

@@ -55,6 +55,7 @@ void PreviewJob::finishPaint() {
 void PreviewJob::drawBackgroundPdf(Document* doc) {
     int pgNo = this->sidebarPreview->page->getPdfPageNr();
     XojPdfPageSPtr popplerPage = doc->getPdfPage(pgNo);
+
     PdfView::drawPage(this->sidebarPreview->sidebar->getCache(), popplerPage, cr2, zoom,
                       this->sidebarPreview->page->getWidth(), this->sidebarPreview->page->getHeight());
 }
@@ -88,9 +89,17 @@ void PreviewJob::drawPage(int layer) {
     cairo_destroy(cr2);
 }
 
+void PreviewJob::clipToPage() {
+    // Only render within the preview page. Without this, the when preview jobs attempt
+    // to clear the display, we fill a region larger than the inside of the preview page!
+    cairo_rectangle(cr2, 0, 0, this->sidebarPreview->page->getWidth(), this->sidebarPreview->page->getHeight());
+    cairo_clip(cr2);
+}
+
 void PreviewJob::run() {
     initGraphics();
     drawBorder();
+    clipToPage();
 
     Document* doc = this->sidebarPreview->sidebar->getControl()->getDocument();
     doc->lock();

src/control/jobs/PreviewJob.h

@@ -41,6 +41,7 @@ public:
 
 private:
     void initGraphics();
+    void clipToPage();
     void drawBorder();
     void finishPaint();
     void drawBackgroundPdf(Document* doc);

src/gui/MainWindow.cpp

@@ -250,6 +250,17 @@ void MainWindow::toggleMenuBar(MainWindow* win) {
     }
 }
 
+void MainWindow::updateColorscheme() {
+    bool darkMode = control->getSettings()->isDarkTheme();
+    GtkStyleContext* context = gtk_widget_get_style_context(GTK_WIDGET(this->window));
+
+    if (darkMode) {
+        gtk_style_context_add_class(context, "darkMode");
+    } else {
+        gtk_style_context_remove_class(context, "darkMode");
+    }
+}
+
 void MainWindow::initXournalWidget() {
     GtkWidget* boxContents = get("boxContents");
 
@@ -273,6 +284,8 @@ void MainWindow::initXournalWidget() {
 
     Layout* layout = gtk_xournal_get_layout(this->xournal->getWidget());
     scrollHandling->init(this->xournal->getWidget(), layout);
+
+    updateColorscheme();
 }
 
 void MainWindow::setGtkTouchscreenScrollingForDeviceMapping() {

src/gui/MainWindow.h

@@ -90,6 +90,7 @@ public:
     void setControlTmpDisabled(bool disabled);
 
     void updateToolbarMenu();
+    void updateColorscheme();
 
     GtkWidget** getToolbarWidgets(int& length);
     const char* getToolbarName(GtkToolbar* toolbar);

src/gui/dialog/toolbarCustomize/ToolbarAdapter.cpp

@@ -31,6 +31,9 @@ ToolbarAdapter::ToolbarAdapter(GtkWidget* toolbar, string toolbarName, ToolMenuH
 
     showToolbar();
     prepareToolItems();
+
+    GtkStyleContext* ctx = gtk_widget_get_style_context(w);
+    gtk_style_context_add_class(ctx, "editing");
 }
 
 ToolbarAdapter::~ToolbarAdapter() {
@@ -40,6 +43,9 @@ ToolbarAdapter::~ToolbarAdapter() {
     g_signal_handlers_disconnect_by_func(this->w, (gpointer)toolbarDragDataReceivedCb, this);
 
     cleanupToolbars();
+
+    GtkStyleContext* ctx = gtk_widget_get_style_context(w);
+    gtk_style_context_remove_class(ctx, "editing");
 }
 
 void ToolbarAdapter::cleanupToolbars() {

src/gui/sidebar/previews/base/SidebarPreviewBase.cpp

@@ -33,8 +33,6 @@ SidebarPreviewBase::SidebarPreviewBase(Control* control, GladeGui* gui, SidebarT
     g_signal_connect(this->scrollPreview, "size-allocate", G_CALLBACK(sizeChanged), this);
 
     gtk_widget_show_all(this->scrollPreview);
-
-    g_signal_connect(this->iconViewPreview, "draw", G_CALLBACK(Util::paintBackgroundWhite), nullptr);
 }
 
 SidebarPreviewBase::~SidebarPreviewBase() {

ui/xournalpp.css

@@ -1,50 +1,103 @@
-/*  
+/*
  * Backup before modifying
  *
- * 
+ *
  *  Try running Xournal++ like this:    GTK_DEBUG=interactive  xournalpp
- * 
+ *
  *  See: https://wiki.gnome.org/action/show/Projects/GTK/Inspector
  */
 
+/*Style the Floating Toolbox!*/
 
+#floatingToolbox > box {
+	background-color: white;
+	border-radius: 12px;
 
-/*Style the Floating Toolbox!*/
+	box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.4);
 
-#floatingToolbox>GtkBox 
-{
-	background-color: rgba(0,0,0,0.05);
-	border-radius:10%;
+	/* Add a margin. If we don't have this, Gtk clips the shadow!  */
+	margin: 7px;
 }
-#floatingToolbox GtkBox GtkToolbar 
-{
-	background-color: rgba(255,255,255,0);
+
+#floatingToolbox box toolbar {
+	background-color: rgba(255, 255, 255, 0);
 }
-#floatingToolbox GtkButton 
-{
-	background-color: rgba(255,255,255,1);
-	border-radius: 50%;
+
+#floatingToolbox button {
+	background-color: rgba(255, 255, 255, 0.8);
+	border-radius: 12px;
 }
 
+/*
+	Use :checked for a selected ToggleButton.
+	See https://stackoverflow.com/questions/39824345/use-css-to-style-gtktogglebutton-depending-on-the-state
+*/
+#floatingToolbox button:checked {
+	background-color: lightblue;
+	border-color: lightblue;
+	box-shadow: inset 0px 0px 3px lightblue;
+
+	transition: background-color 0.5s ease, border-color 0.5s ease, margin 0.3s ease;
+}
+
+#floatingToolbox toolbar {
+    /*
+      The Adaptia GTK theme adds box-shadows to toolbars.
+      Remove them to avoid horizontal lines that extend outside
+      the edge of the floating toolbox.
+     */
 
+    box-shadow: none;
+}
+
+window.darkMode #floatingToolbox button {
+	background: rgba(55, 53, 53, 0.5);
+}
+
+window.darkMode #floatingToolbox button:checked {
+	background: rgba(85, 85, 95, 0.1);
+	border-color: lightblue;
+	box-shadow: 0px 0px 3px lightblue;
+}
+
+window.darkMode #floatingToolbox > box {
+	background-color: black;
+
+	/*
+	  Lighter gray shadow for better contrast on dark
+	  backgrounds.
+	*/
+	box-shadow: 0px 0px 5px rgba(90, 90, 90, 0.7);
+}
+
+/* Add additional padding and a border to make editing toolbars easier. */
+toolbar.editing {
+	padding-top: 4px;
+	padding-bottom: 4px;
+
+	border: 4px dashed orange;
+	border-radius: 3px;
+
+	box-shadow: inset -2px -2px 8px orange;
+}
 
 /*Fix ugly Background drop down button
- * 
- * We need to select the button beside two labels or we will affect 
+ *
+ * We need to select the button beside two labels or we will affect
  * the pen tool when in FloatingToolbox (and can't see activation highlight).
- * 
- * Ideally we will give name properties to all of the widgets created in 
+ *
+ * Ideally we will give name properties to all of the widgets created in
  * code as well as specifying names in glade files.
- * 
+ *
  * Note: in glade files, property with name="name". i.e. <property name="name">floatingToolbox</property>
  */
 
 
-GtkToolItem>GtkBox>GtkLabel+GtkLabel+GtkButton 
+toolitem > box > label+label+button 
 {
 	border-width:0;
 	box-shadow:none;
-	background-image:none
+	background-image:none;
 }
 
 
@@ -54,7 +107,7 @@ GtkToolItem>GtkBox>GtkLabel+GtkLabel+GtkButton
 */
 
 /*
-GtkToolbar GtkButton
+toolbar button
 {
 	padding: 2
 }
@@ -62,11 +115,11 @@ GtkToolbar GtkButton
 
 
 
-/* Or for individual toolbars: tbLeft1 tbLeft2 tbTop1 tbTop2 tbBottom1 tbFloat4 etc: 
+/* Or for individual toolbars: tbLeft1 tbLeft2 tbTop1 tbTop2 tbBottom1 tbFloat4 etc:
  */
- 
+
 /*
-#tbLeft2 GtkButton
+#tbLeft2 button
 {
 	padding: 2
 }
@@ -76,7 +129,20 @@ GtkToolbar GtkButton
 /*
 Labels for subsections of the Settings dialog
 */
-notebook frame>label{
+notebook frame>label {
     color: #666;
     font-weight: bold;
 }
+
+
+/*
+  Sidebar (page select, layer select, etc)
+ */
+#sidebarContents {
+	background-color: white;
+}
+
+window.darkMode #sidebarContents {
+	background-color: #222;
+}
+