dante-editor 0.0.15 → 0.1.0

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.
Files changed (45) hide show
  1. checksums.yaml +4 -4
  2. data/Gemfile.lock +1 -1
  3. data/README.md +49 -10
  4. data/app/assets/fonts/dante/dante.eot +0 -0
  5. data/app/assets/fonts/dante/dante.svg +9 -5
  6. data/app/assets/fonts/dante/dante.ttf +0 -0
  7. data/app/assets/fonts/dante/dante.woff +0 -0
  8. data/app/assets/javascripts/dante/behavior.js.coffee +2 -0
  9. data/app/assets/javascripts/dante/behaviors/image.js.coffee +56 -0
  10. data/app/assets/javascripts/dante/behaviors/list.js.coffee +150 -0
  11. data/app/assets/javascripts/dante/behaviors/save.js.coffee +40 -0
  12. data/app/assets/javascripts/dante/behaviors/suggest.js.coffee +118 -0
  13. data/app/assets/javascripts/dante/editor.js.coffee +110 -228
  14. data/app/assets/javascripts/dante/popover.js.coffee +350 -11
  15. data/app/assets/javascripts/dante/tooltip_widgets/uploader.js.coffee +2 -2
  16. data/app/assets/javascripts/dante.js +5 -0
  17. data/app/assets/stylesheets/dante/_blame.scss +209 -0
  18. data/app/assets/stylesheets/dante/_caption.scss +14 -0
  19. data/app/assets/stylesheets/dante/_icons.scss +10 -5
  20. data/app/assets/stylesheets/dante/_menu.scss +7 -7
  21. data/app/assets/stylesheets/dante/_popover.scss +122 -44
  22. data/app/assets/stylesheets/dante/_utilities.scss +5 -1
  23. data/app/assets/stylesheets/dante/_variables.scss +7 -3
  24. data/app/assets/stylesheets/dante.scss +2 -0
  25. data/config.rb +5 -4
  26. data/dist/css/dante-editor.css +246 -44
  27. data/dist/fonts/dante/dante.eot +0 -0
  28. data/dist/fonts/dante/dante.svg +9 -5
  29. data/dist/fonts/dante/dante.ttf +0 -0
  30. data/dist/fonts/dante/dante.woff +0 -0
  31. data/dist/js/dante-editor.js +1015 -283
  32. data/lib/dante-editor/version.rb +1 -1
  33. data/source/api/cristian.json.erb +8 -0
  34. data/source/api/miguel.json.erb +8 -0
  35. data/source/api/resource.json.erb +8 -0
  36. data/source/api/save.json.erb +1 -0
  37. data/source/api/suggest.json.erb +22 -0
  38. data/source/assets/images/dante-demo.png +0 -0
  39. data/source/icons/image-center.svg +12 -0
  40. data/source/icons/image-fill.svg +11 -0
  41. data/source/icons/image-left.svg +15 -0
  42. data/source/icons/image-wide.svg +12 -0
  43. data/source/index.html.erb +6 -0
  44. data/source/partials/_readme.markdown +2 -2
  45. metadata +18 -2
@@ -20,8 +20,8 @@
20
20
 
21
21
 
22
22
  // CARET
23
- &:after,
24
- &:before {
23
+ //&:before,
24
+ &:after {
25
25
  content: "";
26
26
  height: 0;
27
27
  width: 0;
@@ -31,14 +31,14 @@
31
31
  border: $menu-caret-size solid transparent;
32
32
  margin-left: -($menu-caret-size/2);
33
33
  }
34
+ //&:before {
35
+ // border-top-color: $menu-border-color;
36
+ // bottom: -($menu-caret-size*2);
37
+ //}
34
38
  &:after {
35
- border-top-color: $menu-tone;
39
+ border-top-color: $menu-caret-color;
36
40
  bottom: -(($menu-caret-size*2)-1);
37
41
  }
38
- &:before {
39
- border-top-color: $menu-border-color;
40
- bottom: -($menu-caret-size*2);
41
- }
42
42
 
43
43
  }
