calendar@cinnamon.org: Apply 'grow-only' behavior to the panel

label.

- Switch the applet from Applet.TextApplet to Applet.Applet so we
  can manage the label's parent.
- Set a minimum width on the parent based on the label's natural
  width, and only allow it to increase if the label requires it.
- Reset this minimum size only if the label shrinks substantially
  (like if the day/month changes), or some other event demands it,
  such as a theme or settings change.

This should reduce any minor size fluctuations in the panel label
that may cause adjacent applets to shift repeatedly when the date/
time label changes.

ref: #13336, #13459.

Author: mtwebster

files/usr/share/cinnamon/applets/calendar@cinnamon.org/applet.js

@@ -3,6 +3,7 @@ const Gio = imports.gi.Gio;
 const GLib = imports.gi.GLib;
 const Lang = imports.lang;
 const Clutter = imports.gi.Clutter;
+const Pango = imports.gi.Pango;
 const St = imports.gi.St;
 const Util = imports.misc.util;
 const PopupMenu = imports.ui.popupMenu;
@@ -20,7 +21,7 @@ const DAY_FORMAT = CinnamonDesktop.WallClock.lctime_format("cinnamon", "%A");
 const DATE_FORMAT_SHORT = CinnamonDesktop.WallClock.lctime_format("cinnamon", _("%B %-e, %Y"));
 const DATE_FORMAT_FULL = CinnamonDesktop.WallClock.lctime_format("cinnamon", _("%A, %B %-e, %Y"));
 
-class CinnamonCalendarApplet extends Applet.TextApplet {
+class CinnamonCalendarApplet extends Applet.Applet {
     constructor(orientation, panel_height, instance_id) {
         super(orientation, panel_height, instance_id);
 
@@ -30,6 +31,19 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
             this.menuManager = new PopupMenu.PopupMenuManager(this);
             this.orientation = orientation;
 
+            this._clockLabel = new St.Label({
+                reactive: true,
+                track_hover: true,
+                style_class: 'applet-label'
+            });
+            this._clockLabel.clutter_text.ellipsize = Pango.EllipsizeMode.NONE;
+
+            this._labelBin = new St.Bin();
+            this._labelBin.set_child(this._clockLabel);
+
+            this.actor.add(this._labelBin, { y_align: St.Align.MIDDLE, y_fill: false });
+            this.actor.set_label_actor(this._clockLabel);
+
             this._initContextMenu();
             this.menu.setCustomStyleClass('calendar-background');
 
@@ -38,6 +52,8 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
 
             this.clock = new CinnamonDesktop.WallClock();
             this.clock_notify_id = 0;
+            this.theme_set_id = 0;
+            this.panel_edit_mode_id = 0;
 
             // Events
             this.events_manager = new EventView.EventsManager(this.settings, this.desktop_settings);
@@ -190,6 +206,8 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
     }
 
     _onSettingsChanged() {
+        this._labelBin.min_width = 0;
+
         this._updateFormatString();
         this._updateClockAndDate();
         this.event_list.actor.visible = this.events_manager.is_active();
@@ -245,6 +263,44 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
         }
     }
 
+    _onThemeSet() {
+        this._resetLabelWidth();
+    }
+
+    _onPanelEditModeChanged() {
+        this._resetLabelWidth();
+    }
+
+    on_panel_height_changed() {
+        this._resetLabelWidth();
+    }
+
+    _resetLabelWidth() {
+        this._labelBin.min_width = 0;
+        this._updateLabelWidth();
+    }
+
+    /* Grow to any wider string, but only snap back down when the width drops by
+     * more than ~2 average character widths - ignores jitter from digit changes
+     * while still reclaiming space when a whole word shrinks ("Saturday" -> "Sunday").
+     *
+     * We measure the label but force the min-width on the parent (_labelBin),
+     * not the label itself, otherwise the label's natural width could never
+     * shrink again. */
+    _updateLabelWidth() {
+        let [, natWidth] = this._clockLabel.get_preferred_width(-1);
+        if (natWidth <= 0) {
+            return;
+        }
+
+        let avgChar = natWidth / Math.max(1, this._clockLabel.get_text().length);
+
+        if (natWidth > this._labelBin.min_width ||
+            natWidth < this._labelBin.min_width - 2 * avgChar) {
+            this._labelBin.min_width = natWidth;
+        }
+    }
+
     _events_manager_ready(em) {
         this.event_list.actor.visible = this.events_manager.is_active();
         this.events_manager.select_date(this._calendar.getSelectedDate(), true);
@@ -264,8 +320,10 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
             label_string = this.clock.get_clock_for_format(this.custom_format);
         }
 
-        if (label_string)
-            this.set_applet_label(label_string);
+        if (label_string) {
+            this._clockLabel.set_text(label_string);
+            this._updateLabelWidth();
+        }
 
         this.go_home_button.reactive = !this._calendar.todaySelected();
         if (this._calendar.todaySelected()) {
@@ -303,6 +361,14 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
             this.clock_notify_id = this.clock.connect("notify::clock", () => this._clockNotify());
         }
 
+        if (this.theme_set_id == 0) {
+            this.theme_set_id = Main.themeManager.connect("theme-set", () => this._onThemeSet());
+        }
+
+        if (this.panel_edit_mode_id == 0) {
+            this.panel_edit_mode_id = global.settings.connect("changed::panel-edit-mode", () => this._onPanelEditModeChanged());
+        }
+
         /* Populates the calendar so our menu allocation is correct for animation */
         this.events_manager.start_events();
         this._resetCalendar();
@@ -314,6 +380,14 @@ class CinnamonCalendarApplet extends Applet.TextApplet {
             this.clock.disconnect(this.clock_notify_id);
             this.clock_notify_id = 0;
         }
+        if (this.theme_set_id > 0) {
+            Main.themeManager.disconnect(this.theme_set_id);
+            this.theme_set_id = 0;
+        }
+        if (this.panel_edit_mode_id > 0) {
+            global.settings.disconnect(this.panel_edit_mode_id);
+            this.panel_edit_mode_id = 0;
+        }
     }
 
     _initContextMenu() {