Merge lp:~mterry/unity-greeter/look-and-feel into lp:unity-greeter

[Michael Terry]

This gets us much closer to design's mockups. For ideal look, you'll need Cimi's theme changes (you can get both this branch and his theme changes in ppa:mterry/ppa2)

[lp:~mterry/unity-greeter/look-and-feel]

265. By Michael Terry on 2012-01-26

don't reset easing when in the middle of a scroll and we continue the scroll with another key press

266. By Michael Terry on 2012-01-27

avoid drawing some labels twice; don't allow scrolling in opposite direction we are going right now; if we get request to scroll further, add to animation time instead of resetting it

267. By Michael Terry on 2012-01-27

merge indicator_path fixes

[Robert Ancell (robert-ancell)]

review: Approve

[lp:~mterry/unity-greeter/look-and-feel]

268. By Michael Terry on 2012-01-30

make multiple arrow presses smoother by allowing UserList to extend the timer as it progresses

269. By Michael Terry on 2012-01-30

wait until animation is done to set keyboard layout

270. By Michael Terry on 2012-01-30

give more freedom to timeouts used; speed up scrolling animations

271. By Michael Terry on 2012-01-30

explain that speed of animate_timer is in ms

272. By Michael Terry on 2012-01-30

center name better with option button

=== modified file 'configure.ac'
--- configure.ac	2012-01-19 03:55:57 +0000
+++ configure.ac	2012-01-30 18:00:33 +0000
@@ -26,6 +26,9 @@
     cairo-ft
 ])
 
+INDICATORDIR=`$PKG_CONFIG --variable=indicatordir indicator3-0.4`
+AC_SUBST(INDICATORDIR)
+
 dnl ###########################################################################
 dnl Internationalization
 dnl ###########################################################################

=== modified file 'src/Makefile.am'
--- src/Makefile.am	2012-01-14 16:24:09 +0000
+++ src/Makefile.am	2012-01-30 18:00:33 +0000
@@ -9,6 +9,10 @@
 	animate-timer.vala \
 	background.vala \
 	dash-box.vala \
+	dash-button.vala \
+	dash-entry.vala \
+	fadable.vala \
+	menu.vala \
 	menubar.vala \
 	settings-daemon.vala \
 	unity-greeter.vala \
@@ -21,7 +25,8 @@
 	-DLOCALEDIR=\""$(localedir)"\" \
 	-DVERSION=\"$(VERSION)\" \
 	-DCONFIG_FILE=\""$(sysconfdir)/lightdm/unity-greeter.conf"\" \
-	-DPKGDATADIR=\""$(pkgdatadir)"\"
+	-DPKGDATADIR=\""$(pkgdatadir)"\" \
+	-DINDICATORDIR=\""$(INDICATORDIR)"\"
 
 unity_greeter_VALAFLAGS = \
 	--pkg posix \

