i18n: Add vertical tabs to the content management dialog

css/rtl.css

@@ -141,3 +141,7 @@
     padding-left: 8px;
     padding-right: initial;
 }
+.rtl .left-tabs {
+    margin-left: auto;
+    margin-right: 45px;
+}

include/ajax.content.php

@@ -137,8 +137,9 @@ class ContentAjaxAPI extends AjaxController {
 
         $content = Page::lookup($id, $lang);
 
-        $langs = $cfg->getSecondaryLanguages();
+        $langs = Internationalization::getConfiguredSystemLanguages();
         $translations = $content->getAllTranslations();
+        $info = array();
         foreach ($translations as $t) {
             if (!($data = $t->getComplex()))
                 continue;

include/staff/settings-access.inc.php

@@ -168,16 +168,19 @@ $manage_content = function($title, $content) use ($contents) {
     $notes = explode('. ', $notes);
     $notes = $notes[0];
     ?><tr><td colspan="2">
+    <div style="display:inline-block;margin:0 36px">
+    <i class="icon-file-text pull-left icon-2x" style="color:#bbb;margin:0 -36px"></i>
     <a href="#ajax.php/content/<?php echo $id; ?>/manage"
     onclick="javascript:
         $.dialog($(this).attr('href').substr(1), 200);
-    return false;"><i class="icon-file-text pull-left icon-2x"
-        style="color:#bbb;"></i> <?php
+    return false;">
+<?php
     echo Format::htmlchars($title); ?></a><br/>
-        <span class="faded" style="display:inline-block;width:90%"><?php
+        <span class="faded"><?php
         echo Format::display($notes); ?>
     <em>(<?php echo sprintf(__('Last Updated %s'), Format::datetime($upd));
-        ?>)</em></span></td></tr><?php
+        ?>)</em></span>
+    </div></td></tr><?php
 }; ?>
         <tr>
             <th colspan="2">

include/staff/templates/content-manage.tmpl.php

 <h3><?php echo __('Manage Content'); ?> &mdash; <?php echo Format::htmlchars($content->getName()); ?></h3>
 <a class="close" href=""><i class="icon-remove-circle"></i></a>
 <hr/>
-<?php if ($langs) { ?>
-<div class="banner">&nbsp;
-    <span class="pull-left">
-        <i class="icon-globe icon-large"></i>
-        <?php echo __('This content is translatable'); ?>
-    </span>
-    <span class="pull-right">
-        <select onchange="javascript:
-    $('option', this).each(function(){$($(this).val()).hide()});
-    $($('option:selected', this).val()).show(); ">
-            <option value="#reference-text"><?php echo
-            Internationalization::getLanguageDescription($cfg->getPrimaryLanguage());
-            ?> — <?php echo __('Primary'); ?></option>
-<?php   foreach ($langs as $tag) { ?>
-            <option value="#translation-<?php echo $tag; ?>"><?php echo
-            Internationalization::getLanguageDescription($tag);
-            ?></option>
-<?php   } ?>
-        </select>
-    </span>
-</div>
+
+<form method="post" action="#content/<?php echo $content->getId(); ?>"
+        style="clear:none">
+<?php
+if (count($langs) > 1) { ?>
+    <ul class="vertical left tabs">
+        <li class="empty"><i class="icon-globe" title="This content is translatable"></i></li>
+<?php foreach ($langs as $tag=>$nfo) { ?>
+    <li class="<?php if ($tag == $cfg->getPrimaryLanguage()) echo "active";
+        ?>"><a href="#translation-<?php echo $tag; ?>" title="<?php
+        echo Internationalization::getLanguageDescription($tag);
+    ?>"><span class="flag flag-<?php echo strtolower($nfo['flag']); ?>"></span>
+    </a></li>
 <?php } ?>
-<form method="post" action="#content/<?php echo $content->getId(); ?>">
-    <div id="reference-text" lang="<?php echo $cfg->getPrimaryLanguage(); ?>">
+    </ul>
+<?php
+} ?>
+    <div id="translation-<?php echo $cfg->getPrimaryLanguage(); ?>"
+        class="tab_content left-tabs" style="padding:0" lang="<?php echo $cfg->getPrimaryLanguage(); ?>">
     <input type="text" style="width: 100%; font-size: 14pt" name="name" value="<?php
         echo Format::htmlchars($content->getName()); ?>" />
     <div style="margin-top: 5px">
@@ -34,21 +29,29 @@
     </div>
     </div>
 
-<?php foreach ($langs as $tag) { ?>
-    <div id="translation-<?php echo $tag; ?>" style="display:none" lang="<?php echo $tag; ?>">
-    <input type="text" style="width: 100%; font-size: 14pt" name="trans[<?php echo $tag; ?>][title]" value="<?php
-        echo Format::htmlchars($info['title'][$tag]); ?>" />
+<?php foreach ($langs as $tag=>$nfo) {
+        if ($tag == $cfg->getPrimaryLanguage())
+            continue; ?>
+    <div id="translation-<?php echo $tag; ?>" class="tab_content left-tabs"
+        style="display:none;padding:0" dir="<?php echo $nfo['direction']; ?>" lang="<?php echo $tag; ?>">
+    <input type="text" style="width: 100%; font-size: 14pt"
+        name="trans[<?php echo $tag; ?>][title]" value="<?php
+        echo Format::htmlchars($info['title'][$tag]); ?>"
+        placeholder="<?php echo __('Title'); ?>" />
     <div style="margin-top: 5px">
-    <textarea class="richtext no-bar" name="trans[<?php echo $tag; ?>][body]"><?php
+    <textarea class="richtext no-bar" data-direction=<?php echo $nfo['direction']; ?>
+        placeholder="<?php echo __('Message content'); ?>"
+        name="trans[<?php echo $tag; ?>][body]"><?php
     echo Format::htmlchars(Format::viewableImages($info['body'][$tag]));
 ?></textarea>
     </div>
     </div>
 <?php } ?>
 
-    <div id="msg_info" style="margin-top:7px"><?php
+    <div class="info-banner left-tabs" style="margin-top:7px"><?php
 echo $content->getNotes(); ?></div>
-    <hr/>
+
+    <hr class="clear"/>
     <p class="full-width">
         <span class="buttons pull-left">
             <input type="reset" value="<?php echo __('Reset'); ?>">
@@ -59,6 +62,6 @@ echo $content->getNotes(); ?></div>
             <input type="submit" value="<?php echo __('Save Changes'); ?>">
         </span>
      </p>
-</form>
 </div>
+</form>
 <div class="clear"></div>

scp/css/scp.css

@@ -1949,6 +1949,9 @@ tr.disabled th {
     position: relative;
     padding: 10px;
 }
+.left-tabs {
+    margin-left: 48px;
+}
 .floating-options {
     display: inline-block;
     position: absolute;

scp/js/jquery.translatable.js

@@ -114,7 +114,7 @@
           .prepend($('<span>').addClass('flag flag-'+info.flag))
           .append($('<input type="text" data-lang="'+lang+'">')
             .attr('dir', info.direction || 'ltr')
-            .on('change blur keydown', $.proxy(this.showCommit, this))
+            .on('change keydown', $.proxy(this.showCommit, this))
             .val(text)
           )
         )
@@ -145,7 +145,10 @@
     commit: function(e) {
       var changes = {}, self = this;
       $('input[type=text]', this.$translations).each(function() {
-        changes[$(this).data('lang')] = $(this).val();
+        var trans = $(this).val();
+        if (!trans)
+            $(this).closest('li').slideUp();
+        changes[$(this).data('lang')] = trans;
       });
       this.$commit.prop('disabled', true);
       this.$commit.find('button').empty().text(' Saving')