bullet_train 1.32.0 → 1.33.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 (11) hide show
  1. checksums.yaml +4 -4
  2. data/app/javascript/controllers/clipboard_controller.js +1 -1
  3. data/app/views/account/invitations/_form.html.erb +2 -2
  4. data/app/views/account/memberships/_form.html.erb +2 -2
  5. data/app/views/layouts/docs.html.erb +4 -4
  6. data/app/views/layouts/public.html.erb +1 -1
  7. data/config/locales/en/base.yml +1 -0
  8. data/docs/field-partials.md +15 -1
  9. data/docs/themes.md +54 -6
  10. data/lib/bullet_train/version.rb +1 -1
  11. metadata +1 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 98e09fbe309f588d3d549b3b5b802490b3630fd95005f2466d860316c38ce112
4
- data.tar.gz: 9cd579e00d8f4c5e8c93944590bda85ddf8511f11501bb71d5a42ad1a3024e24
3
+ metadata.gz: 46fec3f6437afa98558519d9d3c78c8d62ef76f98adf20489fa86fbdddea4360
4
+ data.tar.gz: f736adc2b99e130132e29ca2490b8b5769c3561f9cdf712f8a52f7cdd3d872ed
5
5
  SHA512:
6
- metadata.gz: 70187dc9eb184db7fa8b7291297558fec0ce3411974a534fe008e7a3ab1d65af69b6c1f2569bbb77a64736ccaf79ac7cddf184d1d9833176f1e9595a33a32bb7
7
- data.tar.gz: 06f616f253c27690dc07f24c9a7f5f39f0bdf7a435280c1bda3f48a6d363624642d038d08ef8f088d83c66f31399bffc1d05a1b1344bb68d4243867b03f200d5
6
+ metadata.gz: 7cdafd0a4582cec14721c4363f8372639e232168eabd10dd4ead60876c157a18b445eb29049bf8bd4acaa3bbf216a24a04a9669c1a940013f65bdd490d9a8acf
7
+ data.tar.gz: 3892477bdaa2174461dae69f6b78e947460e7cb3b263c85b1c2d920ada30486d1c587e043f0e6429eb90db90fd920e81c5778242457c4369afd7123787b79c7e
data/app/javascript/controllers/clipboard_controller.js CHANGED
@@ -9,7 +9,7 @@ export default class extends Controller {
9
9
  document.execCommand('copy')
10
10
  this.buttonTarget.innerHTML = '<i id="copied" class="fas fa-check w-4 h-4 block text-green-600"></i>'
11
11
  setTimeout(function () {
12
- document.getElementById('copied').innerHTML = '<i class="far fa-copy w-4 h-4 block text-slate-600"></i>'
12
+ document.getElementById('copied').innerHTML = '<i class="far fa-copy w-4 h-4 block text-base-600"></i>'
13
13
  }, 1500)
14
14
  }
15
15
  }
data/app/views/account/invitations/_form.html.erb CHANGED
@@ -23,10 +23,10 @@
23
23
  <% Membership.assignable_roles.each do |role| %>
24
24
  <% if current_membership.can_manage_role?(role) %>
25
25
  <div class="flex items-top">
26
- <%= fields.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-primary-500 focus:ring-primary-500 border-slate-300 rounded mt-0.5"}, role.id, nil %>
26
+ <%= fields.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-primary-500 focus:ring-primary-500 border-base-300 rounded mt-0.5"}, role.id, nil %>
27
27
  <label for="invitation_membership_attributes_role_ids_<%= role.id %>" class="ml-2 block select-none">
28
28
  <span><%= t('invitations.form.invite_as', role_key: t("memberships.fields.role_ids.options.#{role.key}.label")) %></span>
29
- <div class="mt-0.5 text-slate-400 font-light leading-normal">
29
+ <div class="mt-0.5 text-base-400 font-light leading-normal">
30
30
  <%= t("memberships.fields.role_ids.options.#{role.key}.description") %>
31
31
  </div>
32
32
  </label>
data/app/views/account/memberships/_form.html.erb CHANGED
@@ -26,10 +26,10 @@
26
26
  <% Membership.assignable_roles.each do |role| %>
27
27
  <% if role.manageable_by?(current_membership.roles) %>
28
28
  <div class="flex items-top">
29
- <%= form.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-primary-500 focus:ring-primary-500 border-slate-300 rounded mt-0.5"}, role.id, nil %>
29
+ <%= form.check_box :role_ids, {multiple: true, class: "h-4 w-4 text-primary-500 focus:ring-primary-500 border-base-300 rounded mt-0.5"}, role.id, nil %>
30
30
  <label for="membership_role_ids_<%= role.id %>" class="ml-2 block select-none">