44
44
 
@@ -1,47 +1,129 @@
1
- .popover {
2
- overflow: hidden;
3
- position: absolute;
4
- z-index: 900;
5
- visibility: visible;
6
- font-size: 12px;
7
- text-align: center;
8
- opacity: 0;
9
- pointer-events: auto;
10
- padding: 15px;
11
-
12
- font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
13
- letter-spacing: -0.02em;
14
- font-weight: 400;
15
- font-style: normal;
16
- line-height: 1.4;
1
+ // Base popover styles
2
+
3
+ .dante-popover {
4
+ & {
5
+ overflow: hidden;
6
+ position: absolute;
7
+ z-index: 900;
8
+ visibility: visible;
9
+ font-size: 12px;
10
+ text-align: center;
11
+ pointer-events: auto;
12
+ padding: 15px;
13
+ font-family: "Lucida Grande","Lucida Sans Unicode","Lucida Sans",Geneva,Verdana,sans-serif;
14
+ letter-spacing: -0.02em;
15
+ font-weight: 400;
16
+ font-style: normal;
17
+ line-height: 1.4;
18
+
19
+ opacity: 0;
20
+ }
17
21
  &.is-active {
18
22
  opacity: 1;
19
23
  }
24
+ .popover-inner {
25
+ background: #fff;
26
+ box-shadow: 0 1px 2px rgba(0,0,0,.25),0 0 1px rgba(0,0,0,.35);
27
+ }
28
+ }
29
+
30
+ .popover.is-active {
31
+ visibility: visible;
20
32
  }
21
33
 
22
34
  .popover-inner {
23
- position: relative;
24
- max-width: 280px;
25
- border-radius: 4px;
26
- padding: 8px;
35
+ & {
36
+ position: relative;
37
+ max-width: 300px;
38
+ border-radius: $menu-border-radius;
39
+ padding: 8px;
40
+ }
27
41
  a {
28
42
  color: inherit;
29
43
  text-decoration: none;
30
44
  }
31
45
  }
32
46
 
47
+
48
+
49
+ // Defatul tooltip
50
+
33
51
  .popover--tooltip {
34
- pointer-events: none;
52
+ & {
53
+ pointer-events: none;
54
+ }
55
+
56
+ .popover-inner {
57
+ // background-color: $menu-tone;
58
+ background: $menu-tone;
59
+ border-radius: 4px;
60
+ color: #fff;
61
+ }
62
+ }
63
+
64
+
65
+
66
+ // LINK tooltip
67
+
68
+ .popover--Linktooltip {
69
+ & {
70
+ pointer-events: auto;
71
+ z-index: 300;
72
+ word-break: break-word;
73
+ word-wrap: break-word;
74
+ }
75
+ .popover-inner {
76
+ padding: 8px 10px;
77
+ font-size: 12px;
78
+ }
35
79
  }
36
80
 
37
- .popover--linkTooltip {
38
- pointer-events: auto;
39
- z-index: 300;
40
- word-break: break-word;
41
- word-wrap: break-word;
81
+
82
+
83
+ // Align tooltip
84
+
85
+ .popover--Aligntooltip {
86
+ .popover-inner {
87
+ padding: 0;
88
+ background: $menu-tone;
89
+ color: #fff;
90
+ }
42
91
  }
43
92
 
44
93
 
94
+ // Align tooltip
95
+ .popover--typeahead {
96
+ .popover-inner {
97
+ & {
98
+ position: relative;
99
+ padding: 14px;
100
+ border-radius: 4px;
101
+ }
102
+
103
+ ul{
104
+ padding-left: 0px;
105
+ }
106
+ }
107
+ }
108
+
109
+
110
+ // popover--typeahead
111
+ // typeahead
112
+ // typeahead--mention
113
+ // popover--maxWidth360
114
+ // popover--bottom
115
+
116
+ .popover.popover--maxWidth360 .popover-inner {
117
+ max-width: 360px;
118
+ }
119
+
120
+ .popover:not(.popover--flexible) .popover-inner {
121
+ max-width: 280px;
122
+ }
123
+
124
+
125
+
126
+
45
127
  /*
46
128
  .popover.is-withTransition {
47
129
  -webkit-transition:opacity 100ms ease;
@@ -55,80 +137,76 @@
55
137
  }
56
138
  */
57
139
 
58
- .popover-inner {
59
- background-color: rgba(0,0,0,0.8);
60
- color: #fff;
61
- }
62
140
  .popover-arrow {
63
141
  position: absolute;
64
142
  }
65
143
  .popover-arrow:after {
66
- background-color: rgba(0,0,0,0.8);
144
+ background-color: $menu-tone;
67
145
  }
68
146
 
69
147
  .popover--top .popover-arrow,
70
148
  .popover--bottom .popover-arrow {
71
149
  left: 50%;
72
- margin-left: -7px;
150
+ margin-left: -$tooltip-caret-size/2;
73
151
  }
74
152
 
75
153
  .popover--left .popover-arrow,
76
154
  .popover--right .popover-arrow {
77
155
  top: 50%;
78
- margin-top: -7px;
156
+ margin-top: -$tooltip-caret-size/2;
79
157
  }
80
158
 
81
159
  .popover--top .popover-arrow {
82
- bottom: 1px;
83
- clip: rect(0 18px 18px 4px);
160
+ // bottom: 1px;
161
+ // clip: rect(0 18px 18px 4px);
84
162
  }
85
163
 
86
164
  .popover--right .popover-arrow {
87
165
  left: 1px;
88
- clip: rect(-4px 14px 18px 0);
166
+ // clip: rect(-4px 14px 18px 0);
89
167
  }
90
168
 
91
169
  .popover--bottom .popover-arrow {
92
170
  top: 1px;
93
- clip: rect(0 18px 14px -1px);
171
+ // clip: rect(0 18px 14px -1px);
94
172
  }
95
173
 
96
174
  .popover--left .popover-arrow {
97
175
  right: 1px;
98
- clip: rect(-4px 14px 18px 0);
176
+ // clip: rect(-4px 14px 18px 0);
99
177
  }
100
178
 
101
179
  .popover-arrow:after {
102
180
  content: '';
103
181
  display: block;
104
- width: 14px;
105
- height: 14px;
182
+ width: $tooltip-caret-size;
183
+ height: $tooltip-caret-size;
106
184
  }
107
185
 
108
186
  .popover--top .popover-arrow:after {
109
187
  -webkit-transform: rotate(45deg) translate(-5px,-5px);
110
188
  -ms-transform: rotate(45deg) translate(-5px,-5px);
111
189
  transform: rotate(45deg) translate(-5px,-5px);
112
- box-shadow: 1px 1px 1px -1px rgba(0,0,0,0.8);
190
+ box-shadow: 1px 1px 1px -1px $menu-tone;
113
191
  }
114
192
 
115
193
  .popover--right .popover-arrow:after {
116
194
  -webkit-transform: rotate(45deg) translate(6px,-6px);
117
195
  -ms-transform: rotate(45deg) translate(6px,-6px);
118
196
  transform: rotate(45deg) translate(6px,-6px);
119
- box-shadow: -1px 1px 1px -1px rgba(0,0,0,0.8);
197
+ box-shadow: -1px 1px 1px -1px $menu-tone;
120
198
  }
121
199
 
122
200
  .popover--bottom .popover-arrow:after {
123
201
  -webkit-transform: rotate(45deg) translate(6px,6px);
124
202
  -ms-transform: rotate(45deg) translate(6px,6px);
125
203
  transform: rotate(45deg) translate(6px,6px);
126
- box-shadow: -1px -1px 1px -1px rgba(0,0,0,0.44);
204
+ box-shadow: -1px -1px 1px -1px $menu-tone;
127
205
  }
128
206
 
129
207
  .popover--left .popover-arrow:after {
130
208
  -webkit-transform: rotate(45deg) translate(-6px,6px);
131
209
  -ms-transform: rotate(45deg) translate(-6px,6px);
132
210
  transform: rotate(45deg) translate(-6px,6px);
133
- box-shadow: 1px -1px 1px -1px rgba(0,0,0,0.8);
211
+ box-shadow: 1px -1px 1px -1px $menu-tone;
134
212
  }
@@ -52,4 +52,8 @@
52
52
  border-top-color: rgba(0, 0, 0, .6);
53
53
  animation: spinner .6s linear infinite;
54
54
  -webkit-animation: spinner .6s linear infinite;
55
- }
55
+ }
56
+
57
+ .hidden {
58
+ display: none !important;
59
+ }
@@ -10,17 +10,19 @@ $active-color: #5BD974;
10
10
 
