Commit de88e6b2 authored by Rene Saarsoo's avatar Rene Saarsoo
Browse files

Refactor styles for inline example component. 

Also change the CSS class name to be more CSS-ish.
parent 82823676

template/app/controller/Examples.js

+1 −1
Original line number Diff line number Diff line
@@ -148,7 +148,7 @@ Ext.define('Docs.controller.Examples', { 
    replaceExampleDivs: function() {

        var self = this;



        Ext.Array.each(Ext.query('.inlineExample'), function(inlineEg) {

        Ext.Array.each(Ext.query('.inline-example'), function(inlineEg) {

            var egId = inlineEg.getAttribute('rel');

            var divId = inlineEg.getAttribute('id');

            var eg = Ext.create('Docs.view.examples.Inline', {

template/app/view/cls/Overview.js

+1 −1
Original line number Diff line number Diff line
@@ -175,7 +175,7 @@ Ext.define('Docs.view.cls.Overview', { 
        var replaceExample = function() {

            var idx = cls.doc.match(/\{@example ([A-Za-z0-9_\/\.]+)\}/);

            if (idx) {

                cls.doc = cls.doc.replace(/\{@example ([A-Za-z0-9_\/\.]+)\}/, '<div class="inlineExample" id="eg' + egId + '" rel="' + idx[1] + '"></div>');

                cls.doc = cls.doc.replace(/\{@example ([A-Za-z0-9_\/\.]+)\}/, '<div class="inline-example" id="eg' + egId + '" rel="' + idx[1] + '"></div>');

                egId += 1;

                replaceExample();

            }

template/app/view/examples/Inline.js

+2 −1
Original line number Diff line number Diff line
@@ -6,6 +6,7 @@ Ext.define('Docs.view.examples.Inline', { 
    extend: 'Ext.Panel',

    alias: 'widget.inlineexample',



    componentCls: 'inline-example-cmp',

    layout: 'card',

    border: 0,

    resizable: {

template/resources/sass/viewport.scss

+24 −18
Original line number Diff line number Diff line
@@ -735,21 +735,27 @@ a { 
      color: white;

      background: $docs-text-color; } } }



.code {

  background: url(../images/example-icons.png) no-repeat -2px -20px; opacity: 0.6; }

.preview {

  background: url(../images/example-icons.png) no-repeat -3px -62px; opacity: 0.6; }

.info {

  background: url(../images/example-icons.png) no-repeat -2px -111px; opacity: 0.6; }

.copy {

  background: url(../images/example-icons.png) no-repeat -2px -85px; }



.active {

  .code {

    background: url(../images/example-icons.png) no-repeat -30px -20px; opacity: 1; }

  .preview {

    background: url(../images/example-icons.png) no-repeat -31px -62px; opacity: 1; }

  .info {

    background: url(../images/example-icons.png) no-repeat -30px -111px; opacity: 1; }

  .copy {

    background: url(../images/example-icons.png) no-repeat -30px -85px; } }
 
// Inline example component buttons

.inline-example-cmp {

  span.x-btn-icon {

    background: url(../images/example-icons.png) no-repeat;

    opacity: 0.6;

    &.code {

      background-position: -2px -20px; }

    &.preview {

      background-position: -3px -62px; }

    &.info {

      background-position: -2px -111px; }

    &.copy {

      background-position: -2px -85px; } }

  .active span.x-btn-icon {

    background: url(../images/example-icons.png) no-repeat;

    opacity: 1;

    &.code {

      background-position: -30px -20px; }

    &.preview {

      background-position: -31px -62px; }

    &.info {

      background-position: -30px -111px; }

    &.copy {

      background-position: -30px -85px; } } }