31
31
  <%= t('.grant_privileges_of', role_key: t(".fields.role_ids.options.#{role.key}.label")) %>
32
- <div class="mt-0.5 text-slate-400 font-light leading-normal">
32
+ <div class="mt-0.5 text-base-400 font-light leading-normal">
33
33
  <%= t(".fields.role_ids.options.#{role.key}.description") %>
34
34
  </div>
35
35
  </label>
data/app/views/layouts/docs.html.erb CHANGED
@@ -34,7 +34,7 @@
34
34
 
35
35
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@docsearch/css@3"/>
36
36
  </head>
37
- <body class="<%= BulletTrain::Themes::Light.background || "bg-gradient-to-br from-secondary-200 to-primary-400 dark:from-primary-900 dark:to-primary-600" %> text-slate-700 text-sm font-normal dark:text-slate-300">
37
+ <body class="<%= BulletTrain::Themes::Light.background || "bg-gradient-to-br from-secondary-200 to-primary-400 dark:from-primary-900 dark:to-primary-600" %> text-base-700 text-sm font-normal dark:text-base-300">
38
38
  <div class="md:p-5">
39
39
  <div class="min-h-screen md:h-auto overflow-hidden md:rounded-lg flex shadow"
40
40
  data-controller="mobile-menu"
@@ -357,16 +357,16 @@
357
357
  </div>
358
358
  </div>
359
359
 
360
- <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-primary-700 to-primary-800 dark:from-slate-800 dark:to-slate-800">
360
+ <div class="hidden lg:flex lg:flex-shrink-0 overflow-y-auto bg-gradient-to-b from-primary-700 to-primary-800 dark:from-base-800 dark:to-base-800">
361
361
  <div class="w-64">
362
362
  <%= menu %>
363
363
  </div>
364
364
  </div>
365
365
 
366
- <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-slate-100 dark:bg-slate-800 lg:border-l dark:border-slate-500">
366
+ <div class="flex flex-col w-0 flex-1 overflow-y-auto bg-base-100 dark:bg-base-800 lg:border-l dark:border-base-500">
367
367
  <main class="flex-1 relative z-0 overflow-y-auto focus:outline-none" tabindex="0">
368
368
 
369
- <button class="lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-slate-500 hover:text-slate-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue"
369
+ <button class="lg:hidden h-12 w-12 ml-1 flex-none inline-flex items-center justify-center rounded-md text-base-500 hover:text-base-900 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-blue"
370
370
  data-action="mobile-menu#open"
371
371
  >
372
372
  <span class="sr-only">Open Application Menu</span>
data/app/views/layouts/public.html.erb CHANGED
@@ -4,7 +4,7 @@
4
4
  <%= render 'shared/layouts/head' %>
5
5
  </head>
6
6
 
7
- <body class="min-h-screen <%= BulletTrain::Themes::Light.background %> text-slate-700 text-sm font-normal dark:text-slate-300">
7
+ <body class="min-h-screen <%= BulletTrain::Themes::Light.background %> text-base-700 text-sm font-normal dark:text-base-300">
8
8
  <%= yield %>
9
9
  </body>
10
10
  </html>
data/config/locales/en/base.yml CHANGED
@@ -69,6 +69,7 @@ en:
69
69
  notifications:
70
70
  not_found: not found
71
71
  all_fields_required: All of these fields are required.
72
+ validation_error: Please correct the errors below.
72
73
  dates:
73
74
  today: Today
74
75
  day:
data/docs/field-partials.md CHANGED
@@ -181,12 +181,26 @@ rails generate model Project team:references multiple_buttons:jsonb
181
181
  ## Formating `date` and `date_and_time`
182
182
  After Super Scaffolding a `date` or `date_and_time` field, you can pass a format for the object like so:
183
183
 
184
- ```
184
+ ```erb
185
185
  <%= render 'shared/attributes/date', attribute: date_object, format: :short %>
