nfg_ui 0.9.18.3 → 0.9.19
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/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_custom.scss +1 -0
- data/app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_avatar.scss +54 -0
- data/lib/nfg_ui/components/elements/avatar.rb +69 -0
- data/lib/nfg_ui/components/traits/size.rb +9 -1
- data/lib/nfg_ui/version.rb +1 -1
- data/lib/nfg_ui.rb +1 -0
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 6e5bbcb27ac27f8426efeed5141e03cb6547993924c2b4f08723895bf1b37ab4
|
|
4
|
+
data.tar.gz: 0015a4dbb6e348aa114b1c9a0b0d005d11e47708fec14704c32d6d1888026476
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 8c4e347b204fae62ef69557e67a8e6ddb9457602ca298f818b46157f04ed63cd210eb1d4651b3d77f417e3ee7f684364cabc9a388a3408fe3e6f627cafdb0243
|
|
7
|
+
data.tar.gz: 72eb996d6d153a5827fc7030cb47ee3a7c474bc8d3ea3b18ae85ace97182c54648db52f73db46a5037fb9c1429286ac2a59ec5609dc0ef055cada6d19b55204a
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
.avatar {
|
|
2
|
+
position: relative;
|
|
3
|
+
display: inline-flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
justify-content: center;
|
|
6
|
+
vertical-align: middle;
|
|
7
|
+
width: ($spacer * 2);
|
|
8
|
+
height: ($spacer * 2);
|
|
9
|
+
color: transparent;
|
|
10
|
+
background-color: $border-color;
|
|
11
|
+
border-radius: 50%;
|
|
12
|
+
|
|
13
|
+
// Images within avatars
|
|
14
|
+
img {
|
|
15
|
+
width: 100%;
|
|
16
|
+
height: 100%;
|
|
17
|
+
border-radius: inherit;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
// Text (initials) within avatars
|
|
21
|
+
.avatar-text {
|
|
22
|
+
font-weight: $font-weight-bold;
|
|
23
|
+
font-size: $font-size-base;
|
|
24
|
+
line-height: 1;
|
|
25
|
+
color: $body-color;
|
|
26
|
+
text-align: center;
|
|
27
|
+
white-space: nowrap;
|
|
28
|
+
overflow: hidden;
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
// Sizes
|
|
32
|
+
&.avatar-sm {
|
|
33
|
+
width: $spacer;
|
|
34
|
+
height: $spacer;
|
|
35
|
+
.avatar-text { font-size: ($font-size-base * .625); }
|
|
36
|
+
}
|
|
37
|
+
&.avatar-lg {
|
|
38
|
+
width: ($spacer * 4);
|
|
39
|
+
height: ($spacer * 4);
|
|
40
|
+
.avatar-text { font-size: $font-size-lg; }
|
|
41
|
+
}
|
|
42
|
+
&.avatar-xl {
|
|
43
|
+
width: ($spacer * 5);
|
|
44
|
+
height: ($spacer * 5);
|
|
45
|
+
.avatar-text { font-size: $h1-font-size; }
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
// Avatar as a link
|
|
50
|
+
a.avatar {
|
|
51
|
+
opacity: 1;
|
|
52
|
+
transition: $transition-fade;
|
|
53
|
+
&:hover, &:active { opacity: $btn-disabled-opacity; }
|
|
54
|
+
}
|
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
module NfgUi
|
|
3
|
+
module Components
|
|
4
|
+
module Elements
|
|
5
|
+
# Activity doc coming soon
|
|
6
|
+
class Avatar < NfgUi::Components::Base
|
|
7
|
+
include Bootstrap::Utilities::Sizable
|
|
8
|
+
include Bootstrap::Utilities::Tooltipable
|
|
9
|
+
include Bootstrap::Utilities::Wrappable
|
|
10
|
+
|
|
11
|
+
include NfgUi::Components::Traits::Size
|
|
12
|
+
|
|
13
|
+
def alt
|
|
14
|
+
options.fetch(:alt, nil)
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
def image
|
|
18
|
+
options.fetch(:image, nil)
|
|
19
|
+
end
|
|
20
|
+
|
|
21
|
+
def render
|
|
22
|
+
content_tag(as, html_options) do
|
|
23
|
+
if image.present?
|
|
24
|
+
image_tag image, alt: alt.presence
|
|
25
|
+
elsif body.present?
|
|
26
|
+
content_tag(:span, (block_given? ? yield : body), class: body_css_class)
|
|
27
|
+
end
|
|
28
|
+
end
|
|
29
|
+
end
|
|
30
|
+
|
|
31
|
+
# Set the default size if no size is set.
|
|
32
|
+
# Avatars, unlike other components, always have a size
|
|
33
|
+
# provided to them.
|
|
34
|
+
# This also rejects nil from fetching as a fallback
|
|
35
|
+
def size
|
|
36
|
+
options[:size] || default_size
|
|
37
|
+
end
|
|
38
|
+
|
|
39
|
+
private
|
|
40
|
+
|
|
41
|
+
def body_css_class
|
|
42
|
+
'avatar-text'
|
|
43
|
+
end
|
|
44
|
+
|
|
45
|
+
def default_html_wrapper_element
|
|
46
|
+
:div
|
|
47
|
+
end
|
|
48
|
+
|
|
49
|
+
def default_size
|
|
50
|
+
:md
|
|
51
|
+
end
|
|
52
|
+
|
|
53
|
+
def non_html_attribute_options
|
|
54
|
+
super.push(:image, :alt)
|
|
55
|
+
end
|
|
56
|
+
|
|
57
|
+
# Sizable doesn't allow components to use illegal sizes (anything other than :sm or :lg)
|
|
58
|
+
# When an illegal size is detected, it does not generate the size css class (e.g.: 'avatar-xl')
|
|
59
|
+
#
|
|
60
|
+
# nfg_ui implements more sizes than "sm" and "lg",
|
|
61
|
+
# We set #resized? updated restrictions here, instead.
|
|
62
|
+
# allowing updated size css classes to be passed to html_options
|
|
63
|
+
def resized?
|
|
64
|
+
[:sm, :md, :lg, :xl].include?(size)
|
|
65
|
+
end
|
|
66
|
+
end
|
|
67
|
+
end
|
|
68
|
+
end
|
|
69
|
+
end
|
|
@@ -3,15 +3,23 @@ module NfgUi
|
|
|
3
3
|
module Traits
|
|
4
4
|
# Shared Size traits
|
|
5
5
|
module Size
|
|
6
|
-
TRAITS = %i[lg
|
|
6
|
+
TRAITS = %i[sm md lg xl].freeze
|
|
7
7
|
|
|
8
8
|
def lg_trait
|
|
9
9
|
options[:size] = :lg
|
|
10
10
|
end
|
|
11
11
|
|
|
12
|
+
def md_trait
|
|
13
|
+
options[:size] = :md
|
|
14
|
+
end
|
|
15
|
+
|
|
12
16
|
def sm_trait
|
|
13
17
|
options[:size] = :sm
|
|
14
18
|
end
|
|
19
|
+
|
|
20
|
+
def xl_trait
|
|
21
|
+
options[:size] = :xl
|
|
22
|
+
end
|
|
15
23
|
end
|
|
16
24
|
end
|
|
17
25
|
end
|
data/lib/nfg_ui/version.rb
CHANGED
data/lib/nfg_ui.rb
CHANGED
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: nfg_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.9.
|
|
4
|
+
version: 0.9.19
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Jonathan Roehm
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2019-
|
|
12
|
+
date: 2019-10-02 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: bootstrap
|
|
@@ -492,6 +492,7 @@ files:
|
|
|
492
492
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_tooltip.scss
|
|
493
493
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/_type.scss
|
|
494
494
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_admin_bar.scss
|
|
495
|
+
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_avatar.scss
|
|
495
496
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_background_variations.scss
|
|
496
497
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_default.scss
|
|
497
498
|
- app/assets/stylesheets/nfg_ui/network_for_good/public/nfg_theme/custom/_everyday_story.scss
|
|
@@ -609,6 +610,7 @@ files:
|
|
|
609
610
|
- lib/nfg_ui/components/elements.rb
|
|
610
611
|
- lib/nfg_ui/components/elements/activity.rb
|
|
611
612
|
- lib/nfg_ui/components/elements/alert.rb
|
|
613
|
+
- lib/nfg_ui/components/elements/avatar.rb
|
|
612
614
|
- lib/nfg_ui/components/elements/badge.rb
|
|
613
615
|
- lib/nfg_ui/components/elements/breadcrumb.rb
|
|
614
616
|
- lib/nfg_ui/components/elements/breadcrumb_item.rb
|