tungsten 0.1.17 → 0.1.18
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.
- checksums.yaml +4 -4
- data/app/assets/javascripts/tungsten/{_form_helpers.js → _form-helpers.js} +0 -0
- data/app/assets/javascripts/tungsten/enhancements/flash-messages.js +14 -0
- data/app/assets/javascripts/tungsten/enhancements/notify.js +89 -0
- data/app/assets/javascripts/tungsten/tungsten.js +5 -2
- data/app/assets/stylesheets/tungsten/components/_index.scss +2 -0
- data/app/assets/stylesheets/tungsten/components/_notices.scss +31 -0
- data/app/assets/stylesheets/tungsten/components/_notifications.scss +136 -0
- data/app/assets/stylesheets/tungsten/components/_tooltip.scss +22 -8
- data/app/assets/stylesheets/tungsten/core/_animations.scss +48 -0
- data/app/assets/stylesheets/tungsten/core/_globals.scss +15 -14
- data/app/assets/stylesheets/tungsten/core/_layout.scss +9 -1
- data/app/helpers/tungsten/notice_helper.rb +25 -0
- data/app/views/shared/tungsten/_flash-messages.html.slim +3 -3
- data/lib/tungsten/version.rb +1 -1
- data/public/{code-0.1.17.js → code-0.1.18.js} +1 -1
- data/public/{code-0.1.17.js.gz → code-0.1.18.js.gz} +0 -0
- data/public/{code-0.1.17.map.json → code-0.1.18.map.json} +0 -0
- data/public/{tungsten-0.1.17.css → tungsten-0.1.18.css} +256 -14
- data/public/tungsten-0.1.18.css.gz +0 -0
- data/public/{tungsten-0.1.17.js → tungsten-0.1.18.js} +43 -39
- data/public/tungsten-0.1.18.js.gz +0 -0
- data/public/tungsten-0.1.18.map.json +1 -0
- metadata +16 -12
- data/app/assets/javascripts/tungsten/enhancements/form-flash.js +0 -0
- data/public/tungsten-0.1.17.css.gz +0 -0
- data/public/tungsten-0.1.17.js.gz +0 -0
- data/public/tungsten-0.1.17.map.json +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 84a6187cac138f3e21e0ed94b80a54d8df98a2ef
|
4
|
+
data.tar.gz: 4012d13ac481790f836cb2e5f6f2af887c02703d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8b8a2135aad4ad4491e7ecccaf8782fd0d3a5c0524468f68371a8792d7fb9dda111e99121a69ea1ecdee5ac53d71d90a7857c4864e6db17532540a78398f4ddf
|
7
|
+
data.tar.gz: 52ad761a7308f1944cfbe46a4d9e6cf39913299655e7cb996979d5f76260d7ec0914e99092e6cbbd68ba4d0951c61b1cb1de111ac2354db9367d138025f21b51
|
File without changes
|
@@ -0,0 +1,14 @@
|
|
1
|
+
var Event = require('compose-event')
|
2
|
+
var Notify = require('./notify')
|
3
|
+
|
4
|
+
// If a page has an element .form-flash, trigger a notification
|
5
|
+
//
|
6
|
+
Event.change(function(){
|
7
|
+
var flash = document.querySelector('.flash-message')
|
8
|
+
if (flash) {
|
9
|
+
flash.classList.add('hidden')
|
10
|
+
var type = flash.dataset.type || 'error'
|
11
|
+
Notify(type, flash.textContent.trim())
|
12
|
+
}
|
13
|
+
})
|
14
|
+
|
@@ -0,0 +1,89 @@
|
|
1
|
+
var Event = require( 'compose-event' )
|
2
|
+
|
3
|
+
var defaultsByType = {
|
4
|
+
normal: { dismissAfter: 2500 },
|
5
|
+
success: { dismissAfter: 2500 },
|
6
|
+
}
|
7
|
+
|
8
|
+
|
9
|
+
var timeout,
|
10
|
+
messageEl,
|
11
|
+
template = '\
|
12
|
+
<div class="notification">\
|
13
|
+
<div class="notification-content">\
|
14
|
+
<div class="notification-message" role="alert"></div>\
|
15
|
+
<button class="notification-close" href="#" role="button" aria-label="close message">\
|
16
|
+
<span class="close-icon" aria-hidden="true"></span>\
|
17
|
+
</button>\
|
18
|
+
</div>\
|
19
|
+
</div>\
|
20
|
+
'
|
21
|
+
|
22
|
+
function notify (type, message) {
|
23
|
+
if ( !message ) {
|
24
|
+
message = type
|
25
|
+
type = null
|
26
|
+
}
|
27
|
+
|
28
|
+
return show( type, message )
|
29
|
+
}
|
30
|
+
|
31
|
+
function show ( type, message ) {
|
32
|
+
if ( messageEl ) return dismiss( function(){ show( type, message ) })
|
33
|
+
|
34
|
+
document.body.insertAdjacentHTML( 'beforeend', template )
|
35
|
+
messageEl = document.body.lastChild
|
36
|
+
|
37
|
+
messageEl.querySelector( '.notification-message' ).innerHTML = message
|
38
|
+
|
39
|
+
if ( type ) {
|
40
|
+
|
41
|
+
messageEl.classList.add( type )
|
42
|
+
var defaults = defaultsByType[ type ]
|
43
|
+
|
44
|
+
if ( defaults && defaults.dismissAfter ){
|
45
|
+
timeout = Event.delay( dismiss, defaults.dismissAfter )
|
46
|
+
}
|
47
|
+
}
|
48
|
+
|
49
|
+
messageEl = document.body.lastChild
|
50
|
+
|
51
|
+
Event.keyOne( 'esc', dismiss )
|
52
|
+
Event.one( messageEl, 'click', '.notification-close', dismiss )
|
53
|
+
|
54
|
+
return {
|
55
|
+
dismiss: dismiss
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
function dismiss ( callback ) {
|
60
|
+
|
61
|
+
var cb
|
62
|
+
|
63
|
+
if ( typeof callback == 'function' ) {
|
64
|
+
cb = function() { remove(); callback() }
|
65
|
+
} else {
|
66
|
+
cb = remove;
|
67
|
+
}
|
68
|
+
|
69
|
+
var timeout = Event.delay( cb, 500 )
|
70
|
+
|
71
|
+
Event.one( messageEl, 'animationstart', function() {
|
72
|
+
clearTimeout( timeout )
|
73
|
+
|
74
|
+
Event.afterAnimation( messageEl, cb )
|
75
|
+
})
|
76
|
+
|
77
|
+
messageEl.classList.add( 'dismiss' )
|
78
|
+
}
|
79
|
+
|
80
|
+
function remove () {
|
81
|
+
messageEl = document.querySelector('body > .notification')
|
82
|
+
|
83
|
+
if (messageEl) {
|
84
|
+
messageEl.parentNode.removeChild( messageEl )
|
85
|
+
}
|
86
|
+
messageEl = null
|
87
|
+
}
|
88
|
+
|
89
|
+
module.exports = notify
|
@@ -4,18 +4,21 @@ var toolbox = require( 'compose-toolbox' )
|
|
4
4
|
var ajax = require( 'superagent' )
|
5
5
|
var event = toolbox.event
|
6
6
|
var clipboard = require( './enhancements/clipboard' )
|
7
|
+
var notify = require( './enhancements/notify' )
|
7
8
|
|
8
9
|
event.scroll.disablePointer() // disable pointer events on scroll for performance (to avoid extra repaints)
|
9
10
|
clipboard();
|
10
11
|
|
11
12
|
require( 'compose-slider' ) // Our slider (range input) component
|
12
13
|
require( './_icons' ) // Import svg icons (from Esvg)
|
13
|
-
require( './
|
14
|
+
require( './_form-helpers' )
|
15
|
+
require( './enhancements/flash-messages' )
|
14
16
|
|
15
17
|
// Public API object
|
16
18
|
window.Tungsten = module.exports = toolbox.merge( {
|
17
19
|
ajax : ajax,
|
18
20
|
form : formUp,
|
19
21
|
toggler : toggler,
|
20
|
-
clipboard : clipboard
|
22
|
+
clipboard : clipboard,
|
23
|
+
notify : notify
|
21
24
|
}, toolbox )
|
@@ -0,0 +1,31 @@
|
|
1
|
+
@mixin notice-colors ($text, $bg, $border) {
|
2
|
+
color: $text;
|
3
|
+
background: linear-gradient( top, lighten($bg, 2), darken($bg, 2));
|
4
|
+
border: 1px solid $border;
|
5
|
+
}
|
6
|
+
.notice {
|
7
|
+
border-radius: $radius;
|
8
|
+
box-shadow: 0 3px 5px rgba($gray-11, .15);
|
9
|
+
padding: $card-padding;
|
10
|
+
@include block-margin;
|
11
|
+
|
12
|
+
.notice-title, p {
|
13
|
+
margin: {
|
14
|
+
top: 10px;
|
15
|
+
bottom: 10px;
|
16
|
+
}
|
17
|
+
&:first-child {
|
18
|
+
margin-top: 0;
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
@include notice-colors(currentColor, #fff, $gray-05);
|
23
|
+
|
24
|
+
&.warning {
|
25
|
+
@include notice-colors(#80602A, #fff4ad, #E2C66D);
|
26
|
+
}
|
27
|
+
&.error {
|
28
|
+
@include notice-colors(#FFF, #F37B78, #AB5857);
|
29
|
+
text-shadow: rgba(#000, .2) 0 1px 1px;
|
30
|
+
}
|
31
|
+
}
|
@@ -0,0 +1,136 @@
|
|
1
|
+
$status-text: #fff;
|
2
|
+
$status-text-shadow: rgba(#000, .2) 0 1px 1px;
|
3
|
+
|
4
|
+
@mixin notification-style($color) {
|
5
|
+
.notification-content {
|
6
|
+
background: $color;
|
7
|
+
}
|
8
|
+
.notification-content:before {
|
9
|
+
background-color: darken($color, 10);
|
10
|
+
}
|
11
|
+
}
|
12
|
+
|
13
|
+
.flash-message {
|
14
|
+
display: none;
|
15
|
+
}
|
16
|
+
|
17
|
+
.notification {
|
18
|
+
position: fixed; top: 0; left: 10px; right: 10px;
|
19
|
+
height: 1px;
|
20
|
+
z-index: 1000;
|
21
|
+
overflow: visible;
|
22
|
+
transform: translate3d(0,0,0);
|
23
|
+
|
24
|
+
&:after {
|
25
|
+
content: "";
|
26
|
+
position: absolute;
|
27
|
+
top: 0; left: 0; right: 0;
|
28
|
+
height: 56px;
|
29
|
+
z-index: -1;
|
30
|
+
}
|
31
|
+
|
32
|
+
&-content {
|
33
|
+
width: 100%;
|
34
|
+
font-size: 1.2em;
|
35
|
+
margin: 0 auto;
|
36
|
+
position: relative;
|
37
|
+
animation: slide-down .4s $timing;
|
38
|
+
color: $status-text;
|
39
|
+
text-shadow: $status-text-shadow;
|
40
|
+
box-shadow: 0 3px 10px rgba($gray-11, .3);
|
41
|
+
border-bottom-left-radius: 5px;
|
42
|
+
border-bottom-right-radius: 5px;
|
43
|
+
display: flex;
|
44
|
+
align-items: middle;
|
45
|
+
|
46
|
+
&:before {
|
47
|
+
filter: brightness(1);
|
48
|
+
border-bottom-left-radius: 5px;
|
49
|
+
width: 45px;
|
50
|
+
content: "";
|
51
|
+
vertical-align: middle;
|
52
|
+
text-align: center;
|
53
|
+
padding-top: .4em;
|
54
|
+
content: url('data:image/svg+xml;utf-8,%3Csvg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 32 32"%3E%3Cpath fill="#fff" d="M16 8.5a.5.5 0 0 1 0 1c-5.327 0-10 2.804-10 6a.5.5 0 0 1-1 0c0-3.794 5.037-7 11-7zm0-5c-8.837 0-16 5.373-16 12 0 4.127 2.78 7.766 7.008 9.926 0 .027-.008.045-.008.074 0 1.793-1.34 3.723-1.928 4.736h.002a.906.906 0 0 0 .832 1.264c.094 0 .26-.025.255-.014 3.13-.512 6.07-3.383 6.76-4.215 1 .15 2.03.23 3.09.23 8.84 0 16-5.37 16-12s-7.16-12-16-12zm0 22c-.917 0-1.858-.07-2.796-.207a1.998 1.998 0 0 0-1.836.71c-.428.52-1.646 1.683-3.085 2.538.39-.89.695-1.89.716-2.93v-.18c0-.75-.42-1.44-1.09-1.78C4.21 21.75 2 18.71 2 15.5c0-5.514 6.28-10 14-10 7.718 0 14 4.486 14 10s-6.28 10-14 10z"/%3E%3C/svg%3E');
|
55
|
+
}
|
56
|
+
}
|
57
|
+
|
58
|
+
&-message {
|
59
|
+
flex-grow: 1;
|
60
|
+
padding: 8px 15px;
|
61
|
+
a {
|
62
|
+
color: #fef0bd;
|
63
|
+
&:hover, &:focus {
|
64
|
+
color: inherit;
|
65
|
+
}
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
&-close {
|
70
|
+
flex-shrink: 1;
|
71
|
+
text-align: center;
|
72
|
+
text-decoration: none;
|
73
|
+
padding: 16px 12px;
|
74
|
+
color: #fff;
|
75
|
+
cursor: pointer;
|
76
|
+
opacity: .7;
|
77
|
+
background: none;
|
78
|
+
border: none;
|
79
|
+
animation: half-spin .5s ease-out;
|
80
|
+
|
81
|
+
.close-icon {
|
82
|
+
display: block;
|
83
|
+
transition: all .3s cubic-bezier(0.190, 1.000, 0.220, 1.000);
|
84
|
+
cursor: pointer;
|
85
|
+
|
86
|
+
&:before,&:after {
|
87
|
+
content: "";
|
88
|
+
width: 18px;
|
89
|
+
height: 4px;
|
90
|
+
background-color: #fff;
|
91
|
+
display: block;
|
92
|
+
cursor: pointer;
|
93
|
+
position: relative;
|
94
|
+
}
|
95
|
+
&:before {
|
96
|
+
top: 2px;
|
97
|
+
transform: rotate(-45deg);
|
98
|
+
}
|
99
|
+
&:after {
|
100
|
+
top: -2px;
|
101
|
+
transform: rotate(45deg);
|
102
|
+
}
|
103
|
+
}
|
104
|
+
|
105
|
+
&:focus, &:hover {
|
106
|
+
opacity: 1;
|
107
|
+
outline: none;
|
108
|
+
}
|
109
|
+
}
|
110
|
+
|
111
|
+
&.dismiss {
|
112
|
+
.notification-content {
|
113
|
+
animation: slide-up .2s .3s ease-out;
|
114
|
+
}
|
115
|
+
.close-icon {
|
116
|
+
animation: half-spin .5s ease-in reverse;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
|
120
|
+
& {
|
121
|
+
@include notification-style($gray-09);
|
122
|
+
}
|
123
|
+
|
124
|
+
&.error {
|
125
|
+
@include notification-style($red-01);
|
126
|
+
}
|
127
|
+
|
128
|
+
&.action {
|
129
|
+
@include notification-style($blue-02);
|
130
|
+
}
|
131
|
+
|
132
|
+
&.success {
|
133
|
+
@include notification-style($green-02);
|
134
|
+
}
|
135
|
+
|
136
|
+
}
|
@@ -7,13 +7,16 @@
|
|
7
7
|
transform: translate3d(-50%, 0, 0);
|
8
8
|
z-index: 100000;
|
9
9
|
pointer-events: none;
|
10
|
+
animation: fade-in .1s ease-in;
|
11
|
+
animation-fill-mode: forwards;
|
12
|
+
animation-delay: .4s;
|
13
|
+
display: none;
|
10
14
|
}
|
11
15
|
&:after {
|
12
16
|
-webkit-font-smoothing: subpixel-antialiased;
|
17
|
+
content: attr(aria-label);
|
13
18
|
top: calc(100% + 6px);
|
14
|
-
|
15
|
-
background: rgba(#000, 0.8);
|
16
|
-
display: inline-block;
|
19
|
+
background-color: rgba(#000, 0.8);
|
17
20
|
color: #fff;
|
18
21
|
white-space: nowrap;
|
19
22
|
font-size: 11px;
|
@@ -23,16 +26,27 @@
|
|
23
26
|
}
|
24
27
|
&:before {
|
25
28
|
top: 100%;
|
29
|
+
content: "";
|
26
30
|
@include triangle(up, rgba(#000, 0.8), 6px);
|
27
31
|
}
|
28
32
|
|
29
33
|
&:hover, &:focus {
|
30
|
-
&:after {
|
31
|
-
&:before {
|
34
|
+
&:after { display: inline-block; }
|
35
|
+
&:before { display: inline-block; }
|
36
|
+
}
|
37
|
+
|
38
|
+
&.copied {
|
39
|
+
&:after { content: "Copied!"; }
|
32
40
|
&:before, &:after {
|
33
|
-
animation:
|
34
|
-
|
35
|
-
|
41
|
+
animation-delay: 0s;
|
42
|
+
}
|
43
|
+
&:after {
|
44
|
+
background-color: rgba($green-02, .8);
|
45
|
+
}
|
46
|
+
&:before {
|
47
|
+
@include triangle(up, rgba($green-02, .8), 6px);
|
36
48
|
}
|
37
49
|
}
|
50
|
+
|
38
51
|
}
|
52
|
+
|
@@ -2,3 +2,51 @@
|
|
2
2
|
0% { opacity: 0; }
|
3
3
|
100% { opacity: 1; }
|
4
4
|
}
|
5
|
+
|
6
|
+
@keyframes fade-out {
|
7
|
+
0% { opacity: 1; }
|
8
|
+
100% { opacity: 0; }
|
9
|
+
}
|
10
|
+
|
11
|
+
@keyframes slide-down {
|
12
|
+
0% {
|
13
|
+
transform: translateY(-100%)
|
14
|
+
} 100% {
|
15
|
+
transform: translateY(0)
|
16
|
+
}
|
17
|
+
}
|
18
|
+
|
19
|
+
@keyframes slide-up {
|
20
|
+
0% {
|
21
|
+
transform: translateY(0)
|
22
|
+
} 100% {
|
23
|
+
transform: translateY(-100%)
|
24
|
+
}
|
25
|
+
}
|
26
|
+
|
27
|
+
@keyframes spin {
|
28
|
+
0% {
|
29
|
+
transform: rotate(0deg);
|
30
|
+
}
|
31
|
+
100% {
|
32
|
+
transform: rotate(360deg);
|
33
|
+
}
|
34
|
+
}
|
35
|
+
|
36
|
+
@keyframes half-spin {
|
37
|
+
0% {
|
38
|
+
transform: rotate(-180deg);
|
39
|
+
}
|
40
|
+
100% {
|
41
|
+
transform: rotate(0deg);
|
42
|
+
}
|
43
|
+
}
|
44
|
+
|
45
|
+
@keyframes zoom-in {
|
46
|
+
0% {
|
47
|
+
transform: scale(.8, .8);
|
48
|
+
}
|
49
|
+
100% {
|
50
|
+
transform: scale(1,1);
|
51
|
+
}
|
52
|
+
}
|
@@ -162,6 +162,21 @@ $header-height: 84px;
|
|
162
162
|
}
|
163
163
|
}
|
164
164
|
|
165
|
+
// Between widths media query mixin
|
166
|
+
@mixin between($small-width, $large-width) {
|
167
|
+
$large-width: $large-width - 1;
|
168
|
+
@media (max-width: $large-width) and (min-width: $small-width) {
|
169
|
+
@content;
|
170
|
+
}
|
171
|
+
}
|
172
|
+
|
173
|
+
// HDPI screens media query mixin
|
174
|
+
@mixin hdpi {
|
175
|
+
@media (min-device-pixel-ratio: 1.3), (min-resolution: 120dpi), (min-resolution: 1.3dppx) {
|
176
|
+
@content;
|
177
|
+
}
|
178
|
+
}
|
179
|
+
|
165
180
|
@mixin triangle($direction, $color, $size) {
|
166
181
|
@if $direction == left {
|
167
182
|
border-bottom: $size solid transparent;
|
@@ -188,17 +203,3 @@ $header-height: 84px;
|
|
188
203
|
width: 0;
|
189
204
|
}
|
190
205
|
|
191
|
-
// Between widths media query mixin
|
192
|
-
@mixin between($small-width, $large-width) {
|
193
|
-
$large-width: $large-width - 1;
|
194
|
-
@media (max-width: $large-width) and (min-width: $small-width) {
|
195
|
-
@content;
|
196
|
-
}
|
197
|
-
}
|
198
|
-
|
199
|
-
// HDPI screens media query mixin
|
200
|
-
@mixin hdpi {
|
201
|
-
@media (min-device-pixel-ratio: 1.3), (min-resolution: 120dpi), (min-resolution: 1.3dppx) {
|
202
|
-
@content;
|
203
|
-
}
|
204
|
-
}
|