Commit 0363ca0e authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Merge remote-tracking branch 'nick/redesign' into redesign

parents f14f359c 0d4ea98e

template/app/view/Tabs.js

+42 −4
Original line number Diff line number Diff line
@@ -55,20 +55,19 @@ Ext.define('Docs.view.Tabs', { 
                    '<div class="m">',

                        '<span class="icn {iconCls}">&nbsp;</span>',

                        '<a class="tabUrl" href="{href}">{text}</a>',

                        '<a class="close" href="#">&nbsp;</a>',

                    '</div>',

                '<div class="r"></div>',

                '<div class="r"><a class="close" href="#">&nbsp;</a></div>',

                '</div>'

            );

            var docTab = Ext.get(tpl.append(this.el.dom, tab));

            docTab.dom.initialWidth = docTab.getWidth();



            if (opts.animate) {

                // Effect to 'slide' the tab out when it is created.

                var width = docTab.getWidth();

                docTab.setStyle('width', '10px');

                docTab.setStyle({ visibility: 'visible' });

                docTab.animate({

                    to: { width: width }

                    to: { width: docTab.dom.initialWidth }

                });

            }

            else {
@@ -82,6 +81,34 @@ Ext.define('Docs.view.Tabs', { 
        if (opts.activate) {

            this.activateTab(tab.href);

        }



        this.recalculateWidths();

    },



    recalculateWidths: function() {



        var maxWidth = Ext.getCmp('doctabs').getWidth() - 240;

        var numTabs = Ext.query('.doctab').length - 5;



        var tabsWidth = Ext.Array.sum(Ext.Array.map(Ext.query('.doctab'), function(t){

            var docTab = Ext.get(t);

            return docTab.dom.initialWidth - 5 || 0;

        }));



        if (tabsWidth > maxWidth) {

            var tabDelta = Math.ceil((tabsWidth - maxWidth) / numTabs);



            Ext.Array.each(Ext.query('.doctab'), function(t){

                var docTab = Ext.get(t);

                if (!docTab.hasCls('overview')) {

                    var width = docTab.dom.initialWidth;

                    var newWidth = (width - tabDelta) > 60 ? (width - tabDelta) : 60;

                    docTab.animate({

                        to: { width: newWidth }

                    });

                }

            });

        }

    },



    /**
@@ -156,3 +183,14 @@ Ext.define('Docs.view.Tabs', { 
        }

    }

});







// Ext.Array.each(Ext.query('.doctab'), function(t){

//     var docTab = Ext.get(t);

//     if (!docTab.hasCls('overview')) {

//         docTab.animate({

//             to: { width: 60 }

//         });

//     }

// });

template/index.php

+52 −5
Original line number Diff line number Diff line 
<?php



function print_page($title, $body) {

function print_members($title, $type, $members) {

  echo '<div id="m-' . $type . '"><div class="definedBy">Defined By</div>';

  echo   '<h3 class="members-title">' . $title . '</h3>';

  echo   '<div class="subsection">';

  foreach($members as $idx => $property) {

    echo   '<div id="' . $property["tagname"] . '-' . $property["name"] . '" class="member open' . ($idx == 0 ? ' first-child' : '') . '">';

    echo   '  <a class="side expandable"><span>&nbsp;</span></a>';

    echo   '  <div class="title">';

    echo   '    <div class="meta">';

    echo   '      <a href="#!/api/' . $property["owner"] . '" class="definedIn">' . $property["owner"] . '</a>';

    echo   '    </div>';

    echo   '    <a href="#!/api/' . $property["owner"] . '-' . $property["tagname"] . '-' . $property["name"] . '" class="name">';

    echo          $property["name"];

    echo       '</a><span> : ' . $property["params"] . '</span>';

    echo   '  </div>';

    echo   '  <div class="description long">' . $property["doc"] . '</div>';

    echo   '</div>';

  }

  echo   '</div>';

  echo '</div>';

}



function print_page($title, $body, $members) {

  echo "<!DOCTYPE html>";

  echo "<html>";

  echo '<html>';

  echo "<head>";

  echo "<meta http-equiv='Content-Type' content='text/html; charset=utf-8' />";

  echo "<title>$title</title>";

  echo "<meta name=\"description\" content=\"Official ExtJS 4.0 API Documentation for $title from Sencha. Examples, guides, screencasts and comments on how to use $title.\" />";

  echo '<link rel="stylesheet" href="resources/css/reset.css" type="text/css" />';

  echo '<link rel="stylesheet" href="resources/css/docs-ext.css" type="text/css" />';

  echo '<link rel="stylesheet" href="resources/css/viewport.css" type="text/css" />';

  echo '<link rel="stylesheet" href="resources/css/print.css" type="text/css" media="print" />';



  echo "<title>$title | Ext JS 4.0 API Docs | Sencha</title>";

  echo "</head>";

  echo "<body>";

  echo '<body>';

  echo '<div id="north-region" style="padding: 1px 0 11px 11px"><div class="logo"><span><a href="http://docs.sencha.com">Sencha Docs</a></span> <a href="http://docs.sencha.com/ext-js/4-0">Ext JS 4.0</a></div></div>';

  echo '<div id="center-container" class="class-overview" style="padding: 20px">';

  echo "<h1>$title</h1>";

  echo $body;



  echo '<div class="members">';

  if ($members["property"]) {

    print_members('Properties', 'property', $members["property"]);

  }

  if ($members["method"]) {

    print_members('Methods', 'method', $members["property"]);

  }

  if ($members["cfg"]) {

    print_members('Configs', 'cfg', $members["property"]);

  }

  if ($members["event"]) {

    print_members('Events', 'event', $members["property"]);

  }

  echo '</div>';



  echo '</div>';

  echo "</body>";

  echo "</html>";

}
@@ -21,7 +68,7 @@ if (isset($_GET["_escaped_fragment_"])) { 
    $contents = preg_replace('/^.*?\(/', "", $contents);

    $contents = preg_replace('/\);\s*$/', "", $contents);

    $json = json_decode($contents, true);

    print_page($json["name"], $json["doc"]);

    print_page($json["name"], $json["doc"], $json["members"]);

  }

  else {

    echo "Not implemented";

template/resources/images/tab-rf.png

0 → 100644
+1.26 KiB
Loading image diff...

template/resources/images/taba-rf.png

0 → 100644
+1.32 KiB
Loading image diff...

template/resources/sass/viewport.scss

+29 −22
Original line number Diff line number Diff line
@@ -145,6 +145,8 @@ a { 
  margin: 10px 0 0 8px;

  padding-left: 21px;

  font-size: 1.1em;

  a {

    color: #fff; }

  span {

    font-weight: bold;

    padding-right: 3px; } }
@@ -582,7 +584,7 @@ a { 
    font-size: 0.9em; }

  .definedBy {

    float: right;

    padding: 20px 20px 0 0;

    padding: 0 20px 0 0;

    font-weight: bold;

    color: #666666; }

  .subsection .definedBy {
@@ -591,18 +593,18 @@ a { 
  h3.pa {

    padding: 10px 0 5px 0; }

  h3.members-title {

    margin: 15px 0 5px 0;

    padding-left: 30px;

    margin: 20px 0 5px 0;

    padding: 0 0 0 30px;

    font-size: 1.3em;

    font-weight: bold; }

  #m-cfg .members-title {

    background: url(../images/configs.png) no-repeat 0 15px; }

    background: url(../images/configs.png) no-repeat 0 -1px; }

  #m-property .members-title {

    background: url(../images/properties.png) no-repeat 0 19px; }

    background: url(../images/properties.png) no-repeat 0 4px; }

  #m-method .members-title {

    background: url(../images/methods.png) no-repeat 0 16px; }

    background: url(../images/methods.png) no-repeat 0 2px; }

  #m-event .members-title {

    background: url(../images/events.png) no-repeat 0 11px; }

    background: url(../images/events.png) no-repeat 0 -2px; }

  h4.members-subtitle {

    padding-left: 30px;

    margin: 10px 0 7px 0; }
@@ -804,9 +806,9 @@ a { 
      position: absolute;

      right: 0px;

      top: 0;

      width: 9px;

      width: 26px;

      height: 29px;

      background: url(../images/tab-r.png) no-repeat;

      background: url(../images/tab-rf.png) no-repeat;

      z-index: 5;

    }

    .m {
@@ -845,19 +847,20 @@ a { 
        padding-left: 15px;

        padding-bottom: 0;

      }

    }

    a.close {

      position: absolute;

      width: 11px;

      height: 11px;

      top: 8px;

        right: 3px;;

      right: 9px;

      z-index: 6;

      background: url(../images/tab-c.png) no-repeat 0 2px !important;

    }

    a.close.ovr {

      background: url(../images/tab-c.png) no-repeat 0 -10px !important;

    }

  }

  }

  .doctab.highlight {

    border-width: 0;

    .l {
@@ -865,6 +868,7 @@ a { 
    }

    .r {

      background-image: url(../images/tabh-r.png);

      width: 10px;

    }

    .m {

      background-image: url(../images/tabh-m.png);
@@ -878,15 +882,18 @@ a { 
      width: 13px;

    }

    .r {

      background: url(../images/taba-r.png) no-repeat 2px -3px;

      background: url(../images/taba-rf.png) no-repeat 2px -3px;

      z-index: 5;

      width: 13px;

      width: 28px;

    }

    .m {

      background: url(../images/taba-m.png) repeat-x 0 -3px;

      z-index: 5;

    }

  }

  .doctab.overview .m {

    z-index: 6;

  }

  .doctab.index .m a {

    background: url(../images/tab-icons.png) no-repeat 7px 1px;

    padding-left: 16px; padding-right: 12px; padding-bottom: 20px;