diff --git a/docs/how-to-create-new-effects.md b/docs/how-to-create-new-effects.md index ec16f02..6769387 100644 --- a/docs/how-to-create-new-effects.md +++ b/docs/how-to-create-new-effects.md @@ -254,13 +254,161 @@ gnome-extensions prefs burn-my-windows@schneegans.github.com ## Adding a Preferences Page -For this, we will create a `simpleFadePage.ui` file and load this in the `initPreferences()` method of your new effect class. -We will be able to adjust two properties: The animation duration and the width of the fading gradient. +If your effect should support GNOME Shell 3.3x _and_ GNOME Shell 40+, you will have to provide two `*.ui` files. +This is because starting with GNOME Shell 40, the preference dialog uses GTK4, before it used to use GTK3. +We will load the relevant file in the `initPreferences()` method of your new effect class. +There are two sliders in this example: The animation duration and the width of the fading gradient. -Just save the code below to a file called `resources/ui/common/simpleFadePage.ui` and replace any occurrence of `simple-fade` with your effect's nick name! +Just save the code below to `resources/ui/gtk3/simpleFadePage.ui` and `resources/ui/gtk4/simpleFadePage.ui` respectively. +Remember to replace any occurrence of `simple-fade` with your effect's nick-name!
- Expand this to show the code. + Expand this to show the GTK3 code. + +```xml + + + + + 5000 + 100 + 10 + 100 + + + + 1 + 0 + 0.01 + 0.1 + + + + vertical + 60 + 60 + 60 + 60 + + + + + + none + + + + + 10 + 10 + 10 + 10 + 0 + + + + + Animation Time [ms] + 0 + start + center + 1 + + + + + end + center + 1 + 0 + left + 300 + simple-fade-animation-time + + + + + + + edit-clear-symbolic + 1 + + + Reset to Default Value + + + + + + + + + + + 10 + 10 + 10 + 10 + 0 + + + + + Fade Width + 0 + start + center + 1 + + + + + end + center + 1 + 2 + left + 300 + simple-fade-width + + + + + + + edit-clear-symbolic + 1 + + + Reset to Default Value + + + + + + + + + + + + + + + + +``` + +
+ +
+ Expand this to show the GTK4 code. ```xml @@ -324,12 +472,7 @@ Just save the code below to a file called `resources/ui/common/simpleFadePage.ui - - - edit-clear-symbolic - 1 - - + edit-clear-symbolic Reset to Default Value