From 4e150998d2b7c590f5c2066d8dc883e39ce7d45e Mon Sep 17 00:00:00 2001 From: xianxing Date: Tue, 7 Nov 2023 23:45:45 +0800 Subject: [PATCH] [feat] add ellipsize_mode_switch prefs --- README.md | 5 ++ extension.js | 4 + metadata.json | 5 +- package.sh | 7 +- prefs.js | 41 ++++++++++ schemas/gschemas.compiled | Bin 0 -> 301 bytes ...nome.shell.extensions.app_tabs.gschema.xml | 8 ++ src/AppTab.js | 72 +++++++++++++----- src/TabPanel.js | 12 +++ 9 files changed, 130 insertions(+), 24 deletions(-) create mode 100644 prefs.js create mode 100644 schemas/gschemas.compiled create mode 100644 schemas/org.gnome.shell.extensions.app_tabs.gschema.xml diff --git a/README.md b/README.md index 2c4a37f..fd59ec5 100644 --- a/README.md +++ b/README.md @@ -7,6 +7,11 @@ ## Installation Clone this repository and copy it to path `.local/share/gnome-shell/extensions/` +## DEBUG +```bash +dbus-run-session -- gnome-shell --nested --wayland +``` + ## Feature 1. You can see the application window intuitively 2. Click tab to jump to the corresponding window immediately diff --git a/extension.js b/extension.js index 5a1a8a4..13ce442 100644 --- a/extension.js +++ b/extension.js @@ -4,6 +4,10 @@ import Logger from './src/utils/Logger.js'; import Config from './src/config/Config.js'; import {TabPanel} from './src/TabPanel.js'; +export const get_extension_object = () => Extension.lookupByUUID('huanghaohhoa@163.com'); +export const get_settings = () => get_extension_object().getSettings( + "org.gnome.shell.extensions.app_tabs" +); export default class AppTabsExtension extends Extension { enable() { this._logger = new Logger("AppTabsExtension") diff --git a/metadata.json b/metadata.json index 4fea1e1..1063519 100644 --- a/metadata.json +++ b/metadata.json @@ -3,7 +3,6 @@ "description": "Panel will include a different window tab for the same application that is currently launched.1. You can see the application window intuitively\n2. Click tab to jump to the corresponding window immediately\n3. Click the Close button to close the window", "url": "https://github.com/hhoao/app_tabs", "uuid": "huanghaohhoa@163.com", - "shell-version": [ - "45" - ] + "settings-schema": "org.gnome.shell.extensions.app_tabs", + "shell-version": ["45"] } diff --git a/package.sh b/package.sh index e8b0ad4..8af1d69 100644 --- a/package.sh +++ b/package.sh @@ -1,15 +1,18 @@ #!/bin/bash include_files=( -src/* +src stylesheet.css extension.js metadata.json +prefs.js LICENSE ) args="" for include_file in "${include_files[@]}"; do - args="${args} ${include_file}" + if [ -e "$include_file" ]; then + args="${args} ${include_file}" + fi done if [[ -n $1 ]]; then diff --git a/prefs.js b/prefs.js new file mode 100644 index 0000000..1159587 --- /dev/null +++ b/prefs.js @@ -0,0 +1,41 @@ +import Gio from 'gi://Gio'; +import Adw from 'gi://Adw'; +import Gtk from 'gi://Gtk'; +import {ExtensionPreferences} from 'resource:///org/gnome/Shell/Extensions/js/extensions/prefs.js'; + +export default class DockerContainersPreferences extends ExtensionPreferences { + get_ellipsize_mode_switch = () => { + const settings = this.getSettings() + const ellipsize_mode_switch = new Gtk.Switch({ + active: false, + valign: Gtk.Align.CENTER, + }); + settings.bind("ellipsize-mode", ellipsize_mode_switch, "active", Gio.SettingsBindFlags.DEFAULT); + return ellipsize_mode_switch; + }; + + fillPreferencesWindow(window) { + const page = new Adw.PreferencesPage({ + title: 'General', + icon_name: 'dialog-information-symbolic', + }); + const group = new Adw.PreferencesGroup({ + title: 'Appearance', + description: 'Configure the appearance of the extension', + }); + page.add(group); + + const row = new Adw.ActionRow({ + title: "Enable ellipsis mode of label", + }); + group.add(row); + + const ellipsize_mode_switch = this.get_ellipsize_mode_switch(); + + row.add_suffix(ellipsize_mode_switch); + row.activatable_widget = ellipsize_mode_switch; + + window.add(page); + } +} + diff --git a/schemas/gschemas.compiled b/schemas/gschemas.compiled new file mode 100644 index 0000000000000000000000000000000000000000..5f9969dce20f63b84fccb9d6c4a6e24ccf1931e0 GIT binary patch literal 301 zcmYLEy9&ZU5L}g1f>9BaIfEqKxazyMKx!E^=zU0x0lN{<}NMi3Vfh@=%R{5loy#6 zCe~>x^s&~tNs8PERhGM2g$6G220Yv1z5DqxukAX97tVjjhC(s` literal 0 HcmV?d00001 diff --git a/schemas/org.gnome.shell.extensions.app_tabs.gschema.xml b/schemas/org.gnome.shell.extensions.app_tabs.gschema.xml new file mode 100644 index 0000000..fd6f4ec --- /dev/null +++ b/schemas/org.gnome.shell.extensions.app_tabs.gschema.xml @@ -0,0 +1,8 @@ + + + + + false + + + diff --git a/src/AppTab.js b/src/AppTab.js index ccf012a..cf61e8d 100644 --- a/src/AppTab.js +++ b/src/AppTab.js @@ -2,6 +2,8 @@ import Clutter from 'gi://Clutter'; import * as Overview from 'resource:///org/gnome/shell/ui/overview.js'; import St from 'gi://St'; import GObject from 'gi://GObject'; +import Pango from 'gi://Pango'; +import {get_settings} from '../extension.js'; export const AppTab = GObject.registerClass({ }, class AppTab extends St.Button { @@ -12,44 +14,76 @@ export const AppTab = GObject.registerClass({ }); this._current_window = null; this._divide = null; - this.add_style_class_name('app-tab') + + this._init_controls(); + this._init_icon(); + this._init_label(); + this._init_close_button(); + + this.connect('clicked', () => { + if (this.get_current_window()) { + this.get_current_window().activate(0); + } + }); + } + _init_close_button() { + this._close_button = new St.Button({ + label: '×', + y_align: Clutter.ActorAlign.CENTER, + x_align: Clutter.ActorAlign.END, + }); + this._close_button.connect('clicked', () => { + if (this.get_current_window()) { + this.get_current_window().delete(0); + } + }); + this._close_button.add_style_class_name('app-tab-close-button'); + this._controls.add_child(this._close_button) + } + _init_controls() { this._controls = new St.BoxLayout({ x_expand: true, y_expand: false, }) this._controls.add_style_class_name("app-tab-controller"); this.add_actor(this._controls) + } + + _init_icon() { this._icon = new St.Icon() this._icon.set_icon_size(18) this._icon.set_fallback_gicon(null) this._icon.add_style_class_name("app-tab-icon"); + this._controls.add_child(this._icon); + } + _init_label() { this._label = new St.Label({ text: 'label', y_align: Clutter.ActorAlign.CENTER, x_align: Clutter.ActorAlign.FILL, }); + let enableEllipsizeMode = get_settings().get_boolean("ellipsize-mode"); + let ellipsizeMode = Pango.EllipsizeMode.NONE; + if (enableEllipsizeMode) { + ellipsizeMode = Pango.EllipsizeMode.END; + } + this._label.clutter_text.set_ellipsize(ellipsizeMode); + this._label.clutter_text.set_line_wrap(false); + this._label.clutter_text.set_single_line_mode(true); + this._label.clutter_text.set_line_wrap_mode(Pango.WrapMode.CHAR); + this._label.clutter_text.set_max_length(10); this._label.add_style_class_name('app-tab-label'); - this._close_button = new St.Button({ - label: '×', - y_align: Clutter.ActorAlign.CENTER, - x_align: Clutter.ActorAlign.END, - }); - this._close_button.connect('clicked', () => { - if (this.get_current_window()) { - this.get_current_window().delete(0); - } - }); - this._close_button.add_style_class_name('app-tab-close-button'); - this._controls.add_child(this._icon); + this._controls.add_child(this._label) - this._controls.add_child(this._close_button) + } - this.connect('clicked', () => { - if (this.get_current_window()) { - this.get_current_window().activate(0); - } - }); + set_label_ellipsize_mode(value) { + let ellipsizeMode = Pango.EllipsizeMode.NONE; + if (value) { + ellipsizeMode = Pango.EllipsizeMode.END; + } + this._label.clutter_text.set_ellipsize(ellipsizeMode); } destroy() { diff --git a/src/TabPanel.js b/src/TabPanel.js index 5ddb770..3a8ff0f 100644 --- a/src/TabPanel.js +++ b/src/TabPanel.js @@ -7,6 +7,7 @@ import * as PanelMenu from 'resource:///org/gnome/shell/ui/panelMenu.js'; import * as Main from 'resource:///org/gnome/shell/ui/main.js'; import Logger from './utils/Logger.js'; import {AppTab} from './AppTab.js'; +import {get_settings} from '../extension.js'; export const TabPanel = GObject.registerClass({ Properties: { @@ -44,6 +45,17 @@ export const TabPanel = GObject.registerClass({ global.window_manager.connectObject('switch-workspace', this._sync.bind(this), this); global.display.connectObject('notify::focus-window', this.on_focus_window_changed.bind(this), this) + get_settings().connectObject( + "changed::ellipsize-mode", + this._on_ellipsize_mode_changed.bind(this), + this + ); + } + + _on_ellipsize_mode_changed(settings, mode) { + for (let tab of this._tabs_pool) { + tab.set_label_ellipsize_mode(get_settings().get_boolean(mode)); + } } get_tab_style(is_active = false, is_hover = false) {