Roundcube for Mobile Devices

We are well aware of the fact that Roundcube performs nicely on desktop browsers, it can be operated on tablets but when opening Roundcube from a smartphone, you’re out of luck.

Although creating a fully responsive theme which works on all screen sizes is on our roadmap and some volunteers are currently drafting it, we still looking at several months until the fully integrated solution will be available.

Luckily there are alternatives, thanks to the nature of free software! The most sophisticated amongst them is the Melanie2 Larry Mobile theme by Thomas Payen. It builds on top of the jQuery Mobile framework and completely replaces the default Roundcube skin with a fully optimized view when connecting with a mobile device. To do the automatic switch, the help of an additional Roundcube plugin is required. So here’s a quick guide how to install all the pieces in order to make your Roundcube mobile friendly:

1. Download the theme from GitHub

git clone https://github.com/messagerie-melanie2/Roundcube-Skin-Melanie2-Larry-Mobile.git skins/melanie2_larry_mobile

If you don’t have a git client available, simply download the Zip archive and unpack it into skins/melanie2_larry_mobile.

2. Install “mobile” and “jquery_mobile” plugins

php composer.phar require melanie2/mobile:dev-master

Since jquery_mobile is a dependency of the mobile plugin, this command will install both plugins right away.

ATTENTION: only the mobile plugin should be activated in Roundcube. Thus, when prompted “Do you want to activate the plugin jquery_mobile? [N|y]“, type “n” and later when the same prompt appears again for the mobile plugin, accept with “y“.

That’s already it.

With both the melanie2_larry_mobile skin and the mobile plugin installed, mobile devices will automatically see the mobile theme when accessing Roundcube. Kudos to Thomas, who added the missing piece to the Roundcube universe!

Advertisements

Our Wish List for Encryption Browser Extensions

PGP encryption is one of the most frequently requested features for Roundcube and for good reasons more and more people start caring about end-to-end encryption in their everyday communication. But unfortunately webmail applications currently can’t fully participate in this game and doing PGP encryption right in web-based applications isn’t a simple task. Although there are ways and even some basic implementations, all of them have their pros and cons. And yet the ultimate solution is still missing.
Continue reading

Roundcube Next – If we would start over again

Roundcube indeed became a huge success story with tens of thousands of installations worldwide. Something I never expected back in 2005 when I started the project as a fresh alternative to the well established but already aged free webmail packages like SquirrelMail or Horde IMP. And now, some 9 years later, we find ourselves in a similar position as the ones we previously wanted to replace. Although we managed to adapt the Roundcube codebase to the ongoing technological innovations, the core architecture is still ruled by the concepts which seemed to be right back when we started. And we’re talking about building a web app for IE 5 and Netscape 6 when browsers weren’t as capable and performant as they are today and when the term AJAX has not yet been known nor did we have nifty libraries such a jQuery or Backbone.js at hand. Continue reading

Mirror images with imagemagick

The new screenshot gallery on roundcube.net shows up with some nice web 2.0 mirrored images. Of course I’m not the kind of person who likes to create all of them in Photoshop. I therefore wrote a little shell script generating a mirror image using imagemagick. Here’s the code of makemirror.sh

#!/bin/sh

infile=$1
outfile=$2
width=120
height=32
alpha=30

convert -size ${width}x${height} xc:none \
\( \( -flip $infile -crop ${width}x${height}+0+0 \) \
  -size ${width}x${height} gradient: -evaluate Pow 1.4 \
  -compose Copy_Opacity -composite \) \
-compose blend -set "option:compose:args" $alpha -composite $outfile

The script takes two arguments: the input file (thumbnail) and the output file name (.png). Of course the other hard-coded parameters such as image size and opacity could be provided as arguments too.

The input file is first flipped vertically and then cropped to the size of the mirror image. After that its alpha channel (opacity) is composed with a gradient image which is generated with a quadratic function. Finally we compose that gradient thumbnail with a transparent image using the given alpha value.