Merge lp:~teemperor/pantheon-greeter/fix-caps-lock into lp:~elementary-pantheon/pantheon-greeter/trunk

[Raphael Isemann]

Implemented caps lock warning.

Adds a caps lock warning as a popover. The popover is not red as it was in the original mockup as this would requirea extra CSS class and there is currently no decision how we handle all those custom CSS classes that we need for the greeter.

What to test:

* Warning appears at the correct position?
* Warning appears and disappears when switching caps lock on/off
* Warning correctly handles scrolling the login options up/down with activated caps lock
* Warning correctly disappears when the user scrolls to a login option that isn't requiring keyboard input (guest login for example).
* Warning disappears when logging in
* Warning is appearing when starting the greeter with already activated caps lock.

What NOT to test:

* Warning is red? (as this can't be implemented without having a decision about the already mentioned theming infrastructure).

[Danielle Foré (danrabbit)]

Hm the alignment is pretty weird here. I'm not sure what it's supposed to be aligning to.

The shadow is very harsh and it gets cut off at the bottom. It doesn't look like these values are coming from the theme.

The padding underneath the label is greater than the padding above. The padding to the left and right seems pretty extreme.

The warning disappears if you move the cursor over it.

review: Needs Fixing

Unmerged revisions

325. By Raphael Isemann on 2014-11-19

No more PopOver-clones appearing when typing. PopOver is now at the correct position.

324. By Raphael Isemann on 2014-10-29

First version of the caps-lock popver. Uploading for tom

=== modified file 'src/CredentialsArea.vala'
--- src/CredentialsArea.vala	2014-10-26 19:31:56 +0000
+++ src/CredentialsArea.vala	2014-11-19 19:55:42 +0000
@@ -30,10 +30,32 @@
 
     Entry password;
 
-    public PasswordArea () {
+    /**
+     * Parent of this area needed for calculations regarding
+     * the position of the caps_lock_popover.
+     */
+    GtkClutter.Actor area;
+    Grid parent_grid;
+
+    /**
+     * The PopOver that displays the warning when caps
+     * lock is activated. Otherwise null if there is no
+     * active PopOver at the moment.
+     */
+    PopOver caps_lock_popover = null;
+
+    public PasswordArea (GtkClutter.Actor area, Grid parent_grid) {
+        this.area = area;
+        this.parent_grid = parent_grid;
         create_password_field ();
     }
 
+    ~PasswordArea () {
+        if (caps_lock_popover != null) {
+            caps_lock_popover.fade_out ();
+        }
+    }
+
     void create_password_field () {
         password = new Entry ();
         password.margin_top = 32;
@@ -60,6 +82,77 @@
         });
 
         attach (password, 0, 0, 1, 1);
+
+        Gdk.Keymap.get_default ().state_changed.connect (() => {
+            update_popup ();
+        });
+
+        show.connect (() => {
+            // We use idle we need to wait for
+            // the widget-coordinates that are also calculated
+            // during the current signal-call.
+            Idle.add (() => {
+                update_popup ();
+                return false;
+            });
+        });
+    }
+
+    void update_popup () {
+        var keymap = Gdk.Keymap.get_default ();
+        if (keymap.get_caps_lock_state ()) {
+            create_popup ();
+        } else if (caps_lock_popover != null) {
+            caps_lock_popover.fade_out ();
+            // The PopOver removes itself from the area
+            // at the end of the animation, so this is
+            // safe.
+            caps_lock_popover = null;
+        }
+    }
+
+    /**
+     * Creates an popup if possible and shows it.
+     * To destroy that popup, call caps_lock_popover.fade_out ();
+     */
+    void create_popup () {
+        // We do nothing in case we already have a popover
+        if (caps_lock_popover != null)
+            return;
+
+        caps_lock_popover = new PopOver ();
+
+        var box = new Box (Orientation.VERTICAL, 0);
+        (caps_lock_popover.get_content_area () as Container).add (box);
+
+        var warning = new Label (_("Caps lock is turned on!"));
+        box.add (warning);
+
+        // Find the right position for the PopOver
+        area.get_stage ().add_child (caps_lock_popover);
+        float actor_x = 0;
+        float actor_y = 0;
+
+        area.get_transformed_position (out actor_x, out actor_y);
+
+        // We got the upper-left corner of the login-box,
+        // now we need to find the coordinates of our
+        // password box in there.
+        int po_x = 0;
+        int po_y = 0;
+        password.translate_coordinates (parent_grid,
+                password.get_allocated_width () / 2,
+                password.get_allocated_height (),
+                out po_x, out po_y);
+
+        caps_lock_popover.width = 245;
+
+        // FIXME the two magic values here should be calculated
+        // by some fancy algorithm if possible, but it works
+        // for now.
+        caps_lock_popover.x = actor_x + po_x - caps_lock_popover.width + 80;
+        caps_lock_popover.y = actor_y + po_x - 32;
+        caps_lock_popover.get_widget ().show_all ();
     }
 
     public override void pass_focus () {

=== modified file 'src/LoginBox.vala'
--- src/LoginBox.vala	2014-10-26 19:31:56 +0000
+++ src/LoginBox.vala	2014-11-19 19:55:42 +0000
@@ -293,7 +293,7 @@
 
             switch (type) {
                 case PromptType.PASSWORD:
-                    credentials = new PasswordArea ();
+                    credentials = new PasswordArea (this, grid);
                     break;
                 case PromptType.CONFIRM_LOGIN:
                     credentials = new LoginButtonArea ();

=== modified file 'src/Utilities.vala'
--- src/Utilities.vala	2014-07-09 10:25:25 +0000
+++ src/Utilities.vala	2014-11-19 19:55:42 +0000
@@ -139,6 +139,12 @@
     Granite.Drawing.BufferSurface buffer;
     Gtk.EventBox container;
 
+    /**
+     * If the PopOver is currently fading out.
+     * Used to prevent that we start multiple fading out animations.
+     */
+    bool fading_out = false;
+
     public PopOver () {
         this.container = new Gtk.EventBox ();
         this.container.visible_window = false;
@@ -191,13 +197,7 @@
         });
 
         this.leave_event.connect (() => {
-            this.animate (Clutter.AnimationMode.EASE_OUT_QUAD, 200, opacity:0).
-
-            completed.connect (() => {
-                this.get_stage ().remove_child (this);
-                this.destroy ();
-            });
-
+            fade_out ();
             return true;
         });
 
@@ -205,6 +205,20 @@
         this.animate (Clutter.AnimationMode.EASE_OUT_QUAD, 200, opacity:255);
     }
 
+    public void fade_out () {
+        // prevent multiple callings of this function
+        if (fading_out)
+            return;
+        fading_out = true;
+
+        this.animate (Clutter.AnimationMode.EASE_OUT_QUAD, 200, opacity:0).
+
+        completed.connect (() => {
+            this.get_stage ().remove_child (this);
+            this.destroy ();
+        });
+    }
+
     public Gtk.Widget get_content_area () {
         return this.container;
     }