styleus 0.0.4 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/app/assets/fonts/calluna_license.txt +26 -0
- data/app/assets/fonts/calluna_regular.eot +0 -0
- data/app/assets/fonts/calluna_regular.ttf +0 -0
- data/app/assets/fonts/calluna_regular.woff +0 -0
- data/app/assets/fonts/raphaelicons-webfont.eot +0 -0
- data/app/assets/fonts/raphaelicons-webfont.svg +149 -0
- data/app/assets/fonts/raphaelicons-webfont.ttf +0 -0
- data/app/assets/fonts/raphaelicons-webfont.woff +0 -0
- data/app/assets/fonts/raphaelicons.txt +17 -0
- data/app/assets/images/styleus/themes/base/noise.png +0 -0
- data/app/assets/images/styleus/themes/base/noise_dark.png +0 -0
- data/app/assets/javascripts/modernizr.custom.js +812 -0
- data/app/assets/javascripts/namespace.js.coffee +20 -0
- data/app/assets/javascripts/styleus/base.js.coffee +3 -0
- data/app/assets/javascripts/styleus/behaviors/toggle.js.coffee +12 -0
- data/app/assets/javascripts/styleus.js +15 -0
- data/app/assets/javascripts/styleus_prerender.js +13 -0
- data/app/assets/stylesheets/styleus/themes/base/behaviors/_component.css.scss +11 -0
- data/app/assets/stylesheets/styleus/themes/base/behaviors/_positioning.css.scss +10 -0
- data/app/assets/stylesheets/styleus/themes/base/behaviors/_text.css.scss +10 -0
- data/app/assets/stylesheets/styleus/themes/base/coderay.css.scss +37 -7
- data/app/assets/stylesheets/styleus/themes/base/components/_article.css.scss +21 -23
- data/app/assets/stylesheets/styleus/themes/base/components/_component_index.css.scss +53 -0
- data/app/assets/stylesheets/styleus/themes/base/components/_option_bar.css.scss +31 -0
- data/app/assets/stylesheets/styleus/themes/base/fonts/calluna.css.scss +26 -0
- data/app/assets/stylesheets/styleus/themes/base/fonts/raphael.css.scss +22 -0
- data/app/assets/stylesheets/styleus/themes/base/layout/main.css.scss +36 -4
- data/app/assets/stylesheets/styleus/themes/base/settings/_colors.css.scss +6 -1
- data/app/assets/stylesheets/styleus/themes/base.css.scss +13 -2
- data/app/controllers/components_controller.rb +6 -4
- data/app/helpers/path_helper.rb +8 -0
- data/app/helpers/styleus_helper.rb +51 -24
- data/app/models/styleus/view_component.rb +6 -2
- data/app/views/components/index.html.erb +9 -0
- data/app/views/components/show.html.erb +1 -0
- data/app/views/layouts/_styleus.html.erb +7 -2
- data/config/locales/en.yml +10 -0
- data/config/routes.rb +1 -1
- data/lib/styleus/version.rb +1 -1
- metadata +30 -3
- data/app/assets/stylesheets/styleus/themes/base/components/_representation_helpers.css.scss +0 -24
@@ -0,0 +1,20 @@
|
|
1
|
+
# From https://github.com/jashkenas/coffee-script/wiki/FAQ
|
2
|
+
#
|
3
|
+
# Usage:
|
4
|
+
#
|
5
|
+
# namespace 'Hello.World', (exports) ->
|
6
|
+
# # `exports` is where you attach namespace members
|
7
|
+
# exports.hi = -> console.log 'Hi World!'
|
8
|
+
#
|
9
|
+
# namespace 'Say.Hello', (exports, top) ->
|
10
|
+
# # `top` is a reference to the main namespace
|
11
|
+
# exports.fn = -> top.Hello.World.hi()
|
12
|
+
#
|
13
|
+
# Say.Hello.fn() # prints 'Hi World!'
|
14
|
+
#
|
15
|
+
@namespace = (target, name, block) ->
|
16
|
+
[target, name, block] = [(if typeof exports isnt 'undefined' then exports else window), arguments...] if arguments.length < 3
|
17
|
+
top = target
|
18
|
+
target = target[item] or= {} for item in name.split '.'
|
19
|
+
block target, top
|
20
|
+
|
@@ -0,0 +1,12 @@
|
|
1
|
+
namespace 'styleus.toggle', (exports) ->
|
2
|
+
config = exports.config =
|
3
|
+
toggleSelector: 'toggle'
|
4
|
+
|
5
|
+
exports.install = (root) ->
|
6
|
+
$root = $(root or document)
|
7
|
+
$root.on 'click', "[data-#{config.toggleSelector}]", (event) ->
|
8
|
+
event.preventDefault()
|
9
|
+
link = $(event.target)
|
10
|
+
target = $root.find(link.data(config.toggleSelector))
|
11
|
+
target.toggleClass('enabled') if target
|
12
|
+
false
|
@@ -0,0 +1,15 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// the compiled file.
|
9
|
+
//
|
10
|
+
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
|
11
|
+
// GO AFTER THE REQUIRES BELOW.
|
12
|
+
//
|
13
|
+
//= require namespace
|
14
|
+
//= require_tree ./styleus/behaviors
|
15
|
+
//= require ./styleus/base
|
@@ -0,0 +1,13 @@
|
|
1
|
+
// This is a manifest file that'll be compiled into application.js, which will include all the files
|
2
|
+
// listed below.
|
3
|
+
//
|
4
|
+
// Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
|
5
|
+
// or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
|
6
|
+
//
|
7
|
+
// It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
|
8
|
+
// the compiled file.
|
9
|
+
//
|
10
|
+
// WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
|
11
|
+
// GO AFTER THE REQUIRES BELOW.
|
12
|
+
//
|
13
|
+
//= require modernizr.custom
|
@@ -0,0 +1,11 @@
|
|
1
|
+
@mixin component {
|
2
|
+
// easier width determination for components
|
3
|
+
@include box-sizing(border-box);
|
4
|
+
// each component should be the positioning
|
5
|
+
// relative for included elements
|
6
|
+
@include positioned(relative);
|
7
|
+
// each component should be side-effect free,
|
8
|
+
// so included elements should not leave the
|
9
|
+
// component context.
|
10
|
+
overflow: hidden;
|
11
|
+
}
|
@@ -1,18 +1,48 @@
|
|
1
|
-
|
1
|
+
@import "compass/css3/user-interface";
|
2
2
|
|
3
|
-
|
4
|
-
|
3
|
+
.CodeRay {
|
4
|
+
background-color: #fff;
|
5
|
+
font-family: 'Monaco', 'Courier New', 'Terminal', monospace;
|
5
6
|
color: #fff;
|
6
|
-
padding: 3px 5px;
|
7
7
|
overflow: auto;
|
8
8
|
font-size: 14px;
|
9
9
|
line-height: 1.1em;
|
10
|
+
|
10
11
|
pre {
|
11
12
|
margin: 0px;
|
12
13
|
padding: 0px;
|
13
14
|
}
|
14
15
|
|
15
|
-
|
16
|
-
|
17
|
-
|
16
|
+
tr td {
|
17
|
+
padding: 0.5em;
|
18
|
+
}
|
19
|
+
|
20
|
+
.tag, .attribute-name, .keyword { color: #1c02ff; }
|
21
|
+
.string, .content { color: #26B31A; }
|
22
|
+
.code { color: #000; }
|
23
|
+
.symbol { color: #f00; }
|
24
|
+
.comment { color: #0066FF; }
|
25
|
+
|
26
|
+
.line-numbers {
|
27
|
+
@include user-select(none);
|
28
|
+
background-color: #e3e3e3;
|
29
|
+
text-align: right;
|
30
|
+
color: #888;
|
31
|
+
display: block;
|
32
|
+
width: 2em;
|
33
|
+
padding-right: 0.3em;
|
34
|
+
}
|
35
|
+
|
36
|
+
.line-numbers a {
|
37
|
+
color: #888;
|
38
|
+
text-decoration: none;
|
39
|
+
}
|
40
|
+
|
41
|
+
//.line-numbers a:target { color: blue; }
|
42
|
+
//.line-numbers .highlighted { color: red; }
|
43
|
+
//.line-numbers .highlighted a { color: red; }
|
44
|
+
//span.line-numbers { padding: 0px 4px; }
|
45
|
+
//.line { display: block; float: left; width: 100%; }
|
46
|
+
//.code { width: 100%; }
|
47
|
+
|
18
48
|
}
|
@@ -1,20 +1,3 @@
|
|
1
|
-
@mixin component {
|
2
|
-
overflow: hidden;
|
3
|
-
position: relative;
|
4
|
-
top: 0; left: 0;
|
5
|
-
}
|
6
|
-
|
7
|
-
@mixin ambient-font {
|
8
|
-
font-family: 'Didact Gothic';
|
9
|
-
color: $soft-text;
|
10
|
-
}
|
11
|
-
|
12
|
-
@mixin ambient-headline {
|
13
|
-
@include ambient-font;
|
14
|
-
font-size: 1.2em;
|
15
|
-
font-weight: bold;
|
16
|
-
}
|
17
|
-
|
18
1
|
@mixin article-side-padding {
|
19
2
|
@include box-sizing(border-box);
|
20
3
|
padding-left: 1em;
|
@@ -25,6 +8,7 @@
|
|
25
8
|
@include border-radius(3px);
|
26
9
|
@include box-shadow(0 2px 3px 0 #cdcdcd);
|
27
10
|
@include component;
|
11
|
+
@include default-side-margin;
|
28
12
|
background: $content_background;
|
29
13
|
margin-bottom: 1em;
|
30
14
|
min-height: 3em;
|
@@ -35,22 +19,36 @@
|
|
35
19
|
@include article-side-padding;
|
36
20
|
margin-bottom: 0.5em;
|
37
21
|
text-align: right;
|
22
|
+
color: #ccc;
|
38
23
|
}
|
39
24
|
|
40
25
|
.__sg_component, .CodeRay, .__code_note {
|
41
26
|
@include article-side-padding;
|
42
27
|
}
|
43
28
|
|
29
|
+
.__sg_component {
|
30
|
+
padding-top: 0.3em;
|
31
|
+
padding-bottom: 1em;
|
32
|
+
}
|
33
|
+
|
44
34
|
.__code_note {
|
35
|
+
@include background(linear-gradient(bottom, #b5b5b5, #e4e4e4));
|
36
|
+
@include border-radius(6px 0 0 0);
|
45
37
|
@include ambient-font;
|
46
|
-
|
47
|
-
|
48
|
-
|
38
|
+
border-top: 1px solid #cacaca;
|
39
|
+
border-bottom: 1px solid #999;
|
40
|
+
text-align: center;
|
41
|
+
//margin-top: 0.5em;
|
42
|
+
line-height: 1.5em;
|
49
43
|
}
|
50
44
|
|
51
45
|
.CodeRay {
|
52
46
|
@include border-radius(0 0 3px 3px);
|
53
|
-
padding-top: 1em;
|
54
|
-
padding-bottom: 1em;
|
55
47
|
}
|
56
|
-
}
|
48
|
+
}
|
49
|
+
|
50
|
+
// hide highligthed code for default, if js is enabled
|
51
|
+
.js {
|
52
|
+
[data-subject*=representation] { display: none; }
|
53
|
+
[data-subject*=representation].enabled { display: block; }
|
54
|
+
}
|
@@ -0,0 +1,53 @@
|
|
1
|
+
@mixin default-index-alignment {
|
2
|
+
max-width: 25%;
|
3
|
+
text-align: right;
|
4
|
+
}
|
5
|
+
|
6
|
+
.__component_index {
|
7
|
+
@include single-box-shadow(#111, 0, -0.5em, 5em, 1em, inset);
|
8
|
+
@include default-side-padding;
|
9
|
+
background: $hard_contrast_area asset-url('styleus/themes/base/noise_dark.png', image);
|
10
|
+
padding-top: 2em;
|
11
|
+
padding-bottom: 2em;
|
12
|
+
|
13
|
+
h3 {
|
14
|
+
@include default-index-alignment;
|
15
|
+
font-family: 'Calluna-Regular';
|
16
|
+
color: #bb9b1d;
|
17
|
+
font-size: 1.2em;
|
18
|
+
letter-spacing: 0.12em;
|
19
|
+
font-weight: thin;
|
20
|
+
text-transform: capitalize;
|
21
|
+
margin-bottom: 0.5em;
|
22
|
+
border-bottom: 1px dashed #bb9b1d;
|
23
|
+
}
|
24
|
+
|
25
|
+
ul {
|
26
|
+
@include default-index-alignment;
|
27
|
+
|
28
|
+
li {
|
29
|
+
text-align: right;
|
30
|
+
margin-bottom: 0.3em;
|
31
|
+
|
32
|
+
a:link, a:visited, a:hover, a:active {
|
33
|
+
font-family: 'Calluna-Regular';
|
34
|
+
letter-spacing: 0.12em;
|
35
|
+
color: #ccc;
|
36
|
+
text-decoration: none;
|
37
|
+
position: relative;
|
38
|
+
top: 0; left: 0;
|
39
|
+
|
40
|
+
&:hover:after {
|
41
|
+
content: '';
|
42
|
+
display: block;
|
43
|
+
width: 9999px;
|
44
|
+
height: 0.8em;
|
45
|
+
position: absolute;
|
46
|
+
right: -9999px - 5;
|
47
|
+
top: 0;
|
48
|
+
border-bottom: 1px dashed #bb9b1d;
|
49
|
+
}
|
50
|
+
}
|
51
|
+
}
|
52
|
+
}
|
53
|
+
}
|
@@ -0,0 +1,31 @@
|
|
1
|
+
// icon base option bar for an article,
|
2
|
+
// to provide some icon based links, for
|
3
|
+
// each article.
|
4
|
+
nav.__option_bar {
|
5
|
+
@include component;
|
6
|
+
@include default-side-margin;
|
7
|
+
margin-top: 1em;
|
8
|
+
margin-bottom: 0.2em;
|
9
|
+
|
10
|
+
ul {
|
11
|
+
li {
|
12
|
+
@include component;
|
13
|
+
@include floating(right);
|
14
|
+
width: 35px;
|
15
|
+
height: 33px;
|
16
|
+
padding-top: 3px;
|
17
|
+
text-align: center;
|
18
|
+
// last element in line, cause it is floated right
|
19
|
+
&:first-of-type {
|
20
|
+
@include border-radius(0 16px 16px 0);
|
21
|
+
width: 33px;
|
22
|
+
}
|
23
|
+
|
24
|
+
&:last-of-type {
|
25
|
+
@include border-radius(16px 0 0 16px);
|
26
|
+
width: 33px;
|
27
|
+
background-position: -2px;
|
28
|
+
}
|
29
|
+
}
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,26 @@
|
|
1
|
+
/* @license
|
2
|
+
* MyFonts Webfont Build ID 2427055, 2012-12-09T11:36:08-0500
|
3
|
+
*
|
4
|
+
* The fonts listed in this notice are subject to the End User License
|
5
|
+
* Agreement(s) entered into by the website owner. All other parties are
|
6
|
+
* explicitly restricted from using the Licensed Webfonts(s).
|
7
|
+
*
|
8
|
+
* You may obtain a valid license at the URLs below.
|
9
|
+
*
|
10
|
+
* Webfont: Calluna Regular by exljbris
|
11
|
+
* URL: http://www.myfonts.com/fonts/exljbris/calluna/regular/
|
12
|
+
* Copyright: © 2009 exljbris Font Foundry. All rights reserved.
|
13
|
+
* Licensed pageviews: Unlimited
|
14
|
+
*
|
15
|
+
*
|
16
|
+
* License: http://www.myfonts.com/viewlicense?type=web&buildid=2427055
|
17
|
+
*
|
18
|
+
* © 2012 Bitstream Inc
|
19
|
+
*/
|
20
|
+
|
21
|
+
|
22
|
+
@font-face {
|
23
|
+
font-family: 'Calluna-Regular';
|
24
|
+
src: asset-url('calluna_regular.eot', font);
|
25
|
+
src: asset-url('calluna_regular.eot#iefix', font) format('embedded-opentype'), asset-url('calluna_regular.woff', font) format('woff'), asset-url('calluna_regular.ttf', font) format('truetype');
|
26
|
+
}
|
@@ -0,0 +1,22 @@
|
|
1
|
+
@font-face {
|
2
|
+
font-family: 'RaphaelIcons';
|
3
|
+
src: asset-url('raphaelicons-webfont.eot', font);
|
4
|
+
src: local('☺'), asset-url('raphaelicons-webfont.woff', font) format('woff'), asset-url('raphaelicons-webfont.ttf', font) format('truetype'), asset-url('raphaelicons-webfont.svg', font) format('svg');
|
5
|
+
font-weight: normal;
|
6
|
+
font-style: normal;
|
7
|
+
}
|
8
|
+
|
9
|
+
.icon {
|
10
|
+
font-weight: normal;
|
11
|
+
font-style: normal;
|
12
|
+
line-height: normal;
|
13
|
+
font-family: 'RaphaelIcons';
|
14
|
+
color: black;
|
15
|
+
font-size: 1.5em;
|
16
|
+
position: relative;
|
17
|
+
top: 0.1em;
|
18
|
+
}
|
19
|
+
|
20
|
+
a:link, a:visited, a:hover, a:active {
|
21
|
+
&.icon { text-decoration: none; }
|
22
|
+
}
|
@@ -1,15 +1,47 @@
|
|
1
|
-
body { background: $main_background; }
|
1
|
+
body { background: $main_background asset-url('styleus/themes/base/noise.png', image); }
|
2
|
+
|
3
|
+
@mixin default-side-padding {
|
4
|
+
padding-left: 2em;
|
5
|
+
padding-right: 2em;
|
6
|
+
}
|
7
|
+
|
8
|
+
@mixin default-side-margin {
|
9
|
+
margin-left: 2em;
|
10
|
+
margin-right: 2em;
|
11
|
+
}
|
2
12
|
|
3
13
|
.__styleus_wrapper {
|
4
14
|
@include box-sizing(border-box);
|
5
|
-
|
15
|
+
@include component;
|
16
|
+
|
17
|
+
> header {
|
18
|
+
@include default-side-padding;
|
19
|
+
padding-top: 2em;
|
20
|
+
padding-bottom: 0em;
|
6
21
|
|
7
|
-
header {
|
8
22
|
h1 {
|
9
23
|
font-size: 5em;
|
10
24
|
font-family: "Oleo Script";
|
11
25
|
margin-bottom: 0.2em;
|
12
|
-
color:
|
26
|
+
color: $hard_contrast_font;
|
27
|
+
}
|
28
|
+
|
29
|
+
a:link, a:visited, a:hover, a:active {
|
30
|
+
@include floating(right);
|
31
|
+
float: right;
|
32
|
+
text-decoration: none;
|
33
|
+
font-size: 2em;
|
34
|
+
font-family: 'Calluna-Regular';
|
35
|
+
text-transform: none;
|
36
|
+
font-weight: bold;
|
37
|
+
opacity: 0.4;
|
38
|
+
color: #111;
|
39
|
+
|
40
|
+
.icon {
|
41
|
+
position: relative;
|
42
|
+
top: 0.2em; left: 0.1em;
|
43
|
+
opacity: 0.3;
|
44
|
+
}
|
13
45
|
}
|
14
46
|
}
|
15
47
|
}
|
@@ -4,4 +4,9 @@ $soft_content_background: #ece8d6;
|
|
4
4
|
|
5
5
|
// soft text is used for example in articles,
|
6
6
|
// to provide an ambient headline.
|
7
|
-
$soft_text: #
|
7
|
+
$soft_text: #473a3a;
|
8
|
+
|
9
|
+
// used for headlines and ares, which should
|
10
|
+
// be really in foreground.
|
11
|
+
$hard_contrast_font: #332717;
|
12
|
+
$hard_contrast_area: #2d2315;
|
@@ -1,11 +1,22 @@
|
|
1
1
|
@import url(http://fonts.googleapis.com/css?family=Oleo+Script:700);
|
2
|
-
@import url(http://fonts.googleapis.com/css?family=Didact+Gothic);
|
3
2
|
|
4
3
|
@import "compass";
|
5
4
|
@import "compass/reset";
|
6
5
|
@import "compass/css3";
|
6
|
+
@import "compass/css3/user-interface";
|
7
|
+
|
8
|
+
@import "base/fonts/raphael";
|
9
|
+
@import "base/fonts/calluna";
|
7
10
|
|
8
11
|
@import 'base/settings/colors';
|
12
|
+
|
13
|
+
@import 'base/behaviors/text';
|
14
|
+
@import 'base/behaviors/positioning';
|
15
|
+
@import 'base/behaviors/component';
|
16
|
+
|
9
17
|
@import 'base/layout/main';
|
10
18
|
|
11
|
-
|
19
|
+
|
20
|
+
@import 'base/components/article';
|
21
|
+
@import 'base/components/option_bar';
|
22
|
+
@import 'base/components/component_index';
|
@@ -1,6 +1,8 @@
|
|
1
1
|
class ComponentsController < ApplicationController
|
2
2
|
layout 'components'
|
3
3
|
|
4
|
+
helper_method :components_category, :components_category?
|
5
|
+
|
4
6
|
def index
|
5
7
|
render_for_components
|
6
8
|
end
|
@@ -12,18 +14,18 @@ class ComponentsController < ApplicationController
|
|
12
14
|
private
|
13
15
|
|
14
16
|
def render_for_components
|
15
|
-
if
|
16
|
-
render "components/#{
|
17
|
+
if components_category?
|
18
|
+
render "components/#{components_category}/#{params[:action]}"
|
17
19
|
else
|
18
20
|
render
|
19
21
|
end
|
20
22
|
end
|
21
23
|
|
22
|
-
def
|
24
|
+
def components_category
|
23
25
|
params[:components]
|
24
26
|
end
|
25
27
|
|
26
|
-
def
|
28
|
+
def components_category?
|
27
29
|
!!params[:components]
|
28
30
|
end
|
29
31
|
end
|
@@ -6,48 +6,60 @@ module StyleusHelper
|
|
6
6
|
wrap_component component
|
7
7
|
end
|
8
8
|
|
9
|
-
|
9
|
+
component_index(components_category).concat(_joined_component_list)
|
10
10
|
end
|
11
11
|
|
12
|
-
|
13
12
|
def wrap_component(component)
|
14
|
-
_styleus_article_wrap(headline: component.headline,
|
15
|
-
styleus_partials(component.partial_path)
|
13
|
+
article = _styleus_article_wrap(headline: component.headline, id: component.id) do
|
14
|
+
styleus_partials(component.partial_path, helper: component.helper?)
|
16
15
|
end
|
16
|
+
option_bar(component).concat article
|
17
17
|
end
|
18
18
|
|
19
|
-
def styleus_partials(partial_path)
|
20
|
-
sample_template = _styleus_representation_wrap(class: '__boxed')
|
21
|
-
render partial: "#{partial_path}_sample"
|
22
|
-
end
|
19
|
+
def styleus_partials(partial_path, options = { })
|
20
|
+
sample_template = _styleus_representation_wrap(class: '__boxed') { render partial: "#{partial_path}_sample" }
|
23
21
|
|
24
|
-
plain_template =
|
25
|
-
render partial: "#{partial_path}"
|
26
|
-
end
|
22
|
+
plain_template = _html_representation("#{partial_path}.html.erb") { render partial: "#{partial_path}" }
|
27
23
|
|
28
|
-
|
24
|
+
helper_template = _helper_representation { render partial: "#{partial_path}_helper" } if options[:helper]
|
25
|
+
|
26
|
+
sample_template.concat(plain_template).concat(helper_template || safe_empty)
|
29
27
|
end
|
30
28
|
|
31
|
-
def
|
32
|
-
|
33
|
-
content_tag 'nav' do
|
29
|
+
def option_bar(component)
|
30
|
+
content_tag 'nav', class: '__option_bar' do
|
34
31
|
content_tag 'ul' do
|
32
|
+
html_area = content_tag('li') { link_to t('icons.html'), component_path(component), title: t('links.titles.html'), class: 'icon', data: { toggle: "##{component.id} [data-subject=html-representation]" } }
|
33
|
+
helper_area = content_tag('li') { link_to t('icons.helper'), component_path(component), title: t('links.titles.helper'), class: 'icon', data: { toggle: "##{component.id} [data-subject=ruby-representation]" } } if component.helper?
|
34
|
+
presentation_area = content_tag('li') { link_to t('icons.expand_all'), component_path(component), title: t('links.titles.expand_all'), class: 'icon', data: { toggle: "##{component.id} [data-subject*=representation]" } }
|
35
|
+
|
36
|
+
html_area.concat(helper_area || safe_empty).concat(presentation_area)
|
37
|
+
end
|
38
|
+
end
|
39
|
+
end
|
40
|
+
|
41
|
+
def component_index(headline)
|
42
|
+
return if @components.empty?
|
43
|
+
content_tag 'nav', class: "__component_index" do
|
44
|
+
menu_entries = content_tag 'ul' do
|
35
45
|
content_tag_for(:li, @components) do |component|
|
36
46
|
link_to component.headline, anchor: component.id
|
37
47
|
end
|
38
48
|
end
|
49
|
+
content_tag('h3', headline).concat menu_entries
|
39
50
|
end
|
51
|
+
|
40
52
|
end
|
41
53
|
|
42
54
|
def _styleus_article_wrap(options = { }, &block)
|
43
55
|
captured_block = capture(&block)
|
44
56
|
|
45
|
-
content_tag('article', class: '__sg_article', id: options[:
|
46
|
-
content =
|
57
|
+
content_tag('article', class: '__sg_article', id: options[:id]) do
|
58
|
+
content = safe_empty
|
47
59
|
headline = options[:headline]
|
48
60
|
content.concat(content_tag('h3', headline)) if headline
|
49
61
|
content.concat(captured_block)
|
50
|
-
content
|
62
|
+
content
|
51
63
|
end
|
52
64
|
end
|
53
65
|
|
@@ -62,17 +74,32 @@ module StyleusHelper
|
|
62
74
|
end
|
63
75
|
end
|
64
76
|
|
65
|
-
def _coderay_highlight_wrap(note = nil, &block)
|
66
|
-
captured_block = capture(&block)
|
67
|
-
code_block = CodeRay.scan(captured_block.to_s, :html)
|
68
77
|
|
69
|
-
|
78
|
+
def _html_representation(note = nil, &block)
|
79
|
+
_coderay_highlight_wrap(note, type: :html, &block)
|
80
|
+
end
|
81
|
+
|
82
|
+
def _helper_representation(&block)
|
83
|
+
_coderay_highlight_wrap('Rails Helper', type: :ruby, &block)
|
84
|
+
end
|
85
|
+
|
86
|
+
def _coderay_highlight_wrap(note = nil, options = { type: :html }, &block)
|
87
|
+
captured_block = capture(&block)
|
88
|
+
code_block = CodeRay.scan(captured_block.to_s, options[:type])
|
89
|
+
|
90
|
+
note_tag = note ? content_tag('p', note, class: '__code_note') : safe_empty
|
70
91
|
|
71
|
-
highlighted_code = "#{note_tag}#{code_block.div(:css => :class)}"
|
72
|
-
|
92
|
+
highlighted_code = "#{note_tag}#{code_block.div(:css => :class, line_numbers: :table)}"
|
93
|
+
content_tag('div', data: { subject: "#{options[:type]}-representation" }) do
|
94
|
+
highlighted_code.html_safe
|
95
|
+
end
|
73
96
|
end
|
74
97
|
|
75
98
|
def _joined_component_list
|
76
99
|
@component_list.join.html_safe
|
77
100
|
end
|
101
|
+
|
102
|
+
def safe_empty
|
103
|
+
''.html_safe
|
104
|
+
end
|
78
105
|
end
|
@@ -1,12 +1,16 @@
|
|
1
1
|
module Styleus
|
2
2
|
class ViewComponent < Styleus::Base
|
3
|
-
with_attributes :headline, :partial_path
|
3
|
+
with_attributes :headline, :partial_path, :helper
|
4
4
|
|
5
5
|
# id is used as anchor id in the anchor menu,
|
6
6
|
# so it has to be a uid.
|
7
7
|
# TODO: make sure the uid-ness :)
|
8
8
|
def id
|
9
|
-
headline.underscore
|
9
|
+
headline.underscore.gsub(/ /, '_')
|
10
|
+
end
|
11
|
+
|
12
|
+
def helper?
|
13
|
+
!!helper
|
10
14
|
end
|
11
15
|
|
12
16
|
class << self
|
@@ -0,0 +1 @@
|
|
1
|
+
|