feat(opengist): paint scrollbar [#13]

allow for the OpenGist scrollbar to be modified, add two new settings for Light and Dark mode.
Aetherinox · Feb 29, 2024 · 1d6c7ee · 1d6c7ee
1 parent fa8d494
commit 1d6c7ee
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 1 deletion.
diff --git a/dist/styles.css b/dist/styles.css
@@ -11,12 +11,24 @@ body
     Gistr Codeblock
 */
 
+.block-language-gistr
+{
+    margin-top: 32px;
+}
+
 .block-language-gistr > iframe
 {
     width:                  100%;
     border:                 0;
 }
 
+/*
+.block-language-gistr + .edit-block-button
+{
+    display:                none !important;
+}
+*/
+
 /*
     Gistr Codeblock > Error
 */

diff --git a/src/backend/backend.ts b/src/backend/backend.ts
@@ -163,6 +163,7 @@ export class GistrBackend
         const content_body          = ( bGithub ? json.div : "" )
         const content_js            = ( bGithub ? "" : await this.GetJavascript( el, uuid, ( this.settings.theme == "Dark" ? json.embed.js_dark : json.embed.js ) ) )
         const css_bg_color          = ( this.settings.theme == "Dark" ? this.settings.og_clr_bg_dark : this.settings.og_clr_bg_light )
+        const css_sb_color          = ( this.settings.theme == "Dark" ? this.settings.og_clr_sb_dark : this.settings.og_clr_sb_light )
         const css_bg_og_header_bg   = ( this.settings.theme == "Dark" ? "rgb(35 36 41/var(--tw-bg-opacity))" : "rgb(238 239 241/var(--tw-bg-opacity))" )
         const css_bg_og_header_bor  = ( this.settings.theme == "Dark" ? "1px solid rgb(54 56 64/var(--tw-border-opacity))" : "rgb(222 223 227/var(--tw-border-opacity))" )
         let css_og                  = ""
@@ -225,6 +226,23 @@ export class GistrBackend
             <head>
                 <style>
                     html, body { height: 100%; margin: 0; padding: 0; }
+                    ::-webkit-scrollbar
+                    {
+                        height:             10px;
+                    }
+                    
+                    ::-webkit-scrollbar-track
+                    {
+                        background-color:   transparent;
+                        border-radius:      5px;
+                        margin:             1px;
+                    }
+                    
+                    ::-webkit-scrollbar-thumb
+                    {
+                        border-radius:      10px;
+                        background-color:   ${css_sb_color};
+                    }
                 </style>
 
                 ${this.EventListener( gid )}

diff --git a/src/lang/locale/en.ts b/src/lang/locale/en.ts
@@ -34,6 +34,10 @@ export default
     cfg_tab_og_cblk_light_desc:         'Color for Opengist codeblock background color (Light Theme)',
     cfg_tab_og_cblk_dark_name:          'Codeblock Background Color (Dark)',
     cfg_tab_og_cblk_dark_desc:          'Color for Opengist codeblock background color (Dark Theme)',
+    cfg_tab_og_sb_light_name:           'Scrollbar Track Color (Light)',
+    cfg_tab_og_sb_light_desc:           'Color for gist scrollbar track (Light Theme)',
+    cfg_tab_og_sb_dark_name:            'Scrollbar Track Color (Dark)',
+    cfg_tab_og_sb_dark_desc:            'Color for gist scrollbar track (Dark Theme)',
     cfg_tab_og_padding_top_name:        'Top Padding',
     cfg_tab_og_padding_top_desc:        'Padding between gist codeblock header and code.',
     cfg_tab_og_padding_bottom_name:     'Bottom Padding',

diff --git a/src/main.ts b/src/main.ts
@@ -30,7 +30,9 @@ const CFG_DEFAULT: GistrSettings =
     blk_pad_t:          10,
     blk_pad_b:          20,
     og_clr_bg_light:    "#cbcbcb",
-    og_clr_bg_dark:     "#121315"
+    og_clr_bg_dark:     "#121315",
+    og_clr_sb_light:    "#808080",
+    og_clr_sb_dark:     "#363636"
 }
 
 /*
@@ -370,6 +372,38 @@ class OG_Tab_Settings extends PluginSettingTab
                     })
                 );
 
+            /*
+                Scrollbar Track Color (Light)
+            */
+
+            new Setting( elm )
+                .setName( lng( "cfg_tab_og_sb_light_name" ) )
+                .setDesc( lng( "cfg_tab_og_sb_light_desc" ) )
+                .addColorPicker( clr => clr
+                    .setValue( this.plugin.settings.og_clr_sb_light )
+                    .onChange( val =>
+                    {
+                        this.plugin.settings.og_clr_sb_light = val;
+                        this.plugin.saveSettings( );
+                    })
+                );
+
+            /*
+                Scrollbar Track Color (Dark)
+            */
+
+            new Setting( elm )
+                .setName( lng( "cfg_tab_og_sb_dark_name" ) )
+                .setDesc( lng( "cfg_tab_og_sb_dark_desc" ) )
+                .addColorPicker( clr => clr
+                    .setValue( this.plugin.settings.og_clr_sb_dark )
+                    .onChange( val =>
+                    {
+                        this.plugin.settings.og_clr_sb_dark = val;
+                        this.plugin.saveSettings( );
+                    })
+                );
+
             /*
                 Codeblock > Padding > Top
             */

diff --git a/src/settings/settings.ts b/src/settings/settings.ts
@@ -9,4 +9,6 @@ export default interface GistrSettings
     blk_pad_b:          number | 15
     og_clr_bg_light:    string | "cbcbcb"
     og_clr_bg_dark:     string | "121315"
+    og_clr_sb_light:    string | "#808080"
+    og_clr_sb_dark:     string | "#363636"
 }