11
11
  $menu-tone: #333;
12
12
  $menu-factor: 5%;
13
- $menu-background: linear-gradient(to bottom, darken($menu-tone,$menu-factor), $menu-tone) repeat scroll 0 0 $menu-tone;
13
+ $menu-background: linear-gradient(to bottom, $menu-tone, darken($menu-tone,$menu-factor)) repeat scroll 0 0 $menu-tone;
14
14
  $menu-shadow: 1px 2px 3px -2px #222;
15
- $menu-border-width: 1px;
15
+ $menu-border-width: 0px;
16
16
  $menu-border-color: darken($menu-tone,$menu-factor);
17
17
  $menu-border-radius: 5px;
18
18
  $menu-border: $menu-border-width solid $menu-border-color;
19
19
  $menu-color: #FFFFFF;
20
20
  $menu-color-active: $active-color;
21
21
  $menu-caret-size: 8px;
22
+ $menu-caret-color: darken($menu-tone,$menu-factor);
22
23
 
23
- $menu-height: 45px;
24
+
25
+ $menu-height: 42px;
24
26
  $menu-button-height: $menu-height - ($menu-border-width * 2);
25
27
 
26
28
  $tooltip-color: black;
@@ -37,6 +39,8 @@ $tooltip-items: 3;
37
39
  $tooltip-size: 32px;
