add opacity slider

activate_gnome@isjerryxiao/extension.js

@@ -27,7 +27,8 @@ class Extension {
         this.labels = []
         this.loaded = 0
         this.settings = null
-        this.handler_id = null
+        this.settings_handler_id = null
+        this.monitors_handler_id = null
     }
 
     update() {
@@ -36,21 +37,20 @@ class Extension {
         let text2 = settings.get_string('text-l2') || settings.get_default_value('text-l2').get_string()
         let vl2 = settings.get_double('l2-vertical') || settings.get_default_value('l2-vertical').get_double()
         let hl2 = settings.get_double('l2-horizontal') || settings.get_default_value('l2-horizontal').get_double()
+        let opacity = settings.get_double('opacity') || settings.get_default_value('opacity').get_double()
 
         this.cleanup()
         for (let monitor of Main.layoutManager.monitors) {
-            let label_1 = new St.Label({ style_class: 'label-1', text: '' })
+            let label_1 = new St.Label({ style_class: 'label-1', text: text1, opacity })
-            let label_2 = new St.Label({ style_class: 'label-2', text: '' })
+            let label_2 = new St.Label({ style_class: 'label-2', text: text2, opacity })
             Main.layoutManager.addTopChrome(label_2, {"trackFullscreen": false})
             Main.layoutManager.addTopChrome(label_1, {"trackFullscreen": false})
             this.labels.push(label_1)
             this.labels.push(label_2)
-            label_1.text = text1
-            label_2.text = text2
             let h = Math.max(0, Math.floor(monitor.height * vl2 - label_2.height))
             let w = Math.max(0, Math.floor(monitor.width * hl2 - label_2.width))
             label_2.set_position(monitor.x + w, monitor.y + h)
-            label_1.set_position(monitor.x + w, monitor.y + h - label_1.height)
+            label_1.set_position(Math.min(monitor.x + w, monitor.x + monitor.width - label_1.width), monitor.y + h - label_1.height)
             if (this.loaded < 4) {
                 this.loaded++
                 Mainloop.timeout_add(1000, () => this.update())
@@ -60,7 +60,8 @@ class Extension {
 
     enable() {
         this.settings = ExtensionUtils.getSettings(Me.metadata['settings-schema'])
-        this.handler_id = this.settings.connect('changed', () => this.update())
+        this.settings_handler_id = this.settings.connect('changed', () => this.update())
+        this.monitors_handler_id = Main.layoutManager.connect('monitors-changed', () => this.update())
         this.update()
     }
 
@@ -74,9 +75,11 @@ class Extension {
 
     disable() {
         this.cleanup()
-        this.settings.disconnect(this.handler_id)
+        this.settings.disconnect(this.settings_handler_id)
+        Main.layoutManager.disconnect(this.monitors_handler_id)
         this.settings = null
-        this.handler_id = null
+        this.settings_handler_id = null
+        this.monitors_handler_id = null
     }
 }
 

activate_gnome@isjerryxiao/prefs.js

@@ -59,12 +59,11 @@ function buildPrefsWidget() {
     prefsWidget.append(vlabel)
 
     let ventry = new Gtk.SpinButton({
+        adjustment: new Gtk.Adjustment({lower: 0.01, upper: 1.0, step_increment: 0.01, page_increment: 0.1}),
         margin_top: 6,
         numeric: true,
         digits: 4,
     })
-    ventry.set_range(0.0, 1.0)
-    ventry.set_increments(0.01, 0.1)
     prefsWidget.append(ventry)
 
     // l2-horizontal
@@ -76,30 +75,48 @@ function buildPrefsWidget() {
     prefsWidget.append(hlabel)
 
     let hentry = new Gtk.SpinButton({
+        adjustment: new Gtk.Adjustment({lower: 0.01, upper: 1.0, step_increment: 0.01, page_increment: 0.1}),
         margin_top: 6,
         numeric: true,
         digits: 4,
     })
-    hentry.set_range(0.0, 1.0)
-    hentry.set_increments(0.01, 0.1)
     prefsWidget.append(hentry)
 
+    // opacity
+    let olabel = new Gtk.Label({
+        label: '<b>Opacity</b>',
+        margin_top: 6,
+        use_markup: true,
+    })
+    prefsWidget.append(olabel)
+
+    let oentry = new Gtk.Scale({
+        adjustment: new Gtk.Adjustment({lower: 0.1, upper: 255, step_increment: 0.1, page_increment: 1}),
+        margin_top: 6,
+        draw_value: false,
+        digits: 1,
+    })
+    prefsWidget.append(oentry)
+
     let resetbtn = new Gtk.Button({
         label: 'reset',
         margin_top: 12,
+        margin_bottom: 6,
     })
     resetbtn.connect('clicked', () => {
         this.settings.reset('text-l1')
         this.settings.reset('text-l2')
         this.settings.reset('l2-vertical')
         this.settings.reset('l2-horizontal')
+        this.settings.reset('opacity')
     })
     prefsWidget.append(resetbtn)
 
     this.settings.bind('text-l1', l1entry, 'text', Gio.SettingsBindFlags.DEFAULT)
     this.settings.bind('text-l2', l2entry, 'text', Gio.SettingsBindFlags.DEFAULT)
-    this.settings.bind('l2-vertical', ventry, 'value', Gio.SettingsBindFlags.DEFAULT)
+    this.settings.bind('l2-vertical', ventry.adjustment, 'value', Gio.SettingsBindFlags.DEFAULT)
-    this.settings.bind('l2-horizontal', hentry, 'value', Gio.SettingsBindFlags.DEFAULT)
+    this.settings.bind('l2-horizontal', hentry.adjustment, 'value', Gio.SettingsBindFlags.DEFAULT)
+    this.settings.bind('opacity', oentry.adjustment, 'value', Gio.SettingsBindFlags.DEFAULT)
 
     return prefsWidget
 }

activate_gnome@isjerryxiao/schemas/org.gnome.shell.extensions.activate_gnome.gschema.xml

@@ -18,5 +18,9 @@
       <default>0.92</default>
       <summary>Horizontal position of line 2</summary>
     </key>
+    <key name="opacity" type="d">
+      <default>102</default>
+      <summary>Opacity</summary>
+    </key>
   </schema>
 </schemalist>

activate_gnome@isjerryxiao/stylesheet.css

@@ -2,15 +2,14 @@
 .label-1 {
     font-size: 36px;
     font-weight: normal;
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 1);
-    background-color: rgba(10, 10, 10, 0);
+    background-color: rgba(0, 0, 0, 0);
     border-radius: 5px;
 }
 .label-2 {
     font-size: 26px;
     font-weight: normal;
-    color: rgba(255, 255, 255, 0.4);
+    color: rgba(255, 255, 255, 1);
-    background-color: rgba(10, 10, 10, 0);
+    background-color: rgba(0, 0, 0, 0);
     border-radius: 5px;
 }
-