New skin selection with full name, license and thumbnail

Thomas Bruederli

2012-10-05 18b73873dc81fdbd450ecb29e4f251e29eb2beaf

New skin selection with full name, license and thumbnail

 program/steps/settings/func.inc

@@ -157,7 +157,6 @@

    $blocks = array(
      'main'    => array('name' => Q(rcube_label('mainoptions'))),
      'browser' => array('name' => Q(rcube_label('browseroptions'))),
    );

    // language selection
@@ -252,15 +251,32 @@

      if (count($skins) > 1) {
        $field_id = 'rcmfd_skin';
        $input_skin = new html_select(array('name'=>'_skin', 'id'=>$field_id));
        $input_skin = new html_radiobutton(array('name'=>'_skin'));

        foreach($skins as $skin)
          $input_skin->add($skin, $skin);
        $blocks['skin'] = array('name' => Q(rcube_label('skin')),);

        $blocks['main']['options']['skin'] = array(
          'title' => html::label($field_id, Q(rcube_label('skin'))),
          'content' => $input_skin->show($config['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 @@
    $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;

 skins/classic/meta.json

New file
@@ -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/"
}

 skins/classic/settings.css

@@ -198,6 +198,46 @@
  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;

 skins/classic/thumbnail.png

 skins/larry/meta.json

New file
@@ -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/"
}

 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;
}

 skins/larry/thumbnail.png