From de88e6b27d8f2eaf8c4dfc6f567ff077ca00e7b9 Mon Sep 17 00:00:00 2001
From: Rene Saarsoo <nene@triin.net>
Date: Mon, 11 Jul 2011 12:32:14 +0300
Subject: [PATCH] Refactor styles for inline example component.

Also change the CSS class name to be more CSS-ish.
---
 template/app/controller/Examples.js   |  2 +-
 template/app/view/cls/Overview.js     |  2 +-
 template/app/view/examples/Inline.js  |  3 +-
 template/resources/sass/viewport.scss | 42 +++++++++++++++------------
 4 files changed, 28 insertions(+), 21 deletions(-)

diff --git a/template/app/controller/Examples.js b/template/app/controller/Examples.js
index d65f7b5c..06faa31e 100644
--- a/template/app/controller/Examples.js
+++ b/template/app/controller/Examples.js
@@ -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', {
diff --git a/template/app/view/cls/Overview.js b/template/app/view/cls/Overview.js
index 4ed7d3c2..ebc91df9 100644
--- a/template/app/view/cls/Overview.js
+++ b/template/app/view/cls/Overview.js
@@ -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();
             }
diff --git a/template/app/view/examples/Inline.js b/template/app/view/examples/Inline.js
index 2781dab0..14044c2a 100644
--- a/template/app/view/examples/Inline.js
+++ b/template/app/view/examples/Inline.js
@@ -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: {
@@ -89,4 +90,4 @@ Ext.define('Docs.view.examples.Inline', {
         }
     }
 
-});
\ No newline at end of file
+});
diff --git a/template/resources/sass/viewport.scss b/template/resources/sass/viewport.scss
index af3d9315..80b2d61b 100644
--- a/template/resources/sass/viewport.scss
+++ b/template/resources/sass/viewport.scss
@@ -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; } } }
-- 
GitLab