Add translucency slider and set default to 30%

Apply 1 suggestion(s) to 1 file(s)
Fix

imports/NeoChat/Settings/AppearanceSettingsPage.qml

@@ -204,6 +204,28 @@ Kirigami.ScrollablePage {
                     Config.save();
                 }
             }
+            RowLayout {
+                visible: Controller.hasWindowSystem && Config.blur
+                Kirigami.FormData.label: i18n("Transparency:")
+                QQC2.Slider {
+                    enabled: !Config.compactLayout && Config.blur
+                    from: 0
+                    to: 1
+                    stepSize: 0.05
+                    value: Config.transparency
+                    onMoved: {
+                        Config.transparency = value;
+                        Config.save();
+                    }
+                    
+                    HoverHandler { id: sliderHover }
+                    QQC2.ToolTip.visible: sliderHover.hovered && !enabled
+                    QQC2.ToolTip.text: i18n("Only enabled if the transparent chat page is enabled.")
+                }
+                QQC2.Label {
+                    text: Math.round(Config.transparency * 100) + "%"
+                }
+            }
             QQC2.CheckBox {
                 text: i18n("Show your messages on the right")
                 checked: Config.showLocalMessagesOnRight

qml/main.qml

@@ -296,7 +296,14 @@ Kirigami.ApplicationWindow {
         }
     }
 
+    // blur effect
     color: Config.blur && !Config.compactLayout ? "transparent" : Kirigami.Theme.backgroundColor
+    
+    // we need to apply the translucency effect separately on top of the color
+    background: Rectangle {
+        color: Config.blur && !Config.compactLayout ? Qt.rgba(Kirigami.Theme.backgroundColor.r, Kirigami.Theme.backgroundColor.g, Kirigami.Theme.backgroundColor.b, 1 - Config.transparency) : "transparent"
+    }
+    
     Component {
         id: roomListComponent
         RoomListPage {

src/neochatconfig.kcfg

@@ -21,6 +21,10 @@
       <label>Make NeoChat blurry</label>
       <default>false</default>
     </entry>
+    <entry name="Transparency" type="Double">
+      <label>Background transparency value</label>
+      <default>0.3</default>
+    </entry>
     <entry name="ShowNotifications" type="bool">
       <label>Show notifications</label>
       <default>true</default>