keystone_ui 0.17.0 → 0.18.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.
- checksums.yaml +4 -4
- data/app/helpers/keystone_ui_helper.rb +6 -1
- data/lib/keystone_ui/configuration.rb +16 -2
- data/lib/keystone_ui/look_choice.rb +19 -0
- data/lib/keystone_ui/version.rb +1 -1
- data/lib/keystone_ui.rb +1 -0
- data/the_local/agents/keystone_ui-info.md +7 -0
- data/the_local/agents/keystone_ui-install.md +21 -2
- data/the_local/interface.yml +1 -0
- metadata +2 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 1a7d6bdda07417d6d7f13bde323a8fc8dd26034ff1d10ac2824f223c52cbfb92
|
|
4
|
+
data.tar.gz: 45f44c67ef941fd3434323ad6ac4f68401966f1b10c395b168f5d81ecea5aee2
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: f228e0e8d779f7c55c67f6da15ff8491a290ca0da0f5272930fa3c63059a682a071dddc76e4e8fb860812a2d3d9448a5df9478bd97eafcb961bf7cc2b79fcaf7
|
|
7
|
+
data.tar.gz: 34f974483319d1ed08c947b11bf8128777a2f690bbc71fce1cba5f680c08fbfcc77d7d4ff39bbc745287df9f13f84a5d17fe675b575e6f4235d24977eaf84a9d
|
|
@@ -46,7 +46,7 @@ module KeystoneUiHelper
|
|
|
46
46
|
end
|
|
47
47
|
|
|
48
48
|
def keystone_theme_attributes
|
|
49
|
-
keystone_theme_choice.
|
|
49
|
+
keystone_theme_choice.html_attributes.merge(keystone_look_choice.html_attributes).map { |name, value| %(#{name}="#{value}") }.join(" ").html_safe
|
|
50
50
|
end
|
|
51
51
|
|
|
52
52
|
def ui_copy_button(**args)
|
|
@@ -218,4 +218,9 @@ module KeystoneUiHelper
|
|
|
218
218
|
def keystone_theme_choice
|
|
219
219
|
KeystoneUi::ThemeChoice.new(cookies[KeystoneUi::ThemeChoice::COOKIE], supplied: KeystoneUi.configuration.supplied_theme_mode(self))
|
|
220
220
|
end
|
|
221
|
+
|
|
222
|
+
def keystone_look_choice
|
|
223
|
+
config = KeystoneUi.configuration
|
|
224
|
+
KeystoneUi::LookChoice.new(looks: config.looks.keys, default: config.default_look, supplied: config.supplied_look(self))
|
|
225
|
+
end
|
|
221
226
|
end
|
|
@@ -2,14 +2,28 @@
|
|
|
2
2
|
|
|
3
3
|
module KeystoneUi
|
|
4
4
|
class Configuration
|
|
5
|
-
attr_accessor :accent, :surface, :theme_mode_supplier
|
|
6
|
-
attr_reader :tailwind_imports, :tailwind_sources
|
|
5
|
+
attr_accessor :accent, :surface, :theme_mode_supplier, :look_supplier
|
|
6
|
+
attr_reader :tailwind_imports, :tailwind_sources, :looks, :default_look
|
|
7
7
|
|
|
8
8
|
def initialize
|
|
9
9
|
@accent = :blue
|
|
10
10
|
@surface = :zinc
|
|
11
11
|
@tailwind_imports = []
|
|
12
12
|
@tailwind_sources = []
|
|
13
|
+
@looks = {}
|
|
14
|
+
end
|
|
15
|
+
|
|
16
|
+
def default_look=(name)
|
|
17
|
+
@default_look = name&.to_s
|
|
18
|
+
end
|
|
19
|
+
|
|
20
|
+
def register_look(name, path)
|
|
21
|
+
@looks[name.to_s] = path.to_s
|
|
22
|
+
@tailwind_imports << path.to_s
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
def supplied_look(view)
|
|
26
|
+
look_supplier&.call(view)&.to_s
|
|
13
27
|
end
|
|
14
28
|
|
|
15
29
|
def supplied_theme_mode(view)
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
# frozen_string_literal: true
|
|
2
|
+
|
|
3
|
+
module KeystoneUi
|
|
4
|
+
class LookChoice
|
|
5
|
+
def initialize(looks:, default:, supplied: nil)
|
|
6
|
+
@looks = looks
|
|
7
|
+
@default = default
|
|
8
|
+
@supplied = supplied
|
|
9
|
+
end
|
|
10
|
+
|
|
11
|
+
def name
|
|
12
|
+
[ @supplied, @default ].find { |candidate| @looks.include?(candidate) }
|
|
13
|
+
end
|
|
14
|
+
|
|
15
|
+
def html_attributes
|
|
16
|
+
name ? { "data-look" => name } : {}
|
|
17
|
+
end
|
|
18
|
+
end
|
|
19
|
+
end
|
data/lib/keystone_ui/version.rb
CHANGED
data/lib/keystone_ui.rb
CHANGED
|
@@ -86,6 +86,13 @@ holds the catalog.
|
|
|
86
86
|
swipe deck. So do the navigation components: navbar, nav item, nav dropdown,
|
|
87
87
|
bottom nav, mobile header and settings link. A host imports its look after `keystone_source.css`, and a gem ships one through
|
|
88
88
|
`tailwind_imports`, both set up through the install local.
|
|
89
|
+
- **Registered looks.** Looks can also be registered by name, and each page
|
|
90
|
+
gets one: the name another gem supplies for the request, then the configured
|
|
91
|
+
default, each used only when registered. The layout's `<html>` tag carries
|
|
92
|
+
`data-look="<name>"`, and a registered look file scopes its variables to
|
|
93
|
+
`:root[data-look="<name>"]`. A host with no registered looks gets no
|
|
94
|
+
`data-look`. Registering and choosing looks is set up through the install
|
|
95
|
+
local.
|
|
89
96
|
- **Light, dark, system and custom themes.** Every component has dark-mode
|
|
90
97
|
styling. The theme is chosen in this order: the user's choice stored in a
|
|
91
98
|
cookie, then a mode another gem supplies, then light. System leaves the page
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
---
|
|
2
2
|
name: keystone_ui-install
|
|
3
|
-
description: Use to hook Keystone UI into a project — adding the gem, running the install generator to wire Tailwind, the Stimulus controllers and the layout's theme attributes, and configuring the palette, the theme mode supplier and extra Tailwind imports and sources.
|
|
3
|
+
description: Use to hook Keystone UI into a project — adding the gem, running the install generator to wire Tailwind, the Stimulus controllers and the layout's theme attributes, and configuring the palette, the theme mode supplier, registered looks and extra Tailwind imports and sources.
|
|
4
4
|
tools: Bash, Read, Edit
|
|
5
5
|
scope: UI — pages, forms, tables, navigation, dashboards
|
|
6
6
|
---
|
|
@@ -22,13 +22,18 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
22
22
|
`surface` (palette names, `:blue` and `:zinc` unless set),
|
|
23
23
|
`theme_mode_supplier` (a callable that supplies a light, dark, system or
|
|
24
24
|
custom mode),
|
|
25
|
+
`register_look` (a look's CSS file by name), `default_look` and
|
|
26
|
+
`look_supplier` (which registered look a page gets),
|
|
25
27
|
and the `tailwind_imports` and `tailwind_sources` lists (extra CSS files and
|
|
26
28
|
scan paths added to the Tailwind build).
|
|
27
29
|
- `keystone_theme_attributes` — a layout helper placed inside the `<html>` tag.
|
|
28
30
|
It writes `data-theme="light"`, `data-theme="dark"` or `data-theme="custom"`
|
|
29
31
|
for the page's mode, and writes nothing for system so the page follows the
|
|
30
32
|
operating system. The mode is the `keystone_theme` cookie's choice, then the
|
|
31
|
-
configured `theme_mode_supplier`, then light.
|
|
33
|
+
configured `theme_mode_supplier`, then light. It also writes
|
|
34
|
+
`data-look="<name>"` for the page's look: the `look_supplier`'s name, then
|
|
35
|
+
`default_look`, each used only when registered. With no look registered it
|
|
36
|
+
writes no `data-look`.
|
|
32
37
|
|
|
33
38
|
## How to use it
|
|
34
39
|
|
|
@@ -151,6 +156,9 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
151
156
|
mobile header and settings link. The keystone_ui-styles README lists every
|
|
152
157
|
variable and its default.
|
|
153
158
|
|
|
159
|
+
To offer several looks and choose one per page, register them by name in
|
|
160
|
+
step 7 rather than importing them here.
|
|
161
|
+
|
|
154
162
|
7. Write `config/initializers/keystone_ui.rb` only if one of the settings below
|
|
155
163
|
is wanted. Ask the developer about each rather than adding any by default.
|
|
156
164
|
The engine reads the configuration after initializers have run, so this file
|
|
@@ -163,6 +171,9 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
163
171
|
config.accent = :emerald
|
|
164
172
|
config.surface = :slate
|
|
165
173
|
config.theme_mode_supplier = ->(view) { view.current_user&.theme }
|
|
174
|
+
config.register_look :compact, "/absolute/path/to/compact.css"
|
|
175
|
+
config.default_look = :compact
|
|
176
|
+
config.look_supplier = ->(view) { view.current_user&.look }
|
|
166
177
|
config.tailwind_imports << "/absolute/path/to/extra.css"
|
|
167
178
|
config.tailwind_sources << "/absolute/path/to/components/**/*.{erb,rb}"
|
|
168
179
|
end
|
|
@@ -180,6 +191,14 @@ built on ViewComponent; hook it in before building any screen with those helpers
|
|
|
180
191
|
`data-theme="custom"`. The theme toggle does not offer custom, so only a
|
|
181
192
|
supplier sets it. Ask the developer which gem or code supplies custom and
|
|
182
193
|
its colors before returning it.
|
|
194
|
+
- `register_look :name, path` — registers a look file by name and appends it
|
|
195
|
+
to `tailwind_imports`, so `keystone_source.css` imports it. A look offered
|
|
196
|
+
this way scopes its variables to `:root[data-look="<name>"]` instead of
|
|
197
|
+
`:root`, so several can be imported at once.
|
|
198
|
+
- `default_look = :name` — the look a page gets when nothing else chooses one.
|
|
199
|
+
- `look_supplier` — a callable that receives the view and returns a look
|
|
200
|
+
name for the request. A name that is not registered, or `nil`, leaves the
|
|
201
|
+
page on the default look.
|
|
183
202
|
- `tailwind_imports` and `tailwind_sources` — lists to append to, never
|
|
184
203
|
assign. Each import becomes an `@import` line and each source becomes an
|
|
185
204
|
`@source` line in `keystone_source.css` on the next boot. They are for
|
data/the_local/interface.yml
CHANGED
|
@@ -64,6 +64,7 @@ sources:
|
|
|
64
64
|
- lib/generators/keystone/install_generator.rb
|
|
65
65
|
- lib/keystone_ui/configuration.rb
|
|
66
66
|
- lib/keystone_ui/theme_choice.rb
|
|
67
|
+
- lib/keystone_ui/look_choice.rb
|
|
67
68
|
- app/helpers/keystone_ui_helper.rb
|
|
68
69
|
- app/components/keystone/ui/accordion_component.rb
|
|
69
70
|
- app/components/keystone/ui/alert_component.rb
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: keystone_ui
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.18.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- Tyler Schneider
|
|
@@ -184,6 +184,7 @@ files:
|
|
|
184
184
|
- lib/keystone_ui/configuration.rb
|
|
185
185
|
- lib/keystone_ui/engine.rb
|
|
186
186
|
- lib/keystone_ui/leftover_stylesheet.rb
|
|
187
|
+
- lib/keystone_ui/look_choice.rb
|
|
187
188
|
- lib/keystone_ui/safelist.rb
|
|
188
189
|
- lib/keystone_ui/source_css.rb
|
|
189
190
|
- lib/keystone_ui/theme_choice.rb
|