=== modified file 'src/animate-timer.vala'
--- src/animate-timer.vala	2012-01-11 13:15:05 +0000
+++ src/animate-timer.vala	2012-01-30 18:00:33 +0000
@@ -20,49 +20,72 @@
 
 private class AnimateTimer : Object
 {
-    public enum Speed
-    {
-        INSTANT, /* Good for animations that don't convey any information */
-        FAST, /* Good for animations that convey duplicated information (e.g. scrolling) */
-        NORMAL,
-        SLOW, /* Good for animations that convey information that is only presented in the animation */
-    }
+    /* The following are the same intervals that Unity uses */
+    public static const int INSTANT = 150; /* Good for animations that don't convey any information */
+    public static const int FAST =    250; /* Good for animations that convey duplicated information */
+    public static const int NORMAL =  500;
+    public static const int SLOW =   1000; /* Good for animations that convey information that is only presented in the animation */
 
-    public Speed speed {get; construct;}
+    /* speed is in milliseconds */
+    public int speed {get; set;}
     public bool is_running { get { return timeout != 0; } }
+    public double progress {get; private set;}
 
     /* progress is from 0.0 to 1.0 */
     public signal void animate (double progress);
 
-    public AnimateTimer (Speed speed)
+    /* speed is in milliseconds */
+    public AnimateTimer (int speed)
     {
         Object (speed: speed);
     }
 
-    public void reset ()
+    /* temp_speed is in milliseconds */
+    public void reset (int temp_speed = 0)
     {
         stop ();
+
         timeout = Timeout.add (16, animate_cb);
-
-        start_time = GLib.get_monotonic_time ();
-
-        /* The following are the same intervals that Unity uses */
-        switch (speed)
-        {
-        default:
-        case Speed.INSTANT:
-            length =  150 * TimeSpan.MILLISECOND;
-            break;
-        case Speed.FAST:
-            length =  250 * TimeSpan.MILLISECOND;
-            break;
-        case Speed.NORMAL:
-            length =  500 * TimeSpan.MILLISECOND;
-            break;
-        case Speed.SLOW:
-            length = 1000 * TimeSpan.MILLISECOND;
-            break;
-        }
+        start_time = 0;
+        extra_time = 0;
+        extra_progress = 0;
+
+        if (temp_speed == 0)
+            temp_speed = speed;
+
+        length = temp_speed * TimeSpan.MILLISECOND;
+    }
+
+    /* This tells us the consumer of our progress reports is changing the
+       goalposts on us.  So we need to adjust our reports accordingly.
+       'extra_progress' is how much progress is being added to the animation.
+     */
+    public bool extend (double new_progress)
+    {
+        /* As an example, say a consumer is animating from point A to point C in
+           150ms.  This is two points to cover, and at 75ms, they will be 0.5 done.
+
+           Now, they extend it to point D.  This adds an extra point, which is half
+           the original progress.  So now they call extend (0.5).
+
+           We extend in the middle, so we need the slope at halfway through our
+           progress function.  That is a constant we have (see calculate_progress
+           for details).  So we'd need to add the same amount of normalized time
+           to our process as progress, which is 0.5 / HALFWAY_VELOCITY = 0.318 in
+           this example.  Which is (length * 0.318) = 47.7ms more time to add.
+
+           Now we have 197.7ms as length of our animation.  Which changes the
+           progress values we give out.  We further need to adjust our progress
+           function to take this 'pause' in the middle of the function into
+           account.
+        */
+
+        if (progress > HALFWAY_PROGRESS)
+            return false;
+
+        extra_progress += new_progress;
+        extra_time = (TimeSpan)(length * extra_progress / HALFWAY_VELOCITY);
+        return true;
     }
 
     public void stop ()
@@ -75,12 +98,22 @@
     private uint timeout = 0;
     private TimeSpan start_time = 0;
     private TimeSpan length = 0;
+    private TimeSpan extra_time = 0;
+    private double extra_progress = 0.0;
+
+    /* Derivative of our easing function at 0.5 (the halfway point).
+       See calculate_progress() for functions. */
+    private static const double HALFWAY_VELOCITY = 1.5708;
+
+    /* The y value of our easing function at 0.5 (the halway point) */
+    private static const double HALFWAY_PROGRESS = 0.75;
 
     private bool animate_cb ()
     {
-        var time = normalize_time ();
-        var progress = normalize_progress (time);
+        if (start_time == 0)
+            start_time = GLib.get_monotonic_time ();
 
+        progress = calculate_progress (GLib.get_monotonic_time ());
         animate (progress);
 
         if (progress >= 1.0)
@@ -93,20 +126,96 @@
     }
 
     /* Returns 0.0 to 1.0 where 1.0 is at or past end_time */
-    private double normalize_time ()
-    {
-        var now = GLib.get_monotonic_time ();
-        return (((double)(now - start_time)) / length).clamp (0.0, 1.0);
+    private double normalize_time (TimeSpan now)
+    {
+        var total = length;
+        var halfway = start_time + length / 2;
+        if (now > halfway)
+            now -= extra_time;
+
+        return (((double)(now - start_time)) / total).clamp (0.0, 1.0);
+    }
+
+    /* Incoming progress count is original, un-extra-time enhanced progress */
+    private double normalize_progress (double p)
+    {
+        /* So without extra time, progress goes from 0.0 to 1.0.  But with
+           extra time, the beginning and end want to keep the same function,
+           just squeezed into a smaller place in the graph.  So we figure out
+           that mapping here. */
+        var extra_mapped = extra_progress / (1.0 + extra_progress);
+        var half_mapped = HALFWAY_PROGRESS / (1.0 + extra_progress);
+        if (p < HALFWAY_PROGRESS)
+            return p * (half_mapped / HALFWAY_PROGRESS);
+        else
+        {
+            var end = 1.0 - half_mapped - extra_mapped;
+            return (p - HALFWAY_PROGRESS) * (end / (1 - HALFWAY_PROGRESS)) + half_mapped + extra_mapped;
+        }
     }
 
     /* Returns 0.0 to 1.0 where 1.0 is done.
-       time is normalized time from 0.0 to 1.0. */
-    private double normalize_progress (double time)
+       time is not normalized yet! */
+    private double calculate_progress (TimeSpan time)
     {
         /* Use a sine wave function similar to what Unity uses.  They call it
            'easing' and is designed to make the animation start and end slower
-           than in the middle. */
-        return ((-1 * Math.cos (Math.PI * time) + 1) / 2).clamp (0.0, 1.0);
+           than in the middle. 
+
+           ((1 - Math.cos (Math.PI * time)) / 2) is the basic sine curve for
+           easing, used by Unity and others.  By squaring that and reversing
+           the curve (by using 1 - x and 1 - y), we get a more exaggerated
+           slowdown.
+
+           For clarity, here is the whole function:
+            y = 1 - ((1 - cos (pi * (1 - x))) / 2) ^ 2
+
+           Here is the derivative of that function (useful for calculating
+           slope at a given point, used elsewhere in this class):
+            y = (pi * (cos (pi * (x - 1)) - 1)) * sin (pi * (x - 1)) / 2 
+
+           */
+
+        /* But due to the ability to add extra time into the equation, we
+           are actually three functions:
+           1) x=[0,A) = normal
+           2) x=[A,B] = halfway slope
+           3) x=(B,1.0] = picks up where first function left off */
+
+        var y = 0.0;
+        var orig_half_point = start_time + length / 2;
+
+        if (time > start_time + length + extra_time)
+        {
+            y = 1.0;
+        }
+        else if (time < orig_half_point)
+        {
+            var x = normalize_time (time);
+            y = easing_function (x);
+            y = normalize_progress (y);
+        }
+        else if (time < orig_half_point + extra_time)
+        {
+            var xpercent = (time - orig_half_point) / (double)extra_time;
+            y = (xpercent * extra_progress + HALFWAY_PROGRESS) / (1.0 + extra_progress);
+        }
+        else
+        {
+            var x = normalize_time (time);
+            y = easing_function (x);
+            y = normalize_progress (y);
+        }
+
+        return y.clamp (0.0, 1.0);
+    }
+
+    private double easing_function (double x)
+    {
+        var y = (1 - Math.cos (Math.PI * (1.0 - x))) / 2;
+        y = y * y;
+        y = 1.0 - y;
+        return y;
     }
 }
 

=== modified file 'src/background.vala'
--- src/background.vala	2012-01-14 16:24:09 +0000
+++ src/background.vala	2012-01-30 18:00:33 +0000
@@ -271,7 +271,7 @@
     {
         orientation = Gtk.Orientation.VERTICAL;
 
-        timer = new AnimateTimer (AnimateTimer.Speed.INSTANT);
+        timer = new AnimateTimer (AnimateTimer.INSTANT);
         timer.animate.connect (animate_cb);
 
         loaders = new HashTable<string?, BackgroundLoader> (str_hash, str_equal);

=== modified file 'src/config.vapi'
--- src/config.vapi	2011-08-24 03:15:08 +0000
+++ src/config.vapi	2012-01-30 18:00:33 +0000
@@ -6,4 +6,5 @@
   public const string VERSION;
   public const string CONFIG_FILE;
   public const string PKGDATADIR;
+  public const string INDICATORDIR;
 }

=== added file 'src/dash-button.vala'
--- src/dash-button.vala	1970-01-01 00:00:00 +0000
+++ src/dash-button.vala	2012-01-30 18:00:33 +0000
@@ -0,0 +1,37 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2012 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Michael Terry <[e-mail]>
+ */
+
+public class DashButton : Gtk.Button, Fadable
+{
+    protected FadeTracker fade_tracker {get; protected set;}
+
+    construct
+    {
+        fade_tracker = new FadeTracker (this);
+    }
+
+    public override bool draw (Cairo.Context c)
+    {
+        c.push_group ();
+        base.draw (c);
+        c.pop_group_to_source ();
+        c.paint_with_alpha (fade_tracker.alpha);
+        return false;
+    }
+}

=== added file 'src/dash-entry.vala'
--- src/dash-entry.vala	1970-01-01 00:00:00 +0000
+++ src/dash-entry.vala	2012-01-30 18:00:33 +0000
@@ -0,0 +1,70 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2012 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Michael Terry <[e-mail]>
+ */
+
+/* Vala's vapi for gtk3 is broken for lookup_color (it forgets the out keyword) */
+[CCode (cheader_filename = "gtk/gtk.h")]
+extern bool gtk_style_context_lookup_color (Gtk.StyleContext ctx, string color_name, out Gdk.RGBA color);
+
+public class DashEntry : Gtk.Entry, Fadable
+{
+    public string constant_placeholder_text {get; set;}
+
+    protected FadeTracker fade_tracker {get; protected set;}
+
+    construct
+    {
+        fade_tracker = new FadeTracker (this);
+    }
+
+    public override bool draw (Cairo.Context c)
+    {
+        c.save ();
+        c.push_group ();
+        base.draw (c);
+        c.pop_group_to_source ();
+        c.paint_with_alpha (fade_tracker.alpha);
+        c.restore ();
+
+        /* Now draw the prompt text */
+        if (get_text_length () == 0 && constant_placeholder_text.length > 0)
+            draw_prompt_text (c);
+
+        return false;
+    }
+
+    private void draw_prompt_text (Cairo.Context c)
+    {
+        /* Position text */
+        int x, y;
+        get_layout_offsets (out x, out y);
+        c.move_to (x, y);
+
+        /* Set foreground color */
+        var fg = Gdk.RGBA ();
+        var context = get_style_context ();
+        if (!gtk_style_context_lookup_color (context, "placeholder_text_color", out fg))
+            fg.parse ("ccc");
+        c.set_source_rgba (fg.red, fg.green, fg.blue, fg.alpha);
+
+        /* Draw text */
+        var layout = create_pango_layout (constant_placeholder_text);
+        layout.set_font_description (Pango.FontDescription.from_string ("Ubuntu 14"));
+        Pango.cairo_show_layout (c, layout);
+    }
+}

=== added file 'src/fadable.vala'
--- src/fadable.vala	1970-01-01 00:00:00 +0000
+++ src/fadable.vala	2012-01-30 18:00:33 +0000
@@ -0,0 +1,85 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2012 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Michael Terry <[e-mail]>
+ */
+
+public class FadeTracker : Object
+{
+    public double alpha {get; private set; default = 1.0;}
+    public Gtk.Widget widget {get; construct;}
+
+    public enum Mode
+    {
+        FADE_IN,
+        FADE_OUT,
+    }
+
+    public FadeTracker (Gtk.Widget widget)
+    {
+        Object (widget: widget);
+    }
+
+    public void reset (Mode mode)
+    {
+        this.mode = mode;
+        animate_cb (0.0);
+        widget.show ();
+        timer.reset ();
+    }
+
+    private AnimateTimer timer;
+    private Mode mode;
+
+    construct
+    {
+        timer = new AnimateTimer (AnimateTimer.INSTANT);
+        timer.animate.connect (animate_cb);
+    }
+
+    private void animate_cb (double progress)
+    {
+        if (mode == Mode.FADE_IN)
+        {
+            alpha = progress;
+            if (progress == 1.0)
+                widget.grab_focus ();
+        }
+        else
+        {
+            alpha = 1.0 - progress;
+            if (progress == 1.0)
+                widget.hide (); /* finish the job */
+        }
+
+        widget.queue_draw ();
+    }
+}
+
+public interface Fadable : Gtk.Widget
+{
+    protected abstract FadeTracker fade_tracker {get; protected set;}
+
+    public void fade_in ()
+    {
+        fade_tracker.reset (FadeTracker.Mode.FADE_IN);
+    }
+
+    public void fade_out ()
+    {
+        fade_tracker.reset (FadeTracker.Mode.FADE_OUT);
+    }
+}

=== added file 'src/menu.vala'
--- src/menu.vala	1970-01-01 00:00:00 +0000
+++ src/menu.vala	2012-01-30 18:00:33 +0000
@@ -0,0 +1,46 @@
+/* -*- Mode: Vala; indent-tabs-mode: nil; tab-width: 4 -*-
+ *
+ * Copyright (C) 2011,2012 Canonical Ltd
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License version 3 as
+ * published by the Free Software Foundation.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ * Authors: Andrea Cimitan <[e-mail]>
+ */
+
+
+public class Menu : Gtk.Menu
+{
+    public Background? background {get; construct; default = null;}
+
+    public Menu (Background bg)
+    {
+        Object (background: bg);
+    }
+
+    public override bool draw (Cairo.Context c)
+    {
+        if (background != null)
+        {
+            int x, y;
+            Gdk.Window window = get_window ();
+            window.get_origin (out x, out y);
+            c.save ();
+            c.translate (-x, -y);
+            background.draw_full (c, Background.DrawFlags.NONE);
+            c.restore ();
+        }
+
+        base.draw (c);
+        return false;
+    }
+}

=== modified file 'src/menubar.vala'
--- src/menubar.vala	2012-01-14 16:24:09 +0000
+++ src/menubar.vala	2012-01-30 18:00:33 +0000
@@ -85,19 +85,6 @@
 
     public override bool draw (Cairo.Context c)
     {
-        if (background != null)
-        {
-            int x, y;
-            background.translate_coordinates (this, 0, 0, out x, out y);
-            c.save ();
-            c.translate (x, y);
-            background.draw_full (c, Background.DrawFlags.NONE);
-            c.restore ();
-        }
-
-        c.set_source_rgb (0, 0, 0);
-        c.paint_with_alpha (0.5);
-
         foreach (var child in get_children ())
         {
             propagate_draw (child, c);
@@ -289,10 +276,10 @@
         insert (a11y_item, (int) get_children ().length () - 1);
 
         debug ("LANG=%s LANGUAGE=%s", Environment.get_variable ("LANG"), Environment.get_variable ("LANGUAGE"));
-        string[] filenames = {"/usr/lib/indicators3/6/libsession.so",
-                              "/usr/lib/indicators3/6/libdatetime.so",
-                              "/usr/lib/indicators3/6/libpower.so",
-                              "/usr/lib/indicators3/6/libsoundmenu.so"};
+        string[] filenames = {Path.build_filename (Config.INDICATORDIR, "libsession.so"),
+                              Path.build_filename (Config.INDICATORDIR, "libdatetime.so"),
+                              Path.build_filename (Config.INDICATORDIR, "libpower.so"),
+                              Path.build_filename (Config.INDICATORDIR, "libsoundmenu.so")};
         foreach (var filename in filenames)
         {
             var io = new Indicator.Object.from_file (filename);

=== modified file 'src/user-list.vala'
--- src/user-list.vala	2012-01-23 15:42:22 +0000
+++ src/user-list.vala	2012-01-30 18:00:33 +0000
@@ -48,8 +48,6 @@
 
 public class UserList : Gtk.Container
 {
-    private int frame_count = 0;
-
     public Background background;
     private uint change_background_timeout = 0;
 
@@ -71,16 +69,17 @@
     private string? message;
 
     private Gtk.Box login_box;
-    private Gtk.Entry prompt_entry;
-    private Gtk.Button login_button;
-    private Gtk.Widget prompt_widget_to_show;
+    private DashEntry prompt_entry;
+    private DashButton login_button;
+    private Fadable prompt_widget_to_show;
     private Gtk.Button options_button;
-    private Gtk.Menu options_menu;
+    private Menu options_menu;
     private Gdk.Pixbuf options_pixbuf;
     unowned GLib.SList<SessionMenuItem> session_group = null;
 
     private bool complete = false;
-    
+
+    private int border = 4;
     private int box_width = 7;
 
     private uint n_above = 3;
@@ -153,19 +152,13 @@
         login_box.show ();
         add (login_box);
 
-        prompt_entry = new Gtk.Entry ();
+        prompt_entry = new DashEntry ();
         prompt_entry.caps_lock_warning = true;
-        prompt_entry.has_frame = false;
-        var b = Gtk.Border ();
-        b.left = 15;
-        b.right = 15;
-        b.top = 15;
-        b.bottom = 15;
-        prompt_entry.set_inner_border (b);
+
         prompt_entry.activate.connect (prompt_entry_activate_cb);
         add (prompt_entry);
 
-        login_button = new Gtk.Button ();
+        login_button = new DashButton ();
         var label = new Gtk.Label ("<span font_size=\"large\">%s</span>".printf (/* 'Log In' here is the button for logging in. */
                                                                              _("Log In")));
         label.use_markup = true;
@@ -192,12 +185,24 @@
         options_button.show ();
         add (options_button);
 
-        options_menu = new Gtk.Menu ();
+        options_menu = new Menu (background);
+        add_style_class (options_menu);
 
-        scroll_timer = new AnimateTimer (AnimateTimer.Speed.FAST);
+        scroll_timer = new AnimateTimer (AnimateTimer.FAST);
         scroll_timer.animate.connect (scroll_animate_cb);
     }
 
+    private void add_style_class (Gtk.Widget widget)
+    {
+        /* Add style context class lightdm-user-list
+         * to each widget added to UserList.
+         * FIXME Ideally, we should set the style context
+         * only on the parent of those, and once,
+         * so it gets applied automatically to all children. */
+        var ctx = widget.get_style_context ();
+        ctx.add_class ("lightdm");
+    }
+
     private void redraw_user_list ()
     {
         queue_draw_area (box_x, box_y - (int) (n_above + 1) * grid_size,
@@ -220,7 +225,23 @@
     {
         login_button.hide ();
         prompt_entry.hide ();
-        message = text;
+        if (text.contains ("\n"))
+        {
+            message = text;
+            prompt_entry.constant_placeholder_text = "";
+        }
+        else
+        {
+            /* Strip trailing colon if present (also handle CJK version) */
+            var placeholder = text;
+            if (placeholder.has_suffix (":") || placeholder.has_suffix ("："))
+            {
+                var len = placeholder.char_count ();
+                placeholder = placeholder.substring (0, placeholder.index_of_nth_char (len - 1));
+            }
+            message = "";
+            prompt_entry.constant_placeholder_text = placeholder;
+        }
         prompt_entry.text = "";
         prompt_entry.sensitive = true;
         prompt_entry.visibility = !secret;
@@ -422,7 +443,7 @@
     private void change_background ()
     {
         /* Set background after user stops scrolling */
-        if (frame_count > 0)
+        if (background.current_background != null)
         {
             if (change_background_timeout != 0)
                 Source.remove (change_background_timeout);
@@ -435,26 +456,53 @@
     private void finished_animating ()
     {
         if (prompt_widget_to_show != null) {
-          prompt_widget_to_show.show ();
-          prompt_widget_to_show = null;
+            prompt_widget_to_show.fade_in ();
+            prompt_widget_to_show = null;
+            change_background ();
         }
+        menubar.set_layout (selected_entry.keyboard_layout);
         options_button.show ();
     }
 
     private void select_entry (UserEntry entry, double direction)
     {
-        if (get_realized ())
+        if (get_realized () && scroll_target_location != entries.index (entry))
         {
-            scroll_target_location = entries.index (entry);
-            scroll_start_location = scroll_location;
-            scroll_direction = direction;
-            if (scroll_location != scroll_target_location)
+            var old_target = scroll_target_location;
+            var new_target = entries.index (entry);
+            var new_direction = direction;
+            var new_start = scroll_timer.is_running ? scroll_start_location : scroll_location;
+
+            if (scroll_timer.is_running && scroll_direction != new_direction)
+                return; /* ignore requests when we're already scrolling the opposite way */
+
+            if (scroll_location != new_target)
             {
-                scroll_timer.reset ();
+                var new_distance = new_direction * (new_target - new_start);
+                if (scroll_timer.is_running)
+                {
+                    var old_distance = new_direction * (old_target - new_start);
+                    if (!scroll_timer.extend ((new_distance - old_distance) / old_distance))
+                        return;
+                }
+                else if (new_distance > 1)
+                    scroll_timer.reset (600);
+                else
+                    scroll_timer.reset (400);
+
+                if (prompt_entry.visible)
+                    prompt_widget_to_show = prompt_entry;
+                else if (login_button.visible)
+                    prompt_widget_to_show = login_button;
+
                 prompt_entry.hide ();
                 login_button.hide ();
                 options_button.hide ();
             }
+
+            scroll_target_location = new_target;
+            scroll_direction = new_direction;
+            scroll_start_location = new_start;
         }
 
         if (selected_entry != entry)
@@ -463,16 +511,15 @@
 
             if (get_realized ())
             {
-                change_background ();
                 user_selected (selected_entry.name);
             }
-
-            menubar.set_layout (selected_entry.keyboard_layout);
         }
     }
 
     public override void add (Gtk.Widget widget)
     {
+        add_style_class (widget);
+
         children.append (widget);
         if (get_realized ())
             widget.set_parent_window (get_window ());
@@ -494,6 +541,7 @@
     public override void realize ()
     {
         change_background ();
+        menubar.set_layout (selected_entry.keyboard_layout);
 
         set_realized (true);
 
@@ -617,7 +665,7 @@
         else
             c.set_source_rgba (1.0, 1.0, 1.0, alpha);
 
-        c.translate (grid_size / 2, grid_size - (grid_size - (h)) / 2 - h);
+        c.translate (grid_size / 2, (grid_size - h) / 2 + border);
         c.move_to (0, 0);
         Pango.cairo_show_layout (c, entry.layout);
 
@@ -629,7 +677,7 @@
             c.save ();
             var xpadding = (grid_size - options_pixbuf.width) / 2;
             var ypadding = (grid_size - options_pixbuf.height) / 2;
-            c.translate (box_width * grid_size - grid_size - grid_size / 4 + xpadding, grid_size / 4 - ypadding);
+            c.translate (box_width * grid_size - grid_size - grid_size / 4 + xpadding, grid_size / 4 - ypadding - border);
             Gdk.cairo_set_source_pixbuf (c, options_pixbuf, 0, 0);
             c.paint ();
             c.restore ();
@@ -645,18 +693,13 @@
         if (position < 0)
             alpha = 1.0 + position / (n_above + 1);
         else
-            alpha = 1.0 - (position - 2) / (n_below + 1);        
+            alpha = 1.0 - (position - 2) / (n_below + 1);
         draw_entry (c, entry, alpha, in_box);
         c.restore ();
     }
 
     public override bool draw (Cairo.Context c)
     {
-        if (frame_count == 0)
-            debug ("Rendered first frame");
-
-        frame_count++;
-
         foreach (var child in children)
             propagate_draw (child, c);
 
@@ -664,22 +707,23 @@
 
         c.translate (box_x, box_y);
 
-        var border = 4;
-
         var index = 0;
         foreach (var entry in entries)
         {
             var position = index - scroll_location;
 
             /* Draw entries above the box */
-            var h_above = (double) (n_above + 1) * grid_size;
-            c.save ();
-
-            c.rectangle (0, -h_above, box_width * grid_size, h_above);
-            c.clip ();
-            draw_entry_at_position (c, entry, position);
-
-            c.restore ();
+            if (position < 0)
+            {
+                var h_above = (double) (n_above + 1) * grid_size;
+                c.save ();
+
+                c.rectangle (0, -h_above, box_width * grid_size, h_above);
+                c.clip ();
+                draw_entry_at_position (c, entry, position);
+
+                c.restore ();
+            }
 
             /* Draw entries in the box */
             if (position > -1 && position < 1 && scroll_timer.is_running)
@@ -698,14 +742,17 @@
             }
 
             /* Draw entries below the box */
-            var h_below = (double) (n_below + 1) * grid_size;
-            c.save ();
-
-            c.rectangle (0, box_height * grid_size, box_width * grid_size, h_below);
-            c.clip ();
-            draw_entry_at_position (c, entry, position + box_height - 1);
-
-            c.restore ();
+            if (position > 0)
+            {
+                var h_below = (double) (n_below + 1) * grid_size;
+                c.save ();
+
+                c.rectangle (0, box_height * grid_size, box_width * grid_size, h_below);
+                c.clip ();
+                draw_entry_at_position (c, entry, position + box_height - 1);
+
+                c.restore ();
+            }
 
             index++;
         }
@@ -721,7 +768,7 @@
 
             c.save ();
             c.translate (0, text_y);
-            draw_entry (c, selected_entry, 1.0);
+            draw_entry (c, selected_entry, 1.0, true);
             c.restore ();
 
             c.restore();
@@ -740,7 +787,7 @@
             int w, h;
             layout.get_pixel_size (out w, out h);
 
-            c.move_to (grid_size / 2, grid_size * 1.25 - h);
+            c.move_to (grid_size / 2, grid_size * 1.25 - h + border);
 
             var r = 1.0;
             var g = 1.0;