molsonkiko / JsonToolsNppPlugin

A Notepad++ plugin providing tools for JSON like linting, querying, a tree view, and CSV conversion.
Apache License 2.0
94 stars 10 forks source link

Feature Request: Background color #5

Closed vinsworldcom closed 2 years ago

vinsworldcom commented 2 years ago

Notepad++ plugins can make use of dark mode to color the panels. I have not done this to my plugins, but what would be nice is to get the default background color of Notepad++ Scintilla editing component and shade your tree view with it.

Current:

image

Concept:

image

I do this for example in some of my plugins. For a C++ example that triggers when the user clicks a checkbox in the docking panel, see here:

https://github.com/vinsworldcom/nppGitSCM/blob/0f0bc44fa8c9b28581077c1ffaaa4bb2b3fa9d3a/DockingFeature/GitPanelDlg.cpp#L663

Cheers.

vinsworldcom commented 2 years ago

A quick test:

 [main ≡ +0 ~1 -0 !] git diff
diff --git a/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs b/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs
index 7120330..34c4538 100644
--- a/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs
+++ b/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs
@@ -62,6 +62,7 @@
             | System.Windows.Forms.AnchorStyles.Left)
             | System.Windows.Forms.AnchorStyles.Right)));
             this.Tree.Location = new System.Drawing.Point(4, 91);
+            this.Tree.BackColor = System.Drawing.SystemColors.WindowFrame;
             this.Tree.Name = "Tree";
             this.Tree.Size = new System.Drawing.Size(398, 339);
             this.Tree.TabIndex = 6;

image

Background color changes, but it looks like the icons aren't transparent. I didn't bother trying to use Scintilla to get fore/background colors to use those:

    colorBg = ( COLORREF )::SendMessage( getCurScintilla(), SCI_STYLEGETBACK, 0, 0 );
    colorFg = ( COLORREF )::SendMessage( getCurScintilla(), SCI_STYLEGETFORE, 0, 0 );

but looks like the concept could work if a way to make the icons transparent.

Cheers.

vinsworldcom commented 2 years ago

This seems like an easy fix, but it keeps crashing on me. I update:

diff --git a/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs b/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs
index 8138851..41bfa52 100644
--- a/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs
+++ b/JsonToolsNppPlugin/Forms/TreeViewer.Designer.cs
@@ -1,4 +1,6 @@
-namespace JSON_Tools.Forms
+using Kbg.NppPluginNET.PluginInfrastructure;
+
+namespace JSON_Tools.Forms
 {
     partial class TreeViewer
     {
@@ -55,6 +57,11 @@
             this.FindReplaceButton = new System.Windows.Forms.Button();
             this.NodeRightClickMenu.SuspendLayout();
             this.SuspendLayout();
+
+            var tmpedit = new ScintillaGateway(PluginBase.GetCurrentScintilla());
+            var bg = tmpedit.StyleGetBack(0).Value;
+            var fg = tmpedit.StyleGetFore(0).Value;
+
             //
             // Tree
             //
@@ -62,6 +69,11 @@
             | System.Windows.Forms.AnchorStyles.Left)
             | System.Windows.Forms.AnchorStyles.Right)));
             this.Tree.Location = new System.Drawing.Point(4, 95);
+            // this.Tree.BackColor = System.Drawing.Color.FromArgb(0x29, 0x31, 0x34);
+            // this.Tree.ForeColor = System.Drawing.Color.FromArgb(0xe0, 0xe2, 0xe4);
+            this.Tree.BackColor = System.Drawing.Color.FromArgb(bg);
+            this.Tree.ForeColor = System.Drawing.Color.FromArgb(fg);
+
             this.Tree.Name = "Tree";
             this.Tree.Size = new System.Drawing.Size(398, 335);
             this.Tree.TabIndex = 6;

And then when I launch the viewer, I get a crash:

image

However, if I use the 2 commented lines and just "hardcode" the colors I want, it works fine. Seems FromArgb() is having difficulties converting the integers that are in bg and fg to color values. I really want this to work!

Cheers.

molsonkiko commented 2 years ago

Hi Vince,

I'll take a look at it in a little while. The CSVQuery Query Window form has its own way of doing something similar to what you want, so maybe consult that as a starting point?

Since that's a different type of control from the TreeView that we're working with here, I have no idea if that would work. I'll get back to you later.

FWIW, I don't see any reason to create a new ScintillaGateway; you can just use Npp.editor as the ScintillaGateway.

I may make some dark mode type icons for the JSON types so that the icons look a little bit better against the background in dark mode.

I'm having some success using the WinForms designer GUI in Visual Studio - it looks like the System.Drawing.SystemColors class has some default colors to choose from.

molsonkiko commented 2 years ago

Hi Vince, I've come up with a solution that looks pretty good, and I'll push it out sometime this evening. No need to worry about it anymore, I think.