ExternalVendorCode/openmct
1
0
Fork 0
mirror of https://github.com/nasa/openmct.git synced 2025-01-18 10:46:42 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

Add mct-example directive

Browse Source
This commit is contained in:
Pete Richards 2017-01-30 13:46:24 -08:00
parent 754a2c16bd
commit bd397c869e
4 changed files with 49 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
example/styleguide/bundle.js
View File

@ -1,8 +1,10 @@
define([
"./src/ExampleStyleGuideModelProvider",
"./src/MCTExample",
'legacyRegistry'
], function (
ExampleStyleGuideModelProvider,
MCTExample,
legacyRegistry
) {
legacyRegistry.register("example/styleguide", {
@ -61,6 +63,12 @@ define([
}
}
],
"directives": [
{
"key": "mctExample",
"implementation": MCTExample
}
],
"components": [
{
"provides": "modelService",
@ -83,4 +91,4 @@ define([
]
}
});
});
});

27
example/styleguide/res/templates/controls.html
View File

@ -33,21 +33,11 @@
<p>Use a standard button in locations where there's sufficient room and you must make it clear that the element is an interactive button element. Buttons can be displayed with only an icon, only text, or with icon and text combined.</p>
<p>Use an icon whenever possible to aid the user's recognition and recall. If both and icon and text are to be used, the text must be within a <code>span</code> with class <code>.title-label</code>.</p>
</div>
<div class="col">
<h3>Markup</h3>
<pre>
&lt;a class="s-button icon-pencil"&gt;&lt;/a&gt;
&lt;a class="s-button"&gt;Edit&lt;/a&gt;
&lt;a class="s-button icon-pencil"&gt;
&lt;span class="title-label"&gt;Edit&lt;/span&gt;
&lt;/a&gt;</pre>
<h3>Examples</h3>
<a class="s-button icon-pencil"></a>
<a class="s-button">Edit</a>
<a class="s-button icon-pencil">
<span class="title-label">Edit</span>
</a>
</div>
<mct-example><a class="s-button icon-pencil"></a>
<a class="s-button">Edit</a>
<a class="s-button icon-pencil">
<span class="title-label">Edit</span>
</a></mct-example>
</div>
</div>
@ -157,10 +147,5 @@
</div>
</div>
</div>
</div>

6
example/styleguide/res/templates/mct-example.html Normal file
View File

@ -0,0 +1,6 @@
<div class="col">
<h3>Markup</h3>
<pre><code></code></pre>
<h3>Example</h3>
<div></div>
</div>

28
example/styleguide/src/MCTExample.js Normal file
View File

@ -0,0 +1,28 @@
define([
'text!../res/templates/mct-example.html'
], function (
MCTExampleTemplate
) {
function MCTExample() {
function link($scope, $element, $attrs, controller, $transclude) {
var codeEl = $element.find('code');
var exampleEl = $element.find('div');
$transclude(function (clone) {
exampleEl.append(clone);
codeEl.text(exampleEl.html());
});
}
return {
restrict: "E",
template: MCTExampleTemplate,
transclude: true,
link: link,
replace: true
};
}
return MCTExample;
});