New skin selection with full name, license and thumbnail

7 files changed, 118 insertions, 14 deletions

diff --git a/program/steps/settings/func.inc b/program/steps/settings/func.inc
index 4f8da1350..c60d17f30 100644
--- a/program/steps/settings/func.inc
+++ b/program/steps/settings/func.inc
@@ -157,7 +157,6 @@ function rcmail_user_prefs($current=null)
 
     $blocks = array(
       'main'    => array('name' => Q(rcube_label('mainoptions'))),
-      'browser' => array('name' => Q(rcube_label('browseroptions'))),
     );
 
     // language selection
@@ -252,15 +251,32 @@ function rcmail_user_prefs($current=null)
 
       if (count($skins) > 1) {
         $field_id = 'rcmfd_skin';
-        $input_skin = new html_select(array('name'=>'_skin', 'id'=>$field_id));
-
-        foreach($skins as $skin)
-          $input_skin->add($skin, $skin);
-
-        $blocks['main']['options']['skin'] = array(
-          'title' => html::label($field_id, Q(rcube_label('skin'))),
-          'content' => $input_skin->show($config['skin']),
-        );
+        $input_skin = new html_radiobutton(array('name'=>'_skin'));
+
+        $blocks['skin'] = array('name' => Q(rcube_label('skin')),);
+
+        foreach($skins as $skin) {
+          $thumbnail = "./skins/$skin/thumbnail.png";
+          if (!is_file($thumbnail))
+            $thumbnail = './program/resources/blank.gif';
+
+          $skinname = ucfirst($skin);
+          $author_link = $license_link = '';
+          $meta = @json_decode(@file_get_contents("./skins/$skin/meta.json"), true);
+          if (is_array($meta) && $meta['name']) {
+            $skinname = $meta['name'];
+            $author_link  = $meta['url'] ? html::a(array('href' => $meta['url'], 'target' => '_blank'), Q($meta['author'])) : Q($meta['author']);
+            $license_link = $meta['license-url'] ? html::a(array('href' => $meta['license-url'], 'target' => '_blank'), Q($meta['license'])) : Q($meta['license']);
+          }
+
+          $blocks['skin']['options'][$skin]['content'] = html::label(array('class' => 'skinselection'),
+            html::span('skinitem', $input_skin->show($config['skin'], array('value' => $skin, 'id' => $field_id.$skin))) .
+            html::span('skinitem', html::img(array('src' => $thumbnail, 'class' => 'skinthumbnail', 'alt' => $skin, 'width' => 64, 'height' => 64))) .
+            html::span('skinitem', html::span('skinname', Q($skinname)) . html::br() .
+              html::span('skinauthor', $author_link ? 'by ' . $author_link : '') . html::br() .
+              html::span('skinlicense', $license_link ? rcube_label('license').': ' . $license_link : ''))
+          );
+        }
       }
     }
 
@@ -268,10 +284,13 @@ function rcmail_user_prefs($current=null)
     $RCMAIL->output->add_script(sprintf("%s.check_protocol_handler('%s', '#mailtoprotohandler');",
       JS_OBJECT_NAME, JQ($product_name)), 'foot');
 
-    $blocks['browser']['options']['mailtoprotohandler'] = array(
-      'content' => html::a(array(
-        'href' => '#',
-        'id' => 'mailtoprotohandler'), Q(rcube_label('mailtoprotohandler'))),
+    $blocks['browser'] = array(
+      'name' => Q(rcube_label('browseroptions')),
+      'options' => array('mailtoprotohandler' => array(
+        'content' => html::a(array(
+          'href' => '#',
+          'id' => 'mailtoprotohandler'), Q(rcube_label('mailtoprotohandler'))),
+        )),
     );
 
     break;
diff --git a/skins/classic/meta.json b/skins/classic/meta.json
new file mode 100644
index 000000000..5cbdf9494
--- /dev/null
+++ b/skins/classic/meta.json
@@ -0,0 +1,6 @@
+{
+	"name": "Classic",
+	"author": "The Roundcube Dev Team",
+	"license": "Creative Commons Attribution-ShareAlike",
+	"license-url": "http://creativecommons.org/licenses/by-sa/3.0/"
+}
\ No newline at end of file
diff --git a/skins/classic/settings.css b/skins/classic/settings.css
index 24c4382b5..c918e3c18 100644
--- a/skins/classic/settings.css
+++ b/skins/classic/settings.css
@@ -198,6 +198,46 @@ div.readtext
   margin-top: 1.5em;
 }
 
+.skinselection
+{
+  display: block;
+  white-space: nowrap;
+  margin: 0.3em 0;
+}
+
+.skinselection span
+{
+  display: inline-block;
+  vertical-align: middle;
+  padding-right: 1em;
+}
+
+.skinselection .skinname
+{
+  font-weight: bold;
+}
+
+.skinselection .skinlicense,
+.skinselection .skinlicense a
+{
+  color: #999;
+  font-style: italic;
+  text-decoration: none;
+}
+
+.skinselection .skinlicense a:hover
+{
+  text-decoration: underline;
+}
+
+img.skinthumbnail
+{
+  width: 64px;
+  height: 64px;
+  border: 1px solid #999;
+  background: #fff;
+}
+
 #pluginlist
 {
   border: 1px solid #999;
diff --git a/skins/classic/thumbnail.png b/skins/classic/thumbnail.png
new file mode 100644
index 000000000..d6b952761
--- /dev/null
+++ b/skins/classic/thumbnail.png
diff --git a/skins/larry/meta.json b/skins/larry/meta.json
new file mode 100644
index 000000000..cf5670a42
--- /dev/null
+++ b/skins/larry/meta.json
@@ -0,0 +1,6 @@
+{
+	"name": "Larry",
+	"author": "FLINT / Büro für Gestaltung, Switzerland",
+	"license": "Creative Commons Attribution-ShareAlike",
+	"license-url": "http://creativecommons.org/licenses/by-sa/3.0/"
+}
\ No newline at end of file
diff --git a/skins/larry/settings.css b/skins/larry/settings.css
index 8480358ca..1734b55e5 100644
--- a/skins/larry/settings.css
+++ b/skins/larry/settings.css
@@ -217,6 +217,39 @@
 	text-align: right;
 }
 
+.skinselection {
+	display: block;
+}
+
+.skinselection span {
+	display: inline-block;
+	vertical-align: middle;
+	padding-right: 1em;
+}
+
+.skinselection .skinname {
+	font-weight: bold;
+}
+
+.skinselection .skinlicense,
+.skinselection .skinlicense a {
+	font-style: italic;
+	color: #666;
+	text-decoration: none;
+}
+
+.skinselection .skinlicense a:hover {
+	text-decoration: underline;
+}
+
+img.skinthumbnail {
+	width: 64px;
+	height: 64px;
+	border: 1px solid #ccc;
+	background: #fff;
+	border-radius: 4px;
+}
+
 #pluginlist td.version {
 	width: 5em;
 }
diff --git a/skins/larry/thumbnail.png b/skins/larry/thumbnail.png
new file mode 100644
index 000000000..1cd23ad3e
--- /dev/null
+++ b/skins/larry/thumbnail.png