186
186
  ```
187
187
 
188
188
  Please refer to the [Ruby on Rails documentation](https://guides.rubyonrails.org/i18n.html#adding-date-time-formats) for more information.
189
189
 
190
+ ## Setting a `language` for `code_editor` fields
191
+
192
+ When rendering the `code_editor` attribute you can pass in a language to affect syntax highlighting and what not.
193
+
194
+ ```erb
195
+ <%= render 'shared/fields/code_editor', method: :source, language: "ruby" %>
196
+ ```
197
+
198
+ During Super Scaffolding you can pass in the language when declaring the attribute and it will be added to your form:
199
+
200
+ ````
201
+ rails generate super_scaffold:field Project source:code_editor{language=ruby}
202
+ ````
203
+
190
204
  ## Dynamic Forms and Dependent Fields
191
205
 
192
206
  To dynamically update your forms on field changes, Bullet Train introduces two new concepts:
data/docs/themes.md CHANGED
@@ -1,5 +1,59 @@
1
1
  # Themes
2
2
 
3
+ ## Changing your color scheme
4
+
5
+ The first thing you may want to do is to change the color scheme for your app. The place to do that is in `config/initializers/theme.rb`.
6
+
7
+ There you can set a primary `color` value, as well as a `secondary_color` if you want to add some variation.
8
+ If you don't set a `secondary_color` it will be set the same as the primary `color`.
9
+
10
+ ```ruby
11
+ # The application's main color scheme.
12
+ BulletTrain::Themes::Light.color = :green
13
+ BulletTrain::Themes::Light.secondary_color = :red
14
+ ```
15
+
16
+ Any of the [default color schemes provided by Tailwind CSS](https://v3.tailwindcss.com/docs/customizing-colors#default-color-palette) should work for the primary and secondary colors.
17
+
18
+ ### Dark and Light Mode
19
+
20
+ Bullet Train themes include support for both dark and light color schemes. Users can toggle between dark mode, light mode, or system preference in their Account Details (accessible from the user menu). This preference is per-device and stored in the browser's `LocalStorage`.
21
+
22
+ You can force your app to either light or dark mode by setting the `force_color_scheme_to` option in `theme.rb`.
23
+
24
+ ```ruby
25
+ # Force the color scheme to :light or :dark.
26
+ # Defaults to nil, which offers users the ability to choose their preference in Account Details.
27
+ BulletTrain::Themes::Light.force_color_scheme_to = :light
28
+ ```
29
+
30
+ If you're building custom components that need to respond to color scheme changes, see [Responding to Color Scheme Changes](/docs/javascript.md#responding-to-color-scheme-changes) in the JavaScript documentation.
31
+
32
+ ### Changing the background color
33
+
34
+ <div class="rounded-md border bg-amber-100 border-amber-200 py-4 px-5 mb-3 not-prose">
35
+ <h3 class="text-sm text-amber-800 font-light mb-2">
36
+ Note: This section is likely to change soon. The following only applies to apps that are upgraded to Bullet Train `1.33.0` or later.
37
+ </h3>
38
+ </div>
39
+
40
+ Starting in Bullet Train version `1.33.0` we've added a way to change the `base` color, which affects the background color of many elements.
41
+
42
+ To customize this you can add a block like this to `tailwind.config.js`:
43
+
44
+ ```javascript
45
+ themeConfig.theme.extend.colors = ({colors}) => ({
46
+ base: colors.stone,
47
+ primary: colors.blue,
48
+ secondary: colors.blue,
49
+ })
50
+ ```
51
+
52
+ Here you need to include `primary` and `secondary` as well as `base`. The settings in `tailwind.config.js` will **mostly** clobber the settings
53
+ in `theme.rb`, but not entirely. So for the best results you should make sure that those two files agree about the primary and secondary colors.
54
+
55
+ ## The Theme Subsystem
56
+
3
57
  Bullet Train has a theme subsystem designed to allow you the flexibility to either extend or completely replace the stock “Light” UI theme.
4
58
  To reduce duplication of code across themes, Bullet Train implements the following three packages:
5
59
  1. `bullet_train-themes`
@@ -132,12 +186,6 @@ This allows the theme engine to resolve which theme in the inheritance chain wil
132
186
 
133
187
  You're going to have to call your theme something and there are practical reasons to not call it something generic. If you're pursuing a heavily customized design, consider allowing the designer or designers who are creating the look-and-feel of your application to name their own masterpiece. Giving it a distinct name will really help differentiate things when you're ready to start introducing additional facets to your application or a totally new look-and-feel down the road.
134
188
 
135
- ## Dark and Light Mode
136
-
137
- Bullet Train themes include support for both dark and light color schemes. Users can toggle between dark mode, light mode, or system preference in their Account Details (accessible from the user menu). This preference is per-device and stored in the browser's `LocalStorage`.
138
-
139
- If you're building custom components that need to respond to color scheme changes, see [Responding to Color Scheme Changes](/docs/javascript.md#responding-to-color-scheme-changes) in the JavaScript documentation.
140
-
141
189
  ## Additional Themes Documentation
142
190
 
143
191
  * [Installing Bullet Train Themes on Other Rails Projects](/docs/themes/on-other-rails-projects.md)
data/lib/bullet_train/version.rb CHANGED
@@ -1,3 +1,3 @@
1
1
  module BulletTrain
2
- VERSION = "1.32.0"
2
+ VERSION = "1.33.0"
3
3
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: bullet_train
3
3
  version: !ruby/object:Gem::Version
4
- version: 1.32.0
4
+ version: 1.33.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - Andrew Culver