[WIP] make unlock dialog vertically layout with rounded user picture

src/cinnamon-screensaver.css

@@ -3,7 +3,7 @@
 
 .csstage .unlockbox {
     color: #eeeeee;
-    font-size: 20px;
+    font-size: 32px;
     text-shadow: 1px 1px alpha(black, 0.8);
 }
 
@@ -54,8 +54,8 @@
 }
 
 .csstage .framedimage {
-    border-radius: 4px;
-    border: 4px solid;
+    border-radius: 50%;
+    border: 0px solid;
     background-color: alpha(grey, .25);
     background-clip: border-box;
     border-color: @theme_selected_bg_color;

src/unlock.py

@@ -56,8 +56,9 @@ def __init__(self):
         self.box.get_style_context().add_class("unlockbox")
         self.add(self.box)
 
-        self.face_image = FramedImage(status.screen.get_low_res_mode())
+        self.face_image = FramedImage(status.screen.get_low_res_mode(), True)
         self.face_image.set_halign(Gtk.Align.CENTER)
+        self.face_image.set_margin_top(100)
         self.face_image.get_style_context().add_class("faceimage")
         self.face_image.set_no_show_all(True)
 
@@ -69,7 +70,7 @@ def __init__(self):
 
         self.box.pack_start(self.realname_label, False, False, 10)
 
-        self.entry_box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL, halign=Gtk.Align.CENTER)
+        self.entry_box = Gtk.Box(orientation=Gtk.Orientation.VERTICAL, halign=Gtk.Align.CENTER)
 
         self.box.pack_start(self.entry_box, True, True, 2)
 
@@ -89,7 +90,7 @@ def __init__(self):
 
         self.entry_box.pack_start(self.password_entry, False, False, 15)
 
-        button_box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL)
+        button_box = Gtk.Box(orientation=Gtk.Orientation.HORIZONTAL, halign=Gtk.Align.CENTER)
         self.entry_box.pack_end(button_box, False, False, 0)
 
         self.auth_unlock_button = TransparentButton("screensaver-unlock-symbolic", Gtk.IconSize.LARGE_TOOLBAR)

src/widgets/framedImage.py

@@ -2,13 +2,15 @@
 # coding: utf-8
 
 import gi
+import cairo
+import math
 
 gi.require_version('CinnamonDesktop', '3.0')
 from gi.repository import Gtk, GdkPixbuf, Gio, GLib, GObject, Gdk
 
 from util import utils, trackers
 
-MAX_IMAGE_SIZE = 320
+MAX_IMAGE_SIZE = 400
 MAX_IMAGE_SIZE_LOW_RES = 200
 
 class FramedImage(Gtk.Image):
@@ -71,6 +73,7 @@ def set_image_internal(self, path):
             if (pixbuf.get_height() > scaled_max_size or pixbuf.get_width() > scaled_max_size) or \
                (self.scale_up and (pixbuf.get_height() < scaled_max_size / 2 or pixbuf.get_width() < scaled_max_size / 2)):
                 try:
+                    print("Scaled..")
                     pixbuf = GdkPixbuf.Pixbuf.new_from_file_at_size(path, scaled_max_size, scaled_max_size)
                 except GLib.Error as e:
                     message = "Could not scale pixbuf from '%s' for FramedImage: %s" % (path, e.message)
@@ -80,6 +83,8 @@ def set_image_internal(self, path):
             surface = Gdk.cairo_surface_create_from_pixbuf(pixbuf,
                                                            self.get_scale_factor(),
                                                            self.get_window())
+
+            surface = self.crop(surface)
             self.set_from_surface(surface)
             self.emit("surface-changed", surface)
         else:
@@ -121,3 +126,25 @@ def on_file_written(self, file, result, data=None):
                 self.set_image_internal(file.get_path())
         except GLib.Error:
             pass
+
+    def crop(self, surface):
+        w = int(surface.get_width())
+        h = int(surface.get_height())
+        res_size = min(w, h)
+
+        res_surface = cairo.ImageSurface(cairo.Format.ARGB32, res_size, res_size)
+        scale = self.get_scale_factor()
+        res_surface.set_device_scale(scale, scale)
+
+        # crop a cricle
+        context = cairo.Context(res_surface)
+        radius = res_size / (2 * scale)
+        context.arc(radius, radius, radius, 0, 2 * math.pi)
+        context.clip()
+        # get the center of the image
+        x = (res_size - w) / (2 * scale)
+        y = (res_size - h) / (2 * scale)
+        context.set_source_surface(surface, x, y)
+        context.paint()
+
+        return res_surface