V8: Add functionality to modify IBus Background picture

During [fixing Unity8-Wood theme and add support for IBus Backgound](openSUSE/mentoring#158 (comment)), I found that if I add the following style for class `.candidate-popup-content`： ```css background: url("assets/bg.png"); background-repeat:no-repeat; background-size:cover; ``` I can modify the background picture. Further combining [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/) and [background-logo](https://pagure.io/background-logo-extension), referring to GNOME-Shell's source code, I found the [corresponding widget](https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/master/js/ui/ibusCandidatePopup.js#L154) for class `candidate-popup-content`, and modified the style to realize modifying IBus background picture without restarting GNOME-Shell. Signed-off-by: Hollow Man <hollowman@hollowman.ml>
openSUSE · Apr 7, 2021 · 55ac0d3 · 55ac0d3
1 parent 84abfc9
commit 55ac0d3
Show file tree

Hide file tree

Showing 12 changed files with 226 additions and 60 deletions.
diff --git a/README.md b/README.md
@@ -1,4 +1,4 @@
-# 自定义IBus
+# 自定义 IBus
 
 [![last-commit](https://img.shields.io/github/last-commit/HollowMan6/Customize-IBus)](https://github.com/HollowMan6/Customize-IBus/graphs/commit-activity)
 [![release-date](https://img.shields.io/github/release-date/HollowMan6/Customize-IBus)](../../releases)
@@ -17,15 +17,17 @@
 
 (English version is down below)
 
-在GNOME Shell中更改IBus的候选框方向、主题、字体和输入法默认语言。
+### 注意：如果后期无重大 BUG 的话，v8 将是支持 GNOME 3.38 的最后一个版本
+
+在 GNOME Shell 中更改 IBus 的候选框方向、shell 主题、背景图片、字体和输入法默认语言。
 
 ![demo](img/demo.png)
 
 ## 安装
 
-从GNOME扩展商店中获取：
+从 GNOME 扩展商店中获取：
 
-[<img src="https://raw.githubusercontent.com/andyholmes/gnome-shell-extensions-badge/master/get-it-on-ego.svg?sanitize=true" alt="Get it on GNOME Extensions" height="100" align="middle">][EGO]
+[<img src="https://raw.githubusercontent.com/andyholmes/gnome-shell-extensions-badge/master/get-it-on-ego.svg?sanitize=true" alt="Get it on GNOME Extensions" height="100" align="middle">][ego]
 
 或者手动自行安装：
 
@@ -38,37 +40,58 @@ cd Customize-IBus && make install
 
 ![image](img/preference.png)
 
-## 使用用户主题来更改IBus皮肤的实现
+## 使用用户主题来更改 IBus 皮肤的实现
+
+当用户从主题列表中选中一个主题，本扩展会首先读取该主题的定义 CSS 文件，从中提取出定义 IBus 皮肤的类样式(`.candidate-*`)，然后将其写入本扩展的`stylesheet.css`文件。最后重启 GNOME-shell。
+
+### _提示：_
 
-当用户从主题列表中选中一个主题，本扩展会首先读取该主题的定义CSS文件，从中提取出定义IBus皮肤的类样式(`.candidate-*`)，然后将其写入本扩展的`stylesheet.css`文件。最后重启GNOME-shell。
+1. 推荐使用 X11。如果你在 Wayland 中更改 IBus 主题，你的当前所有工作都将会丢失，因为 Wayland 下只支持通过重新登陆来重启 GNOME-shell。
+2. 在 Fedora 33 和 Ubuntu 20.04, GNOME-shell 3.38 中(v3,v5,v8)通过了测试。
+3. 对于那些不使用 GNOME 而是使用如 KDE 等桌面环境的用户，更改 IBus 主题最简单的方法请参见[这里](https://github.com/qvshuo/Ibus-custom-theme)，从而为 IBus 指定一个不同的 GTK 主题。
 
-### *提示：* 
-1. 推荐使用X11。如果你在Wayland中更改IBus主题，你的当前所有工作都将会丢失，因为Wayland下只支持通过重新登陆来重启GNOME-shell。
-2. 在Fedora 33和Ubuntu 20.04, GNOME-shell 3.38中通过了测试。
+## 更改 IBus 背景图片的实现
+
+在[修复 Unity8-Wood 主题对 IBus 背景支持](https://github.com/openSUSE/mentoring/issues/158#issuecomment-813837436)时发现为`.candidate-popup-content`增加如下样式：
+
+```css
+background: url("assets/bg.png");
+background-repeat: no-repeat;
+background-size: cover;
+```
+
+即可实现对背景的修改。
+
+进一步结合[ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/)和[background-logo](https://pagure.io/background-logo-extension)，参考 GNOME-Shell 源代码中`candidate-popup-content`样式[对应组件](https://gitlab.gnome.org/GNOME/gnome-shell/-/blob/master/js/ui/ibusCandidatePopup.js#L154)，并对其修改样式实现不重启 GNOME-Shell 进行 IBus 背景图片的修改。
 
 ## 备忘
 
-- [X] 从[ibus-tweaker](https://github.com/tuberry/ibus-tweaker)中导入，去除与IBus无关功能。
-- [X] 从用户主题中读取IBus相关样式
-- [X] 将相关功能合并在一起。
+- [x] 从[ibus-tweaker](https://github.com/tuberry/ibus-tweaker)中导入，去除与 IBus 无关功能。
+- [x] 从用户主题中读取 IBus 相关样式
+- [x] 将相关功能合并在一起。
+- [x] V8: 增加更改 IBus 背景图片功能。
 
 ## 致谢
 
 1. [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/)
 2. [ibus-tweaker](https://github.com/tuberry/ibus-tweaker)
 3. [user-theme](https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/tree/master/extensions/user-theme)
 4. [shell-restarter](https://github.com/koolskateguy89/gnome-shell-extension-shell-restarter)
+5. [background-logo](https://pagure.io/background-logo-extension)
 
-*该项目是谷歌编程之夏 (GSoC) 2021于[OpenSUSE](https://github.com/openSUSE/mentoring/issues/158)社区成果的一部分。*
+_该项目是谷歌编程之夏 (GSoC) 2021 于[OpenSUSE](https://github.com/openSUSE/mentoring/issues/158)社区成果的一部分。_
 
 # Customize IBus
 
-Customize IBus in GNOME Shell for orientation, theme, font and input mode auto-switch.
+### Note: If no severe bug was found later, v8 will be the last version that support GNOME 3.38.
+
+Customize IBus for orientation, shell theme, background picture, font and ascii mode auto-switch.
 
 ![demo](img/demo-en.png)
 
 ## Installation
-[<img src="https://raw.githubusercontent.com/andyholmes/gnome-shell-extensions-badge/master/get-it-on-ego.svg?sanitize=true" alt="Get it on GNOME Extensions" height="100" align="middle">][EGO]
+
+[<img src="https://raw.githubusercontent.com/andyholmes/gnome-shell-extensions-badge/master/get-it-on-ego.svg?sanitize=true" alt="Get it on GNOME Extensions" height="100" align="middle">][ego]
 
 Or manually:
 
@@ -85,23 +108,27 @@ cd Customize-IBus && make install
 
 When user chooses a theme from the list, this extension will first read the theme CSS file, extract the IBus related style classes (`.candidate-*`), then write it to extension's `stylesheet.css`. Finally restart the GNOME-shell.
 
-### *NOTE:* 
+### _NOTE:_
+
 1. Recommend to use X11. If you change IME theme under Wayland, all your current work may be lost (Since Wayland only support relogin to restart the GNOME-shell).
-2. Tested on Fedora 33 and Ubuntu 20.04, GNOME-shell 3.38.
+2. Tested on Fedora 33 and Ubuntu 20.04, GNOME-shell 3.38(v3, v5, v8).
+3. For users who don't use GNOME but other desktop environments like KDE, the easiest way to change the IBus theme is to act as described in [here](https://github.com/qvshuo/Ibus-custom-theme) to use a different GTK theme for IBus.
 
 ## To-do
 
-- [X] Import from [ibus-tweaker](https://github.com/tuberry/ibus-tweaker) and remove features unrelated to IBus.
-- [X] Read from user themes and apply only for ibus.
-- [X] Merge functions related together.
+- [x] Import from [ibus-tweaker](https://github.com/tuberry/ibus-tweaker) and remove features unrelated to IBus.
+- [x] Read from user themes and apply only for ibus.
+- [x] Merge functions related together.
+- [x] V8: Add functionality to modify IBus Background picture.
 
 ## Acknowledgements
 
 1. [ibus-font-setting](https://extensions.gnome.org/extension/1121/ibus-font-setting/)
 2. [ibus-tweaker](https://github.com/tuberry/ibus-tweaker)
 3. [user-theme](https://gitlab.gnome.org/GNOME/gnome-shell-extensions/-/tree/master/extensions/user-theme)
 4. [shell-restarter](https://github.com/koolskateguy89/gnome-shell-extension-shell-restarter)
+5. [background-logo](https://pagure.io/background-logo-extension)
 
-*This project is part of the achievement of the Google Summer of Code 2021 at [OpenSUSE](https://github.com/openSUSE/mentoring/issues/158).*
+_This project is part of the achievement of the Google Summer of Code 2021 at [OpenSUSE](https://github.com/openSUSE/mentoring/issues/158)._
 
-[EGO]:https://extensions.gnome.org/extension/4112/customize-ibus/
+[ego]: https://extensions.gnome.org/extension/4112/customize-ibus/
diff --git a/customize-ibus@hollowman.ml/extension.js b/customize-ibus@hollowman.ml/extension.js
@@ -192,6 +192,42 @@ const IBusFontSetting = GObject.registerClass(
   }
 );
 
+const IBusBGSetting = GObject.registerClass(
+  {
+    Properties: {
+      background: GObject.param_spec_string(
+        "bg",
+        "bg",
+        "background",
+        "",
+        GObject.ParamFlags.WRITABLE
+      ),
+    },
+  },
+  class IBusBGSetting extends GObject.Object {
+    _init() {
+      super._init();
+      gsettings.bind(Fields.CUSTOMBG, this, "bg", Gio.SettingsBindFlags.GET);
+    }
+
+    set bg(bg) {
+      global.log(_("loading background for IBus:") + bg);
+      let candidateBox = CandidatePopup.bin.get_children();
+      if (candidateBox)
+        candidateBox[0].set_style(
+          'background: url("%s"); background-repeat:no-repeat; background-size:cover;'.format(
+            bg
+          )
+        );
+    }
+
+    destroy() {
+      let candidateBox = CandidatePopup.bin.get_children();
+      if (candidateBox) candidateBox[0].set_style("");
+    }
+  }
+);
+
 const IBusOrientation = GObject.registerClass(
   {
     Properties: {
@@ -577,6 +613,13 @@ const Extensions = GObject.registerClass(
         false,
         GObject.ParamFlags.WRITABLE
       ),
+      bg: GObject.param_spec_boolean(
+        "bg",
+        "bg",
+        "bg",
+        false,
+        GObject.ParamFlags.WRITABLE
+      ),
       input: GObject.param_spec_boolean(
         "input",
         "input",
@@ -626,6 +669,7 @@ const Extensions = GObject.registerClass(
         "font",
         Gio.SettingsBindFlags.GET
       );
+      gsettings.bind(Fields.USECUSTOMBG, this, "bg", Gio.SettingsBindFlags.GET);
       gsettings.bind(
         Fields.ENABLEORIEN,
         this,
@@ -668,6 +712,17 @@ const Extensions = GObject.registerClass(
       }
     }
 
+    set bg(bg) {
+      if (bg) {
+        if (this._bg) return;
+        this._bg = new IBusBGSetting();
+      } else {
+        if (!this._bg) return;
+        this._bg.destroy();
+        delete this._bg;
+      }
+    }
+
     set orien(orien) {
       if (orien) {
         if (this._orien) return;

diff --git a/customize-ibus@hollowman.ml/locale/customize-ibus.pot b/customize-ibus@hollowman.ml/locale/customize-ibus.pot
@@ -6,9 +6,9 @@
 #, fuzzy
 msgid ""
 msgstr ""
-"Project-Id-Version: Customize Ibus 5\n"
+"Project-Id-Version: Customize Ibus 8\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2021-04-05 17:10+0800\n"
+"POT-Creation-Date: 2021-04-07 09:05+0800\n"
 "PO-Revision-Date: YEAR-MO-DA HO:MI+ZONE\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
@@ -17,58 +17,70 @@ msgstr ""
 "Content-Type: text/plain; charset=CHARSET\n"
 "Content-Transfer-Encoding: 8bit\n"
 
-#: extension.js:288
-msgid "loading user theme for IBus:"
+#: extension.js:214
+msgid "loading background for IBus:"
 msgstr ""
 
-#: extension.js:374
+#: extension.js:410
 msgid "loading default theme for IBus"
 msgstr ""
 
-#: extension.js:423
+#: extension.js:459
 msgid "Restarting..."
 msgstr ""
 
-#: prefs.js:79
+#: prefs.js:81
 msgid "Custom IME theme"
 msgstr ""
 
-#: prefs.js:80
+#: prefs.js:82
 msgid "Use custom font"
 msgstr ""
 
-#: prefs.js:81
+#: prefs.js:83
+msgid "Use custom background"
+msgstr ""
+
+#: prefs.js:84
 msgid "Auto switch ASCII mode"
 msgstr ""
 
-#: prefs.js:82
+#: prefs.js:85
 msgid "Candidates orientation"
 msgstr ""
 
-#: prefs.js:85
+#: prefs.js:88
 msgid "Vertical"
 msgstr ""
 
-#: prefs.js:86
+#: prefs.js:89
 msgid "Horizontal"
 msgstr ""
 
-#: prefs.js:89
+#: prefs.js:92
 msgid "On"
 msgstr ""
 
-#: prefs.js:90
+#: prefs.js:93
 msgid "Off"
 msgstr ""
 
-#: prefs.js:91
+#: prefs.js:94
 msgid "Default"
 msgstr ""
 
-#: prefs.js:120
+#: prefs.js:102
+msgid "Select an Image"
+msgstr ""
+
+#: prefs.js:112
+msgid "(None)"
+msgstr ""
+
+#: prefs.js:152
 msgid "Customize IBus"
 msgstr ""
 
-#: prefs.js:357
+#: prefs.js:406
 msgid "Follow User Theme"
 msgstr ""