38
40
  $tooltip-line-height: $tooltip-size;
39
41
 
42
+ $tooltip-caret-size: 12px;
43
+
40
44
  // Add 1px on expanded tooltip to avoid colapsed buttons in FF
41
45
  $tooltip-size-expanded: 1 + ($tooltip-size + $tooltip-menu-spacing) + (($tooltip-size + $tooltip-button-spacing) * $tooltip-items);
42
46
  $tooltip-default-transition: 100ms border-color, 100ms color;
@@ -14,5 +14,7 @@
14
14
  @import "dante/media";
15
15
  @import "dante/caption";
16
16
  @import "dante/needsorder";
17
+ @import "dante/blame";
18
+
17
19
 
18
20
  @import "dante/debug";
data/config.rb CHANGED
@@ -1,8 +1,4 @@
1
1
 
2
- compass_config do |config|
3
- config.line_comments = false
4
- end
5
-
6
2
  class DistBuilder < Middleman::Extension
7
3
 
8
4
  def initialize(app, options_hash={}, &block)
@@ -62,6 +58,7 @@ set :fonts_dir, 'assets/fonts'
62
58
  set :markdown_engine, :kramdown
63
59
 
64
60
  page "/tests/*", :layout => "spec"
61
+ page '/api/*', :content_type => 'application/json', layout: false
65
62
 
66
63
  sprockets.append_path File.join "#{root}", "bower_components"
67
64
 
@@ -77,6 +74,10 @@ configure :build do
77
74
  # Enable cache buster
78
75
  # activate :asset_hash
79
76
 
77
+ compass_config do |config|
78
+ config.line_comments = false
79
+ end
80
+
80
81
  activate :relative_assets
81
82
  set :relative_links, true
82
83
  activate :dist_builder